From 77abd9fe2520f84705fdacb7e0e70f2adbb3b3db Mon Sep 17 00:00:00 2001
From: Monark <50051074+dmonark@users.noreply.github.com>
Date: Tue, 28 Dec 2021 19:43:18 +0530
Subject: [PATCH] Downtime create/edit (#16)

* done with listing and pagination

* added badge to status

* intergrated filter for downtimes

* refactored code for naming convention and fixed some style

* implemented edit/create/delete

* removed .vscode folder

* removed some eslint file changes

* removed app.vue lint changes

* added space at the end of app.vue comp

* removed servicelist

* removed login

* removed main

* removed page/login

* added launch

* added launch

* added launch

* removed linting from api.js

* fixed filtering on ui

* removed linting from top nav

* removed linting from icon

* removed linting from english

* removed linting from yarn-lock

* removed linting from yarn-lock

* removed linting from yarn-lock

* removed linting from mixin

* removed linting from mixin

* removed linting from routes

* removed linting from routes

* fixed the date range filter error

* fixed the skip issue in the filter

* fixed issue in date range

* changed delete downtime btn text

* delete icon to bin

* changed start and end time format in the downtime listing

* prefilled duration filter with past 30 days

* added back button to downtime create and edit

* highlighted bold active route

* fixed issues on dates

* removed eslint from store.js

* removed eslint from store.js

* added lock file to gitignore

* removed linting issues

* removed linting issues

* removed linting issues

* fixed extra parameters passing in downtime create/update req body

* removed end date validation

* removed end date validation

* coverted to milllisec in a readable format

* removed commented style

* restored vue.config file

* added max date config to filters and forms and modified validation on end date

* added try catch on create and edit downtime

* added try catch on create and edit downtime

* removed the empty string params from filter

Co-authored-by: smit95tpatel <smit.patel@razorpay.com>
---
 .gitignore                                    |   3 +-
 frontend/.gitignore                           |   3 +
 frontend/src/API.js                           |  21 ++
 frontend/src/assets/scss/layout.scss          |   4 +
 .../Dashboard/DashboardDowntimes.vue          | 176 ++++++++++
 .../components/Dashboard/DowntimesList.vue    | 172 +++++++++
 .../src/components/Dashboard/EditDowntime.vue |  60 ++++
 frontend/src/components/Dashboard/TopNav.vue  |   3 +
 .../src/components/Elements/Pagination.vue    |  59 ++++
 frontend/src/forms/Downtime.vue               | 325 ++++++++++++++++++
 frontend/src/forms/DowntimeFilters.vue        | 173 ++++++++++
 frontend/src/icons.js                         |   2 +-
 frontend/src/languages/english.js             |  14 +
 frontend/src/mixin.js                         |   5 +-
 frontend/src/routes.js                        |  25 ++
 frontend/src/store.js                         |   8 +
 16 files changed, 1050 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/components/Dashboard/DashboardDowntimes.vue
 create mode 100644 frontend/src/components/Dashboard/DowntimesList.vue
 create mode 100644 frontend/src/components/Dashboard/EditDowntime.vue
 create mode 100644 frontend/src/components/Elements/Pagination.vue
 create mode 100644 frontend/src/forms/Downtime.vue
 create mode 100644 frontend/src/forms/DowntimeFilters.vue

diff --git a/.gitignore b/.gitignore
index 59dce8cf..5b458bcc 100644
--- a/.gitignore
+++ b/.gitignore
@@ -41,4 +41,5 @@ tmp
 /frontend/cypress/videos/
 services.yml
 statping.wiki
-assets/
\ No newline at end of file
+assets/
+.vscode/settings.json
diff --git a/frontend/.gitignore b/frontend/.gitignore
index a0dddc6f..b4a193e4 100644
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -19,3 +19,6 @@ yarn-error.log*
 *.njsproj
 *.sln
 *.sw?
+
+# Package lock file
+package-lock.json
diff --git a/frontend/src/API.js b/frontend/src/API.js
index e6f3fc7d..2646a0e7 100644
--- a/frontend/src/API.js
+++ b/frontend/src/API.js
@@ -282,6 +282,27 @@ class Api {
     await axios.all([all])
   }
 
+  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);
+  }
+  
+  async downtime_create (data) {
+      return axios.post('/api/downtimes', data).then((response) => response.data);
+  }
+  
+  async downtime_update ({ id, data }) {
+      return axios.patch(`/api/downtimes/${id}`, data).then((response) => response.data);
+  }
+  
+  async downtime_delete (id) {
+      return axios.delete(`/api/downtimes/${id}`).then((response) => response.data);
+  }
 }
 const api = new Api()
 export default api
