refactor(ui): optimize some experience issues again

ui/package.json

@@ -49,14 +49,15 @@
     "react-redux": "^9.1.0",
     "react-router-dom": "^6.10.0",
     "react-scripts": "5.0.1",
+    "react-window": "^1.8.10",
     "redux-logger": "^3.0.6",
     "redux-persist": "^6.0.0",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
     "release": "standard-version",
-    "start": "GENERATE_SOURCEMAP=false HTTPS=true craco start",
+    "start": "GENERATE_SOURCEMAP=false PORT=8080 HTTPS=true craco start",
     "build": "GENERATE_SOURCEMAP=false PUBLIC_URL=/public/ craco build",
     "lint:prettier": "prettier --write src\"/**/*.+(js|ts|tsx|jsx|json|md|json)\"",
     "lint:style": "stylelint src\"/**/*.+(css|scss|less|stylus|sass|postcss)\" --fix",

ui/src/components/layout/index.tsx

@@ -192,9 +192,7 @@ const LayoutPage = () => {
             </div>
             <h4 className={styles.text}>Karpor</h4>
           </div>
-          <div>
-            <Divider type="vertical" />
-          </div>
+          <Divider type="vertical" />
           <Menu
             style={{ flex: 1, border: 'none', fontSize: 13 }}
             mode="horizontal"

ui/src/components/sqlSearch/index.tsx

@@ -414,7 +414,7 @@ const SqlSearch = memo(({ sqlEditorValue, handleSearch }: SqlSearchIProps) => {
   function handleClick() {
     const inputValue = getContent()
     if (!inputValue) {
-      message.warning('请输入有效sql语句')
+      message.warning(t('PleaseEnterValidSQLStatement'))
       return
     }
     cacheHistory(inputValue)

ui/src/components/tabs/index.tsx

@@ -1,8 +1,9 @@
 import React, { memo } from 'react'
 import classNames from 'classnames'
-import styles from './style.module.less'
-import { getDataType } from '@/utils/tools'
 import { useTranslation } from 'react-i18next'
+import { getDataType } from '@/utils/tools'
+
+import styles from './style.module.less'
 
 type Props = {
   current: string
@@ -26,34 +27,32 @@ const KarporTabs = ({
   const { t } = useTranslation()
   return (
     <div className={styles.tab_container} style={boxStyle}>
-      {list?.map((item, index) => {
-        return (
+      {list?.map((item, index) => (
+        <div
+          className={styles.item}
+          key={item.value as React.Key}
+          onClick={() => {
+            !item?.disabled && onChange(item.value, index)
+          }}
+          style={{
+            ...itemStyle,
+            ...(item?.disabled ? { color: '#f1f1f1' } : {}),
+          }}
+        >
           <div
-            className={styles.item}
-            key={item.value as React.Key}
-            onClick={() => {
-              !item?.disabled && onChange(item.value, index)
-            }}
-            style={{
-              ...itemStyle,
-              ...(item?.disabled ? { color: '#f1f1f1' } : {}),
-            }}
+            className={classNames(styles.normal, {
+              [styles.active]: current === item.value,
+            })}
+            style={
+              item?.disabled ? { color: '#999', cursor: 'not-allowed' } : {}
+            }
           >
-            <div
-              className={classNames(styles.normal, {
-                [styles.active]: current === item.value,
-              })}
-              style={
-                item?.disabled ? { color: '#999', cursor: 'not-allowed' } : {}
-              }
-            >
-              {getDataType(item?.label) === 'String'
-                ? t(item?.label as string)
-                : item?.label}
-            </div>
+            {getDataType(item?.label) === 'String'
+              ? t(item?.label as string)
+              : item?.label}
           </div>
-        )
-      })}
+        </div>
+      ))}
     </div>
   )
 }

ui/src/components/yaml/index.tsx

@@ -1,13 +1,13 @@
 import React, { useEffect, useRef } from 'react'
 import type { LegacyRef } from 'react'
+import { Button, message } from 'antd'
+import { useTranslation } from 'react-i18next'
 import hljs from 'highlight.js'
 import yaml from 'js-yaml'
 import 'highlight.js/styles/lightfair.css'
-import { yaml2json } from '../../utils/tools'
+import { yaml2json } from '@/utils/tools'
 
 import styles from './styles.module.less'
-import { Button, message } from 'antd'
-import { useTranslation } from 'react-i18next'
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 hljs.registerLanguage('yaml', require('highlight.js/lib/languages/yaml'))

ui/src/locales/de.json

@@ -109,5 +109,6 @@
   "TotalResourceGroupRules": "Gesamte Ressourcegruppen-Regeln",
   "TotalResources": "Alle Ressourcen",
   "ClusterCount": "Anzahl der Kluster",
-  "UnableCreateResourceGroupInReadOnly": "Im Nur-Lesen-Modus können keine Ressourcengruppen-Regeln erstellt werden."
+  "UnableCreateResourceGroupInReadOnly": "Im Nur-Lesen-Modus können keine Ressourcengruppen-Regeln erstellt werden.",
+  "PleaseEnterValidSQLStatement": "Bitte geben Sie eine gültige SQL-Anweisung ein."
 }

ui/src/locales/en.json

@@ -109,5 +109,6 @@
   "TotalResourceGroupRules": "Total ResourceGroupRules",
   "TotalResources": "Total Resources",
   "ClusterCount": "Cluster Count",
-  "UnableCreateResourceGroupInReadOnly": "Unable to create resource group rules in read-only mode"
+  "UnableCreateResourceGroupInReadOnly": "Unable to create resource group rules in read-only mode",
+  "PleaseEnterValidSQLStatement": "Please enter a valid SQL statement"
 }

ui/src/locales/pt.json

@@ -109,5 +109,6 @@
   "TotalResourceGroupRules": "Regras de Recursos Totais do Grupo",
   "TotalResources": "Recursos totais",
   "ClusterCount": "Número de Clusters",
-  "UnableCreateResourceGroupInReadOnly": "No modo de somente leitura, não é possível criar regras de grupo de recursos."
+  "UnableCreateResourceGroupInReadOnly": "No modo de somente leitura, não é possível criar regras de grupo de recursos.",
+  "PleaseEnterValidSQLStatement": "Por favor, insira uma declaração SQL válida."
 }

ui/src/locales/zh.json

@@ -109,5 +109,6 @@
   "TotalResourceGroupRules": "资源组规则数量",
   "TotalResources": "资源总数",
   "ClusterCount": "集群数量",
-  "UnableCreateResourceGroupInReadOnly": "只读模式下不能创建资源组规则"
+  "UnableCreateResourceGroupInReadOnly": "只读模式下不能创建资源组规则",
+  "PleaseEnterValidSQLStatement": "请输入有效SQL语句"
 }

ui/src/pages/cluster/add/index.tsx

@@ -14,12 +14,12 @@ import styles from './styles.module.less'
 const { TextArea } = Input
 
 const RegisterCluster = () => {
-  const { isReadOnlyMode } = useSelector((state: any) => state.globalSlice)
+  const { t } = useTranslation()
   const [form] = Form.useForm()
   const navigate = useNavigate()
+  const { isReadOnlyMode } = useSelector((state: any) => state.globalSlice)
   const [yamlContent, setYamlContent] = useState('')
   const [loading, setLoading] = useState(false)
-  const { t } = useTranslation()
 
   async function onFinish(values: any) {
     if (isReadOnlyMode) {
@@ -50,8 +50,8 @@ const RegisterCluster = () => {
       message.error(
         validateResponse?.message || t('KubeConfigDoesNotMeetTheRequirements'),
       )
-      setLoading(false)
     }
+    setLoading(false)
   }
 
   function goBack() {
@@ -96,7 +96,7 @@ const RegisterCluster = () => {
     <div className={styles.container}>
       <div className={styles.header}>
         <ArrowLeftOutlined style={{ marginRight: 10 }} onClick={goBack} />
-        {t('RegisterCluster')}
+        <h4 className={styles.page_title}>{t('RegisterCluster')}</h4>
       </div>
       <div className={styles.content}>
         <Form

ui/src/pages/cluster/add/styles.module.less

@@ -6,6 +6,12 @@
 
   .header {
     margin-bottom: 16px;
+    display: flex;
+    align-items: center;
+
+    .page_title {
+      margin: 0
+    }
   }
 
   .content {

ui/src/pages/cluster/certificate/index.tsx

@@ -1,8 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
 import { ArrowLeftOutlined, UploadOutlined } from '@ant-design/icons'
-import { Form, Input, Space, Button, Upload, Radio, message } from 'antd'
-import type { RadioChangeEvent } from 'antd'
+import { Form, Space, Button, Upload, message } from 'antd'
 import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer-continued'
 import { useTranslation } from 'react-i18next'
 import axios from 'axios'
@@ -15,57 +14,13 @@ import { HOST } from '@/utils/request'
 
 import styles from './styles.module.less'
 
-const { TextArea } = Input
-
-type UploadConfigProps = {
-  onChange: (val) => void
-  fileList: any
-}
-
-export const UploadConfig = (props: UploadConfigProps) => {
-  const [radioValue, setRadioValue] = useState('file')
-
-  const onRadioChange = (e: RadioChangeEvent) => {
-    setRadioValue(e.target.value)
-    props?.onChange({
-      type: e.target.value,
-      value: '',
-    })
-  }
-
-  const handleTextAreaChange = event => {
-    props?.onChange({
-      ...props?.fileList,
-      value: event.target.value,
-    })
-  }
-
-  return (
-    <div>
-      <div style={{ marginBottom: 15 }}>
-        <Radio.Group onChange={onRadioChange} value={radioValue}>
-          <Radio value="file">文件配置</Radio>
-          <Radio value="yaml">输入yaml</Radio>
-        </Radio.Group>
-      </div>
-      {radioValue === 'file' ? (
-        <Upload name="logo" action="/upload.do">
-          <Button icon={<UploadOutlined />}>上传配置文件</Button>
-        </Upload>
-      ) : (
-        <TextArea onChange={handleTextAreaChange} />
-      )}
-    </div>
-  )
-}
-
 const ClusterCertificate = () => {
   const { t } = useTranslation()
   const [form] = Form.useForm()
   const navigate = useNavigate()
-  const { isReadOnlyMode } = useSelector((state: any) => state.globalSlice)
   const location = useLocation()
   const { cluster } = queryString.parse(location?.search)
+  const { isReadOnlyMode } = useSelector((state: any) => state.globalSlice)
   const [newYamlContent, setNewYamlContent] = useState<any>()
   const [loading, setLoading] = useState(false)
   const [lastYamlContent, setLastYamlContent] = useState('')
@@ -88,7 +43,7 @@ const ClusterCertificate = () => {
       setLastYamlContent(response?.data)
       setLastYamlContentJson(yaml2json(response?.data)?.data)
     } else {
-      message.error(response?.message || '请求失败，请重试')
+      message.error(response?.message || t('RequestFailedAndTry'))
     }
   }
 
@@ -214,7 +169,7 @@ const ClusterCertificate = () => {
         <div className={styles.header_back} onClick={goBack}>
           <ArrowLeftOutlined style={{ fontSize: 18 }} />
         </div>
-        {t('RotateCertificate')}
+        <h4 className={styles.page_title}>{t('RotateCertificate')}</h4>
       </div>
       <div className={styles.content}>
         <Form

ui/src/pages/cluster/certificate/styles.module.less

@@ -14,6 +14,10 @@
       padding: 5px 10px 5px 0;
       cursor: pointer;
     }
+
+    .page_title {
+      margin: 0;
+    }
   }
 
   .content {

ui/src/pages/cluster/components/clusterCard/index.tsx

@@ -40,12 +40,12 @@ const ClusterCard = (props: IProps) => {
           <div className={styles.top}>
             <div className={styles.name}>
               {item?.spec?.displayName ? (
-                <span>
+                <>
                   {item?.spec?.displayName}
                   <span style={{ color: '#808080' }}>
                     （{item?.metadata?.name}）
                   </span>
-                </span>
+                </>
               ) : (
                 <span>{item?.metadata?.name}</span>
               )}

ui/src/pages/cluster/components/editPopForm/index.tsx

@@ -64,7 +64,7 @@ export const EditForm = ({
         >
           <TextArea autoSize={{ minRows: 3 }} />
         </Form.Item>
-        <Form.Item style={{ textAlign: 'right' }}>
+        <Form.Item style={{ textAlign: 'right', marginBottom: 0 }}>
           <Space>
             <Button htmlType="button" onClick={onCancel}>
               {t('Cancel')}

ui/src/pages/cluster/index.tsx

@@ -11,6 +11,7 @@ import {
 import { useSelector } from 'react-redux'
 import { useNavigate } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
+import classNames from 'classnames'
 import KarporTabs from '@/components/tabs'
 import Loading from '@/components/loading'
 import ClusterCard from './components/clusterCard'
@@ -22,6 +23,7 @@ import styles from './styles.module.less'
 
 const Cluster = () => {
   const navigate = useNavigate()
+  const { t } = useTranslation()
   const { isReadOnlyMode } = useSelector((state: any) => state.globalSlice)
   const [pageData, setPageData] = useState<any>([])
   const [showPageData, setShowPageData] = useState<any>([])
@@ -31,7 +33,6 @@ const Cluster = () => {
     orderBy: 'name',
     isAsc: true,
   })
-  const { t } = useTranslation()
   const [searchValue, setSearchValue] = useState('')
   const [lastDetail, setLastDetail] = useState<any>()
   const [scale, setScale] = useState<any>(1)
@@ -64,7 +65,7 @@ const Cluster = () => {
     if (response?.success) {
       setSummary(response?.data)
     } else {
-      message.error(response?.message || '请求失败，请重试')
+      message.error(response?.message || t('RequestFailedAndTry'))
     }
     setloading(false)
   }
@@ -83,7 +84,7 @@ const Cluster = () => {
     if (response?.success) {
       setPageData(response?.data?.items)
     } else {
-      message.error(response?.message || '请求失败，请重试')
+      message.error(response?.message || t('RequestFailedAndTry'))
     }
   }
 
@@ -292,7 +293,7 @@ const Cluster = () => {
             style={{ transform: `scale(${scale})` }}
           >
             <div className={styles.left}>
-              <div className={styles.nodate}>{t('EmptyCluster')}</div>
+              <div className={styles.nodata}>{t('EmptyCluster')}</div>
               <div className={styles.tip}>
                 {t('ClusterRequiresKubeConfigConfigurationFileAccess')}
               </div>
@@ -317,13 +318,16 @@ const Cluster = () => {
             />
           </div>
           <div
-            className={`${styles.page_content} ${styles[`page_content_${triangleLeftOffestIndex}`]}`}
+            className={classNames(
+              styles.page_content,
+              styles[`page_content_${triangleLeftOffestIndex}`],
+            )}
           >
             <div className={styles.tool_bar}>
               <Input
                 value={searchValue}
                 onChange={event => setSearchValue(event.target.value)}
-                style={{ width: 160, marginRight: 16 }}
+                style={{ width: 300, marginRight: 16 }}
                 placeholder={t('PleaseEnterKeywords')}
                 allowClear
                 suffix={<SearchOutlined />}