feat: Support add to dashboard (#746)

* feat: Support add to dashboard

* Tidy up

* Fix local add to dash

* Fix ds interpolate issue

* Translations

* PR fixes

Author: joey-grafana

src/components/Explore/actions/addToDashboard.test.ts

@@ -0,0 +1,233 @@
+import { sceneGraph, SceneQueryRunner, type VizPanel } from '@grafana/scenes';
+
+import pluginJson from '../../../plugin.json';
+import { getDataSource, getDatasourceVariable, getTraceExplorationScene } from 'utils/utils';
+import {
+  ADD_TO_DASHBOARD_COMPONENT_ID,
+  EventOpenAddToDashboard,
+  getPanelData,
+  type PanelDataRequestPayload,
+} from './addToDashboard';
+
+jest.mock('utils/utils', () => ({
+  getTraceExplorationScene: jest.fn(),
+  getDataSource: jest.fn(),
+  getDatasourceVariable: jest.fn(),
+}));
+
+describe('addToDashboard constants', () => {
+  it('declares the add-to-dashboard exposed component in plugin.json dependencies', () => {
+    expect(pluginJson.dependencies?.extensions?.exposedComponents).toContain(ADD_TO_DASHBOARD_COMPONENT_ID);
+  });
+
+  it('exposes the add-to-dashboard extension component id', () => {
+    expect(ADD_TO_DASHBOARD_COMPONENT_ID).toBe('grafana/add-to-dashboard-form/v1');
+  });
+});
+
+describe('EventOpenAddToDashboard', () => {
+  it('uses a fixed event type', () => {
+    expect(EventOpenAddToDashboard.type).toBe('open-add-to-dashboard');
+  });
+
+  it('carries panel data on the payload', () => {
+    const panelData = {
+      panel: { type: 'timeseries', title: 'T', targets: [] },
+      range: { from: 'now-1h', to: 'now', raw: { from: 'now-1h', to: 'now' } },
+    } as unknown as PanelDataRequestPayload;
+
+    const evt = new EventOpenAddToDashboard({ panelData });
+
+    expect(evt.payload.panelData).toBe(panelData);
+  });
+});
+
+describe('getPanelData', () => {
+  const mockRange = { from: 'now-6h', to: 'now', raw: { from: 'now-6h', to: 'now' } };
+
+  const baseVizPanel = (): VizPanel =>
+    ({
+      state: {
+        pluginId: 'timeseries',
+        title: '{{interval}} — RED',
+        options: { legend: { displayMode: 'list' } },
+        fieldConfig: { defaults: {}, overrides: [] },
+      },
+    }) as unknown as VizPanel;
+
+  beforeEach(() => {
+    jest.spyOn(sceneGraph, 'getTimeRange').mockReturnValue({
+      state: { value: mockRange },
+    } as unknown as ReturnType<typeof sceneGraph.getTimeRange>);
+
+    jest.spyOn(sceneGraph, 'interpolate').mockImplementation((_scene, value) =>
+      typeof value === 'string' ? `[interp:${value}]` : String(value ?? '')
+    );
+
+    jest.spyOn(sceneGraph, 'findDescendents').mockReturnValue([]);
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('returns time range from the scene graph', () => {
+    const vizPanel = baseVizPanel();
+    const dataRef = {};
+    jest.spyOn(sceneGraph, 'getData').mockReturnValue(dataRef as ReturnType<typeof sceneGraph.getData>);
+    jest.spyOn(sceneGraph, 'findObject').mockReturnValue(null);
+
+    const { range } = getPanelData(vizPanel);
+
+    expect(range).toBe(mockRange);
+    expect(sceneGraph.getTimeRange).toHaveBeenCalledWith(vizPanel);
+  });
+
+  it('maps viz panel state onto the exported panel and clears targets when no query runner is found', () => {
+    const vizPanel = baseVizPanel();
+    jest.spyOn(sceneGraph, 'getData').mockReturnValue({} as ReturnType<typeof sceneGraph.getData>);
+    jest.spyOn(sceneGraph, 'findObject').mockReturnValue(null);
+
+    const { panel } = getPanelData(vizPanel);
+
+    expect(panel.type).toBe('timeseries');
+    expect(panel.title).toBe('[interp:{{interval}} — RED]');
+    expect(panel.targets).toEqual([]);
+    expect(panel.options).toEqual(vizPanel.state.options);
+    expect(panel.fieldConfig).toEqual(vizPanel.state.fieldConfig);
+    expect(sceneGraph.findObject).toHaveBeenCalled();
+  });
+
+  it('includes optional description when present', () => {
+    const vizPanel = {
+      ...baseVizPanel(),
+      state: {
+        ...baseVizPanel().state,
+        description: 'Panel help text',
+      },
+    } as unknown as VizPanel;
+
+    jest.spyOn(sceneGraph, 'getData').mockReturnValue({} as ReturnType<typeof sceneGraph.getData>);
+    jest.spyOn(sceneGraph, 'findObject').mockReturnValue(null);
+
+    expect(getPanelData(vizPanel).panel.description).toBe('Panel help text');
+  });
+
+  it('interpolates TraceQL targets and resolves datasource from exploration variable', () => {
+    const vizPanel = baseVizPanel();
+    const exploration = {};
+    const runner = new SceneQueryRunner({
+      datasource: { uid: '${ds}', type: 'tempo' },
+      queries: [
+        {
+          refId: 'A',
+          query: '{ resource.service.name =~ "$service" }',
+          datasource: { uid: '${ds}', type: 'tempo' },
+        },
+      ],
+      maxDataPoints: 240,
+    });
+
+    jest.mocked(getTraceExplorationScene).mockReturnValue(exploration as ReturnType<typeof getTraceExplorationScene>);
+    jest.mocked(getDatasourceVariable).mockReturnValue({
+      getValue: () => 'tempo-uid-from-var',
+    } as ReturnType<typeof getDatasourceVariable>);
+
+    const dataRef = {};
+    jest.spyOn(sceneGraph, 'getData').mockReturnValue(dataRef as ReturnType<typeof sceneGraph.getData>);
+    jest.spyOn(sceneGraph, 'findObject').mockImplementation((_root, predicate) => {
+      expect(predicate(runner)).toBe(true);
+      return runner;
+    });
+    jest.spyOn(sceneGraph, 'findDescendents').mockReturnValue([]);
+
+    const { panel } = getPanelData(vizPanel);
+
+    expect(panel.targets).toEqual([
+      {
+        refId: 'A',
+        query: '[interp:{ resource.service.name =~ "$service" }]',
+      },
+    ]);
+    expect(panel.datasource).toEqual({
+      uid: 'tempo-uid-from-var',
+      type: 'tempo',
+    });
+    expect(panel.maxDataPoints).toBe(240);
+  });
+
+  it('leaves an empty query string unmodified', () => {
+    const vizPanel = baseVizPanel();
+    const runner = new SceneQueryRunner({
+      datasource: { uid: 'fixed-uid', type: 'tempo' },
+      queries: [{ refId: 'A', query: '' }],
+    });
+
+    jest.spyOn(sceneGraph, 'getData').mockReturnValue({} as ReturnType<typeof sceneGraph.getData>);
+    jest.spyOn(sceneGraph, 'findObject').mockReturnValue(runner);
+
+    const { panel } = getPanelData(vizPanel);
+
+    expect(panel.targets?.[0]?.query).toBe('');
+    expect(sceneGraph.interpolate).not.toHaveBeenCalledWith(vizPanel, '');
+  });
+
+  it('prefers explicit alertTargets over layout query runner (breakdown tile scope)', () => {
+    const vizPanel = baseVizPanel();
+    const exploration = {};
+    const runner = new SceneQueryRunner({
+      datasource: { uid: 'tempo-runner', type: 'tempo' },
+      queries: [{ refId: 'A', query: '{ aggregate }' }],
+      maxDataPoints: 64,
+    });
+
+    jest.mocked(getTraceExplorationScene).mockReturnValue(exploration as ReturnType<typeof getTraceExplorationScene>);
+    jest.mocked(getDatasourceVariable).mockReturnValue({
+      getValue: () => 'resolved-tempo-uid',
+    } as ReturnType<typeof getDatasourceVariable>);
+    jest.mocked(getDataSource).mockReturnValue('resolved-tempo-uid');
+    jest.spyOn(sceneGraph, 'getData').mockReturnValue({} as ReturnType<typeof sceneGraph.getData>);
+    jest.spyOn(sceneGraph, 'findObject').mockReturnValue(runner);
+    jest.spyOn(sceneGraph, 'interpolate').mockImplementation((_scene, value) => {
+      if (typeof value === 'string') {
+        return value.replace('${service}', 'checkout');
+      }
+      return String(value ?? '');
+    });
+
+    const { panel } = getPanelData(vizPanel, [{ refId: 'A', query: '{ resource.service.name="${service}" }' }]);
+
+    expect(getTraceExplorationScene).toHaveBeenCalledWith(vizPanel);
+    expect(getDatasourceVariable).toHaveBeenCalledWith(exploration);
+    expect(panel.targets).toEqual([{ refId: 'A', query: '{ resource.service.name="checkout" }' }]);
+    expect(panel.datasource).toEqual({ uid: 'resolved-tempo-uid', type: 'tempo' });
+    expect(panel.maxDataPoints).toBe(64);
+  });
+
+  it('does not add uid when query runner datasource omits it', () => {
+    const vizPanel = baseVizPanel();
+    const runner = new SceneQueryRunner({
+      datasource: { type: 'tempo' },
+      queries: [{ refId: 'A', query: 'count()' }],
+    });
+
+    jest.spyOn(sceneGraph, 'getData').mockReturnValue({} as ReturnType<typeof sceneGraph.getData>);
+    jest.spyOn(sceneGraph, 'findObject').mockReturnValue(runner);
+
+    const { panel } = getPanelData(vizPanel);
+
+    expect(panel.datasource).toEqual({ type: 'tempo' });
+  });
+
+  it('omits panel datasource when there are no query targets', () => {
+    const vizPanel = baseVizPanel();
+
+    jest.spyOn(sceneGraph, 'getData').mockReturnValue({} as ReturnType<typeof sceneGraph.getData>);
+    jest.spyOn(sceneGraph, 'findObject').mockReturnValue(null);
+    jest.spyOn(sceneGraph, 'findDescendents').mockReturnValue([]);
+
+    const { panel } = getPanelData(vizPanel);
+
+    expect(panel.datasource).toBeUndefined();
+  });
+});

src/components/Explore/actions/addToDashboard.ts

@@ -0,0 +1,124 @@
+import { BusEventWithPayload, type TimeRange } from '@grafana/data';
+import { sceneGraph, SceneQueryRunner, type SceneObject, type VizPanel } from '@grafana/scenes';
+import { type Panel } from '@grafana/schema';
+
+import {
+  getPanelDataForAlert,
+  type AlertPanelTarget,
+} from './createAlert/getPanelDataForAlert';
+import { getDataSource, getDatasourceVariable, getTraceExplorationScene } from 'utils/utils';
+
+export const ADD_TO_DASHBOARD_COMPONENT_ID = 'grafana/add-to-dashboard-form/v1';
+
+export interface PanelDataRequestPayload {
+  panel: Panel;
+  range: TimeRange;
+}
+
+interface EventOpenAddToDashboardPayload {
+  panelData: PanelDataRequestPayload;
+}
+
+export class EventOpenAddToDashboard extends BusEventWithPayload<EventOpenAddToDashboardPayload> {
+  public static readonly type = 'open-add-to-dashboard';
+}
+
+export interface AddToDashboardFormProps {
+  onClose: () => void;
+  buildPanel: () => Panel;
+  timeRange?: TimeRange;
+  options?: { useAbsolutePath: boolean };
+}
+
+/** Tempo metrics panels use TraceQL on `query`; interpolate so dashboard panels get resolved filters/vars. */
+function interpolateTraceQueryTarget(vizPanel: VizPanel, target: Record<string, unknown>): Record<string, unknown> {
+  const next: Record<string, unknown> = { ...target };
+  if (next.query != null) {
+    const q = next.query as string;
+    next.query = q ? sceneGraph.interpolate(vizPanel, q) : q;
+  }
+  // Dashboard panels use panel-level datasource; scene `${ds}` on targets breaks new dashboards.
+  delete next.datasource;
+  return next;
+}
+
+/** Resolved Tempo UID for dashboard panels (not the `${ds}` scene variable). */
+function resolveDashboardDatasource(vizPanel: VizPanel): NonNullable<Panel['datasource']> {
+  const exploration = getTraceExplorationScene(vizPanel);
+  const uid = getDatasourceVariable(exploration).getValue()?.toString() || getDataSource(exploration);
+  return {
+    uid,
+    type: 'tempo',
+  };
+}
+
+/** Preserve runner datasource shape when uid is absent; resolve scene `${ds}` when uid is set. */
+function mapPanelDatasource(vizPanel: VizPanel, ds?: Panel['datasource']): Panel['datasource'] {
+  if (!ds || typeof ds !== 'object') {
+    return resolveDashboardDatasource(vizPanel);
+  }
+  if (Object.prototype.hasOwnProperty.call(ds, 'uid') && ds.uid) {
+    return { ...ds, ...resolveDashboardDatasource(vizPanel) };
+  }
+  return { ...ds };
+}
+
+function findQueryRunner(data: SceneObject | undefined): SceneQueryRunner | undefined {
+  if (!data) {
+    return undefined;
+  }
+  const direct = sceneGraph.findObject(data, (o) => o instanceof SceneQueryRunner);
+  if (direct instanceof SceneQueryRunner) {
+    return direct;
+  }
+  return sceneGraph.findDescendents(data, SceneQueryRunner)[0];
+}
+
+export function getPanelData(
+  vizPanel: VizPanel,
+  /** Per-tile TraceQL targets (e.g. breakdown with attribute=value). Same as create alert. */
+  alertTargets?: AlertPanelTarget[]
+): PanelDataRequestPayload {
+  if (alertTargets?.length) {
+    const fromTargets = getPanelDataForAlert(vizPanel, alertTargets);
+    if (fromTargets) {
+      return {
+        ...fromTargets,
+        panel: {
+          ...fromTargets.panel,
+          datasource: resolveDashboardDatasource(vizPanel),
+        },
+      };
+    }
+  }
+
+  const range = sceneGraph.getTimeRange(vizPanel).state.value;
+  const data = sceneGraph.getData(vizPanel);
+  const found = findQueryRunner(data);
+
+  let targets: Panel['targets'] = [];
+  let maxDataPoints: number | undefined;
+
+  if (found) {
+    targets = (found.state.queries ?? []).map((q: Record<string, unknown>) =>
+      interpolateTraceQueryTarget(vizPanel, q)
+    );
+    maxDataPoints = found.state.maxDataPoints;
+  }
+
+  const vs = vizPanel.state;
+  const panel: Panel = {
+    type: vs.pluginId,
+    title: vs.title ? sceneGraph.interpolate(vizPanel, vs.title) : vs.title,
+    targets,
+    ...(targets.length > 0 && {
+      datasource: mapPanelDatasource(vizPanel, found?.state.datasource as Panel['datasource']),
+    }),
+    options: vs.options,
+    fieldConfig: vs.fieldConfig as Panel['fieldConfig'],
+    ...(vs.description && { description: vs.description }),
+    ...(maxDataPoints !== undefined && { maxDataPoints }),
+  };
+
+  return { panel, range };
+}

src/components/Explore/actions/addToDashboard/AddToDashboardModal.tsx

@@ -0,0 +1,37 @@
+import React, { createElement } from 'react';
+
+import { t } from '@grafana/i18n';
+import { usePluginComponent } from '@grafana/runtime';
+import { Modal } from '@grafana/ui';
+
+import {
+  ADD_TO_DASHBOARD_COMPONENT_ID,
+  type AddToDashboardFormProps,
+  type PanelDataRequestPayload,
+} from '../addToDashboard';
+
+interface AddToDashboardModalProps {
+  panelData: PanelDataRequestPayload;
+  onClose: () => void;
+}
+
+/** Loads the Grafana core form only while the modal is open (avoids usePluginComponent on every scene render). */
+export function AddToDashboardModal({ panelData, onClose }: AddToDashboardModalProps) {
+  const { component: AddToDashboardComponent, isLoading } =
+    usePluginComponent<AddToDashboardFormProps>(ADD_TO_DASHBOARD_COMPONENT_ID);
+
+  if (isLoading || !AddToDashboardComponent) {
+    return null;
+  }
+
+  return (
+    <Modal title={t('panel-menu.add-to-dashboard', 'Add to dashboard')} isOpen onDismiss={onClose}>
+      {createElement(AddToDashboardComponent as React.ComponentType<AddToDashboardFormProps>, {
+        onClose,
+        buildPanel: () => panelData.panel,
+        timeRange: panelData.range,
+        options: { useAbsolutePath: true },
+      })}
+    </Modal>
+  );
+}