refactor: refactored event viewer (in Query/Search views) into component, changed use of (broken) aw-timeline to vis-timeline

Author: ErikBjare

src/components/SelectableEventView.vue

@@ -0,0 +1,48 @@
+<template lang="pug">
+div
+  div.form-group
+    select.form-control(v-model="vis_method")
+      option(value="eventlist") Event List
+      option(value="timeline") Timeline
+      option(value="summary") Summary
+      option(value="raw") Raw JSON
+
+  div(v-if="vis_method == 'timeline'")
+    vis-timeline(:buckets="[{'type': 'search', 'events': events}]")
+  div(v-if="vis_method == 'eventlist'")
+    aw-eventlist(:events="events")
+  div(v-if="vis_method == 'summary'")
+    input.form-control(type="text" v-model.lazy.trim="summaryKey" placeholder="data key" style="margin-bottom: 1em;")
+    aw-summary(:fields="events", :colorfunc="colorfunc", :namefunc="namefunc")
+  div(v-if="vis_method == 'raw'")
+    pre {{ events }}
+</template>
+
+<script>
+export default {
+  name: 'aw-selectable-eventview',
+  props: {
+    events: Array,
+    event_type: { type: String, default: 'currentwindow' },
+  },
+  data: function () {
+    return {
+      vis_method: 'eventlist',
+
+      /* Summary props */
+      summaryKey: 'title',
+      colorfunc: null,
+      namefunc: null,
+    };
+  },
+  mounted: async function () {
+    this.colorfunc = this.summaryKeyFunc;
+    this.namefunc = this.summaryKeyFunc;
+  },
+  methods: {
+    summaryKeyFunc: function (e) {
+      return e.data[this.summaryKey];
+    },
+  },
+};
+</script>

src/main.js

@@ -44,6 +44,7 @@ Vue.component('input-timeinterval', () => import('./components/InputTimeInterval
 Vue.component('aw-header', () => import('./components/Header.vue'));
 Vue.component('aw-devonly', () => import('./components/DevOnly.vue'));
 Vue.component('aw-selectable-vis', () => import('./components/SelectableVisualization.vue'));
+Vue.component('aw-selectable-eventview', () => import('./components/SelectableEventView.vue'));
 Vue.component('new-release-notification', () => import('./components/NewReleaseNotification.vue'));
 Vue.component('user-satisfaction-poll', () => import('./components/UserSatisfactionPoll.vue'));
 

src/views/QueryExplorer.vue

@@ -29,23 +29,7 @@ div
 
   hr
 
-  div.form-group
-    select.form-control(v-model="vis_method")
-      option(value="eventlist") Event List
-      option(value="timeline") Timeline
-      option(value="summary") Summary
-      option(value="raw") Raw JSON
-
-  div(v-if="vis_method == 'timeline'")
-    aw-timeline(type="simple", :event_type="event_type", :events="events")
-  div(v-if="vis_method == 'eventlist'")
-    aw-eventlist(:events="events")
-  div(v-if="vis_method == 'summary'")
-    input.form-control(type="text" v-model.lazy.trim="summaryKey" placeholder="data key" style="margin-bottom: 1em;")
-    aw-summary(:fields="events", :colorfunc="colorfunc", :namefunc="namefunc")
-  div(v-if="vis_method == 'raw'")
-    pre {{ events }}
-
+  aw-selectable-eventview(:events="events", :event_type="event_type")
 </template>
 
 <style scoped lang="scss"></style>
@@ -65,19 +49,13 @@ window_events = query_bucket(find_bucket("aw-watcher-window_"));
 window_events = filter_period_intersect(window_events, filter_keyvals(afk_events, "status", ["not-afk"]));
 merged_events = merge_events_by_keys(window_events, ["app", "title"]);
 RETURN = sort_by_duration(merged_events);`,
-      vis_method: 'eventlist',
       event_type: 'currentwindow',
       events: [],
       today: today.format(),
       tomorrow: tomorrow.format(),
       error: '',
       startdate: today.format('YYYY-MM-DD'),
       enddate: tomorrow.format('YYYY-MM-DD'),
-
-      /* Summary props */
-      summaryKey: '',
-      colorfunc: null,
-      namefunc: null,
     };
   },
   computed: {
@@ -86,10 +64,6 @@ RETURN = sort_by_duration(merged_events);`,
       else return '';
     },
   },
