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>