7 changed files with 219 additions and 3 deletions
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 3.1 KiB |
@ -0,0 +1,167 @@
|
||||
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'; |
||||
@ -0,0 +1,7 @@
|
||||
import { PanelOptions } from './types'; |
||||
|
||||
import { Panel } from './components/Panel'; |
||||
|
||||
import { PanelPlugin } from '@grafana/data'; |
||||
|
||||
export const plugin = new PanelPlugin<PanelOptions>(Panel); |
||||
@ -0,0 +1,18 @@
|
||||
{ |
||||
"$schema": "https://raw.githubusercontent.com/grafana/grafana/master/docs/sources/developers/plugins/plugin.schema.json", |
||||
"type": "panel", |
||||
"name": "Data Exporter Panel", |
||||
"id": "corpglory-dataexporter-panel", |
||||
"skipDataQuery": true, |
||||
"info": { |
||||
"description": "Panel for exporting metrics from Grafana dashboards", |
||||
"author": { |
||||
"name": "CorpGlory Inc.", |
||||
"url": "https://corpglory.com" |
||||
}, |
||||
"logos": { |
||||
"small": "../corpglory-dataexporter-app/img/logo.svg", |
||||
"large": "../corpglory-dataexporter-app/img/logo.svg" |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,10 @@
|
||||
export interface PanelOptions {} |
||||
|
||||
export type TableRowConfig = { |
||||
timestamp: number; |
||||
user: string; |
||||
datasource: string; |
||||
rowsCount: number; |
||||
progress: number; |
||||
status: string; |
||||
}; |
||||
Loading…
Reference in new issue