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,36 +13,65 @@ 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 dataFrame = getDataFrameForTable(tasks, setTasks);
+
+  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>
-      <Table width={width} height={height - 40} data={dataFrame} />
-      <HorizontalGroup justify="flex-end">
-        <Button
-          variant="primary"
-          aria-label="Rich history button"
-          icon="plus"
-          style={{ marginTop: '8px' }}
-          onClick={onAddTaskClick}
-        >
-          Add Task
-        </Button>
-      </HorizontalGroup>
+      {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">
+            <Button
+              variant="primary"
+              aria-label="Rich history button"
+              icon="plus"
+              style={{ marginTop: '8px' }}
+              onClick={onAddTaskClick}
+            >
+              Add Task
+            </Button>
+          </HorizontalGroup>
+        </div>
+      }
     </div>
   );
 }