add initial table

src/components/Panel.tsx

@@ -1,17 +1,150 @@
-import { PanelOptions } from '../types';
+import { PanelOptions, TableRowConfig } from '../types';
 
-import { PanelProps } from '@grafana/data';
+import { Table, Button, HorizontalGroup } from '@grafana/ui';
 
-import React from 'react';
+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',options, data);
+  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>
-      test
+      <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';

src/types.ts

@@ -1,3 +1,12 @@
 export interface PanelOptions {
   visualizationType: string;
 }
+
+export type TableRowConfig = {
+  timestamp: number;
+  user: string;
+  datasource: string;
+  rowsCount: number;
+  progress: number;
+  status: string;
+}