From eeae62f06bf40b463dd250a359eb3892a0714db1 Mon Sep 17 00:00:00 2001
From: skaparis <skaparis@gmail.com>
Date: Sat, 18 Nov 2023 01:30:14 +0300
Subject: [PATCH] Filtering clients and hosts on timeline

---
 src/views/Timeline.vue | 37 ++++++++++++++++++++++++++++++++++++-
 1 file changed, 36 insertions(+), 1 deletion(-)

diff --git a/src/views/Timeline.vue b/src/views/Timeline.vue
index b7a9ec04..13dfbb4c 100644
--- a/src/views/Timeline.vue
+++ b/src/views/Timeline.vue
@@ -2,6 +2,22 @@
 div
   h2 Timeline
 
+  div.d-flex.justify-content-between.align-items-end
+    table
+      tr
+        th.pr-2
+          label Host filter:
+        td
+            select(v-model="filter_hostname")
+              option(value='*') *
+              option(v-for="host in hosts", :value="host") {{ host }}
+        th.pr-2
+          label Client filter:
+        td
+          select(v-model="filter_client")
+            option(value='*') *
+            option(v-for="client in clients", :value="client") {{ client }}
+
   input-timeinterval(v-model="daterange", :defaultDuration="timeintervalDefaultDuration", :maxDuration="maxDuration")
 
   div(v-if="buckets !== null")
@@ -28,9 +44,13 @@ export default {
   name: 'Timeline',
   data() {
     return {
+      all_buckets: null,
+      hosts: null,
       buckets: null,
       daterange: null,
       maxDuration: 31 * 24 * 60 * 60,
+      filter_hostname: '*',
+      filter_client: '*',
     };
   },
   computed: {
@@ -46,16 +66,31 @@ export default {
     daterange() {
       this.getBuckets();
     },
+    filter_hostname() {
+      this.getBuckets();
+    },
+    filter_client() {
+      this.getBuckets();
+    }
   },
   methods: {
     getBuckets: async function () {
       if (this.daterange == null) return;
-      this.buckets = Object.freeze(
+
+      this.all_buckets = Object.freeze(
         await useBucketsStore().getBucketsWithEvents({
           start: this.daterange[0].format(),
           end: this.daterange[1].format(),
         })
       );
+
+      this.hosts = this.all_buckets.map(a => a.hostname).filter((value, index, array) => array.indexOf(value) === index);
+      this.clients = this.all_buckets.map(a => a.client).filter((value, index, array) => array.indexOf(value) === index);
+      console.log(this.clients);
+      console.log(this.all_buckets);
+      this.buckets = this.all_buckets;
+      this.buckets = _.filter(this.buckets, b => this.filter_hostname == '*' || b.hostname == this.filter_hostname);
+      this.buckets = _.filter(this.buckets, b => this.filter_client == '*' || b.client == this.filter_client);
     },
   },
 };