Merge pull request #182 from a110605/add_image_downloader

Add HarvesterImageDownloader for cdi image

pkg/harvester/dialog/HarvesterImageDownloader.vue

@@ -0,0 +1,166 @@
+<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 || '';
+    },
+
+    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.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>

pkg/harvester/l10n/en-us.yaml

@@ -99,6 +99,11 @@ harvester:
         tip: Please enter a virtual machine name!
         success: 'Virtual machine { name } cloned successfully.'
         failed: 'Failed clone virtual machine!'
+    downloadImage:
+      title: Download Image
+      banner: 'This action takes a while depending on the image size ({ size }). Please be patient.'
+      startMessage : 'The download process will auto start once the conversion is complete.'
+      download: Download
     exportImage:
       title: Export to Image
       name: Name

pkg/harvester/models/harvesterhci.io.virtualmachineimage.js

@@ -73,7 +73,7 @@ export default class HciVmImage extends HarvesterResource {
         disabled: !this.isReady,
       },
       {
-        action:  'download',
+        action:  'imageDownload',
         enabled: this.links?.download,
         icon:    'icon icon-download',
         label:   this.t('asyncButton.download.action'),
@@ -394,7 +394,19 @@ export default class HciVmImage extends HarvesterResource {
     return this.$rootGetters['harvester-common/getFeatureEnabled']('thirdPartyStorage');
   }
 
-  download() {
+  imageDownload(resources = this) {
+    // spec.backend is introduced in v1.5.0. If it's not set, it's an old image can be downloaded via link
+    if (this.spec?.backend === 'cdi') {
+      this.$dispatch('promptModal', {
+        resources,
+        component: 'HarvesterImageDownloader'
+      });
+    } else {
+      this.downloadViaLink();
+    }
+  }
+
+  downloadViaLink() {
     window.location.href = this.links.download;
   }
 }

pkg/harvester/store/harvester-common.js

@@ -5,16 +5,33 @@ import { featureEnabled, getVersion } from '../utils/feature-flags';
 
 const state = function() {
   return {
+    // support bundle
     latestBundleId:          '',
     bundlePending:           false,
     showBundleModal:         false,
     bundlePercentage:        0,
     uploadingImages:         [],
     uploadingImageError:     {},
+    // download cdi image
+    downloadImageId:            '',
+    downloadImageInProgress:       false,
+    isDownloadImageCancel:      false,
   };
 };
 
 const mutations = {
+  setDownloadImageId(state, id) {
+    state.downloadImageId = id;
+  },
+
+  setDownloadImageCancel(state, value) {
+    state.isDownloadImageCancel = value;
+  },
+
+  setDownloadImageInProgress(state, value) {
+    state.downloadImageInProgress = value;
+  },
+
   setLatestBundleId(state, bundleId) {
     state.latestBundleId = bundleId;
   },
@@ -51,6 +68,14 @@ const getters = {
     return state.latestBundleId;
   },
 
+  isDownloadImageCancel(state) {
+    return state.isDownloadImageCancel;
+  },
+
+  isDownloadImageInProgress(state) {
+    return state.downloadImageInProgress;
+  },
+
   isBundlePending(state) {
     return state.bundlePending;
   },
@@ -98,6 +123,70 @@ const getters = {
 };
 
 const actions = {
+  async downloadImageProgress({
+    state, dispatch, commit, rootGetters
+  }) {
+    const parse = Parse(window.history.href);
+
+    const id = state.downloadImageId; // id is image_ns / image_name
+
+    let imageCrd = await dispatch(
+      'harvester/find',
+      { type: HCI.VM_IMAGE_DOWNLOADER, id },
+      { root: true }
+    );
+
+    await commit('setDownloadImageInProgress', true);
+
+    let count = 0;
+
+    const timer = setInterval(async() => {
+      count = count + 1;
+      if (count % 3 === 0) {
+        // ws maybe disconnect, force to get the latest status
+        imageCrd = await dispatch(
+          'harvester/find',
+          {
+            type: HCI.VM_IMAGE_DOWNLOADER,
+            id,
+            opt:  { force: true }
+          },
+          { root: true }
+        );
+      }
+
+      // If is cancel, clear the timer
+      if (state.isDownloadImageCancel === true) {
+        clearInterval(timer);
+
+        return;
+      }
+
+      // converting image status becomes ready
+      if (imageCrd?.status?.status === 'Ready') {
+        imageCrd = rootGetters['harvester/byId'](HCI.VM_IMAGE_DOWNLOADER, id);
+
+        setTimeout(() => {
+          commit('setDownloadImageInProgress', false);
+          dispatch('promptModal'); // bring undefined data will close the promptModal
+        }, 600);
+
+        if (rootGetters['isMultiCluster']) {
+          const clusterId = rootGetters['clusterId'];
+          const prefix = `/k8s/clusters/${ clusterId }`;
+
+          window.location.href = `${ parse.origin }${ prefix }/v1/harvester/${ HCI.IMAGE }/${ id }/download`;
+        } else {
+          const link = `${ parse.origin }/v1/harvester/${ HCI.IMAGE }/${ id }/download`;
+
+          window.location.href = link;
+        }
+
+        clearInterval(timer);
+      }
+    }, 1000);
+  },
+
   async bundleProgress({
     state, dispatch, commit, rootGetters
   }) {
@@ -117,7 +206,7 @@ const actions = {
     const timer = setInterval(async() => {
       count = count + 1;
       if (count % 3 === 0) {
-        // ws mayby disconnect
+        // ws maybe disconnect
         bundleCrd = await dispatch(
           'harvester/find',
           {

pkg/harvester/types.ts

@@ -16,6 +16,7 @@ export const HCI = {
   RESTORE:             'harvesterhci.io.virtualmachinerestore',
   NODE_NETWORK:        'network.harvesterhci.io.nodenetwork',
   CLUSTER_NETWORK:     'network.harvesterhci.io.clusternetwork',
+  VM_IMAGE_DOWNLOADER: 'harvesterhci.io.virtualmachineimagedownloader',
   SUPPORT_BUNDLE:      'harvesterhci.io.supportbundle',
   NETWORK_ATTACHMENT:  'harvesterhci.io.networkattachmentdefinition',
   CLUSTER:             'harvesterhci.io.management.cluster',