@grafana/runtime: expose config and loadPluginCss (#17655)

* move config to grafana runtime

* set defaults

* defaults in constructor

* use @types/systemjs

* rename Settings to GrafanaBootConfig

packages/grafana-runtime/package.json

@@ -18,6 +18,7 @@
   "license": "Apache-2.0",
   "dependencies": {},
   "devDependencies": {
+    "@types/systemjs": "^0.20.6",
     "awesome-typescript-loader": "^5.2.1",
     "lodash": "^4.17.10",
     "pretty-format": "^24.5.0",

packages/grafana-runtime/src/config.ts

@@ -0,0 +1,78 @@
+import extend from 'lodash/extend';
+import { GrafanaTheme, getTheme, GrafanaThemeType, PanelPluginMeta, DataSourceInstanceSettings } from '@grafana/ui';
+
+export interface BuildInfo {
+  version: string;
+  commit: string;
+  isEnterprise: boolean;
+  env: string;
+  latestVersion: string;
+  hasUpdate: boolean;
+}
+
+export class GrafanaBootConfig {
+  datasources: { [str: string]: DataSourceInstanceSettings } = {};
+  panels: { [key: string]: PanelPluginMeta } = {};
+  appSubUrl = '';
+  windowTitlePrefix = '';
+  buildInfo: BuildInfo = {} as BuildInfo;
+  newPanelTitle = '';
+  bootData: any;
+  externalUserMngLinkUrl = '';
+  externalUserMngLinkName = '';
+  externalUserMngInfo = '';
+  allowOrgCreate = false;
+  disableLoginForm = false;
+  defaultDatasource = '';
+  alertingEnabled = false;
+  alertingErrorOrTimeout = '';
+  alertingNoDataOrNullValues = '';
+  authProxyEnabled = false;
+  exploreEnabled = false;
+  ldapEnabled = false;
+  oauth: any;
+  disableUserSignUp = false;
+  loginHint: any;
+  passwordHint: any;
+  loginError: any;
+  viewersCanEdit = false;
+  editorsCanAdmin = false;
+  disableSanitizeHtml = false;
+  theme: GrafanaTheme;
+  pluginsToPreload: string[] = [];
+
+  constructor(options: GrafanaBootConfig) {
+    this.theme = options.bootData.user.lightTheme ? getTheme(GrafanaThemeType.Light) : getTheme(GrafanaThemeType.Dark);
+
+    const defaults = {
+      datasources: {},
+      windowTitlePrefix: 'Grafana - ',
+      panels: {},
+      newPanelTitle: 'Panel Title',
+      playlist_timespan: '1m',
+      unsaved_changes_warning: true,
+      appSubUrl: '',
+      buildInfo: {
+        version: 'v1.0',
+        commit: '1',
+        env: 'production',
+        isEnterprise: false,
+      },
+      viewersCanEdit: false,
+      editorsCanAdmin: false,
+      disableSanitizeHtml: false,
+    };
+
+    extend(this, defaults, options);
+  }
+}
+
+const bootData = (window as any).grafanaBootData || {
+  settings: {},
+  user: {},
+};
+
+const options = bootData.settings;
+options.bootData = bootData;
+
+export const config = new GrafanaBootConfig(options);

packages/grafana-runtime/src/index.ts

@@ -1 +1,3 @@
 export * from './services';
+export * from './config';
+export { loadPluginCss } from './utils/plugin';

packages/grafana-runtime/src/utils/plugin.ts

@@ -0,0 +1,17 @@
+import { config } from '../config';
+
+/* tslint:disable:import-blacklist */
+import System from 'systemjs';
+
+export interface PluginCssOptions {
+  light: string;
+  dark: string;
+}
+
+export function loadPluginCss(options: PluginCssOptions) {
+  if (config.bootData.user.lightTheme) {
+    System.import(options.light + '!css');
+  } else {
+    System.import(options.dark + '!css');
+  }
+}

public/app/core/config.ts

@@ -1,79 +1,5 @@
-import _ from 'lodash';
-import { GrafanaTheme, getTheme, GrafanaThemeType, PanelPluginMeta, DataSourceInstanceSettings } from '@grafana/ui';
+import { config, GrafanaBootConfig } from '@grafana/runtime';
 
-export interface BuildInfo {
-  version: string;
-  commit: string;
-  isEnterprise: boolean;
-  env: string;
-  latestVersion: string;
-  hasUpdate: boolean;
-}
-
-export class Settings {
-  datasources: { [str: string]: DataSourceInstanceSettings };
-  panels: { [key: string]: PanelPluginMeta };
-  appSubUrl: string;
-  windowTitlePrefix: string;
-  buildInfo: BuildInfo;
-  newPanelTitle: string;
-  bootData: any;
-  externalUserMngLinkUrl: string;
-  externalUserMngLinkName: string;
-  externalUserMngInfo: string;
-  allowOrgCreate: boolean;
-  disableLoginForm: boolean;
-  defaultDatasource: string;
-  alertingEnabled: boolean;
-  alertingErrorOrTimeout: string;
-  alertingNoDataOrNullValues: string;
-  authProxyEnabled: boolean;
-  exploreEnabled: boolean;
-  ldapEnabled: boolean;
-  oauth: any;
-  disableUserSignUp: boolean;
-  loginHint: any;
-  passwordHint: any;
-  loginError: any;
-  viewersCanEdit: boolean;
-  editorsCanAdmin: boolean;
-  disableSanitizeHtml: boolean;
-  theme: GrafanaTheme;
-  pluginsToPreload: string[];
-
-  constructor(options: Settings) {
-    this.theme = options.bootData.user.lightTheme ? getTheme(GrafanaThemeType.Light) : getTheme(GrafanaThemeType.Dark);
-
-    const defaults = {
-      datasources: {},
-      windowTitlePrefix: 'Grafana - ',
-      panels: {},
-      newPanelTitle: 'Panel Title',
-      playlist_timespan: '1m',
-      unsaved_changes_warning: true,
-      appSubUrl: '',
-      buildInfo: {
-        version: 'v1.0',
-        commit: '1',
-        env: 'production',
-        isEnterprise: false,
-      },
-      viewersCanEdit: false,
-      editorsCanAdmin: false,
-      disableSanitizeHtml: false,
-    };
-
-    _.extend(this, defaults, options);
-  }
-}
-
-const bootData = (window as any).grafanaBootData || {
-  settings: {},
-  user: {},
-};
-
-const options = bootData.settings;
-options.bootData = bootData;
-
-export const config = new Settings(options);
+// Legacy binding paths
+export { config, GrafanaBootConfig as Settings };
 export default config;

public/app/core/utils/ConfigProvider.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import config, { Settings } from 'app/core/config';
+import { config, GrafanaBootConfig } from '@grafana/runtime';
 import { GrafanaThemeType, ThemeContext, getTheme } from '@grafana/ui';
 
-export const ConfigContext = React.createContext<Settings>(config);
+export const ConfigContext = React.createContext<GrafanaBootConfig>(config);
 export const ConfigConsumer = ConfigContext.Consumer;
 
 export const provideConfig = (component: React.ComponentType<any>) => {

public/app/features/plugins/plugin_loader.ts

@@ -31,6 +31,7 @@ import * as d3 from 'd3';
 import * as grafanaData from '@grafana/data';
 import * as grafanaUI from '@grafana/ui';
 import * as grafanaRuntime from '@grafana/runtime';
+export { loadPluginCss } from '@grafana/runtime';
 
 // rxjs
 import { Observable, Subject } from 'rxjs';
@@ -230,11 +231,3 @@ export function importPanelPlugin(id: string): Promise<PanelPlugin> {
       return getPanelPluginNotFound(id);
     });
 }
-
-export function loadPluginCss(options) {
-  if (config.bootData.user.lightTheme) {
-    System.import(options.light + '!css');
-  } else {
-    System.import(options.dark + '!css');
-  }
-}

public/app/plugins/sdk.ts

@@ -2,6 +2,6 @@ import { PanelCtrl } from 'app/features/panel/panel_ctrl';
 import { MetricsPanelCtrl } from 'app/features/panel/metrics_panel_ctrl';
 import { QueryCtrl } from 'app/features/panel/query_ctrl';
 import { alertTab } from 'app/features/alerting/AlertTabCtrl';
-import { loadPluginCss } from 'app/features/plugins/plugin_loader';
+import { loadPluginCss } from '@grafana/runtime';
 
 export { PanelCtrl, MetricsPanelCtrl, QueryCtrl, alertTab, loadPluginCss };