panel: display tasks from the api

src/panels/corpglory-dataexporter-panel/components/Panel.tsx

@@ -1,7 +1,8 @@
 import { PanelOptions, TableRowConfig } from '../types';
 
-import { Table, Button, HorizontalGroup } from '@grafana/ui';
+import { makeRequest } from 'services/network_service';
 
+import { Table, Button, HorizontalGroup, LoadingPlaceholder } from '@grafana/ui';
 import {
   PanelProps,
   toDataFrame,
@@ -12,23 +13,50 @@ import {
   DataLinkClickEvent,
 } from '@grafana/data';
 
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import * as _ from 'lodash';
 
 interface Props extends PanelProps<PanelOptions> {}
 
 export function Panel({ options, data, width, height, timeRange, onChangeTimeRange }: Props) {
   console.log('panel', data);
-  const configs: TableRowConfig[] = [];
-  const [tasks, setTasks] = useState(configs);
+
+  const [tasks, setTasks] = useState<TableRowConfig[] | null>(null);
+  const [dataFrame, setDataFrame] = useState<DataFrame | null>(null);
+
+  useEffect(() => {
+    if(tasks === null) {
+      return;
+    }
     const dataFrame = getDataFrameForTable(tasks, setTasks);
+    setDataFrame(dataFrame)
+  }, [tasks]);
+
+  useEffect(() => {
+    // TODO: move this function to Network Service
+    async function getTasks(): Promise<TableRowConfig[]> {
+      return makeRequest<TableRowConfig[]>('/tasks', {});
+    }
+
+    setTimeout(() => {
+
+      getTasks().then(tasks => setTasks(tasks)).catch(err => console.error(err));
+    }, 2000);
+  }, []);
 
   function onAddTaskClick(): void {
+    if(tasks === null) {
+      return;
+    }
     const configs = [...tasks, createConfigItem()];
     setTasks(configs);
   }
 
   return (
+    <div>
+      {dataFrame === null ? 
+        // TODO: if datasource responds with error, display the error
+        <LoadingPlaceholder text="Loading..."></LoadingPlaceholder> :
         <div>
           <Table width={width} height={height - 40} data={dataFrame} />
           <HorizontalGroup justify="flex-end">
@@ -43,6 +71,8 @@ export function Panel({ options, data, width, height, timeRange, onChangeTimeRan
             </Button>
           </HorizontalGroup>
         </div>
+      }
+    </div>
   );
 }