log-viewer/frontend/src/components/LogViewer.vue

<template>
  <div style="height: 100%; width: 100%">
  <ag-grid-vue
      style="width: 100%; height: 100%;"
      class="ag-theme-material"
      @grid-ready="onGridReady"
      :defaultColDef="defaultColDef"
      :columnDefs="columnDefs"
      :pagination="true"
      :paginationAutoPageSize=true
      :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-material.css";
import ScreenshotCell from "./ScreenshotCell.js";

export default {
  components: {
    AgGridVue,
    ScreenshotCell: ScreenshotCell
  },
  data() {
    return {
      gridApi: null,
      gridColumnApi: null,
      rowData: [],
      defaultColDef: {
        width: 50,
        initialPinned: true,
        resizable: true
      },
      currentRowCount: 0,
      viewRowCount: 20,
      comboBoxOptions: [],
      columnDefs:  [
        {
          field: '_id',
        },
        {
          field: 'kubernetes.namespace',
          headerName: 'namespace',
          tooltipValueGetter: (params) => params.value,
          filter: true,
        },
        {
          field: 'kubernetes.pod.name',
          headerName: 'pod',
          tooltipValueGetter: (params) => params.value,
          filter: true,
        },
        {
          field: 'kubernetes.container.name',
          headerName: 'container',
          tooltipValueGetter: (params) => params.value,
          filter: true,
        },
        {
          field: 'message',
          tooltipValueGetter: (params) => params.value,
          width: 500,
        },
        {
          field: 'stream',
        },
        {
          field: '@timestamp',
          width: 70,
          sortable: true
        }
      ],
    }
  },
  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.gridApi.updateRowData({add: [eventData]});
      this.gridApi.sizeColumnsToFit()
    },
    refreshRowData () {
      const itemsToUpdate = [];
      this.rowData.slice(0 - this.viewRowCount).forEach((row, index) => {
        row.index = index
        itemsToUpdate.push(row)
      });
      this.gridApi.applyTransactionAsync({ update: itemsToUpdate });
      this.gridApi.sizeColumnsToFit()
      this.getComboBoxOptions()
    },
    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)
      }
    },
  }
}

</script>