corpglory
/
grafana-data-exporter-app
2
0
Fork 0
Code Issues Pull Requests Projects Releases 5 Wiki Activity
Browse Source

Merge pull request 'display preloader while downloading && upd icons' (#14) from display-preloader into master 

Reviewed-on: #14
pull/15/head
rozetko 2 years ago
parent
19c2f5a13f 58e0b17546
commit
c869a8326c
2 changed files with 28 additions and 18 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 10
      src/icons.ts
  2. 36
      src/panels/corpglory-dataexporter-panel/components/Panel.tsx

10
src/icons.ts
Unescape View File

@ -1,8 +1,10 @@
export const CLOSE_ICON_BASE_64 = export const CLOSE_ICON_BASE_64 =
'iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACJSURBVHgB7ZPRCcAgDESv0lWc0zhC53OIjmAVUpCSamL76YEoyfFIiAGWfldK6SwnKHyhep9xJ3iPcqgH5RyxV1VlBWYJypXVHMEiCaqBbRhAy3W3B76j954wq6ZSVZsOY+WXt6i9l2ymGTlUq0VpOcIqaQC96Zth01DN1zBBefVI4SNp9Za+6wLcH6DKFrfpxgAAAABJRU5ErkJggg=='; 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACJSURBVHgB7ZPRCcAgDESv0lWc0zhC53OIjmAVUpCSamL76YEoyfFIiAGWfldK6SwnKHyhep9xJ3iPcqgH5RyxV1VlBWYJypXVHMEiCaqBbRhAy3W3B76j954wq6ZSVZsOY+WXt6i9l2ymGTlUq0VpOcIqaQC96Zth01DN1zBBefVI4SNp9Za+6wLcH6DKFrfpxgAAAABJRU5ErkJggg==';
export const OPTIONS_ICON_BASE_64 = export const OPTIONS_ICON_BASE_64 =
'iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAS1BMVEUAAADH0NnH0NnH0NnH0NnH0NnH0NnH0NnH0NnH0NnH0NnH0NnH0NnH0NnH0NnH0NnH0NnH0NnH0NnH0NnH0NnH0NnH0NnH0Nn///+uWGxHAAAAF3RSTlMAABI4MAgNNbzy7JcQG6zvoPxPbavwDHoS9oEAAAABYktHRBibaYUeAAAACXBIWXMAAABgAAAAYADwa0LPAAAAB3RJTUUH5wEUFy4lfOQAfAAAAFdJREFUGNPFjkkKwCAQBEcd912TzP9/GglIQvBuXQoamm6ArbCHv7hAOaS0VkMSBWeAxjofIKacU4TgnTUIhYhqgz5EHVodKutw1o98vvU5dH2Hlpe2cgMuNAUd58WuNgAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMy0wMS0yMFQyMDo0NjozNyswMzowMDMOisYAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjMtMDEtMjBUMjA6NDY6MzcrMDM6MDBCUzJ6AAAAAElFTkSuQmCC'; 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAwklEQVR4nO2Syw3CMBBEc+AIlRAK4NMGn05QoAgIZwoiog2UEmBnN9KixY5wTLjk7JFWsnbsJ43GWZaUNExAsyOSKxEfVHXS9TADpHSDPPTsLhEf7S3QbD9LgwCi7RBJpaqjFkbEr69nZwe1O0Ry777lIgO4Dpc2zLxwQLnEHiBn85h59etx/Q8498CyB3jywGUP8GGRiyjyLYicR5GfAKZB5CqKvG9L2fhSClUdR6XkFtONgwWljK0DX8p64J9ISnoD5XdaQ/60uKsAAAAASUVORK5CYII=';
export const UNSELECT_ICON_BASE_64 = export const UNSELECT_ICON_BASE_64 =
'PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMC41IiB5PSIwLjUiIHdpZHRoPSIxNSIgaGVpZ2h0PSIxNSIgcng9IjEuNSIgZmlsbD0iIzExMTIxNiIgc3Ryb2tlPSIjMkQyRTM0Ii8+Cjwvc3ZnPgo='; 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMC41IiB5PSIwLjUiIHdpZHRoPSIxNSIgaGVpZ2h0PSIxNSIgcng9IjEuNSIgZmlsbD0iIzExMTIxNiIgc3Ryb2tlPSIjMkQyRTM0Ii8+Cjwvc3ZnPgo=';
export const SELECT_ICON_BASE_64 = export const SELECT_ICON_BASE_64 =
'PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiByeD0iMiIgZmlsbD0iIzRBNzFEMiIvPgo8cGF0aCBkPSJNNS45ODI2NCAxMi41MjE3QzUuNzczOTUgMTIuNTIxNyA1LjU4MjY0IDEyLjQ1MjIgNS40MjYxMiAxMi4yOTU2TDEuOTY1MjUgOC44MzQ3NkMxLjY1MjIxIDguNTIxNzIgMS42NTIyMSA4LjAzNDc2IDEuOTY1MjUgNy43MjE3MkMyLjI3ODI5IDcuNDA4NjcgMi43NjUyNSA3LjQwODY3IDMuMDc4MjkgNy43MjE3Mkw2LjAwMDAzIDEwLjYyNjFMMTIuOTM5MiAzLjcwNDMzQzEzLjI1MjIgMy4zOTEyOCAxMy43MzkyIDMuMzkxMjggMTQuMDUyMiAzLjcwNDMzQzE0LjM2NTMgNC4wMTczNyAxNC4zNjUzIDQuNTA0MzMgMTQuMDUyMiA0LjgxNzM3TDYuNTU2NTYgMTIuMjk1NkM2LjM4MjY0IDEyLjQ1MjIgNi4xOTEzNCAxMi41MjE3IDUuOTgyNjQgMTIuNTIxN1YxMi41MjE3WiIgZmlsbD0iI0ZFRkZGRiIvPgo8L3N2Zz4K'; 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiByeD0iMiIgZmlsbD0iIzRBNzFEMiIvPgo8cGF0aCBkPSJNNS45ODI2NCAxMi41MjE3QzUuNzczOTUgMTIuNTIxNyA1LjU4MjY0IDEyLjQ1MjIgNS40MjYxMiAxMi4yOTU2TDEuOTY1MjUgOC44MzQ3NkMxLjY1MjIxIDguNTIxNzIgMS42NTIyMSA4LjAzNDc2IDEuOTY1MjUgNy43MjE3MkMyLjI3ODI5IDcuNDA4NjcgMi43NjUyNSA3LjQwODY3IDMuMDc4MjkgNy43MjE3Mkw2LjAwMDAzIDEwLjYyNjFMMTIuOTM5MiAzLjcwNDMzQzEzLjI1MjIgMy4zOTEyOCAxMy43MzkyIDMuMzkxMjggMTQuMDUyMiAzLjcwNDMzQzE0LjM2NTMgNC4wMTczNyAxNC4zNjUzIDQuNTA0MzMgMTQuMDUyMiA0LjgxNzM3TDYuNTU2NTYgMTIuMjk1NkM2LjM4MjY0IDEyLjQ1MjIgNi4xOTEzNCAxMi41MjE3IDUuOTgyNjQgMTIuNTIxN1YxMi41MjE3WiIgZmlsbD0iI0ZFRkZGRiIvPgo8L3N2Zz4K';
export const DOWNLOADING_ICON_BASE_64 =
'data:image/gif;base64,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';

36
src/panels/corpglory-dataexporter-panel/components/Panel.tsx
Unescape View File

@ -9,12 +9,18 @@ import {
} from '../types'; } from '../types';
import { convertTimestampToDate, convertTimeZoneTypeToName, getCurrentDashboardUid } from '../../../utils'; import { convertTimestampToDate, convertTimeZoneTypeToName, getCurrentDashboardUid } from '../../../utils';
import { CLOSE_ICON_BASE_64, OPTIONS_ICON_BASE_64, SELECT_ICON_BASE_64, UNSELECT_ICON_BASE_64 } from '../../../icons'; import {
CLOSE_ICON_BASE_64,
DOWNLOADING_ICON_BASE_64,
OPTIONS_ICON_BASE_64,
SELECT_ICON_BASE_64,
UNSELECT_ICON_BASE_64,
} from '../../../icons';
import { deleteTask, getStaticFile, getTasks, queryApi } from '../../../services/api_service'; import { deleteTask, getStaticFile, getTasks, queryApi } from '../../../services/api_service';
import { getDashboardByUid, getDatasources } from '../../../services/grafana_backend_service'; import { getDashboardByUid, getDatasources } from '../../../services/grafana_backend_service';
import { appEvents, contextSrv } from 'grafana/app/core/core'; import { contextSrv } from 'grafana/app/core/core';
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import { import {
@ -40,7 +46,6 @@ import {
DataSourceSettings, DataSourceSettings,
TimeRange, TimeRange,
OrgRole, OrgRole,
AppEvents,
} from '@grafana/data'; } from '@grafana/data';
import { RefreshEvent } from '@grafana/runtime'; import { RefreshEvent } from '@grafana/runtime';
@ -58,6 +63,7 @@ export function Panel({ width, height, timeRange, eventBus, timeZone }: Props) {
const [tasks, setTasks] = useState<ExportTask[] | null>(null); const [tasks, setTasks] = useState<ExportTask[] | null>(null);
const [queries, setQueries] = useState<DashboardQuery[] | null>(null); const [queries, setQueries] = useState<DashboardQuery[] | null>(null);
const [taskIdBeingDownloaded, setTaskIdBeingDownloaded] = useState<string | null>(null);
const [tasksDataFrame, setTasksDataFrame] = useState<DataFrame | null>(null); const [tasksDataFrame, setTasksDataFrame] = useState<DataFrame | null>(null);
const [queriesDataFrame, setQueriesDataFrame] = useState<DataFrame | null>(null); const [queriesDataFrame, setQueriesDataFrame] = useState<DataFrame | null>(null);
@ -106,7 +112,7 @@ export function Panel({ width, height, timeRange, eventBus, timeZone }: Props) {
} }
const dataFrame = getDataFrameForTaskTable(tasks); const dataFrame = getDataFrameForTaskTable(tasks);
setTasksDataFrame(dataFrame); setTasksDataFrame(dataFrame);
}, [tasks]); // eslint-disable-line react-hooks/exhaustive-deps }, [tasks, taskIdBeingDownloaded]); // eslint-disable-line react-hooks/exhaustive-deps
useEffect(fetchTasks, []); // eslint-disable-line react-hooks/exhaustive-deps useEffect(fetchTasks, []); // eslint-disable-line react-hooks/exhaustive-deps
@ -243,10 +249,7 @@ export function Panel({ width, height, timeRange, eventBus, timeZone }: Props) {
{ {
name: 'Select', name: 'Select',
type: FieldType.string, type: FieldType.string,
values: _.map( values: _.map(queries, (query) => (query.selected ? SELECT_ICON_BASE_64 : UNSELECT_ICON_BASE_64)),
queries,
(query) => `data:image/svg+xml;base64,${query.selected ? SELECT_ICON_BASE_64 : UNSELECT_ICON_BASE_64}`
),
config: { config: {
custom: { custom: {
filterable: false, filterable: false,
@ -348,11 +351,15 @@ export function Panel({ width, height, timeRange, eventBus, timeZone }: Props) {
values: _.map(sortedTasks, (task) => { values: _.map(sortedTasks, (task) => {
switch (task.progress?.status) { switch (task.progress?.status) {
case ExportStatus.FINISHED: case ExportStatus.FINISHED:
return `data:image/png;base64,${OPTIONS_ICON_BASE_64}`; if (task.id === taskIdBeingDownloaded) {
return DOWNLOADING_ICON_BASE_64;
} else {
return OPTIONS_ICON_BASE_64;
}
case ExportStatus.ERROR: case ExportStatus.ERROR:
return `data:image/png;base64,${CLOSE_ICON_BASE_64}`; return CLOSE_ICON_BASE_64;
case ExportStatus.EXPORTING: case ExportStatus.EXPORTING:
return ``; return '';
default: default:
throw new Error(`Unknown exporting status: ${task.progress?.status}`); throw new Error(`Unknown exporting status: ${task.progress?.status}`);
} }
@ -425,9 +432,10 @@ export function Panel({ width, height, timeRange, eventBus, timeZone }: Props) {
setTasks(filteredTasks); setTasks(filteredTasks);
} }
function onDownloadClick(task: ExportTask): void { async function onDownloadClick(task: ExportTask): Promise<void> {
appEvents.emit(AppEvents.alertSuccess, ['CSV has started downloading...']); setTaskIdBeingDownloaded(task.id as string);
getStaticFile(task?.id); await getStaticFile(task?.id);
setTaskIdBeingDownloaded(null);
} }
function onDatasourceSelectClick(e: DataLinkClickEvent): void { function onDatasourceSelectClick(e: DataLinkClickEvent): void {

Write Preview
Loading…
Cancel
Save