Prometheus: Fix exemplar fill color to match series color in time series.

CHANGELOG.md

@@ -1,3 +1,13 @@
+<!-- 9.3.2 START -->
+
+# 9.3.2 (2022-12-13)
+
+### Bug fixes
+
+- **Prometheus:** Fix exemplars not respecting corresponding series display status. [#59678](https://github.com/grafana/grafana/issues/59678), [@gtk-grafana](https://github.com/gtk-grafana)
+- **Prometheus:** Match exemplar fill color with series color in time series. [#59908](https://github.com/grafana/grafana/issues/59499), [@gtk-grafana](https://github.com/gtk-grafana)
+
+<!-- 9.3.2 END -->
 <!-- 9.3.1 START -->
 
 # 9.3.1 (2022-11-30)

packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.ts

@@ -39,7 +39,7 @@ type PrepData = (frames: DataFrame[]) => AlignedData | FacetedData;
 type PreDataStacked = (frames: DataFrame[], stackingGroups: StackingGroup[]) => AlignedData | FacetedData;
 
 export class UPlotConfigBuilder {
-  private series: UPlotSeriesBuilder[] = [];
+  series: UPlotSeriesBuilder[] = [];
   private axes: Record<string, UPlotAxisBuilder> = {};
   private scales: UPlotScaleBuilder[] = [];
   private bands: Band[] = [];

public/app/plugins/panel/candlestick/CandlestickPanel.tsx

@@ -4,10 +4,10 @@
 import React, { useMemo } from 'react';
 import uPlot from 'uplot';
 
-import { Field, getDisplayProcessor, PanelProps, getLinksSupplier } from '@grafana/data';
+import { Field, getDisplayProcessor, getLinksSupplier, PanelProps } from '@grafana/data';
 import { PanelDataErrorView } from '@grafana/runtime';
 import { TooltipDisplayMode } from '@grafana/schema';
-import { usePanelContext, TimeSeries, TooltipPlugin, ZoomPlugin, UPlotConfigBuilder, useTheme2 } from '@grafana/ui';
+import { TimeSeries, TooltipPlugin, UPlotConfigBuilder, usePanelContext, useTheme2, ZoomPlugin } from '@grafana/ui';
 import { AxisProps } from '@grafana/ui/src/components/uPlot/config/UPlotAxisBuilder';
 import { ScaleProps } from '@grafana/ui/src/components/uPlot/config/UPlotScaleBuilder';
 import { config } from 'app/core/config';
@@ -21,7 +21,7 @@ import { OutsideRangePlugin } from '../timeseries/plugins/OutsideRangePlugin';
 import { ThresholdControlsPlugin } from '../timeseries/plugins/ThresholdControlsPlugin';
 
 import { prepareCandlestickFields } from './fields';
-import { defaultColors, CandlestickOptions, VizDisplayMode } from './models.gen';
+import { CandlestickOptions, defaultColors, VizDisplayMode } from './models.gen';
 import { drawMarkers, FieldIndices } from './utils';
 
 interface CandlestickPanelProps extends PanelProps<CandlestickOptions> {}

public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx

@@ -3,14 +3,14 @@ import React, { useMemo } from 'react';
 import { Field, PanelProps } from '@grafana/data';
 import { PanelDataErrorView } from '@grafana/runtime';
 import { TooltipDisplayMode } from '@grafana/schema';
-import { usePanelContext, TimeSeries, TooltipPlugin, ZoomPlugin, KeyboardPlugin } from '@grafana/ui';
+import { KeyboardPlugin, TimeSeries, TooltipPlugin, usePanelContext, ZoomPlugin } from '@grafana/ui';
 import { config } from 'app/core/config';
 import { getFieldLinksForExplore } from 'app/features/explore/utils/links';
 
 import { AnnotationEditorPlugin } from './plugins/AnnotationEditorPlugin';
 import { AnnotationsPlugin } from './plugins/AnnotationsPlugin';
 import { ContextMenuPlugin } from './plugins/ContextMenuPlugin';
-import { ExemplarsPlugin } from './plugins/ExemplarsPlugin';
+import { ExemplarsPlugin, getVisibleLabels } from './plugins/ExemplarsPlugin';
 import { OutsideRangePlugin } from './plugins/OutsideRangePlugin';
 import { ThresholdControlsPlugin } from './plugins/ThresholdControlsPlugin';
 import { TimeSeriesOptions } from './types';
@@ -133,6 +133,7 @@ export const TimeSeriesPanel: React.FC<TimeSeriesPanelProps> = ({
             )}
             {data.annotations && (
               <ExemplarsPlugin
+                visibleSeries={getVisibleLabels(config, frames)}
                 config={config}
                 exemplars={data.annotations}
                 timeZone={timeZone}

public/app/plugins/panel/timeseries/plugins/ExemplarMarker.tsx

@@ -22,6 +22,7 @@ interface ExemplarMarkerProps {
   dataFrameFieldIndex: DataFrameFieldIndex;
   config: UPlotConfigBuilder;
   getFieldLinks: (field: Field, rowIndex: number) => Array<LinkModel<Field>>;
+  exemplarColor?: string;
 }
 
 export const ExemplarMarker: React.FC<ExemplarMarkerProps> = ({
@@ -30,6 +31,7 @@ export const ExemplarMarker: React.FC<ExemplarMarkerProps> = ({
   dataFrameFieldIndex,
   config,
   getFieldLinks,
+  exemplarColor,
 }) => {
   const styles = useStyles2(getExemplarMarkerStyles);
   const [isOpen, setIsOpen] = useState(false);
@@ -40,19 +42,33 @@ export const ExemplarMarker: React.FC<ExemplarMarkerProps> = ({
 
   const getSymbol = () => {
     const symbols = [
-      <rect key="diamond" x="3.38672" width="4.78985" height="4.78985" transform="rotate(45 3.38672 0)" />,
+      <rect
+        fill={exemplarColor}
+        key="diamond"
+        x="3.38672"
+        width="4.78985"
+        height="4.78985"
+        transform="rotate(45 3.38672 0)"
+      />,
       <path
+        fill={exemplarColor}
         key="x"
         d="M1.94444 3.49988L0 5.44432L1.55552 6.99984L3.49996 5.05539L5.4444 6.99983L6.99992 5.44431L5.05548 3.49988L6.99983 1.55552L5.44431 0L3.49996 1.94436L1.5556 0L8.42584e-05 1.55552L1.94444 3.49988Z"
       />,
-      <path key="triangle" d="M4 0L7.4641 6H0.535898L4 0Z" />,
-      <rect key="rectangle" width="5" height="5" />,
-      <path key="pentagon" d="M3 0.5L5.85317 2.57295L4.76336 5.92705H1.23664L0.146831 2.57295L3 0.5Z" />,
+      <path fill={exemplarColor} key="triangle" d="M4 0L7.4641 6H0.535898L4 0Z" />,
+      <rect fill={exemplarColor} key="rectangle" width="5" height="5" />,
+      <path
+        fill={exemplarColor}
+        key="pentagon"
+        d="M3 0.5L5.85317 2.57295L4.76336 5.92705H1.23664L0.146831 2.57295L3 0.5Z"
+      />,
       <path
+        fill={exemplarColor}
         key="plus"
         d="m2.35672,4.2425l0,2.357l1.88558,0l0,-2.357l2.3572,0l0,-1.88558l-2.3572,0l0,-2.35692l-1.88558,0l0,2.35692l-2.35672,0l0,1.88558l2.35672,0z"
       />,
     ];
+
     return symbols[dataFrameFieldIndex.frameIndex % symbols.length];
   };
 

public/app/plugins/panel/timeseries/plugins/ExemplarsPlugin.test.tsx

@@ -0,0 +1,110 @@
+import { MutableDataFrame, Field } from '@grafana/data/src';
+import { UPlotConfigBuilder } from '@grafana/ui/src';
+
+import { getVisibleLabels, VisibleExemplarLabels } from './ExemplarsPlugin';
+
+describe('getVisibleLabels()', () => {
+  const dataFrameSeries1 = new MutableDataFrame({
+    name: 'tns/app',
+    fields: [
+      {
+        name: 'Time',
+        values: [1670418750000, 1670418765000, 1670418780000, 1670418795000],
+        entities: {},
+      },
+      {
+        name: 'Value',
+        labels: {
+          job: 'tns/app',
+        },
+        values: [0.018963114754098367, 0.019140624999999974, 0.019718309859154928, 0.020064189189189167],
+      },
+    ] as unknown as Field[],
+    length: 4,
+  });
+  const dataFrameSeries2 = new MutableDataFrame({
+    name: 'tns/db',
+    fields: [
+      {
+        name: 'Time',
+        values: [1670418750000, 1670418765000, 1670418780000, 1670418795000],
+        entities: {},
+      },
+      {
+        name: 'Value',
+        labels: {
+          job: 'tns/db',
+        },
+        values: [0.028963114754098367, 0.029140624999999974, 0.029718309859154928, 0.030064189189189167],
+      },
+    ] as unknown as Field[],
+    length: 4,
+  });
+  const dataFrameSeries3 = new MutableDataFrame({
+    name: 'tns/loadgen',
+    fields: [
+      {
+        name: 'Time',
+        values: [1670418750000, 1670418765000, 1670418780000, 1670418795000],
+        entities: {},
+      },
+      {
+        name: 'Value',
+        labels: {
+          job: 'tns/loadgen',
+        },
+        values: [0.028963114754098367, 0.029140624999999974, 0.029718309859154928, 0.030064189189189167],
+      },
+    ] as unknown as Field[],
+    length: 4,
+  });
+  const frames = [dataFrameSeries1, dataFrameSeries2, dataFrameSeries3];
+  const config: UPlotConfigBuilder = {
+    addHook: (type, hook) => {},
+    series: [
+      {
+        props: {
+          dataFrameFieldIndex: { frameIndex: 0, fieldIndex: 1 },
+          show: true,
+        },
+      },
+      {
+        props: {
+          dataFrameFieldIndex: { frameIndex: 1, fieldIndex: 1 },
+          show: true,
+        },
+      },
+      {
+        props: {
+          dataFrameFieldIndex: { frameIndex: 2, fieldIndex: 1 },
+          show: false,
+        },
+      },
+    ],
+  } as UPlotConfigBuilder;
+
+  it('function should only return labels associated with actively visible series', () => {
+    const expected: VisibleExemplarLabels = {
+      totalSeriesCount: 3,
+      labels: [
+        {
+          color: '',
+          labels: {
+            job: 'tns/app',
+          },
+        },
+        {
+          color: '',
+          labels: {
+            job: 'tns/db',
+          },
+        },
+      ],
+    };
+
+    // Base case
+    expect(getVisibleLabels(config, [])).toEqual({ totalSeriesCount: 3, labels: [] });
+
+    expect(getVisibleLabels(config, frames)).toEqual(expected);
+  });
+});