Do not show the Add to Filters action button if the filter exists (#285)

* Do not show the Add to Filters action button if the filter already exists * Create smarter filter * Update for test * Update check
grafana · Jan 20, 2025 · dd1c705 · dd1c705
1 parent 88cc73b
commit dd1c705
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 15 deletions.
diff --git a/src/components/Explore/actions/AddToFiltersAction.tsx b/src/components/Explore/actions/AddToFiltersAction.tsx
@@ -36,11 +36,19 @@ export class AddToFiltersAction extends SceneObjectBase<AddToFiltersActionState>
   };
 
   public static Component = ({ model }: SceneComponentProps<AddToFiltersAction>) => {
-    return (
-      <Button variant="primary" size="sm" fill="text" onClick={model.onClick} icon={'search-plus'}>
-        Add to filters
-      </Button>
-    );
+    const key = model.state?.labelKey ?? '';
+    const field = model.state?.frame.fields.filter(x => x.type !== 'time');
+    const value = field?.[0]?.labels?.[key] ?? '';
+    const filterExists = filterExistsForKey(getFiltersVariable(model), key, value.replace(/"/g, ''));
+
+    if (!filterExists) {
+      return (
+        <Button variant="primary" size="sm" fill="text" onClick={model.onClick} icon={'search-plus'}>
+          Add to filters
+        </Button>
+      );
+    }
+    return <></>;
   };
 }
 
@@ -61,3 +69,8 @@ export const addToFilters = (variable: AdHocFiltersVariable, label: string, valu
     ],
   });
 };
+
+export const filterExistsForKey = (model: AdHocFiltersVariable, key: string, value: string) => {
+  const variable = getFiltersVariable(model);
+  return variable.state.filters.find((f) => f.key === key && f.value === value);
+}
diff --git a/src/components/Explore/layouts/HighestDifferencePanel.tsx b/src/components/Explore/layouts/HighestDifferencePanel.tsx
@@ -4,7 +4,7 @@ import { Button, Stack, useStyles2 } from '@grafana/ui';
 import { css } from '@emotion/css';
 import React from 'react';
 import { getFiltersVariable } from '../../../utils/utils';
-import { addToFilters } from '../actions/AddToFiltersAction';
+import { addToFilters, filterExistsForKey } from '../actions/AddToFiltersAction';
 import { computeHighestDifference } from '../../../utils/comparison';
 
 export interface HighestDifferencePanelState extends SceneObjectState {
@@ -50,6 +50,8 @@ export class HighestDifferencePanel extends SceneObjectBase<HighestDifferencePan
     const { maxDifference, maxDifferenceIndex, panel } = model.useState();
     const styles = useStyles2(getStyles);
     const value = model.getValue();
+    const key = model.state.frame.name ?? '';
+    const filterExists = filterExistsForKey(getFiltersVariable(model), key, value.replace(/"/g, ''));
 
     return (
       <div className={styles.container}>
@@ -58,15 +60,17 @@ export class HighestDifferencePanel extends SceneObjectBase<HighestDifferencePan
           <div className={styles.differenceContainer}>
             <Stack gap={1} justifyContent={'space-between'} alignItems={'center'}>
               <div className={styles.title}>Highest difference</div>
-              <Button
-                size="sm"
-                variant="primary"
-                icon={'search-plus'}
-                fill="text"
-                onClick={() => model.onAddToFilters()}
-              >
-                Add to filters
-              </Button>
+              {!filterExists && (
+                <Button
+                  size="sm"
+                  variant="primary"
+                  icon={'search-plus'}
+                  fill="text"
+                  onClick={() => model.onAddToFilters()}
+                >
+                  Add to filters
+                </Button>
+              )}
             </Stack>
 
             <div className={styles.differenceValue}>