diff options
Diffstat (limited to 'src/views/Operations')
-rw-r--r-- | src/views/Operations/Firmware/FirmwareFormUpdate.vue | 1 | ||||
-rw-r--r-- | src/views/Operations/Kvm/ImagesModal.vue | 296 | ||||
-rw-r--r-- | src/views/Operations/Kvm/Kvm.vue | 102 | ||||
-rw-r--r-- | src/views/Operations/RebootBmc/RebootBmc.vue | 36 | ||||
-rw-r--r-- | src/views/Operations/SerialOverLan/SerialOverLan.vue | 108 | ||||
-rw-r--r-- | src/views/Operations/SerialOverLan/SerialOverLanConsole.vue | 28 | ||||
-rw-r--r-- | src/views/Operations/ServerPowerOperations/BootSettings.vue | 9 | ||||
-rw-r--r-- | src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue | 37 | ||||
-rw-r--r-- | src/views/Operations/VirtualMedia/ModalConfigureConnection.vue | 20 | ||||
-rw-r--r-- | src/views/Operations/VirtualMedia/VirtualMedia.vue | 58 |
10 files changed, 115 insertions, 580 deletions
diff --git a/src/views/Operations/Firmware/FirmwareFormUpdate.vue b/src/views/Operations/Firmware/FirmwareFormUpdate.vue index ac4b23fc..a5e5ba97 100644 --- a/src/views/Operations/Firmware/FirmwareFormUpdate.vue +++ b/src/views/Operations/Firmware/FirmwareFormUpdate.vue @@ -59,6 +59,7 @@ <b-btn data-test-id="firmware-button-startUpdate" type="submit" + size="md" variant="primary" :disabled="isPageDisabled" > diff --git a/src/views/Operations/Kvm/ImagesModal.vue b/src/views/Operations/Kvm/ImagesModal.vue deleted file mode 100644 index ce4e6ebf..00000000 --- a/src/views/Operations/Kvm/ImagesModal.vue +++ /dev/null @@ -1,296 +0,0 @@ -<template> - <b-modal id="modal-images" class="modal-images" hide-footer> - <template #modal-title> - <div class="popup-title"> - <span class="semi-bold-20px">{{ $t('pageKvm.addImage_modal') }}</span> - </div> - </template> - <div class="popup-switch"> - <span - class="medium-16px popup-item" - :class="{ 'switch-active': isImportFromPC }" - @click="switchExport" - >{{ $t('pageKvm.fromPC') }}</span - > - <span - class="medium-16px popup-item" - :class="{ 'switch-active': !isImportFromPC }" - @click="switchImport" - >{{ $t('pageKvm.fromServer') }}</span - > - <div class="slider" /> - </div> - <div v-if="isImportFromPC" class="images-import_container"> - <b-form-file - id="images-import__file-input" - placeholder="Нажмите на область или перетащите в нее файл образа" - ></b-form-file> - </div> - <div v-else class="popup-body"> - <div class="connection-type-container"> - <span class="regular-12px tretiatry select-label" for="username">{{ - $t('pageKvm.urlAdress') - }}</span> - <b-form-select - v-model="connectionType" - :options="connectionTypes" - class="select-connection regular-14px" - /> - <label class="regular-12px tretiatry" for="username">{{ - $t('pageKvm.connectionType') - }}</label> - <b-form-input id="url" type="text" class="form-control url-input"> - </b-form-input> - <b-form-group> - <label class="regular-12px tretiatry" for="username">{{ - $t('pageLogin.username') - }}</label> - <b-form-input - id="username" - v-model="userInfo.username" - aria-describedby="login-error-alert username-required" - :state="getValidationState($v.userInfo.username)" - type="text" - data-test-id="login-input-username" - class="form-control image-username-input" - @input="$v.userInfo.username.$touch()" - > - </b-form-input> - <b-form-invalid-feedback id="username-required" role="alert"> - <template v-if="!$v.userInfo.username.required"> - {{ $t('global.form.fieldRequired') }} - </template> - </b-form-invalid-feedback> - </b-form-group> - - <b-form-group> - <input-password-toggle> - <label class="regular-12px tretiatry" for="password">{{ - $t('pageLogin.password') - }}</label> - <b-form-input - id="password" - v-model="userInfo.password" - aria-describedby="login-error-alert password-required" - :state="getValidationState($v.userInfo.password)" - type="password" - data-test-id="login-input-password" - class="form-control image-password-input" - @input="$v.userInfo.password.$touch()" - > - </b-form-input> - <b-form-invalid-feedback id="password-required" role="alert"> - <template v-if="!$v.userInfo.password.required"> - {{ $t('global.form.fieldRequired') }} - </template> - </b-form-invalid-feedback> - </input-password-toggle> - </b-form-group> - <b-button class="upload-button" variant="primary"> - {{ $t('pageKvm.upload') }} - </b-button> - </div> - </div> - </b-modal> -</template> -<script> -import { required } from 'vuelidate/lib/validators'; -import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js'; -import InputPasswordToggle from '@/components/Global/InputPasswordToggle'; - -export default { - components: { InputPasswordToggle }, - mixins: [VuelidateMixin], - data() { - return { - isImportFromPC: true, - userInfo: { - username: null, - password: null, - }, - connectionType: 1, - connectionTypes: [ - { - value: 1, - text: 'HTTPS', - }, - ], - }; - }, - validations: { - userInfo: { - username: { - required, - }, - password: { - required, - }, - }, - }, - methods: { - switchExport() { - this.isImportFromPC = true; - }, - switchImport() { - this.isImportFromPC = false; - }, - }, -}; -</script> -<style lang="scss"> -.modal-dialog { - margin: 25vh auto; -} -.modal-content { - border-radius: 16px; - width: 480px; -} -.modal-header { - border-bottom: none; -} - -.images-import_container > .custom-file { - width: 432px; - height: 357px; -} - -#images-import__file-input ~ .custom-file-label { - background-color: transparent; - border: 1px dashed rgba(12, 28, 41, 0.6); - box-sizing: border-box; - border-radius: 8px; - width: 432px; - height: 357px; - display: flex; - justify-content: center; - align-items: center; - text-align: center; - white-space: normal; - padding: 0 65px; -} - -#images-import__file-input ~ .custom-file-label::after { - display: none; -} -</style> -<style lang="scss" scoped> -.popup-switch { - position: relative; - display: flex; - flex-flow: row nowrap; - border-bottom: 1px solid #f3f4f5; - width: 100%; - height: 36px; -} - -.switch-active { - color: $red-brand-primary; - transition: ease-in 0.15s; -} - -.medium-16px { - margin-left: 20px; -} - -.slider { - position: absolute; - height: 0px; - border-bottom: 4px solid $red-brand-primary; - transition: ease-in 0.2s; - bottom: 0px; -} - -.popup-item:nth-child(1).switch-active ~ .slider { - width: 110px; - left: 21px; -} - -.popup-item:nth-child(2).switch-active ~ .slider { - left: 157px; - width: 82px; -} - -.popup-body { - margin: 24px 0 0 0; -} - -.images-import_container { - width: 478px; - height: 405px; - background-color: $surface-secondary; - margin: 0px 0px -16px -16px; - border-radius: 0 0 16px 16px; - - display: flex; - align-items: center; - justify-content: center; -} - -.image-username-input, -.image-password-input { - height: 56px; - margin: -30px 0 5px 0; - padding-top: 30px; - font-family: 'Inter', sans-serif; - font-size: 14px; - font-weight: 500; - line-height: 20px; - letter-spacing: 0em; -} - -.url-input { - height: 56px; - padding-top: 30px; - font-family: 'Inter', sans-serif; - font-size: 14px; - font-weight: 500; - line-height: 20px; - letter-spacing: 0em; - margin: -30px 0 20px 0; -} - -.connection-type-container { - width: 446px; -} - -.caption-12px { - padding-left: 10px; -} - -.text-input { - margin: 0 0 0 50px; - padding: 0 0 0 5px; -} - -.login-button { - height: 36px; - width: 380px; -} - -.select-connection { - height: 56px; - padding-top: 30px; - border: none; - border-radius: 8px; - margin: -0px 0 18px 0; - background-color: $surface-secondary; - background-image: url('../../../assets/images/icon-chevron.svg'); -} -.select-label { - position: absolute; - top: 84px; -} - -.form-background .custom-select, -.form-background .form-control { - border-radius: 8px; - border: none; - background-color: rgba(26, 62, 91, 0.05); -} - -.upload-button { - width: 100%; - height: 52px; - margin: 0 auto 10px; -} -</style> diff --git a/src/views/Operations/Kvm/Kvm.vue b/src/views/Operations/Kvm/Kvm.vue index 324d50d0..a3103453 100644 --- a/src/views/Operations/Kvm/Kvm.vue +++ b/src/views/Operations/Kvm/Kvm.vue @@ -1,114 +1,24 @@ <template> - <b-container fluid="xxl pt-0 m-0"> - <b-button - class="btn-primary semi-bold-16px images_add-image-button" - @click="$bvModal.show('modal-images')" - > - {{ $t('pageKvm.addImage') }}</b-button - > + <b-container fluid> <page-title /> - <div class="images"> - <div class="images_desc"> - <span class="regular-12px tretiatry">Подключенные образы:</span> - </div> - <div class="images-container"> - <div class="images-container_image"> - <img src="@/assets/images/console-images.svg" class="images-image" /> - <span class="semi-bold-12px">Win-11-2022</span> - <span class="light-12px">с носителя</span> - </div> - <div class="images-container_image"> - <img src="@/assets/images/console-images.svg" class="images-image" /> - <span class="semi-bold-12px">Win-10-2017</span> - <span class="light-12px">с сервера</span> - </div> - <div class="images-container_image"> - <img src="@/assets/images/console-images.svg" class="images-image" /> - <span class="semi-bold-12px">Win-7-2010</span> - <span class="light-12px">с сервера</span> - </div> - </div> + <div class="terminal-container"> + <kvm-console :is-full-window="false" /> </div> - <kvm-console :is-full-window="false" /> - <images-modal /> </b-container> </template> <script> import PageTitle from '@/components/Global/PageTitle'; -import ImagesModal from './ImagesModal'; import KvmConsole from './KvmConsole'; export default { name: 'Kvm', - components: { - PageTitle, - ImagesModal, - KvmConsole, - }, + components: { PageTitle, KvmConsole }, }; </script> -<style lang="scss" scoped> -.images_add-image-button { - position: absolute; - top: calc(#{$header-height}); - right: 0px; - border: none; - box-shadow: none; - background-color: $faint-secondary-primary-5; - color: $red-brand-primary; - border-radius: 8px; - margin: 12px 32px; - width: 236px; - height: 40px; - z-index: 1001; - &:active { - background-color: $faint-secondary-primary-5-hover !important; - color: $red-brand-primary-active !important; - border: none; - } - &:focus { - box-shadow: none !important; - } - &:focus-visible { - box-shadow: none !important; - } -} - -.images { - display: flex; - flex-flow: row wrap; - height: 144px; -} -.images_desc { - margin: 16px 0 16px 32px; +<style scoped> +.terminal-container { width: 100%; } - -.images-container { - display: flex; - flex-flow: row nowrap; - justify-content: flex-start; - align-items: center; - margin: 0 0 16px 32px; -} - -.images-container_image { - display: flex; - flex-flow: column nowrap; - justify-content: flex-start; - align-items: center; - margin-right: 24px; -} - -.images-image { - width: 40px; - height: 40px; - margin-bottom: 8px; -} - -.semi-bold-12px { - color: $text-primary; -} </style> diff --git a/src/views/Operations/RebootBmc/RebootBmc.vue b/src/views/Operations/RebootBmc/RebootBmc.vue index 900619cd..34b22151 100644 --- a/src/views/Operations/RebootBmc/RebootBmc.vue +++ b/src/views/Operations/RebootBmc/RebootBmc.vue @@ -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/Global/PageTitle'; import PageSection from '@/components/Global/PageSection'; import BVToastMixin from '@/components/Mixins/BVToastMixin'; import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin'; +import PopoverWithSlot from '@/components/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/Operations/SerialOverLan/SerialOverLan.vue b/src/views/Operations/SerialOverLan/SerialOverLan.vue index 33533bf9..48a68345 100644 --- a/src/views/Operations/SerialOverLan/SerialOverLan.vue +++ b/src/views/Operations/SerialOverLan/SerialOverLan.vue @@ -1,47 +1,10 @@ <template> - <b-container fluid="xxl pt-0 m-0"> - <page-title /> - <b-button - class="btn-primary semi-bold-16px images_add-image-button" - @click="$bvModal.show('modal-images')" - > - {{ $t('pageKvm.addImage') }}</b-button - > + <b-container fluid="xl"> + <page-title class="mb-4" :description="$t('pageSerialOverLan.subTitle')" /> + <page-section class="mb-0"> - <div class="images"> - <div class="images_desc"> - <span class="regular-12px tretiatry">Подключенные образы:</span> - </div> - <div class="images-container"> - <div class="images-container_image"> - <img - src="@/assets/images/console-images.svg" - class="images-image" - /> - <span class="semi-bold-12px">Win-11-2022</span> - <span class="light-12px">с носителя</span> - </div> - <div class="images-container_image"> - <img - src="@/assets/images/console-images.svg" - class="images-image" - /> - <span class="semi-bold-12px">Win-10-2017</span> - <span class="light-12px">с сервера</span> - </div> - <div class="images-container_image"> - <img - src="@/assets/images/console-images.svg" - class="images-image" - /> - <span class="semi-bold-12px">Win-7-2010</span> - <span class="light-12px">с сервера</span> - </div> - </div> - </div> <serial-over-lan-console :is-full-window="false" /> </page-section> - <images-modal /> </b-container> </template> @@ -49,78 +12,13 @@ import PageTitle from '@/components/Global/PageTitle'; import PageSection from '@/components/Global/PageSection'; import SerialOverLanConsole from './SerialOverLanConsole'; -import ImagesModal from '../Kvm/ImagesModal'; export default { name: 'SerialOverLan', components: { PageSection, PageTitle, - ImagesModal, SerialOverLanConsole, }, }; </script> -<style lang="scss" scoped> -.images_add-image-button { - position: absolute; - top: 95px; - right: 0px; - border: none; - box-shadow: none; - background-color: $faint-secondary-primary-5; - color: $red-brand-primary; - border-radius: 8px; - margin: 12px 32px; - width: 236px; - height: 40px; - z-index: 1001; - &:active { - background-color: $faint-secondary-primary-5-hover !important; - color: $red-brand-primary-active !important; - border: none; - } - &:focus { - box-shadow: none !important; - } - &:focus-visible { - box-shadow: none !important; - } -} -.images { - display: flex; - flex-flow: row wrap; - height: 144px; -} - -.images_desc { - margin: 16px 0 16px 32px; - width: 100%; -} - -.images-container { - display: flex; - flex-flow: row nowrap; - justify-content: flex-start; - align-items: center; - margin: 0 0 16px 32px; -} - -.images-container_image { - display: flex; - flex-flow: column nowrap; - justify-content: flex-start; - align-items: center; - margin-right: 24px; -} - -.images-image { - width: 40px; - height: 40px; - margin-bottom: 8px; -} - -.semi-bold-12px { - color: $text-primary; -} -</style> diff --git a/src/views/Operations/SerialOverLan/SerialOverLanConsole.vue b/src/views/Operations/SerialOverLan/SerialOverLanConsole.vue index ce8549df..3fa9ae47 100644 --- a/src/views/Operations/SerialOverLan/SerialOverLanConsole.vue +++ b/src/views/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> @@ -85,37 +85,38 @@ export default { }, beforeDestroy() { window.removeEventListener('resize', this.resizeConsoleWindow); + this.closeTerminal(); }, methods: { openTerminal() { const token = this.$store.getters['authentication/token']; - const ws = new WebSocket(`wss://${window.location.host}/console0`, [ + this.ws = new WebSocket(`wss://${window.location.host}/console0`, [ token, ]); // Refer https://github.com/xtermjs/xterm.js/ for xterm implementation and addons. - const term = new Terminal({ + this.term = new Terminal({ fontSize: 15, fontFamily: 'SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace', }); - const attachAddon = new AttachAddon(ws); - term.loadAddon(attachAddon); + const attachAddon = new AttachAddon(this.ws); + this.term.loadAddon(attachAddon); const fitAddon = new FitAddon(); - term.loadAddon(fitAddon); + this.term.loadAddon(fitAddon); const SOL_THEME = { background: '#19273c', cursor: 'rgba(83, 146, 255, .5)', scrollbar: 'rgba(83, 146, 255, .5)', }; - term.setOption('theme', SOL_THEME); + this.term.setOption('theme', SOL_THEME); - term.open(this.$refs.panel); + this.term.open(this.$refs.panel); fitAddon.fit(); this.resizeConsoleWindow = throttle(() => { @@ -124,10 +125,10 @@ export default { window.addEventListener('resize', this.resizeConsoleWindow); try { - ws.onopen = function () { + this.ws.onopen = function () { console.log('websocket console0/ opened'); }; - ws.onclose = function (event) { + this.ws.onclose = function (event) { console.log( 'websocket console0/ closed. code: ' + event.code + @@ -139,6 +140,13 @@ export default { console.log(error); } }, + closeTerminal() { + console.log('closeTerminal'); + this.term.dispose(); + this.term = null; + this.ws.close(); + this.ws = null; + }, openConsoleWindow() { window.open( '#/console/serial-over-lan-console', diff --git a/src/views/Operations/ServerPowerOperations/BootSettings.vue b/src/views/Operations/ServerPowerOperations/BootSettings.vue index ab3c22b9..b5cbb4e0 100644 --- a/src/views/Operations/ServerPowerOperations/BootSettings.vue +++ b/src/views/Operations/ServerPowerOperations/BootSettings.vue @@ -1,8 +1,5 @@ <template> - <div class="form-background p-3"> - <label class="semi-bold-16px">{{ - $t('pageServerPowerOperations.serverBootSettings') - }}</label> + <page-section class="m-0"> <b-form novalidate @submit.prevent="handleSubmit"> <b-form-group label-for="boot-option" class="mb-3 regular-12px"> <label class="semi-bold-12px">{{ @@ -49,16 +46,18 @@ {{ $t('global.action.save') }} </b-button> </b-form> - </div> + </page-section> </template> <script> import { mapState } from 'vuex'; import BVToastMixin from '@/components/Mixins/BVToastMixin'; import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin'; +import PageSection from '@/components/Global/PageSection'; export default { name: 'BootSettings', + components: { PageSection }, mixins: [BVToastMixin, LoadingBarMixin], data() { return { diff --git a/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue b/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue index a394a77f..823caa95 100644 --- a/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue +++ b/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue @@ -1,15 +1,15 @@ <template> <b-container fluid="xxl pt-0 m-0"> <page-title /> - <b-row class="m-2"> + <page-section + :section-title="$t('pageServerPowerOperations.serverStatus')" + class="m-4" + > <b-col md="8" xl="6"> - <page-section class="m-2 pt-2 pb-2"> + <page-section class="pt-2 mb-0"> <b-row> <b-col> <dl> - <dt class="semi-bold-16px"> - {{ $t('pageServerPowerOperations.serverStatus') }} - </dt> <dd v-if="serverStatus === 'on'" style="margin-top: 10px" @@ -60,13 +60,13 @@ </b-row> </page-section> </b-col> - </b-row> - <b-row class="m-2"> + </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 class="m-2"> - <b-row class="ml-0 mb-3"> - <span class="semi-bold-16px">{{ 'Управление' }}</span> - </b-row> + <page-section> <alert :show="oneTimeBootEnabled" variant="warning"> {{ $t('pageServerPowerOperations.oneTimeBootWarning') }} </alert> @@ -177,14 +177,15 @@ </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> + </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> - </b-row> + </page-section> </b-container> </template> diff --git a/src/views/Operations/VirtualMedia/ModalConfigureConnection.vue b/src/views/Operations/VirtualMedia/ModalConfigureConnection.vue index b0bcfb2b..1a41a334 100644 --- a/src/views/Operations/VirtualMedia/ModalConfigureConnection.vue +++ b/src/views/Operations/VirtualMedia/ModalConfigureConnection.vue @@ -9,7 +9,7 @@ <template #modal-title> {{ $t('pageVirtualMedia.modal.title') }} </template> - <b-form> + <b-form style="width: 100%"> <b-form-group :label="$t('pageVirtualMedia.modal.serverUri')" label-for="serverUri" @@ -43,12 +43,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 +74,12 @@ <script> import { required } from 'vuelidate/lib/validators'; import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js'; +import InputPasswordToggle from '@/components/Global/InputPasswordToggle'; export default { + components: { + InputPasswordToggle, + }, mixins: [VuelidateMixin], props: { connection: { diff --git a/src/views/Operations/VirtualMedia/VirtualMedia.vue b/src/views/Operations/VirtualMedia/VirtualMedia.vue index 8a3d5add..9f464138 100644 --- a/src/views/Operations/VirtualMedia/VirtualMedia.vue +++ b/src/views/Operations/VirtualMedia/VirtualMedia.vue @@ -1,5 +1,5 @@ <template> - <b-container fluid="xl"> + <b-container fluid> <page-title /> <b-row class="mb-4"> <b-col md="12"> @@ -8,7 +8,7 @@ > <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"> <form-file v-if="!dev.isActive" :id="concatId(dev.id)" @@ -23,6 +23,7 @@ </b-form-group> <b-button v-if="!dev.isActive" + size="md" variant="primary" :disabled="!dev.file" @click="startVM(dev)" @@ -42,48 +43,52 @@ </page-section> </b-col> </b-row> - <b-row v-if="loadImageFromExternalServer" class="mb-4"> + <b-row v-if="!loadImageFromExternalServer" class="mb-4"> <b-col md="12"> <page-section :section-title="$t('pageVirtualMedia.virtualMediaSubTitleSecond')" > <b-row> <b-col - v-for="(device, $index) in legacyDevices" + v-for="(device, $index) in [ + { id: 'device_1', isActive: false }, + { id: 'device_2', isActive: false }, + ]" :key="$index" md="6" > <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 +112,12 @@ import FormFile from '@/components/Global/FormFile'; export default { name: 'VirtualMedia', - components: { PageTitle, PageSection, ModalConfigureConnection, FormFile }, + components: { + PageTitle, + PageSection, + ModalConfigureConnection, + FormFile, + }, mixins: [BVToastMixin, LoadingBarMixin], data() { return { |