Add pkg/harvester components + shell portings - 1

Signed-off-by: Francesco Torchia <francesco.torchia@suse.com>

pkg/harvester/pages/c/_cluster/console/_uid/serial.vue

@@ -0,0 +1,53 @@
+<script>
+import { HCI } from '../../../../../types';
+import SerialConsole from '../../../../../components/SerialConsole';
+import Loading from '@shell/components/Loading';
+
+export default {
+  components: { SerialConsole, Loading },
+
+  async fetch() {
+    this.rows = await this.$store.dispatch('harvester/findAll', { type: HCI.VMI });
+  },
+
+  data() {
+    return { uid: this.$route.params.uid };
+  },
+
+  computed: {
+    vmi() {
+      const vmiList = this.$store.getters['harvester/all'](HCI.VMI) || [];
+      const vmi = vmiList.find( (VMI) => {
+        return VMI?.metadata?.ownerReferences?.[0]?.uid === this.uid;
+      });
+
+      return vmi;
+    },
+  },
+
+  mounted() {
+    window.addEventListener('beforeunload', () => {
+      this.$refs.serialConsole.close();
+    });
+  },
+
+  head() {
+    return { title: this.vmi?.metadata?.name };
+  },
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <SerialConsole
+    v-else
+    ref="serialConsole"
+    v-model="vmi"
+  />
+</template>
+
+<style lang="scss" scoped>
+  body, #__nuxt, #__layout, main {
+    height: 100%;
+  }
+</style>

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

@@ -0,0 +1,55 @@
+<script>
+import { HCI } from '../../../../../types';
+import NovncConsoleWrapper from '../../../../../components/novnc/NovncConsoleWrapper.vue';
+import Loading from '@shell/components/Loading';
+
+export default {
+  components: { NovncConsoleWrapper, Loading },
+
+  async fetch() {
+    this.rows = await this.$store.dispatch('harvester/findAll', { type: HCI.VMI });
+  },
+
+  data() {
+    return { uid: this.$route.params.uid };
+  },
+
+  computed: {
+    vmi() {
+      const vmiList = this.$store.getters['harvester/all'](HCI.VMI) || [];
+
+      const vmi = vmiList.find( (VMI) => {
+        return VMI?.metadata?.ownerReferences?.[0]?.uid === this.uid;
+      });
+
+      return vmi;
+    },
+  },
+
+  mounted() {
+    window.addEventListener('beforeunload', () => {
+      this.$refs.console.close();
+    });
+  },
+
+  head() {
+    return { title: this.vmi?.metadata?.name };
+  },
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <NovncConsoleWrapper
+    v-else
+    ref="console"
+    v-model="vmi"
+    class="novnc-wrapper"
+  />
+</template>
+
+<style>
+HTML, BODY, MAIN, #__nuxt, #__layout, #app, .vm-console, .vm-console > DIV, .vm-console > DIV > DIV {
+  height: 100%;
+}
+</style>