grafana-data-exporter-app/src/panels/corpglory-dataexporter-panel/components/Panel.tsx

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';