export function ClusterDeploy()

in frontend/src/routes/space/new-cluster/steps/cluster-deploy/cluster-deploy.tsx [43:162]
115 lines of code
14 McCabe index (conditional complexity)

export function ClusterDeploy(props: any) {
    const { reqInfo, step } = useContext(NewSpaceInfoContext);
    const [activeKey, setActiveKey] = useState(DorisNodeTypeEnum.FE);
    const [instances, setInstances] = useState<any[]>([]);
    const [stepDisabled, setStepDisabled] = useRecoilState(stepDisabledState);
    const [readyLoading, setReadyLoading] = useState(true);
    const getJDBCReady = useRequest<IResult<any>, any>(
        (clusterId: string) => {
            return SpaceAPI.getJDBCReady<any>({ clusterId });
        },
        {
            manual: true,
            pollingInterval: 1000,
            onSuccess: (res: any) => {
                if (isSuccess(res)) {
                    const data: boolean = res.data;
                    if (data) {
                        getJDBCReady.cancel();
                        setReadyLoading(false);
                        setStepDisabled({ ...stepDisabled, next: false });
                    }
                }
            },
            onError: () => {
                if (reqInfo.cluster_id) {
                    message.error('请求出错');
                }
            },
        },
    );
    const getClusterInstances = useRequest<IResult<any>, any>(
        (clusterId: string) => {
            return SpaceAPI.getClusterInstance<any>({ clusterId });
        },
        {
            manual: true,
            pollingInterval: 2000,
            onSuccess: (res: any) => {
                if (isSuccess(res)) {
                    const data: any[] = res.data;
                    setInstances(data);
                    const failedInstance = data.find(item => ERROR_STATUS.includes(item.operateStatus));
                    if (failedInstance) {
                        message.error(failedInstance.operateResult);
                        getClusterInstances.cancel();
                    }
                    if (
                        data.every(item => item.operateStatus === OperateStatusEnum.SUCCESS && item.operateStage === 3)
                    ) {
                        getClusterInstances.cancel();
                        getJDBCReady.run(reqInfo.cluster_id);
                    }
                }
            },
            onError: () => {
                if (reqInfo.cluster_id) {
                    message.error('请求出错');
                }
            },
        },
    );

    useEffect(() => {
        if (reqInfo.cluster_id && step === 6) {
            getClusterInstances.run(reqInfo.cluster_id);
        }
        return () => {
            getClusterInstances.cancel();
            getClusterInstances.cancel();
        };
    }, [reqInfo.cluster_id, step]);

    const getStepStatus = (record: any) => {
        const currentStepStatus = OperateStatusEnum.getStepStatus(record.operateStatus);
        if (currentStepStatus === 'error') return 'error';
        return readyLoading ? 'process' : 'finish';
    };

    const columns = [
        {
            title: '序号',
            dataIndex: 'instanceId',
        },
        {
            title: '节点IP',
            dataIndex: 'nodeHost',
        },
        {
            title: '安装进度',
            dataIndex: 'operateStage',
            render: (operateStage: number, record: any) => (
                <Steps
                    progressDot={(iconDot, { status }) => {
                        if (status === 'process') return <LoadingOutlined style={{ color: '#1890ff' }} />;
                        return iconDot;
                    }}
                    status={getStepStatus(record)}
                    current={record.operateStage - 1}
                    size="small"
                    style={{ marginLeft: -50 }}
                >
                    {Object.keys(STEP_MAP).map((stepKey, index) => (
                        <Step key={index} style={{ width: 80 }} title={STEP_MAP[stepKey]} />
                    ))}
                </Steps>
            ),
        },
    ];

    const getTableDataSource = (activeKey: string) => {
        return instances.filter(item => item.moduleName === activeKey.toLowerCase());
    };

    return (
        <PageContainer
            header={{
                title: <h2>部署集群</h2>,
            }}
        >
            <Tabs activeKey={activeKey} onChange={(key: any) => setActiveKey(key)} type="card">