Alerting: Make Loki & Prometheus instant vector by default (#66797)

Co-authored-by: Konrad Lalik <konrad.lalik@grafana.com>

public/app/features/explore/Graph/ExploreGraph.tsx

@@ -15,11 +15,18 @@ import {
   LoadingState,
   SplitOpen,
   TimeZone,
+  ThresholdsConfig,
   DashboardCursorSync,
   EventBus,
 } from '@grafana/data';
 import { PanelRenderer } from '@grafana/runtime';
-import { GraphDrawStyle, LegendDisplayMode, TooltipDisplayMode, SortOrder } from '@grafana/schema';
+import {
+  GraphDrawStyle,
+  LegendDisplayMode,
+  TooltipDisplayMode,
+  SortOrder,
+  GraphThresholdsStyleConfig,
+} from '@grafana/schema';
 import {
   Button,
   Icon,
@@ -29,13 +36,14 @@ import {
   useStyles2,
   useTheme2,
 } from '@grafana/ui';
+import { GraphFieldConfig } from 'app/plugins/panel/graph/types';
 import { defaultGraphConfig, getGraphFieldConfig } from 'app/plugins/panel/timeseries/config';
 import { PanelOptions as TimeSeriesOptions } from 'app/plugins/panel/timeseries/panelcfg.gen';
 import { ExploreGraphStyle } from 'app/types';
 
 import { seriesVisibilityConfigFactory } from '../../dashboard/dashgrid/SeriesVisibilityConfigFactory';
 
-import { applyGraphStyle } from './exploreGraphStyleUtils';
+import { applyGraphStyle, applyThresholdsConfig } from './exploreGraphStyleUtils';
 import { useStructureRev } from './useStructureRev';
 
 const MAX_NUMBER_OF_TIME_SERIES = 20;
@@ -55,6 +63,8 @@ interface Props {
   graphStyle: ExploreGraphStyle;
   anchorToZero?: boolean;
   yAxisMaximum?: number;
+  thresholdsConfig?: ThresholdsConfig;
+  thresholdsStyle?: GraphThresholdsStyleConfig;
   eventBus: EventBus;
 }
 
@@ -73,6 +83,8 @@ export function ExploreGraph({
   tooltipDisplayMode = TooltipDisplayMode.Single,
   anchorToZero = false,
   yAxisMaximum,
+  thresholdsConfig,
+  thresholdsStyle,
   eventBus,
 }: Props) {
   const theme = useTheme2();
@@ -93,7 +105,7 @@ export function ExploreGraph({
     []
   );
 
-  const [fieldConfig, setFieldConfig] = useState<FieldConfigSource>({
+  const [fieldConfig, setFieldConfig] = useState<FieldConfigSource<GraphFieldConfig>>({
     defaults: {
       min: anchorToZero ? 0 : undefined,
       max: yAxisMaximum || undefined,
@@ -109,10 +121,10 @@ export function ExploreGraph({
     overrides: [],
   });
 
-  const styledFieldConfig = useMemo(
-    () => applyGraphStyle(fieldConfig, graphStyle, yAxisMaximum),
-    [fieldConfig, graphStyle, yAxisMaximum]
-  );
+  const styledFieldConfig = useMemo(() => {
+    const withGraphStyle = applyGraphStyle(fieldConfig, graphStyle, yAxisMaximum);
+    return applyThresholdsConfig(withGraphStyle, thresholdsStyle, thresholdsConfig);
+  }, [fieldConfig, graphStyle, yAxisMaximum, thresholdsConfig, thresholdsStyle]);
 
   const dataWithConfig = useMemo(() => {
     return applyFieldOverrides({

public/app/features/explore/Graph/GraphContainer.tsx

@@ -1,7 +1,15 @@
 import React, { useCallback, useState } from 'react';
 
-import { DataFrame, EventBus, AbsoluteTimeRange, TimeZone, SplitOpen, LoadingState } from '@grafana/data';
-import { PanelChrome } from '@grafana/ui';
+import {
+  DataFrame,
+  EventBus,
+  AbsoluteTimeRange,
+  TimeZone,
+  SplitOpen,
+  LoadingState,
+  ThresholdsConfig,
+} from '@grafana/data';
+import { GraphThresholdsStyleConfig, PanelChrome, PanelChromeProps } from '@grafana/ui';
 import { ExploreGraphStyle } from 'app/types';
 
 import { storeGraphStyle } from '../state/utils';
@@ -10,18 +18,18 @@ import { ExploreGraph } from './ExploreGraph';
 import { ExploreGraphLabel } from './ExploreGraphLabel';
 import { loadGraphStyle } from './utils';
 
-interface Props {
+interface Props extends Pick<PanelChromeProps, 'width' | 'height' | 'statusMessage'> {
   loading: boolean;
   data: DataFrame[];
   annotations?: DataFrame[];
   eventBus: EventBus;
-  height: number;
-  width: number;
   absoluteRange: AbsoluteTimeRange;
   timeZone: TimeZone;
   onChangeTime: (absoluteRange: AbsoluteTimeRange) => void;
   splitOpenFn: SplitOpen;
   loadingState: LoadingState;
+  thresholdsConfig?: ThresholdsConfig;
+  thresholdsStyle?: GraphThresholdsStyleConfig;
 }
 
 export const GraphContainer = ({
@@ -34,7 +42,10 @@ export const GraphContainer = ({
   annotations,
   onChangeTime,
   splitOpenFn,
+  thresholdsConfig,
+  thresholdsStyle,
   loadingState,
+  statusMessage,
 }: Props) => {
   const [graphStyle, setGraphStyle] = useState(loadGraphStyle);
 
@@ -49,6 +60,7 @@ export const GraphContainer = ({
       width={width}
       height={height}
       loadingState={loadingState}
+      statusMessage={statusMessage}
       actions={<ExploreGraphLabel graphStyle={graphStyle} onChangeGraphStyle={onGraphStyleChange} />}
     >
       {(innerWidth, innerHeight) => (
@@ -63,6 +75,8 @@ export const GraphContainer = ({
           annotations={annotations}
           splitOpenFn={splitOpenFn}
           loadingState={loadingState}
+          thresholdsConfig={thresholdsConfig}
+          thresholdsStyle={thresholdsStyle}
           eventBus={eventBus}
         />
       )}

public/app/features/explore/Graph/exploreGraphStyleUtils.ts

@@ -1,7 +1,7 @@
 import produce from 'immer';
 
-import { FieldConfigSource } from '@grafana/data';
-import { GraphDrawStyle, GraphFieldConfig, StackingMode } from '@grafana/schema';
+import { FieldConfigSource, ThresholdsConfig } from '@grafana/data';
+import { GraphDrawStyle, GraphFieldConfig, GraphThresholdsStyleConfig, StackingMode } from '@grafana/schema';
 import { ExploreGraphStyle } from 'app/types';
 
 export type FieldConfig = FieldConfigSource<GraphFieldConfig>;
@@ -57,3 +57,15 @@ export function applyGraphStyle(config: FieldConfig, style: ExploreGraphStyle, m
     }
   });
 }
+
+export function applyThresholdsConfig(
+  config: FieldConfig,
+  thresholdsStyle?: GraphThresholdsStyleConfig,
+  thresholdsConfig?: ThresholdsConfig
+): FieldConfig {
+  return produce(config, (draft) => {
+    draft.defaults.thresholds = thresholdsConfig;
+    draft.defaults.custom = draft.defaults.custom ?? {};
+    draft.defaults.custom.thresholdsStyle = thresholdsStyle;
+  });
+}