Skip to content

Commit 8ed1978

Browse files
openshift-merge-bot[bot]openshift-merge-bot[bot]
authored
Merge pull request #616 from zhuje/ou1023-remotepluginloader3-pr
OU-1023: Integrate remotePluginLoader()
2 parents fee17d5 + 8e6b7f3 commit 8ed1978

File tree

8 files changed

+442
-1018
lines changed

8 files changed

+442
-1018
lines changed

‎web/package-lock.json‎

Lines changed: 384 additions & 880 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web/package.json‎

Lines changed: 5 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -62,32 +62,11 @@
6262
"@patternfly/react-icons": "^6.2.0",
6363
"@patternfly/react-table": "^6.2.0",
6464
"@patternfly/react-templates": "^6.2.0",
65-
"@perses-dev/bar-chart-plugin": "^0.9.0",
66-
"@perses-dev/components": "^0.52.0",
67-
"@perses-dev/core": "^0.52.0",
68-
"@perses-dev/dashboards": "^0.52.0",
69-
"@perses-dev/datasource-variable-plugin": "^0.3.2",
70-
"@perses-dev/explore": "^0.52.0",
71-
"@perses-dev/flame-chart-plugin": "^0.3.0",
72-
"@perses-dev/gauge-chart-plugin": "^0.9.0",
73-
"@perses-dev/heatmap-chart-plugin": "^0.2.1",
74-
"@perses-dev/histogram-chart-plugin": "^0.9.0",
75-
"@perses-dev/loki-plugin": "^0.1.1",
76-
"@perses-dev/markdown-plugin": "^0.9.0",
77-
"@perses-dev/pie-chart-plugin": "^0.9.0",
78-
"@perses-dev/plugin-system": "^0.52.0",
79-
"@perses-dev/prometheus-plugin": "^0.53.3",
80-
"@perses-dev/pyroscope-plugin": "^0.3.1",
81-
"@perses-dev/scatter-chart-plugin": "^0.8.0",
82-
"@perses-dev/stat-chart-plugin": "^0.9.0",
83-
"@perses-dev/static-list-variable-plugin": "^0.5.1",
84-
"@perses-dev/status-history-chart-plugin": "^0.9.0",
85-
"@perses-dev/table-plugin": "^0.8.0",
86-
"@perses-dev/tempo-plugin": "^0.53.1",
87-
"@perses-dev/timeseries-chart-plugin": "^0.10.1",
88-
"@perses-dev/timeseries-table-plugin": "^0.9.0",
89-
"@perses-dev/trace-table-plugin": "^0.8.1",
90-
"@perses-dev/tracing-gantt-chart-plugin": "^0.9.2",
65+
"@perses-dev/components": "0.53.0-beta.0",
66+
"@perses-dev/core": "0.53.0-beta.0",
67+
"@perses-dev/dashboards": "0.53.0-beta.0",
68+
"@perses-dev/explore": "0.53.0-beta.0",
69+
"@perses-dev/plugin-system": "0.53.0-beta.0",
9170
"@prometheus-io/codemirror-promql": "^0.37.0",
9271
"@tanstack/react-query": "^4.36.1",
9372
"@types/ajv": "^0.0.5",

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

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import '../../../perses-config';
12
import { ThemeOptions, ThemeProvider } from '@mui/material';
23
import { ChartThemeColor, getThemeColors } from '@patternfly/react-charts/victory';
34
import {
@@ -22,6 +23,7 @@ import {
2223
} from '@perses-dev/dashboards';
2324
import {
2425
DataQueriesProvider,
26+
PluginLoader,
2527
PluginRegistry,
2628
TimeRangeProviderWithQueryParams,
2729
useInitialRefreshInterval,
@@ -46,7 +48,7 @@ import { QueryParams } from '../../query-params';
4648
import { StringParam, useQueryParam } from 'use-query-params';
4749
import { useTranslation } from 'react-i18next';
4850
import { LoadingBox } from '../../../components/console/console-shared/src/components/loading/LoadingBox';
49-
import { pluginLoader } from './persesPluginsLoader';
51+
import { remotePluginLoader } from '@perses-dev/plugin-system';
5052

5153
// Override eChart defaults with PatternFly colors.
5254
const patternflyBlue100 = chart_color_blue_100.value;
@@ -248,6 +250,19 @@ const mapPatterflyThemeToMUI = (theme: 'light' | 'dark'): ThemeOptions => {
248250
};
249251
};
250252

253+
export function useRemotePluginLoader(): PluginLoader {
254+
const pluginLoader = useMemo(
255+
() =>
256+
remotePluginLoader({
257+
baseURL: window.PERSES_PLUGIN_ASSETS_PATH,
258+
apiPrefix: window.PERSES_PLUGIN_ASSETS_PATH,
259+
}),
260+
[],
261+
);
262+
263+
return pluginLoader;
264+
}
265+
251266
export function PersesWrapper({ children, project }: PersesWrapperProps) {
252267
const { theme } = usePatternFlyTheme();
253268
const [dashboardName] = useQueryParam(QueryParams.Dashboard, StringParam);
@@ -268,6 +283,8 @@ export function PersesWrapper({ children, project }: PersesWrapperProps) {
268283
},
269284
});
270285

