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 {
status := constant.StatusRunning
cmd := exec.Command("systemctl", "is-active", "docker")
stdout, err := cmd.CombinedOutput()
if string(stdout) != "active\n" || err != nil {
status = constant.Stopped
}
// cmd := exec.Command("systemctl", "is-active", "docker")
// stdout, err := cmd.CombinedOutput()
// if string(stdout) != "active\n" || err != nil {
// status = constant.Stopped
// }
return status
}

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

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

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

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

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

@ -1,12 +1,12 @@
<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>
<div class="card-header">
<span>{{ $t('container.compose') }}</span>
</div>
<DrawerHeader :header="$t('container.compose')" :back="handleClose" />
</template>
<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-row type="flex" justify="center">
<el-col :span="22">
<el-form-item :label="$t('container.name')" prop="name">
<el-input v-model.trim="form.name"></el-input>
</el-form-item>
@ -30,7 +30,12 @@
</el-form-item>
<el-form-item v-if="form.from === 'template'" prop="template">
<el-select v-model="form.template">
<el-option v-for="item in templateOptions" :key="item.id" :value="item.id" :label="item.name" />
<el-option
v-for="item in templateOptions"
:key="item.id"
:value="item.id"
:label="item.name"
/>
</el-select>
</el-form-item>
<el-form-item v-if="form.from === 'edit'">
@ -39,7 +44,7 @@
placeholder="#Define or paste the content of your docker-compose file here"
:indent-with-tab="true"
:tabSize="4"
style="width: 100%; height: calc(100vh - 251px)"
style="width: 100%; height: calc(100vh - 351px)"
:lineWrapping="true"
:matchBrackets="true"
theme="cobalt"
@ -49,11 +54,13 @@
:readOnly="true"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<template #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)">
{{ $t('commons.button.confirm') }}
</el-button>
@ -74,7 +81,7 @@ import { ElForm, ElMessage } from 'element-plus';
import { listComposeTemplate, upCompose } from '@/api/modules/container';
const extensions = [javascript(), oneDark];
const composeVisiable = ref(false);
const drawerVisiable = ref(false);
const templateOptions = ref();
const loading = ref(false);
@ -106,7 +113,7 @@ const loadTemplates = async () => {
};
const acceptParams = (): void => {
composeVisiable.value = true;
drawerVisiable.value = true;
form.name = '';
form.from = 'edit';
form.path = '';
@ -115,6 +122,10 @@ const acceptParams = (): void => {
};
const emit = defineEmits<{ (e: 'search'): void }>();
const handleClose = () => {
drawerVisiable.value = false;
};
type FormInstance = InstanceType<typeof ElForm>;
const formRef = ref<FormInstance>();
@ -128,7 +139,7 @@ const onSubmit = async (formEl: FormInstance | undefined) => {
ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
loading.value = false;
emit('search');
composeVisiable.value = false;
drawerVisiable.value = false;
})
.finally(() => {
loading.value = false;

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

@ -1,17 +1,22 @@
<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>
<div class="card-header">
<span>{{ $t('container.createContainer') }}</span>
</div>
<DrawerHeader :header="$t('container.createContainer')" :back="handleClose" />
</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-row type="flex" justify="center">
<el-col :span="22">
<el-form-item :label="$t('container.name')" prop="name">
<el-input clearable v-model.trim="form.name" />
</el-form-item>
<el-form-item :label="$t('container.image')" prop="image">
<el-select style="width: 100%" filterable v-model="form.image">
<el-option v-for="(item, index) of images" :key="index" :value="item.option" :label="item.option" />
<el-option
v-for="(item, index) of images"
:key="index"
:value="item.option"
:label="item.option"
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('container.port')">
@ -148,7 +153,9 @@
</tr>
<tr>
<td align="left">
<el-button @click="handleVolumesAdd()">{{ $t('commons.button.add') }}</el-button>
<el-button @click="handleVolumesAdd()">
{{ $t('commons.button.add') }}
</el-button>
</td>
</tr>
</table>
@ -177,10 +184,12 @@
<el-radio label="no">{{ $t('container.no') }}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button :disabled="loading" @click="createVisiable = false">
<el-button :disabled="loading" @click="drawerVisiable = false">
{{ $t('commons.button.cancel') }}
</el-button>
<el-button :disabled="loading" type="primary" @click="onSubmit(formRef)">
@ -201,7 +210,7 @@ import { Container } from '@/api/interface/container';
const loading = ref(false);
const createVisiable = ref(false);
const drawerVisiable = ref(false);
const form = reactive({
name: '',
image: '',
@ -226,13 +235,17 @@ const images = ref();
const volumes = ref();
const acceptParams = (): void => {
createVisiable.value = true;
drawerVisiable.value = true;
form.restartPolicy = 'no';
form.memoryUnit = 'MB';
loadImageOptions();
loadVolumeOptions();
};
const handleClose = () => {
drawerVisiable.value = false;
};
const emit = defineEmits<{ (e: 'search'): void }>();
const rules = reactive({
@ -306,7 +319,7 @@ const onSubmit = async (formEl: FormInstance | undefined) => {
loading.value = false;
ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
emit('search');
createVisiable.value = false;
drawerVisiable.value = false;
})
.catch(() => {
loading.value = false;

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

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

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

@ -1,17 +1,17 @@
<template>
<el-drawer
v-model="pullVisiable"
v-model="drawerVisiable"
@close="onCloseLog"
:destroy-on-close="true"
:close-on-click-modal="false"
size="50%"
>
<template #header>
<div class="card-header">
<span>{{ $t('container.imagePull') }}</span>
</div>
<DrawerHeader :header="$t('container.imagePull')" :back="handleClose" />
</template>
<el-form ref="formRef" :model="form" label-width="80px">
<el-row type="flex" justify="center">
<el-col :span="22">
<el-form ref="formRef" label-position="top" :model="form" label-width="80px">
<el-form-item :label="$t('container.from')">
<el-checkbox v-model="form.fromRepo">{{ $t('container.imageRepo') }}</el-checkbox>
</el-form-item>
@ -38,7 +38,7 @@
placeholder="Waiting for pull output..."
:indent-with-tab="true"
:tabSize="4"
style="max-height: 300px"
style="height: calc(100vh - 415px)"
:lineWrapping="true"
:matchBrackets="true"
theme="cobalt"
@ -48,9 +48,11 @@
v-model="logInfo"
:readOnly="true"
/>
</el-col>
</el-row>
<template #footer>
<span class="dialog-footer">
<el-button :disabled="buttonDisabled" @click="pullVisiable = false">
<el-button :disabled="buttonDisabled" @click="drawerVisiable = false">
{{ $t('commons.button.cancel') }}
</el-button>
<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 { LoadFile } from '@/api/modules/files';
const pullVisiable = ref(false);
const drawerVisiable = ref(false);
const form = reactive({
fromRepo: true,
repoID: null as number,
@ -97,7 +99,7 @@ interface DialogProps {
const repos = ref();
const acceptParams = async (params: DialogProps): Promise<void> => {
pullVisiable.value = true;
drawerVisiable.value = true;
form.fromRepo = true;
form.imageName = '';
repos.value = params.repos;
@ -107,6 +109,10 @@ const acceptParams = async (params: DialogProps): Promise<void> => {
const emit = defineEmits<{ (e: 'search'): void }>();
const handleClose = () => {
drawerVisiable.value = false;
};
type FormInstance = InstanceType<typeof ElForm>;
const formRef = ref<FormInstance>();

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

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

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

@ -1,11 +1,11 @@
<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>
<div class="card-header">
<span>{{ $t('container.exportImage') }}</span>
</div>
<DrawerHeader :header="$t('container.exportImage')" :back="handleClose" />
</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-row type="flex" justify="center">
<el-col :span="22">
<el-form-item label="Tag" :rules="Rules.requiredSelect" prop="tagName">
<el-select filterable v-model="form.tagName">
<el-option
@ -29,10 +29,13 @@
<template #append>.tar</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button :disabeld="loading" @click="saveVisiable = false">
<el-button :disabeld="loading" @click="drawerVisiable = false">
{{ $t('commons.button.cancel') }}
</el-button>
<el-button :disabeld="loading" type="primary" @click="onSubmit(formRef)">
@ -54,7 +57,7 @@ import { Container } from '@/api/interface/container';
const loading = ref(false);
const saveVisiable = ref(false);
const drawerVisiable = ref(false);
const form = reactive({
tags: [] as Array<string>,
tagName: '',
@ -72,16 +75,19 @@ const dialogData = ref<DialogProps>({
});
const acceptParams = async (params: DialogProps): Promise<void> => {
saveVisiable.value = true;
drawerVisiable.value = true;
form.tags = params.tags;
form.path = '';
form.tagName = '';
form.name = '';
dialogData.value.repos = params.repos;
};
const emit = defineEmits<{ (e: 'search'): void }>();
const handleClose = () => {
drawerVisiable.value = false;
};
type FormInstance = InstanceType<typeof ElForm>;
const formRef = ref<FormInstance>();
@ -93,7 +99,7 @@ const onSubmit = async (formEl: FormInstance | undefined) => {
await imageSave(form)
.then(() => {
loading.value = false;
saveVisiable.value = false;
drawerVisiable.value = false;
emit('search');
ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
})

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

@ -1,11 +1,11 @@
<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>
<div class="card-header">
<span>Tag {{ $t('container.image') }}</span>
</div>
<DrawerHeader :header="'Tag ' + $t('container.image')" :back="handleClose" />
</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-row type="flex" justify="center">
<el-col :span="22">
<el-form-item :label="$t('container.from')">
<el-checkbox v-model="form.fromRepo">{{ $t('container.imageRepo') }}</el-checkbox>
</el-form-item>
@ -24,10 +24,13 @@
<template v-if="form.fromRepo" #prepend>{{ loadDetailInfo(form.repoID) }}/</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button :disabeld="loading" @click="tagVisiable = false">
<el-button :disabeld="loading" @click="drawerVisiable = false">
{{ $t('commons.button.cancel') }}
</el-button>
<el-button :disabeld="loading" type="primary" @click="onSubmit(formRef)">
@ -48,7 +51,7 @@ import { Container } from '@/api/interface/container';
const loading = ref(false);
const tagVisiable = ref(false);
const drawerVisiable = ref(false);
const repos = ref();
const form = reactive({
sourceID: '',
@ -63,16 +66,19 @@ interface DialogProps {
}
const acceptParams = async (params: DialogProps): Promise<void> => {
tagVisiable.value = true;
drawerVisiable.value = true;
form.repoID = 1;
form.sourceID = params.sourceID;
form.targetName = '';
form.fromRepo = true;
repos.value = params.repos;
};
const emit = defineEmits<{ (e: 'search'): void }>();
const handleClose = () => {
drawerVisiable.value = false;
};
type FormInstance = InstanceType<typeof ElForm>;
const formRef = ref<FormInstance>();
@ -87,7 +93,7 @@ const onSubmit = async (formEl: FormInstance | undefined) => {
await imageTag(form)
.then(() => {
loading.value = false;
tagVisiable.value = false;
drawerVisiable.value = false;
emit('search');
ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
})

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

@ -1,11 +1,11 @@
<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>
<div class="card-header">
<span>{{ $t('container.createNetwork') }}</span>
</div>
<DrawerHeader :header="$t('container.createNetwork')" :back="handleClose" />
</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-row type="flex" justify="center">
<el-col :span="22">
<el-form-item :label="$t('container.networkName')" prop="name">
<el-input clearable v-model.trim="form.name" />
</el-form-item>
@ -42,10 +42,12 @@
v-model="form.labelStr"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button :disabled="loading" @click="createVisiable = false">
<el-button :disabled="loading" @click="drawerVisiable = false">
{{ $t('commons.button.cancel') }}
</el-button>
<el-button :disabled="loading" type="primary" @click="onSubmit(formRef)">
@ -65,7 +67,7 @@ import { createNetwork } from '@/api/modules/container';
const loading = ref(false);
const createVisiable = ref(false);
const drawerVisiable = ref(false);
const form = reactive({
name: '',
labelStr: '',
@ -79,11 +81,14 @@ const form = reactive({
});
const acceptParams = (): void => {
createVisiable.value = true;
drawerVisiable.value = true;
};
const emit = defineEmits<{ (e: 'search'): void }>();
const handleClose = () => {
drawerVisiable.value = false;
};
const rules = reactive({
name: [Rules.requiredInput, Rules.name],
driver: [Rules.requiredSelect],
@ -107,7 +112,7 @@ const onSubmit = async (formEl: FormInstance | undefined) => {
loading.value = false;
ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
emit('search');
createVisiable.value = false;
drawerVisiable.value = false;
})
.catch(() => {
loading.value = false;

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

@ -1,11 +1,18 @@
<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>
<div class="card-header">
<span>{{ title }}{{ $t('container.repo') }}</span>
</div>
<DrawerHeader :header="title + $t('container.repo')" :back="handleClose" />
</template>
<el-form ref="formRef" v-loading="loading" :model="dialogData.rowData" :rules="rules" label-width="120px">
<el-form
ref="formRef"
label-position="top"
v-loading="loading"
:model="dialogData.rowData"
:rules="rules"
label-width="120px"
>
<el-row type="flex" justify="center">
<el-col :span="22">
<el-form-item :label="$t('container.name')" prop="name">
<el-input
clearable
@ -49,10 +56,13 @@
{{ $t('container.httpRepo') }}
</span>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button :disabled="loading" @click="repoVisiable = false">
<el-button :disabled="loading" @click="drawerVisiable = false">
{{ $t('commons.button.cancel') }}
</el-button>
<el-button :disabled="loading" type="primary" @click="onSubmit(formRef)">
@ -79,17 +89,20 @@ interface DialogProps {
getTableList?: () => Promise<any>;
}
const title = ref<string>('');
const repoVisiable = ref(false);
const drawerVisiable = ref(false);
const dialogData = ref<DialogProps>({
title: '',
});
const acceptParams = (params: DialogProps): void => {
dialogData.value = params;
title.value = i18n.global.t('commons.button.' + dialogData.value.title);
repoVisiable.value = true;
drawerVisiable.value = true;
};
const emit = defineEmits<{ (e: 'search'): void }>();
const handleClose = () => {
drawerVisiable.value = false;
};
const rules = reactive({
name: [Rules.requiredInput, Rules.name],
downloadUrl: [Rules.requiredInput],
@ -113,7 +126,7 @@ const onSubmit = async (formEl: FormInstance | undefined) => {
loading.value = false;
ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
emit('search');
repoVisiable.value = false;
drawerVisiable.value = false;
})
.catch(() => {
loading.value = false;
@ -125,7 +138,7 @@ const onSubmit = async (formEl: FormInstance | undefined) => {
loading.value = false;
ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
emit('search');
repoVisiable.value = false;
drawerVisiable.value = false;
})
.catch(() => {
loading.value = false;

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

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

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

@ -1,11 +1,18 @@
<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>
<div class="card-header">
<span>{{ $t('container.createVolume') }}</span>
</div>
<DrawerHeader :header="$t('container.createVolume')" :back="handleClose" />
</template>
<el-form ref="formRef" v-loading="loading" :model="form" :rules="rules" label-width="80px">
<el-row type="flex" justify="center">
<el-col :span="22">
<el-form
ref="formRef"
v-loading="loading"
label-position="top"
:model="form"
:rules="rules"
label-width="80px"
>
<el-form-item :label="$t('container.volumeName')" prop="name">
<el-input clearable v-model.trim="form.name" />
</el-form-item>
@ -31,9 +38,11 @@
/>
</el-form-item>
</el-form>
</el-col>
</el-row>
<template #footer>
<span class="dialog-footer">
<el-button :disabled="loading" @click="createVisiable = false">
<el-button :disabled="loading" @click="drawerVisiable = false">
{{ $t('commons.button.cancel') }}
</el-button>
<el-button :disabled="loading" type="primary" @click="onSubmit(formRef)">
@ -53,7 +62,7 @@ import { createVolume } from '@/api/modules/container';
const loading = ref(false);
const createVisiable = ref(false);
const drawerVisiable = ref(false);
const form = reactive({
name: '',
driver: 'local',
@ -64,11 +73,14 @@ const form = reactive({
});
const acceptParams = (): void => {
createVisiable.value = true;
drawerVisiable.value = true;
};
const emit = defineEmits<{ (e: 'search'): void }>();
const handleClose = () => {
drawerVisiable.value = false;
};
const rules = reactive({
name: [Rules.requiredInput, Rules.name],
driver: [Rules.requiredSelect],
@ -93,7 +105,7 @@ const onSubmit = async (formEl: FormInstance | undefined) => {
loading.value = false;
ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
emit('search');
createVisiable.value = false;
drawerVisiable.value = false;
})
.catch(() => {
loading.value = false;

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

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

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

@ -1,15 +1,39 @@
<template>
<div class="demo-collapse" v-show="onSetting">
<el-card style="margin-top: 5px" v-loading="loading">
<LayoutContent :header="'Mysql ' + $t('database.setting')" :back-name="'Mysql'" :reload="true">
<el-collapse v-model="activeName" @change="handleCollapse" accordion>
<el-collapse-item :title="$t('database.confChange')" name="1">
<div v-show="onSetting">
<LayoutContent :title="$t('nginx.nginxConfig')" :reload="true">
<template #buttons>
<el-button type="primary" :plain="activeName !== 'conf'" @click="changeTab('conf')">
{{ $t('database.confChange') }}
</el-button>
<el-button type="primary" :plain="activeName !== 'status'" @click="changeTab('status')">
{{ $t('database.currentStatus') }}
</el-button>
<el-button type="primary" :plain="activeName !== 'tuning'" @click="changeTab('tuning')">
{{ $t('database.performanceTuning') }}
</el-button>
<el-button type="primary" :plain="activeName !== 'port'" @click="changeTab('port')">
{{ $t('database.portSetting') }}
</el-button>
<el-button type="primary" :plain="activeName !== 'log'" @click="changeTab('log')">
{{ $t('database.log') }}
</el-button>
<el-button
type="primary"
:disabled="mysqlStatus !== 'Running'"
:plain="activeName !== 'slowLog'"
@click="changeTab('slowLog')"
>
{{ $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; max-height: 500px"
style="margin-top: 10px; height: calc(100vh - 360px)"
:lineWrapping="true"
:matchBrackets="true"
theme="cobalt"
@ -35,22 +59,10 @@
></el-alert>
</el-col>
</el-row>
</el-collapse-item>
<el-collapse-item
:disabled="mysqlStatus !== 'Running'"
:title="$t('database.currentStatus')"
name="2"
>
<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">
</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-col :span="1"><br /></el-col>
@ -67,17 +79,11 @@
</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>
</div>
<ContainerLog v-if="activeName === 'log'" ref="dialogContainerLogRef" />
<SlowLog v-if="activeName === 'slowLog'" ref="slowLogRef" />
</template>
</LayoutContent>
</el-card>
<ConfirmDialog ref="confirmPortRef" @confirm="onSubmitChangePort"></ConfirmDialog>
<ConfirmDialog ref="confirmConfRef" @confirm="onSubmitChangeConf"></ConfirmDialog>
@ -106,7 +112,7 @@ import { loadBaseDir } from '@/api/modules/setting';
const loading = ref(false);
const extensions = [javascript(), oneDark];
const activeName = ref('1');
const activeName = ref('conf');
const baseInfo = reactive({
name: '',
@ -152,7 +158,8 @@ const onClose = (): void => {
onSetting.value = false;
};
const handleCollapse = async (val: string) => {
const changeTab = (val: string) => {
activeName.value = val;
if (val !== '5') {
dialogContainerLogRef.value!.onCloseLog();
}
@ -160,6 +167,7 @@ const handleCollapse = async (val: string) => {
slowLogRef.value!.onCloseLog();
}
};
const onSubmitChangePort = async () => {
let params = {
key: 'mysql',

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

@ -14,24 +14,18 @@
inactive-value="OFF"
@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>
</div>
<el-button
v-if="variables.slow_query_log === 'ON'"
style="margin-left: 20px"
@click="onDownload"
icon="Download"
>
<el-button style="margin-left: 20px" @click="onDownload" icon="Download">
{{ $t('file.download') }}
</el-button>
<div v-if="variables.slow_query_log === 'ON'">
<codemirror
:autofocus="true"
placeholder="None data"
:indent-with-tab="true"
:tabSize="4"
style="margin-top: 10px; max-height: 500px"
style="margin-top: 10px; height: calc(100vh - 370px)"
:lineWrapping="true"
:matchBrackets="true"
theme="cobalt"
@ -41,7 +35,6 @@
v-model="slowLogs"
:readOnly="true"
/>
</div>
<br />
<ConfirmDialog @cancle="onCancle" ref="confirmDialogRef" @confirm="onSave"></ConfirmDialog>

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

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

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

@ -1,6 +1,5 @@
<template>
<div>
<el-card v-loading="loading">
<el-form :model="mysqlVariables" :rules="variablesRules" ref="variableFormRef" label-width="160px">
<el-row>
<el-col :span="1"><br /></el-col>
@ -110,7 +109,6 @@
</el-col>
</el-row>
</el-form>
</el-card>
<ConfirmDialog ref="confirmDialogRef" @confirm="onSaveVariables"></ConfirmDialog>
</div>

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

@ -1,15 +1,46 @@
<template>
<div class="demo-collapse" v-show="settingShow">
<el-card style="margin-top: 5px" v-loading="loading">
<LayoutContent :header="'Redis ' + $t('database.setting')" back-name="Redis" :reload="true">
<el-collapse v-model="activeName" accordion>
<el-collapse-item :title="$t('database.confChange')" name="1">
<div v-show="settingShow">
<LayoutContent :title="$t('nginx.nginxConfig')" :reload="true">
<template #buttons>
<el-button type="primary" :plain="activeName !== 'conf'" @click="changeTab('conf')">
{{ $t('database.confChange') }}
</el-button>
<el-button
type="primary"
:disabled="redisStatus !== 'Running'"
:plain="activeName !== 'status'"
@click="changeTab('status')"
>
{{ $t('database.status') }}
</el-button>
<el-button
type="primary"
:disabled="redisStatus !== 'Running'"
:plain="activeName !== 'tuning'"
@click="changeTab('tuning')"
>
{{ $t('database.performanceTuning') }}
</el-button>
<el-button type="primary" :plain="activeName !== 'port'" @click="changeTab('port')">
{{ $t('database.portSetting') }}
</el-button>
<el-button
type="primary"
:disabled="redisStatus !== 'Running'"
:plain="activeName !== 'persistence'"
@click="changeTab('persistence')"
>
{{ $t('database.persistence') }}
</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 - 280px)"
style="margin-top: 10px; height: calc(100vh - 370px)"
:lineWrapping="true"
:matchBrackets="true"
theme="cobalt"
@ -35,15 +66,9 @@
></el-alert>
</el-col>
</el-row>
</el-collapse-item>
<el-collapse-item :disabled="redisStatus !== 'Running'" :title="$t('database.status')" name="2">
<Status ref="statusRef" />
</el-collapse-item>
<el-collapse-item
:disabled="redisStatus !== 'Running'"
:title="$t('database.performanceTuning')"
name="3"
>
</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>
@ -67,9 +92,8 @@
</el-col>
</el-row>
</el-form>
</el-collapse-item>
<el-collapse-item :title="$t('database.portSetting')" name="4">
</div>
<div v-if="activeName === 'port'">
<el-form :model="form" ref="portRef" label-width="120px">
<el-row>
<el-col :span="1"><br /></el-col>
@ -86,17 +110,10 @@
</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>
</div>
<Persistence v-show="activeName === 'persistence'" ref="persistenceRef" />
</template>
</LayoutContent>
</el-card>
<ConfirmDialog ref="confirmDialogRef" @confirm="submtiFile"></ConfirmDialog>
<ConfirmDialog ref="confirmFileRef" @confirm="submtiFile"></ConfirmDialog>
@ -140,7 +157,7 @@ const rules = reactive({
maxmemory: [Rules.number],
});
const activeName = ref('1');
const activeName = ref('conf');
const statusRef = ref();
const persistenceRef = ref();
@ -160,6 +177,11 @@ interface DialogProps {
status: string;
}
const changeTab = (val: string) => {
activeName.value = val;
console.log(activeName.value);
};
const acceptParams = (prop: DialogProps): void => {
redisStatus.value = prop.status;
redisName.value = prop.redisName;

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

@ -1,6 +1,5 @@
<template>
<div v-if="statusShow">
<el-card style="margin-top: 5px">
<el-row>
<el-col :span="1"><br /></el-col>
<el-col :span="12">
@ -73,7 +72,6 @@
</table>
</el-col>
</el-row>
</el-card>
</div>
</template>

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

@ -1,6 +1,6 @@
<template>
<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>
</template>

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

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

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

@ -1,18 +1,19 @@
<template>
<div>
<el-card class="topRouterCard">
<el-radio-group @change="handleChange" v-model="activeNames">
<el-radio-button class="topRouterButton" size="default" label="terminal">
<el-card class="router_card">
<el-radio-group v-model="activeNames" @change="handleChange">
<el-radio-button class="router_card_button" size="large" label="terminal">
{{ $t('menu.terminal') }}
</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') }}
</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') }}
</el-radio-button>
</el-radio-group>
</el-card>
<div v-show="activeNames === 'terminal'">
<TerminalTab ref="terminalTabRef" />
</div>
@ -55,3 +56,35 @@ onUnmounted(() => {
terminalTabRef.value?.cleanTimer();
});
</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>

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

@ -1,6 +1,9 @@
<template>
<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
v-if="isLocal"
style="margin-bottom: 20px"
@ -9,10 +12,14 @@
:closable="false"
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-row type="flex" justify="center">
<el-col :span="22">
<el-form-item :label="$t('terminal.ip')" prop="addr">
<el-input v-if="!isLocal" clearable v-model="hostInfo.addr" />
<div style="margin-left: 12px">
<span v-if="isLocal">{{ hostInfo.addr }}</span>
</div>
</el-form-item>
<el-form-item :label="$t('terminal.user')" prop="user">
<el-input clearable v-model="hostInfo.user" />
@ -23,7 +30,11 @@
<el-radio label="key">{{ $t('terminal.keyMode') }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('terminal.password')" v-if="hostInfo.authMode === 'password'" prop="password">
<el-form-item
:label="$t('terminal.password')"
v-if="hostInfo.authMode === 'password'"
prop="password"
>
<el-input clearable show-password type="password" v-model="hostInfo.password" />
</el-form-item>
<el-form-item :label="$t('terminal.key')" v-if="hostInfo.authMode === 'key'" prop="privateKey">
@ -38,6 +49,8 @@
<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>
<template #footer>
<span class="dialog-footer">
@ -50,7 +63,7 @@
</el-button>
</span>
</template>
</el-dialog>
</el-drawer>
</div>
</template>
@ -101,6 +114,10 @@ const acceptParams = (props: DialogProps) => {
dialogVisiable.value = true;
};
const handleClose = () => {
dialogVisiable.value = false;
};
const emit = defineEmits(['on-conn-terminal', 'load-host-tree']);
const submitAddHost = (formEl: FormInstance | undefined, ops: string) => {

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

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

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

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

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

@ -1,9 +1,7 @@
<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>
<div class="card-header">
<span>{{ title }}{{ $t('setting.backupAccount') }}</span>
</div>
<DrawerHeader :header="title + $t('setting.backupAccount')" :back="handleClose" />
</template>
<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">
@ -101,7 +99,7 @@
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button :disabled="loading" @click="dialogVisiable = false">
<el-button :disabled="loading" @click="drawerVisiable = false">
{{ $t('commons.button.cancel') }}
</el-button>
<el-button :disabled="loading" type="primary" @click="onSubmit(formRef)">
@ -137,7 +135,7 @@ interface DialogProps {
getTableList?: () => Promise<any>;
}
const title = ref<string>('');
const dialogVisiable = ref(false);
const drawerVisiable = ref(false);
const dialogData = ref<DialogProps>({
title: '',
});
@ -151,7 +149,11 @@ const acceptParams = (params: DialogProps): void => {
}
}
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) => {
@ -204,7 +206,7 @@ const onSubmit = async (formEl: FormInstance | undefined) => {
ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
emit('search');
dialogVisiable.value = false;
drawerVisiable.value = false;
});
};

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

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

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

@ -1,6 +1,9 @@
<template>
<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-card>
<template #header>
@ -195,6 +198,10 @@ const acceptParams = (params: DialogProps): void => {
drawerVisiable.value = true;
};
const handleClose = () => {
drawerVisiable.value = false;
};
const doRecover = async (isNew: boolean) => {
loading.value = true;
await snapshotRecover({ id: snapInfo.value.id, isNew: isNew, reDownload: reDownload.value })