Breakdowns: Remove service_name requirement

src/Components/IndexScene/IndexScene.tsx

@@ -13,7 +13,6 @@ import {
   SceneObjectUrlSyncConfig,
   SceneObjectUrlValues,
   SceneRefreshPicker,
-  SceneRouteMatch,
   SceneTimePicker,
   SceneTimeRange,
   SceneVariableSet,
@@ -54,6 +53,7 @@ import {
   getUrlParamNameForVariable,
 } from '../../services/variableGetters';
 import { ToolbarScene } from './ToolbarScene';
+import { OptionalRouteMatch } from '../Pages';
 
 export interface AppliedPattern {
   pattern: string;
@@ -67,7 +67,7 @@ export interface IndexSceneState extends SceneObjectState {
   body?: LayoutScene;
   initialFilters?: AdHocVariableFilter[];
   patterns?: AppliedPattern[];
-  routeMatch?: SceneRouteMatch<{ service?: string; label?: string }>;
+  routeMatch?: OptionalRouteMatch;
 }
 
 export class IndexScene extends SceneObjectBase<IndexSceneState> {
@@ -122,7 +122,7 @@ export class IndexScene extends SceneObjectBase<IndexSceneState> {
     const stateUpdate: Partial<IndexSceneState> = {};
 
     if (!this.state.contentScene) {
-      stateUpdate.contentScene = getContentScene(this.state.routeMatch?.params.label);
+      stateUpdate.contentScene = getContentScene(this.state.routeMatch?.params.breakdownLabel);
     }
 
     this.setState(stateUpdate);

src/Components/Pages.tsx

@@ -9,10 +9,8 @@ import {
 import {
   CHILD_ROUTE_DEFINITIONS,
   ChildDrilldownSlugs,
-  ValueSlugs,
   DRILLDOWN_URL_KEYS,
-  extractLabelNameFromRoute,
-  extractServiceFromRoute,
+  extractValuesFromRoute,
   PageSlugs,
   ParentDrilldownSlugs,
   PLUGIN_BASE_URL,
@@ -21,12 +19,20 @@ import {
   ROUTES,
   SERVICE_URL_KEYS,
   SUB_ROUTES,
+  ValueSlugs,
 } from '../services/routing';
 import { PageLayoutType } from '@grafana/data';
 import { IndexScene } from './IndexScene/IndexScene';
 import { navigateToIndex } from '../services/navigate';
+import { logger } from '../services/logger';
 
-function getServicesScene(routeMatch?: SceneRouteMatch<{ service?: string; label?: string }>) {
+export type RouteProps = { labelName: string; labelValue: string; breakdownLabel?: string };
+export type RouteMatch = SceneRouteMatch<RouteProps>;
+type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
+export type OptionalRouteProps = Optional<RouteProps, 'labelName' | 'labelValue'>;
+export type OptionalRouteMatch = SceneRouteMatch<OptionalRouteProps>;
+
+function getServicesScene(routeMatch: OptionalRouteMatch) {
   const DEFAULT_TIME_RANGE = { from: 'now-15m', to: 'now' };
   return new EmbeddedScene({
     body: new IndexScene({
@@ -70,7 +76,7 @@ export function makeIndexPage() {
       },
       {
         routePath: CHILD_ROUTE_DEFINITIONS.field,
-        getPage: (routeMatch, parent) => makeBreakdownValuePage(routeMatch, parent, ValueSlugs.field),
+        getPage: (routeMatch: RouteMatch, parent) => makeBreakdownValuePage(routeMatch, parent, ValueSlugs.field),
       },
       {
         routePath: '*',
@@ -107,33 +113,38 @@ function makeEmptyScene(): (routeMatch: SceneRouteMatch) => EmbeddedScene {
 }
 
 export function makeBreakdownPage(
-  routeMatch: SceneRouteMatch<{ service: string; label?: string }>,
+  routeMatch: RouteMatch,
   parent: SceneAppPageLike,
   slug: ParentDrilldownSlugs
 ): SceneAppPage {
-  const { service } = extractServiceFromRoute(routeMatch);
+  const { labelName, labelValue } = extractValuesFromRoute(routeMatch);
   return new SceneAppPage({
     title: slugToBreadcrumbTitle(slug),
     layout: PageLayoutType.Custom,
-    url: ROUTES[slug](service),
+    url: ROUTES[slug](labelValue, labelName),
     preserveUrlKeys: DRILLDOWN_URL_KEYS,
     getParentPage: () => parent,
     getScene: (routeMatch) => getServicesScene(routeMatch),
   });
 }
 
 export function makeBreakdownValuePage(
-  routeMatch: SceneRouteMatch<{ service: string; label: string }>,
+  routeMatch: RouteMatch,
   parent: SceneAppPageLike,
   slug: ChildDrilldownSlugs
 ): SceneAppPage {
-  const { service } = extractServiceFromRoute(routeMatch);
-  const { label } = extractLabelNameFromRoute(routeMatch);
+  const { labelName, labelValue, breakdownLabel } = extractValuesFromRoute(routeMatch);
+
+  if (!breakdownLabel) {
+    const e = new Error('Breakdown value missing!');
+    logger.error(e, { labelName, labelValue, breakdownLabel: breakdownLabel ?? '' });
+    throw e;
+  }
 
   return new SceneAppPage({
-    title: slugToBreadcrumbTitle(label),
+    title: slugToBreadcrumbTitle(breakdownLabel),
     layout: PageLayoutType.Custom,
-    url: SUB_ROUTES[slug](service, label),
+    url: SUB_ROUTES[slug](labelValue, labelName, breakdownLabel),
     preserveUrlKeys: DRILLDOWN_URL_KEYS,
     getParentPage: () => parent,
     getScene: (routeMatch) => getServicesScene(routeMatch),

src/Components/ServiceScene/ActionBarScene.tsx

@@ -4,14 +4,12 @@ import { getExplorationFor } from '../../services/scenes';
 import { getDrilldownSlug, getDrilldownValueSlug, PageSlugs, ValueSlugs } from '../../services/routing';
 import { GoToExploreButton } from './GoToExploreButton';
 import { reportAppInteraction, USER_EVENTS_ACTIONS, USER_EVENTS_PAGES } from '../../services/analytics';
-import { SERVICE_NAME } from '../../services/variables';
-import { navigateToDrilldownPage, navigateToIndex } from '../../services/navigate';
+import { navigateToDrilldownPage } from '../../services/navigate';
 import React from 'react';
 import { ServiceScene, ServiceSceneState } from './ServiceScene';
 import { GrafanaTheme2 } from '@grafana/data';
 import { css } from '@emotion/css';
 import { BreakdownViewDefinition, breakdownViewsDefinitions } from './BreakdownViews';
-import { getLabelsVariable } from '../../services/variableGetters';
 
 export interface ActionBarSceneState extends SceneObjectState {}
 
@@ -67,14 +65,7 @@ export class ActionBarScene extends SceneObjectBase<ActionBarSceneState> {
                     );
 
                     const serviceScene = sceneGraph.getAncestor(model, ServiceScene);
-                    const variable = getLabelsVariable(serviceScene);
-                    const service = variable.state.filters.find((f) => f.key === SERVICE_NAME);
-
-                    if (service?.value) {
-                      navigateToDrilldownPage(tab.value, serviceScene);
-                    } else {
-                      navigateToIndex();
-                    }
+                    navigateToDrilldownPage(tab.value, serviceScene);
                   }
                 }}
               />

src/Components/ServiceScene/Breakdowns/FieldsAggregatedBreakdownScene.tsx

@@ -249,10 +249,8 @@ export class FieldsAggregatedBreakdownScene extends SceneObjectBase<FieldsAggreg
     const activeLayoutChildren = activeLayout?.state.children as SceneCSSGridItem[] | undefined;
     const activePanels = activeLayoutChildren?.filter((child) => !child.state.isHidden);
 
-    if (activePanels) {
-      const fieldsBreakdownScene = sceneGraph.getAncestor(this, FieldsBreakdownScene);
-      fieldsBreakdownScene.state.changeFieldCount?.(activePanels.length);
-    }
+    const fieldsBreakdownScene = sceneGraph.getAncestor(this, FieldsBreakdownScene);
+    fieldsBreakdownScene.state.changeFieldCount?.(activePanels?.length ?? 0);
   }
 
   public static Selector({ model }: SceneComponentProps<FieldsAggregatedBreakdownScene>) {

src/Components/ServiceScene/Breakdowns/FieldsBreakdownScene.tsx

@@ -19,11 +19,11 @@ import {
 import { Alert, Button, useStyles2 } from '@grafana/ui';
 import { reportAppInteraction, USER_EVENTS_ACTIONS, USER_EVENTS_PAGES } from 'services/analytics';
 import { getSortByPreference } from 'services/store';
-import { ALL_VARIABLE_VALUE, SERVICE_NAME, VAR_FIELD_GROUP_BY, VAR_LABELS } from 'services/variables';
+import { ALL_VARIABLE_VALUE, SERVICE_NAME, VAR_FIELD_GROUP_BY, VAR_LABELS, VAR_SERVICE } from 'services/variables';
 import { areArraysEqual } from '../../../services/comparison';
 import { CustomConstantVariable, CustomConstantVariableState } from '../../../services/CustomConstantVariable';
 import { navigateToValueBreakdown } from '../../../services/navigate';
-import { ValueSlugs } from '../../../services/routing';
+import { checkPrimaryLabel, getPrimaryLabelFromUrl, ValueSlugs } from '../../../services/routing';
 import { DEFAULT_SORT_BY } from '../../../services/sorting';
 import { GrotError } from '../../GrotError';
 import { IndexScene } from '../../IndexScene/IndexScene';
@@ -108,10 +108,12 @@ export class FieldsBreakdownScene extends SceneObjectBase<FieldsBreakdownSceneSt
     this._subs.add(
       getLabelsVariable(this).subscribeToState((newState, prevState) => {
         const variable = getFieldGroupByVariable(this);
-        const newService = newState.filters.find((filter) => filter.key === SERVICE_NAME);
-        const prevService = prevState.filters.find((filter) => filter.key === SERVICE_NAME);
+        let { labelName } = getPrimaryLabelFromUrl();
 
-        // If the user changes the service
+        const newService = newState.filters.find((filter) => filter.key === labelName);
+        const prevService = prevState.filters.find((filter) => filter.key === labelName);
+
+        // If the user changes the primary label
         if (variable.state.value === ALL_VARIABLE_VALUE && newService !== prevService) {
           this.setState({
             loading: true,
@@ -138,6 +140,8 @@ export class FieldsBreakdownScene extends SceneObjectBase<FieldsBreakdownSceneSt
     if (detectedFieldsFrame) {
       this.updateOptions(detectedFieldsFrame);
     }
+
+    checkPrimaryLabel(this);
   }
 
   private variableChanged = (newState: CustomConstantVariableState, oldState: CustomConstantVariableState) => {
@@ -159,6 +163,7 @@ export class FieldsBreakdownScene extends SceneObjectBase<FieldsBreakdownSceneSt
 
       let body;
       if (variablesToClear.length > 1) {
+        this.state.changeFieldCount?.(0);
         body = this.buildClearFiltersLayout(() => this.clearVariables(variablesToClear));
       } else {
         body = new EmptyLayoutScene({ type: 'fields' });
@@ -220,6 +225,7 @@ export class FieldsBreakdownScene extends SceneObjectBase<FieldsBreakdownSceneSt
       const variablesToClear = this.getVariablesThatCanBeCleared(indexScene);
 
       if (variablesToClear.length > 1) {
+        this.state.changeFieldCount?.(0);
         stateUpdate.body = this.buildClearFiltersLayout(() => this.clearVariables(variablesToClear));
       } else {
         stateUpdate.body = new EmptyLayoutScene({ type: 'fields' });
@@ -270,8 +276,13 @@ export class FieldsBreakdownScene extends SceneObjectBase<FieldsBreakdownSceneSt
 
     variablesToClear.forEach((variable) => {
       if (variable instanceof AdHocFiltersVariable && variable.state.key === 'adhoc_service_filter') {
+        let { labelName } = getPrimaryLabelFromUrl();
+        // getPrimaryLabelFromUrl returns the label name that exists in the URL, which is "service" not "service_name"
+        if (labelName === VAR_SERVICE) {
+          labelName = SERVICE_NAME;
+        }
         variable.setState({
-          filters: variable.state.filters.filter((filter) => filter.key === SERVICE_NAME),
+          filters: variable.state.filters.filter((filter) => filter.key === labelName),
         });
       } else if (variable instanceof AdHocFiltersVariable) {
         variable.setState({

src/Components/ServiceScene/Breakdowns/LabelBreakdownScene.test.ts

@@ -12,7 +12,7 @@ describe('buildLabelsQuery', () => {
 
     const result = buildLabelsQuery({} as SceneObject, VAR_LABEL_GROUP_BY_EXPR, 'cluster');
     expect(result).toMatchObject({
-      expr: `sum(count_over_time({\${filters} ,cluster != ""}  \${levels} \${patterns} \${lineFilter} [$__auto])) by (${VAR_LABEL_GROUP_BY_EXPR})`,
+      expr: `sum(count_over_time({\${filters} ,cluster != ""}  \${levels} \${patterns} \${lineFilter}  \${fields} [$__auto])) by (${VAR_LABEL_GROUP_BY_EXPR})`,
     });
   });
   test('should build no-parser query with structured metadata filters', () => {
@@ -35,7 +35,7 @@ describe('buildLabelsQuery', () => {
 
     const result = buildLabelsQuery({} as SceneObject, VAR_LABEL_GROUP_BY_EXPR, 'cluster');
     expect(result).toMatchObject({
-      expr: `sum(count_over_time({\${filters} ,cluster != ""}  \${levels} \${patterns} \${lineFilter} [$__auto])) by (${VAR_LABEL_GROUP_BY_EXPR})`,
+      expr: `sum(count_over_time({\${filters} ,cluster != ""}  \${levels} \${patterns} \${lineFilter}  \${fields} [$__auto])) by (${VAR_LABEL_GROUP_BY_EXPR})`,
     });
   });
   test('should build logfmt-parser query with structured metadata filters', () => {

src/Components/ServiceScene/Breakdowns/LabelBreakdownScene.tsx

@@ -16,8 +16,8 @@ import {
 } from '@grafana/scenes';
 import { Alert, useStyles2 } from '@grafana/ui';
 import { reportAppInteraction, USER_EVENTS_ACTIONS, USER_EVENTS_PAGES } from 'services/analytics';
-import { ValueSlugs } from 'services/routing';
-import { ALL_VARIABLE_VALUE, SERVICE_NAME, VAR_LABEL_GROUP_BY, VAR_LABELS } from 'services/variables';
+import { checkPrimaryLabel, getPrimaryLabelFromUrl, ValueSlugs } from 'services/routing';
+import { ALL_VARIABLE_VALUE, SERVICE_NAME, VAR_LABEL_GROUP_BY, VAR_LABELS, VAR_SERVICE } from 'services/variables';
 import { ByFrameRepeater } from './ByFrameRepeater';
 import { FieldSelector } from './FieldSelector';
 import { StatusWrapper } from './StatusWrapper';
@@ -113,6 +113,8 @@ export class LabelBreakdownScene extends SceneObjectBase<LabelBreakdownSceneStat
     if (detectedLabelsFrame) {
       this.updateOptions(detectedLabelsFrame);
     }
+
+    checkPrimaryLabel(this);
   }
 
   private onGroupByVariableChange(newState: CustomConstantVariableState, prevState: CustomConstantVariableState) {
@@ -131,12 +133,16 @@ export class LabelBreakdownScene extends SceneObjectBase<LabelBreakdownSceneStat
     newState: SceneVariableState & { filters: AdHocVariableFilter[] },
     prevState: SceneVariableState & { filters: AdHocVariableFilter[] }
   ) {
+    let { labelName } = getPrimaryLabelFromUrl();
+    if (labelName === VAR_SERVICE) {
+      labelName = SERVICE_NAME;
+    }
     const variable = getLabelGroupByVariable(this);
-    const newService = newState.filters.find((filter) => filter.key === SERVICE_NAME);
-    const prevService = prevState.filters.find((filter) => filter.key === SERVICE_NAME);
+    const newPrimaryLabel = newState.filters.find((filter) => filter.key === labelName);
+    const prevPrimaryLabel = prevState.filters.find((filter) => filter.key === labelName);
 
     // If the user changes the service
-    if (variable.state.value === ALL_VARIABLE_VALUE && newService !== prevService) {
+    if (variable.state.value === ALL_VARIABLE_VALUE && newPrimaryLabel !== prevPrimaryLabel) {
       this.setState({
         loading: true,
         body: undefined,

src/Components/ServiceScene/Breakdowns/SelectLabelActionScene.tsx

@@ -8,12 +8,12 @@ import {
 } from '@grafana/scenes';
 import { getLogsPanelFrame, ServiceScene } from '../ServiceScene';
 import { navigateToValueBreakdown } from '../../../services/navigate';
-import { ValueSlugs } from '../../../services/routing';
+import { getPrimaryLabelFromUrl, ValueSlugs } from '../../../services/routing';
 import { Button } from '@grafana/ui';
 import React from 'react';
 import { addToFilters, VariableFilterType } from './AddToFiltersButton';
 import { FilterButton } from '../../FilterButton';
-import { EMPTY_VARIABLE_VALUE, LEVEL_VARIABLE_VALUE, SERVICE_NAME } from '../../../services/variables';
+import { EMPTY_VARIABLE_VALUE, LEVEL_VARIABLE_VALUE } from '../../../services/variables';
 import { AdHocVariableFilter, Field, Labels, LoadingState } from '@grafana/data';
 import { FilterOp } from '../../../services/filters';
 import {
@@ -78,7 +78,8 @@ export class SelectLabelActionScene extends SceneObjectBase<SelectLabelActionSce
   };
 
   private getExistingFilter(variable?: AdHocFiltersVariable): AdHocVariableFilter | undefined {
-    if (this.state.labelName !== SERVICE_NAME) {
+    let { labelName } = getPrimaryLabelFromUrl();
+    if (this.state.labelName !== labelName) {
       return variable?.state.filters.find((filter) => {
         const value = getValueFromAdHocVariableFilter(variable, filter);
         return filter.key === this.state.labelName && value.value === EMPTY_VARIABLE_VALUE;

src/Components/ServiceScene/LogsPanelScene.tsx

@@ -15,7 +15,7 @@ import { LogsListScene } from './LogsListScene';
 import { LoadingPlaceholder } from '@grafana/ui';
 import { addToFilters, FilterType } from './Breakdowns/AddToFiltersButton';
 import { getFilterTypeFromLabelType, getLabelTypeFromFrame } from '../../services/fields';
-import { SERVICE_NAME, VAR_FIELDS, VAR_LABELS, VAR_LEVELS } from '../../services/variables';
+import { VAR_FIELDS, VAR_LABELS, VAR_LEVELS } from '../../services/variables';
 import { reportAppInteraction, USER_EVENTS_ACTIONS, USER_EVENTS_PAGES } from '../../services/analytics';
 import { getAdHocFiltersVariable } from '../../services/variableGetters';
 import { LabelType } from '../../services/fieldsTypes';
@@ -169,10 +169,6 @@ export class LogsPanelScene extends SceneObjectBase<LogsPanelSceneState> {
   };
 
   private handleLabelFilter(key: string, value: string, frame: DataFrame | undefined, operator: FilterType) {
-    // @TODO: NOOP. We need a way to let the user know why this is not possible.
-    if (key === SERVICE_NAME) {
-      return;
-    }
     const labelType = frame ? getLabelTypeFromFrame(key, frame) : LabelType.Parsed;
     const variableName = getFilterTypeFromLabelType(labelType, key, value);
     addToFilters(key, value, operator, this, variableName);