Upgrade scenes to v5.29.0 (#938)

* chore: upgrade scenes to 5.28.0, remove explore logs specific implementation
grafana · Dec 5, 2024 · fb2b636 · fb2b636
1 parent a988110
commit fb2b636
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 287 deletions.
diff --git a/package.json b/package.json
@@ -105,7 +105,7 @@
     "@grafana/data": "^11.3.0",
     "@grafana/lezer-logql": "^0.2.6",
     "@grafana/runtime": "^11.3.0",
-    "@grafana/scenes": "5.14.7",
+    "@grafana/scenes": "5.29.0",
     "@grafana/ui": "^11.3.0",
     "@hello-pangea/dnd": "^16.6.0",
     "@lezer/common": "^1.2.1",

diff --git a/src/Components/ServiceScene/Breakdowns/FieldsAggregatedBreakdownScene.tsx b/src/Components/ServiceScene/Breakdowns/FieldsAggregatedBreakdownScene.tsx
@@ -4,7 +4,6 @@ import {
   SceneComponentProps,
   SceneCSSGridItem,
   SceneCSSGridLayout,
-  SceneDataTransformer,
   sceneGraph,
   SceneObjectBase,
   SceneObjectState,
@@ -27,8 +26,6 @@ import React from 'react';
 import { SelectLabelActionScene } from './SelectLabelActionScene';
 import { ValueSlugs } from '../../../services/routing';
 import { DataFrame, LoadingState } from '@grafana/data';
-import { limitMaxNumberOfSeriesForPanel, MAX_NUMBER_OF_TIME_SERIES } from './TimeSeriesLimitSeriesTitleItem';
-import { map, Observable } from 'rxjs';
 import {
   buildFieldsQueryString,
   extractParserFromArray,
@@ -43,6 +40,7 @@ import {
 import { AvgFieldPanelType, getPanelWrapperStyles, PanelMenu } from '../../Panels/PanelMenu';
 import { logger } from '../../../services/logger';
 import { getPanelOption } from '../../../services/store';
+import { MAX_NUMBER_OF_TIME_SERIES } from './TimeSeriesLimit';
 
 export interface FieldsAggregatedBreakdownSceneState extends SceneObjectState {
   body?: LayoutSwitcher;
@@ -88,7 +86,7 @@ export class FieldsAggregatedBreakdownScene extends SceneObjectBase<FieldsAggreg
                 // If a new field filter was added that updated the parsers, we'll need to rebuild the query
                 if (existingParser !== newParser) {
                   const fieldType = getDetectedFieldType(panel.state.title, detectedFieldsFrame);
-                  const dataTransformer = this.getDataTransformerForPanel(
+                  const dataTransformer = this.getQueryRunnerForPanel(
                     panel.state.title,
                     detectedFieldsFrame,
                     fieldType
@@ -123,7 +121,6 @@ export class FieldsAggregatedBreakdownScene extends SceneObjectBase<FieldsAggreg
         updatedChildren.sort(this.sortChildren(cardinalityMap));
 
         updatedChildren.map((child) => {
-          limitMaxNumberOfSeriesForPanel(child);
           this.subscribeToPanel(child);
         });
 
@@ -209,7 +206,6 @@ export class FieldsAggregatedBreakdownScene extends SceneObjectBase<FieldsAggreg
 
     // We must subscribe to the data providers for all children after the clone, or we'll see bugs in the row layout
     [...children, ...childrenClones].map((child) => {
-      limitMaxNumberOfSeriesForPanel(child);
       this.subscribeToPanel(child);
     });
 
@@ -310,7 +306,7 @@ export class FieldsAggregatedBreakdownScene extends SceneObjectBase<FieldsAggreg
     }
 
     const fieldType = getDetectedFieldType(labelName, detectedFieldsFrame);
-    const dataTransformer = this.getDataTransformerForPanel(labelName, detectedFieldsFrame, fieldType);
+    const dataTransformer = this.getQueryRunnerForPanel(labelName, detectedFieldsFrame, fieldType);
     let body;
 
     const headerActions = [];
@@ -345,14 +341,15 @@ export class FieldsAggregatedBreakdownScene extends SceneObjectBase<FieldsAggreg
       );
     }
     body.setHeaderActions(headerActions);
+    body.setSeriesLimit(MAX_NUMBER_OF_TIME_SERIES);
 
     const viz = body.build();
     return new SceneCSSGridItem({
       body: viz,
     });
   }
 
-  private getDataTransformerForPanel(
+  private getQueryRunnerForPanel(
     optionValue: string,
     detectedFieldsFrame: DataFrame | undefined,
     fieldType?: DetectedFieldType
@@ -364,12 +361,7 @@ export class FieldsAggregatedBreakdownScene extends SceneObjectBase<FieldsAggreg
       refId: optionValue,
     });
 
-    const queryRunner = getQueryRunner([query]);
-
-    return new SceneDataTransformer({
-      $data: queryRunner,
-      transformations: [() => limitFramesTransformation(MAX_NUMBER_OF_TIME_SERIES)],
-    });
+    return getQueryRunner([query]);
   }
 
   private getActiveGridLayouts() {
@@ -402,13 +394,3 @@ export class FieldsAggregatedBreakdownScene extends SceneObjectBase<FieldsAggreg
     return <LoadingPlaceholder text={'Loading...'} />;
   };
 }
-
-export function limitFramesTransformation(limit: number) {
-  return (source: Observable<DataFrame[]>) => {
-    return source.pipe(
-      map((frames) => {
-        return frames.slice(0, limit);
-      })
-    );
-  };
-}
diff --git a/src/Components/ServiceScene/Breakdowns/LabelsAggregatedBreakdownScene.tsx b/src/Components/ServiceScene/Breakdowns/LabelsAggregatedBreakdownScene.tsx
@@ -4,7 +4,6 @@ import {
   SceneCSSGridItem,
   SceneCSSGridLayout,
   SceneDataProvider,
-  SceneDataTransformer,
   sceneGraph,
   SceneObjectBase,
   SceneObjectState,
@@ -20,14 +19,12 @@ import React from 'react';
 import { LabelBreakdownScene } from './LabelBreakdownScene';
 import { SelectLabelActionScene } from './SelectLabelActionScene';
 import { ValueSlugs } from '../../../services/routing';
-import { limitMaxNumberOfSeriesForPanel, MAX_NUMBER_OF_TIME_SERIES } from './TimeSeriesLimitSeriesTitleItem';
-import { limitFramesTransformation } from './FieldsAggregatedBreakdownScene';
 import { buildLabelsQuery, LABEL_BREAKDOWN_GRID_TEMPLATE_COLUMNS } from '../../../services/labels';
 import { getFieldsVariable, getLabelGroupByVariable } from '../../../services/variableGetters';
-import { LokiQuery } from '../../../services/lokiQuery';
 import { ServiceScene } from '../ServiceScene';
 import { DataFrame, LoadingState } from '@grafana/data';
-import { PanelMenu, getPanelWrapperStyles } from '../../Panels/PanelMenu';
+import { getPanelWrapperStyles, PanelMenu } from '../../Panels/PanelMenu';
+import { MAX_NUMBER_OF_TIME_SERIES } from './TimeSeriesLimit';
 
 export interface LabelsAggregatedBreakdownSceneState extends SceneObjectState {
   body?: LayoutSwitcher;
@@ -90,7 +87,7 @@ export class LabelsAggregatedBreakdownScene extends SceneObjectBase<LabelsAggreg
         }
 
         panel.setState({
-          $data: this.getDataTransformer(query),
+          $data: getQueryRunner([query]),
         });
       }
     });
