From f3ee98c33dfbb411336b78dc9732a869acacc4cb Mon Sep 17 00:00:00 2001
From: yuzeng <cridequeger@yahoo.com>
Date: Thu, 23 Jun 2022 11:42:28 +0800
Subject: [PATCH] Harvester: Refactor Novnc

---
 shell/assets/translations/en-us.yaml             |  2 +-
 shell/components/{ => novnc}/NovncConsole.vue    |  0
 .../components/{ => novnc}/NovncConsoleItem.vue  | 16 ++++++++--------
 .../{ => novnc}/NovncConsoleWrapper.vue          | 16 ++++++++--------
 .../c/_cluster/harvester/console/_uid/vnc.vue    |  4 ++--
 5 files changed, 19 insertions(+), 19 deletions(-)
 rename shell/components/{ => novnc}/NovncConsole.vue (100%)
 rename shell/components/{ => novnc}/NovncConsoleItem.vue (82%)
 rename shell/components/{ => novnc}/NovncConsoleWrapper.vue (93%)

diff --git a/shell/assets/translations/en-us.yaml b/shell/assets/translations/en-us.yaml
index 753d96d51b..102243fe32 100644
--- a/shell/assets/translations/en-us.yaml
+++ b/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
diff --git a/shell/components/NovncConsole.vue b/shell/components/novnc/NovncConsole.vue
similarity index 100%
rename from shell/components/NovncConsole.vue
rename to shell/components/novnc/NovncConsole.vue
diff --git a/shell/components/NovncConsoleItem.vue b/shell/components/novnc/NovncConsoleItem.vue
similarity index 82%
rename from shell/components/NovncConsoleItem.vue
rename to shell/components/novnc/NovncConsoleItem.vue
index 777f559380..6f2f1c3ef9 100644
--- a/shell/components/NovncConsoleItem.vue
+++ b/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;
 
diff --git a/shell/components/NovncConsoleWrapper.vue b/shell/components/novnc/NovncConsoleWrapper.vue
similarity index 93%
rename from shell/components/NovncConsoleWrapper.vue
rename to shell/components/novnc/NovncConsoleWrapper.vue
index 720557131e..5cb3e3e0af 100644
--- a/shell/components/NovncConsoleWrapper.vue
+++ b/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);
   }
diff --git a/shell/pages/c/_cluster/harvester/console/_uid/vnc.vue b/shell/pages/c/_cluster/harvester/console/_uid/vnc.vue
index 51fb8a69fa..98a0e16682 100644
--- a/shell/pages/c/_cluster/harvester/console/_uid/vnc.vue
+++ b/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>