github
/
1Panel
mirror of https://github.com/1Panel-dev/1Panel
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

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

pull/795/head
ssongliu 2 years ago committed by GitHub
parent
8a32d8032f
commit
0c09b12680
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 123 additions and 80 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      backend/app/service/container_compose.go
  2. 1
      frontend/src/lang/modules/en.ts
  3. 1
      frontend/src/lang/modules/zh.ts
  4. 193
      frontend/src/views/container/compose/create/index.vue

8
backend/app/service/container_compose.go
Unescape View File

@ -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!")

1
frontend/src/lang/modules/en.ts
Unescape View File

@ -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}',

1
frontend/src/lang/modules/zh.ts
Unescape View File

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

193
frontend/src/views/container/compose/create/index.vue
Unescape View File

@ -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-input @input="changePath" v-model.trim="form.name">
<template #prepend>{{ $t('file.dir') }}</template>
</el-input>
<span class="input-help">{{ $t('container.composePathHelper', [composeFile]) }}</span>
</el-form-item>
<el-form-item v-if="form.from === 'template'" prop="template">
<el-select v-model="form.template" @change="hasChecked = false">
<el-option
v-for="item in templateOptions"
:key="item.id"
:value="item.id"
:label="item.name"
<el-row :gutter="20">
<el-col :span="12">
<el-form-item v-if="form.from === 'edit' || form.from === 'template'" prop="name">
<el-input @input="changePath" v-model.trim="form.name">
<template #prepend>{{ $t('file.dir') }}</template>
</el-input>
<span class="input-help">
{{ $t('container.composePathHelper', [composeFile]) }}
</span>
</el-form-item>
</el-col>
<el-col :span="12">
<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>
</el-form-item>
<el-form-item v-if="form.from === 'edit'">
</div>
<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 });
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);
};

Write Preview
Loading…
Cancel
Save