export default function Configuration()

in frontend/src/routes/cluster/configuration/index.tsx [56:156]
91 lines of code
2 McCabe index (conditional complexity)

export default function Configuration() {
    const { t } = useTranslation();

    const {
        data: configurationList,
        loading: configurationListLoading,
        run: runGetConfigurationList,
    } = useAsync<ConfigurationItem[]>({ loading: true, data: [] });

    const [filteredConfigurationList, setFilteredConfigurationList] = useState<ConfigurationItem[]>();

    const getConfigurationList = useCallback(
        (setStartLoading: boolean = false) => {
            return runGetConfigurationList(
                Promise.all([ClusterAPI.getConfigurationList('fe'), ClusterAPI.getConfigurationList('be')]).then(
                    res => {
                        return [...resolveConfigurationList(res[0]), ...resolveConfigurationList(res[1])];
                    },
                ),
                { setStartLoading },
            ).catch(res => {
                message.error(res.msg);
            });
        },
        [runGetConfigurationList],
    );

    useEffect(() => {
        getConfigurationList();
    }, [getConfigurationList]);

    const [currentParameter, setCurrentParameter] = useState({} as ConfigurationItem);
    const [editModalVisible, setEditModalVisible] = useState(false);
    const [checkModalVisible, setCheckModalVisible] = useState(false);
    const [searchString, setSearchString] = useState('');

    const columns = [
        {
            title: t`paramName`,
            dataIndex: 'name',
        },
        {
            title: t`paramType`,
            dataIndex: 'type',
            filters: [
                {
                    text: 'Frontend',
                    value: 'Frontend',
                },
                {
                    text: 'Backend',
                    value: 'Backend',
                },
            ],
            onFilter: (value: any, record: ConfigurationItem) => record.type === value,
        },
        {
            title: t`paramValueType`,
            dataIndex: 'valueType',
        },
        {
            title: t`hot`,
            dataIndex: 'hot',
            render: (hot: boolean) => (hot ? t`yes` : t`no`),
        },
        {
            title: t`operation`,
            key: 'operation',
            render: (record: ConfigurationItem) => (
                <FlatBtnGroup>
                    <FlatBtn onClick={handleCheck(record)}>{t`viewCurrentValue`}</FlatBtn>
                    <FlatBtn onClick={handleEdit(record)} disabled={!record.hot}>
                        {t`edit`}
                    </FlatBtn>
                </FlatBtnGroup>
            ),
        },
    ];

    const handleCheck = (record: ConfigurationItem) => () => {
        setCurrentParameter(record);
        setCheckModalVisible(true);
    };

    const handleEdit = (record: ConfigurationItem) => () => {
        setCurrentParameter(record);
        setEditModalVisible(true);
    };

    const handleSearch = () => {
        setFilteredConfigurationList(
            configurationList?.filter(item => item.name.toLowerCase().includes(searchString.toLowerCase())),
        );
    };

    return (
        <>
            <Row align="middle" gutter={20} style={{ marginBottom: 20 }}>
                <Col>{t`paramSearch`}</Col>
                <Col>
                    <Input.Search onChange={e => setSearchString(e.target.value)} onSearch={handleSearch} />