From 69188ef331cfa79d91b907744974c9efcef1f43f Mon Sep 17 00:00:00 2001
From: elliotxx <951376975@qq.com>
Date: Wed, 15 May 2024 15:06:37 +0800
Subject: [PATCH] fix(ui): wrong jump logic of custom resource group (#426)

## What type of PR is this?

/kind bug

## What this PR does / why we need it:

Fix wrong jump logic of custom resource group.

Co-authored-by: hai-tian <tianhai_th@163.com>
---
 ui/src/components/sqlSearch/index.tsx         |  2 +-
 .../pages/insight/components/card/index.tsx   |  2 +-
 .../components/topologyMap/index.tsx          |  3 ++-
 ui/src/pages/insightDetail/group/index.tsx    | 21 +++++++++++++++++++
 4 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/ui/src/components/sqlSearch/index.tsx b/ui/src/components/sqlSearch/index.tsx
index ac11a726..58e1c319 100644
--- a/ui/src/components/sqlSearch/index.tsx
+++ b/ui/src/components/sqlSearch/index.tsx
@@ -438,7 +438,7 @@ const SqlSearch = ({ sqlEditorValue, handleSearch }: SqlSearchIProps) => {
                 border-right: none;
                 border-left: none;
                 height: 40px;
-                width: 100%;
+                width: ${editorRef?.current?.offsetWidth}px;
                 line-height: 40px;
                 font-size: 14px;
                 padding: 0;
diff --git a/ui/src/pages/insight/components/card/index.tsx b/ui/src/pages/insight/components/card/index.tsx
index 5f67268d..8ad83f4a 100644
--- a/ui/src/pages/insight/components/card/index.tsx
+++ b/ui/src/pages/insight/components/card/index.tsx
@@ -33,7 +33,7 @@ const CardContent = ({ allTags, handleClick, group }: IProps) => {
                 ...tagStyle,
                 marginBottom: index === allTags?.length - 1 ? 0 : 5,
               }}
-            >{`${item?.key}:${item?.value}`}</Tag>
+            >{`${item?.key}: ${item?.value}`}</Tag>
           </div>
         )
       })}
diff --git a/ui/src/pages/insightDetail/components/topologyMap/index.tsx b/ui/src/pages/insightDetail/components/topologyMap/index.tsx
index 5bd6bd7d..837385be 100644
--- a/ui/src/pages/insightDetail/components/topologyMap/index.tsx
+++ b/ui/src/pages/insightDetail/components/topologyMap/index.tsx
@@ -223,7 +223,7 @@ const TopologyMap = ({
               >
                 {displayName}
               </NodeLabel>
-              {'count' in (cfg?.data || {}) && (
+              {typeof cfg?.data?.count === 'number' && (
                 <Text
                   onClick={event => handleMouseEnter(event)}
                   style={{
@@ -445,6 +445,7 @@ const TopologyMap = ({
         <div ref={ref} id="overviewContainer" className={styles.g6_overview}>
           <div className={styles.cluster_select}>
             <Select
+              style={{ minWidth: 100 }}
               placeholder=""
               value={selectedCluster}
               onChange={handleChangeCluster}
diff --git a/ui/src/pages/insightDetail/group/index.tsx b/ui/src/pages/insightDetail/group/index.tsx
index ba4d416e..3f530356 100644
--- a/ui/src/pages/insightDetail/group/index.tsx
+++ b/ui/src/pages/insightDetail/group/index.tsx
@@ -89,11 +89,13 @@ const ClusterDetail = () => {
         const sqlParams = generateSqlParams({
           ...tmp?.data?.resourceGroup,
           cluster: resultUrlParams?.cluster || selectedCluster,
+          ...generateUrlSqlParams(),
         })
         const queryStr = `select * from resources where ${sqlParams} `
         setTableQueryStr(queryStr)
       }
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     selectedCluster,
     resultUrlParams?.cluster,
@@ -279,12 +281,31 @@ const ClusterDetail = () => {
     setCurrentItem(item)
   }
 
+  function generateUrlSqlParams() {
+    const { labels, annotations } = resultUrlParams || {}
+    const urlSqlParams = {}
+    if (labels) {
+      Object.entries(labels)?.forEach(([k, v]) => {
+        const key = '`' + `labels.${k}` + '`'
+        urlSqlParams[key] = v
+      })
+    }
+    if (annotations) {
+      Object.entries(annotations)?.forEach(([k, v]) => {
+        const key = '`' + `annotations.${k}` + '`'
+        urlSqlParams[key] = v
+      })
+    }
+    return urlSqlParams
+  }
+
   async function onTopologyNodeClick(node) {
     const { resourceGroup } = node?.data || {}
     setTableName(resourceGroup?.kind)
     const sqlParams = generateSqlParams({
       ...resourceGroup,
       cluster: resultUrlParams?.cluster || selectedCluster,
+      ...generateUrlSqlParams(),
     })
     const sqlStr = `select * from resources where ${sqlParams}`
     setTableQueryStr(sqlStr)