diff options
author | Maksim Zakharov <m.zakharov@IBS.RU> | 2022-06-20 11:52:15 +0300 |
---|---|---|
committer | Maksim Zakharov <m.zakharov@IBS.RU> | 2022-06-20 11:52:15 +0300 |
commit | 931c2cad0da1a84e3df0745b385ec06d29cc2634 (patch) | |
tree | c5ee97bcd812a1a45cd645ab334613cdada13118 /src/views/Operations/SerialOverLan | |
parent | 58d1eb3b899b730877299be6635adceb127fe6a9 (diff) | |
download | webui-vue-931c2cad0da1a84e3df0745b385ec06d29cc2634.tar.xz |
fix Modals, Tables and Pages: event logs, inventoty, post logs, operttions, global styles
Diffstat (limited to 'src/views/Operations/SerialOverLan')
-rw-r--r-- | src/views/Operations/SerialOverLan/SerialOverLan.vue | 108 | ||||
-rw-r--r-- | src/views/Operations/SerialOverLan/SerialOverLanConsole.vue | 28 |
2 files changed, 21 insertions, 115 deletions
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', |