chore: wip - fixing label name breakdown, filtering out detected_leve…

…l from fields
grafana · Aug 29, 2024 · 4447607 · 4447607
1 parent f90626f
commit 4447607
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 50 deletions.
diff --git a/src/Components/ServiceScene/Breakdowns/AddToFiltersButton.tsx b/src/Components/ServiceScene/Breakdowns/AddToFiltersButton.tsx
@@ -63,6 +63,8 @@ export function addToFilters(
     variableType = resolveVariableTypeForField(key, scene);
   }
 
+  console.log('variableType', variableType);
+
   const variable = getAdHocFiltersVariable(validateVariableNameForField(key, variableType), scene);
 
   // If the filter exists, filter it

diff --git a/src/Components/ServiceScene/Breakdowns/LabelsAggregatedBreakdownScene.tsx b/src/Components/ServiceScene/Breakdowns/LabelsAggregatedBreakdownScene.tsx
@@ -1,13 +1,14 @@
 import {
   PanelBuilders,
-  QueryRunnerState,
   SceneComponentProps,
   SceneCSSGridItem,
   SceneCSSGridLayout,
+  SceneDataProvider,
   SceneFlexItemLike,
   sceneGraph,
   SceneObjectBase,
   SceneObjectState,
+  SceneQueryRunner,
   VizPanel,
 } from '@grafana/scenes';
 import { LayoutSwitcher } from './LayoutSwitcher';
@@ -18,9 +19,6 @@ import React from 'react';
 import { buildLabelsQuery, LABEL_BREAKDOWN_GRID_TEMPLATE_COLUMNS, LabelBreakdownScene } from './LabelBreakdownScene';
 import { SelectLabelActionScene } from './SelectLabelActionScene';
 import { ValueSlugs } from '../../../services/routing';
