tech: got angular component to load inside react grid

public/app/features/dashboard/all.js

@@ -24,6 +24,7 @@ define([
   './ad_hoc_filters',
   './ad_hoc_filters',
   './repeat_option/repeat_option',
   './repeat_option/repeat_option',
   './dashgrid/DashboardGrid',
   './dashgrid/DashboardGrid',
+  './dashgrid/PanelLoader',
   './acl/acl',
   './acl/acl',
   './folder_picker/picker',
   './folder_picker/picker',
   './folder_modal/folder'
   './folder_modal/folder'

public/app/features/dashboard/dashboard_ctrl.ts

-///<reference path="../../headers/common.d.ts" />
-
 import config from 'app/core/config';
 import config from 'app/core/config';
 import angular from 'angular';
 import angular from 'angular';
 
 
@@ -19,6 +17,7 @@ export class DashboardCtrl {
     unsavedChangesSrv,
     unsavedChangesSrv,
     dynamicDashboardSrv,
     dynamicDashboardSrv,
     dashboardViewStateSrv,
     dashboardViewStateSrv,
+    panelLoader,
     contextSrv,
     contextSrv,
     alertSrv,
     alertSrv,
     $timeout) {
     $timeout) {
@@ -131,6 +130,10 @@ export class DashboardCtrl {
         $scope.dashboard.meta.folderId = folder.id;
         $scope.dashboard.meta.folderId = folder.id;
         $scope.dashboard.meta.folderTitle= folder.title;
         $scope.dashboard.meta.folderTitle= folder.title;
       };
       };
+
+      $scope.getPanelLoader = function() {
+        return panelLoader;
+      };
     }
     }
 
 
     init(dashboard) {
     init(dashboard) {

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 ReactGridLayout from 'react-grid-layout';
 import {DashboardModel} from '../model';
 import {DashboardModel} from '../model';
 import {DashboardPanel} from './DashboardPanel';
 import {DashboardPanel} from './DashboardPanel';
+import {PanelLoader} from './PanelLoader';
 import sizeMe from 'react-sizeme';
 import sizeMe from 'react-sizeme';
 
 
-const COLUMN_COUNT = 24;
+const COLUMN_COUNT = 12;
 const ROW_HEIGHT = 30;
 const ROW_HEIGHT = 30;
 
 
 function GridWrapper({size, layout, onLayoutChange, children}) {
 function GridWrapper({size, layout, onLayoutChange, children}) {
@@ -37,6 +38,7 @@ const SizedReactLayoutGrid = sizeMe({monitorWidth: true})(GridWrapper);
 
 
 export interface DashboardGridProps {
 export interface DashboardGridProps {
   dashboard: DashboardModel;
   dashboard: DashboardModel;
+  getPanelLoader: () => PanelLoader;
 }
 }
 
 
 export class DashboardGrid extends React.Component<DashboardGridProps, any> {
 export class DashboardGrid extends React.Component<DashboardGridProps, any> {
@@ -69,7 +71,7 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
     for (let panel of this.props.dashboard.panels) {
     for (let panel of this.props.dashboard.panels) {
       panelElements.push(
       panelElements.push(
         <div key={panel.id.toString()} className="panel">
         <div key={panel.id.toString()} className="panel">
-          <DashboardPanel panel={panel} />
+          <DashboardPanel panel={panel} getPanelLoader={this.props.getPanelLoader} dashboard={this.props.dashboard} />
         </div>,
         </div>,
       );
       );
     }
     }
@@ -86,5 +88,8 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
 }
 }
 
 
 coreModule.directive('dashboardGrid', function(reactDirective) {
 coreModule.directive('dashboardGrid', function(reactDirective) {
-  return reactDirective(DashboardGrid, [['dashboard', {watchDepth: 'reference'}]]);
+  return reactDirective(DashboardGrid, [
+    ['dashboard', {watchDepth: 'reference'}],
+    ['getPanelLoader', {watchDepth: 'reference', wrapApply: false}],
+  ]);
 });
 });

public/app/features/dashboard/dashgrid/DashboardPanel.tsx

 import React from 'react';
 import React from 'react';
+import {PanelLoader} from './PanelLoader';
 
 
 export interface DashboardPanelProps {
 export interface DashboardPanelProps {
   panel: any;
   panel: any;
+  dashboard: any;
+  getPanelLoader: () => PanelLoader;
 }
 }
 
 
 export class DashboardPanel extends React.Component<DashboardPanelProps, any> {
 export class DashboardPanel extends React.Component<DashboardPanelProps, any> {
@@ -13,6 +16,8 @@ export class DashboardPanel extends React.Component<DashboardPanelProps, any> {
   }
   }
 
 
   componentDidMount() {
   componentDidMount() {
+    var loader = this.props.getPanelLoader();
+    loader.load(this.element, this.props.panel, this.props.dashboard);
   }
   }
 
 
   render() {
   render() {

public/app/features/dashboard/dashgrid/PanelLoader.ts

+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 = '<plugin-component type="panel"></plugin-component>';
+    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);

public/app/features/dashboard/dashgrid/dashboard_plugin.ts

-import coreModule from 'app/core/core';
-
-

public/app/features/plugins/plugin_component.ts

@@ -68,7 +68,7 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $
     var componentInfo: any = {
     var componentInfo: any = {
       name: 'panel-plugin-' + scope.panel.type,
       name: 'panel-plugin-' + scope.panel.type,
       bindings: {dashboard: "=", panel: "=", row: "="},
       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];
     let panelInfo = config.panels[scope.panel.type];

public/app/partials/dashboard.html

@@ -9,7 +9,8 @@
 				<dashboard-submenu ng-if="dashboard.meta.submenuEnabled" dashboard="dashboard"></dashboard-submenu>
 				<dashboard-submenu ng-if="dashboard.meta.submenuEnabled" dashboard="dashboard"></dashboard-submenu>
 
 
         <!-- <dash&#45;grid dashboard="dashboard"></dash&#45;grid> -->
         <!-- <dash&#45;grid dashboard="dashboard"></dash&#45;grid> -->
-				<dashboard-grid dashboard="dashboard"></dashboard-grid>
+				<dashboard-grid dashboard="dashboard" get-panel-loader="getPanelLoader">
+				</dashboard-grid>
 
 
 			</div>
 			</div>
 		</div>
 		</div>