UI: Add toggle to enable/disable metric autocomplete

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

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

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

@@ -14,6 +14,7 @@ interface ExpressionInputProps {
   autocompleteSections: { [key: string]: string[] };
   executeQuery: () => void;
   loading: boolean;
+  enable: boolean;
 }
 
 interface ExpressionInputState {
@@ -76,38 +77,39 @@ class ExpressionInput extends Component<ExpressionInputProps, ExpressionInputSta
     const { inputValue = '', closeMenu, highlightedIndex } = downshift;
     const { autocompleteSections } = this.props;
     let index = 0;
-    const sections = inputValue!.length
-      ? Object.entries(autocompleteSections).reduce((acc, [title, items]) => {
-          const matches = this.getSearchMatches(inputValue!, items);
-          return !matches.length
-            ? acc
-            : [
-                ...acc,
-                <ul className="autosuggest-dropdown-list" key={title}>
-                  <li className="autosuggest-dropdown-header">{title}</li>
-                  {matches
-                    .slice(0, 100) // Limit DOM rendering to 100 results, as DOM rendering is sloooow.
-                    .map(({ original, string: text }) => {
-                      const itemProps = downshift.getItemProps({
-                        key: original,
-                        index,
-                        item: original,
-                        style: {
-                          backgroundColor: highlightedIndex === index++ ? 'lightgray' : 'white',
-                        },
-                      });
-                      return (
-                        <li
-                          key={title}
-                          {...itemProps}
-                          dangerouslySetInnerHTML={{ __html: sanitizeHTML(text, { allowedTags: ['strong'] }) }}
-                        />
-                      );
-                    })}
-                </ul>,
-              ];
-        }, [] as JSX.Element[])
-      : [];
+    const sections =
+      inputValue!.length && this.props.enable
+        ? Object.entries(autocompleteSections).reduce((acc, [title, items]) => {
+            const matches = this.getSearchMatches(inputValue!, items);
+            return !matches.length
+              ? acc
+              : [
+                  ...acc,
+                  <ul className="autosuggest-dropdown-list" key={title}>
+                    <li className="autosuggest-dropdown-header">{title}</li>
+                    {matches
+                      .slice(0, 100) // Limit DOM rendering to 100 results, as DOM rendering is sloooow.
+                      .map(({ original, string: text }) => {
+                        const itemProps = downshift.getItemProps({
+                          key: original,
+                          index,
+                          item: original,
+                          style: {
+                            backgroundColor: highlightedIndex === index++ ? 'lightgray' : 'white',
+                          },
+                        });
+                        return (
+                          <li
+                            key={title}
+                            {...itemProps}
+                            dangerouslySetInnerHTML={{ __html: sanitizeHTML(text, { allowedTags: ['strong'] }) }}
+                          />
+                        );
+                      })}
+                  </ul>,
+                ];
+          }, [] as JSX.Element[])
+        : [];
 
     if (!sections.length) {
       // This is ugly but is needed in order to sync state updates.

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

@@ -39,6 +39,7 @@ const defaultProps = {
     // Do nothing.
   },
   stores: [],
+  enableMetricAutocomplete: true,
 };
 
 describe('Panel', () => {

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

@@ -26,6 +26,7 @@ interface PanelProps {
   removePanel: () => void;
   onExecuteQuery: (query: string) => void;
   stores: Store[];
+  enableMetricAutocomplete: boolean;
 }
 
 interface PanelState {
@@ -283,6 +284,7 @@ class Panel extends Component<PanelProps & PathPrefixProps, PanelState> {
               onExpressionChange={this.handleExpressionChange}
               executeQuery={this.executeQuery}
               loading={this.state.loading}
+              enable={this.props.enableMetricAutocomplete}
               autocompleteSections={{
                 'Query History': pastQueries,
                 'Metric Names': metricNames,

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

@@ -25,6 +25,7 @@ interface PanelListProps extends PathPrefixProps, RouteComponentProps {
   useLocalTime: boolean;
   queryHistoryEnabled: boolean;
   stores: StoreListProps;
+  enableMetricAutocomplete: boolean;
 }
 
 export const PanelListContent: FC<PanelListProps> = ({
@@ -33,6 +34,7 @@ export const PanelListContent: FC<PanelListProps> = ({
   pathPrefix,
   queryHistoryEnabled,
   stores = {},
+  enableMetricAutocomplete,
   ...rest
 }) => {
   const [panels, setPanels] = useState(rest.panels);
@@ -114,6 +116,7 @@ export const PanelListContent: FC<PanelListProps> = ({
           pastQueries={queryHistoryEnabled ? historyItems : []}
           pathPrefix={pathPrefix}
           stores={storeData}
+          enableMetricAutocomplete={enableMetricAutocomplete}
         />
       ))}
       <Button className="mb-3" color="primary" onClick={addPanel}>
@@ -130,6 +133,7 @@ const PanelList: FC<RouteComponentProps & PathPrefixProps> = ({ pathPrefix = ''
   const [useLocalTime, setUseLocalTime] = useLocalStorage('use-local-time', false);
   const [enableQueryHistory, setEnableQueryHistory] = useLocalStorage('enable-query-history', false);
   const [debugMode, setDebugMode] = useState(false);
+  const [enableMetricAutocomplete, setEnableMetricAutocomplete] = useLocalStorage('enable-metric-autocomplete', true);
 
   const { response: metricsRes, error: metricsErr } = useFetch<string[]>(`${pathPrefix}/api/v1/label/__name__/values`);
   const { response: storesRes, error: storesErr, isLoading: storesLoading } = useFetch<StoreListProps>(
@@ -178,6 +182,14 @@ const PanelList: FC<RouteComponentProps & PathPrefixProps> = ({ pathPrefix = ''
       >
         Enable Store Filtering
       </Checkbox>
+      <Checkbox
+        wrapperStyles={{ marginLeft: 20, display: 'inline-block' }}
+        id="metric-autocomplete"
+        defaultChecked={enableMetricAutocomplete}
+        onChange={({ target }) => setEnableMetricAutocomplete(target.checked)}
+      >
+        Enable metric autocomplete
+      </Checkbox>
       {(delta > 30 || timeErr) && (
         <UncontrolledAlert color="danger">
           <strong>Warning: </strong>
@@ -204,6 +216,7 @@ const PanelList: FC<RouteComponentProps & PathPrefixProps> = ({ pathPrefix = ''
         useLocalTime={useLocalTime}
         metrics={metricsRes.data}
         stores={debugMode ? storesRes.data : {}}
+        enableMetricAutocomplete={enableMetricAutocomplete}
         queryHistoryEnabled={enableQueryHistory}
         isLoading={storesLoading}
       />