fix: simplified styling, display timeline lastUpdated as friendlytime

src/components/CategoryEditTree.vue

@@ -16,9 +16,9 @@ div
         span(v-if="_class.rule.type === 'regex'") Rule ({{_class.rule.type}}): #[code {{_class.rule.regex}}]
         span(v-else, style="color: #888") No rule
       span.float-right
-        b-btn.ml-1(size="sm", variant="outline-secondary", @click="showEditModal(_class.id)" style="border: 0;" pill)
+        b-btn.ml-1.border-0(size="sm", variant="outline-secondary", @click="showEditModal(_class.id)" pill)
           icon(name="edit")
-        b-btn.ml-1(size="sm", variant="outline-success", @click="addSubclass(_class); expanded = true" style="border: 0;" pill)
+        b-btn.ml-1.border-0(size="sm", variant="outline-success", @click="addSubclass(_class); expanded = true" pill)
           icon(name="plus")
   div
     div.pa-2(v-for="child in _class.children", style="background: rgba(0, 0, 0, 0);", v-show="expanded")

src/components/InputTimeInterval.vue

@@ -39,16 +39,14 @@ div
             :disabled="mode == 'range' && (invalidDaterange || emptyDaterange || daterangeTooLong)",
             @click="valueChanged"
           ) Update
-      
+
     div(style="text-align:right" v-if="showUpdate && mode=='last_duration'")
       b-button.px-2(@click="update()", variant="outline-dark", size="sm")
         icon(name="sync")
         span.d-none.d-md-inline
           |  Update
-      div.mt-1.small(style="color: #999" v-if="lastUpdate")
-        | Last update: {{lastUpdate.format("YYYY-MM-DD HH:mm:ss")}}
-
-
+      div.mt-1.small.text-muted(v-if="lastUpdate")
+        | Last update: #[time(:datetime="lastUpdate.format()") {{lastUpdate | friendlytime}}]
 </template>
 
 <style scoped lang="scss"></style>
@@ -104,6 +102,17 @@ export default {
   mounted() {
     this.duration = this.defaultDuration;
     this.valueChanged();
+
+    // We want our lastUpdated text to update every ~3s
+    // We can do this by setting it to null and then the previous value.
+    this.lastUpdateTimer = setInterval(() => {
+      const _lastUpdate = this.lastUpdate;
+      this.lastUpdate = null;
+      this.lastUpdate = _lastUpdate;
+    }, 1000);
+  },
+  beforeDestroy() {
+    clearInterval(this.lastUpdateTimer);
   },
   methods: {
     valueChanged() {

src/components/SelectableVisualization.vue

@@ -84,7 +84,7 @@ div
   right: 0.8em;
 
   .btn {
-    border: 0px;
+    border: 0;
   }
 }
 </style>

src/views/Report.vue

@@ -18,7 +18,7 @@ div
 
   div.d-flex.mt-1
     span.mr-auto.small(style="color: #666") Hostname: {{queryOptions.hostname}}
-    b-button(size="sm", variant="outline-dark" style="border: 0" @click="show_options = !show_options")
+    b-button.border-0(size="sm", variant="outline-dark" @click="show_options = !show_options")
       span(v-if="!show_options")
         | #[icon(name="angle-double-down")] Show options
       span(v-else)

src/views/Search.vue

@@ -17,7 +17,7 @@ div
 
   div.d-flex.mt-1
     span.mr-auto.small(style="color: #666") Hostname: {{queryOptions.hostname}}
-    b-button(size="sm", variant="outline-dark" style="border: 0" @click="show_options = !show_options")
+    b-button.border-0(size="sm", variant="outline-dark" @click="show_options = !show_options")
       span(v-if="!show_options")
         | #[icon(name="angle-double-down")] Show options
       span(v-else)

src/views/Trends.vue

@@ -18,7 +18,7 @@ div
 
   div.mb-2
     ul.list-group.list-group-horizontal-md.mb-3(style="font-size: 0.9em; opacity: 0.7")
-      li.list-group-item.pl-0.pr-3.py-0(style="border: 0")
+      li.list-group-item.pl-0.pr-3.py-0.border-0
         | #[b Host:] {{ host }}
 
   b-alert(style="warning" show)

src/views/activity/Activity.vue

@@ -1,19 +1,19 @@
 <template lang="pug">
 div
-  h3 Activity #[span.d-sm-inline.d-none for ]
+  h3.mb-0 Activity #[span.d-sm-inline.d-none for ]
     span.text-muted.d-sm-inline-block.d-block  {{ timeperiod | friendlyperiod }}
 
-  div.mb-2.dim
+  div.mb-3.text-muted(style="font-size: 0.9em;")
     ul.list-group.list-group-horizontal-md
-      li.list-group-item.pl-0.pr-3.py-0(style="border: 0")
+      li.list-group-item.pl-0.pr-3.py-0.border-0
         b.mr-1 Host:
         span {{ host }}
-      li.list-group-item.pl-0.pr-3.py-0(style="border: 0")
+      li.list-group-item.pl-0.pr-3.py-0.border-0
         b.mr-1 Time active:
         span {{ activityStore.active.duration | friendlyduration }}
     ul.list-group.list-group-horizontal-md(v-if="periodLength != 'day'")
-      li.list-group-item.pl-0.pr-3.py-0(style="border: 0")
-        b.mr-1 Query range:
+      li.list-group-item.pl-0.pr-3.py-0.border-0
+        0.mr-1 Query range:
         span {{ periodReadableRange }}
 
 
@@ -96,10 +96,6 @@ div
 <style lang="scss" scoped>
 @import '../../style/globals';
 
-.dim {
-  opacity: 0.85;
-}
-
 .nav {
   border-bottom: 1px solid $lightBorderColor;
 

src/visualizations/VisTimeline.vue

@@ -2,7 +2,7 @@
 div
   div#visualization
 
-  div.small.my-2
+  div.small.my-2(v-if="bucketsFromEither.length != 1")
     i Buckets with no events in the queried range will be hidden.
 
   div(v-if="editingEvent")