fix(ui): wrong jump logic of resource group view (#425)

## What type of PR is this? /kind bug ## What this PR does / why we need it: fix wrong jump logic of resource group view. Co-authored-by: hai-tian <[email protected]>
KusionStack · May 15, 2024 · 39da63f · 39da63f
1 parent 767e631
commit 39da63f
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 5 deletions.
diff --git a/ui/src/components/yaml/styles.module.less b/ui/src/components/yaml/styles.module.less
@@ -4,8 +4,8 @@
 
   .copy {
     position: absolute;
-    top: 10px;
-    right: 10px;
+    top: 20px;
+    right: 20px;
   }
 
   .yaml_box {

diff --git a/ui/src/pages/insight/components/insightTabs/styles.module.less b/ui/src/pages/insight/components/insightTabs/styles.module.less
@@ -7,8 +7,11 @@
     margin-bottom: 10px;
     border-bottom: 1px solid #f1f1f1;
     overflow-x: scroll;
+    overflow-y: hidden;
+
     .tabs {
       display: flex;
+      // border-bottom: 1px solid #f1f1f1;
 
       .tab {
         background-color: rgba(0, 0, 0, 0.02);
@@ -46,7 +49,7 @@
     .add_box {
       cursor: pointer;
       border: 1px solid #f1f1f1;
-      border-bottom: none;
+      border-bottom: 1px solid transparent;
       padding: 9px 13px;
       border-radius: 8px 8px 0 0;
     }

diff --git a/ui/src/pages/insightDetail/group/index.tsx b/ui/src/pages/insightDetail/group/index.tsx
@@ -62,6 +62,12 @@ const ClusterDetail = () => {
     return obj
   }
 
+  function generateSqlParams(sqlParamsObj = {}) {
+    return Object.entries(sqlParamsObj)
+      ?.map(([k, v]) => ` ${k} = '${v || ''}' `)
+      ?.join('and')
+  }
+
   useEffect(() => {
     if (selectedCluster) {
       const result = generateTopologyData(multiTopologyData?.[selectedCluster])
@@ -80,7 +86,11 @@ const ClusterDetail = () => {
         }
       })
       if (tmp) {
-        const queryStr = `select * from resources where cluster = '${resultUrlParams?.cluster || selectedCluster}' and apiVersion = '${tmp?.data?.resourceGroup?.apiVersion}' and kind = 'Pod'`
+        const sqlParams = generateSqlParams({
+          ...tmp?.data?.resourceGroup,
+          cluster: resultUrlParams?.cluster || selectedCluster,
+        })
+        const queryStr = `select * from resources where ${sqlParams} `
         setTableQueryStr(queryStr)
       }
     }
@@ -272,7 +282,11 @@ const ClusterDetail = () => {
   async function onTopologyNodeClick(node) {
     const { resourceGroup } = node?.data || {}
     setTableName(resourceGroup?.kind)
-    const sqlStr = `select * from resources where cluster = '${resourceGroup?.cluster || selectedCluster}' and apiVersion = '${resourceGroup?.apiVersion}' and kind = '${resourceGroup?.kind}'`
+    const sqlParams = generateSqlParams({
+      ...resourceGroup,
+      cluster: resultUrlParams?.cluster || selectedCluster,
+    })
+    const sqlStr = `select * from resources where ${sqlParams}`
     setTableQueryStr(sqlStr)
   }