mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Plugins: Bump SystemJS to 6.14.2 (#70068)
* chore(plugins): bump systemjs to latest version * refactor(plugins): switch runtime over to use latest systemjs, add typings * refactor(plugins): use latest systemjs APIs for runtime dependency resolution * refactor(plugins): return valid urls from backend for latest systemjs import to work * revert(plugins): remove cfg from assetpath in favour of relative paths * fix(plugins): useDefault for systemjs deps to solve undefined errors * feat(plugins): add basic support for loading plugins via CDN * fix(plugins): load nested plugins with latest systemjs * feat(plugins): add back ability to transform plugin src for cdns * feat(plugins): get caching for module.js working, clean up * refactor(plugin_loader): create buildImportMap fn and more clean up * refactor(angularapp): use buildImportMap for dependencies and clean up * test(plugin_loader): fix failing test due to systemjs update * test(jest): mock systemjs amd extra in tests to prevent it breaking tests * chore(plugins): remove systemjs module-types extra, already included with system * fix(plugins): update key for invalidating cached plugins * fix: move systemjs amd define to another global so monaco can load * refactor(plugins): clean up cache buster and tests * chore(plugins): remove debug * refactor(plugins): move systemjs define to keep global cleaner * fix(plugins): set useDefault so system modules lodash references dont fail * feat(plugins): hook systemjs onload so stylesheets are applied to the dom * refactor(plugins): wrap amd formatted plugins in iife to prevent define collision * feat(plugins): support system module format for legacy plugins * test(plugincachebuster): update tests to match latest implementation * test(plugins-loader): fix up tests post module property change * fix test * Update pkg/plugins/manager/loader/assetpath/assetpath.go Co-authored-by: Will Browne <wbrowne@users.noreply.github.com> * chore(plugin_loader): remove stray import from merge conflict * Revert "Update pkg/plugins/manager/loader/assetpath/assetpath.go" This reverts commit 0df57d1cf20f49c22c93369001c70aae46a97c42. * fix(plugin_loader): set use default for shared plugin dependencies * refactor(plugins): use leading slash for Module and BaseUrl * fix(plugins): fix resolve appending extension to cache query param * refactor(plugins): align baseurl and module paths * refactor(plugins): update builtInPlugins keys to match naming convention * refactor(plugins): minor loader clean up, fix up types * test(plugins): fix failing tests * refactor(plugins): rename cache buster systemjs plugin to cache * refactor(plugins): separate plugin_loader into smaller files * chore(plugins): clean up plugin_loader types * chore(plugin_sandbox): fix typescript error * chore(npm): remove unplug debug and pin systemjs to 6.14.1 * refactor(plugins-cdn): update loaders to use absolute module url from backend * fix(plugins): escape period in systemjs module regex * chore(plugins): delete redundant systemjs plugins * refactor(plugin_loader): move hooks into own file, add types * test(plugins): add tests for systemjs loader hooks * chore(plugins): rename systemjshooks file * chore(plugins): remove redundant systemjs cdn backend code * fix(plugins): handle loading with config.appSubUrl * chore(plugins): delete redundant plugin-cdn angular code * test(plugins): fix failing systemjs test missing pluginsCDNBaseUrl * refactor(plugins): backend provides base and module properties with AppSubUrl * fix(plugins): consider AppSubUrl for plugin logos * fix(plugins): use isHostedOnCDN util when checking for cdn hosted plugins * add new appSubURL field to config * refactor relative URL func * fix path for core app * refactor asset path input * fix(plugins): catch errors in loadPluginCss * feat(plugins-cdn): selectively transform sourceMapURL * re-add deleted test case * chore(plugins): bump to latest systemjs@6.14.2 * feat(plugins): add systemjs-cjs-extra for loading commonjs plugins --------- Co-authored-by: Will Browne <will.browne@grafana.com> Co-authored-by: Will Browne <wbrowne@users.noreply.github.com>
This commit is contained in:
Jack Westbrook
GitHub
@@ -1,19 +1,12 @@
|
||||
import { config } from '@grafana/runtime';
|
||||
|
||||
import { extractPluginIdVersionFromUrl, transformPluginSourceForCDN } from './utils';
|
||||
import { transformPluginSourceForCDN } from './utils';
|
||||
|
||||
describe('Plugin CDN Utils', () => {
|
||||
describe('transformPluginSourceForCdn', () => {
|
||||
// const localUrl =
|
||||
// 'http://localhost:3000/public/plugin-cdn/grafana-worldmap-panel/0.3.3/grafana-worldmap-panel/module.js';
|
||||
const pluginId = 'grafana-worldmap-panel';
|
||||
const version = '0.3.3';
|
||||
config.pluginsCDNBaseURL = 'http://my-host.com';
|
||||
const url = 'http://my-host.com/grafana-worldmap-panel/0.3.3/public/plugins/grafana-worldmap-panel/module.js';
|
||||
|
||||
describe('transformPluginSourceForCdn', () => {
|
||||
it('should update the default local path to use the CDN path', () => {
|
||||
const translatedLoad = transformPluginSourceForCDN({
|
||||
pluginId,
|
||||
version,
|
||||
url,
|
||||
source: 'public/plugins/grafana-worldmap-panel/template.html',
|
||||
});
|
||||
expect(translatedLoad).toBe(
|
||||
@@ -30,7 +23,7 @@ describe('Plugin CDN Utils', () => {
|
||||
const a = "http://my-host.com/grafana-worldmap-panel/0.3.3/public/plugins/grafana-worldmap-panel/template.html";
|
||||
const img = "<img src='http://my-host.com/grafana-worldmap-panel/0.3.3/public/plugins/grafana-worldmap-panel/data/myimage.jpg'>";
|
||||
`;
|
||||
const translatedLoad = transformPluginSourceForCDN({ pluginId, version, source });
|
||||
const translatedLoad = transformPluginSourceForCDN({ url, source });
|
||||
expect(translatedLoad).toBe(expectedSource);
|
||||
});
|
||||
|
||||
@@ -43,7 +36,7 @@ describe('Plugin CDN Utils', () => {
|
||||
const a = "http://my-host.com/grafana-worldmap-panel/0.3.3/public/plugins/grafana-worldmap-panel/template.html";
|
||||
const img = "<img src='http://my-host.com/grafana-worldmap-panel/0.3.3/public/plugins/grafana-worldmap-panel/data/myimage.jpg'>";
|
||||
`;
|
||||
const translatedLoad = transformPluginSourceForCDN({ pluginId, version, source });
|
||||
const translatedLoad = transformPluginSourceForCDN({ url, source });
|
||||
expect(translatedLoad).toBe(expectedSource);
|
||||
});
|
||||
|
||||
@@ -62,12 +55,12 @@ describe('Plugin CDN Utils', () => {
|
||||
".json"
|
||||
)
|
||||
`;
|
||||
const translatedLoad = transformPluginSourceForCDN({ pluginId, version, source });
|
||||
const translatedLoad = transformPluginSourceForCDN({ url, source });
|
||||
|
||||
expect(translatedLoad).toBe(expectedSource);
|
||||
});
|
||||
|
||||
it('should replace sourcemap locations', () => {
|
||||
it('should only replace sourcemap locations if transformSourceMapUrl is true', () => {
|
||||
const source = `
|
||||
Zn(t,e)},t.Rectangle=ui,t.rectangle=function(t,e){return new ui(t,e)},t.Map=He,t.map=function(t,e){return new He(t,e)}}(e)}])});
|
||||
//# sourceMappingURL=module.js.map
|
||||
@@ -76,29 +69,21 @@ describe('Plugin CDN Utils', () => {
|
||||
Zn(t,e)},t.Rectangle=ui,t.rectangle=function(t,e){return new ui(t,e)},t.Map=He,t.map=function(t,e){return new He(t,e)}}(e)}])});
|
||||
//# sourceMappingURL=http://my-host.com/grafana-worldmap-panel/0.3.3/public/plugins/grafana-worldmap-panel/module.js.map
|
||||
`;
|
||||
const translatedLoad = transformPluginSourceForCDN({ pluginId, version, source });
|
||||
const translatedLoad = transformPluginSourceForCDN({ url, source });
|
||||
|
||||
expect(translatedLoad).toBe(expectedSource);
|
||||
expect(translatedLoad).toBe(source);
|
||||
|
||||
const translatedLoadWithSourceMapUrl = transformPluginSourceForCDN({ url, source, transformSourceMapURL: true });
|
||||
|
||||
expect(translatedLoadWithSourceMapUrl).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 = transformPluginSourceForCDN({ pluginId, version, source });
|
||||
const translatedLoad = transformPluginSourceForCDN({ url, source });
|
||||
|
||||
expect(translatedLoad).toBe(expectedSource);
|
||||
});
|
||||
});
|
||||
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 = {
|
||||
id: 'grafana-worldmap-panel',
|
||||
version: '0.3.3',
|
||||
};
|
||||
const expectedExtractedPluginDeets = extractPluginIdVersionFromUrl(source);
|
||||
expect(expectedExtractedPluginDeets).toEqual(expected);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,45 +1,32 @@
|
||||
import { config } from '@grafana/runtime';
|
||||
|
||||
import { PLUGIN_CDN_URL_KEY } from '../constants';
|
||||
/*
|
||||
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 { id: match[3], version: match[4] };
|
||||
}
|
||||
|
||||
/*
|
||||
Transforms plugin's source for CDNs loa.
|
||||
Transforms CDN hosted plugin source code.
|
||||
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 transformPluginSourceForCDN({
|
||||
pluginId,
|
||||
version,
|
||||
url,
|
||||
source,
|
||||
transformSourceMapURL = false,
|
||||
}: {
|
||||
pluginId: string;
|
||||
version: string;
|
||||
url: string;
|
||||
source: string;
|
||||
transformSourceMapURL?: boolean;
|
||||
}): string {
|
||||
const baseAddress = `${config.pluginsCDNBaseURL}/${pluginId}/${version}`;
|
||||
const splitUrl = url.split('/public/plugins/');
|
||||
const baseAddress = splitUrl[0];
|
||||
const pluginId = splitUrl[1].split('/')[0];
|
||||
|
||||
// handle basic asset paths that include public/plugins
|
||||
let newSource = source;
|
||||
newSource = source.replace(/(\/?)(public\/plugins)/g, `${baseAddress}/$2`);
|
||||
// handle custom plugin css (light and dark themes)
|
||||
newSource = newSource.replace(/(\/?)(public\/plugins)/g, `${baseAddress}/$2`);
|
||||
newSource = newSource.replace(/(["|'])(plugins\/.+?.css)(["|'])/g, `$1${baseAddress}/public/$2$3`);
|
||||
// handle external sourcemap links
|
||||
newSource = newSource.replace(
|
||||
/(\/\/#\ssourceMappingURL=)(.+)\.map/g,
|
||||
`$1${baseAddress}/public/plugins/${pluginId}/$2.map`
|
||||
);
|
||||
|
||||
if (transformSourceMapURL) {
|
||||
newSource = newSource.replace(
|
||||
/(\/\/#\ssourceMappingURL=)(.+)\.map/g,
|
||||
`$1${baseAddress}/public/plugins/${pluginId}/$2.map`
|
||||
);
|
||||
}
|
||||
|
||||
return newSource;
|
||||
}
|
||||
|
||||
export function getPluginCdnResourceUrl(localPath: string): string {
|
||||
const pluginPath = localPath.split(`/public/${PLUGIN_CDN_URL_KEY}/`);
|
||||
return `${config.pluginsCDNBaseURL}/${pluginPath[1]}`;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user