Add to investigation

cspell.config.json

@@ -48,6 +48,7 @@
     "gdev",
     "lokiexplore",
     "viewports",
+    "overriden",
     "analysing"
   ]
 }

src/components/Explore/TracesByService/MiniREDPanel.tsx

@@ -15,7 +15,7 @@ import { EmptyStateScene } from 'components/states/EmptyState/EmptyStateScene';
 import { LoadingStateScene } from 'components/states/LoadingState/LoadingStateScene';
 import { SkeletonComponent } from '../ByFrameRepeater';
 import { barsPanelConfig } from '../panels/barsPanel';
-import { rateByWithStatus } from '../queries/rateByWithStatus';
+import { metricByWithStatus } from '../queries/generateMetricsQuery';
 import { StepQueryRunner } from '../queries/StepQueryRunner';
 import { RadioButtonList, useStyles2 } from '@grafana/ui';
 import { css } from '@emotion/css';
@@ -87,7 +87,7 @@ export class MiniREDPanel extends SceneObjectBase<MiniREDPanelState> {
         $data: new StepQueryRunner({
           maxDataPoints: this.state.metric === 'duration' ? 24 : 64,
           datasource: explorationDS,
-          queries: [this.state.metric === 'duration' ? buildHistogramQuery() : rateByWithStatus(this.state.metric)],
+          queries: [this.state.metric === 'duration' ? buildHistogramQuery() : metricByWithStatus(this.state.metric)],
         }),
         transformations: [...exemplarsTransformations(traceExploration.state.locationService)],
       }),

src/components/Explore/TracesByService/REDPanel.tsx

@@ -16,7 +16,7 @@ import { EmptyStateScene } from 'components/states/EmptyState/EmptyStateScene';
 import { LoadingStateScene } from 'components/states/LoadingState/LoadingStateScene';
 import { SkeletonComponent } from '../ByFrameRepeater';
 import { barsPanelConfig } from '../panels/barsPanel';
-import { rateByWithStatus } from '../queries/rateByWithStatus';
+import { metricByWithStatus } from '../queries/generateMetricsQuery';
 import { StepQueryRunner } from '../queries/StepQueryRunner';
 import { css } from '@emotion/css';
 import { RadioButtonList, useStyles2 } from '@grafana/ui';
@@ -179,7 +179,7 @@ export class REDPanel extends SceneObjectBase<RateMetricsPanelState> {
         $data: new StepQueryRunner({
           maxDataPoints: this.isDuration() ? 24 : 64,
           datasource: explorationDS,
-          queries: [this.isDuration() ? buildHistogramQuery() : rateByWithStatus(metric)],
+          queries: [this.isDuration() ? buildHistogramQuery() : metricByWithStatus(metric)],
         }),
         transformations: [...exemplarsTransformations(traceExploration.state.locationService)],
       }),

src/components/Explore/actions/AddToInvestigationButton.tsx

@@ -0,0 +1,89 @@
+import { TimeRange } from '@grafana/data';
+import { sceneGraph, SceneObject, SceneObjectBase, SceneObjectState, SceneQueryRunner } from '@grafana/scenes';
+import { DataQuery, DataSourceRef } from '@grafana/schema';
+
+import Logo from '../../../../src/img/logo.svg';
+import { VAR_DATASOURCE_EXPR } from 'utils/shared';
+
+export interface AddToInvestigationButtonState extends SceneObjectState {
+  dsUid?: string;
+  query?: string;
+  labelValue?: string;
+  context?: ExtensionContext;
+  queries: DataQuery[];
+}
+
+interface ExtensionContext {
+  timeRange: TimeRange;
+  queries: DataQuery[];
+  datasource: DataSourceRef;
+  origin: string;
+  url: string;
+  type: string;
+  title: string;
+  id: string;
+  logoPath: string;
+}
+
+export class AddToInvestigationButton extends SceneObjectBase<AddToInvestigationButtonState> {
+  constructor(state: Omit<AddToInvestigationButtonState, 'queries'>) {
+    super({ ...state, queries: [] });
+
+    this.addActivationHandler(this._onActivate.bind(this));
+  }
+
+  private _onActivate = () => {
+    this._subs.add(
+      this.subscribeToState(() => {
+        this.getQueries();
+        this.getContext();
+      })
+    );
+
+    const datasourceUid = sceneGraph.interpolate(this, VAR_DATASOURCE_EXPR);
+    this.setState({ dsUid: datasourceUid });
+  };
+
+  private readonly getQueries = () => {
+    const data = sceneGraph.getData(this);
+    const queryRunner = sceneGraph.findObject(data, isQueryRunner);
+
+    if (isQueryRunner(queryRunner)) {
+      const queries = queryRunner.state.queries.map((q) => ({
+        ...q,
+        query: this.state.query,
+      }));
+
+      if (JSON.stringify(queries) !== JSON.stringify(this.state.queries)) {
+        this.setState({ queries });
+      }
+    }
+  };
+
+  private readonly getContext = () => {
+    const { queries, dsUid, labelValue } = this.state;
+    const timeRange = sceneGraph.getTimeRange(this);
+
+    if (!timeRange || !queries || !dsUid) {
+      return;
+    }
+    const ctx = {
+      origin: 'Explore Traces',
+      type: 'traces',
+      queries,
+      timeRange: { ...timeRange.state.value },
+      datasource: { uid: dsUid },
+      url: window.location.href,
+      id: `${JSON.stringify(queries)}`,
+      title: `${labelValue}`,
+      logoPath: Logo,
+    };
+    if (JSON.stringify(ctx) !== JSON.stringify(this.state.context)) {
+      this.setState({ context: ctx });
+    }
+  };
+}
+
+function isQueryRunner(o: SceneObject<SceneObjectState> | null): o is SceneQueryRunner {
+  return o instanceof SceneQueryRunner;
+}

