diff options
author | Sandeepa Singh <sandeepa.singh@ibm.com> | 2021-07-14 13:32:22 +0300 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2021-08-10 22:20:42 +0300 |
commit | 68cbbe9014cbdcf7229a878f564d38f6d6199f25 (patch) | |
tree | cd7138959f405cb44b5d62000da9d364ed238b91 /src/views/Control/Kvm/KvmConsole.vue | |
parent | 7affc529b7fba41193c4d48764707e9961cdd22d (diff) | |
download | webui-vue-68cbbe9014cbdcf7229a878f564d38f6d6199f25.tar.xz |
IA update: Update control section to operations
This is the third update to the information architecture changes and
has the following changes:
- The control section has been updated to operations
- The server led page has been removed
- The firmware page is moved to operations section
Signed-off-by: Sandeepa Singh <sandeepa.singh@ibm.com>
Change-Id: I2e23da447890d7bee51892e1f782d5f2db6dded4
Diffstat (limited to 'src/views/Control/Kvm/KvmConsole.vue')
-rw-r--r-- | src/views/Control/Kvm/KvmConsole.vue | 170 |
1 files changed, 0 insertions, 170 deletions
diff --git a/src/views/Control/Kvm/KvmConsole.vue b/src/views/Control/Kvm/KvmConsole.vue deleted file mode 100644 index c028a9fc..00000000 --- a/src/views/Control/Kvm/KvmConsole.vue +++ /dev/null @@ -1,170 +0,0 @@ -<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"> - <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="serverStatusIcon" /> - <span class="d-none d-md-inline"> {{ serverStatus }}</span> - </dd> - </dl> - </b-col> - - <b-col class="d-flex justify-content-end pr-1"> - <b-button - v-if="isConnected" - variant="link" - type="button" - @click="sendCtrlAltDel" - > - <icon-arrow-down /> - {{ $t('pageKvm.buttonCtrlAltDelete') }} - </b-button> - <b-button - v-if="!isFullWindow" - variant="link" - type="button" - @click="openConsoleWindow()" - > - <icon-launch /> - {{ $t('pageKvm.openNewTab') }} - </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'; -import { throttle } from 'lodash'; - -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, - terminalClass: this.isFullWindow ? 'full-window' : '', - marginClass: this.isFullWindow ? 'margin-left-full-window' : '', - status: Connecting, - convasRef: null, - resizeKvmWindow: null, - }; - }, - computed: { - serverStatusIcon() { - if (this.status === Connected) { - return 'success'; - } else if (this.status === Disconnected) { - return 'danger'; - } - return 'secondary'; - }, - serverStatus() { - 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(); - }, - beforeDestroy() { - window.removeEventListener('resize', this.resizeKvmWindow); - this.closeTerminal(); - }, - methods: { - sendCtrlAltDel() { - this.rfb.sendCtrlAltDel(); - }, - closeTerminal() { - this.rfb.disconnect(); - this.rfb = null; - }, - openTerminal() { - const token = this.$store.getters['authentication/token']; - this.rfb = new RFB( - this.$refs.panel, - `wss://${window.location.host}/kvm/0`, - { wsProtocols: [token] } - ); - - this.rfb.scaleViewport = true; - this.rfb.clipViewport = true; - const that = this; - - this.resizeKvmWindow = throttle(() => { - setTimeout(that.setWidthToolbar, 0); - }, 1000); - window.addEventListener('resize', this.resizeKvmWindow); - - this.rfb.addEventListener('connect', () => { - that.isConnected = true; - that.status = Connected; - that.setWidthToolbar(); - }); - - this.rfb.addEventListener('disconnect', () => { - 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"> -.button-ctrl-alt-delete { - float: right; -} - -.kvm-status { - padding-top: $spacer / 2; - padding-left: $spacer / 4; - display: inline-block; -} - -.margin-left-full-window { - margin-left: 5px; -} -</style> |