refactor(ui): fine tune search and cluster page ui (#313)

## What type of PR is this? /kind ui ## What this PR does / why we need it: Fine tune search and cluster page ui. Co-authored-by: hai-tian <[email protected]>
KusionStack · Mar 5, 2024 · ad9da0d · ad9da0d
1 parent 8ffdc97
commit ad9da0d
Show file tree

Hide file tree

Showing 16 changed files with 61 additions and 65 deletions.
diff --git a/ui/src/components/layout/index.tsx b/ui/src/components/layout/index.tsx
@@ -117,7 +117,7 @@ const LayoutPage = () => {
       <div className={styles.nav}>
         <div className={styles.left}>
           <div className={styles.title} onClick={goHome}>
-            <div className={styles.subLogo}>K</div>
+            <div className={styles.sub_logo}>K</div>
             <div className={styles.text}>Karbour</div>
           </div>
           <div>
@@ -133,7 +133,7 @@ const LayoutPage = () => {
         </div>
         <div className={styles.right}>
           {isReadOnlyMode && (
-            <div className={styles.readOnlyMode}>
+            <div className={styles.read_only_mode}>
               <img src={showPng} />
               <span>演示模式</span>
             </div>

diff --git a/ui/src/components/layout/style.module.less b/ui/src/components/layout/style.module.less
@@ -26,7 +26,7 @@
         cursor: pointer;
         align-items: center;
 
-        .subLogo {
+        .sub_logo {
           display: inline-block;
           width: 20px;
           height: 20px;
@@ -59,7 +59,7 @@
       display: flex;
       align-items: center;
 
-      .readOnlyMode {
+      .read_only_mode {
         display: flex;
         padding: 2px 10px;
         margin-right: 20px;

diff --git a/ui/src/components/searchInput/index.tsx b/ui/src/components/searchInput/index.tsx
@@ -18,7 +18,7 @@ const SearchInput = (props: IProps) => {
     props
 
   return (
-    <div className={styles.searchBox}>
+    <div className={styles.search_box}>
       <div className={styles.submit} onClick={handleSearch}>
         <img src={arrowRight} />
       </div>
@@ -34,7 +34,7 @@ const SearchInput = (props: IProps) => {
           }}
         />
         <AutoComplete
-          className={styles.customAutoComplete}
+          className={styles.custom_auto_complete}
           size="large"
           onKeyUp={handleOnkeyUp}
           options={options}

diff --git a/ui/src/components/searchInput/styles.module.less b/ui/src/components/searchInput/styles.module.less
@@ -1,11 +1,11 @@
-.searchBox {
+.search_box {
   position: relative;
   width: 800px;
   background: #f1f1f1;
   border: 10px solid #f1f1f1;
   border-radius: 16px;
 
-  .customAutoComplete {
+  .custom_auto_complete {
     /* stylelint-disable-next-line selector-pseudo-class-no-unknown */
     :global {
       .ant-select-selector {

diff --git a/ui/src/components/tabs/index.tsx b/ui/src/components/tabs/index.tsx
@@ -22,7 +22,7 @@ const KarbourTabs = ({
   boxStyle,
 }: Props) => {
   return (
-    <div className={styles.tabContainer} style={boxStyle}>
+    <div className={styles.tab_container} style={boxStyle}>
       {list?.map((item, index) => {
         return (
           <div

diff --git a/ui/src/components/tabs/style.module.less b/ui/src/components/tabs/style.module.less
@@ -1,4 +1,4 @@
-.tabContainer {
+.tab_container {
   display: flex;
   align-items: center;
   font-size: 16px;

diff --git a/ui/src/components/yaml/index.tsx b/ui/src/components/yaml/index.tsx
@@ -29,9 +29,9 @@ const Yaml = (props: IProps) => {
   }, [data])
 
   return (
-    <div className={styles.yamlContent} style={{ height: props?.height }}>
+    <div className={styles.yaml_content} style={{ height: props?.height }}>
       <div
-        className={styles.yamlBox}
+        className={styles.yaml_box}
         style={{ height: props?.height }}
         ref={yamlRef as any}
       />

diff --git a/ui/src/components/yaml/styles.module.less b/ui/src/components/yaml/styles.module.less
@@ -1,14 +1,8 @@
-.yamlContent {
+.yaml_content {
   position: relative;
   overflow-y: auto;
 
-  .copyContainer {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-  }
-
-  .yamlBox {
+  .yaml_box {
     width: 100%;
     height: 500px;
     max-height: 800px;

diff --git a/ui/src/pages/cluster/index.tsx b/ui/src/pages/cluster/index.tsx
@@ -244,20 +244,20 @@ const Cluster = () => {
     {
       label: (
         <div style={tabStyle}>
-          <img src={execptionalPng} style={iconStyle} />
-          异常集群<span style={numberStyle}>{summary?.unhealthyCount}</span>
+          <img src={healthPng} style={iconStyle} />
+          健康集群<span style={numberStyle}>{summary?.healthyCount}</span>
         </div>
       ),
-      value: 'exception',
+      value: 'healthy',
     },
     {
       label: (
         <div style={tabStyle}>
-          <img src={healthPng} style={iconStyle} />
-          健康集群<span style={numberStyle}>{summary?.healthyCount}</span>
+          <img src={execptionalPng} style={iconStyle} />
+          异常集群<span style={numberStyle}>{summary?.unhealthyCount}</span>
         </div>
       ),
-      value: 'healthy',
+      value: 'exception',
     },
     // { label: <div style={tabStyle}><DeleteRowOutlined style={{ ...iconStyle, background: 'rgba(0,10,26, 0.08)', color: '#000A1A' }} />已删除<span style={numberStyle}>3</span></div>, value: "delete" },
   ]
@@ -280,7 +280,7 @@ const Cluster = () => {
 
   return (
     <div className={styles.container}>
-      <div className={styles.actionBar}>
+      <div className={styles.action_bar}>
         <div className={styles.title}>集群列表</div>
         {pageData && pageData?.length > 0 && (
           <Button type="primary" onClick={join} disabled={isReadOnlyMode}>
@@ -289,12 +289,12 @@ const Cluster = () => {
         )}
       </div>
       {!pageData || !pageData?.length ? (
-        <div className={styles.emptyContent}>
-          <div className={styles.emptyData}>
+        <div className={styles.empty_content}>
+          <div className={styles.empty_data}>
             <div className={styles.left}>
               <div className={styles.nodate}>当前暂无可管理的集群</div>
               <div className={styles.tip}>集群需 KubeConfig 配置文件接入</div>
-              <div className={styles.btnBox}>
+              <div>
                 <Button type="primary" onClick={join}>
                   接入集群
                 </Button>
@@ -315,9 +315,9 @@ const Cluster = () => {
             />
           </div>
           <div
-            className={`${styles.pageContent} ${styles[`pageContent_${triangleLeftOffestIndex}`]}`}
+            className={`${styles.page_content} ${styles[`page_content_${triangleLeftOffestIndex}`]}`}
           >
-            <div className={styles.toolBar}>
+            <div className={styles.tool_bar}>
               <Input
                 value={searchValue}
                 onChange={event => {
@@ -370,7 +370,7 @@ const Cluster = () => {
                 <Loading />
               </div>
             ) : showPageData && showPageData?.length > 0 ? (
-              <div className={styles.pageList}>
+              <div className={styles.page_list}>
                 {showPageData?.map((item: any, index: number) => {
                   return (
                     <ClusterCard

diff --git a/ui/src/pages/cluster/styles.module.less b/ui/src/pages/cluster/styles.module.less
@@ -3,7 +3,7 @@
   height: 100%;
   flex-direction: column;
 
-  .actionBar {
+  .action_bar {
     display: flex;
     margin-bottom: 24px;
     font-weight: bold;
@@ -12,14 +12,14 @@
   }
 
   // 空状态
-  .emptyContent {
+  .empty_content {
     flex: 1;
     display: flex;
     justify-content: center;
     align-items: center;
     background: #fff;
 
-    .emptyData {
+    .empty_data {
       display: flex;
       width: 776px;
       height: 228px;
@@ -62,7 +62,7 @@
       align-items: center;
     }
 
-    .pageContent {
+    .page_content {
       position: relative;
       padding: 20px 25px;
       background: #fff;
@@ -94,42 +94,37 @@
         border-bottom-color: #fff;
       }
 
-      &.pageContent_1 {
+      &.page_content_1 {
         &::before,
         &::after {
           left: 35%;
         }
       }
 
-      &.pageContent_2 {
+      &.page_content_2 {
         &::before,
         &::after {
           left: 60%;
         }
       }
 
-      &.pageContent_3 {
+      &.page_content_3 {
         &::before,
         &::after {
           left: 85%;
         }
       }
 
-      .toolBar {
+      .tool_bar {
         display: flex;
         // justify-content: flex-end;
         align-items: center;
       }
 
-      .pageList {
+      .page_list {
         margin: 24px 0;
         border-radius: 8px;
       }
-
-      .pagePagination {
-        width: 100%;
-        text-align: right;
-      }
     }
   }
 }
diff --git a/ui/src/pages/insightDetail/components/eventDetail/index.tsx b/ui/src/pages/insightDetail/components/eventDetail/index.tsx
@@ -1,8 +1,9 @@
+import React from 'react'
 import { Button, Modal, Tag } from 'antd'
-import styles from './style.module.less'
 import MutiTag from '../mutiTag'
-import { SEVERITY_MAP } from '../../../../utils/constants'
-import React from 'react'
+import { SEVERITY_MAP } from '@/utils/constants'
+
+import styles from './style.module.less'
 
 type IProps = {
   open: boolean
@@ -56,10 +57,6 @@ const EventDetail = ({ open, detail, cancel }: IProps) => {
                 <div className={styles.value}>{detail?.issue?.message}</div>
               </div>
             </div>
-            {/* <div className={styles.item}>
-              <div className={styles.label}>创建时间：</div>
-              <div className={styles.value}>2023-11-24 20:33</div>
-            </div> */}
           </div>
           <div className={styles.footer}>
             <div className={styles.footer_title}>相关资源：</div>

diff --git a/ui/src/pages/insightDetail/components/execptionDrawer/index.tsx b/ui/src/pages/insightDetail/components/execptionDrawer/index.tsx
@@ -189,7 +189,7 @@ const ExecptionDrawer = ({ open, onClose, execptionList }: IProps) => {
                 <div className={styles.value}>{item?.locators?.length}</div>
               </div>
             </div>
-            <div className={`${styles.item} ${styles.rowItem}`}>
+            <div className={`${styles.row_item}`}>
               <div className={styles.label}>描述信息：</div>
               <div className={styles.value}>{item?.issue?.message || '--'}</div>
             </div>

diff --git a/ui/src/pages/insightDetail/components/execptionDrawer/style.module.less b/ui/src/pages/insightDetail/components/execptionDrawer/style.module.less
@@ -68,6 +68,19 @@
       }
     }
 
+    .row_item {
+      display: flex;
+      font-weight: 400;
+
+      .label {
+        color: rgb(0 10 26 / 45%);
+      }
+
+      .value {
+        flex: 1;
+      }
+    }
+
     .header {
       display: flex;
       margin-top: 16px;
@@ -78,17 +91,16 @@
         display: flex;
         align-items: center;
         margin-right: 24px;
+        font-weight: 400;
 
         .label {
           font-size: 14px;
-          font-weight: 400;
           line-height: 24px;
           color: rgb(0 10 26 / 45%);
         }
 
         .value {
           font-size: 14px;
-          font-weight: 400;
           color: rgb(0 10 26 / 89%);
         }
       }
@@ -98,8 +110,5 @@
       }
     }
 
-    .rowItem {
-      display: flex;
-    }
   }
 }
diff --git a/ui/src/pages/insightDetail/components/topologyMap/index.tsx b/ui/src/pages/insightDetail/components/topologyMap/index.tsx
@@ -440,13 +440,13 @@ const TopologyMap = ({
 
   return (
     <div
-      className={styles.g6Topology}
+      className={styles.g6_topology}
       style={{ height: isResource ? 450 : 400 }}
     >
       {topologyLoading ? (
         <Loading />
       ) : (
-        <div ref={ref} id="overviewContainer" className={styles.overviewG6}>
+        <div ref={ref} id="overviewContainer" className={styles.g6_overview}>
           {tooltipopen ? (
             <OverviewTooltip
               type={type as string}

diff --git a/ui/src/pages/insightDetail/components/topologyMap/style.module.less b/ui/src/pages/insightDetail/components/topologyMap/style.module.less
@@ -1,4 +1,4 @@
-.g6Topology {
+.g6_topology {
   display: flex;
   flex-direction: column;
   background-color: #f7faff;
@@ -13,7 +13,7 @@
     color: rgb(0 10 26 / 68%);
   }
 
-  .overviewG6 {
+  .g6_overview {
     position: relative;
     flex: 1;
     // padding: 10px 20px;

diff --git a/ui/src/pages/search/styles.module.less b/ui/src/pages/search/styles.module.less
@@ -34,16 +34,17 @@
 
     .examples {
       width: 800px;
+      height: 250px;
       padding: 15px;
       margin-top: 20px;
       border-radius: 8px;
 
       .keywords,
       .sql {
         display: flex;
-        flex-flow: row wrap;
         margin-top: 7px;
         color: #000;
+        flex-flow: row wrap;
         justify-content: center;
 
         .karbour_tag {