Explore: add functionality for supporting different step modes in prometheus (#37829)

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

@@ -3,16 +3,20 @@ import React, { memo } from 'react';
 import { css, cx } from '@emotion/css';
 
 // Types
-import { InlineFormLabel, RadioButtonGroup } from '@grafana/ui';
-import { PromQuery } from '../types';
+import { InlineFormLabel, RadioButtonGroup, Select } from '@grafana/ui';
+import { PromQuery, StepMode } from '../types';
 import { PromExemplarField } from './PromExemplarField';
 import { PrometheusDatasource } from '../datasource';
+import { STEP_MODES } from './PromQueryEditor';
+import { SelectableValue } from '@grafana/data';
 
 export interface PromExploreExtraFieldProps {
   queryType: string;
   stepValue: string;
+  stepMode: StepMode;
   query: PromQuery;
-  onStepChange: (e: React.SyntheticEvent<HTMLInputElement>) => void;
+  onStepModeChange: (option: SelectableValue<StepMode>) => void;
+  onStepIntervalChange: (e: React.SyntheticEvent<HTMLInputElement>) => void;
   onKeyDownFunc: (e: React.KeyboardEvent<HTMLInputElement>) => void;
   onQueryTypeChange: (value: string) => void;
   onChange: (value: PromQuery) => void;
@@ -20,7 +24,18 @@ export interface PromExploreExtraFieldProps {
 }
 
 export const PromExploreExtraField: React.FC<PromExploreExtraFieldProps> = memo(
-  ({ queryType, stepValue, query, onChange, onStepChange, onQueryTypeChange, onKeyDownFunc, datasource }) => {
+  ({
+    queryType,
+    stepValue,
+    stepMode,
+    query,
+    onChange,
+    onStepModeChange,
+    onStepIntervalChange,
+    onQueryTypeChange,
+    onKeyDownFunc,
+    datasource,
+  }) => {
     const rangeOptions = [
       { value: 'range', label: 'Range', description: 'Run query over a range of time.' },
       {
@@ -67,11 +82,20 @@ export const PromExploreExtraField: React.FC<PromExploreExtraFieldProps> = memo(
           >
             Step
           </InlineFormLabel>
+          <Select
+            menuShouldPortal
+            className={'select-container'}
+            width={16}
+            isSearchable={false}
+            options={STEP_MODES}
+            onChange={onStepModeChange}
+            value={stepMode}
+          />
           <input
             type={'text'}
             className="gf-form-input width-4"
             placeholder={'auto'}
-            onChange={onStepChange}
+            onChange={onStepIntervalChange}
             onKeyDown={onKeyDownFunc}
             value={stepValue}
           />

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

@@ -1,10 +1,10 @@
 import React, { memo, FC, useEffect } from 'react';
 
 // Types
-import { ExploreQueryFieldProps } from '@grafana/data';
+import { ExploreQueryFieldProps, SelectableValue } from '@grafana/data';
 
 import { PrometheusDatasource } from '../datasource';
-import { PromQuery, PromOptions } from '../types';
+import { PromQuery, PromOptions, StepMode } from '../types';
 
 import PromQueryField from './PromQueryField';
 import { PromExploreExtraField } from './PromExploreExtraField';
@@ -26,7 +26,19 @@ export const PromExploreQueryEditor: FC<Props> = (props: Props) => {
     onChange(nextQuery);
   }
 
-  function onStepChange(e: React.SyntheticEvent<HTMLInputElement>) {
+  function onChangeStepMode(mode: StepMode) {
+    const { query, onChange } = props;
+    const nextQuery = { ...query, stepMode: mode };
+    onChange(nextQuery);
+  }
+
+  function onStepModeChange(option: SelectableValue<StepMode>) {
+    if (option.value) {
+      onChangeStepMode(option.value);
+    }
+  }
+
+  function onStepIntervalChange(e: React.SyntheticEvent<HTMLInputElement>) {
     if (e.currentTarget.value !== query.interval) {
       onChangeQueryStep(e.currentTarget.value);
     }
@@ -66,8 +78,10 @@ export const PromExploreQueryEditor: FC<Props> = (props: Props) => {
           // Select "both" as default option when Explore is opened. In legacy requests, range and instant can be undefined. In this case, we want to run queries with "both".
           queryType={query.range === query.instant ? 'both' : query.instant ? 'instant' : 'range'}
           stepValue={query.interval || ''}
+          stepMode={query.stepMode || 'min'}
           onQueryTypeChange={onQueryTypeChange}
-          onStepChange={onStepChange}
+          onStepModeChange={onStepModeChange}
+          onStepIntervalChange={onStepIntervalChange}
           onKeyDownFunc={onReturnKeyDown}
           query={query}
           onChange={onChange}

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

@@ -29,7 +29,7 @@ export const DEFAULT_STEP_MODE: SelectableValue<StepMode> = {
   label: 'Minimum',
 };
 
-const STEP_MODES: Array<SelectableValue<StepMode>> = [
+export const STEP_MODES: Array<SelectableValue<StepMode>> = [
   DEFAULT_STEP_MODE,
   {
     value: 'max',

public/app/plugins/datasource/prometheus/components/__snapshots__/PromExploreQueryEditor.test.tsx.snap

@@ -16,7 +16,8 @@ exports[`PromExploreQueryEditor should render component 1`] = `
       onChange={[MockFunction]}
       onKeyDownFunc={[Function]}
       onQueryTypeChange={[Function]}
-      onStepChange={[Function]}
+      onStepIntervalChange={[Function]}
+      onStepModeChange={[Function]}
       query={
         Object {
           "expr": "",
@@ -25,6 +26,7 @@ exports[`PromExploreQueryEditor should render component 1`] = `
         }
       }
       queryType="both"
+      stepMode="min"
       stepValue="1s"
     />
   }