diff options
Diffstat (limited to 'src/views/_sila/Operations/ServerPowerOperations/ServerPowerOperations.vue')
| -rw-r--r-- | src/views/_sila/Operations/ServerPowerOperations/ServerPowerOperations.vue | 193 |
1 files changed, 105 insertions, 88 deletions
diff --git a/src/views/_sila/Operations/ServerPowerOperations/ServerPowerOperations.vue b/src/views/_sila/Operations/ServerPowerOperations/ServerPowerOperations.vue index e848215f..1ba90b83 100644 --- a/src/views/_sila/Operations/ServerPowerOperations/ServerPowerOperations.vue +++ b/src/views/_sila/Operations/ServerPowerOperations/ServerPowerOperations.vue @@ -1,28 +1,40 @@ <template> - <b-container fluid="xl"> + <b-container fluid="xxl pt-0 m-0"> <page-title /> - <b-row class="mb-4"> + <page-section + :section-title="$t('pageServerPowerOperations.serverStatus')" + class="m-4" + > <b-col md="8" xl="6"> - <page-section - :section-title="$t('pageServerPowerOperations.currentStatus')" - > + <page-section class="pt-2 mb-0"> <b-row> <b-col> <dl> - <dt>{{ $t('pageServerPowerOperations.serverStatus') }}</dt> <dd v-if="serverStatus === 'on'" + style="margin-top: 10px" + class="regular-12px" data-test-id="powerServerOps-text-hostStatus" > - {{ $t('global.status.on') }} + <img + style="margin-right: 5px" + src="@/assets/images/_sila/status/on.svg" + /> + {{ $t('global.status.on_full') }} </dd> <dd v-else-if="serverStatus === 'off'" + style="margin-top: 10px" + class="regular-12px" data-test-id="powerServerOps-text-hostStatus" > - {{ $t('global.status.off') }} + <img + style="margin-right: 5px" + src="@/assets/images/_sila/status/off.svg" + /> + {{ $t('global.status.off_full') }} </dd> - <dd v-else> + <dd v-else class="regular-12px"> {{ $t('global.status.notAvailable') }} </dd> </dl> @@ -31,11 +43,12 @@ <b-row> <b-col> <dl> - <dt> + <dt class="semi-bold-12px"> {{ $t('pageServerPowerOperations.lastPowerOperation') }} </dt> <dd v-if="lastPowerOperationTime" + class="regular-12px" data-test-id="powerServerOps-text-lastPowerOp" > {{ lastPowerOperationTime | formatDate }} @@ -47,19 +60,13 @@ </b-row> </page-section> </b-col> - </b-row> - <b-row> - <b-col v-if="hasBootSourceOptions" sm="8" md="6" xl="4"> - <page-section - :section-title="$t('pageServerPowerOperations.serverBootSettings')" - > - <boot-settings /> - </page-section> - </b-col> + </page-section> + <page-section + :section-title="$t('SystemDescription.title.Control')" + class="ml-4 mb-0" + > <b-col sm="8" md="6" xl="7"> - <page-section - :section-title="$t('pageServerPowerOperations.operations')" - > + <page-section> <alert :show="oneTimeBootEnabled" variant="warning"> {{ $t('pageServerPowerOperations.oneTimeBootWarning') }} </alert> @@ -69,20 +76,30 @@ </alert> </template> <template v-else-if="serverStatus === 'off'"> - <b-button - variant="primary" - data-test-id="serverPowerOperations-button-powerOn" - @click="powerOn" + <popover-with-slot + id="popover-powerOn" + :button-label="$t('pageServerPowerOperations.powerOn')" + :popup-label="$t('pageServerPowerOperations.powerOnServer')" + placement="right" + :action="powerOn" > - {{ $t('pageServerPowerOperations.powerOn') }} - </b-button> + <b-button + id="popover-powerOn" + ref="button" + size="md" + variant="primary" + > + {{ $t('pageServerPowerOperations.powerOn') }} + </b-button> + </popover-with-slot> </template> <template v-else> <!-- Reboot server options --> - <b-form novalidate class="mb-5" @submit.prevent="rebootServer"> - <b-form-group - :label="$t('pageServerPowerOperations.rebootServer')" - > + <b-form novalidate class="mb-2"> + <b-form-group class="regular-12px cb"> + <label class="semi-bold-12px">{{ + $t('pageServerPowerOperations.rebootServer') + }}</label> <b-form-radio v-model="form.rebootOption" name="reboot-option" @@ -100,19 +117,29 @@ {{ $t('pageServerPowerOperations.immediateReboot') }} </b-form-radio> </b-form-group> - <b-button - variant="primary" - type="submit" - data-test-id="serverPowerOperations-button-reboot" + <popover-with-slot + id="popover-reboot" + :button-label="$t('pageServerPowerOperations.reboot')" + :popup-label="$t('pageServerPowerOperations.rebootServer')" + placement="right" + :action="rebootServer" > - {{ $t('pageServerPowerOperations.reboot') }} - </b-button> + <b-button + id="popover-reboot" + ref="button" + size="md" + variant="primary" + > + {{ $t('pageServerPowerOperations.reboot') }} + </b-button> + </popover-with-slot> </b-form> <!-- Shutdown server options --> - <b-form novalidate @submit.prevent="shutdownServer"> - <b-form-group - :label="$t('pageServerPowerOperations.shutdownServer')" - > + <b-form> + <b-form-group class="regular-12px cb"> + <label class="semi-bold-12px">{{ + $t('pageServerPowerOperations.shutdownServer') + }}</label> <b-form-radio v-model="form.shutdownOption" name="shutdown-option" @@ -130,18 +157,35 @@ {{ $t('pageServerPowerOperations.immediateShutdown') }} </b-form-radio> </b-form-group> - <b-button - variant="primary" - type="submit" - data-test-id="serverPowerOperations-button-shutDown" + <popover-with-slot + id="popover-shutDown" + :button-label="$t('pageServerPowerOperations.shutDown')" + :popup-label="$t('pageServerPowerOperations.shutdownServer')" + placement="right" + :action="shutdownServer" > - {{ $t('pageServerPowerOperations.shutDown') }} - </b-button> + <b-button + id="popover-shutDown" + ref="button" + size="md" + variant="secondary" + > + {{ $t('pageServerPowerOperations.shutDown') }} + </b-button> + </popover-with-slot> </b-form> </template> </page-section> </b-col> - </b-row> + </page-section> + <page-section + :section-title="$t('pageServerPowerOperations.serverBootSettings')" + class="m-4" + > + <b-col v-if="hasBootSourceOptions" sm="8" md="6" xl="4"> + <boot-settings /> + </b-col> + </page-section> </b-container> </template> @@ -152,10 +196,17 @@ import BVToastMixin from '@/components/_sila/Mixins/BVToastMixin'; import BootSettings from './BootSettings'; import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin'; import Alert from '@/components/_sila/Global/Alert'; +import PopoverWithSlot from '@/components/_sila/Global/SilaComponents/PopoverWithSlot'; export default { name: 'ServerPowerOperations', - components: { PageTitle, PageSection, BootSettings, Alert }, + components: { + PageTitle, + PageSection, + BootSettings, + Alert, + PopoverWithSlot, + }, mixins: [BVToastMixin, LoadingBarMixin], beforeRouteLeave(to, from, next) { this.hideLoader(); @@ -207,52 +258,18 @@ export default { this.$store.dispatch('controls/serverPowerOn'); }, rebootServer() { - const modalMessage = this.$t( - 'pageServerPowerOperations.modal.confirmRebootMessage' - ); - const modalOptions = { - title: this.$t('pageServerPowerOperations.modal.confirmRebootTitle'), - okTitle: this.$t('global.action.confirm'), - cancelTitle: this.$t('global.action.cancel'), - }; - if (this.form.rebootOption === 'orderly') { - this.$bvModal - .msgBoxConfirm(modalMessage, modalOptions) - .then((confirmed) => { - if (confirmed) this.$store.dispatch('controls/serverSoftReboot'); - }); + this.$store.dispatch('controls/serverSoftReboot'); } else if (this.form.rebootOption === 'immediate') { - this.$bvModal - .msgBoxConfirm(modalMessage, modalOptions) - .then((confirmed) => { - if (confirmed) this.$store.dispatch('controls/serverHardReboot'); - }); + this.$store.dispatch('controls/serverHardReboot'); } }, shutdownServer() { - const modalMessage = this.$t( - 'pageServerPowerOperations.modal.confirmShutdownMessage' - ); - const modalOptions = { - title: this.$t('pageServerPowerOperations.modal.confirmShutdownTitle'), - okTitle: this.$t('global.action.confirm'), - cancelTitle: this.$t('global.action.cancel'), - }; - if (this.form.shutdownOption === 'orderly') { - this.$bvModal - .msgBoxConfirm(modalMessage, modalOptions) - .then((confirmed) => { - if (confirmed) this.$store.dispatch('controls/serverSoftPowerOff'); - }); + this.$store.dispatch('controls/serverSoftPowerOff'); } if (this.form.shutdownOption === 'immediate') { - this.$bvModal - .msgBoxConfirm(modalMessage, modalOptions) - .then((confirmed) => { - if (confirmed) this.$store.dispatch('controls/serverHardPowerOff'); - }); + this.$store.dispatch('controls/serverHardPowerOff'); } }, }, |