diff --git a/frontend/src/assets/scss/layout.scss b/frontend/src/assets/scss/layout.scss
index 59b82352..dc6da19b 100644
--- a/frontend/src/assets/scss/layout.scss
+++ b/frontend/src/assets/scss/layout.scss
@@ -85,6 +85,10 @@ A {
 
 .nav-link {
   color: $navbar-color;
+
+  &.router-link-exact-active {
+    font-weight: bold;
+  }
 }
 
 .form-control {
diff --git a/frontend/src/components/Dashboard/DashboardDowntimes.vue b/frontend/src/components/Dashboard/DashboardDowntimes.vue
new file mode 100644
index 00000000..adf38bdc
--- /dev/null
+++ b/frontend/src/components/Dashboard/DashboardDowntimes.vue
@@ -0,0 +1,176 @@
+<template>
+  <div class="col-12">
+    <DowntimesFilterForm
+      :handle-clear-filters="handleClearFilters"
+      :params="params"
+      :handle-filter-search="handleFilterSearch"
+      :filter-errors="filterErrors"
+      :handle-filter-change="handleFilterChange"
+    />
+    
+    <div class="card contain-card mb-4">
+      <div class="card-header">
+        {{ $t('downtimes') }}
+        <router-link
+          v-if="$store.state.admin"
+          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="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 :get-downtimes="getDowntimes" />
+          <Pagination
+            v-if="downtimes.length !== 0"
+            :get-next-downtimes="getNextDowntimes"
+            :get-prev-downtimes="getPrevDowntimes"
+            :skip="params.skip"
+            :count="params.count"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import DowntimesList from './DowntimesList.vue';
+import { mapState } from 'vuex';
+import DowntimesFilterForm from '../../forms/DowntimeFilters.vue';
+import Pagination from '../Elements/Pagination.vue';
+import { removeEmptyParams } from '../../forms/Downtime.vue';
+
+export const initialParams = { 
+    serviceId: '',
+    start: '',
+    end: '',
+    skip: 0,
+    count: 10,
+    subStatus: ''
+};
+
+export const convertToSec = (val) => {
+    return (new Date(val).getTime())/1000;
+};
+
+export const checkErrors = (params) => {
+    const { start, end } = params;
+    const errors = {};
+  
+    // Converting into millisec
+    const startSec = convertToSec(start);
+    const endSec = convertToSec(end) + (60 * 60 * 23 + 59 * 60 + 59);
+  
+    if (!start && end) {
+        errors.start = 'Need to enter Start Date';
+    } else if (start && !end) {
+        errors.end = 'Need to enter End Date';
+    } else if ( startSec > endSec ) {
+        errors.end = 'End Date should be greater than Start Date';
+    }
+  
+    return errors;
+};
+
+export default {
+    name: 'DashboardDowntimes',
+    components: {
+        DowntimesList,
+        Pagination,
+        DowntimesFilterForm
+    },
+    data: function () {
+        return {
+            isLoading: false,
+            params: { ...initialParams },
+            filterErrors: {}
+        };
+    },
+    computed: {
+        ...mapState([ 'downtimes' ]),
+    },
+    created: function () {
+        // Set start date
+        const startDate = new Date();
+        startDate.setDate(startDate.getDate() - 30);
+        startDate.setHours(0,0,0,0);
+        this.params.start = startDate.toJSON();
+
+        // Set end date
+        const endDate = new Date();
+        endDate.setHours(0,0,0,0);
+        this.params.end = endDate.toJSON();
+
+        this.getDowntimes(this.params);
+    },
+    methods: {
+        getDowntimes: async function (params = this.params) {
+            const { start, end } = params;
+
+            const errors = checkErrors(this.params);
+
+            if (Object.keys(errors).length > 0) {
+                this.filterErrors = Object.assign({}, errors);
+                return;
+            }
+
+            let startSec = ''; let endSec = '';
+
+            if (start) {
+                startSec = convertToSec(start);
+            }
+
+            if (end) {
+                endSec = convertToSec(end) + (60 * 60 * 23 + 59 * 60 + 59); // adding end of time for that particular date.
+            }
+
+            const payload = removeEmptyParams({ ...params, start: startSec, end: endSec });
+            
+            this.isLoading = true;
+            await this.$store.dispatch({ type: 'getDowntimes', payload });
+            this.isLoading = false;
+        },
+        getNextDowntimes: function () {
+            this.params = { ...this.params, skip: this.params.skip + this.params.count };
+            this.getDowntimes();
+        },
+        getPrevDowntimes: function () {
+            this.params = { ...this.params, skip: this.params.skip - this.params.count };
+            this.getDowntimes(this.params);
+        },
+        handleClearFilters: function () {
+            this.params = { ...initialParams };
+        },
+        handleFilterSearch: function () {
+            this.params = { ...this.params, skip: 0 };
+
+            this.getDowntimes();
+        },
+        handleFilterChange: function (e) {
+            const { name } = e.target;
+
+            // reset error according to edit input
+            delete this.filterErrors[name];
+        }
+    }
+};
+</script>
\ No newline at end of file
diff --git a/frontend/src/components/Dashboard/DowntimesList.vue b/frontend/src/components/Dashboard/DowntimesList.vue
new file mode 100644
index 00000000..ecdcf23e
--- /dev/null
+++ b/frontend/src/components/Dashboard/DowntimesList.vue
@@ -0,0 +1,172 @@
+<template>
+  <div>
+    <div
+      v-if="downtimes.length === 0"
+      class="alert alert-dark d-block mt-3 mb-0"
+    >
+      You currently don't have any downtimes for this services!
+    </div>
+    
+    <table
+      v-else
+      class="table"
+    >
+      <thead>
+        <tr>
+          <th scope="col">
+            {{ $t('name') }}
+          </th>
+          <th
+            scope="col"
+            class="d-none d-md-table-cell"
+          >
+            {{ $t('start_time') }}
+          </th>
+          <th
+            scope="col"
+            class="d-none d-md-table-cell"
+          >
+            {{ $t('end_time') }}
+          </th>
+          <th
+            scope="col"
+            class="d-none d-md-table-cell"
+          >
+            {{ $t('status') }}
+          </th>
+          <th
+            scope="col"
+            class="d-none d-md-table-cell"
+          >
+            {{ $t('failures') }}
+          </th>
+          <th
+            scope="col"
+            class="d-none d-md-table-cell"
+          >
+            {{ $t('actions') }}
+          </th>
+        </tr>
+
+        <tr
+          v-for="downtime in downtimes"
+          :key="downtime.id"
+        >
+          <td>
+            <span>
+              {{ downtime.service.name }}
+            </span>
+          </td>
+          <td class="d-none d-md-table-cell">
+            <span
+              class=""
+            >
+              {{ niceDateWithYear(downtime.start) }}
+            </span>
+          </td>
+          <td class="d-none d-md-table-cell">
+            <span
+              class=""
+            >
+              {{ downtime.end ? niceDateWithYear(downtime.end) : 'Ongoing' }}
+            </span>
+          </td>
+          <td class="d-none d-md-table-cell">
+            <span
+              class="badge text-uppercase"
+              :class="[downtime.sub_status === 'down' ? 'badge-danger' : 'badge-warning' ]"
+            >
+              {{ downtime.sub_status }}
+            </span>
+          </td>
+          <td class="d-none d-md-table-cell">
+            <span
+              class=""
+            >
+              {{ downtime.failures }}
+            </span>
+          </td>
+          <td class="text-right">
+            <div class="btn-group">
+              <button
+                v-if="$store.state.admin"
+                :disabled="isLoading"
+                class="btn btn-sm btn-outline-secondary"
+                @click.prevent="goto(`/dashboard/edit_downtime/${downtime.id}`)"
+              >
+                <FontAwesomeIcon icon="edit" />
+              </button>
+              <button
+                v-if="$store.state.admin"
+                :disabled="downtimeDeleteId === downtime.id && isLoading"
+                class="btn btn-sm btn-danger"
+                @click.prevent="handleDowntimeDelete(downtime)"
+              >
+                <FontAwesomeIcon
+                  v-if="!isLoading"
+                  icon="trash"
+                />
+                <FontAwesomeIcon
+                  v-if="downtimeDeleteId === downtime.id && isLoading"
+                  icon="circle-notch"
+                  spin
+                />
+              </button>
+            </div>
+          </td>
+        </tr>
+      </thead>
+    </table>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+import Api from '../../API';
+
+export default {
+    name: 'DashboardDowntimeList',
+    props: {
+        getDowntimes: {
+            type: Function,
+            default: function () {}
+        }
+    },
+    data: function () {
+        return {
+            isLoading: false,
+            downtimeDeleteId: null,
+        };
+    },
+    computed: {
+        ...mapState([ 'downtimes' ]),
+    },
+    methods: {
+        goto: function (to) {
+            this.$router.push(to);
+        },
+        setIsLoading ({ id, isLoading }) {
+            this.downtimeDeleteId = id;
+            this.isLoading = isLoading;
+        },
+        delete: async function (id) {
+            this.setIsLoading({ id, isLoading: true });
+            await Api.downtime_delete(id);
+            this.setIsLoading({ id: null, isLoading: false });
+
+            this.getDowntimes();
+        },
+        handleDowntimeDelete: async function (downtime) {
+            const modal = {
+                visible: true,
+                title: 'Delete Downtime',
+                body: `Are you sure you want to delete the downtime for service ${downtime.service.name}?`,
+                btnColor: 'btn-danger',
+                btnText: 'Delete Downtime',
+                func: () => this.delete(downtime.id),
+            };
+            this.$store.commit('setModal', modal);
+        }
+    }
+};
+</script>
\ No newline at end of file
diff --git a/frontend/src/components/Dashboard/EditDowntime.vue b/frontend/src/components/Dashboard/EditDowntime.vue
new file mode 100644
index 00000000..4bcc8549
--- /dev/null
+++ b/frontend/src/components/Dashboard/EditDowntime.vue
@@ -0,0 +1,60 @@
+<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
+      v-else
+      :edit-downtime="editDowntime"
+    />
+  </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, editDowntime: null };
+    },
+    mounted () {
+        this.getDowntime();
+    },
+    methods: {
+        getDowntime: async function () {
+            const id = this.$route.params.id;
+            if (!id) {
+                return;
+            }
+
+            this.isLoading = true;
+            const { output } = await Api.downtime(id);
+            this.isLoading = false;
+            
+            this.editDowntime = output;
+        }
+    }
+};
+</script>
\ No newline at end of file
diff --git a/frontend/src/components/Dashboard/TopNav.vue b/frontend/src/components/Dashboard/TopNav.vue
index 8136fff8..45a1394b 100644
--- a/frontend/src/components/Dashboard/TopNav.vue
+++ b/frontend/src/components/Dashboard/TopNav.vue
@@ -14,6 +14,9 @@
                 <li @click="navopen = !navopen" class="nav-item navbar-item">
                     <router-link to="/dashboard/services" class="nav-link">{{ $t('services') }}</router-link>
                 </li>
