export function NodeConfigContent()

in frontend/src/routes/space/new-cluster/steps/node-config/node-config.tsx [142:227]
74 lines of code
10 McCabe index (conditional complexity)

export function NodeConfigContent(props: any) {
    const { reqInfo } = useContext(NewSpaceInfoContext);
    const [customState, dispatch] = useReducer(reducer, initData);
    const [activeKey, setActiveKey] = useState(DorisNodeTypeEnum.FE);
    const { data: clusterModules, run: runGetClusterModules, loading } = useAsync<any[]>({ data: [], loading: true });
    const columns: ProColumns<DataType>[] = [
        {
            title: '配置项',
            dataIndex: 'key',
            editable: false,
        },
        {
            title: '默认值',
            dataIndex: 'value',
            formItemProps: {
                rules: [
                    {
                        required: true,
                        message: '此项为必填项',
                    },
                ],
            },
            width: '30%',
        },
        {
            title: '说明',
            dataIndex: 'desc',
            editable: false,
            render: (desc: any, record: DataType) => {
                return <span>{record.desc == null ? '待补充' : record.desc}</span>;
            },
        },
    ];
    const [feDataSource, setFeDataSource] = useState<DataType[]>([]);
    const [beDataSource, setBeDataSource] = useState<DataType[]>([]);
    const [brokerDataSource, setBrokerDataSource] = useState<DataType[]>([]);

    useEffect(() => {
        if (!reqInfo.cluster_id) return;
        runGetClusterModules(
            SpaceAPI.getClusterModule({ clusterId: reqInfo.cluster_id }).then(res => {
                if (isSuccess(res)) return res.data;
                return Promise.reject(res);
            }),
        )
            .then(res => {
                setFeDataSource(getDeployConfigs('fe', res));
                setBeDataSource(getDeployConfigs('be', res));
                setBrokerDataSource(getDeployConfigs('broker', res));
            })
            .catch(res => {
                message.error(res.msg);
            });
    }, [runGetClusterModules, reqInfo.cluster_id]);

    const getNewConfigs = useCallback(
        (moduleName: string) => {
            const { feCustom, beCustom, brokerCustom } = customState;
            switch (moduleName) {
                case 'fe':
                    return getNewConfigsWithCustom(feDataSource, feCustom.visible ? feCustom.value : '');
                case 'be':
                    return getNewConfigsWithCustom(beDataSource, beCustom.visible ? beCustom.value : '');
                case 'broker':
                    return getNewConfigsWithCustom(brokerDataSource, brokerCustom.visible ? brokerCustom.value : '');
            }
        },
        [feDataSource, beDataSource, brokerDataSource, customState],
    );

    useEffect(() => {
        const newClusterModules = clusterModules?.map(module => ({
            moduleName: module.name,
            configs: getNewConfigs(module.name),
        }));
        props.onChange?.(newClusterModules);
    }, [getNewConfigs]);

    return (
        <>
            <PageContainer
                header={{
                    title: <h2>配置参数</h2>,
                }}
            >
                <Tabs activeKey={activeKey} onChange={(key: any) => setActiveKey(key)} type="card">