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);
   }
 
@@ -86,31 +110,38 @@ export function Panel({ options, data, width, height, timeRange, onChangeTimeRan
 
   return (
     <div>
-      <Table width={width} height={height - 40} data={tasksDataFrame} />
-      <HorizontalGroup justify="flex-end">
-        <Button
-          variant="primary"
-          aria-label="Add task button"
-          icon="plus"
-          style={{ marginTop: '8px' }}
-          onClick={openModal}
-        >
-          Add Task
-        </Button>
-        <Modal title="Select Datasources" isOpen={isModalOpen} onDismiss={onCloseModal}>
-          <Table width={width / 2 - 20} height={height - 40} data={datasourceDataFrame} />
+      {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="Export data button"
+              aria-label="Rich history button"
+              icon="plus"
               style={{ marginTop: '8px' }}
-              onClick={onAddTaskClick}
+              onClick={openDatasourceModal}
             >
-              Export data
+              Add Task
             </Button>
+            <Modal title="Select Datasources" isOpen={isModalOpen} onDismiss={onCloseModal}>
+              <Table width={width / 2 - 20} height={height - 40} data={datasourceDataFrame} />
+              <HorizontalGroup justify="flex-end">
+                <Button
+                  variant="primary"
+                  aria-label="Add task button"
+                  style={{ marginTop: '8px' }}
+                  onClick={onAddTaskClick}
+                >
+                  Add Task
+                </Button>
+              </HorizontalGroup>
+            </Modal>
           </HorizontalGroup>
-        </Modal>
-      </HorizontalGroup>
+        </div>
+      )}
     </div>
   );
 }