Experimental combobox, pagination

frontend/src/components/ComboboxFilter.js

@@ -0,0 +1,37 @@
+export default {
+    template: `
+      <span>
+        <select v-model="currentValue" style="width: 100px"
+        >
+          <option v-for="option in options">
+             {{ option }}
+          </option>
+          <option value=""/>
+        </select>
+      </span>
+    `,
+    data: function () {
+        return {
+            options: [],
+            currentValue: null,
+        };
+    },
+    watch: {
+        currentValue (newValue) {
+            this.params.parentFilterInstance((instance) => {
+                instance.onFloatingFilterChanged('', newValue);
+            });
+        }
+    },
+    methods: {
+        onParentModelChanged(parentModel) {
+            this.options = this.params.column.colDef.floatingFilterComponentParams.options
+            // When the filter is empty we will receive a null value here
+            if (!parentModel) {
+                this.currentValue = '';
+            } else {
+                this.currentValue = parentModel.filter;
+            }
+        }
+    },
+};

frontend/src/components/LogViewer.vue

@@ -6,10 +6,11 @@
       @grid-ready="onGridReady"
       :defaultColDef="defaultColDef"
       :columnDefs="columnDefs"
+      :pagination="true"
+      :paginationAutoPageSize=true
       :row-data="null"
       :supress-horisontal-scroll="true"
       :enable-scrolling="true"
-      :get-row-id="(params) => params.data.index"
     ></ag-grid-vue>
   </div>
 </template>
@@ -19,12 +20,26 @@ 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";
+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 {
@@ -34,9 +49,8 @@ export default {
       defaultColDef: {
         width: 50,
         initialPinned: true,
-        filter: true,
-        floatingFilter: true,
         resizable: true,
+        editable: true
       },
       currentRowCount: 0,
       viewRowCount: 20,
@@ -48,6 +62,7 @@ export default {
         {
           field: 'kubernetes.namespace',
           headerName: 'namespace',
+          ...comboBoxDefinition(),
         },
         {
           field: 'kubernetes.pod.name',
@@ -101,19 +116,15 @@ export default {
       this.gridApi = params.api;
       this.gridColumnApi = params.columnApi;
       const timer = setInterval(() => {
-        this.refreshRowData();
+        this.getComboBoxOptions();
-      }, 1000);
+      }, 3000);
     },
     handleReceiveMessage (event) {
       const eventData = this.parseEventData(event.data);
-      eventData.index = this.currentRowCount
+      this.rowData.push(eventData)
-      // this.rowData.unshift(eventData)
+      this.gridApi.setRowData(this.rowData)
-      if (this.currentRowCount < this.viewRowCount) {
-        this.gridApi.setRowData(this.rowData)
-        this.currentRowCount = this.currentRowCount + 1
-      }
-
       this.gridApi.sizeColumnsToFit()
+      this.getComboBoxOptions()
     },
     refreshRowData () {
       const itemsToUpdate = [];