update queries list on Add Task click

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

@@ -1,4 +1,4 @@
-import { PanelOptions, ExportTask, DashboardQuery, DatasourceType, ExportStatus, PanelStatus } from '../types';
+import { PanelOptions, ExportTask, DashboardQuery, DatasourceType, ExportStatus, PanelStatus, Dashboard } from '../types';
 
 import { convertTimestampToDate, convertTimeZoneTypeToName, getDashboardUid } from '../../../utils';
 import { CLOSE_ICON_BASE_64, DOWNLOAD_ICON_BASE_64, SELECT_ICON_BASE_64, UNSELECT_ICON_BASE_64 } from '../../../icons';
@@ -45,7 +45,7 @@ interface Props extends PanelProps<PanelOptions> {}
 
 export function Panel({ width, height, timeRange, eventBus, timeZone }: Props) {
   // TODO: Dashboard type
-  const [dashboard, setDashboard] = useState<any | null>(null);
+  const [dashboard, setDashboard] = useState<Dashboard | null>(null);
   const [datasources, setDatasources] = useState<DataSourceSettings[] | null>(null);
 
   const [tasks, setTasks] = useState<ExportTask[] | null>(null);
@@ -93,10 +93,28 @@ export function Panel({ width, height, timeRange, eventBus, timeZone }: Props) {
   }, []);
 
   useEffect(() => {
+    if (tasks === null) {
+      return;
+    }
+    const dataFrame = getDataFrameForTaskTable(tasks);
+    setTasksDataFrame(dataFrame);
+  }, [tasks]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(fetchTasks, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(() => {
+    if (queries === null) {
+      return;
+    }
+    setQueriesDataFrame(getDataFrameForQueriesTable(queries));
+  }, [queries]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  async function updateQueries(dashboard: Dashboard | null, datasources: DataSourceSettings[] | null): Promise<void> {
     if (!dashboard || !datasources) {
+      console.warn(`Can't update queries if there is no dashboard or datasources`);
       return;
     }
-    dashboard.panels.forEach((panel: PanelModel) => {
+    dashboard.panels?.forEach((panel: PanelModel) => {
       const queries: DashboardQuery[] = [];
 
       // @ts-ignore
@@ -118,24 +136,7 @@ export function Panel({ width, height, timeRange, eventBus, timeZone }: Props) {
 
       setQueries(queries);
     });
-  }, [dashboard, datasources]); // eslint-disable-line react-hooks/exhaustive-deps
+  }
-
-  useEffect(() => {
-    if (tasks === null) {
-      return;
-    }
-    const dataFrame = getDataFrameForTaskTable(tasks);
-    setTasksDataFrame(dataFrame);
-  }, [tasks]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  useEffect(fetchTasks, []); // eslint-disable-line react-hooks/exhaustive-deps
-
-  useEffect(() => {
-    if (queries === null) {
-      return;
-    }
-    setQueriesDataFrame(getDataFrameForQueriesTable(queries));
-  }, [queries]); // eslint-disable-line react-hooks/exhaustive-deps
 
   function fetchTasks(): void {
     getTasks()
@@ -212,7 +213,8 @@ export function Panel({ width, height, timeRange, eventBus, timeZone }: Props) {
     setQueries(queries.map((query: DashboardQuery) => ({ ...query, selected: false })));
   }
 
-  function openDatasourceModal(): void {
+  function openDatasourceModal(dashboard: Dashboard | null, datasources: DataSourceSettings[] | null): void {
+    updateQueries(dashboard, datasources);
     setTimeRange(timeRange);
     setModalVisibility(true);
   }
@@ -439,7 +441,7 @@ export function Panel({ width, height, timeRange, eventBus, timeZone }: Props) {
           aria-label="Rich history button"
           icon="plus"
           style={{ marginTop: '8px' }}
-          onClick={openDatasourceModal}
+          onClick={() => openDatasourceModal(dashboard, datasources)}
         >
           Add Task
         </Button>

src/panels/corpglory-dataexporter-panel/types.ts

@@ -49,3 +49,117 @@ export type DashboardQuery = {
   panel: PanelModel;
   datasource: DataSourceSettings;
 };
+
+export interface Dashboard {
+  /**
+   * TODO docs
+   */
+  annotations?: {
+    list: Array<any>;
+  };
+  /**
+   * Description of dashboard.
+   */
+  description?: string;
+  /**
+   * Whether a dashboard is editable or not.
+   */
+  editable: boolean;
+  /**
+   * TODO docs
+   */
+  fiscalYearStartMonth?: number;
+  gnetId?: string;
+  graphTooltip: any;
+  /**
+   * Unique numeric identifier for the dashboard.
+   * TODO must isolate or remove identifiers local to a Grafana instance...?
+   */
+  id?: number;
+  /**
+   * TODO docs
+   */
+  links?: Array<any>;
+  /**
+   * TODO docs
+   */
+  liveNow?: boolean;
+  panels?: Array<PanelModel>;
+  /**
+   * TODO docs
+   */
+  refresh?: (string | false);
+  /**
+   * Version of the JSON schema, incremented each time a Grafana update brings
+   * changes to said schema.
+   * TODO this is the existing schema numbering system. It will be replaced by Thema's themaVersion
+   */
+  schemaVersion: number;
+  /**
+   * Theme of dashboard.
+   */
+  style: ('light' | 'dark');
+  /**
+   * Tags associated with dashboard.
+   */
+  tags?: Array<string>;
+  /**
+   * TODO docs
+   */
+  templating?: {
+    list: Array<any>;
+  };
+  /**
+   * Time range for dashboard, e.g. last 6 hours, last 7 days, etc
+   */
+  time?: {
+    from: string;
+    to: string;
+  };
+  /**
+   * TODO docs
+   * TODO this appears to be spread all over in the frontend. Concepts will likely need tidying in tandem with schema changes
+   */
+  timepicker?: {
+    /**
+     * Whether timepicker is collapsed or not.
+     */
+    collapse: boolean;
+    /**
+     * Whether timepicker is enabled or not.
+     */
+    enable: boolean;
+    /**
+     * Whether timepicker is visible or not.
+     */
+    hidden: boolean;
+    /**
+     * Selectable intervals for auto-refresh.
+     */
+    refresh_intervals: Array<string>;
+    /**
+     * TODO docs
+     */
+    time_options: Array<string>;
+  };
+  /**
+   * Timezone of dashboard,
+   */
+  timezone?: ('browser' | 'utc' | string);
+  /**
+   * Title of dashboard.
+   */
+  title?: string;
+  /**
+   * Unique dashboard identifier that can be generated by anyone. string (8-40)
+   */
+  uid?: string;
+  /**
+   * Version of the dashboard, incremented each time the dashboard is updated.
+   */
+  version?: number;
+  /**
+   * TODO docs
+   */
+  weekStart?: string;
+}