Fix single event entry downloadvue3

For event entry download, the href not work since the event entry
download only work with header of "Accept: application/octet-stream" or
the default "*/*", change to click function to make it work.

Refer: https://gerrit.openbmc.org/c/openbmc/bmcweb/+/40136

Change-Id: I11051e913bfd71ef081bed93ffcbeeb1edd8c730
Signed-off-by: Sean Zhang <xiazhang@nvidia.com>

3 files changed, 32 insertions, 5 deletions

diff --git a/src/locales/en-US.json b/src/locales/en-US.json
index 55ff937f..a4995076 100644
--- a/src/locales/en-US.json
+++ b/src/locales/en-US.json
@@ -282,6 +282,7 @@
             "errorLogStatusUpdate": "Error updating log status.",
             "errorResolveLogs": "Error resolving %{count} log. | Error resolving %{count} logs.",
             "errorUnresolveLogs": "Error unresolving %{count} log. | Error unresolving %{count} logs.",
+            "errorDownloadEventEntry": "Error download event log entry.",
             "successDelete": "Successfully deleted %{count} log. | Successfully deleted %{count} logs.",
             "successResolveLogs": "Successfully resolved %{count} log. | Successfully resolved %{count} logs.",
             "successUnresolveLogs": "Successfully unresolved %{count} log. | Successfully unresolved %{count} logs."
diff --git a/src/store/modules/Logs/EventLogStore.js b/src/store/modules/Logs/EventLogStore.js
index 3c197089..a83a1335 100644
--- a/src/store/modules/Logs/EventLogStore.js
+++ b/src/store/modules/Logs/EventLogStore.js
@@ -224,6 +224,22 @@ const EventLogStore = {
           );
         });
     },
+    async downloadEntry(_, uri) {
+      return await api
+        .get(uri)
+        .then((response) => {
+          const blob = new Blob([response.data], {
+            type: response.headers['content-type'],
+          });
+          return blob;
+        })
+        .catch((error) => {
+          console.log(error);
+          throw new Error(
+            i18n.t('pageEventLogs.toast.errorDownloadEventEntry'),
+          );
+        });
+    },
   },
 };
 
diff --git a/src/views/Logs/EventLogs/EventLogs.vue b/src/views/Logs/EventLogs/EventLogs.vue
index e50be819..392125c7 100644
--- a/src/views/Logs/EventLogs/EventLogs.vue
+++ b/src/views/Logs/EventLogs/EventLogs.vue
@@ -151,11 +151,7 @@
                   </dl>
                 </b-col>
                 <b-col class="text-nowrap">
-                  <b-button
-                    class="btn btn-secondary float-right"
-                    :href="item.additionalDataUri"
-                    target="_blank"
-                  >
+                  <b-button @click="downloadEntry(item.additionalDataUri)">
                     <icon-download />{{ $t('pageEventLogs.additionalDataUri') }}
                   </b-button>
                 </b-col>
@@ -474,6 +470,20 @@ export default {
     });
   },
   methods: {
+    downloadEntry(uri) {
+      let filename = uri?.split('LogServices/')?.[1];
+      filename.replace(RegExp('/', 'g'), '_');
+      this.$store
+        .dispatch('eventLog/downloadEntry', uri)
+        .then((blob) => {
+          const link = document.createElement('a');
+          link.href = URL.createObjectURL(blob);
+          link.download = filename;
+          link.click();
+          URL.revokeObjectURL(link.href);
+        })
+        .catch(({ message }) => this.errorToast(message));
+    },
     changelogStatus(row) {
       this.$store
         .dispatch('eventLog/updateEventLogStatus', {