-import { getDetectedFieldsNamesFromQueryRunnerState, ServiceScene } from '../ServiceScene';
-import { LoadingState } from '@grafana/data';
-import { areArraysEqual } from '../../../services/comparison';
 
 export interface LabelsAggregatedBreakdownSceneState extends SceneObjectState {
   body?: LayoutSwitcher;
@@ -37,53 +35,72 @@ export class LabelsAggregatedBreakdownScene extends SceneObjectBase<LabelsAggreg
 
   onActivate() {
     const fields = getFieldsVariable(this);
-    const serviceScene = sceneGraph.getAncestor(this, ServiceScene);
-    const $detectedFieldsData = serviceScene.state.$detectedFieldsData;
-    if (fields.state.filters.length === 0 || $detectedFieldsData.state.data?.state === LoadingState.Done) {
-      this.setState({
-        body: this.build(),
-      });
-    }
+    this.setState({
+      body: this.build(),
+    });
 
     this._subs.add(
-      $detectedFieldsData.subscribeToState((newState, prevState) => {
-        if (newState.data?.state === LoadingState.Done) {
-          if (!this.state.body) {
-            this.setState({
-              body: this.build(),
-            });
-          } else {
-            this.updateQueriesOnDetectedFieldsChange(newState, prevState);
-          }
-        }
+      fields.subscribeToState((newState, prevState) => {
+        this.updateQueriesOnFieldsChange();
       })
     );
   }
 
-  private updateQueriesOnDetectedFieldsChange = (newState: QueryRunnerState, prevState: QueryRunnerState) => {
-    const newNamesField = getDetectedFieldsNamesFromQueryRunnerState(newState);
-    const prevNamesField = getDetectedFieldsNamesFromQueryRunnerState(prevState);
-
-    if (newState.data?.state === LoadingState.Done && !areArraysEqual(newNamesField?.values, prevNamesField?.values)) {
-      console.log('updating queries');
-      // Iterate through all of the layouts
-      this.state.body?.state.layouts.forEach((layoutObj) => {
-        const layout = layoutObj as SceneCSSGridLayout;
-        // Iterate through all of the existing panels
-        for (let i = 0; i < layout.state.children.length; i++) {
-          const gridItem = layout.state.children[i] as SceneCSSGridItem;
-          const panel = gridItem.state.body as VizPanel;
-          const title = panel.state.title;
-          const query = buildLabelsQuery(this, title, title);
-
-          panel.setState({
-            $data: getQueryRunner([query]),
-          });
+  private updateQueriesOnFieldsChange = () => {
+    this.state.body?.state.layouts.forEach((layoutObj) => {
+      const layout = layoutObj as SceneCSSGridLayout;
+      // Iterate through the existing panels
+      for (let i = 0; i < layout.state.children.length; i++) {
+        const gridItem = layout.state.children[i] as SceneCSSGridItem;
+        const panel = gridItem.state.body as VizPanel;
+
+        const title = panel.state.title;
+        const queryRunner: SceneDataProvider | SceneQueryRunner | undefined = panel.state.$data;
+        const query = buildLabelsQuery(this, title, title);
+
+        // Don't update if query didnt change
+        if (queryRunner instanceof SceneQueryRunner) {
+          if (query.expr === queryRunner?.state.queries?.[0]?.expr) {
+            break;
+          }
         }
-      });
-    }
+
+        console.log('updating query', title, query.expr);
+
+        panel.setState({
+          $data: getQueryRunner([query]),
+        });
+      }
+    });
   };
 
+  // private updateQueriesOnDetectedFieldsChange = (newState: QueryRunnerState, prevState: QueryRunnerState) => {
+  //   const newNamesField = getDetectedFieldsNamesFromQueryRunnerState(newState);
+  //   const prevNamesField = getDetectedFieldsNamesFromQueryRunnerState(prevState);
+  //
+  //   if (newState.data?.state === LoadingState.Done && !areArraysEqual(newNamesField?.values, prevNamesField?.values)) {
+  //     console.log('updating queries');
+  //     // Iterate through all of the layouts
+  //     this.state.body?.state.layouts.forEach((layoutObj) => {
+  //       const layout = layoutObj as SceneCSSGridLayout;
+  //       // Iterate through all of the existing panels
+  //       for (let i = 0; i < layout.state.children.length; i++) {
+  //         const gridItem = layout.state.children[i] as SceneCSSGridItem;
+  //         const panel = gridItem.state.body as VizPanel;
+  //         const title = panel.state.title;
+  //         const query = buildLabelsQuery(this, title, title);
+  //
+  //         console.log('panel data', panel.state.$data?.state.data?.request)
+  //         console.log('new query query', query)
+  //
+  //         panel.setState({
+  //           $data: getQueryRunner([query]),
+  //         });
+  //       }
+  //     });
+  //   }
+  // };
+
   private build(): LayoutSwitcher {
     const variable = getLabelGroupByVariable(this);
     const labelBreakdownScene = sceneGraph.getAncestor(this, LabelBreakdownScene);
@@ -97,6 +114,7 @@ export class LabelsAggregatedBreakdownScene extends SceneObjectBase<LabelsAggreg
         continue;
       }
       const query = buildLabelsQuery(this, String(option.value), String(option.value));
+      console.log('build query', query.expr);
 
       children.push(
         new SceneCSSGridItem({

diff --git a/src/services/fields.ts b/src/services/fields.ts
@@ -90,9 +90,16 @@ export function getParserForField(fieldName: string, sceneRef: SceneObject): Ext
   const namesField: Field<string> | undefined = detectedFieldsFrame?.fields[0];
 
   const index = namesField?.values.indexOf(fieldName);
-  return index && index !== -1
-    ? extractParserFromDetectedFieldParserFieldValue(parserField?.values?.[index] ?? '')
-    : undefined;
+  const parser =
+    index && index !== -1
+      ? extractParserFromDetectedFieldParserFieldValue(parserField?.values?.[index] ?? '')
+      : undefined;
+
+  if (parser === undefined) {
+    console.warn('missing parser, using mixed format for', fieldName);
+    return 'mixed';
+  }
+  return parser;
 }
 
 export function getFilterBreakdownValueScene(
@@ -142,6 +149,9 @@ export function getFilterBreakdownValueScene(
 }
 
 export function selectFrameTransformation(frame: DataFrame) {
+  if (!frame) {
+    console.warn('missing frame?');
+  }
   return (source: Observable<DataFrame[]>) => {
     return source.pipe(
       map(() => {

diff --git a/src/services/filters.ts b/src/services/filters.ts
@@ -46,13 +46,19 @@ export function getLabelOptions(labels: string[]) {
   return [{ label: 'All', value: ALL_VARIABLE_VALUE }, ...labelOptions];
 }
 
+function removeFieldsByName(options: string[], fieldsToRemove: string[]) {
+  fieldsToRemove.forEach((fieldName) => {
+    const labelsIndex = options.indexOf(fieldName);
+    if (labelsIndex !== -1) {
+      options.splice(labelsIndex, 1);
+    }
+  });
+}
+
 export function getFieldOptions(labels: string[]) {
   const options = [...labels];
-
-  const labelsIndex = options.indexOf('level_extracted');
-  if (labelsIndex !== -1) {
-    options.splice(labelsIndex, 1);
-  }
+  // @todo remove "level" as well?
+  removeFieldsByName(options, ['level_extracted', LEVEL_VARIABLE_VALUE, 'level']);
 
   const labelOptions: VariableValueOption[] = options.map((label) => ({
     label,