<template>
  <div style="height: 100%; width: 100%">
  <ag-grid-vue
      style="width: 100%; height: 100%;"
      class="ag-theme-alpine"
      @grid-ready="onGridReady"
      :defaultColDef="defaultColDef"
      :columnDefs="columnDefs"
      :row-data="null"
      :supress-horisontal-scroll="true"
      :enable-scrolling="true"
  ></ag-grid-vue>
  </div>
</template>

<script>
import { AgGridVue } from "ag-grid-vue3";
import "ag-grid-community/styles//ag-grid.css";
import "ag-grid-community/styles//ag-theme-alpine.css";
import ScreenshotCell from "./ScreenshotCell.js";
import {watchEffect} from "vue";

export default {
  components: {
    AgGridVue,
    ScreenshotCell: ScreenshotCell,
  },
  data() {
    return {
      gridApi: null,
      gridColumnApi: null,
      rowData: [],
      defaultColDef: {
        width: 50,
        initialPinned: true,
        filter: true,
        floatingFilter: true,
        resizable: true,
      },
      columnDefs:  [
        {
          field: '_id',
        },
        {
          field: 'kubernetes.namespace',
          headerName: 'namespace',
        },
        {
          field: 'kubernetes.pod.name',
          headerName: 'pod',
        },
        {
          field: 'kubernetes.container.name',
          headerName: 'container',
        },
        {
          field: 'message',
          tooltipValueGetter: (params) => 'Address: ' + params.value,
          width: 500,
        },
        {
          field: 'stream',
        },
        {
          field: '@timestamp',
          width: 70
        }
      ],
    }
  },
  created() {
    this.setupStream()
  },
  methods: {
    setupStream() {
      let es = new EventSource('/events');
      es.onmessage = (e) => this.handleReceiveMessage(e)
    },
    onGridReady(params) {
      this.gridApi = params.api;
      this.gridColumnApi = params.columnApi;
    },
    handleReceiveMessage (event) {
      const eventData = this.parseEventData(event.data);
      this.rowData.unshift(eventData)
      this.gridApi.setRowData(this.rowData)
      this.gridApi.sizeColumnsToFit()
    },
    parseEventData (eventData) {
      try {
        let json = JSON.parse(eventData)
        if (!json.message) {
          json.message = JSON.stringify(json.json)
        }
        return json
      } catch (e) {
        console.error(e, eventData)
      }
    },
    setColumnDefs (json) {
      const keys = Object.keys(json)
      const defs = []
      keys.map((key) => {
        const definition = {
          field: key,
          initialPinned: true,
          filter: true,
          floatingFilter: true,
          minWidth: 80
        }
        defs.push(definition)
      })
      this.columnDefs = defs
    }
  }
}

</script>
