intergrated filter for downtimes

frontend/src/components/Dashboard/DashboardDowntimes.vue

@@ -1,8 +1,14 @@
 <template>
-  <div class="col-12">
+  <div class="row">
-    <div class="card contain-card mb-4">
+    <DowntimesFilterForm
-      <div class="card-header">
+      :handle-clear-filters="handleClearFilters"
-        {{ $t('downtimes') }}
+      :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
           v-if="$store.state.admin"
           to="/dashboard/create_service"
@@ -10,28 +16,31 @@
         >
           <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>
+        <div class="card-body pt-0">
-          <DowntimesList />
+          <div
-          <Pagination
+            v-if="isLoading"
-            :get-next-downtimes="getNextDowntimes"
+            class="loader d-flex align-items-center justify-content-center"
-            :get-prev-downtimes="getPrevDowntimes"
+          >
-            :skip="params.skip"
+            <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"
+            />
+          </div>
         </div>
       </div>
     </div>
@@ -40,27 +49,35 @@
 
 <script>
 import DowntimesList from './DowntimesList.vue';
+import { mapState } from 'vuex';
+import DowntimesFilterForm from '../../forms/DowntimeFilters.vue';
 import Pagination from '../Elements/Pagination.vue';
 
+export const initialParams = { 
+    serviceId: '',
+    start: '',
+    end: '',
+    skip: 0,
+    count: 10,
+    subStatus: ''
+};
+
 export default {
     name: 'DashboardDowntimes',
     components: {
         DowntimesList,
-        Pagination
+        Pagination,
+        DowntimesFilterForm
     },
     data: function () {
         return {
             isLoading: false,
-            params: { 
+            params: { ...initialParams }
-                serviceId: null,
-                start: null,
-                end: null,
-                skip: 0,
-                count: 10,
-                subStatus: ''
-            }
         };
     },
+    computed: {
+        ...mapState([ 'downtimes' ])
+    },
     async mounted () {
         this.getDowntimes(this.params);
     },
@@ -75,7 +92,14 @@ export default {
             this.getDowntimes(this.params);
         },
         getPrevDowntimes: function () {
-            this.params = { ...this.params, skip: this.params.skip + 1 };
+            this.params = { ...this.params, skip: this.params.skip - 1 };
+            this.getDowntimes(this.params);
+        },
+        handleClearFilters: function () {
+            this.params = { ...initialParams };
+        },
+        handleFilterSearch: function () {
+            this.params = { ...this.params, skip: 0 };
             this.getDowntimes(this.params);
         }
     }

frontend/src/components/Dashboard/DowntimesList.vue

@@ -53,16 +53,8 @@
           :key="downtime.id"
         >
           <td>
-            <span
-              v-if="$store.state.admin"
-              class="drag_icon d-none d-md-inline"
-            >
-              <FontAwesomeIcon
-                icon="bars"
-                class="mr-3"
-              />
-            </span>
             <span>
+              <!-- {{ serviceById(downtime.service_id).name }} -->
               {{ downtime.service_id }}
             </span>
           </td>
@@ -70,14 +62,14 @@
             <span
               class=""
             >
-              {{ niceDate(downtime.start) }}
+              {{ niceDateWithYear(downtime.start) }}
             </span>
           </td>
           <td class="d-none d-md-table-cell">
             <span
               class=""
             >
-              {{ niceDate(downtime.end) }}
+              {{ niceDateWithYear(downtime.end) }}
             </span>
           </td>
           <td class="d-none d-md-table-cell">
@@ -130,7 +122,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import { mapGetters, mapState } from 'vuex';
 
 export default {
     data: function () {
@@ -139,7 +131,8 @@ export default {
         };
     },
     computed: {
-        ...mapState([ 'downtimes' ])
+        ...mapState([ 'downtimes' ]),
+        ...mapGetters([ 'serviceById' ])
     }
 };
 </script>

frontend/src/components/Elements/Pagination.vue

@@ -17,6 +17,7 @@
       <button
         class="btn btn-outline-secondary page-link"
         aria-label="Next"
+        :disabled="downtimes.length < count"
         @click="getNextDowntimes"
       >
         <span aria-hidden="true">
@@ -28,8 +29,14 @@
 </template>
 
 <script>
+import { mapState } from 'vuex';
+
 export default {
     props: {
+        count:{
+            type: Number,
+            default: 10,
+        },
         getNextDowntimes: {
             type: Function,
             default: function () {}
@@ -42,6 +49,10 @@ export default {
             type: Number,
             default: 0,
         }
-    }
+    },
+    computed: {
+        ...mapState([ 'downtimes' ])
+    },
+
 };
 </script>

frontend/src/forms/DowntimeFilters.vue

@@ -0,0 +1,150 @@
+<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"
+              >
+                <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>
+              </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>
+            </div>
+          </div>
+        </form>
+      </div>
+    </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 {
+    components: {
+        FlatPickr
+    },
+    props: {
+        params: {
+            type: Object,
+            default: initialParams
+        },
+        handleClearFilters: {
+            type: Function,
+            default: function () {}
+        },
+        handleFilterSearch: {
+            type: Function,
+            default: function () {}
+        }
+    },
+    data: function () {
+        return {
+            config: {
+                altFormat: 'D, J M Y',
+                altInput: true,
+                allowInput: true,
+                dateFormat: 'Z',
+                maxDate: new Date()
+            },
+        };
+    },
+    computed: {
+        ...mapState([ 'services' ]) 
+    },
+};
+</script>

frontend/src/languages/english.js

@@ -6,7 +6,10 @@ const english = {
     actions: 'Actions',
     services: 'Services',
     downtimes: 'Downtimes',
+    filters: 'Filters',
     service: 'Service',
+    clear: 'Clear',
+    search: 'Search',
     failures: 'Failures',
     users: 'Users',
     login: 'Login',

frontend/src/mixin.js

@@ -51,6 +51,9 @@ export default Vue.mixin({
         niceDate (val) {
             return format(parseISO(val), 'EEE, MMM do h:mma');
         },
+        niceDateWithYear (val) {
+            return format(parseISO(val), 'EEE, do MMM yyyy \'at\' h:mma');
+        },
         parseISO (v) {
             return parseISO(v);
         },