src/components/Explore/filters/FilterByVariable.test.ts

@@ -1,5 +1,11 @@
 import { renderTraceQLLabelFilters } from "./FilterByVariable";
 
+jest.mock('../../../utils/utils', () => ({
+  isNumber: {
+    test: jest.fn().mockReturnValue(false),
+  },
+}));
+
 describe('renderTraceQLLabelFilters', () => {
   it('should render empty expression from no filters', () => {
     const expression = renderTraceQLLabelFilters([]);

src/components/Explore/filters/FilterByVariable.tsx

@@ -6,6 +6,7 @@ import { VariableHide } from '@grafana/schema';
 
 import { FilterSetRenderer } from './FilterSetRenderer';
 import { VAR_FILTERS, explorationDS } from 'utils/shared';
+import { isNumber } from 'utils/utils';
 
 export type FilterByVariableState = ConstructorParameters<typeof AdHocFiltersVariable>[0] & {
   initialFilters?: AdHocVariableFilter[];
@@ -35,7 +36,6 @@ export function renderTraceQLLabelFilters(filters: AdHocVariableFilter[]) {
   // and avoid invalid queries like '{ && key=value }'
   return expr.length ? expr : 'true';
 }
-const isNumber = /^-?\d+\.?\d*$/;
 
 function renderFilter(filter: AdHocVariableFilter) {
   let val = filter.value;

src/components/Explore/filters/FilterSetRenderer.test.tsx

@@ -16,6 +16,9 @@ jest.mock('../../../utils/utils', () => ({
       useState: jest.fn().mockReturnValue('rate'),
     }),
   }),
+  isNumber: {
+    test: jest.fn().mockReturnValue(false),
+  },
 }));
 
 describe('FilterSetRenderer', () => {

src/components/Explore/layouts/attributeBreakdown.ts

@@ -6,21 +6,23 @@ import {
   SceneDataTransformer,
   SceneFlexItem,
   SceneFlexLayout,
+  sceneGraph,
   SceneObject,
   VizPanelState,
 } from '@grafana/scenes';
 import { LayoutSwitcher } from '../LayoutSwitcher';
 import { explorationDS, GRID_TEMPLATE_COLUMNS, MetricFunction } from '../../../utils/shared';
 import { ByFrameRepeater } from '../ByFrameRepeater';
-import { getLabelValue, getTraceExplorationScene } from '../../../utils/utils';
+import { formatLabelValue, getLabelValue, getTraceExplorationScene } from '../../../utils/utils';
 import { map, Observable } from 'rxjs';
 import { DataFrame, PanelData, reduceField, ReducerID } from '@grafana/data';
-import { rateByWithStatus } from '../queries/rateByWithStatus';
+import { generateMetricsQuery, metricByWithStatus } from '../queries/generateMetricsQuery';
 import { barsPanelConfig } from '../panels/barsPanel';
 import { linesPanelConfig } from '../panels/linesPanel';
 import { StepQueryRunner } from '../queries/StepQueryRunner';
 import { syncYAxis } from '../behaviors/syncYaxis';
 import { exemplarsTransformations } from '../../../utils/exemplars';
+import { PanelMenu } from '../panels/PanelMenu';
 
 export function buildNormalLayout(
   scene: SceneObject,
@@ -29,7 +31,7 @@ export function buildNormalLayout(
 ) {
   const traceExploration = getTraceExplorationScene(scene);
   const metric = traceExploration.getMetricVariable().getValue() as MetricFunction;
-  const query = rateByWithStatus(metric, variable.getValueText());
+  const query = metricByWithStatus(metric, variable.getValueText());
 
   return new LayoutSwitcher({
     $behaviors: [syncYAxis()],
@@ -96,12 +98,22 @@ export function buildNormalLayout(
 export function getLayoutChild(
   getTitle: (df: DataFrame, labelName: string) => string,
   variable: CustomVariable,
-  metric: string,
+  metric: MetricFunction,
   actionsFn: (df: DataFrame) => VizPanelState['headerActions']
 ) {
   return (data: PanelData, frame: DataFrame) => {
+    const query = sceneGraph.interpolate(
+      variable,
+      generateMetricsQuery({
+        metric,
+        extraFilters: `${variable.getValueText()}=${formatLabelValue(getLabelValue(frame))}`,
+        groupByStatus: true,
+      })
+    );
+
     const panel = (metric === 'duration' ? linesPanelConfig().setUnit('s') : barsPanelConfig())
       .setTitle(getTitle(frame, variable.getValueText()))
+      .setMenu(new PanelMenu({ query, labelValue: getLabelValue(frame) }))
       .setData(
         new SceneDataNode({
           data: {