Browse Source

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

pull/16/head
rozetko 2 years ago
parent
commit
ae52125e5c
  1. 10
      src/panels/corpglory-dataexporter-panel/components/Panel.tsx
  2. 1
      src/panels/corpglory-dataexporter-panel/types.ts
  3. 20
      src/services/api_service.ts

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

@ -398,7 +398,7 @@ export function Panel({ width, height, timeRange, eventBus, timeZone }: Props) {
links: [ links: [
{ {
targetBlank: false, targetBlank: false,
title: 'Download', title: 'Delete',
url: '#', url: '#',
onClick: (event: DataLinkClickEvent) => onDeleteClick(event), 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 sortedTasks = _.orderBy(tasks, (task) => task.progress?.time, 'desc');
const taskToDelete = sortedTasks[rowIndex]; const taskToDelete = sortedTasks[rowIndex];
if (taskToDelete.progress?.status === ExportStatus.EXPORTING || taskToDelete.id === taskIdBeingDownloaded) { 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; return;
} }
await deleteTask(taskToDelete?.id); 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 sortedTasks = _.orderBy(tasks, (task) => task.progress?.time, 'desc');
const task = sortedTasks[rowIndex]; const task = sortedTasks[rowIndex];
if (task.progress?.status === ExportStatus.EXPORTING || task.id === taskIdBeingDownloaded) { 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; return;
} }
if (task.progress?.status === ExportStatus.ERROR) { 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; return;
} }
setTaskIdBeingDownloaded(task.id as string); setTaskIdBeingDownloaded(task.id as string);
await getStaticFile(task?.id); await getStaticFile(task?.filename);
setTaskIdBeingDownloaded(null); setTaskIdBeingDownloaded(null);
} }

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

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

20
src/services/api_service.ts

@ -2,6 +2,8 @@ import { ExportTask } from '../panels/corpglory-dataexporter-panel/types';
import axios from 'axios'; import axios from 'axios';
import * as _ from 'lodash'; 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_HOST = `${window.location.protocol}//${window.location.host}/`;
export const API_PROXY_PREFIX = 'api/plugin-proxy/corpglory-dataexporter-app'; 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 } }); await queryApi<ExportTask[]>('/task', { method: 'DELETE', data: { taskId } });
} }
export async function getStaticFile(taskId?: string): Promise<void> { export async function getStaticFile(filename?: string): Promise<void> {
if (_.isEmpty(taskId)) { if (_.isEmpty(filename)) {
console.warn(`can't download file without taskId`); appEvents.emit(AppEvents.alertWarning, ['Data Exporter', 'Can`t download a file without filename']);
console.warn(`can't download file without filename`);
return; 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 // create "a" HTML element with href to file & click
const link = document.createElement('a'); const link = document.createElement('a');
link.href = href; link.href = `${API_PROXY_PREFIX}${API_PATH_PREFIX}/static/${filename}.csv`;
link.setAttribute('download', `${taskId}.csv`); link.target = '_blank';
link.download = `${filename}.csv`;
document.body.appendChild(link); document.body.appendChild(link);
link.click(); link.click();
// clean up "a" element & remove ObjectURL
document.body.removeChild(link); document.body.removeChild(link);
URL.revokeObjectURL(href);
} }

Loading…
Cancel
Save