Add date filter on Event logs page

Created global TableDateFilter component that uses the BootstrapVue
Datepicker with a native text input. This will allow users to manually
enter a date in ISO format or use the Bootstrap calendar dropdown.

Storing language preference from Login to use locale prop on
BootstrapVue Datepicker component.

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I66de9fb04451572c9a90f90d8522934b6204aed2

2 files changed, 32 insertions, 15 deletions

diff --git a/src/views/Health/EventLogs/EventLogs.vue b/src/views/Health/EventLogs/EventLogs.vue
index a5ef3757..44a24859 100644
--- a/src/views/Health/EventLogs/EventLogs.vue
+++ b/src/views/Health/EventLogs/EventLogs.vue
@@ -1,6 +1,11 @@
 <template>
   <b-container fluid="xl">
     <page-title />
+    <b-row class="mb-3">
+      <b-col md="6" lg="7" xl="5" offset-md="6" offset-lg="5" offset-xl="7">
+        <table-date-filter @change="onChangeDateTimeFilter" />
+      </b-col>
+    </b-row>
     <b-row>
       <b-col class="text-right">
         <table-filter :filters="tableFilters" @filterChange="onFilterChange" />
@@ -121,6 +126,7 @@ import { omit } from 'lodash';
 
 import PageTitle from '@/components/Global/PageTitle';
 import StatusIcon from '@/components/Global/StatusIcon';
+import TableDateFilter from '@/components/Global/TableDateFilter';
 import TableFilter from '@/components/Global/TableFilter';
 import TableRowAction from '@/components/Global/TableRowAction';
 import TableToolbar from '@/components/Global/TableToolbar';
@@ -143,7 +149,8 @@ export default {
     TableFilter,
     TableRowAction,
     TableToolbar,
-    TableToolbarExport
+    TableToolbarExport,
+    TableDateFilter
   },
   mixins: [
     BVPaginationMixin,
@@ -202,7 +209,9 @@ export default {
           value: 'delete',
           label: this.$t('global.action.delete')
         }
-      ]
+      ],
+      filterStartDate: null,
+      filterEndDate: null
     };
   },
   computed: {
@@ -223,16 +232,21 @@ export default {
         };
       });
     },
-    filteredLogs: {
-      get: function() {
-        return this.getFilteredTableData(this.allLogs, this.activeFilters);
-      },
-      set: function(newVal) {
-        return newVal;
-      }
-    },
     batchExportData() {
       return this.selectedRows.map(row => omit(row, 'actions'));
+    },
+    filteredLogsByDate() {
+      return this.getFilteredTableDataByDate(
+        this.allLogs,
+        this.filterStartDate,
+        this.filterEndDate
+      );
+    },
+    filteredLogs() {
+      return this.getFilteredTableData(
+        this.filteredLogsByDate,
+        this.activeFilters
+      );
     }
   },
   created() {
@@ -273,10 +287,6 @@ export default {
     },
     onFilterChange({ activeFilters }) {
       this.activeFilters = activeFilters;
-      this.filteredLogs = this.getFilteredTableData(
-        this.allLogs,
-        activeFilters
-      );
     },
     onSortCompare(a, b, key) {
       if (key === 'severity') {
@@ -316,6 +326,10 @@ export default {
             if (deleteConfirmed) this.deleteLogs(uris);
           });
       }
+    },
+    onChangeDateTimeFilter({ fromDate, toDate }) {
+      this.filterStartDate = fromDate;
+      this.filterEndDate = toDate;
     }
   }
 };
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index d373be22..4d8f2484 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -136,7 +136,10 @@ export default {
       this.$store
         .dispatch('authentication/login', [username, password])
         .then(() => this.$router.push('/'))
-        .then(localStorage.setItem('storedLanguage', i18n.locale))
+        .then(() => {
+          localStorage.setItem('storedLanguage', i18n.locale);
+          this.$store.commit('global/setLanguagePreference', i18n.locale);
+        })
         .catch(error => console.log(error))
         .finally(() => (this.disableSubmitButton = false));
     }