Add event log resolve and unresolve log functionality

Displays resolved or unresolved status, adds ability to filter
by resolved or unresolved, and adds ability to resolve or
unresolve  one or more logs.

Move event type table field to expanded row.

Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Change-Id: Ie5761753a7660a714f98c238d8d89aa018719dcf

5 files changed, 185 insertions, 10 deletions

diff --git a/src/components/Global/TableToolbar.vue b/src/components/Global/TableToolbar.vue
index a9281748f..5235feae7 100644
--- a/src/components/Global/TableToolbar.vue
+++ b/src/components/Global/TableToolbar.vue
@@ -6,6 +6,7 @@
           {{ selectedItemsCount }} {{ $t('global.action.selected') }}
         </p>
         <div class="toolbar-actions d-flex">
+          <slot name="toolbar-buttons"></slot>
           <b-button
             v-for="(action, index) in actions"
             :key="index"
@@ -16,7 +17,6 @@
           >
             {{ action.label }}
           </b-button>
-          <slot name="export"></slot>
           <b-button
             variant="secondary"
             class="d-block"
diff --git a/src/locales/en-US.json b/src/locales/en-US.json
index c6a87459c..34efa6213 100644
--- a/src/locales/en-US.json
+++ b/src/locales/en-US.json
@@ -246,6 +246,10 @@
   },
   "pageEventLogs": {
     "exportFilePrefix": "event_logs_",
+    "resolve": "Resolve",
+    "resolved": "Resolved",
+    "unresolve": "Unresolve",
+    "unresolved": "Unresolved",
     "modal": {
       "deleteTitle": "Delete log | Delete logs",
       "deleteMessage": "Are you sure you want to delete %{count} log? This action cannot be undone. | Are you sure you want to delete %{count} logs? This action cannot be undone."
@@ -258,11 +262,19 @@
       "name": "Name",
       "searchLogs": "Search logs",
       "severity": "Severity",
+      "status": "Status",
       "type": "Type"
     },
     "toast": {
       "errorDelete": "Error deleting %{count} log. | Error deleting %{count} logs.",
-      "successDelete": "Successfully deleted %{count} log. | Successfully deleted %{count} logs."
+      "successDelete": "Successfully deleted %{count} log. | Successfully deleted %{count} logs.",
+      "errorLogStatusUpdate": "Error updating log status.",
+      "errorResolveLogs": "Error resolving %{count} log. | Error resolving %{count} logs.",
+      "errorUnresolveLogs": "Error unresolving %{count} log. | Error unresolving %{count} logs.",
+      "successResolveLog": "Successfully resolved log.",
+      "successResolveLogs": "Successfully resolved %{count} log. | Successfully resolved %{count} logs.",
+      "successUnresolveLog": "Successfully unresolved log.",
+      "successUnresolveLogs": "Successfully unresolved %{count} log. | Successfully unresolved %{count} logs."
     }
   },
   "pageFactoryReset": {
diff --git a/src/store/modules/Health/EventLogStore.js b/src/store/modules/Health/EventLogStore.js
index eaec74900..2b6d5f947 100644
--- a/src/store/modules/Health/EventLogStore.js
+++ b/src/store/modules/Health/EventLogStore.js
@@ -51,6 +51,7 @@ const EventLogStore = {
               Message,
               Name,
               Modified,
+              Resolved,
             } = log;
             return {
               id: Id,
@@ -61,6 +62,8 @@ const EventLogStore = {
               name: Name,
               modifiedDate: new Date(Modified),
               uri: log['@odata.id'],
+              filterByStatus: Resolved ? 'Resolved' : 'Unresolved',
+              status: Resolved, //true or false
             };
           });
           commit('setAllEvents', eventLogs);
@@ -119,6 +122,95 @@ const EventLogStore = {
           })
         );
     },
