diff --git a/public/app/features/dashboard/all.js b/public/app/features/dashboard/all.js index a9c5488cad9..93368e401a5 100644 --- a/public/app/features/dashboard/all.js +++ b/public/app/features/dashboard/all.js @@ -24,6 +24,7 @@ define([ './ad_hoc_filters', './repeat_option/repeat_option', './dashgrid/DashboardGrid', + './dashgrid/PanelLoader', './acl/acl', './folder_picker/picker', './folder_modal/folder' diff --git a/public/app/features/dashboard/dashboard_ctrl.ts b/public/app/features/dashboard/dashboard_ctrl.ts index 4e6287688f8..728bd4a8432 100644 --- a/public/app/features/dashboard/dashboard_ctrl.ts +++ b/public/app/features/dashboard/dashboard_ctrl.ts @@ -1,5 +1,3 @@ -/// - import config from 'app/core/config'; import angular from 'angular'; @@ -19,6 +17,7 @@ export class DashboardCtrl { unsavedChangesSrv, dynamicDashboardSrv, dashboardViewStateSrv, + panelLoader, contextSrv, alertSrv, $timeout) { @@ -131,6 +130,10 @@ export class DashboardCtrl { $scope.dashboard.meta.folderId = folder.id; $scope.dashboard.meta.folderTitle= folder.title; }; + + $scope.getPanelLoader = function() { + return panelLoader; + }; } init(dashboard) { diff --git a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx index b6029f99ce7..fc972e7abc4 100644 --- a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx +++ b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx @@ -3,9 +3,10 @@ import coreModule from 'app/core/core_module'; import ReactGridLayout from 'react-grid-layout'; import {DashboardModel} from '../model'; import {DashboardPanel} from './DashboardPanel'; +import {PanelLoader} from './PanelLoader'; import sizeMe from 'react-sizeme'; -const COLUMN_COUNT = 24; +const COLUMN_COUNT = 12; const ROW_HEIGHT = 30; function GridWrapper({size, layout, onLayoutChange, children}) { @@ -37,6 +38,7 @@ const SizedReactLayoutGrid = sizeMe({monitorWidth: true})(GridWrapper); export interface DashboardGridProps { dashboard: DashboardModel; + getPanelLoader: () => PanelLoader; } export class DashboardGrid extends React.Component { @@ -69,7 +71,7 @@ export class DashboardGrid extends React.Component { for (let panel of this.props.dashboard.panels) { panelElements.push(
- +
, ); } @@ -86,5 +88,8 @@ export class DashboardGrid extends React.Component { } coreModule.directive('dashboardGrid', function(reactDirective) { - return reactDirective(DashboardGrid, [['dashboard', {watchDepth: 'reference'}]]); + return reactDirective(DashboardGrid, [ + ['dashboard', {watchDepth: 'reference'}], + ['getPanelLoader', {watchDepth: 'reference', wrapApply: false}], + ]); }); diff --git a/public/app/features/dashboard/dashgrid/DashboardPanel.tsx b/public/app/features/dashboard/dashgrid/DashboardPanel.tsx index 16279ff99b4..ad9c1ccb585 100644 --- a/public/app/features/dashboard/dashgrid/DashboardPanel.tsx +++ b/public/app/features/dashboard/dashgrid/DashboardPanel.tsx @@ -1,7 +1,10 @@ import React from 'react'; +import {PanelLoader} from './PanelLoader'; export interface DashboardPanelProps { panel: any; + dashboard: any; + getPanelLoader: () => PanelLoader; } export class DashboardPanel extends React.Component { @@ -13,6 +16,8 @@ export class DashboardPanel extends React.Component { } componentDidMount() { + var loader = this.props.getPanelLoader(); + loader.load(this.element, this.props.panel, this.props.dashboard); } render() { diff --git a/public/app/features/dashboard/dashgrid/PanelLoader.ts b/public/app/features/dashboard/dashgrid/PanelLoader.ts new file mode 100644 index 00000000000..3d0988381e0 --- /dev/null +++ b/public/app/features/dashboard/dashgrid/PanelLoader.ts @@ -0,0 +1,33 @@ +import angular from 'angular'; +import coreModule from 'app/core/core_module'; + +export interface AttachedPanel { + destroy(); +} + +export class PanelLoader { + + /** @ngInject */ + constructor(private $compile, private $rootScope) { + } + + load(elem, panel, dashboard): AttachedPanel { + var template = ''; + var panelScope = this.$rootScope.$new(); + panelScope.panel = panel; + panelScope.dashboard = dashboard; + + const compiledElem = this.$compile(template)(panelScope); + const rootNode = angular.element(elem); + rootNode.append(compiledElem); + + return { + destroy: () => { + panelScope.$destroy(); + compiledElem.remove(); + } + }; + } +} + +coreModule.service('panelLoader', PanelLoader); diff --git a/public/app/features/dashboard/dashgrid/dashboard_plugin.ts b/public/app/features/dashboard/dashgrid/dashboard_plugin.ts deleted file mode 100644 index 92083830c52..00000000000 --- a/public/app/features/dashboard/dashgrid/dashboard_plugin.ts +++ /dev/null @@ -1,3 +0,0 @@ -import coreModule from 'app/core/core'; - - diff --git a/public/app/features/plugins/plugin_component.ts b/public/app/features/plugins/plugin_component.ts index e8ece7b55c4..d162c0794db 100644 --- a/public/app/features/plugins/plugin_component.ts +++ b/public/app/features/plugins/plugin_component.ts @@ -68,7 +68,7 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $ var componentInfo: any = { name: 'panel-plugin-' + scope.panel.type, bindings: {dashboard: "=", panel: "=", row: "="}, - attrs: {dashboard: "ctrl.dashboard", panel: "panel", row: "ctrl.row"}, + attrs: {dashboard: "dashboard", panel: "panel"}, }; let panelInfo = config.panels[scope.panel.type]; diff --git a/public/app/partials/dashboard.html b/public/app/partials/dashboard.html index e93222c0456..ddbd4c4d326 100644 --- a/public/app/partials/dashboard.html +++ b/public/app/partials/dashboard.html @@ -9,7 +9,8 @@ - + +