Optimize the style of status detail (#284)

* Add status detail * Limit scaling and deletion operations when the cluster is not in the running state
oceanbase · Apr 3, 2024 · d383559 · d383559
1 parent 2021b23
commit d383559
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 7 deletions.
diff --git a/ui/src/pages/Cluster/ClusterList.tsx b/ui/src/pages/Cluster/ClusterList.tsx
@@ -166,7 +166,16 @@ const columns: ColumnsType<DataType> = [
     render: (value, record) => (
       <Tag color={COLOR_MAP.get(value)}>
         {' '}
-        {value === 'operating' ? `${value}/${record.statusDetail}` : value}{' '}
+        {value === 'operating' ? (
+          <Text
+            style={{ width: 110, color: '#d48806',fontSize:12 }}
+            ellipsis={{ tooltip: `${value}/${record.statusDetail}` }}
+          >
+            {value}/{record.statusDetail}
+          </Text>
+        ) : (
+          value
+        )}{' '}
       </Tag>
     ),
   },

diff --git a/ui/src/pages/Cluster/Detail/Overview/BasicInfo.tsx b/ui/src/pages/Cluster/Detail/Overview/BasicInfo.tsx
@@ -1,10 +1,11 @@
 import { COLOR_MAP,MODE_MAP } from '@/constants';
 import { intl } from '@/utils/intl';
-import { Card,Col,Descriptions,Switch,Tag } from 'antd';
+import { Card,Col,Descriptions,Switch,Tag,Typography } from 'antd';
 import { useState } from 'react';
 
 import styles from './index.less';
 
+const { Text } = Typography;
 export default function BasicInfo({
   name,
   namespace,
@@ -126,7 +127,18 @@ export default function BasicInfo({
               defaultMessage: '集群状态',
             })}
           >
-            <Tag color={COLOR_MAP.get(status)}>{status === 'operating' ? `${status}/${statusDetail}` : status}</Tag>
+            <Tag color={COLOR_MAP.get(status)}>
+              {status === 'operating' ? (
+                <Text
+                  style={{ width: 120, color: '#d48806', fontSize: 12 }}
+                  ellipsis={{ tooltip: `${status}/${statusDetail}` }}
+                >
+                  {status}/{statusDetail}
+                </Text>
+              ) : (
+                status
+              )}
+            </Tag>
           </Descriptions.Item>
           <Descriptions.Item
             span={2}

diff --git a/ui/src/pages/Cluster/Detail/Overview/ZoneTable.tsx b/ui/src/pages/Cluster/Detail/Overview/ZoneTable.tsx
@@ -91,7 +91,7 @@ export default function ZoneTable({
                   clickScale(record.zone);
                   setChooseServerNum(record.replicas);
                 }}
-                disabled={clusterStatus === 'failed'}
+                disabled={clusterStatus !== 'running'}
                 type="link"
               >
                 {intl.formatMessage({
@@ -100,7 +100,7 @@ export default function ZoneTable({
                 })}
               </Button>
               <Button
-                style={(clusterStatus !== 'failed' && zones.length > 2) ? { color: '#ff4b4b' } : {}}
+                style={(clusterStatus === 'running' && zones.length > 2) ? { color: '#ff4b4b' } : {}}
                 onClick={() => {
                   showDeleteConfirm({
                     onOk: () => remove(record.zone),
@@ -110,7 +110,7 @@ export default function ZoneTable({
                     }),
                   });
                 }}
-                disabled={clusterStatus === 'failed' || zones.length <= 2}
+                disabled={clusterStatus !== 'running' || zones.length <= 2}
                 type="link"
               >
                 {intl.formatMessage({
@@ -131,7 +131,6 @@ export default function ZoneTable({
     typeRef.current = 'scaleServer';
     setVisible(true);
   };
-  //删除的ns和name是集群的
   const handleDelete = async (zoneName: string) => {
     const res = await deleteObzoneReportWrap({
       ns,