perf(Series): Limit the number of series request by breakdown charts (#219)

Author: grafakus

docker-compose.e2e.yaml

@@ -5,7 +5,7 @@ services:
  context: ./.config
  args:
  grafana_image: ${GRAFANA_IMAGE:-grafana-enterprise}
- grafana_version: ${GRAFANA_VERSION:-11.3.2}
+ grafana_version: ${GRAFANA_VERSION:-11.5.0}
  ports:
  - ${GRAFANA_PORT:-3000}:3000/tcp
  volumes:

docker-compose.local.yaml

@@ -5,7 +5,7 @@ services:
  context: ./.config
  args:
  grafana_image: ${GRAFANA_IMAGE:-grafana-enterprise}
- grafana_version: ${GRAFANA_VERSION:-11.3.2}
+ grafana_version: ${GRAFANA_VERSION:-11.5.0}
  ports:
  - ${GRAFANA_PORT:-3000}:3000/tcp
  volumes:

docker-compose.remote.yaml

@@ -5,7 +5,7 @@ services:
  dockerfile: ./Dockerfile.remote
  args:
  grafana_image: ${GRAFANA_IMAGE:-grafana-enterprise}
- grafana_version: ${GRAFANA_VERSION:-11.3.2}
+ grafana_version: ${GRAFANA_VERSION:-11.5.0}
  backendUrl: ${REMOTE_BACKEND_URL}
  basicAuthUser: ${REMOTE_BASIC_AUTH_USER}
  basicAuthPassword: ${REMOTE_BASIC_AUTH_PASSWORD}

docker-compose.yaml

@@ -5,7 +5,7 @@ services:
  context: ./.config
  args:
  grafana_image: ${GRAFANA_IMAGE:-grafana-enterprise}
- grafana_version: ${GRAFANA_VERSION:-11.3.2}
+ grafana_version: ${GRAFANA_VERSION:-11.5.0}
  ports:
  - ${GRAFANA_PORT:-3000}:3000/tcp
  volumes:

e2e/tests/labels-view/labels.spec.ts-snapshots/Labels-view-Panel-actions-Expand-panel-action-1-chromium-linux.png

@@ -36,14 +36,14 @@
  },
  "dependencies": {
  "@emotion/css": "11.10.6",
- "@grafana/data": "11.3.2",
+ "@grafana/data": "11.5.0",
  "@grafana/faro-web-sdk": "^1.10.0",
  "@grafana/flamegraph": "11.5.0-218249",
  "@grafana/llm": "^0.10.7",
- "@grafana/runtime": "11.3.2",
+ "@grafana/runtime": "11.5.0",
  "@grafana/scenes": "^4.22.0",
- "@grafana/schema": "11.3.2",
- "@grafana/ui": "11.3.2",
+ "@grafana/schema": "11.5.0",
+ "@grafana/ui": "11.5.0",
  "@react-aria/utils": "^3.25.3",
  "@tanstack/react-query": "^5.17.19",
  "color": "^4.2.3",

package.json

@@ -2,9 +2,6 @@ import { DataFrame } from '@grafana/data';
 import { merge } from 'lodash';
 import { map, Observable } from 'rxjs';
 
-import { getSeriesStatsValue } from '../../../infrastructure/helpers/getSeriesStatsValue';
-import { LabelsDataSource } from '../../../infrastructure/labels/LabelsDataSource';
-
 // General note: because (e.g.) SceneLabelValuesTimeseries sets the data provider in its constructor, data can come as undefined, hence all the optional chaining operators
 // in the transformers below
 
@@ -38,18 +35,3 @@ export const addStats = () => (source: Observable<DataFrame[]>) =>
  });
  })
  );
-
-// depends on the "addStats" transformation to work properly
-export const sortSeries = () => (source: Observable<DataFrame[]>) =>
- source.pipe(
- map((data: DataFrame[]) =>
- data?.sort((d1, d2) => {
- const d1Sum = getSeriesStatsValue(d1, 'allValuesSum') || 0;
- const d2Sum = getSeriesStatsValue(d2, 'allValuesSum') || 0;
- return d2Sum - d1Sum;
- })
- )
- );
-
-export const limitNumberOfSeries = () => (source: Observable<DataFrame[]>) =>
- source.pipe(map((data: DataFrame[]) => data?.slice(0, LabelsDataSource.MAX_TIMESERIES_LABEL_VALUES)));

