From f92e29696d0f01c7fa1941829cb131a708f88393 Mon Sep 17 00:00:00 2001 From: Yoshie Muranaka Date: Tue, 9 Feb 2021 12:41:53 -0800 Subject: 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 Change-Id: I30b1da04a0e0b5f29a419950462d1ca35e207552 --- src/components/AppHeader/AppHeader.vue | 7 +- src/components/Mixins/BVToastMixin.js | 126 +++++++++++++++------ src/env/components/Dumps/DumpsForm.vue | 16 +-- .../FirmwareSingleImage/FirmwareSingleImage.vue | 104 ++++++----------- src/locales/en-US.json | 1 - src/views/Configuration/Firmware/Firmware.vue | 23 ++-- 6 files changed, 151 insertions(+), 126 deletions(-) (limited to 'src') diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue index 5b36cf85..7e1a1006 100644 --- a/src/components/AppHeader/AppHeader.vue +++ b/src/components/AppHeader/AppHeader.vue @@ -172,10 +172,9 @@ export default { watch: { isAuthorized(value) { if (value === false) { - this.errorToast( - this.$t('global.toast.unAuthDescription'), - this.$t('global.toast.unAuthTitle') - ); + this.errorToast(this.$t('global.toast.unAuthDescription'), { + title: this.$t('global.toast.unAuthTitle'), + }); } }, }, diff --git a/src/components/Mixins/BVToastMixin.js b/src/components/Mixins/BVToastMixin.js index 5e8ec006..a04ef438 100644 --- a/src/components/Mixins/BVToastMixin.js +++ b/src/components/Mixins/BVToastMixin.js @@ -1,57 +1,113 @@ -import i18n from '@/i18n'; import StatusIcon from '../Global/StatusIcon'; + const BVToastMixin = { components: { StatusIcon, }, methods: { - toastTitle(title, status) { - // Create title with icon + $_BVToastMixin_createTitle(title, status) { + const statusIcon = this.$createElement('StatusIcon', { + props: { status }, + }); const titleWithIcon = this.$createElement( 'strong', { class: 'toast-icon' }, - [ - this.$createElement('StatusIcon', { props: { status: status } }), - title, - ] + [statusIcon, title] ); return titleWithIcon; }, - successToast(message, title = i18n.t('global.status.success')) { - this.$root.$bvToast.toast(message, { - title: this.toastTitle(title, 'success'), - variant: 'success', + $_BVToastMixin_createBody(messageBody) { + if (Array.isArray(messageBody)) { + return messageBody.map((message) => + this.$createElement('p', { class: 'mb-0' }, message) + ); + } else { + return [this.$createElement('p', { class: 'mb-0' }, messageBody)]; + } + }, + $_BVToastMixin_createTimestamp() { + const timestamp = this.$options.filters.formatTime(new Date()); + return this.$createElement('p', { class: 'mt-3 mb-0' }, timestamp); + }, + $_BVToastMixin_createRefreshAction() { + return this.$createElement( + 'BLink', + { + class: 'd-inline-block mt-3', + on: { + click: () => { + this.$root.$emit('refresh-application'); + }, + }, + }, + this.$t('global.action.refresh') + ); + }, + $_BVToastMixin_initToast(body, title, variant) { + this.$root.$bvToast.toast(body, { + title, + variant, autoHideDelay: 10000, //auto hide in milliseconds + noAutoHide: variant !== 'success', isStatus: true, solid: true, }); }, - errorToast(message, title = i18n.t('global.status.error')) { - this.$root.$bvToast.toast(message, { - title: this.toastTitle(title, 'danger'), - variant: 'danger', - noAutoHide: true, - isStatus: true, - solid: true, - }); + successToast( + message, + { + title: t = this.$t('global.status.success'), + timestamp, + refreshAction, + } = {} + ) { + const body = this.$_BVToastMixin_createBody(message); + const title = this.$_BVToastMixin_createTitle(t, 'success'); + if (refreshAction) body.push(this.$_BVToastMixin_createRefreshAction()); + if (timestamp) body.push(this.$_BVToastMixin_createTimestamp()); + this.$_BVToastMixin_initToast(body, title, 'success'); }, - warningToast(message, title = i18n.t('global.status.warning')) { - this.$root.$bvToast.toast(message, { - title: this.toastTitle(title, 'warning'), - variant: 'warning', - noAutoHide: true, - isStatus: true, - solid: true, - }); + errorToast( + message, + { + title: t = this.$t('global.status.error'), + timestamp, + refreshAction, + } = {} + ) { + const body = this.$_BVToastMixin_createBody(message); + const title = this.$_BVToastMixin_createTitle(t, 'danger'); + if (refreshAction) body.push(this.$_BVToastMixin_createRefreshAction()); + if (timestamp) body.push(this.$_BVToastMixin_createTimestamp()); + this.$_BVToastMixin_initToast(body, title, 'danger'); }, - infoToast(message, title = i18n.t('global.status.informational')) { - this.$root.$bvToast.toast(message, { - title: this.toastTitle(title, 'info'), - variant: 'info', - noAutoHide: true, - isStatus: true, - solid: true, - }); + warningToast( + message, + { + title: t = this.$t('global.status.warning'), + timestamp, + refreshAction, + } = {} + ) { + const body = this.$_BVToastMixin_createBody(message); + const title = this.$_BVToastMixin_createTitle(t, 'warning'); + if (refreshAction) body.push(this.$_BVToastMixin_createRefreshAction()); + if (timestamp) body.push(this.$_BVToastMixin_createTimestamp()); + this.$_BVToastMixin_initToast(body, title, 'warning'); + }, + infoToast( + message, + { + title: t = this.$t('global.status.informational'), + timestamp, + refreshAction, + } = {} + ) { + const body = this.$_BVToastMixin_createBody(message); + const title = this.$_BVToastMixin_createTitle(t, 'info'); + if (refreshAction) body.push(this.$_BVToastMixin_createRefreshAction()); + if (timestamp) body.push(this.$_BVToastMixin_createTimestamp()); + this.$_BVToastMixin_initToast(body, title, 'info'); }, }, }; 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" /> - - - - -

- {{ $t('pageFirmware.singleFileUpload.toast.rebootStartedMessage') }} -

- - - - -

- {{ $t('pageFirmware.singleFileUpload.toast.verifySwitchMessage') }} -

- {{ $t('global.action.refresh') }} - - - - -

- {{ $t('pageFirmware.singleFileUpload.toast.updateStartedMessage') }} -

-

- {{ $t('pageFirmware.singleFileUpload.toast.startTime') }} - {{ $options.filters.formatTime(new Date()) }} -

- - - - -

- {{ $t('pageFirmware.singleFileUpload.toast.verifyUpdateMessage') }} -

- {{ $t('global.action.refresh') }} - @@ -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'); - }, }, }; diff --git a/src/locales/en-US.json b/src/locales/en-US.json index d3b6d754..8ca98bf0 100644 --- a/src/locales/en-US.json +++ b/src/locales/en-US.json @@ -346,7 +346,6 @@ "errorSwitchImages": "Error switching running and backup images.", "rebootStarted": "Reboot started", "rebootStartedMessage": "Successfully started reboot from backup image.", - "startTime": "Start time:", "updateStarted": "Update started", "updateStartedMessage": "Wait for the firmware update notification before making any changes.", "verifySwitch": "Verify switch", diff --git a/src/views/Configuration/Firmware/Firmware.vue b/src/views/Configuration/Firmware/Firmware.vue index 0e162069..5001702a 100644 --- a/src/views/Configuration/Firmware/Firmware.vue +++ b/src/views/Configuration/Firmware/Firmware.vue @@ -282,7 +282,7 @@ export default { this.setRebootTimeout(360000); //6 minute timeout this.infoToast( this.$t('pageFirmware.toast.infoUploadStartTimeMessage', { startTime }), - this.$t('pageFirmware.toast.infoUploadStartTimeTitle') + { title: this.$t('pageFirmware.toast.infoUploadStartTimeTitle') } ); if (this.isWorkstationSelected) { this.dispatchWorkstationUpload(); @@ -294,10 +294,9 @@ export default { this.$store .dispatch('firmware/uploadFirmware', this.file) .then((success) => - this.infoToast( - success, - this.$t('pageFirmware.toast.successUploadTitle') - ) + this.infoToast(success, { + title: this.$t('pageFirmware.toast.successUploadTitle'), + }) ) .catch(({ message }) => { this.errorToast(message); @@ -312,10 +311,9 @@ export default { this.$store .dispatch('firmware/uploadFirmwareTFTP', data) .then((success) => - this.infoToast( - success, - this.$t('pageFirmware.toast.successUploadTitle') - ) + this.infoToast(success, { + title: this.$t('pageFirmware.toast.successUploadTitle'), + }) ) .catch(({ message }) => { this.errorToast(message); @@ -327,7 +325,7 @@ export default { this.$store .dispatch('firmware/switchBmcFirmware') .then((success) => - this.infoToast(success, this.$t('global.status.success')) + this.infoToast(success, { title: this.$t('global.status.success') }) ) .catch(({ message }) => { this.errorToast(message); @@ -342,7 +340,10 @@ export default { this.endLoader(); this.infoToast( this.$t('pageFirmware.toast.infoRefreshApplicationMessage'), - this.$t('pageFirmware.toast.infoRefreshApplicationTitle') + { + title: this.$t('pageFirmware.toast.infoRefreshApplicationTitle'), + refreshAction: true, + } ); }, timeoutMs); }, -- cgit v1.2.3