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

pull/7317/head
zhengkunwang 2024-12-10 17:55:39 +08:00 committed by GitHub
parent 06cc7fcc02
commit f01d770fec
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 45 additions and 7 deletions

View File

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