export function ClusterPlanContent()

in frontend/src/routes/space/new-cluster/steps/cluster-plan/cluster-plan.tsx [54:158]
101 lines of code
15 McCabe index (conditional complexity)

export function ClusterPlanContent(props: any) {
    const { reqInfo } = useContext(NewSpaceInfoContext);
    const [visible, setVisible] = useState(false);
    const [confirmLoading, setConfirmLoading] = useState(false);
    const [selectedRowKeys, setSelectedRowKeys] = useState<any[]>([]);
    const [feChecked, setFeChecked] = useState<number[]>([]);
    const [feData, setFeData] = useState<any[]>([]);
    const [beChecked, setBeChecked] = useState<number[]>([]);
    const [beData, setBeData] = useState<any[]>([]);
    const [roleType, setRoleType] = useState<DorisNodeTypeEnum>(DorisNodeTypeEnum.FE);
    const [mixMode, setMixMode] = useState(false);
    const [modal, setModal] = useRecoilState(modalState);
    const processID = useRecoilValue(processId);
    const { data, run: runGetClusterNodes, loading } = useAsync<any[]>({ data: [] });
    const [modalAllData, setModalAllData] = useState<any[]>(data || []);
    const [activeKey, setActiveKey] = useState(DorisNodeTypeEnum.FE);

    useEffect(() => {
        if (!reqInfo.cluster_id) return;
        runGetClusterNodes(
            SpaceAPI.getClusterNodes<any[]>({ clusterId: reqInfo.cluster_id }).then(res => {
                if (isSuccess(res)) return res.data;
                return Promise.reject(res);
            }),
        ).catch(res => {
            message.error(res.msg);
        });
    }, [runGetClusterNodes, reqInfo.cluster_id]);

    useEffect(() => {
        if (loading) return;
        if (props.value && feData.length === 0 && beData.length === 0 && data) {
            const feNodes = props.value.find((item: any) => item.moduleName.toUpperCase() === DorisNodeTypeEnum.FE);
            const beNodes = props.value.find((item: any) => item.moduleName.toUpperCase() === DorisNodeTypeEnum.BE);
            if (feNodes && feNodes.nodeIds && feNodes.nodeIds.length > 0) {
                const feHosts = feNodes.nodeIds.map(
                    (nodeId: number) => data.find(item => item.nodeId === nodeId)?.host,
                );
                setFeChecked(feNodes.nodeIds);
                setFeData(
                    feNodes.nodeIds.map((nodeId: number, index: number) => {
                        return {
                            nodeId: nodeId,
                            host: feHosts[index],
                        };
                    }),
                );
            }
            if (beNodes && beNodes.nodeIds && beNodes.nodeIds.length > 0) {
                const beHosts = beNodes.nodeIds.map(
                    (nodeId: number) => data.find(item => item.nodeId === nodeId)?.host,
                );
                setBeChecked(beNodes.nodeIds);
                setBeData(
                    beNodes.nodeIds.map((nodeId: number, index: number) => {
                        return {
                            nodeId: nodeId,
                            host: beHosts[index],
                        };
                    }),
                );
            }
        }
    }, [props.value, data, loading]);

    useEffect(() => {
        props?.onChange([
            {
                moduleName: 'fe',
                nodeIds: feData.map(item => item.nodeId),
            },
            {
                moduleName: 'be',
                nodeIds: beData.map(item => item.nodeId),
            },
        ]);
    }, [feData, beData]);

    const changeFeNodeType = (record: any, index: number, val: types.feNodeType) => {
        let tempFeData = [...feData];
        tempFeData[index] = {
            ...tempFeData[index],
            feNodeType: val,
        };
        console.log(tempFeData);
        setFeData(tempFeData);
    };
    const nodeColumns = [
        {
            title: '节点ID',
            dataIndex: 'nodeId',
        },
        {
            title: '节点IP',
            dataIndex: 'host',
            key: 'host',
        },
    ];
    const feColumns = [
        ...nodeColumns,
        {
            title: '操作',
            key: 'action',
            render: (e: any, record: any) => <FlatBtn onClick={() => handleRemove(record, 'fe')}>删除</FlatBtn>,
        },