confirm grafana initialization (#107)

* window event to confirm initialization

* grafana start up status events

Author: gurinder39

public/app/fn_app.ts

@@ -1,13 +1,14 @@
+import 'symbol-observable';
 import 'core-js';
 import 'regenerator-runtime/runtime';
-import 'symbol-observable';
 
-import 'file-saver';
-import 'jquery';
 import 'whatwg-fetch'; // fetch polyfill needed for PhantomJs rendering
 import './polyfills/old-mediaquerylist'; // Safari < 14 does not have mql.addEventListener()
+import 'file-saver';
+import 'jquery';
 
 import 'app/features/all';
+
 import _ from 'lodash'; // eslint-disable-line lodash/import-scope
 
 import {
@@ -28,19 +29,28 @@ import {
   setEchoSrv,
   setLocationSrv,
   setQueryRunnerFactory,
+  setRunRequest,
+  setPluginImportUtils,
+  setPluginExtensionGetter,
+  setAppEvents,
+  type GetPluginExtensions,
 } from '@grafana/runtime';
 import { setPanelDataErrorView } from '@grafana/runtime/src/components/PanelDataErrorView';
 import { setPanelRenderer } from '@grafana/runtime/src/components/PanelRenderer';
+import { setPluginPage } from '@grafana/runtime/src/components/PluginPage';
 import { getScrollbarWidth } from '@grafana/ui';
 import config, { Settings } from 'app/core/config';
 import { arrayMove } from 'app/core/utils/arrayMove';
 import { getStandardTransformers } from 'app/features/transformers/standardTransformers';
 
 import getDefaultMonacoLanguages from '../lib/monaco-languages';
 
+import appEvents from './core/app_events';
 import { AppChromeService } from './core/components/AppChrome/AppChromeService';
 import { getAllOptionEditors, getAllStandardFieldConfigs } from './core/components/OptionsUI/registry';
+import { PluginPage } from './core/components/Page/PluginPage';
 import { GrafanaContextType } from './core/context/GrafanaContext';
+import { initializeI18n } from './core/internationalization';
 import { interceptLinkClicks } from './core/navigation/patch/interceptLinkClicks';
 import { ModalManager } from './core/services/ModalManager';
 import { backendSrv } from './core/services/backend_srv';
@@ -49,18 +59,25 @@ import { Echo } from './core/services/echo/Echo';
 import { reportPerformance } from './core/services/echo/EchoSrv';
 import { PerformanceBackend } from './core/services/echo/backends/PerformanceBackend';
 import { ApplicationInsightsBackend } from './core/services/echo/backends/analytics/ApplicationInsightsBackend';
-import { GAEchoBackend } from './core/services/echo/backends/analytics/GABackend';
+// import { GA4EchoBackend } from './core/services/echo/backends/analytics/GA4Backend';
+// import { GAEchoBackend } from './core/services/echo/backends/analytics/GABackend';
 import { RudderstackBackend } from './core/services/echo/backends/analytics/RudderstackBackend';
 import { GrafanaJavascriptAgentBackend } from './core/services/echo/backends/grafana-javascript-agent/GrafanaJavascriptAgentBackend';
-import { SentryEchoBackend } from './core/services/echo/backends/sentry/SentryBackend';
-import { initializeI18n } from './core/internationalization';
+import { KeybindingSrv } from './core/services/keybindingSrv';
+import { startMeasure, stopMeasure } from './core/utils/metrics';
 import { initDevFeatures } from './dev';
 import { getTimeSrv } from './features/dashboard/services/TimeSrv';
+// import { initGrafanaLive } from './features/live';
 import { PanelDataErrorView } from './features/panel/components/PanelDataErrorView';
 import { PanelRenderer } from './features/panel/components/PanelRenderer';
 import { DatasourceSrv } from './features/plugins/datasource_srv';
+import { createPluginExtensionRegistry } from './features/plugins/extensions/createPluginExtensionRegistry';
+import { getCoreExtensionConfigurations } from './features/plugins/extensions/getCoreExtensionConfigurations';
+import { getPluginExtensions } from './features/plugins/extensions/getPluginExtensions';
+import { importPanelPlugin, syncGetPanelPlugin } from './features/plugins/importPanelPlugin';
 import { preloadPlugins } from './features/plugins/pluginPreloader';
 import { QueryRunner } from './features/query/state/QueryRunner';
+import { runRequest } from './features/query/state/runRequest';
 import { initWindowRuntime } from './features/runtime/init';
 import { variableAdapters } from './features/variables/adapters';
 import { createAdHocVariableAdapter } from './features/variables/adhoc/adapter';
@@ -73,7 +90,7 @@ import { setVariableQueryRunner, VariableQueryRunner } from './features/variable
 import { createQueryVariableAdapter } from './features/variables/query/adapter';
 import { createSystemVariableAdapter } from './features/variables/system/adapter';
 import { createTextBoxVariableAdapter } from './features/variables/textbox/adapter';
-import { ConfiguredStore, configureStore } from './store/configureStore';
+import { configureStore } from './store/configureStore';
 
 // add move to lodash for backward compatabilty with plugins
 // @ts-ignore
@@ -89,16 +106,42 @@ if (process.env.NODE_ENV === 'development') {
   initDevFeatures();
 }
 
+export declare type FNGrafanaStartupState = {
+  isLoading: boolean;
+  isError: boolean;
+  error?: unknown;
+  isIdeal: boolean;
+};
+
+export const DefaultGrafanaStartupState: FNGrafanaStartupState = {
+  isLoading: false,
+  isError: false,
+  isIdeal: true,
+};
+
+const dispatchFnEvent = (info: FNGrafanaStartupState = DefaultGrafanaStartupState, ek = 'grafana-startup') => {
+  window.dispatchEvent(
+    new CustomEvent(ek, {
+      detail: info,
+    })
+  );
+};
+
 export class GrafanaApp {
   context!: GrafanaContextType;
-  readonly store: ConfiguredStore;
-
-  constructor() {
-    this.store = configureStore();
-  }
 
   async init() {
     try {
+      dispatchFnEvent({
+        isIdeal: false,
+        isLoading: true,
+        isError: false,
+      });
+      // Let iframe container know grafana has started loading
+      parent.postMessage('GrafanaAppInit', '*');
+
+      const initI18nPromise = initializeI18n(config.bootData.user.language);
+
       backendSrv.setGrafanaPrefix(true);
       setBackendSrv(backendSrv);
       const settings: Settings = await backendSrv.get('/api/frontend/settings');
@@ -107,18 +150,28 @@ export class GrafanaApp {
       config.datasources = settings.datasources;
       config.defaultDatasource = settings.defaultDatasource;
 
-      initializeI18n(config.bootData.user.locale);
-
       initEchoSrv();
+      // This needs to be done after the `initEchoSrv` since it is being used under the hood.
+      startMeasure('frontend_app_init');
       addClassIfNoOverlayScrollbar();
       setLocale(config.bootData.user.locale);
       setWeekStart(config.bootData.user.weekStart);
       setPanelRenderer(PanelRenderer);
+      setPluginPage(PluginPage);
       setPanelDataErrorView(PanelDataErrorView);
       setLocationSrv(locationService);
       setTimeZoneResolver(() => config.bootData.user.timezone);
+      // initGrafanaLive();
+
+      // Expose the app-wide eventbus
+      setAppEvents(appEvents);
+
+      // We must wait for translations to load because some preloaded store state requires translating
+      await initI18nPromise;
+
       // Important that extension reducers are initialized before store
       addExtensionReducers();
+      configureStore();
       initExtensions();
 
       standardEditorsRegistry.setInit(getAllOptionEditors);
@@ -139,6 +192,15 @@ export class GrafanaApp {
       setQueryRunnerFactory(() => new QueryRunner());
       setVariableQueryRunner(new VariableQueryRunner());
 
+      // Provide runRequest implementation to packages, @grafana/scenes in particular
+      setRunRequest(runRequest);
+
+      // Privide plugin import utils to packages, @grafana/scenes in particular
+      setPluginImportUtils({
+        importPanelPlugin,
+        getPanelPluginFromCache: syncGetPanelPlugin,
+      });
+
       locationUtil.initialize({
         config,
         getTimeRangeForUrl: getTimeSrv().timeRangeForUrl,
@@ -159,20 +221,52 @@ export class GrafanaApp {
       modalManager.init();
 
       // Preload selected app plugins
-      await preloadPlugins(config.pluginsToPreload);
+      const preloadResults = await preloadPlugins(config.apps);
+
+      // Create extension registry out of preloaded plugins and core extensions
+      const extensionRegistry = createPluginExtensionRegistry([
+        { pluginId: 'grafana', extensionConfigs: getCoreExtensionConfigurations() },
+        ...preloadResults,
+      ]);
+
+      // Expose the getPluginExtension function via grafana-runtime
+      const pluginExtensionGetter: GetPluginExtensions = (options) =>
+        getPluginExtensions({ ...options, registry: extensionRegistry });
+
+      setPluginExtensionGetter(pluginExtensionGetter);
+
+      // initialize chrome service
+      const queryParams = locationService.getSearchObject();
+      const chromeService = new AppChromeService();
+      const keybindingsService = new KeybindingSrv(locationService, chromeService);
+
+      // Read initial kiosk mode from url at app startup
+      chromeService.setKioskModeFromUrl(queryParams.kiosk);
 
       this.context = {
         backend: backendSrv,
         location: locationService,
-        chrome: new AppChromeService(),
+        chrome: chromeService,
+        keybindings: keybindingsService,
         config,
       };
+
+      dispatchFnEvent({
+        isLoading: false,
+        isError: false,
+        isIdeal: false,
+      });
     } catch (error) {
+      dispatchFnEvent({
+        isLoading: false,
+        isError: true,
+        error,
+        isIdeal: false,
+      });
       console.error('Failed to start Grafana', error);
-
-      if (window.__grafana_load_failed) {
-        window.__grafana_load_failed();
-      }
+      window.__grafana_load_failed();
+    } finally {
+      stopMeasure('frontend_app_init');
     }
   }
 }
@@ -212,15 +306,6 @@ function initEchoSrv() {
     registerEchoBackend(new PerformanceBackend({}));
   }
 
-  if (config.sentry.enabled) {
-    registerEchoBackend(
-      new SentryEchoBackend({
-        ...config.sentry,
-        user: config.bootData.user,
-        buildInfo: config.buildInfo,
-      })
-    );
-  }
   if (config.grafanaJavascriptAgent.enabled) {
     registerEchoBackend(
       new GrafanaJavascriptAgentBackend({
@@ -238,13 +323,22 @@ function initEchoSrv() {
     );
   }
 
-  if (config.googleAnalyticsId) {
-    registerEchoBackend(
-      new GAEchoBackend({
-        googleAnalyticsId: config.googleAnalyticsId,
-      })
-    );
-  }
+  // if (config.googleAnalyticsId) {
+  //   registerEchoBackend(
+  //     new GAEchoBackend({
+  //       googleAnalyticsId: config.googleAnalyticsId,
+  //     })
+  //   );
+  // }
+
+  // if (config.googleAnalytics4Id) {
+  //   registerEchoBackend(
+  //     new GA4EchoBackend({
+  //       googleAnalyticsId: config.googleAnalytics4Id,
+  //       googleAnalytics4SendManualPageViews: config.googleAnalytics4SendManualPageViews,
+  //     })
+  //   );
+  // }
 
   if (config.rudderstackWriteKey && config.rudderstackDataPlaneUrl) {
     registerEchoBackend(
@@ -254,6 +348,7 @@ function initEchoSrv() {
         user: config.bootData.user,
         sdkUrl: config.rudderstackSdkUrl,
         configUrl: config.rudderstackConfigUrl,
+        buildInfo: config.buildInfo,
       })
     );
   }