grafana/public/app/features/panel/panel_ctrl.ts
Torkel Ödegaard 34c397002c PanelChrome: Use react Panel Header for angular panels. (#21265)
* WIP: Angular panel chrome, this is going to be tricky

* AngularPanelChrome: initial render works

* Options are showing up

* viz options working

* Fixed singlestat background

* AngularPanels: Fixed alert tab

* Removed anuglar loading spinner

* Dashboard: Refactor dashboard reducer & actions

* Dashboard: minor refactoring

* PanelChrome: loading state moved to header

* Subscribe to render events to solve title update issue

* Time info and query errors now works

* PanelHeader: unifying angular and react behavior

* added getPanelMenu test

* Scrollable now works again

* Various fixes

* Making stuff work

* seperate event emitter for angular

* Fixed issue sending updated dimensions to angular panel

* Minor tweaks

* Fixed tests

* Alerting: alert state now works

* Fixed unit tests

* Fixed a few null check errors

* Simplified events handling

* Fixed strict null checks
2020-02-09 10:53:34 +01:00

108 lines
2.7 KiB
TypeScript

import _ from 'lodash';
import config from 'app/core/config';
import { profiler } from 'app/core/core';
import { Emitter } from 'app/core/utils/emitter';
import { auto } from 'angular';
import { AppEvent, PanelEvents, PanelPluginMeta, AngularPanelMenuItem } from '@grafana/data';
import { DashboardModel } from '../dashboard/state';
export class PanelCtrl {
panel: any;
error: any;
dashboard: DashboardModel;
pluginName: string;
pluginId: string;
editorTabs: any;
$scope: any;
$injector: auto.IInjectorService;
$location: any;
$timeout: any;
editModeInitiated: boolean;
height: number;
width: number;
containerHeight: any;
events: Emitter;
loading: boolean;
timing: any;
constructor($scope: any, $injector: auto.IInjectorService) {
this.$injector = $injector;
this.$location = $injector.get('$location');
this.$scope = $scope;
this.$timeout = $injector.get('$timeout');
this.editorTabs = [];
this.events = this.panel.events;
this.timing = {}; // not used but here to not break plugins
const plugin = config.panels[this.panel.type];
if (plugin) {
this.pluginId = plugin.id;
this.pluginName = plugin.name;
}
$scope.$on(PanelEvents.componentDidMount.name, () => this.panelDidMount());
}
panelDidMount() {
this.events.emit(PanelEvents.componentDidMount);
this.dashboard.panelInitialized(this.panel);
}
renderingCompleted() {
profiler.renderingCompleted();
}
refresh() {
this.panel.refresh();
}
publishAppEvent<T>(event: AppEvent<T>, payload?: T) {
this.$scope.$root.appEvent(event, payload);
}
initEditMode() {
if (!this.editModeInitiated) {
this.editModeInitiated = true;
this.events.emit(PanelEvents.editModeInitialized);
}
}
addEditorTab(title: string, directiveFn: any, index?: number, icon?: any) {
const editorTab = { title, directiveFn, icon };
if (_.isString(directiveFn)) {
editorTab.directiveFn = () => {
return { templateUrl: directiveFn };
};
}
if (index) {
this.editorTabs.splice(index, 0, editorTab);
} else {
this.editorTabs.push(editorTab);
}
}
getExtendedMenu() {
const menu: AngularPanelMenuItem[] = [];
this.events.emit(PanelEvents.initPanelActions, menu);
return menu;
}
// Override in sub-class to add items before extended menu
async getAdditionalMenuItems(): Promise<any[]> {
return [];
}
otherPanelInFullscreenMode() {
return this.dashboard.meta.fullscreen && !this.panel.fullscreen;
}
render(payload?: any) {
this.events.emit(PanelEvents.render, payload);
}
// overriden from react
onPluginTypeChange = (plugin: PanelPluginMeta) => {};
}