Add pkg/harvester components + shell portings - 1

Signed-off-by: Francesco Torchia <francesco.torchia@suse.com>
2026-10-03 20:56:06 +08:00 · 2024-10-23 17:00:46 +02:00
parent f8408469f7
commit 4f2688f6ab
265 changed files with 42316 additions and 82 deletions
@@ -0,0 +1,149 @@
+<template>
+  <div>
+    <div v-if="connected && disconnected">
+      <main class="main-layout error">
+        <div class="text-center">
+          <BrandImage file-name="error-desert-landscape.svg" width="900" height="300" />
+          <h1>
+            {{ t('generic.notification.title.warning') }}
+          </h1>
+          <h2 class="text-secondary mt-20">
+            {{ t('vncConsole.error.message') }}
+          </h2>
+        </div>
+      </main>
+    </div>
+    <div v-if="reconnecting">
+      <main class="main-layout">
+        <div class="text-center">
+          <h2 class="text-secondary mt-20">
+            {{ t('vncConsole.reconnecting.message') }}：{{ retryTimes }} of {{ maximumRetryTimes }}
+          </h2>
+        </div>
+      </main>
+    </div>
+    <div
+      ref="view"
+    />
+  </div>
+</template>
+
+<script>
+import RFB from '@novnc/novnc/core/rfb';
+import BrandImage from '@shell/components/BrandImage';
+
+export default {
+  props: {
+    url: {
+      type:    String,
+      default: ''
+    }
+  },
+
+  components: { BrandImage },
+
+  data() {
+    return {
+      rfb:               null,
+      connected:         false,
+      disconnected:      false,
+      reconnectDelay:    3000,
+      reconnecting:      false,
+      maximumRetryTimes: 10,
+      retryTimes:        0,
+      setTimeout:        null,
+    };
+  },
+
+  mounted() {
+    this.$nextTick(() => {
+      this.connect();
+    });
+  },
+
+  beforeDestroy() {
+    this.clearTimeout();
+  },
+
+  methods: {
+    connect() {
+      const rfb = new RFB(this.$refs.view, this.url);
+
+      rfb.addEventListener('connect', () => {
+        this.clearTimeout();
+
+        this.connected = true;
+        this.retryTimes = 0;
+        this.reconnecting = false;
+      });
+
+      rfb.addEventListener('disconnect', (e) => {
+        this.clearTimeout();
+
+        this.disconnected = true;
+        this.rfb = null;
+        this.reconnect();
+      });
+
+      this.rfb = rfb;
+    },
+
+    reconnect() {
+      if (this.retryTimes >= this.maximumRetryTimes) {
+        this.reconnecting = false;
+        this.connected = true;
+        this.disconnected = true;
+
+        return;
+      }
+
+      this.retryTimes += 1;
+      this.reconnecting = true;
+      this.connected = false;
+      this.disconnected = false;
+
+      this.setTimeout = setTimeout(() => {
+        this.connect();
+      }, this.reconnectDelay);
+    },
+
+    clearTimeout() {
+      if (this.setTimeout) {
+        clearTimeout(this.setTimeout);
+      }
+    },
+
+    disconnect() {
+      this.rfb.disconnect();
+    },
+
+    ctrlAltDelete() {
+      this.rfb.sendCtrlAltDel();
+    },
+
+    sendKey(keysym, code, down) {
+      this.rfb.sendKey(keysym, code, down);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+  .error {
+    overflow: hidden;
+
+    .row {
+      align-items: center;
+    }
+
+    h1 {
+      font-size: 5rem;
+    }
+
+    .desert-landscape {
+      img {
+        max-width: 100%;
+      }
+    }
+  }
+</style>