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

a lot of refactoring && it works

pull/5/head
rozetko 2 years ago
parent
ea286e0b65
commit
64aa8b8f8b
9 changed files with 375 additions and 282 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      package.json
  2. 8
      src/icons.ts
  3. 577
      src/panels/corpglory-dataexporter-panel/components/Panel.tsx
  4. 27
      src/panels/corpglory-dataexporter-panel/types.ts
  5. 6
      src/plugin_state.ts
  6. 2
      src/services/api_service.ts
  7. 11
      src/services/grafana_backend_service.ts
  8. 21
      src/utils/index.ts
  9. 4
      yarn.lock

1
package.json
Unescape View File

@ -49,6 +49,7 @@
"@testing-library/react": "^12.1.3",
"@testing-library/user-event": "^14.4.3",
"@types/glob": "^8.0.0",
"@types/grafana": "github:CorpGlory/types-grafana",
"@types/jest": "^27.4.1",
"@types/lodash-es": "^4.17.6",
"@types/node": "^17.0.19",

8
src/icons.ts
Unescape View File

@ -0,0 +1,8 @@
export const CLOSE_ICON_BASE_64 =
'iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACJSURBVHgB7ZPRCcAgDESv0lWc0zhC53OIjmAVUpCSamL76YEoyfFIiAGWfldK6SwnKHyhep9xJ3iPcqgH5RyxV1VlBWYJypXVHMEiCaqBbRhAy3W3B76j954wq6ZSVZsOY+WXt6i9l2ymGTlUq0VpOcIqaQC96Zth01DN1zBBefVI4SNp9Za+6wLcH6DKFrfpxgAAAABJRU5ErkJggg==';
export const DOWNLOAD_ICON_BASE_64 =
'iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADlSURBVHgB3ZPNDYJAEIVnN96lBA7A2RIsATuQiiwBSrAD7MAjCZBACXqFwPomMRtEwMVwgZeQhfn5mNnMEG1CaZoeiqKwTWJ3JkFCiEtVVU+8+r9iJRlKSrk3iqOFtWJglmXHf3yDwCRJbBxxnudh34cRYluMMbKGcgWNCIlnjEuIJ1JK2WzDWeKb7YHjONEsYBf6kTABY+mWuYX+3Xiex9UFU7D3FllfwLqueQvi/h8ZCtBprDLY703T6A0yWj2ArmSoxedQV4jSSz5xj4pmCi0/NKfrwNz5bdtaNENciOu6N1qNXhzZXHMb9Q+nAAAAAElFTkSuQmCC';
export const UNSELECT_ICON_BASE_64 =
'PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMC41IiB5PSIwLjUiIHdpZHRoPSIxNSIgaGVpZ2h0PSIxNSIgcng9IjEuNSIgZmlsbD0iIzExMTIxNiIgc3Ryb2tlPSIjMkQyRTM0Ii8+Cjwvc3ZnPgo=';
export const SELECT_ICON_BASE_64 =
'PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiByeD0iMiIgZmlsbD0iIzRBNzFEMiIvPgo8cGF0aCBkPSJNNS45ODI2NCAxMi41MjE3QzUuNzczOTUgMTIuNTIxNyA1LjU4MjY0IDEyLjQ1MjIgNS40MjYxMiAxMi4yOTU2TDEuOTY1MjUgOC44MzQ3NkMxLjY1MjIxIDguNTIxNzIgMS42NTIyMSA4LjAzNDc2IDEuOTY1MjUgNy43MjE3MkMyLjI3ODI5IDcuNDA4NjcgMi43NjUyNSA3LjQwODY3IDMuMDc4MjkgNy43MjE3Mkw2LjAwMDAzIDEwLjYyNjFMMTIuOTM5MiAzLjcwNDMzQzEzLjI1MjIgMy4zOTEyOCAxMy43MzkyIDMuMzkxMjggMTQuMDUyMiAzLjcwNDMzQzE0LjM2NTMgNC4wMTczNyAxNC4zNjUzIDQuNTA0MzMgMTQuMDUyMiA0LjgxNzM3TDYuNTU2NTYgMTIuMjk1NkM2LjM4MjY0IDEyLjQ1MjIgNi4xOTEzNCAxMi41MjE3IDUuOTgyNjQgMTIuNTIxN1YxMi41MjE3WiIgZmlsbD0iI0ZFRkZGRiIvPgo8L3N2Zz4K';

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

