refactor(ui): optimize some experience issues again (#432)

## What type of PR is this? /kind refactor ## What this PR does / why we need it: optimize some experience issues again
KusionStack · May 17, 2024 · 0300474 · 0300474
1 parent 3e96ecf
commit 0300474
Show file tree

Hide file tree

Showing 12 changed files with 217 additions and 101 deletions.
diff --git a/ui/src/components/layout/style.module.less b/ui/src/components/layout/style.module.less
@@ -61,17 +61,17 @@
       .read_only_mode {
         display: flex;
         padding: 2px 10px;
-        margin-right: 20px;
-        font-size: 14px;
+        margin-right: 10px;
+        font-size: 12px;
         color: #646566;
         background: #f5f5f5;
         border: 1px solid #d8d8d8;
         border-radius: 8px;
         align-items: center;
 
         .read_only_mode_img {
-          width: 20px;
-          height: 20px;
+          width: 15px;
+          height: 15px;
         }
 
         span {

diff --git a/ui/src/components/sqlSearch/index.tsx b/ui/src/components/sqlSearch/index.tsx
@@ -425,20 +425,18 @@ const SqlSearch = ({ sqlEditorValue, handleSearch }: SqlSearchIProps) => {
         <div className={styles.karpor_editor_prefix}>{searchSqlPrefix}</div>
         <div className={styles.karpor_editor_content}>
           <div
-            style={{ width: '100%', flex: 1 }}
+            style={{ flex: 1, width: 100 }}
             ref={editorRef}
             className={css`
               .cm-editor .cm-scroller {
                 padding-left: 10px;
                 box-sizing: border-box;
                 background: #fff;
                 border: none;
+                overflow-x: auto;
               }
               .cm-editor .cm-content {
-                border-right: none;
-                border-left: none;
                 height: 40px;
-                width: ${editorRef?.current?.offsetWidth}px;
                 line-height: 40px;
                 font-size: 14px;
                 padding: 0;

diff --git a/ui/src/components/sqlSearch/styles.module.less b/ui/src/components/sqlSearch/styles.module.less
@@ -19,9 +19,6 @@
       font-size: 14px;
       line-height: 40px;
       color: #999;
-      text-align: center;
-      text-overflow: ellipsis;
-      white-space: nowrap;
       background: #f1f1f1;
       border-radius: 40px 0 0 40px;
       box-sizing: border-box;

diff --git a/ui/src/hooks/useDebounce.ts b/ui/src/hooks/useDebounce.ts
@@ -0,0 +1,17 @@
+import { useEffect, useRef, useState } from 'react'
+
+const useDebounce = (value, delay = 500) => {
+  const [debouncedValue, setDebouncedValue] = useState('')
+  const timerRef = useRef<any>()
+
+  useEffect(() => {
+    timerRef.current = setTimeout(() => setDebouncedValue(value), delay)
+    return () => {
+      clearTimeout(timerRef.current)
+    }
+  }, [value, delay])
+
+  return debouncedValue
+}
+
+export default useDebounce
diff --git a/ui/src/locales/en.json b/ui/src/locales/en.json
@@ -104,5 +104,8 @@
   "DuplicateData": "Duplicate data, please recheck",
   "AreYouSureDeleteResourceGroupRule": "Are you sure to delete this resource group rule?",
   "Copy": "Copy",
-  "CopySuccess": "Copy successful"
+  "CopySuccess": "Copy successful",
+  "TotalResourceGroupRules": "Total ResourceGroupRules",
+  "TotalResources": "Total Resources",
+  "ClusterCount": "Cluster Count"
 }
diff --git a/ui/src/locales/zh.json b/ui/src/locales/zh.json
@@ -104,5 +104,8 @@
   "DuplicateData": "数据重复，请重新检查",
   "AreYouSureDeleteResourceGroupRule": "您确定要删除此资源组规则吗？",
   "Copy": "复制",
-  "CopySuccess": "复制成功"
+  "CopySuccess": "复制成功",
+  "TotalResourceGroupRules": "资源组规则数量",
+  "TotalResources": "资源总数",
+  "ClusterCount": "集群数量"
 }
diff --git a/ui/src/pages/insight/components/card/index.tsx b/ui/src/pages/insight/components/card/index.tsx
@@ -43,17 +43,34 @@ const CardContent = ({ allTags, handleClick, group }: IProps) => {
   return (
     <div className={styles.insight_card}>
       <div className={styles.content}>
-        <div className={styles.content_left}>{title?.slice(0, 1)}</div>
+        <div
+          className={styles.content_left}
+          onClick={() => handleClick(group, title)}
+        >
+          {title?.slice(0, 1)}
+        </div>
         <div className={styles.content_right}>
           <Tooltip title={title}>
-            <div className={styles.title}>{title}</div>
+            <div
+              className={styles.title}
+              onClick={() => handleClick(group, title)}
+            >
+              {title}
+            </div>
           </Tooltip>
           <div className={styles.tag_container}>
             {allTags?.slice(0, 2)?.map(item => {
               return (
-                <Tag style={tagStyle} key={item?.key}>
-                  {`${item?.key}: ${item?.value}`}
-                </Tag>
+                <Popover
+                  key={item?.key}
+                  content={
+                    <span>
+                      {item?.key}: {item?.value}
+                    </span>
+                  }
+                >
+                  <Tag style={tagStyle}>{`${item?.key}: ${item?.value}`}</Tag>
+                </Popover>
               )
             })}
           </div>

diff --git a/ui/src/pages/insight/components/card/styles.module.less b/ui/src/pages/insight/components/card/styles.module.less
@@ -2,7 +2,6 @@
   position: relative;
   width: 90%;
   margin: 30px 0;
-  cursor: pointer;
   border-radius: 8px;
   box-sizing: border-box;
   box-shadow:
@@ -26,6 +25,7 @@
       border-radius: 50%;
       justify-content: center;
       align-items: center;
+      cursor: pointer;
     }
 
     .content_right {
@@ -43,6 +43,7 @@
         word-break: break-all;
         -webkit-box-orient: vertical;
         -webkit-line-clamp: 1;
+        cursor: pointer;
       }
 
       .tag_container {
@@ -61,6 +62,7 @@
       width: 50%;
       padding: 15px 0;
       text-align: center;
+      cursor: pointer;
     }
   }
 }
diff --git a/ui/src/pages/insight/components/quotaContent/index.tsx b/ui/src/pages/insight/components/quotaContent/index.tsx
@@ -5,6 +5,7 @@ import insightResourceGroupPng from '@/assets/insight_resources_group.png'
 import QuotaCard from './quotaCard'
 
 import styles from './styles.module.less'
+import { useTranslation } from 'react-i18next'
 
 type IProps = {
   statsData: {
@@ -15,11 +16,12 @@ type IProps = {
 }
 
 const QuotaContent = ({ statsData }: IProps) => {
+  const { t } = useTranslation()
   return (
     <div className={styles.stat}>
       <div className={styles.item}>
         <QuotaCard
-          title="Cluster Count"
+          title={t('ClusterCount')}
           value={statsData?.clusterCount}
           bgColor="#eaf3ed"
           iconNode={
@@ -36,7 +38,7 @@ const QuotaContent = ({ statsData }: IProps) => {
       </div>
       <div className={styles.item}>
         <QuotaCard
-          title="Total Resources"
+          title={t('TotalResources')}
           value={statsData?.resourceCount}
           bgColor="#fbf4e7"
           iconNode={
@@ -53,7 +55,7 @@ const QuotaContent = ({ statsData }: IProps) => {
       </div>
       <div className={styles.item}>
         <QuotaCard
-          title="Total ResourceGroupRules"
+          title={t('TotalResourceGroupRules')}
           value={statsData?.resourceGroupRuleCount}
           bgColor="#e6f1ff"
           iconNode={

diff --git a/ui/src/pages/insightDetail/components/sourceTable/index.tsx b/ui/src/pages/insightDetail/components/sourceTable/index.tsx
@@ -2,9 +2,10 @@ import { SearchOutlined } from '@ant-design/icons'
 import { Button, Input, Space, Table, message } from 'antd'
 import axios from 'axios'
 import queryString from 'query-string'
-import React, { useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useLocation, useNavigate } from 'react-router-dom'
+import useDebounce from '@/hooks/useDebounce'
 
 import styles from './style.module.less'
 
@@ -30,6 +31,9 @@ const SourceTable = ({ queryStr, tableName }: IProps) => {
   const [tableData, setTableData] = useState([])
   const urlSearchParams = queryString?.parse(location?.search)
   const [loading, setLoading] = useState(false)
+  const [keyword, setKeyword] = useState('')
+
+  const debouncedValue = useDebounce(keyword, 500)
 
   function goResourcePage(record) {
     const nav = record?.object?.kind === 'Namespace' ? 'namespace' : 'resource'
@@ -54,45 +58,37 @@ const SourceTable = ({ queryStr, tableName }: IProps) => {
       dataIndex: 'name',
       key: 'name',
       title: t('Name'),
-      render: (_, record) => {
-        return (
-          <Button type="link" onClick={() => goResourcePage(record)}>
-            {record?.object?.metadata?.name}
-          </Button>
-        )
-      },
+      render: (_, record) => (
+        <Button type="link" onClick={() => goResourcePage(record)}>
+          {record?.object?.metadata?.name}
+        </Button>
+      ),
     },
     {
       dataIndex: 'namespace',
       key: 'namespace',
       title: 'Namespace',
-      render: (_, record) => {
-        return record?.object?.metadata?.namespace
-      },
+      render: (_, record) => record?.object?.metadata?.namespace,
     },
     {
       dataIndex: 'apiVersion',
       key: 'apiVersion',
       title: 'APIVersion',
-      render: (_, record) => {
-        return record?.object?.apiVersion
-      },
+      render: (_, record) => record?.object?.apiVersion,
     },
     {
       dataIndex: 'kind',
       key: 'kind',
       title: 'Kind',
-      render: (_, record) => {
-        return record?.object?.kind
-      },
+      render: (_, record) => record?.object?.kind,
     },
   ]
 
   async function queryTableData(params) {
     const { current, pageSize } = pageParams
     setLoading(true)
     const response: any = await axios.get(
-      `/rest-api/v1/search?query=${queryStr}&pattern=sql&page=${params?.current || current}&pageSize=${params?.pageSize || pageSize}`,
+      `/rest-api/v1/search?query=${queryStr}&pattern=sql&page=${params?.current || current}&pageSize=${params?.pageSize || pageSize}&keyword=${params?.keyword || ''}`,
     )
     if (response?.success) {
       setTableData(response?.data?.items || [])
@@ -108,16 +104,31 @@ const SourceTable = ({ queryStr, tableName }: IProps) => {
 
   useEffect(() => {
     if (queryStr) {
+      setKeyword('')
       queryTableData({ current: 1, pageSize: pageParams?.pageSize })
     }
-
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [queryStr])
 
   function handleTableChange({ current, pageSize }) {
-    queryTableData({ current, pageSize })
+    queryTableData({ current, pageSize, keyword: debouncedValue })
   }
 
+  const search = useCallback(() => {
+    queryTableData({
+      current: 1,
+      pageSize: pageParams?.pageSize,
+      keyword: debouncedValue,
+    })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [debouncedValue])
+
+  useEffect(() => {
+    if (debouncedValue) {
+      search()
+    }
+  }, [debouncedValue, search])
+
   return (
     <div>
       <div className={styles.table_header}>
@@ -131,7 +142,10 @@ const SourceTable = ({ queryStr, tableName }: IProps) => {
         </div>
         <Space style={{ marginBottom: 10 }}>
           <Input
+            value={keyword}
+            allowClear
             disabled
+            onChange={event => setKeyword(event?.target?.value)}
             placeholder={t('FilterByName')}
             suffix={<SearchOutlined />}
           />