UI: Add toggle to enable/disable metric autocomplete (#8134)

* UI: Add toggle to enable/disable metric autocomplete

This change adds a toggle to enable or disable the metric autocomplete
functionality. By default it is enabled. This is a port of a change I
did in [Thanos][1].

[1]: https://github.com/thanos-io/thanos/pull/3381

Signed-off-by: Jarod Watkins <jarod@42lines.net>

* Adding full variable name

Signed-off-by: Jarod Watkins <jarod@42lines.net>

web/ui/react-app/src/pages/graph/ExpressionInput.test.tsx

@@ -30,6 +30,7 @@ describe('ExpressionInput', () => {
       // Do nothing.
     },
     loading: false,
+    enableMetricAutocomplete: true,
   };
 
   let expressionInput: ReactWrapper;
@@ -174,8 +175,27 @@ describe('ExpressionInput', () => {
       instance.createAutocompleteSection({ closeMenu: spyCloseMenu });
       setTimeout(() => expect(spyCloseMenu).toHaveBeenCalled());
     });
+    it('should not render list if enableMetricAutocomplete is false', () => {
+      const input = mount(
+        <ExpressionInput
+          autocompleteSections={{ title: ['foo', 'bar', 'baz'] }}
+          {...({} as any)}
+          enableMetricAutocomplete={false}
+        />
+      );
+      const instance: any = input.instance();
+      const spyCloseMenu = jest.fn();
+      instance.createAutocompleteSection({ closeMenu: spyCloseMenu });
+      setTimeout(() => expect(spyCloseMenu).toHaveBeenCalled());
+    });
     it('should render autosuggest-dropdown', () => {
-      const input = mount(<ExpressionInput autocompleteSections={{ title: ['foo', 'bar', 'baz'] }} {...({} as any)} />);
+      const input = mount(
+        <ExpressionInput
+          autocompleteSections={{ title: ['foo', 'bar', 'baz'] }}
+          {...({} as any)}
+          enableMetricAutocomplete={true}
+        />
+      );
       const instance: any = input.instance();
       const spyGetMenuProps = jest.fn();
       const sections = instance.createAutocompleteSection({

web/ui/react-app/src/pages/graph/ExpressionInput.tsx

@@ -14,6 +14,7 @@ interface ExpressionInputProps {
   autocompleteSections: { [key: string]: string[] };
   executeQuery: () => void;
   loading: boolean;
+  enableMetricAutocomplete: boolean;
 }
 
 interface ExpressionInputState {
@@ -76,7 +77,8 @@ class ExpressionInput extends Component<ExpressionInputProps, ExpressionInputSta
     const { inputValue = '', closeMenu, highlightedIndex } = downshift;
     const { autocompleteSections } = this.props;
     let index = 0;
-    const sections = inputValue!.length
+    const sections =
+      inputValue!.length && this.props.enableMetricAutocomplete
         ? Object.entries(autocompleteSections).reduce((acc, [title, items]) => {
             const matches = this.getSearchMatches(inputValue!, items);
             return !matches.length

web/ui/react-app/src/pages/graph/Panel.test.tsx

@@ -32,6 +32,7 @@ const defaultProps = {
   onExecuteQuery: (): void => {
     // Do nothing.
   },
+  enableMetricAutocomplete: true,
 };
 
 describe('Panel', () => {

web/ui/react-app/src/pages/graph/Panel.tsx

@@ -22,6 +22,7 @@ interface PanelProps {
   removePanel: () => void;
   onExecuteQuery: (query: string) => void;
   pathPrefix: string;
+  enableMetricAutocomplete: boolean;
 }
 
 interface PanelState {
@@ -233,6 +234,7 @@ class Panel extends Component<PanelProps, PanelState> {
               onExpressionChange={this.handleExpressionChange}
               executeQuery={this.executeQuery}
               loading={this.state.loading}
+              enableMetricAutocomplete={this.props.enableMetricAutocomplete}
               autocompleteSections={{
                 'Query History': pastQueries,
                 'Metric Names': metricNames,

web/ui/react-app/src/pages/graph/PanelList.tsx

@@ -22,9 +22,16 @@ interface PanelListProps extends RouteComponentProps {
   metrics: string[];
   useLocalTime: boolean;
   queryHistoryEnabled: boolean;
+  enableMetricAutocomplete: boolean;
 }
 
-export const PanelListContent: FC<PanelListProps> = ({ metrics = [], useLocalTime, queryHistoryEnabled, ...rest }) => {
+export const PanelListContent: FC<PanelListProps> = ({
+  metrics = [],
+  useLocalTime,
+  queryHistoryEnabled,
+  enableMetricAutocomplete,
+  ...rest
+}) => {
   const [panels, setPanels] = useState(rest.panels);
   const [historyItems, setLocalStorageHistoryItems] = useLocalStorage<string[]>('history', []);
 
@@ -95,6 +102,7 @@ export const PanelListContent: FC<PanelListProps> = ({ metrics = [], useLocalTim
           useLocalTime={useLocalTime}
           metricNames={metrics}
           pastQueries={queryHistoryEnabled ? historyItems : []}
+          enableMetricAutocomplete={enableMetricAutocomplete}
         />
       ))}
       <Button className="mb-3" color="primary" onClick={addPanel}>
@@ -108,6 +116,7 @@ const PanelList: FC<RouteComponentProps> = () => {
   const [delta, setDelta] = useState(0);
   const [useLocalTime, setUseLocalTime] = useLocalStorage('use-local-time', false);
   const [enableQueryHistory, setEnableQueryHistory] = useLocalStorage('enable-query-history', false);
+  const [enableMetricAutocomplete, setEnableMetricAutocomplete] = useLocalStorage('enable-metric-autocomplete', true);
 
   const pathPrefix = usePathPrefix();
   const { response: metricsRes, error: metricsErr } = useFetch<string[]>(`${pathPrefix}/${API_PATH}/label/__name__/values`);
@@ -148,6 +157,14 @@ const PanelList: FC<RouteComponentProps> = () => {
       >
         Use local time
       </Checkbox>
+      <Checkbox
+        wrapperStyles={{ marginLeft: 20, display: 'inline-block' }}
+        id="metric-autocomplete"
+        onChange={({ target }) => setEnableMetricAutocomplete(target.checked)}
+        defaultChecked={enableMetricAutocomplete}
+      >
+        Enable metric autocomplete
+      </Checkbox>
       {(delta > 30 || timeErr) && (
         <Alert color="danger">
           <strong>Warning: </strong>
@@ -167,6 +184,7 @@ const PanelList: FC<RouteComponentProps> = () => {
         useLocalTime={useLocalTime}
         metrics={metricsRes.data}
         queryHistoryEnabled={enableQueryHistory}
+        enableMetricAutocomplete={enableMetricAutocomplete}
       />
     </>
   );