From dd325cefc36412c0cfb2bcf834529abccc2f4477 Mon Sep 17 00:00:00 2001
From: smit95tpatel <smit.patel@razorpay.com>
Date: Wed, 15 Dec 2021 17:20:24 +0530
Subject: [PATCH] refactored code for naming convention and fixed some style

---
 .vscode/settings.json                         |   3 +-
 frontend/src/API.js                           |   6 +-
 .../Dashboard/DashboardDowntimes.vue          |  73 +++----
 .../components/Dashboard/DowntimesList.vue    |   1 +
 .../src/components/Dashboard/EditDowntime.vue |  57 +++++
 .../src/components/Elements/Pagination.vue    |   1 +
 frontend/src/forms/Downtime.vue               |  10 +
 frontend/src/forms/DowntimeFilters.vue        | 199 +++++++++---------
 frontend/src/languages/english.js             |   1 +
 frontend/src/routes.js                        |  10 +-
 frontend/src/store.js                         |   2 +-
 11 files changed, 221 insertions(+), 142 deletions(-)
 create mode 100644 frontend/src/components/Dashboard/EditDowntime.vue
 create mode 100644 frontend/src/forms/Downtime.vue

diff --git a/.vscode/settings.json b/.vscode/settings.json
index d9986436..a6cdf116 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -2,5 +2,6 @@
 	"editor.codeActionsOnSave": {
 		"source.fixAll.eslint": true
 	},
-	"editor.defaultFormatter": null
+	"editor.defaultFormatter": null,
+  "eslint.validate": ["javascript"]
 }
diff --git a/frontend/src/API.js b/frontend/src/API.js
index 608a6188..640bc10f 100644
--- a/frontend/src/API.js
+++ b/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;
diff --git a/frontend/src/components/Dashboard/DashboardDowntimes.vue b/frontend/src/components/Dashboard/DashboardDowntimes.vue
index 08ce6efa..c75cebc9 100644
--- a/frontend/src/components/Dashboard/DashboardDowntimes.vue
+++ b/frontend/src/components/Dashboard/DashboardDowntimes.vue
@@ -1,46 +1,49 @@
 <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
+    
+    <div class="card contain-card mb-4">
+      <div class="card-header">
+        {{ $t('downtimes') }}
+        <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> -->
-        </div>
-        <div class="card-body pt-0">
-          <div
-            v-if="isLoading"
-            class="loader d-flex align-items-center justify-content-center"
-          >
-            <div
-              class="spinner-border"
-              role="status"
-            >
-              <span class="sr-only">
-                Loading...
-              </span>
-            </div>
-          </div>
-          <div v-else>
-            <DowntimesList />
-            <Pagination
-              v-if="downtimes.length !== 0"
-              :get-next-downtimes="getNextDowntimes"
-              :get-prev-downtimes="getPrevDowntimes"
-              :skip="params.skip"
-              :count="params.count"
+        </router-link>
+      </div>
+      <div class="card-body pt-0">
+        <div
+          v-if="isLoading"
+          class="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 Downtimes
+            </span>
+          </div>
+        </div>
+        <div v-else>
+          <DowntimesList />
+          <Pagination
+            v-if="downtimes.length !== 0"
+            :get-next-downtimes="getNextDowntimes"
+            :get-prev-downtimes="getPrevDowntimes"
+            :skip="params.skip"
+            :count="params.count"
+          />
         </div>
       </div>
     </div>
@@ -104,10 +107,4 @@ export default {
         }
     }
 };
