From ab9e1b35cdf48ccb4d303d4960b7fca9aaea85c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Sun, 1 Jul 2018 17:34:42 +0200
Subject: [PATCH] wip: minor progress on DataPanel

---
 .../dashboard/dashgrid/PanelChrome.tsx        |  4 +-
 public/app/features/panel/DataPanel.tsx       | 78 +++++++++++++++++++
 2 files changed, 80 insertions(+), 2 deletions(-)
 create mode 100644 public/app/features/panel/DataPanel.tsx

diff --git a/public/app/features/dashboard/dashgrid/PanelChrome.tsx b/public/app/features/dashboard/dashgrid/PanelChrome.tsx
index bf5f8044a37..3fd9df799af 100644
--- a/public/app/features/dashboard/dashgrid/PanelChrome.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelChrome.tsx
@@ -9,13 +9,13 @@ import { PanelEditor } from './PanelEditor';
 const TITLE_HEIGHT = 27;
 const PANEL_BORDER = 2;
 
-export interface PanelChromeProps {
+export interface Props {
   panel: PanelModel;
   dashboard: DashboardModel;
   component: any;
 }
 
-export class PanelChrome extends React.Component<PanelChromeProps, any> {
+export class PanelChrome extends React.Component<Props, any> {
   constructor(props) {
     super(props);
 
diff --git a/public/app/features/panel/DataPanel.tsx b/public/app/features/panel/DataPanel.tsx
new file mode 100644
index 00000000000..46418516a26
--- /dev/null
+++ b/public/app/features/panel/DataPanel.tsx
@@ -0,0 +1,78 @@
+import React, { Component, ComponentClass } from 'react';
+
+export interface OuterProps {
+  type: string;
+  queries: any[];
+  isVisible: boolean;
+}
+
+export interface AddedProps {
+  data: any[];
+}
+
+interface State {
+  isLoading: boolean;
+  data: any[];
+}
+
+const DataPanel = (ComposedComponent: ComponentClass<AddedProps & OuterProps>) => {
+  class Wrapper extends Component<OuterProps, State> {
+    public static defaultProps = {
+      isVisible: true,
+    };
+
+    constructor(props: OuterProps) {
+      super(props);
+
+      this.state = {
+        isLoading: false,
+        data: [],
+      };
+    }
+
+    public componentDidMount() {
+      this.issueQueries();
+    }
+
+    public issueQueries = () => {
+      const { queries, isVisible } = this.props;
+
+      if (!isVisible) {
+        return;
+      }
+
+      if (!queries.length) {
+        this.setState({ data: [{ message: 'no queries' }] });
+        return;
+      }
+
+      this.setState({ isLoading: true });
+    };
+
+    public render() {
+      const { data, isLoading } = this.state;
+
+      if (!data.length) {
+        return (
+          <div className="no-data">
+            <p>No Data</p>
+          </div>
+        );
+      }
+
+      if (isLoading) {
+        return (
+          <div className="loading">
+            <p>Loading</p>
+          </div>
+        );
+      }
+
+      return <ComposedComponent {...this.props} data={data} />;
+    }
+  }
+
+  return Wrapper;
+};
+
+export default DataPanel;