Add pkg/harvester components + shell portings - 1

Signed-off-by: Francesco Torchia <francesco.torchia@suse.com>
2026-10-04 13:16:05 +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,88 @@
+<script>
+import { HCI } from '../types';
+import { BadgeState } from '@components/BadgeState';
+
+export default {
+  components: { BadgeState },
+
+  props: {
+    vmResource: {
+      type:     Object,
+      required: true
+    },
+    showSuccess: {
+      type:    Boolean,
+      default: true
+    }
+  },
+
+  computed: {
+    vmiResource() {
+      const vmiList = this.$store.getters['harvester/all'](HCI.VMI) || [];
+      const vmi = vmiList.find( (VMI) => {
+        return VMI?.metadata?.ownerReferences?.[0]?.uid === this.vmResource?.metadata?.uid;
+      });
+
+      return vmi;
+    },
+    migrationState() {
+      return this.vmiResource?.migrationState?.status || '';
+    },
+    migrationBackground() {
+      return this.vmiResource?.migrationStateBackground || '';
+    }
+  },
+
+  watch: {
+    migrationState(neu) {
+      this.$emit('state-changed', neu);
+    }
+  },
+};
+</script>
+
+<template>
+  <div v-if="migrationState">
+    <span v-if="!showSuccess">/</span>
+    <BadgeState :label="migrationState" :color="migrationBackground" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .badge-state {
+    padding: 5px 10px;
+    border: 1px solid transparent;
+    border-radius: 20px;
+
+    &.bg-info {
+      border-color: var(--primary);
+    }
+
+    &.bg-error {
+      border-color: var(--error);
+    }
+
+    &.bg-warning {
+      border-color: var(--warning);
+    }
+
+    // Successful states are de-emphasized by using [text-]color instead of background-color
+    &.bg-success {
+      color: var(--success);
+      border-color: var(--success);
+      background: transparent;
+    }
+  }
+
+  .sortable-table TD .badge-state {
+    @include clip;
+    display: inline-block;
+    max-width: 100%;
+    position: relative;
+    padding: 2px 10px 1px 10px;
+    font-size: 1em;
+    max-width: 200px;
+    font-size: .85em;
+    vertical-align: middle;
+  }
+</style>