@ -1,7 +1,12 @@
import { PanelOptions, TaskTableRowConfig, DatasourceTableRowConfig } from '../types';
import { PanelOptions, TaskTableRowConfig, QueryTableRowConfig, DatasourceType } from '../types';
import { getBackendSrv } from '@grafana/runtime';
import { makeRequest } from 'services/network_service';
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 { 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 {
@ -12,6 +17,9 @@ import {
createTheme,
DataFrame,
DataLinkClickEvent,
PanelModel,
DataQuery,
DataSourceSettings,
} from '@grafana/data';
import React, { useState, useEffect } from 'react';
@ -19,22 +27,87 @@ import * as _ from 'lodash';
interface Props extends PanelProps<PanelOptions> {}
export function Panel({ options, data, width, height, timeRange, onChangeTimeRange }: Props) {
export function Panel({ width, height, timeRange }: 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());
console.log(currentDashboardUid)
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;
}
console.log(panel)
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 });
}
);
console.log('q', queries)
setQueries(queries);
})
}, [dashboard, datasources]);
useEffect(() => {
if (tasks === null) {
return;
}
const dataFrame = getDataFrameForTaskTable(tasks, setTasks);
const dataFrame = getDataFrameForTaskTable(tasks);
setTasksDataFrame(dataFrame);
}, [tasks]);
useEffect(() => {
// TODO: move this function to Network Service
// TODO: move this function to API Service
async function getTasks(): Promise<TaskTableRowConfig[]> {
return makeRequest<TaskTableRowConfig[]>('/task', {});
return queryApi<TaskTableRowConfig[]>('/task', {});
}
getTasks()
@ -42,61 +115,64 @@ export function Panel({ options, data, width, height, timeRange, onChangeTimeRan
.catch((err) => console.error(err));
}, []);
const datasourceConfigs: DatasourceTableRowConfig[] = [];
const [datasources, setDatasources] = useState(datasourceConfigs);
const datasourceDataFrame = getDataFrameForDatasourceTable(datasources, setDatasources);
useEffect(() => {
if(queries === null) {
return;
}
setQueriesDataFrame(getDataFrameForQueriesTable(queries));
}, [queries]);
const [isModalOpen, setModalVisibility] = useState(false);
const timestampRange: [number, number] = [timeRange.from.unix(), timeRange.to.unix()];
const backendSrv = getBackendSrv();
// @ts-ignore
backendSrv.getInspectorStream().subscribe({
next: (resp: any) => {
const queries = resp?.config?.data?.queries;
if (_.isEmpty(queries)) {
return;
}
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);
const datasource = queries[0].datasource.type;
const refId = queries[0].refId;
const rawSql = queries[0].rawSql;
const uid = queries[0].datasource.uid;
// TODO: it works only with sql (rawSql will be empty in prometheus)
const isDatasourceExist = _.some(
datasources,
(ds: DatasourceTableRowConfig) =>
ds.datasource === datasource && ds.refId === refId && _.isEqual(ds.rawSql, rawSql) && ds.uid === uid
);
if (isDatasourceExist) {
return;
}
const newConfig = createDatasourceConfig({ datasource, refId, rawSql, uid }, timestampRange);
setDatasources([...datasources, newConfig]);
},
});
function onAddTaskClick(): void {
const selectedDatasources = _.filter(datasources, (datasource: DatasourceTableRowConfig) => datasource.select);
const newTasks = _.map(selectedDatasources, (datasource: DatasourceTableRowConfig) =>
createTaskFromDatasource(datasource)
);
if (_.isEmpty(tasks)) {
setTasks([...newTasks]);
} else {
setTasks([...(tasks as TaskTableRowConfig[]), ...newTasks]);
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.username,
tasks: selectedQueries,
url: window.location.toString(),
},
});
// TODO: refresh panel (or get websocket events)
onCloseModal();
unselectAllDatasources();
unselectAllQueries();
}
function unselectAllDatasources(): void {
const updatedDatasources = _.clone(datasources);
for (const ds of updatedDatasources) {
ds.select = false;
function unselectAllQueries(): void {
if (queries === null) {
return;
}
setDatasources(updatedDatasources);
setQueries(queries.map(
(query: QueryTableRowConfig) => ({ ...query, selected: false })
));
}
function openDatasourceModal(): void {
@ -105,7 +181,164 @@ export function Panel({ options, data, width, height, timeRange, onChangeTimeRan
function onCloseModal(): void {
setModalVisibility(false);
unselectAllDatasources();
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, configs),
},
],
},
},
{
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.user),
},
{
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}%`),
},
{
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: 'CSV link',
// TODO: config.downloadLink
url: 'https://chartwerk.io/',
},
],
},
},
{
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, configs),
},
],
},
},
],
});
const dataFrames = applyFieldOverrides({
data: [dataFrame],
fieldConfig: {
overrides: [],
defaults: {},
},
theme: createTheme(),
replaceVariables: (value: string) => value,
});
return dataFrames[0];
}
function onDeleteClick(e: DataLinkClickEvent, tasks: TaskTableRowConfig[]): 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 {
const rowIndex = e.origin.rowIndex;
const updatedQueries = _.clone(queries);
updatedQueries[rowIndex].selected = !updatedQueries[rowIndex].selected;
setQueries(updatedQueries);
}
return (
@ -126,18 +359,27 @@ export function Panel({ options, data, width, height, timeRange, onChangeTimeRan
>
Add Task
</Button>
<Modal title="Select Datasources" isOpen={isModalOpen} onDismiss={onCloseModal}>
<Table width={width / 2 - 20} height={height - 40} data={datasourceDataFrame} />
<HorizontalGroup justify="flex-end">
<Button
variant="primary"
aria-label="Add task button"
style={{ marginTop: '8px' }}
onClick={onAddTaskClick}
>
Add Task
</Button>
</HorizontalGroup>
<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>
@ -145,206 +387,3 @@ export function Panel({ options, data, width, height, timeRange, onChangeTimeRan
</div>
);
}
function getDataFrameForTaskTable(configs: TaskTableRowConfig[], setTasks: any): 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.user),
},
{
name: 'Datasource',
type: FieldType.string,
values: _.map(configs, (config) => config.datasource),
},
{
name: 'Exported Rows',
type: FieldType.number,
values: _.map(configs, (config) => config.rowsCount),
},
{
name: 'Progress',
type: FieldType.string,
values: _.map(configs, (config) => `${config.progress}%`),
},
{
name: 'Status',
type: FieldType.string,
values: _.map(configs, (config) => config.status),
},
{
name: 'Download CSV',
type: FieldType.string,
values: _.map(configs, (config) => `data:image/png;base64,${DOWNLOAD_ICON_BASE_64}`),
config: {
custom: {
filterable: false,
displayMode: 'image',
},
links: [
{
targetBlank: false,
title: 'CSV link',
url: 'https://chartwerk.io/',
},
],
},
},
{
name: 'Delete task',
type: FieldType.string,
values: _.map(configs, (config) => `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, configs, setTasks),
},
],
},
},
],
});
const dataFrames = applyFieldOverrides({
data: [dataFrame],
fieldConfig: {
overrides: [],
defaults: {},
},
theme: createTheme(),
replaceVariables: (value: string) => value,
});
return dataFrames[0];
}
function getDataFrameForDatasourceTable(configs: DatasourceTableRowConfig[], setDatasources: any): DataFrame {
const dataFrame = toDataFrame({
name: 'A',
fields: [
{
name: 'Select',
type: FieldType.string,
values: _.map(
configs,
(config) => `data:image/svg+xml;base64,${config.select ? 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, configs, setDatasources),
},
],
},
},
{
name: 'Panel',
type: FieldType.string,
values: _.map(configs, (config) => config.panel),
},
{
name: 'RefId',
type: FieldType.string,
values: _.map(configs, (config) => config.refId),
},
{
name: 'Datasource',
type: FieldType.string,
values: _.map(configs, (config) => config.datasource),
},
],
});
const dataFrames = applyFieldOverrides({
data: [dataFrame],
fieldConfig: {
overrides: [],
defaults: {},
},
theme: createTheme(),
replaceVariables: (value: string) => value,
});
return dataFrames[0];
}
function onDeleteClick(e: DataLinkClickEvent, tasks: TaskTableRowConfig[], setTasks: any): void {
const rowIndex = e.origin.rowIndex;
const filteredTasks = _.filter(tasks, (task, idx) => idx !== rowIndex);
setTasks(filteredTasks);
}
function onDatasourceSelectClick(
e: DataLinkClickEvent,
datasources: DatasourceTableRowConfig[],
setDatasources: any
): void {
const rowIndex = e.origin.rowIndex;
const updatedDatasources = _.clone(datasources);
updatedDatasources[rowIndex].select = !updatedDatasources[rowIndex].select;
setDatasources(updatedDatasources);
}
function createTaskFromDatasource(config: DatasourceTableRowConfig): TaskTableRowConfig {
return {
timestamp: Date.now(),
user: 'admin',
datasource: config.datasource,
rowsCount: 3214,
progress: 100,
status: 'finished',
};
}
function createDatasourceConfig(obj: any, timerange: [number, number]): DatasourceTableRowConfig {
return {
select: false,
panel: 'Panel',
refId: obj.refId,
datasource: obj.datasource,
rawSql: obj.rawSql,
uid: obj.uid,
timerange,
};
}
function convertTimestampToDate(timestamp: number): string {
const options: Intl.DateTimeFormatOptions = {
year: 'numeric',
month: 'short',
day: 'numeric',
hour: 'numeric',
minute: 'numeric',
second: 'numeric',
};
return new Date(timestamp).toLocaleString('en-GB', options);
}
const CLOSE_ICON_BASE_64 =
'iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACJSURBVHgB7ZPRCcAgDESv0lWc0zhC53OIjmAVUpCSamL76YEoyfFIiAGWfldK6SwnKHyhep9xJ3iPcqgH5RyxV1VlBWYJypXVHMEiCaqBbRhAy3W3B76j954wq6ZSVZsOY+WXt6i9l2ymGTlUq0VpOcIqaQC96Zth01DN1zBBefVI4SNp9Za+6wLcH6DKFrfpxgAAAABJRU5ErkJggg==';
const DOWNLOAD_ICON_BASE_64 =
'iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADlSURBVHgB3ZPNDYJAEIVnN96lBA7A2RIsATuQiiwBSrAD7MAjCZBACXqFwPomMRtEwMVwgZeQhfn5mNnMEG1CaZoeiqKwTWJ3JkFCiEtVVU+8+r9iJRlKSrk3iqOFtWJglmXHf3yDwCRJbBxxnudh34cRYluMMbKGcgWNCIlnjEuIJ1JK2WzDWeKb7YHjONEsYBf6kTABY+mWuYX+3Xiex9UFU7D3FllfwLqueQvi/h8ZCtBprDLY703T6A0yWj2ArmSoxedQV4jSSz5xj4pmCi0/NKfrwNz5bdtaNENciOu6N1qNXhzZXHMb9Q+nAAAAAElFTkSuQmCC';
const UNSELECT_ICON_BASE_64 =
'PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMC41IiB5PSIwLjUiIHdpZHRoPSIxNSIgaGVpZ2h0PSIxNSIgcng9IjEuNSIgZmlsbD0iIzExMTIxNiIgc3Ryb2tlPSIjMkQyRTM0Ii8+Cjwvc3ZnPgo=';
const SELECT_ICON_BASE_64 =
'PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiByeD0iMiIgZmlsbD0iIzRBNzFEMiIvPgo8cGF0aCBkPSJNNS45ODI2NCAxMi41MjE3QzUuNzczOTUgMTIuNTIxNyA1LjU4MjY0IDEyLjQ1MjIgNS40MjYxMiAxMi4yOTU2TDEuOTY1MjUgOC44MzQ3NkMxLjY1MjIxIDguNTIxNzIgMS42NTIyMSA4LjAzNDc2IDEuOTY1MjUgNy43MjE3MkMyLjI3ODI5IDcuNDA4NjcgMi43NjUyNSA3LjQwODY3IDMuMDc4MjkgNy43MjE3Mkw2LjAwMDAzIDEwLjYyNjFMMTIuOTM5MiAzLjcwNDMzQzEzLjI1MjIgMy4zOTEyOCAxMy43MzkyIDMuMzkxMjggMTQuMDUyMiAzLjcwNDMzQzE0LjM2NTMgNC4wMTczNyAxNC4zNjUzIDQuNTA0MzMgMTQuMDUyMiA0LjgxNzM3TDYuNTU2NTYgMTIuMjk1NkM2LjM4MjY0IDEyLjQ1MjIgNi4xOTEzNCAxMi41MjE3IDUuOTgyNjQgMTIuNTIxN1YxMi41MjE3WiIgZmlsbD0iI0ZFRkZGRiIvPgo8L3N2Zz4K';

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

@ -1,20 +1,29 @@
import { DataQuery, DataSourceRef, DataSourceSettings, PanelModel } from "@grafana/data";
export interface PanelOptions {}
export type TaskTableRowConfig = {
timestamp: number;
// TODO: rename user to username
user: string;
datasource: string;
datasourceRef: DataSourceRef;
rowsCount: number;
progress: number;
status: string;
downloadLink: string;
};
export type DatasourceTableRowConfig = {
select: boolean;
panel: string;
refId: string;
datasource: string;
rawSql: string;
uid: string;
timerange: [number, number];
export type QueryTableRowConfig = Omit<DataQuery, 'datasource'> & {
selected: boolean;
panel: PanelModel;
datasource: DataSourceSettings;
};
export enum DatasourceType {
INFLUXDB = 'influxdb',
GRAPHITE = 'graphite',
PROMETHEUS = 'prometheus',
POSTGRES = 'postgres',
ELASTICSEARCH = 'elasticsearch',
MYSQL = 'mysql',
}

6
src/plugin_state.ts
Unescape View File

@ -1,4 +1,4 @@
import { makeRequest } from './services/network_service';
import { queryApi } from './services/api_service';
import {
DataExporterAppPluginMeta,
DataExporterPluginMetaJSONData,
@ -114,7 +114,7 @@ class PluginState {
// TODO: try to disable success alerts from Grafana API
const { key: grafanaToken } = await this.createGrafanaToken();
await this.updateGrafanaPluginSettings({ secureJsonData: { grafanaToken } });
const dataExporterAPIResponse = await makeRequest<RT>(`/connect`, {
const dataExporterAPIResponse = await queryApi<RT>(`/connect`, {
method: 'POST',
});
return { grafanaToken, dataExporterAPIResponse };
@ -165,7 +165,7 @@ class PluginState {
dataExporterApiUrl: string
): Promise<PluginConnectedStatusResponse | string> => {
try {
const resp = await makeRequest<PluginConnectedStatusResponse>(`/status`, {
const resp = await queryApi<PluginConnectedStatusResponse>(`/status`, {
method: 'GET',
});

2
src/services/network_service.ts → src/services/api_service.ts
Unescape View File

@ -24,7 +24,7 @@ interface RequestConfig {
validateStatus?: (status: number) => boolean;
}
export const makeRequest = async <RT = any>(path: string, config: RequestConfig) => {
export const queryApi = async <RT = any>(path: string, config: RequestConfig) => {
const { method = 'GET', params, data, validateStatus } = config;
const url = `${API_PROXY_PREFIX}${API_PATH_PREFIX}${path}`;

11
src/services/grafana_backend_service.ts
Unescape View File

@ -0,0 +1,11 @@
import { getBackendSrv } from "@grafana/runtime";
export async function getDatasources() {
const backendSrv = getBackendSrv();
return backendSrv.get(`/api/datasources`);
}
export async function getDashboardByUid(uid: string) {
const backendSrv = getBackendSrv();
return backendSrv.get(`/api/dashboards/uid/${uid}`);
}

21
src/utils/index.ts
Unescape View File

@ -5,3 +5,24 @@ import appEvents from 'grafana/app/core/app_events';
export function openNotification(message: React.ReactNode) {
appEvents.emit(AppEvents.alertSuccess, [message]);
}
export function getDashboardUid(url: string): string {
const matches = new URL(url).pathname.match(/\/d\/([^/]+)/);
if (!matches) {
throw new Error(`Couldn't parse uid from ${url}`);
} else {
return matches[1];
}
};
export function convertTimestampToDate(timestamp: number): string {
const options: Intl.DateTimeFormatOptions = {
year: 'numeric',
month: 'short',
day: 'numeric',
hour: 'numeric',
minute: 'numeric',
second: 'numeric',
};
return new Date(timestamp).toLocaleString('en-GB', options);
}

4
yarn.lock
Unescape View File

@ -3592,6 +3592,10 @@
dependencies:
"@types/node" "*"
"@types/grafana@github:CorpGlory/types-grafana":
version "4.6.3"
resolved "https://codeload.github.com/CorpGlory/types-grafana/tar.gz/4beede5fa0e5bdebdb23b09e4e1e214dcc4c267f"
"@types/history@^4.7.11":
version "4.7.11"
resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.11.tgz#56588b17ae8f50c53983a524fc3cc47437969d64"

Write Preview
Loading…
Cancel
Save