+    async resolveEventLogs({ dispatch }, logs) {
+      const promises = logs.map((log) =>
+        api.patch(log.uri, { Resolved: true }).catch((error) => {
+          console.log(error);
+          return error;
+        })
+      );
+      return await api
+        .all(promises)
+        .then((response) => {
+          dispatch('getEventLogData');
+          return response;
+        })
+        .then(
+          api.spread((...responses) => {
+            const { successCount, errorCount } = getResponseCount(responses);
+            const toastMessages = [];
+            if (successCount) {
+              const message = i18n.tc(
+                'pageEventLogs.toast.successResolveLogs',
+                successCount
+              );
+              toastMessages.push({ type: 'success', message });
+            }
+            if (errorCount) {
+              const message = i18n.tc(
+                'pageEventLogs.toast.errorResolveLogs',
+                errorCount
+              );
+              toastMessages.push({ type: 'error', message });
+            }
+            return toastMessages;
+          })
+        );
+    },
+    async unresolveEventLogs({ dispatch }, logs) {
+      const promises = logs.map((log) =>
+        api.patch(log.uri, { Resolved: false }).catch((error) => {
+          console.log(error);
+          return error;
+        })
+      );
+      return await api
+        .all(promises)
+        .then((response) => {
+          dispatch('getEventLogData');
+          return response;
+        })
+        .then(
+          api.spread((...responses) => {
+            const { successCount, errorCount } = getResponseCount(responses);
+            const toastMessages = [];
+            if (successCount) {
+              const message = i18n.tc(
+                'pageEventLogs.toast.successUnresolveLogs',
+                successCount
+              );
+              toastMessages.push({ type: 'success', message });
+            }
+            if (errorCount) {
+              const message = i18n.tc(
+                'pageEventLogs.toast.errorUnresolveLogs',
+                errorCount
+              );
+              toastMessages.push({ type: 'error', message });
+            }
+            return toastMessages;
+          })
+        );
+    },
+    async updateEventLogStatus({ dispatch }, log) {
+      const updatedEventLogStatus = log.status;
+      return await api
+        .patch(log.uri, { Resolved: updatedEventLogStatus })
+        .then(() => {
+          dispatch('getEventLogData');
+        })
+        .then(() => {
+          if (log.status) {
+            return i18n.t('pageEventLogs.toast.successResolveLog');
+          } else {
+            return i18n.t('pageEventLogs.toast.successUnresolveLog');
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+          throw new Error(i18n.t('pageEventLogs.toast.errorLogStatusUpdate'));
+        });
+    },
   },
 };
 
diff --git a/src/views/Health/EventLogs/EventLogs.vue b/src/views/Health/EventLogs/EventLogs.vue
index 69545a579..64e2adb91 100644
--- a/src/views/Health/EventLogs/EventLogs.vue
+++ b/src/views/Health/EventLogs/EventLogs.vue
@@ -34,7 +34,13 @@
           @clear-selected="clearSelectedRows($refs.table)"
           @batch-action="onBatchAction"
         >
-          <template #export>
+          <template #toolbar-buttons>
+            <b-button variant="primary" @click="resolveLogs">
+              {{ $t('pageEventLogs.resolve') }}
+            </b-button>
+            <b-button variant="primary" @click="unresolveLogs">
+              {{ $t('pageEventLogs.unresolve') }}
+            </b-button>
             <table-toolbar-export
               :data="batchExportData"
               :file-name="exportFileNameByDate()"
@@ -107,6 +113,11 @@
                     <dt>{{ $t('pageEventLogs.table.name') }}:</dt>
                     <dd>{{ tableFormatter(item.name) }}</dd>
                   </dl>
+                  <dl>
+                    <!-- Type -->
+                    <dt>{{ $t('pageEventLogs.table.type') }}:</dt>
+                    <dd>{{ tableFormatter(item.type) }}</dd>
+                  </dl>
                 </b-col>
                 <b-col sm="6" xl="4">
                   <dl>
@@ -128,13 +139,30 @@
             <status-icon v-if="value" :status="statusIcon(value)" />
             {{ value }}
           </template>
