Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
refactor: refactored event viewer (in Query/Search views) into compon…
…ent, changed use of (broken) aw-timeline to vis-timeline
  • Loading branch information
ErikBjare committed Jan 2, 2021
1 parent f6389ee commit 613b51e
Show file tree
Hide file tree
Showing 5 changed files with 59 additions and 58 deletions.
48 changes: 48 additions & 0 deletions 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>
1 change: 1 addition & 0 deletions src/main.js
Expand Up @@ -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'));

Expand Down
31 changes: 1 addition & 30 deletions src/views/QueryExplorer.vue
Expand Up @@ -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>
Expand All @@ -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: {
Expand All @@ -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() + ';');
Expand All @@ -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>
27 changes: 1 addition & 26 deletions src/views/Search.vue
Expand Up @@ -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?
Expand Down Expand Up @@ -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];
},
Expand Down Expand Up @@ -145,9 +123,6 @@ export default {
this.status = null;
}
},
summaryKeyFunc: function (e) {
return e.data[this.summaryKey];
},
},
};
</script>
10 changes: 8 additions & 2 deletions src/visualizations/EventList.vue
Expand Up @@ -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")
Expand Down Expand Up @@ -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;
Expand Down

0 comments on commit 613b51e

Please sign in to comment.