|
|
|
import { PanelOptions, TaskTableRowConfig, QueryTableRowConfig, DatasourceType } from '../types';
|
|
|
|
|
|
|
|
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 { deleteTask, getStaticFile, getTasks, queryApi } from '../../../services/api_service';
|
|
|
|
import { getDashboardByUid, getDatasources } from '../../../services/grafana_backend_service';
|
|
|
|
|
|
|
|
import { contextSrv } from 'grafana/app/core/core';
|
|
|
|
|
|
|
|
import { Table, Button, HorizontalGroup, Modal, LoadingPlaceholder } from '@grafana/ui';
|
|
|
|
import {
|
|
|
|
PanelProps,
|
|
|
|
toDataFrame,
|
|
|
|
FieldType,
|
|
|
|
applyFieldOverrides,
|
|
|
|
createTheme,
|
|
|
|
DataFrame,
|
|
|
|
DataLinkClickEvent,
|
|
|
|
PanelModel,
|
|
|
|
DataQuery,
|
|
|
|
DataSourceSettings,
|
|
|
|
} from '@grafana/data';
|
|
|
|
import { RefreshEvent } from '@grafana/runtime';
|
|
|
|
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
|
|
import * as _ from 'lodash';
|
|
|
|
|
|
|
|
interface Props extends PanelProps<PanelOptions> {}
|
|
|
|
|
|
|
|
export function Panel({ width, height, timeRange, eventBus }: Props) {
|
|
|
|
|
|
|
|
// TODO: Dashboard type
|
|
|
|
const [dashboard, setDashboard] = useState<any | null>(null);
|
|
|
|
const [datasources, setDatasources] = useState<DataSourceSettings[] | null>(null);
|
|
|
|
|
|
|
|
const [tasks, setTasks] = useState<TaskTableRowConfig[] | null>(null);
|
|
|
|
const [queries, setQueries] = useState<QueryTableRowConfig[] | null>(null);
|
|
|
|
|
|
|
|
const [tasksDataFrame, setTasksDataFrame] = useState<DataFrame | null>(null);
|
|
|
|
const [queriesDataFrame, setQueriesDataFrame] = useState<DataFrame | null>(null);
|
|
|
|
|
|
|
|
const [isModalOpen, setModalVisibility] = useState<boolean>(false);
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
async function getCurrentDashboard(): Promise<any> {
|
|
|
|
const currentDashboardUid = getDashboardUid(window.location.toString());
|
|
|
|
|
|
|
|
return getDashboardByUid(currentDashboardUid);
|
|
|
|
}
|
|
|
|
|
|
|
|
getCurrentDashboard()
|
|
|
|
.then((dash) => setDashboard(dash.dashboard))
|
|
|
|
.catch((err) => console.error(err));
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
getDatasources()
|
|
|
|
.then((datasources) => setDatasources(datasources))
|
|
|
|
.catch((err) => console.error(err));
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
if (!dashboard || !datasources) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
dashboard.panels.forEach((panel: PanelModel) => {
|
|
|
|
const queries: QueryTableRowConfig[] = [];
|
|
|
|
|
|
|
|
// @ts-ignore
|
|
|
|
// TODO: move plugin id to const
|
|
|
|
if (panel.type === 'corpglory-dataexporter-panel') {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (!_.includes(_.values(DatasourceType), panel.datasource?.type)) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
panel.targets?.forEach((target: DataQuery) => {
|
|
|
|
console.log('uid', target.datasource?.uid);
|
|
|
|
const datasource = getDatasourceByUid(target.datasource?.uid);
|
|
|
|
if (!datasource) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
queries.push({ ...target, selected: false, panel, datasource });
|
|
|
|
});
|
|
|
|
|
|
|
|
setQueries(queries);
|
|
|
|
});
|
|
|
|
}, [dashboard, datasources]);
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
if (tasks === null) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
const dataFrame = getDataFrameForTaskTable(tasks);
|
|
|
|
setTasksDataFrame(dataFrame);
|
|
|
|
}, [tasks]);
|
|
|
|
|
|
|
|
useEffect(refresh, []);
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
if (queries === null) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
setQueriesDataFrame(getDataFrameForQueriesTable(queries));
|
|
|
|
}, [queries]);
|
|
|
|
|
|
|
|
function refresh(): void {
|
|
|
|
getTasks()
|
|
|
|
.then((tasks) => {
|
|
|
|
setTasks(tasks);
|
|
|
|
for (let task of tasks) {
|
|
|
|
// TODO: ExportStatus enum
|
|
|
|
if (task.status === 'exporting') {
|
|
|
|
setTimeout(refresh, 1000);
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
.catch((err) => console.error(err));
|
|
|
|
}
|
|
|
|
|
|
|
|
eventBus.subscribe(RefreshEvent, refresh);
|
|
|
|
|
|
|
|
function getDatasourceByUid(uid?: string): DataSourceSettings | undefined {
|
|
|
|
if (_.isNil(uid)) {
|
|
|
|
console.warn(`uid is required to get datasource`);
|
|
|
|
return undefined;
|
|
|
|
}
|
|
|
|
if (datasources === null) {
|
|
|
|
console.warn(`there is no datasources yet`);
|
|
|
|
return undefined;
|
|
|
|
}
|
|
|
|
const datasource = _.find(datasources, (datasource: DataSourceSettings) => datasource.uid === uid);
|
|
|
|
|
|
|
|
if (!datasource) {
|
|
|
|
console.warn(`can't find datasource "${uid}"`);
|
|
|
|
}
|
|
|
|
|
|
|
|
return datasource;
|
|
|
|
}
|
|
|
|
|
|
|
|
async function onAddTaskClick(): Promise<void> {
|
|
|
|
const selectedQueries = _.filter(queries, (query: QueryTableRowConfig) => query.selected);
|
|
|
|
|
|
|
|
// TODO: timerange picker
|
|
|
|
const timerange: [number, number] = [timeRange.from.unix(), timeRange.to.unix()];
|
|
|
|
// TODO: move this function to API Service
|
|
|
|
await queryApi('/task', {
|
|
|
|
method: 'POST',
|
|
|
|
data: {
|
|
|
|
from: timerange[0] * 1000,
|
|
|
|
to: timerange[1] * 1000,
|
|
|
|
// @ts-ignore
|
|
|
|
username: contextSrv.user.name,
|
|
|
|
tasks: selectedQueries,
|
|
|
|
url: window.location.toString(),
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
refresh();
|
|
|
|
|
|
|
|
onCloseModal();
|
|
|
|
unselectAllQueries();
|
|
|
|
}
|
|
|
|
|
|
|
|
function unselectAllQueries(): void {
|
|
|
|
if (queries === null) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
setQueries(queries.map((query: QueryTableRowConfig) => ({ ...query, selected: false })));
|
|
|
|
}
|
|
|
|
|
|
|
|
function openDatasourceModal(): void {
|
|
|
|
setModalVisibility(true);
|
|
|
|
}
|
|
|
|
|
|
|
|
function onCloseModal(): void {
|
|
|
|
setModalVisibility(false);
|
|
|
|
unselectAllQueries();
|
|
|
|
}
|
|
|
|
|
|
|
|
function getDataFrameForQueriesTable(configs: QueryTableRowConfig[]): DataFrame {
|
|
|
|
const dataFrame = toDataFrame({
|
|
|
|
name: 'A',
|
|
|
|
fields: [
|
|
|
|
{
|
|
|
|
name: 'Select',
|
|
|
|
type: FieldType.string,
|
|
|
|
values: _.map(
|
|
|
|
configs,
|
|
|
|
(config) => `data:image/svg+xml;base64,${config.selected ? SELECT_ICON_BASE_64 : UNSELECT_ICON_BASE_64}`
|
|
|
|
),
|
|
|
|
config: {
|
|
|
|
custom: {
|
|
|
|
filterable: false,
|
|
|
|
displayMode: 'image',
|
|
|
|
},
|
|
|
|
links: [
|
|
|
|
{
|
|
|
|
targetBlank: false,
|
|
|
|
title: 'Select',
|
|
|
|
url: '#',
|
|
|
|
onClick: (event: DataLinkClickEvent) => onDatasourceSelectClick(event),
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'Panel',
|
|
|
|
type: FieldType.string,
|
|
|
|
values: _.map(configs, (config) => config.panel.title),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'RefId',
|
|
|
|
type: FieldType.string,
|
|
|
|
values: _.map(configs, (config) => config.refId),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'Datasource',
|
|
|
|
type: FieldType.string,
|
|
|
|
values: _.map(configs, (config) => config.datasource.name),
|
|
|
|
},
|
|
|
|
],
|
|
|
|
});
|
|
|
|
|
|
|
|
const dataFrames = applyFieldOverrides({
|
|
|
|
data: [dataFrame],
|
|
|
|
fieldConfig: {
|
|
|
|
overrides: [],
|
|
|
|
defaults: {},
|
|
|
|
},
|
|
|
|
theme: createTheme(),
|
|
|
|
replaceVariables: (value: string) => value,
|
|
|
|
});
|
|
|
|
return dataFrames[0];
|
|
|
|
}
|
|
|
|
|
|
|
|
function getDataFrameForTaskTable(configs: TaskTableRowConfig[]): DataFrame {
|
|
|
|
const dataFrame = toDataFrame({
|
|
|
|
name: 'A',
|
|
|
|
fields: [
|
|
|
|
{
|
|
|
|
name: 'Time',
|
|
|
|
type: FieldType.number,
|
|
|
|
values: _.map(configs, (config) => convertTimestampToDate(config.timestamp)),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'User',
|
|
|
|
type: FieldType.string,
|
|
|
|
values: _.map(configs, (config) => config.username),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'Datasource',
|
|
|
|
type: FieldType.string,
|
|
|
|
values: _.map(configs, (config) => getDatasourceByUid(config.datasourceRef?.uid)?.name),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'Exported Rows',
|
|
|
|
type: FieldType.number,
|
|
|
|
values: _.map(configs, (config) => config.rowsCount),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'Progress',
|
|
|
|
type: FieldType.string,
|
|
|
|
values: _.map(configs, (config) => `${(config.progress * 100).toFixed(0)}%`),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'Status',
|
|
|
|
type: FieldType.string,
|
|
|
|
values: _.map(configs, (config) => config.status),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'Download CSV',
|
|
|
|
type: FieldType.string,
|
|
|
|
values: _.map(configs, () => `data:image/png;base64,${DOWNLOAD_ICON_BASE_64}`),
|
|
|
|
config: {
|
|
|
|
custom: {
|
|
|
|
filterable: false,
|
|
|
|
displayMode: 'image',
|
|
|
|
},
|
|
|
|
links: [
|
|
|
|
{
|
|
|
|
targetBlank: false,
|
|
|
|
title: 'Download',
|
|
|
|
url: '#',
|
|
|
|
onClick: (event: DataLinkClickEvent) => onDownloadClick(event),
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'Delete task',
|
|
|
|
type: FieldType.string,
|
|
|
|
values: _.map(configs, () => `data:image/png;base64,${CLOSE_ICON_BASE_64}`),
|
|
|
|
config: {
|
|
|
|
custom: {
|
|
|
|
filterable: false,
|
|
|
|
displayMode: 'image',
|
|
|
|
},
|
|
|
|
links: [
|
|
|
|
{
|
|
|
|
targetBlank: false,
|
|
|
|
title: 'Delete',
|
|
|
|
url: '#',
|
|
|
|
onClick: (event: DataLinkClickEvent) => onDeleteClick(event),
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
},
|
|
|
|
],
|
|
|
|
});
|
|
|
|
|
|
|
|
const dataFrames = applyFieldOverrides({
|
|
|
|
data: [dataFrame],
|
|
|
|
fieldConfig: {
|
|
|
|
overrides: [],
|
|
|
|
defaults: {},
|
|
|
|
},
|
|
|
|
theme: createTheme(),
|
|
|
|
replaceVariables: (value: string) => value,
|
|
|
|
});
|
|
|
|
return dataFrames[0];
|
|
|
|
}
|
|
|
|
|
|
|
|
async function onDeleteClick(e: DataLinkClickEvent): Promise<void> {
|
|
|
|
const rowIndex = e.origin.rowIndex;
|
|
|
|
|
|
|
|
const task = _.find(tasks, (task, idx) => idx === rowIndex);
|
|
|
|
await deleteTask(task?.filename);
|
|
|
|
|
|
|
|
const filteredTasks = _.filter(tasks, (task, idx) => idx !== rowIndex);
|
|
|
|
setTasks(filteredTasks);
|
|
|
|
}
|
|
|
|
|
|
|
|
function onDownloadClick(e: DataLinkClickEvent): void {
|
|
|
|
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;
|
|
|
|
setQueries(updatedQueries);
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
{tasksDataFrame === null ? (
|
|
|
|
// TODO: if datasource responds with error, display the error
|
|
|
|
<LoadingPlaceholder text="Loading..."></LoadingPlaceholder>
|
|
|
|
) : (
|
|
|
|
<div>
|
|
|
|
<Table width={width} height={height - 40} data={tasksDataFrame} />
|
|
|
|
<HorizontalGroup justify="flex-end">
|
|
|
|
<Button
|
|
|
|
variant="primary"
|
|
|
|
aria-label="Rich history button"
|
|
|
|
icon="plus"
|
|
|
|
style={{ marginTop: '8px' }}
|
|
|
|
onClick={openDatasourceModal}
|
|
|
|
>
|
|
|
|
Add Task
|
|
|
|
</Button>
|
|
|
|
<Modal title="Select Queries" isOpen={isModalOpen} onDismiss={onCloseModal}>
|
|
|
|
{queriesDataFrame === null ? (
|
|
|
|
// TODO: if datasource responds with error, display the error
|
|
|
|
<LoadingPlaceholder text="Loading..."></LoadingPlaceholder>
|
|
|
|
) : (
|
|
|
|
<div>
|
|
|
|
<Table width={width / 2 - 20} height={height - 40} data={queriesDataFrame} />
|
|
|
|
<HorizontalGroup justify="flex-end">
|
|
|
|
<Button
|
|
|
|
variant="primary"
|
|
|
|
aria-label="Add task button"
|
|
|
|
style={{ marginTop: '8px' }}
|
|
|
|
onClick={onAddTaskClick}
|
|
|
|
// TODO: move to function
|
|
|
|
disabled={!queries?.filter((query: QueryTableRowConfig) => query.selected)?.length}
|
|
|
|
>
|
|
|
|
Add Task
|
|
|
|
</Button>
|
|
|
|
</HorizontalGroup>
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</Modal>
|
|
|
|
</HorizontalGroup>
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|