|
|
|
|
@ -9,12 +9,12 @@
|
|
|
|
|
<template #header> |
|
|
|
|
<DrawerHeader :header="$t('container.compose')" :back="handleClose" /> |
|
|
|
|
</template> |
|
|
|
|
<div> |
|
|
|
|
<div v-loading="loading"> |
|
|
|
|
<el-row type="flex" justify="center"> |
|
|
|
|
<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"> |
|
|
|
|
<el-radio-group v-model="form.from" @change="hasChecked = false"> |
|
|
|
|
<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> |
|
|
|
|
@ -37,7 +37,7 @@
|
|
|
|
|
<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"> |
|
|
|
|
<el-select v-model="form.template" @change="hasChecked = false"> |
|
|
|
|
<el-option |
|
|
|
|
v-for="item in templateOptions" |
|
|
|
|
:key="item.id" |
|
|
|
|
@ -52,10 +52,11 @@
|
|
|
|
|
placeholder="#Define or paste the content of your docker-compose file here" |
|
|
|
|
:indent-with-tab="true" |
|
|
|
|
:tabSize="4" |
|
|
|
|
style="width: 100%; height: 200px" |
|
|
|
|
style="width: 100%; height: 250px" |
|
|
|
|
:lineWrapping="true" |
|
|
|
|
:matchBrackets="true" |
|
|
|
|
theme="cobalt" |
|
|
|
|
@change="hasChecked = false" |
|
|
|
|
:styleActiveLine="true" |
|
|
|
|
:extensions="extensions" |
|
|
|
|
v-model="form.file" |
|
|
|
|
@ -63,12 +64,28 @@
|
|
|
|
|
</el-form-item> |
|
|
|
|
</el-form> |
|
|
|
|
<codemirror |
|
|
|
|
v-if="logVisiable" |
|
|
|
|
v-if="logVisiable && form.from !== 'edit'" |
|
|
|
|
:autofocus="true" |
|
|
|
|
placeholder="Waiting for build output..." |
|
|
|
|
placeholder="Waiting for docker-compose up output..." |
|
|
|
|
:indent-with-tab="true" |
|
|
|
|
:tabSize="4" |
|
|
|
|
style="max-height: calc(100vh - 537px)" |
|
|
|
|
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" |
|
|
|
|
@ -86,7 +103,10 @@
|
|
|
|
|
<el-button @click="drawerVisiable = false"> |
|
|
|
|
{{ $t('commons.button.cancel') }} |
|
|
|
|
</el-button> |
|
|
|
|
<el-button type="primary" :disabled="buttonDisabled" @click="onSubmit(formRef)"> |
|
|
|
|
<el-button :disabled="buttonDisabled" @click="onTest(formRef)"> |
|
|
|
|
{{ $t('commons.button.verify') }} |
|
|
|
|
</el-button> |
|
|
|
|
<el-button type="primary" :disabled="buttonDisabled || !hasChecked" @click="onSubmit(formRef)"> |
|
|
|
|
{{ $t('commons.button.confirm') }} |
|
|
|
|
</el-button> |
|
|
|
|
</span> |
|
|
|
|
@ -104,10 +124,13 @@ import { Rules } from '@/global/form-rules';
|
|
|
|
|
import i18n from '@/lang'; |
|
|
|
|
import { ElForm } from 'element-plus'; |
|
|
|
|
import DrawerHeader from '@/components/drawer-header/index.vue'; |
|
|
|
|
import { listComposeTemplate, upCompose } from '@/api/modules/container'; |
|
|
|
|
import { listComposeTemplate, testCompose, upCompose } from '@/api/modules/container'; |
|
|
|
|
import { loadBaseDir } from '@/api/modules/setting'; |
|
|
|
|
import { LoadFile } from '@/api/modules/files'; |
|
|
|
|
import { formatImageStdout } from '@/utils/docker'; |
|
|
|
|
import { MsgSuccess } from '@/utils/message'; |
|
|
|
|
|
|
|
|
|
const loading = ref(); |
|
|
|
|
|
|
|
|
|
const extensions = [javascript(), oneDark]; |
|
|
|
|
const view = shallowRef(); |
|
|
|
|
@ -124,14 +147,9 @@ const buttonDisabled = ref(false);
|
|
|
|
|
const baseDir = ref(); |
|
|
|
|
const composeFile = ref(); |
|
|
|
|
|
|
|
|
|
let timer: NodeJS.Timer | null = null; |
|
|
|
|
const hasChecked = ref(); |
|
|
|
|
|
|
|
|
|
const varifyPath = (rule: any, value: any, callback: any) => { |
|
|
|
|
if (value.indexOf('docker-compose.yml') === -1) { |
|
|
|
|
callback(new Error(i18n.global.t('commons.rule.selectHelper', ['docker-compose.yml']))); |
|
|
|
|
} |
|
|
|
|
callback(); |
|
|
|
|
}; |
|
|
|
|
let timer: NodeJS.Timer | null = null; |
|
|
|
|
|
|
|
|
|
const form = reactive({ |
|
|
|
|
name: '', |
|
|
|
|
@ -142,7 +160,7 @@ const form = reactive({
|
|
|
|
|
}); |
|
|
|
|
const rules = reactive({ |
|
|
|
|
name: [Rules.requiredInput, Rules.imageName], |
|
|
|
|
path: [Rules.requiredSelect, { validator: varifyPath, trigger: 'change', required: true }], |
|
|
|
|
path: [Rules.requiredSelect], |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
const loadTemplates = async () => { |
|
|
|
|
@ -160,6 +178,7 @@ const acceptParams = (): void => {
|
|
|
|
|
form.path = ''; |
|
|
|
|
form.file = ''; |
|
|
|
|
logVisiable.value = false; |
|
|
|
|
hasChecked.value = false; |
|
|
|
|
logInfo.value = ''; |
|
|
|
|
loadTemplates(); |
|
|
|
|
loadPath(); |
|
|
|
|
@ -186,6 +205,25 @@ const changePath = async () => {
|
|
|
|
|
type FormInstance = InstanceType<typeof ElForm>; |
|
|
|
|
const formRef = ref<FormInstance>(); |
|
|
|
|
|
|
|
|
|
const onTest = async (formEl: FormInstance | undefined) => { |
|
|
|
|
if (!formEl) return; |
|
|
|
|
formEl.validate(async (valid) => { |
|
|
|
|
if (!valid) return; |
|
|
|
|
loading.value = true; |
|
|
|
|
await testCompose(form) |
|
|
|
|
.then((res) => { |
|
|
|
|
loading.value = false; |
|
|
|
|
if (res.data) { |
|
|
|
|
MsgSuccess(i18n.global.t('container.composeHelper')); |
|
|
|
|
hasChecked.value = true; |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
.catch(() => { |
|
|
|
|
loading.value = false; |
|
|
|
|
}); |
|
|
|
|
}); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const onSubmit = async (formEl: FormInstance | undefined) => { |
|
|
|
|
if (!formEl) return; |
|
|
|
|
formEl.validate(async (valid) => { |
|
|
|
|
@ -224,6 +262,7 @@ const loadLogs = async (path: string) => {
|
|
|
|
|
|
|
|
|
|
const loadDir = async (path: string) => { |
|
|
|
|
form.path = path; |
|
|
|
|
hasChecked.value = false; |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
defineExpose({ |
|
|
|
|
|
ssongliu
2 years ago
committed by