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
diff --git a/src/views/Health/EventLogs/EventLogs.vue b/src/views/Health/EventLogs/EventLogs.vue
index a5ef375..44a2485 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 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 @@
TableFilter,
TableRowAction,
TableToolbar,
- TableToolbarExport
+ TableToolbarExport,
+ TableDateFilter
},
mixins: [
BVPaginationMixin,
@@ -202,7 +209,9 @@
value: 'delete',
label: this.$t('global.action.delete')
}
- ]
+ ],
+ filterStartDate: null,
+ filterEndDate: null
};
},
computed: {
@@ -223,16 +232,21 @@
};
});
},
- 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 @@
},
onFilterChange({ activeFilters }) {
this.activeFilters = activeFilters;
- this.filteredLogs = this.getFilteredTableData(
- this.allLogs,
- activeFilters
- );
},
onSortCompare(a, b, key) {
if (key === 'severity') {
@@ -316,6 +326,10 @@
if (deleteConfirmed) this.deleteLogs(uris);
});
}
+ },
+ onChangeDateTimeFilter({ fromDate, toDate }) {
+ this.filterStartDate = fromDate;
+ this.filterEndDate = toDate;
}
}
};