96 lines
2.5 KiB
Vue
96 lines
2.5 KiB
Vue
<script setup lang="ts">
|
||
import { NSelect } from 'naive-ui'
|
||
import { computed, ref, watch } from 'vue'
|
||
|
||
import { listBootVolumes } from '@/api/bootVolumes'
|
||
import { replaceBootVolume } from '@/api/instances'
|
||
import FormField from '@/components/FormField.vue'
|
||
import FormModal from '@/components/FormModal.vue'
|
||
import { useAsync } from '@/composables/useAsync'
|
||
import { useToast } from '@/composables/useToast'
|
||
|
||
const props = defineProps<{
|
||
show: boolean
|
||
cfgId: number
|
||
instanceId: string
|
||
region?: string
|
||
availabilityDomain: string
|
||
}>()
|
||
|
||
const emit = defineEmits<{ 'update:show': [boolean]; replaced: [] }>()
|
||
|
||
const message = useToast()
|
||
const submitting = ref(false)
|
||
const bootVolumeId = ref<string | null>(null)
|
||
|
||
const volumes = useAsync(
|
||
() => listBootVolumes(props.cfgId, props.availabilityDomain, undefined, props.region),
|
||
false,
|
||
)
|
||
|
||
watch(
|
||
() => props.show,
|
||
(v) => {
|
||
if (v) {
|
||
bootVolumeId.value = null
|
||
void volumes.run()
|
||
}
|
||
},
|
||
)
|
||
|
||
const options = computed(
|
||
() =>
|
||
volumes.data.value
|
||
?.filter((v) => !v.attachedInstanceId)
|
||
.map((v) => ({ label: `${v.displayName}（${v.sizeInGBs} GB）`, value: v.id })) ?? [],
|
||
)
|
||
|
||
async function submit() {
|
||
if (!bootVolumeId.value) return
|
||
submitting.value = true
|
||
try {
|
||
await replaceBootVolume(props.cfgId, props.instanceId, bootVolumeId.value, props.region)
|
||
message.success('替换请求已提交：分离旧引导卷并挂载所选引导卷')
|
||
emit('update:show', false)
|
||
emit('replaced')
|
||
} catch (e) {
|
||
message.error(e instanceof Error ? e.message : '替换失败')
|
||
} finally {
|
||
submitting.value = false
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<FormModal
|
||
:show="show"
|
||
title="替换引导卷"
|
||
:submitting="submitting"
|
||
:submit-disabled="!bootVolumeId"
|
||
submit-text="替换"
|
||
@update:show="emit('update:show', $event)"
|
||
@submit="submit"
|
||
>
|
||
<FormField
|
||
label="目标引导卷"
|
||
required
|
||
hint="仅列出同可用域、未挂载的引导卷"
|
||
:error="
|
||
!volumes.loading.value && !options.length
|
||
? '同可用域内没有未挂载的引导卷，无法替换'
|
||
: undefined
|
||
"
|
||
>
|
||
<NSelect
|
||
v-model:value="bootVolumeId"
|
||
:options="options"
|
||
:loading="volumes.loading.value"
|
||
placeholder="选择未挂载的引导卷"
|
||
/>
|
||
</FormField>
|
||
<div class="text-xs leading-relaxed text-ink-3">
|
||
原引导卷分离后保留、不会删除；实例保持 STOPPED，替换完成后可启动。
|
||
</div>
|
||
</FormModal>
|
||
</template>
|