Patterns: Use runtime datasource for queries

project-words.txt

@@ -469,4 +469,5 @@ subqueries
 dbscan
 svgs
 Dont
+REFID
 unroute

src/Components/IndexScene/IndexScene.tsx

@@ -161,7 +161,9 @@ function getContentScene(drillDownLabel?: string) {
     return new ServiceSelectionScene({});
   }
 
-  return new ServiceScene({ drillDownLabel });
+  return new ServiceScene({
+    drillDownLabel,
+  });
 }
 
 function getVariableSet(initialDatasourceUid: string, initialFilters?: AdHocVariableFilter[]) {

src/Components/ServiceScene/ActionBarScene.tsx

@@ -0,0 +1,110 @@
+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 { ALL_VARIABLE_VALUE, getLabelsVariable } from '../../services/variables';
+import { SERVICE_NAME } from '../ServiceSelectionScene/ServiceSelectionScene';
+import { navigateToDrilldownPage, navigateToIndex } 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';
+
+export interface ActionBarSceneState extends SceneObjectState {}
+
+export class ActionBarScene extends SceneObjectBase<ActionBarSceneState> {
+  public static Component = ({ model }: SceneComponentProps<ActionBarScene>) => {
+    const styles = useStyles2(getStyles);
+    const exploration = getExplorationFor(model);
+    let currentBreakdownViewSlug = getDrilldownSlug();
+    let allowNavToParent = false;
+
+    if (!Object.values(PageSlugs).includes(currentBreakdownViewSlug)) {
+      const drilldownValueSlug = getDrilldownValueSlug();
+      allowNavToParent = true;
+      if (drilldownValueSlug === ValueSlugs.field) {
+        currentBreakdownViewSlug = PageSlugs.fields;
+      }
+      if (drilldownValueSlug === ValueSlugs.label) {
+        currentBreakdownViewSlug = PageSlugs.labels;
+      }
+    }
+
+    const serviceScene = sceneGraph.getAncestor(model, ServiceScene);
+    const { loading, $data, ...state } = serviceScene.useState();
+
+    return (
+      <Box paddingY={0}>
+        <div className={styles.actions}>
+          <Stack gap={1}>
+            <GoToExploreButton exploration={exploration} />
+          </Stack>
+        </div>
+
+        <TabsBar>
+          {breakdownViewsDefinitions.map((tab, index) => {
+            return (
+              <Tab
+                data-testid={tab.testId}
+                key={index}
+                label={tab.displayName}
+                active={currentBreakdownViewSlug === tab.value}
+                counter={loading ? undefined : getCounter(tab, { ...state, $data })}
+                icon={loading ? 'spinner' : undefined}
+                onChangeTab={() => {
+                  if ((tab.value && tab.value !== currentBreakdownViewSlug) || allowNavToParent) {
+                    reportAppInteraction(
+                      USER_EVENTS_PAGES.service_details,
+                      USER_EVENTS_ACTIONS.service_details.action_view_changed,
+                      {
+                        newActionView: tab.value,
+                        previousActionView: currentBreakdownViewSlug,
+                      }
+                    );
+
+                    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();
+                    }
+                  }
+                }}
+              />
+            );
+          })}
+        </TabsBar>
+      </Box>
+    );
+  };
+}
+const getCounter = (tab: BreakdownViewDefinition, state: ServiceSceneState) => {
+  switch (tab.value) {
+    case 'fields':
+      return state.fieldsCount ?? (state.fields?.filter((l) => l !== ALL_VARIABLE_VALUE) ?? []).length;
+    case 'patterns':
+      return state.patternsCount;
+    case 'labels':
+      return (state.labels?.filter((l) => l.label !== ALL_VARIABLE_VALUE) ?? []).length;
+    default:
+      return undefined;
+  }
+};
+
+function getStyles(theme: GrafanaTheme2) {
+  return {
+    actions: css({
+      [theme.breakpoints.up(theme.breakpoints.values.md)]: {
+        position: 'absolute',
+        right: 0,
+        zIndex: 2,
+      },
+    }),
+  };
+}