286+
const pluginLoader = useRemotePluginLoader();
287+
271288
return (
272289
<ThemeProvider theme={muiTheme}>
273290
<ChartsProvider chartsTheme={chartsTheme}>

‎web/src/components/dashboards/perses/persesPluginsLoader.tsx‎

Lines changed: 0 additions & 110 deletions
This file was deleted.

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,6 @@ import { useTranslation } from 'react-i18next';
5252
import { useSafeFetch } from '../console/utils/safe-fetch-hook';
5353

5454
import { PROMETHEUS_BASE_PATH } from '../utils';
55-
import { LabelNamesResponse } from '@perses-dev/prometheus-plugin';
5655
import {
5756
t_global_color_status_custom_default,
5857
t_global_color_status_danger_default,
@@ -326,6 +325,8 @@ export const PromQLExpressionInput: FC<PromQLExpressionInputProps> = ({
326325
onValueChange,
327326
onSelectionChange,
328327
}) => {
328+
type LabelNamesResponse = { data?: string[] };
329+
329330
const { t } = useTranslation(process.env.I18N_NAMESPACE);
330331
const { theme: pfTheme } = usePatternFlyTheme();
331332

‎web/src/index.d.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,17 @@ declare interface Window {
1010
prometheusBaseURL: string;
1111
prometheusTenancyBaseURL: string;
1212
};
13+
/**
14+
* Perses app configuration made available globally for plugin compatibility
15+
*/
16+
PERSES_APP_CONFIG: {
17+
api_prefix: string;
18+
};
19+
/**
20+
* Plugin assets path used by module federation for loading plugin assets
21+
* Set to the same value as the proxy base URL
22+
*/
23+
PERSES_PLUGIN_ASSETS_PATH: string;
1324
}
1425

1526
// TODO: Remove when upgrading to TypeScript 4.1.2+, which has a type for ListFormat and

‎web/src/perses-config.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/**
2+
* Perses Plugin Configuration
3+
*
4+
* This module configures global variables needed for Perses plugins to load assets
5+
* through the OpenShift Console monitoring plugin proxy. The proxy path is injected
6+
* at build time via webpack DefinePlugin.
7+
*/
8+
9+
// Build-time injected proxy URL for Perses plugins
10+
declare const PERSES_PROXY_BASE_URL: string;
11+
12+
// Configuration object for Perses app compatibility
13+
const PERSES_APP_CONFIG = {
14+
api_prefix: PERSES_PROXY_BASE_URL,
15+
};
16+
17+
// Set up window globals for plugin system compatibility
18+
// These are needed for plugins that use getPublicPath() in their Module Federation configs
19+
window.PERSES_APP_CONFIG = PERSES_APP_CONFIG;
20+
window.PERSES_PLUGIN_ASSETS_PATH = PERSES_PROXY_BASE_URL;

‎web/webpack.config.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,8 @@ const config: Configuration = {
103103
'process.env': {
104104
I18N_NAMESPACE: JSON.stringify('plugin__monitoring-plugin'),
105105
},
106+
// Build-time injection of proxy path for config module
107+
PERSES_PROXY_BASE_URL: JSON.stringify('/api/proxy/plugin/monitoring-console-plugin/perses'),
106108
}),
107109
],
108110
devtool: 'source-map',

0 commit comments

Comments
 (0)