IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Plugins: Fix plugins CDN not working when plugins are not in domain's root path (#63202)

Browse Source 
* Plugins CDN: Add support for different CDN root path

* Plugins CDN: Make frontendsettings return the correct CDN base path

* Update comments

* Fix version detection

* Undo frontend changes

* Fix system.js asset path construction

* fix(plugins): translate all plugin css asset paths loaded via cdn

* refactor(plugins): rename extractPluginNameVersionFromUrl and add comments

* Fix typo in comment

Co-authored-by: Will Browne <wbrowne@users.noreply.github.com>

* Hardcode CDN URL structure

/{id}/{version}/public/plugins/{id}/{assetPath} is not required anymore in the cdn url template config

---------

Co-authored-by: Jack Westbrook <jack.westbrook@gmail.com>
Co-authored-by: Will Browne <wbrowne@users.noreply.github.com>
This commit is contained in:
Giuseppe Guerra
2023-02-24 14:28:13 +01:00
committed by GitHub
parent b3c0e7e977
commit 966bcd3545
8 changed files with 153 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
public/app/features/plugins/systemjsPlugins/pluginCDN.test.ts
View File

@@ -1,6 +1,6 @@
import { config } from '@grafana/runtime';
import { translateForCDN, extractPluginNameVersionFromUrl } from './pluginCDN';
import { translateForCDN, extractPluginIdVersionFromUrl } from './pluginCDN';
describe('Plugin CDN', () => {
describe('translateForCDN', () => {
const load = {
@@ -88,17 +88,24 @@ describe('Plugin CDN', () => {
const translatedLoad = translateForCDN({ ...load, source });
expect(translatedLoad).toBe(expectedSource);
});
it('should replace css paths', () => {
const source = `(0,o.loadPluginCss)({dark:"plugins/grafana-worldmap-panel/css/worldmap.dark.css",light:"plugins/grafana-worldmap-panel/css/worldmap.light.css"}),`;
const expectedSource = `(0,o.loadPluginCss)({dark:"http://my-host.com/grafana-worldmap-panel/0.3.3/public/plugins/grafana-worldmap-panel/css/worldmap.dark.css",light:"http://my-host.com/grafana-worldmap-panel/0.3.3/public/plugins/grafana-worldmap-panel/css/worldmap.light.css"}),`;
const translatedLoad = translateForCDN({ ...load, source });
expect(translatedLoad).toBe(expectedSource);
});
});
describe('extractPluginNameVersionFromUrl', () => {
it('should extract the plugin name and version from a path', () => {
describe('extractPluginIdVersionFromUrl', () => {
it('should extract the plugin id and version from a path', () => {
const source =
'http://localhost:3000/public/plugin-cdn/grafana-worldmap-panel/0.3.3/public/plugins/grafana-worldmap-panel/module.js';
const expected = {
name: 'grafana-worldmap-panel',
id: 'grafana-worldmap-panel',
version: '0.3.3',
};
const expectedExtractedPluginDeets = extractPluginNameVersionFromUrl(source);
const expectedExtractedPluginDeets = extractPluginIdVersionFromUrl(source);
expect(expectedExtractedPluginDeets).toEqual(expected);
});
});

32
public/app/features/plugins/systemjsPlugins/pluginCDN.ts
View File

@@ -2,27 +2,45 @@ import { config } from '@grafana/runtime';
import type { SystemJSLoad } from './types';
export function extractPluginNameVersionFromUrl(address: string) {
/*
Given an "expected" address of `http://localhost/public/plugin-cdn/{pluginId}/{version}/public/plugins/{pluginId}`
this function will return the plugin id and version.
*/
export function extractPluginIdVersionFromUrl(address: string) {
const path = new URL(address).pathname;
const match = path.split('/');
return { name: match[3], version: match[4] };
return { id: match[3], version: match[4] };
}
/*
Locate: Overrides the location of the plugin resource
Plugins loaded via CDN fall into this plugin via the `plugin-cdn` keyword.
Systemjs first resolves to an origin on the local filesystem
(e.g. http://localhost/public/plugin-cdn/{pluginId}/{version}/public/plugins/{pluginId})
we then split this url and prefix with the CDN base url giving us the correct asset location.
*/
export function locateFromCDN(load: SystemJSLoad) {
const { address } = load;
const pluginPath = address.split('/public/plugin-cdn/');
return `${config.pluginsCDNBaseURL}/${pluginPath[1]}`;
}
/*
Translate: Returns the translated source from load.source, can also set load.metadata.sourceMap for full source maps support.
Plugins that require loading via a CDN need to have their asset paths translated to point to the configured CDN.
e.g. public/plugins/my-plugin/data/ -> http://my-host.com/my-plugin/0.3.3/public/plugins/my-plugin/data/
*/
export function translateForCDN(load: SystemJSLoad) {
const { name, version } = extractPluginNameVersionFromUrl(load.name);
const baseAddress = `${config.pluginsCDNBaseURL}/${name}/${version}`;
const { id, version } = extractPluginIdVersionFromUrl(load.name);
const baseAddress = `${config.pluginsCDNBaseURL}/${id}/${version}`;
// handle basic asset paths that include public/plugins
load.source = load.source.replace(/(\/?)(public\/plugins)/g, `${baseAddress}/$2`);
load.source = load.source.replace(/(["|'])(plugins\/.+.css)(["|'])/g, `$1${baseAddress}/public/$2$3`);
// handle custom plugin css (light and dark themes)
load.source = load.source.replace(/(["|'])(plugins\/.+?.css)(["|'])/g, `$1${baseAddress}/public/$2$3`);
// handle external sourcemap links
load.source = load.source.replace(
/(\/\/#\ssourceMappingURL=)(.+)\.map/g,
`$1${baseAddress}/public/plugins/${name}/$2.map`
`$1${baseAddress}/public/plugins/${id}/$2.map`
);
return load.source;