From 63bf2a02789949e44a95c1edaa42c75468157fdc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Mon, 9 Oct 2017 17:52:25 +0200
Subject: [PATCH] grid: need to find a way to add angular component inside
 react

---
 .../dashboard/dashgrid/DashboardGrid.tsx      | 10 ++------
 .../dashboard/dashgrid/DashboardPanel.tsx     | 24 +++++++++++++++++++
 .../dashboard/dashgrid/dashboard_plugin.ts    |  3 +++
 3 files changed, 29 insertions(+), 8 deletions(-)
 create mode 100644 public/app/features/dashboard/dashgrid/DashboardPanel.tsx
 create mode 100644 public/app/features/dashboard/dashgrid/dashboard_plugin.ts

diff --git a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx
index 5a3ab3ea043..b6029f99ce7 100644
--- a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx
+++ b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import coreModule from 'app/core/core_module';
 import ReactGridLayout from 'react-grid-layout';
 import {DashboardModel} from '../model';
+import {DashboardPanel} from './DashboardPanel';
 import sizeMe from 'react-sizeme';
 
 const COLUMN_COUNT = 24;
@@ -68,14 +69,7 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
     for (let panel of this.props.dashboard.panels) {
       panelElements.push(
         <div key={panel.id.toString()} className="panel">
-          <div className="panel-container">
-            <div className="panel-header grid-drag-handle">
-              <div className="panel-title-container">{panel.type}</div>
-            </div>
-            <div className="panel-content">
-              {panel.title} - {panel.type}
-            </div>
-          </div>
+          <DashboardPanel panel={panel} />
         </div>,
       );
     }
diff --git a/public/app/features/dashboard/dashgrid/DashboardPanel.tsx b/public/app/features/dashboard/dashgrid/DashboardPanel.tsx
new file mode 100644
index 00000000000..16279ff99b4
--- /dev/null
+++ b/public/app/features/dashboard/dashgrid/DashboardPanel.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+
+export interface DashboardPanelProps {
+  panel: any;
+}
+
+export class DashboardPanel extends React.Component<DashboardPanelProps, any> {
+  private element: any;
+
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  componentDidMount() {
+  }
+
+  render() {
+    return (
+      <div ref={element => this.element = element} />
+    );
+  }
+}
+
diff --git a/public/app/features/dashboard/dashgrid/dashboard_plugin.ts b/public/app/features/dashboard/dashgrid/dashboard_plugin.ts
new file mode 100644
index 00000000000..92083830c52
--- /dev/null
+++ b/public/app/features/dashboard/dashgrid/dashboard_plugin.ts
@@ -0,0 +1,3 @@
+import coreModule from 'app/core/core';
+
+