Add HarvesterImageDownloader

Signed-off-by: Andy Lee <andy.lee@suse.com>
2026-10-04 13:16:05 +08:00 · 2025-03-06 11:14:43 +08:00
parent 208f1f29f5
commit 966d4d6709
5 changed files with 341 additions and 61 deletions
@@ -0,0 +1,172 @@
+<script>
+import { mapGetters } from 'vuex';
+import { exceptionToErrorsArray } from '@shell/utils/error';
+import { HCI } from '../types';
+import { Card } from '@components/Card';
+import { Banner } from '@components/Banner';
+import AsyncButton from '@shell/components/AsyncButton';
+import AppModal from '@shell/components/AppModal';
+
+export default {
+  name: 'HarvesterImageDownloaderDialog',
+
+  emits: ['close'],
+
+  components: {
+    AsyncButton, Banner, Card, AppModal
+  },
+
+  props: {
+    resources: {
+      type:     Array,
+      required: true
+    }
+  },
+
+  data() {
+    return { errors: [], isOpen: false };
+  },
+
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+
+    downloadImageInProgress() {
+      return this.$store.getters['harvester-common/isDownloadImageInProgress'];
+    },
+
+    image() {
+      return this.resources[0] || {};
+    },
+
+    imageName() {
+      return this.image?.name || '';
+    },
+
+    imageDisplayName() {
+      return this.image?.displayName || '';
+    },
+
+    imageVirtualSize() {
+      return this.image?.virtualSize || this.image?.downSize || '';
+    }
+  },
+
+  methods: {
+    async cancelDownload() {
+      const url = this.image?.links?.downloadcancel;
+
+      if (url) {
+        await this.$store.dispatch('harvester/request', { url });
+      }
+    },
+
+    async close() {
+      if (this.downloadImageInProgress) {
+        this.$store.commit('harvester-common/setDownloadImageCancel', true);
+        this.$store.commit('harvester-common/setDownloadImageInProgress', false);
+        await this.cancelDownload();
+      }
+      this.$emit('close');
+    },
+
+    async startDownload(buttonCb) {
+      // clean the download image CRD first.
+      await this.cancelDownload();
+      this.$store.commit('harvester-common/setDownloadImageCancel', false);
+      this.$store.commit('harvester-common/setDownloadImageInProgress', false);
+      this.errors = [];
+
+      const name = this.image?.name || '';
+      const namespace = this.image?.namespace || '';
+
+      const imageCrd = {
+        apiVersion: 'harvesterhci.io/v1beta1',
+        type:       HCI.VM_IMAGE_DOWNLOADER,
+        kind:       'VirtualMachineImageDownloader',
+        metadata:   {
+          name,
+          namespace
+        },
+        spec: { imageName: name }
+      };
+
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const imageCreate = await this.$store.dispatch(`${ inStore }/create`, imageCrd);
+
+      try {
+        await imageCreate.save();
+        this.$store.commit('harvester-common/setDownloadImageId', `${ namespace }/${ name }`, { root: true });
+        this.$store.dispatch('harvester-common/downloadImageProgress', { root: true });
+      } catch (err) {
+        this.errors = exceptionToErrorsArray(err);
+        buttonCb(false);
+      }
+    }
+  },
+};
+</script>
+
+<template>
+  <app-modal
+    class="image-downloader-modal"
+    name="image-download-dialog"
+    height="auto"
+    :width="600"
+    :click-to-close="false"
+    @close="close"
+  >
+    <Card :show-highlight-border="false">
+      <template #title>
+        {{ t('harvester.modal.downloadImage.title') }}
+      </template>
+
+      <template #body>
+        <Banner color="info">
+          {{ t('harvester.modal.downloadImage.banner', { size: imageVirtualSize }) }}
+        </Banner>
+        {{ t('harvester.modal.downloadImage.convertMessage', { name: imageDisplayName }) }}
+        <br /><br />
+        {{ t('harvester.modal.downloadImage.startMessage') }}
+        <br /><br />
+      </template>
+
+      <template #actions>
+        <Banner
+          v-for="(err, i) in errors"
+          :key="i"
+          color="error"
+        >
+          {{ err }}
+        </Banner>
+        <div class="actions">
+          <div class="buttons">
+            <button
+              class="btn role-secondary mr-10"
+              @click="close"
+            >
+              {{ t('generic.cancel') }}
+            </button>
+            <AsyncButton
+              type="submit"
+              mode="download"
+              :disabled="downloadImageInProgress"
+              @click="startDownload"
+            />
+          </div>
+        </div>
+      </template>
+    </Card>
+  </app-modal>
+</template>
+
+<style lang="scss" scoped>
+.actions {
+  width: 100%;
+}
+
+.buttons {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+}
+</style>