Merge branch 'react-panels' of github.com:grafana/grafana into react-panels

Author: torkelo

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);
 

public/app/features/panel/DataPanel.tsx

@@ -1,23 +1,79 @@
 import React, { Component, ComponentClass } from 'react';
 import _ from 'lodash';
 
-export interface Props {
+export interface OuterProps {
   type: string;
-  queries: Query[];
+  queries: any[];
+  isVisible: boolean;
 }
 
-interface State {
-  isLoading: boolean;
-  timeSeries: TimeSeriesServerResponse[];
+export interface AddedProps {
+  data: any[];
 }
 
-export interface OriginalProps {
-  data: TimeSeriesServerResponse[];
+interface State {
   isLoading: boolean;
+  data: any[];
 }
 
-const DataPanel = (ComposedComponent: ComponentClass<OriginalProps & Props>) => {
-  class Wrapper extends Component<Props, State> {}
+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;