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

Merge branch 'master' of code.corpglory.net:corpglory/grafana-data-exporter-app into ui-ux-improvements

pull/9/head
vargburz 2 years ago
parent
ff567a6148 119b556242
commit
e57ddb938c
4 changed files with 90 additions and 63 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. 74
      src/panels/corpglory-dataexporter-panel/components/Panel.tsx
  2. 49
      src/panels/corpglory-dataexporter-panel/types.ts
  3. 24
      src/services/api_service.ts
  4. 6
      src/utils/index.ts

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

@ -1,4 +1,4 @@
import { PanelOptions, TaskTableRowConfig, QueryTableRowConfig, DatasourceType, PanelStatus } from '../types'; import { PanelOptions, ExportTask, DashboardQuery, DatasourceType, ExportStatus, PanelStatus } from '../types';
import { convertTimestampToDate, getDashboardUid } from '../../../utils'; 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 { CLOSE_ICON_BASE_64, DOWNLOAD_ICON_BASE_64, SELECT_ICON_BASE_64, UNSELECT_ICON_BASE_64 } from '../../../icons';
@ -48,8 +48,8 @@ export function Panel({ width, height, timeRange, eventBus }: Props) {
const [dashboard, setDashboard] = useState<any | null>(null); const [dashboard, setDashboard] = useState<any | null>(null);
const [datasources, setDatasources] = useState<DataSourceSettings[] | null>(null); const [datasources, setDatasources] = useState<DataSourceSettings[] | null>(null);
const [tasks, setTasks] = useState<TaskTableRowConfig[] | null>(null); const [tasks, setTasks] = useState<ExportTask[] | null>(null);
const [queries, setQueries] = useState<QueryTableRowConfig[] | null>(null); const [queries, setQueries] = useState<DashboardQuery[] | 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);
@ -88,7 +88,7 @@ export function Panel({ width, height, timeRange, eventBus }: Props) {
return; return;
} }
dashboard.panels.forEach((panel: PanelModel) => { dashboard.panels.forEach((panel: PanelModel) => {
const queries: QueryTableRowConfig[] = []; const queries: DashboardQuery[] = [];
// @ts-ignore // @ts-ignore
if (panel.type === PANEL_ID) { if (panel.type === PANEL_ID) {
@ -135,8 +135,7 @@ export function Panel({ width, height, timeRange, eventBus }: Props) {
setTasks(tasks); setTasks(tasks);
setPanelStatus(PanelStatus.OK); setPanelStatus(PanelStatus.OK);
for (let task of tasks) { for (let task of tasks) {
// TODO: ExportStatus enum if (task.progress?.status === ExportStatus.EXPORTING) {
if (task.status === 'exporting') {
setTimeout(refresh, 1000); setTimeout(refresh, 1000);
return; return;
} }
@ -169,18 +168,23 @@ export function Panel({ width, height, timeRange, eventBus }: Props) {
} }
async function onAddTaskClick(): Promise<void> { async function onAddTaskClick(): Promise<void> {
const selectedQueries = _.filter(queries, (query: QueryTableRowConfig) => query.selected); const selectedQueries = _.filter(queries, (query: DashboardQuery) => query.selected);
// TODO: timerange picker
const timerange: [number, number] = [selectedTimeRange.from.unix(), selectedTimeRange.to.unix()]; const timerange: [number, number] = [selectedTimeRange.from.unix(), selectedTimeRange.to.unix()];
const task: ExportTask = {
// @ts-ignore
username: contextSrv.user.name,
timeRange: {
from: timerange[0] * 1000,
to: timerange[1] * 1000,
},
queries: selectedQueries,
};
// TODO: move this function to API Service // TODO: move this function to API Service
await queryApi('/task', { await queryApi('/task', {
method: 'POST', method: 'POST',
data: { data: {
from: timerange[0] * 1000, task,
to: timerange[1] * 1000,
// @ts-ignore
username: contextSrv.user.name,
tasks: selectedQueries,
url: window.location.toString(), url: window.location.toString(),
}, },
}); });
@ -195,7 +199,7 @@ export function Panel({ width, height, timeRange, eventBus }: Props) {
if (queries === null) { if (queries === null) {
return; return;
} }
setQueries(queries.map((query: QueryTableRowConfig) => ({ ...query, selected: false }))); setQueries(queries.map((query: DashboardQuery) => ({ ...query, selected: false })));
} }
function openDatasourceModal(): void { function openDatasourceModal(): void {
@ -208,7 +212,7 @@ export function Panel({ width, height, timeRange, eventBus }: Props) {
unselectAllQueries(); unselectAllQueries();
} }
function getDataFrameForQueriesTable(configs: QueryTableRowConfig[]): DataFrame { function getDataFrameForQueriesTable(queries: DashboardQuery[]): DataFrame {
const dataFrame = toDataFrame({ const dataFrame = toDataFrame({
name: 'A', name: 'A',
fields: [ fields: [
@ -216,8 +220,8 @@ export function Panel({ width, height, timeRange, eventBus }: Props) {
name: 'Select', name: 'Select',
type: FieldType.string, type: FieldType.string,
values: _.map( values: _.map(
configs, queries,
(config) => `data:image/svg+xml;base64,${config.selected ? SELECT_ICON_BASE_64 : UNSELECT_ICON_BASE_64}` (query) => `data:image/svg+xml;base64,${query.selected ? SELECT_ICON_BASE_64 : UNSELECT_ICON_BASE_64}`
), ),
config: { config: {
custom: { custom: {
@ -237,17 +241,17 @@ export function Panel({ width, height, timeRange, eventBus }: Props) {
{ {
name: 'Panel', name: 'Panel',
type: FieldType.string, type: FieldType.string,
values: _.map(configs, (config) => config.panel.title), values: _.map(queries, (query) => query.panel.title),
}, },
{ {
name: 'RefId', name: 'RefId',
type: FieldType.string, type: FieldType.string,
values: _.map(configs, (config) => config.refId), values: _.map(queries, (query) => query.refId),
}, },
{ {
name: 'Datasource', name: 'Datasource',
type: FieldType.string, type: FieldType.string,
values: _.map(configs, (config) => config.datasource.name), values: _.map(queries, (query) => query.datasource.name),
}, },
], ],
}); });
@ -264,44 +268,49 @@ export function Panel({ width, height, timeRange, eventBus }: Props) {
return dataFrames[0]; return dataFrames[0];
} }
function getDataFrameForTaskTable(configs: TaskTableRowConfig[]): DataFrame { function getDataFrameForTaskTable(tasks: ExportTask[]): DataFrame {
const dataFrame = toDataFrame({ const dataFrame = toDataFrame({
name: 'A', name: 'A',
fields: [ fields: [
{ {
name: 'Time', name: 'Time',
type: FieldType.number, type: FieldType.number,
values: _.map(configs, (config) => convertTimestampToDate(config.timestamp)), values: _.map(tasks, (task) => convertTimestampToDate(task.progress?.time)),
}, },
{ {
name: 'User', name: 'User',
type: FieldType.string, type: FieldType.string,
values: _.map(configs, (config) => config.username), values: _.map(tasks, (task) => task.username),
}, },
{ {
name: 'Datasource', name: 'Datasource',
type: FieldType.string, type: FieldType.string,
values: _.map(configs, (config) => getDatasourceByUid(config.datasourceRef?.uid)?.name), values: _.map(tasks, (task) => task.queries.map((query) => query.datasource?.name).join(',')),
}, },
{ {
name: 'Exported Rows', name: 'Exported Rows',
type: FieldType.number, type: FieldType.number,
values: _.map(configs, (config) => config.rowsCount), values: _.map(tasks, (task) => task.progress?.exportedRowsCount),
}, },
{ {
name: 'Progress', name: 'Progress',
type: FieldType.string, type: FieldType.string,
values: _.map(configs, (config) => `${(config.progress * 100).toFixed(0)}%`), values: _.map(tasks, (task) => `${((task.progress?.progress || 0) * 100).toFixed(0)}%`),
}, },
{ {
name: 'Status', name: 'Status',
type: FieldType.string, type: FieldType.string,
values: _.map(configs, (config) => config.status), values: _.map(tasks, (task) => task.progress?.status),
},
{
name: 'Error',
type: FieldType.string,
values: _.map(tasks, (task) => task.progress?.errorMessage || '-'),
}, },
{ {
name: 'Download CSV', name: 'Download CSV',
type: FieldType.string, type: FieldType.string,
values: _.map(configs, () => `data:image/png;base64,${DOWNLOAD_ICON_BASE_64}`), values: _.map(tasks, () => `data:image/png;base64,${DOWNLOAD_ICON_BASE_64}`),
config: { config: {
custom: { custom: {
filterable: false, filterable: false,
@ -320,7 +329,7 @@ export function Panel({ width, height, timeRange, eventBus }: Props) {
{ {
name: 'Delete task', name: 'Delete task',
type: FieldType.string, type: FieldType.string,
values: _.map(configs, () => `data:image/png;base64,${CLOSE_ICON_BASE_64}`), values: _.map(tasks, () => `data:image/png;base64,${CLOSE_ICON_BASE_64}`),
config: { config: {
custom: { custom: {
filterable: false, filterable: false,
@ -355,7 +364,7 @@ export function Panel({ width, height, timeRange, eventBus }: Props) {
const rowIndex = e.origin.rowIndex; const rowIndex = e.origin.rowIndex;
const task = _.find(tasks, (task, idx) => idx === rowIndex); const task = _.find(tasks, (task, idx) => idx === rowIndex);
await deleteTask(task?.filename); await deleteTask(task?.id);
const filteredTasks = _.filter(tasks, (task, idx) => idx !== rowIndex); const filteredTasks = _.filter(tasks, (task, idx) => idx !== rowIndex);
setTasks(filteredTasks); setTasks(filteredTasks);
@ -364,7 +373,7 @@ export function Panel({ width, height, timeRange, eventBus }: Props) {
function onDownloadClick(e: DataLinkClickEvent): void { function onDownloadClick(e: DataLinkClickEvent): void {
const rowIndex = e.origin.rowIndex; const rowIndex = e.origin.rowIndex;
const task = _.find(tasks, (task, idx) => idx === rowIndex); const task = _.find(tasks, (task, idx) => idx === rowIndex);
getStaticFile(task?.filename); getStaticFile(task?.id);
} }
function onDatasourceSelectClick(e: DataLinkClickEvent): void { function onDatasourceSelectClick(e: DataLinkClickEvent): void {
@ -411,6 +420,7 @@ export function Panel({ width, height, timeRange, eventBus }: Props) {
</Button> </Button>
<Modal title="Select Queries" isOpen={isModalOpen} onDismiss={onCloseModal} className={styles.calendarModal}> <Modal title="Select Queries" isOpen={isModalOpen} onDismiss={onCloseModal} className={styles.calendarModal}>
{queriesDataFrame === null ? ( {queriesDataFrame === null ? (
// TODO: if datasource responds with error, display the error
<LoadingPlaceholder text="Loading..."></LoadingPlaceholder> <LoadingPlaceholder text="Loading..."></LoadingPlaceholder>
) : ( ) : (
<div> <div>
@ -430,7 +440,7 @@ export function Panel({ width, height, timeRange, eventBus }: Props) {
aria-label="Add task button" aria-label="Add task button"
onClick={onAddTaskClick} onClick={onAddTaskClick}
// TODO: move to function // TODO: move to function
disabled={!queries?.filter((query: QueryTableRowConfig) => query.selected)?.length} disabled={!queries?.filter((query: DashboardQuery) => query.selected)?.length}
> >
Add Task Add Task
</Button> </Button>

49
src/panels/corpglory-dataexporter-panel/types.ts
Unescape View File

@ -1,23 +1,7 @@
import { DataQuery, DataSourceRef, DataSourceSettings, PanelModel } from '@grafana/data'; import { DataQuery, DataSourceSettings, PanelModel } from '@grafana/data';
export interface PanelOptions {} export interface PanelOptions {}
export type TaskTableRowConfig = {
timestamp: number;
username: string;
datasourceRef: DataSourceRef;
rowsCount: number;
progress: number;
status: string;
filename?: string;
};
export type QueryTableRowConfig = Omit<DataQuery, 'datasource'> & {
selected: boolean;
panel: PanelModel;
datasource: DataSourceSettings;
};
export enum DatasourceType { export enum DatasourceType {
INFLUXDB = 'influxdb', INFLUXDB = 'influxdb',
GRAPHITE = 'graphite', GRAPHITE = 'graphite',
@ -33,3 +17,34 @@ export enum PanelStatus {
PERMISSION_ERROR = 'Permission Error', PERMISSION_ERROR = 'Permission Error',
OK = 'Ok', OK = 'Ok',
} }
export enum ExportStatus {
EXPORTING = 'exporting',
FINISHED = 'finished',
ERROR = 'error',
}
export type ExportProgress = {
time: number;
exportedRowsCount: number;
progress: number;
status: ExportStatus;
errorMessage?: string;
};
export type ExportTask = {
username: string;
queries: DashboardQuery[];
timeRange: {
from: number;
to: number;
};
progress?: ExportProgress;
id?: string;
};
export type DashboardQuery = DataQuery & {
selected: boolean;
panel: PanelModel;
datasource: DataSourceSettings;
};

24
src/services/api_service.ts
Unescape View File

@ -1,4 +1,4 @@
import { TaskTableRowConfig } from '../panels/corpglory-dataexporter-panel/types'; import { ExportTask } from '../panels/corpglory-dataexporter-panel/types';
import axios from 'axios'; import axios from 'axios';
import * as _ from 'lodash'; import * as _ from 'lodash';
@ -43,24 +43,24 @@ export const queryApi = async <RT = any>(path: string, config: RequestConfig) =>
return response.data as RT; return response.data as RT;
}; };
export async function getTasks(): Promise<TaskTableRowConfig[]> { export async function getTasks(): Promise<ExportTask[]> {
return queryApi<TaskTableRowConfig[]>('/task', {}); return queryApi<ExportTask[]>('/task', {});
} }
export async function deleteTask(filename?: string): Promise<void> { export async function deleteTask(taskId?: string): Promise<void> {
if (_.isEmpty(filename)) { if (_.isEmpty(taskId)) {
console.warn(`can't delete task without filename`); console.warn(`can't delete task without taskId`);
return; return;
} }
await queryApi<TaskTableRowConfig[]>('/task', { method: 'DELETE', data: { filename } }); await queryApi<ExportTask[]>('/task', { method: 'DELETE', data: { taskId } });
} }
export async function getStaticFile(filename?: string): Promise<void> { export async function getStaticFile(taskId?: string): Promise<void> {
if (_.isEmpty(filename)) { if (_.isEmpty(taskId)) {
console.warn(`can't download file without name`); console.warn(`can't download file without taskId`);
return; return;
} }
const respData = await queryApi(`/static/${filename}.csv`, {}); const respData = await queryApi(`/static/${taskId}.csv`, {});
// TODO: check if resp exists // TODO: check if resp exists
// create file link in browser's memory // create file link in browser's memory
const href = URL.createObjectURL(new Blob([respData], { type: 'text/csv' })); const href = URL.createObjectURL(new Blob([respData], { type: 'text/csv' }));
@ -68,7 +68,7 @@ export async function getStaticFile(filename?: string): Promise<void> {
// 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 = href;
link.setAttribute('download', `${filename}.csv`); link.setAttribute('download', `${taskId}.csv`);
document.body.appendChild(link); document.body.appendChild(link);
link.click(); link.click();

6
src/utils/index.ts
Unescape View File

@ -15,7 +15,7 @@ export function getDashboardUid(url: string): string {
} }
} }
export function convertTimestampToDate(timestamp: number): string { export function convertTimestampToDate(timestamp?: number): string {
const options: Intl.DateTimeFormatOptions = { const options: Intl.DateTimeFormatOptions = {
year: 'numeric', year: 'numeric',
month: 'short', month: 'short',
@ -24,5 +24,7 @@ export function convertTimestampToDate(timestamp: number): string {
minute: 'numeric', minute: 'numeric',
second: 'numeric', second: 'numeric',
}; };
return new Date(timestamp).toLocaleString('en-GB', options); return timestamp ?
new Date(timestamp).toLocaleString('en-GB', options):
'-';
} }

Write Preview
Loading…
Cancel
Save