Harvester: Refactor Novnc

shell/assets/translations/en-us.yaml

@@ -5865,7 +5865,7 @@ harvester:
         down: No events in the past hour
       console:
         down: This Virtual Machine is down. Please start it to access its console.
-        shortKeys: Short Keys
+        shortKeys: Shortcut Keys
 
   volume:
     label: Volumes

shell/components/novnc/NovncConsoleItem.vue

@@ -28,16 +28,16 @@ export default {
 
   methods: {
     keysDown(key, pos) {
-      this.addKeys(key, pos);
-      this.$emit('sendKeys', this.path);
+      this.addKeys({ key, pos });
+      this.$emit('sendKeys');
     },
 
-    addKeys(key, pos) {
-      this.path.splice(pos, this.path.length - pos, key);
+    addKeys({ key, pos }) {
+      this.$emit('update', { key, pos });
     },
 
     sendKeys() {
-      this.$emit('sendKeys', this.path);
+      this.$emit('sendKeys');
     },
 
     getOpenStatus(key, pos) {
@@ -56,10 +56,10 @@ export default {
         trigger="click"
         :container="false"
       >
-        <span :class="{ open: getOpenStatus(key, pos) }" class="p-10 hand" @click="addKeys(key, pos)">{{ item.label }}</span>
+        <span :class="{ open: getOpenStatus(key, pos) }" class="p-10 hand" @click="addKeys({ key, pos })">{{ item.label }}</span>
 
         <template slot="popover">
-          <novnc-console-item :items="item.keys" :path="path" :pos="pos+1" @sendKeys="sendKeys" />
+          <novnc-console-item :items="item.keys" :path="path" :pos="pos+1" @update="addKeys" @sendKeys="sendKeys" />
         </template>
       </v-popover>
 
@@ -68,7 +68,7 @@ export default {
   </ul>
 </template>
 
-<style lang="scss">
+<style lang="scss" scoped>
   .combination-keys__container {
     max-width: 60px;
 

shell/components/novnc/NovncConsoleWrapper.vue

@@ -1,7 +1,7 @@
 <script>
 import KeyTable from '@novnc/novnc/core/input/keysym';
-import NovncConsole from '@/shell/components/NovncConsole';
-import NovncConsoleItem from '@/shell/components/NovncConsoleItem';
+import NovncConsole from '@/shell/components/novnc/NovncConsole';
+import NovncConsoleItem from '@/shell/components/novnc/NovncConsoleItem';
 import { HCI } from '@/shell/config/types';
 
 const SHORT_KEYS = {
@@ -173,6 +173,10 @@ export default {
       this.$refs.novncConsole.disconnect();
     },
 
+    update({ key, pos }) {
+      this.keysRecord.splice(pos, this.keysRecord.length - pos, key);
+    },
+
     sendKeys() {
       this.keysRecord.forEach((key) => {
         this.$refs.novncConsole.sendKey(this.allKeys[key].value, key, true);
@@ -209,7 +213,7 @@ export default {
           </button>
 
           <template slot="popover">
-            <novnc-console-item :items="keymap" :path="keysRecord" :pos="0" @sendKeys="sendKeys" />
+            <novnc-console-item :items="keymap" :path="keysRecord" :pos="0" @update="update" @sendKeys="sendKeys" />
           </template>
         </v-popover>
 
@@ -225,17 +229,13 @@ export default {
   </div>
 </template>
 
-<style lang="scss">
+<style lang="scss" scoped>
   .vm-console {
     height: 100%;
     display: grid;
     grid-template-rows: 30px auto;
   }
 
-  .vm-console, .vm-console > DIV, .vm-console > DIV > DIV {
-    height: 100%;
-  }
-
   .combination-keys {
     background: rgb(40, 40, 40);
   }

shell/pages/c/_cluster/harvester/console/_uid/vnc.vue

@@ -1,6 +1,6 @@
 <script>
 import { HCI } from '@shell/config/types';
-import NovncConsoleWrapper from '@shell/components/NovncConsoleWrapper';
+import NovncConsoleWrapper from '@shell/components/novnc/NovncConsoleWrapper';
 import Loading from '@shell/components/Loading';
 
 export default {
@@ -46,7 +46,7 @@ export default {
 </template>
 
 <style>
-HTML, BODY, MAIN, #__nuxt, #__layout, #app {
+HTML, BODY, MAIN, #__nuxt, #__layout, #app, .vm-console, .vm-console > DIV, .vm-console > DIV > DIV {
   height: 100%;
 }
 </style>