feat(Timeseries): Add open in Explore menu item

src/pages/ProfilesExplorerView/components/SceneLabelValuesTimeseries.tsx

@@ -3,20 +3,25 @@ import {
   PanelBuilders,
   SceneComponentProps,
   SceneDataProvider,
+  SceneDataQuery,
   SceneDataTransformer,
+  sceneGraph,
   SceneObjectBase,
   SceneObjectState,
+  SceneQueryRunner,
   VizPanel,
   VizPanelMenu,
   VizPanelState,
 } from '@grafana/scenes';
 import { GraphGradientMode, ScaleDistribution, ScaleDistributionConfig, SortOrder } from '@grafana/schema';
 import { LegendDisplayMode, TooltipDisplayMode, VizLegendOptions } from '@grafana/ui';
+import { reportInteraction } from '@shared/domain/reportInteraction';
 import { merge } from 'lodash';
 import React from 'react';
 
 import { EventTimeseriesDataReceived } from '../domain/events/EventTimeseriesDataReceived';
 import { getColorByIndex } from '../helpers/getColorByIndex';
+import { getExploreUrl } from '../helpers/getExploreUrl';
 import { getSeriesLabelFieldName } from '../infrastructure/helpers/getSeriesLabelFieldName';
 import { getSeriesStatsValue } from '../infrastructure/helpers/getSeriesStatsValue';
 import { LabelsDataSource } from '../infrastructure/labels/LabelsDataSource';
@@ -131,10 +136,19 @@ export class SceneLabelValuesTimeseries extends SceneObjectBase<SceneLabelValues
     return new VizPanelMenu({
       items: [
         {
-          text: 'Scale',
+          text: 'Scale type',
           type: 'group',
           subMenu: scaleSubMenu,
         },
+        {
+          type: 'divider',
+          text: '',
+        },
+        {
+          iconClassName: 'compass',
+          text: 'Open in Explore',
+          onClick: () => this.onClickExplore(),
+        },
       ],
     });
   }
@@ -143,6 +157,8 @@ export class SceneLabelValuesTimeseries extends SceneObjectBase<SceneLabelValues
     const { scaleDistribution, text, index } = option;
     const { body } = this.state;
 
+    reportInteraction('g_pyroscope_app_timeseries_scale_change', { scale: scaleDistribution.type });
+
     body.clearFieldConfigCache();
 
     body.setState({
@@ -158,6 +174,30 @@ export class SceneLabelValuesTimeseries extends SceneObjectBase<SceneLabelValues
     });
   }
 
