From d7c70b4989bc02bdbb9688b8c9ce1895e81718e7 Mon Sep 17 00:00:00 2001
From: Sergei Kaparis <43264989+skaparis@users.noreply.github.com>
Date: Sun, 19 Nov 2023 12:13:26 +0300
Subject: [PATCH] feat: filtering clients and hosts on timeline (#502)

* Filtering clients and hosts on timeline

* minor default values fixes, code styling

* some code styling to pass lint
---
 src/views/Timeline.vue | 45 +++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 44 insertions(+), 1 deletion(-)

diff --git a/src/views/Timeline.vue b/src/views/Timeline.vue
index b7a9ec04..bd06002d 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='null') *
+              option(v-for="host in hosts", :value="host") {{ host }}
+        th.pr-2
+          label Client filter:
+        td
+          select(v-model="filter_client")
+            option(:value='null') *
+            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: null,
+      filter_client: null,
     };
   },
   computed: {
@@ -46,16 +66,39 @@ 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);
+      this.buckets = this.all_buckets;
+      this.buckets = _.filter(
+        this.buckets,
+        b => this.filter_hostname == null || b.hostname == this.filter_hostname
+      );
+      this.buckets = _.filter(
+        this.buckets,
+        b => this.filter_client == null || b.client == this.filter_client
+      );
     },
   },
 };