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

feat: 完成 mysql 慢日志功能

pull/34/head
ssongliu 2022-11-08 10:40:11 +08:00 committed by ssongliu
parent a111e04c65
commit 85419b6dd4
4 changed files with 306 additions and 199 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -220,6 +220,9 @@ export default {
maxConnectionsHelper: '最大连接数',
restart: '重启数据库',
isOn: '是否开启',
longQueryTime: '慢查询阈值',
status: '当前状态',
terminal: '终端模式',
key: '键',
@ -260,6 +263,7 @@ export default {
allConf: '全部配置',
restartNow: '立即重启',
restartNowHelper1: '修改配置后需要重启生效，若您的数据需要持久化请先执行 save 操作。',
restartNowHelper: '修改配置后需要重启生效。',
persistence: '持久化',
rdbHelper1: '秒內,插入',

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

@ -98,7 +98,12 @@ 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 { loadMysqlBaseInfo, updateMysqlConfByFile, updateMysqlDBInfo } from '@/api/modules/database';
import {
loadMysqlBaseInfo,
loadMysqlVariables,
updateMysqlConfByFile,
updateMysqlDBInfo,
} from '@/api/modules/database';
import { Rules } from '@/global/form-rules';
import i18n from '@/lang';
@ -122,6 +127,7 @@ const slowLogRef = ref();
const onSetting = ref<boolean>(false);
const mysqlName = ref();
const variables = ref();
interface DialogProps {
mysqlName: string;
@ -131,9 +137,10 @@ const dialogContainerLogRef = ref();
const acceptParams = (params: DialogProps): void => {
onSetting.value = true;
mysqlName.value = params.mysqlName;
variablesRef.value!.acceptParams({ mysqlName: params.mysqlName });
statusRef.value!.acceptParams({ mysqlName: params.mysqlName });
loadBaseInfo();
loadVariables();
loadSlowLogs();
statusRef.value!.acceptParams({ mysqlName: params.mysqlName });
};
const onClose = (): void => {
onSetting.value = false;
@ -190,6 +197,22 @@ const loadBaseInfo = async () => {
loadContainerLog(baseInfo.containerID);
};
const loadVariables = async () => {
const res = await loadMysqlVariables(mysqlName.value);
variables.value = res.data;
variablesRef.value!.acceptParams({ mysqlName: mysqlName.value, variables: res.data });
};
const loadSlowLogs = async () => {
await Promise.all([loadBaseInfo(), loadVariables()]);
let param = {
mysqlName: mysqlName.value,
mysqlKey: baseInfo.mysqlKey,
variables: variables.value,
};
slowLogRef.value!.acceptParams(param);
};
const loadMysqlConf = async (path: string) => {
const res = await LoadFile({ path: path });
mysqlConf.value = res.data;

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

@ -1,13 +1,20 @@
<template>
<div>
<span style="float: left">是否开启</span>
<el-switch style="margin-left: 20px; float: left" v-model="form.slow_query_log" />
<span style="margin-left: 30px; float: left">慢查询阈值</span>
<span style="float: left">{{ $t('database.isOn') }}</span>
<el-switch
style="margin-left: 20px; float: left"
v-model="variables.slow_query_log"
active-value="ON"
inactive-value="OFF"
/>
<span style="margin-left: 30px; float: left">{{ $t('database.longQueryTime') }}</span>
<div style="margin-left: 5px; float: left">
<el-input v-model="form.long_query_time"></el-input>
<el-input type="number" v-model.number="variables.long_query_time">
<template #append>{{ $t('database.second') }}</template>
</el-input>
</div>
<el-button style="margin-left: 20px">确认修改</el-button>
<div v-if="form.slow_query_log === 'ON'">
<el-button style="margin-left: 20px" @click="onSaveStart">{{ $t('commons.button.confirm') }}</el-button>
<div v-if="variables.slow_query_log === 'ON'">
<codemirror
:autofocus="true"
placeholder="None data"
@ -23,6 +30,8 @@
:readOnly="true"
/>
</div>
<ConfirmDialog ref="confirmDialogRef" @confirm="onSave"></ConfirmDialog>
</div>
</template>
<script lang="ts" setup>
@ -30,11 +39,72 @@ import { Codemirror } from 'vue-codemirror';
import { javascript } from '@codemirror/lang-javascript';
import { oneDark } from '@codemirror/theme-one-dark';
import { reactive, ref } from 'vue';
import { Database } from '@/api/interface/database';
import { LoadFile } from '@/api/modules/files';
import ConfirmDialog from '@/components/confirm-dialog/index.vue';
import { updateMysqlVariables } from '@/api/modules/database';
import { ElMessage } from 'element-plus';
import i18n from '@/lang';
const extensions = [javascript(), oneDark];
const slowLogs = ref();
const form = reactive({
const confirmDialogRef = ref();
const mysqlName = ref();
const mysqlKey = ref();
const variables = reactive({
slow_query_log: 'OFF',
long_query_time: 10,
});
const oldVariables = ref();
interface DialogProps {
mysqlName: string;
mysqlKey: string;
variables: Database.MysqlVariables;
}
const acceptParams = (params: DialogProps): void => {
mysqlName.value = params.mysqlName;
mysqlKey.value = params.mysqlKey;
variables.slow_query_log = params.variables.slow_query_log;
variables.long_query_time = Number(params.variables.long_query_time);
if (variables.slow_query_log === 'ON') {
let path = `/opt/1Panel/data/apps/${mysqlKey.value}/${mysqlName.value}/data/onepanel-slow.log`;
loadMysqlSlowlogs(path);
}
oldVariables.value = { ...variables };
};
const onSaveStart = async () => {
let params = {
header: i18n.global.t('database.confChange'),
operationInfo: i18n.global.t('database.restartNowHelper'),
submitInputInfo: i18n.global.t('database.restartNow'),
};
confirmDialogRef.value!.acceptParams(params);
};
const onSave = async () => {
let param = [] as Array<Database.VariablesUpdate>;
if (variables.slow_query_log !== oldVariables.value.slow_query_log) {
param.push({ param: 'slow_query_log', value: variables.slow_query_log });
}
if (variables.long_query_time !== oldVariables.value.long_query_time) {
param.push({ param: 'long_query_time', value: variables.long_query_time });
}
param.push({ param: 'slow_query_log_file', value: '/var/lib/mysql/onepanel-slow.log' });
await updateMysqlVariables(mysqlName.value, param);
ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
};
const loadMysqlSlowlogs = async (path: string) => {
const res = await LoadFile({ path: path });
slowLogs.value = res.data;
};
defineExpose({
acceptParams,
});
</script>

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

@ -1,4 +1,5 @@
<template>
<div>
<el-card>
<el-form :model="mysqlVariables" :rules="variablesRules" ref="variableFormRef" label-width="160px">
<el-row>
@ -65,7 +66,7 @@
<el-form-item>
<el-button
icon="Collection"
@click="onSaveVariables(variableFormRef)"
@click="onSaveStart(variableFormRef)"
type="primary"
size="default"
>
@ -118,17 +119,21 @@
</el-row>
</el-form>
</el-card>
<ConfirmDialog ref="confirmDialogRef" @confirm="onSaveVariables"></ConfirmDialog>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { Rules } from '@/global/form-rules';
import { ElMessage, FormInstance } from 'element-plus';
import { Database } from '@/api/interface/database';
import { loadMysqlVariables, updateMysqlVariables } from '@/api/modules/database';
import ConfirmDialog from '@/components/confirm-dialog/index.vue';
import { updateMysqlVariables } from '@/api/modules/database';
import i18n from '@/lang';
import { planOptions } from './../helper';
const plan = ref();
const confirmDialogRef = ref();
const variableFormRef = ref<FormInstance>();
const oldVariables = ref<Database.MysqlVariables>();
@ -175,30 +180,25 @@ const variablesRules = reactive({
const mysqlName = ref();
interface DialogProps {
mysqlName: string;
variables: Database.MysqlVariables;
}
const acceptParams = (params: DialogProps): void => {
console.log('adad');
mysqlName.value = params.mysqlName;
loadVariables();
};
mysqlVariables.key_buffer_size = Number(params.variables.key_buffer_size) / 1024 / 1024;
mysqlVariables.query_cache_size = Number(params.variables.query_cache_size) / 1024 / 1024;
mysqlVariables.tmp_table_size = Number(params.variables.tmp_table_size) / 1024 / 1024;
mysqlVariables.innodb_buffer_pool_size = Number(params.variables.innodb_buffer_pool_size) / 1024 / 1024;
mysqlVariables.innodb_log_buffer_size = Number(params.variables.innodb_log_buffer_size) / 1024 / 1024;
const loadVariables = async () => {
const res = await loadMysqlVariables(mysqlName.value);
mysqlVariables.key_buffer_size = Number(res.data.key_buffer_size) / 1024 / 1024;
mysqlVariables.query_cache_size = Number(res.data.query_cache_size) / 1024 / 1024;
mysqlVariables.tmp_table_size = Number(res.data.tmp_table_size) / 1024 / 1024;
mysqlVariables.innodb_buffer_pool_size = Number(res.data.innodb_buffer_pool_size) / 1024 / 1024;
mysqlVariables.innodb_log_buffer_size = Number(res.data.innodb_log_buffer_size) / 1024 / 1024;
mysqlVariables.sort_buffer_size = Number(res.data.sort_buffer_size) / 1024;
mysqlVariables.read_buffer_size = Number(res.data.read_buffer_size) / 1024;
mysqlVariables.read_rnd_buffer_size = Number(res.data.read_rnd_buffer_size) / 1024;
mysqlVariables.join_buffer_size = Number(res.data.join_buffer_size) / 1024;
mysqlVariables.thread_stack = Number(res.data.thread_stack) / 1024;
mysqlVariables.binlog_cache_size = Number(res.data.binlog_cache_size) / 1024;
mysqlVariables.thread_cache_size = Number(res.data.thread_cache_size);
mysqlVariables.table_open_cache = Number(res.data.table_open_cache);
mysqlVariables.max_connections = Number(res.data.max_connections);
mysqlVariables.sort_buffer_size = Number(params.variables.sort_buffer_size) / 1024;
mysqlVariables.read_buffer_size = Number(params.variables.read_buffer_size) / 1024;
mysqlVariables.read_rnd_buffer_size = Number(params.variables.read_rnd_buffer_size) / 1024;
mysqlVariables.join_buffer_size = Number(params.variables.join_buffer_size) / 1024;
mysqlVariables.thread_stack = Number(params.variables.thread_stack) / 1024;
mysqlVariables.binlog_cache_size = Number(params.variables.binlog_cache_size) / 1024;
mysqlVariables.thread_cache_size = Number(params.variables.thread_cache_size);
mysqlVariables.table_open_cache = Number(params.variables.table_open_cache);
mysqlVariables.max_connections = Number(params.variables.max_connections);
oldVariables.value = { ...mysqlVariables };
};
@ -223,10 +223,21 @@ const changePlan = async () => {
}
}
};
const onSaveVariables = async (formEl: FormInstance | undefined) => {
const onSaveStart = async (formEl: FormInstance | undefined) => {
if (!formEl) return;
formEl.validate(async (valid) => {
if (!valid) return;
let params = {
header: i18n.global.t('database.confChange'),
operationInfo: i18n.global.t('database.restartNowHelper'),
submitInputInfo: i18n.global.t('database.restartNow'),
};
confirmDialogRef.value!.acceptParams(params);
});
};
const onSaveVariables = async () => {
let param = [] as Array<Database.VariablesUpdate>;
if (oldVariables.value?.key_buffer_size !== mysqlVariables.key_buffer_size) {
param.push({ param: 'key_buffer_size', value: mysqlVariables.key_buffer_size * 1024 * 1024 });
@ -276,7 +287,6 @@ const onSaveVariables = async (formEl: FormInstance | undefined) => {
}
await updateMysqlVariables(mysqlName.value, param);
ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
});
};
defineExpose({