From 072b516d1029c74e4f312202bcf0f46b89bf427c Mon Sep 17 00:00:00 2001
From: ssongliu <73214554+ssongliu@users.noreply.github.com>
Date: Mon, 18 Sep 2023 14:08:19 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20MySQL=20=E8=AE=BE=E7=BD=AE=E9=A1=B5?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E7=BB=9F=E4=B8=80=20(#2335)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/lang/modules/en.ts               |  2 +-
 frontend/src/lang/modules/tw.ts               |  2 +-
 frontend/src/lang/modules/zh.ts               |  2 +-
 .../views/database/mysql/setting/index.vue    | 94 +++++++++----------
 .../views/database/redis/password/index.vue   | 36 +++----
 5 files changed, 67 insertions(+), 69 deletions(-)

diff --git a/frontend/src/lang/modules/en.ts b/frontend/src/lang/modules/en.ts
index f81f26802..de4a970b9 100644
--- a/frontend/src/lang/modules/en.ts
+++ b/frontend/src/lang/modules/en.ts
@@ -1544,7 +1544,7 @@ const message = {
         writing: 'Number of Responses (Writing)',
         waiting: 'resident process (Waiting)',
         status: 'Current Status',
-        nginxConfig: 'OpenResty Settings',
+        nginxConfig: 'Settings',
         configResource: 'Configuration',
         saveAndReload: 'Save and Reload',
     },
diff --git a/frontend/src/lang/modules/tw.ts b/frontend/src/lang/modules/tw.ts
index 048fa7ee6..a0280587d 100644
--- a/frontend/src/lang/modules/tw.ts
+++ b/frontend/src/lang/modules/tw.ts
@@ -1469,7 +1469,7 @@ const message = {
         writing: '響應數(Writing)',
         waiting: '駐留進程(Waiting)',
         status: '當前狀態',
-        nginxConfig: 'OpenResty 設置',
+        nginxConfig: '設置',
         configResource: '配置修改',
         saveAndReload: '保存並重載',
     },
diff --git a/frontend/src/lang/modules/zh.ts b/frontend/src/lang/modules/zh.ts
index 5a7fe6ab4..d02e54502 100644
--- a/frontend/src/lang/modules/zh.ts
+++ b/frontend/src/lang/modules/zh.ts
@@ -1469,7 +1469,7 @@ const message = {
         writing: '响应数(Writing)',
         waiting: '驻留进程(Waiting)',
         status: '当前状态',
-        nginxConfig: 'OpenResty 设置',
+        nginxConfig: '设置',
         configResource: '配置修改',
         saveAndReload: '保存并重载',
     },
diff --git a/frontend/src/views/database/mysql/setting/index.vue b/frontend/src/views/database/mysql/setting/index.vue
index e6baeed8a..704f585c0 100644
--- a/frontend/src/views/database/mysql/setting/index.vue
+++ b/frontend/src/views/database/mysql/setting/index.vue
@@ -2,58 +2,54 @@
     <div v-loading="loading">
         <LayoutContent>
             <template #title>
-                <back-button
-                    name="MySQL"
-                    :header="
-                        props.database +
-                        ' [' +
-                        (props.type === 'mysql' ? 'MySQL' : 'MariaDB') +
-                        '] - ' +
-                        $t('commons.button.set')
-                    "
-                />
+                <back-button name="MySQL" :header="props.database + ' ' + $t('commons.button.set')">
+                    <template #buttons>
+                        <el-button type="primary" :plain="activeName !== 'conf'" @click="jumpToConf">
+                            {{ $t('database.confChange') }}
+                        </el-button>
+                        <el-button
+                            type="primary"
+                            :disabled="mysqlStatus !== 'Running'"
+                            :plain="activeName !== 'status'"
+                            @click="activeName = 'status'"
+                        >
+                            {{ $t('database.currentStatus') }}
+                        </el-button>
+                        <el-button
+                            type="primary"
+                            :disabled="mysqlStatus !== 'Running'"
+                            :plain="activeName !== 'tuning'"
+                            @click="activeName = 'tuning'"
+                        >
+                            {{ $t('database.performanceTuning') }}
+                        </el-button>
+                        <el-button type="primary" :plain="activeName !== 'port'" @click="activeName = 'port'">
+                            {{ $t('commons.table.port') }}
+                        </el-button>
+                        <el-button
+                            type="primary"
+                            :disabled="mysqlStatus !== 'Running'"
+                            :plain="activeName !== 'log'"
+                            @click="activeName = 'log'"
+                        >
+                            {{ $t('database.log') }}
+                        </el-button>
+                        <el-button
+                            type="primary"
+                            :disabled="mysqlStatus !== 'Running'"
+                            @click="jumpToSlowlog"
+                            :plain="activeName !== 'slowLog'"
+                        >
+                            {{ $t('database.slowLog') }}
+                        </el-button>
+                    </template>
+                </back-button>
             </template>
 
-            <template #toolbar>
-                <el-button type="primary" :plain="activeName !== 'conf'" @click="jumpToConf">
-                    {{ $t('database.confChange') }}
-                </el-button>
-                <el-button
-                    type="primary"
-                    :disabled="mysqlStatus !== 'Running'"
-                    :plain="activeName !== 'status'"
-                    @click="activeName = 'status'"
-                >
-                    {{ $t('database.currentStatus') }}
-                </el-button>
-                <el-button
-                    type="primary"
-                    :disabled="mysqlStatus !== 'Running'"
-                    :plain="activeName !== 'tuning'"
-                    @click="activeName = 'tuning'"
-                >
-                    {{ $t('database.performanceTuning') }}
-                </el-button>
-                <el-button type="primary" :plain="activeName !== 'port'" @click="activeName = 'port'">
-                    {{ $t('commons.table.port') }}
-                </el-button>
-                <el-button
-                    type="primary"
-                    :disabled="mysqlStatus !== 'Running'"
-                    :plain="activeName !== 'log'"
-                    @click="activeName = 'log'"
-                >
-                    {{ $t('database.log') }}
-                </el-button>
-                <el-button
-                    type="primary"
-                    :disabled="mysqlStatus !== 'Running'"
-                    @click="jumpToSlowlog"
-                    :plain="activeName !== 'slowLog'"
-                >
-                    {{ $t('database.slowLog') }}
-                </el-button>
+            <template #app>
+                <AppStatus :app-key="props.type" :app-name="props.database" v-model:loading="loading" />
             </template>
+
             <template #main>
                 <div v-if="activeName === 'conf'">
                     <codemirror
diff --git a/frontend/src/views/database/redis/password/index.vue b/frontend/src/views/database/redis/password/index.vue
index eca94f5d9..211692739 100644
--- a/frontend/src/views/database/redis/password/index.vue
+++ b/frontend/src/views/database/redis/password/index.vue
@@ -6,22 +6,6 @@
         <el-form @submit.prevent v-loading="loading" ref="formRef" :model="form" label-position="top">
             <el-row type="flex" justify="center">
                 <el-col :span="22">
-                    <el-form-item :label="$t('commons.login.password')" :rules="Rules.paramComplexity" prop="password">
-                        <el-input type="password" show-password clearable v-model="form.password">
-                            <template #append>
-                                <el-button @click="onCopy(form.password)">{{ $t('commons.button.copy') }}</el-button>
-                                <el-divider direction="vertical" />
-                                <el-button style="margin-left: 1px" @click="random">
-                                    {{ $t('commons.button.random') }}
-                                </el-button>
-                            </template>
-                        </el-input>
-                    </el-form-item>
-                    <el-form-item :label="$t('database.serviceName')" prop="serviceName">
-                        <el-tag>{{ form.serviceName }}</el-tag>
-                        <el-button @click="onCopy(form.serviceName)" icon="DocumentCopy" link></el-button>
-                        <span class="input-help">{{ $t('database.serviceNameHelper') }}</span>
-                    </el-form-item>
                     <el-form-item :label="$t('database.containerConn')">
                         <el-tag>
                             {{ form.serviceName + ':6379' }}
@@ -32,10 +16,24 @@
                         </span>
                     </el-form-item>
                     <el-form-item :label="$t('database.remoteConn')">
-                        <el-tag>{{ form.systemIP + ':' + form.port }}</el-tag>
+                        <el-tooltip v-if="loadConnInfo().length > 48" :content="loadConnInfo()" placement="top">
+                            <el-tag>{{ loadConnInfo().substring(0, 48) }}...</el-tag>
+                        </el-tooltip>
+                        <el-tag v-else>{{ loadConnInfo() }}</el-tag>
                         <el-button @click="onCopy(form.systemIP + ':6379')" icon="DocumentCopy" link></el-button>
                         <span class="input-help">{{ $t('database.remoteConnHelper2') }}</span>
                     </el-form-item>
+                    <el-form-item :label="$t('commons.login.password')" :rules="Rules.paramComplexity" prop="password">
+                        <el-input type="password" show-password clearable v-model="form.password">
+                            <template #append>
+                                <el-button @click="onCopy(form.password)">{{ $t('commons.button.copy') }}</el-button>
+                                <el-divider direction="vertical" />
+                                <el-button style="margin-left: 1px" @click="random">
+                                    {{ $t('commons.button.random') }}
+                                </el-button>
+                            </template>
+                        </el-input>
+                    </el-form-item>
                 </el-col>
             </el-row>
         </el-form>
@@ -133,6 +131,10 @@ const onSubmit = async () => {
         });
 };
 
+function loadConnInfo() {
+    return form.value.systemIP + ':' + form.value.port;
+}
+
 const onSave = async (formEl: FormInstance | undefined) => {
     if (!formEl) return;
     formEl.validate(async (valid) => {