src/Components/ServiceScene/BreakdownViews.ts

@@ -0,0 +1,120 @@
+import { PageSlugs, ValueSlugs } from '../../services/routing';
+import { LogsListScene } from './LogsListScene';
+import { testIds } from '../../services/testIds';
+import { buildLabelValuesBreakdownActionScene, LabelBreakdownScene } from './Breakdowns/LabelBreakdownScene';
+import { FieldsBreakdownScene } from './Breakdowns/FieldsBreakdownScene';
+import { PatternsBreakdownScene } from './Breakdowns/Patterns/PatternsBreakdownScene';
+import { SceneFlexItem, SceneFlexLayout, SceneObject } from '@grafana/scenes';
+import { LogsVolumePanel } from './LogsVolumePanel';
+
+interface ValueBreakdownViewDefinition {
+  displayName: string;
+  value: ValueSlugs;
+  testId: string;
+  getScene: (value: string) => SceneObject;
+}
+
+export interface BreakdownViewDefinition {
+  displayName: string;
+  value: PageSlugs;
+  testId: string;
+  getScene: (changeFields: (f: string[]) => void) => SceneObject;
+}
+
+export const breakdownViewsDefinitions: BreakdownViewDefinition[] = [
+  {
+    displayName: 'Logs',
+    value: PageSlugs.logs,
+    getScene: () => buildLogsListScene(),
+    testId: testIds.exploreServiceDetails.tabLogs,
+  },
+  {
+    displayName: 'Labels',
+    value: PageSlugs.labels,
+    getScene: () => buildLabelBreakdownActionScene(),
+    testId: testIds.exploreServiceDetails.tabLabels,
+  },
+  {
+    displayName: 'Fields',
+    value: PageSlugs.fields,
+    getScene: (f) => buildFieldsBreakdownActionScene(f),
+    testId: testIds.exploreServiceDetails.tabFields,
+  },
+  {
+    displayName: 'Patterns',
+    value: PageSlugs.patterns,
+    getScene: () => buildPatternsScene(),
+    testId: testIds.exploreServiceDetails.tabPatterns,
+  },
+];
+export const valueBreakdownViews: ValueBreakdownViewDefinition[] = [
+  {
+    displayName: 'Label',
+    value: ValueSlugs.label,
+    getScene: (value: string) => buildLabelValuesBreakdownActionScene(value),
+    testId: testIds.exploreServiceDetails.tabLabels,
+  },
+  {
+    displayName: 'Field',
+    value: ValueSlugs.field,
+    getScene: (value: string) => buildFieldValuesBreakdownActionScene(value),
+    testId: testIds.exploreServiceDetails.tabFields,
+  },
+];
+
+function buildPatternsScene() {
+  return new SceneFlexLayout({
+    children: [
+      new SceneFlexItem({
+        body: new PatternsBreakdownScene({}),
+      }),
+    ],
+  });
+}
+
+function buildFieldsBreakdownActionScene(changeFieldNumber: (n: string[]) => void) {
+  return new SceneFlexLayout({
+    children: [
+      new SceneFlexItem({
+        body: new FieldsBreakdownScene({ changeFields: changeFieldNumber }),
+      }),
+    ],
+  });
+}
+
+function buildFieldValuesBreakdownActionScene(value: string) {
+  return new SceneFlexLayout({
+    children: [
+      new SceneFlexItem({
+        body: new FieldsBreakdownScene({ value }),
+      }),
+    ],
+  });
+}
+
+function buildLogsListScene() {
+  return new SceneFlexLayout({
+    direction: 'column',
+    children: [
+      new SceneFlexItem({
+        minHeight: 200,
+        body: new LogsVolumePanel({}),
+      }),
+      new SceneFlexItem({
+        minHeight: '470px',
+        height: 'calc(100vh - 500px)',
+        body: new LogsListScene({}),
+      }),
+    ],
+  });
+}
+
+function buildLabelBreakdownActionScene() {
+  return new SceneFlexLayout({
+    children: [
+      new SceneFlexItem({
+        body: new LabelBreakdownScene({}),
+      }),
+    ],
+  });
+}