-  mounted: function () {
-    this.colorfunc = this.summaryKeyFunc;
-    this.namefunc = this.summaryKeyFunc;
-  },
   methods: {
     query: async function () {
       const query = this.query_code.split(';').map(s => s.trim() + ';');
@@ -102,9 +76,6 @@ RETURN = sort_by_duration(merged_events);`,
         this.error = e.response.data.message;
       }
     },
-    summaryKeyFunc: function (e) {
-      return e.data[this.summaryKey];
-    },
   },
 };
 </script>

src/views/Search.vue

@@ -53,22 +53,7 @@ div
   div(v-if="events != null")
     hr
 
-    div.form-group
-      select.form-control(v-model="vis_method")
-        option(value="eventlist") Event List
-        option(value="timeline") Timeline
-        option(value="summary") Summary
-        option(value="raw") Raw JSON
-
-    div(v-if="vis_method == 'timeline'")
-      aw-timeline(type="simple", :event_type="event_type", :events="events")
-    div(v-if="vis_method == 'eventlist'")
-      aw-eventlist(:events="events")
-    div(v-if="vis_method == 'summary'")
-      input.form-control(type="text" v-model.lazy.trim="summaryKey" placeholder="data key" style="margin-bottom: 1em;")
-      aw-summary(:fields="events", :colorfunc="colorfunc", :namefunc="namefunc")
-    div(v-if="vis_method == 'raw'")
-      pre {{ events }}
+    aw-selectable-eventview(:events="events")
 
     div
       | Didn't find what you were looking for?
@@ -107,16 +92,9 @@ export default {
       filter_afk: true,
       start: moment().subtract(1, 'day'),
       stop: moment().add(1, 'day'),
-
-      /* Summary props */
-      summaryKey: 'title',
-      colorfunc: null,
-      namefunc: null,
     };
   },
   mounted: async function () {
-    this.colorfunc = this.summaryKeyFunc;
-    this.namefunc = this.summaryKeyFunc;
     await this.$store.dispatch('buckets/ensureBuckets');
     this.hostname = Object.keys(this.$store.getters['buckets/bucketsByHostname'])[0];
   },
@@ -145,9 +123,6 @@ export default {
         this.status = null;
       }
     },
-    summaryKeyFunc: function (e) {
-      return e.data[this.summaryKey];
-    },
   },
 };
 </script>

src/visualizations/EventList.vue

@@ -4,15 +4,15 @@ div
     span(slot="header")
       h4.card-title Events
       span.pagination-header
-        | Showing {{ events.length }} events
+        | Showing {{ displayed_events.length }} events #[span(v-if="events.length > displayed_events.length") (out of {{ events.length }})]
       b-button(@click="expandList", size="sm", style="float: right;")
         span(v-if="!isListExpanded")
           | Expand list
         span(v-else)
           | Condense list
 
     ul.event-list(:class="{ 'expand': isListExpanded }")
-      li(v-for="event in events")
+      li(v-for="event in displayed_events")
           span.event
             span.field(:title="event.timestamp")
               icon(name="calendar")
@@ -136,8 +136,14 @@ export default {
   data: function () {
     return {
       isListExpanded: false,
+      limit: 100,
     };
   },
+  computed: {
+    displayed_events: function () {
+      return this.events.slice(0, this.limit);
+    },
+  },
   methods: {
     expandList: function () {
       this.isListExpanded = !this.isListExpanded;