diff options
author | Dixsie Wolmers <dixsie@ibm.com> | 2021-06-03 15:38:12 +0300 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2021-07-28 18:14:32 +0300 |
commit | 7e2ba5432d067101e4c2931b388b4b6f07979dba (patch) | |
tree | 7bdd08eab75d41c26328d55e0782c487df99d2e9 /src/views | |
parent | cd57a686fcf5cfe731005fe4b6593601cbcf3ec2 (diff) | |
download | webui-vue-7e2ba5432d067101e4c2931b388b4b6f07979dba.tar.xz |
Add export all and delete all buttons to event logs
- Uses new table action button style above table.
- Adds ability to export all and delete all logs.
- Disables toolbar table action buttons when table is empty.
- Event logs file name is not translated to avoid potential
translation issues in the future, users can rename the file
- Adds toast messages for delete all
- Updates resolve logs toast messages to use `tc` count
Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Change-Id: Idda2ae309e4248db60f89f68669e6e3b9f2cb832
Diffstat (limited to 'src/views')
-rw-r--r-- | src/views/Health/EventLogs/EventLogs.vue | 59 |
1 files changed, 55 insertions, 4 deletions
diff --git a/src/views/Health/EventLogs/EventLogs.vue b/src/views/Health/EventLogs/EventLogs.vue index 9bc88c1a..fa3f43cb 100644 --- a/src/views/Health/EventLogs/EventLogs.vue +++ b/src/views/Health/EventLogs/EventLogs.vue @@ -2,7 +2,7 @@ <b-container fluid="xl"> <page-title /> <b-row class="align-items-start"> - <b-col sm="8" xl="6" class="d-sm-flex align-items-end"> + <b-col sm="8" xl="6" class="d-sm-flex align-items-end mb-4"> <search :placeholder="$t('pageEventLogs.table.searchLogs')" data-test-id="eventLogs-input-searchLogs" @@ -23,6 +23,21 @@ <b-row> <b-col class="text-right"> <table-filter :filters="tableFilters" @filter-change="onFilterChange" /> + <b-button + variant="link" + :disabled="allLogs.length === 0" + @click="deleteAllLogs" + > + <icon-delete /> {{ $t('global.action.deleteAll') }} + </b-button> + <b-button + variant="primary" + :class="{ disabled: allLogs.length === 0 }" + :download="exportFileNameByDate()" + :href="href" + > + <icon-export /> {{ $t('global.action.exportAll') }} + </b-button> </b-col> </b-row> <b-row> @@ -180,7 +195,7 @@ :value="action.value" :title="action.title" :row-data="row.item" - :export-name="exportFileNameByDate()" + :export-name="exportFileNameByDate('export')" :data-test-id="`eventLogs-button-deleteRow-${row.index}`" @click-table-action="onTableRowAction($event, row.item)" > @@ -224,6 +239,7 @@ </template> <script> +import IconDelete from '@carbon/icons-vue/es/trash-can/20'; import IconTrashcan from '@carbon/icons-vue/es/trash-can/20'; import IconExport from '@carbon/icons-vue/es/document--export/20'; import IconChevron from '@carbon/icons-vue/es/chevron--down/20'; @@ -264,6 +280,7 @@ import SearchFilterMixin, { export default { components: { + IconDelete, IconExport, IconTrashcan, IconChevron, @@ -373,6 +390,9 @@ export default { }; }, computed: { + href() { + return `data:text/json;charset=utf-8,${this.exportAllLogs()}`; + }, filteredRows() { return this.searchFilter ? this.searchTotalFilteredRows @@ -430,6 +450,23 @@ export default { }) .catch(({ message }) => this.errorToast(message)); }, + deleteAllLogs() { + this.$bvModal + .msgBoxConfirm(this.$t('pageEventLogs.modal.deleteAllMessage'), { + title: this.$t('pageEventLogs.modal.deleteAllTitle'), + okTitle: this.$t('global.action.delete'), + okVariant: 'danger', + cancelTitle: this.$t('global.action.cancel'), + }) + .then((deleteConfirmed) => { + if (deleteConfirmed) { + this.$store + .dispatch('eventLog/deleteAllEventLogs', this.allLogs) + .then((message) => this.successToast(message)) + .catch(({ message }) => this.errorToast(message)); + } + }); + }, deleteLogs(uris) { this.$store .dispatch('eventLog/deleteEventLogs', uris) @@ -443,6 +480,14 @@ export default { }); }); }, + exportAllLogs() { + { + return this.$store.getters['eventLog/allEvents'].map((eventLogs) => { + const allEventLogsString = JSON.stringify(eventLogs); + return allEventLogsString; + }); + } + }, onFilterChange({ activeFilters }) { this.activeFilters = activeFilters; }, @@ -507,13 +552,19 @@ export default { this.searchTotalFilteredRows = filteredItems.length; }, // Create export file name based on date - exportFileNameByDate() { + exportFileNameByDate(value) { let date = new Date(); date = date.toISOString().slice(0, 10) + '_' + date.toString().split(':').join('-').split(' ')[4]; - return this.$t('pageEventLogs.exportFilePrefix') + date; + let fileName; + if (value === 'export') { + fileName = 'event_log_'; + } else { + fileName = 'all_event_logs_'; + } + return fileName + date; }, resolveLogs() { this.$store |