diff options
author | Mateusz Gapski <mateuszx.gapski@intel.com> | 2020-07-09 10:21:33 +0300 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2020-07-22 01:04:15 +0300 |
commit | 632de22a066e7a1224d2c490962530389273c717 (patch) | |
tree | 6452cd27736c1979f243b8a02d1996bac6c8dc3d /src/views | |
parent | 2c98b0954ac5c50ea9c77e9ee780e3dee4fcdad8 (diff) | |
download | webui-vue-632de22a066e7a1224d2c490962530389273c717.tar.xz |
KVM console
- The kvm console with using novnc library
Signed-off-by: Mateusz Gapski <mateuszx.gapski@intel.com>
Change-Id: Icfb7643595d8c17231ca3671753d6de971525bd3
Diffstat (limited to 'src/views')
-rw-r--r-- | src/views/Control/Kvm/Kvm.vue | 56 | ||||
-rw-r--r-- | src/views/Control/Kvm/KvmConsole.vue | 74 | ||||
-rw-r--r-- | src/views/Control/Kvm/index.js | 2 |
3 files changed, 132 insertions, 0 deletions
diff --git a/src/views/Control/Kvm/Kvm.vue b/src/views/Control/Kvm/Kvm.vue new file mode 100644 index 00000000..195948b0 --- /dev/null +++ b/src/views/Control/Kvm/Kvm.vue @@ -0,0 +1,56 @@ +<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> + </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' + ); + } + } +}; +</script> + +<style scoped> +.button-launch > svg { + height: 25px; +} +.button-launch { + padding-left: 0px; +} + +.terminal-container { + width: 100%; +} +</style> diff --git a/src/views/Control/Kvm/KvmConsole.vue b/src/views/Control/Kvm/KvmConsole.vue new file mode 100644 index 00000000..080f72e8 --- /dev/null +++ b/src/views/Control/Kvm/KvmConsole.vue @@ -0,0 +1,74 @@ +<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> +</template> + +<script> +import RFB from '@novnc/novnc/core/rfb'; + +export default { + name: 'KvmConsole', + data() { + return { + rfb: null, + isConnected: false, + status: this.$t('pageKvm.connecting') + }; + }, + mounted() { + this.openTerminal(); + }, + methods: { + sendCtrlAltDel() { + this.rfb.sendCtrlAltDel(); + }, + 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; + const that = this; + this.rfb.addEventListener('connect', () => { + that.isConnected = true; + that.status = this.$t('pageKvm.connected'); + }); + + this.rfb.addEventListener('disconnect', () => { + that.status = this.$t('pageKvm.disconnected'); + }); + } + } +}; +</script> + +<style scoped lang="scss"> +@import 'src/assets/styles/helpers'; +#terminal { + height: calc(100vh - 42px); +} + +.button-ctrl-alt-delete { + float: right; +} + +.kvm-status { + padding-top: $spacer / 2; + padding-left: $spacer / 4; + display: inline-block; +} +</style> diff --git a/src/views/Control/Kvm/index.js b/src/views/Control/Kvm/index.js new file mode 100644 index 00000000..ac4f9667 --- /dev/null +++ b/src/views/Control/Kvm/index.js @@ -0,0 +1,2 @@ +import Kvm from './Kvm.vue'; +export default Kvm; |