You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
150 lines
4.9 KiB
150 lines
4.9 KiB
import { PanelOptions, TableRowConfig } from '../types'; |
|
|
|
import { Table, Button, HorizontalGroup } from '@grafana/ui'; |
|
|
|
import { PanelProps, toDataFrame, FieldType, applyFieldOverrides, createTheme, DataFrame, DataLinkClickEvent } from '@grafana/data'; |
|
|
|
import React, { useState } from 'react'; |
|
import * as _ from 'lodash'; |
|
|
|
interface Props extends PanelProps<PanelOptions> { } |
|
|
|
export function Panel({ options, data, width, height, timeRange, onChangeTimeRange }: Props) { |
|
console.log('panel', data); |
|
const configs: TableRowConfig[] = []; |
|
const [tasks, setTasks] = useState(configs); |
|
const dataFrame = getDataFrameForTable(tasks, setTasks); |
|
|
|
function onAddTaskClick(): void { |
|
const configs = [...tasks, createConfigItem()]; |
|
setTasks(configs); |
|
} |
|
|
|
return ( |
|
<div> |
|
<Table width={width} height={height - 40} data={dataFrame} /> |
|
<HorizontalGroup justify="flex-end"> |
|
<Button |
|
variant="primary" |
|
aria-label="Rich history button" |
|
icon="plus" |
|
style={{ marginTop: '8px' }} |
|
onClick={onAddTaskClick} |
|
> |
|
Add Task |
|
</Button> |
|
</HorizontalGroup> |
|
</div> |
|
); |
|
} |
|
|
|
function getDataFrameForTable(configs: TableRowConfig[], 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 onDeleteClick(e: DataLinkClickEvent, tasks: TableRowConfig[], setTasks: any): void { |
|
const rowIndex = e.origin.rowIndex; |
|
const filteredTasks = _.filter(tasks, (task, idx) => idx !== rowIndex); |
|
setTasks(filteredTasks); |
|
} |
|
|
|
function createConfigItem(): TableRowConfig { |
|
return { |
|
timestamp: Date.now(), |
|
user: 'admin', |
|
datasource: 'Prometheus', |
|
rowsCount: 3214, |
|
progress: 100, |
|
status: 'finished', |
|
} |
|
} |
|
|
|
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';
|
|
|