From 19f7dd6d91b7f13a8e00e338e19c06029f4308dc Mon Sep 17 00:00:00 2001
From: wmh <3303710797@qq.com>
Date: Mon, 4 Nov 2024 10:57:49 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=20=E9=A6=96=E9=A1=B5=E6=8F=90?=
 =?UTF-8?q?=E5=8D=95=E4=BF=AE=E5=A4=8D=20(#1697)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webfe/package_vue/src/language/lang/en.js     |   2 +
 webfe/package_vue/src/language/lang/zh.js     |   2 +
 .../package_vue/src/store/modules/service.js  |   8 ++
 .../home/home-content/alarm-records.vue       |  87 ++++++++++--
 .../home/home-content/idle-app-dashboard.vue  | 126 ++++++++++++------
 .../dev-center/home/home-content/index.vue    |  24 ++--
 6 files changed, 193 insertions(+), 56 deletions(-)

diff --git a/webfe/package_vue/src/language/lang/en.js b/webfe/package_vue/src/language/lang/en.js
index 7cd2255e00..8d2e504542 100644
--- a/webfe/package_vue/src/language/lang/en.js
+++ b/webfe/package_vue/src/language/lang/en.js
@@ -2855,4 +2855,6 @@ export default {
   '太棒了！': 'Awesome!',
   慢查询告警数量: 'Number of slow query alerts',
   告警内容: 'Alarm content',
+  慢查询记录: 'Slow query records',
+  'GCS-MySQL 增强服务实例已解绑，无法再查看慢查询记录': 'The GCS-MySQL Add-ons instance has been unbound, and slow query records can no longer be viewed',
 };
diff --git a/webfe/package_vue/src/language/lang/zh.js b/webfe/package_vue/src/language/lang/zh.js
index 86006f2ddb..cfe879d8be 100644
--- a/webfe/package_vue/src/language/lang/zh.js
+++ b/webfe/package_vue/src/language/lang/zh.js
@@ -2992,4 +2992,6 @@ export default {
   '太棒了！': '太棒了！',
   慢查询告警数量: '慢查询告警数量',
   告警内容: '告警内容',
+  慢查询记录: '慢查询记录',
+  'GCS-MySQL 增强服务实例已解绑，无法再查看慢查询记录': 'GCS-MySQL 增强服务实例已解绑，无法再查看慢查询记录',
 };
diff --git a/webfe/package_vue/src/store/modules/service.js b/webfe/package_vue/src/store/modules/service.js
index 2dbf76e282..005e53d195 100644
--- a/webfe/package_vue/src/store/modules/service.js
+++ b/webfe/package_vue/src/store/modules/service.js
@@ -145,5 +145,13 @@ export default {
       const url = `${BACKEND_URL}/api/bkapps/applications/${appCode}/modules/${moduleId}/services/${service}/`;
       return http.get(url, {}, config);
     },
+
+    /**
+     * 获取应用增强服务信息
+     */
+    getServiceInfo({}, { appCode, moduleId }, config = {}) {
+      const url = `${BACKEND_URL}/api/bkapps/applications/${appCode}/modules/${moduleId}/services/info/`;
+      return http.get(url, {}, config);
+    },
   },
 };
diff --git a/webfe/package_vue/src/views/dev-center/home/home-content/alarm-records.vue b/webfe/package_vue/src/views/dev-center/home/home-content/alarm-records.vue
index 3c3fb27319..b4f585a4cd 100644
--- a/webfe/package_vue/src/views/dev-center/home/home-content/alarm-records.vue
+++ b/webfe/package_vue/src/views/dev-center/home/home-content/alarm-records.vue
@@ -73,16 +73,23 @@
               </bk-table-column>
               <bk-table-column
                 label=""
-                width="180"
+                :width="localLanguage === 'en' ? 210 : 180"
               >
                 <template slot-scope="{ row: childRow }">
                   <bk-button
                     :text="true"
-                    class="ml10"
                     @click="handleDetail(childRow)"
                   >
                     {{ $t('查看详情') }}
                   </bk-button>
+                  <bk-button
+                    v-if="childRow.labels && childRow.labels.includes('gcs_mysql_slow_query')"
+                    :text="true"
+                    class="ml10"
+                    @click="handleSlowQuery(props.row, childRow)"
+                  >
+                    {{ $t('慢查询记录') }}
+                  </bk-button>
                 </template>
               </bk-table-column>
             </bk-table>
