feat: redesigned timeline filter settings, hid inside <details>

ErikBjare · ErikBjare · commit 609a7cc8e47b · 2023-11-19T22:07:01.000+01:00
diff --git a/src/views/Timeline.vue b/src/views/Timeline.vue
@@ -2,30 +2,34 @@
 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").mb-2
 
-  input-timeinterval(v-model="daterange", :defaultDuration="timeintervalDefaultDuration", :maxDuration="maxDuration")
+  // blocks
+  div.d-inline-block.border.rounded.p-2.mr-2
+    | Events shown:  {{ num_events }}
+  details.d-inline-block.bg-light.small.border.rounded.mr-2.px-2
+    summary.p-2
+      b Filters
+    div.p-2.bg-light
+      table
+        tr
+          th.pt-2.pr-3
+            label Host:
+          td
+              select(v-model="filter_hostname")
+                option(:value='null') All
+                option(v-for="host in hosts", :value="host") {{ host }}
+        tr
+          th.pt-2.pr-3
+            label Client:
+          td
+            select(v-model="filter_client")
+              option(:value='null') All
+              option(v-for="client in clients", :value="client") {{ client }}
+  div(style="float: right; color: #999").d-inline-block.pt-3
+    | Drag to pan and scroll to zoom
 
   div(v-if="buckets !== null")
-    div
-      div(style="float: left")
-        | Events shown:  {{ num_events }}
-      div(style="float: right; color: #999")
-        | Drag to pan and scroll to zoom.
     div(style="clear: both")
     vis-timeline(:buckets="buckets", :showRowLabels='true', :queriedInterval="daterange")
 
@@ -47,6 +51,7 @@ export default {
       all_buckets: null,
       hosts: null,
       buckets: null,
+      clients: null,
       daterange: null,
       maxDuration: 31 * 24 * 60 * 60,
       filter_hostname: null,
@@ -90,16 +95,33 @@ export default {
       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
-      );
+
+      let buckets = this.all_buckets;
+      if (this.filter_hostname) {
+        buckets = _.filter(buckets, b => b.hostname == this.filter_hostname);
+      }
+      if (this.filter_client) {
+        buckets = _.filter(buckets, b => b.client == this.filter_client);
+      }
+      this.buckets = buckets;
     },
   },
 };
 </script>
+
+<style scoped>
+details {
+  position: relative;
+}
+
+details[open] summary ~ * {
+  visibility: visible;
+  position: absolute;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  left: 0;
+  top: 2.7em;
+  background: white;
+  z-index: 100;
+}
+</style>
