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

2025-12-24 11:52:08 +08:00 · 2022-09-13 14:30:03 +08:00
parent 59c042ad67
commit 83f7f5468b
5 changed files with 126 additions and 57 deletions
--- a/km-console/packages/layout-clusters-fe/src/pages/Jobs/RebalancePlan.tsx
+++ b/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}>
-                      {item.type + ':' + item.intervalPercent + '%'}
+                    <Tag style={{ padding: '4px 5px', backgroundColor: 'rgba(33,37,41,0.08)', marginRight: '4px' }} key={item?.priority}>
+                      {item.type?.slice(0, 1).toUpperCase() + item.type?.slice(1) + ':' + ' ±' + item.intervalPercent + '%'}
                    </Tag>
                  );
                })
--- a/km-console/packages/layout-clusters-fe/src/pages/LoadRebalance/BalanceDrawer.tsx
+++ b/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') {
-            params.parallelNum = 0;
-            params.executionStrategy = 1;
-          } else if (values?.priority === 'stability') {
-            params.parallelNum = 1;
-            params.executionStrategy = 2;
-          }
+        if (values?.priority === 'throughput') {
+          params.parallelNum = 0;
+          params.executionStrategy = 1;
+        } else if (values?.priority === 'stability') {
+          params.parallelNum = 1;
+          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 && (
-            <Form.Item label="" name="priority" rules={[{ required: true, message: 'Principle 不能为空' }]} initialValue="throughput">
-              <Radio.Group onChange={priorityChange}>
-                <Radio value="throughput">吞吐量优先</Radio>
-                <Radio value="stability">稳定性优先</Radio>
-                <Radio value="custom">自定义</Radio>
-              </Radio.Group>
+          {isCycle && (
+            <Form.Item
+              className="schedule-cron"
+              name="scheduleCron"
+              label="任务周期"
+              rules={[
+                {
+                  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>
          )}
-
-          {!isCycle && (
+          <Form.Item label="" name="priority" rules={[{ required: true, message: 'Principle 不能为空' }]} initialValue="throughput">
+            <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"
--- a/km-console/packages/layout-clusters-fe/src/pages/LoadRebalance/HistoryDrawer.tsx
+++ b/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 (
--- a/km-console/packages/layout-clusters-fe/src/pages/LoadRebalance/index.less
+++ b/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;
+  }
+}
--- a/km-console/packages/layout-clusters-fe/src/pages/LoadRebalance/index.tsx
+++ b/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) => {
-    if (val) {
-      Utils.request(api.getBalanceForm(global?.clusterInfo?.id), {
-        method: 'GET',
+  const balanceClick = (val: boolean) => {
+    Utils.request(api.getBalanceForm(global?.clusterInfo?.id), {
+      method: 'GET',
+    })
+      .then((res: any) => {
+        const dataDe = res || {};
+        setCircleFormData(dataDe);
      })
-        .then((res: any) => {
-          const dataDe = res || {};
-          setCircleFormData(dataDe);
-        })
-        .catch(() => {
-          setCircleFormData(null);
-        });
-    } else {
-      setCircleFormData(null);
-    }
+      .catch(() => {
+        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)}>
-                周期均衡
-              </Button>
-              <Button type="primary" onClick={() => balanceClick(false)}>
-                立即均衡
-              </Button>
+              {global.hasPermission(ClustersPermissionMap.REBALANCE_CYCLE) && (
+                <Button type="primary" ghost onClick={() => balanceClick(true)}>
+                  周期均衡
+                </Button>
+              )}
+              {global.hasPermission(ClustersPermissionMap.REBALANCE_IMMEDIATE) && (
+                <Button type="primary" onClick={() => balanceClick(false)}>
+                  立即均衡
+                </Button>
+              )}
            </div>
          </div>
          {filterList && filterList.length > 0 && (