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/Control/Kvm/KvmConsole.vue | |
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/Control/Kvm/KvmConsole.vue')
-rw-r--r-- | src/views/Control/Kvm/KvmConsole.vue | 74 |
1 files changed, 74 insertions, 0 deletions
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> |