src/Components/ServiceScene/Breakdowns/FieldsBreakdownScene.tsx

@@ -287,7 +287,7 @@ export class FieldsBreakdownScene extends SceneObjectBase<FieldsBreakdownSceneSt
         legendFormat: `{{${optionValue}}}`,
         refId: optionValue,
       });
-      const queryRunner = getQueryRunner(query);
+      const queryRunner = getQueryRunner([query]);
       let body = PanelBuilders.timeseries().setTitle(optionValue).setData(queryRunner);
 
       if (!isAvgField(optionValue)) {
@@ -348,7 +348,7 @@ export class FieldsBreakdownScene extends SceneObjectBase<FieldsBreakdownSceneSt
     const getFilter = () => this.state.search.state.filter ?? '';
 
     return new LayoutSwitcher({
-      $data: getQueryRunner(query),
+      $data: getQueryRunner([query]),
       options: [
         { value: 'single', label: 'Single' },
         { value: 'grid', label: 'Grid' },
@@ -522,26 +522,6 @@ function getExpr(field: string) {
 
 const GRID_TEMPLATE_COLUMNS = 'repeat(auto-fit, minmax(400px, 1fr))';
 
-export function buildFieldsBreakdownActionScene(changeFieldNumber: (n: string[]) => void) {
-  return new SceneFlexLayout({
-    children: [
-      new SceneFlexItem({
-        body: new FieldsBreakdownScene({ changeFields: changeFieldNumber }),
-      }),
-    ],
-  });
-}
-
-export function buildFieldValuesBreakdownActionScene(value: string) {
-  return new SceneFlexLayout({
-    children: [
-      new SceneFlexItem({
-        body: new FieldsBreakdownScene({ value }),
-      }),
-    ],
-  });
-}
-
 interface SelectLabelActionState extends SceneObjectState {
   labelName: string;
 }

src/Components/ServiceScene/Breakdowns/LabelBreakdownScene.tsx

@@ -218,9 +218,9 @@ export class LabelBreakdownScene extends SceneObjectBase<LabelBreakdownSceneStat
           body: PanelBuilders.timeseries()
             .setTitle(optionValue)
             .setData(
-              getQueryRunner(
-                buildDataQuery(getTimeSeriesExpr(this, optionValue), { legendFormat: `{{${optionValue}}}` })
-              )
+              getQueryRunner([
+                buildDataQuery(getTimeSeriesExpr(this, optionValue), { legendFormat: `{{${optionValue}}}` }),
+              ])
             )
             .setHeaderActions(new SelectLabelAction({ labelName: optionValue }))
             .setCustomFieldConfig('stacking', { mode: StackingMode.Normal })
@@ -276,7 +276,7 @@ export class LabelBreakdownScene extends SceneObjectBase<LabelBreakdownSceneStat
     const getFilter = () => this.state.search.state.filter ?? '';
 
     return new LayoutSwitcher({
-      $data: getQueryRunner(query),
+      $data: getQueryRunner([query]),
       options: [
         { value: 'single', label: 'Single' },
         { value: 'grid', label: 'Grid' },
@@ -424,16 +424,6 @@ function getStyles(theme: GrafanaTheme2) {
 
 const GRID_TEMPLATE_COLUMNS = 'repeat(auto-fit, minmax(400px, 1fr))';
 
-export function buildLabelBreakdownActionScene() {
-  return new SceneFlexLayout({
-    children: [
-      new SceneFlexItem({
-        body: new LabelBreakdownScene({}),
-      }),
-    ],
-  });
-}
-
 export function buildLabelValuesBreakdownActionScene(value: string) {
   return new SceneFlexLayout({
     children: [