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 @@
-
+
+