refactored code for naming convention and fixed some style

.vscode/settings.json

@@ -2,5 +2,6 @@
 	"editor.codeActionsOnSave": {
 		"source.fixAll.eslint": true
 	},
-	"editor.defaultFormatter": null
+	"editor.defaultFormatter": null,
+  "eslint.validate": ["javascript"]
 }

frontend/src/API.js

@@ -387,11 +387,15 @@ class Api {
         await axios.all([ all ]);
     }
 
-    async getDowntimes ({ serviceId, start, end, skip, count, subStatus }) {
+    async downtimes ({ serviceId, start, end, skip, count, subStatus }) {
         return axios.get('api/downtimes', {
             params: { service_id: serviceId, start, end, skip, count, sub_status: subStatus }
         }).then((response) => response.data);
     }
+
+    async downtime (id) {
+        return axios.get(`api/downtimes/${id}`).then((response) => response.data);
+    }
 }
 const api = new Api();
 export default api;

frontend/src/components/Dashboard/DashboardDowntimes.vue

@@ -1,33 +1,37 @@
 <template>
-  <div class="row">
+  <div class="col-12">
     <DowntimesFilterForm
       :handle-clear-filters="handleClearFilters"
       :params="params"
       :handle-filter-search="handleFilterSearch"
     />
-    <div class="col-12">
+    
     <div class="card contain-card mb-4">
       <div class="card-header">
         {{ $t('downtimes') }}
-        <!-- <router-link
+        <router-link
           v-if="$store.state.admin"
-          to="/dashboard/create_service"
+          to="/dashboard/create_downtime"
           class="btn btn-sm btn-success float-right"
         >
           <FontAwesomeIcon icon="plus" />  {{ $t('create') }}
-        </router-link> -->
+        </router-link>
       </div>
       <div class="card-body pt-0">
         <div
           v-if="isLoading"
-            class="loader d-flex align-items-center justify-content-center"
+          class="mt-5"
         >
-            <div
+          <div class="col-12 text-center">
-              class="spinner-border"
+            <FontAwesomeIcon
-              role="status"
+              icon="circle-notch"
-            >
+              size="3x"
-              <span class="sr-only">
+              spin
-                Loading...
+            />
+          </div>
+          <div class="col-12 text-center mt-3 mb-3">
+            <span class="text-muted">
+              Loading Downtimes
             </span>
           </div>
         </div>
@@ -44,7 +48,6 @@
       </div>
     </div>
   </div>
-  </div>
 </template>
 
 <script>
@@ -105,9 +108,3 @@ export default {
     }
 };
 </script>
-
-<style scoped>
-.loader {
-  min-height: 100px;
-}
-</style>

frontend/src/components/Dashboard/DowntimesList.vue

