Skip to content

Commit

Permalink
fix: add confirmation checkbox
Browse files Browse the repository at this point in the history
  • Loading branch information
@jacovinus
jacovinus committed Dec 20, 2023
1 parent ff1a454 commit f68de3a
Show file tree
Hide file tree
Showing 2 changed files with 156 additions and 45 deletions.
143 changes: 126 additions & 17 deletions packages/main/plugins/Cardinality/CardinalityDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,25 @@ import {
} from "../queryhistory/styled";
import DeleteOutlineOutlinedIcon from "@mui/icons-material/DeleteOutlineOutlined";
import {
Checkbox,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
FormControlLabel,
FormGroup,
Tooltip,
Typography,
} from "@mui/material";

import { ThemeProvider } from "@mui/styles";
import styled from "@emotion/styled";
import { DialogStyles } from "../settingsdialog/SettingsDialog";
import useTheme from "../../theme/useTheme";
import { queryUpdater } from "./helpers";
import useCardinalityStore from "./store/CardinalityStore";
import { QrynTheme } from "@ui/theme/types";

const AlertCont = styled.div`
background: ${({ theme }: any) => theme.shadow};
Expand Down Expand Up @@ -48,7 +54,81 @@ export type CardinalityDialogProps = {
isLoading: boolean;
isCustom?: boolean;
query?: string;
labelsRelated?: string[];
};

export type LabelRelatedProps = {
label: string;
theme: QrynTheme;
};
export function LabelRelated({ label, theme }: LabelRelatedProps) {
return (
<p
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
padding: "3px 10px",
borderRadius: "3px",
margin: "2px",
fontWeight: "bold",
color: theme.primary,
background: theme.deep,
}}
>
{label}
</p>
);
}

export function CheckboxWithLabel({
label,
checked,
handleChange,
theme,
text,
}) {
return (
<FormGroup>
<FormControlLabel
style={{
padding: "0",
marginRight: 0,
cursor: !label ? "not-allowed" : "pointer",
display: "flex",
alignItems: "center",
marginTop: "20px",
}}
checked={checked}
onChange={handleChange}
control={
<Checkbox
style={{
paddingRight: "0px",
marginRight: "3px",
}}
sx={{
"& .MuiSvgIcon-root": {
fontSize: 18,
},
}}
disabled={!label}
/>
}
label={
<Typography
style={{
fontSize: "14px",
color: theme.contrast,
}}
>
{text}
</Typography>
}
/>
</FormGroup>
);
}

export default function CardinalityDialog({
clearFingerPrints,
Expand All @@ -58,9 +138,10 @@ export default function CardinalityDialog({
isLoading,
isCustom = false,
query = "",
labelsRelated = [],
}: CardinalityDialogProps) {
const [open, setOpen] = useState(false);

const [confirmRemove, setConfirmRemove] = useState(false);
const theme = useTheme();
const { focusLabel, timeSeriesSelector: match } = useCardinalityStore();

Expand All @@ -71,6 +152,10 @@ export default function CardinalityDialog({
const handleClose = () => {
setOpen(false);
};

const handleConfirm = () => {
setConfirmRemove((prev) => !prev);
};
async function handleClearFingerprints() {
//

Expand All @@ -89,12 +174,15 @@ export default function CardinalityDialog({
// this should give a response from the server

setOpen(false);

}
return (
<ThemeProvider theme={theme}>
<div>
<Tooltip title={`Delete fingerprints for ${label !== "" ? label : query}`}>
<Tooltip
title={`Delete fingerprints for ${
label !== "" ? label : query
}`}
>
<div
style={{
display: "flex",
Expand Down Expand Up @@ -127,23 +215,44 @@ export default function CardinalityDialog({
>
<AlertCont>
<DialogTitle id="alert-dialog-title">
{
isCustom ? (<>
Are you sure you want to clear the{" "}
<span>{value}</span> fingerprints with query {query}?
</>) : (<>
Are you sure you want to clear the{" "}
<span>{value}</span> fingerprints with label{" "}
<span>{label}</span> from <span>{source}</span>?
</>)
}

{isCustom ? (
<>
Are you sure you want to clear the{" "}
<span>{value}</span> fingerprints with query{" "}
{query}?
</>
) : (
<>
Are you sure you want to clear the{" "}
<span>{value}</span> fingerprints with label{" "}
<span>{label}</span> from{" "}
<span>{source}</span>?
</>
)}
</DialogTitle>

<DialogContent>
<DialogContentText id="alert-dialog-description">
Click <em>Delete Fingerprints</em> to delete
your fingerprints permanently
<p style={{ marginTop: "10px" }}>
Click <em>Delete Fingerprints</em> to delete
your fingerprints permanently
</p>
<p style={{ margin: "6px" }}>
<em>
Note that you will also be removing all
fingerprints with labels related.
</em>
</p>

<CheckboxWithLabel
checked={confirmRemove}
handleChange={handleConfirm}
theme={theme}
label={true}
text={
"I want to remove all fingerprints related to this labels in selected time range."
}
/>
</DialogContentText>
</DialogContent>
<DialogActions>
Expand All @@ -152,7 +261,7 @@ export default function CardinalityDialog({
</DialogCancelButton>
<DialogConfirmButton
onClick={handleClearFingerprints}
active={!isLoading}
active={!isLoading && confirmRemove}
autoFocus
>
{!isLoading
Expand Down
58 changes: 30 additions & 28 deletions packages/main/plugins/queryhistory/styled.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,24 +15,24 @@ import { DatePickerButton } from "@ui/main/components/StatusBar/styled";
export const StyledDrawer: any = styled((props: any) => (
<Drawer
anchor={"bottom"}
style={{ maxHeight: "250px", }}
style={{ maxHeight: "250px" }}
variant={"persistent"}
{...props}
/>
))(({ theme }) => ({
"& .MuiPaper-root": {
borderTop:`1px solid ${theme.accentNeutral}`,
borderTop: `1px solid ${theme.accentNeutral}`,
},
}));

export const TabsContainer: any = styled(Tabs)`
height: "320px";
background: ${({theme}: any) => theme.deep};
background: ${({ theme }: any) => theme.deep};
`;
export const Tab: any = styled(TabUnstyled)`
color: ${({theme}: any) => theme.contrast};
background: ${({theme}: any) => theme.neutral};
border:1px solid ${(props: any)=>props.theme.accentNeutral};
color: ${({ theme }: any) => theme.contrast};
background: ${({ theme }: any) => theme.neutral};
border: 1px solid ${(props: any) => props.theme.accentNeutral};
cursor: pointer;
font-size: 13px;
background-color: transparent;
Expand Down Expand Up @@ -110,9 +110,9 @@ export const TabHeaderContainer: any = styled.div`
font-size: 13px;
display: flex;
align-items: center;
color: ${({theme}: any) => theme.contrast};
color: ${({ theme }: any) => theme.contrast};
justify-content: space-between;
background: ${({theme}: any) => theme.shadow};
background: ${({ theme }: any) => theme.shadow};
height: 37px;
`;
export const TabPanel: any = styled(TabPanelUnstyled)`
Expand All @@ -133,7 +133,7 @@ export const EmptyHistory: any = styled.div`
display: flex;
align-items: center;
justify-content: center;
color: ${({theme}: any) => theme.contrast};
color: ${({ theme }: any) => theme.contrast};
font-size: 14px;
flex: 1;
padding: 20px;
Expand All @@ -143,29 +143,28 @@ export const EmptyHistory: any = styled.div`
export const QueryHistoryContainer: any = styled.div`
height: 250px;
overflow-y: auto;
color: ${({theme}: any) => theme.contrast};
background: ${({theme}: any) => theme.lightActiveBg};
color: ${({ theme }: any) => theme.contrast};
background: ${({ theme }: any) => theme.lightActiveBg};
&.starredCont {
height: 210px;
}
&::-webkit-scrollbar {
width: 5px;
background: ${({theme}: any) => theme.neutral};
background: ${({ theme }: any) => theme.neutral};
}
&::-webkit-scrollbar-corner {
background: transparent;
}
}
&::-webkit-scrollbar-thumb {
border-radius: 5px;
background: ${({theme}: any) => theme.alphaPlusNeutral};
background: ${({ theme }: any) => theme.alphaPlusNeutral};
}
`;


export const HistoryButton: any = styled(DatePickerButton)`
padding: 3px 6px;
background: ${({ theme }: any) => theme.neutral};
border: 1px solid ${(props: any)=>props.theme.accentNeutral};
border: 1px solid ${(props: any) => props.theme.accentNeutral};
border-radius: 3px;
border: none;
color: ${({ theme }: any) => theme.contrast};
Expand All @@ -185,7 +184,7 @@ export const SettingItemContainer: any = styled.div`
justify-content: space-between;
padding: 20px;
background: ${({ theme }: any) => theme.neutral};
border:1px solid ${(props: any)=>props.theme.accentNeutral};
border: 1px solid ${(props: any) => props.theme.accentNeutral};
margin: 10px;
border-radius: 3px;
& div {
Expand All @@ -195,7 +194,7 @@ export const SettingItemContainer: any = styled.div`
}
& small {
font-size: 12px;
color: ${({theme}: any) => theme.contrast};
color: ${({ theme }: any) => theme.contrast};
line-height: 1.5;
margin-bottom: 10px;
}
Expand All @@ -217,7 +216,6 @@ export const SubmitButton: any = styled(HistoryButton)`
}
.open-text {
display: none;
}
}
`;
Expand All @@ -241,19 +239,23 @@ export const StyledCloseButton: any = styled(HistoryButton)`

export const DialogCancelButton: any = styled(HistoryButton)`
background: ${({ theme }: any) => theme.neutral};
border:1px solid ${(props: any)=>props.theme.accentNeutral};
border: 1px solid ${(props: any) => props.theme.accentNeutral};
padding: 8px 16px;
`;
export const DialogConfirmButton: any = styled(HistoryButton)`
background: ${({ theme }: any) => theme.primary};
color:${({theme}: any) => theme.maxContrast};
background: ${({ theme, active }: any) =>
active ? theme.primary : theme.shadow};
color: ${({ theme, active }: any) =>
active ? theme.maxContrast : theme.contrast};
padding: 8px 16px;
cursor: ${({ active }) => (active ? "pointer" : "not-allowed")};
pointer-events: ${({ active }) => (active ? "auto" : "none")};
`;

export const FilterInput: any = styled.input`
color: ${({theme}: any) => theme.contrast};
color: ${({ theme }: any) => theme.contrast};
background: ${({ theme }: any) => theme.deep};
border:none;
border: none;
height: 21px;
margin: 0px 10px 0px 0px;
padding: 0px;
Expand All @@ -269,10 +271,10 @@ export const FilterInput: any = styled.input`
export const RowData: any = styled.span`
flex: 1;
font-family: monospace;
display:flex;
display: flex;
align-items: center;
font-size: "13px";
color: ${({theme}: any) => theme.contrast};
color: ${({ theme }: any) => theme.contrast};
white-space: nowrap;
padding: 4px 0px;
overflow: hidden;
Expand All @@ -288,7 +290,7 @@ export const LinkParams: any = styled.div`
}
.inline-params {
align-items: center;
display: ${(props: any) => props.open ? "none" : "grid"};
display: ${(props: any) => (props.open ? "none" : "grid")};
flex: 1;
grid-template-columns: 1fr 0.25fr 0.25fr auto;
margin-right: 5px;
Expand All @@ -301,7 +303,7 @@ export const LinkParams: any = styled.div`
border: none;
}
.block-params {
display: ${(props: any) => props.open ? "flex" : "none"};
display: ${(props: any) => (props.open ? "flex" : "none")};
flex-direction: column;
flex: 1;
p {
Expand Down

0 comments on commit f68de3a

Please sign in to comment.