286 lines
14 KiB
Vue
286 lines
14 KiB
Vue
<template>
|
|
<el-card>
|
|
<el-form :model="mysqlVariables" :rules="variablesRules" ref="variableFormRef" label-width="160px">
|
|
<el-row>
|
|
<el-col :span="1"><br /></el-col>
|
|
<el-col :span="9">
|
|
<el-form-item :label="$t('database.optimizationScheme')">
|
|
<el-select @change="changePlan" clearable v-model="plan">
|
|
<el-option
|
|
v-for="item in planOptions"
|
|
:key="item.id"
|
|
:label="item.title"
|
|
:value="item.id"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="1"><br /></el-col>
|
|
<el-col :span="9">
|
|
<el-form-item label="key_buffer_size" prop="key_buffer_size">
|
|
<el-input clearable v-model.number="mysqlVariables.key_buffer_size">
|
|
<template #append>MB</template>
|
|
</el-input>
|
|
<span class="input-help">{{ $t('database.keyBufferSizeHelper') }}</span>
|
|
</el-form-item>
|
|
<el-form-item label="query_cache_size" prop="query_cache_size">
|
|
<el-input clearable v-model.number="mysqlVariables.query_cache_size">
|
|
<template #append>MB</template>
|
|
</el-input>
|
|
<span class="input-help">{{ $t('database.queryCacheSizeHelper') }}</span>
|
|
</el-form-item>
|
|
<el-form-item label="tmp_table_size" prop="tmp_table_size">
|
|
<el-input clearable v-model.number="mysqlVariables.tmp_table_size">
|
|
<template #append>MB</template>
|
|
</el-input>
|
|
<span class="input-help">{{ $t('database.tmpTableSizeHelper') }}</span>
|
|
</el-form-item>
|
|
<el-form-item label="innodb_buffer_pool_size" prop="innodb_buffer_pool_size">
|
|
<el-input clearable v-model.number="mysqlVariables.innodb_buffer_pool_size">
|
|
<template #append>MB</template>
|
|
</el-input>
|
|
<span class="input-help">{{ $t('database.innodbBufferPoolSizeHelper') }}</span>
|
|
</el-form-item>
|
|
<el-form-item label="innodb_log_buffer_size" prop="innodb_log_buffer_size">
|
|
<el-input clearable v-model.number="mysqlVariables.innodb_log_buffer_size">
|
|
<template #append>MB</template>
|
|
</el-input>
|
|
<span class="input-help">{{ $t('database.innodbLogBufferSizeHelper') }}</span>
|
|
</el-form-item>
|
|
<el-form-item label="sort_buffer_size" prop="sort_buffer_size">
|
|
<el-input clearable v-model.number="mysqlVariables.sort_buffer_size">
|
|
<template #append>KB</template>
|
|
</el-input>
|
|
<span class="input-help">{{ $t('database.sortBufferSizeHelper') }}</span>
|
|
</el-form-item>
|
|
<el-form-item label="read_buffer_size" prop="read_buffer_size">
|
|
<el-input clearable v-model.number="mysqlVariables.read_buffer_size">
|
|
<template #append>KB</template>
|
|
</el-input>
|
|
<span class="input-help">{{ $t('database.readBufferSizeHelper') }}</span>
|
|
</el-form-item>
|
|
|
|
<el-form-item>
|
|
<el-button
|
|
icon="Collection"
|
|
@click="onSaveVariables(variableFormRef)"
|
|
type="primary"
|
|
size="default"
|
|
>
|
|
{{ $t('commons.button.save') }}
|
|
</el-button>
|
|
<el-button icon="RefreshLeft" size="default">
|
|
{{ $t('database.restart') }}
|
|
</el-button>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="2"><br /></el-col>
|
|
<el-col :span="9">
|
|
<el-form-item label="read_rnd_buffer_size" prop="read_rnd_buffer_size">
|
|
<el-input clearable v-model.number="mysqlVariables.read_rnd_buffer_size">
|
|
<template #append>KB</template>
|
|
</el-input>
|
|
<span class="input-help">{{ $t('database.readRndBufferSizeHelper') }}</span>
|
|
</el-form-item>
|
|
<el-form-item label="join_buffer_size" prop="join_buffer_size">
|
|
<el-input clearable v-model.number="mysqlVariables.join_buffer_size">
|
|
<template #append>KB</template>
|
|
</el-input>
|
|
<span class="input-help">{{ $t('database.joinBufferSizeHelper') }}</span>
|
|
</el-form-item>
|
|
<el-form-item label="thread_stack" prop="thread_stack">
|
|
<el-input clearable v-model.number="mysqlVariables.thread_stack">
|
|
<template #append>KB</template>
|
|
</el-input>
|
|
<span class="input-help">{{ $t('database.threadStackelper') }}</span>
|
|
</el-form-item>
|
|
<el-form-item label="binlog_cache_size" prop="binlog_cache_size">
|
|
<el-input clearable v-model.number="mysqlVariables.binlog_cache_size">
|
|
<template #append>KB</template>
|
|
</el-input>
|
|
<span class="input-help">{{ $t('database.binlogCacheSizeHelper') }}</span>
|
|
</el-form-item>
|
|
<el-form-item label="thread_cache_size" prop="thread_cache_size">
|
|
<el-input clearable v-model.number="mysqlVariables.thread_cache_size" />
|
|
<span class="input-help">{{ $t('database.threadCacheSizeHelper') }}</span>
|
|
</el-form-item>
|
|
<el-form-item label="table_open_cache" prop="table_open_cache">
|
|
<el-input clearable v-model.number="mysqlVariables.table_open_cache" />
|
|
<span class="input-help">{{ $t('database.tableOpenCacheHelper') }}</span>
|
|
</el-form-item>
|
|
<el-form-item label="max_connections" prop="max_connections">
|
|
<el-input clearable v-model.number="mysqlVariables.max_connections" />
|
|
<span class="input-help">{{ $t('database.maxConnectionsHelper') }}</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
</el-card>
|
|
</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 i18n from '@/lang';
|
|
import { planOptions } from './../helper';
|
|
|
|
const plan = ref();
|
|
|
|
const variableFormRef = ref<FormInstance>();
|
|
const oldVariables = ref<Database.MysqlVariables>();
|
|
let mysqlVariables = reactive({
|
|
mysqlName: '',
|
|
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,
|
|
|
|
slow_query_log: '',
|
|
long_query_time: 0,
|
|
});
|
|
const variablesRules = reactive({
|
|
key_buffer_size: [Rules.number],
|
|
query_cache_size: [Rules.number],
|
|
tmp_table_size: [Rules.number],
|
|
innodb_buffer_pool_size: [Rules.number],
|
|
innodb_log_buffer_size: [Rules.number],
|
|
sort_buffer_size: [Rules.number],
|
|
read_buffer_size: [Rules.number],
|
|
read_rnd_buffer_size: [Rules.number],
|
|
join_buffer_size: [Rules.number],
|
|
thread_stack: [Rules.number],
|
|
binlog_cache_size: [Rules.number],
|
|
thread_cache_size: [Rules.number],
|
|
table_open_cache: [Rules.number],
|
|
max_connections: [Rules.number],
|
|
|
|
slow_query_log: [Rules.requiredSelect],
|
|
long_query_time: [Rules.number],
|
|
});
|
|
|
|
const mysqlName = ref();
|
|
interface DialogProps {
|
|
mysqlName: string;
|
|
}
|
|
const acceptParams = (params: DialogProps): void => {
|
|
console.log('adad');
|
|
mysqlName.value = params.mysqlName;
|
|
loadVariables();
|
|
};
|
|
|
|
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);
|
|
oldVariables.value = { ...mysqlVariables };
|
|
};
|
|
|
|
const changePlan = async () => {
|
|
for (const item of planOptions) {
|
|
if (item.id === plan.value) {
|
|
mysqlVariables.key_buffer_size = item.data.key_buffer_size;
|
|
mysqlVariables.query_cache_size = item.data.query_cache_size;
|
|
mysqlVariables.tmp_table_size = item.data.tmp_table_size;
|
|
mysqlVariables.innodb_buffer_pool_size = item.data.innodb_buffer_pool_size;
|
|
|
|
mysqlVariables.sort_buffer_size = item.data.sort_buffer_size;
|
|
mysqlVariables.read_buffer_size = item.data.read_buffer_size;
|
|
mysqlVariables.read_rnd_buffer_size = item.data.read_rnd_buffer_size;
|
|
mysqlVariables.join_buffer_size = item.data.join_buffer_size;
|
|
mysqlVariables.thread_stack = item.data.thread_stack;
|
|
mysqlVariables.binlog_cache_size = item.data.binlog_cache_size;
|
|
mysqlVariables.thread_cache_size = item.data.thread_cache_size;
|
|
mysqlVariables.table_open_cache = item.data.table_open_cache;
|
|
mysqlVariables.max_connections = item.data.max_connections;
|
|
break;
|
|
}
|
|
}
|
|
};
|
|
const onSaveVariables = async (formEl: FormInstance | undefined) => {
|
|
if (!formEl) return;
|
|
formEl.validate(async (valid) => {
|
|
if (!valid) return;
|
|
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 });
|
|
}
|
|
if (oldVariables.value?.query_cache_size !== mysqlVariables.query_cache_size) {
|
|
param.push({ param: 'query_cache_size', value: mysqlVariables.query_cache_size * 1024 * 1024 });
|
|
}
|
|
if (oldVariables.value?.tmp_table_size !== mysqlVariables.tmp_table_size) {
|
|
param.push({ param: 'tmp_table_size', value: mysqlVariables.tmp_table_size * 1024 * 1024 });
|
|
}
|
|
if (oldVariables.value?.innodb_buffer_pool_size !== mysqlVariables.innodb_buffer_pool_size) {
|
|
param.push({
|
|
param: 'innodb_buffer_pool_size',
|
|
value: mysqlVariables.innodb_buffer_pool_size * 1024 * 1024,
|
|
});
|
|
}
|
|
if (oldVariables.value?.innodb_log_buffer_size !== mysqlVariables.innodb_log_buffer_size) {
|
|
param.push({ param: 'innodb_log_buffer_size', value: mysqlVariables.innodb_log_buffer_size * 1024 * 1024 });
|
|
}
|
|
|
|
if (oldVariables.value?.sort_buffer_size !== mysqlVariables.sort_buffer_size) {
|
|
param.push({ param: 'sort_buffer_size', value: mysqlVariables.sort_buffer_size * 1024 });
|
|
}
|
|
if (oldVariables.value?.read_buffer_size !== mysqlVariables.read_buffer_size) {
|
|
param.push({ param: 'read_buffer_size', value: mysqlVariables.read_buffer_size * 1024 });
|
|
}
|
|
if (oldVariables.value?.read_rnd_buffer_size !== mysqlVariables.read_rnd_buffer_size) {
|
|
param.push({ param: 'read_rnd_buffer_size', value: mysqlVariables.read_rnd_buffer_size * 1024 });
|
|
}
|
|
if (oldVariables.value?.join_buffer_size !== mysqlVariables.join_buffer_size) {
|
|
param.push({ param: 'join_buffer_size', value: mysqlVariables.join_buffer_size * 1024 });
|
|
}
|
|
if (oldVariables.value?.thread_stack !== mysqlVariables.thread_stack) {
|
|
param.push({ param: 'thread_stack', value: mysqlVariables.thread_stack * 1024 });
|
|
}
|
|
if (oldVariables.value?.binlog_cache_size !== mysqlVariables.binlog_cache_size) {
|
|
param.push({ param: 'binlog_cache_size', value: mysqlVariables.binlog_cache_size * 1024 });
|
|
}
|
|
if (oldVariables.value?.thread_cache_size !== mysqlVariables.thread_cache_size) {
|
|
param.push({ param: 'thread_cache_size', value: mysqlVariables.thread_cache_size });
|
|
}
|
|
if (oldVariables.value?.table_open_cache !== mysqlVariables.table_open_cache) {
|
|
param.push({ param: 'table_open_cache', value: mysqlVariables.table_open_cache });
|
|
}
|
|
if (oldVariables.value?.max_connections !== mysqlVariables.max_connections) {
|
|
param.push({ param: 'max_connections', value: mysqlVariables.max_connections });
|
|
}
|
|
await updateMysqlVariables(mysqlName.value, param);
|
|
ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
|
|
});
|
|
};
|
|
|
|
defineExpose({
|
|
acceptParams,
|
|
});
|
|
</script>
|