Prometheus: Highlight run query after changing query (#47043)

* Prometheus: Highlight run query after changing query

* fixed ts issue

* Updated

public/app/plugins/datasource/prometheus/querybuilder/PromQueryModeller.ts

@@ -32,14 +32,14 @@ export class PromQueryModeller extends LokiAndPromQueryModellerBase {
       {
         name: 'Rate then sum',
         operations: [
-          { id: 'rate', params: ['auto'] },
+          { id: 'rate', params: ['$__rate_interval'] },
           { id: 'sum', params: [] },
         ],
       },
       {
         name: 'Rate then sum by(label) then avg',
         operations: [
-          { id: 'rate', params: ['auto'] },
+          { id: 'rate', params: ['$__rate_interval'] },
           { id: '__sum_by', params: [''] },
           { id: 'avg', params: [] },
         ],
@@ -47,7 +47,7 @@ export class PromQueryModeller extends LokiAndPromQueryModellerBase {
       {
         name: 'Histogram quantile on rate',
         operations: [
-          { id: 'rate', params: ['auto'] },
+          { id: 'rate', params: ['$__rate_interval'] },
           { id: '__sum_by', params: ['le'] },
           { id: 'histogram_quantile', params: [0.95] },
         ],
@@ -55,7 +55,7 @@ export class PromQueryModeller extends LokiAndPromQueryModellerBase {
       {
         name: 'Histogram quantile on increase ',
         operations: [
-          { id: 'increase', params: ['auto'] },
+          { id: 'increase', params: ['$__rate_interval'] },
           { id: '__max_by', params: ['le'] },
           { id: 'histogram_quantile', params: [0.95] },
         ],

public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.tsx

@@ -1,8 +1,7 @@
-import React, { SyntheticEvent, useCallback, useState } from 'react';
-import { css } from '@emotion/css';
-import { GrafanaTheme2, LoadingState } from '@grafana/data';
+import React, { SyntheticEvent, useCallback, useEffect, useState } from 'react';
+import { LoadingState } from '@grafana/data';
 import { EditorHeader, EditorRows, FlexItem, InlineSelect, Space } from '@grafana/experimental';
-import { Button, ConfirmModal, useStyles2 } from '@grafana/ui';
+import { Button, ConfirmModal } from '@grafana/ui';
 import { PromQueryEditorProps } from '../../components/types';
 import { promQueryModeller } from '../PromQueryModeller';
 import { QueryEditorModeToggle } from '../shared/QueryEditorModeToggle';
@@ -14,11 +13,13 @@ import { PromQueryCodeEditor } from './PromQueryCodeEditor';
 import { PromQueryBuilderContainer } from './PromQueryBuilderContainer';
 import { PromQueryBuilderOptions } from './PromQueryBuilderOptions';
 import { changeEditorMode, getQueryWithDefaults } from '../state';
+import { PromQuery } from '../../types';
 
 export const PromQueryEditorSelector = React.memo<PromQueryEditorProps>((props) => {
   const { onChange, onRunQuery, data } = props;
-  const styles = useStyles2(getStyles);
   const [parseModalOpen, setParseModalOpen] = useState(false);
+  const [dataIsStale, setDataIsStale] = useState(false);
+
   const query = getQueryWithDefaults(props.query, props.app);
   const editorMode = query.editorMode!;
 
@@ -37,12 +38,21 @@ export const PromQueryEditorSelector = React.memo<PromQueryEditorProps>((props)
     [onChange, query]
   );
 
+  useEffect(() => {
+    setDataIsStale(false);
+  }, [data]);
+
   const onQueryPreviewChange = (event: SyntheticEvent<HTMLInputElement>) => {
     const isEnabled = event.currentTarget.checked;
     onChange({ ...query, editorPreview: isEnabled });
     onRunQuery();
   };
 
+  const onChangeInternal = (query: PromQuery) => {
+    setDataIsStale(true);
+    onChange(query);
+  };
+
   return (
     <>
       <ConfirmModal
@@ -59,10 +69,8 @@ export const PromQueryEditorSelector = React.memo<PromQueryEditorProps>((props)
       <EditorHeader>
         <FlexItem grow={1} />
         <Button
-          className={styles.runQuery}
-          variant="secondary"
+          variant={dataIsStale ? 'primary' : 'secondary'}
           size="sm"
-          fill="outline"
           onClick={onRunQuery}
           icon={data?.state === LoadingState.Loading ? 'fa fa-spinner' : undefined}
           disabled={data?.state === LoadingState.Loading}
@@ -104,7 +112,7 @@ export const PromQueryEditorSelector = React.memo<PromQueryEditorProps>((props)
           <PromQueryBuilderContainer
             query={query}
             datasource={props.datasource}
-            onChange={onChange}
+            onChange={onChangeInternal}
             onRunQuery={props.onRunQuery}
             data={data}
           />
@@ -119,15 +127,3 @@ export const PromQueryEditorSelector = React.memo<PromQueryEditorProps>((props)
 });
 
 PromQueryEditorSelector.displayName = 'PromQueryEditorSelector';
-
-const getStyles = (theme: GrafanaTheme2) => {
-  return {
-    runQuery: css({
-      color: theme.colors.text.secondary,
-    }),
-    switchLabel: css({
-      color: theme.colors.text.secondary,
-      fontSize: theme.typography.bodySmall.fontSize,
-    }),
-  };
-};