Prometheus: Refresh query field metrics on data source change (#24116)

... in `componentDidUpdate`, not just `componentDidMount`.

Also unify query field behavior of Explore with Dashboard - when the
data source changes, it doesn't unmount but instead refreshes its
metrics.

Fixes #23162

public/app/features/explore/QueryRows.tsx

@@ -20,8 +20,8 @@ export default class QueryRows extends PureComponent<QueryRowsProps> {
     const { className = '', exploreEvents, exploreId, queryKeys } = this.props;
     return (
       <div className={className}>
-        {queryKeys.map((key, index) => {
-          return <QueryRow key={key} exploreEvents={exploreEvents} exploreId={exploreId} index={index} />;
+        {queryKeys.map((_, index) => {
+          return <QueryRow key={index} exploreEvents={exploreEvents} exploreId={exploreId} index={index} />;
         })}
       </div>
     );

public/app/features/explore/state/reducers.ts

@@ -302,7 +302,6 @@ export const itemReducer = (state: ExploreItemState = makeExploreItemState(), ac
       latency: 0,
       queryResponse: createEmptyQueryResponse(),
       loading: false,
-      queryKeys: [],
       supportedModes,
       mode: mode ?? newMode,
       originPanelId: state.urlState && state.urlState.originPanelId,

public/app/plugins/datasource/prometheus/components/PromQueryField.test.tsx

@@ -1,4 +1,67 @@
-import { groupMetricsByPrefix, RECORDING_RULES_GROUP } from './PromQueryField';
+import { mount } from 'enzyme';
+// @ts-ignore
+import RCCascader from 'rc-cascader';
+import React from 'react';
+import PromQlLanguageProvider, { DEFAULT_LOOKUP_METRICS_THRESHOLD } from '../language_provider';
+import PromQueryField, { groupMetricsByPrefix, RECORDING_RULES_GROUP } from './PromQueryField';
+
+describe('PromQueryField', () => {
+  beforeAll(() => {
+    // @ts-ignore
+    window.getSelection = () => {};
+  });
+
+  it('refreshes metrics when the data source changes', async () => {
+    const metrics = ['foo', 'bar'];
+    const languageProvider = ({
+      histogramMetrics: [] as any,
+      metrics,
+      metricsMetadata: {},
+      lookupsDisabled: false,
+      lookupMetricsThreshold: DEFAULT_LOOKUP_METRICS_THRESHOLD,
+      start: () => {
+        return Promise.resolve([]);
+      },
+    } as unknown) as PromQlLanguageProvider;
+
+    const queryField = mount(
+      <PromQueryField
+        // @ts-ignore
+        datasource={{
+          languageProvider,
+        }}
+        query={{ expr: '', refId: '' }}
+        onRunQuery={() => {}}
+        onChange={() => {}}
+        history={[]}
+      />
+    );
+    await Promise.resolve();
+
+    const cascader = queryField.find<RCCascader>(RCCascader);
+    cascader.simulate('click');
+    const cascaderNode: HTMLElement = cascader.instance().getPopupDOMNode();
+
+    for (const item of Array.from(cascaderNode.getElementsByTagName('li'))) {
+      expect(metrics.includes(item.innerHTML)).toBe(true);
+    }
+
+    const changedMetrics = ['baz', 'moo'];
+    queryField.setProps({
+      datasource: {
+        languageProvider: {
+          ...languageProvider,
+          metrics: changedMetrics,
+        },
+      },
+    });
+    await Promise.resolve();
+
+    for (const item of Array.from(cascaderNode.getElementsByTagName('li'))) {
+      expect(changedMetrics.includes(item.innerHTML)).toBe(true);
+    }
+  });
+});
 
 describe('groupMetricsByPrefix()', () => {
   it('returns an empty group for no metrics', () => {

public/app/plugins/datasource/prometheus/components/PromQueryField.tsx

@@ -20,7 +20,6 @@ import { CancelablePromise, makePromiseCancelable } from 'app/core/utils/Cancela
 import { ExploreQueryFieldProps, QueryHint, isDataFrame, toLegacyResponseData, HistoryItem } from '@grafana/data';
 import { DOMUtil, SuggestionsState } from '@grafana/ui';
 import { PrometheusDatasource } from '../datasource';
-import PromQlLanguageProvider from '../language_provider';
 
 const HISTOGRAM_GROUP = '__histograms__';
 const PRISM_SYNTAX = 'promql';
@@ -121,16 +120,11 @@ interface PromQueryFieldState {
 
 class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryFieldState> {
   plugins: Plugin[];
-  languageProvider: PromQlLanguageProvider;
   languageProviderInitializationPromise: CancelablePromise<any>;
 
   constructor(props: PromQueryFieldProps, context: React.Context<any>) {
     super(props, context);
 
-    if (props.datasource.languageProvider) {
-      this.languageProvider = props.datasource.languageProvider;
-    }
-
     this.plugins = [
       BracesPlugin(),
       SlatePrism({
@@ -147,9 +141,8 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
   }
 
   componentDidMount() {
-    if (this.languageProvider) {
-      Prism.languages[PRISM_SYNTAX] = this.languageProvider.syntax;
-      this.refreshMetrics(makePromiseCancelable(this.languageProvider.start()));
+    if (this.props.datasource.languageProvider) {
+      this.refreshMetrics();
     }
     this.refreshHint();
   }
@@ -161,7 +154,14 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
   }
 
   componentDidUpdate(prevProps: PromQueryFieldProps) {
-    const { data } = this.props;
+    const {
+      data,
+      datasource: { languageProvider },
+    } = this.props;
+
+    if (languageProvider !== prevProps.datasource.languageProvider) {
+      this.refreshMetrics();
+    }
 
     if (data && prevProps.data && prevProps.data.series !== data.series) {
       this.refreshHint();
@@ -182,8 +182,13 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
     this.setState({ hint });
   };
 
-  refreshMetrics = (cancelablePromise: CancelablePromise<any>) => {
-    this.languageProviderInitializationPromise = cancelablePromise;
+  refreshMetrics = () => {
+    const {
+      datasource: { languageProvider },
+    } = this.props;
+
+    Prism.languages[PRISM_SYNTAX] = languageProvider.syntax;
+    this.languageProviderInitializationPromise = makePromiseCancelable(languageProvider.start());
     this.languageProviderInitializationPromise.promise
       .then(remaining => {
         remaining.map((task: Promise<any>) => task.then(this.onUpdateLanguage).catch(() => {}));
@@ -246,7 +251,8 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
       metricsMetadata,
       lookupsDisabled,
       lookupMetricsThreshold,
-    } = this.languageProvider;
+    } = this.props.datasource.languageProvider;
+
     if (!metrics) {
       return;
     }
@@ -275,14 +281,18 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
   };
 
   onTypeahead = async (typeahead: TypeaheadInput): Promise<TypeaheadOutput> => {
-    if (!this.languageProvider) {
+    const {
+      datasource: { languageProvider },
+    } = this.props;
+
+    if (!languageProvider) {
       return { suggestions: [] };
     }
 
     const { history } = this.props;
     const { prefix, text, value, wrapperClasses, labelKey } = typeahead;
 
-    const result = await this.languageProvider.provideCompletionItems(
+    const result = await languageProvider.provideCompletionItems(
       { text, value, prefix, wrapperClasses, labelKey },
       { history }
     );
@@ -293,9 +303,13 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
   };
 
   render() {
-    const { query, ExtraFieldElement } = this.props;
+    const {
+      datasource: { languageProvider },
+      query,
+      ExtraFieldElement,
+    } = this.props;
     const { metricsOptions, syntaxLoaded, hint } = this.state;
-    const cleanText = this.languageProvider ? this.languageProvider.cleanText : undefined;
+    const cleanText = languageProvider ? languageProvider.cleanText : undefined;
     const chooserText = getChooserText(syntaxLoaded, metricsOptions);
     const buttonDisabled = !(syntaxLoaded && metricsOptions && metricsOptions.length > 0);