@@ -97,7 +104,10 @@
               class="app-name-wrapper"
               v-bk-overflow-tips="{ content: `${row.application.name}（${row.application.code}）` }"
             >
-              <span class="click-area" @click="toAppDetail(row)">
+              <span
+                class="click-area"
+                @click="toAppDetail(row)"
+              >
                 <img
                   class="app-logo"
                   :src="row.application.logo_url"
@@ -109,7 +119,10 @@
                 </span>
               </span>
               <span class="ml20 msg">
-                MySQL {{ $t('慢查询告警数量') }}: <span :class="{ 'slow-query': !!row.slow_query_count }">{{ row.slow_query_count }}</span>/{{ row.count }}
+                MySQL {{ $t('慢查询告警数量') }}:
+                <span :class="{ 'slow-query': !!row.slow_query_count }">{{ row.slow_query_count }}</span>
+                <span>/</span>
+                <span>{{ row.count }}</span>
               </span>
             </div>
           </template>
@@ -154,8 +167,14 @@ export default {
       expandRowKeys: [],
       slowQueryCount: 0,
       selectionTime: {},
+      errorMessage: this.$t('GCS-MySQL 增强服务实例已解绑，无法再查看慢查询记录'),
     };
   },
+  computed: {
+    localLanguage() {
+      return this.$store.state.localLanguage;
+    },
+  },
   created() {
     dayjs.extend(relativeTime);
     bus.$on('home-date', (time) => {
@@ -247,6 +266,53 @@ export default {
     handleDetail(row) {
       window.open(row.detail_link, '_blank');
     },
+    // 处理慢查询页面跳转
+    handleSlowQuery(row, childRow) {
+      const params = {
+        appCode: row.application.code,
+        moduleId: childRow?.module_name || 'default',
+      };
+      this.getServiceInfo(params, childRow.env);
+    },
+    async getServiceInfo(params, env) {
+      try {
+        const GCS_MYSQL_NAME = 'gcs_mysql';
+        const res = await this.$store.dispatch('service/getServiceInfo', params);
+        const services = res[env];
+        if (!services.length) {
+          this.$paasMessage({
+            theme: 'error',
+            message: this.errorMessage,
+          });
+          return;
+        }
+        // 服务服务id
+        const serviceId = services?.find((v) => v.name === GCS_MYSQL_NAME)?.service_id;
+        this.getServiceInstances(params, serviceId);
+      } catch (e) {
+        this.catchErrorHandler(e);
+      }
+    },
+    // 获取服务实例详情
+    async getServiceInstances(params, serviceId) {
+      try {
+        const res = await this.$store.dispatch('service/getServiceInstances', {
+          ...params,
+          service: serviceId,
+        });
+        if (!res.results.length) {
+          this.$paasMessage({
+            theme: 'error',
+            message: this.errorMessage,
+          });
+          return;
+        }
+        const url = `${res.results[0].service_instance?.config?.admin_url}&redirect_url=instance.slow_sql.fingers.list`;
+        window.open(url, '_blank');
+      } catch (e) {
+        this.catchErrorHandler(e);
+      }
+    },
   },
 };
 </script>
@@ -274,10 +340,10 @@ export default {
         color: #3a84ff;
       }
       .msg {
-        color: #63656E;
+        color: #63656e;
       }
       .slow-query {
-        color: #EA3636;
+        color: #ea3636;
       }
     }
   }
