Regular filters instead of experimental combobox, sort by timestamp

frontend/src/components/LogViewer.vue

@@ -20,20 +20,6 @@ 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: {
@@ -62,15 +48,17 @@ export default {
         {
           field: 'kubernetes.namespace',
           headerName: 'namespace',
-          ...comboBoxDefinition(),
+          filter: true,
         },
         {
           field: 'kubernetes.pod.name',
           headerName: 'pod',
+          filter: true,
         },
         {
           field: 'kubernetes.container.name',
           headerName: 'container',
+          filter: true,
         },
         {
           field: 'message',
@@ -82,7 +70,8 @@ export default {
         },
         {
           field: '@timestamp',
-          width: 70
+          width: 70,
+          sortable: true
         }
       ],
     }
@@ -90,23 +79,6 @@ export default {
   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');
@@ -115,16 +87,11 @@ export default {
     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.updateRowData({add: [eventData]});
-      this.gridApi.setRowData(this.rowData)
       this.gridApi.sizeColumnsToFit()
-      this.getComboBoxOptions()
     },
     refreshRowData () {
       const itemsToUpdate = [];
@@ -147,25 +114,6 @@ export default {
         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
-      }
-    }
   }
 }