Prometheus: Fix copy paste behaving as cut and paste (#28622)

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

@@ -17,14 +17,7 @@ import Prism from 'prismjs';
 // dom also includes Element polyfills
 import { PromQuery, PromOptions, PromMetricsMetadata } from '../types';
 import { CancelablePromise, makePromiseCancelable } from 'app/core/utils/CancelablePromise';
-import {
-  ExploreQueryFieldProps,
-  QueryHint,
-  isDataFrame,
-  toLegacyResponseData,
-  HistoryItem,
-  AbsoluteTimeRange,
-} from '@grafana/data';
+import { ExploreQueryFieldProps, QueryHint, isDataFrame, toLegacyResponseData, HistoryItem } from '@grafana/data';
 import { DOMUtil, SuggestionsState } from '@grafana/ui';
 import { PrometheusDatasource } from '../datasource';
 
@@ -173,21 +166,27 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
       range,
     } = this.props;
 
-    let refreshed = false;
-    if (range && prevProps.range) {
-      const absoluteRange: AbsoluteTimeRange = { from: range.from.valueOf(), to: range.to.valueOf() };
-      const prevAbsoluteRange: AbsoluteTimeRange = {
-        from: prevProps.range.from.valueOf(),
-        to: prevProps.range.to.valueOf(),
-      };
+    const rangeChanged =
+      range &&
+      prevProps.range &&
+      !_.isEqual(
+        { from: range.from.valueOf(), to: range.to.valueOf() },
+        {
+          from: prevProps.range.from.valueOf(),
+          to: prevProps.range.to.valueOf(),
+        }
+      );
 
-      if (!_.isEqual(absoluteRange, prevAbsoluteRange)) {
-        this.refreshMetrics();
-        refreshed = true;
-      }
+    if (languageProvider !== prevProps.datasource.languageProvider) {
+      // We reset this only on DS change so we do not flesh loading state on every rangeChange which happens on every
+      // query run if using relative range.
+      this.setState({
+        metricsOptions: [],
+        syntaxLoaded: false,
+      });
     }
 
-    if (!refreshed && languageProvider !== prevProps.datasource.languageProvider) {
+    if (languageProvider !== prevProps.datasource.languageProvider || rangeChanged) {
       this.refreshMetrics();
     }
 
@@ -206,31 +205,35 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
 
     const result = isDataFrame(data.series[0]) ? data.series.map(toLegacyResponseData) : data.series;
     const hints = datasource.getQueryHints(query, result);
-    const hint = hints.length > 0 ? hints[0] : null;
+    let hint = hints.length > 0 ? hints[0] : null;
+
+    // Hint for big disabled lookups
+    if (!hint && !datasource.lookupsDisabled && datasource.languageProvider.lookupsDisabled) {
+      hint = {
+        label: `Dynamic label lookup is disabled for datasources with more than ${datasource.languageProvider.lookupMetricsThreshold} metrics.`,
+        type: 'INFO',
+      };
+    }
     this.setState({ hint });
   };
 
-  refreshMetrics = () => {
+  refreshMetrics = async () => {
     const {
       datasource: { languageProvider },
     } = this.props;
 
-    this.setState({
-      syntaxLoaded: false,
-    });
-
     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(() => {}));
-      })
-      .then(() => this.onUpdateLanguage())
-      .catch(err => {
-        if (!err.isCanceled) {
-          throw err;
-        }
-      });
+
+    try {
+      const remainingTasks = await this.languageProviderInitializationPromise.promise;
+      await Promise.all(remainingTasks);
+      this.onUpdateLanguage();
+    } catch (err) {
+      if (!err.isCanceled) {
+        throw err;
+      }
+    }
   };
 
   onChangeMetrics = (values: string[], selectedOptions: CascaderOption[]) => {
@@ -278,10 +281,9 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
 
   onUpdateLanguage = () => {
     const {
-      datasource,
       datasource: { languageProvider },
     } = this.props;
-    const { histogramMetrics, metrics, metricsMetadata, lookupMetricsThreshold } = languageProvider;
+    const { histogramMetrics, metrics, metricsMetadata } = languageProvider;
 
     if (!metrics) {
       return;
@@ -298,17 +300,7 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
           ]
         : metricsByPrefix;
 
-    // Hint for big disabled lookups
-    let hint: QueryHint | null = null;
-
-    if (!datasource.lookupsDisabled && languageProvider.lookupsDisabled) {
-      hint = {
-        label: `Dynamic label lookup is disabled for datasources with more than ${lookupMetricsThreshold} metrics.`,
-        type: 'INFO',
-      };
-    }
-
-    this.setState({ hint, metricsOptions, syntaxLoaded: true });
+    this.setState({ metricsOptions, syntaxLoaded: true });
   };
 
   onTypeahead = async (typeahead: TypeaheadInput): Promise<TypeaheadOutput> => {
@@ -328,8 +320,6 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
       { history }
     );
 
-    // console.log('handleTypeahead', wrapperClasses, text, prefix, labelKey, result.context);
-
     return result;
   };