feat: Fix Missing CPU and Memory Limit Warnings When Editing Installe… (

#7313)

frontend/src/views/app-store/installed/detail/index.vue

@@ -67,7 +67,11 @@
                             <el-checkbox v-model="paramModel.allowPort" :label="$t('app.allowPort')" size="large" />
                             <span class="input-help">{{ $t('app.allowPortHelper') }}</span>
                         </el-form-item>
-                        <el-form-item :label="$t('container.cpuQuota')" prop="cpuQuota">
+                        <el-form-item
+                            :label="$t('container.cpuQuota')"
+                            prop="cpuQuota"
+                            :rules="checkNumberRange(0, limits.cpu)"
+                        >
                             <el-input
                                 type="number"
                                 style="width: 40%"
@@ -76,19 +80,32 @@
                             >
                                 <template #append>{{ $t('app.cpuCore') }}</template>
                             </el-input>
-                            <span class="input-help">{{ $t('container.limitHelper') }}</span>
+                            <span class="input-help">
+                                {{ $t('container.limitHelper', [limits.cpu]) }} {{ $t('commons.units.core') }}
+                            </span>
                         </el-form-item>
-                        <el-form-item :label="$t('container.memoryLimit')" prop="memoryLimit">
+                        <el-form-item
+                            :label="$t('container.memoryLimit')"
+                            prop="memoryLimit"
+                            :rules="checkNumberRange(0, limits.memory)"
+                        >
                             <el-input style="width: 40%" v-model.number="paramModel.memoryLimit" maxlength="10">
                                 <template #append>
-                                    <el-select v-model="paramModel.memoryUnit" placeholder="Select" style="width: 85px">
+                                    <el-select
+                                        v-model="paramModel.memoryUnit"
+                                        placeholder="Select"
+                                        style="width: 85px"
+                                        @change="changeUnit"
+                                    >
                                         <el-option label="KB" value="K" />
                                         <el-option label="MB" value="M" />
                                         <el-option label="GB" value="G" />
                                     </el-select>
                                 </template>
                             </el-input>
-                            <span class="input-help">{{ $t('container.limitHelper') }}</span>
+                            <span class="input-help">
+                                {{ $t('container.limitHelper', [limits.memory]) }} {{ paramModel.memoryUnit }}B
+                            </span>
                         </el-form-item>
 
                         <el-form-item prop="editCompose">
@@ -137,6 +154,8 @@ import { Codemirror } from 'vue-codemirror';
 import { javascript } from '@codemirror/lang-javascript';
 import { oneDark } from '@codemirror/theme-one-dark';
 import { getLanguage } from '@/utils/util';
+import { Container } from '@/api/interface/container';
+import { loadResourceLimit } from '@/api/modules/container';
 
 const extensions = [javascript(), oneDark];
 
@@ -163,13 +182,32 @@ const paramModel = ref<any>({
 });
 const rules = reactive({
     params: {},
-    cpuQuota: [Rules.requiredInput, checkNumberRange(0, 999)],
-    memoryLimit: [Rules.requiredInput, checkNumberRange(0, 9999999999)],
     containerName: [Rules.containerName],
 });
 const submitModel = ref<any>({});
+const oldMemory = ref<number>(0);
+const limits = ref<Container.ResourceLimit>({
+    cpu: null as number,
+    memory: null as number,
+});
+
+const changeUnit = () => {
+    if (paramModel.value.memoryUnit == 'M') {
+        limits.value.memory = oldMemory.value;
+    } else {
+        limits.value.memory = Number((oldMemory.value / 1024).toFixed(2));
+    }
+};
+
+const loadLimit = async () => {
+    const res = await loadResourceLimit();
+    limits.value = res.data;
+    limits.value.memory = Number((limits.value.memory / 1024 / 1024).toFixed(2));
+    oldMemory.value = limits.value.memory;
+};
 
 const acceptParams = async (props: ParamProps) => {
+    loadLimit();
     submitModel.value.installId = props.id;
     params.value = [];
     paramData.value.id = props.id;