diff --git a/public/app/angular/GrafanaCtrl.ts b/public/app/angular/GrafanaCtrl.ts index e8ee62136d9..0b2b9b88d5c 100644 --- a/public/app/angular/GrafanaCtrl.ts +++ b/public/app/angular/GrafanaCtrl.ts @@ -13,7 +13,7 @@ import { AngularLoader } from 'app/angular/services/AngularLoader'; // Types import { CoreEvents, AppEventEmitter, AppEventConsumer } from 'app/types'; -import { UtilSrv } from 'app/core/services/util_srv'; +import { UtilSrv } from './services/UtilSrv'; import { ContextSrv } from 'app/core/services/context_srv'; import { IRootScopeService, IAngularEvent, auto } from 'angular'; import { AppEvent } from '@grafana/data'; diff --git a/public/app/angular/registerComponents.ts b/public/app/angular/registerComponents.ts index 0ef2f7c9a70..c0fda500ad5 100644 --- a/public/app/angular/registerComponents.ts +++ b/public/app/angular/registerComponents.ts @@ -5,6 +5,7 @@ import { validationSrv } from 'app/features/manage-dashboards/services/Validatio import { getLinkSrv } from 'app/features/panel/panellinks/link_srv'; import coreModule from './core_module'; import { AnnotationsSrv } from './services/annotations_srv'; +import { UtilSrv } from './services/UtilSrv'; export function registerComponents() { coreModule.factory('backendSrv', () => getBackendSrv()); @@ -14,4 +15,5 @@ export function registerComponents() { coreModule.factory('linkSrv', () => getLinkSrv()); coreModule.factory('validationSrv', () => validationSrv); coreModule.service('annotationsSrv', AnnotationsSrv); + coreModule.service('utilSrv', UtilSrv); } diff --git a/public/app/angular/services/UtilSrv.ts b/public/app/angular/services/UtilSrv.ts new file mode 100644 index 00000000000..6d2a970aa27 --- /dev/null +++ b/public/app/angular/services/UtilSrv.ts @@ -0,0 +1,64 @@ +import { GrafanaRootScope } from 'app/angular/GrafanaCtrl'; +import { HideModalEvent, ShowModalEvent } from '../../types/events'; +import { deprecationWarning } from '@grafana/data'; +import { appEvents } from 'app/core/app_events'; + +/** + * Old legacy utilSrv exposed to angular services and handles angular modals. + * Not used by any core or known external plugin. + */ +export class UtilSrv { + modalScope: any; + + /** @ngInject */ + constructor(private $rootScope: GrafanaRootScope, private $modal: any) {} + + init() { + appEvents.subscribe(ShowModalEvent, (e) => this.showModal(e.payload)); + appEvents.subscribe(HideModalEvent, this.hideModal.bind(this)); + } + + /** + * @deprecated use showModalReact instead that has this capability built in + */ + hideModal() { + deprecationWarning('UtilSrv', 'hideModal', 'showModalReact'); + if (this.modalScope && this.modalScope.dismiss) { + this.modalScope.dismiss(); + } + } + + /** + * @deprecated use showModalReact instead + */ + showModal(options: any) { + deprecationWarning('UtilSrv', 'showModal', 'showModalReact'); + if (this.modalScope && this.modalScope.dismiss) { + this.modalScope.dismiss(); + } + + this.modalScope = options.scope; + + if (options.model) { + this.modalScope = this.$rootScope.$new(); + this.modalScope.model = options.model; + } else if (!this.modalScope) { + this.modalScope = this.$rootScope.$new(); + } + + const modal = this.$modal({ + modalClass: options.modalClass, + template: options.src, + templateHtml: options.templateHtml, + persist: false, + show: false, + scope: this.modalScope, + keyboard: false, + backdrop: options.backdrop, + }); + + Promise.resolve(modal).then((modalEl) => { + modalEl.modal('show'); + }); + } +} diff --git a/public/app/app.ts b/public/app/app.ts index c2818eded44..721268ef29a 100644 --- a/public/app/app.ts +++ b/public/app/app.ts @@ -62,6 +62,7 @@ import { getAllOptionEditors } from './core/components/editors/registry'; import { backendSrv } from './core/services/backend_srv'; import { DatasourceSrv } from './features/plugins/datasource_srv'; import { AngularApp } from './angular'; +import { ModalManager } from './core/services/ModalManager'; // add move to lodash for backward compatabilty with plugins // @ts-ignore @@ -121,6 +122,10 @@ export class GrafanaApp { dataSourceSrv.init(config.datasources, config.defaultDatasource); setDataSourceSrv(dataSourceSrv); + // init modal manager + const modalManager = new ModalManager(); + modalManager.init(); + // Init angular this.angularApp.init(); diff --git a/public/app/core/core.ts b/public/app/core/core.ts index 911578774e3..04cf6dbbbd8 100644 --- a/public/app/core/core.ts +++ b/public/app/core/core.ts @@ -1,7 +1,6 @@ import './jquery_extended'; import './services/search_srv'; import { colors, JsonExplorer } from '@grafana/ui/'; -import 'app/core/services/all'; import appEvents from './app_events'; import { assignModelProperties } from './utils/model_utils'; import { contextSrv } from './services/context_srv'; diff --git a/public/app/core/services/util_srv.ts b/public/app/core/services/ModalManager.ts similarity index 57% rename from public/app/core/services/util_srv.ts rename to public/app/core/services/ModalManager.ts index 75e70b2ca5d..395378c4e85 100644 --- a/public/app/core/services/util_srv.ts +++ b/public/app/core/services/ModalManager.ts @@ -1,36 +1,20 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import coreModule from 'app/angular/core_module'; import appEvents from 'app/core/app_events'; -import { GrafanaRootScope } from 'app/angular/GrafanaCtrl'; import { AngularModalProxy } from '../components/modals/AngularModalProxy'; import { provideTheme } from '../utils/ConfigProvider'; -import { - HideModalEvent, - ShowConfirmModalEvent, - ShowConfirmModalPayload, - ShowModalEvent, - ShowModalReactEvent, -} from '../../types/events'; +import { ShowConfirmModalEvent, ShowConfirmModalPayload, ShowModalReactEvent } from '../../types/events'; import { ConfirmModal, ConfirmModalProps } from '@grafana/ui'; -import { deprecationWarning, textUtil } from '@grafana/data'; +import { textUtil } from '@grafana/data'; import { CopyPanelEvent } from '@grafana/runtime'; import { copyPanel } from 'app/features/dashboard/utils/panel'; -export class UtilSrv { - modalScope: any; +export class ModalManager { reactModalRoot = document.body; reactModalNode = document.createElement('div'); - /** @ngInject */ - constructor(private $rootScope: GrafanaRootScope, private $modal: any) { - this.reactModalNode.setAttribute('id', 'angular2ReactModalRoot'); - } - init() { - appEvents.subscribe(ShowModalEvent, (e) => this.showModal(e.payload)); - appEvents.subscribe(HideModalEvent, this.hideModal.bind(this)); appEvents.subscribe(ShowConfirmModalEvent, (e) => this.showConfirmModal(e.payload)); appEvents.subscribe(ShowModalReactEvent, (e) => this.showModalReact(e.payload)); appEvents.subscribe(CopyPanelEvent, (e) => copyPanel(e.payload)); @@ -57,50 +41,6 @@ export class UtilSrv { this.reactModalRoot.removeChild(this.reactModalNode); }; - /** - * @deprecated use showModalReact instead that has this capability built in - */ - hideModal() { - deprecationWarning('UtilSrv', 'hideModal', 'showModalReact'); - if (this.modalScope && this.modalScope.dismiss) { - this.modalScope.dismiss(); - } - } - - /** - * @deprecated use showModalReact instead - */ - showModal(options: any) { - deprecationWarning('UtilSrv', 'showModal', 'showModalReact'); - if (this.modalScope && this.modalScope.dismiss) { - this.modalScope.dismiss(); - } - - this.modalScope = options.scope; - - if (options.model) { - this.modalScope = this.$rootScope.$new(); - this.modalScope.model = options.model; - } else if (!this.modalScope) { - this.modalScope = this.$rootScope.$new(); - } - - const modal = this.$modal({ - modalClass: options.modalClass, - template: options.src, - templateHtml: options.templateHtml, - persist: false, - show: false, - scope: this.modalScope, - keyboard: false, - backdrop: options.backdrop, - }); - - Promise.resolve(modal).then((modalEl) => { - modalEl.modal('show'); - }); - } - showConfirmModal(payload: ShowConfirmModalPayload) { const { confirmText, @@ -147,5 +87,3 @@ export class UtilSrv { ReactDOM.render(elem, this.reactModalNode); } } - -coreModule.service('utilSrv', UtilSrv); diff --git a/public/app/core/services/all.ts b/public/app/core/services/all.ts deleted file mode 100644 index 0cb712d5331..00000000000 --- a/public/app/core/services/all.ts +++ /dev/null @@ -1,3 +0,0 @@ -import './util_srv'; -import './context_srv'; -import './backend_srv'; diff --git a/public/app/core/services/keybindingSrv.ts b/public/app/core/services/keybindingSrv.ts index 34f526f1672..d807975d1e1 100644 --- a/public/app/core/services/keybindingSrv.ts +++ b/public/app/core/services/keybindingSrv.ts @@ -9,11 +9,9 @@ import { SaveDashboardModalProxy } from 'app/features/dashboard/components/SaveD import { locationService } from '@grafana/runtime'; import { exitKioskMode, toggleKioskMode } from '../navigation/kiosk'; import { - HideModalEvent, RemovePanelEvent, ShiftTimeEvent, ShiftTimeEventPayload, - ShowModalEvent, ShowModalReactEvent, ZoomOutEvent, } from '../../types/events'; @@ -25,12 +23,6 @@ import { withFocusedPanel } from './withFocusedPanelId'; import { HelpModal } from '../components/help/HelpModal'; export class KeybindingSrv { - modalOpen = false; - - constructor() { - appEvents.subscribe(ShowModalEvent, () => (this.modalOpen = true)); - } - reset() { Mousetrap.reset(); } @@ -102,13 +94,6 @@ export class KeybindingSrv { } private exit() { - appEvents.publish(new HideModalEvent()); - - if (this.modalOpen) { - this.modalOpen = false; - return; - } - const search = locationService.getSearchObject(); if (search.editview) {