it works

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

@@ -3,7 +3,7 @@ import { PanelOptions, TaskTableRowConfig, QueryTableRowConfig, DatasourceType }
 import { convertTimestampToDate, getDashboardUid } from '../../../utils';
 import { CLOSE_ICON_BASE_64, DOWNLOAD_ICON_BASE_64, SELECT_ICON_BASE_64, UNSELECT_ICON_BASE_64 } from '../../../icons';
 
-import { queryApi } from '../../../services/api_service';
+import { getTasks, queryApi } from '../../../services/api_service';
 import { getDashboardByUid, getDatasources } from '../../../services/grafana_backend_service';
 
 import { contextSrv } from 'grafana/app/core/core';
@@ -21,13 +21,15 @@ import {
   DataQuery,
   DataSourceSettings,
 } from '@grafana/data';
+import { RefreshEvent } from '@grafana/runtime';
 
 import React, { useState, useEffect } from 'react';
 import * as _ from 'lodash';
 
 interface Props extends PanelProps<PanelOptions> {}
 
-export function Panel({ width, height, timeRange }: Props) {
+export function Panel({ width, height, timeRange, eventBus }: Props) {
+
   // TODO: Dashboard type
   const [dashboard, setDashboard] = useState<any | null>(null);
   const [datasources, setDatasources] = useState<DataSourceSettings[] | null>(null);
@@ -96,16 +98,7 @@ export function Panel({ width, height, timeRange }: Props) {
     setTasksDataFrame(dataFrame);
   }, [tasks]);
 
-  useEffect(() => {
+  useEffect(refresh, []);
-    // TODO: move this function to API Service
-    async function getTasks(): Promise<TaskTableRowConfig[]> {
-      return queryApi<TaskTableRowConfig[]>('/task', {});
-    }
-
-    getTasks()
-      .then((tasks) => setTasks(tasks))
-      .catch((err) => console.error(err));
-  }, []);
 
   useEffect(() => {
     if (queries === null) {
@@ -114,6 +107,15 @@ export function Panel({ width, height, timeRange }: Props) {
     setQueriesDataFrame(getDataFrameForQueriesTable(queries));
   }, [queries]);
 
+  function refresh(): void {
+    console.log('rfrsh')
+    getTasks()
+      .then((tasks) => setTasks(tasks))
+      .catch((err) => console.error(err));
+  }
+
+  eventBus.subscribe(RefreshEvent, refresh);
+
   function getDatasourceByUid(uid?: string): DataSourceSettings | undefined {
     if (_.isNil(uid)) {
       console.warn(`uid is required to get datasource`);
@@ -137,7 +139,6 @@ export function Panel({ width, height, timeRange }: Props) {
 
     // TODO: timerange picker
     const timerange: [number, number] = [timeRange.from.unix(), timeRange.to.unix()];
-
     // TODO: move this function to API Service
     await queryApi('/task', {
       method: 'POST',
@@ -145,13 +146,13 @@ export function Panel({ width, height, timeRange }: Props) {
         from: timerange[0] * 1000,
         to: timerange[1] * 1000,
         // @ts-ignore
-        username: contextSrv.user.username,
+        username: contextSrv.user.name,
         tasks: selectedQueries,
         url: window.location.toString(),
       },
     });
 
-    // TODO: refresh panel (or get websocket events)
+    refresh();
 
     onCloseModal();
     unselectAllQueries();
@@ -241,7 +242,7 @@ export function Panel({ width, height, timeRange }: Props) {
         {
           name: 'User',
           type: FieldType.string,
-          values: _.map(configs, (config) => config.user),
+          values: _.map(configs, (config) => config.username),
         },
         {
           name: 'Datasource',
@@ -256,7 +257,7 @@ export function Panel({ width, height, timeRange }: Props) {
         {
           name: 'Progress',
           type: FieldType.string,
-          values: _.map(configs, (config) => `${config.progress}%`),
+          values: _.map(configs, (config) => `${(config.progress * 100).toFixed(0)}%`),
         },
         {
           name: 'Status',

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

@@ -4,13 +4,12 @@ export interface PanelOptions {}
 
 export type TaskTableRowConfig = {
   timestamp: number;
-  // TODO: rename user to username
+  username: string;
-  user: string;
   datasourceRef: DataSourceRef;
   rowsCount: number;
   progress: number;
   status: string;
-  downloadLink: string;
+  filename?: string;
 };
 
 export type QueryTableRowConfig = Omit<DataQuery, 'datasource'> & {

src/services/api_service.ts

@@ -1,3 +1,5 @@
+import { TaskTableRowConfig } from '../panels/corpglory-dataexporter-panel/types';
+
 import axios from 'axios';
 
 export const API_HOST = `${window.location.protocol}//${window.location.host}/`;
@@ -39,3 +41,7 @@ export const queryApi = async <RT = any>(path: string, config: RequestConfig) =>
 
   return response.data as RT;
 };
+
+export async function getTasks(): Promise<TaskTableRowConfig[]> {
+  return queryApi<TaskTableRowConfig[]>('/task', {});
+}