download csv with a proper filename && replace alert-errors with warnings

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

@@ -398,7 +398,7 @@ export function Panel({ width, height, timeRange, eventBus, timeZone }: Props) {
             links: [
               {
                 targetBlank: false,
-                title: 'Download',
+                title: 'Delete',
                 url: '#',
                 onClick: (event: DataLinkClickEvent) => onDeleteClick(event),
               },
@@ -426,7 +426,7 @@ export function Panel({ width, height, timeRange, eventBus, timeZone }: Props) {
     const sortedTasks = _.orderBy(tasks, (task) => task.progress?.time, 'desc');
     const taskToDelete = sortedTasks[rowIndex];
     if (taskToDelete.progress?.status === ExportStatus.EXPORTING || taskToDelete.id === taskIdBeingDownloaded) {
-      appEvents.emit(AppEvents.alertError, ['Data Exporter', 'Active task can`t be deleted']);
+      appEvents.emit(AppEvents.alertWarning, ['Data Exporter', 'Active task can`t be deleted']);
       return;
     }
     await deleteTask(taskToDelete?.id);
@@ -440,15 +440,15 @@ export function Panel({ width, height, timeRange, eventBus, timeZone }: Props) {
     const sortedTasks = _.orderBy(tasks, (task) => task.progress?.time, 'desc');
     const task = sortedTasks[rowIndex];
     if (task.progress?.status === ExportStatus.EXPORTING || task.id === taskIdBeingDownloaded) {
-      appEvents.emit(AppEvents.alertError, ['Data Exporter', 'Active task can`t be downloaded']);
+      appEvents.emit(AppEvents.alertWarning, ['Data Exporter', 'Active task can`t be downloaded']);
       return;
     }
     if (task.progress?.status === ExportStatus.ERROR) {
-      appEvents.emit(AppEvents.alertError, ['Data Exporter', 'Failed task can`t be downloaded']);
+      appEvents.emit(AppEvents.alertWarning, ['Data Exporter', 'Failed task can`t be downloaded']);
       return;
     }
     setTaskIdBeingDownloaded(task.id as string);
-    await getStaticFile(task?.id);
+    await getStaticFile(task?.filename);
     setTaskIdBeingDownloaded(null);
   }
 

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

@@ -43,6 +43,7 @@ export type ExportTask = {
   csvDelimiter: string;
   progress?: ExportProgress;
   id?: string;
+  filename?: string;
 };
 
 export type DashboardQuery = {

src/services/api_service.ts

@@ -2,6 +2,8 @@ import { ExportTask } from '../panels/corpglory-dataexporter-panel/types';
 
 import axios from 'axios';
 import * as _ from 'lodash';
+import appEvents from 'grafana/app/core/app_events';
+import { AppEvents } from '@grafana/data';
 
 export const API_HOST = `${window.location.protocol}//${window.location.host}/`;
 export const API_PROXY_PREFIX = 'api/plugin-proxy/corpglory-dataexporter-app';
@@ -55,24 +57,20 @@ export async function deleteTask(taskId?: string): Promise<void> {
   await queryApi<ExportTask[]>('/task', { method: 'DELETE', data: { taskId } });
 }
 
-export async function getStaticFile(taskId?: string): Promise<void> {
-  if (_.isEmpty(taskId)) {
-    console.warn(`can't download file without taskId`);
+export async function getStaticFile(filename?: string): Promise<void> {
+  if (_.isEmpty(filename)) {
+    appEvents.emit(AppEvents.alertWarning, ['Data Exporter', 'Can`t download a file without filename']);
+    console.warn(`can't download file without filename`);
     return;
   }
-  const respData = await queryApi(`/static/${taskId}.csv`, {});
-  // TODO: check if resp exists
-  // create file link in browser's memory
-  const href = URL.createObjectURL(new Blob([respData], { type: 'text/csv' }));
 
   // create "a" HTML element with href to file & click
   const link = document.createElement('a');
-  link.href = href;
-  link.setAttribute('download', `${taskId}.csv`);
+  link.href = `${API_PROXY_PREFIX}${API_PATH_PREFIX}/static/${filename}.csv`;
+  link.target = '_blank';
+  link.download = `${filename}.csv`;
   document.body.appendChild(link);
   link.click();
 
-  // clean up "a" element & remove ObjectURL
   document.body.removeChild(link);
-  URL.revokeObjectURL(href);
 }