diff options
Diffstat (limited to 'src/views/_sila/Operations')
17 files changed, 430 insertions, 191 deletions
diff --git a/src/views/_sila/Operations/ConsoleSettings/ConsoleSettings.vue b/src/views/_sila/Operations/ConsoleSettings/ConsoleSettings.vue new file mode 100644 index 00000000..ecc2150f --- /dev/null +++ b/src/views/_sila/Operations/ConsoleSettings/ConsoleSettings.vue @@ -0,0 +1,154 @@ +<template> + <b-container + :style="{ display: 'flex', 'flex-direction': 'column' }" + fluid="xxl pt-0 m-0" + > + <page-title /> + <page-section class="bootstrap-table__section"> + <b-table + responsive="md" + show-empty + class="table-rounded" + no-border-collapse + :items="systems" + :fields="fields" + :empty-text="$t('global.table.emptyMessage')" + > + <template #cell(value)="data"> + <b-row v-if="typeof data.value === 'boolean'"> + <b-col> + <span v-if="systems[data.index].value"> + {{ $t('global.status.enabled') }} + </span> + <span v-else> + {{ $t('global.status.disabled') }} + </span> + </b-col> + <b-col> + <b-form-checkbox v-model="systems[data.index].value" switch> + </b-form-checkbox> + </b-col> + </b-row> + <b-row + v-else-if="data.index === 1 || data.index === 6 || data.index === 8" + > + <b-col> + <span> + {{ data.value }} + </span> + </b-col> + <b-col> + <img :is="iconChevron" class="icon-chevron" /> + </b-col> + </b-row> + <b-row v-else-if="data.index === 3"> + <b-col> + <span> + {{ data.value }} + </span> + </b-col> + <b-col> + <img src="@/assets/images/icon-edit.svg" class="icon-chevron" /> + </b-col> + </b-row> + <b-row v-else> + <span>{{ data.value }}</span></b-row + > + </template> + </b-table> + <div class="save-button"> + <b-button variant="primary" class="console-settings__save-button"> + {{ $t('global.action.saveChanges') }} + </b-button> + </div> + </page-section> + </b-container> +</template> + +<script> +import PageTitle from '@/components/Global/PageTitle'; +import PageSection from '@/components/Global/PageSection'; +import BVToastMixin from '@/components/Mixins/BVToastMixin'; +import TableRowExpandMixin, { + expandRowLabel, +} from '@/components/Mixins/TableRowExpandMixin'; +import iconChevron from '@carbon/icons-vue/es/chevron--down/16'; + +export default { + components: { + PageTitle, + PageSection, + }, + mixins: [BVToastMixin, TableRowExpandMixin], + data() { + return { + text: '', + isBusy: true, + fields: [ + { + key: 'attributes', + label: 'Атрибуты', + formatter: this.dataFormatter, + }, + { + key: 'value', + label: 'Значение', + formatter: this.dataFormatter, + thStyle: { width: '30%' }, + }, + ], + iconChevron, + expandRowLabel: expandRowLabel, + systems: [ + { attributes: 'Состояние', value: true }, + { attributes: 'Максимальное количество сеансов', value: '6' }, + { attributes: 'Активные сеансы', value: '0' }, + { attributes: 'Порт удаленного доступа', value: '5900' }, + { attributes: 'Статус шифрования видео', value: true }, + { attributes: 'Видео с локального сервера', value: true }, + { + attributes: + 'Действие по умолчанию при истечении времени ожидания запроса на общий доступ к сеансу', + value: 'Полный доступ', + }, + { + attributes: 'Автоматическая блокировка системы', + value: false, + }, + { + attributes: 'Состояние подключения клавиатуры/мыши', + value: 'Автоматическое', + }, + ], + // iconChevronUp: iconChevronUp, + }; + }, +}; +</script> +<style lang="scss" scoped> +.row { + margin: 0px; + height: 15px; + flex-wrap: nowrap; + align-items: center; +} +.col { + padding: 0; +} + +.icon-chevron { + margin: 0 0 0 85%; + cursor: pointer; +} + +.save-button { + display: flex; + justify-content: flex-end; +} + +.console-settings__save-button { + width: 241px; + height: 36px; + margin-right: 0.5rem; +} +</style> diff --git a/src/views/_sila/Operations/ConsoleSettings/index.js b/src/views/_sila/Operations/ConsoleSettings/index.js new file mode 100644 index 00000000..860ee595 --- /dev/null +++ b/src/views/_sila/Operations/ConsoleSettings/index.js @@ -0,0 +1,2 @@ +import ConsoleSettings from './ConsoleSettings.vue'; +export default ConsoleSettings; diff --git a/src/views/_sila/Operations/FactoryReset/FactoryReset.vue b/src/views/_sila/Operations/FactoryReset/FactoryReset.vue index 4e315619..d1ab187e 100644 --- a/src/views/_sila/Operations/FactoryReset/FactoryReset.vue +++ b/src/views/_sila/Operations/FactoryReset/FactoryReset.vue @@ -1,12 +1,19 @@ <template> - <b-container fluid="xl"> + <b-container fluid class="m-0 p-0"> <page-title :description="$t('pageFactoryReset.description')" /> <!-- Reset Form --> - <b-form id="factory-reset" @submit.prevent="onResetSubmit"> + <b-form + id="factory-reset" + class="bootstrap-table__section" + @submit.prevent="onResetSubmit" + > <b-row> <b-col md="8"> - <b-form-group :label="$t('pageFactoryReset.form.resetOptionsLabel')"> + <b-form-group + :label="$t('pageFactoryReset.form.resetOptionsLabel')" + label-class="semi-bold-16px" + > <b-form-radio-group id="factory-reset-options" v-model="resetOption" diff --git a/src/views/_sila/Operations/Firmware/Firmware.vue b/src/views/_sila/Operations/Firmware/Firmware.vue index 0497376d..c4006b7f 100644 --- a/src/views/_sila/Operations/Firmware/Firmware.vue +++ b/src/views/_sila/Operations/Firmware/Firmware.vue @@ -1,5 +1,5 @@ <template> - <b-container fluid="xl"> + <b-container fluid class="m-0 p-0"> <page-title /> <alerts-server-power v-if="isServerPowerOffRequired" @@ -7,7 +7,7 @@ /> <!-- Firmware cards --> - <b-row> + <b-row class="bootstrap-table__section"> <b-col xl="10"> <!-- BMC Firmware --> <bmc-cards :is-page-disabled="isPageDisabled" /> @@ -19,6 +19,7 @@ <!-- Update firmware--> <page-section + class="bootstrap-table__section" :section-title="$t('pageFirmware.sectionTitleUpdateFirmware')" > <b-row> @@ -39,12 +40,10 @@ import AlertsServerPower from './FirmwareAlertServerPower'; import BmcCards from './FirmwareCardsBmc'; import FormUpdate from './FirmwareFormUpdate'; import HostCards from './FirmwareCardsHost'; -import PageSection from '@/components/_sila/Global/PageSection'; -import PageTitle from '@/components/_sila/Global/PageTitle'; +import PageSection from '@/components/Global/PageSection'; +import PageTitle from '@/components/Global/PageTitle'; -import LoadingBarMixin, { - loading, -} from '@/components/_sila/Mixins/LoadingBarMixin'; +import LoadingBarMixin, { loading } from '@/components/Mixins/LoadingBarMixin'; export default { name: 'FirmwareSingleImage', diff --git a/src/views/_sila/Operations/Firmware/FirmwareAlertServerPower.vue b/src/views/_sila/Operations/Firmware/FirmwareAlertServerPower.vue index 471ccfac..24aa1d69 100644 --- a/src/views/_sila/Operations/Firmware/FirmwareAlertServerPower.vue +++ b/src/views/_sila/Operations/Firmware/FirmwareAlertServerPower.vue @@ -31,7 +31,7 @@ </template> <script> -import Alert from '@/components/_sila/Global/Alert'; +import Alert from '@/components/Global/Alert'; export default { components: { Alert }, diff --git a/src/views/_sila/Operations/Firmware/FirmwareCardsBmc.vue b/src/views/_sila/Operations/Firmware/FirmwareCardsBmc.vue index 23c263d9..d79a8769 100644 --- a/src/views/_sila/Operations/Firmware/FirmwareCardsBmc.vue +++ b/src/views/_sila/Operations/Firmware/FirmwareCardsBmc.vue @@ -53,11 +53,9 @@ <script> import IconSwitch from '@carbon/icons-vue/es/arrows--horizontal/20'; -import PageSection from '@/components/_sila/Global/PageSection'; -import LoadingBarMixin, { - loading, -} from '@/components/_sila/Mixins/LoadingBarMixin'; -import BVToastMixin from '@/components/_sila/Mixins/BVToastMixin'; +import PageSection from '@/components/Global/PageSection'; +import LoadingBarMixin, { loading } from '@/components/Mixins/LoadingBarMixin'; +import BVToastMixin from '@/components/Mixins/BVToastMixin'; import ModalSwitchToRunning from './FirmwareModalSwitchToRunning'; diff --git a/src/views/_sila/Operations/Firmware/FirmwareCardsHost.vue b/src/views/_sila/Operations/Firmware/FirmwareCardsHost.vue index 03a25ee5..b4a8e90d 100644 --- a/src/views/_sila/Operations/Firmware/FirmwareCardsHost.vue +++ b/src/views/_sila/Operations/Firmware/FirmwareCardsHost.vue @@ -37,7 +37,7 @@ </template> <script> -import PageSection from '@/components/_sila/Global/PageSection'; +import PageSection from '@/components/Global/PageSection'; export default { components: { PageSection }, diff --git a/src/views/_sila/Operations/Firmware/FirmwareFormUpdate.vue b/src/views/_sila/Operations/Firmware/FirmwareFormUpdate.vue index 23fe90f2..a5e5ba97 100644 --- a/src/views/_sila/Operations/Firmware/FirmwareFormUpdate.vue +++ b/src/views/_sila/Operations/Firmware/FirmwareFormUpdate.vue @@ -59,6 +59,7 @@ <b-btn data-test-id="firmware-button-startUpdate" type="submit" + size="md" variant="primary" :disabled="isPageDisabled" > @@ -75,13 +76,11 @@ <script> import { requiredIf } from 'vuelidate/lib/validators'; -import BVToastMixin from '@/components/_sila/Mixins/BVToastMixin'; -import LoadingBarMixin, { - loading, -} from '@/components/_sila/Mixins/LoadingBarMixin'; -import VuelidateMixin from '@/components/_sila/Mixins/VuelidateMixin.js'; +import BVToastMixin from '@/components/Mixins/BVToastMixin'; +import LoadingBarMixin, { loading } from '@/components/Mixins/LoadingBarMixin'; +import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js'; -import FormFile from '@/components/_sila/Global/FormFile'; +import FormFile from '@/components/Global/FormFile'; import ModalUpdateFirmware from './FirmwareModalUpdateFirmware'; export default { diff --git a/src/views/_sila/Operations/KeyClear/KeyClear.vue b/src/views/_sila/Operations/KeyClear/KeyClear.vue index 8955f6cd..fd6468fa 100644 --- a/src/views/_sila/Operations/KeyClear/KeyClear.vue +++ b/src/views/_sila/Operations/KeyClear/KeyClear.vue @@ -1,9 +1,9 @@ <template> - <b-container fluid="xl"> + <b-container fluid class="m-0 p-0"> <page-title :description="$t('pageKeyClear.description')" /> - <b-row> + <b-row class="bootstrap-table__section"> <b-col md="8" xl="6"> - <alert variant="info" class="mb-4"> + <alert variant="info" class="mb-0"> <div class="font-weight-bold"> {{ $t('pageKeyClear.alert.title') }} </div> @@ -14,10 +14,17 @@ </b-col> </b-row> <!-- Reset Form --> - <b-form id="key-clear" @submit.prevent="onKeyClearSubmit(keyOption)"> + <b-form + id="key-clear" + class="bootstrap-table__section" + @submit.prevent="onKeyClearSubmit(keyOption)" + > <b-row> <b-col md="8"> - <b-form-group :label="$t('pageKeyClear.form.keyClearOptionsLabel')"> + <b-form-group + :label="$t('pageKeyClear.form.keyClearOptionsLabel')" + label-class="semi-bold-16px" + > <b-form-radio-group id="key-clear-options" v-model="keyOption" diff --git a/src/views/_sila/Operations/Kvm/Kvm.vue b/src/views/_sila/Operations/Kvm/Kvm.vue index ede24608..a3103453 100644 --- a/src/views/_sila/Operations/Kvm/Kvm.vue +++ b/src/views/_sila/Operations/Kvm/Kvm.vue @@ -1,5 +1,5 @@ <template> - <b-container fluid="xl"> + <b-container fluid> <page-title /> <div class="terminal-container"> <kvm-console :is-full-window="false" /> @@ -8,7 +8,7 @@ </template> <script> -import PageTitle from '@/components/_sila/Global/PageTitle'; +import PageTitle from '@/components/Global/PageTitle'; import KvmConsole from './KvmConsole'; export default { diff --git a/src/views/_sila/Operations/Kvm/KvmConsole.vue b/src/views/_sila/Operations/Kvm/KvmConsole.vue index 50cbff7f..d06e2824 100644 --- a/src/views/_sila/Operations/Kvm/KvmConsole.vue +++ b/src/views/_sila/Operations/Kvm/KvmConsole.vue @@ -1,8 +1,12 @@ <template> <div :class="marginClass"> <div ref="toolbar" class="kvm-toolbar"> - <b-row class="d-flex"> - <b-col class="d-flex flex-column justify-content-end" cols="4"> + <b-row class="d-flex flex-column flex-sm-row"> + <b-col + class="d-flex flex-column justify-content-end console-title" + style="min-width: 105px" + cols="3" + > <dl class="mb-2" sm="2" md="2"> <dt class="d-inline font-weight-bold mr-1"> {{ $t('pageKvm.status') }}: @@ -14,9 +18,10 @@ </dl> </b-col> - <b-col class="d-flex justify-content-end pr-1"> + <b-col class="d-flex justify-content-end pr-1 flex-column flex-sm-row"> <b-button v-if="isConnected" + class="console-title console-button" variant="link" type="button" @click="sendCtrlAltDel" @@ -26,6 +31,7 @@ </b-button> <b-button v-if="!isFullWindow" + class="console-title console-button" variant="link" type="button" @click="openConsoleWindow()" @@ -42,7 +48,7 @@ <script> import RFB from '@novnc/novnc/core/rfb'; -import StatusIcon from '@/components/_sila/Global/StatusIcon'; +import StatusIcon from '@/components/Global/StatusIcon'; import IconLaunch from '@carbon/icons-vue/es/launch/20'; import IconArrowDown from '@carbon/icons-vue/es/arrow--down/16'; import { throttle } from 'lodash'; @@ -167,4 +173,16 @@ export default { .margin-left-full-window { margin-left: 5px; } + +@media (max-width: 1200px) { + .console-title { + font-size: 0.7rem; + } +} + +@media (max-width: 576px) { + .console-button { + justify-content: flex-end; + } +} </style> diff --git a/src/views/_sila/Operations/RebootBmc/RebootBmc.vue b/src/views/_sila/Operations/RebootBmc/RebootBmc.vue index fa16f55e..71b9b123 100644 --- a/src/views/_sila/Operations/RebootBmc/RebootBmc.vue +++ b/src/views/_sila/Operations/RebootBmc/RebootBmc.vue @@ -1,7 +1,7 @@ <template> - <b-container fluid="xl"> + <b-container fluid class="m-0 p-0"> <page-title /> - <b-row> + <b-row class="bootstrap-table__section"> <b-col md="8" lg="8" xl="6"> <page-section> <b-row> @@ -19,14 +19,22 @@ </b-col> </b-row> {{ $t('pageRebootBmc.rebootInformation') }} - <b-button - variant="primary" - class="d-block mt-5" - data-test-id="rebootBmc-button-reboot" - @click="onClick" + <popover-with-slot + id="popover-reboot" + :button-label="$t('global.action.reload')" + :popup-label="$t('BMC.ReloadBmc_popup')" + placement="left" + :action="rebootBmc" > - {{ $t('pageRebootBmc.rebootBmc') }} - </b-button> + <b-button + id="popover-reboot" + variant="primary" + class="d-block mt-5" + data-test-id="rebootBmc-button-reboot" + > + {{ $t('pageRebootBmc.rebootBmc') }} + </b-button> + </popover-with-slot> </page-section> </b-col> </b-row> @@ -38,10 +46,11 @@ import PageTitle from '@/components/_sila/Global/PageTitle'; import PageSection from '@/components/_sila/Global/PageSection'; import BVToastMixin from '@/components/_sila/Mixins/BVToastMixin'; import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin'; +import PopoverWithSlot from '@/components/_sila/Global/SilaComponents/PopoverWithSlot'; export default { name: 'RebootBmc', - components: { PageTitle, PageSection }, + components: { PageTitle, PageSection, PopoverWithSlot }, mixins: [BVToastMixin, LoadingBarMixin], beforeRouteLeave(to, from, next) { this.hideLoader(); @@ -59,17 +68,6 @@ export default { .finally(() => this.endLoader()); }, methods: { - onClick() { - this.$bvModal - .msgBoxConfirm(this.$t('pageRebootBmc.modal.confirmMessage'), { - title: this.$t('pageRebootBmc.modal.confirmTitle'), - okTitle: this.$t('global.action.confirm'), - cancelTitle: this.$t('global.action.cancel'), - }) - .then((confirmed) => { - if (confirmed) this.rebootBmc(); - }); - }, rebootBmc() { this.$store .dispatch('controls/rebootBmc') diff --git a/src/views/_sila/Operations/SerialOverLan/SerialOverLanConsole.vue b/src/views/_sila/Operations/SerialOverLan/SerialOverLanConsole.vue index bf974b51..2a9a2f4a 100644 --- a/src/views/_sila/Operations/SerialOverLan/SerialOverLanConsole.vue +++ b/src/views/_sila/Operations/SerialOverLan/SerialOverLanConsole.vue @@ -9,7 +9,7 @@ class="mt-4" > <p class="col-form-label"> - {{ $t('pageSerialOverLan.alert.disconnectedAlertMessage') }} + {{ $t('pageSerialOverLan.disconnectedAlertMessage') }} </p> </alert> </b-col> diff --git a/src/views/_sila/Operations/ServerPowerOperations/BootSettings.vue b/src/views/_sila/Operations/ServerPowerOperations/BootSettings.vue index 8d74e381..7f56c36a 100644 --- a/src/views/_sila/Operations/ServerPowerOperations/BootSettings.vue +++ b/src/views/_sila/Operations/ServerPowerOperations/BootSettings.vue @@ -1,16 +1,14 @@ <template> - <div class="form-background p-3"> + <page-section class="m-0"> <b-form novalidate @submit.prevent="handleSubmit"> - <b-form-group - :label=" + <b-form-group label-for="boot-option" class="mb-3 regular-12px"> + <label class="semi-bold-12px">{{ $t('pageServerPowerOperations.bootSettings.bootSettingsOverride') - " - label-for="boot-option" - class="mb-3" - > + }}</label> <b-form-select id="boot-option" v-model="form.bootOption" + class="boot-select regular-14px" :disabled="bootSourceOptions.length === 0" :options="bootSourceOptions" @change="onChangeSelect" @@ -19,43 +17,47 @@ </b-form-group> <b-form-checkbox v-model="form.oneTimeBoot" - class="mb-4" + class="mb-4 regular-12px cb" :disabled="form.bootOption === 'None'" @change="$v.form.oneTimeBoot.$touch()" > {{ $t('pageServerPowerOperations.bootSettings.enableOneTimeBoot') }} </b-form-checkbox> - <b-form-group - :label="$t('pageServerPowerOperations.bootSettings.tpmRequiredPolicy')" - > - <b-form-text id="tpm-required-policy-help-block"> + <b-form-group> + <label class="semi-bold-12px">{{ + $t('pageServerPowerOperations.bootSettings.tpmRequiredPolicy') + }}</label> + <label id="tpm-required-policy-help-block" class="regular-12px"> {{ $t('pageServerPowerOperations.bootSettings.tpmRequiredPolicyHelper') }} - </b-form-text> + </label> <b-form-checkbox id="tpm-required-policy" v-model="form.tpmPolicyOn" + class="regular-12px cb" aria-describedby="tpm-required-policy-help-block" @change="$v.form.tpmPolicyOn.$touch()" > {{ $t('global.status.enabled') }} </b-form-checkbox> </b-form-group> - <b-button variant="primary" type="submit" class="mb-3"> + <b-button variant="primary" size="md" type="submit" class="mb-3"> {{ $t('global.action.save') }} </b-button> </b-form> - </div> + </page-section> </template> <script> import { mapState } from 'vuex'; import BVToastMixin from '@/components/_sila/Mixins/BVToastMixin'; import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin'; +import PageSection from '@/components/_sila/Global/PageSection'; export default { name: 'BootSettings', + components: { PageSection }, mixins: [BVToastMixin, LoadingBarMixin], data() { return { @@ -130,3 +132,12 @@ export default { }, }; </script> +<style lang="scss" scoped> +.boot-select { + height: 40px; + max-width: 270px; + border: none; + border-radius: 8px; + background-image: url('../../../../assets/images/_sila/icon-chevron.svg'); +} +</style> 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'); } }, }, diff --git a/src/views/_sila/Operations/VirtualMedia/ModalConfigureConnection.vue b/src/views/_sila/Operations/VirtualMedia/ModalConfigureConnection.vue index 9886eff5..9ba90d57 100644 --- a/src/views/_sila/Operations/VirtualMedia/ModalConfigureConnection.vue +++ b/src/views/_sila/Operations/VirtualMedia/ModalConfigureConnection.vue @@ -9,14 +9,17 @@ <template #modal-title> {{ $t('pageVirtualMedia.modal.title') }} </template> - <b-form> + <b-form style="width: 100%"> <b-form-group - :label="$t('pageVirtualMedia.modal.serverUri')" + :label=" + $t('pageVirtualMedia.modal.serverUri') + ' (http, ftp, smb, nfs)' + " label-for="serverUri" > <b-form-input id="serverUri" v-model="form.serverUri" + placeholder="https://" type="text" :state="getValidationState($v.form.serverUri)" data-test-id="configureConnection-input-serverUri" @@ -43,12 +46,14 @@ :label="$t('pageVirtualMedia.modal.password')" label-for="password" > - <b-form-input - id="password" - v-model="form.password" - type="password" - data-test-id="configureConnection-input-password" - /> + <input-password-toggle> + <b-form-input + id="password" + v-model="form.password" + type="password" + data-test-id="configureConnection-input-password" + /> + </input-password-toggle> </b-form-group> <b-form-group> <b-form-checkbox @@ -72,8 +77,12 @@ <script> import { required } from 'vuelidate/lib/validators'; import VuelidateMixin from '@/components/_sila/Mixins/VuelidateMixin.js'; +import InputPasswordToggle from '@/components/_sila/Global/InputPasswordToggle'; export default { + components: { + InputPasswordToggle, + }, mixins: [VuelidateMixin], props: { connection: { diff --git a/src/views/_sila/Operations/VirtualMedia/VirtualMedia.vue b/src/views/_sila/Operations/VirtualMedia/VirtualMedia.vue index 0f75bbd7..e508e06f 100644 --- a/src/views/_sila/Operations/VirtualMedia/VirtualMedia.vue +++ b/src/views/_sila/Operations/VirtualMedia/VirtualMedia.vue @@ -1,14 +1,18 @@ <template> - <b-container fluid="xl"> + <b-container fluid class="m-0 p-0"> <page-title /> - <b-row class="mb-4"> + <b-row class="bootstrap-table__section"> <b-col md="12"> <page-section :section-title="$t('pageVirtualMedia.virtualMediaSubTitleFirst')" > <b-row> <b-col v-for="(dev, $index) in proxyDevices" :key="$index" md="6"> - <b-form-group :label="dev.id" label-class="bold"> + <b-form-group + :label="dev.id" + label-class="regular-14px" + :style="{ 'margin-bottom': dev.isActive ? '0' : '1rem' }" + > <form-file v-if="!dev.isActive" :id="concatId(dev.id)" @@ -21,8 +25,18 @@ </template> </form-file> </b-form-group> + + <div + v-if="dev.isActive && dev.file && dev.file.name" + class="clear-selected-file px-3" + :style="{ 'margin-bottom': '1rem' }" + > + {{ dev.file.name }} + </div> + <b-button v-if="!dev.isActive" + size="md" variant="primary" :disabled="!dev.file" @click="startVM(dev)" @@ -42,7 +56,7 @@ </page-section> </b-col> </b-row> - <b-row v-if="loadImageFromExternalServer" class="mb-4"> + <b-row v-if="loadImageFromExternalServer" class="bootstrap-table__section"> <b-col md="12"> <page-section :section-title="$t('pageVirtualMedia.virtualMediaSubTitleSecond')" @@ -56,34 +70,35 @@ <b-form-group :label="device.id" :label-for="device.id" - label-class="bold" + label-class="regular-14px" > <b-button variant="primary" + size="lg" :disabled="device.isActive" @click="configureConnection(device)" > {{ $t('pageVirtualMedia.configureConnection') }} </b-button> - - <b-button - v-if="!device.isActive" - variant="primary" - class="float-right" - :disabled="!device.serverUri" - @click="startLegacy(device)" - > - {{ $t('pageVirtualMedia.start') }} - </b-button> - <b-button - v-if="device.isActive" - variant="primary" - class="float-right" - @click="stopLegacy(device)" - > - {{ $t('pageVirtualMedia.stop') }} - </b-button> </b-form-group> + + <b-button + v-if="!device.isActive" + variant="primary" + size="md" + :disabled="!device.serverUri" + @click="startLegacy(device)" + > + {{ $t('pageVirtualMedia.start') }} + </b-button> + <b-button + v-if="device.isActive" + size="md" + variant="primary" + @click="stopLegacy(device)" + > + {{ $t('pageVirtualMedia.stop') }} + </b-button> </b-col> </b-row> </page-section> @@ -107,7 +122,12 @@ import FormFile from '@/components/_sila/Global/FormFile'; export default { name: 'VirtualMedia', - components: { PageTitle, PageSection, ModalConfigureConnection, FormFile }, + components: { + PageTitle, + PageSection, + ModalConfigureConnection, + FormFile, + }, mixins: [BVToastMixin, LoadingBarMixin], data() { return { |