Apply new linter settings

Signed-off-by: Knut Ahlers <knut@ahlers.me>

src/app.vue

@@ -1,59 +1,107 @@
 <template>
   <div id="app">
-    <b-navbar toggleable="lg" type="light" variant="light">
+    <b-navbar
-      <b-navbar-brand href="welcome">MonDash</b-navbar-brand>
+      toggleable="lg"
+      type="light"
+      variant="light"
+    >
+      <b-navbar-brand href="welcome">
+        MonDash
+      </b-navbar-brand>
 
-      <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
+      <b-navbar-toggle target="nav-collapse" />
 
-      <b-collapse id="nav-collapse" is-nav>
+      <b-collapse
+        id="nav-collapse"
+        is-nav
+      >
         <b-navbar-nav>
-          <b-nav-item href="http://docs.mondash.apiary.io/" target="_blank">API Docs</b-nav-item>
+          <b-nav-item
+            href="http://docs.mondash.apiary.io/"
+            target="_blank"
+          >
+            API Docs
+          </b-nav-item>
         </b-navbar-nav>
 
         <!-- Right aligned nav items -->
         <b-navbar-nav class="ml-auto">
-          <b-nav-item @click="show_filters = !show_filters">Toggle Filters</b-nav-item>
+          <b-nav-item @click="show_filters = !show_filters">
-          <b-nav-item href="/create">Get your own dashboard</b-nav-item>
+            Toggle Filters
+          </b-nav-item>
+          <b-nav-item href="/create">
+            Get your own dashboard
+          </b-nav-item>
         </b-navbar-nav>
       </b-collapse>
     </b-navbar>
 
     <b-container class="mt-4">
-
       <b-row v-if="dash_id == 'welcome'">
         <b-col>
-          <b-jumbotron header="Welcome to MonDash!" class="text-center">
+          <b-jumbotron
-            <p>You're currently seeing a demo dashboard updated with random numbers below. To get started read the <a href="http://docs.mondash.apiary.io/" target="_blank">API documentation</a> and create your own dashboard by clicking the button in the upper right hand corner&hellip;
+            header="Welcome to MonDash!"
-            <p>If you have any questions about this project don't hesitate to ask <a href="https://ahlers.me/" target="_blank">Knut</a>.</p>
+            class="text-center"
+          >
+            <p>
+              You're currently seeing a demo dashboard updated with random numbers below. To get started read the <a
+                href="http://docs.mondash.apiary.io/"
+                target="_blank"
+              >API documentation</a> and create your own dashboard by clicking the button in the upper right hand corner&hellip;
+            </p><p>
+              If you have any questions about this project don't hesitate to ask <a
+                href="https://ahlers.me/"
+                target="_blank"
+              >Knut</a>.
+            </p>
           </b-jumbotron>
         </b-col>
       </b-row>
 
-      <b-row v-else-if="api_key && !metrics" class="justify-content-md-center">
+      <b-row
-        <b-col cols="12" md="6" class="text-center">
+        v-else-if="api_key && !metrics"
+        class="justify-content-md-center"
+      >
+        <b-col
+          cols="12"
+          md="6"
+          class="text-center"
+        >
           <p>Welcome to your new dashboard. Your API-key is:</p>
 
           <code>{{ api_key }}</code>
 
           <p>
-          After you sent your first metric you can reach your dashboard here:<br>
+            After you sent your first metric you can reach your dashboard here:<br>
-          <a :href="location">{{ location }}</a>
+            <a :href="location">{{ location }}</a>
           </p>
         </b-col>
       </b-row>
 
-      <b-row v-if="show_filters" class="mb-4">
+      <b-row
+        v-if="show_filters"
+        class="mb-4"
+      >
         <b-col>
-          <b-card bg-variant="primary" text-variant="white">
+          <b-card
+            bg-variant="primary"
+            text-variant="white"
+          >
             <b-row>
               <b-col cols="8">
                 <b-form-group label="Filter by text:">
-                  <b-form-input v-model="filter_text" placeholder="Filter metrics by title / description"></b-form-input>
+                  <b-form-input
+                    v-model="filter_text"
+                    placeholder="Filter metrics by title / description"
+                  />
                 </b-form-group>
               </b-col>
               <b-col cols="4">
                 <b-form-group label="Filter by status:">
-                  <b-form-select v-model="level_filter" :options="level_filters"></b-form-select>
+                  <b-form-select
+                    v-model="level_filter"
+                    :options="level_filters"
+                  />
                 </b-form-group>
               </b-col>
             </b-row>
