diff options
Diffstat (limited to 'src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue')
| -rw-r--r-- | src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue | 370 |
1 files changed, 194 insertions, 176 deletions
diff --git a/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue b/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue index 9e030837..f2fb62e2 100644 --- a/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue +++ b/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue @@ -1,147 +1,192 @@ <template> - <b-container fluid="xl"> + <b-container fluid="xxl pt-0 m-0"> <page-title /> - <b-row class="mb-4"> - <b-col md="8" xl="6"> - <page-section - :section-title="$t('pageServerPowerOperations.currentStatus')" - > - <b-row> - <b-col> - <dl> - <dt>{{ $t('pageServerPowerOperations.serverStatus') }}</dt> - <dd - v-if="serverStatus === 'on'" - data-test-id="powerServerOps-text-hostStatus" - > - {{ $t('global.status.on') }} - </dd> - <dd - v-else-if="serverStatus === 'off'" - data-test-id="powerServerOps-text-hostStatus" - > - {{ $t('global.status.off') }} - </dd> - <dd v-else> - {{ $t('global.status.notAvailable') }} - </dd> - </dl> - </b-col> - </b-row> - <b-row> - <b-col> - <dl> - <dt> - {{ $t('pageServerPowerOperations.lastPowerOperation') }} - </dt> - <dd - v-if="lastPowerOperationTime" - data-test-id="powerServerOps-text-lastPowerOp" - > - {{ lastPowerOperationTime | formatDate }} - {{ lastPowerOperationTime | formatTime }} - </dd> - <dd v-else>--</dd> - </dl> - </b-col> - </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> - <b-col sm="8" md="6" xl="7"> - <page-section - :section-title="$t('pageServerPowerOperations.operations')" - > - <alert :show="oneTimeBootEnabled" variant="warning"> - {{ $t('pageServerPowerOperations.oneTimeBootWarning') }} - </alert> - <template v-if="isOperationInProgress"> - <alert variant="info"> - {{ $t('pageServerPowerOperations.operationInProgress') }} + <div class="main-container"> + <b-row class="m-2"> + <b-col md="8" xl="6"> + <page-section class="m-2 pt-2 pb-2"> + <b-row> + <b-col> + <dl> + <dt class="semi-bold-16px"> + {{ $t('pageServerPowerOperations.serverStatus') }} + </dt> + <dd + v-if="serverStatus === 'on'" + style="margin-top: 10px" + class="regular-12px" + data-test-id="powerServerOps-text-hostStatus" + > + <img + style="margin-right: 5px" + src="@/assets/images/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" + > + <img + style="margin-right: 5px" + src="@/assets/images/status/off.svg" + /> + {{ $t('global.status.off_full') }} + </dd> + <dd v-else class="regular-12px"> + {{ $t('global.status.notAvailable') }} + </dd> + </dl> + </b-col> + </b-row> + <b-row> + <b-col> + <dl> + <dt class="semi-bold-12px"> + {{ $t('pageServerPowerOperations.lastPowerOperation') }} + </dt> + <dd + v-if="lastPowerOperationTime" + class="regular-12px" + data-test-id="powerServerOps-text-lastPowerOp" + > + {{ lastPowerOperationTime | formatDate }} + {{ lastPowerOperationTime | formatTime }} + </dd> + <dd v-else>--</dd> + </dl> + </b-col> + </b-row> + </page-section> + </b-col> + </b-row> + <b-row class="m-2"> + <b-col sm="8" md="6" xl="7"> + <page-section class="m-2"> + <b-row class="ml-0 mb-3"> + <span class="semi-bold-16px">{{ 'Управление' }}</span> + </b-row> + <alert :show="oneTimeBootEnabled" variant="warning"> + {{ $t('pageServerPowerOperations.oneTimeBootWarning') }} </alert> - </template> - <template v-else-if="serverStatus === 'off'"> - <b-button - variant="primary" - data-test-id="serverPowerOperations-button-powerOn" - @click="powerOn" - > - {{ $t('pageServerPowerOperations.powerOn') }} - </b-button> - </template> - <template v-else> - <!-- Reboot server options --> - <b-form novalidate class="mb-5" @submit.prevent="rebootServer"> - <b-form-group - :label="$t('pageServerPowerOperations.rebootServer')" + <template v-if="isOperationInProgress"> + <alert variant="info"> + {{ $t('pageServerPowerOperations.operationInProgress') }} + </alert> + </template> + <template v-else-if="serverStatus === 'off'"> + <popover-with-slot + id="popover-powerOn" + :button-label="$t('pageServerPowerOperations.powerOn')" + :popup-label="$t('pageServerPowerOperations.powerOnServer')" + placement="right" + :action="powerOn" > - <b-form-radio - v-model="form.rebootOption" - name="reboot-option" - data-test-id="serverPowerOperations-radio-rebootOrderly" - value="orderly" + <b-button + id="popover-powerOn" + ref="button" + size="md" + variant="primary" > - {{ $t('pageServerPowerOperations.orderlyReboot') }} - </b-form-radio> - <b-form-radio - v-model="form.rebootOption" - name="reboot-option" - data-test-id="serverPowerOperations-radio-rebootImmediate" - value="immediate" - > - {{ $t('pageServerPowerOperations.immediateReboot') }} - </b-form-radio> - </b-form-group> - <b-button - variant="primary" - type="submit" - data-test-id="serverPowerOperations-button-reboot" - > - {{ $t('pageServerPowerOperations.reboot') }} - </b-button> - </b-form> - <!-- Shutdown server options --> - <b-form novalidate @submit.prevent="shutdownServer"> - <b-form-group - :label="$t('pageServerPowerOperations.shutdownServer')" - > - <b-form-radio - v-model="form.shutdownOption" - name="shutdown-option" - data-test-id="serverPowerOperations-radio-shutdownOrderly" - value="orderly" + {{ $t('pageServerPowerOperations.powerOn') }} + </b-button> + </popover-with-slot> + </template> + <template v-else> + <!-- Reboot server options --> + <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" + data-test-id="serverPowerOperations-radio-rebootOrderly" + value="orderly" + > + {{ $t('pageServerPowerOperations.orderlyReboot') }} + </b-form-radio> + <b-form-radio + v-model="form.rebootOption" + name="reboot-option" + data-test-id="serverPowerOperations-radio-rebootImmediate" + value="immediate" + > + {{ $t('pageServerPowerOperations.immediateReboot') }} + </b-form-radio> + </b-form-group> + <popover-with-slot + id="popover-reboot" + :button-label="$t('pageServerPowerOperations.reboot')" + :popup-label="$t('pageServerPowerOperations.rebootServer')" + placement="right" + :action="rebootServer" > - {{ $t('pageServerPowerOperations.orderlyShutdown') }} - </b-form-radio> - <b-form-radio - v-model="form.shutdownOption" - name="shutdown-option" - data-test-id="serverPowerOperations-radio-shutdownImmediate" - value="immediate" + <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> + <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" + data-test-id="serverPowerOperations-radio-shutdownOrderly" + value="orderly" + > + {{ $t('pageServerPowerOperations.orderlyShutdown') }} + </b-form-radio> + <b-form-radio + v-model="form.shutdownOption" + name="shutdown-option" + data-test-id="serverPowerOperations-radio-shutdownImmediate" + value="immediate" + > + {{ $t('pageServerPowerOperations.immediateShutdown') }} + </b-form-radio> + </b-form-group> + <popover-with-slot + id="popover-shutDown" + :button-label="$t('pageServerPowerOperations.shutDown')" + :popup-label="$t('pageServerPowerOperations.shutdownServer')" + placement="right" + :action="shutdownServer" > - {{ $t('pageServerPowerOperations.immediateShutdown') }} - </b-form-radio> - </b-form-group> - <b-button - variant="primary" - type="submit" - data-test-id="serverPowerOperations-button-shutDown" - > - {{ $t('pageServerPowerOperations.shutDown') }} - </b-button> - </b-form> - </template> - </page-section> - </b-col> - </b-row> + <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> + <b-row> + <b-col v-if="hasBootSourceOptions" class="m-2" sm="8" md="6" xl="4"> + <page-section class="m-2"> + <boot-settings /> + </page-section> + </b-col> + </b-row> + </div> </b-container> </template> @@ -152,10 +197,17 @@ import BVToastMixin from '@/components/Mixins/BVToastMixin'; import BootSettings from './BootSettings'; import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin'; import Alert from '@/components/Global/Alert'; +import PopoverWithSlot from '@/components/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 +259,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'); } }, }, |