Merge branch 'master' of code.corpglory.net:corpglory/grafana-data-exporter-app into subscribe-to-events

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

@@ -1,8 +1,9 @@
 import { PanelOptions, TaskTableRowConfig, DatasourceTableRowConfig } from '../types';
 
-import { Table, Button, HorizontalGroup, Modal } from '@grafana/ui';
 import { getBackendSrv } from '@grafana/runtime';
+import { makeRequest } from 'services/network_service';
 
+import { Table, Button, HorizontalGroup, Modal, LoadingPlaceholder } from '@grafana/ui';
 import {
   PanelProps,
   toDataFrame,
@@ -13,15 +14,33 @@ 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) {
-  const taskConfigs: TaskTableRowConfig[] = [];
-  const [tasks, setTasks] = useState(taskConfigs);
-  const tasksDataFrame = getDataFrameForTaskTable(tasks, setTasks);
+  const [tasks, setTasks] = useState<TaskTableRowConfig[] | null>(null);
+  const [tasksDataFrame, setTasksDataFrame] = useState<DataFrame | null>(null);
+
+  useEffect(() => {
+    if (tasks === null) {
+      return;
+    }
+    const dataFrame = getDataFrameForTaskTable(tasks, setTasks);
+    setTasksDataFrame(dataFrame);
+  }, [tasks]);
+
+  useEffect(() => {
+    // TODO: move this function to Network Service
+    async function getTasks(): Promise<TaskTableRowConfig[]> {
+      return makeRequest<TaskTableRowConfig[]>('/tasks', {});
+    }
+
+    getTasks()
+      .then((tasks) => setTasks(tasks))
+      .catch((err) => console.error(err));
+  }, []);
 
   const datasourceConfigs: DatasourceTableRowConfig[] = [];
   const [datasources, setDatasources] = useState(datasourceConfigs);
@@ -62,7 +81,12 @@ export function Panel({ options, data, width, height, timeRange, onChangeTimeRan
     const newTasks = _.map(selectedDatasources, (datasource: DatasourceTableRowConfig) =>
       createTaskFromDatasource(datasource)
     );
-    setTasks([...tasks, ...newTasks]);
+    if (_.isEmpty(tasks)) {
+      setTasks([...newTasks]);
+    } else {
+      setTasks([...(tasks as TaskTableRowConfig[]), ...newTasks]);
+    }
+
     onCloseModal();
     unselectAllDatasources();
   }
@@ -75,7 +99,7 @@ export function Panel({ options, data, width, height, timeRange, onChangeTimeRan
     setDatasources(updatedDatasources);
   }
 
-  function openModal(): void {
+  function openDatasourceModal(): void {
     setModalVisibility(true);
   }
 
@@ -85,15 +109,20 @@ export function Panel({ options, data, width, height, timeRange, onChangeTimeRan
   }
 
   return (
+    <div>
+      {tasksDataFrame === null ? (
+        // TODO: if datasource responds with error, display the error
+        <LoadingPlaceholder text="Loading..."></LoadingPlaceholder>
+      ) : (
         <div>
           <Table width={width} height={height - 40} data={tasksDataFrame} />
           <HorizontalGroup justify="flex-end">
             <Button
               variant="primary"
-          aria-label="Add task button"
+              aria-label="Rich history button"
               icon="plus"
               style={{ marginTop: '8px' }}
-          onClick={openModal}
+              onClick={openDatasourceModal}
             >
               Add Task
             </Button>
@@ -102,16 +131,18 @@ export function Panel({ options, data, width, height, timeRange, onChangeTimeRan
               <HorizontalGroup justify="flex-end">
                 <Button
                   variant="primary"
-              aria-label="Export data button"
+                  aria-label="Add task button"
                   style={{ marginTop: '8px' }}
                   onClick={onAddTaskClick}
                 >
-              Export data
+                  Add Task
                 </Button>
               </HorizontalGroup>
             </Modal>
           </HorizontalGroup>
         </div>
+      )}
+    </div>
   );
 }