+                <li @click="navopen = !navopen" class="nav-item navbar-item">
+                    <router-link to="/dashboard/downtimes" class="nav-link">{{'Downtimes'}}</router-link>
+                </li>
                 <li v-if="admin" @click="navopen = !navopen" class="nav-item navbar-item">
                     <router-link to="/dashboard/users" class="nav-link">{{ $t('users') }}</router-link>
                 </li>
diff --git a/frontend/src/components/Elements/Pagination.vue b/frontend/src/components/Elements/Pagination.vue
new file mode 100644
index 00000000..5b4687f4
--- /dev/null
+++ b/frontend/src/components/Elements/Pagination.vue
@@ -0,0 +1,59 @@
+<template>
+  <ul class="pagination d-flex justify-content-center">
+    <li class="page-item">
+      <button
+        class="btn btn-outline-secondary page-link"
+        aria-label="Previous"
+        :disabled="skip <= 0"
+        @click="getPrevDowntimes"
+      >
+        <span aria-hidden="true">
+          &laquo;
+        </span>
+      </button>
+    </li>
+  
+    <li class="page-item">
+      <button
+        class="btn btn-outline-secondary page-link"
+        aria-label="Next"
+        :disabled="downtimes.length < count"
+        @click="getNextDowntimes"
+      >
+        <span aria-hidden="true">
+          &raquo;
+        </span>
+      </button>
+    </li>
+  </ul>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+
+export default {
+    name: 'DasboardDowntimePagination',
+    props: {
+        count:{
+            type: Number,
+            default: 10,
+        },
+        getNextDowntimes: {
+            type: Function,
+            default: function () {}
+        },
+        getPrevDowntimes: {
+            type: Function,
+            default: function () {}
+        },
+        skip: {
+            type: Number,
+            default: 0,
+        }
+    },
+    computed: {
+        ...mapState([ 'downtimes' ])
+    },
+
+};
+</script>
\ No newline at end of file
diff --git a/frontend/src/forms/Downtime.vue b/frontend/src/forms/Downtime.vue
new file mode 100644
index 00000000..a23cb788
--- /dev/null
+++ b/frontend/src/forms/Downtime.vue
@@ -0,0 +1,325 @@
+<template>
+  <div class="card contain-card mb-4">
+    <div class="card-header d-flex align-items-center">
+      <button
+        class="btn p-0 mr-2"
+        @click="$router.push('/dashboard/downtimes');"
+      >
+        <FontAwesomeIcon icon="arrow-circle-left" />
+      </button>
+      <div>{{ $t("downtime_info") }}</div>
+    </div>
+    <div class="card-body">
+      <form>
+        <div class="form-group row">
+          <label class="col-sm-4 col-form-label">
+            {{
+              $t("service_name")
+            }}
+          </label>
+          <div class="col-sm-8">
+            <select
+              v-model="downtime.serviceId"
+              name="service"
+              class="form-control"
+              required
+              :disabled="$route.params.id"
+            >
+              <option
+                v-for="(service) in services"
+                :key="service.id"
+                :value="service.id"
+              >
+                {{ service.name }}
+              </option>
+            </select>
+            <small
+              class="form-text text-muted"
+            >
+              Select Servive you want to have downtime for
+            </small>
+          </div>
+        </div>
+
+        <div class="form-group row">
+          <label class="col-sm-4 col-form-label">
+            {{
+              $t("downtime_status")
+            }}
+          </label>
+          <div class="col-sm-8">
+            <select
+              v-model="downtime.subStatus"
+              name="service"
+              class="form-control"
+              required
+            >
+              <option
+                value="degraded"
+              >
+                Degraded
+              </option>
+              <option value="down">
+                Down
+              </option>
+            </select>
+            <small
+              class="form-text text-muted"
+            >
+              Choose status you want to give to the Servive
+            </small>
+          </div>
+        </div>
+
+        <div class="form-group row">
+          <label class="col-sm-4 col-form-label">
+            {{
+              $t("downtime_date_range")
+            }}
+          </label>
+          <div class="col-sm-8">
+            <div class="row">
+              <div class="col-sm-6">
+                <FlatPickr
+                  id="start"
+                  v-model="downtime.start"
+                  type="text"
+                  name="start"
+                  class="form-control form-control-plaintext"
+                  :config="config"
+                  placeholder="Select Start Date"
+                  @on-change="() => handleFormChange({target: {name: 'start'}})"
+                />
+                <small
+                  v-if="errors.start"
+                  class="form-text text-danger"
+                >
+                  {{ errors.start }}
+                </small>
+              </div>
+              <div class="col-sm-6">
+                <FlatPickr
+                  id="end"
+                  v-model="downtime.end"
+                  type="text"
+                  name="end"
+                  class="form-control form-control-plaintext"
+                  :config="config"
+                  placeholder="Select End Date"
+                  @on-change="() => handleFormChange({target: {name: 'end'}})"
+                />
+                <small
+                  v-if="errors.end"
+                  class="form-text text-danger"
+                >
+                  {{ errors.end }}
+                </small>
+              </div>
+            </div>
+            <small
+              class="form-text text-muted"
+            >
+              Enter the Start and End date for which your service will be down/degraded
+            </small>
+          </div>
+        </div>
+
+        <div class="form-group row">
+          <label class="col-sm-4 col-form-label">
+            {{
+              $t("failures")
+            }}
+          </label>
+          <div class="col-sm-8">
+            <input
+              v-model.number="downtime.failures"
+              type="number"
+              name="check_interval"
+              class="form-control"
+              min="0"
+              required
+            >
+            <small
+              v-if="errors.failures"
+              class="form-text text-danger"
+            >
+              {{ errors.failures }}
+            </small>
+            <small
+              class="form-text text-muted"
+            >
+              Select the number of failures you want for your service
+            </small>
+          </div>
+        </div>
+
+        <div class="form-group row">
+          <div class="col-12">
+            <button
+              :disabled="isLoading || !isCreateDowntimeBtnEnabled()"
+              type="button"
+              class="btn btn-success btn-block"
+              @click.prevent="saveDowntime"
+            >
+              {{ $route.params.id ? $t("downtime_update") : $t("downtime_create") }}
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+import Api from '../API';
+import FlatPickr from 'vue-flatpickr-component';
+import 'flatpickr/dist/flatpickr.css';
+import { convertToSec } from '../components/Dashboard/DashboardDowntimes.vue';
+
+const checkFormErrors = (value, id) => {
+    const { failures, start, end } = value;
+    const errors = {};
+    let endSec = ''; let startSec = '';
+    
+    // Converting into millisec
+    if (start) {
+        startSec = convertToSec(start);
+    }
+
+    if (end) {
+        endSec = convertToSec(end);
+    }
+
+    // Check for valid positive numbers
+    if (!(/^\d+$/.test(failures))) {
+        errors.failures = 'Enter Valid Positve Number without decimal point';
+    } else if (!start && end) {
+        errors.start = 'Need to enter Start Date';
+    } else if ( id && startSec && !endSec ) {
+        errors.end = 'Need to enter End Date';
+    } else if ( endSec && startSec > endSec ) {
+        errors.end = 'End Date should be greater than Start Date';
+    } 
+
+    return errors;
+};
+
+export const removeEmptyParams = (obj) => {
+    const updatedObj = {};
+
+    for (const [ key , value ] of Object.entries(obj)) {
+        if (value) {
+            updatedObj[key] = value;
+        }
+    }
+
+    return updatedObj;
+};
+
+export default {
+    name: 'FormDowntime',
+    components: {
+        FlatPickr,
+    },
+    props: {
+        editDowntime: {
+            type: Object,
+            default: null,
+        }
+    },
+    data: function () {
+        return {
+            isLoading: false,
+            errors: {},
+            downtime: {
+                serviceId: '',
+                subStatus: 'degraded',
+                failures: 20,
+                start: new Date().toJSON(),
+                end: null,
+            },
+            config: {
+                altFormat: 'J M, Y, h:iK',
+                altInput: true,
+                enableTime: true,
+                dateFormat: 'Z',
+                maxDate: new Date().toJSON(),
+            },
+        };
+    },
+    computed: {
+        ...mapState({
+            services : function (state) {
+                const { id } = this.$route.params;
+
+                if (!id && state.services.length > 0) {
+                    this.downtime.serviceId = state.services[0].id;
+                }
+
+                return state.services;
+            }
+        }),
+    },
+    mounted: function () {
+        if (this.editDowntime) {
+            const { service_id, sub_status, failures, start, end } = this.editDowntime;
+  
+            this.downtime = {
+                start,
+                end,
+                failures,
+                serviceId: service_id,
+                subStatus: sub_status
+            };
+        }      
+    },
+    methods: {
+        isCreateDowntimeBtnEnabled: function () {
+            const { id } = this.$route.params;
+            const { serviceId, subStatus, failures, start, end } = this.downtime;
+
+            return serviceId && subStatus && failures && start && (id ? end : true);
+        },
+        saveDowntime: async function () {
+            const { id } = this.$route.params;
+            const errors = checkFormErrors(this.downtime, id);
+            
+            // Check of invalid input.
+            if (Object.keys(errors).length > 0) {
+                this.errors = Object.assign({}, errors);
+                return;
+            }
+
+            const { serviceId, subStatus, ...rest } = removeEmptyParams(this.downtime);
+
+            const downtime = {
+                ...rest,
+                ...(!id && { 'service_id': serviceId }),
+                'sub_status': subStatus,
+            };
+
+            this.isLoading=true;
+
+            try {
+                if (id) {
+                    await Api.downtime_update({ id, data: downtime });
+                } else {
+                    await Api.downtime_create(downtime);
+                }
+                this.isLoading=false;
+            } catch (error) {
+                this.isLoading=false;
+                throw new Error(error.message);
+            }
+
+            this.$router.push('/dashboard/downtimes');
+        },
+        handleFormChange: function (e) {
+            const { name } = e.target;
+
+            delete this.errors[name];
+        }
+    }
+};
+</script>
\ No newline at end of file
diff --git a/frontend/src/forms/DowntimeFilters.vue b/frontend/src/forms/DowntimeFilters.vue
new file mode 100644
index 00000000..e8317227
--- /dev/null
+++ b/frontend/src/forms/DowntimeFilters.vue
@@ -0,0 +1,173 @@
+<template>
+  <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"
+            >
+              <option value="">
+                All
+              </option>
+              <option
+                v-for="service in services"
+                :key="service.id"
+                :value="service.id"
+              >
+                {{ service.name }}
+              </option>
+            </select>
+          </div>
+          <div class="form-group col-md-5">
+            <label class="col-form-label">
+              {{ $t('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 Start Date"
+                  @on-change="() => handleFilterChange({target: {name: 'start'}})"
+                />
+                <small
+                  v-if="filterErrors.start"
+                  class="form-text text-danger"
+                >
+                  {{ filterErrors.start }}
+                </small>
+              </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 End Date"
+                  @on-change="() => handleFilterChange({target: {name: 'end'}})"
+                />
+                <small
+                  v-if="filterErrors.end"
+                  class="form-text text-danger"
+                >
+                  {{ filterErrors.end }}
+                </small>
+              </div>
+            </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="">
+                All
+              </option>
+              <option value="degraded">
+                Degraded
+              </option>
+              <option value="down">
+                Down
+              </option>
+            </select>
+          </div>
+
+          <div class="form-group col-md-3">
+            <label class="col-form-label invisible">
+              {{ $t('actions') }}
+            </label>
+            <div
+              class="d-flex justify-content-end"
+              role="group"
+            >
+              <button
+                type="button"
+                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>
+
+<script>
+import { mapState } from 'vuex';
+import FlatPickr from 'vue-flatpickr-component';
+import 'flatpickr/dist/flatpickr.css';
+import { initialParams } from '../components/Dashboard/DashboardDowntimes.vue';
+
+export default {
+    name: 'DashboardDowntimeFilters',
+    components: {
+        FlatPickr
+    },
+    props: {
+        params: {
+            type: Object,
+            default: initialParams
+        },
+        handleClearFilters: {
+            type: Function,
+            default: function () {}
+        },
+        handleFilterSearch: {
+            type: Function,
+            default: function () {}
+        },
+        filterErrors: {
+            type: Object,
+            default: null
+        },
+        handleFilterChange: {
+            type: Function,
+            default: function () {}
+        }
+    },
+    data: function () {
+        return {
+            config: {
+                altFormat: 'J M, Y',
+                altInput: true,
+                dateFormat: 'Z',
+                maxDate: new Date().toJSON(),
+            },
+        };
+    },
+    computed: {
+        ...mapState([ 'services' ])
+    },
+};
+</script>
\ No newline at end of file
diff --git a/frontend/src/icons.js b/frontend/src/icons.js
index 91e7c3bc..86024a5c 100644
--- a/frontend/src/icons.js
+++ b/frontend/src/icons.js
@@ -6,4 +6,4 @@ import Vue from "vue";
 
 library.add(fas, fab)
 
-Vue.component('font-awesome-icon', FontAwesomeIcon)
+Vue.component('FontAwesomeIcon', FontAwesomeIcon);
diff --git a/frontend/src/languages/english.js b/frontend/src/languages/english.js
index db54f907..33d73f4e 100644
--- a/frontend/src/languages/english.js
+++ b/frontend/src/languages/english.js
@@ -140,6 +140,20 @@ const english = {
   notify_all: "Notify All Changes",
   service_update: "Update Service",
   service_create: "Create Service",
+  start_time: 'Start Time',	
+  end_time: "End Time",	
+  actions: "Actions",	
+  services: "Services",	
+  downtimes: "Downtimes",	
+  downtime_info: "Downtime Info",	
+  downtime_status: "Downtime Status",	
+  downtime_date_range: "Downtime Date Range",	
+  downtime_create: "Create Downtime",	
+  downtime_update: "Update Downtime",	
+  filters: "Filters",	
+  service: "Service",	
+  clear: "Clear",	
+  search: "Search",
 };
 
 export default english;
diff --git a/frontend/src/mixin.js b/frontend/src/mixin.js
index 373239e6..32776900 100644
--- a/frontend/src/mixin.js
+++ b/frontend/src/mixin.js
@@ -256,6 +256,9 @@ export default Vue.mixin({
     },
     addSeconds(date, amount) {
       return addSeconds(date, amount)
-    }
+    },
+    niceDateWithYear (val) {
+      return format(parseISO(val), 'do MMM, yyyy h:mma');
+    },
   }
 });
