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

feat: 数据库详情界面样式调整

pull/107/head
ssongliu 2023-02-01 14:02:20 +08:00 committed by ssongliu
parent 6ae7274095
commit d22b0a1368
30 changed files with 1361 additions and 1126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
backend/app/service/docker.go
View File

@ -40,11 +40,11 @@ type daemonJsonItem struct {
func (u *DockerService) LoadDockerStatus() string { func (u *DockerService) LoadDockerStatus() string {
status := constant.StatusRunning status := constant.StatusRunning
cmd := exec.Command("systemctl", "is-active", "docker") // cmd := exec.Command("systemctl", "is-active", "docker")
stdout, err := cmd.CombinedOutput() // stdout, err := cmd.CombinedOutput()
if string(stdout) != "active\n" || err != nil { // if string(stdout) != "active\n" || err != nil {
status = constant.Stopped // status = constant.Stopped
} // }
return status return status
} }

2
frontend/src/components/container-log/index.vue
View File

@ -17,7 +17,7 @@
placeholder="None data" placeholder="None data"
:indent-with-tab="true" :indent-with-tab="true"
:tabSize="4" :tabSize="4"
style="margin-top: 10px; max-height: 700px" style="margin-top: 10px; height: calc(100vh - 350px)"
:lineWrapping="true" :lineWrapping="true"
:matchBrackets="true" :matchBrackets="true"
theme="cobalt" theme="cobalt"

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

@ -596,7 +596,6 @@ export default {
batchInput: '批量输入', batchInput: '批量输入',
quickCommand: '快速命令', quickCommand: '快速命令',
groupDeleteHelper: '移除组后，组内所有连接将迁移到 default 组内，是否确认', groupDeleteHelper: '移除组后，组内所有连接将迁移到 default 组内，是否确认',
quickCmd: '快捷命令',
command: '命令', command: '命令',
addHost: '添加主机', addHost: '添加主机',
localhost: '本地服务器', localhost: '本地服务器',

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

@ -1,59 +1,66 @@
<template> <template>
<el-drawer v-model="composeVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="50%"> <el-drawer v-model="drawerVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="50%">
<template #header> <template #header>
<div class="card-header"> <DrawerHeader :header="$t('container.compose')" :back="handleClose" />
<span>{{ $t('container.compose') }}</span>
</div>
</template> </template>
<div v-loading="loading"> <div v-loading="loading">
<el-form ref="formRef" :model="form" :rules="rules" label-width="80px"> <el-form ref="formRef" label-position="top" :model="form" :rules="rules" label-width="80px">
<el-form-item :label="$t('container.name')" prop="name"> <el-row type="flex" justify="center">
<el-input v-model.trim="form.name"></el-input> <el-col :span="22">
</el-form-item> <el-form-item :label="$t('container.name')" prop="name">
<el-form-item :label="$t('container.from')"> <el-input v-model.trim="form.name"></el-input>
<el-radio-group v-model="form.from"> </el-form-item>
<el-radio label="edit">{{ $t('container.edit') }}</el-radio> <el-form-item :label="$t('container.from')">
<el-radio label="path">{{ $t('container.pathSelect') }}</el-radio> <el-radio-group v-model="form.from">
<el-radio label="template">{{ $t('container.composeTemplate') }}</el-radio> <el-radio label="edit">{{ $t('container.edit') }}</el-radio>
</el-radio-group> <el-radio label="path">{{ $t('container.pathSelect') }}</el-radio>
</el-form-item> <el-radio label="template">{{ $t('container.composeTemplate') }}</el-radio>
<el-form-item v-if="form.from === 'path'" prop="path"> </el-radio-group>
<el-input </el-form-item>
disabled <el-form-item v-if="form.from === 'path'" prop="path">
:placeholder="$t('commons.example') + '/tmp/docker-compose.yml'" <el-input
v-model="form.path" disabled
> :placeholder="$t('commons.example') + '/tmp/docker-compose.yml'"
<template #append> v-model="form.path"
<FileList @choose="loadDir" :dir="false"></FileList> >
</template> <template #append>
</el-input> <FileList @choose="loadDir" :dir="false"></FileList>
</el-form-item> </template>
<el-form-item v-if="form.from === 'template'" prop="template"> </el-input>
<el-select v-model="form.template"> </el-form-item>
<el-option v-for="item in templateOptions" :key="item.id" :value="item.id" :label="item.name" /> <el-form-item v-if="form.from === 'template'" prop="template">
</el-select> <el-select v-model="form.template">
</el-form-item> <el-option
<el-form-item v-if="form.from === 'edit'"> v-for="item in templateOptions"
<codemirror :key="item.id"
:autofocus="true" :value="item.id"
placeholder="#Define or paste the content of your docker-compose file here" :label="item.name"
:indent-with-tab="true" />
:tabSize="4" </el-select>
style="width: 100%; height: calc(100vh - 251px)" </el-form-item>
:lineWrapping="true" <el-form-item v-if="form.from === 'edit'">
:matchBrackets="true" <codemirror
theme="cobalt" :autofocus="true"
:styleActiveLine="true" placeholder="#Define or paste the content of your docker-compose file here"
:extensions="extensions" :indent-with-tab="true"
v-model="form.file" :tabSize="4"
:readOnly="true" style="width: 100%; height: calc(100vh - 351px)"
/> :lineWrapping="true"
</el-form-item> :matchBrackets="true"
theme="cobalt"
:styleActiveLine="true"
:extensions="extensions"
v-model="form.file"
:readOnly="true"
/>
</el-form-item>
</el-col>
</el-row>
</el-form> </el-form>
</div> </div>
<template #footer> <template #footer>
<span class="dialog-footer"> <span class="dialog-footer">
<el-button @click="composeVisiable = false">{{ $t('commons.button.cancel') }}</el-button> <el-button @click="drawerVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
<el-button type="primary" @click="onSubmit(formRef)"> <el-button type="primary" @click="onSubmit(formRef)">
{{ $t('commons.button.confirm') }} {{ $t('commons.button.confirm') }}
</el-button> </el-button>
@ -74,7 +81,7 @@ import { ElForm, ElMessage } from 'element-plus';
import { listComposeTemplate, upCompose } from '@/api/modules/container'; import { listComposeTemplate, upCompose } from '@/api/modules/container';
const extensions = [javascript(), oneDark]; const extensions = [javascript(), oneDark];
const composeVisiable = ref(false); const drawerVisiable = ref(false);
const templateOptions = ref(); const templateOptions = ref();
const loading = ref(false); const loading = ref(false);
@ -106,7 +113,7 @@ const loadTemplates = async () => {
}; };
const acceptParams = (): void => { const acceptParams = (): void => {
composeVisiable.value = true; drawerVisiable.value = true;
form.name = ''; form.name = '';
form.from = 'edit'; form.from = 'edit';
form.path = ''; form.path = '';
@ -115,6 +122,10 @@ const acceptParams = (): void => {
}; };
const emit = defineEmits<{ (e: 'search'): void }>(); const emit = defineEmits<{ (e: 'search'): void }>();
const handleClose = () => {
drawerVisiable.value = false;
};
type FormInstance = InstanceType<typeof ElForm>; type FormInstance = InstanceType<typeof ElForm>;
const formRef = ref<FormInstance>(); const formRef = ref<FormInstance>();
@ -128,7 +139,7 @@ const onSubmit = async (formEl: FormInstance | undefined) => {
ElMessage.success(i18n.global.t('commons.msg.operationSuccess')); ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
loading.value = false; loading.value = false;
emit('search'); emit('search');
composeVisiable.value = false; drawerVisiable.value = false;
}) })
.finally(() => { .finally(() => {
loading.value = false; loading.value = false;

367
frontend/src/views/container/container/create/index.vue
View File

@ -1,186 +1,195 @@
<template> <template>
<el-drawer v-model="createVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="50%"> <el-drawer v-model="drawerVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="50%">
<template #header> <template #header>
<div class="card-header"> <DrawerHeader :header="$t('container.createContainer')" :back="handleClose" />
<span>{{ $t('container.createContainer') }}</span>
</div>
</template> </template>
<el-form ref="formRef" v-loading="loading" :model="form" :rules="rules" label-width="80px"> <el-form ref="formRef" label-position="top" v-loading="loading" :model="form" :rules="rules" label-width="80px">
<el-form-item :label="$t('container.name')" prop="name"> <el-row type="flex" justify="center">
<el-input clearable v-model.trim="form.name" /> <el-col :span="22">
</el-form-item> <el-form-item :label="$t('container.name')" prop="name">
<el-form-item :label="$t('container.image')" prop="image"> <el-input clearable v-model.trim="form.name" />
<el-select style="width: 100%" filterable v-model="form.image"> </el-form-item>
<el-option v-for="(item, index) of images" :key="index" :value="item.option" :label="item.option" /> <el-form-item :label="$t('container.image')" prop="image">
</el-select> <el-select style="width: 100%" filterable v-model="form.image">
</el-form-item> <el-option
<el-form-item :label="$t('container.port')"> v-for="(item, index) of images"
<el-radio-group v-model="form.publishAllPorts" class="ml-4"> :key="index"
<el-radio :label="false">{{ $t('container.exposePort') }}</el-radio> :value="item.option"
<el-radio :label="true">{{ $t('container.exposeAll') }}</el-radio> :label="item.option"
</el-radio-group> />
</el-form-item>
<el-form-item v-if="!form.publishAllPorts">
<el-card style="width: 100%">
<table style="width: 100%" class="tab-table">
<tr v-if="form.exposedPorts.length !== 0">
<th scope="col" width="48%" align="left">
<label>{{ $t('container.serverPort') }}</label>
</th>
<th scope="col" width="48%" align="left">
<label>{{ $t('container.containerPort') }}</label>
</th>
<th align="left"></th>
</tr>
<tr v-for="(row, index) in form.exposedPorts" :key="index">
<td width="48%">
<el-input-number
:min="0"
:max="65535"
style="width: 100%"
controls-position="right"
v-model.number="row.hostPort"
/>
</td>
<td width="48%">
<el-input-number
:min="0"
:max="65535"
style="width: 100%"
controls-position="right"
v-model.number="row.containerPort"
/>
</td>
<td>
<el-button link style="font-size: 10px" @click="handlePortsDelete(index)">
{{ $t('commons.button.delete') }}
</el-button>
</td>
</tr>
<tr>
<td align="left">
<el-button @click="handlePortsAdd()">{{ $t('commons.button.add') }}</el-button>
</td>
</tr>
</table>
</el-card>
</el-form-item>
<el-form-item :label="$t('container.cmd')" prop="cmdStr">
<el-input
type="textarea"
:placeholder="$t('container.cmdHelper')"
:autosize="{ minRows: 2, maxRows: 4 }"
v-model="form.cmdStr"
/>
</el-form-item>
<el-form-item prop="autoRemove">
<el-checkbox v-model="form.autoRemove">{{ $t('container.autoRemove') }}</el-checkbox>
</el-form-item>
<el-form-item :label="$t('container.cpuQuota')" prop="nanoCPUs">
<el-input type="number" style="width: 40%" v-model.number="form.nanoCPUs">
<template #append>
<el-select v-model="form.cpuUnit" disabled style="width: 65px">
<el-option label="Core" value="Core" />
</el-select> </el-select>
</template> </el-form-item>
</el-input> <el-form-item :label="$t('container.port')">
<span class="input-help">{{ $t('container.limitHelper') }}</span> <el-radio-group v-model="form.publishAllPorts" class="ml-4">
</el-form-item> <el-radio :label="false">{{ $t('container.exposePort') }}</el-radio>
<el-form-item :label="$t('container.memoryLimit')" prop="memoryItem"> <el-radio :label="true">{{ $t('container.exposeAll') }}</el-radio>
<el-input style="width: 40%" v-model.number="form.memoryItem"> </el-radio-group>
<template #append> </el-form-item>
<el-select v-model="form.memoryUnit" placeholder="Select" style="width: 65px"> <el-form-item v-if="!form.publishAllPorts">
<el-option label="KB" value="KB" /> <el-card style="width: 100%">
<el-option label="MB" value="MB" /> <table style="width: 100%" class="tab-table">
<el-option label="GB" value="GB" /> <tr v-if="form.exposedPorts.length !== 0">
</el-select> <th scope="col" width="48%" align="left">
</template> <label>{{ $t('container.serverPort') }}</label>
</el-input> </th>
<span class="input-help">{{ $t('container.limitHelper') }}</span> <th scope="col" width="48%" align="left">
</el-form-item> <label>{{ $t('container.containerPort') }}</label>
<el-form-item :label="$t('container.mount')"> </th>
<el-card style="width: 100%"> <th align="left"></th>
<table style="width: 100%" class="tab-table"> </tr>
<tr v-if="form.volumes.length !== 0"> <tr v-for="(row, index) in form.exposedPorts" :key="index">
<th scope="col" width="42%" align="left"> <td width="48%">
<label>{{ $t('container.serverPath') }}</label> <el-input-number
</th> :min="0"
<th scope="col" width="12%" align="left"> :max="65535"
<label>{{ $t('container.mode') }}</label> style="width: 100%"
</th> controls-position="right"
<th scope="col" width="42%" align="left"> v-model.number="row.hostPort"
<label>{{ $t('container.containerDir') }}</label> />
</th> </td>
<th align="left"></th> <td width="48%">
</tr> <el-input-number
<tr v-for="(row, index) in form.volumes" :key="index"> :min="0"
<td width="42%"> :max="65535"
<el-select style="width: 100%"
style="width: 100%" controls-position="right"
allow-create v-model.number="row.containerPort"
clearable />
:placeholder="$t('commons.msg.inputOrSelect')" </td>
filterable <td>
v-model="row.sourceDir" <el-button link style="font-size: 10px" @click="handlePortsDelete(index)">
> {{ $t('commons.button.delete') }}
<el-option </el-button>
v-for="(item, indexV) of volumes" </td>
:key="indexV" </tr>
:value="item.option" <tr>
:label="item.option" <td align="left">
/> <el-button @click="handlePortsAdd()">{{ $t('commons.button.add') }}</el-button>
</td>
</tr>
</table>
</el-card>
</el-form-item>
<el-form-item :label="$t('container.cmd')" prop="cmdStr">
<el-input
type="textarea"
:placeholder="$t('container.cmdHelper')"
:autosize="{ minRows: 2, maxRows: 4 }"
v-model="form.cmdStr"
/>
</el-form-item>
<el-form-item prop="autoRemove">
<el-checkbox v-model="form.autoRemove">{{ $t('container.autoRemove') }}</el-checkbox>
</el-form-item>
<el-form-item :label="$t('container.cpuQuota')" prop="nanoCPUs">
<el-input type="number" style="width: 40%" v-model.number="form.nanoCPUs">
<template #append>
<el-select v-model="form.cpuUnit" disabled style="width: 65px">
<el-option label="Core" value="Core" />
</el-select> </el-select>
</td> </template>
<td width="12%"> </el-input>
<el-select style="width: 100%" filterable v-model="row.mode"> <span class="input-help">{{ $t('container.limitHelper') }}</span>
<el-option value="rw" :label="$t('container.modeRW')" /> </el-form-item>
<el-option value="ro" :label="$t('container.modeR')" /> <el-form-item :label="$t('container.memoryLimit')" prop="memoryItem">
<el-input style="width: 40%" v-model.number="form.memoryItem">
<template #append>
<el-select v-model="form.memoryUnit" placeholder="Select" style="width: 65px">
<el-option label="KB" value="KB" />
<el-option label="MB" value="MB" />
<el-option label="GB" value="GB" />
</el-select> </el-select>
</td> </template>
<td width="42%"> </el-input>
<el-input v-model="row.containerDir" /> <span class="input-help">{{ $t('container.limitHelper') }}</span>
</td> </el-form-item>
<td> <el-form-item :label="$t('container.mount')">
<el-button link style="font-size: 10px" @click="handleVolumesDelete(index)"> <el-card style="width: 100%">
{{ $t('commons.button.delete') }} <table style="width: 100%" class="tab-table">
</el-button> <tr v-if="form.volumes.length !== 0">
</td> <th scope="col" width="42%" align="left">
</tr> <label>{{ $t('container.serverPath') }}</label>
<tr> </th>
<td align="left"> <th scope="col" width="12%" align="left">
<el-button @click="handleVolumesAdd()">{{ $t('commons.button.add') }}</el-button> <label>{{ $t('container.mode') }}</label>
</td> </th>
</tr> <th scope="col" width="42%" align="left">
</table> <label>{{ $t('container.containerDir') }}</label>
</el-card> </th>
</el-form-item> <th align="left"></th>
<el-form-item :label="$t('container.tag')" prop="labelsStr"> </tr>
<el-input <tr v-for="(row, index) in form.volumes" :key="index">
type="textarea" <td width="42%">
:placeholder="$t('container.tagHelper')" <el-select
:autosize="{ minRows: 2, maxRows: 4 }" style="width: 100%"
v-model="form.labelsStr" allow-create
/> clearable
</el-form-item> :placeholder="$t('commons.msg.inputOrSelect')"
<el-form-item :label="$t('container.env')" prop="envStr"> filterable
<el-input v-model="row.sourceDir"
type="textarea" >
:placeholder="$t('container.tagHelper')" <el-option
:autosize="{ minRows: 2, maxRows: 4 }" v-for="(item, indexV) of volumes"
v-model="form.envStr" :key="indexV"
/> :value="item.option"
</el-form-item> :label="item.option"
<el-form-item :label="$t('container.restartPolicy')" prop="restartPolicy"> />
<el-radio-group v-model="form.restartPolicy"> </el-select>
<el-radio label="unless-stopped">{{ $t('container.unlessStopped') }}</el-radio> </td>
<el-radio label="on-failure">{{ $t('container.onFailure') }}</el-radio> <td width="12%">
<el-radio label="no">{{ $t('container.no') }}</el-radio> <el-select style="width: 100%" filterable v-model="row.mode">
</el-radio-group> <el-option value="rw" :label="$t('container.modeRW')" />
</el-form-item> <el-option value="ro" :label="$t('container.modeR')" />
</el-select>
</td>
<td width="42%">
<el-input v-model="row.containerDir" />
</td>
<td>
<el-button link style="font-size: 10px" @click="handleVolumesDelete(index)">
{{ $t('commons.button.delete') }}
</el-button>
</td>
</tr>
<tr>
<td align="left">
<el-button @click="handleVolumesAdd()">
{{ $t('commons.button.add') }}
</el-button>
</td>
</tr>
</table>
</el-card>
</el-form-item>
<el-form-item :label="$t('container.tag')" prop="labelsStr">
<el-input
type="textarea"
:placeholder="$t('container.tagHelper')"
:autosize="{ minRows: 2, maxRows: 4 }"
v-model="form.labelsStr"
/>
</el-form-item>
<el-form-item :label="$t('container.env')" prop="envStr">
<el-input
type="textarea"
:placeholder="$t('container.tagHelper')"
:autosize="{ minRows: 2, maxRows: 4 }"
v-model="form.envStr"
/>
</el-form-item>
<el-form-item :label="$t('container.restartPolicy')" prop="restartPolicy">
<el-radio-group v-model="form.restartPolicy">
<el-radio label="unless-stopped">{{ $t('container.unlessStopped') }}</el-radio>
<el-radio label="on-failure">{{ $t('container.onFailure') }}</el-radio>
<el-radio label="no">{{ $t('container.no') }}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
</el-form> </el-form>
<template #footer> <template #footer>
<span class="dialog-footer"> <span class="dialog-footer">
<el-button :disabled="loading" @click="createVisiable = false"> <el-button :disabled="loading" @click="drawerVisiable = false">
{{ $t('commons.button.cancel') }} {{ $t('commons.button.cancel') }}
</el-button> </el-button>
<el-button :disabled="loading" type="primary" @click="onSubmit(formRef)"> <el-button :disabled="loading" type="primary" @click="onSubmit(formRef)">
@ -201,7 +210,7 @@ import { Container } from '@/api/interface/container';
const loading = ref(false); const loading = ref(false);
const createVisiable = ref(false); const drawerVisiable = ref(false);
const form = reactive({ const form = reactive({
name: '', name: '',
image: '', image: '',
@ -226,13 +235,17 @@ const images = ref();
const volumes = ref(); const volumes = ref();
const acceptParams = (): void => { const acceptParams = (): void => {
createVisiable.value = true; drawerVisiable.value = true;
form.restartPolicy = 'no'; form.restartPolicy = 'no';
form.memoryUnit = 'MB'; form.memoryUnit = 'MB';
loadImageOptions(); loadImageOptions();
loadVolumeOptions(); loadVolumeOptions();
}; };
const handleClose = () => {
drawerVisiable.value = false;
};
const emit = defineEmits<{ (e: 'search'): void }>(); const emit = defineEmits<{ (e: 'search'): void }>();
const rules = reactive({ const rules = reactive({
@ -306,7 +319,7 @@ const onSubmit = async (formEl: FormInstance | undefined) => {
loading.value = false; loading.value = false;
ElMessage.success(i18n.global.t('commons.msg.operationSuccess')); ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
emit('search'); emit('search');
createVisiable.value = false; drawerVisiable.value = false;
}) })
.catch(() => { .catch(() => {
loading.value = false; loading.value = false;

117
frontend/src/views/container/image/build/index.vue
View File

@ -1,79 +1,81 @@
<template> <template>
<el-drawer <el-drawer
v-model="buildVisiable" v-model="drawerVisiable"
:destroy-on-close="true" :destroy-on-close="true"
@close="onCloseLog" @close="onCloseLog"
:close-on-click-modal="false" :close-on-click-modal="false"
size="50%" size="50%"
> >
<template #header> <template #header>
<div class="card-header"> <DrawerHeader :header="$t('container.imageBuild')" :back="handleClose" />
<span>{{ $t('container.imageBuild') }}</span>
</div>
</template> </template>
<el-form ref="formRef" :model="form" label-width="80px" :rules="rules"> <el-row type="flex" justify="center">
<el-form-item :label="$t('container.name')" prop="name"> <el-col :span="22">
<el-input :placeholder="$t('container.imageNameHelper')" v-model.trim="form.name" clearable /> <el-form ref="formRef" label-position="top" :model="form" label-width="80px" :rules="rules">
</el-form-item> <el-form-item :label="$t('container.name')" prop="name">
<el-form-item label="Dockerfile" prop="from"> <el-input :placeholder="$t('container.imageNameHelper')" v-model.trim="form.name" clearable />
<el-radio-group v-model="form.from"> </el-form-item>
<el-radio label="edit">{{ $t('container.edit') }}</el-radio> <el-form-item label="Dockerfile" prop="from">
<el-radio label="path">{{ $t('container.pathSelect') }}</el-radio> <el-radio-group v-model="form.from">
</el-radio-group> <el-radio label="edit">{{ $t('container.edit') }}</el-radio>
</el-form-item> <el-radio label="path">{{ $t('container.pathSelect') }}</el-radio>
<el-form-item v-if="form.from === 'edit'" :rules="Rules.requiredInput"> </el-radio-group>
</el-form-item>
<el-form-item v-if="form.from === 'edit'" :rules="Rules.requiredInput">
<codemirror
:autofocus="true"
placeholder="#Define or paste the content of your Dockerfile here"
:indent-with-tab="true"
:tabSize="4"
style="width: 100%; height: calc(100vh - 520px)"
:lineWrapping="true"
:matchBrackets="true"
theme="cobalt"
:styleActiveLine="true"
:extensions="extensions"
v-model="form.dockerfile"
:readOnly="true"
/>
</el-form-item>
<el-form-item v-else :rules="Rules.requiredSelect" prop="dockerfile">
<el-input clearable v-model="form.dockerfile">
<template #append>
<FileList @choose="loadBuildDir" :dir="true"></FileList>
</template>
</el-input>
</el-form-item>
<el-form-item :label="$t('container.tag')">
<el-input
:placeholder="$t('container.tagHelper')"
type="textarea"
:autosize="{ minRows: 2, maxRows: 4 }"
v-model="form.tagStr"
/>
</el-form-item>
</el-form>
<codemirror <codemirror
v-if="logVisiable"
:autofocus="true" :autofocus="true"
placeholder="#Define or paste the content of your Dockerfile here" placeholder="Waiting for build output..."
:indent-with-tab="true" :indent-with-tab="true"
:tabSize="4" :tabSize="4"
style="width: 100%; height: calc(100vh - 350px)" style="max-height: 300px"
:lineWrapping="true" :lineWrapping="true"
:matchBrackets="true" :matchBrackets="true"
theme="cobalt" theme="cobalt"
:styleActiveLine="true" :styleActiveLine="true"
:extensions="extensions" :extensions="extensions"
v-model="form.dockerfile" @ready="handleReady"
v-model="logInfo"
:readOnly="true" :readOnly="true"
/> />
</el-form-item> </el-col>
<el-form-item v-else :rules="Rules.requiredSelect" prop="dockerfile"> </el-row>
<el-input clearable v-model="form.dockerfile">
<template #append>
<FileList @choose="loadBuildDir" :dir="true"></FileList>
</template>
</el-input>
</el-form-item>
<el-form-item :label="$t('container.tag')">
<el-input
:placeholder="$t('container.tagHelper')"
type="textarea"
:autosize="{ minRows: 2, maxRows: 4 }"
v-model="form.tagStr"
/>
</el-form-item>
</el-form>
<codemirror
v-if="logVisiable"
:autofocus="true"
placeholder="Waiting for build output..."
:indent-with-tab="true"
:tabSize="4"
style="max-height: 300px"
:lineWrapping="true"
:matchBrackets="true"
theme="cobalt"
:styleActiveLine="true"
:extensions="extensions"
@ready="handleReady"
v-model="logInfo"
:readOnly="true"
/>
<template #footer> <template #footer>
<span class="dialog-footer"> <span class="dialog-footer">
<el-button :disabled="buttonDisabled" @click="buildVisiable = false"> <el-button :disabled="buttonDisabled" @click="drawerVisiable = false">
{{ $t('commons.button.cancel') }} {{ $t('commons.button.cancel') }}
</el-button> </el-button>
<el-button :disabled="buttonDisabled" type="primary" @click="onSubmit(formRef)"> <el-button :disabled="buttonDisabled" type="primary" @click="onSubmit(formRef)">
@ -107,7 +109,7 @@ let timer: NodeJS.Timer | null = null;
const buttonDisabled = ref(false); const buttonDisabled = ref(false);
const buildVisiable = ref(false); const drawerVisiable = ref(false);
const form = reactive({ const form = reactive({
from: 'path', from: 'path',
dockerfile: '', dockerfile: '',
@ -127,7 +129,7 @@ const rules = reactive({
dockerfile: [Rules.requiredInput, { validator: varifyPath, trigger: 'change', required: true }], dockerfile: [Rules.requiredInput, { validator: varifyPath, trigger: 'change', required: true }],
}); });
const acceptParams = async () => { const acceptParams = async () => {
buildVisiable.value = true; drawerVisiable.value = true;
form.from = 'path'; form.from = 'path';
form.dockerfile = ''; form.dockerfile = '';
form.tagStr = ''; form.tagStr = '';
@ -135,9 +137,12 @@ const acceptParams = async () => {
logInfo.value = ''; logInfo.value = '';
buttonDisabled.value = false; buttonDisabled.value = false;
}; };
const emit = defineEmits<{ (e: 'search'): void }>(); const emit = defineEmits<{ (e: 'search'): void }>();
const handleClose = () => {
drawerVisiable.value = false;
};
type FormInstance = InstanceType<typeof ElForm>; type FormInstance = InstanceType<typeof ElForm>;
const formRef = ref<FormInstance>(); const formRef = ref<FormInstance>();

92
frontend/src/views/container/image/pull/index.vue
View File

@ -1,56 +1,58 @@
<template> <template>
<el-drawer <el-drawer
v-model="pullVisiable" v-model="drawerVisiable"
@close="onCloseLog" @close="onCloseLog"
:destroy-on-close="true" :destroy-on-close="true"
:close-on-click-modal="false" :close-on-click-modal="false"
size="50%" size="50%"
> >
<template #header> <template #header>
<div class="card-header"> <DrawerHeader :header="$t('container.imagePull')" :back="handleClose" />
<span>{{ $t('container.imagePull') }}</span>
</div>
</template> </template>
<el-form ref="formRef" :model="form" label-width="80px"> <el-row type="flex" justify="center">
<el-form-item :label="$t('container.from')"> <el-col :span="22">
<el-checkbox v-model="form.fromRepo">{{ $t('container.imageRepo') }}</el-checkbox> <el-form ref="formRef" label-position="top" :model="form" label-width="80px">
</el-form-item> <el-form-item :label="$t('container.from')">
<el-form-item <el-checkbox v-model="form.fromRepo">{{ $t('container.imageRepo') }}</el-checkbox>
v-if="form.fromRepo" </el-form-item>
:label="$t('container.repoName')" <el-form-item
:rules="Rules.requiredSelect" v-if="form.fromRepo"
prop="repoID" :label="$t('container.repoName')"
> :rules="Rules.requiredSelect"
<el-select style="width: 100%" filterable v-model="form.repoID"> prop="repoID"
<el-option v-for="item in repos" :key="item.id" :value="item.id" :label="item.name" /> >
</el-select> <el-select style="width: 100%" filterable v-model="form.repoID">
</el-form-item> <el-option v-for="item in repos" :key="item.id" :value="item.id" :label="item.name" />
<el-form-item :label="$t('container.imageName')" :rules="Rules.requiredInput" prop="imageName"> </el-select>
<el-input v-model.trim="form.imageName"> </el-form-item>
<template v-if="form.fromRepo" #prepend>{{ loadDetailInfo(form.repoID) }}/</template> <el-form-item :label="$t('container.imageName')" :rules="Rules.requiredInput" prop="imageName">
</el-input> <el-input v-model.trim="form.imageName">
</el-form-item> <template v-if="form.fromRepo" #prepend>{{ loadDetailInfo(form.repoID) }}/</template>
</el-form> </el-input>
</el-form-item>
</el-form>
<codemirror <codemirror
v-if="logVisiable" v-if="logVisiable"
:autofocus="true" :autofocus="true"
placeholder="Waiting for pull output..." placeholder="Waiting for pull output..."
:indent-with-tab="true" :indent-with-tab="true"
:tabSize="4" :tabSize="4"
style="max-height: 300px" style="height: calc(100vh - 415px)"
:lineWrapping="true" :lineWrapping="true"
:matchBrackets="true" :matchBrackets="true"
theme="cobalt" theme="cobalt"
:styleActiveLine="true" :styleActiveLine="true"
:extensions="extensions" :extensions="extensions"
@ready="handleReady" @ready="handleReady"
v-model="logInfo" v-model="logInfo"
:readOnly="true" :readOnly="true"
/> />
</el-col>
</el-row>
<template #footer> <template #footer>
<span class="dialog-footer"> <span class="dialog-footer">
<el-button :disabled="buttonDisabled" @click="pullVisiable = false"> <el-button :disabled="buttonDisabled" @click="drawerVisiable = false">
{{ $t('commons.button.cancel') }} {{ $t('commons.button.cancel') }}
</el-button> </el-button>
<el-button :disabled="buttonDisabled" type="primary" @click="onSubmit(formRef)"> <el-button :disabled="buttonDisabled" type="primary" @click="onSubmit(formRef)">
@ -73,7 +75,7 @@ import { javascript } from '@codemirror/lang-javascript';
import { oneDark } from '@codemirror/theme-one-dark'; import { oneDark } from '@codemirror/theme-one-dark';
import { LoadFile } from '@/api/modules/files'; import { LoadFile } from '@/api/modules/files';
const pullVisiable = ref(false); const drawerVisiable = ref(false);
const form = reactive({ const form = reactive({
fromRepo: true, fromRepo: true,
repoID: null as number, repoID: null as number,
@ -97,7 +99,7 @@ interface DialogProps {
const repos = ref(); const repos = ref();
const acceptParams = async (params: DialogProps): Promise<void> => { const acceptParams = async (params: DialogProps): Promise<void> => {
pullVisiable.value = true; drawerVisiable.value = true;
form.fromRepo = true; form.fromRepo = true;
form.imageName = ''; form.imageName = '';
repos.value = params.repos; repos.value = params.repos;
@ -107,6 +109,10 @@ const acceptParams = async (params: DialogProps): Promise<void> => {
const emit = defineEmits<{ (e: 'search'): void }>(); const emit = defineEmits<{ (e: 'search'): void }>();
const handleClose = () => {
drawerVisiable.value = false;
};
type FormInstance = InstanceType<typeof ElForm>; type FormInstance = InstanceType<typeof ElForm>;
const formRef = ref<FormInstance>(); const formRef = ref<FormInstance>();

93
frontend/src/views/container/image/push/index.vue
View File

@ -1,53 +1,61 @@
<template> <template>
<el-drawer <el-drawer
v-model="pushVisiable" v-model="drawerVisiable"
@close="onCloseLog" @close="onCloseLog"
:destroy-on-close="true" :destroy-on-close="true"
:close-on-click-modal="false" :close-on-click-modal="false"
size="50%" size="50%"
> >
<template #header> <template #header>
<div class="card-header"> <DrawerHeader :header="$t('container.imagePush')" :back="handleClose" />
<span>{{ $t('container.imagePush') }}</span>
</div>
</template> </template>
<el-form ref="formRef" :model="form" label-width="80px"> <el-row type="flex" justify="center">
<el-form-item label="Tag" :rules="Rules.requiredSelect" prop="tagName"> <el-col :span="22">
<el-select filterable v-model="form.tagName"> <el-form ref="formRef" label-position="top" :model="form" label-width="80px">
<el-option v-for="item in form.tags" :key="item" :value="item" :label="item" /> <el-form-item label="Tag" :rules="Rules.requiredSelect" prop="tagName">
</el-select> <el-select filterable v-model="form.tagName">
</el-form-item> <el-option v-for="item in form.tags" :key="item" :value="item" :label="item" />
<el-form-item :label="$t('container.repoName')" :rules="Rules.requiredSelect" prop="repoID"> </el-select>
<el-select style="width: 100%" filterable v-model="form.repoID"> </el-form-item>
<el-option v-for="item in dialogData.repos" :key="item.id" :value="item.id" :label="item.name" /> <el-form-item :label="$t('container.repoName')" :rules="Rules.requiredSelect" prop="repoID">
</el-select> <el-select style="width: 100%" filterable v-model="form.repoID">
</el-form-item> <el-option
<el-form-item :label="$t('container.label')" :rules="Rules.requiredInput" prop="name"> v-for="item in dialogData.repos"
<el-input v-model.trim="form.name"> :key="item.id"
<template #prepend>{{ loadDetailInfo(form.repoID) }}/</template> :value="item.id"
</el-input> :label="item.name"
</el-form-item> />
</el-form> </el-select>
</el-form-item>
<el-form-item :label="$t('container.label')" :rules="Rules.requiredInput" prop="name">
<el-input v-model.trim="form.name">
<template #prepend>{{ loadDetailInfo(form.repoID) }}/</template>
</el-input>
</el-form-item>
</el-form>
<codemirror
v-if="logVisiable"
:autofocus="true"
placeholder="Waiting for push output..."
:indent-with-tab="true"
:tabSize="4"
style="height: calc(100vh - 415px)"
:lineWrapping="true"
:matchBrackets="true"
theme="cobalt"
:styleActiveLine="true"
:extensions="extensions"
@ready="handleReady"
v-model="logInfo"
:readOnly="true"
/>
</el-col>
</el-row>
<codemirror
v-if="logVisiable"
:autofocus="true"
placeholder="Waiting for push output..."
:indent-with-tab="true"
:tabSize="4"
style="height: calc(100vh - 301px)"
:lineWrapping="true"
:matchBrackets="true"
theme="cobalt"
:styleActiveLine="true"
:extensions="extensions"
@ready="handleReady"
v-model="logInfo"
:readOnly="true"
/>
<template #footer> <template #footer>
<span class="dialog-footer"> <span class="dialog-footer">
<el-button :disabled="buttonDisabled" @click="pushVisiable = false"> <el-button :disabled="buttonDisabled" @click="drawerVisiable = false">
{{ $t('commons.button.cancel') }} {{ $t('commons.button.cancel') }}
</el-button> </el-button>
<el-button :disabled="buttonDisabled" type="primary" @click="onSubmit(formRef)"> <el-button :disabled="buttonDisabled" type="primary" @click="onSubmit(formRef)">
@ -70,7 +78,7 @@ import { javascript } from '@codemirror/lang-javascript';
import { oneDark } from '@codemirror/theme-one-dark'; import { oneDark } from '@codemirror/theme-one-dark';
import { LoadFile } from '@/api/modules/files'; import { LoadFile } from '@/api/modules/files';
const pushVisiable = ref(false); const drawerVisiable = ref(false);
const form = reactive({ const form = reactive({
tags: [] as Array<string>, tags: [] as Array<string>,
tagName: '', tagName: '',
@ -99,16 +107,19 @@ const dialogData = ref<DialogProps>({
}); });
const acceptParams = async (params: DialogProps): Promise<void> => { const acceptParams = async (params: DialogProps): Promise<void> => {
pushVisiable.value = true; drawerVisiable.value = true;
form.tags = params.tags; form.tags = params.tags;
form.repoID = 1; form.repoID = 1;
form.tagName = ''; form.tagName = '';
form.name = ''; form.name = '';
dialogData.value.repos = params.repos; dialogData.value.repos = params.repos;
}; };
const emit = defineEmits<{ (e: 'search'): void }>(); const emit = defineEmits<{ (e: 'search'): void }>();
const handleClose = () => {
drawerVisiable.value = false;
};
type FormInstance = InstanceType<typeof ElForm>; type FormInstance = InstanceType<typeof ElForm>;
const formRef = ref<FormInstance>(); const formRef = ref<FormInstance>();

72
frontend/src/views/container/image/save/index.vue
View File

@ -1,38 +1,41 @@
<template> <template>
<el-drawer v-model="saveVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="50%"> <el-drawer v-model="drawerVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="50%">
<template #header> <template #header>
<div class="card-header"> <DrawerHeader :header="$t('container.exportImage')" :back="handleClose" />
<span>{{ $t('container.exportImage') }}</span>
</div>
</template> </template>
<el-form v-loading="loading" ref="formRef" :model="form" label-width="80px"> <el-form v-loading="loading" label-position="top" ref="formRef" :model="form" label-width="80px">
<el-form-item label="Tag" :rules="Rules.requiredSelect" prop="tagName"> <el-row type="flex" justify="center">
<el-select filterable v-model="form.tagName"> <el-col :span="22">
<el-option <el-form-item label="Tag" :rules="Rules.requiredSelect" prop="tagName">
:disabled="item.indexOf(':<none>') !== -1" <el-select filterable v-model="form.tagName">
v-for="item in form.tags" <el-option
:key="item" :disabled="item.indexOf(':<none>') !== -1"
:value="item" v-for="item in form.tags"
:label="item" :key="item"
/> :value="item"
</el-select> :label="item"
</el-form-item> />
<el-form-item :label="$t('container.path')" :rules="Rules.requiredSelect" prop="path"> </el-select>
<el-input disabled v-model="form.path"> </el-form-item>
<template #append> <el-form-item :label="$t('container.path')" :rules="Rules.requiredSelect" prop="path">
<FileList @choose="loadSaveDir" :dir="true"></FileList> <el-input disabled v-model="form.path">
</template> <template #append>
</el-input> <FileList @choose="loadSaveDir" :dir="true"></FileList>
</el-form-item> </template>
<el-form-item :label="$t('container.fileName')" :rules="Rules.requiredInput" prop="name"> </el-input>
<el-input v-model="form.name"> </el-form-item>
<template #append>.tar</template> <el-form-item :label="$t('container.fileName')" :rules="Rules.requiredInput" prop="name">
</el-input> <el-input v-model="form.name">
</el-form-item> <template #append>.tar</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
</el-form> </el-form>
<template #footer> <template #footer>
<span class="dialog-footer"> <span class="dialog-footer">
<el-button :disabeld="loading" @click="saveVisiable = false"> <el-button :disabeld="loading" @click="drawerVisiable = false">
{{ $t('commons.button.cancel') }} {{ $t('commons.button.cancel') }}
</el-button> </el-button>
<el-button :disabeld="loading" type="primary" @click="onSubmit(formRef)"> <el-button :disabeld="loading" type="primary" @click="onSubmit(formRef)">
@ -54,7 +57,7 @@ import { Container } from '@/api/interface/container';
const loading = ref(false); const loading = ref(false);
const saveVisiable = ref(false); const drawerVisiable = ref(false);
const form = reactive({ const form = reactive({
tags: [] as Array<string>, tags: [] as Array<string>,
tagName: '', tagName: '',
@ -72,16 +75,19 @@ const dialogData = ref<DialogProps>({
}); });
const acceptParams = async (params: DialogProps): Promise<void> => { const acceptParams = async (params: DialogProps): Promise<void> => {
saveVisiable.value = true; drawerVisiable.value = true;
form.tags = params.tags; form.tags = params.tags;
form.path = ''; form.path = '';
form.tagName = ''; form.tagName = '';
form.name = ''; form.name = '';
dialogData.value.repos = params.repos; dialogData.value.repos = params.repos;
}; };
const emit = defineEmits<{ (e: 'search'): void }>(); const emit = defineEmits<{ (e: 'search'): void }>();
const handleClose = () => {
drawerVisiable.value = false;
};
type FormInstance = InstanceType<typeof ElForm>; type FormInstance = InstanceType<typeof ElForm>;
const formRef = ref<FormInstance>(); const formRef = ref<FormInstance>();
@ -93,7 +99,7 @@ const onSubmit = async (formEl: FormInstance | undefined) => {
await imageSave(form) await imageSave(form)
.then(() => { .then(() => {
loading.value = false; loading.value = false;
saveVisiable.value = false; drawerVisiable.value = false;
emit('search'); emit('search');
ElMessage.success(i18n.global.t('commons.msg.operationSuccess')); ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
}) })

62
frontend/src/views/container/image/tag/index.vue
View File

@ -1,33 +1,36 @@
<template> <template>
<el-drawer v-model="tagVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="30%"> <el-drawer v-model="drawerVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="50%">
<template #header> <template #header>
<div class="card-header"> <DrawerHeader :header="'Tag ' + $t('container.image')" :back="handleClose" />
<span>Tag {{ $t('container.image') }}</span>
</div>
</template> </template>
<el-form v-loading="loading" ref="formRef" :model="form" label-width="80px"> <el-form v-loading="loading" label-position="top" ref="formRef" :model="form" label-width="80px">
<el-form-item :label="$t('container.from')"> <el-row type="flex" justify="center">
<el-checkbox v-model="form.fromRepo">{{ $t('container.imageRepo') }}</el-checkbox> <el-col :span="22">
</el-form-item> <el-form-item :label="$t('container.from')">
<el-form-item <el-checkbox v-model="form.fromRepo">{{ $t('container.imageRepo') }}</el-checkbox>
v-if="form.fromRepo" </el-form-item>
:label="$t('container.repoName')" <el-form-item
:rules="Rules.requiredSelect" v-if="form.fromRepo"
prop="repoID" :label="$t('container.repoName')"
> :rules="Rules.requiredSelect"
<el-select style="width: 100%" filterable v-model="form.repoID"> prop="repoID"
<el-option v-for="item in repos" :key="item.id" :value="item.id" :label="item.name" /> >
</el-select> <el-select style="width: 100%" filterable v-model="form.repoID">
</el-form-item> <el-option v-for="item in repos" :key="item.id" :value="item.id" :label="item.name" />
<el-form-item :label="$t('container.imageName')" :rules="Rules.requiredInput" prop="targetName"> </el-select>
<el-input v-model="form.targetName"> </el-form-item>
<template v-if="form.fromRepo" #prepend>{{ loadDetailInfo(form.repoID) }}/</template> <el-form-item :label="$t('container.imageName')" :rules="Rules.requiredInput" prop="targetName">
</el-input> <el-input v-model="form.targetName">
</el-form-item> <template v-if="form.fromRepo" #prepend>{{ loadDetailInfo(form.repoID) }}/</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
</el-form> </el-form>
<template #footer> <template #footer>
<span class="dialog-footer"> <span class="dialog-footer">
<el-button :disabeld="loading" @click="tagVisiable = false"> <el-button :disabeld="loading" @click="drawerVisiable = false">
{{ $t('commons.button.cancel') }} {{ $t('commons.button.cancel') }}
</el-button> </el-button>
<el-button :disabeld="loading" type="primary" @click="onSubmit(formRef)"> <el-button :disabeld="loading" type="primary" @click="onSubmit(formRef)">
@ -48,7 +51,7 @@ import { Container } from '@/api/interface/container';
const loading = ref(false); const loading = ref(false);
const tagVisiable = ref(false); const drawerVisiable = ref(false);
const repos = ref(); const repos = ref();
const form = reactive({ const form = reactive({
sourceID: '', sourceID: '',
@ -63,16 +66,19 @@ interface DialogProps {
} }
const acceptParams = async (params: DialogProps): Promise<void> => { const acceptParams = async (params: DialogProps): Promise<void> => {
tagVisiable.value = true; drawerVisiable.value = true;
form.repoID = 1; form.repoID = 1;
form.sourceID = params.sourceID; form.sourceID = params.sourceID;
form.targetName = ''; form.targetName = '';
form.fromRepo = true; form.fromRepo = true;
repos.value = params.repos; repos.value = params.repos;
}; };
const emit = defineEmits<{ (e: 'search'): void }>(); const emit = defineEmits<{ (e: 'search'): void }>();
const handleClose = () => {
drawerVisiable.value = false;
};
type FormInstance = InstanceType<typeof ElForm>; type FormInstance = InstanceType<typeof ElForm>;
const formRef = ref<FormInstance>(); const formRef = ref<FormInstance>();
@ -87,7 +93,7 @@ const onSubmit = async (formEl: FormInstance | undefined) => {
await imageTag(form) await imageTag(form)
.then(() => { .then(() => {
loading.value = false; loading.value = false;
tagVisiable.value = false; drawerVisiable.value = false;
emit('search'); emit('search');
ElMessage.success(i18n.global.t('commons.msg.operationSuccess')); ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
}) })

97
frontend/src/views/container/network/create/index.vue
View File

@ -1,51 +1,53 @@
<template> <template>
<el-drawer v-model="createVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="50%"> <el-drawer v-model="drawerVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="50%">
<template #header> <template #header>
<div class="card-header"> <DrawerHeader :header="$t('container.createNetwork')" :back="handleClose" />
<span>{{ $t('container.createNetwork') }}</span>
</div>
</template> </template>
<el-form ref="formRef" v-loading="loading" :model="form" :rules="rules" label-width="80px"> <el-form ref="formRef" label-position="top" v-loading="loading" :model="form" :rules="rules" label-width="80px">
<el-form-item :label="$t('container.networkName')" prop="name"> <el-row type="flex" justify="center">
<el-input clearable v-model.trim="form.name" /> <el-col :span="22">
</el-form-item> <el-form-item :label="$t('container.networkName')" prop="name">
<el-form-item :label="$t('container.driver')" prop="driver"> <el-input clearable v-model.trim="form.name" />
<el-select v-model="form.driver"> </el-form-item>
<el-option label="bridge" value="bridge" /> <el-form-item :label="$t('container.driver')" prop="driver">
<el-option label="ipvlan" value="ipvlan" /> <el-select v-model="form.driver">
<el-option label="macvlan" value="macvlan" /> <el-option label="bridge" value="bridge" />
<el-option label="overlay" value="overlay" /> <el-option label="ipvlan" value="ipvlan" />
</el-select> <el-option label="macvlan" value="macvlan" />
</el-form-item> <el-option label="overlay" value="overlay" />
<el-form-item :label="$t('container.option')" prop="optionStr"> </el-select>
<el-input </el-form-item>
type="textarea" <el-form-item :label="$t('container.option')" prop="optionStr">
:placeholder="$t('container.tagHelper')" <el-input
:autosize="{ minRows: 2, maxRows: 4 }" type="textarea"
v-model="form.optionStr" :placeholder="$t('container.tagHelper')"
/> :autosize="{ minRows: 2, maxRows: 4 }"
</el-form-item> v-model="form.optionStr"
<el-form-item :label="$t('container.subnet')" prop="subnet"> />
<el-input clearable v-model.trim="form.subnet" /> </el-form-item>
</el-form-item> <el-form-item :label="$t('container.subnet')" prop="subnet">
<el-form-item :label="$t('container.gateway')" prop="gateway"> <el-input clearable v-model.trim="form.subnet" />
<el-input clearable v-model.trim="form.gateway" /> </el-form-item>
</el-form-item> <el-form-item :label="$t('container.gateway')" prop="gateway">
<el-form-item :label="$t('container.scope')" prop="scope"> <el-input clearable v-model.trim="form.gateway" />
<el-input clearable v-model.trim="form.scope" /> </el-form-item>
</el-form-item> <el-form-item :label="$t('container.scope')" prop="scope">
<el-form-item :label="$t('container.tag')" prop="labelStr"> <el-input clearable v-model.trim="form.scope" />
<el-input </el-form-item>
type="textarea" <el-form-item :label="$t('container.tag')" prop="labelStr">
:placeholder="$t('container.tagHelper')" <el-input
:autosize="{ minRows: 2, maxRows: 4 }" type="textarea"
v-model="form.labelStr" :placeholder="$t('container.tagHelper')"
/> :autosize="{ minRows: 2, maxRows: 4 }"
</el-form-item> v-model="form.labelStr"
/>
</el-form-item>
</el-col>
</el-row>
</el-form> </el-form>
<template #footer> <template #footer>
<span class="dialog-footer"> <span class="dialog-footer">
<el-button :disabled="loading" @click="createVisiable = false"> <el-button :disabled="loading" @click="drawerVisiable = false">
{{ $t('commons.button.cancel') }} {{ $t('commons.button.cancel') }}
</el-button> </el-button>
<el-button :disabled="loading" type="primary" @click="onSubmit(formRef)"> <el-button :disabled="loading" type="primary" @click="onSubmit(formRef)">
@ -65,7 +67,7 @@ import { createNetwork } from '@/api/modules/container';
const loading = ref(false); const loading = ref(false);
const createVisiable = ref(false); const drawerVisiable = ref(false);
const form = reactive({ const form = reactive({
name: '', name: '',
labelStr: '', labelStr: '',
@ -79,11 +81,14 @@ const form = reactive({
}); });
const acceptParams = (): void => { const acceptParams = (): void => {
createVisiable.value = true; drawerVisiable.value = true;
}; };
const emit = defineEmits<{ (e: 'search'): void }>(); const emit = defineEmits<{ (e: 'search'): void }>();
const handleClose = () => {
drawerVisiable.value = false;
};
const rules = reactive({ const rules = reactive({
name: [Rules.requiredInput, Rules.name], name: [Rules.requiredInput, Rules.name],
driver: [Rules.requiredSelect], driver: [Rules.requiredSelect],
@ -107,7 +112,7 @@ const onSubmit = async (formEl: FormInstance | undefined) => {
loading.value = false; loading.value = false;
ElMessage.success(i18n.global.t('commons.msg.operationSuccess')); ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
emit('search'); emit('search');
createVisiable.value = false; drawerVisiable.value = false;
}) })
.catch(() => { .catch(() => {
loading.value = false; loading.value = false;

119
frontend/src/views/container/repo/operator/index.vue
View File

@ -1,58 +1,68 @@
<template> <template>
<el-drawer v-model="repoVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="50%"> <el-drawer v-model="drawerVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="50%">
<template #header> <template #header>
<div class="card-header"> <DrawerHeader :header="title + $t('container.repo')" :back="handleClose" />
<span>{{ title }}{{ $t('container.repo') }}</span>
</div>
</template> </template>
<el-form ref="formRef" v-loading="loading" :model="dialogData.rowData" :rules="rules" label-width="120px"> <el-form
<el-form-item :label="$t('container.name')" prop="name"> ref="formRef"
<el-input label-position="top"
clearable v-loading="loading"
:disabled="dialogData.title === 'edit'" :model="dialogData.rowData"
v-model.trim="dialogData.rowData!.name" :rules="rules"
></el-input> label-width="120px"
</el-form-item> >
<el-form-item :label="$t('container.auth')" prop="auth"> <el-row type="flex" justify="center">
<el-radio-group v-model="dialogData.rowData!.auth"> <el-col :span="22">
<el-radio :label="true">{{ $t('commons.true') }}</el-radio> <el-form-item :label="$t('container.name')" prop="name">
<el-radio :label="false">{{ $t('commons.false') }}</el-radio> <el-input
</el-radio-group> clearable
</el-form-item> :disabled="dialogData.title === 'edit'"
<el-form-item v-if="dialogData.rowData!.auth" :label="$t('commons.login.username')" prop="username"> v-model.trim="dialogData.rowData!.name"
<el-input clearable v-model.trim="dialogData.rowData!.username"></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item v-if="dialogData.rowData!.auth" :label="$t('commons.login.password')" prop="password"> <el-form-item :label="$t('container.auth')" prop="auth">
<el-input <el-radio-group v-model="dialogData.rowData!.auth">
clearable <el-radio :label="true">{{ $t('commons.true') }}</el-radio>
type="password" <el-radio :label="false">{{ $t('commons.false') }}</el-radio>
show-password </el-radio-group>
v-model.trim="dialogData.rowData!.password" </el-form-item>
></el-input> <el-form-item v-if="dialogData.rowData!.auth" :label="$t('commons.login.username')" prop="username">
</el-form-item> <el-input clearable v-model.trim="dialogData.rowData!.username"></el-input>
<el-form-item :label="$t('container.downloadUrl')" prop="downloadUrl"> </el-form-item>
<el-input <el-form-item v-if="dialogData.rowData!.auth" :label="$t('commons.login.password')" prop="password">
clearable <el-input
v-model.trim="dialogData.rowData!.downloadUrl" clearable
:placeholder="'172.16.10.10:8081'" type="password"
></el-input> show-password
<span v-if="dialogData.rowData!.downloadUrl" class="input-help"> v-model.trim="dialogData.rowData!.password"
docker pull {{ dialogData.rowData!.downloadUrl }}/nginx ></el-input>
</span> </el-form-item>
</el-form-item> <el-form-item :label="$t('container.downloadUrl')" prop="downloadUrl">
<el-form-item :label="$t('container.protocol')" prop="protocol"> <el-input
<el-radio-group v-model="dialogData.rowData!.protocol"> clearable
<el-radio label="http">http</el-radio> v-model.trim="dialogData.rowData!.downloadUrl"
<el-radio label="https">https</el-radio> :placeholder="'172.16.10.10:8081'"
</el-radio-group> ></el-input>
<span v-if="dialogData.rowData!.protocol === 'http'" class="input-help"> <span v-if="dialogData.rowData!.downloadUrl" class="input-help">
{{ $t('container.httpRepo') }} docker pull {{ dialogData.rowData!.downloadUrl }}/nginx
</span> </span>
</el-form-item> </el-form-item>
<el-form-item :label="$t('container.protocol')" prop="protocol">
<el-radio-group v-model="dialogData.rowData!.protocol">
<el-radio label="http">http</el-radio>
<el-radio label="https">https</el-radio>
</el-radio-group>
<span v-if="dialogData.rowData!.protocol === 'http'" class="input-help">
{{ $t('container.httpRepo') }}
</span>
</el-form-item>
</el-col>
</el-row>
</el-form> </el-form>
<template #footer> <template #footer>
<span class="dialog-footer"> <span class="dialog-footer">
<el-button :disabled="loading" @click="repoVisiable = false"> <el-button :disabled="loading" @click="drawerVisiable = false">
{{ $t('commons.button.cancel') }} {{ $t('commons.button.cancel') }}
</el-button> </el-button>
<el-button :disabled="loading" type="primary" @click="onSubmit(formRef)"> <el-button :disabled="loading" type="primary" @click="onSubmit(formRef)">
@ -79,17 +89,20 @@ interface DialogProps {
getTableList?: () => Promise<any>; getTableList?: () => Promise<any>;
} }
const title = ref<string>(''); const title = ref<string>('');
const repoVisiable = ref(false); const drawerVisiable = ref(false);
const dialogData = ref<DialogProps>({ const dialogData = ref<DialogProps>({
title: '', title: '',
}); });
const acceptParams = (params: DialogProps): void => { const acceptParams = (params: DialogProps): void => {
dialogData.value = params; dialogData.value = params;
title.value = i18n.global.t('commons.button.' + dialogData.value.title); title.value = i18n.global.t('commons.button.' + dialogData.value.title);
repoVisiable.value = true; drawerVisiable.value = true;
}; };
const emit = defineEmits<{ (e: 'search'): void }>(); const emit = defineEmits<{ (e: 'search'): void }>();
const handleClose = () => {
drawerVisiable.value = false;
};
const rules = reactive({ const rules = reactive({
name: [Rules.requiredInput, Rules.name], name: [Rules.requiredInput, Rules.name],
downloadUrl: [Rules.requiredInput], downloadUrl: [Rules.requiredInput],
@ -113,7 +126,7 @@ const onSubmit = async (formEl: FormInstance | undefined) => {
loading.value = false; loading.value = false;
ElMessage.success(i18n.global.t('commons.msg.operationSuccess')); ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
emit('search'); emit('search');
repoVisiable.value = false; drawerVisiable.value = false;
}) })
.catch(() => { .catch(() => {
loading.value = false; loading.value = false;
@ -125,7 +138,7 @@ const onSubmit = async (formEl: FormInstance | undefined) => {
loading.value = false; loading.value = false;
ElMessage.success(i18n.global.t('commons.msg.operationSuccess')); ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
emit('search'); emit('search');
repoVisiable.value = false; drawerVisiable.value = false;
}) })
.catch(() => { .catch(() => {
loading.value = false; loading.value = false;

80
frontend/src/views/container/template/operator/index.vue
View File

@ -1,37 +1,49 @@
<template> <template>
<el-drawer v-model="templateVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="50%"> <el-drawer v-model="drawerVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="50%">
<template #header> <template #header>
<div class="card-header"> <DrawerHeader :header="title + $t('container.composeTemplate')" :back="handleClose" />
<span>{{ title }}{{ $t('container.composeTemplate') }}</span>
</div>
</template> </template>
<el-form v-loading="loading" ref="formRef" :model="dialogData.rowData" :rules="rules" label-width="80px"> <el-form
<el-form-item :label="$t('container.name')" prop="name"> v-loading="loading"
<el-input :disabled="dialogData.title === 'edit'" v-model.trim="dialogData.rowData!.name"></el-input> label-position="top"
</el-form-item> ref="formRef"
<el-form-item :label="$t('container.description')"> :model="dialogData.rowData"
<el-input v-model="dialogData.rowData!.description"></el-input> :rules="rules"
</el-form-item> label-width="80px"
<el-form-item> >
<codemirror <el-row type="flex" justify="center">
:autofocus="true" <el-col :span="22">
placeholder="#Define or paste the content of your docker-compose file here" <el-form-item :label="$t('container.name')" prop="name">
:indent-with-tab="true" <el-input
:tabSize="4" :disabled="dialogData.title === 'edit'"
style="width: 100%; height: calc(100vh - 251px)" v-model.trim="dialogData.rowData!.name"
:lineWrapping="true" ></el-input>
:matchBrackets="true" </el-form-item>
theme="cobalt" <el-form-item :label="$t('container.description')">
:styleActiveLine="true" <el-input v-model="dialogData.rowData!.description"></el-input>
:extensions="extensions" </el-form-item>
v-model="dialogData.rowData!.content" <el-form-item>
:readOnly="true" <codemirror
/> :autofocus="true"
</el-form-item> placeholder="#Define or paste the content of your docker-compose file here"
:indent-with-tab="true"
:tabSize="4"
style="width: 100%; height: calc(100vh - 351px)"
:lineWrapping="true"
:matchBrackets="true"
theme="cobalt"
:styleActiveLine="true"
:extensions="extensions"
v-model="dialogData.rowData!.content"
:readOnly="true"
/>
</el-form-item>
</el-col>
</el-row>
</el-form> </el-form>
<template #footer> <template #footer>
<span class="dialog-footer"> <span class="dialog-footer">
<el-button :disabled="loading" @click="templateVisiable = false"> <el-button :disabled="loading" @click="drawerVisiable = false">
{{ $t('commons.button.cancel') }} {{ $t('commons.button.cancel') }}
</el-button> </el-button>
<el-button :disabled="loading" type="primary" @click="onSubmit(formRef)"> <el-button :disabled="loading" type="primary" @click="onSubmit(formRef)">
@ -62,17 +74,21 @@ interface DialogProps {
} }
const extensions = [javascript(), oneDark]; const extensions = [javascript(), oneDark];
const title = ref<string>(''); const title = ref<string>('');
const templateVisiable = ref(false); const drawerVisiable = ref(false);
const dialogData = ref<DialogProps>({ const dialogData = ref<DialogProps>({
title: '', title: '',
}); });
const acceptParams = (params: DialogProps): void => { const acceptParams = (params: DialogProps): void => {
dialogData.value = params; dialogData.value = params;
title.value = i18n.global.t('commons.button.' + dialogData.value.title); title.value = i18n.global.t('commons.button.' + dialogData.value.title);
templateVisiable.value = true; drawerVisiable.value = true;
}; };
const emit = defineEmits<{ (e: 'search'): void }>(); const emit = defineEmits<{ (e: 'search'): void }>();
const handleClose = () => {
drawerVisiable.value = false;
};
const rules = reactive({ const rules = reactive({
name: [Rules.requiredInput, Rules.name], name: [Rules.requiredInput, Rules.name],
content: [Rules.requiredInput], content: [Rules.requiredInput],
@ -92,7 +108,7 @@ const onSubmit = async (formEl: FormInstance | undefined) => {
loading.value = false; loading.value = false;
ElMessage.success(i18n.global.t('commons.msg.operationSuccess')); ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
emit('search'); emit('search');
templateVisiable.value = false; drawerVisiable.value = false;
}) })
.catch(() => { .catch(() => {
loading.value = false; loading.value = false;
@ -104,7 +120,7 @@ const onSubmit = async (formEl: FormInstance | undefined) => {
loading.value = false; loading.value = false;
ElMessage.success(i18n.global.t('commons.msg.operationSuccess')); ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
emit('search'); emit('search');
templateVisiable.value = false; drawerVisiable.value = false;
}) })
.catch(() => { .catch(() => {
loading.value = false; loading.value = false;

82
frontend/src/views/container/volume/create/index.vue
View File

@ -1,39 +1,48 @@
<template> <template>
<el-drawer v-model="createVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="50%"> <el-drawer v-model="drawerVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="50%">
<template #header> <template #header>
<div class="card-header"> <DrawerHeader :header="$t('container.createVolume')" :back="handleClose" />
<span>{{ $t('container.createVolume') }}</span>
</div>
</template> </template>
<el-form ref="formRef" v-loading="loading" :model="form" :rules="rules" label-width="80px"> <el-row type="flex" justify="center">
<el-form-item :label="$t('container.volumeName')" prop="name"> <el-col :span="22">
<el-input clearable v-model.trim="form.name" /> <el-form
</el-form-item> ref="formRef"
<el-form-item :label="$t('container.driver')" prop="driver"> v-loading="loading"
<el-select v-model="form.driver"> label-position="top"
<el-option label="local" value="local" /> :model="form"
</el-select> :rules="rules"
</el-form-item> label-width="80px"
<el-form-item :label="$t('container.option')" prop="optionStr"> >
<el-input <el-form-item :label="$t('container.volumeName')" prop="name">
type="textarea" <el-input clearable v-model.trim="form.name" />
:placeholder="$t('container.tagHelper')" </el-form-item>
:autosize="{ minRows: 2, maxRows: 4 }" <el-form-item :label="$t('container.driver')" prop="driver">
v-model="form.optionStr" <el-select v-model="form.driver">
/> <el-option label="local" value="local" />
</el-form-item> </el-select>
<el-form-item :label="$t('container.tag')" prop="labelStr"> </el-form-item>
<el-input <el-form-item :label="$t('container.option')" prop="optionStr">
type="textarea" <el-input
:placeholder="$t('container.tagHelper')" type="textarea"
:autosize="{ minRows: 2, maxRows: 4 }" :placeholder="$t('container.tagHelper')"
v-model="form.labelStr" :autosize="{ minRows: 2, maxRows: 4 }"
/> v-model="form.optionStr"
</el-form-item> />
</el-form> </el-form-item>
<el-form-item :label="$t('container.tag')" prop="labelStr">
<el-input
type="textarea"
:placeholder="$t('container.tagHelper')"
:autosize="{ minRows: 2, maxRows: 4 }"
v-model="form.labelStr"
/>
</el-form-item>
</el-form>
</el-col>
</el-row>
<template #footer> <template #footer>
<span class="dialog-footer"> <span class="dialog-footer">
<el-button :disabled="loading" @click="createVisiable = false"> <el-button :disabled="loading" @click="drawerVisiable = false">
{{ $t('commons.button.cancel') }} {{ $t('commons.button.cancel') }}
</el-button> </el-button>
<el-button :disabled="loading" type="primary" @click="onSubmit(formRef)"> <el-button :disabled="loading" type="primary" @click="onSubmit(formRef)">
@ -53,7 +62,7 @@ import { createVolume } from '@/api/modules/container';
const loading = ref(false); const loading = ref(false);
const createVisiable = ref(false); const drawerVisiable = ref(false);
const form = reactive({ const form = reactive({
name: '', name: '',
driver: 'local', driver: 'local',
@ -64,11 +73,14 @@ const form = reactive({
}); });
const acceptParams = (): void => { const acceptParams = (): void => {
createVisiable.value = true; drawerVisiable.value = true;
}; };
const emit = defineEmits<{ (e: 'search'): void }>(); const emit = defineEmits<{ (e: 'search'): void }>();
const handleClose = () => {
drawerVisiable.value = false;
};
const rules = reactive({ const rules = reactive({
name: [Rules.requiredInput, Rules.name], name: [Rules.requiredInput, Rules.name],
driver: [Rules.requiredSelect], driver: [Rules.requiredSelect],
@ -93,7 +105,7 @@ const onSubmit = async (formEl: FormInstance | undefined) => {
loading.value = false; loading.value = false;
ElMessage.success(i18n.global.t('commons.msg.operationSuccess')); ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
emit('search'); emit('search');
createVisiable.value = false; drawerVisiable.value = false;
}) })
.catch(() => { .catch(() => {
loading.value = false; loading.value = false;

21
frontend/src/views/cronjob/operate/index.vue
View File

@ -1,9 +1,7 @@
<template> <template>
<el-drawer v-model="cronjobVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="50%"> <el-drawer v-model="drawerVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="50%">
<template #header> <template #header>
<div class="card-header"> <DrawerHeader :header="$t('cronjob.cronTask')" :back="handleClose" />
<span>{{ title }}{{ $t('cronjob.cronTask') }}</span>
</div>
</template> </template>
<el-form ref="formRef" :model="dialogData.rowData" label-position="left" :rules="rules" label-width="120px"> <el-form ref="formRef" :model="dialogData.rowData" label-position="left" :rules="rules" label-width="120px">
<el-form-item :label="$t('cronjob.taskType')" prop="type"> <el-form-item :label="$t('cronjob.taskType')" prop="type">
@ -132,7 +130,7 @@
</el-form> </el-form>
<template #footer> <template #footer>
<span class="dialog-footer"> <span class="dialog-footer">
<el-button @click="cronjobVisiable = false">{{ $t('commons.button.cancel') }}</el-button> <el-button @click="drawerVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
<el-button type="primary" @click="onSubmit(formRef)"> <el-button type="primary" @click="onSubmit(formRef)">
{{ $t('commons.button.confirm') }} {{ $t('commons.button.confirm') }}
</el-button> </el-button>
@ -161,26 +159,29 @@ interface DialogProps {
getTableList?: () => Promise<any>; getTableList?: () => Promise<any>;
} }
const title = ref<string>(''); const title = ref<string>('');
const cronjobVisiable = ref(false); const drawerVisiable = ref(false);
const dialogData = ref<DialogProps>({ const dialogData = ref<DialogProps>({
title: '', title: '',
}); });
const acceptParams = (params: DialogProps): void => { const acceptParams = (params: DialogProps): void => {
dialogData.value = params; dialogData.value = params;
title.value = i18n.global.t('commons.button.' + dialogData.value.title); title.value = i18n.global.t('commons.button.' + dialogData.value.title);
cronjobVisiable.value = true; drawerVisiable.value = true;
checkMysqlInstalled(); checkMysqlInstalled();
loadBackups(); loadBackups();
loadWebsites(); loadWebsites();
}; };
const emit = defineEmits<{ (e: 'search'): void }>();
const handleClose = () => {
drawerVisiable.value = false;
};
const localDirID = ref(); const localDirID = ref();
const websiteOptions = ref(); const websiteOptions = ref();
const backupOptions = ref(); const backupOptions = ref();
const emit = defineEmits<{ (e: 'search'): void }>();
const mysqlInfo = reactive({ const mysqlInfo = reactive({
isExist: false, isExist: false,
name: '', name: '',
@ -349,7 +350,7 @@ const onSubmit = async (formEl: FormInstance | undefined) => {
ElMessage.success(i18n.global.t('commons.msg.operationSuccess')); ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
emit('search'); emit('search');
cronjobVisiable.value = false; drawerVisiable.value = false;
}); });
}; };

164
frontend/src/views/database/mysql/setting/index.vue
View File

@ -1,83 +1,89 @@
<template> <template>
<div class="demo-collapse" v-show="onSetting"> <div v-show="onSetting">
<el-card style="margin-top: 5px" v-loading="loading"> <LayoutContent :title="$t('nginx.nginxConfig')" :reload="true">
<LayoutContent :header="'Mysql ' + $t('database.setting')" :back-name="'Mysql'" :reload="true"> <template #buttons>
<el-collapse v-model="activeName" @change="handleCollapse" accordion> <el-button type="primary" :plain="activeName !== 'conf'" @click="changeTab('conf')">
<el-collapse-item :title="$t('database.confChange')" name="1"> {{ $t('database.confChange') }}
<codemirror </el-button>
:autofocus="true" <el-button type="primary" :plain="activeName !== 'status'" @click="changeTab('status')">
placeholder="None data" {{ $t('database.currentStatus') }}
:indent-with-tab="true" </el-button>
:tabSize="4" <el-button type="primary" :plain="activeName !== 'tuning'" @click="changeTab('tuning')">
style="margin-top: 10px; max-height: 500px" {{ $t('database.performanceTuning') }}
:lineWrapping="true" </el-button>
:matchBrackets="true" <el-button type="primary" :plain="activeName !== 'port'" @click="changeTab('port')">
theme="cobalt" {{ $t('database.portSetting') }}
:styleActiveLine="true" </el-button>
:extensions="extensions" <el-button type="primary" :plain="activeName !== 'log'" @click="changeTab('log')">
v-model="mysqlConf" {{ $t('database.log') }}
:readOnly="true" </el-button>
/> <el-button
<el-button style="margin-top: 10px" @click="getDefaultConfig()"> type="primary"
{{ $t('app.defaultConfig') }} :disabled="mysqlStatus !== 'Running'"
</el-button> :plain="activeName !== 'slowLog'"
<el-button type="primary" style="margin-top: 10px" @click="onSaveConf"> @click="changeTab('slowLog')"
{{ $t('commons.button.save') }} >
</el-button> {{ $t('database.slowLog') }}
</el-button>
</template>
<template #main>
<div v-if="activeName === 'conf'">
<codemirror
:autofocus="true"
placeholder="None data"
:indent-with-tab="true"
:tabSize="4"
style="margin-top: 10px; height: calc(100vh - 360px)"
:lineWrapping="true"
:matchBrackets="true"
theme="cobalt"
:styleActiveLine="true"
:extensions="extensions"
v-model="mysqlConf"
:readOnly="true"
/>
<el-button style="margin-top: 10px" @click="getDefaultConfig()">
{{ $t('app.defaultConfig') }}
</el-button>
<el-button type="primary" style="margin-top: 10px" @click="onSaveConf">
{{ $t('commons.button.save') }}
</el-button>
<el-row>
<el-col :span="8">
<el-alert
v-if="useOld"
style="margin-top: 10px"
:title="$t('app.defaultConfigHelper')"
type="info"
:closable="false"
></el-alert>
</el-col>
</el-row>
</div>
<Status v-if="activeName === 'status'" ref="statusRef" />
<Variables v-if="activeName === 'tuning'" ref="variablesRef" />
<div v-if="activeName === 'port'">
<el-form :model="baseInfo" ref="panelFormRef" label-width="120px">
<el-row> <el-row>
<el-col :span="8"> <el-col :span="1"><br /></el-col>
<el-alert <el-col :span="10">
v-if="useOld" <el-form-item :label="$t('setting.port')" prop="port" :rules="Rules.port">
style="margin-top: 10px" <el-input clearable type="number" v-model.number="baseInfo.port">
:title="$t('app.defaultConfigHelper')" <template #append>
type="info" <el-button @click="onSavePort(panelFormRef)" icon="Collection">
:closable="false" {{ $t('commons.button.save') }}
></el-alert> </el-button>
</template>
</el-input>
</el-form-item>
</el-col> </el-col>
</el-row> </el-row>
</el-collapse-item> </el-form>
<el-collapse-item </div>
:disabled="mysqlStatus !== 'Running'" <ContainerLog v-if="activeName === 'log'" ref="dialogContainerLogRef" />
:title="$t('database.currentStatus')" <SlowLog v-if="activeName === 'slowLog'" ref="slowLogRef" />
name="2" </template>
> </LayoutContent>
<Status ref="statusRef" />
</el-collapse-item>
<el-collapse-item
:disabled="mysqlStatus !== 'Running'"
:title="$t('database.performanceTuning')"
name="3"
>
<Variables ref="variablesRef" />
</el-collapse-item>
<el-collapse-item :title="$t('database.portSetting')" name="4">
<el-form :model="baseInfo" ref="panelFormRef" label-width="120px">
<el-row>
<el-col :span="1"><br /></el-col>
<el-col :span="10">
<el-form-item :label="$t('setting.port')" prop="port" :rules="Rules.port">
<el-input clearable type="number" v-model.number="baseInfo.port">
<template #append>
<el-button @click="onSavePort(panelFormRef)" icon="Collection">
{{ $t('commons.button.save') }}
</el-button>
</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-collapse-item>
<el-collapse-item :title="$t('database.log')" name="5">
<ContainerLog ref="dialogContainerLogRef" />
</el-collapse-item>
<el-collapse-item :disabled="mysqlStatus !== 'Running'" :title="$t('database.slowLog')" name="6">
<SlowLog ref="slowLogRef" />
</el-collapse-item>
</el-collapse>
</LayoutContent>
</el-card>
<ConfirmDialog ref="confirmPortRef" @confirm="onSubmitChangePort"></ConfirmDialog> <ConfirmDialog ref="confirmPortRef" @confirm="onSubmitChangePort"></ConfirmDialog>
<ConfirmDialog ref="confirmConfRef" @confirm="onSubmitChangeConf"></ConfirmDialog> <ConfirmDialog ref="confirmConfRef" @confirm="onSubmitChangeConf"></ConfirmDialog>
@ -106,7 +112,7 @@ import { loadBaseDir } from '@/api/modules/setting';
const loading = ref(false); const loading = ref(false);
const extensions = [javascript(), oneDark]; const extensions = [javascript(), oneDark];
const activeName = ref('1'); const activeName = ref('conf');
const baseInfo = reactive({ const baseInfo = reactive({
name: '', name: '',
@ -152,7 +158,8 @@ const onClose = (): void => {
onSetting.value = false; onSetting.value = false;
}; };
const handleCollapse = async (val: string) => { const changeTab = (val: string) => {
activeName.value = val;
if (val !== '5') { if (val !== '5') {
dialogContainerLogRef.value!.onCloseLog(); dialogContainerLogRef.value!.onCloseLog();
} }
@ -160,6 +167,7 @@ const handleCollapse = async (val: string) => {
slowLogRef.value!.onCloseLog(); slowLogRef.value!.onCloseLog();
} }
}; };
const onSubmitChangePort = async () => { const onSubmitChangePort = async () => {
let params = { let params = {
key: 'mysql', key: 'mysql',

41
frontend/src/views/database/mysql/setting/slow-log/index.vue
View File

@ -14,34 +14,27 @@
inactive-value="OFF" inactive-value="OFF"
@change="handleSlowLogs" @change="handleSlowLogs"
/> />
<div v-if="variables.slow_query_log === 'ON'" style="margin-left: 20px; float: left"> <div style="margin-left: 20px; float: left">
<el-checkbox border v-model="isWatch">{{ $t('commons.button.watch') }}</el-checkbox> <el-checkbox border v-model="isWatch">{{ $t('commons.button.watch') }}</el-checkbox>
</div> </div>
<el-button <el-button style="margin-left: 20px" @click="onDownload" icon="Download">
v-if="variables.slow_query_log === 'ON'"
style="margin-left: 20px"
@click="onDownload"
icon="Download"
>
{{ $t('file.download') }} {{ $t('file.download') }}
</el-button> </el-button>
<div v-if="variables.slow_query_log === 'ON'"> <codemirror
<codemirror :autofocus="true"
:autofocus="true" placeholder="None data"
placeholder="None data" :indent-with-tab="true"
:indent-with-tab="true" :tabSize="4"
:tabSize="4" style="margin-top: 10px; height: calc(100vh - 370px)"
style="margin-top: 10px; max-height: 500px" :lineWrapping="true"
:lineWrapping="true" :matchBrackets="true"
:matchBrackets="true" theme="cobalt"
theme="cobalt" :styleActiveLine="true"
:styleActiveLine="true" :extensions="extensions"
:extensions="extensions" @ready="handleReady"
@ready="handleReady" v-model="slowLogs"
v-model="slowLogs" :readOnly="true"
:readOnly="true" />
/>
</div>
<br /> <br />
<ConfirmDialog @cancle="onCancle" ref="confirmDialogRef" @confirm="onSave"></ConfirmDialog> <ConfirmDialog @cancle="onCancle" ref="confirmDialogRef" @confirm="onSave"></ConfirmDialog>

86
frontend/src/views/database/mysql/setting/status/index.vue
View File

@ -1,51 +1,49 @@
<template> <template>
<div> <div>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="1"><br /></el-col> <el-col :span="8">
<el-col :span="6"> <el-row style="margin-top: 20px">
<table style="width: 100%" class="myTable"> <table style="width: 100%" class="myTable">
<tr> <tr>
<td>{{ $t('database.runTime') }}</td> <td>{{ $t('database.runTime') }}</td>
<td>{{ mysqlStatus.run }}</td> <td>{{ mysqlStatus.run }}</td>
</tr> </tr>
<tr> <tr>
<td>{{ $t('database.connections') }}</td> <td>{{ $t('database.connections') }}</td>
<td>{{ mysqlStatus.connections }}</td> <td>{{ mysqlStatus.connections }}</td>
</tr> </tr>
<tr> <tr>
<td>{{ $t('database.bytesSent') }}</td> <td>{{ $t('database.bytesSent') }}</td>
<td>{{ mysqlStatus!.bytesSent }}</td> <td>{{ mysqlStatus!.bytesSent }}</td>
</tr> </tr>
<tr> <tr>
<td>{{ $t('database.bytesReceived') }}</td> <td>{{ $t('database.bytesReceived') }}</td>
<td>{{ mysqlStatus!.bytesReceived }}</td> <td>{{ mysqlStatus!.bytesReceived }}</td>
</tr> </tr>
</table> </table>
</el-row>
<el-row style="margin-top: 20px">
<table style="width: 100%" class="myTable">
<tr>
<td>{{ $t('database.queryPerSecond') }}</td>
<td>{{ mysqlStatus!.queryPerSecond }}</td>
</tr>
<tr>
<td>{{ $t('database.queryPerSecond') }}</td>
<td>{{ mysqlStatus!.txPerSecond }}</td>
</tr>
<tr>
<td>File</td>
<td>{{ mysqlStatus!.file }}</td>
</tr>
<tr>
<td>Position</td>
<td>{{ mysqlStatus!.position }}</td>
</tr>
</table>
</el-row>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="16">
<table style="width: 100%" class="myTable">
<tr>
<td>{{ $t('database.queryPerSecond') }}</td>
<td>{{ mysqlStatus!.queryPerSecond }}</td>
</tr>
<tr>
<td>{{ $t('database.queryPerSecond') }}</td>
<td>{{ mysqlStatus!.txPerSecond }}</td>
</tr>
<tr>
<td>File</td>
<td>{{ mysqlStatus!.file }}</td>
</tr>
<tr>
<td>Position</td>
<td>{{ mysqlStatus!.position }}</td>
</tr>
</table>
</el-col>
</el-row>
<el-row>
<el-col :span="1"><br /></el-col>
<el-col :span="12">
<table style="margin-top: 20px; width: 100%" class="myTable"> <table style="margin-top: 20px; width: 100%" class="myTable">
<tr> <tr>
<td>{{ $t('database.queryPerSecond') }}</td> <td>{{ $t('database.queryPerSecond') }}</td>

218
frontend/src/views/database/mysql/setting/variables/index.vue
View File

@ -1,116 +1,114 @@
<template> <template>
<div> <div>
<el-card v-loading="loading"> <el-form :model="mysqlVariables" :rules="variablesRules" ref="variableFormRef" label-width="160px">
<el-form :model="mysqlVariables" :rules="variablesRules" ref="variableFormRef" label-width="160px"> <el-row>
<el-row> <el-col :span="1"><br /></el-col>
<el-col :span="1"><br /></el-col> <el-col :span="9">
<el-col :span="9"> <el-form-item :label="$t('database.optimizationScheme')">
<el-form-item :label="$t('database.optimizationScheme')"> <el-select @change="changePlan" clearable v-model="plan">
<el-select @change="changePlan" clearable v-model="plan"> <el-option
<el-option v-for="item in planOptions"
v-for="item in planOptions" :key="item.id"
:key="item.id" :label="item.title"
:label="item.title" :value="item.id"
:value="item.id" />
/> </el-select>
</el-select> </el-form-item>
</el-form-item> </el-col>
</el-col> </el-row>
</el-row> <el-row>
<el-row> <el-col :span="1"><br /></el-col>
<el-col :span="1"><br /></el-col> <el-col :span="9">
<el-col :span="9"> <el-form-item label="key_buffer_size" prop="key_buffer_size">
<el-form-item label="key_buffer_size" prop="key_buffer_size"> <el-input clearable v-model.number="mysqlVariables.key_buffer_size">
<el-input clearable v-model.number="mysqlVariables.key_buffer_size"> <template #append>MB</template>
<template #append>MB</template> </el-input>
</el-input> <span class="input-help">{{ $t('database.keyBufferSizeHelper') }}</span>
<span class="input-help">{{ $t('database.keyBufferSizeHelper') }}</span> </el-form-item>
</el-form-item> <el-form-item label="join_buffer_size" prop="join_buffer_size">
<el-form-item label="join_buffer_size" prop="join_buffer_size"> <el-input clearable v-model.number="mysqlVariables.join_buffer_size">
<el-input clearable v-model.number="mysqlVariables.join_buffer_size"> <template #append>KB</template>
<template #append>KB</template> </el-input>
</el-input> <span class="input-help">{{ $t('database.joinBufferSizeHelper') }}</span>
<span class="input-help">{{ $t('database.joinBufferSizeHelper') }}</span> </el-form-item>
</el-form-item> <el-form-item label="tmp_table_size" prop="tmp_table_size">
<el-form-item label="tmp_table_size" prop="tmp_table_size"> <el-input clearable v-model.number="mysqlVariables.tmp_table_size">
<el-input clearable v-model.number="mysqlVariables.tmp_table_size"> <template #append>MB</template>
<template #append>MB</template> </el-input>
</el-input> <span class="input-help">{{ $t('database.tmpTableSizeHelper') }}</span>
<span class="input-help">{{ $t('database.tmpTableSizeHelper') }}</span> </el-form-item>
</el-form-item> <el-form-item label="innodb_buffer_pool_size" prop="innodb_buffer_pool_size">
<el-form-item label="innodb_buffer_pool_size" prop="innodb_buffer_pool_size"> <el-input clearable v-model.number="mysqlVariables.innodb_buffer_pool_size">
<el-input clearable v-model.number="mysqlVariables.innodb_buffer_pool_size"> <template #append>MB</template>
<template #append>MB</template> </el-input>
</el-input> <span class="input-help">{{ $t('database.innodbBufferPoolSizeHelper') }}</span>
<span class="input-help">{{ $t('database.innodbBufferPoolSizeHelper') }}</span> </el-form-item>
</el-form-item> <el-form-item label="innodb_log_buffer_size" prop="innodb_log_buffer_size">
<el-form-item label="innodb_log_buffer_size" prop="innodb_log_buffer_size"> <el-input clearable v-model.number="mysqlVariables.innodb_log_buffer_size">
<el-input clearable v-model.number="mysqlVariables.innodb_log_buffer_size"> <template #append>MB</template>
<template #append>MB</template> </el-input>
</el-input> <span class="input-help">{{ $t('database.innodbLogBufferSizeHelper') }}</span>
<span class="input-help">{{ $t('database.innodbLogBufferSizeHelper') }}</span> </el-form-item>
</el-form-item> <el-form-item label="sort_buffer_size" prop="sort_buffer_size">
<el-form-item label="sort_buffer_size" prop="sort_buffer_size"> <el-input clearable v-model.number="mysqlVariables.sort_buffer_size">
<el-input clearable v-model.number="mysqlVariables.sort_buffer_size"> <template #append>KB</template>
<template #append>KB</template> </el-input>
</el-input> <span class="input-help">{{ $t('database.sortBufferSizeHelper') }}</span>
<span class="input-help">{{ $t('database.sortBufferSizeHelper') }}</span> </el-form-item>
</el-form-item> <el-form-item label="read_buffer_size" prop="read_buffer_size">
<el-form-item label="read_buffer_size" prop="read_buffer_size"> <el-input clearable v-model.number="mysqlVariables.read_buffer_size">
<el-input clearable v-model.number="mysqlVariables.read_buffer_size"> <template #append>KB</template>
<template #append>KB</template> </el-input>
</el-input> <span class="input-help">{{ $t('database.readBufferSizeHelper') }}</span>
<span class="input-help">{{ $t('database.readBufferSizeHelper') }}</span> </el-form-item>
</el-form-item>
<el-form-item> <el-form-item>
<el-button :disabled="loading" @click="onSaveStart(variableFormRef)" type="primary"> <el-button :disabled="loading" @click="onSaveStart(variableFormRef)" type="primary">
{{ $t('commons.button.save') }} {{ $t('commons.button.save') }}
</el-button> </el-button>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="2"><br /></el-col> <el-col :span="2"><br /></el-col>
<el-col :span="9"> <el-col :span="9">
<el-form-item label="read_rnd_buffer_size" prop="read_rnd_buffer_size"> <el-form-item label="read_rnd_buffer_size" prop="read_rnd_buffer_size">
<el-input clearable v-model.number="mysqlVariables.read_rnd_buffer_size"> <el-input clearable v-model.number="mysqlVariables.read_rnd_buffer_size">
<template #append>KB</template> <template #append>KB</template>
</el-input> </el-input>
<span class="input-help">{{ $t('database.readRndBufferSizeHelper') }}</span> <span class="input-help">{{ $t('database.readRndBufferSizeHelper') }}</span>
</el-form-item> </el-form-item>
<el-form-item v-if="mysqlVersion === '5.7.39'" label="query_cache_size" prop="query_cache_size"> <el-form-item v-if="mysqlVersion === '5.7.39'" label="query_cache_size" prop="query_cache_size">
<el-input clearable v-model.number="mysqlVariables.query_cache_size"> <el-input clearable v-model.number="mysqlVariables.query_cache_size">
<template #append>MB</template> <template #append>MB</template>
</el-input> </el-input>
<span class="input-help">{{ $t('database.queryCacheSizeHelper') }}</span> <span class="input-help">{{ $t('database.queryCacheSizeHelper') }}</span>
</el-form-item> </el-form-item>
<el-form-item label="thread_stack" prop="thread_stack"> <el-form-item label="thread_stack" prop="thread_stack">
<el-input clearable v-model.number="mysqlVariables.thread_stack"> <el-input clearable v-model.number="mysqlVariables.thread_stack">
<template #append>KB</template> <template #append>KB</template>
</el-input> </el-input>
<span class="input-help">{{ $t('database.threadStackelper') }}</span> <span class="input-help">{{ $t('database.threadStackelper') }}</span>
</el-form-item> </el-form-item>
<el-form-item label="binlog_cache_size" prop="binlog_cache_size"> <el-form-item label="binlog_cache_size" prop="binlog_cache_size">
<el-input clearable v-model.number="mysqlVariables.binlog_cache_size"> <el-input clearable v-model.number="mysqlVariables.binlog_cache_size">
<template #append>KB</template> <template #append>KB</template>
</el-input> </el-input>
<span class="input-help">{{ $t('database.binlogCacheSizeHelper') }}</span> <span class="input-help">{{ $t('database.binlogCacheSizeHelper') }}</span>
</el-form-item> </el-form-item>
<el-form-item label="thread_cache_size" prop="thread_cache_size"> <el-form-item label="thread_cache_size" prop="thread_cache_size">
<el-input clearable v-model.number="mysqlVariables.thread_cache_size" /> <el-input clearable v-model.number="mysqlVariables.thread_cache_size" />
<span class="input-help">{{ $t('database.threadCacheSizeHelper') }}</span> <span class="input-help">{{ $t('database.threadCacheSizeHelper') }}</span>
</el-form-item> </el-form-item>
<el-form-item label="table_open_cache" prop="table_open_cache"> <el-form-item label="table_open_cache" prop="table_open_cache">
<el-input clearable v-model.number="mysqlVariables.table_open_cache" /> <el-input clearable v-model.number="mysqlVariables.table_open_cache" />
<span class="input-help">{{ $t('database.tableOpenCacheHelper') }}</span> <span class="input-help">{{ $t('database.tableOpenCacheHelper') }}</span>
</el-form-item> </el-form-item>
<el-form-item label="max_connections" prop="max_connections"> <el-form-item label="max_connections" prop="max_connections">
<el-input clearable v-model.number="mysqlVariables.max_connections" /> <el-input clearable v-model.number="mysqlVariables.max_connections" />
<span class="input-help">{{ $t('database.maxConnectionsHelper') }}</span> <span class="input-help">{{ $t('database.maxConnectionsHelper') }}</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>
</el-card>
<ConfirmDialog ref="confirmDialogRef" @confirm="onSaveVariables"></ConfirmDialog> <ConfirmDialog ref="confirmDialogRef" @confirm="onSaveVariables"></ConfirmDialog>
</div> </div>

216
frontend/src/views/database/redis/setting/index.vue
View File

@ -1,102 +1,119 @@
<template> <template>
<div class="demo-collapse" v-show="settingShow"> <div v-show="settingShow">
<el-card style="margin-top: 5px" v-loading="loading"> <LayoutContent :title="$t('nginx.nginxConfig')" :reload="true">
<LayoutContent :header="'Redis ' + $t('database.setting')" back-name="Redis" :reload="true"> <template #buttons>
<el-collapse v-model="activeName" accordion> <el-button type="primary" :plain="activeName !== 'conf'" @click="changeTab('conf')">
<el-collapse-item :title="$t('database.confChange')" name="1"> {{ $t('database.confChange') }}
<codemirror </el-button>
:autofocus="true" <el-button
placeholder="None data" type="primary"
:indent-with-tab="true" :disabled="redisStatus !== 'Running'"
:tabSize="4" :plain="activeName !== 'status'"
style="margin-top: 10px; height: calc(100vh - 280px)" @click="changeTab('status')"
:lineWrapping="true" >
:matchBrackets="true" {{ $t('database.status') }}
theme="cobalt" </el-button>
:styleActiveLine="true" <el-button
:extensions="extensions" type="primary"
v-model="redisConf" :disabled="redisStatus !== 'Running'"
:readOnly="true" :plain="activeName !== 'tuning'"
/> @click="changeTab('tuning')"
<el-button style="margin-top: 10px" @click="getDefaultConfig()"> >
{{ $t('app.defaultConfig') }} {{ $t('database.performanceTuning') }}
</el-button> </el-button>
<el-button type="primary" @click="onSaveFile" style="margin-top: 10px"> <el-button type="primary" :plain="activeName !== 'port'" @click="changeTab('port')">
{{ $t('commons.button.save') }} {{ $t('database.portSetting') }}
</el-button> </el-button>
<el-row> <el-button
<el-col :span="8"> type="primary"
<el-alert :disabled="redisStatus !== 'Running'"
v-if="useOld" :plain="activeName !== 'persistence'"
style="margin-top: 10px" @click="changeTab('persistence')"
:title="$t('app.defaultConfigHelper')" >
type="info" {{ $t('database.persistence') }}
:closable="false" </el-button>
></el-alert> </template>
<template #main>
<div v-if="activeName === 'conf'">
<codemirror
:autofocus="true"
placeholder="None data"
:indent-with-tab="true"
:tabSize="4"
style="margin-top: 10px; height: calc(100vh - 370px)"
:lineWrapping="true"
:matchBrackets="true"
theme="cobalt"
:styleActiveLine="true"
:extensions="extensions"
v-model="redisConf"
:readOnly="true"
/>
<el-button style="margin-top: 10px" @click="getDefaultConfig()">
{{ $t('app.defaultConfig') }}
</el-button>
<el-button type="primary" @click="onSaveFile" style="margin-top: 10px">
{{ $t('commons.button.save') }}
</el-button>
<el-row>
<el-col :span="8">
<el-alert
v-if="useOld"
style="margin-top: 10px"
:title="$t('app.defaultConfigHelper')"
type="info"
:closable="false"
></el-alert>
</el-col>
</el-row>
</div>
<Status v-show="activeName === 'status'" ref="statusRef" />
<div v-if="activeName === 'tuning'">
<el-form :model="form" ref="formRef" :rules="rules" label-width="120px">
<el-row style="margin-top: 20px">
<el-col :span="1"><br /></el-col>
<el-col :span="10">
<el-form-item :label="$t('database.timeout')" prop="timeout">
<el-input clearable type="number" v-model.number="form.timeout" />
<span class="input-help">{{ $t('database.timeoutHelper') }}</span>
</el-form-item>
<el-form-item :label="$t('database.maxclients')" prop="maxclients">
<el-input clearable type="number" v-model.number="form.maxclients" />
</el-form-item>
<el-form-item :label="$t('database.maxmemory')" prop="maxmemory">
<el-input clearable type="number" v-model.number="form.maxmemory" />
<span class="input-help">{{ $t('database.maxmemoryHelper') }}</span>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmtiForm(formRef)">
{{ $t('commons.button.save') }}
</el-button>
</el-form-item>
</el-col> </el-col>
</el-row> </el-row>
</el-collapse-item> </el-form>
<el-collapse-item :disabled="redisStatus !== 'Running'" :title="$t('database.status')" name="2"> </div>
<Status ref="statusRef" /> <div v-if="activeName === 'port'">
</el-collapse-item> <el-form :model="form" ref="portRef" label-width="120px">
<el-collapse-item <el-row>
:disabled="redisStatus !== 'Running'" <el-col :span="1"><br /></el-col>
:title="$t('database.performanceTuning')" <el-col :span="10">
name="3" <el-form-item :label="$t('setting.port')" prop="port" :rules="Rules.port">
> <el-input clearable type="number" v-model.number="form.port">
<el-form :model="form" ref="formRef" :rules="rules" label-width="120px"> <template #append>
<el-row style="margin-top: 20px"> <el-button @click="onSavePort(portRef)" icon="Collection">
<el-col :span="1"><br /></el-col> {{ $t('commons.button.save') }}
<el-col :span="10"> </el-button>
<el-form-item :label="$t('database.timeout')" prop="timeout"> </template>
<el-input clearable type="number" v-model.number="form.timeout" /> </el-input>
<span class="input-help">{{ $t('database.timeoutHelper') }}</span> </el-form-item>
</el-form-item> </el-col>
<el-form-item :label="$t('database.maxclients')" prop="maxclients"> </el-row>
<el-input clearable type="number" v-model.number="form.maxclients" /> </el-form>
</el-form-item> </div>
<el-form-item :label="$t('database.maxmemory')" prop="maxmemory"> <Persistence v-show="activeName === 'persistence'" ref="persistenceRef" />
<el-input clearable type="number" v-model.number="form.maxmemory" /> </template>
<span class="input-help">{{ $t('database.maxmemoryHelper') }}</span> </LayoutContent>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmtiForm(formRef)">
{{ $t('commons.button.save') }}
</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-collapse-item>
<el-collapse-item :title="$t('database.portSetting')" name="4">
<el-form :model="form" ref="portRef" label-width="120px">
<el-row>
<el-col :span="1"><br /></el-col>
<el-col :span="10">
<el-form-item :label="$t('setting.port')" prop="port" :rules="Rules.port">
<el-input clearable type="number" v-model.number="form.port">
<template #append>
<el-button @click="onSavePort(portRef)" icon="Collection">
{{ $t('commons.button.save') }}
</el-button>
</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-collapse-item>
<el-collapse-item
:disabled="redisStatus !== 'Running'"
:title="$t('database.persistence')"
name="5"
>
<Persistence ref="persistenceRef" />
</el-collapse-item>
</el-collapse>
</LayoutContent>
</el-card>
<ConfirmDialog ref="confirmDialogRef" @confirm="submtiFile"></ConfirmDialog> <ConfirmDialog ref="confirmDialogRef" @confirm="submtiFile"></ConfirmDialog>
<ConfirmDialog ref="confirmFileRef" @confirm="submtiFile"></ConfirmDialog> <ConfirmDialog ref="confirmFileRef" @confirm="submtiFile"></ConfirmDialog>
@ -140,7 +157,7 @@ const rules = reactive({
maxmemory: [Rules.number], maxmemory: [Rules.number],
}); });
const activeName = ref('1'); const activeName = ref('conf');
const statusRef = ref(); const statusRef = ref();
const persistenceRef = ref(); const persistenceRef = ref();
@ -160,6 +177,11 @@ interface DialogProps {
status: string; status: string;
} }
const changeTab = (val: string) => {
activeName.value = val;
console.log(activeName.value);
};
const acceptParams = (prop: DialogProps): void => { const acceptParams = (prop: DialogProps): void => {
redisStatus.value = prop.status; redisStatus.value = prop.status;
redisName.value = prop.redisName; redisName.value = prop.redisName;

146
frontend/src/views/database/redis/setting/status/index.vue
View File

@ -1,79 +1,77 @@
<template> <template>
<div v-if="statusShow"> <div v-if="statusShow">
<el-card style="margin-top: 5px"> <el-row>
<el-row> <el-col :span="1"><br /></el-col>
<el-col :span="1"><br /></el-col> <el-col :span="12">
<el-col :span="12"> <table style="margin-top: 20px; width: 100%" class="myTable">
<table style="margin-top: 20px; width: 100%" class="myTable"> <tr>
<tr> <td>uptime_in_days</td>
<td>uptime_in_days</td> <td>{{ redisStatus!.uptime_in_days }}</td>
<td>{{ redisStatus!.uptime_in_days }}</td> <td>{{ $t('database.uptimeInDays') }}</td>
<td>{{ $t('database.uptimeInDays') }}</td> </tr>
</tr> <tr>
<tr> <td>tcp_port</td>
<td>tcp_port</td> <td>{{ redisStatus!.tcp_port }}</td>
<td>{{ redisStatus!.tcp_port }}</td> <td>{{ $t('database.tcpPort') }}</td>
<td>{{ $t('database.tcpPort') }}</td> </tr>
</tr> <tr>
<tr> <td>connected_clients</td>
<td>connected_clients</td> <td>{{ redisStatus!.connected_clients }}</td>
<td>{{ redisStatus!.connected_clients }}</td> <td>{{ $t('database.connectedClients') }}</td>
<td>{{ $t('database.connectedClients') }}</td> </tr>
</tr> <tr>
<tr> <td>used_memory_rss</td>
<td>used_memory_rss</td> <td>{{ redisStatus!.used_memory_rss }}</td>
<td>{{ redisStatus!.used_memory_rss }}</td> <td>{{ $t('database.usedMemoryRss') }}</td>
<td>{{ $t('database.usedMemoryRss') }}</td> </tr>
</tr> <tr>
<tr> <td>used_memory</td>
<td>used_memory</td> <td>{{ redisStatus!.used_memory }}</td>
<td>{{ redisStatus!.used_memory }}</td> <td>{{ $t('database.usedMemory') }}</td>
<td>{{ $t('database.usedMemory') }}</td> </tr>
</tr> <tr>
<tr> <td>mem_fragmentation_ratio</td>
<td>mem_fragmentation_ratio</td> <td>{{ redisStatus!.mem_fragmentation_ratio }}</td>
<td>{{ redisStatus!.mem_fragmentation_ratio }}</td> <td>{{ $t('database.tmpTableToDBHelper') }}</td>
<td>{{ $t('database.tmpTableToDBHelper') }}</td> </tr>
</tr> <tr>
<tr> <td>total_connections_received</td>
<td>total_connections_received</td> <td>{{ redisStatus!.total_connections_received }}</td>
<td>{{ redisStatus!.total_connections_received }}</td> <td>{{ $t('database.totalConnectionsReceived') }}</td>
<td>{{ $t('database.totalConnectionsReceived') }}</td> </tr>
</tr> <tr>
<tr> <td>total_commands_processed</td>
<td>total_commands_processed</td> <td>{{ redisStatus!.total_commands_processed }}</td>
<td>{{ redisStatus!.total_commands_processed }}</td> <td>{{ $t('database.totalCommandsProcessed') }}</td>
<td>{{ $t('database.totalCommandsProcessed') }}</td> </tr>
</tr> <tr>
<tr> <td>instantaneous_ops_per_sec</td>
<td>instantaneous_ops_per_sec</td> <td>{{ redisStatus!.instantaneous_ops_per_sec }}</td>
<td>{{ redisStatus!.instantaneous_ops_per_sec }}</td> <td>{{ $t('database.instantaneousOpsPerSec') }}</td>
<td>{{ $t('database.instantaneousOpsPerSec') }}</td> </tr>
</tr> <tr>
<tr> <td>keyspace_hits</td>
<td>keyspace_hits</td> <td>{{ redisStatus!.keyspace_hits }}</td>
<td>{{ redisStatus!.keyspace_hits }}</td> <td>{{ $t('database.keyspaceHits') }}</td>
<td>{{ $t('database.keyspaceHits') }}</td> </tr>
</tr> <tr>
<tr> <td>keyspace_misses</td>
<td>keyspace_misses</td> <td>{{ redisStatus!.keyspace_misses }}</td>
<td>{{ redisStatus!.keyspace_misses }}</td> <td>{{ $t('database.keyspaceMisses') }}</td>
<td>{{ $t('database.keyspaceMisses') }}</td> </tr>
</tr> <tr>
<tr> <td>hit</td>
<td>hit</td> <td>{{ redisStatus!.hit }}</td>
<td>{{ redisStatus!.hit }}</td> <td>{{ $t('database.hit') }}</td>
<td>{{ $t('database.hit') }}</td> </tr>
</tr> <tr>
<tr> <td>latest_fork_usec</td>
<td>latest_fork_usec</td> <td>{{ redisStatus!.latest_fork_usec }}</td>
<td>{{ redisStatus!.latest_fork_usec }}</td> <td>{{ $t('database.latestForkUsec') }}</td>
<td>{{ $t('database.latestForkUsec') }}</td> </tr>
</tr> </table>
</table> </el-col>
</el-col> </el-row>
</el-row>
</el-card>
</div> </div>
</template> </template>

2
frontend/src/views/database/redis/terminal/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div v-show="terminalShow" style="height: 100%"> <div v-show="terminalShow" style="height: 100%">
<div style="height: calc(100vh - 230px)" :id="'terminal-exec'"></div> <div style="height: calc(100vh - 360px)" :id="'terminal-exec'"></div>
</div> </div>
</template> </template>

99
frontend/src/views/host/terminal/command/index.vue
View File

@ -1,30 +1,58 @@
<template> <template>
<div> <div>
<el-card style="margin-top: 20px"> <LayoutContent v-loading="loading" :title="$t('terminal.quickCommand')">
<ComplexTable :pagination-config="paginationConfig" v-model:selects="selects" :data="data" @search="search"> <template #toolbar>
<template #toolbar> <el-button type="primary" @click="onCreate()">
<el-button type="primary" icon="Plus" @click="onCreate()"> {{ $t('commons.button.create') }}{{ $t('terminal.quickCommand') }}
{{ $t('commons.button.create') }} </el-button>
</el-button> <el-button plain :disabled="selects.length === 0" @click="batchDelete(null)">
<el-button type="danger" plain :disabled="selects.length === 0" @click="batchDelete(null)"> {{ $t('commons.button.delete') }}
{{ $t('commons.button.delete') }} </el-button>
</el-button> </template>
</template> <template #main>
<el-table-column type="selection" fix /> <ComplexTable
<el-table-column :label="$t('commons.table.name')" min-width="100" prop="name" fix /> :pagination-config="paginationConfig"
<el-table-column :label="$t('terminal.command')" min-width="300" show-overflow-tooltip prop="command" /> v-model:selects="selects"
<fu-table-operations :buttons="buttons" :label="$t('commons.table.operate')" fix /> :data="data"
</ComplexTable> @search="search"
</el-card> >
<el-dialog v-model="cmdVisiable" :title="$t('commons.button.' + operate)" width="30%"> <el-table-column type="selection" fix />
<el-form ref="commandInfoRef" label-width="100px" label-position="left" :model="commandInfo" :rules="rules"> <el-table-column :label="$t('commons.table.name')" min-width="100" prop="name" fix />
<el-form-item :label="$t('commons.table.name')" prop="name"> <el-table-column
<el-input clearable v-model="commandInfo.name" /> :label="$t('terminal.command')"
</el-form-item> min-width="300"
<el-form-item :label="$t('terminal.command')" prop="command"> show-overflow-tooltip
<el-input type="textarea" clearable v-model="commandInfo.command" /> prop="command"
</el-form-item> />
</el-form> <fu-table-operations :buttons="buttons" :label="$t('commons.table.operate')" fix />
</ComplexTable>
</template>
</LayoutContent>
<el-drawer v-model="cmdVisiable" size="50%">
<template #header>
<DrawerHeader
:header="$t('commons.button.' + operate) + $t('terminal.quickCommand')"
:back="handleClose"
/>
</template>
<el-row type="flex" justify="center">
<el-col :span="22">
<el-form
ref="commandInfoRef"
label-width="100px"
label-position="top"
:model="commandInfo"
:rules="rules"
>
<el-form-item :label="$t('commons.table.name')" prop="name">
<el-input clearable v-model="commandInfo.name" />
</el-form-item>
<el-form-item :label="$t('terminal.command')" prop="command">
<el-input type="textarea" clearable v-model="commandInfo.command" />
</el-form-item>
</el-form>
</el-col>
</el-row>
<template #footer> <template #footer>
<span class="dialog-footer"> <span class="dialog-footer">
<el-button @click="cmdVisiable = false">{{ $t('commons.button.cancel') }}</el-button> <el-button @click="cmdVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
@ -33,11 +61,12 @@
</el-button> </el-button>
</span> </span>
</template> </template>
</el-dialog> </el-drawer>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import LayoutContent from '@/layout/layout-content.vue';
import ComplexTable from '@/components/complex-table/index.vue'; import ComplexTable from '@/components/complex-table/index.vue';
import { Command } from '@/api/interface/command'; import { Command } from '@/api/interface/command';
import { addCommand, editCommand, deleteCommand, getCommandPage } from '@/api/modules/command'; import { addCommand, editCommand, deleteCommand, getCommandPage } from '@/api/modules/command';
@ -48,6 +77,7 @@ import { Rules } from '@/global/form-rules';
import i18n from '@/lang'; import i18n from '@/lang';
import { ElMessage } from 'element-plus'; import { ElMessage } from 'element-plus';
const loading = ref();
const data = ref(); const data = ref();
const selects = ref<any>([]); const selects = ref<any>([]);
const paginationConfig = reactive({ const paginationConfig = reactive({
@ -83,6 +113,10 @@ const onCreate = async () => {
cmdVisiable.value = true; cmdVisiable.value = true;
}; };
const handleClose = () => {
cmdVisiable.value = false;
};
const submitAddCommand = (formEl: FormInstance | undefined) => { const submitAddCommand = (formEl: FormInstance | undefined) => {
if (!formEl) return; if (!formEl) return;
formEl.validate(async (valid) => { formEl.validate(async (valid) => {
@ -145,9 +179,16 @@ const search = async () => {
pageSize: paginationConfig.pageSize, pageSize: paginationConfig.pageSize,
info: info.value, info: info.value,
}; };
const res = await getCommandPage(params); loading.value = true;
data.value = res.data.items || []; await getCommandPage(params)
paginationConfig.total = res.data.total; .then((res) => {
loading.value = false;
data.value = res.data.items || [];
paginationConfig.total = res.data.total;
})
.catch(() => {
loading.value = false;
});
}; };
defineExpose({ defineExpose({

43
frontend/src/views/host/terminal/index.vue
View File

@ -1,18 +1,19 @@
<template> <template>
<div> <div>
<el-card class="topRouterCard"> <el-card class="router_card">
<el-radio-group @change="handleChange" v-model="activeNames"> <el-radio-group v-model="activeNames" @change="handleChange">
<el-radio-button class="topRouterButton" size="default" label="terminal"> <el-radio-button class="router_card_button" size="large" label="terminal">
{{ $t('menu.terminal') }} {{ $t('menu.terminal') }}
</el-radio-button> </el-radio-button>
<el-radio-button class="topRouterButton" size="default" label="host"> <el-radio-button class="router_card_button" size="large" label="host">
{{ $t('menu.host') }} {{ $t('menu.host') }}
</el-radio-button> </el-radio-button>
<el-radio-button class="topRouterButton" size="default" label="command"> <el-radio-button class="router_card_button" size="large" label="command">
{{ $t('terminal.quickCommand') }} {{ $t('terminal.quickCommand') }}
</el-radio-button> </el-radio-button>
</el-radio-group> </el-radio-group>
</el-card> </el-card>
<div v-show="activeNames === 'terminal'"> <div v-show="activeNames === 'terminal'">
<TerminalTab ref="terminalTabRef" /> <TerminalTab ref="terminalTabRef" />
</div> </div>
@ -55,3 +56,35 @@ onUnmounted(() => {
terminalTabRef.value?.cleanTimer(); terminalTabRef.value?.cleanTimer();
}); });
</script> </script>
<style lang="scss">
.router_card {
--el-card-border-radius: 8px;
--el-card-padding: 0;
padding: 0px;
padding-bottom: 2px;
padding-top: 2px;
}
.router_card_button {
margin-left: 2px;
.el-radio-button__inner {
min-width: 100px;
height: 100%;
border: 0 !important;
}
.el-radio-button__original-radio:checked + .el-radio-button__inner {
border-radius: 3px;
color: $primary-color;
background-color: #ffffff;
box-shadow: 0 0 0 2px $primary-color !important;
}
.el-radio-button:first-child .el-radio-button__inner {
border-radius: 3px;
color: $primary-color;
background-color: #ffffff;
box-shadow: 0 0 0 2px $primary-color !important;
}
}
</style>

79
frontend/src/views/host/terminal/terminal/host-create.vue
View File

@ -1,6 +1,9 @@
<template> <template>
<div> <div>
<el-dialog v-model="dialogVisiable" :title="$t('terminal.addHost')" width="30%"> <el-drawer v-model="dialogVisiable" size="50%">
<template #header>
<DrawerHeader :header="$t('terminal.addHost')" :back="handleClose" />
</template>
<el-alert <el-alert
v-if="isLocal" v-if="isLocal"
style="margin-bottom: 20px" style="margin-bottom: 20px"
@ -9,35 +12,45 @@
:closable="false" :closable="false"
type="warning" type="warning"
/> />
<el-form ref="hostRef" label-width="100px" :model="hostInfo" :rules="rules"> <el-form ref="hostRef" label-width="100px" label-position="top" :model="hostInfo" :rules="rules">
<el-form-item :label="$t('terminal.ip')" prop="addr"> <el-row type="flex" justify="center">
<el-input v-if="!isLocal" clearable v-model="hostInfo.addr" /> <el-col :span="22">
<span v-if="isLocal">{{ hostInfo.addr }}</span> <el-form-item :label="$t('terminal.ip')" prop="addr">
</el-form-item> <el-input v-if="!isLocal" clearable v-model="hostInfo.addr" />
<el-form-item :label="$t('terminal.user')" prop="user"> <div style="margin-left: 12px">
<el-input clearable v-model="hostInfo.user" /> <span v-if="isLocal">{{ hostInfo.addr }}</span>
</el-form-item> </div>
<el-form-item :label="$t('terminal.authMode')" prop="authMode"> </el-form-item>
<el-radio-group v-model="hostInfo.authMode"> <el-form-item :label="$t('terminal.user')" prop="user">
<el-radio label="password">{{ $t('terminal.passwordMode') }}</el-radio> <el-input clearable v-model="hostInfo.user" />
<el-radio label="key">{{ $t('terminal.keyMode') }}</el-radio> </el-form-item>
</el-radio-group> <el-form-item :label="$t('terminal.authMode')" prop="authMode">
</el-form-item> <el-radio-group v-model="hostInfo.authMode">
<el-form-item :label="$t('terminal.password')" v-if="hostInfo.authMode === 'password'" prop="password"> <el-radio label="password">{{ $t('terminal.passwordMode') }}</el-radio>
<el-input clearable show-password type="password" v-model="hostInfo.password" /> <el-radio label="key">{{ $t('terminal.keyMode') }}</el-radio>
</el-form-item> </el-radio-group>
<el-form-item :label="$t('terminal.key')" v-if="hostInfo.authMode === 'key'" prop="privateKey"> </el-form-item>
<el-input clearable type="textarea" v-model="hostInfo.privateKey" /> <el-form-item
</el-form-item> :label="$t('terminal.password')"
<el-form-item :label="$t('terminal.port')" prop="port"> v-if="hostInfo.authMode === 'password'"
<el-input clearable v-model.number="hostInfo.port" /> prop="password"
</el-form-item> >
<el-form-item :label="$t('commons.table.title')" prop="name"> <el-input clearable show-password type="password" v-model="hostInfo.password" />
<el-input clearable v-model="hostInfo.name" /> </el-form-item>
</el-form-item> <el-form-item :label="$t('terminal.key')" v-if="hostInfo.authMode === 'key'" prop="privateKey">
<el-form-item :label="$t('commons.table.description')" prop="description"> <el-input clearable type="textarea" v-model="hostInfo.privateKey" />
<el-input clearable v-model="hostInfo.description" /> </el-form-item>
</el-form-item> <el-form-item :label="$t('terminal.port')" prop="port">
<el-input clearable v-model.number="hostInfo.port" />
</el-form-item>
<el-form-item :label="$t('commons.table.title')" prop="name">
<el-input clearable v-model="hostInfo.name" />
</el-form-item>
<el-form-item :label="$t('commons.table.description')" prop="description">
<el-input clearable v-model="hostInfo.description" />
</el-form-item>
</el-col>
</el-row>
</el-form> </el-form>
<template #footer> <template #footer>
<span class="dialog-footer"> <span class="dialog-footer">
@ -50,7 +63,7 @@
</el-button> </el-button>
</span> </span>
</template> </template>
</el-dialog> </el-drawer>
</div> </div>
</template> </template>
@ -101,6 +114,10 @@ const acceptParams = (props: DialogProps) => {
dialogVisiable.value = true; dialogVisiable.value = true;
}; };
const handleClose = () => {
dialogVisiable.value = false;
};
const emit = defineEmits(['on-conn-terminal', 'load-host-tree']); const emit = defineEmits(['on-conn-terminal', 'load-host-tree']);
const submitAddHost = (formEl: FormInstance | undefined, ops: string) => { const submitAddHost = (formEl: FormInstance | undefined, ops: string) => {

6
frontend/src/views/host/terminal/terminal/index.vue
View File

@ -35,7 +35,7 @@
</span> </span>
</template> </template>
<Terminal <Terminal
style="height: calc(100vh - 178px); background-color: #000" style="height: calc(100vh - 227px); background-color: #000"
:ref="'t-' + item.index" :ref="'t-' + item.index"
:key="item.Refresh" :key="item.Refresh"
></Terminal> ></Terminal>
@ -109,7 +109,7 @@
</el-tab-pane> </el-tab-pane>
<div v-if="terminalTabs.length === 0"> <div v-if="terminalTabs.length === 0">
<el-empty <el-empty
style="background-color: #000; height: calc(100vh - 150px)" style="background-color: #000; height: calc(100vh - 200px)"
:description="$t('terminal.emptyTerminal')" :description="$t('terminal.emptyTerminal')"
></el-empty> ></el-empty>
</div> </div>
@ -383,7 +383,7 @@ defineExpose({
.fullScreen { .fullScreen {
position: absolute; position: absolute;
right: 50px; right: 50px;
top: 80px; top: 90px;
font-weight: 600; font-weight: 600;
font-size: 14px; font-size: 14px;
} }

15
frontend/src/views/setting/about/index.vue
View File

@ -35,7 +35,10 @@
</div> </div>
</template> </template>
</LayoutContent> </LayoutContent>
<el-drawer :key="refresh" v-model="drawerShow" size="50%"> <el-drawer :key="refresh" v-model="drawerVisiable" size="50%">
<template #header>
<DrawerHeader :header="$t('setting.upgrade')" :back="handleClose" />
</template>
<el-form label-width="120px"> <el-form label-width="120px">
<el-form-item :label="$t('setting.newVersion')"> <el-form-item :label="$t('setting.newVersion')">
<el-tag>{{ upgradeInfo.newVersion }}</el-tag> <el-tag>{{ upgradeInfo.newVersion }}</el-tag>
@ -65,7 +68,7 @@ import i18n from '@/lang';
const version = ref(); const version = ref();
const upgradeInfo = ref(); const upgradeInfo = ref();
const drawerShow = ref(); const drawerVisiable = ref();
const refresh = ref(); const refresh = ref();
const loading = ref(); const loading = ref();
@ -87,6 +90,10 @@ const toGithubStar = () => {
window.open('https://github.com/1Panel-dev/1Panel', '_blank'); window.open('https://github.com/1Panel-dev/1Panel', '_blank');
}; };
const handleClose = () => {
drawerVisiable.value = false;
};
const onLoadUpgradeInfo = async () => { const onLoadUpgradeInfo = async () => {
const res = await loadUpgradeInfoByOSS(); const res = await loadUpgradeInfoByOSS();
if (!res.data) { if (!res.data) {
@ -94,7 +101,7 @@ const onLoadUpgradeInfo = async () => {
return; return;
} }
upgradeInfo.value = res.data; upgradeInfo.value = res.data;
drawerShow.value = true; drawerVisiable.value = true;
}; };
const onUpgrade = async () => { const onUpgrade = async () => {
ElMessageBox.confirm(i18n.global.t('setting.upgradeHelper', i18n.global.t('setting.upgrade')), { ElMessageBox.confirm(i18n.global.t('setting.upgradeHelper', i18n.global.t('setting.upgrade')), {
@ -106,7 +113,7 @@ const onUpgrade = async () => {
upgrade(upgradeInfo.value.newVersion) upgrade(upgradeInfo.value.newVersion)
.then(() => { .then(() => {
loading.value = false; loading.value = false;
drawerShow.value = false; drawerVisiable.value = false;
ElMessage.success(i18n.global.t('commons.msg.operationSuccess')); ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
search(); search();
}) })

18
frontend/src/views/setting/backup-account/operate/index.vue
View File

@ -1,9 +1,7 @@
<template> <template>
<el-drawer v-model="dialogVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="50%"> <el-drawer v-model="drawerVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="50%">
<template #header> <template #header>
<div class="card-header"> <DrawerHeader :header="title + $t('setting.backupAccount')" :back="handleClose" />
<span>{{ title }}{{ $t('setting.backupAccount') }}</span>
</div>
</template> </template>
<el-form ref="formRef" v-loading="loading" :model="dialogData.rowData" label-width="120px"> <el-form ref="formRef" v-loading="loading" :model="dialogData.rowData" label-width="120px">
<el-form-item :label="$t('commons.table.type')" prop="type" :rules="Rules.requiredSelect"> <el-form-item :label="$t('commons.table.type')" prop="type" :rules="Rules.requiredSelect">
@ -101,7 +99,7 @@
</el-form> </el-form>
<template #footer> <template #footer>
<span class="dialog-footer"> <span class="dialog-footer">
<el-button :disabled="loading" @click="dialogVisiable = false"> <el-button :disabled="loading" @click="drawerVisiable = false">
{{ $t('commons.button.cancel') }} {{ $t('commons.button.cancel') }}
</el-button> </el-button>
<el-button :disabled="loading" type="primary" @click="onSubmit(formRef)"> <el-button :disabled="loading" type="primary" @click="onSubmit(formRef)">
@ -137,7 +135,7 @@ interface DialogProps {
getTableList?: () => Promise<any>; getTableList?: () => Promise<any>;
} }
const title = ref<string>(''); const title = ref<string>('');
const dialogVisiable = ref(false); const drawerVisiable = ref(false);
const dialogData = ref<DialogProps>({ const dialogData = ref<DialogProps>({
title: '', title: '',
}); });
@ -151,7 +149,11 @@ const acceptParams = (params: DialogProps): void => {
} }
} }
title.value = i18n.global.t('commons.button.' + dialogData.value.title); title.value = i18n.global.t('commons.button.' + dialogData.value.title);
dialogVisiable.value = true; drawerVisiable.value = true;
};
const handleClose = () => {
drawerVisiable.value = false;
}; };
const loadDir = async (path: string) => { const loadDir = async (path: string) => {
@ -204,7 +206,7 @@ const onSubmit = async (formEl: FormInstance | undefined) => {
ElMessage.success(i18n.global.t('commons.msg.operationSuccess')); ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
emit('search'); emit('search');
dialogVisiable.value = false; drawerVisiable.value = false;
}); });
}; };

17
frontend/src/views/setting/snapshot/index.vue
View File

@ -68,7 +68,10 @@
</template> </template>
</LayoutContent> </LayoutContent>
<RecoverStatus ref="recoverStatusRef"></RecoverStatus> <RecoverStatus ref="recoverStatusRef"></RecoverStatus>
<el-drawer v-model="dialogVisiable" :title="$t('setting.createSnapshot')" size="50%"> <el-drawer v-model="drawerVisiable" size="50%">
<template #header>
<DrawerHeader :header="$t('setting.createSnapshot')" :back="handleClose" />
</template>
<el-form v-loading="loading" ref="snapRef" label-width="100px" :model="snapInfo" :rules="rules"> <el-form v-loading="loading" ref="snapRef" label-width="100px" :model="snapInfo" :rules="rules">
<el-form-item :label="$t('cronjob.target')" prop="from"> <el-form-item :label="$t('cronjob.target')" prop="from">
<el-select v-model="snapInfo.from" clearable> <el-select v-model="snapInfo.from" clearable>
@ -86,7 +89,7 @@
</el-form> </el-form>
<template #footer> <template #footer>
<span class="dialog-footer"> <span class="dialog-footer">
<el-button :disabled="loading" @click="dialogVisiable = false"> <el-button :disabled="loading" @click="drawerVisiable = false">
{{ $t('commons.button.cancel') }} {{ $t('commons.button.cancel') }}
</el-button> </el-button>
<el-button :disabled="loading" type="primary" @click="submitAddSnapshot(snapRef)"> <el-button :disabled="loading" type="primary" @click="submitAddSnapshot(snapRef)">
@ -137,11 +140,15 @@ let snapInfo = reactive<Setting.SnapshotCreate>({
description: '', description: '',
}); });
const dialogVisiable = ref<boolean>(false); const drawerVisiable = ref<boolean>(false);
const onCreate = async () => { const onCreate = async () => {
restForm(); restForm();
dialogVisiable.value = true; drawerVisiable.value = true;
};
const handleClose = () => {
drawerVisiable.value = false;
}; };
const submitAddSnapshot = (formEl: FormInstance | undefined) => { const submitAddSnapshot = (formEl: FormInstance | undefined) => {
@ -152,7 +159,7 @@ const submitAddSnapshot = (formEl: FormInstance | undefined) => {
await snapshotCreate(snapInfo) await snapshotCreate(snapInfo)
.then(() => { .then(() => {
loading.value = false; loading.value = false;
dialogVisiable.value = false; drawerVisiable.value = false;
search(); search();
ElMessage.success(i18n.global.t('commons.msg.operationSuccess')); ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
}) })

9
frontend/src/views/setting/snapshot/status/index.vue
View File

@ -1,6 +1,9 @@
<template> <template>
<div v-loading="loading"> <div v-loading="loading">
<el-drawer v-model="drawerVisiable" :title="$t('setting.recoverDetail')"> <el-drawer v-model="drawerVisiable">
<template #header>
<DrawerHeader :header="$t('setting.recoverDetail')" :back="handleClose" />
</template>
<el-form label-width="120px"> <el-form label-width="120px">
<el-card> <el-card>
<template #header> <template #header>
@ -195,6 +198,10 @@ const acceptParams = (params: DialogProps): void => {
drawerVisiable.value = true; drawerVisiable.value = true;
}; };
const handleClose = () => {
drawerVisiable.value = false;
};
const doRecover = async (isNew: boolean) => { const doRecover = async (isNew: boolean) => {
loading.value = true; loading.value = true;
await snapshotRecover({ id: snapInfo.value.id, isNew: isNew, reDownload: reDownload.value }) await snapshotRecover({ id: snapInfo.value.id, isNew: isNew, reDownload: reDownload.value })