From 85419b6dd4a45ae974ef0af995a909ecb2dbc47c Mon Sep 17 00:00:00 2001
From: ssongliu <songlius11@163.com>
Date: Tue, 8 Nov 2022 10:40:11 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E6=88=90=20mysql=20=E6=85=A2?=
 =?UTF-8?q?=E6=97=A5=E5=BF=97=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/lang/modules/zh.ts               |   4 +
 .../views/database/mysql/setting/index.vue    |  29 +-
 .../database/mysql/setting/slow-log/index.vue |  84 +++-
 .../mysql/setting/variables/index.vue         | 388 +++++++++---------
 4 files changed, 306 insertions(+), 199 deletions(-)

diff --git a/frontend/src/lang/modules/zh.ts b/frontend/src/lang/modules/zh.ts
index 83bc30d37..f96bed8ad 100644
--- a/frontend/src/lang/modules/zh.ts
+++ b/frontend/src/lang/modules/zh.ts
@@ -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: '秒內,插入',
diff --git a/frontend/src/views/database/mysql/setting/index.vue b/frontend/src/views/database/mysql/setting/index.vue
index 793c1bf95..ef937e248 100644
--- a/frontend/src/views/database/mysql/setting/index.vue
+++ b/frontend/src/views/database/mysql/setting/index.vue
@@ -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;
diff --git a/frontend/src/views/database/mysql/setting/slow-log/index.vue b/frontend/src/views/database/mysql/setting/slow-log/index.vue
index 3d182365f..4dbba53d5 100644
--- a/frontend/src/views/database/mysql/setting/slow-log/index.vue
+++ b/frontend/src/views/database/mysql/setting/slow-log/index.vue
@@ -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>
diff --git a/frontend/src/views/database/mysql/setting/variables/index.vue b/frontend/src/views/database/mysql/setting/variables/index.vue
index dc90a05de..61f3602fd 100644
--- a/frontend/src/views/database/mysql/setting/variables/index.vue
+++ b/frontend/src/views/database/mysql/setting/variables/index.vue
@@ -1,134 +1,139 @@
 <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>
+    <div>
+        <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>
+                        <el-form-item>
+                            <el-button
+                                icon="Collection"
+                                @click="onSaveStart(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>
+        <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,62 +223,72 @@ 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 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'));
+        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 });
+    }
+    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,
 });