diff --git a/frontend/src/routes.js b/frontend/src/routes.js
index 2b2a82ad..2cebe256 100644
--- a/frontend/src/routes.js
+++ b/frontend/src/routes.js
@@ -16,6 +16,9 @@ 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: "dashboard" */ '@/components/Dashboard/DashboardDowntimes')
+const EditDowntime = () => import(/* webpackChunkName: "dashboard" */ '@/components/Dashboard/EditDowntime')
+
 
 import VueRouter from "vue-router";
 import Api from "./API";
@@ -137,6 +140,27 @@ const routes = [
         requiresAuth: true,
         title: 'Statping - Service Failures',
       }
+    },{
+      path: 'downtimes',
+      component: DashboardDowntimes,
+      meta: {
+          requiresAuth: true,
+          title: 'Statping - Downtimes',
+      }
+    },{
+      path: 'create_downtime',
+      component: EditDowntime,
+      meta: {
+          requiresAuth: true,
+          title: 'Statping - Create Downtime',
+      }
+    },{
+      path: 'edit_downtime/:id',
+      component: EditDowntime,
+      meta: {
+          requiresAuth: true,
+          title: 'Statping - Update Downtime',
+      }
     },{
       path: 'messages',
       component: DashboardMessages,
@@ -228,3 +252,4 @@ router.beforeEach((to, from, next) => {
 });
 
 export default router
+
diff --git a/frontend/src/store.js b/frontend/src/store.js
index 66d923e1..c8b328c0 100644
--- a/frontend/src/store.js
+++ b/frontend/src/store.js
@@ -23,6 +23,7 @@ export default new Vuex.Store({
     oauth: {},
     token: null,
     services: [],
+    downtimes: [],
     service: null,
     groups: [],
     messages: [],
@@ -152,12 +153,19 @@ export default new Vuex.Store({
     setModal(state, modal) {
       state.modal = modal
     },
+    setDowntimes (state, downtimes) {
+      state.downtimes = downtimes;
+    }
   },
   actions: {
     async getAllServices(context) {
       const services = await Api.services()
       context.commit("setServices", services);
     },
+    async getDowntimes (context, { payload }) {
+      const { output } = await Api.downtimes(payload);
+      context.commit('setDowntimes', output ?? []);
+    },
     async loadCore(context) {
       const core = await Api.core()
       const token = await Api.token()