@@ -297,8 +363,13 @@ export default {
     .bk-table-expand-icon .bk-icon {
       color: #979ba5;
     }
-    .child-module-table-cls .bk-table-header-wrapper {
-      display: none;
+    .child-module-table-cls {
+      .bk-table-header-wrapper {
+        display: none;
+      }
+      .bk-table-body-wrapper {
+        color: #63656e;
+      }
     }
     .env-column-cls .cell {
       display: flex;
diff --git a/webfe/package_vue/src/views/dev-center/home/home-content/idle-app-dashboard.vue b/webfe/package_vue/src/views/dev-center/home/home-content/idle-app-dashboard.vue
index af650fde34..47c6ea8579 100644
--- a/webfe/package_vue/src/views/dev-center/home/home-content/idle-app-dashboard.vue
+++ b/webfe/package_vue/src/views/dev-center/home/home-content/idle-app-dashboard.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="idle-app-dashboard" v-if="idleAppList.length">
+  <div
+    class="idle-app-dashboard"
+    v-if="idleAppList.length"
+  >
     <!-- 闲置看板功能 -->
     <!-- <div class="title-wrapper">
       <h3 class="title">{{ $t('闲置应用') }}</h3>
@@ -7,8 +10,8 @@
     </div> -->
     <bk-alert
       type="warning"
-      :title="$t('近 30 天内没有访问记录，CPU 使用率低于 1% 且近 7 天无使用波动的模块，请尽快下架。')">
-    </bk-alert>
+      :title="$t('近 30 天内没有访问记录，CPU 使用率低于 1% 且近 7 天无使用波动的模块，请尽快下架。')"
+    ></bk-alert>
     <bk-table
       :data="idleAppList"
       size="small"
@@ -18,16 +21,27 @@
       :expand-row-keys="expandRowKeys"
       v-bkloading="{ isLoading: isTableLoading, zIndex: 10 }"
       row-class-name="idle-table-row-cls"
-      ext-cls="idle-app-dashboard-table">
-      <bk-table-column type="expand" width="30">
+      ext-cls="idle-app-dashboard-table"
+    >
+      <bk-table-column
+        type="expand"
+        width="30"
+      >
         <template slot-scope="props">
           <bk-table
             :data="props.row.module_envs"
             :outer-border="false"
-            :header-cell-style="{background: 'red', borderRight: 'none'}"
-            ext-cls="child-module-table-cls">
-            <bk-table-column label="" width="30"></bk-table-column>
-            <bk-table-column label="" width="240">
+            :header-cell-style="{ background: 'red', borderRight: 'none' }"
+            ext-cls="child-module-table-cls"
+          >
+            <bk-table-column
+              label=""
+              width="30"
+            ></bk-table-column>
+            <bk-table-column
+              label=""
+              width="240"
+            >
               <template slot-scope="{ row: childRow }">
                 {{ childRow.module_name }}
               </template>
@@ -43,9 +57,7 @@
               </template>
             </bk-table-column>
             <bk-table-column label="">
-              <template slot-scope="{ row: childRow }">
-                {{ (childRow?.cpu_usage_avg * 100).toFixed(2) }}%
-              </template>
+              <template slot-scope="{ row: childRow }">{{ (childRow?.cpu_usage_avg * 100).toFixed(2) }}%</template>
             </bk-table-column>
             <bk-table-column label="">
               <template slot-scope="{ row: childRow }">
@@ -63,15 +75,19 @@
                   trigger="click"
                   width="260"
                   :on-hide="handleHide"
-                  ext-cls="idle-popover-cls">
+                  ext-cls="idle-popover-cls"
+                >
                   <bk-button
                     :text="true"
                     :title="$t('下架')"
-                    @click="handleShowPopover(childRow, props.row)">
+                    @click="handleShowPopover(childRow, props.row)"
+                  >
                     {{ $t('下架') }}
                   </bk-button>
                   <div slot="content">
-                    <div class="popover-title">{{ $t('是否下架 {n} 模块', { n: curOperationAppData.module_name }) }}</div>
+                    <div class="popover-title">
+                      {{ $t('是否下架 {n} 模块', { n: curOperationAppData.module_name }) }}
+                    </div>
                     <div class="popover-content tl">
                       {{ $t('将模块从') }}
                       <em>{{ curOperationAppData.env_name === 'stag' ? $t('预发布环境') : $t('生产环境') }}</em>
@@ -83,13 +99,15 @@
                         size="small"
                         class="mr4"
                         :loading="isPopoverLoading"
-                        @click="handleConfirm('offlineApp', `removed${childRow.env_name}-${childRow.module_name}`)">
+                        @click="handleConfirm('offlineApp', `removed${childRow.env_name}-${childRow.module_name}`)"
+                      >
                         {{ $t('确定') }}
                       </bk-button>
                       <bk-button
                         :theme="'default'"
                         size="small"
-                        @click="handleCancel(`removed${childRow.env_name}-${childRow.module_name}`)">
+                        @click="handleCancel(`removed${childRow.env_name}-${childRow.module_name}`)"
+                      >
                         {{ $t('取消') }}
                       </bk-button>
                     </div>
@@ -103,12 +121,14 @@
                   trigger="click"
                   width="260"
                   :on-hide="handleHide"
-                  ext-cls="idle-popover-cls">
+                  ext-cls="idle-popover-cls"
+                >
                   <bk-button
                     :text="true"
                     class="ml10"
                     :title="$t('忽略')"
-                    @click="handleShowPopover(childRow, props.row)">
+                    @click="handleShowPopover(childRow, props.row)"
+                  >
                     {{ $t('忽略') }}
                   </bk-button>
                   <div slot="content">
@@ -126,13 +146,15 @@
                         size="small"
                         class="mr4"
                         :loading="isPopoverLoading"
-                        @click="handleConfirm('ignoreModule', `ignore${childRow.env_name}-${childRow.module_name}`)">
+                        @click="handleConfirm('ignoreModule', `ignore${childRow.env_name}-${childRow.module_name}`)"
+                      >
                         {{ $t('忽略') }}
                       </bk-button>
                       <bk-button
                         :theme="'default'"
                         size="small"
-                        @click="handleCancel(`ignore${childRow.env_name}-${childRow.module_name}`)">
+                        @click="handleCancel(`ignore${childRow.env_name}-${childRow.module_name}`)"
+                      >
                         {{ $t('取消') }}
                       </bk-button>
                     </div>
@@ -143,22 +165,33 @@
           </bk-table>
         </template>
       </bk-table-column>
-      <bk-table-column :label="$t('闲置模块')" width="240">
+      <bk-table-column
+        :label="$t('闲置模块')"
+        width="240"
+      >
         <template slot-scope="{ row }">
           <div
             class="app-name-wrapper"
             v-bk-overflow-tips="{ content: `${row.name}（${row.code}）` }"
             @click="toAppDetail(row)"
           >
-            <img class="app-logo" :src="row.logo_url" alt="logo" />
-            <span class="info">{{ row.name }}<span class="code">（{{ row.code }}）</span></span>
+            <img
+              class="app-logo"
+              :src="row.logo_url"
+              alt="logo"
+            />
+            <span class="info">
+              {{ row.name }}
+              <span class="code">（{{ row.code }}）</span>
+            </span>
           </div>
         </template>
       </bk-table-column>
       <bk-table-column
         :label="$t('环境')"
         prop="source"
-        class-name="env-column-cls">
+        class-name="env-column-cls"
+      >
         <template slot-scope="{ row }">
           <tag-box :tags="row.staffList" />
           <bk-popover
@@ -168,12 +201,14 @@
             trigger="click"
             width="260"
             :on-hide="handleHide"
-            ext-cls="idle-popover-cls">
+            ext-cls="idle-popover-cls"
+          >
             <bk-button
               :theme="'default'"
               type="submit"
               size="small"
-              @click="handleLeaveApp(row)">
+              @click="handleLeaveApp(row)"
+            >
               {{ $t('退出应用') }}
             </bk-button>
             <div slot="content">
@@ -185,13 +220,15 @@
                   size="small"
                   class="mr4"
                   :loading="isPopoverLoading"
-                  @click="confirmLeaveApp(`quit${row.code}`)">
+                  @click="confirmLeaveApp(`quit${row.code}`)"
+                >
                   {{ $t('确定') }}
                 </bk-button>
                 <bk-button
                   :theme="'default'"
                   size="small"
-                  @click="handleCancel(`quit${row.code}`)">
+                  @click="handleCancel(`quit${row.code}`)"
+                >
                   {{ $t('取消') }}
                 </bk-button>
               </div>
@@ -252,8 +289,8 @@ export default {
         const res = await this.$store.dispatch('baseInfo/getIdleAppList');
         // 该应用无模块，则无需展示
         this.idleAppList = res.applications
-          .filter(app => app.module_envs.length)
-          .map(item => ({
+          .filter((app) => app.module_envs.length)
+          .map((item) => ({
             ...item,
             staffList: [...item.administrators, ...item.developers],
           }));
@@ -288,7 +325,8 @@ export default {
     arraySpanMethod({ columnIndex }) {
       if (columnIndex === 2) {
         return [1, 5];
-      } if (columnIndex >= 3 && columnIndex <= 5) {
+      }
+      if (columnIndex >= 3 && columnIndex <= 5) {
         return [0, 0];
       }
     },
@@ -345,7 +383,10 @@ export default {
       } catch (e) {
         this.$paasMessage({
           theme: 'error',
-          message: e.detail || e.message || (name === 'offlineApp' ? this.$t('下架失败，请稍候再试') : this.$t('忽略失败，请稍候再试')),
+          message:
+            e.detail ||
+            e.message ||
+            (name === 'offlineApp' ? this.$t('下架失败，请稍候再试') : this.$t('忽略失败，请稍候再试')),
         });
       } finally {
         this.isPopoverLoading = false;
@@ -407,10 +448,10 @@ export default {
       vertical-align: middle;
     }
     .code {
-      color: #979BA5;
+      color: #979ba5;
     }
     .info:hover {
-      color: #3A84FF;
+      color: #3a84ff;
     }
   }
 
@@ -420,16 +461,21 @@ export default {
 
   :deep(.idle-app-dashboard-table) {
     .bk-table-body-wrapper .idle-table-row-cls {
-      background: #F0F1F5;
+      background: #f0f1f5;
     }
     tr.expanded .bk-table-expand-icon .bk-icon {
-      color: #63656E;
+      color: #63656e;
     }
     .bk-table-expand-icon .bk-icon {
-      color: #979BA5;
+      color: #979ba5;
     }
-    .child-module-table-cls .bk-table-header-wrapper {
-      display: none;
+    .child-module-table-cls {
+      .bk-table-header-wrapper {
+        display: none;
+      }
+      .bk-table-body-wrapper {
+        color: #63656e;
+      }
     }
     .env-column-cls .cell {
       display: flex;
diff --git a/webfe/package_vue/src/views/dev-center/home/home-content/index.vue b/webfe/package_vue/src/views/dev-center/home/home-content/index.vue
index 639f94ae88..de59d4db8c 100644
--- a/webfe/package_vue/src/views/dev-center/home/home-content/index.vue
+++ b/webfe/package_vue/src/views/dev-center/home/home-content/index.vue
@@ -81,13 +81,15 @@ export default {
       if (this.platformFeature.MONITORING) {
         return this.panels;
       }
-      return this.panels.filter(item => item.name !== 'alarm');
+      return this.panels.filter((item) => item.name !== 'alarm');
     },
     appChartInfo() {
       return this.$store.state.baseInfo.appChartData;
     },
     emptyTips() {
-      return this.$t('您当前共管理 <i>{n}</i> 个应用，无任何应用处于告警或闲置状态，请继续保持！', { n: this.appChartInfo?.allCount });
+      return this.$t('您当前共管理 <i>{n}</i> 个应用，无任何应用处于告警或闲置状态，请继续保持！', {
+        n: this.appChartInfo?.allCount,
+      });
     },
   },
   watch: {
@@ -95,7 +97,7 @@ export default {
       if (newPanels.length) {
         this.handleTabClick(newPanels[0]);
       }
-    }
+    },
   },
   mounted() {
     this.updateContainerHeight();
@@ -103,8 +105,14 @@ export default {
     // 创建一个 ResizeObserver 实例
     this.resizeObserver = new ResizeObserver((entries) => {
       for (const entry of entries) {
-        // 列表元素高度同步到右侧操作记录
-        this.contentHeight = entry.contentRect.height + 32;
+        const newHeight = entry.contentRect.height;
+
+        // 如果高度发生变化
+        if (newHeight !== this.contentHeight - 32) {
+          window.requestAnimationFrame(() => {
+            this.contentHeight = newHeight + 32;
+          });
+        }
       }
     });
     this.resizeObserver.observe(this.$refs.tabContent);
@@ -129,11 +137,11 @@ export default {
       const { name, length } = data;
       if (length === 0) {
         // 移除对应的 tab 项
-        this.panels = this.panels.filter(panel => panel.name !== name);
+        this.panels = this.panels.filter((panel) => panel.name !== name);
         this.active = this.panels[0].name;
       } else {
         // 确保在 length > 0 时，该 tab 存在于 panels 中
-        if (!this.panels.some(panel => panel.name === name)) {
+        if (!this.panels.some((panel) => panel.name === name)) {
           this.isLoading = true;
           if (name === 'idle') {
             this.panels.unshift({ name: 'idle', label: this.$t('闲置应用') });
@@ -221,6 +229,6 @@ export default {
 /deep/ .no-data .empty-tips i {
   font-style: normal;
   font-weight: 700;
-  color: #3A84FF;
+  color: #3a84ff;
 }
 </style>