Update to Perses 0.54.0

pkg/api/tempo.go

@@ -71,6 +71,11 @@ func ListTempoResourcesHandler(k8sclient *dynamic.DynamicClient) http.HandlerFun
 }
 
 func ListTempoResources(ctx context.Context, k8sclient *dynamic.DynamicClient) ([]TempoResource, error) {
+	// For local development, return a list of mock Tempo instances
+	// return []TempoResource{
+	// 	{"TempoStack", "namespace1", "instance1", []string{"tenant1", "tenant2"}},
+	// 	{"TempoStack", "namespace1", "instance2", []string{"prod", "dev"}},
+	// }, nil
 	tempostacks, err := listTempos(ctx, k8sclient, tempostackGVR)
 	if err != nil {
 		return nil, err

web/package.json

@@ -71,14 +71,14 @@
     "@patternfly/react-core": "^6.4.1",
     "@patternfly/react-icons": "^6.4.0",
     "@patternfly/react-templates": "^6.4.1",
-    "@perses-dev/components": "0.54.0-beta.1",
-    "@perses-dev/core": "0.53.0",
-    "@perses-dev/dashboards": "0.54.0-beta.1",
-    "@perses-dev/plugin-system": "0.54.0-beta.1",
-    "@perses-dev/scatter-chart-plugin": "0.11.0-beta.0",
-    "@perses-dev/tempo-plugin": "0.58.0-beta.0",
-    "@perses-dev/trace-table-plugin": "0.11.0-beta.0",
-    "@perses-dev/tracing-gantt-chart-plugin": "0.13.0-beta.0",
+    "@perses-dev/components": "0.54.0",
+    "@perses-dev/spec": "0.2.0",
+    "@perses-dev/dashboards": "0.54.0",
+    "@perses-dev/plugin-system": "0.54.0",
+    "@perses-dev/scatter-chart-plugin": "0.11.0",
+    "@perses-dev/tempo-plugin": "0.59.0",
+    "@perses-dev/trace-table-plugin": "0.11.0",
+    "@perses-dev/tracing-gantt-chart-plugin": "0.13.0",
     "copy-webpack-plugin": "^14.0.0",
     "i18next": "^25.10.5",
     "i18next-http-backend": "^3.0.2",

web/src/components/PersesWrapper.tsx

@@ -10,24 +10,18 @@ import { ThemeProvider } from '@mui/material';
 import {
   DataQueriesProvider,
   dynamicImportPluginLoader,
+  getPluginModuleCompoundKey,
   PanelData,
   PanelPlugin,
   PanelProps,
+  PluginModuleResource,
   PluginRegistry,
   RouterProvider,
   TimeRangeProviderWithQueryParams,
   useDataQueriesContext,
   useInitialTimeRange,
 } from '@perses-dev/plugin-system';
-import {
-  DatasourceResource,
-  Definition,
-  DurationString,
-  GlobalDatasourceResource,
-  TraceData,
-  UnknownSpec,
-  DatasourceApi,
-} from '@perses-dev/core';
+import { DatasourceResource, GlobalDatasourceResource, DatasourceApi } from '@perses-dev/client';
 import {
   DatasourceStoreProvider,
   Panel,
@@ -48,6 +42,7 @@ import { LoadingState } from './LoadingState';
 import { usePatternFlyTheme } from './console/utils/usePatternFlyTheme';
 import { Link as RouterLink, useNavigate } from 'react-router';
 import './PersesWrapper.css';
+import { DurationString, QueryDefinition, TraceData, UnknownSpec } from '@perses-dev/spec';
 
 class DatasourceApiImpl implements DatasourceApi {
   constructor(public proxyDatasource: GlobalDatasourceResource) {}
@@ -86,13 +81,31 @@ const patternflyChartsMultiUnorderedPalette = Array.isArray(chartColorScale)
     })
   : [];
 
+type PersesPluginModule = { getPluginModule: () => PluginModuleResource } & Record<string, unknown>;
+
+// This workaround can be dropped once https://github.com/perses/shared/pull/211 is released
+function toPluginRegistryModule(module: PersesPluginModule): Record<string, unknown> {
+  const { metadata, spec } = module.getPluginModule();
+  return Object.fromEntries(
+    spec.plugins.map((plugin) => [
+      getPluginModuleCompoundKey({
+        kind: plugin.kind,
+        name: plugin.spec.name,
+        registry: metadata.registry,
+        version: metadata.version,
+      }),
+      module[plugin.spec.name],
+    ]),
+  );
+}
+
 // PluginRegistry configuration to allow access to
 // visualization panels/charts (@perses-dev/panels-plugin)
 // and data handlers for tempo (@perses-dev/tempo-plugin).
 const pluginLoader = dynamicImportPluginLoader(
   [tempoPlugin, scatterChartPlugin, traceTablePlugin, tracingGanttChartPlugin].map((x) => ({
     resource: x.getPluginModule(),
-    importPlugin: () => Promise.resolve(x),
+    importPlugin: () => Promise.resolve(toPluginRegistryModule(x)),
   })),
 );
 
@@ -158,7 +171,7 @@ export function PersesDashboardWrapper({ children }: PersesDashboardWrapperProps
 
 interface PersesTempoDatasourceWrapperProps {
   tempo: TempoInstance | undefined;
-  queries: Definition<UnknownSpec>[];
+  definitions: QueryDefinition<unknown, UnknownSpec>[];
   duration?: DurationString;
   children?: ReactNode;
 }
@@ -168,7 +181,7 @@ interface PersesTempoDatasourceWrapperProps {
  */
 export function PersesTempoDatasourceWrapper({
   tempo,
-  queries,
+  definitions,
   children,
 }: PersesTempoDatasourceWrapperProps) {
   const datasourceApi = useMemo(() => {
@@ -194,7 +207,7 @@ export function PersesTempoDatasourceWrapper({
 
   return (
     <DatasourceStoreProvider datasourceApi={datasourceApi}>
-      <DataQueriesProvider definitions={queries}>{children}</DataQueriesProvider>
+      <DataQueriesProvider definitions={definitions}>{children}</DataQueriesProvider>
     </DatasourceStoreProvider>
   );
 }

web/src/pages/TraceDetailPage/TraceDetailPage.tsx

@@ -1,4 +1,4 @@
-import { memo, useMemo } from 'react';
+import { useMemo } from 'react';
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -41,7 +41,7 @@ function TraceDetailPage() {
   );
 }
 
-export default memo(TraceDetailPage);
+export default TraceDetailPage;
 
 function TraceDetailPageBody() {
   const { t } = useTranslation('plugin__distributed-tracing-console-plugin');
@@ -53,7 +53,12 @@ function TraceDetailPageBody() {
   return (
     <PersesTempoDatasourceWrapper
       tempo={tempo}
-      queries={[{ kind: 'TempoTraceQuery', spec: { query: traceId } }]}
+      definitions={[
+        {
+          kind: 'TraceQuery',
+          spec: { plugin: { kind: 'TempoTraceQuery', spec: { query: traceId } } },
+        },
+      ]}
     >
       <PageSection>
         <Breadcrumb>

web/src/pages/TraceDetailPage/transformTrace.ts

@@ -1,4 +1,4 @@
-import { otlpcommonv1, otlptracev1 } from '@perses-dev/core';
+import { otlpcommonv1, otlptracev1 } from '@perses-dev/spec';
 
 /**
  * Convert the trace from OTLP/JSON to a more LLM-friendly format:

web/src/pages/TracesPage/QueryBrowser.tsx

@@ -72,7 +72,12 @@ export function QueryBrowserBody() {
           <FilterToolbar tempo={tempo} setTempo={setTempo} query={query} runQuery={runQuery} />
           <PersesTempoDatasourceWrapper
             tempo={tempo}
-            queries={[{ kind: 'TempoTraceQuery', spec: { query, limit } }]}
+            definitions={[
+              {
+                kind: 'TraceQuery',
+                spec: { plugin: { kind: 'TempoTraceQuery', spec: { query, limit } } },
+              },
+            ]}
           >
             <TraceSearchResults setQuery={setQuery} />
           </PersesTempoDatasourceWrapper>

web/src/pages/TracesPage/TracesPage.tsx

@@ -1,4 +1,4 @@
-import { memo, useState } from 'react';
+import { useState } from 'react';
 import { useTempoResources } from '../../hooks/useTempoResources';
 import { QueryBrowser } from './QueryBrowser';
 import {
@@ -53,7 +53,7 @@ function TracesPage() {
   );
 }
 
-export default memo(TracesPage);
+export default TracesPage;
 
 /**
  * TracesPageBody catches major error states like "Tempo Operator not installed" or "No Tempo instances created yet"