Add batch actions and row action to Event Logs

Adds ability to export and delete event logs by row or in a
table batch action.

- Modifications to TableRowAction component to allow single
  row export functionality

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

1 files changed, 158 insertions, 6 deletions

diff --git a/src/views/Health/EventLogs/EventLogs.vue b/src/views/Health/EventLogs/EventLogs.vue
index d7a64c90..a5ef3757 100644
--- a/src/views/Health/EventLogs/EventLogs.vue
+++ b/src/views/Health/EventLogs/EventLogs.vue
@@ -8,27 +8,81 @@
     </b-row>
     <b-row>
       <b-col>
+        <table-toolbar
+          ref="toolbar"
+          :selected-items-count="selectedRows.length"
+          :actions="batchActions"
+          @clearSelected="clearSelectedRows($refs.table)"
+          @batchAction="onBatchAction"
+        >
+          <template v-slot:export>
+            <table-toolbar-export
+              :data="batchExportData"
+              :file-name="$t('appPageTitle.eventLogs')"
+            />
+          </template>
+        </table-toolbar>
         <b-table
           id="table-event-logs"
-          :fields="fields"
-          :items="filteredLogs"
+          ref="table"
+          selectable
+          no-select-on-click
           sort-icon-left
           no-sort-reset
           sort-desc
           show-empty
           sort-by="date"
+          :fields="fields"
+          :items="filteredLogs"
           :sort-compare="onSortCompare"
           :empty-text="$t('pageEventLogs.table.emptyMessage')"
           :per-page="perPage"
           :current-page="currentPage"
+          @row-selected="onRowSelected($event, filteredLogs.length)"
         >
+          <!-- Checkbox column -->
+          <template v-slot:head(checkbox)>
+            <b-form-checkbox
+              v-model="tableHeaderCheckboxModel"
+              :indeterminate="tableHeaderCheckboxIndeterminate"
+              @change="onChangeHeaderCheckbox($refs.table)"
+            />
+          </template>
+          <template v-slot:cell(checkbox)="row">
+            <b-form-checkbox
+              v-model="row.rowSelected"
+              @change="toggleSelectRow($refs.table, row.index)"
+            />
+          </template>
+
+          <!-- Severity column -->
           <template v-slot:cell(severity)="{ value }">
             <status-icon :status="getStatus(value)" />
             {{ value }}
           </template>
+
+          <!-- Date column -->
           <template v-slot:cell(date)="{ value }">
             {{ value | formatDate }} {{ value | formatTime }}
           </template>
+
+          <!-- Actions column -->
+          <template v-slot:cell(actions)="{ item }">
+            <table-row-action
+              v-for="(action, index) in item.actions"
+              :key="index"
+              :value="action.value"
+              :title="action.title"
+              :row-data="item"
+              :export-name="item.id"
+              @click:tableAction="onTableRowAction($event, item)"
+            >
+              <template v-slot:icon>
+                <icon-export v-if="action.value === 'export'" />
+                <icon-trashcan v-if="action.value === 'delete'" />
+              </template>
+            </table-row-action>
+          </template>
         </b-table>
       </b-col>
     </b-row>
@@ -61,27 +115,51 @@
 </template>
 
 <script>
+import IconTrashcan from '@carbon/icons-vue/es/trash-can/20';
+import IconExport from '@carbon/icons-vue/es/export/20';
+import { omit } from 'lodash';
+
 import PageTitle from '@/components/Global/PageTitle';
 import StatusIcon from '@/components/Global/StatusIcon';
 import TableFilter from '@/components/Global/TableFilter';
+import TableRowAction from '@/components/Global/TableRowAction';
+import TableToolbar from '@/components/Global/TableToolbar';
+import TableToolbarExport from '@/components/Global/TableToolbarExport';
 
 import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
 import TableFilterMixin from '@/components/Mixins/TableFilterMixin';
 import BVPaginationMixin from '@/components/Mixins/BVPaginationMixin';
