fix: 数据库慢日志实现修改

frontend/src/lang/modules/en.ts

@@ -352,8 +352,9 @@ export default {
         slowLog: 'Slowlogs',
         noData: 'No slow log yet...',
 
-        isOn: 'Is on',
+        isOn: 'On',
-        longQueryTime: 'Slow query threshold',
+        longQueryTime: 'threshold(s)',
+        thresholdRangeHelper: 'Please enter the correct threshold (1 - 600).',
 
         status: 'The current state',
         baseParam: 'Basic parameter',

frontend/src/lang/modules/zh.ts

@@ -361,8 +361,9 @@ export default {
         slowLog: '慢日志',
         noData: '暂无慢日志...',
 
-        isOn: '是否开启',
+        isOn: '开启',
-        longQueryTime: '慢查询阈值',
+        longQueryTime: '阈值(秒)',
+        thresholdRangeHelper: '请输入正确的阈值(1 - 600)',
 
         status: '当前状态',
         terminal: '终端模式',

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

@@ -1,32 +1,35 @@
 <template>
     <div>
-        <span style="float: left; line-height: 30px">{{ $t('database.longQueryTime') }}</span>
+        <el-form label-position="left" label-width="80px">
-        <div style="margin-left: 5px; float: left">
+            <el-form-item :label="$t('database.isOn')">
-            <el-input @input="checkValid" type="number" v-model.number="variables.long_query_time">
-                <template #append>{{ $t('database.second') }}</template>
-            </el-input>
-            <span v-if="errTime" class="input-error">{{ $t('commons.rule.numberRange', [1, 600]) }}</span>
-        </div>
-        <span style="float: left; margin-left: 20px; line-height: 30px">{{ $t('database.isOn') }}</span>
                 <el-switch
-            style="margin-left: 5px; float: left"
                     v-model="variables.slow_query_log"
                     active-value="ON"
                     inactive-value="OFF"
                     @change="handleSlowLogs"
                 />
-        <div style="margin-left: 20px; float: left">
+            </el-form-item>
+            <el-form-item :label="$t('database.longQueryTime')" v-if="detailShow">
+                <div style="float: left">
+                    <el-input type="number" v-model.number="variables.long_query_time" />
+                </div>
+                <el-button style="float: left; margin-left: 10px" @click="openSlowLogs" type="primary">
+                    {{ $t('commons.button.save') }}
+                </el-button>
+                <div style="float: left; margin-left: 20px">
                     <el-checkbox border v-model="isWatch">{{ $t('commons.button.watch') }}</el-checkbox>
                 </div>
                 <el-button style="margin-left: 20px" @click="onDownload" icon="Download">
                     {{ $t('file.download') }}
                 </el-button>
+            </el-form-item>
+        </el-form>
         <codemirror
             :autofocus="true"
             :placeholder="$t('database.noData')"
             :indent-with-tab="true"
             :tabSize="4"
-            style="margin-top: 10px; height: calc(100vh - 392px); width: 100%"
+            style="height: calc(100vh - 427px); width: 100%"
             :lineWrapping="true"
             :matchBrackets="true"
             theme="cobalt"
@@ -53,7 +56,7 @@ import { updateMysqlVariables } from '@/api/modules/database';
 import { dateFormatForName } from '@/utils/util';
 import i18n from '@/lang';
 import { loadBaseDir } from '@/api/modules/setting';
-import { MsgSuccess } from '@/utils/message';
+import { MsgError, MsgSuccess } from '@/utils/message';
 
 const extensions = [javascript(), oneDark];
 const slowLogs = ref();
@@ -61,10 +64,11 @@ const view = shallowRef();
 const handleReady = (payload) => {
     view.value = payload.view;
 };
+const detailShow = ref();
+const isOnEdit = ref();
 
 const confirmDialogRef = ref();
 
-const errTime = ref();
 const isWatch = ref();
 let timer: NodeJS.Timer | null = null;
 
@@ -87,6 +91,7 @@ const acceptParams = async (params: DialogProps): Promise<void> => {
     const pathRes = await loadBaseDir();
     let path = `${pathRes.data}/apps/mysql/${mysqlName.value}/data/1Panel-slow.log`;
     if (variables.slow_query_log === 'ON') {
+        detailShow.value = true;
         loadMysqlSlowlogs(path);
     }
     timer = setInterval(() => {
@@ -99,6 +104,28 @@ const acceptParams = async (params: DialogProps): Promise<void> => {
 const emit = defineEmits(['loading']);
 
 const handleSlowLogs = async () => {
+    if (variables.slow_query_log === 'ON') {
+        detailShow.value = true;
+        isOnEdit.value = true;
+        return;
+    }
+    if (isOnEdit.value) {
+        detailShow.value = false;
+        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 openSlowLogs = () => {
+    if (!(variables.long_query_time > 0 && variables.long_query_time <= 600)) {
+        MsgError(i18n.global.t('database.thresholdRangeHelper'));
+        return;
+    }
     let params = {
         header: i18n.global.t('database.confChange'),
         operationInfo: i18n.global.t('database.restartNowHelper'),
@@ -111,14 +138,7 @@ const onCancle = async () => {
     variables.slow_query_log = variables.slow_query_log === 'ON' ? 'OFF' : 'ON';
 };
 
-const checkValid = () => {
-    errTime.value = !(variables.long_query_time > 0 && variables.long_query_time < 600);
-};
-
 const onSave = async () => {
-    if (!(variables.long_query_time > 0 && variables.long_query_time < 600)) {
-        return;
-    }
     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 });
@@ -131,6 +151,7 @@ const onSave = async () => {
     await updateMysqlVariables(param)
         .then(() => {
             emit('loading', false);
+            isOnEdit.value = false;
             MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
         })
         .catch(() => {