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 <[email protected]>
KusionStack · May 15, 2024 · 69188ef · 69188ef
1 parent 39da63f
commit 69188ef
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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)