@@ -142,9 +139,6 @@ export class LabelsAggregatedBreakdownScene extends SceneObjectBase<LabelsAggreg
 
       const cardinalityMap = this.calculateCardinalityMap(detectedLabelsFrame);
       updatedChildren.sort(this.sortChildren(cardinalityMap));
-      updatedChildren.map((child) => {
-        limitMaxNumberOfSeriesForPanel(child);
-      });
 
       layout.setState({
         children: updatedChildren,
@@ -180,11 +174,6 @@ export class LabelsAggregatedBreakdownScene extends SceneObjectBase<LabelsAggreg
 
     const childrenClones = children.map((child) => child.clone());
 
-    // We must subscribe to the data providers for all children after the clone or we'll see bugs in the row layout
-    [...children, ...childrenClones].map((child) => {
-      limitMaxNumberOfSeriesForPanel(child);
-    });
-
     return new LayoutSwitcher({
       options: [
         { value: 'grid', label: 'Grid' },
@@ -217,13 +206,13 @@ export class LabelsAggregatedBreakdownScene extends SceneObjectBase<LabelsAggreg
         continue;
       }
       const query = buildLabelsQuery(this, String(option.value), String(option.value));
-      const dataTransformer = this.getDataTransformer(query);
+      const queryRunner = getQueryRunner([query]);
 
       children.push(
         new SceneCSSGridItem({
           body: PanelBuilders.timeseries()
             .setTitle(optionValue)
-            .setData(dataTransformer)
+            .setData(queryRunner)
             .setHeaderActions([new SelectLabelActionScene({ labelName: optionValue, fieldType: ValueSlugs.label })])
             .setCustomFieldConfig('stacking', { mode: StackingMode.Normal })
             .setCustomFieldConfig('fillOpacity', 100)
@@ -233,6 +222,7 @@ export class LabelsAggregatedBreakdownScene extends SceneObjectBase<LabelsAggreg
             .setHoverHeader(false)
             .setOverrides(setLevelColorOverrides)
             .setMenu(new PanelMenu({ labelName: optionValue }))
+            .setSeriesLimit(MAX_NUMBER_OF_TIME_SERIES)
             .build(),
         })
       );
@@ -256,14 +246,6 @@ export class LabelsAggregatedBreakdownScene extends SceneObjectBase<LabelsAggreg
     };
   }
 
-  private getDataTransformer(query: LokiQuery) {
-    const queryRunner = getQueryRunner([query]);
-    return new SceneDataTransformer({
-      $data: queryRunner,
-      transformations: [() => limitFramesTransformation(MAX_NUMBER_OF_TIME_SERIES)],
-    });
-  }
-
   public static Selector({ model }: SceneComponentProps<LabelsAggregatedBreakdownScene>) {
     const { body } = model.useState();
     return <>{body && <body.Selector model={body} />}</>;

diff --git a/src/Components/ServiceScene/Breakdowns/TimeSeriesLimit.ts b/src/Components/ServiceScene/Breakdowns/TimeSeriesLimit.ts
@@ -0,0 +1 @@
+export const MAX_NUMBER_OF_TIME_SERIES = 20;
diff --git a/src/Components/ServiceScene/Breakdowns/TimeSeriesLimitSeriesTitleItem.tsx b/src/Components/ServiceScene/Breakdowns/TimeSeriesLimitSeriesTitleItem.tsx
diff --git a/tests/appNavigation.spec.ts b/tests/appNavigation.spec.ts
@@ -26,7 +26,7 @@ test.describe('navigating app', () => {
     // assert panels are showing
     const actualSearchParams = new URLSearchParams(page.url().split('?')[1]);
     const expectedSearchParams = new URLSearchParams(
-      '?patterns=%5B%5D&from=now-15m&to=now&var-ds=gdev-loki&var-filters=&var-fields=&var-levels=&var-patterns=&var-lineFilter=&var-metadata=&refresh=&var-primary_label=service_name%7C%3D~%7C.%2B'
+      '?patterns=%5B%5D&from=now-15m&to=now&var-ds=gdev-loki&var-filters=&var-fields=&var-levels=&var-patterns=&var-lineFilter=&var-metadata=&timezone=browser&var-primary_label=service_name%7C%3D~%7C.%2B'
     );
     actualSearchParams.sort();
     expectedSearchParams.sort();
@@ -54,7 +54,7 @@ test.describe('navigating app', () => {
     await expect(page.getByTestId('data-testid Show logs').first()).toHaveCount(1);
     const actualSearchParams = new URLSearchParams(page.url().split('?')[1]);
     const expectedSearchParams = new URLSearchParams(
-      '?patterns=%5B%5D&from=now-15m&to=now&var-ds=gdev-loki&var-filters=service_name%7C%3D%7Ctempo-ingester&var-fields=&var-filters_replica=&var-levels=&var-patterns=&var-lineFilter=&var-metadata=&refresh=&var-primary_label=service_name%7C%3D%7E%7C.*tempo-i.*'
+      '?patterns=%5B%5D&from=now-15m&to=now&var-ds=gdev-loki&var-filters=service_name%7C%3D%7Ctempo-ingester&var-fields=&var-filters_replica=&var-levels=&var-patterns=&var-lineFilter=&var-metadata=&timezone=browser&var-primary_label=service_name%7C%3D%7E%7C.*tempo-i.*'
     );
     actualSearchParams.sort();
     expectedSearchParams.sort();