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

Refs #5523

frontend/src/views/container/compose/create/index.vue

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

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

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

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

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

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

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