chore: wip

src/Components/IndexScene/IndexScene.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { AdHocVariableFilter, SelectableValue } from '@grafana/data';
+import {AdHocVariableFilter, SelectableValue} from '@grafana/data';
 import {
   AdHocFiltersVariable,
   CustomVariable,
@@ -14,7 +14,6 @@ import {
   SceneObjectUrlSyncConfig,
   SceneObjectUrlValues,
   SceneRefreshPicker,
-  SceneRouteMatch,
   SceneTimePicker,
   SceneTimeRange,
   SceneVariableSet,
@@ -36,23 +35,24 @@ import {
   VAR_PATTERNS,
 } from 'services/variables';
 
-import { addLastUsedDataSourceToStorage, getLastUsedDataSourceFromStorage } from 'services/store';
-import { ServiceScene } from '../ServiceScene/ServiceScene';
-import { LayoutScene } from './LayoutScene';
-import { FilterOp } from 'services/filters';
-import { getDrilldownSlug, PageSlugs } from '../../services/routing';
-import { ServiceSelectionScene } from '../ServiceSelectionScene/ServiceSelectionScene';
-import { LoadingPlaceholder } from '@grafana/ui';
-import { config, locationService } from '@grafana/runtime';
+import {addLastUsedDataSourceToStorage, getLastUsedDataSourceFromStorage} from 'services/store';
+import {ServiceScene} from '../ServiceScene/ServiceScene';
+import {LayoutScene} from './LayoutScene';
+import {FilterOp} from 'services/filters';
+import {getDrilldownSlug, PageSlugs} from '../../services/routing';
+import {ServiceSelectionScene} from '../ServiceSelectionScene/ServiceSelectionScene';
+import {LoadingPlaceholder} from '@grafana/ui';
+import {config, locationService} from '@grafana/runtime';
 import {
   renderLogQLFieldFilters,
   renderLogQLLabelFilters,
   renderLogQLMetadataFilters,
   renderPatternFilters,
 } from 'services/query';
-import { VariableHide } from '@grafana/schema';
-import { CustomConstantVariable } from '../../services/CustomConstantVariable';
-import { ToolbarScene } from './ToolbarScene';
+import {VariableHide} from '@grafana/schema';
+import {CustomConstantVariable} from '../../services/CustomConstantVariable';
+import {ToolbarScene} from './ToolbarScene';
+import {RouteMatch} from "../Pages";
 
 export interface AppliedPattern {
   pattern: string;
@@ -66,7 +66,7 @@ export interface IndexSceneState extends SceneObjectState {
   body?: LayoutScene;
   initialFilters?: AdHocVariableFilter[];
   patterns?: AppliedPattern[];
-  routeMatch?: SceneRouteMatch<{ service?: string; label?: string }>;
+  routeMatch?: RouteMatch
 }
 
 export class IndexScene extends SceneObjectBase<IndexSceneState> {
@@ -121,7 +121,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 {PageLayoutType} from '@grafana/data';
+import {IndexScene} from './IndexScene/IndexScene';
+import {navigateToIndex} from '../services/navigate';
+import {logger} from "../services/logger";
+
+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 RouteMatchOptional = Optional<RouteProps, 'labelName' | 'labelValue' >
 
-function getServicesScene(routeMatch?: SceneRouteMatch<{ service?: string; label?: string }>) {
+function getServicesScene(routeMatch: RouteMatch) {
+  console.log('getServicesScene', routeMatch)
   const DEFAULT_TIME_RANGE = { from: 'now-15m', to: 'now' };
   return new EmbeddedScene({
     body: new IndexScene({
@@ -49,28 +55,28 @@ export function makeIndexPage() {
     drilldowns: [
       {
         routePath: ROUTE_DEFINITIONS.logs,
-        getPage: (routeMatch, parent) => makeBreakdownPage(routeMatch, parent, PageSlugs.logs),
+        getPage: (routeMatch: RouteMatch, parent) => makeBreakdownPage(routeMatch, parent, PageSlugs.logs),
         defaultRoute: true,
       },
       {
         routePath: ROUTE_DEFINITIONS.labels,
-        getPage: (routeMatch, parent) => makeBreakdownPage(routeMatch, parent, PageSlugs.labels),
+        getPage: (routeMatch: RouteMatch, parent) => makeBreakdownPage(routeMatch, parent, PageSlugs.labels),
       },
       {
         routePath: ROUTE_DEFINITIONS.patterns,
-        getPage: (routeMatch, parent) => makeBreakdownPage(routeMatch, parent, PageSlugs.patterns),
+        getPage: (routeMatch: RouteMatch, parent) => makeBreakdownPage(routeMatch, parent, PageSlugs.patterns),
       },
       {
         routePath: ROUTE_DEFINITIONS.fields,
-        getPage: (routeMatch, parent) => makeBreakdownPage(routeMatch, parent, PageSlugs.fields),
+        getPage: (routeMatch: RouteMatch, parent) => makeBreakdownPage(routeMatch, parent, PageSlugs.fields),
       },
       {
         routePath: CHILD_ROUTE_DEFINITIONS.label,
-        getPage: (routeMatch, parent) => makeBreakdownValuePage(routeMatch, parent, ValueSlugs.label),
+        getPage: (routeMatch: RouteMatch, parent) => makeBreakdownValuePage(routeMatch, parent, ValueSlugs.label),
       },
       {
         routePath: CHILD_ROUTE_DEFINITIONS.field,
-        getPage: (routeMatch, parent) => makeBreakdownValuePage(routeMatch, parent, ValueSlugs.field),
+        getPage: (routeMatch: RouteMatch, parent) => makeBreakdownValuePage(routeMatch, parent, ValueSlugs.field),
       },
       {
         routePath: '*',
@@ -107,36 +113,49 @@ 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);
+  console.log('makeBreakdownPage', {
+    routeMatch, parent, slug, labelName
+  })
   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),
+    getScene: (routeMatch: 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);
+  console.log('makeBreakdownValuePage', {
+    routeMatch,
+    parent,
+    slug
+  })
+  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),
+    getScene: (routeMatch: RouteMatch) => getServicesScene(routeMatch),
   });
 }
 

src/Components/ServiceScene/ActionBarScene.tsx

@@ -1,16 +1,16 @@
-import { SceneComponentProps, sceneGraph, SceneObjectBase, SceneObjectState } from '@grafana/scenes';
-import { Box, Stack, Tab, TabsBar, useStyles2 } from '@grafana/ui';
-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 { getLabelsVariable, SERVICE_NAME } from '../../services/variables';
-import { navigateToDrilldownPage, navigateToIndex } from '../../services/navigate';
+import {SceneComponentProps, sceneGraph, SceneObjectBase, SceneObjectState} from '@grafana/scenes';
+import {Box, Stack, Tab, TabsBar, useStyles2} from '@grafana/ui';
+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 {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 {ServiceScene, ServiceSceneState} from './ServiceScene';
+import {GrafanaTheme2} from '@grafana/data';
+import {css} from '@emotion/css';
+import {BreakdownViewDefinition, breakdownViewsDefinitions} from './BreakdownViews';
+import {logger} from "../../services/logger";
 
 export interface ActionBarSceneState extends SceneObjectState {}
 
@@ -66,14 +66,12 @@ 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);
+                  }else {
+                    logger.warn('invalid tab!', {
+                      'tab.value': tab.value,
+                      'currentBreakdownViewSlug': currentBreakdownViewSlug,
+                    })
                   }
                 }}
               />

src/Components/ServiceScene/ServiceScene.tsx

@@ -53,6 +53,8 @@ type ServiceSceneLoadingStates = {
   [name in TabNames]: boolean;
 };
 
+const placeholderServiceNameOptionalFlag = true
+
 export interface ServiceSceneCustomState {
   labelsCount?: number;
   patternsCount?: number;
@@ -126,7 +128,7 @@ export class ServiceScene extends SceneObjectBase<ServiceSceneState> {
 
   private setSubscribeToLabelsVariable() {
     const variable = getLabelsVariable(this);
-    if (variable.state.filters.length === 0) {
+    if (variable.state.filters.length === 0 && !placeholderServiceNameOptionalFlag) {
       this.redirectToStart();
       return;
     }
@@ -138,12 +140,12 @@ export class ServiceScene extends SceneObjectBase<ServiceSceneState> {
           this.redirectToStart();
         }
         // If we remove the service name filter, we should redirect to the start
-        if (!newState.filters.some((f) => f.key === SERVICE_NAME)) {
+        if (!placeholderServiceNameOptionalFlag && !newState.filters.some((f) => f.key === SERVICE_NAME)) {
           this.redirectToStart();
         }
 
         // Clear filters if changing service, they might not exist, or might have a different parser
-        if (prevServiceName !== newServiceName) {
+        if (!placeholderServiceNameOptionalFlag && prevServiceName !== newServiceName) {
           const fields = getFieldsVariable(this);
           fields.setState({
             filters: [],

src/services/extensions/links.ts

@@ -1,10 +1,11 @@
-import { PluginExtensionLinkConfig, PluginExtensionPanelContext, PluginExtensionPoints } from '@grafana/data';
-import { LabelType } from 'services/fields';
-import { getMatcherFromQuery } from 'services/logql';
+import {PluginExtensionLinkConfig, PluginExtensionPanelContext, PluginExtensionPoints} from '@grafana/data';
+import {LabelType} from 'services/fields';
+import {getMatcherFromQuery} from 'services/logql';
 
-import { LokiQuery } from 'services/query';
-import { appendUrlParameter, createAppUrl, replaceSlash, setUrlParameter, UrlParameters } from 'services/routing';
-import { SERVICE_NAME } from 'services/variables';
+import {LokiQuery} from 'services/query';
+import {appendUrlParameter, createAppUrl, replaceSlash, setUrlParameter, UrlParameters} from 'services/routing';
+import {SERVICE_NAME} from 'services/variables';
+import {FilterOp} from "../filters";
 
 const title = 'Open in Explore Logs';
 const description = 'Open current query in the Explore Logs view';
@@ -40,11 +41,11 @@ function contextToLink<T extends PluginExtensionPanelContext>(context?: T) {
 
   const expr = lokiQuery.expr;
   const labelFilters = getMatcherFromQuery(expr);
-  const serviceSelector = labelFilters.find((selector) => selector.key === SERVICE_NAME);
-  if (!serviceSelector) {
+  const labelSelector = labelFilters.find((selector) => selector.key === SERVICE_NAME) ?? labelFilters.find((selector) => selector.operator === FilterOp.Equal) ;
+  if (!labelSelector) {
     return undefined;
   }
-  const serviceName = replaceSlash(serviceSelector.value);
+  const labelName = replaceSlash(labelSelector.value);
   // sort `service_name` first
   labelFilters.sort((a, b) => (a.key === SERVICE_NAME ? -1 : 1));
 
@@ -65,7 +66,9 @@ function contextToLink<T extends PluginExtensionPanelContext>(context?: T) {
     );
   }
 
+  console.log('path', createAppUrl(`/explore/${labelSelector.key}/${labelName}/logs`, params))
+
   return {
-    path: createAppUrl(`/explore/service/${serviceName}/logs`, params),
+    path: createAppUrl(`/explore/${labelSelector.key}/${labelName}/logs`, params),
   };
 }

src/services/navigate.test.ts

@@ -35,8 +35,9 @@ describe('navigate', () => {
             isExact: true,
             url: '',
             params: {
-              service: serviceLabel,
-              label: drillDownLabel,
+              labelValue: serviceLabel,
+              labelName: 'service',
+              breakdownLabel: drillDownLabel,
             },
           },
         },
@@ -69,7 +70,8 @@ describe('navigate', () => {
             isExact: true,
             url: '',
             params: {
-              service: serviceLabel,
+              labelName: 'service',
+              labelValue: serviceLabel,
             },
           },
         },