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-alpine"
      @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-alpine.css";
import ScreenshotCell from "./ScreenshotCell.js";
import ComboboxFilter from './ComboboxFilter.js';

const comboBoxDefinition = () => {
  return {
    filter: true,
    floatingFilter: true,
    suppressMenu: true,
    floatingFilterComponent: 'ComboboxFilter',
    floatingFilterComponentParams: {
      suppressFilterButton: true,
      options: []
    },
  }
};

export default {
  components: {
    AgGridVue,
    ScreenshotCell: ScreenshotCell,
    ComboboxFilter
  },
  data() {
    return {
      gridApi: null,
      gridColumnApi: null,
      rowData: [],
      defaultColDef: {
        width: 50,
        initialPinned: true,
        resizable: true,
        editable: true
      },
      currentRowCount: 0,
      viewRowCount: 20,
      comboBoxOptions: [],
      columnDefs:  [
        {
          field: '_id',
        },
        {
          field: 'kubernetes.namespace',
          headerName: 'namespace',
          ...comboBoxDefinition(),
        },
        {
          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()
  },
  watch: {
    comboBoxOptions: {
      handler(newValue, oldValue) {
        const clonedDefs = [ ...this.columnDefs ];
        clonedDefs.map((def) => {
          if ((def.floatingFilterComponent || null) === 'ComboboxFilter' ) {
            def.floatingFilterComponentParams = {
              suppressFilterButton: true,
              options: Object.values(newValue[def.field])
            }
            return def
          }
        })
        this.columnDefs = clonedDefs
      }
    }
  },
  methods: {
    setupStream() {
      let es = new EventSource('/events');
      es.onmessage = (e) => this.handleReceiveMessage(e)
    },
    onGridReady(params) {
      this.gridApi = params.api;
      this.gridColumnApi = params.columnApi;
      const timer = setInterval(() => {
        this.getComboBoxOptions();
      }, 3000);
    },
    handleReceiveMessage (event) {
      const eventData = this.parseEventData(event.data);
      this.rowData.push(eventData)
      this.gridApi.setRowData(this.rowData)
      this.gridApi.sizeColumnsToFit()
      this.getComboBoxOptions()
    },
    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)
      }
    },
    getComboBoxOptions () {
      const opts = {}
      this.columnDefs.map((def) => {
        if ((def.floatingFilterComponent || null) === 'ComboboxFilter' ) {
          const field = def.field
          const unique = {};
          this.rowData.map((row) => {
            const value = field.split('.').reduce((a, b) => a[b], row);
            unique[value] = 1;
          })
          const uniqueArray = [];
          for (const n in unique) uniqueArray.push(n);
          opts[field] = uniqueArray
        }
      })
      if (JSON.stringify(this.comboBoxOptions) !== JSON.stringify(opts)) {
        this.comboBoxOptions = opts
      }
    }
  }
}

</script>