feat: 数据库、redis、mongo支持ssh隧道等

This commit is contained in:
meilin.huang
2022-07-20 23:25:52 +08:00
parent 802e379f60
commit f0540559bb
30 changed files with 1885 additions and 1694 deletions

View File

@@ -15,6 +15,7 @@
"cropperjs": "^1.5.11",
"echarts": "^5.3.3",
"element-plus": "^2.2.9",
"jsencrypt": "^3.2.1",
"jsoneditor": "^9.9.0",
"lodash": "^4.17.21",
"mitt": "^3.0.0",
@@ -24,7 +25,7 @@
"sql-formatter": "^7.0.3",
"vue": "^3.2.37",
"vue-clipboard3": "^1.0.1",
"vue-router": "^4.0.16",
"vue-router": "^4.1.2",
"vuex": "^4.0.2",
"xterm": "^4.19.0",
"xterm-addon-fit": "^0.5.0"
@@ -1880,6 +1881,11 @@
"js-yaml": "bin/js-yaml.js"
}
},
"node_modules/jsencrypt": {
"version": "3.2.1",
"resolved": "https://registry.npmmirror.com/jsencrypt/-/jsencrypt-3.2.1.tgz",
"integrity": "sha512-k1sD5QV0KPn+D8uG9AdGzTQuamt82QZ3A3l6f7TRwMU6Oi2Vg0BsL+wZIQBONcraO1pc78ExMdvmBBJ8WhNYUA=="
},
"node_modules/json-schema-traverse": {
"version": "0.4.1",
"resolved": "https://registry.npm.taobao.org/json-schema-traverse/download/json-schema-traverse-0.4.1.tgz",
@@ -2931,15 +2937,11 @@
}
},
"node_modules/vue-router": {
"version": "4.0.16",
"resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.0.16.tgz",
"integrity": "sha512-JcO7cb8QJLBWE+DfxGUL3xUDOae/8nhM1KVdnudadTAORbuxIC/xAydC5Zr/VLHUDQi1ppuTF5/rjBGzgzrJNA==",
"license": "MIT",
"version": "4.1.2",
"resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.1.2.tgz",
"integrity": "sha512-5BP1qXFncVRwgV/XnqzsKApdMjQPqWIpoUBdL1ynz8HyLxIX/UDAx7Ql2BjmA5CXT/p61JfZvkpiFWFpaqcfag==",
"dependencies": {
"@vue/devtools-api": "^6.0.0"
},
"funding": {
"url": "https://github.com/sponsors/posva"
"@vue/devtools-api": "^6.1.4"
},
"peerDependencies": {
"vue": "^3.2.0"
@@ -4358,6 +4360,11 @@
"argparse": "^2.0.1"
}
},
"jsencrypt": {
"version": "3.2.1",
"resolved": "https://registry.npmmirror.com/jsencrypt/-/jsencrypt-3.2.1.tgz",
"integrity": "sha512-k1sD5QV0KPn+D8uG9AdGzTQuamt82QZ3A3l6f7TRwMU6Oi2Vg0BsL+wZIQBONcraO1pc78ExMdvmBBJ8WhNYUA=="
},
"json-schema-traverse": {
"version": "0.4.1",
"resolved": "https://registry.npm.taobao.org/json-schema-traverse/download/json-schema-traverse-0.4.1.tgz",
@@ -5044,11 +5051,11 @@
}
},
"vue-router": {
"version": "4.0.16",
"resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.0.16.tgz",
"integrity": "sha512-JcO7cb8QJLBWE+DfxGUL3xUDOae/8nhM1KVdnudadTAORbuxIC/xAydC5Zr/VLHUDQi1ppuTF5/rjBGzgzrJNA==",
"version": "4.1.2",
"resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.1.2.tgz",
"integrity": "sha512-5BP1qXFncVRwgV/XnqzsKApdMjQPqWIpoUBdL1ynz8HyLxIX/UDAx7Ql2BjmA5CXT/p61JfZvkpiFWFpaqcfag==",
"requires": {
"@vue/devtools-api": "^6.0.0"
"@vue/devtools-api": "^6.1.4"
}
},
"vuex": {

View File

@@ -23,10 +23,13 @@
</el-select>
</el-form-item>
<el-form-item prop="host" label="host:" required>
<el-input v-model.trim="form.host" placeholder="请输入主机ip" auto-complete="off"></el-input>
</el-form-item>
<el-form-item prop="port" label="port:" required>
<el-input type="number" v-model.number="form.port" placeholder="请输入端口"></el-input>
<el-col :span="18">
<el-input v-model.trim="form.host" placeholder="请输入主机ip" auto-complete="off"></el-input>
</el-col>
<el-col style="text-align: center" :span="1">:</el-col>
<el-col :span="5">
<el-input type="number" v-model.number="form.port" placeholder="请输入端口"></el-input>
</el-col>
</el-form-item>
<el-form-item prop="username" label="用户名:" required>
<el-input v-model.trim="form.username" placeholder="请输入用户名"></el-input>
@@ -68,26 +71,22 @@
<el-button v-else class="ml5 mt5" size="small" @click="showInputDb"> + 添加数据库 </el-button>
</el-form-item>
<el-form-item prop="enable_ssh" label="SSH:" v-if="form.type === 'mysql'">
<el-checkbox v-model="form.enable_ssh" :true-label=1 :false-label=0></el-checkbox>
</el-form-item>
<el-form-item prop="ssh_host" label="SSH Host:" v-if="form.enable_ssh === 1 && form.type === 'mysql'">
<el-input v-model.trim="form.ssh_host" placeholder="请输入主机ip" auto-complete="off"></el-input>
</el-form-item>
<el-form-item prop="ssh_user" label="SSH User:" v-if="form.enable_ssh === 1 && form.type === 'mysql'">
<el-input v-model.trim="form.ssh_user" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item prop="ssh_pass" label="SSH Pass:" v-if="form.enable_ssh === 1 && form.type === 'mysql'">
<el-input
type="password"
show-password
v-model.trim="form.ssh_pass"
placeholder="请输入密码,修改操作可不填"
autocomplete="new-password"
></el-input>
</el-form-item>
<el-form-item prop="ssh_port" label="SSH Port:" v-if="form.enable_ssh === 1 && form.type === 'mysql'">
<el-input type="number" v-model.number="form.ssh_port" placeholder="请输入端口"></el-input>
<el-form-item prop="enableSshTunnel" label="SSH隧道:">
<el-col :span="3">
<el-checkbox @change="getSshTunnelMachines" v-model="form.enableSshTunnel" :true-label="1" :false-label="-1"></el-checkbox>
</el-col>
<el-col :span="2" v-if="form.enableSshTunnel == 1"> 机器: </el-col>
<el-col :span="19" v-if="form.enableSshTunnel == 1">
<el-select style="width: 100%" v-model="form.sshTunnelMachineId" placeholder="请选择SSH隧道机器">
<el-option
v-for="item in sshTunnelMachineList"
:key="item.id"
:label="`${item.ip}:${item.port} [${item.name}]`"
:value="item.id"
>
</el-option>
</el-select>
</el-col>
</el-form-item>
</el-form>
@@ -105,6 +104,7 @@
import { toRefs, reactive, nextTick, watch, defineComponent, ref } from 'vue';
import { dbApi } from './api';
import { projectApi } from '../project/api.ts';
import { machineApi } from '../machine/api.ts';
import { ElMessage } from 'element-plus';
import type { ElInput } from 'element-plus';
import { notBlank } from '@/common/assert';
@@ -135,6 +135,7 @@ export default defineComponent({
projects: [],
envs: [],
databaseList: [] as any,
sshTunnelMachineList: [],
inputDbVisible: false,
inputDbValue: '',
form: {
@@ -149,11 +150,8 @@ export default defineComponent({
projectId: null,
envId: null,
env: null,
enable_ssh: null,
ssh_host: null,
ssh_user: null,
ssh_pass: null,
ssh_port: 22,
enableSshTunnel: null,
sshTunnelMachineId: null,
},
btnLoading: false,
rules: {
@@ -188,14 +186,7 @@ export default defineComponent({
host: [
{
required: true,
message: '请输入主机ip',
trigger: ['change', 'blur'],
},
],
port: [
{
required: true,
message: '请输入端口',
message: '请输入主机ip和port',
trigger: ['change', 'blur'],
},
],
@@ -217,6 +208,10 @@ export default defineComponent({
});
watch(props, (newValue) => {
state.dialogVisible = newValue.visible;
if (!state.dialogVisible) {
return;
}
state.projects = newValue.projects;
if (newValue.db) {
getEnvs(newValue.db.projectId);
@@ -225,10 +220,10 @@ export default defineComponent({
state.databaseList = newValue.db.database.split(' ');
} else {
state.envs = [];
state.form = { port: 3306 } as any;
state.form = { port: 3306, enableSshTunnel: -1 } as any;
state.databaseList = [];
}
state.dialogVisible = newValue.visible;
getSshTunnelMachines();
});
const handleClose = (db: string) => {
@@ -259,6 +254,13 @@ export default defineComponent({
state.form.database = state.databaseList.length == 0 ? '' : state.databaseList.join(' ');
};
const getSshTunnelMachines = async () => {
if (state.form.enableSshTunnel == 1 && state.sshTunnelMachineList.length == 0) {
const res = await machineApi.list.request({ pageNum: 1, pageSize: 100 });
state.sshTunnelMachineList = res.list;
}
};
const getEnvs = async (projectId: any) => {
state.envs = await projectApi.projectEnvs.request({ projectId });
};
@@ -291,7 +293,7 @@ export default defineComponent({
if (valid) {
const reqForm = { ...state.form };
reqForm.password = await RsaEncrypt(reqForm.password);
reqForm.ssh_pass = await RsaEncrypt(reqForm.ssh_pass);
// reqForm.ssh_pass = await RsaEncrypt(reqForm.ssh_pass);
dbApi.saveDb.request(reqForm).then(() => {
ElMessage.success('保存成功');
emit('val-change', state.form);
@@ -330,6 +332,7 @@ export default defineComponent({
handleClose,
showInputDb,
handleInputDbConfirm,
getSshTunnelMachines,
changeProject,
changeEnv,
btnOk,

View File

@@ -11,15 +11,24 @@
<el-input v-model.trim="form.name" placeholder="请输入机器别名" auto-complete="off"></el-input>
</el-form-item>
<el-form-item prop="ip" label="ip:" required>
<el-input v-model.trim="form.ip" placeholder="请输入主机ip" auto-complete="off"></el-input>
</el-form-item>
<el-form-item prop="port" label="port:" required>
<el-input type="number" v-model.number="form.port" placeholder="请输入端口"></el-input>
<el-col :span="18">
<el-input v-model.trim="form.ip" placeholder="主机ip" auto-complete="off"></el-input>
</el-col>
<el-col style="text-align: center" :span="1">:</el-col>
<el-col :span="5">
<el-input type="number" v-model.number="form.port" placeholder="端口"></el-input>
</el-col>
</el-form-item>
<el-form-item prop="username" label="用户名:" required>
<el-input v-model.trim="form.username" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item prop="password" label="密码:">
<el-form-item prop="authMethod" label="认证方式:" required>
<el-select style="width: 100%" v-model="form.authMethod" placeholder="请选择认证方式">
<el-option key="1" label="Password" :value="1"> </el-option>
<el-option key="2" label="PublicKey" :value="2"> </el-option>
</el-select>
</el-form-item>
<el-form-item v-if="form.authMethod == 1" prop="password" label="密码:">
<el-input
type="password"
show-password
@@ -28,6 +37,9 @@
autocomplete="new-password"
></el-input>
</el-form-item>
<el-form-item v-if="form.authMethod == 2" prop="password" label="秘钥:">
<el-input type="textarea" :rows="3" v-model="form.password" placeholder="请将私钥文件内容拷贝至此,修改操作可不填"></el-input>
</el-form-item>
<el-form-item prop="remark" label="备注:">
<el-input type="textarea" v-model="form.remark"></el-input>
</el-form-item>
@@ -76,9 +88,10 @@ export default defineComponent({
projectId: null,
projectName: null,
name: null,
authMethod: 1,
port: 22,
username: "",
password: "",
username: '',
password: '',
remark: '',
},
btnLoading: false,
@@ -107,14 +120,7 @@ export default defineComponent({
ip: [
{
required: true,
message: '请输入主机ip',
trigger: ['change', 'blur'],
},
],
port: [
{
required: true,
message: '请输入端口',
message: '请输入主机ip和端口',
trigger: ['change', 'blur'],
},
],
@@ -125,16 +131,26 @@ export default defineComponent({
trigger: ['change', 'blur'],
},
],
authMethod: [
{
required: true,
message: '请选择认证方式',
trigger: ['change', 'blur'],
},
],
},
});
watch(props, async (newValue) => {
state.dialogVisible = newValue.visible;
if (!state.dialogVisible) {
return;
}
state.projects = newValue.projects;
if (newValue.machine) {
state.form = { ...newValue.machine };
} else {
state.form = { port: 22 } as any;
state.form = { port: 22, authMethod: 1 } as any;
}
});
@@ -153,17 +169,18 @@ export default defineComponent({
machineForm.value.validate(async (valid: boolean) => {
if (valid) {
const reqForm = { ...state.form };
reqForm.password = await RsaEncrypt(state.form.password);
machineApi.saveMachine.request(reqForm).then(() => {
if (reqForm.authMethod == 1) {
reqForm.password = await RsaEncrypt(state.form.password);
}
state.btnLoading = true;
try {
await machineApi.saveMachine.request(reqForm);
ElMessage.success('保存成功');
emit('val-change', state.form);
state.btnLoading = true;
setTimeout(() => {
state.btnLoading = false;
}, 1000);
cancel();
});
} finally {
state.btnLoading = false;
}
} else {
ElMessage.error('请正确填写信息');
return false;

View File

@@ -260,13 +260,13 @@ export default defineComponent({
search();
};
const openFormDialog = (redis: any) => {
const openFormDialog = (machine: any) => {
let dialogTitle;
if (redis) {
if (machine) {
state.machineEditDialog.data = state.currentData as any;
dialogTitle = '编辑机器';
} else {
state.machineEditDialog.data = { port: 22 } as any;
state.machineEditDialog.data = null;
dialogTitle = '添加机器';
}

View File

@@ -1,7 +1,7 @@
<template>
<div>
<el-dialog :title="title" v-model="dialogVisible" :before-close="cancel" :close-on-click-modal="false" width="35%" :destroy-on-close="true">
<el-form :model="form" ref="mongoForm" :rules="rules" label-width="65px">
<el-dialog :title="title" v-model="dialogVisible" :before-close="cancel" :close-on-click-modal="false" width="38%" :destroy-on-close="true">
<el-form :model="form" ref="mongoForm" :rules="rules" label-width="85px">
<el-form-item prop="projectId" label="项目" required>
<el-select style="width: 100%" v-model="form.projectId" placeholder="请选择项目" @change="changeProject" filterable>
<el-option v-for="item in projects" :key="item.id" :label="`${item.name} [${item.remark}]`" :value="item.id"> </el-option>
@@ -25,6 +25,24 @@
auto-complete="off"
></el-input>
</el-form-item>
<el-form-item prop="enableSshTunnel" label="SSH隧道:">
<el-col :span="3">
<el-checkbox @change="getSshTunnelMachines" v-model="form.enableSshTunnel" :true-label="1" :false-label="-1"></el-checkbox>
</el-col>
<el-col :span="2" v-if="form.enableSshTunnel == 1"> 机器: </el-col>
<el-col :span="19" v-if="form.enableSshTunnel == 1">
<el-select style="width: 100%" v-model="form.sshTunnelMachineId" placeholder="请选择SSH隧道机器">
<el-option
v-for="item in sshTunnelMachineList"
:key="item.id"
:label="`${item.ip}:${item.port} [${item.name}]`"
:value="item.id"
>
</el-option>
</el-select>
</el-col>
</el-form-item>
</el-form>
<template #footer>
@@ -41,6 +59,7 @@
import { toRefs, reactive, watch, defineComponent, ref } from 'vue';
import { mongoApi } from './api';
import { projectApi } from '../project/api.ts';
import { machineApi } from '../machine/api.ts';
import { ElMessage } from 'element-plus';
import { RsaEncrypt } from '@/common/rsa';
@@ -66,10 +85,13 @@ export default defineComponent({
dialogVisible: false,
projects: [],
envs: [],
sshTunnelMachineList: [],
form: {
id: null,
name: null,
uri: null,
enableSshTunnel: -1,
sshTunnelMachineId: null,
project: null,
projectId: null,
envId: null,
@@ -110,6 +132,9 @@ export default defineComponent({
watch(props, async (newValue) => {
state.dialogVisible = newValue.visible;
if (!state.dialogVisible) {
return;
}
state.projects = newValue.projects;
if (newValue.mongo) {
getEnvs(newValue.mongo.projectId);
@@ -118,8 +143,16 @@ export default defineComponent({
state.envs = [];
state.form = { db: 0 } as any;
}
getSshTunnelMachines();
});
const getSshTunnelMachines = async () => {
if (state.form.enableSshTunnel == 1 && state.sshTunnelMachineList.length == 0) {
const res = await machineApi.list.request({ pageNum: 1, pageSize: 100 });
state.sshTunnelMachineList = res.list;
}
};
const getEnvs = async (projectId: any) => {
state.envs = await projectApi.projectEnvs.request({ projectId });
};
@@ -175,6 +208,7 @@ export default defineComponent({
...toRefs(state),
mongoForm,
changeProject,
getSshTunnelMachines,
changeEnv,
btnOk,
cancel,

View File

@@ -1,6 +1,6 @@
<template>
<div>
<el-dialog :title="title" v-model="dialogVisible" :before-close="cancel" :close-on-click-modal="false" :destroy-on-close="true" width="35%">
<el-dialog :title="title" v-model="dialogVisible" :before-close="cancel" :close-on-click-modal="false" :destroy-on-close="true" width="38%">
<el-form :model="form" ref="redisForm" :rules="rules" label-width="85px">
<el-form-item prop="projectId" label="项目:" required>
<el-select style="width: 100%" v-model="form.projectId" placeholder="请选择项目" @change="changeProject" filterable>
@@ -42,6 +42,23 @@
<el-form-item prop="remark" label="备注:">
<el-input v-model.trim="form.remark" auto-complete="off" type="textarea"></el-input>
</el-form-item>
<el-form-item prop="enableSshTunnel" label="SSH隧道:">
<el-col :span="3">
<el-checkbox @change="getSshTunnelMachines" v-model="form.enableSshTunnel" :true-label="1" :false-label="-1"></el-checkbox>
</el-col>
<el-col :span="2" v-if="form.enableSshTunnel == 1"> 机器: </el-col>
<el-col :span="19" v-if="form.enableSshTunnel == 1">
<el-select style="width: 100%" v-model="form.sshTunnelMachineId" placeholder="请选择SSH隧道机器">
<el-option
v-for="item in sshTunnelMachineList"
:key="item.id"
:label="`${item.ip}:${item.port} [${item.name}]`"
:value="item.id"
>
</el-option>
</el-select>
</el-col>
</el-form-item>
</el-form>
<template #footer>
@@ -58,6 +75,7 @@
import { toRefs, reactive, watch, defineComponent, ref } from 'vue';
import { redisApi } from './api';
import { projectApi } from '../project/api.ts';
import { machineApi } from '../machine/api.ts';
import { ElMessage } from 'element-plus';
import { RsaEncrypt } from '@/common/rsa';
@@ -83,6 +101,7 @@ export default defineComponent({
dialogVisible: false,
projects: [],
envs: [],
sshTunnelMachineList: [],
form: {
id: null,
name: null,
@@ -94,6 +113,8 @@ export default defineComponent({
envId: null,
env: null,
remark: '',
enableSshTunnel: null,
sshTunnelMachineId: null,
},
btnLoading: false,
rules: {
@@ -137,16 +158,27 @@ export default defineComponent({
watch(props, async (newValue) => {
state.dialogVisible = newValue.visible;
if (!state.dialogVisible) {
return;
}
state.projects = newValue.projects;
if (newValue.redis) {
getEnvs(newValue.redis.projectId);
state.form = { ...newValue.redis };
} else {
state.envs = [];
state.form = { db: 0 } as any;
state.form = { db: 0, enableSshTunnel: -1 } as any;
}
getSshTunnelMachines();
});
const getSshTunnelMachines = async () => {
if (state.form.enableSshTunnel == 1 && state.sshTunnelMachineList.length == 0) {
const res = await machineApi.list.request({ pageNum: 1, pageSize: 100 });
state.sshTunnelMachineList = res.list;
}
};
const getEnvs = async (projectId: any) => {
state.envs = await projectApi.projectEnvs.request({ projectId });
};
@@ -201,6 +233,7 @@ export default defineComponent({
return {
...toRefs(state),
redisForm,
getSshTunnelMachines,
changeProject,
changeEnv,
btnOk,

File diff suppressed because it is too large Load Diff