-</script>
-
-<style scoped>
-.loader {
-  min-height: 100px;
-}
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/frontend/src/components/Dashboard/DowntimesList.vue b/frontend/src/components/Dashboard/DowntimesList.vue
index 41828f44..eabb1969 100644
--- a/frontend/src/components/Dashboard/DowntimesList.vue
+++ b/frontend/src/components/Dashboard/DowntimesList.vue
@@ -125,6 +125,7 @@
 import { mapGetters, mapState } from 'vuex';
 
 export default {
+    name: 'DashboardDowntimeList',
     data: function () {
         return {
             isLoading: false,
diff --git a/frontend/src/components/Dashboard/EditDowntime.vue b/frontend/src/components/Dashboard/EditDowntime.vue
new file mode 100644
index 00000000..7a6b0b0d
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/frontend/src/components/Elements/Pagination.vue b/frontend/src/components/Elements/Pagination.vue
index e3e6a359..5b4687f4 100644
--- a/frontend/src/components/Elements/Pagination.vue
+++ b/frontend/src/components/Elements/Pagination.vue
@@ -32,6 +32,7 @@
 import { mapState } from 'vuex';
 
 export default {
+    name: 'DasboardDowntimePagination',
     props: {
         count:{
             type: Number,
diff --git a/frontend/src/forms/Downtime.vue b/frontend/src/forms/Downtime.vue
new file mode 100644
index 00000000..92535f2d
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/frontend/src/forms/DowntimeFilters.vue b/frontend/src/forms/DowntimeFilters.vue
index 0f737590..e00b331b 100644
--- a/frontend/src/forms/DowntimeFilters.vue
+++ b/frontend/src/forms/DowntimeFilters.vue
@@ -1,109 +1,107 @@
 <template>
-  <div class="col-12">
-    <div class="card contain-card mb-4">
-      <div class="card-header">
-        {{ $t('filters') }}
-      </div>
-      <div class="card-body">
-        <form>
-          <div class="form-row">
-            <div class="form-group col-md-2">
-              <label class="col-form-label">
-                {{ $t('service') }}
-              </label>
-              <select
-                v-model="params.serviceId"
-                name="service"
-                class="form-control"
+  <div class="card contain-card mb-4">
+    <div class="card-header">
+      {{ $t('filters') }}
+    </div>
+    <div class="card-body">
+      <form>
+        <div class="form-row">
+          <div class="form-group col-md-3">
+            <label class="col-form-label">
+              {{ $t('service') }}
+            </label>
+            <select
+              v-model="params.serviceId"
+              name="service"
+              class="form-control"
+            >
+              <option value="">
+                Select Service
+              </option>
+              <option
+                v-for="service in services"
+                :key="service.id"
+                :value="service.id"
               >
-                <option value="">
-                  Select Service
-                </option>
-                <option
-                  v-for="service in services"
-                  :key="service.id"
-                  :value="service.id"
-                >
-                  {{ service.name }}
-                </option>
-              </select>
-            </div>
-            <div class="form-group col-md-6">
-              <label class="col-form-label">
-                Downtime Date Range
-              </label>
-              <div class="form-row">
-                <div class="col-sm-6">
-                  <FlatPickr
-                    id="start"
-                    v-model="params.start"
-                    type="text"
-                    name="start"
-                    class="form-control form-control-plaintext"
-                    value=""
-                    :config="config"
-                    placeholder="Select Date"
-                  />
-                </div>
-                <div class="col-sm-6">
-                  <FlatPickr
-                    id="end"
-                    v-model="params.end"
-                    type="text"
-                    name="end"
-                    class="form-control form-control-plaintext"
-                    value=""
-                    :config="config"
-                    placeholder="Select Date"
-                  />
-                </div>
+                {{ service.name }}
+              </option>
+            </select>
+          </div>
+          <div class="form-group col-md-4">
+            <label class="col-form-label">
+              Downtime Date Range
+            </label>
+            <div class="form-row">
+              <div class="col-sm-6">
+                <FlatPickr
+                  id="start"
+                  v-model="params.start"
+                  type="text"
+                  name="start"
+                  class="form-control form-control-plaintext"
+                  value=""
+                  :config="config"
+                  placeholder="Select Date"
+                />
               </div>
-            </div>
-            <div class="form-group col-md-2">
-              <label class="col-form-label">
-                {{ $t('status') }}
-              </label>
-              <select
-                v-model="params.subStatus"
-                name="status"
-                class="form-control"
-              >
-                <option value="">
-                  Select Status
-                </option>
-                <option value="degraded">
-                  Degraded
-                </option>
-                <option value="down">
-                  Down
-                </option>
-              </select>
-            </div>
-
-            <div class="form-group col-md-2 d-flex align-items-end">
-              <div
-                class="ml-auto"
-                role="group"
-              >
-                <button
-                  type="submit"
-                  class="btn btn-primary mr-1"
-                  @click.prevent="handleFilterSearch"
-                >
-                  {{ $t('search') }}
-                </button>
-                <button
-                  type="button"
-                  class="btn btn-outline-secondary"
-                  @click.prevent="handleClearFilters"
-                >
-                  {{ $t('clear') }}
-                </button>
+              <div class="col-sm-6">
+                <FlatPickr
+                  id="end"
+                  v-model="params.end"
+                  type="text"
+                  name="end"
+                  class="form-control form-control-plaintext"
+                  value=""
+                  :config="config"
+                  placeholder="Select Date"
+                />
               </div>
             </div>
           </div>
-        </form>
-      </div>
+          <div class="form-group col-md-2">
+            <label class="col-form-label">
+              {{ $t('status') }}
+            </label>
+            <select
+              v-model="params.subStatus"
+              name="status"
+              class="form-control"
+            >
+              <option value="">
+                Select Status
+              </option>
+              <option value="degraded">
+                Degraded
+              </option>
+              <option value="down">
+                Down
+              </option>
+            </select>
+          </div>
+
+          <div class="form-group col-md-3 d-flex align-items-end">
+            <div
+              class="ml-auto"
+              role="group"
+            >
+              <button
+                type="submit"
+                class="btn btn-primary mr-1"
+                @click.prevent="handleFilterSearch"
+              >
+                {{ $t('search') }}
+              </button>
+              <button
+                type="button"
+                class="btn btn-outline-secondary"
+                @click.prevent="handleClearFilters"
+              >
+                {{ $t('clear') }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </form>
     </div>
   </div>
 </template>
@@ -115,6 +113,7 @@ import 'flatpickr/dist/flatpickr.css';
 import { initialParams } from '../components/Dashboard/DashboardDowntimes.vue';
 
 export default {
+    name: 'DashboardDowntimeFilters',
     components: {
         FlatPickr
     },
diff --git a/frontend/src/languages/english.js b/frontend/src/languages/english.js
index f7991c50..5c8715fc 100644
--- a/frontend/src/languages/english.js
+++ b/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',
diff --git a/frontend/src/routes.js b/frontend/src/routes.js
index 18090901..fdc30e36 100644
--- a/frontend/src/routes.js
+++ b/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,
diff --git a/frontend/src/store.js b/frontend/src/store.js
index 4491bb3e..9ba6d75f 100644
--- a/frontend/src/store.js
+++ b/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) {