Add enhancements to BVToastMixin

Adds ability to create toasts with multi-lined body content and
options to include a timestamp and application refresh action.

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

2 files changed, 45 insertions, 75 deletions

diff --git a/src/env/components/Dumps/DumpsForm.vue b/src/env/components/Dumps/DumpsForm.vue
index 9dc8bcb1..02ec1864 100644
--- a/src/env/components/Dumps/DumpsForm.vue
+++ b/src/env/components/Dumps/DumpsForm.vue
@@ -68,10 +68,10 @@ export default {
         this.$store
           .dispatch('dumps/createBmcDump')
           .then(() =>
-            this.infoToast(
-              this.$t('pageDumps.toast.successStartBmcDump'),
-              this.$t('pageDumps.toast.successStartBmcDumpTitle')
-            )
+            this.infoToast(this.$t('pageDumps.toast.successStartBmcDump'), {
+              title: this.$t('pageDumps.toast.successStartBmcDumpTitle'),
+              timestamp: true,
+            })
           )
           .catch(({ message }) => this.errorToast(message));
       }
@@ -83,10 +83,10 @@ export default {
       this.$store
         .dispatch('dumps/createSystemDump')
         .then(() =>
-          this.infoToast(
-            this.$t('pageDumps.toast.successStartSystemDump'),
-            this.$t('pageDumps.toast.successStartSystemDumpTitle')
-          )
+          this.infoToast(this.$t('pageDumps.toast.successStartSystemDump'), {
+            title: this.$t('pageDumps.toast.successStartSystemDumpTitle'),
+            timestamp: true,
+          })
         )
         .catch(({ message }) => this.errorToast(message));
     },
diff --git a/src/env/components/FirmwareSingleImage/FirmwareSingleImage.vue b/src/env/components/FirmwareSingleImage/FirmwareSingleImage.vue
index 517e5fa1..1089e7a5 100644
--- a/src/env/components/FirmwareSingleImage/FirmwareSingleImage.vue
+++ b/src/env/components/FirmwareSingleImage/FirmwareSingleImage.vue
@@ -195,61 +195,6 @@
       :backup="backupFirmwareVersion"
       @ok="switchToRunning"
     />
-
-    <!-- Toasts -->
-    <b-toast id="switch-images" variant="info" solid :no-auto-hide="true">
-      <template #toast-title>
-        <status-icon status="info" class="toast-icon" />
-        <strong>{{
-          $t('pageFirmware.singleFileUpload.toast.rebootStarted')
-        }}</strong>
-      </template>
-      <p class="m-0">
-        {{ $t('pageFirmware.singleFileUpload.toast.rebootStartedMessage') }}
-      </p>
-    </b-toast>
-
-    <b-toast id="switch-images-2" variant="info" solid :no-auto-hide="true">
-      <template #toast-title>
-        <status-icon status="info" class="toast-icon" />
-        <strong>{{
-          $t('pageFirmware.singleFileUpload.toast.verifySwitch')
-        }}</strong>
-      </template>
-      <p>
-        {{ $t('pageFirmware.singleFileUpload.toast.verifySwitchMessage') }}
-      </p>
-      <b-link @click="onClickRefresh">{{ $t('global.action.refresh') }}</b-link>
-    </b-toast>
-
-    <b-toast id="update-firmware" variant="info" solid :no-auto-hide="true">
-      <template #toast-title>
-        <status-icon status="info" class="toast-icon" />
-        <strong>{{
-          $t('pageFirmware.singleFileUpload.toast.updateStarted')
-        }}</strong>
-      </template>
-      <p>
-        {{ $t('pageFirmware.singleFileUpload.toast.updateStartedMessage') }}
-      </p>
-      <p class="m-0">
-        {{ $t('pageFirmware.singleFileUpload.toast.startTime') }}
-        {{ $options.filters.formatTime(new Date()) }}
-      </p>
-    </b-toast>
-
-    <b-toast id="update-firmware-2" variant="info" solid :no-auto-hide="true">
-      <template #toast-title>
-        <status-icon status="info" class="toast-icon" />
-        <strong>{{
-          $t('pageFirmware.singleFileUpload.toast.verifyUpdate')
-        }}</strong>
-      </template>
-      <p>
-        {{ $t('pageFirmware.singleFileUpload.toast.verifyUpdateMessage') }}
-      </p>
-      <b-link @click="onClickRefresh">{{ $t('global.action.refresh') }}</b-link>
-    </b-toast>
   </b-container>
 </template>
 
@@ -285,7 +230,6 @@ export default {
   mixins: [BVToastMixin, LoadingBarMixin, VuelidateMixin],
   beforeRouteLeave(to, from, next) {
     this.hideLoader();
-    this.clearRebootTimeout();
     next();
   },
   data() {
@@ -354,8 +298,22 @@ export default {
   },
   methods: {
     updateFirmware() {
-      this.setRebootTimeout(360000, 'update-firmware-2'); //6 minute timeout
-      this.$bvToast.show('update-firmware');
+      this.setRebootTimeout(360000, () => {
+        this.infoToast(
+          this.$t('pageFirmware.singleFileUpload.toast.verifyUpdateMessage'),
+          {
+            title: this.$t('pageFirmware.singleFileUpload.toast.verifyUpdate'),
+            refreshAction: true,
+          }
+        );
+      });
+      this.infoToast(
+        this.$t('pageFirmware.singleFileUpload.toast.updateStartedMessage'),
+        {
+          title: this.$t('pageFirmware.singleFileUpload.toast.updateStarted'),
+          timestamp: true,
+        }
+      );
       if (this.isWorkstationSelected) {
         this.dispatchWorkstationUpload();
       } else {
@@ -382,24 +340,39 @@ export default {
         });
     },
     switchToRunning() {
-      this.setRebootTimeout(60000, 'switch-images-2');
+      this.setRebootTimeout(60000, () => {
+        this.infoToast(
+          this.$t('pageFirmware.singleFileUpload.toast.verifySwitchMessage'),
+          {
+            title: this.$t('pageFirmware.singleFileUpload.toast.verifySwitch'),
+            refreshAction: true,
+          }
+        );
+      });
       this.$store
         .dispatch('firmwareSingleImage/switchFirmwareAndReboot')
-        .then(() => this.$bvToast.show('switch-images'))
+        .then(() =>
+          this.infoToast(
+            this.$t('pageFirmware.singleFileUpload.toast.rebootStartedMessage'),
+            {
+              title: this.$t(
+                'pageFirmware.singleFileUpload.toast.rebootStarted'
+              ),
+            }
+          )
+        )
         .catch(({ message }) => {
           this.errorToast(message);
           this.clearRebootTimeout();
         });
     },
-    setRebootTimeout(timeoutMs = 60000, toastId) {
+    setRebootTimeout(timeoutMs = 60000, callback) {
       // Set a timeout to disable page interactions
       // during a BMC reboot
       this.startLoader();
       this.timeoutId = setTimeout(() => {
         this.endLoader();
-        if (toastId) {
-          this.$bvToast.show(toastId);
-        }
+        if (callback) callback();
       }, timeoutMs);
     },
     clearRebootTimeout() {
@@ -417,9 +390,6 @@ export default {
       this.file = file;
       this.$v.file.$touch();
     },
-    onClickRefresh() {
-      this.$root.$emit('refresh-application');
-    },
   },
 };
 </script>