fix: 编排创建样式调整、日志改为异步加载 (#794)

backend/app/service/container_compose.go

@@ -4,6 +4,7 @@ import (
 	"bufio"
 	"errors"
 	"fmt"
+	"io"
 	"os"
 	"os/exec"
 	"path"
@@ -154,9 +155,10 @@ func (u *ContainerService) CreateCompose(req dto.ComposeCreate) (string, error)
 	go func() {
 		defer file.Close()
 		cmd := exec.Command("docker-compose", "-f", req.Path, "up", "-d")
-		stdout, err := cmd.CombinedOutput()
+		multiWriter := io.MultiWriter(os.Stdout, file)
-		_, _ = file.Write(stdout)
+		cmd.Stdout = multiWriter
-		if err != nil {
+		cmd.Stderr = multiWriter
+		if err := cmd.Run(); err != nil {
 			global.LOG.Errorf("docker-compose up %s failed, err: %v", req.Name, err)
 			_, _ = compose.Down(req.Path)
 			_, _ = file.WriteString("docker-compose up failed!")

frontend/src/lang/modules/en.ts

@@ -539,6 +539,7 @@ const message = {
         registrieHelper: 'One in a row, for example:\n172.16.10.111:8081 \n172.16.10.112:8081',
 
         compose: 'Compose',
+        fromChangeHelper: 'Switching the source will clear the current edited content. Do you want to continue?',
         composeHelper:
             'The current content has passed the format verification. Please click Submit to complete the creation',
         composePathHelper: 'Config file save path: {0}',

frontend/src/lang/modules/zh.ts

@@ -556,6 +556,7 @@ const message = {
         registrieHelper: '一行一个，例：\n172.16.10.111:8081 \n172.16.10.112:8081',
 
         compose: '编排',
+        fromChangeHelper: '切换来源将清空当前已编辑内容，是否继续？',
         composeHelper: '当前内容已通过格式验证，请点击确认完成创建',
         composePathHelper: '配置文件保存路径: {0}',
         apps: '应用商店',

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

@@ -14,7 +14,7 @@
                 <el-col :span="22">
                     <el-form ref="formRef" label-position="top" :model="form" :rules="rules" label-width="80px">
                         <el-form-item :label="$t('container.from')">
-                            <el-radio-group v-model="form.from" @change="hasChecked = false">
+                            <el-radio-group v-model="form.from" @change="changeFrom">
                                 <el-radio label="edit">{{ $t('commons.button.edit') }}</el-radio>
                                 <el-radio label="path">{{ $t('container.pathSelect') }}</el-radio>
                                 <el-radio label="template">{{ $t('container.composeTemplate') }}</el-radio>
@@ -30,71 +30,71 @@
                                 </template>
                             </el-input>
                         </el-form-item>
-                        <el-form-item v-if="form.from === 'edit' || form.from === 'template'" prop="name">
+                        <el-row :gutter="20">
-                            <el-input @input="changePath" v-model.trim="form.name">
+                            <el-col :span="12">
-                                <template #prepend>{{ $t('file.dir') }}</template>
+                                <el-form-item v-if="form.from === 'edit' || form.from === 'template'" prop="name">
-                            </el-input>
+                                    <el-input @input="changePath" v-model.trim="form.name">
-                            <span class="input-help">{{ $t('container.composePathHelper', [composeFile]) }}</span>
+                                        <template #prepend>{{ $t('file.dir') }}</template>
-                        </el-form-item>
+                                    </el-input>
-                        <el-form-item v-if="form.from === 'template'" prop="template">
+                                    <span class="input-help">
-                            <el-select v-model="form.template" @change="hasChecked = false">
+                                        {{ $t('container.composePathHelper', [composeFile]) }}
-                                <el-option
+                                    </span>
-                                    v-for="item in templateOptions"
+                                </el-form-item>
-                                    :key="item.id"
+                            </el-col>
-                                    :value="item.id"
+                            <el-col :span="12">
-                                    :label="item.name"
+                                <el-form-item v-if="form.from === 'template'" prop="template">
+                                    <el-select v-model="form.template" @change="changeTemplate">
+                                        <el-option
+                                            v-for="item in templateOptions"
+                                            :key="item.id"
+                                            :value="item.id"
+                                            :label="item.name"
+                                        />
+                                    </el-select>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-form-item>
+                            <div v-if="form.from === 'edit' || form.from === 'template'" style="width: 100%">
+                                <el-radio-group v-model="mode" size="small">
+                                    <el-radio-button label="edit">{{ $t('commons.button.edit') }}</el-radio-button>
+                                    <el-radio-button label="log">{{ $t('commons.button.log') }}</el-radio-button>
+                                </el-radio-group>
+                                <codemirror
+                                    v-if="mode === 'edit'"
+                                    :autofocus="true"
+                                    placeholder="#Define or paste the content of your docker-compose file here"
+                                    :indent-with-tab="true"
+                                    :tabSize="4"
+                                    style="width: 100%; height: calc(100vh - 375px)"
+                                    :lineWrapping="true"
+                                    :matchBrackets="true"
+                                    theme="cobalt"
+                                    @change="hasChecked = false"
+                                    :styleActiveLine="true"
+                                    :extensions="extensions"
+                                    v-model="form.file"
+                                    :disabled="onCreating"
                                 />
-                            </el-select>
+                            </div>
-                        </el-form-item>
-                        <el-form-item v-if="form.from === 'edit'">
                             <codemirror
+                                v-if="mode === 'log'"
                                 :autofocus="true"
-                                placeholder="#Define or paste the content of your docker-compose file here"
+                                placeholder="Waiting for docker-compose up output..."
                                 :indent-with-tab="true"
                                 :tabSize="4"
-                                style="width: 100%; height: 250px"
+                                style="width: 100%; height: calc(100vh - 375px)"
                                 :lineWrapping="true"
                                 :matchBrackets="true"
                                 theme="cobalt"
-                                @change="hasChecked = false"
                                 :styleActiveLine="true"
                                 :extensions="extensions"
-                                v-model="form.file"
+                                @ready="handleReady"
+                                v-model="logInfo"
+                                :disabled="true"
                             />
                         </el-form-item>
                     </el-form>
-                    <codemirror
-                        v-if="logVisiable && form.from !== 'edit'"
-                        :autofocus="true"
-                        placeholder="Waiting for docker-compose up output..."
-                        :indent-with-tab="true"
-                        :tabSize="4"
-                        style="height: calc(100vh - 370px)"
-                        :lineWrapping="true"
-                        :matchBrackets="true"
-                        theme="cobalt"
-                        :styleActiveLine="true"
-                        :extensions="extensions"
-                        @ready="handleReady"
-                        v-model="logInfo"
-                        :readOnly="true"
-                    />
-                    <codemirror
-                        v-if="logVisiable && form.from === 'edit'"
-                        :autofocus="true"
-                        placeholder="Waiting for docker-compose up output..."
-                        :indent-with-tab="true"
-                        :tabSize="4"
-                        style="height: calc(100vh - 590px)"
-                        :lineWrapping="true"
-                        :matchBrackets="true"
-                        theme="cobalt"
-                        :styleActiveLine="true"
-                        :extensions="extensions"
-                        @ready="handleReady"
-                        v-model="logInfo"
-                        :readOnly="true"
-                    />
                 </el-col>
             </el-row>
         </div>
@@ -122,7 +122,7 @@ import { javascript } from '@codemirror/lang-javascript';
 import { oneDark } from '@codemirror/theme-one-dark';
 import { Rules } from '@/global/form-rules';
 import i18n from '@/lang';
-import { ElForm } from 'element-plus';
+import { ElForm, ElMessageBox } from 'element-plus';
 import DrawerHeader from '@/components/drawer-header/index.vue';
 import { listComposeTemplate, testCompose, upCompose } from '@/api/modules/container';
 import { loadBaseDir } from '@/api/modules/setting';
@@ -132,12 +132,15 @@ import { MsgSuccess } from '@/utils/message';
 
 const loading = ref();
 
+const mode = ref('edit');
+const onCreating = ref();
+const oldFrom = ref('edit');
+
 const extensions = [javascript(), oneDark];
 const view = shallowRef();
 const handleReady = (payload) => {
     view.value = payload.view;
 };
-const logVisiable = ref();
 const logInfo = ref();
 
 const drawerVisiable = ref(false);
@@ -161,14 +164,12 @@ const form = reactive({
 const rules = reactive({
     name: [Rules.requiredInput, Rules.imageName],
     path: [Rules.requiredSelect],
+    template: [Rules.requiredSelect],
 });
 
 const loadTemplates = async () => {
     const res = await listComposeTemplate();
     templateOptions.value = res.data;
-    if (templateOptions.value && templateOptions.value.length !== 0) {
-        form.template = templateOptions.value[0].id;
-    }
 };
 
 const acceptParams = (): void => {
@@ -177,7 +178,6 @@ const acceptParams = (): void => {
     form.from = 'edit';
     form.path = '';
     form.file = '';
-    logVisiable.value = false;
     hasChecked.value = false;
     logInfo.value = '';
     loadTemplates();
@@ -185,6 +185,44 @@ const acceptParams = (): void => {
 };
 const emit = defineEmits<{ (e: 'search'): void }>();
 
+const changeTemplate = () => {
+    hasChecked.value = false;
+    for (const item of templateOptions.value) {
+        if (form.template === item.id) {
+            form.file = item.content;
+            break;
+        }
+    }
+};
+
+const changeFrom = () => {
+    if ((oldFrom.value === 'edit' || oldFrom.value === 'template') && form.file) {
+        ElMessageBox.confirm(i18n.global.t('container.fromChangeHelper'), i18n.global.t('container.from'), {
+            confirmButtonText: i18n.global.t('commons.button.confirm'),
+            cancelButtonText: i18n.global.t('commons.button.cancel'),
+            type: 'info',
+        })
+            .then(() => {
+                hasChecked.value = false;
+                if (form.from === 'template') {
+                    if (!form.template && templateOptions.value && templateOptions.value.length !== 0) {
+                        form.template = templateOptions.value[0].id;
+                    }
+                    changeTemplate();
+                }
+                if (form.from === 'edit') {
+                    form.file = '';
+                }
+                oldFrom.value = form.from;
+            })
+            .catch(() => {
+                form.from = oldFrom.value;
+            });
+    } else {
+        oldFrom.value = form.from;
+    }
+};
+
 const handleClose = () => {
     emit('search');
     clearInterval(Number(timer));
@@ -210,6 +248,7 @@ const onTest = async (formEl: FormInstance | undefined) => {
     formEl.validate(async (valid) => {
         if (!valid) return;
         loading.value = true;
+        logInfo.value = '';
         await testCompose(form)
             .then((res) => {
                 loading.value = false;
@@ -228,34 +267,34 @@ const onSubmit = async (formEl: FormInstance | undefined) => {
     if (!formEl) return;
     formEl.validate(async (valid) => {
         if (!valid) return;
+        onCreating.value = true;
+        mode.value = 'log';
         const res = await upCompose(form);
         logInfo.value = '';
         buttonDisabled.value = true;
-        logVisiable.value = true;
         loadLogs(res.data);
     });
 };
 
 const loadLogs = async (path: string) => {
     timer = setInterval(async () => {
-        if (logVisiable.value) {
+        const res = await LoadFile({ path: path });
-            const res = await LoadFile({ path: path });
+        logInfo.value = formatImageStdout(res.data);
-            logInfo.value = formatImageStdout(res.data);
+        nextTick(() => {
-            nextTick(() => {
+            const state = view.value.state;
-                const state = view.value.state;
+            view.value.dispatch({
-                view.value.dispatch({
+                selection: { anchor: state.doc.length, head: state.doc.length },
-                    selection: { anchor: state.doc.length, head: state.doc.length },
+                scrollIntoView: true,
-                    scrollIntoView: true,
-                });
             });
-            if (
+        });
-                logInfo.value.endsWith('docker-compose up failed!') ||
+        if (
-                logInfo.value.endsWith('docker-compose up successful!')
+            logInfo.value.endsWith('docker-compose up failed!') ||
-            ) {
+            logInfo.value.endsWith('docker-compose up successful!')
-                clearInterval(Number(timer));
+        ) {
-                timer = null;
+            onCreating.value = false;
-                buttonDisabled.value = false;
+            clearInterval(Number(timer));
-            }
+            timer = null;
+            buttonDisabled.value = false;
         }
     }, 1000 * 3);
 };