diff --git a/src/panels/corpglory-dataexporter-panel/components/Panel.tsx b/src/panels/corpglory-dataexporter-panel/components/Panel.tsx index 0caac7e..2bbb81b 100644 --- a/src/panels/corpglory-dataexporter-panel/components/Panel.tsx +++ b/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 { getTasks, queryApi } from '../../../services/api_service'; +import { getStaticFile, getTasks, queryApi } from '../../../services/api_service'; import { getDashboardByUid, getDatasources } from '../../../services/grafana_backend_service'; import { contextSrv } from 'grafana/app/core/core'; @@ -195,7 +195,7 @@ export function Panel({ width, height, timeRange, eventBus }: Props) { targetBlank: false, title: 'Select', url: '#', - onClick: (event: DataLinkClickEvent) => onDatasourceSelectClick(event, configs), + onClick: (event: DataLinkClickEvent) => onDatasourceSelectClick(event), }, ], }, @@ -276,9 +276,9 @@ export function Panel({ width, height, timeRange, eventBus }: Props) { links: [ { targetBlank: false, - title: 'CSV link', - // TODO: config.downloadLink - url: 'https://chartwerk.io/', + title: 'Download', + url: '#', + onClick: (event: DataLinkClickEvent) => onDownloadClick(event), }, ], }, @@ -297,7 +297,7 @@ export function Panel({ width, height, timeRange, eventBus }: Props) { targetBlank: false, title: 'Delete', url: '#', - onClick: (event: DataLinkClickEvent) => onDeleteClick(event, configs), + onClick: (event: DataLinkClickEvent) => onDeleteClick(event), }, ], }, @@ -317,14 +317,24 @@ export function Panel({ width, height, timeRange, eventBus }: Props) { return dataFrames[0]; } - function onDeleteClick(e: DataLinkClickEvent, tasks: TaskTableRowConfig[]): void { + function onDeleteClick(e: DataLinkClickEvent): void { // TODO: make DELETE request to the api const rowIndex = e.origin.rowIndex; const filteredTasks = _.filter(tasks, (task, idx) => idx !== rowIndex); setTasks(filteredTasks); } - function onDatasourceSelectClick(e: DataLinkClickEvent, queries: QueryTableRowConfig[]): void { + function onDownloadClick(e: DataLinkClickEvent): void { + // TODO: make DELETE request to the api + const rowIndex = e.origin.rowIndex; + const task = _.find(tasks, (task, idx) => idx !== rowIndex); + getStaticFile(task?.filename); + } + + function onDatasourceSelectClick(e: DataLinkClickEvent): void { + if (queries === null) { + return; + } const rowIndex = e.origin.rowIndex; const updatedQueries = _.clone(queries); updatedQueries[rowIndex].selected = !updatedQueries[rowIndex].selected; diff --git a/src/services/api_service.ts b/src/services/api_service.ts index 84b2fc4..43dc643 100644 --- a/src/services/api_service.ts +++ b/src/services/api_service.ts @@ -1,6 +1,7 @@ import { TaskTableRowConfig } from '../panels/corpglory-dataexporter-panel/types'; import axios from 'axios'; +import * as _ from 'lodash'; export const API_HOST = `${window.location.protocol}//${window.location.host}/`; export const API_PROXY_PREFIX = 'api/plugin-proxy/corpglory-dataexporter-app'; @@ -45,3 +46,25 @@ export const queryApi = async (path: string, config: RequestConfig) => export async function getTasks(): Promise { return queryApi('/task', {}); } + +export async function getStaticFile(filename?: string): Promise { + if (_.isEmpty(filename)) { + console.warn(`can't download file without name`); + return; + } + const respData = await queryApi(`/static/${filename}.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', `${filename}.csv`); + document.body.appendChild(link); + link.click(); + + // clean up "a" element & remove ObjectURL + document.body.removeChild(link); + URL.revokeObjectURL(href); +}