Merge pull request #382 from metrico/fix/cardinality_dashboard_ui_bugs

Fix/cardinality dashboard UI bugs
metrico · Dec 15, 2023 · 73bc605 · 73bc605
2 parents 580f561 + 5b5f740
commit 73bc605
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 20 deletions.
diff --git a/packages/main/plugins/Cardinality/ConfigContainerStyles.tsx b/packages/main/plugins/Cardinality/ConfigContainerStyles.tsx
@@ -72,7 +72,7 @@ export const ConfigContainerStyles = (theme: any) => css`
             height: 30px;
             transition: 0.35s all;
             background: ${theme.primaryAccent};
-            color: ${theme.contrast};
+            color: ${theme.maxContrast};
             padding: 4px 6px;
             border-radius: 3px;
             border: 1px solid ${theme.primary};

diff --git a/packages/main/plugins/Cardinality/DayPicker.tsx b/packages/main/plugins/Cardinality/DayPicker.tsx
@@ -61,20 +61,20 @@ export const MenuStyles = (theme: any) => ({
     "& .icon": {
         fontSize: "16px",
         marginRight: "4px",
-        color: `${theme.contrast}`,
+        color: `${theme.maxContrast}`,
     },
     "& .item": {
         fontSize: "12px",
-        color: `${theme.contrast}`,
+        color: `${theme.maxContrast}`,
     },
     ".rdp-day_selected, .rdp-day_selected:focus-visible, .rdp-day_selected:hover":
         {
             background: `${theme.primary}`,
-            color: `${theme.contrast}`,
+            color: `${theme.maxContrast}`,
         },
     "& .rdp-day_selected : hover": {
         background: `${theme.primary}`,
-        color: `${theme.contrast}`,
+        color: `${theme.maxContrast}`,
     },
 });
 
@@ -139,7 +139,7 @@ export default function PickerMenu() {
                         size="small"
                         sx={{
                             ml: 2,
-                            color: `${theme.contrast}`,
+                            color: `${theme.maxContrast}`,
                             background: `${theme.primaryAccent}`,
                             "&.MuiIconButton-root": {
                                 border: `1px solid ${theme.primary}`,

diff --git a/packages/main/plugins/Cardinality/helpers.tsx b/packages/main/plugins/Cardinality/helpers.tsx
@@ -18,6 +18,9 @@ export const getValuesArrayToString = (values: string[]): string => {
     return values?.map((value) => `\"${value}\"`).join(",");
 };
 
+const labelsFreq = (arr: string[]) =>
+    arr.reduce((cnt, cur) => ((cnt[cur] = cnt[cur] + 1 || 1), cnt), {});
+
 /**
  *
  * @param labelsArray
@@ -31,7 +34,26 @@ const getSeriesArraySelector = (labelsArray: string[]): string => {
 
     let LabelsString = "{";
     let labelslength = labelsArray.length;
+
+    let lsarray = [];
+    // generate labels array splitting by equals or non equals
+    for (let i = 0; i < labelslength; i++) {
+        const [label] = labelsArray[i].split(/(=|!=)/);
+        lsarray.push(label);
+    }
+    // check for frequency of same label
+    const labelsFrequency = labelsFreq(lsarray);
+
     for (let i = 0; i < labelslength; i++) {
+        let currentLabel = lsarray[i];
+        // check if non equals label is hit and another one in the room is present
+        if (
+            labelsArray[i].includes("!=") &&
+            labelsFrequency[currentLabel] > 1
+        ) {
+            continue;
+        }
+
         const [lb, val] = labelsArray[i].split("=");
 
         LabelsString += `${lb}=\"${val}\"`;
@@ -60,7 +82,10 @@ export const queryUpdater: QueryUpdater = {
         return getSeriesSelector("__name__", query);
     },
     seriesCountByLabelName: ({ query }): string => {
-        return `{${query}!=""}`;
+        const queryStr = `{${query}!=""}`;
+        localStorage.setItem("labelValuePairs", `${query}!=`);
+
+        return queryStr;
     },
     seriesCountByFocusLabelValue: ({ query, focusLabel }): string => {
         return getSeriesSelector(focusLabel, query);
@@ -229,7 +254,7 @@ export const useDataSourceData = (type: string) => {
 
     const isAuth = authData.basicAuth.value;
 
-    let user_pass= {u: '', p:''}
+    let user_pass = { u: "", p: "" };
 
     if (isAuth) {
         let [user, password] = authData.fields.basicAuth;

diff --git a/packages/main/plugins/settingsmenu/MainMenu.tsx b/packages/main/plugins/settingsmenu/MainMenu.tsx
@@ -39,7 +39,7 @@ export const ButtonMenuStyles = (theme: QrynTheme) => ({
 });
 
 export default function MainMenu() {
-    const {key} = useLocation()
+    const { key } = useLocation();
     const showDs = useSelector((store: any) => store.showDataSourceSetting);
     const currentUserRole = useSelector((store: any) => store.currentUser.role);
     const dispatch: any = useDispatch();
@@ -52,17 +52,19 @@ export default function MainMenu() {
         setUserType(currentUserRole);
     }, [currentUserRole]);
 
-    useEffect(()=>{
-        handleClose()
-
-    },[key])
+    useEffect(() => {
+        handleClose();
+    }, [key]);
 
     const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+        event.stopPropagation();
+        event.preventDefault();
         setAnchorEl(() => event.currentTarget);
     };
 
-    const handleClose = () => {
-
+    const handleClose = (event?: any) => {
+        event?.stopPropagation();
+        event?.preventDefault();
         setAnchorEl(() => undefined);
     };
 
@@ -97,7 +99,7 @@ export default function MainMenu() {
                 anchorEl={anchorEl}
                 open={open}
                 onClose={handleClose}
-                onClick={handleClose}
+                onClick={handleClick}
                 PaperProps={{
                     elevation: 0,
                     sx: MenuStyles(theme),
@@ -114,21 +116,21 @@ export default function MainMenu() {
                 <Divider />
 
                 <Link to="/">
-                    <MenuItem className={"item"} onClick={handleClose}>
+                    <MenuItem className={"item"}>
                         <TravelExploreIcon className="icon" />
                         Search
                     </MenuItem>
                 </Link>
 
                 <Link to="/plugins">
-                    <MenuItem className={"item"} onClick={handleClose}>
+                    <MenuItem className={"item"}>
                         <ExtensionIcon className="icon" />
                         Plugins
                     </MenuItem>
                 </Link>
 
                 <Link to="/users">
-                    <MenuItem className={"item"} onClick={handleClose}>
+                    <MenuItem className={"item"}>
                         <PersonOutlineOutlinedIcon className="icon" />
                         Users
                     </MenuItem>
@@ -137,7 +139,7 @@ export default function MainMenu() {
                 {showDs &&
                     (userType === "admin" || userType === "superAdmin") && (
                         <Link to="datasources">
-                            <MenuItem className={"item"} onClick={handleClose}>
+                            <MenuItem className={"item"}>
                                 <StorageIcon className="icon" />
                                 Datasources
                             </MenuItem>