move initial request to be called from InputTimeInterval

Author: billangli

src/components/InputTimeInterval.vue

@@ -1,24 +1,24 @@
 <template lang="pug">
 div
   div
-    b-alert(v-if="mode == 'range' && invalidDaterange" variant="warning" show)
+    b-alert(v-if="mode == 'range' && invalidDaterange", variant="warning", show)
       | The selected date range is invalid. The second date must be greater than the first date.
-    b-alert(v-if="mode == 'range' && daterangeTooLong" variant="warning" show)
+    b-alert(v-if="mode == 'range' && daterangeTooLong", variant="warning", show)
       | The selected date range is too long. The maximum is {{ maxDuration/(24*60*60) }} days.
 
     table
       tr
         th.pr-2
           label(for="mode") Interval mode:
         td
-          select(id="mode" v-model="mode")
+          select(id="mode", v-model="mode")
             option(value='last_duration') Last duration
             option(value='range') Date range
       tr(v-if="mode == 'last_duration'")
         th.pr-2
           label(for="duration") Show last:
         td
-          select(id="duration" v-model="duration" @change="valueChanged")
+          select(id="duration", v-model="duration", @change="valueChanged")
             option(:value="15*60") 15min
             option(:value="30*60") 30min
             option(:value="60*60") 1h
@@ -30,8 +30,8 @@ div
       tr(v-if="mode == 'range'")
         th.pr-2 Range:
         td
-          input(type="date" v-model="start")
-          input(type="date" v-model="end")
+          input(type="date", v-model="start")
+          input(type="date", v-model="end")
           button(
             class="btn btn-outline-dark btn-sm",
             type="button", 
@@ -85,6 +85,9 @@ export default {
       return moment(this.start).add(this.maxDuration, 'seconds').isBefore(moment(this.end));
     },
   },
+  mounted() {
+    this.valueChanged();
+  },
   methods: {
     valueChanged() {
       if (

src/views/Bucket.vue

@@ -32,7 +32,6 @@ div
 </template>
 
 <script>
-import moment from 'moment';
 export default {
   name: 'Bucket',
   props: {
@@ -43,7 +42,7 @@ export default {
       bucket_with_events: { events: [] },
       events: [],
       eventcount: '?',
-      daterange: [moment().subtract(1, 'hour'), moment()],
+      daterange: null,
       maxDuration: 31 * 24 * 60 * 60,
     };
   },
@@ -59,7 +58,6 @@ export default {
   },
   mounted: async function () {
     await this.$store.dispatch('buckets/ensureBuckets');
-    await this.getEvents(this.id);
     await this.getEventCount(this.id);
   },
   methods: {

src/views/Timeline.vue

@@ -2,7 +2,7 @@
 div
   h2 Timeline
 
-  input-timeinterval(v-model="daterange", :defaultDuration="timeintervalDefaultDuration" :maxDuration="maxDuration")
+  input-timeinterval(v-model="daterange", :defaultDuration="timeintervalDefaultDuration", :maxDuration="maxDuration")
 
   div(v-show="buckets !== null")
     div
@@ -17,11 +17,10 @@ div
 </template>
 
 <script>
-import moment from 'moment';
 import _ from 'lodash';
 export default {
   name: 'Timeline',
-  data: () => {
+  data() {
     return {
       buckets: null,
       daterange: null,
@@ -39,10 +38,6 @@ export default {
       this.getBuckets();
     },
   },
-  mounted: function () {
-    (this.daterange = [moment().subtract(this.timeintervalDefaultDuration, 'seconds'), moment()]),
-      this.getBuckets(this.daterange);
-  },
   methods: {
     getBuckets: async function () {
       this.buckets = await this.$store.dispatch('buckets/getBucketsWithEvents', {