feat(investigations): add button to add logs to an investigation (#1055)

* feat(investigations): add button to add logs to an investigation * Update src/Components/Panels/PanelMenu.tsx Co-authored-by: Galen Kistler <[email protected]> * feat(investigations): add `investigationOptions` state to `PanelMenu` --------- Co-authored-by: Galen Kistler <[email protected]>
grafana · Feb 11, 2025 · 486a882 · 486a882
1 parent d2eb348
commit 486a882
Show file tree

Hide file tree

Showing 9 changed files with 43 additions and 17 deletions.
diff --git a/src/Components/Panels/PanelMenu.tsx b/src/Components/Panels/PanelMenu.tsx
@@ -43,14 +43,21 @@ export enum CollapsablePanelText {
   expanded = 'Expand',
 }
 
-interface PanelMenuState extends SceneObjectState {
-  body?: VizPanelMenu;
-  frame?: DataFrame;
+interface InvestigationOptions {
   labelName?: string;
   fieldName?: string;
+  frame?: DataFrame;
+  type?: 'timeseries' | 'logs';
+  getLabelName?: () => string;
+}
+
+interface PanelMenuState extends SceneObjectState {
+  body?: VizPanelMenu;
   addExplorationsLink?: boolean;
   explorationsButton?: AddToExplorationButton;
   panelType?: AvgFieldPanelType;
+
+  investigationOptions?: InvestigationOptions;
 }
 
 /**
@@ -90,9 +97,12 @@ export class PanelMenu extends SceneObjectBase<PanelMenuState> implements VizPan
 
       this.setState({
         explorationsButton: new AddToExplorationButton({
-          labelName: this.state.labelName,
-          fieldName: this.state.fieldName,
-          frame: this.state.frame,
+          labelName: this.state.investigationOptions?.getLabelName
+            ? this.state.investigationOptions?.getLabelName()
+            : this.state.investigationOptions?.labelName,
+          fieldName: this.state.investigationOptions?.fieldName,
+          frame: this.state.investigationOptions?.frame,
+          type: this.state.investigationOptions?.type,
         }),
       });
 

diff --git a/src/Components/ServiceScene/Breakdowns/AddToExplorationButton.tsx b/src/Components/ServiceScene/Breakdowns/AddToExplorationButton.tsx
@@ -17,6 +17,7 @@ export interface AddToExplorationButtonState extends SceneObjectState {
   ds?: LokiDatasource;
   context?: ExtensionContext;
   queries: LokiQuery[];
+  type?: 'timeseries' | 'logs' | undefined;
 }
 
 type ExtensionContext = {
@@ -74,15 +75,15 @@ export class AddToExplorationButton extends SceneObjectBase<AddToExplorationButt
   };
 
   private getContext = () => {
-    const { queries, ds, labelName, fieldName } = this.state;
+    const { queries, ds, labelName, fieldName, type } = this.state;
     const timeRange = sceneGraph.getTimeRange(this);
 
     if (!timeRange || !queries || !ds?.uid) {
       return;
     }
     const ctx = {
       origin: 'Explore Logs',
-      type: 'timeseries',
+      type: type ?? 'timeseries',
       queries,
       timeRange: { ...timeRange.state.value },
       datasource: { uid: ds.uid },

diff --git a/src/Components/ServiceScene/Breakdowns/FieldsAggregatedBreakdownScene.tsx b/src/Components/ServiceScene/Breakdowns/FieldsAggregatedBreakdownScene.tsx
@@ -314,7 +314,7 @@ export class FieldsAggregatedBreakdownScene extends SceneObjectBase<FieldsAggreg
       body = PanelBuilders.timeseries()
         .setTitle(labelName)
         .setData(dataTransformer)
-        .setMenu(new PanelMenu({ labelName: labelName }))
+        .setMenu(new PanelMenu({ investigationOptions: { labelName: labelName } }))
         .setCustomFieldConfig('stacking', { mode: StackingMode.Normal })
         .setCustomFieldConfig('fillOpacity', 100)
         .setCustomFieldConfig('lineWidth', 0)
@@ -331,7 +331,7 @@ export class FieldsAggregatedBreakdownScene extends SceneObjectBase<FieldsAggreg
       body
         .setTitle(labelName)
         .setData(dataTransformer)
-        .setMenu(new PanelMenu({ labelName: labelName, panelType }));
+        .setMenu(new PanelMenu({ investigationOptions: { labelName: labelName }, panelType }));
       headerActions.push(
         new SelectLabelActionScene({
           labelName: String(labelName),

diff --git a/src/Components/ServiceScene/Breakdowns/LabelsAggregatedBreakdownScene.tsx b/src/Components/ServiceScene/Breakdowns/LabelsAggregatedBreakdownScene.tsx
@@ -223,7 +223,7 @@ export class LabelsAggregatedBreakdownScene extends SceneObjectBase<LabelsAggreg
             // 11.5
             // .setShowMenuAlways(true)
             .setOverrides(setLevelColorOverrides)
-            .setMenu(new PanelMenu({ labelName: optionValue }))
+            .setMenu(new PanelMenu({ investigationOptions: { labelName: optionValue } }))
             .setSeriesLimit(MAX_NUMBER_OF_TIME_SERIES)
             .build(),
         })

diff --git a/src/Components/ServiceScene/LogsPanelScene.tsx b/src/Components/ServiceScene/LogsPanelScene.tsx
@@ -36,6 +36,7 @@ import { locationService } from '@grafana/runtime';
 import { narrowLogsSortOrder } from '../../services/narrowing';
 import { logger } from '../../services/logger';
 import { LogsSortOrder } from '@grafana/schema';
+import { getPrettyQueryExpr } from 'services/scenes';
 
 interface LogsPanelSceneState extends SceneObjectState {
   body?: VizPanel<Options>;
@@ -234,7 +235,11 @@ export class LogsPanelScene extends SceneObjectBase<LogsPanelSceneState> {
           'prettifyLogMessage',
           options.prettifyLogMessage ?? Boolean(getLogOption<boolean>('wrapLogMessage', false))
         )
-        .setMenu(new PanelMenu({ addExplorationsLink: false }))
+        .setMenu(
+          new PanelMenu({
+            investigationOptions: { type: 'logs', getLabelName: () => `Logs: ${getPrettyQueryExpr(serviceScene)}` },
+          })
+        )
         .setOption('showLogContextToggle', true)
         // @ts-expect-error Requires Grafana 11.5
         .setOption('enableInfiniteScrolling', true)

diff --git a/src/Components/ServiceScene/LogsVolumePanel.tsx b/src/Components/ServiceScene/LogsVolumePanel.tsx
@@ -94,7 +94,7 @@ export class LogsVolumePanel extends SceneObjectBase<LogsVolumePanelState> {
       .setTitle(this.getTitle(serviceScene.state.totalLogsCount, serviceScene.state.logsCount))
       .setOption('legend', { showLegend: true, calcs: ['sum'], displayMode: LegendDisplayMode.List })
       .setUnit('short')
-      .setMenu(new PanelMenu({ labelName: 'level' }))
+      .setMenu(new PanelMenu({ investigationOptions: { labelName: 'level' } }))
       .setCollapsible(true)
       .setCollapsed(Boolean(getLogsVolumeOption('collapsed')))
       .setHeaderActions(new LogsVolumeActions({}))

diff --git a/src/services/fields.ts b/src/services/fields.ts
@@ -149,7 +149,7 @@ export function getFilterBreakdownValueScene(
         })
       )
       .setOverrides(setLevelColorOverrides)
-      .setMenu(new PanelMenu({ frame, fieldName: getTitle(frame), labelName: labelKey }))
+      .setMenu(new PanelMenu({ investigationOptions: { frame, fieldName: getTitle(frame), labelName: labelKey } }))
       .setHeaderActions([new AddToFiltersButton({ frame, variableName })]);
 
     if (style === DrawStyle.Bars) {

diff --git a/src/services/scenes.ts b/src/services/scenes.ts
@@ -1,7 +1,12 @@
 import { urlUtil } from '@grafana/data';
 import { config, getDataSourceSrv } from '@grafana/runtime';
 import { sceneGraph, SceneObject, SceneObjectUrlValues, SceneQueryRunner, SceneTimePicker } from '@grafana/scenes';
-import { LOG_STREAM_SELECTOR_EXPR, VAR_DATASOURCE_EXPR, VAR_LABELS_EXPR } from './variables';
+import {
+  LOG_STREAM_SELECTOR_EXPR,
+  PRETTY_LOG_STREAM_SELECTOR_EXPR,
+  VAR_DATASOURCE_EXPR,
+  VAR_LABELS_EXPR,
+} from './variables';
 import { EXPLORATIONS_ROUTE } from './routing';
 import { IndexScene } from 'Components/IndexScene/IndexScene';
 import { logger } from './logger';
@@ -19,11 +24,15 @@ export function getDataSource(sceneObject: SceneObject) {
   return sceneGraph.interpolate(sceneObject, VAR_DATASOURCE_EXPR);
 }
 
-export function getQueryExpr(exploration: IndexScene) {
+export function getQueryExpr(exploration: SceneObject) {
   return sceneGraph.interpolate(exploration, LOG_STREAM_SELECTOR_EXPR).replace(/\s+/g, ' ');
 }
 
-export function getPatternExpr(exploration: IndexScene) {
+export function getPrettyQueryExpr(exploration: SceneObject) {
+  return sceneGraph.interpolate(exploration, PRETTY_LOG_STREAM_SELECTOR_EXPR).replace(/\s+/g, ' ');
+}
+
+export function getPatternExpr(exploration: SceneObject) {
   return sceneGraph.interpolate(exploration, VAR_LABELS_EXPR).replace(/\s+/g, ' ');
 }
 

diff --git a/src/services/variables.ts b/src/services/variables.ts
@@ -70,6 +70,7 @@ export const DETECTED_FIELD_AND_METADATA_VALUES_EXPR = `{${VAR_LABELS_EXPR}} ${V
 export const DETECTED_METADATA_VALUES_EXPR = `{${VAR_LABELS_EXPR}} ${VAR_LEVELS_EXPR} ${PENDING_FIELDS_EXPR} ${VAR_PATTERNS_EXPR} ${VAR_LINE_FILTERS_EXPR} ${VAR_LOGS_FORMAT_EXPR} ${VAR_FIELDS_EXPR}`;
 export const DETECTED_LEVELS_VALUES_EXPR = `{${VAR_LABELS_EXPR}} ${PENDING_FIELDS_EXPR} ${VAR_METADATA_EXPR} ${VAR_PATTERNS_EXPR} ${VAR_LINE_FILTERS_EXPR} ${VAR_LOGS_FORMAT_EXPR} ${VAR_FIELDS_EXPR}`;
 export const PATTERNS_SAMPLE_SELECTOR_EXPR = `{${VAR_LABELS_EXPR}} ${VAR_METADATA_EXPR} ${VAR_PATTERNS_EXPR} ${VAR_LOGS_FORMAT_EXPR}`;
+export const PRETTY_LOG_STREAM_SELECTOR_EXPR = `${VAR_LABELS_EXPR} ${VAR_LEVELS_EXPR} ${VAR_METADATA_EXPR} ${VAR_PATTERNS_EXPR} ${VAR_LINE_FILTERS_EXPR} ${VAR_FIELDS_EXPR}`;
 export const EXPLORATION_DS = { uid: VAR_DATASOURCE_EXPR };
 export const ALL_VARIABLE_VALUE = '$__all';
 export const LEVEL_VARIABLE_VALUE = 'detected_level';