+import BVTableSelectableMixin from '@/components/Mixins/BVTableSelectableMixin';
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
 
 const SEVERITY = ['OK', 'Warning', 'Critical'];
 
 export default {
   components: {
+    IconExport,
+    IconTrashcan,
     PageTitle,
     StatusIcon,
-    TableFilter
+    TableFilter,
+    TableRowAction,
+    TableToolbar,
+    TableToolbarExport
   },
-  mixins: [LoadingBarMixin, TableFilterMixin, BVPaginationMixin],
+  mixins: [
+    BVPaginationMixin,
+    BVTableSelectableMixin,
+    BVToastMixin,
+    LoadingBarMixin,
+    TableFilterMixin
+  ],
   data() {
     return {
       fields: [
         {
+          key: 'checkbox',
+          sortable: false
+        },
+        {
           key: 'id',
           label: this.$t('pageEventLogs.table.id'),
           sortable: true
@@ -104,6 +182,12 @@ export default {
         {
           key: 'description',
           label: this.$t('pageEventLogs.table.description')
+        },
+        {
+          key: 'actions',
+          sortable: false,
+          label: '',
+          tdClass: 'text-right'
         }
       ],
       tableFilters: [
@@ -112,12 +196,32 @@ export default {
           values: SEVERITY
         }
       ],
-      activeFilters: []
+      activeFilters: [],
+      batchActions: [
+        {
+          value: 'delete',
+          label: this.$t('global.action.delete')
+        }
+      ]
     };
   },
   computed: {
     allLogs() {
-      return this.$store.getters['eventLog/allEvents'];
+      return this.$store.getters['eventLog/allEvents'].map(event => {
+        return {
+          ...event,
+          actions: [
+            {
+              value: 'export',
+              title: this.$t('global.action.export')
+            },
+            {
+              value: 'delete',
+              title: this.$t('global.action.delete')
+            }
+          ]
+        };
+      });
     },
     filteredLogs: {
       get: function() {
@@ -126,6 +230,9 @@ export default {
       set: function(newVal) {
         return newVal;
       }
+    },
+    batchExportData() {
+      return this.selectedRows.map(row => omit(row, 'actions'));
     }
   },
   created() {
@@ -153,6 +260,17 @@ export default {
           return '';
       }
     },
+    deleteLogs(uris) {
+      this.$store.dispatch('eventLog/deleteEventLogs', uris).then(messages => {
+        messages.forEach(({ type, message }) => {
+          if (type === 'success') {
+            this.successToast(message);
+          } else if (type === 'error') {
+            this.errorToast(message);
+          }
+        });
+      });
+    },
     onFilterChange({ activeFilters }) {
       this.activeFilters = activeFilters;
       this.filteredLogs = this.getFilteredTableData(
@@ -164,6 +282,40 @@ export default {
       if (key === 'severity') {
         return SEVERITY.indexOf(a.status) - SEVERITY.indexOf(b.status);
       }
+    },
+    onTableRowAction(action, { uri }) {
+      if (action === 'delete') {
+        this.$bvModal
+          .msgBoxConfirm(this.$tc('pageEventLogs.modal.deleteMessage'), {
+            title: this.$tc('pageEventLogs.modal.deleteTitle'),
+            okTitle: this.$t('global.action.delete')
+          })
+          .then(deleteConfirmed => {
+            if (deleteConfirmed) this.deleteLogs([uri]);
+          });
+      }
+    },
+    onBatchAction(action) {
+      if (action === 'delete') {
+        const uris = this.selectedRows.map(row => row.uri);
+        this.$bvModal
+          .msgBoxConfirm(
+            this.$tc(
+              'pageEventLogs.modal.deleteMessage',
+              this.selectedRows.length
+            ),
+            {
+              title: this.$tc(
+                'pageEventLogs.modal.deleteTitle',
+                this.selectedRows.length
+              ),
+              okTitle: this.$t('global.action.delete')
+            }
+          )
+          .then(deleteConfirmed => {
+            if (deleteConfirmed) this.deleteLogs(uris);
+          });
+      }
     }
   }
 };