diff options
| -rw-r--r-- | src/assets/styles/bmc/custom/_index.scss | 1 | ||||
| -rw-r--r-- | src/assets/styles/bmc/custom/_kvm.scss | 12 | ||||
| -rw-r--r-- | src/views/Control/Kvm/Kvm.vue | 33 | ||||
| -rw-r--r-- | src/views/Control/Kvm/KvmConsole.vue | 128 |
4 files changed, 126 insertions, 48 deletions
diff --git a/src/assets/styles/bmc/custom/_index.scss b/src/assets/styles/bmc/custom/_index.scss index b67712bb..4456dd29 100644 --- a/src/assets/styles/bmc/custom/_index.scss +++ b/src/assets/styles/bmc/custom/_index.scss @@ -9,6 +9,7 @@ @import "./card"; @import "./dropdown"; @import "./forms"; +@import "./kvm"; @import "./modal"; @import "./pagination"; @import "./tables"; diff --git a/src/assets/styles/bmc/custom/_kvm.scss b/src/assets/styles/bmc/custom/_kvm.scss new file mode 100644 index 00000000..a7223844 --- /dev/null +++ b/src/assets/styles/bmc/custom/_kvm.scss @@ -0,0 +1,12 @@ +#terminal-kvm { + height: calc(100vh - 300px); + display: flex; + &.full-window { + height: calc(100vh - 80px); + } + div:nth-child(1) { + background: transparent !important; + display: block !important; + overflow: hidden !important; + } +}
\ No newline at end of file diff --git a/src/views/Control/Kvm/Kvm.vue b/src/views/Control/Kvm/Kvm.vue index 195948b0..66b2e5f7 100644 --- a/src/views/Control/Kvm/Kvm.vue +++ b/src/views/Control/Kvm/Kvm.vue @@ -1,44 +1,19 @@ <template> <b-container fluid="xl"> <page-title /> - - <page-section :section-title="$t('pageKvm.subTitle')"> - <div> - <b-button - variant="link" - type="button" - class="button-launch" - @click="openConsoleWindow()" - > - <icon-launch /> - {{ $t('pageKvm.openNewTab') }} - </b-button> - </div> - <div class="terminal-container"> - <kvm-console /> - </div> - </page-section> + <div class="terminal-container"> + <kvm-console :is-full-window="false" /> + </div> </b-container> </template> <script> -import IconLaunch from '@carbon/icons-vue/es/launch/32'; import PageTitle from '@/components/Global/PageTitle'; -import PageSection from '@/components/Global/PageSection'; import KvmConsole from './KvmConsole'; export default { name: 'Kvm', - components: { IconLaunch, PageSection, PageTitle, KvmConsole }, - methods: { - openConsoleWindow() { - window.open( - '#/console/kvm', - '_blank', - 'directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=yes,width=600,height=550' - ); - } - } + components: { PageTitle, KvmConsole } }; </script> diff --git a/src/views/Control/Kvm/KvmConsole.vue b/src/views/Control/Kvm/KvmConsole.vue index 6881b690..8438b35c 100644 --- a/src/views/Control/Kvm/KvmConsole.vue +++ b/src/views/Control/Kvm/KvmConsole.vue @@ -1,31 +1,96 @@ <template> - <div> - <span class="kvm-status">{{ $t('pageKvm.status') }}: {{ status }}</span> - <b-button - v-if="isConnected" - variant="link" - type="button" - class="button-launch button-ctrl-alt-delete" - @click="sendCtrlAltDel" - > - {{ $t('pageKvm.buttonCtrlAltDelete') }} - </b-button> - <div v-show="isConnected" id="terminal" ref="panel"></div> + <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"> + <dl class="mb-2" sm="2" md="2"> + <dt class="d-inline font-weight-bold mr-1"> + {{ $t('pageKvm.status') }}: + </dt> + <dd class="d-inline"> + <status-icon :status="hostStatusIcon" /> + <span class="d-none d-md-inline"> {{ hostStatus }}</span> + </dd> + </dl> + </b-col> + + <b-col class="d-flex justify-content-end"> + <b-button + v-if="isConnected" + variant="link" + type="button" + class="pr-0 button-launch" + @click="sendCtrlAltDel" + > + <icon-arrow-down aria-hidden="true" /> + {{ $t('pageKvm.buttonCtrlAltDelete') }} + </b-button> + <b-button + v-if="!isFullWindow" + variant="link" + type="button" + class="pr-0 button-launch" + @click="openConsoleWindow()" + > + <icon-launch aria-hidden="true" /> + <span class="d-none d-md-inline"> + {{ $t('pageKvm.openNewTab') }} + </span> + </b-button> + </b-col> + </b-row> + </div> + <div id="terminal-kvm" ref="panel" :class="terminalClass"></div> </div> </template> <script> import RFB from '@novnc/novnc/core/rfb'; +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'; + +const Connecting = 0; +const Connected = 1; +const Disconnected = 2; export default { name: 'KvmConsole', + components: { StatusIcon, IconLaunch, IconArrowDown }, + props: { + isFullWindow: { + type: Boolean, + default: true + } + }, data() { return { rfb: null, isConnected: false, - status: this.$t('pageKvm.connecting') + terminalClass: this.isFullWindow ? 'full-window' : '', + marginClass: this.isFullWindow ? 'margin-left-full-window' : '', + status: Connecting, + convasRef: null }; }, + computed: { + hostStatusIcon() { + if (this.status === Connected) { + return 'success'; + } else if (this.status === Disconnected) { + return 'danger'; + } + return 'secondary'; + }, + hostStatus() { + if (this.status === Connected) { + return this.$t('pageKvm.connected'); + } else if (this.status === Disconnected) { + return this.$t('pageKvm.disconnected'); + } + return this.$t('pageKvm.connecting'); + } + }, mounted() { this.openTerminal(); }, @@ -42,25 +107,46 @@ export default { ); this.rfb.scaleViewport = true; + this.rfb.clipViewport = true; const that = this; + + window.addEventListener('resize', () => { + setTimeout(that.setWidthToolbar, 0); + }); + this.rfb.addEventListener('connect', () => { that.isConnected = true; - that.status = this.$t('pageKvm.connected'); + that.status = Connected; + that.setWidthToolbar(); }); this.rfb.addEventListener('disconnect', () => { - that.status = this.$t('pageKvm.disconnected'); + this.isConnected = false; + that.status = Disconnected; }); + }, + setWidthToolbar() { + if ( + this.$refs.panel.children && + this.$refs.panel.children.length > 0 && + this.$refs.panel.children[0].children.length > 0 + ) { + this.$refs.toolbar.style.width = + this.$refs.panel.children[0].children[0].clientWidth - 10 + 'px'; + } + }, + openConsoleWindow() { + window.open( + '#/console/kvm', + '_blank', + 'directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=yes,width=700,height=550' + ); } } }; </script> <style scoped lang="scss"> -#terminal { - height: calc(100vh - 42px); -} - .button-ctrl-alt-delete { float: right; } @@ -70,4 +156,8 @@ export default { padding-left: $spacer / 4; display: inline-block; } + +.margin-left-full-window { + margin-left: 5px; +} </style> |