Exposed service logs view

package.json

@@ -73,10 +73,10 @@
   },
   "dependencies": {
     "@emotion/css": "^11.10.6",
-    "@grafana/data": "^11.0.0",
-    "@grafana/runtime": "^11.0.0",
+    "@grafana/data": "^11.2.0-183075",
+    "@grafana/runtime": "^11.2.0-183075",
     "@grafana/scenes": "4.32.0",
-    "@grafana/ui": "^11.0.0",
+    "@grafana/ui": "^11.2.0-183075",
     "@playwright/test": "^1.43.1",
     "@types/react-table": "^7.7.20",
     "react": "18.2.0",

src/Components/ExposedLogExplorationPage/v1/ExposedLogExplorationPage.tsx

@@ -0,0 +1,76 @@
+import { AdHocVariableFilter, TimeRange, dateTimeParse } from "@grafana/data";
+import { SceneTimeRange } from '@grafana/scenes';
+import { IndexScene } from "Components/IndexScene/IndexScene";
+import { isEqual } from "lodash";
+import React, { useEffect, useMemo } from "react";
+
+const DEFAULT_TIME_RANGE = { from: 'now-15m', to: 'now' };
+
+interface Props {
+  initialFilters?: AdHocVariableFilter[];
+  initialDS?: string;
+  initialTimeRange?: TimeRange;
+  onTimeRangeChange?: (timeRange: TimeRange) => void;
+}
+
+export function ExposedLogExplorationPage({ initialFilters, initialDS, initialTimeRange, onTimeRangeChange }: Props) {
+  const [isInitialized, setIsInitialized] = React.useState(false);
+  // Must memoize the top-level scene or any route change will re-instantiate all the scene classes
+  const scene = useMemo(
+    () =>
+      new IndexScene({
+        $timeRange: new SceneTimeRange(
+          initialTimeRange
+            ? {
+                from:
+                  typeof initialTimeRange.raw.from === 'string'
+                    ? initialTimeRange.raw.from
+                    : initialTimeRange.raw.from.toISOString(),
+                to:
+                  typeof initialTimeRange.raw.to === 'string'
+                    ? initialTimeRange.raw.to
+                    : initialTimeRange.raw.to.toISOString(),
+              }
+            : DEFAULT_TIME_RANGE
+        ),
+        $behaviors: [
+          (scene: IndexScene) => {
+            const unsubscribable = scene.state.$timeRange?.subscribeToState((newState, oldState) => {
+              if (!isEqual(newState, oldState)) {
+                const timeRange: TimeRange = {
+                  from: dateTimeParse(newState.from),
+                  to: dateTimeParse(newState.to),
+                  raw: {
+                    from: newState.from,
+                    to: newState.to,
+                  },
+                };
+                onTimeRangeChange?.(timeRange);
+              }
+            });
+
+            return () => {
+              unsubscribable?.unsubscribe();
+            };
+          },
+        ],
+        initialFilters,
+        initialDS,
+        mode: 'service_details',
+      }),
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  useEffect(() => {
+    if (!isInitialized) {
+      setIsInitialized(true);
+    }
+  }, [scene, isInitialized]);
+
+  if (!isInitialized) {
+    return null;
+  }
+
+  return <scene.Component model={scene} />;
+}

src/module.ts

@@ -1,4 +1,15 @@
 import { AppPlugin } from '@grafana/data';
 import { App } from 'Components/App';
+import { ExposedLogExplorationPage } from 'Components/ExposedLogExplorationPage/v1/ExposedLogExplorationPage';
+import pluginJson from 'plugin.json';
 
 export const plugin = new AppPlugin<{}>().setRootPage(App);
+
+if (plugin.exposeComponent) {
+  plugin.exposeComponent({
+    id: `${pluginJson.id}/explore-logs/v1`,
+    component: ExposedLogExplorationPage,
+    title: 'Explore logs view',
+    description: 'Explore logs service details view for grafana plugins to consume.',
+  });
+}

src/plugin.json

@@ -3,6 +3,7 @@
   "type": "app",
   "name": "Logs",
   "id": "grafana-lokiexplore-app",
+  "preload": true,
   "info": {
     "keywords": ["app", "loki", "explore", "logs"],
     "description": "Query-less exploration of log data stored in Loki",