From b2439a7a4994420dac56a8138a0494312b6314c9 Mon Sep 17 00:00:00 2001
From: Erki Aas <eaas@k-space.ee>
Date: Tue, 11 Oct 2022 02:50:03 +0300
Subject: [PATCH] Experimental combobox, pagination

---
 frontend/src/components/ComboboxFilter.js | 37 +++++++++++++++++++++++
 frontend/src/components/LogViewer.vue     | 37 +++++++++++++++--------
 2 files changed, 61 insertions(+), 13 deletions(-)
 create mode 100644 frontend/src/components/ComboboxFilter.js

diff --git a/frontend/src/components/ComboboxFilter.js b/frontend/src/components/ComboboxFilter.js
new file mode 100644
index 0000000..622fcfb
--- /dev/null
+++ b/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;
+            }
+        }
+    },
+};
\ No newline at end of file
diff --git a/frontend/src/components/LogViewer.vue b/frontend/src/components/LogViewer.vue
index 184dd16..320da2c 100644
--- a/frontend/src/components/LogViewer.vue
+++ b/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();
-      }, 1000);
+        this.getComboBoxOptions();
+      }, 3000);
     },
     handleReceiveMessage (event) {
       const eventData = this.parseEventData(event.data);
-      eventData.index = this.currentRowCount
-      // this.rowData.unshift(eventData)
-      if (this.currentRowCount < this.viewRowCount) {
-        this.gridApi.setRowData(this.rowData)
-        this.currentRowCount = this.currentRowCount + 1
-      }
-
+      this.rowData.push(eventData)
+      this.gridApi.setRowData(this.rowData)
       this.gridApi.sizeColumnsToFit()
+      this.getComboBoxOptions()
     },
     refreshRowData () {
       const itemsToUpdate = [];