Timeseries panels: Map field display names to color (#937)

* feat: Map series name to color
grafana · Dec 10, 2024 · b0b25df · b0b25df
1 parent 58ce56e
commit b0b25df
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 4 deletions.
diff --git a/src/Components/ServiceScene/ServiceScene.tsx b/src/Components/ServiceScene/ServiceScene.tsx
@@ -56,7 +56,7 @@ import {
 import { replaceSlash } from '../../services/extensions/links';
 import { ShowLogsButtonScene } from '../IndexScene/ShowLogsButtonScene';
 
-const LOGS_PANEL_QUERY_REFID = 'logsPanelQuery';
+export const LOGS_PANEL_QUERY_REFID = 'logsPanelQuery';
 const PATTERNS_QUERY_REFID = 'patterns';
 const DETECTED_LABELS_QUERY_REFID = 'detectedLabels';
 const DETECTED_FIELDS_QUERY_REFID = 'detectedFields';

diff --git a/src/services/fields.ts b/src/services/fields.ts
@@ -7,7 +7,6 @@ import {
   SceneDataTransformer,
   SceneObject,
 } from '@grafana/scenes';
-import { getColorByIndex } from './scenes';
 import { AddToFiltersButton, VariableFilterType } from 'Components/ServiceScene/Breakdowns/AddToFiltersButton';
 import {
   DetectedFieldType,
@@ -148,7 +147,6 @@ export function getFilterBreakdownValueScene(
           transformations: [() => selectFrameTransformation(frame)],
         })
       )
-      .setColor({ mode: 'fixed', fixedColor: getColorByIndex(frameIndex) })
       .setOverrides(setLevelColorOverrides)
       .setMenu(new PanelMenu({ frame, fieldName: getTitle(frame), labelName: labelKey }))
       .setHeaderActions([new AddToFiltersButton({ frame, variableName })]);

diff --git a/src/services/panel.ts b/src/services/panel.ts
@@ -1,4 +1,11 @@
-import { DataFrame, FieldConfig, FieldMatcherID } from '@grafana/data';
+import {
+  DataFrame,
+  FieldColorModeId,
+  FieldConfig,
+  FieldMatcherID,
+  FieldType,
+  getFieldDisplayName,
+} from '@grafana/data';
 import {
   FieldConfigBuilder,
   FieldConfigBuilders,
@@ -18,6 +25,7 @@ import { LogsSceneQueryRunner } from './LogsSceneQueryRunner';
 import { DrawStyle, StackingMode } from '@grafana/ui';
 import { getLabelsFromSeries, getVisibleLevels } from './levels';
 import { LokiQuery } from './lokiQuery';
+import { LOGS_PANEL_QUERY_REFID } from '../Components/ServiceScene/ServiceScene';
 
 const UNKNOWN_LEVEL_LOGS = 'logs';
 export function setLevelColorOverrides(overrides: FieldConfigOverridesBuilder<FieldConfig>) {
@@ -93,6 +101,36 @@ export function syncLogsPanelVisibleSeries(panel: VizPanel, series: DataFrame[],
     }
   }
 }
+function setColorByDisplayNameTransformation() {
+  return (source: Observable<DataFrame[]>) => {
+    return source.pipe(
+      map((data: DataFrame[]) => {
+        return data.map((frame, frameIndex) => {
+          return {
+            ...frame,
+            fields: frame.fields.map((f, fieldIndex) => {
+              // Time fields do not have color config
+              if (f.type === FieldType.time) {
+                return f;
+              }
+              const displayName = getFieldDisplayName(f, frame, data);
+              return {
+                ...f,
+                config: {
+                  ...f.config,
+                  displayName,
+                  color: {
+                    mode: FieldColorModeId.PaletteClassicByName,
+                  },
+                },
+              };
+            }),
+          };
+        });
+      })
+    );
+  };
+}
 
 export function sortLevelTransformation() {
   return (source: Observable<DataFrame[]>) => {
@@ -137,6 +175,7 @@ export function getQueryRunner(queries: LokiQuery[], queryRunnerOptions?: Partia
   // `level` label.
 
   const hasLevel = queries.find((query) => query.legendFormat?.toLowerCase().includes('level'));
+  const isLogPanelQuery = queries.find((query) => query.refId === LOGS_PANEL_QUERY_REFID);
 
   if (hasLevel) {
     return new SceneDataTransformer({
@@ -149,7 +188,19 @@ export function getQueryRunner(queries: LokiQuery[], queryRunnerOptions?: Partia
     });
   }
 
+  if (!isLogPanelQuery) {
+    return new SceneDataTransformer({
+      $data: getSceneQueryRunner({
+        datasource: { uid: WRAPPED_LOKI_DS_UID },
+        queries: queries,
+        ...queryRunnerOptions,
+      }),
+      transformations: [setColorByDisplayNameTransformation],
+    });
+  }
+
   return getSceneQueryRunner({
+    datasource: { uid: WRAPPED_LOKI_DS_UID },
     queries: queries,
     ...queryRunnerOptions,
   });