Skip to content
Permalink
Browse files
[fix] fix the custom config cannot save its state after switching to …
…other tab (#23)

fix the custom config cannot save its state after switching to other tab
  • Loading branch information
zhengbowen01 committed Mar 29, 2022
1 parent 4ef5f46 commit 00e96af18ec7dbdbaf5d2a4cdce032066ed5a6e3
Showing 4 changed files with 85 additions and 60 deletions.
@@ -191,6 +191,7 @@ export function SpaceDetail() {
label={user.name}
value={user.id}
title={user.name}
disabled={userInfo.id === user.id && !userInfo.is_super_admin}
>
<Row justify="space-between">
<div className={styles.optionContent}>
@@ -15,13 +15,16 @@
// specific language governing permissions and limitations
// under the License.

import { ClassAttributes } from "react";
import { DorisNodeTypeEnum } from '../../../types/params.type';
import { Custom } from '../node-config';

export interface CustomConfigProps extends ClassAttributes<any>{
onChange?: (value: CustomConfigValue) => void;
export interface CustomConfigProps {
dispatch: (value: { type: DorisNodeTypeEnum; payload: Custom }) => void;
activeKey: DorisNodeTypeEnum;
custom: Custom;
}

export interface CustomConfigValue {
showCustomConfig: boolean;
value: string;
}
}
@@ -15,12 +15,12 @@
// specific language governing permissions and limitations
// under the License.

import { Input, Row, Space, Switch } from "antd";
import React, { useState } from "react";
import { CustomConfigProps } from "./custom-config.interface";
import React from 'react';
import { Input, Row, Space, Switch } from 'antd';
import { CustomConfigProps } from './custom-config.interface';

export function CustomConfig(props: CustomConfigProps) {
const [showCustomConfig, setShowCustomConfig] = useState(false);
const { dispatch, activeKey, custom } = props;
return (
<>
<Row style={{ margin: '20px 0' }}>
@@ -30,24 +30,35 @@ export function CustomConfig(props: CustomConfigProps) {
style={{ marginLeft: 40 }}
checkedChildren="开"
unCheckedChildren="关"
defaultChecked={false}
onChange={(checked: boolean) => {
setShowCustomConfig(checked);
checked={custom.visible}
onChange={(visible: boolean) => {
dispatch({
type: activeKey,
payload: {
...custom,
visible,
},
});
}}
/>
</Space>
</Row>
{
showCustomConfig && (
<Input.TextArea onChange={e => {
props.onChange && props.onChange({
value: e.target.value,
showCustomConfig,
{custom.visible && (
<Input.TextArea
value={custom.value}
onChange={e => {
dispatch({
type: activeKey,
payload: {
...custom,
value: e.target.value,
},
});
}} rows={5} placeholder="请输入您的自定义配置项,若存在冲突,自定义配置将覆盖上方默认配置 格式: xxx=xxx" />
)
}

}}
rows={5}
placeholder="请输入您的自定义配置项,若存在冲突,自定义配置将覆盖上方默认配置 格式: xxx=xxx"
/>
)}
</>
);
}
@@ -42,27 +42,51 @@ interface DataType {
desc: string | null;
}

const initData = {
feCustom: '',
beCustom: '',
brokerCustom: '',
export interface Custom {
value: string;
visible: boolean;
}

interface CustomState {
feCustom: Custom;
beCustom: Custom;
brokerCustom: Custom;
}

const initData: CustomState = {
feCustom: {
value: '',
visible: false,
},
beCustom: {
value: '',
visible: false,
},
brokerCustom: {
value: '',
visible: false,
},
};
const reducer = (state: any, action: { type: any; feCustom?: any; beCustom?: any; brokerCustom?: any }) => {
let newState = { ...state };
const reducer = (state: CustomState, action: { type: DorisNodeTypeEnum; payload: Custom }) => {
switch (action.type) {
case 'SET_FE_CONFIG':
newState.feCustom = action.feCustom;
break;
case 'SET_BE_CONFIG':
newState.beCustom = action.beCustom;
break;
case 'SET_BROKER_CONFIG':
newState.brokerCustom = action.brokerCustom;
break;
case DorisNodeTypeEnum.FE:
return {
...state,
feCustom: action.payload,
};
case DorisNodeTypeEnum.BE:
return {
...state,
beCustom: action.payload,
};
case DorisNodeTypeEnum.BROKER:
return {
...state,
brokerCustom: action.payload,
};
default:
newState = state;
return state;
}
return newState;
};

function getDeployConfigs(name: string, modules: any[]) {
@@ -80,7 +104,7 @@ function tranverseModulesToObject(modules: DataType[]) {
}

function tranverseStringToObject(customString: string) {
if(customString === '') return {}
if (customString === '') return {};
const customModules = customString.split('\n');
return customModules.reduce((memo, current) => {
const [key, value] = current.split('=');
@@ -158,8 +182,6 @@ export function NodeConfigContent(props: any) {
const [feDataSource, setFeDataSource] = useState<DataType[]>([]);
const [beDataSource, setBeDataSource] = useState<DataType[]>([]);
const [brokerDataSource, setBrokerDataSource] = useState<DataType[]>([]);
// const {fe, be} = useRecoilValue(roleListQuery);
const processID = useRecoilValue(processId);

useEffect(() => {
if (!reqInfo.cluster_id) return;
@@ -184,11 +206,11 @@ export function NodeConfigContent(props: any) {
const { feCustom, beCustom, brokerCustom } = customState;
switch (moduleName) {
case 'fe':
return getNewConfigsWithCustom(feDataSource, feCustom);
return getNewConfigsWithCustom(feDataSource, feCustom.visible ? feCustom.value : '');
case 'be':
return getNewConfigsWithCustom(beDataSource, beCustom);
return getNewConfigsWithCustom(beDataSource, beCustom.visible ? beCustom.value : '');
case 'broker':
return getNewConfigsWithCustom(brokerDataSource, brokerCustom);
return getNewConfigsWithCustom(brokerDataSource, brokerCustom.visible ? brokerCustom.value : '');
}
},
[feDataSource, beDataSource, brokerDataSource, customState],
@@ -199,7 +221,7 @@ export function NodeConfigContent(props: any) {
moduleName: module.name,
configs: getNewConfigs(module.name),
}));
props.onChange?.(newClusterModules)
props.onChange?.(newClusterModules);
}, [getNewConfigs]);

return (
@@ -231,11 +253,7 @@ export function NodeConfigContent(props: any) {
},
}}
/>
<CustomConfig
onChange={val => {
dispatch({ type: 'SET_FE_CONFIG', feCustom: val.value });
}}
/>
<CustomConfig dispatch={dispatch} activeKey={activeKey} custom={customState.feCustom} />
</>
)}
{activeKey === DorisNodeTypeEnum.BE && (
@@ -255,11 +273,7 @@ export function NodeConfigContent(props: any) {
},
}}
/>
<CustomConfig
onChange={val => {
dispatch({ type: 'SET_BE_CONFIG', beCustom: val.value });
}}
/>
<CustomConfig dispatch={dispatch} activeKey={activeKey} custom={customState.beCustom} />
</>
)}
{activeKey === DorisNodeTypeEnum.BROKER && (
@@ -280,11 +294,7 @@ export function NodeConfigContent(props: any) {
},
}}
/>
<CustomConfig
onChange={val => {
dispatch({ type: 'SET_BROKER_CONFIG', brokerCustom: val.value });
}}
/>
<CustomConfig dispatch={dispatch} activeKey={activeKey} custom={customState.brokerCustom} />
</>
)}
</PageContainer>

0 comments on commit 00e96af

Please sign in to comment.