Angular: Move coreModule to app/angular and isolate angular usage more (#41433)

* moving coreModule to app/angular and isolating it more

* fixed ts issue

public/app/angular/AngularApp.ts

@@ -5,7 +5,7 @@ import 'angular-bindonce';
 import 'vendor/bootstrap/bootstrap';
 import 'vendor/angular-other/angular-strap';
 import { config } from 'app/core/config';
-import coreModule, { angularModules } from 'app/core/core_module';
+import coreModule, { angularModules } from 'app/angular/core_module';
 import { DashboardLoaderSrv } from 'app/features/dashboard/services/DashboardLoaderSrv';
 import { registerAngularDirectives } from './angular_wrappers';
 import { initAngularRoutingBridge } from './bridgeReactAngularRouting';
@@ -13,6 +13,7 @@ import { monkeyPatchInjectorWithPreAssignedBindings } from './injectorMonkeyPatc
 import { extend } from 'lodash';
 import { getTimeSrv } from 'app/features/dashboard/services/TimeSrv';
 import { getTemplateSrv } from '@grafana/runtime';
+import { registerComponents } from './registerComponents';
 
 export class AngularApp {
   ngModuleDependencies: any[];
@@ -89,6 +90,7 @@ export class AngularApp {
     coreModule.factory('templateSrv', () => getTemplateSrv());
 
     registerAngularDirectives();
+    registerComponents();
     initAngularRoutingBridge();
   }
 

public/app/angular/angular_wrappers.ts

@@ -1,4 +1,4 @@
-import { react2AngularDirective } from 'app/core/utils/react2angular';
+import { react2AngularDirective } from 'app/angular/react2angular';
 import { QueryEditor as CloudMonitoringQueryEditor } from 'app/plugins/datasource/cloud-monitoring/components/QueryEditor';
 import { AnnotationQueryEditor as CloudMonitoringAnnotationQueryEditor } from 'app/plugins/datasource/cloud-monitoring/components/AnnotationQueryEditor';
 import { AnnotationQueryEditor as CloudWatchAnnotationQueryEditor } from 'app/plugins/datasource/cloudwatch/components/AnnotationQueryEditor';

public/app/angular/array_join.ts

@@ -1,5 +1,5 @@
 import { isArray } from 'lodash';
-import coreModule from '../core/core_module';
+import coreModule from './core_module';
 
 export function arrayJoin() {
   'use strict';

public/app/angular/autofill_event_fix.ts

@@ -1,4 +1,4 @@
-import coreModule from '../core/core_module';
+import coreModule from './core_module';
 
 /** @ngInject */
 export function autofillEventFix($compile: any) {

public/app/angular/bridgeReactAngularRouting.ts

@@ -1,4 +1,4 @@
-import { coreModule } from '../core/core_module';
+import { coreModule } from './core_module';
 import { RouteProvider } from '../core/navigation/patch/RouteProvider';
 import { RouteParamsProvider } from '../core/navigation/patch/RouteParamsProvider';
 import { ILocationService } from 'angular';

public/app/angular/components/code_editor/code_editor.ts

@@ -28,7 +28,7 @@
  * Ctrl-Enter (Command-Enter): run onChange() function
  */
 
-import coreModule from 'app/core/core_module';
+import coreModule from 'app/angular/core_module';
 import config from 'app/core/config';
 
 const DEFAULT_THEME_DARK = 'ace/theme/grafana-dark';

public/app/angular/components/form_dropdown/form_dropdown.ts

@@ -1,7 +1,7 @@
 import { debounce, find, indexOf, map, isObject, escape, unescape } from 'lodash';
-import coreModule from '../../../core/core_module';
+import coreModule from '../../core_module';
 import { ISCEService } from 'angular';
-import { promiseToDigest } from 'app/core/utils/promiseToDigest';
+import { promiseToDigest } from '../../promiseToDigest';
 
 function typeaheadMatcher(this: any, item: string) {
   let str = this.query;

public/app/angular/components/info_popover.ts

@@ -1,5 +1,5 @@
 import { each } from 'lodash';
-import coreModule from 'app/core/core_module';
+import coreModule from 'app/angular/core_module';
 // @ts-ignore
 import Drop from 'tether-drop';
 

public/app/angular/components/jsontree.ts

@@ -1,4 +1,4 @@
-import coreModule from 'app/core/core_module';
+import coreModule from 'app/angular/core_module';
 import { JsonExplorer } from '@grafana/ui';
 
 coreModule.directive('jsonTree', [

public/app/angular/components/query_part_editor.ts

@@ -1,7 +1,7 @@
 import { debounce, each, map, partial, escape, unescape } from 'lodash';
 import $ from 'jquery';
-import coreModule from 'app/core/core_module';
+import coreModule from 'app/angular/core_module';
-import { promiseToDigest } from '../../core/utils/promiseToDigest';
+import { promiseToDigest } from '../promiseToDigest';
 
 const template = `
 <div class="dropdown cascade-open">

public/app/angular/components/scroll.ts

@@ -1,7 +1,7 @@
 import $ from 'jquery';
 // @ts-ignore
 import baron from 'baron';
-import coreModule from 'app/core/core_module';
+import coreModule from 'app/angular/core_module';
 
 const scrollBarHTML = `
 <div class="baron__track">

public/app/angular/components/spectrum_picker.ts

@@ -3,7 +3,7 @@
  * Allows remaining <spectrum-picker> untouched in outdated plugins.
  * Technically, it's just a wrapper for react component with two-way data binding support.
  */
-import coreModule from '../../core/core_module';
+import coreModule from '../core_module';
 
 /** @ngInject */
 export function spectrumPicker() {

public/app/angular/components/sql_part/sql_part_editor.ts

@@ -1,6 +1,6 @@
 import { debounce, each, indexOf, map, partial, escape, unescape } from 'lodash';
 import $ from 'jquery';
-import coreModule from 'app/core/core_module';
+import coreModule from 'app/angular/core_module';
 
 const template = `
 <div class="dropdown cascade-open">

public/app/angular/components/switch.ts

@@ -1,4 +1,4 @@
-import coreModule from 'app/core/core_module';
+import coreModule from 'app/angular/core_module';
 
 const template = `
 <label for="check-{{ctrl.id}}" class="gf-form-switch-container">

public/app/angular/diff-view.ts

@@ -1,5 +1,5 @@
 import angular from 'angular';
-import coreModule from '../core/core_module';
+import coreModule from './core_module';
 import { GrafanaRootScope } from 'app/routes/GrafanaCtrl';
 
 export class DeltaCtrl {

public/app/angular/dropdown_typeahead.ts

@@ -1,6 +1,6 @@
 import { each, reduce } from 'lodash';
 import $ from 'jquery';
-import coreModule from '../core/core_module';
+import coreModule from './core_module';
 
 /** @ngInject */
 export function dropdownTypeahead($compile: any) {

public/app/angular/filters/filters.ts

@@ -1,6 +1,6 @@
 import { isArray, isNull, isObject, isUndefined } from 'lodash';
 import angular from 'angular';
-import coreModule from '../../core/core_module';
+import coreModule from '../core_module';
 import { getTemplateSrv, TemplateSrv } from 'app/features/templating/template_srv';
 import { dateTime } from '@grafana/data';
 

public/app/angular/give_focus.ts

@@ -1,4 +1,4 @@
-import coreModule from '../core/core_module';
+import coreModule from './core_module';
 
 coreModule.directive('giveFocus', () => {
   return (scope: any, element: any, attrs: any) => {

public/app/angular/index.ts

@@ -7,6 +7,8 @@ import './services/ng_react';
 import './services/segment_srv';
 import './services/popover_srv';
 import './services/timer';
+import './services/AngularLoader';
+
 import './dropdown_typeahead';
 import './autofill_event_fix';
 import './metric_segment';

public/app/angular/metric_segment.ts

@@ -1,6 +1,6 @@
 import { debounce, find, indexOf, map, escape, unescape } from 'lodash';
 import $ from 'jquery';
-import coreModule from '../core/core_module';
+import coreModule from './core_module';
 import { TemplateSrv } from 'app/features/templating/template_srv';
 
 /** @ngInject */

public/app/angular/misc.ts

@@ -1,6 +1,6 @@
 import angular from 'angular';
 import Clipboard from 'clipboard';
-import coreModule from '../core/core_module';
+import coreModule from './core_module';
 import { appEvents } from 'app/core/core';
 import { AppEvents } from '@grafana/data';
 

public/app/angular/ng_model_on_blur.ts

@@ -1,4 +1,4 @@
-import coreModule from '../core/core_module';
+import coreModule from './core_module';
 import { rangeUtil } from '@grafana/data';
 
 function ngModelOnBlur() {

public/app/angular/panel/panel_directive.ts

@@ -5,7 +5,7 @@ import { PanelModel } from '../../features/dashboard/state';
 import { PanelCtrl } from './panel_ctrl';
 import { Subscription } from 'rxjs';
 import { PanelDirectiveReadyEvent, RenderEvent } from 'app/types/events';
-import { coreModule } from 'app/core/core_module';
+import { coreModule } from 'app/angular/core_module';
 import { RefreshEvent } from '@grafana/runtime';
 
 const panelTemplate = `

public/app/angular/panel/panellinks/link_srv.ts

@@ -1,7 +1,7 @@
 import { chain } from 'lodash';
 import { getTimeSrv } from 'app/features/dashboard/services/TimeSrv';
 import { getTemplateSrv } from '@grafana/runtime';
-import coreModule from 'app/core/core_module';
+import coreModule from 'app/angular/core_module';
 import { getConfig } from 'app/core/config';
 import {
   DataFrame,

public/app/angular/panel/query_editor_row.ts

@@ -1,4 +1,4 @@
-import { coreModule } from 'app/core/core_module';
+import { coreModule } from 'app/angular/core_module';
 
 export class QueryRowCtrl {
   target: any;

public/app/angular/react2angular.ts

@@ -1,4 +1,4 @@
-import coreModule from 'app/core/core_module';
+import coreModule from 'app/angular/core_module';
 import { provideTheme } from 'app/core/utils/ConfigProvider';
 
 export function react2AngularDirective(name: string, component: any, options: any) {

public/app/angular/rebuild_on_change.ts

@@ -1,5 +1,5 @@
 import $ from 'jquery';
-import coreModule from '../core/core_module';
+import coreModule from './core_module';
 
 function getBlockNodes(nodes: any[]) {
   let node = nodes[0];

public/app/angular/registerComponents.ts

@@ -0,0 +1,8 @@
+import { getBackendSrv } from '@grafana/runtime';
+import { contextSrv } from 'app/core/core';
+import coreModule from './core_module';
+
+export function registerComponents() {
+  coreModule.factory('backendSrv', () => getBackendSrv());
+  coreModule.factory('contextSrv', () => contextSrv);
+}

public/app/angular/services/AngularLoader.ts

@@ -1,12 +1,8 @@
 import angular from 'angular';
-import coreModule from 'app/core/core_module';
+import coreModule from 'app/angular/core_module';
 import { assign } from 'lodash';
 
-import {
+import { AngularComponent, AngularLoader as AngularLoaderInterface } from '@grafana/runtime';
-  AngularComponent,
-  AngularLoader as AngularLoaderInterface,
-  setAngularLoader as setAngularLoaderInterface,
-} from '@grafana/runtime';
 import { GrafanaRootScope } from 'app/routes/GrafanaCtrl';
 
 export class AngularLoader implements AngularLoaderInterface {
@@ -39,8 +35,4 @@ export class AngularLoader implements AngularLoaderInterface {
   }
 }
 
-export function setAngularLoader(v: AngularLoader) {
-  setAngularLoaderInterface(v);
-}
-
 coreModule.service('angularLoader', AngularLoader);

public/app/angular/services/alert_srv.ts

@@ -1,4 +1,4 @@
-import coreModule from 'app/core/core_module';
+import coreModule from 'app/angular/core_module';
 
 export class AlertSrv {
   constructor() {}

public/app/angular/services/dynamic_directive_srv.ts

@@ -1,5 +1,5 @@
 import angular from 'angular';
-import coreModule from '../../core/core_module';
+import coreModule from '../core_module';
 
 class DynamicDirectiveSrv {
   /** @ngInject */

public/app/angular/services/nav_model_srv.ts

@@ -1,4 +1,4 @@
-import coreModule from 'app/core/core_module';
+import coreModule from 'app/angular/core_module';
 import config from 'app/core/config';
 import { find, isNumber } from 'lodash';
 import { NavModel } from '@grafana/data';

public/app/angular/services/popover_srv.ts

@@ -1,5 +1,5 @@
 import { extend } from 'lodash';
-import coreModule from 'app/core/core_module';
+import coreModule from 'app/angular/core_module';
 // @ts-ignore
 import Drop from 'tether-drop';
 import { GrafanaRootScope } from 'app/routes/GrafanaCtrl';

public/app/angular/services/segment_srv.ts

@@ -1,5 +1,5 @@
 import { each, isString, map } from 'lodash';
-import coreModule from '../../core/core_module';
+import coreModule from '../core_module';
 
 /** @ngInject */
 export function uiSegmentSrv(this: any, $sce: any, templateSrv: any) {

public/app/angular/services/timer.ts

@@ -1,5 +1,5 @@
 import { without, each } from 'lodash';
-import coreModule from 'app/core/core_module';
+import coreModule from 'app/angular/core_module';
 import { ITimeoutService } from 'angular';
 
 // This service really just tracks a list of $timeout promises to give us a

public/app/angular/tags.ts

@@ -1,7 +1,7 @@
 import angular from 'angular';
 import { getTagColorsFromName } from '@grafana/ui';
 import $ from 'jquery';
-import coreModule from '../core/core_module';
+import coreModule from './core_module';
 import 'vendor/tagsinput/bootstrap-tagsinput.js';
 
 function setColor(name: string, element: JQuery) {

public/app/app.ts

@@ -26,7 +26,13 @@ import {
 } from '@grafana/data';
 import { arrayMove } from 'app/core/utils/arrayMove';
 import { importPluginModule } from 'app/features/plugins/plugin_loader';
-import { registerEchoBackend, setEchoSrv, setPanelRenderer, setQueryRunnerFactory } from '@grafana/runtime';
+import {
+  registerEchoBackend,
+  setBackendSrv,
+  setEchoSrv,
+  setPanelRenderer,
+  setQueryRunnerFactory,
+} from '@grafana/runtime';
 import { Echo } from './core/services/echo/Echo';
 import { reportPerformance } from './core/services/echo/EchoSrv';
 import { PerformanceBackend } from './core/services/echo/backends/PerformanceBackend';
@@ -52,6 +58,7 @@ import { GAEchoBackend } from './core/services/echo/backends/analytics/GABackend
 import { ApplicationInsightsBackend } from './core/services/echo/backends/analytics/ApplicationInsightsBackend';
 import { RudderstackBackend } from './core/services/echo/backends/analytics/RudderstackBackend';
 import { getAllOptionEditors } from './core/components/editors/registry';
+import { backendSrv } from './core/services/backend_srv';
 
 // add move to lodash for backward compatabilty with plugins
 // @ts-ignore
@@ -76,6 +83,7 @@ export class GrafanaApp {
 
   async init() {
     try {
+      setBackendSrv(backendSrv);
       initEchoSrv();
       addClassIfNoOverlayScrollbar();
       setLocale(config.bootData.user.locale);

public/app/core/core.ts

@@ -2,7 +2,6 @@ import './jquery_extended';
 import './services/search_srv';
 import { colors, JsonExplorer } from '@grafana/ui/';
 import 'app/core/services/all';
-import coreModule from './core_module';
 import appEvents from './app_events';
 import { assignModelProperties } from './utils/model_utils';
 import { contextSrv } from './services/context_srv';
@@ -12,7 +11,6 @@ import TimeSeries, { updateLegendValues } from './time_series2';
 
 export {
   profiler,
-  coreModule,
   appEvents,
   colors,
   assignModelProperties,

public/app/core/services/backend_srv.ts

@@ -19,7 +19,6 @@ import appEvents from 'app/core/app_events';
 import { getConfig } from 'app/core/config';
 import { DashboardSearchHit } from 'app/features/search/types';
 import { FolderDTO } from 'app/types';
-import { coreModule } from 'app/core/core_module';
 import { ContextSrv, contextSrv } from './context_srv';
 import { parseInitFromOptions, parseResponseBody, parseUrlFromOptions } from '../utils/fetch';
 import { isDataQuery, isLocalUrl } from '../utils/query';
@@ -425,7 +424,6 @@ export class BackendSrv implements BackendService {
   }
 }
 
-coreModule.factory('backendSrv', () => backendSrv);
 // Used for testing and things that really need BackendSrv
 export const backendSrv = new BackendSrv();
 export const getBackendSrv = (): BackendSrv => backendSrv;

public/app/core/services/context_srv.ts

@@ -1,6 +1,5 @@
 import config from '../../core/config';
 import { extend } from 'lodash';
-import coreModule from 'app/core/core_module';
 import { rangeUtil } from '@grafana/data';
 import { AccessControlAction, UserPermission } from 'app/types';
 
@@ -143,7 +142,3 @@ export const setContextSrv = (override: ContextSrv) => {
   }
   contextSrv = override;
 };
-
-coreModule.factory('contextSrv', () => {
-  return contextSrv;
-});

public/app/core/services/util_srv.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import coreModule from 'app/core/core_module';
+import coreModule from 'app/angular/core_module';
 import appEvents from 'app/core/app_events';
 
 import { GrafanaRootScope } from 'app/routes/GrafanaCtrl';

public/app/features/alerting/AlertTabCtrl.ts

@@ -1,5 +1,5 @@
 import { find, map, reduce, remove } from 'lodash';
-import coreModule from 'app/core/core_module';
+import coreModule from 'app/angular/core_module';
 import { ThresholdMapper } from './state/ThresholdMapper';
 import { QueryPart } from 'app/angular/components/query_part';
 import alertDef from './state/alertDef';
@@ -12,7 +12,7 @@ import { DataQuery, DataSourceApi, rangeUtil } from '@grafana/data';
 import { PanelModel } from 'app/features/dashboard/state';
 import { getDefaultCondition } from './getAlertingValidationMessage';
 import { CoreEvents } from 'app/types';
-import { promiseToDigest } from 'app/core/utils/promiseToDigest';
+import { promiseToDigest } from 'app/angular/promiseToDigest';
 import { ShowConfirmModalEvent } from '../../types/events';
 
 export class AlertTabCtrl {

public/app/features/annotations/annotation_tooltip.ts

@@ -1,6 +1,6 @@
 import { isString, escape } from 'lodash';
 import $ from 'jquery';
-import coreModule from 'app/core/core_module';
+import coreModule from 'app/angular/core_module';
 import alertDef from '../alerting/state/alertDef';
 import { DashboardSrv } from '../dashboard/services/DashboardSrv';
 import { ContextSrv } from 'app/core/services/context_srv';

public/app/features/annotations/annotations_srv.ts

@@ -11,8 +11,7 @@ import {
   ScopedVars,
 } from '@grafana/data';
 
-import coreModule from 'app/core/core_module';
+import coreModule from 'app/angular/core_module';
-import { DashboardModel } from '../dashboard/state';
 import { AnnotationQueryOptions, AnnotationQueryResponse } from './types';
 import { standardAnnotationSupport } from './standardAnnotationSupport';
 import { runRequest } from '../query/state/runRequest';
@@ -26,13 +25,6 @@ function getNextRequestId() {
  * @deprecated AnnotationsSrv is deprecated in favor of DashboardQueryRunner
  */
 export class AnnotationsSrv {
-  /**
-   * @deprecated init is deprecated in favor of DashboardQueryRunner.run
-   */
-  init(dashboard: DashboardModel) {
-    deprecationWarning('annotations_srv.ts', 'init', 'DashboardQueryRunner.run');
-  }
-
   /**
    * @deprecated clearPromiseCaches is deprecated
    */

public/app/features/annotations/components/StandardAnnotationQueryEditor.tsx

@@ -11,7 +11,6 @@ import { executeAnnotationQuery } from '../annotations_srv';
 import { PanelModel } from 'app/features/dashboard/state';
 import { AnnotationQueryResponse } from '../types';
 import { AnnotationFieldMapper } from './AnnotationResultMapper';
-import coreModule from 'app/core/core_module';
 
 interface Props {
   datasource: DataSourceApi;
@@ -187,11 +186,3 @@ export default class StandardAnnotationQueryEditor extends PureComponent<Props,
     );
   }
 }
-
-// Careful to use a unique directive name!  many plugins already use "annotationEditor" and have conflicts
-coreModule.directive('standardAnnotationEditor', [
-  'reactDirective',
-  (reactDirective: any) => {
-    return reactDirective(StandardAnnotationQueryEditor, ['annotation', 'datasource', 'change']);
-  },
-]);

public/app/features/annotations/event_editor.ts

@@ -1,5 +1,5 @@
 import { cloneDeep, isNumber } from 'lodash';
-import { coreModule } from 'app/core/core';
+import { coreModule } from 'app/angular/core_module';
 import { AnnotationEvent, dateTime } from '@grafana/data';
 import { MetricsPanelCtrl } from 'app/angular/panel/metrics_panel_ctrl';
 import { deleteAnnotation, saveAnnotation, updateAnnotation } from './api';

public/app/features/dashboard/components/DashboardSettings/AnnotationsSettings.test.tsx

@@ -4,8 +4,7 @@ import { render, screen } from '@testing-library/react';
 import { within } from '@testing-library/dom';
 import userEvent from '@testing-library/user-event';
 import { selectors } from '@grafana/e2e-selectors';
-import { setDataSourceSrv } from '@grafana/runtime';
+import { setAngularLoader, setDataSourceSrv } from '@grafana/runtime';
-import { setAngularLoader } from 'app/core/services/AngularLoader';
 import { AnnotationsSettings } from './AnnotationsSettings';
 
 describe('AnnotationsSettings', () => {
@@ -80,7 +79,6 @@ describe('AnnotationsSettings', () => {
       },
     } as any);
 
-    // @ts-ignore
     setAngularLoader({
       load: () => ({
         destroy: jest.fn(),

public/app/features/dashboard/components/FolderPicker/FolderPickerCtrl.ts

@@ -2,12 +2,12 @@ import { map, find } from 'lodash';
 import { IScope } from 'angular';
 import { AppEvents } from '@grafana/data';
 
-import coreModule from 'app/core/core_module';
+import coreModule from 'app/angular/core_module';
 import appEvents from 'app/core/app_events';
 import { backendSrv } from 'app/core/services/backend_srv';
 import { ValidationSrv } from 'app/features/manage-dashboards';
 import { ContextSrv } from 'app/core/services/context_srv';
-import { promiseToDigest } from '../../../../core/utils/promiseToDigest';
+import { promiseToDigest } from '../../../../angular/promiseToDigest';
 import { createFolder } from 'app/features/manage-dashboards/state/actions';
 
 export class FolderPickerCtrl {

public/app/features/dashboard/components/VersionHistory/HistorySrv.ts

@@ -1,5 +1,5 @@
 import { isNumber } from 'lodash';
-import coreModule from 'app/core/core_module';
+import coreModule from 'app/angular/core_module';
 import { DashboardModel } from '../../state/DashboardModel';
 import { getBackendSrv } from '@grafana/runtime';
 

public/app/features/dashboard/services/DashboardSrv.ts

@@ -1,4 +1,4 @@
-import coreModule from 'app/core/core_module';
+import coreModule from 'app/angular/core_module';
 import { appEvents } from 'app/core/app_events';
 import { DashboardModel } from '../state/DashboardModel';
 import { removePanel } from '../utils/panel';

public/app/features/datasources/settings/HttpSettingsCtrl.ts

@@ -1,4 +1,4 @@
-import { coreModule } from 'app/core/core';
+import { coreModule } from 'app/angular/core_module';
 
 coreModule.directive('datasourceHttpSettings', () => {
   return {

public/app/features/datasources/settings/TlsAuthSettingsCtrl.ts

@@ -1,4 +1,4 @@
-import { coreModule } from 'app/core/core';
+import { coreModule } from 'app/angular/core_module';
 
 coreModule.directive('datasourceTlsAuthSettings', () => {
   return {

public/app/features/manage-dashboards/components/UploadDashboard/uploadDashboardDirective.ts

@@ -1,4 +1,4 @@
-import coreModule from 'app/core/core_module';
+import coreModule from 'app/angular/core_module';
 import appEvents from 'app/core/app_events';
 import angular from 'angular';
 import { AppEvents } from '@grafana/data';

public/app/features/manage-dashboards/services/ValidationSrv.ts

@@ -1,4 +1,4 @@
-import coreModule from 'app/core/core_module';
+import coreModule from 'app/angular/core_module';
 import { backendSrv } from 'app/core/services/backend_srv';
 
 const hitTypes = {

public/app/features/plugins/datasource_srv.ts

@@ -1,5 +1,5 @@
 // Libraries
-import coreModule from 'app/core/core_module';
+import coreModule from 'app/angular/core_module';
 // Services & Utils
 import { importDataSourcePlugin } from './plugin_loader';
 import {

public/app/features/plugins/plugin_component.ts

@@ -2,7 +2,7 @@ import angular, { ILocationService } from 'angular';
 import { each } from 'lodash';
 
 import config from 'app/core/config';
-import coreModule from 'app/core/core_module';
+import coreModule from 'app/angular/core_module';
 
 import { DataSourceApi, PanelEvents } from '@grafana/data';
 import { importDataSourcePlugin, importAppPlugin } from './plugin_loader';

public/app/features/plugins/plugin_loader.ts

@@ -22,11 +22,12 @@ import * as redux from 'redux';
 import config from 'app/core/config';
 import TimeSeries from 'app/core/time_series2';
 import TableModel from 'app/core/table_model';
-import { coreModule, appEvents, contextSrv } from 'app/core/core';
+import { coreModule } from 'app/angular/core_module';
+import { appEvents, contextSrv } from 'app/core/core';
 import * as flatten from 'app/core/utils/flatten';
 import * as ticks from 'app/core/utils/ticks';
 import { BackendSrv, getBackendSrv } from 'app/core/services/backend_srv';
-import { promiseToDigest } from 'app/core/utils/promiseToDigest';
+import { promiseToDigest } from 'app/angular/promiseToDigest';
 import impressionSrv from 'app/core/services/impression_srv';
 import builtInPlugins from './built_in_plugins';
 import * as d3 from 'd3';
@@ -82,6 +83,7 @@ grafanaRuntime.SystemJS.config({
 
 function exposeToPlugin(name: string, component: any) {
   grafanaRuntime.SystemJS.registerDynamic(name, [], true, (require: any, exports: any, module: { exports: any }) => {
+    console.log('registerDynamic callback', name);
     module.exports = component;
   });
 }

public/app/features/plugins/plugin_page_ctrl.ts

@@ -4,7 +4,7 @@ import { find } from 'lodash';
 import { getPluginSettings } from './PluginSettingsCache';
 import { PluginMeta, AppEvents } from '@grafana/data';
 import { GrafanaRootScope } from 'app/routes/GrafanaCtrl';
-import { promiseToDigest } from '../../core/utils/promiseToDigest';
+import { promiseToDigest } from '../../angular/promiseToDigest';
 import { NavModelSrv } from 'app/angular/services/nav_model_srv';
 
 export class AppPageCtrl {

public/app/features/plugins/variableQueryEditorLoader.tsx

@@ -1,4 +1,4 @@
-import coreModule from 'app/core/core_module';
+import coreModule from 'app/angular/core_module';
 import { importDataSourcePlugin } from './plugin_loader';
 import React from 'react';
 import ReactDOM from 'react-dom';

public/app/plugins/datasource/graphite/specs/store.test.ts

@@ -7,7 +7,7 @@ import { getAltSegmentsSelectables, getTagsSelectables, getTagsAsSegmentsSelecta
 import { GraphiteSegment } from '../types';
 import { createStore } from '../state/store';
 
-jest.mock('app/core/utils/promiseToDigest', () => ({
+jest.mock('app/angular/promiseToDigest', () => ({
   promiseToDigest: (scope: any) => {
     return (p: Promise<any>) => p;
   },

public/app/plugins/panel/graph/graph.ts

@@ -11,7 +11,8 @@ import './jquery.flot.events';
 import $ from 'jquery';
 import { clone, find, flatten, isUndefined, map, max as _max, min as _min, sortBy as _sortBy, toNumber } from 'lodash';
 import { tickStep } from 'app/core/utils/ticks';
-import { coreModule, updateLegendValues } from 'app/core/core';
+import { updateLegendValues } from 'app/core/core';
+import { coreModule } from 'app/angular/core_module';
 import GraphTooltip from './graph_tooltip';
 import { ThresholdManager } from './threshold_manager';
 import { TimeRegionManager } from './time_region_manager';

public/app/plugins/panel/graph/series_overrides_ctrl.ts

@@ -1,5 +1,5 @@
 import { map, each, isUndefined } from 'lodash';
-import coreModule from 'app/core/core_module';
+import coreModule from 'app/angular/core_module';
 import { textUtil } from '@grafana/data';
 
 /** @ngInject */

public/app/plugins/panel/graph/thresholds_form.ts

@@ -1,4 +1,4 @@
-import coreModule from 'app/core/core_module';
+import coreModule from 'app/angular/core_module';
 import config from 'app/core/config';
 import tinycolor from 'tinycolor2';
 export class ThresholdFormCtrl {

public/app/plugins/panel/graph/time_regions_form.ts

@@ -1,4 +1,4 @@
-import coreModule from 'app/core/core_module';
+import coreModule from 'app/angular/core_module';
 import { getColorModes } from './time_region_manager';
 
 export class TimeRegionFormCtrl {

public/app/plugins/panel/heatmap/color_legend.ts

@@ -4,7 +4,7 @@ import * as d3 from 'd3';
 import { contextSrv } from 'app/core/core';
 import { tickStep } from 'app/core/utils/ticks';
 import { getColorScale, getOpacityScale } from './color_scale';
-import coreModule from 'app/core/core_module';
+import coreModule from 'app/angular/core_module';
 import { PanelEvents, getColorForTheme } from '@grafana/data';
 import { config } from 'app/core/config';
 

public/app/routes/GrafanaCtrl.ts

@@ -6,19 +6,19 @@ import $ from 'jquery';
 // Utils and servies
 import { colors } from '@grafana/ui';
 import {
-  setBackendSrv,
   setDataSourceSrv,
   setLegacyAngularInjector,
   setLocationSrv,
   locationService,
   setAppEvents,
+  setAngularLoader,
 } from '@grafana/runtime';
 import config from 'app/core/config';
-import coreModule from 'app/core/core_module';
+import coreModule from 'app/angular/core_module';
 import { profiler } from 'app/core/profiler';
 import appEvents from 'app/core/app_events';
 import { DatasourceSrv } from 'app/features/plugins/datasource_srv';
-import { AngularLoader, setAngularLoader } from 'app/core/services/AngularLoader';
+import { AngularLoader } from 'app/angular/services/AngularLoader';
 
 // Types
 import { CoreEvents, AppEventEmitter, AppEventConsumer } from 'app/types';
@@ -28,7 +28,6 @@ import { ContextSrv } from 'app/core/services/context_srv';
 import { DashboardSrv, setDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
 import { IRootScopeService, IAngularEvent, auto } from 'angular';
 import { AppEvent } from '@grafana/data';
-import { backendSrv } from 'app/core/services/backend_srv';
 import { initGrafanaLive } from 'app/features/live';
 
 export type GrafanaRootScope = IRootScopeService & AppEventEmitter & AppEventConsumer & { colors: string[] };
@@ -48,7 +47,6 @@ export class GrafanaCtrl {
   ) {
     // make angular loader service available to react components
     setAngularLoader(angularLoader);
-    setBackendSrv(backendSrv);
     setDataSourceSrv(datasourceSrv);
     setLinkSrv(linkSrv);
     setDashboardSrv(dashboardSrv);