Experimental custom filter - select

frontend/src/components/ComboboxFilter.js

@@ -1,37 +1,29 @@
 export default {
     template: `
-      <span>
-        <select v-model="currentValue" style="width: 100px"
-        >
-          <option v-for="option in options">
-             {{ option }}
-          </option>
-          <option value=""/>
-        </select>
-      </span>
+      <select v-model="filter" class="v-select">
+        <option value=""> </option>
+        <option v-for="option in params.options" :value="option">
+           {{ option }}
+        </option>
+      </select>
     `,
     data: function () {
         return {
-            options: [],
-            currentValue: null,
+            filter: '',
         };
     },
-    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;
-            }
-        }
+        updateFilter() {
+            this.params.filterChangedCallback();
+        },
+
+        doesFilterPass(params) {
+            const value = this.params.field.split('.').reduce((a, b) => a[b], params.data);
+            return value === this.filter;
+        },
+
+        isFilterActive() {
+            return this.filter !== ''
+        },
     },
 };

frontend/src/components/LogViewer.vue

@@ -24,11 +24,14 @@ import "ag-grid-community/styles//ag-grid.css";
 import "ag-grid-community/styles//ag-theme-material.css";
 import ScreenshotCell from "./ScreenshotCell.js";
 import ExamineLogModal from "./ExamineLogModal.vue";
+import ComboboxFilter from "./ComboboxFilter.js";
+
 
 export default {
   components: {
     ExamineLogModal,
     AgGridVue,
+    ComboboxFilter,
     ScreenshotCell: ScreenshotCell
   },
   data() {
@@ -36,7 +39,6 @@ export default {
       examineLogContent: null,
       gridApi: null,
       gridColumnApi: null,
-      rowData: [],
       defaultColDef: {
         width: 50,
         initialPinned: true,
@@ -46,8 +48,11 @@ export default {
       currentRowCount: 0,
       comboBoxOptions: {},
       viewRowCount: 20,
-      comboBoxOptions: [],
-      columnDefs:  [
+    }
+  },
+  computed: {
+    columnDefs() {
+      return [
         {
           field: '@timestamp',
           width: 70,
@@ -57,19 +62,31 @@ export default {
           field: 'kubernetes.namespace',
           headerName: 'namespace',
           tooltipValueGetter: (params) => params.value,
-          filter: true,
+          filter: ComboboxFilter,
+          filterParams: {
+            options: this.comboBoxOptions['kubernetes.namespace'],
+            field: 'kubernetes.namespace',
+          }
         },
         {
           field: 'kubernetes.pod.name',
           headerName: 'pod',
           tooltipValueGetter: (params) => params.value,
-          filter: true,
+          filter: ComboboxFilter,
+          filterParams: {
+            options: this.comboBoxOptions['kubernetes.pod.name'],
+            field: 'kubernetes.pod.name',
+          }
         },
         {
           field: 'kubernetes.container.name',
           headerName: 'container',
           tooltipValueGetter: (params) => params.value,
-          filter: true,
+          filter: ComboboxFilter,
+          filterParams: {
+            options: this.comboBoxOptions['kubernetes.container.name'],
+            field: 'kubernetes.container.name',
+          }
         },
         {
           field: 'message',
@@ -78,8 +95,8 @@ export default {
         },
         {
           field: 'stream',
-        }
-      ],
+        },
+      ];
     }
   },
   created() {