Experimental update mechanism for a single page view

frontend/src/components/LogViewer.vue

@@ -9,6 +9,7 @@
       :row-data="null"
       :supress-horisontal-scroll="true"
       :enable-scrolling="true"
+      :get-row-id="(params) => params.data.index"
     ></ag-grid-vue>
   </div>
 </template>
@@ -37,6 +38,9 @@ export default {
         floatingFilter: true,
         resizable: true,
       },
+      currentRowCount: 0,
+      viewRowCount: 20,
+      comboBoxOptions: [],
       columnDefs:  [
         {
           field: '_id',
@@ -71,6 +75,23 @@ 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');
@@ -79,13 +100,31 @@ export default {
     onGridReady(params) {
       this.gridApi = params.api;
       this.gridColumnApi = params.columnApi;
+      const timer = setInterval(() => {
+        this.refreshRowData();
+      }, 1000);
     },
     handleReceiveMessage (event) {
       const eventData = this.parseEventData(event.data);
-      this.rowData.unshift(eventData)
+      eventData.index = this.currentRowCount
+      // this.rowData.unshift(eventData)
+      if (this.currentRowCount < this.viewRowCount) {
         this.gridApi.setRowData(this.rowData)
+        this.currentRowCount = this.currentRowCount + 1
+      }
+
       this.gridApi.sizeColumnsToFit()
     },
+    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)
@@ -97,20 +136,24 @@ export default {
         console.error(e, eventData)
       }
     },
-    setColumnDefs (json) {
-      const keys = Object.keys(json)
-      const defs = []
-      keys.map((key) => {
-        const definition = {
-          field: key,
-          initialPinned: true,
-          filter: true,
-          floatingFilter: true,
-          minWidth: 80
-        }
-        defs.push(definition)
+    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;
           })
-      this.columnDefs = defs
+          const uniqueArray = [];
+          for (const n in unique) uniqueArray.push(n);
+          opts[field] = uniqueArray
+        }
+      })
+      if (JSON.stringify(this.comboBoxOptions) !== JSON.stringify(opts)) {
+        this.comboBoxOptions = opts
+      }
     }
   }
 }