Add pkg/harvester components + shell portings - 1

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

pkg/harvester/detail/harvesterhci.io.virtualmachineimage/Storage.vue

@@ -0,0 +1,69 @@
+<script>
+import LabelValue from '@shell/components/LabelValue';
+
+export default {
+  props: {
+    value: {
+      type:    Object,
+      default: () => {}
+    },
+  },
+
+  components: { LabelValue },
+
+  computed: {
+    migratable() {
+      return this.value.migratable === 'true' ? this.t('generic.yes') : this.t('generic.no');
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div
+      v-if="value.nodeSelector"
+      class="row mb-20"
+    >
+      <div class="col span-12">
+        <LabelValue
+          :name="t('harvester.storage.nodeSelector.label')"
+          :value="value.nodeSelector"
+        />
+      </div>
+    </div>
+    <div
+      v-if="value.diskSelector"
+      class="row mb-20"
+    >
+      <div class="col span-12">
+        <LabelValue
+          :name="t('harvester.storage.diskSelector.label')"
+          :value="value.diskSelector"
+        />
+      </div>
+    </div>
+    <div class="row mb-20">
+      <div class="col span-6">
+        <LabelValue
+          :name="t('harvester.storage.migratable.label')"
+          :value="migratable"
+        />
+      </div>
+      <div class="col span-6">
+        <LabelValue
+          :name="t('harvester.storage.numberOfReplicas.label')"
+          :value="value.numberOfReplicas"
+        />
+      </div>
+    </div>
+    <div class="row mb-20">
+      <div class="col span-6">
+        <LabelValue
+          :name="t('harvester.storage.staleReplicaTimeout.label')"
+          :value="value.staleReplicaTimeout"
+        />
+      </div>
+    </div>
+  </div>
+</template>

pkg/harvester/detail/harvesterhci.io.virtualmachineimage/index.vue

@@ -0,0 +1,137 @@
+<script>
+import CopyToClipboardText from '@shell/components/CopyToClipboardText';
+import LabelValue from '@shell/components/LabelValue';
+import { DESCRIPTION } from '@shell/config/labels-annotations';
+import { HCI } from '@pkg/harvester/config/labels-annotations';
+import Tabbed from '@shell/components/Tabbed';
+import Tab from '@shell/components/Tabbed/Tab';
+import { findBy } from '@shell/utils/array';
+import { get } from '@shell/utils/object';
+
+import Storage from './Storage';
+
+export default {
+  components: {
+    CopyToClipboardText,
+    Tab,
+    Tabbed,
+    LabelValue,
+    Storage,
+  },
+
+  props: {
+    value: {
+      type:     Object,
+      required: true,
+    },
+  },
+
+  data() {
+    return {};
+  },
+
+  computed: {
+    formattedValue() {
+      return this.value?.downSize;
+    },
+
+    url() {
+      return this.value?.spec?.url || '-';
+    },
+
+    description() {
+      return this.value?.metadata?.annotations?.[DESCRIPTION] || '-';
+    },
+
+    errorMessage() {
+      const conditions = get(this.value, 'status.conditions');
+
+      return findBy(conditions, 'type', 'Imported')?.message || '-';
+    },
+
+    isUpload() {
+      return this.value?.spec?.sourceType === 'upload';
+    },
+
+    imageName() {
+      return this.value?.metadata?.annotations?.[HCI.IMAGE_NAME] || '-';
+    },
+  }
+};
+</script>
+
+<template>
+  <Tabbed v-bind="$attrs" class="mt-15" :side-tabs="true">
+    <Tab
+      name="detail"
+      :label="t('harvester.virtualMachine.detail.tabs.basics')"
+      class="bordered-table"
+      :weight="99"
+    >
+      <div class="row">
+        <div class="col span-12">
+          <LabelValue
+            v-if="isUpload"
+            :name="t('harvester.image.fileName')"
+            :value="imageName"
+            class="mb-20"
+          />
+          <LabelValue
+            v-else
+            :name="t('harvester.image.url')"
+            :value="url"
+            class="mb-20"
+          >
+            <template #value>
+              <div v-if="url !== '-'">
+                <CopyToClipboardText :text="url" />
+              </div>
+              <div v-else>
+                {{ url }}
+              </div>
+            </template>
+          </LabelValue>
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="col span-12">
+          <LabelValue :name="t('harvester.image.size')" :value="formattedValue" class="mb-20" />
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="col span-12">
+          <LabelValue :name="t('nameNsDescription.description.label')" :value="description" class="mb-20" />
+        </div>
+      </div>
+
+      <div v-if="errorMessage !== '-'" class="row">
+        <div class="col span-12">
+          <div>
+            {{ t('tableHeaders.message') }}
+          </div>
+          <div :class="{ 'error': errorMessage !== '-' }">
+            {{ errorMessage }}
+          </div>
+        </div>
+      </div>
+    </Tab>
+    <Tab
+      name="storage"
+      :label="t('harvester.storage.label')"
+      :weight="89"
+      class="bordered-table"
+    >
+      <Storage
+        v-model="value.spec.storageClassParameters"
+      />
+    </Tab>
+  </Tabbed>
+</template>
+
+<style lang="scss" scoped>
+.error {
+  color: var(--error);
+}
+</style>