mirror of https://github.com/1Panel-dev/1Panel
ssongliu
1 year ago
committed by
GitHub
15 changed files with 514 additions and 56 deletions
@ -0,0 +1,141 @@ |
|||||||
|
<template> |
||||||
|
<el-drawer v-model="drawerVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="30%"> |
||||||
|
<template #header> |
||||||
|
<DrawerHeader :header="$t('container.upgrade')" :resource="form.name" :back="handleClose" /> |
||||||
|
</template> |
||||||
|
<el-alert v-if="form.fromApp" style="margin-bottom: 20px" :closable="false" type="error"> |
||||||
|
<template #default> |
||||||
|
<span> |
||||||
|
<span>{{ $t('container.appHelper') }}</span> |
||||||
|
</span> |
||||||
|
</template> |
||||||
|
</el-alert> |
||||||
|
<el-form @submit.prevent ref="formRef" v-loading="loading" :model="form" label-position="top"> |
||||||
|
<el-row type="flex" justify="center"> |
||||||
|
<el-col :span="22"> |
||||||
|
<el-form-item :label="$t('container.oldImage')" prop="oldImage"> |
||||||
|
<el-tag>{{ form.imageName }}:{{ form.oldTag }}</el-tag> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item :label="$t('container.targetImage')" prop="newTag" :rules="Rules.requiredInput"> |
||||||
|
<el-input v-model="form.newTag"> |
||||||
|
<template #prefix>{{ form.imageName }}:</template> |
||||||
|
</el-input> |
||||||
|
<span class="input-help">{{ $t('container.upgradeHelper') }}</span> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
</el-form> |
||||||
|
<template #footer> |
||||||
|
<span class="dialog-footer"> |
||||||
|
<el-button :disabled="loading" @click="drawerVisiable = false"> |
||||||
|
{{ $t('commons.button.cancel') }} |
||||||
|
</el-button> |
||||||
|
<el-button :disabled="loading" type="primary" @click="onSubmit(formRef)"> |
||||||
|
{{ $t('commons.button.confirm') }} |
||||||
|
</el-button> |
||||||
|
</span> |
||||||
|
</template> |
||||||
|
</el-drawer> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script lang="ts" setup> |
||||||
|
import { upgradeContainer } from '@/api/modules/container'; |
||||||
|
import { Rules } from '@/global/form-rules'; |
||||||
|
import i18n from '@/lang'; |
||||||
|
import { MsgSuccess, MsgWarning } from '@/utils/message'; |
||||||
|
import { ElForm } from 'element-plus'; |
||||||
|
import { reactive, ref } from 'vue'; |
||||||
|
import DrawerHeader from '@/components/drawer-header/index.vue'; |
||||||
|
|
||||||
|
const loading = ref(false); |
||||||
|
|
||||||
|
const form = reactive({ |
||||||
|
name: '', |
||||||
|
imageName: '', |
||||||
|
oldTag: '', |
||||||
|
newTag: '', |
||||||
|
fromApp: false, |
||||||
|
}); |
||||||
|
|
||||||
|
const formRef = ref<FormInstance>(); |
||||||
|
|
||||||
|
const drawerVisiable = ref<boolean>(false); |
||||||
|
type FormInstance = InstanceType<typeof ElForm>; |
||||||
|
|
||||||
|
interface DialogProps { |
||||||
|
container: string; |
||||||
|
image: string; |
||||||
|
fromApp: boolean; |
||||||
|
} |
||||||
|
const acceptParams = (props: DialogProps): void => { |
||||||
|
form.name = props.container; |
||||||
|
form.imageName = props.image.indexOf(':') !== -1 ? props.image.split(':')[0] : props.image; |
||||||
|
form.oldTag = props.image.indexOf(':') !== -1 ? props.image.split(':')[1] : 'latest'; |
||||||
|
form.newTag = ''; |
||||||
|
form.fromApp = props.fromApp; |
||||||
|
drawerVisiable.value = true; |
||||||
|
}; |
||||||
|
const emit = defineEmits<{ (e: 'search'): void }>(); |
||||||
|
|
||||||
|
const onSubmit = async (formEl: FormInstance | undefined) => { |
||||||
|
if (!formEl) return; |
||||||
|
formEl.validate(async (valid) => { |
||||||
|
if (!valid) return; |
||||||
|
if (!compareVersion(form.newTag, form.oldTag)) { |
||||||
|
MsgWarning(i18n.global.t('container.upgradeWarning')); |
||||||
|
return; |
||||||
|
} |
||||||
|
ElMessageBox.confirm(i18n.global.t('container.upgradeWarning2'), i18n.global.t('container.upgrade'), { |
||||||
|
confirmButtonText: i18n.global.t('commons.button.confirm'), |
||||||
|
cancelButtonText: i18n.global.t('commons.button.cancel'), |
||||||
|
}).then(async () => { |
||||||
|
loading.value = true; |
||||||
|
await upgradeContainer(form.name, form.imageName + ':' + form.newTag) |
||||||
|
.then(() => { |
||||||
|
loading.value = false; |
||||||
|
emit('search'); |
||||||
|
drawerVisiable.value = false; |
||||||
|
MsgSuccess(i18n.global.t('commons.msg.operationSuccess')); |
||||||
|
}) |
||||||
|
.catch(() => { |
||||||
|
loading.value = false; |
||||||
|
}); |
||||||
|
}); |
||||||
|
}); |
||||||
|
}; |
||||||
|
const handleClose = async () => { |
||||||
|
drawerVisiable.value = false; |
||||||
|
emit('search'); |
||||||
|
}; |
||||||
|
|
||||||
|
function compareVersion(vNew, vOld) { |
||||||
|
if (vNew === 'latest') { |
||||||
|
return true; |
||||||
|
} |
||||||
|
let v1 = vNew |
||||||
|
.replace('-', '.') |
||||||
|
.replace(/[^\d.]/g, '') |
||||||
|
.split('.'); |
||||||
|
let v2 = vOld |
||||||
|
.replace('-', '.') |
||||||
|
.replace(/[^\d.]/g, '') |
||||||
|
.split('.'); |
||||||
|
|
||||||
|
for (let i = 0; i < Math.max(v1.length, v2.length); i++) { |
||||||
|
let num1 = parseInt(v1[i] || 0); |
||||||
|
let num2 = parseInt(v2[i] || 0); |
||||||
|
|
||||||
|
if (num1 > num2) { |
||||||
|
return true; |
||||||
|
} else if (num1 < num2) { |
||||||
|
return false; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
return false; |
||||||
|
} |
||||||
|
|
||||||
|
defineExpose({ |
||||||
|
acceptParams, |
||||||
|
}); |
||||||
|
</script> |
||||||
Loading…
Reference in new issue