Data trails: Add datasource picker to Logs tab and disable it (#80892)

* wip

* Logs are now working

* Remove logs tab, for now?

public/app/features/trails/ActionTabs/LogsScene.tsx

@@ -1,22 +1,95 @@
-import { PanelBuilders, SceneFlexItem, SceneQueryRunner } from '@grafana/scenes';
+import React from 'react';
+
+import {
+  DataSourceVariable,
+  PanelBuilders,
+  SceneComponentProps,
+  SceneFlexItem,
+  SceneFlexLayout,
+  SceneObject,
+  SceneObjectBase,
+  SceneObjectState,
+  SceneQueryRunner,
+  SceneVariableSet,
+  VariableValueSelectors,
+} from '@grafana/scenes';
+import { Stack } from '@grafana/ui';
 
 import { SelectMetricAction } from '../SelectMetricAction';
-import { LOGS_METRIC } from '../shared';
+import { LOGS_METRIC, VAR_LOGS_DATASOURCE, VAR_LOGS_DATASOURCE_EXPR } from '../shared';
 
-export function buildLogsScene() {
-  return new SceneFlexItem({
-    $data: new SceneQueryRunner({
+interface LogsSceneState extends SceneObjectState {
+  initialDS?: string;
+  controls: SceneObject[];
+  body: SceneFlexLayout;
+}
+
+export class LogsScene extends SceneObjectBase<LogsSceneState> {
+  public constructor(state: Partial<LogsSceneState>) {
+    const logsQuery = new SceneQueryRunner({
+      datasource: { uid: VAR_LOGS_DATASOURCE_EXPR },
       queries: [
         {
           refId: 'A',
-          datasource: { uid: 'gdev-loki' },
           expr: '{${filters}} | logfmt',
         },
       ],
-    }),
-    body: PanelBuilders.logs()
-      .setTitle('Logs')
-      .setHeaderActions(new SelectMetricAction({ metric: LOGS_METRIC, title: 'Open' }))
-      .build(),
+    });
+
+    super({
+      $variables: state.$variables ?? getVariableSet(state.initialDS),
+      controls: state.controls ?? [new VariableValueSelectors({ layout: 'vertical' })],
+      body:
+        state.body ??
+        new SceneFlexLayout({
+          direction: 'column',
+          children: [
+            new SceneFlexItem({
+              body: PanelBuilders.logs()
+                .setTitle('Logs')
+                .setData(logsQuery)
+                .setHeaderActions(new SelectMetricAction({ metric: LOGS_METRIC, title: 'Open' }))
+                .build(),
+            }),
+          ],
+        }),
+      ...state,
+    });
+  }
+
+  static Component = ({ model }: SceneComponentProps<LogsScene>) => {
+    const { controls, body } = model.useState();
+
+    return (
+      <Stack gap={1} direction={'column'} grow={1}>
+        {controls && (
+          <Stack gap={1}>
+            {controls.map((control) => (
+              <control.Component key={control.state.key} model={control} />
+            ))}
+          </Stack>
+        )}
+        <body.Component model={body} />
+      </Stack>
+    );
+  };
+}
+
+function getVariableSet(initialDS?: string) {
+  return new SceneVariableSet({
+    variables: [
+      new DataSourceVariable({
+        name: VAR_LOGS_DATASOURCE,
+        label: 'Logs data source',
+        value: initialDS,
+        pluginId: 'loki',
+      }),
+    ],
+  });
+}
+
+export function buildLogsScene() {
+  return new SceneFlexItem({
+    body: new LogsScene({}),
   });
 }

public/app/features/trails/MetricScene.tsx

@@ -18,7 +18,6 @@ import {
 import { ToolbarButton, Box, Stack, Icon, TabsBar, Tab, useStyles2 } from '@grafana/ui';
 
 import { buildBreakdownActionScene } from './ActionTabs/BreakdownScene';
-import { buildLogsScene } from './ActionTabs/LogsScene';
 import { buildMetricOverviewScene } from './ActionTabs/MetricOverviewScene';
 import { buildRelatedMetricsScene } from './ActionTabs/RelatedMetricsScene';
 import { getAutoQueriesForMetric } from './AutomaticMetricQueries/AutoQueryEngine';
@@ -104,7 +103,6 @@ export class MetricScene extends SceneObjectBase<MetricSceneState> {
 const actionViewsDefinitions: ActionViewDefinition[] = [
   { displayName: 'Overview', value: 'overview', getScene: buildMetricOverviewScene },
   { displayName: 'Breakdown', value: 'breakdown', getScene: buildBreakdownActionScene },
-  { displayName: 'Logs', value: 'logs', getScene: buildLogsScene },
   { displayName: 'Related metrics', value: 'related', getScene: buildRelatedMetricsScene },
 ];
 

public/app/features/trails/shared.ts

@@ -20,6 +20,8 @@ export const VAR_GROUP_BY = 'groupby';
 export const VAR_GROUP_BY_EXP = '${groupby}';
 export const VAR_DATASOURCE = 'ds';
 export const VAR_DATASOURCE_EXPR = '${ds}';
+export const VAR_LOGS_DATASOURCE = 'logsDs';
+export const VAR_LOGS_DATASOURCE_EXPR = '${logsDs}';
 
 export const LOGS_METRIC = '$__logs__';
 export const KEY_SQR_METRIC_VIZ_QUERY = 'sqr-metric-viz-query';