feat: 容器升级界面调整 (#3341)

frontend/src/lang/modules/en.ts

@@ -588,18 +588,13 @@ const message = {
         privilegedHelper:
             'Allows the container to perform certain privileged operations on the host, which may increase container risks. Use with caution!',
 
-        upgradeHelper: 'This operation only supports upgrading container versions.',
-        ignoreCompare: 'Force Upgrade',
-        ignoreCompareHelper:
-            'Skip the comparison between old and new versions, upgrade directly. This operation may result in service unavailability.',
-        upgradeWarning: 'The target version is lower than the original image version. Please try again!',
+        upgradeHelper: 'Repository Name/Image Name: Image Version',
         upgradeWarning2:
-            'The upgrade operation requires rebuilding the container, and any non-persistent data will be lost. Do you want to continue?',
-        oldImage: 'Current image',
-        targetImage: 'Target image',
-        imageLoadErr: 'System did not detect the container image name, please manually enter the full image name:tag ',
-        appHelper:
-            'This container is sourced from the application store. Upgrading it may cause the service to be unavailable.',
+            'The upgrade operation requires rebuilding the container, any unpersisted data will be lost. Do you wish to continue?',
+        oldImage: 'Current Image',
+        targetImage: 'Target Image',
+        imageLoadErr: 'No image name detected for the container',
+        appHelper: 'This container is sourced from the app store; upgrading might render the service unavailable',
 
         input: 'Input',
         forcePull: 'forced image pull ',
@@ -1367,7 +1362,6 @@ const message = {
         rollbackHelper:
             'This recovery is about to be rolled back, which will replace all the files recovered this time. In the process, docker and 1panel services may need to be restarted. Do you want to continue?',
 
-        upgrading: 'Please wait while the upgrade is underway...',
         upgradeHelper: 'The upgrade requires a service restart. Do you want to continue?',
         noUpgrade: 'It is currently the latest version',
         versionHelper:

frontend/src/lang/modules/tw.ts

@@ -571,14 +571,11 @@ const message = {
         privileged: '特權模式',
         privilegedHelper: '允許容器在主機上執行某些特權操作，可能會增加容器風險，請謹慎開啟！',
 
-        upgradeHelper: '該操作僅支持容器版本升級',
-        ignoreCompare: '強製升級',
-        ignoreCompareHelper: '跳過新老版本比較，直接升級，該操作可能導致服務不可用',
-        upgradeWarning: '當前目標版本低於原鏡像版本，請重新輸入！',
+        upgradeHelper: '倉庫名稱/鏡像名稱:鏡像版本',
         upgradeWarning2: '升級操作需要重建容器，任何未持久化的數據將會丟失，是否繼續？',
         oldImage: '當前鏡像',
         targetImage: '目標鏡像',
-        imageLoadErr: '系統未檢測到容器的鏡像名稱，請手動輸入完整的鏡像名稱:標籤',
+        imageLoadErr: '未檢測到容器的鏡像名稱',
         appHelper: '該容器來源於應用商店，升級可能導致該服務不可用',
 
         input: '手動輸入',

frontend/src/lang/modules/zh.ts

@@ -572,14 +572,11 @@ const message = {
         privileged: '特权模式',
         privilegedHelper: '允许容器在主机上执行某些特权操作，可能会增加容器风险，谨慎开启！',
 
-        upgradeHelper: '该操作仅支持容器版本升级',
-        ignoreCompare: '强制升级',
-        ignoreCompareHelper: '跳过新老版本比较，直接升级，该操作可能导致服务不可用',
-        upgradeWarning: '当前目标版本低于原镜像版本，请重新输入！',
+        upgradeHelper: '仓库名称/镜像名称:镜像版本',
         upgradeWarning2: '升级操作需要重建容器，任何未持久化的数据将会丢失，是否继续？',
         oldImage: '当前镜像',
         targetImage: '目标镜像',
-        imageLoadErr: '系统未检测到容器的镜像名称，请手动输入完整的镜像名称:标签',
+        imageLoadErr: '未检测到容器的镜像名称',
         appHelper: '该容器来源于应用商店，升级可能导致该服务不可用',
 
         input: '手动输入',

frontend/src/views/container/container/upgrade/index.vue

@@ -1,14 +1,14 @@
 <template>
     <el-drawer v-model="drawerVisible" :destroy-on-close="true" :close-on-click-modal="false" size="50%">
         <template #header>
-            <DrawerHeader :header="$t('commons.button.upgrade')" :resource="form.name" :back="handleClose" />
+            <DrawerHeader :header="$t('commons.button.upgrade')" :resource="form.containerName" :back="handleClose" />
         </template>
 
         <el-row v-loading="loading">
             <el-col :span="22" :offset="1">
                 <el-alert
-                    v-if="form.fromApp"
                     :title="$t('container.appHelper')"
+                    v-if="form.fromApp"
                     class="common-prompt"
                     :closable="false"
                     type="error"
@@ -26,30 +26,14 @@
                     </el-form-item>
                     <el-form-item prop="newImageName" :rules="Rules.imageName">
                         <template #label>
-                            <el-tooltip
-                                placement="top-start"
-                                :content="form.imageHelper"
-                                v-if="form.imageHelper.length > 40"
-                            >
-                                <span>
-                                    {{
-                                        $t('container.targetImage') + ' (' + form.imageHelper.substring(0, 40) + '...)'
-                                    }}
-                                </span>
-                            </el-tooltip>
-                            <span v-else>
-                                {{ $t('container.targetImage') + ' (' + form.imageHelper + ')' }}
+                            {{ $t('container.targetImage') }}
+                            <span v-if="!form.hasName">
+                                {{ ' (' + $t('container.imageLoadErr') + ')' }}
                             </span>
                         </template>
-                        <el-input v-model="form.newImageName" :placeholder="$t('container.imageNameHelper')" />
+                        <el-input v-model="form.newImageName" />
                         <span class="input-help">{{ $t('container.upgradeHelper') }}</span>
                     </el-form-item>
-                    <el-form-item prop="ignoreCompare">
-                        <el-checkbox v-model="form.ignoreCompare">
-                            {{ $t('container.ignoreCompare') }}
-                        </el-checkbox>
-                        <span class="input-help">{{ $t('container.ignoreCompareHelper') }}</span>
-                    </el-form-item>
                     <el-form-item prop="forcePull">
                         <el-checkbox v-model="form.forcePull">
                             {{ $t('container.forcePull') }}
@@ -76,7 +60,7 @@
 import { upgradeContainer } from '@/api/modules/container';
 import { Rules } from '@/global/form-rules';
 import i18n from '@/lang';
-import { MsgSuccess, MsgWarning } from '@/utils/message';
+import { MsgSuccess } from '@/utils/message';
 import { ElForm } from 'element-plus';
 import { reactive, ref } from 'vue';
 import DrawerHeader from '@/components/drawer-header/index.vue';
@@ -84,14 +68,13 @@ import DrawerHeader from '@/components/drawer-header/index.vue';
 const loading = ref(false);
 
 const form = reactive({
-    name: '',
+    containerName: '',
     oldImageName: '',
     newImageName: '',
-    imageHelper: '',
+    hasName: true,
+
     fromApp: false,
     forcePull: false,
-
-    ignoreCompare: false,
 });
 
 const formRef = ref<FormInstance>();
@@ -105,17 +88,13 @@ interface DialogProps {
     fromApp: boolean;
 }
 const acceptParams = (props: DialogProps): void => {
-    form.name = props.container;
+    form.containerName = props.container;
     form.oldImageName = props.image;
     form.fromApp = props.fromApp;
-    form.ignoreCompare = false;
-
-    if (props.image.indexOf('sha256:') !== -1) {
-        form.imageHelper = i18n.global.t('container.imageLoadErr');
-        drawerVisible.value = true;
-        return;
+    form.hasName = props.image.indexOf('sha256:') === -1;
+    if (form.hasName) {
+        form.newImageName = props.image;
     }
-    form.imageHelper = props.image.indexOf(':') !== -1 ? props.image.split(':')[0] : props.image;
     drawerVisible.value = true;
 };
 const emit = defineEmits<{ (e: 'search'): void }>();
@@ -124,16 +103,12 @@ const onSubmit = async (formEl: FormInstance | undefined) => {
     if (!formEl) return;
     formEl.validate(async (valid) => {
         if (!valid) return;
-        if (!form.ignoreCompare && !compareVersion(form.newImageName, form.oldImageName)) {
-            MsgWarning(i18n.global.t('container.upgradeWarning'));
-            return;
-        }
         ElMessageBox.confirm(i18n.global.t('container.upgradeWarning2'), i18n.global.t('commons.button.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.newImageName, form.forcePull)
+            await upgradeContainer(form.containerName, form.newImageName, form.forcePull)
                 .then(() => {
                     loading.value = false;
                     emit('search');
@@ -151,41 +126,6 @@ const handleClose = async () => {
     emit('search');
 };
 
-function compareVersion(vNew, vOld) {
-    let newImageName = vNew.indexOf(':') !== -1 ? vNew.split(':')[0] : vNew;
-    let oldImageName = vOld.indexOf(':') !== -1 ? vOld.split(':')[0] : vOld;
-    if (newImageName !== oldImageName) {
-        return true;
-    }
-    let newTag = vNew.indexOf(':') !== -1 ? vNew.split(':')[1] : 'latest';
-
-    if (newTag === 'latest') {
-        return true;
-    }
-    let oldTag = vOld.indexOf(':') !== -1 ? vOld.split(':')[1] : 'latest';
-    let v1 = newTag
-        .replace('-', '.')
-        .replace(/[^\d.]/g, '')
-        .split('.');
-    let v2 = oldTag
-        .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,
 });

frontend/src/views/container/image/pull/index.vue

@@ -36,7 +36,7 @@
                     :config="logConfig"
                     :default-button="false"
                     v-if="showLog"
-                    :style="'height: calc(100vh - 370px);min-height: 200px'"
+                    :style="'height: calc(100vh - 397px);min-height: 200px'"
                 />
             </el-col>
         </el-row>