Browse Source

it works

pull/5/head
rozetko 2 years ago
parent
commit
62459e4c35
  1. 35
      src/panels/corpglory-dataexporter-panel/components/Panel.tsx
  2. 5
      src/panels/corpglory-dataexporter-panel/types.ts
  3. 6
      src/services/api_service.ts

35
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 { queryApi } from '../../../services/api_service';
import { getTasks, queryApi } from '../../../services/api_service';
import { getDashboardByUid, getDatasources } from '../../../services/grafana_backend_service';
import { contextSrv } from 'grafana/app/core/core';
@ -21,13 +21,15 @@ import {
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 }: Props) {
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);
@ -96,16 +98,7 @@ export function Panel({ width, height, timeRange }: Props) {
setTasksDataFrame(dataFrame);
}, [tasks]);
useEffect(() => {
// TODO: move this function to API Service
async function getTasks(): Promise<TaskTableRowConfig[]> {
return queryApi<TaskTableRowConfig[]>('/task', {});
}
getTasks()
.then((tasks) => setTasks(tasks))
.catch((err) => console.error(err));
}, []);
useEffect(refresh, []);
useEffect(() => {
if (queries === null) {
@ -114,6 +107,15 @@ export function Panel({ width, height, timeRange }: Props) {
setQueriesDataFrame(getDataFrameForQueriesTable(queries));
}, [queries]);
function refresh(): void {
console.log('rfrsh')
getTasks()
.then((tasks) => setTasks(tasks))
.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`);
@ -137,7 +139,6 @@ export function Panel({ width, height, timeRange }: Props) {
// 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',
@ -145,13 +146,13 @@ export function Panel({ width, height, timeRange }: Props) {
from: timerange[0] * 1000,
to: timerange[1] * 1000,
// @ts-ignore
username: contextSrv.user.username,
username: contextSrv.user.name,
tasks: selectedQueries,
url: window.location.toString(),
},
});
// TODO: refresh panel (or get websocket events)
refresh();
onCloseModal();
unselectAllQueries();
@ -241,7 +242,7 @@ export function Panel({ width, height, timeRange }: Props) {
{
name: 'User',
type: FieldType.string,
values: _.map(configs, (config) => config.user),
values: _.map(configs, (config) => config.username),
},
{
name: 'Datasource',
@ -256,7 +257,7 @@ export function Panel({ width, height, timeRange }: Props) {
{
name: 'Progress',
type: FieldType.string,
values: _.map(configs, (config) => `${config.progress}%`),
values: _.map(configs, (config) => `${(config.progress * 100).toFixed(0)}%`),
},
{
name: 'Status',

5
src/panels/corpglory-dataexporter-panel/types.ts

@ -4,13 +4,12 @@ export interface PanelOptions {}
export type TaskTableRowConfig = {
timestamp: number;
// TODO: rename user to username
user: string;
username: string;
datasourceRef: DataSourceRef;
rowsCount: number;
progress: number;
status: string;
downloadLink: string;
filename?: string;
};
export type QueryTableRowConfig = Omit<DataQuery, 'datasource'> & {

6
src/services/api_service.ts

@ -1,3 +1,5 @@
import { TaskTableRowConfig } from '../panels/corpglory-dataexporter-panel/types';
import axios from 'axios';
export const API_HOST = `${window.location.protocol}//${window.location.host}/`;
@ -39,3 +41,7 @@ export const queryApi = async <RT = any>(path: string, config: RequestConfig) =>
return response.data as RT;
};
export async function getTasks(): Promise<TaskTableRowConfig[]> {
return queryApi<TaskTableRowConfig[]>('/task', {});
}

Loading…
Cancel
Save