Merge pull request #458 from metrico/fix/cardinality_deletion_issues

fix: Cardinality Deletion Issues

.gitignore

@@ -1,4 +1,6 @@
 /node_modules/*
 dist
 server
-*.cookie
+.env
+*.cookie
+packages/main/.env

packages/main/.gitignore

@@ -23,5 +23,4 @@ dist-ssr
 *.sln
 *.sw?
 *.env
-#turbo generated cookie files
 *.cookie

packages/main/plugins/Cardinality/CardinalityDialog.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import {
     DialogCancelButton,
     DialogConfirmButton,
@@ -14,7 +14,6 @@ import {
     FormControlLabel,
     FormGroup,
     Tooltip,
-    Typography,
 } from "@mui/material";
 
 import { ThemeProvider } from "@mui/styles";
@@ -116,14 +115,14 @@ export function CheckboxWithLabel({
                     />
                 }
                 label={
-                    <Typography
+                    <span
                         style={{
                             fontSize: "14px",
                             color: theme.contrast,
                         }}
                     >
                         {text}
-                    </Typography>
+                    </span>
                 }
             />
         </FormGroup>
@@ -138,13 +137,22 @@ export default function CardinalityDialog({
     isLoading,
     isCustom = false,
     query = "",
-    labelsRelated = [],
+   // labelsRelated = [],
 }: CardinalityDialogProps) {
     const [open, setOpen] = useState(false);
     const [confirmRemove, setConfirmRemove] = useState(false);
+    const [queryMatchText, setQueryMatchText] = useState("");
     const theme = useTheme();
     const { focusLabel, timeSeriesSelector: match } = useCardinalityStore();
 
+    useEffect(() => {
+        // this should be only if open
+        if (open) {
+            const matchText = queryUpdater[source]({ query: label, match });
+            setQueryMatchText(matchText);
+        }
+    }, [open]);
+
     const handleClickOpen = () => {
         setOpen(true);
     };
@@ -222,27 +230,28 @@ export default function CardinalityDialog({
                                     {query}?
                                 </>
                             ) : (
+                                // this is the one that should match the query
                                 <>
                                     Are you sure you want to clear the{" "}
-                                    <span>{value}</span> fingerprints with label{" "}
-                                    <span>{label}</span> from{" "}
-                                    <span>{source}</span>?
+                                    <span>{value}</span> fingerprints with{" "}
+                                    {queryMatchText} request?
                                 </>
                             )}
                         </DialogTitle>
 
                         <DialogContent>
                             <DialogContentText id="alert-dialog-description">
-                                <p style={{ marginTop: "10px" }}>
+                                <span style={{ marginTop: "10px" }}>
                                     Click <em>Delete Fingerprints</em> to delete
                                     your fingerprints permanently
-                                </p>
-                                <p style={{ margin: "6px" }}>
+                                </span>
+                                <br />
+                                <span style={{ margin: "6px" }}>
                                     <em>
                                         Note that you will also be removing all
                                         fingerprints with labels related.
                                     </em>
-                                </p>
+                                </span>
 
                                 <CheckboxWithLabel
                                     checked={confirmRemove}

packages/main/plugins/Cardinality/Configurator.tsx

@@ -38,14 +38,14 @@ const Configurator: React.FC<ConfiguratorProps> = ({
         onKeyDownFocusLabel,
         onLimitEntriesChange,
         onKeyDownLimitEntries,
-        onQueryHistoryChange,
+        onQueryHistoryChange,///
         onFocusHistoryChange,
         onLimitHistoryChange,
         query,
         focus,
         limit,
         totalSeries,
-        reset,
+       reset,
         date,
     } = useConfigurator({ setHistoryItem });
 
@@ -56,7 +56,7 @@ const Configurator: React.FC<ConfiguratorProps> = ({
     const { setTimeSeriesSelector, setFocusLabel, setLimitEntries, isLoading } =
         useCardinalityStore();
     const handleReset = () => {
-        reset();
+        reset()
         localStorage.setItem("labelValuePairs", "");
         handleCardinalityRequest({
             match: "",

packages/main/plugins/Cardinality/DayPicker.tsx

@@ -108,6 +108,7 @@ export default function PickerMenu() {
     const handleSelect = (dateSelected: Date) => {
         setSelected(() => formatUTC(dateSelected));
         setDate(dayjs(formatUTC(dateSelected)).format(DATE_FORMAT));
+        localStorage.setItem("currentCardinalityDate", JSON.stringify({value: dayjs(formatUTC(dateSelected)).format(DATE_FORMAT)}))
         setAnchorEl(null);
     };
 

packages/main/plugins/Cardinality/helpers.tsx

@@ -68,9 +68,9 @@ const getSeriesArraySelector = (labelsArray: string[]): string => {
 };
 
 interface QueryUpdaterArgs {
-    query: string;
-    focusLabel: string;
-    match: string;
+    query?: string;
+    focusLabel?: string;
+    match?: string;
 }
 
 export type QueryUpdater = {
@@ -90,13 +90,16 @@ export const queryUpdater: QueryUpdater = {
     seriesCountByFocusLabelValue: ({ query, focusLabel }): string => {
         return getSeriesSelector(focusLabel, query);
     },
-    seriesCountByLabelValuePair: ({ query }): string => {
+    seriesCountByLabelValuePair: ({ query, match }): string => {
+
         let previous_match;
 
         try {
             const prev = localStorage.getItem("labelValuePairs");
             if (prev) {
                 previous_match = prev;
+            } else if(match && match !== ""){
+                previous_match = match
             } else {
                 previous_match = "";
             }
@@ -109,7 +112,7 @@ export const queryUpdater: QueryUpdater = {
         if (previous_match && !previous_match.includes(query)) {
             queryStr = `${previous_match} ${query}`;
 
-            localStorage.setItem("labelValuePairs", queryStr);
+            //localStorage.setItem("labelValuePairs", queryStr);
         } else if (previous_match && previous_match.includes(query)) {
             let prevArray = previous_match.split(" ");
 
@@ -119,11 +122,11 @@ export const queryUpdater: QueryUpdater = {
 
             queryStr = joint;
 
-            localStorage.setItem("labelValuePairs", joint);
+           localStorage.setItem("labelValuePairs", joint);
         } else if (previous_match === "") {
             queryStr = query;
-
-            localStorage.setItem("labelValuePairs", queryStr);
+            
+           localStorage.setItem("labelValuePairs", queryStr);
         }
 
         let labelsArray = queryStr.split(" ");

packages/main/plugins/Cardinality/store/CardinalityStore.tsx

@@ -57,18 +57,44 @@ type CardinalityState = {
     setTsdbStatus: (tsdbStatus: any) => void;
 };
 
+const prevData = () => {
+    let timeSeriesSelector = "";
+    let date = dayjs().format(DATE_FORMAT);
+    try {
+        const local = JSON.parse(localStorage.getItem("cardinalityHistory"));
+        if (local && local?.length > 0) {
+            timeSeriesSelector = local[local?.length - 1].value;
+        }
+    } catch (e) {
+        timeSeriesSelector = "";
+    }
+
+    try {
+        const localDate = JSON.parse(
+            localStorage.getItem("currentCardinalityDate")
+        );
+        if (localDate && localDate.value) {
+            date = localDate.value;
+        }
+    } catch (e) {
+        date = dayjs().format(DATE_FORMAT);
+    }
+
+    return { timeSeriesSelector, date };
+};
+
 const initialData = {
     total: { amount: 0, prev: 0, diff: 0, quota: 0 },
 
-    date: dayjs().format(DATE_FORMAT),
+    date: prevData()["date"],
 
     timeRange: {
         end: toTimeSeconds(new Date()),
         start: timeMinusOneDay(new Date()),
     },
     responseType: ResponseEnum.NODE,
     isUpdating: false,
-    timeSeriesSelector: "",
+    timeSeriesSelector: prevData()["timeSeriesSelector"],
     focusLabel: "",
     limitEntries: 10,
     deletedQueries: [],

packages/main/plugins/Cardinality/useConfigurator.tsx

@@ -53,6 +53,12 @@ const {handleCardinalityRequest} = useCardinalityRequest();
         }
     };
 
+    const onReset = () => {
+       reset()
+       setHistoryItem("timeSeriesSelector", "");
+
+    }
+
     const onFocusLabeChange = (e: any) => {
         setFocus(() => e.target.value);
     };
@@ -82,7 +88,6 @@ const {handleCardinalityRequest} = useCardinalityRequest();
     const onQueryHistoryChange = (e: ChangeEvent<HTMLSelectElement>) => {
         e.preventDefault();
         setTimeSeriesSelector(e.target.innerText);
-
         handleCardinalityRequest({match:e.target.innerText});
     };
 
@@ -114,6 +119,7 @@ const {handleCardinalityRequest} = useCardinalityRequest();
         limit,
         totalSeries,
         reset,
+        onReset,
         date
     }