public/harvester-ui-extension
1
0
Fork 0
mirror of https://github.com/harvester/harvester-ui-extension.git synced 2025-12-13 21:21:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add HarvesterImageDownloader

Browse Source 
Signed-off-by: Andy Lee <andy.lee@suse.com>
(cherry picked from commit 966d4d670983f746b0a87254b138488aa34d9c67)
This commit is contained in:
Andy Lee 2025-03-05 23:45:59 +08:00 committed by Mergify
parent 477206d8d0
commit d18ebfb26b
5 changed files with 341 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

172
pkg/harvester/dialog/HarvesterImageDownloader.vue Normal file
View File

@ -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>

6
pkg/harvester/l10n/en-us.yaml
View File

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

16
pkg/harvester/models/harvesterhci.io.virtualmachineimage.js
View File

@ -73,7 +73,7 @@ export default class HciVmImage extends HarvesterResource {
disabled: !this.isReady, disabled: !this.isReady,
}, },
{ {
action: 'download', action: 'imageDownload',
enabled: this.links?.download, enabled: this.links?.download,
icon: 'icon icon-download', icon: 'icon icon-download',
label: this.t('asyncButton.download.action'), label: this.t('asyncButton.download.action'),
@ -394,7 +394,19 @@ export default class HciVmImage extends HarvesterResource {
return this.$rootGetters['harvester-common/getFeatureEnabled']('thirdPartyStorage'); 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; window.location.href = this.links.download;
} }
} }

103
pkg/harvester/store/harvester-common.js
View File

