pref: 优化容器编排创建、镜像拉取等前端逻辑 (#5553)

Refs #5523
This commit is contained in:
ssongliu 2024-06-24 16:58:43 +08:00 committed by GitHub
parent 064fddb2ee
commit 6da38ee166
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 68 additions and 22 deletions

View File

@ -15,7 +15,7 @@
<el-col :span="22">
<el-form ref="formRef" @submit.prevent label-position="top" :model="form" :rules="rules">
<el-form-item :label="$t('container.from')">
<el-radio-group v-model="form.from" @change="changeFrom">
<el-radio-group v-model="form.from" @change="onEdit('form')">
<el-radio value="edit">{{ $t('commons.button.edit') }}</el-radio>
<el-radio value="path">{{ $t('container.pathSelect') }}</el-radio>
<el-radio value="template">{{ $t('container.composeTemplate') }}</el-radio>
@ -23,6 +23,7 @@
</el-form-item>
<el-form-item v-if="form.from === 'path'" prop="path">
<el-input
@change="onEdit('')"
:placeholder="$t('commons.example') + '/tmp/docker-compose.yml'"
v-model="form.path"
>
@ -32,7 +33,7 @@
</el-input>
</el-form-item>
<el-form-item v-if="form.from === 'template'" prop="template">
<el-select v-model="form.template" @change="changeTemplate">
<el-select v-model="form.template" @change="onEdit('template')">
<template #prefix>{{ $t('container.template') }}</template>
<el-option
v-for="item in templateOptions"
@ -43,7 +44,7 @@
</el-select>
</el-form-item>
<el-form-item v-if="form.from === 'edit' || form.from === 'template'" prop="name">
<el-input @input="changePath" v-model.trim="form.name">
<el-input @input="changePath" @change="onEdit('')" v-model.trim="form.name">
<template #prefix>
<span style="margin-right: 8px">{{ $t('file.dir') }}</span>
</template>
@ -59,6 +60,7 @@
<el-radio-button label="log">{{ $t('commons.button.log') }}</el-radio-button>
</el-radio-group>
<codemirror
@change="onEdit('')"
v-if="mode === 'edit'"
:autofocus="true"
placeholder="#Define or paste the content of your docker-compose file here"
@ -93,7 +95,7 @@
<el-button @click="drawerVisible = false">
{{ $t('commons.button.cancel') }}
</el-button>
<el-button type="primary" :disabled="isReading" @click="onSubmit(formRef)">
<el-button type="primary" :disabled="isStartReading || isReading" @click="onSubmit(formRef)">
{{ $t('commons.button.confirm') }}
</el-button>
</span>
@ -127,6 +129,7 @@ const baseDir = ref();
const composeFile = ref();
let timer: NodeJS.Timer | null = null;
const logRef = ref();
const isStartReading = ref(false);
const isReading = ref();
const logConfig = reactive({
@ -162,6 +165,7 @@ const acceptParams = (): void => {
form.template = null;
loadTemplates();
loadPath();
isStartReading.value = false;
};
const emit = defineEmits<{ (e: 'search'): void }>();
@ -219,6 +223,17 @@ const changePath = async () => {
type FormInstance = InstanceType<typeof ElForm>;
const formRef = ref<FormInstance>();
const onEdit = (item: string) => {
if (item === 'template') {
changeTemplate();
}
if (item === 'form') {
changeFrom();
}
if (!isReading.value && isStartReading.value) {
isStartReading.value = false;
}
};
const onSubmit = async (formEl: FormInstance | undefined) => {
if (!formEl) return;
formEl.validate(async (valid) => {
@ -237,6 +252,7 @@ const onSubmit = async (formEl: FormInstance | undefined) => {
.then((res) => {
logConfig.name = res.data;
loadLogs();
isStartReading.value = true;
})
.catch(() => {
loading.value = false;

View File

@ -17,13 +17,14 @@
<el-input :placeholder="$t('container.imageNameHelper')" v-model.trim="form.name" clearable />
</el-form-item>
<el-form-item label="Dockerfile" prop="from">
<el-radio-group v-model="form.from">
<el-radio-group @change="onEdit()" v-model="form.from">
<el-radio value="edit">{{ $t('commons.button.edit') }}</el-radio>
<el-radio value="path">{{ $t('container.pathSelect') }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="form.from === 'edit'" :rules="Rules.requiredInput">
<codemirror
@change="onEdit()"
:autofocus="true"
placeholder="#Define or paste the content of your Dockerfile here"
:indent-with-tab="true"
@ -39,7 +40,7 @@
/>
</el-form-item>
<el-form-item v-else :rules="Rules.requiredSelect" prop="dockerfile">
<el-input clearable v-model="form.dockerfile">
<el-input @change="onEdit()" clearable v-model="form.dockerfile">
<template #prepend>
<FileList @choose="loadBuildDir"></FileList>
</template>
@ -47,6 +48,7 @@
</el-form-item>
<el-form-item :label="$t('container.tag')">
<el-input
@change="onEdit()"
:placeholder="$t('container.tagHelper')"
type="textarea"
:rows="3"
@ -59,6 +61,7 @@
ref="logRef"
:config="logConfig"
:default-button="false"
v-model:is-reading="isReading"
v-if="logVisible"
:style="'height: calc(100vh - 370px);min-height: 200px'"
/>
@ -68,7 +71,7 @@
<template #footer>
<span class="dialog-footer">
<el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
<el-button :disabled="buttonDisabled" type="primary" @click="onSubmit(formRef)">
<el-button :disabled="isStartReading || isReading" type="primary" @click="onSubmit(formRef)">
{{ $t('commons.button.confirm') }}
</el-button>
</span>
@ -90,9 +93,10 @@ import DrawerHeader from '@/components/drawer-header/index.vue';
const logVisible = ref<boolean>(false);
const extensions = [javascript(), oneDark];
const buttonDisabled = ref(false);
const drawerVisible = ref(false);
const logRef = ref();
const isStartReading = ref(false);
const isReading = ref(false);
const logConfig = reactive({
type: 'image-build',
@ -118,7 +122,7 @@ const acceptParams = async () => {
form.dockerfile = '';
form.tagStr = '';
form.name = '';
buttonDisabled.value = false;
isStartReading.value = false;
};
const emit = defineEmits<{ (e: 'search'): void }>();
@ -130,6 +134,11 @@ const handleClose = () => {
type FormInstance = InstanceType<typeof ElForm>;
const formRef = ref<FormInstance>();
const onEdit = () => {
if (!isReading.value && isStartReading.value) {
isStartReading.value = false;
}
};
const onSubmit = async (formEl: FormInstance | undefined) => {
if (!formEl) return;
formEl.validate(async (valid) => {
@ -138,7 +147,7 @@ const onSubmit = async (formEl: FormInstance | undefined) => {
form.tags = form.tagStr.split('\n');
}
const res = await imageBuild(form);
buttonDisabled.value = true;
isStartReading.value = true;
logConfig.name = res.data;
loadLogs();
ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));

View File

@ -14,7 +14,9 @@
<el-col :span="22">
<el-form ref="formRef" label-position="top" :model="form">
<el-form-item :label="$t('container.from')">
<el-checkbox v-model="form.fromRepo">{{ $t('container.imageRepo') }}</el-checkbox>
<el-checkbox @change="onEdit()" v-model="form.fromRepo">
{{ $t('container.imageRepo') }}
</el-checkbox>
</el-form-item>
<el-form-item
v-if="form.fromRepo"
@ -22,12 +24,12 @@
:rules="Rules.requiredSelect"
prop="repoID"
>
<el-select clearable style="width: 100%" filterable v-model="form.repoID">
<el-select @change="onEdit()" clearable style="width: 100%" filterable v-model="form.repoID">
<el-option v-for="item in repos" :key="item.id" :value="item.id" :label="item.name" />
</el-select>
</el-form-item>
<el-form-item :label="$t('container.imageName')" :rules="Rules.imageName" prop="imageName">
<el-input v-model.trim="form.imageName">
<el-input @change="onEdit()" v-model.trim="form.imageName">
<template v-if="form.fromRepo" #prepend>{{ loadDetailInfo(form.repoID) }}/</template>
</el-input>
</el-form-item>
@ -36,6 +38,7 @@
ref="logRef"
:config="logConfig"
:default-button="false"
v-model:is-reading="isReading"
v-if="showLog"
:style="'height: calc(100vh - 397px);min-height: 200px'"
/>
@ -46,7 +49,7 @@
<el-button @click="drawerVisible = false">
{{ $t('commons.button.cancel') }}
</el-button>
<el-button :disabled="buttonDisabled" type="primary" @click="onSubmit(formRef)">
<el-button :disabled="isStartReading || isReading" type="primary" @click="onSubmit(formRef)">
{{ $t('container.pull') }}
</el-button>
</span>
@ -63,7 +66,6 @@ import { imagePull } from '@/api/modules/container';
import { Container } from '@/api/interface/container';
import DrawerHeader from '@/components/drawer-header/index.vue';
import { MsgSuccess } from '@/utils/message';
import LogFile from '@/components/log-file/index.vue';
const drawerVisible = ref(false);
const form = reactive({
@ -77,9 +79,10 @@ const logConfig = reactive({
});
const showLog = ref(false);
const logRef = ref();
const buttonDisabled = ref(false);
const logVisible = ref(false);
const logInfo = ref();
const isStartReading = ref(false);
const isReading = ref(false);
interface DialogProps {
repos: Array<Container.RepoOptions>;
@ -99,7 +102,7 @@ const acceptParams = async (params: DialogProps): Promise<void> => {
break;
}
}
buttonDisabled.value = false;
isStartReading.value = false;
logInfo.value = '';
showLog.value = false;
};
@ -108,6 +111,11 @@ const emit = defineEmits<{ (e: 'search'): void }>();
type FormInstance = InstanceType<typeof ElForm>;
const formRef = ref<FormInstance>();
const onEdit = () => {
if (!isReading.value && isStartReading.value) {
isStartReading.value = false;
}
};
const onSubmit = async (formEl: FormInstance | undefined) => {
if (!formEl) return;
formEl.validate(async (valid) => {
@ -117,7 +125,7 @@ const onSubmit = async (formEl: FormInstance | undefined) => {
}
const res = await imagePull(form);
logVisible.value = true;
buttonDisabled.value = true;
isStartReading.value = true;
logConfig.name = res.data;
search();
MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));

View File

@ -14,12 +14,12 @@
<el-col :span="22">
<el-form ref="formRef" label-position="top" :model="form" label-width="80px">
<el-form-item :label="$t('container.tag')" :rules="Rules.requiredSelect" prop="tagName">
<el-select filterable v-model="form.tagName" @change="form.name = form.tagName">
<el-select @change="onEdit(true)" filterable v-model="form.tagName">
<el-option v-for="item in form.tags" :key="item" :value="item" :label="item" />
</el-select>
</el-form-item>
<el-form-item :label="$t('container.repoName')" :rules="Rules.requiredSelect" prop="repoID">
<el-select clearable style="width: 100%" filterable v-model="form.repoID">
<el-select @change="onEdit()" clearable style="width: 100%" filterable v-model="form.repoID">
<el-option
v-for="item in dialogData.repos"
:key="item.id"
@ -29,7 +29,7 @@
</el-select>
</el-form-item>
<el-form-item :label="$t('container.image')" :rules="Rules.imageName" prop="name">
<el-input v-model.trim="form.name">
<el-input @change="onEdit()" v-model.trim="form.name">
<template #prepend>{{ loadDetailInfo(form.repoID) }}/</template>
</el-input>
</el-form-item>
@ -39,6 +39,7 @@
ref="logRef"
:config="logConfig"
:default-button="false"
v-model:is-reading="isReading"
v-if="logVisible"
:style="'height: calc(100vh - 370px);min-height: 200px'"
v-model:loading="loading"
@ -51,7 +52,7 @@
<el-button @click="drawerVisible = false">
{{ $t('commons.button.cancel') }}
</el-button>
<el-button :disabled="loading" type="primary" @click="onSubmit(formRef)">
<el-button :disabled="isStartReading || isReading" type="primary" @click="onSubmit(formRef)">
{{ $t('container.push') }}
</el-button>
</span>
@ -79,6 +80,8 @@ const form = reactive({
const logVisible = ref(false);
const loading = ref(false);
const isStartReading = ref(false);
const isReading = ref(false);
const logRef = ref();
const logConfig = reactive({
@ -104,18 +107,28 @@ const acceptParams = async (params: DialogProps): Promise<void> => {
form.tagName = form.tags.length !== 0 ? form.tags[0] : '';
form.name = form.tags.length !== 0 ? form.tags[0] : '';
dialogData.value.repos = params.repos;
isStartReading.value = false;
};
const emit = defineEmits<{ (e: 'search'): void }>();
type FormInstance = InstanceType<typeof ElForm>;
const formRef = ref<FormInstance>();
const onEdit = (isName?: boolean) => {
if (!isReading.value && isStartReading.value) {
isStartReading.value = false;
}
if (isName) {
form.name = form.tagName;
}
};
const onSubmit = async (formEl: FormInstance | undefined) => {
if (!formEl) return;
formEl.validate(async (valid) => {
if (!valid) return;
const res = await imagePush(form);
logVisible.value = true;
isStartReading.value = true;
logConfig.name = res.data;
loadLogs();
MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));