fix: 均衡历史列表样式重构 & 周期均衡场景化 & 立即均衡默认带入周期均衡参数

km-console/packages/layout-clusters-fe/src/pages/Jobs/RebalancePlan.tsx

@@ -237,12 +237,12 @@ const RebalancePlan = (props: PropsType) => {
           <Descriptions.Item labelStyle={{ width: '100px' }} label="迁移副本数">
             {data?.replicas || '-'}
           </Descriptions.Item>
-          <Descriptions.Item label="均衡阈值">
+          <Descriptions.Item label="均衡区间">
             {data?.clusterBalanceIntervalList
               ? data?.clusterBalanceIntervalList?.map((item: any) => {
                   return (
-                    <Tag style={{ padding: '4px 8px', backgroundColor: 'rgba(33,37,41,0.08)', marginRight: '4px' }} key={item?.priority}>
+                    <Tag style={{ padding: '4px 5px', backgroundColor: 'rgba(33,37,41,0.08)', marginRight: '4px' }} key={item?.priority}>
-                      {item.type + ':' + item.intervalPercent + '%'}
+                      {item.type?.slice(0, 1).toUpperCase() + item.type?.slice(1) + ':' + ' ±' + item.intervalPercent + '%'}
                     </Tag>
                   );
                 })

km-console/packages/layout-clusters-fe/src/pages/LoadRebalance/BalanceDrawer.tsx

@@ -168,7 +168,6 @@ const BalanceDrawer: React.FC<PropsType> = ({ onClose, visible, isCycle = false,
 
   const init = () => {
     if (formData && Object.keys(formData).length > 0) {
-      console.log(formData, '有FormData');
       const tableData = formData?.clusterBalanceIntervalList?.map((item: any) => {
         const finfIndex = BalancedDimensions.findIndex((item1) => item1?.value === item?.type);
         return {
@@ -201,7 +200,6 @@ const BalanceDrawer: React.FC<PropsType> = ({ onClose, visible, isCycle = false,
           priority: index + 1,
         };
       });
-      console.log(res, '表单回显立即均衡');
       setTableData(res);
       setDimension(['disk', 'bytesIn', 'bytesOut']);
       setNodeTargetKeys([]);
@@ -220,14 +218,12 @@ const BalanceDrawer: React.FC<PropsType> = ({ onClose, visible, isCycle = false,
           throttleUnitB: values?.throttleUnitM * 1024 * 1024,
         };
 
-        if (!isCycle) {
+        if (values?.priority === 'throughput') {
-          if (values?.priority === 'throughput') {
+          params.parallelNum = 0;
-            params.parallelNum = 0;
+          params.executionStrategy = 1;
-            params.executionStrategy = 1;
+        } else if (values?.priority === 'stability') {
-          } else if (values?.priority === 'stability') {
+          params.parallelNum = 1;
-            params.parallelNum = 1;
+          params.executionStrategy = 2;
-            params.executionStrategy = 2;
-          }
         }
 
         if (formData?.jobId) {
@@ -382,6 +378,8 @@ const BalanceDrawer: React.FC<PropsType> = ({ onClose, visible, isCycle = false,
 
   const drawerClose = (isArg?: boolean) => {
     isArg ? onClose(isArg) : onClose();
+    setParallelNum(0);
+    setExecutionStrategy(1);
     form.resetFields();
   };
 
@@ -540,17 +538,38 @@ const BalanceDrawer: React.FC<PropsType> = ({ onClose, visible, isCycle = false,
           </Form.Item>
 
           <h6 className="form-title">运行配置</h6>
-          {!isCycle && (
+          {isCycle && (
-            <Form.Item label="" name="priority" rules={[{ required: true, message: 'Principle 不能为空' }]} initialValue="throughput">
+            <Form.Item
-              <Radio.Group onChange={priorityChange}>
+              className="schedule-cron"
-                <Radio value="throughput">吞吐量优先</Radio>
+              name="scheduleCron"
-                <Radio value="stability">稳定性优先</Radio>
+              label="任务周期"
-                <Radio value="custom">自定义</Radio>
+              rules={[
-              </Radio.Group>
+                {
+                  required: true,
+                  message: `请输入!`,
+                },
+                {
+                  validator: (_, value) => {
+                    const valArr = value.split(' ');
+                    if (valArr[1] === '*' || valArr[2] === '*') {
+                      return Promise.reject(new Error('任务周期必须指定分钟、小时'));
+                    }
+                    return Promise.resolve();
+                  },
+                },
+              ]}
+            >
+              <CronInput />
             </Form.Item>
           )}
-
+          <Form.Item label="" name="priority" rules={[{ required: true, message: 'Principle 不能为空' }]} initialValue="throughput">
-          {!isCycle && (
+            <Radio.Group onChange={priorityChange}>
+              <Radio value="throughput">吞吐量优先</Radio>
+              <Radio value="stability">稳定性优先</Radio>
+              <Radio value="custom">自定义</Radio>
+            </Radio.Group>
+          </Form.Item>
+          {
             <Form.Item dependencies={['priority']} style={{ marginBottom: 0 }}>
               {({ getFieldValue }) =>
                 getFieldValue('priority') === 'custom' ? (
@@ -600,9 +619,9 @@ const BalanceDrawer: React.FC<PropsType> = ({ onClose, visible, isCycle = false,
                 ) : null
               }
             </Form.Item>
-          )}
+          }
 
-          {isCycle && (
+          {/* {isCycle && (
             <Form.Item
               name="parallelNum"
               label={
@@ -622,9 +641,9 @@ const BalanceDrawer: React.FC<PropsType> = ({ onClose, visible, isCycle = false,
             >
               <InputNumber min={0} max={999} placeholder="请输入任务并行度" style={{ width: '100%' }} />
             </Form.Item>
-          )}
+          )} */}
 
-          {isCycle && (
+          {/* {isCycle && (
             <Form.Item
               className="schedule-cron"
               name="scheduleCron"
@@ -647,9 +666,9 @@ const BalanceDrawer: React.FC<PropsType> = ({ onClose, visible, isCycle = false,
             >
               <CronInput />
             </Form.Item>
-          )}
+          )} */}
 
-          {isCycle && (
+          {/* {isCycle && (
             <Form.Item
               name="executionStrategy"
               label={
@@ -672,7 +691,7 @@ const BalanceDrawer: React.FC<PropsType> = ({ onClose, visible, isCycle = false,
                 <Radio value={2}>优先最小副本</Radio>
               </Radio.Group>
             </Form.Item>
-          )}
+          )} */}
 
           <Form.Item
             name="throttleUnitM"

km-console/packages/layout-clusters-fe/src/pages/LoadRebalance/HistoryDrawer.tsx

@@ -45,24 +45,57 @@ const HistoryDrawer: React.FC<PropsType> = ({ onClose, visible }) => {
     //   }
     // },
     {
-      title: 'Disk均衡率',
+      title: (
+        <span>
+          Disk<span style={{ fontSize: '12px', color: '#74788D' }}>{'(已均衡丨未均衡)'}</span>
+        </span>
+      ),
       dataIndex: 'disk',
       render: (text: any, row: any) => {
-        return `${row?.sub?.disk?.successNu} (已均衡) / ${row?.sub?.disk?.failedNu} (未均衡)`;
+        // return `${row?.sub?.disk?.successNu} 丨 ${row?.sub?.disk?.failedNu}`;
+        return (
+          <div className="balance-history-column">
+            <span>{row?.sub?.disk?.successNu}</span>
+            <span>丨</span>
+            <span>{row?.sub?.disk?.failedNu}</span>
+          </div>
+        );
       },
     },
     {
-      title: 'BytesIn均衡率',
+      title: (
+        <span>
+          BytesIn<span style={{ fontSize: '12px', color: '#74788D' }}>{'(已均衡丨未均衡)'}</span>
+        </span>
+      ),
       dataIndex: 'bytesIn',
       render: (text: any, row: any) => {
-        return `${row?.sub?.bytesIn?.successNu} (已均衡) / ${row?.sub?.bytesIn?.failedNu} (未均衡)`;
+        // return `${row?.sub?.bytesIn?.successNu} 丨 ${row?.sub?.bytesIn?.failedNu}`;
+        return (
+          <div className="balance-history-column">
+            <span>{row?.sub?.bytesIn?.successNu}</span>
+            <span>丨</span>
+            <span>{row?.sub?.bytesIn?.failedNu}</span>
+          </div>
+        );
       },
     },
     {
-      title: 'BytesOut均衡率',
+      title: (
+        <span>
+          BytesOut<span style={{ fontSize: '12px', color: '#74788D' }}>{'(已均衡丨未均衡)'}</span>
+        </span>
+      ),
       dataIndex: 'bytesOut',
       render: (text: any, row: any) => {
-        return `${row?.sub?.bytesOut?.successNu} (已均衡) / ${row?.sub?.bytesOut?.failedNu} (未均衡)`;
+        // return `${row?.sub?.bytesOut?.successNu} 丨 ${row?.sub?.bytesOut?.failedNu}`;
+        return (
+          <div className="balance-history-column">
+            <span>{row?.sub?.bytesOut?.successNu}</span>
+            <span>丨</span>
+            <span>{row?.sub?.bytesOut?.failedNu}</span>
+          </div>
+        );
       },
     },
     {
@@ -124,7 +157,7 @@ const HistoryDrawer: React.FC<PropsType> = ({ onClose, visible }) => {
   };
 
   const onTableChange = (curPagination: any) => {
-    getList({ page: curPagination.current, size: curPagination.pageSize });
+    getList({ pageNo: curPagination.current, pageSize: curPagination.pageSize });
   };
 
   return (

km-console/packages/layout-clusters-fe/src/pages/LoadRebalance/index.less

@@ -143,3 +143,19 @@
   //     margin: 0 !important;
   // }
 }
+
+.balance-history-column{
+  display: flex;
+  &>span:nth-child(1){
+    width: 20px;
+  }
+  &>span:nth-child(2){
+    color: #74788d; 
+    font-size: 12px;
+    opacity: 0.3;
+  }
+  &>span:last-child{
+    width: 20px;
+    margin-left: 8px;
+  }
+}

km-console/packages/layout-clusters-fe/src/pages/LoadRebalance/index.tsx

@@ -8,6 +8,7 @@ import api from '../../api';
 import './index.less';
 import LoadRebalanceCardBar from '@src/components/CardBar/LoadRebalanceCardBar';
 import { BalanceFilter } from './BalanceFilter';
+import { ClustersPermissionMap } from '../CommonConfig';
 
 const Balance_Status_OPTIONS = [
   {
@@ -288,21 +289,17 @@ const LoadBalance: React.FC = (props: any) => {
     setVisible(false);
   };
 
-  const balanceClick = (val: boolean = false) => {
+  const balanceClick = (val: boolean) => {
-    if (val) {
+    Utils.request(api.getBalanceForm(global?.clusterInfo?.id), {
-      Utils.request(api.getBalanceForm(global?.clusterInfo?.id), {
+      method: 'GET',
-        method: 'GET',
+    })
+      .then((res: any) => {
+        const dataDe = res || {};
+        setCircleFormData(dataDe);
       })
-        .then((res: any) => {
+      .catch(() => {
-          const dataDe = res || {};
+        setCircleFormData(null);
-          setCircleFormData(dataDe);
+      });
-        })
-        .catch(() => {
-          setCircleFormData(null);
-        });
-    } else {
-      setCircleFormData(null);
-    }
     setIsCycle(val);
     setVisible(true);
   };
@@ -365,19 +362,23 @@ const LoadBalance: React.FC = (props: any) => {
                   value: searchValue,
                   onChange: setSearchValue,
                   placeholder: '请输入 Host',
-                  style: { width: '210px' },
+                  style: { width: '248px' },
                   maxLength: 128,
                 }}
               />
               <Button type="primary" ghost onClick={() => setPlanVisible(true)}>
                 均衡历史
               </Button>
-              <Button type="primary" ghost onClick={() => balanceClick(true)}>
+              {global.hasPermission(ClustersPermissionMap.REBALANCE_CYCLE) && (
-                周期均衡
+                <Button type="primary" ghost onClick={() => balanceClick(true)}>
-              </Button>
+                  周期均衡
-              <Button type="primary" onClick={() => balanceClick(false)}>
+                </Button>
-                立即均衡
+              )}
-              </Button>
+              {global.hasPermission(ClustersPermissionMap.REBALANCE_IMMEDIATE) && (
+                <Button type="primary" onClick={() => balanceClick(false)}>
+                  立即均衡
+                </Button>
+              )}
             </div>
           </div>
           {filterList && filterList.length > 0 && (