@ -5,16 +5,33 @@ import { featureEnabled, getVersion } from '../utils/feature-flags';
const state = function() { const state = function() {
return { return {
latestBundleId: '', // support bundle
bundlePending: false, latestBundleId: '',
showBundleModal: false, bundlePending: false,
bundlePercentage: 0, showBundleModal: false,
uploadingImages: [], bundlePercentage: 0,
uploadingImageError: {}, uploadingImages: [],
uploadingImageError: {},
// download cdi image
downloadImageId: '',
downloadImageInProgress: false,
isDownloadImageCancel: false,
}; };
}; };
const mutations = { const mutations = {
setDownloadImageId(state, id) {
state.downloadImageId = id;
},
setDownloadImageCancel(state, value) {
state.isDownloadImageCancel = value;
},
setDownloadImageInProgress(state, value) {
state.downloadImageInProgress = value;
},
setLatestBundleId(state, bundleId) { setLatestBundleId(state, bundleId) {
state.latestBundleId = bundleId; state.latestBundleId = bundleId;
}, },
@ -51,6 +68,14 @@ const getters = {
return state.latestBundleId; return state.latestBundleId;
}, },
isDownloadImageCancel(state) {
return state.isDownloadImageCancel;
},
isDownloadImageInProgress(state) {
return state.downloadImageInProgress;
},
isBundlePending(state) { isBundlePending(state) {
return state.bundlePending; return state.bundlePending;
}, },
@ -98,6 +123,70 @@ const getters = {
}; };
const actions = { 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({ async bundleProgress({
state, dispatch, commit, rootGetters state, dispatch, commit, rootGetters
}) { }) {
@ -117,7 +206,7 @@ const actions = {
const timer = setInterval(async() => { const timer = setInterval(async() => {
count = count + 1; count = count + 1;
if (count % 3 === 0) { if (count % 3 === 0) {
// ws mayby disconnect // ws maybe disconnect
bundleCrd = await dispatch( bundleCrd = await dispatch(
'harvester/find', 'harvester/find',
{ {

105
pkg/harvester/types.ts
View File

@ -1,56 +1,57 @@
export const HCI = { export const HCI = {
VM: 'kubevirt.io.virtualmachine', VM: 'kubevirt.io.virtualmachine',
VMI: 'kubevirt.io.virtualmachineinstance', VMI: 'kubevirt.io.virtualmachineinstance',
VMIM: 'kubevirt.io.virtualmachineinstancemigration', VMIM: 'kubevirt.io.virtualmachineinstancemigration',
VM_TEMPLATE: 'harvesterhci.io.virtualmachinetemplate', VM_TEMPLATE: 'harvesterhci.io.virtualmachinetemplate',
VM_VERSION: 'harvesterhci.io.virtualmachinetemplateversion', VM_VERSION: 'harvesterhci.io.virtualmachinetemplateversion',
IMAGE: 'harvesterhci.io.virtualmachineimage', IMAGE: 'harvesterhci.io.virtualmachineimage',
SSH: 'harvesterhci.io.keypair', SSH: 'harvesterhci.io.keypair',
VOLUME: 'harvesterhci.io.volume', VOLUME: 'harvesterhci.io.volume',
USER: 'harvesterhci.io.user', USER: 'harvesterhci.io.user',
SETTING: 'harvesterhci.io.setting', SETTING: 'harvesterhci.io.setting',
UPGRADE: 'harvesterhci.io.upgrade', UPGRADE: 'harvesterhci.io.upgrade',
UPGRADE_LOG: 'harvesterhci.io.upgradelog', UPGRADE_LOG: 'harvesterhci.io.upgradelog',
SCHEDULE_VM_BACKUP: 'harvesterhci.io.schedulevmbackup', SCHEDULE_VM_BACKUP: 'harvesterhci.io.schedulevmbackup',
BACKUP: 'harvesterhci.io.virtualmachinebackup', BACKUP: 'harvesterhci.io.virtualmachinebackup',
RESTORE: 'harvesterhci.io.virtualmachinerestore', RESTORE: 'harvesterhci.io.virtualmachinerestore',
NODE_NETWORK: 'network.harvesterhci.io.nodenetwork', NODE_NETWORK: 'network.harvesterhci.io.nodenetwork',
CLUSTER_NETWORK: 'network.harvesterhci.io.clusternetwork', CLUSTER_NETWORK: 'network.harvesterhci.io.clusternetwork',
SUPPORT_BUNDLE: 'harvesterhci.io.supportbundle', VM_IMAGE_DOWNLOADER: 'harvesterhci.io.virtualmachineimagedownloader',
NETWORK_ATTACHMENT: 'harvesterhci.io.networkattachmentdefinition', SUPPORT_BUNDLE: 'harvesterhci.io.supportbundle',
CLUSTER: 'harvesterhci.io.management.cluster', NETWORK_ATTACHMENT: 'harvesterhci.io.networkattachmentdefinition',
DASHBOARD: 'harvesterhci.io.dashboard', CLUSTER: 'harvesterhci.io.management.cluster',
BLOCK_DEVICE: 'harvesterhci.io.blockdevice', DASHBOARD: 'harvesterhci.io.dashboard',
CLOUD_TEMPLATE: 'harvesterhci.io.cloudtemplate', BLOCK_DEVICE: 'harvesterhci.io.blockdevice',
HOST: 'harvesterhci.io.host', CLOUD_TEMPLATE: 'harvesterhci.io.cloudtemplate',
VERSION: 'harvesterhci.io.version', HOST: 'harvesterhci.io.host',
SNAPSHOT: 'harvesterhci.io.volumesnapshot', VERSION: 'harvesterhci.io.version',
VM_SNAPSHOT: 'harvesterhci.io.vmsnapshot', SNAPSHOT: 'harvesterhci.io.volumesnapshot',
ALERTMANAGERCONFIG: 'harvesterhci.io.monitoring.alertmanagerconfig', VM_SNAPSHOT: 'harvesterhci.io.vmsnapshot',
CLUSTER_FLOW: 'harvesterhci.io.logging.clusterflow', ALERTMANAGERCONFIG: 'harvesterhci.io.monitoring.alertmanagerconfig',
CLUSTER_OUTPUT: 'harvesterhci.io.logging.clusteroutput', CLUSTER_FLOW: 'harvesterhci.io.logging.clusterflow',
FLOW: 'harvesterhci.io.logging.flow', CLUSTER_OUTPUT: 'harvesterhci.io.logging.clusteroutput',
OUTPUT: 'harvesterhci.io.logging.output', FLOW: 'harvesterhci.io.logging.flow',
STORAGE: 'harvesterhci.io.storage', OUTPUT: 'harvesterhci.io.logging.output',
RESOURCE_QUOTA: 'harvesterhci.io.resourcequota', STORAGE: 'harvesterhci.io.storage',
KSTUNED: 'node.harvesterhci.io.ksmtuned', RESOURCE_QUOTA: 'harvesterhci.io.resourcequota',
PCI_DEVICE: 'devices.harvesterhci.io.pcidevice', KSTUNED: 'node.harvesterhci.io.ksmtuned',
PCI_CLAIM: 'devices.harvesterhci.io.pcideviceclaim', PCI_DEVICE: 'devices.harvesterhci.io.pcidevice',
SR_IOV: 'devices.harvesterhci.io.sriovnetworkdevice', PCI_CLAIM: 'devices.harvesterhci.io.pcideviceclaim',
VGPU_DEVICE: 'devices.harvesterhci.io.vgpudevice', SR_IOV: 'devices.harvesterhci.io.sriovnetworkdevice',
SR_IOVGPU_DEVICE: 'devices.harvesterhci.io.sriovgpudevice', VGPU_DEVICE: 'devices.harvesterhci.io.vgpudevice',
USB_DEVICE: 'devices.harvesterhci.io.usbdevice', SR_IOVGPU_DEVICE: 'devices.harvesterhci.io.sriovgpudevice',
USB_CLAIM: 'devices.harvesterhci.io.usbdeviceclaim', USB_DEVICE: 'devices.harvesterhci.io.usbdevice',
VLAN_CONFIG: 'network.harvesterhci.io.vlanconfig', USB_CLAIM: 'devices.harvesterhci.io.usbdeviceclaim',
VLAN_STATUS: 'network.harvesterhci.io.vlanstatus', VLAN_CONFIG: 'network.harvesterhci.io.vlanconfig',
ADD_ONS: 'harvesterhci.io.addon', VLAN_STATUS: 'network.harvesterhci.io.vlanstatus',
LINK_MONITOR: 'network.harvesterhci.io.linkmonitor', ADD_ONS: 'harvesterhci.io.addon',
SECRET: 'harvesterhci.io.secret', LINK_MONITOR: 'network.harvesterhci.io.linkmonitor',
INVENTORY: 'metal.harvesterhci.io.inventory', SECRET: 'harvesterhci.io.secret',
LB: 'loadbalancer.harvesterhci.io.loadbalancer', INVENTORY: 'metal.harvesterhci.io.inventory',
IP_POOL: 'loadbalancer.harvesterhci.io.ippool', LB: 'loadbalancer.harvesterhci.io.loadbalancer',
HARVESTER_CONFIG: 'rke-machine-config.cattle.io.harvesterconfig', IP_POOL: 'loadbalancer.harvesterhci.io.ippool',
LVM_VOLUME_GROUP: 'harvesterhci.io.lvmvolumegroup' HARVESTER_CONFIG: 'rke-machine-config.cattle.io.harvesterconfig',
LVM_VOLUME_GROUP: 'harvesterhci.io.lvmvolumegroup'
}; };
export const VOLUME_SNAPSHOT = 'snapshot.storage.k8s.io.volumesnapshot'; export const VOLUME_SNAPSHOT = 'snapshot.storage.k8s.io.volumesnapshot';