1
0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-03-13 17:24:44 +08:00

fix: 数据库连接信息更改为容器名 (#3735)

This commit is contained in:
ssongliu 2024-01-29 16:34:40 +08:00 committed by GitHub
parent 7a45db71d5
commit 045dbaef91
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 237 additions and 139 deletions

View File

@ -1,9 +1,10 @@
package response
import (
"time"
"github.com/1Panel-dev/1Panel/backend/app/dto"
"github.com/1Panel-dev/1Panel/backend/app/dto/request"
"time"
"github.com/1Panel-dev/1Panel/backend/app/model"
)
@ -72,10 +73,11 @@ type AppInstalledDTO struct {
}
type DatabaseConn struct {
Username string `json:"username"`
Password string `json:"password"`
ServiceName string `json:"serviceName"`
Port int64 `json:"port"`
Username string `json:"username"`
Password string `json:"password"`
ContainerName string `json:"containerName"`
ServiceName string `json:"serviceName"`
Port int64 `json:"port"`
}
type AppService struct {

View File

@ -188,6 +188,7 @@ func (a *AppInstallService) LoadConnInfo(req dto.OperationWithNameAndType) (resp
data.Password = app.Password
data.ServiceName = app.ServiceName
data.Port = app.Port
data.ContainerName = app.ContainerName
return data, nil
}

View File

@ -145,6 +145,7 @@ export namespace App {
username: string;
password: string;
privilege: boolean;
containerName: string;
serviceName: string;
systemIP: string;
port: number;

View File

@ -514,9 +514,12 @@ const message = {
rdbHelper3: 'Meeting either condition triggers RDB persistence',
rdbInfo: 'Ensure that the value in the rule list ranges from 1 to 100000',
containerConn: 'Container connection address',
containerConnHelper: 'PHP runtime environment/container-installed applications use this connection address',
remoteConn: 'External connection address',
containerConn: 'Container Connection',
connAddress: 'Address',
connPort: 'Port',
containerConnHelper:
'This connection address is used by applications running on the PHP execution environment/container installation.',
remoteConn: 'External Connection',
remoteConnHelper2: 'Use this address for non-container or external connections',
localIP: 'Local IP',
},

View File

@ -501,9 +501,11 @@ const message = {
rdbHelper3: '符合任意一個條件將會觸發RDB持久化',
rdbInfo: '請確認規則列表中值在 1-100000 之間',
containerConn: '容器連接地址',
containerConnHelper: 'PHP 運行環境/容器安裝的應用使用此連接地址',
remoteConn: '外部連接地址',
containerConn: '容器連接',
connAddress: '地址',
connPort: '端口',
containerConnHelper: 'PHP 執行環境/容器安裝的應用程式使用此連接地址',
remoteConn: '外部連接',
remoteConnHelper2: '非容器或外部連接使用此地址',
localIP: '本機 IP',
},

View File

@ -501,9 +501,11 @@ const message = {
rdbHelper3: '符合任意一个条件将会触发RDB持久化',
rdbInfo: '请确认规则列表中值在 1-100000 之间',
containerConn: '容器连接地址',
containerConn: '容器连接',
connAddress: '地址',
connPort: '端口',
containerConnHelper: 'PHP 运行环境/容器安装的应用使用此连接地址',
remoteConn: '外部连接地址',
remoteConn: '外部连接',
remoteConnHelper2: '非容器或外部连接使用此地址',
localIP: '本机 IP',
},

View File

@ -288,6 +288,13 @@ html {
}
}
.mini-border-card {
width: 100%;
.el-card__body {
--el-card-padding: 12px 12px 0 22px;
}
}
.xterm-viewport::-webkit-scrollbar {
width: 8px;
height: 8px;

View File

@ -4,65 +4,93 @@
<DrawerHeader :header="$t('database.databaseConnInfo')" :back="handleClose" />
</template>
<el-form @submit.prevent v-loading="loading" ref="formRef" :model="form" label-position="top">
<el-row type="flex" justify="center" v-if="form.from === 'local'">
<el-row type="flex" justify="center">
<el-col :span="22">
<el-form-item :label="$t('database.containerConn')">
<el-tag>
{{ form.serviceName + ':3306' }}
</el-tag>
<CopyButton :content="form.serviceName + ':3306'" type="icon" />
<el-form-item :label="$t('database.containerConn')" v-if="form.from === 'local'">
<el-card class="mini-border-card">
<el-descriptions :column="1">
<el-descriptions-item :label="$t('database.connAddress')">
<el-tooltip
v-if="loadMysqlInfo(true).length > 48"
:content="loadMysqlInfo(true)"
placement="top"
>
{{ loadMysqlInfo(true).substring(0, 48) }}...
</el-tooltip>
<span else>
{{ loadMysqlInfo(true) }}
</span>
<CopyButton :content="loadMysqlInfo(true)" type="icon" />
</el-descriptions-item>
<el-descriptions-item :label="$t('database.connPort')">
3306
<CopyButton content="3306" type="icon" />
</el-descriptions-item>
</el-descriptions>
</el-card>
<span class="input-help">
{{ $t('database.containerConnHelper') }}
</span>
</el-form-item>
<el-form-item :label="$t('database.remoteConn')">
<el-tooltip v-if="loadConnInfo(true).length > 48" :content="loadConnInfo(true)" placement="top">
<el-tag>{{ loadConnInfo(true).substring(0, 48) }}...</el-tag>
</el-tooltip>
<el-tag v-else>{{ loadConnInfo(true) }}</el-tag>
<CopyButton :content="form.systemIP + ':' + form.port" type="icon" />
<span class="input-help">{{ $t('database.remoteConnHelper2') }}</span>
<el-card class="mini-border-card">
<el-descriptions :column="1">
<el-descriptions-item :label="$t('database.connAddress')">
<el-tooltip
v-if="loadMysqlInfo(false).length > 48"
:content="loadMysqlInfo(false)"
placement="top"
>
{{ loadMysqlInfo(false).substring(0, 48) }}...
</el-tooltip>
<span else>
{{ loadMysqlInfo(false) }}
</span>
<CopyButton :content="loadMysqlInfo(false)" type="icon" />
</el-descriptions-item>
<el-descriptions-item :label="$t('database.connPort')">
{{ form.port }}
<CopyButton :content="form.port + ''" type="icon" />
</el-descriptions-item>
</el-descriptions>
</el-card>
<span v-if="form.from === 'local'" class="input-help">
{{ $t('database.remoteConnHelper2') }}
</span>
</el-form-item>
<el-divider border-style="dashed" />
<el-form-item :label="$t('database.remoteAccess')" prop="privilege">
<el-switch v-model="form.privilege" @change="onSaveAccess" />
<span class="input-help">{{ $t('database.remoteConnHelper') }}</span>
</el-form-item>
<el-form-item :label="$t('database.rootPassword')" :rules="Rules.paramComplexity" prop="password">
<el-input type="password" show-password clearable v-model="form.password">
<template #append>
<CopyButton :content="form.password" />
<el-button @click="random" class="p-ml-5">
{{ $t('commons.button.random') }}
</el-button>
</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row type="flex" justify="center" v-if="form.from !== 'local'">
<el-col :span="22">
<el-form-item :label="$t('database.remoteConn')">
<el-tooltip
v-if="loadConnInfo(false).length > 48"
:content="loadConnInfo(false)"
placement="top"
<div v-if="form.from === 'local'">
<el-form-item :label="$t('database.remoteAccess')" prop="privilege">
<el-switch v-model="form.privilege" @change="onSaveAccess" />
<span class="input-help">{{ $t('database.remoteConnHelper') }}</span>
</el-form-item>
<el-form-item
:label="$t('database.rootPassword')"
:rules="Rules.paramComplexity"
prop="password"
>
<el-tag>{{ loadConnInfo(false).substring(0, 48) }}...</el-tag>
</el-tooltip>
<el-tag v-else>{{ loadConnInfo(false) }}</el-tag>
<CopyButton :content="form.remoteIP + ':' + form.port" type="icon" />
</el-form-item>
<el-form-item :label="$t('commons.login.username')">
<el-tag>{{ form.username }}</el-tag>
<CopyButton :content="form.username" type="icon" />
</el-form-item>
<el-form-item :label="$t('commons.login.password')">
<el-tag>{{ form.password }}</el-tag>
<CopyButton :content="form.password" type="icon" />
</el-form-item>
<el-input type="password" show-password clearable v-model="form.password">
<template #append>
<CopyButton :content="form.password" />
<el-button @click="random" class="p-ml-5">
{{ $t('commons.button.random') }}
</el-button>
</template>
</el-input>
</el-form-item>
</div>
<div v-if="form.from !== 'local'">
<el-form-item :label="$t('commons.login.username')">
<el-tag>{{ form.username }}</el-tag>
<CopyButton :content="form.username" type="icon" />
</el-form-item>
<el-form-item :label="$t('commons.login.password')">
<el-tag>{{ form.password }}</el-tag>
<CopyButton :content="form.password" type="icon" />
</el-form-item>
</div>
</el-col>
</el-row>
</el-form>
@ -103,6 +131,7 @@ const form = reactive({
systemIP: '',
password: '',
serviceName: '',
containerName: '',
privilege: false,
port: 0,
@ -135,10 +164,12 @@ const acceptParams = (param: DialogProps): void => {
dialogVisible.value = true;
};
function loadConnInfo(isLocal: boolean) {
let ip = isLocal ? form.systemIP : form.remoteIP;
let info = ip + ':' + form.port;
return info;
function loadMysqlInfo(isContainer: boolean) {
if (isContainer) {
return form.from === 'local' ? form.containerName : form.systemIP;
} else {
return form.from === 'local' ? form.systemIP : form.remoteIP;
}
}
const random = async () => {
@ -167,6 +198,7 @@ const loadPassword = async () => {
form.password = res.data.password || '';
form.port = res.data.port || 3306;
form.serviceName = res.data.serviceName || '';
form.containerName = res.data.containerName || '';
loadSystemIP();
return;
}

View File

@ -4,69 +4,97 @@
<DrawerHeader :header="$t('database.databaseConnInfo')" :back="handleClose" />
</template>
<el-form @submit.prevent v-loading="loading" ref="formRef" :model="form" label-position="top">
<el-row type="flex" justify="center" v-if="form.from === 'local'">
<el-row type="flex" justify="center">
<el-col :span="22">
<el-form-item :label="$t('database.containerConn')">
<el-tag>
{{ form.serviceName + ':' + form.port }}
</el-tag>
<CopyButton :content="form.serviceName + ':' + form.port" type="icon" />
<el-form-item :label="$t('database.containerConn')" v-if="form.from === 'local'">
<el-card class="mini-border-card">
<el-descriptions :column="1">
<el-descriptions-item :label="$t('database.connAddress')">
<el-tooltip
v-if="loadPgInfo(true).length > 48"
:content="loadPgInfo(true)"
placement="top"
>
{{ loadPgInfo(true).substring(0, 48) }}...
</el-tooltip>
<span else>
{{ loadPgInfo(true) }}
</span>
<CopyButton :content="loadPgInfo(true)" type="icon" />
</el-descriptions-item>
<el-descriptions-item :label="$t('database.connPort')">
{{ form.port }}
<CopyButton :content="form.port + ''" type="icon" />
</el-descriptions-item>
</el-descriptions>
</el-card>
<span class="input-help">
{{ $t('database.containerConnHelper') }}
</span>
</el-form-item>
<el-form-item :label="$t('database.remoteConn')">
<el-tooltip v-if="loadConnInfo(true).length > 48" :content="loadConnInfo(true)" placement="top">
<el-tag>{{ loadConnInfo(true).substring(0, 48) }}...</el-tag>
</el-tooltip>
<el-tag v-else>{{ loadConnInfo(true) }}</el-tag>
<CopyButton :content="form.systemIP + ':' + form.port" type="icon" />
<span class="input-help">{{ $t('database.remoteConnHelper2') }}</span>
<el-card class="mini-border-card">
<el-descriptions :column="1">
<el-descriptions-item :label="$t('database.connAddress')">
<el-tooltip
v-if="loadPgInfo(false).length > 48"
:content="loadPgInfo(false)"
placement="top"
>
{{ loadPgInfo(false).substring(0, 48) }}...
</el-tooltip>
<span else>
{{ loadPgInfo(false) }}
</span>
<CopyButton :content="loadPgInfo(false)" type="icon" />
</el-descriptions-item>
<el-descriptions-item :label="$t('database.connPort')">
{{ form.port }}
<CopyButton :content="form.port + ''" type="icon" />
</el-descriptions-item>
</el-descriptions>
</el-card>
<span v-if="form.from === 'local'" class="input-help">
{{ $t('database.remoteConnHelper2') }}
</span>
</el-form-item>
<el-divider border-style="dashed" />
<el-form-item :label="$t('commons.login.username')" prop="username">
<el-input type="text" readonly disabled v-model="form.username">
<template #append>
<el-button-group>
<CopyButton :content="form.username" />
</el-button-group>
</template>
</el-input>
</el-form-item>
<el-form-item :label="$t('commons.login.password')" :rules="Rules.paramComplexity" prop="password">
<el-input type="password" show-password clearable v-model="form.password">
<template #append>
<CopyButton :content="form.password" />
<el-button @click="random" class="p-ml-5">
{{ $t('commons.button.random') }}
</el-button>
</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row type="flex" justify="center" v-if="form.from !== 'local'">
<el-col :span="22">
<el-form-item :label="$t('database.remoteConn')">
<el-tooltip
v-if="loadConnInfo(false).length > 48"
:content="loadConnInfo(false)"
placement="top"
<div v-if="form.from === 'local'">
<el-form-item :label="$t('commons.login.username')" prop="username">
<el-input type="text" readonly disabled v-model="form.username">
<template #append>
<el-button-group>
<CopyButton :content="form.username" />
</el-button-group>
</template>
</el-input>
</el-form-item>
<el-form-item
:label="$t('commons.login.password')"
:rules="Rules.paramComplexity"
prop="password"
>
<el-tag>{{ loadConnInfo(false).substring(0, 48) }}...</el-tag>
</el-tooltip>
<el-tag v-else>{{ loadConnInfo(false) }}</el-tag>
<CopyButton :content="form.remoteIP + ':' + form.port" type="icon" />
</el-form-item>
<el-form-item :label="$t('commons.login.username')">
<el-tag>{{ form.username }}</el-tag>
<CopyButton :content="form.username" type="icon" />
</el-form-item>
<el-form-item :label="$t('commons.login.password')">
<el-tag>{{ form.password }}</el-tag>
<CopyButton :content="form.password" type="icon" />
</el-form-item>
<el-input type="password" show-password clearable v-model="form.password">
<template #append>
<CopyButton :content="form.password" />
<el-button @click="random" class="p-ml-5">
{{ $t('commons.button.random') }}
</el-button>
</template>
</el-input>
</el-form-item>
</div>
<div v-if="form.from !== 'local'">
<el-form-item :label="$t('commons.login.username')">
<el-tag>{{ form.username }}</el-tag>
<CopyButton :content="form.username" type="icon" />
</el-form-item>
<el-form-item :label="$t('commons.login.password')">
<el-tag>{{ form.password }}</el-tag>
<CopyButton :content="form.password" type="icon" />
</el-form-item>
</div>
</el-col>
</el-row>
</el-form>
@ -105,6 +133,7 @@ const dialogVisible = ref(false);
const form = reactive({
systemIP: '',
password: '',
containerName: '',
serviceName: '',
privilege: false,
port: 0,
@ -137,10 +166,12 @@ const acceptParams = (param: DialogProps): void => {
dialogVisible.value = true;
};
function loadConnInfo(isLocal: boolean) {
let ip = isLocal ? form.systemIP : form.remoteIP;
let info = ip + ':' + form.port;
return info;
function loadPgInfo(isContainer: boolean) {
if (isContainer) {
return form.from === 'local' ? form.containerName : form.systemIP;
} else {
return form.from === 'local' ? form.systemIP : form.remoteIP;
}
}
const random = async () => {
@ -153,7 +184,6 @@ const handleClose = () => {
const loadAccess = async () => {
if (form.from === 'local') {
// const res = await loadRemoteAccess(form.type, form.database);
form.privilege = false;
}
};
@ -169,6 +199,7 @@ const loadPassword = async () => {
form.username = res.data.username || '';
form.password = res.data.password || '';
form.port = res.data.port || 5432;
form.containerName = res.data.containerName || '';
form.serviceName = res.data.serviceName || '';
loadSystemIP();
return;

View File

@ -7,22 +7,41 @@
<el-row type="flex" justify="center">
<el-col :span="22">
<el-form-item :label="$t('database.containerConn')">
<el-tag>
{{ form.serviceName + ':6379' }}
</el-tag>
<CopyButton :content="form.serviceName + ':6379'" type="icon" />
<el-card class="mini-border-card">
<el-descriptions :column="1">
<el-descriptions-item :label="$t('database.connAddress')">
{{ form.containerName }}
<CopyButton :content="form.containerName" type="icon" />
</el-descriptions-item>
<el-descriptions-item :label="$t('database.connPort')">
6379
<CopyButton content="6379" type="icon" />
</el-descriptions-item>
</el-descriptions>
</el-card>
<span class="input-help">
{{ $t('database.containerConnHelper') }}
</span>
</el-form-item>
<el-form-item :label="$t('database.remoteConn')">
<el-tooltip v-if="loadConnInfo().length > 48" :content="loadConnInfo()" placement="top">
<el-tag>{{ loadConnInfo().substring(0, 48) }}...</el-tag>
</el-tooltip>
<el-tag v-else>{{ loadConnInfo() }}</el-tag>
<CopyButton :content="form.systemIP + ':6379'" type="icon" />
<span class="input-help">{{ $t('database.remoteConnHelper2') }}</span>
<el-card class="mini-border-card">
<el-descriptions :column="1">
<el-descriptions-item :label="$t('database.connAddress')">
{{ form.systemIP }}
<CopyButton :content="form.systemIP" type="icon" />
</el-descriptions-item>
<el-descriptions-item :label="$t('database.connPort')">
{{ form.port }}
<CopyButton :content="form.port + ''" type="icon" />
</el-descriptions-item>
</el-descriptions>
</el-card>
<span class="input-help">
{{ $t('database.remoteConnHelper2') }}
</span>
</el-form-item>
<el-divider border-style="dashed" />
<el-form-item :label="$t('commons.login.password')" :rules="Rules.paramComplexity" prop="password">
<el-input type="password" show-password clearable v-model="form.password">
<template #append>
@ -70,8 +89,10 @@ const loading = ref(false);
const dialogVisible = ref(false);
const form = ref<App.DatabaseConnInfo>({
privilege: false,
username: '',
password: '',
privilege: false,
containerName: '',
serviceName: '',
systemIP: '',
port: 0,
@ -119,10 +140,6 @@ const onSubmit = async () => {
});
};
function loadConnInfo() {
return form.value.systemIP + ':' + form.value.port;
}
const onSave = async (formEl: FormInstance | undefined) => {
if (!formEl) return;
formEl.validate(async (valid) => {