@@ -125,6 +125,7 @@
 import { mapGetters, mapState } from 'vuex';
 
 export default {
+    name: 'DashboardDowntimeList',
     data: function () {
         return {
             isLoading: false,

frontend/src/components/Dashboard/EditDowntime.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="col-12">
+    <div
+      v-if="isLoading"
+      class="row mt-5"
+    >
+      <div class="col-12 text-center">
+        <FontAwesomeIcon
+          icon="circle-notch"
+          size="3x"
+          spin
+        />
+      </div>
+      <div class="col-12 text-center mt-3 mb-3">
+        <span class="text-muted">
+          Loading Downtime
+        </span>
+      </div>
+    </div>
+
+    <FormDowntime />
+  </div>
+</template>
+
+<script>
+import Api from '../../API';
+
+const FormDowntime = () =>
+  import(/* webpackChunkName: "dashboard" */ '../../forms/Downtime.vue');
+
+export default {
+    name: 'EditDowntime',
+    components: {
+        FormDowntime
+    },
+    data: function () {
+        return { isLoading: false, downtime: null };
+    },
+    created () {
+        this.getDowntime();
+    },
+    methods: {
+        getDowntime: async function () {
+            const id = this.$route.params.id;
+            if (!id) {
+                return;
+            }
+
+            this.isLoading = true;
+            const { output } = await Api.getDowntime(id);
+            this.isLoading = false;
+
+            this.downtime = output;
+        }
+    }
+};
+</script>

frontend/src/components/Elements/Pagination.vue

@@ -32,6 +32,7 @@
 import { mapState } from 'vuex';
 
 export default {
+    name: 'DasboardDowntimePagination',
     props: {
         count:{
             type: Number,

frontend/src/forms/Downtime.vue

@@ -0,0 +1,10 @@
+<template>
+  <form @submit.prevent="() => {}">
+    <div class="card contain-card mb-4">
+      <div class="card-header">
+        {{ $t("downtime_info") }}
+      </div>
+      <div class="card-body" />
+    </div>
+  </form>
+</template>

frontend/src/forms/DowntimeFilters.vue

@@ -1,5 +1,4 @@
 <template>
-  <div class="col-12">
   <div class="card contain-card mb-4">
     <div class="card-header">
       {{ $t('filters') }}
@@ -7,7 +6,7 @@
     <div class="card-body">
       <form>
         <div class="form-row">
-            <div class="form-group col-md-2">
+          <div class="form-group col-md-3">
             <label class="col-form-label">
               {{ $t('service') }}
             </label>
@@ -28,7 +27,7 @@
               </option>
             </select>
           </div>
-            <div class="form-group col-md-6">
+          <div class="form-group col-md-4">
             <label class="col-form-label">
               Downtime Date Range
             </label>
@@ -80,7 +79,7 @@
             </select>
           </div>
 
-            <div class="form-group col-md-2 d-flex align-items-end">
+          <div class="form-group col-md-3 d-flex align-items-end">
             <div
               class="ml-auto"
               role="group"
@@ -105,7 +104,6 @@
       </form>
     </div>
   </div>
-  </div>
 </template>
 
 <script>
@@ -115,6 +113,7 @@ import 'flatpickr/dist/flatpickr.css';
 import { initialParams } from '../components/Dashboard/DashboardDowntimes.vue';
 
 export default {
+    name: 'DashboardDowntimeFilters',
     components: {
         FlatPickr
     },

frontend/src/languages/english.js

@@ -6,6 +6,7 @@ const english = {
     actions: 'Actions',
     services: 'Services',
     downtimes: 'Downtimes',
+    downtime_info: 'Downtime Info',
     filters: 'Filters',
     service: 'Service',
     clear: 'Clear',

frontend/src/routes.js

@@ -16,7 +16,8 @@ const Checkins = () => import(/* webpackChunkName: "dashboard" */ '@/components/
 const Failures = () => import(/* webpackChunkName: "dashboard" */ '@/components/Dashboard/Failures');
 const NotFound = () => import(/* webpackChunkName: "index" */ '@/pages/NotFound');
 const Importer = () => import(/* webpackChunkName: "index" */ '@/components/Dashboard/Importer');
-const DashboardDowntimes = () => import(/* webpackChunkName: "downtimes" */ '@/components/Dashboard/DashboardDowntimes');
+const DashboardDowntimes = () => import(/* webpackChunkName: "dashboard" */ '@/components/Dashboard/DashboardDowntimes');
+const EditDowntime = () => import(/* webpackChunkName: "dashboard" */ '@/components/Dashboard/EditDowntime');
 
 import VueRouter from 'vue-router';
 import Api from './API';
@@ -145,6 +146,13 @@ const routes = [
                 requiresAuth: true,
                 title: 'Statping - Downtimes',
             }
+        },{
+            path: 'create_downtime',
+            component: EditDowntime,
+            meta: {
+                requiresAuth: true,
+                title: 'Statping - Create Downtime',
+            }
         },{
             path: 'messages',
             component: DashboardMessages,

frontend/src/store.js

@@ -163,7 +163,7 @@ export default new Vuex.Store({
             context.commit('setServices', services);
         },
         async getDowntimes (context, { payload }) {
-            const { output } = await Api.getDowntimes(payload);
+            const { output } = await Api.downtimes(payload);
             context.commit('setDowntimes', output);
         },
         async loadCore (context) {