OU-1023: Integrate remotePluginLoader()

web/package.json

@@ -62,32 +62,11 @@
     "@patternfly/react-icons": "^6.2.0",
     "@patternfly/react-table": "^6.2.0",
     "@patternfly/react-templates": "^6.2.0",
-    "@perses-dev/bar-chart-plugin": "^0.9.0",
-    "@perses-dev/components": "^0.52.0",
-    "@perses-dev/core": "^0.52.0",
-    "@perses-dev/dashboards": "^0.52.0",
-    "@perses-dev/datasource-variable-plugin": "^0.3.2",
-    "@perses-dev/explore": "^0.52.0",
-    "@perses-dev/flame-chart-plugin": "^0.3.0",
-    "@perses-dev/gauge-chart-plugin": "^0.9.0",
-    "@perses-dev/heatmap-chart-plugin": "^0.2.1",
-    "@perses-dev/histogram-chart-plugin": "^0.9.0",
-    "@perses-dev/loki-plugin": "^0.1.1",
-    "@perses-dev/markdown-plugin": "^0.9.0",
-    "@perses-dev/pie-chart-plugin": "^0.9.0",
-    "@perses-dev/plugin-system": "^0.52.0",
-    "@perses-dev/prometheus-plugin": "^0.53.3",
-    "@perses-dev/pyroscope-plugin": "^0.3.1",
-    "@perses-dev/scatter-chart-plugin": "^0.8.0",
-    "@perses-dev/stat-chart-plugin": "^0.9.0",
-    "@perses-dev/static-list-variable-plugin": "^0.5.1",
-    "@perses-dev/status-history-chart-plugin": "^0.9.0",
-    "@perses-dev/table-plugin": "^0.8.0",
-    "@perses-dev/tempo-plugin": "^0.53.1",
-    "@perses-dev/timeseries-chart-plugin": "^0.10.1",
-    "@perses-dev/timeseries-table-plugin": "^0.9.0",
-    "@perses-dev/trace-table-plugin": "^0.8.1",
-    "@perses-dev/tracing-gantt-chart-plugin": "^0.9.2",
+    "@perses-dev/components": "0.53.0-beta.0",
+    "@perses-dev/core": "0.53.0-beta.0",
+    "@perses-dev/dashboards": "0.53.0-beta.0",
+    "@perses-dev/explore": "0.53.0-beta.0",
+    "@perses-dev/plugin-system": "0.53.0-beta.0",
     "@prometheus-io/codemirror-promql": "^0.37.0",
     "@tanstack/react-query": "^4.36.1",
     "@types/ajv": "^0.0.5",

web/src/components/dashboards/perses/PersesWrapper.tsx

@@ -1,3 +1,4 @@
+import '../../../perses-config';
 import { ThemeOptions, ThemeProvider } from '@mui/material';
 import { ChartThemeColor, getThemeColors } from '@patternfly/react-charts/victory';
 import {
@@ -22,6 +23,7 @@ import {
 } from '@perses-dev/dashboards';
 import {
   DataQueriesProvider,
+  PluginLoader,
   PluginRegistry,
   TimeRangeProviderWithQueryParams,
   useInitialRefreshInterval,
@@ -46,7 +48,7 @@ import { QueryParams } from '../../query-params';
 import { StringParam, useQueryParam } from 'use-query-params';
 import { useTranslation } from 'react-i18next';
 import { LoadingBox } from '../../../components/console/console-shared/src/components/loading/LoadingBox';
-import { pluginLoader } from './persesPluginsLoader';
+import { remotePluginLoader } from '@perses-dev/plugin-system';
 
 // Override eChart defaults with PatternFly colors.
 const patternflyBlue100 = chart_color_blue_100.value;
@@ -248,6 +250,19 @@ const mapPatterflyThemeToMUI = (theme: 'light' | 'dark'): ThemeOptions => {
   };
 };
 
+export function useRemotePluginLoader(): PluginLoader {
+  const pluginLoader = useMemo(
+    () =>
+      remotePluginLoader({
+        baseURL: window.PERSES_PLUGIN_ASSETS_PATH,
+        apiPrefix: window.PERSES_PLUGIN_ASSETS_PATH,
+      }),
+    [],
+  );
+
+  return pluginLoader;
+}
+
 export function PersesWrapper({ children, project }: PersesWrapperProps) {
   const { theme } = usePatternFlyTheme();
   const [dashboardName] = useQueryParam(QueryParams.Dashboard, StringParam);
@@ -268,6 +283,8 @@ export function PersesWrapper({ children, project }: PersesWrapperProps) {
     },
   });
 
+  const pluginLoader = useRemotePluginLoader();
+
   return (
     <ThemeProvider theme={muiTheme}>
       <ChartsProvider chartsTheme={chartsTheme}>

web/src/components/metrics/promql-expression-input.tsx

@@ -52,7 +52,6 @@ import { useTranslation } from 'react-i18next';
 import { useSafeFetch } from '../console/utils/safe-fetch-hook';
 
 import { PROMETHEUS_BASE_PATH } from '../utils';
-import { LabelNamesResponse } from '@perses-dev/prometheus-plugin';
 import {
   t_global_color_status_custom_default,
   t_global_color_status_danger_default,
@@ -326,6 +325,8 @@ export const PromQLExpressionInput: FC<PromQLExpressionInputProps> = ({
   onValueChange,
   onSelectionChange,
 }) => {
+  type LabelNamesResponse = { data?: string[] };
+
   const { t } = useTranslation(process.env.I18N_NAMESPACE);
   const { theme: pfTheme } = usePatternFlyTheme();
 

web/src/index.d.ts

@@ -10,6 +10,17 @@ declare interface Window {
     prometheusBaseURL: string;
     prometheusTenancyBaseURL: string;
   };
+  /**
+   * Perses app configuration made available globally for plugin compatibility
+   */
+  PERSES_APP_CONFIG: {
+    api_prefix: string;
+  };
+  /**
+   * Plugin assets path used by module federation for loading plugin assets
+   * Set to the same value as the proxy base URL
+   */
+  PERSES_PLUGIN_ASSETS_PATH: string;
 }
 
 // TODO: Remove when upgrading to TypeScript 4.1.2+, which has a type for ListFormat and

web/src/perses-config.ts

@@ -0,0 +1,20 @@
+/**
+ * Perses Plugin Configuration
+ *
+ * This module configures global variables needed for Perses plugins to load assets
+ * through the OpenShift Console monitoring plugin proxy. The proxy path is injected
+ * at build time via webpack DefinePlugin.
+ */
+
+// Build-time injected proxy URL for Perses plugins
+declare const PERSES_PROXY_BASE_URL: string;
+
+// Configuration object for Perses app compatibility
+const PERSES_APP_CONFIG = {
+  api_prefix: PERSES_PROXY_BASE_URL,
+};
+
+// Set up window globals for plugin system compatibility
+// These are needed for plugins that use getPublicPath() in their Module Federation configs
+window.PERSES_APP_CONFIG = PERSES_APP_CONFIG;
+window.PERSES_PLUGIN_ASSETS_PATH = PERSES_PROXY_BASE_URL;

web/webpack.config.ts

@@ -103,6 +103,8 @@ const config: Configuration = {
       'process.env': {
         I18N_NAMESPACE: JSON.stringify('plugin__monitoring-plugin'),
       },
+      // Build-time injection of proxy path for config module
+      PERSES_PROXY_BASE_URL: JSON.stringify('/api/proxy/plugin/monitoring-console-plugin/perses'),
     }),
   ],
   devtool: 'source-map',