Sidecar: Implement basic integration with Explore Logs

cspell.config.json

@@ -43,6 +43,7 @@
     "Spanset",
     "tempopb",
     "querysharding",
-    "queryless"
+    "queryless",
+    "lokiexplore"
   ]
 }

package.json

@@ -72,16 +72,17 @@
   },
   "dependencies": {
     "@emotion/css": "^11.10.6",
-    "@grafana/data": "^11.2.0",
-    "@grafana/runtime": "^11.2.0",
+    "@grafana/data": "^11.3.0",
+    "@grafana/runtime": "^11.3.0",
     "@grafana/scenes": "^5.14.7",
-    "@grafana/ui": "11.2.0",
+    "@grafana/ui": "11.3.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-loading-skeleton": "3.4.0",
     "react-router-dom": "^5.2.0",
     "rxjs": "7.8.0",
-    "tslib": "2.5.3"
+    "tslib": "2.5.3",
+    "zod": "^3.23.8"
   },
   "packageManager": "[email protected]"
 }

src/components/Routes/Routes.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
-import { Redirect, Route, Switch } from 'react-router-dom';
+import { Redirect, Switch } from 'react-router-dom';
+import { CompatRoute } from 'react-router-dom-v5-compat';
 import { TraceExplorationPage } from '../../pages/Explore';
 import { PLUGIN_BASE_URL, ROUTES } from 'utils/shared';
 
 export const Routes = () => {
   return (
     <Switch>
-      <Route path={prefixRoute(`${ROUTES.Explore}`)} component={TraceExplorationPage} />
+      <CompatRoute path={prefixRoute(`${ROUTES.Explore}`)} component={TraceExplorationPage} />
       <Redirect to={prefixRoute(ROUTES.Explore)} />
     </Switch>
   );

src/module.ts

@@ -2,9 +2,30 @@ import { AppPlugin } from '@grafana/data';
 import { App } from './components/App';
 import { AppConfig } from './components/AppConfig';
 
-export const plugin = new AppPlugin<{}>().setRootPage(App).addConfigPage({
-  title: 'Configuration',
-  icon: 'cog',
-  body: AppConfig,
-  id: 'configuration',
-});
+// @ts-ignore new API that is not yet in stable release
+import { sidecarServiceSingleton_EXPERIMENTAL } from '@grafana/runtime';
+import pluginJson from './plugin.json';
+
+export const plugin = new AppPlugin<{}>()
+  .setRootPage(App)
+  .addConfigPage({
+    title: 'Configuration',
+    icon: 'cog',
+    body: AppConfig,
+    id: 'configuration',
+  })
+  .addLink({
+    title: 'traces',
+    description: 'Open traces',
+    icon: 'align-left',
+    targets: 'grafana-lokiexplore-app/toolbar-open-related/v1',
+    configure: () => {
+      if (sidecarServiceSingleton_EXPERIMENTAL?.isAppOpened(pluginJson.id)) {
+        return undefined;
+      }
+      return {};
+    },
+    onClick: (e, helpers) => {
+      sidecarServiceSingleton_EXPERIMENTAL?.openApp(pluginJson.id, helpers.context);
+    },
+  });

src/pages/Explore/TraceExplorationPage.tsx

@@ -1,13 +1,23 @@
 import React, { useEffect, useState } from 'react';
+import z from 'zod';
+
 import { newTracesExploration } from '../../utils/utils';
 import { TraceExploration } from './TraceExploration';
 import { DATASOURCE_LS_KEY } from '../../utils/shared';
 import { reportAppInteraction, USER_EVENTS_ACTIONS, USER_EVENTS_PAGES } from '../../utils/analytics';
 import { UrlSyncContextProvider } from '@grafana/scenes';
+import { AdHocVariableFilter } from '@grafana/data';
+
+// @ts-ignore new API that is not yet in stable release
+import { useSidecar_EXPERIMENTAL } from '@grafana/runtime';
 
 export const TraceExplorationPage = () => {
+  // We are calling this conditionally, but it will depend on grafana version and should not change in runtime so we
+  // can ignore the hook rule here
+  const sidecarContext = useSidecar_EXPERIMENTAL?.() ?? {};
+
   const initialDs = localStorage.getItem(DATASOURCE_LS_KEY) || '';
-  const [exploration] = useState(newTracesExploration(initialDs));
+  const [exploration] = useState(newTracesExploration(initialDs, getInitialFilters(sidecarContext.initialContext)));
 
   return <TraceExplorationView exploration={exploration} />;
 };
@@ -33,3 +43,30 @@ export function TraceExplorationView({ exploration }: { exploration: TraceExplor
     </UrlSyncContextProvider>
   );
 }
+
+const AdHocVariableFilterSchema = z.object({
+  key: z.string(),
+  operator: z.string(),
+  value: z.string(),
+});
+
+const InitialFiltersSchema = z.object({
+  filters: z.array(AdHocVariableFilterSchema),
+});
+
+/** Because the context comes from a different app plugin we cannot really count on it being the correct type even if
+ * it was typed, so it is safer to do runtime parsing here. It also can come from different app extensions and at this
+ * point we don't know which, but we also have implemented only one so far it's a fair guess.
+ *
+ * At this point there is no smartness. What ever we got from the other app we use as is. Ideally there should be some
+ * normalization of the filters or smart guesses when there are differences.
+ * @param context
+ */
+function getInitialFilters(context: unknown): AdHocVariableFilter[] | undefined {
+  const result = InitialFiltersSchema.safeParse(context);
+  if (!result.success) {
+    return undefined;
+  }
+
+  return result.data.filters;
+}

src/plugin.json

@@ -3,6 +3,7 @@
   "type": "app",
   "name": "Explore Traces",
   "id": "grafana-exploretraces-app",
+  "preload": true,
   "autoEnabled": true,
   "info": {
     "keywords": ["app", "tempo", "traces", "explore"],
@@ -54,5 +55,14 @@
   "dependencies": {
     "grafanaDependency": ">=11.2.0",
     "plugins": []
+  },
+  "extensions": {
+    "addedLinks": [
+      {
+        "targets": ["grafana-lokiexplore-app/toolbar-open-related/v1"],
+        "title": "traces",
+        "description": "Open traces"
+      }
+    ]
   }
 }

src/utils/utils.ts

@@ -33,10 +33,10 @@ export function getTraceByServiceScene(model: SceneObject): TracesByServiceScene
   return sceneGraph.getAncestor(model, TracesByServiceScene);
 }
 
-export function newTracesExploration(initialDS?: string): TraceExploration {
+export function newTracesExploration(initialDS?: string, initialFilters?: AdHocVariableFilter[]): TraceExploration {
   return new TraceExploration({
     initialDS,
-    initialFilters: [primarySignalOptions[0].filter],
+    initialFilters: initialFilters ?? [primarySignalOptions[0].filter],
     $timeRange: new SceneTimeRange({ from: 'now-15m', to: 'now' }),
   });
 }