diff --git a/backend/app/service/container_compose.go b/backend/app/service/container_compose.go index e415ec9e7..4cf67376c 100644 --- a/backend/app/service/container_compose.go +++ b/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() - _, _ = file.Write(stdout) - if err != nil { + multiWriter := io.MultiWriter(os.Stdout, file) + cmd.Stdout = multiWriter + 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!") diff --git a/frontend/src/lang/modules/en.ts b/frontend/src/lang/modules/en.ts index fb1fa989b..c274f47c8 100644 --- a/frontend/src/lang/modules/en.ts +++ b/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}', diff --git a/frontend/src/lang/modules/zh.ts b/frontend/src/lang/modules/zh.ts index 21d2904ee..282df4705 100644 --- a/frontend/src/lang/modules/zh.ts +++ b/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: '应用商店', diff --git a/frontend/src/views/container/compose/create/index.vue b/frontend/src/views/container/compose/create/index.vue index e7e1ea926..92953659b 100644 --- a/frontend/src/views/container/compose/create/index.vue +++ b/frontend/src/views/container/compose/create/index.vue @@ -14,7 +14,7 @@ - + {{ $t('commons.button.edit') }} {{ $t('container.pathSelect') }} {{ $t('container.composeTemplate') }} @@ -30,71 +30,71 @@ - - - - - {{ $t('container.composePathHelper', [composeFile]) }} - - - - + + + + + + + {{ $t('container.composePathHelper', [composeFile]) }} + + + + + + + + + + + + +
+ + {{ $t('commons.button.edit') }} + {{ $t('commons.button.log') }} + + - - - +
- - @@ -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 }); - logInfo.value = formatImageStdout(res.data); - nextTick(() => { - const state = view.value.state; - view.value.dispatch({ - selection: { anchor: state.doc.length, head: state.doc.length }, - scrollIntoView: true, - }); + const res = await LoadFile({ path: path }); + logInfo.value = formatImageStdout(res.data); + nextTick(() => { + const state = view.value.state; + view.value.dispatch({ + selection: { anchor: state.doc.length, head: state.doc.length }, + scrollIntoView: true, }); - if ( - logInfo.value.endsWith('docker-compose up failed!') || - logInfo.value.endsWith('docker-compose up successful!') - ) { - clearInterval(Number(timer)); - timer = null; - buttonDisabled.value = false; - } + }); + if ( + logInfo.value.endsWith('docker-compose up failed!') || + logInfo.value.endsWith('docker-compose up successful!') + ) { + onCreating.value = false; + clearInterval(Number(timer)); + timer = null; + buttonDisabled.value = false; } }, 1000 * 3); };