src/pages/ProfilesExplorerView/components/SceneByVariableRepeaterGrid/infrastructure/data-transformations.ts

@@ -56,7 +56,7 @@ export class SceneExploreFavorites extends SceneObjectBase<SceneExploreFavorites
  new SelectAction({
  type: 'expand-panel',
  item,
- tooltip: () => 'Expand this panel to view all the data',
+ tooltip: () => 'Expand panel to view all the data',
  skipVariablesInterpolation: true,
  })
  );

src/pages/ProfilesExplorerView/components/SceneExploreFavorites/SceneExploreFavorites.tsx

@@ -38,11 +38,7 @@ import {
  SceneQuickFilterState,
 } from '../../../../../SceneByVariableRepeaterGrid/components/SceneQuickFilter';
 import { sortFavGridItems } from '../../../../../SceneByVariableRepeaterGrid/domain/sortFavGridItems';
-import {
- addRefId,
- addStats,
- sortSeries,
-} from '../../../../../SceneByVariableRepeaterGrid/infrastructure/data-transformations';
+import { addRefId, addStats } from '../../../../../SceneByVariableRepeaterGrid/infrastructure/data-transformations';
 import { GridItemData } from '../../../../../SceneByVariableRepeaterGrid/types/GridItemData';
 import { SceneLabelValuePanel } from './components/SceneLabelValuePanel';
 import { buildLabelValuesGridQueryRunner } from './infrastructure/buildLabelValuesGridQueryRunner';
@@ -86,7 +82,7 @@ export class SceneLabelValuesGrid extends SceneObjectBase<SceneLabelValuesGridSt
  isLoading: true,
  $data: new SceneDataTransformer({
  $data: buildLabelValuesGridQueryRunner({ label }),
- transformations: [addRefId, addStats, sortSeries],
+ transformations: [addRefId, addStats],
  }),
  hideNoData: false,
  headerActions,
@@ -252,7 +248,7 @@ export class SceneLabelValuesGrid extends SceneObjectBase<SceneLabelValuesGridSt
  isLoading: true,
  $data: new SceneDataTransformer({
  $data: buildLabelValuesGridQueryRunner({ label: this.state.label }),
- transformations: [addRefId, addStats, sortSeries],
+ transformations: [addRefId, addStats],
  }),
  });
 

src/pages/ProfilesExplorerView/components/SceneExploreServiceLabels/components/SceneGroupByLabels/components/SceneLabelValuesGrid/SceneLabelValuesGrid.tsx

@@ -16,7 +16,7 @@ import { getColorByIndex } from '../helpers/getColorByIndex';
 import { getSeriesLabelFieldName } from '../infrastructure/helpers/getSeriesLabelFieldName';
 import { getSeriesStatsValue } from '../infrastructure/helpers/getSeriesStatsValue';
 import { buildTimeSeriesQueryRunner } from '../infrastructure/timeseries/buildTimeSeriesQueryRunner';
-import { addRefId, addStats, sortSeries } from './SceneByVariableRepeaterGrid/infrastructure/data-transformations';
+import { addRefId, addStats } from './SceneByVariableRepeaterGrid/infrastructure/data-transformations';
 import { GridItemData } from './SceneByVariableRepeaterGrid/types/GridItemData';
 
 interface SceneLabelValuesBarGaugeState extends SceneObjectState {
@@ -38,7 +38,7 @@ export class SceneLabelValuesBarGauge extends SceneObjectBase<SceneLabelValuesBa
  .setData(
  new SceneDataTransformer({
  $data: buildTimeSeriesQueryRunner(item.queryRunnerParams),
- transformations: [addRefId, addStats, sortSeries],
+ transformations: [addRefId, addStats],
  })
  )
  .setHeaderActions(headerActions(item))