gh_mirrors/1Panel
1
0
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-01-31 14:08:06 +08:00
Code

feat: 完成设置界面状态及调优参数获取

Browse Source
This commit is contained in:
ssongliu 2022-10-24 18:46:48 +08:00 committed by ssongliu
parent 53d8aede66
commit 7c2414e46c
6 changed files with 167 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
backend/app/service/database_test.go
View File

@ -2,43 +2,32 @@ package service
import (
"database/sql"
"encoding/json"
"fmt"
"testing"
"github.com/1Panel-dev/1Panel/backend/app/dto"
_ "github.com/go-sql-driver/mysql"
)
func TestMysql(t *testing.T) {
connArgs := fmt.Sprintf("%s:%s@tcp(%s:%d)/?charset=utf8", "root", "Calong@2015", "localhost", 2306)
connArgs := fmt.Sprintf("%s:%s@tcp(%s:%d)/?charset=utf8", "root", "Calong@2015", "172.16.10.143", 3306)
db, err := sql.Open("mysql", connArgs)
if err != nil {
fmt.Println(err)
}
defer db.Close()
rows, err := db.Query("show VARIABLES")
rows, err := db.Query("show master status")
if err != nil {
fmt.Println(err)
}
variableMap := make(map[string]string)
masterRows := make([]string, 5)
for rows.Next() {
var variableName, variableValue string
if err := rows.Scan(&variableName, &variableValue); err != nil {
if err := rows.Scan(&masterRows[0], &masterRows[1], &masterRows[2], &masterRows[3], &masterRows[4]); err != nil {
fmt.Println(err)
}
variableMap[variableName] = variableValue
}
var info dto.MysqlConf
arr, err := json.Marshal(variableMap)
if err != nil {
fmt.Println(err)
for k, v := range masterRows {
fmt.Println(k, v)
}
err = json.Unmarshal(arr, &info)
if err != nil {
fmt.Println(err)
}
fmt.Println(info)
}

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

@ -161,6 +161,7 @@ export default {
loadBackup: '导入备份',
setting: '数据库设置',
remoteAccess: '远程访问',
changePassword: '改密',
baseSetting: '基础设置',
confChange: '配置修改',

2
frontend/src/utils/util.ts
View File

@ -111,7 +111,7 @@ export function computeSize(size: number): string {
const num = 1024.0;
if (size < num) return size + ' B';
if (size < Math.pow(num, 2)) return (size / num).toFixed(2) + ' K';
if (size < Math.pow(num, 2)) return (size / num).toFixed(2) + ' KB';
if (size < Math.pow(num, 3)) return (size / Math.pow(num, 2)).toFixed(2) + ' MB';
if (size < Math.pow(num, 4)) return (size / Math.pow(num, 3)).toFixed(2) + ' GB';
return (size / Math.pow(num, 4)).toFixed(2) + ' TB';

19
frontend/src/views/database/mysql/create/index.vue
View File

@ -27,13 +27,13 @@
<el-form-item :label="$t('database.permission')" prop="permission">
<el-select style="width: 100%" v-model="form.permission">
<el-option value="local" :label="$t('database.permissionLocal')" />
<el-option value="all" :label="$t('database.permissionAll')" />
<el-option value="localhost" :label="$t('database.permissionLocal')" />
<el-option value="%" :label="$t('database.permissionAll')" />
<el-option value="ip" :label="$t('database.permissionForIP')" />
</el-select>
</el-form-item>
<el-form-item v-if="form.permission === 'ip'" prop="permissionIPs">
<el-input type="password" clearable v-model="form.permissionIPs" />
<el-input clearable v-model="form.permissionIPs" />
</el-form-item>
<el-form-item :label="$t('commons.table.description')" prop="description">
<el-input type="textarea" clearable v-model="form.description" />
@ -60,6 +60,7 @@ import { addMysqlDB } from '@/api/modules/database';
const createVisiable = ref(false);
const form = reactive({
name: '',
version: '',
format: '',
username: '',
password: '',
@ -77,12 +78,16 @@ const rules = reactive({
type FormInstance = InstanceType<typeof ElForm>;
const formRef = ref<FormInstance>();
const acceptParams = (): void => {
interface DialogProps {
version: string;
}
const acceptParams = (params: DialogProps): void => {
form.name = '';
form.version = params.version;
form.format = 'utf8mb4';
form.username = '';
form.password = '';
form.permission = 'local';
form.permission = 'localhost';
form.permissionIPs = '';
form.description = '';
createVisiable.value = true;
@ -93,8 +98,10 @@ const onSubmit = async (formEl: FormInstance | undefined) => {
if (!formEl) return;
formEl.validate(async (valid) => {
if (!valid) return;
if (form.permission === 'ip') {
form.permission = form.permissionIPs;
}
await addMysqlDB(form);
ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
emit('search');
createVisiable.value = false;

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

@ -1,5 +1,5 @@
<template>
<div class="demo-collapse">
<div class="demo-collapse" v-if="onSetting">
<el-card>
<el-collapse v-model="activeName" accordion>
<el-collapse-item title="基础设置" name="1">
@ -77,19 +77,19 @@
<table style="width: 100%" class="myTable">
<tr>
<td>启动时间</td>
<td>2022/10/12 14:46:35</td>
<td>{{ mysqlStatus.run }}</td>
</tr>
<tr>
<td>总连接次数</td>
<!-- <td>{{ mysqlStatus!.Connections }}</td> -->
<td>{{ mysqlStatus.connections }}</td>
</tr>
<tr>
<td>发送</td>
<td>{{ (mysqlStatus!.Bytes_sent / 2014).toFixed(2) }} KB</td>
<td>{{ mysqlStatus!.bytesSent }}</td>
</tr>
<tr>
<td>接收</td>
<td>{{ (mysqlStatus!.Bytes_received / 2014).toFixed(2) }} KB</td>
<td>{{ mysqlStatus!.bytesReceived }}</td>
</tr>
</table>
</el-col>
@ -97,19 +97,19 @@
<table style="width: 100%" class="myTable">
<tr>
<td>每秒查询</td>
<td>0</td>
<td>{{ mysqlStatus!.queryPerSecond }}</td>
</tr>
<tr>
<td>每秒事务</td>
<td>0</td>
<td>{{ mysqlStatus!.txPerSecond }}</td>
</tr>
<tr>
<td>File</td>
<td>{{ mysqlStatus!.File }}</td>
<td>{{ mysqlStatus!.file }}</td>
</tr>
<tr>
<td>Position</td>
<td>{{ mysqlStatus!.Position }}</td>
<td>{{ mysqlStatus!.position }}</td>
</tr>
</table>
</el-col>
@ -120,73 +120,57 @@
<table style="margin-top: 20px; width: 100%" class="myTable">
<tr>
<td>活动/峰值连接数</td>
<td>
{{
(mysqlStatus!.Threads_running / mysqlStatus!.Max_used_connections).toFixed(
2,
)
}}%
</td>
<td>{{ mysqlStatus!.connInfo }}</td>
<td>若值过大,增加max_connections</td>
</tr>
<tr>
<td>线程缓存命中率</td>
<td></td>
<td>{{ mysqlStatus!.threadCacheHit }}</td>
<td>若过低,增加thread_cache_size</td>
</tr>
<tr>
<td>索引命中率</td>
<td>
{{ (1 - mysqlStatus!.Key_reads / mysqlStatus!.Key_read_requests).toFixed(2) }}%
</td>
<td>{{ mysqlStatus!.indexHit }}</td>
<td>若过低,增加key_buffer_size</td>
</tr>
<tr>
<td>Innodb 索引命中率</td>
<td>
{{
(
1 -
mysqlStatus!.Innodb_buffer_pool_reads /
mysqlStatus!.Innodb_buffer_pool_read_requests
).toFixed(2)
}}%
</td>
<td>{{ mysqlStatus!.innodbIndexHit }}</td>
<td>若过低,增加innodb_buffer_pool_size</td>
</tr>
<tr>
<td>查询缓存命中率</td>
<td>OFF</td>
<td>{{ mysqlStatus!.cacheHit }}</td>
<td>若过低,增加query_cache_size</td>
</tr>
<tr>
<td>创建临时表到磁盘</td>
<td>13.62%</td>
<td>{{ mysqlStatus!.tmpTableToDB }}</td>
<td>若过大,尝试增加tmp_table_size</td>
</tr>
<tr>
<td>已打开的表</td>
<td>{{ mysqlStatus!.Open_tables }}</td>
<td colspan="20">table_open_cache配置值应大于等于此值</td>
<td>{{ mysqlStatus!.openTables }}</td>
<td>table_open_cache配置值应大于等于此值</td>
</tr>
<tr>
<td>没有使用索引的量</td>
<td>{{ mysqlStatus!.Select_full_join }}</td>
<td>{{ mysqlStatus!.selectFullJoin }}</td>
<td>若不为0,请检查数据表的索引是否合理</td>
</tr>
<tr>
<td>没有索引的JOIN量</td>
<td>0</td>
<td>{{ mysqlStatus!.selectRangeCheck }}</td>
<td>若不为0,请检查数据表的索引是否合理</td>
</tr>
<tr>
<td>排序后的合并次数</td>
<td>{{ mysqlStatus!.Sort_merge_passes }}</td>
<td>{{ mysqlStatus!.sortMergePasses }}</td>
<td>若值过大,增加sort_buffer_size</td>
</tr>
<tr>
<td>锁表次数</td>
<td>{{ mysqlStatus!.Table_locks_waited }}</td>
<td>{{ mysqlStatus!.tableLocksWaited }}</td>
<td>若值过大,请考虑增加您的数据库性能</td>
</tr>
</table>
@ -200,102 +184,91 @@
<el-col :span="1"><br /></el-col>
<el-col :span="6">
<el-form-item label="key_buffer_size">
<el-input clearable v-model="form.port">
<el-input clearable v-model="mysqlVariables.key_buffer_size">
<template #append>MB</template>
</el-input>
<span class="input-help">用于索引的缓冲区大小</span>
</el-form-item>
<el-form-item label="query_cache_size">
<el-input clearable v-model="form.port">
<el-input clearable v-model="mysqlVariables.query_cache_size">
<template #append>MB</template>
</el-input>
<span class="input-help">查询缓存,不开启请设为0</span>
</el-form-item>
<el-form-item label="tmp_table_size">
<el-input clearable v-model="form.port">
<el-input clearable v-model="mysqlVariables.tmp_table_size">
<template #append>MB</template>
</el-input>
<span class="input-help">临时表缓存大小</span>
</el-form-item>
<el-form-item label="innodb_buffer_pool_size">
<el-input clearable v-model="form.port">
<el-input clearable v-model="mysqlVariables.innodb_buffer_pool_size">
<template #append>MB</template>
</el-input>
<span class="input-help">Innodb缓冲区大小</span>
</el-form-item>
<el-form-item label="innodb_log_buffer_size">
<el-input clearable v-model="form.port">
<el-input clearable v-model="mysqlVariables.innodb_log_buffer_size">
<template #append>MB</template>
</el-input>
<span class="input-help">Innodb日志缓冲区大小</span>
</el-form-item>
<el-form-item label="sort_buffer_size">
<el-input clearable v-model="form.port">
<el-input clearable v-model="mysqlVariables.sort_buffer_size">
<template #append>KB</template>
</el-input>
<span class="input-help">* 连接数, 每个线程排序的缓冲大小</span>
</el-form-item>
<el-form-item label="read_buffer_size">
<el-input clearable v-model="form.port">
<el-input clearable v-model="mysqlVariables.read_buffer_size">
<template #append>KB</template>
</el-input>
<span class="input-help">* 连接数, 读入缓冲区大小</span>
</el-form-item>
<el-form-item>
<el-button
icon="Collection"
type="primary"
size="default"
@click="onSave(panelFormRef, 'remoteAccess', form.remoteAccess)"
>
<el-button icon="Collection" type="primary" size="default">
{{ $t('commons.button.save') }}
</el-button>
<el-button
icon="RefreshLeft"
size="default"
@click="onSave(panelFormRef, 'remoteAccess', form.remoteAccess)"
>
重启数据库
</el-button>
<el-button icon="RefreshLeft" size="default">重启数据库</el-button>
</el-form-item>
</el-col>
<el-col :span="2"><br /></el-col>
<el-col :span="6">
<el-form-item label="read_rnd_buffer_size">
<el-input clearable v-model="form.port">
<el-input clearable v-model="mysqlVariables.read_rnd_buffer_size">
<template #append>KB</template>
</el-input>
<span class="input-help">* 连接数, 随机读取缓冲区大小</span>
</el-form-item>
<el-form-item label="join_buffer_size">
<el-input clearable v-model="form.port">
<el-input clearable v-model="mysqlVariables.join_buffer_size">
<template #append>KB</template>
</el-input>
<span class="input-help">* 连接数, 关联表缓存大小</span>
</el-form-item>
<el-form-item label="thread_stack">
<el-input clearable v-model="form.port">
<el-input clearable v-model="mysqlVariables.thread_stack">
<template #append>KB</template>
</el-input>
<span class="input-help">* 连接数, 每个线程的堆栈大小</span>
</el-form-item>
<el-form-item label="binlog_cache_size">
<el-input clearable v-model="form.port">
<el-input clearable v-model="mysqlVariables.binlog_cache_size">
<template #append>KB</template>
</el-input>
<span class="input-help">* 连接数, 二进制日志缓存大小(4096的倍数)</span>
</el-form-item>
<el-form-item label="thread_cache_size">
<el-input clearable v-model="form.port" />
<el-input clearable v-model="mysqlVariables.thread_cache_size" />
<span class="input-help">线程池大小</span>
</el-form-item>
<el-form-item label="table_open_cache">
<el-input clearable v-model="form.port" />
<el-input clearable v-model="mysqlVariables.table_open_cache" />
<span class="input-help">表缓存</span>
</el-form-item>
<el-form-item label="max_connections">
<el-input clearable v-model="form.port" />
<el-input clearable v-model="mysqlVariables.max_connections" />
<span class="input-help">最大连接数</span>
</el-form-item>
</el-col>
@ -303,7 +276,7 @@
</el-form>
</el-card>
</el-collapse-item>
<el-collapse-item title="日志" name="4"></el-collapse-item>
<el-collapse-item title="日志" name="5"></el-collapse-item>
</el-collapse>
</el-card>
</div>
@ -311,13 +284,14 @@
<script lang="ts" setup>
import { FormInstance } from 'element-plus';
import { onMounted, reactive, ref } from 'vue';
import { reactive, ref } from 'vue';
import { Codemirror } from 'vue-codemirror';
import { javascript } from '@codemirror/lang-javascript';
import { oneDark } from '@codemirror/theme-one-dark';
import { LoadFile } from '@/api/modules/files';
import { loadMysqlStatus, loadMysqlVariables } from '@/api/modules/database';
import { Database } from '@/api/interface/database';
import { computeSize } from '@/utils/util';
const extensions = [javascript(), oneDark];
const activeName = ref('1');
@ -335,29 +309,122 @@ const form = reactive({
});
const panelFormRef = ref<FormInstance>();
const mysqlConf = ref();
const mysqlVariables = ref();
const mysqlStatus = ref<Database.MysqlStatus>();
const mysqlVariables = reactive<Database.MysqlVariables>({
key_buffer_size: 0,
query_cache_size: 0,
tmp_table_size: 0,
innodb_buffer_pool_size: 0,
innodb_log_buffer_size: 0,
sort_buffer_size: 0,
read_buffer_size: 0,
read_rnd_buffer_size: 0,
join_buffer_size: 0,
thread_stack: 0,
binlog_cache_size: 0,
thread_cache_size: 0,
table_open_cache: 0,
max_connections: 0,
});
let mysqlStatus = reactive({
run: 0,
connections: 0,
bytesSent: '',
bytesReceived: '',
queryPerSecond: '',
txPerSecond: '',
file: '',
position: 0,
connInfo: '',
threadCacheHit: '',
indexHit: '',
innodbIndexHit: '',
cacheHit: '',
tmpTableToDB: '',
openTables: 0,
selectFullJoin: 0,
selectRangeCheck: 0,
sortMergePasses: 0,
tableLocksWaited: 0,
});
const onSetting = ref<boolean>(false);
const acceptParams = (): void => {
onSetting.value = true;
loadMysqlConf('/opt/1Panel/conf/mysql.conf');
loadStatus();
loadVariables();
};
const onClose = (): void => {
onSetting.value = false;
};
const onSave = async (formEl: FormInstance | undefined, key: string, val: any) => {
console.log(formEl, key, val);
};
const loadMysqlConf = async (path: string) => {
const res = await LoadFile({ path: path });
mysqlConf.value = res.data;
};
const loadVariables = async () => {
const res = await loadMysqlVariables();
mysqlVariables.value = res.data;
};
const loadStatus = async () => {
const res = await loadMysqlStatus();
mysqlStatus.value = res.data;
mysqlVariables.key_buffer_size = res.data.key_buffer_size / 1024 / 1024;
mysqlVariables.query_cache_size = res.data.query_cache_size / 1024 / 1024;
mysqlVariables.tmp_table_size = res.data.tmp_table_size / 1024 / 1024;
mysqlVariables.innodb_buffer_pool_size = res.data.innodb_buffer_pool_size / 1024 / 1024;
mysqlVariables.innodb_log_buffer_size = res.data.innodb_log_buffer_size / 1024 / 1024;
mysqlVariables.sort_buffer_size = res.data.sort_buffer_size / 1024;
mysqlVariables.read_buffer_size = res.data.read_buffer_size / 1024;
mysqlVariables.read_rnd_buffer_size = res.data.read_rnd_buffer_size / 1024;
mysqlVariables.join_buffer_size = res.data.join_buffer_size / 1024;
mysqlVariables.thread_stack = res.data.thread_stack / 1024;
mysqlVariables.binlog_cache_size = res.data.binlog_cache_size / 1024;
mysqlVariables.thread_cache_size = res.data.thread_cache_size;
mysqlVariables.table_open_cache = res.data.table_open_cache;
mysqlVariables.max_connections = res.data.max_connections;
};
onMounted(() => {
console.log('dasdasd');
loadMysqlConf('/opt/1Panel/conf/mysql.conf');
loadStatus();
loadVariables();
const loadStatus = async () => {
const res = await loadMysqlStatus();
let queryPerSecond = res.data.Questions / res.data.Uptime;
let txPerSecond = (res.data!.Com_commit + res.data.Com_rollback) / res.data.Uptime;
let threadCacheHit = (1 - res.data.Threads_created / res.data.Connections) * 100;
let cacheHit = (res.data.Qcache_hits / (res.data.Qcache_hits + res.data.Qcache_inserts)) * 100;
let indexHit = (1 - res.data.Key_reads / res.data.Key_read_requests) * 100;
let innodbIndexHit = (1 - res.data.Innodb_buffer_pool_reads / res.data.Innodb_buffer_pool_read_requests) * 100;
let tmpTableToDB = (res.data.Created_tmp_disk_tables / res.data.Created_tmp_tables) * 100;
mysqlStatus.run = res.data.Run;
mysqlStatus.connections = res.data.Connections;
mysqlStatus.bytesSent = res.data.Bytes_sent ? computeSize(res.data.Bytes_sent) : '0';
mysqlStatus.bytesReceived = res.data.Bytes_received ? computeSize(res.data.Bytes_received) : '0';
mysqlStatus.queryPerSecond = isNaN(queryPerSecond) || queryPerSecond === 0 ? '0' : queryPerSecond.toFixed(2);
mysqlStatus.txPerSecond = isNaN(txPerSecond) || txPerSecond === 0 ? '0' : txPerSecond.toFixed(2);
mysqlStatus.file = res.data.File;
mysqlStatus.position = res.data.Position;
mysqlStatus.connInfo = res.data.Threads_running + '/' + res.data.Max_used_connections;
mysqlStatus.threadCacheHit = isNaN(threadCacheHit) || threadCacheHit === 0 ? '0' : threadCacheHit.toFixed(2) + '%';
mysqlStatus.indexHit = isNaN(indexHit) || indexHit === 0 ? '0' : indexHit.toFixed(2) + '%';
mysqlStatus.innodbIndexHit = isNaN(innodbIndexHit) || innodbIndexHit === 0 ? '0' : innodbIndexHit.toFixed(2) + '%';
mysqlStatus.cacheHit = isNaN(cacheHit) || cacheHit === 0 ? 'OFF' : cacheHit.toFixed(2) + '%';
mysqlStatus.tmpTableToDB = isNaN(tmpTableToDB) || tmpTableToDB === 0 ? '0' : tmpTableToDB.toFixed(2) + '%';
mysqlStatus.openTables = res.data.Open_tables;
mysqlStatus.selectFullJoin = res.data.Select_full_join;
mysqlStatus.selectRangeCheck = res.data.Select_range_check;
mysqlStatus.sortMergePasses = res.data.Sort_merge_passes;
mysqlStatus.tableLocksWaited = res.data.Table_locks_waited;
};
defineExpose({
acceptParams,
onClose,
});
</script>

2
go.mod
View File

@ -16,6 +16,7 @@ require (
github.com/gin-gonic/gin v1.8.1
github.com/go-gormigrate/gormigrate/v2 v2.0.2
github.com/go-playground/validator/v10 v10.11.0
github.com/go-sql-driver/mysql v1.6.0
github.com/gogf/gf v1.16.9
github.com/golang-jwt/jwt/v4 v4.4.2
github.com/gorilla/csrf v1.7.1
@ -80,7 +81,6 @@ require (
github.com/go-openapi/swag v0.19.15 // indirect
github.com/go-playground/locales v0.14.0 // indirect
github.com/go-playground/universal-translator v0.18.0 // indirect
github.com/go-sql-driver/mysql v1.6.0 // indirect
github.com/goccy/go-json v0.9.7 // indirect
github.com/gogo/protobuf v1.3.2 // indirect
github.com/golang/freetype v0.0.0-20170609003504-e2365dfdc4a0 // indirect