From f5bd4a5b724ea931f9b07a83778041ad2fc37d4a Mon Sep 17 00:00:00 2001
From: rozetko <rozetko@corpglory.com>
Date: Fri, 30 Dec 2022 15:15:00 +0300
Subject: [PATCH] download works

---
 .../components/Panel.tsx                      | 26 +++++++++++++------
 src/services/api_service.ts                   | 23 ++++++++++++++++
 2 files changed, 41 insertions(+), 8 deletions(-)

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 <RT = any>(path: string, config: RequestConfig) =>
 export async function getTasks(): Promise<TaskTableRowConfig[]> {
   return queryApi<TaskTableRowConfig[]>('/task', {});
 }
+
+export async function getStaticFile(filename?: string): Promise<void> {
+  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);
+}