+  onClickExplore() {
+    reportInteraction('g_pyroscope_app_open_in_explore');
+
+    const queryRunner = this.state.body.state.$data?.state.$data as SceneQueryRunner;
+    const nonInterpolatedQuery = queryRunner?.state.queries[0];
+
+    const query = Object.entries(nonInterpolatedQuery)
+      .map(([key, value]) => [key, typeof value === 'string' ? sceneGraph.interpolate(this, value) : value])
+      .reduce(
+        (acc, [key, value]) => ({
+          ...acc,
+          [key]: value,
+        }),
+        {}
+      ) as SceneDataQuery;
+
+    const datasource = sceneGraph.interpolate(this, '${dataSource}');
+    const rawTimeRange = sceneGraph.getTimeRange(this).state.value.raw;
+
+    const exploreUrl = getExploreUrl(rawTimeRange, query, datasource);
+
+    window.open(exploreUrl, '_blank');
+  }
+
   getConfig(series: DataFrame[]) {
     const { body, item, legendPlacement } = this.state;
     let { title } = body.state;

src/pages/ProfilesExplorerView/helpers/__tests__/getExploreUrl.spec.ts

@@ -0,0 +1,48 @@
+function setup(appSubUrl?: string) {
+  jest.doMock('@grafana/runtime', () => ({
+    reportInteraction: jest.fn(),
+    config: {
+      appSubUrl,
+    },
+  }));
+
+  return require('../getExploreUrl');
+}
+
+describe('getExploreUrl(rawTimeRange, query, datasource)', () => {
+  test('If "appSubUrl" is not defined in the Grafana runtime config', () => {
+    const { getExploreUrl } = setup(undefined);
+
+    const rawTimeRange = { from: 'now-5m', to: 'now' };
+    const query = {
+      refId: 'test1',
+      queryType: 'metrics',
+      profileTypeId: 'block:delay:nanoseconds:contentions:count',
+      labelSelector: '{}',
+      groupBy: [],
+    };
+    const datasource = 'grafanacloud-profiles-sedemo';
+    const expectedUrl =
+      '/explore?panes=%7B%22pyroscope-explore%22:%7B%22range%22:%7B%22from%22:%22now-5m%22,%22to%22:%22now%22%7D,%22queries%22:%5B%7B%22refId%22:%22test1%22,%22queryType%22:%22metrics%22,%22profileTypeId%22:%22block:delay:nanoseconds:contentions:count%22,%22labelSelector%22:%22%7B%7D%22,%22groupBy%22:%5B%5D,%22datasource%22:%22grafanacloud-profiles-sedemo%22%7D%5D,%22panelsState%22:%7B%7D,%22datasource%22:%22grafanacloud-profiles-sedemo%22%7D%7D&schemaVersion=1';
+
+    expect(getExploreUrl(rawTimeRange, query, datasource)).toBe(expectedUrl);
+  });
+
+  test('If "appSubUrl" is defined in the Grafana runtime config', () => {
+    const { getExploreUrl } = setup('http://text:4242');
+
+    const rawTimeRange = { from: 'now-5m', to: 'now' };
+    const query = {
+      refId: 'test1',
+      queryType: 'metrics',
+      profileTypeId: 'block:delay:nanoseconds:contentions:count',
+      labelSelector: '{}',
+      groupBy: [],
+    };
+    const datasource = 'grafanacloud-profiles-sedemo';
+    const expectedUrl =
+      'http://text:4242/explore?panes=%7B%22pyroscope-explore%22:%7B%22range%22:%7B%22from%22:%22now-5m%22,%22to%22:%22now%22%7D,%22queries%22:%5B%7B%22refId%22:%22test1%22,%22queryType%22:%22metrics%22,%22profileTypeId%22:%22block:delay:nanoseconds:contentions:count%22,%22labelSelector%22:%22%7B%7D%22,%22groupBy%22:%5B%5D,%22datasource%22:%22grafanacloud-profiles-sedemo%22%7D%5D,%22panelsState%22:%7B%7D,%22datasource%22:%22grafanacloud-profiles-sedemo%22%7D%7D&schemaVersion=1';
+
+    expect(getExploreUrl(rawTimeRange, query, datasource)).toBe(expectedUrl);
+  });
+});

src/pages/ProfilesExplorerView/helpers/getExploreUrl.ts

@@ -0,0 +1,21 @@
+import { RawTimeRange, toURLRange, urlUtil } from '@grafana/data';
+import { config } from '@grafana/runtime';
+import { SceneDataQuery } from '@grafana/scenes';
+
+export function getExploreUrl(rawTimeRange: RawTimeRange, query: SceneDataQuery, datasource: string): string {
+  const exploreState = JSON.stringify({
+    ['pyroscope-explore']: {
+      range: toURLRange(rawTimeRange),
+      queries: [{ ...query, datasource }],
+      panelsState: {},
+      datasource,
+    },
+  });
+
+  const subUrl = config.appSubUrl ?? '';
+
+  return urlUtil.renderUrl(`${subUrl}/explore`, {
+    panes: exploreState,
+    schemaVersion: 1,
+  });
+}

src/shared/domain/reportInteraction.ts

@@ -24,13 +24,15 @@ export type InteractionName =
   | 'g_pyroscope_app_hide_no_data_changed'
   | 'g_pyroscope_app_include_action_clicked'
   | 'g_pyroscope_app_layout_changed'
+  | 'g_pyroscope_app_open_in_explore'
   | 'g_pyroscope_app_optimize_code_clicked'
   | 'g_pyroscope_app_panel_type_changed'
   | 'g_pyroscope_app_profile_metric_selected'
   | 'g_pyroscope_app_quick_filter_focused'
   | 'g_pyroscope_app_select_action_clicked'
   | 'g_pyroscope_app_service_name_selected'
   | 'g_pyroscope_app_share_link_clicked'
+  | 'g_pyroscope_app_timeseries_scale_change'
   | 'g_pyroscope_app_user_settings_clicked';
 
 type InteractionProperties =
@@ -51,7 +53,9 @@ type InteractionProperties =
   // g_pyroscope_app_panel_type_changed
   | { panelType: PanelType }
   // g_pyroscope_app_select_action_clicked
-  | { type: string };
+  | { type: string }
+  // g_pyroscope_app_timeseries_scale_change
+  | { scale: string };
 
 const PROFILES_EXPLORER_PAGE_NAME = ROUTES.PROFILES_EXPLORER_VIEW.slice(1);