KVM console
- The kvm console with using novnc library
Signed-off-by: Mateusz Gapski <mateuszx.gapski@intel.com>
Change-Id: Icfb7643595d8c17231ca3671753d6de971525bd3
diff --git a/src/views/Control/Kvm/KvmConsole.vue b/src/views/Control/Kvm/KvmConsole.vue
new file mode 100644
index 0000000..080f72e
--- /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>