@@ -61,8 +109,11 @@
         </b-col>
       </b-row>
 
-      <metric v-for="metric in filtered_metrics" :metric="metric" :key="metric.id"></metric>
+      <metric
-
+        v-for="metric in filtered_metrics"
+        :key="metric.id"
+        :metric="metric"
+      />
     </b-container>
   </div>
 </template>
@@ -73,11 +124,27 @@ import axios from 'axios'
 import metric from './metric.vue'
 
 export default {
-  name: 'app',
+  name: 'App',
 
   components: {
     metric,
   },
+
+  data() {
+    return {
+      api_key: null,
+      filter_text: '',
+      level_filter: 3,
+      level_filters: [
+        { value: 3, text: 'Unknown, OK, Warning, Critical' },
+        { value: 0, text: 'OK, Warning, Critical' },
+        { value: 1, text: 'Warning, Critical' },
+        { value: 2, text: 'Critical' },
+      ],
+      metrics: [],
+      show_filters: false,
+    }
+  },
   computed: {
     dash_id() {
       return window.location.pathname.substr(1)
@@ -118,20 +185,12 @@ export default {
     },
   },
 
-  data() {
+  watch: {
-    return {
+  },
-      api_key: null,
+
-      filter_text: '',
+  mounted() {
-      level_filter: 3,
+    this.updateDashboardData()
-      level_filters: [
+    window.setInterval(() => this.updateDashboardData(), 10000)
-        { value: 3, text: 'Unknown, OK, Warning, Critical' },
-        { value: 0, text: 'OK, Warning, Critical' },
-        { value: 1, text: 'Warning, Critical' },
-        { value: 2, text: 'Critical' },
-      ],
-      metrics: [],
-      show_filters: false,
-    }
   },
 
   methods: {
@@ -145,13 +204,5 @@ export default {
         .catch(err => console.error(err))
     },
   },
-
-  mounted() {
-    this.updateDashboardData()
-    window.setInterval(() => this.updateDashboardData(), 10000)
-  },
-
-  watch: {
-  },
 }
 </script>

src/graph.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="ct-double-octave" ref="container"></div>
+  <div
+    ref="container"
+    class="ct-double-octave"
+  />
 </template>
 
 <script>
@@ -7,8 +10,19 @@ import chartist from 'chartist'
 import moment from 'moment'
 
 export default {
-  name: 'graph',
+  name: 'Graph',
-  props: ['metric'],
+  props: {
+    metric: {
+      required: true,
+      type: Object,
+    },
+  },
+
+  data() {
+    return {
+      chart: null,
+    }
+  },
 
   computed: {
     data() {
@@ -29,23 +43,14 @@ export default {
     },
   },
 
-  data() {
-    return {
-      chart: null,
-    }
-  },
-
-  methods: {
-  },
-
-  mounted() {
-    this.chart = chartist.Line(this.$refs.container, this.data)
-  },
-
   watch: {
     metric() {
       this.chart.update(this.data)
     },
   },
+
+  mounted() {
+    this.chart = chartist.Line(this.$refs.container, this.data)
+  },
 }
 </script>

src/history-bar.vue

@@ -1,14 +1,16 @@
 <template>
-  <b-progress class="w-100" :max="10000">
+  <b-progress
+    class="w-100"
+    :max="10000"
+  >
     <b-progress-bar
+      v-for="seg in metric.history_bar"
       :key="seg.start"
+      v-b-tooltip.hover
       :value="seg.percentage * 10000"
       :variant="variantFromStatus(seg.status)"
       :title="`${moment(seg.start).format('lll')}\n${moment(seg.end).format('lll')}`"
-      v-b-tooltip.hover
+    />
-      v-for="seg in metric.history_bar"
-      >
-    </b-progress-bar>
   </b-progress>
 </template>
 
@@ -16,8 +18,13 @@
 import moment from 'moment'
 
 export default {
-  name: 'history-bar',
+  name: 'HistoryBar',
-  props: ['metric'],
+  props: {
+    metric: {
+      required: true,
+      type: Object,
+    },
+  },
 
   methods: {
     moment,

src/main.js

@@ -11,7 +11,7 @@ import 'chartist/dist/chartist.min.css'
 Vue.use(BootstrapVue)
 
 new Vue({
-  components: { app },
   el: '#app',
+  components: { app },
   render: c => c('app'),
 })