-
           <!-- Date column -->
           <template #cell(date)="{ value }">
             <p class="mb-0">{{ value | formatDate }}</p>
             <p class="mb-0">{{ value | formatTime }}</p>
           </template>
 
+          <!-- Status column -->
+          <template #cell(status)="row">
+            <b-form-checkbox
+              v-model="row.item.status"
+              name="switch"
+              switch
+              @change="changelogStatus(row.item)"
+            >
+              <span v-if="row.item.status">
+                {{ $t('pageEventLogs.resolved') }}
+              </span>
+              <span v-else> {{ $t('pageEventLogs.unresolved') }} </span>
+            </b-form-checkbox>
+          </template>
+          <template #cell(filterByStatus)="{ value }">
+            {{ value }}
+          </template>
+
           <!-- Actions column -->
           <template #cell(actions)="row">
             <table-row-action
@@ -280,18 +308,19 @@ export default {
           tdClass: 'text-nowrap',
         },
         {
-          key: 'type',
-          label: this.$t('pageEventLogs.table.type'),
-          sortable: true,
-        },
-        {
           key: 'date',
           label: this.$t('pageEventLogs.table.date'),
           sortable: true,
+          tdClass: 'text-nowrap',
         },
         {
           key: 'description',
           label: this.$t('pageEventLogs.table.description'),
+          tdClass: 'text-break',
+        },
+        {
+          key: 'status',
+          label: this.$t('pageEventLogs.table.status'),
         },
         {
           key: 'actions',
@@ -306,6 +335,11 @@ export default {
           label: this.$t('pageEventLogs.table.severity'),
           values: ['OK', 'Warning', 'Critical'],
         },
+        {
+          key: 'filterByStatus',
+          label: this.$t('pageEventLogs.table.status'),
+          values: ['Resolved', 'Unresolved'],
+        },
       ],
       expandRowLabel,
       activeFilters: [],
@@ -374,6 +408,17 @@ export default {
       .finally(() => this.endLoader());
   },
   methods: {
+    changelogStatus(row) {
+      this.$store
+        .dispatch('eventLog/updateEventLogStatus', {
+          uri: row.uri,
+          status: row.status,
+        })
+        .then((success) => {
+          this.successToast(success);
+        })
+        .catch(({ message }) => this.errorToast(message));
+    },
     deleteLogs(uris) {
       this.$store
         .dispatch('eventLog/deleteEventLogs', uris)
@@ -459,6 +504,32 @@ export default {
         date.toString().split(':').join('-').split(' ')[4];
       return this.$t('pageEventLogs.exportFilePrefix') + date;
     },
+    resolveLogs() {
+      this.$store
+        .dispatch('eventLog/resolveEventLogs', this.selectedRows)
+        .then((messages) => {
+          messages.forEach(({ type, message }) => {
+            if (type === 'success') {
+              this.successToast(message);
+            } else if (type === 'error') {
+              this.errorToast(message);
+            }
+          });
+        });
+    },
+    unresolveLogs() {
+      this.$store
+        .dispatch('eventLog/unresolveEventLogs', this.selectedRows)
+        .then((messages) => {
+          messages.forEach(({ type, message }) => {
+            if (type === 'success') {
+              this.successToast(message);
+            } else if (type === 'error') {
+              this.errorToast(message);
+            }
+          });
+        });
+    },
   },
 };
 </script>
diff --git a/src/views/Health/Sensors/Sensors.vue b/src/views/Health/Sensors/Sensors.vue
index 8bc4e22e0..c69532a62 100644
--- a/src/views/Health/Sensors/Sensors.vue
+++ b/src/views/Health/Sensors/Sensors.vue
@@ -27,7 +27,7 @@
           :selected-items-count="selectedRows.length"
           @clear-selected="clearSelectedRows($refs.table)"
         >
-          <template #export>
+          <template #toolbar-buttons>
             <table-toolbar-export
               :data="selectedRows"
               :file-name="exportFileNameByDate()"