Unverified Commit 02e300f0 authored by zhu-mingye's avatar zhu-mingye Committed by GitHub

[optimization][web] Frontend code optimization (#1102)

* [Feature][*] Modify version into 0.6.8-SNAPSHOT

* Frontend code optimization
parent d76ccd50
......@@ -175,7 +175,7 @@ const AlertGroupTableList: React.FC<{}> = (props: any) => {
];
return (
<PageContainer>
<PageContainer title={false}>
<ProTable<AlertGroupTableListItem>
headerTitle="报警组管理"
actionRef={actionRef}
......@@ -290,7 +290,7 @@ const AlertGroupTableList: React.FC<{}> = (props: any) => {
modalVisible={updateModalVisible}
values={formValues}
/>
): null}
) : null}
<Drawer
width={600}
visible={!!row}
......@@ -317,4 +317,4 @@ const AlertGroupTableList: React.FC<{}> = (props: any) => {
);
};
export default connect()(AlertGroupTableList);
export default connect()(AlertGroupTableList);
......@@ -50,11 +50,11 @@ const AlertInstanceChooseForm: React.FC<UpdateFormProps> = (props) => {
const [alertType, setAlertType] = useState<string>();
const chooseOne = (item: AlertConfig)=>{
const chooseOne = (item: AlertConfig) => {
setAlertType(item.type);
};
const onSubmit = async (value: any)=>{
const onSubmit = async (value: any) => {
const success = await createOrModifyAlertInstance(value);
if (success) {
handleChooseModalVisible();
......@@ -63,26 +63,26 @@ const AlertInstanceChooseForm: React.FC<UpdateFormProps> = (props) => {
}
};
const onTest = async (value:any)=>{
const onTest = async (value: any) => {
await sendTest(value);
};
return (
<Modal
width={800}
width={"40%"}
bodyStyle={{padding: '32px 40px 48px'}}
title={values?.id?'编辑报警实例':'创建报警实例'}
title={values?.id ? '编辑报警实例' : '创建报警实例'}
visible={modalVisible}
onCancel={() => {
setAlertType(undefined);
handleChooseModalVisible();
}}
maskClosable = {false}
destroyOnClose = {true}
maskClosable={false}
destroyOnClose={true}
footer={null}
>{
(!alertType&&!values?.id)&&(<List
(!alertType && !values?.id) && (<List
grid={{
gutter: 16,
xs: 1,
......@@ -93,8 +93,10 @@ const AlertInstanceChooseForm: React.FC<UpdateFormProps> = (props) => {
xxl: 4,
}}
dataSource={ALERT_CONFIG_LIST}
renderItem={(item:AlertConfig) => (
<List.Item onClick={()=>{chooseOne(item)}}>
renderItem={(item: AlertConfig) => (
<List.Item onClick={() => {
chooseOne(item)
}}>
<Card>
{getAlertIcon(item.type)}
</Card>
......@@ -102,7 +104,7 @@ const AlertInstanceChooseForm: React.FC<UpdateFormProps> = (props) => {
)}
/>)
}
{(values?.type == ALERT_TYPE.DINGTALK || alertType == ALERT_TYPE.DINGTALK)?
{(values?.type == ALERT_TYPE.DINGTALK || alertType == ALERT_TYPE.DINGTALK) ?
<DingTalkForm
onCancel={() => {
setAlertType(undefined);
......@@ -116,9 +118,9 @@ const AlertInstanceChooseForm: React.FC<UpdateFormProps> = (props) => {
onTest={(value) => {
onTest(value);
}}
/>:undefined
/> : undefined
}
{(values?.type == ALERT_TYPE.WECHAT || alertType == ALERT_TYPE.WECHAT)?
{(values?.type == ALERT_TYPE.WECHAT || alertType == ALERT_TYPE.WECHAT) ?
<WeChatForm
onCancel={() => {
setAlertType(undefined);
......@@ -132,9 +134,9 @@ const AlertInstanceChooseForm: React.FC<UpdateFormProps> = (props) => {
onTest={(value) => {
onTest(value);
}}
/>:undefined
/> : undefined
}
{(values?.type == ALERT_TYPE.FEISHU || alertType == ALERT_TYPE.FEISHU)?
{(values?.type == ALERT_TYPE.FEISHU || alertType == ALERT_TYPE.FEISHU) ?
<FeiShuForm
onCancel={() => {
setAlertType(undefined);
......@@ -148,9 +150,9 @@ const AlertInstanceChooseForm: React.FC<UpdateFormProps> = (props) => {
onTest={(value) => {
onTest(value);
}}
/>:undefined
/> : undefined
}
{(values?.type == ALERT_TYPE.EMAIL || alertType == ALERT_TYPE.EMAIL)?
{(values?.type == ALERT_TYPE.EMAIL || alertType == ALERT_TYPE.EMAIL) ?
<EmailForm
onCancel={() => {
setAlertType(undefined);
......@@ -164,7 +166,7 @@ const AlertInstanceChooseForm: React.FC<UpdateFormProps> = (props) => {
onTest={(value) => {
onTest(value);
}}
/>:undefined
/> : undefined
}
</Modal>
);
......
......@@ -55,20 +55,20 @@ const DingTalkForm: React.FC<AlertInstanceFormProps> = (props) => {
modalVisible,
} = props;
const onValuesChange = (change: any,all: any)=>{
setFormVals({...formVals,...change});
const onValuesChange = (change: any, all: any) => {
setFormVals({...formVals, ...change});
};
const sendTestForm = async () => {
const fieldsValue = await form.validateFields();
setFormVals(buildJSONData(formVals,fieldsValue));
handleTest(buildJSONData(formVals,fieldsValue));
setFormVals(buildJSONData(formVals, fieldsValue));
handleTest(buildJSONData(formVals, fieldsValue));
};
const submitForm = async () => {
const fieldsValue = await form.validateFields();
setFormVals(buildJSONData(formVals,fieldsValue));
handleSubmit(buildJSONData(formVals,fieldsValue));
setFormVals(buildJSONData(formVals, fieldsValue));
handleSubmit(buildJSONData(formVals, fieldsValue));
};
const renderContent = (vals) => {
......@@ -107,7 +107,7 @@ const DingTalkForm: React.FC<AlertInstanceFormProps> = (props) => {
<Switch checkedChildren="是" unCheckedChildren="否"
defaultChecked={vals.isEnableProxy}/>
</Form.Item>
{vals.isEnableProxy?<>
{vals.isEnableProxy ? <>
<Form.Item
name="proxy"
label="代理"
......@@ -131,7 +131,7 @@ const DingTalkForm: React.FC<AlertInstanceFormProps> = (props) => {
label="密码"
>
<Input.Password placeholder="请输入password"/>
</Form.Item></>:undefined
</Form.Item></> : undefined
}
<Form.Item
name="isAtAll"
......@@ -162,7 +162,7 @@ const DingTalkForm: React.FC<AlertInstanceFormProps> = (props) => {
label="展示方式"
rules={[{required: true, message: '请选择展示方式!'}]}
>
<Radio.Group >
<Radio.Group>
<Radio value='markdown'>MarkDown</Radio>
<Radio value='text'>文本</Radio>
</Radio.Group>
......@@ -186,10 +186,10 @@ const DingTalkForm: React.FC<AlertInstanceFormProps> = (props) => {
return (
<Modal
width={1200}
width={"40%"}
bodyStyle={{padding: '32px 40px 48px'}}
destroyOnClose
title={formVals.id?"维护报警实例配置":"创建报警实例配置"}
title={formVals.id ? "维护报警实例配置" : "创建报警实例配置"}
visible={modalVisible}
footer={renderFooter()}
onCancel={() => handleModalVisible()}
......
......@@ -55,20 +55,20 @@ const EmailForm: React.FC<AlertInstanceFormProps> = (props) => {
modalVisible,
} = props;
const onValuesChange = (change: any,all: any)=>{
setFormVals({...formVals,...change});
const onValuesChange = (change: any, all: any) => {
setFormVals({...formVals, ...change});
};
const sendTestForm = async () => {
const fieldsValue = await form.validateFields();
setFormVals(buildJSONData(formVals,fieldsValue));
handleTest(buildJSONData(formVals,fieldsValue));
setFormVals(buildJSONData(formVals, fieldsValue));
handleTest(buildJSONData(formVals, fieldsValue));
};
const submitForm = async () => {
const fieldsValue = await form.validateFields();
setFormVals(buildJSONData(formVals,fieldsValue));
handleSubmit(buildJSONData(formVals,fieldsValue));
setFormVals(buildJSONData(formVals, fieldsValue));
handleSubmit(buildJSONData(formVals, fieldsValue));
};
......@@ -88,13 +88,15 @@ const EmailForm: React.FC<AlertInstanceFormProps> = (props) => {
label="收件人"
rules={[{required: true, message: '请输入收件人邮箱!多个英文逗号隔开'}]}
>
<Input.TextArea placeholder="请输入收件人邮箱!多个英文逗号隔开!" allowClear autoSize={{minRows: 1, maxRows: 5}}/>
<Input.TextArea placeholder="请输入收件人邮箱!多个英文逗号隔开!" allowClear
autoSize={{minRows: 1, maxRows: 5}}/>
</Form.Item>
<Form.Item
name="receiverCcs"
label="抄送人"
>
<Input.TextArea placeholder="请输入抄送人邮箱!多个英文逗号隔开!" allowClear autoSize={{minRows: 1, maxRows: 5}}/>
<Input.TextArea placeholder="请输入抄送人邮箱!多个英文逗号隔开!" allowClear
autoSize={{minRows: 1, maxRows: 5}}/>
</Form.Item>
<Form.Item
name="serverHost"
......@@ -126,21 +128,21 @@ const EmailForm: React.FC<AlertInstanceFormProps> = (props) => {
</Form.Item>
{vals.enableSmtpAuth &&
<>
<Form.Item
name="User"
label="邮箱用户名"
rules={[{required: true, message: '请输入邮箱用户名!'}]}
>
<Input allowClear placeholder="请输入邮箱用户名"/>
</Form.Item>
<Form.Item
name="Password"
label="邮箱密码"
rules={[{required: true, message: '请输入邮箱密码/授权码!'}]}
>
<Input.Password allowClear placeholder="请输入邮箱密码! 注意:密码为授权码"/>
</Form.Item>
</>}
<Form.Item
name="User"
label="邮箱用户名"
rules={[{required: true, message: '请输入邮箱用户名!'}]}
>
<Input allowClear placeholder="请输入邮箱用户名"/>
</Form.Item>
<Form.Item
name="Password"
label="邮箱密码"
rules={[{required: true, message: '请输入邮箱密码/授权码!'}]}
>
<Input.Password allowClear placeholder="请输入邮箱密码! 注意:密码为授权码"/>
</Form.Item>
</>}
<Form.Item
name="starttlsEnable"
label="是否开启tls证书验证"
......@@ -155,7 +157,7 @@ const EmailForm: React.FC<AlertInstanceFormProps> = (props) => {
<Switch checkedChildren="是" unCheckedChildren="否"
defaultChecked={vals.sslEnable}/>
</Form.Item>
{ ( vals.sslEnable ) &&
{(vals.sslEnable) &&
<Form.Item
name="smtpSslTrust"
label="受信任域"
......@@ -175,7 +177,7 @@ const EmailForm: React.FC<AlertInstanceFormProps> = (props) => {
label="展示方式"
rules={[{required: true, message: '请选择展示方式!'}]}
>
<Radio.Group >
<Radio.Group>
<Radio value='text'>文本</Radio>
<Radio value='table'>表格</Radio>
<Radio value='attachment'>附件</Radio>
......@@ -191,7 +193,7 @@ const EmailForm: React.FC<AlertInstanceFormProps> = (props) => {
<Input allowClear placeholder="请输入XLS存放目录! 默认为 /tmp/xls"/>
</Form.Item>
</> }
</>}
</>
);
......@@ -212,10 +214,10 @@ const EmailForm: React.FC<AlertInstanceFormProps> = (props) => {
return (
<Modal
width={1200}
width={"40%"}
bodyStyle={{padding: '32px 40px 48px'}}
destroyOnClose
title={formVals.id?"维护报警实例配置":"创建报警实例配置"}
title={formVals.id ? "维护报警实例配置" : "创建报警实例配置"}
visible={modalVisible}
footer={renderFooter()}
onCancel={() => handleModalVisible()}
......
......@@ -55,20 +55,20 @@ const FeiShuForm: React.FC<AlertInstanceFormProps> = (props) => {
modalVisible,
} = props;
const onValuesChange = (change: any,all: any)=>{
setFormVals({...formVals,...change});
const onValuesChange = (change: any, all: any) => {
setFormVals({...formVals, ...change});
};
const submitForm = async () => {
const fieldsValue = await form.validateFields();
setFormVals(buildJSONData(formVals,fieldsValue));
handleSubmit(buildJSONData(formVals,fieldsValue));
setFormVals(buildJSONData(formVals, fieldsValue));
handleSubmit(buildJSONData(formVals, fieldsValue));
};
const sendTestForm = async () => {
const fieldsValue = await form.getFieldsValue();
setFormVals(buildJSONData(formVals,fieldsValue));
handleTest(buildJSONData(formVals,fieldsValue));
setFormVals(buildJSONData(formVals, fieldsValue));
handleTest(buildJSONData(formVals, fieldsValue));
};
const renderContent = (vals) => {
......@@ -107,7 +107,7 @@ const FeiShuForm: React.FC<AlertInstanceFormProps> = (props) => {
<Switch checkedChildren="是" unCheckedChildren="否"
defaultChecked={vals.isEnableProxy}/>
</Form.Item>
{vals.isEnableProxy?<>
{vals.isEnableProxy ? <>
<Form.Item
name="proxy"
label="代理"
......@@ -131,7 +131,7 @@ const FeiShuForm: React.FC<AlertInstanceFormProps> = (props) => {
label="密码"
>
<Input.Password placeholder="请输入password"/>
</Form.Item></>:undefined
</Form.Item></> : undefined
}
<Form.Item
name="isAtAll"
......@@ -139,7 +139,7 @@ const FeiShuForm: React.FC<AlertInstanceFormProps> = (props) => {
<Switch checkedChildren="启用" unCheckedChildren="禁用"
defaultChecked={vals.isAtAll}/>
</Form.Item>
{ ( !vals.isAtAll )&&
{(!vals.isAtAll) &&
<Form.Item
name="users"
label="被@用户"
......@@ -159,7 +159,7 @@ const FeiShuForm: React.FC<AlertInstanceFormProps> = (props) => {
label="展示方式"
rules={[{required: true, message: '请选择展示方式!'}]}
>
<Radio.Group >
<Radio.Group>
<Radio value='post'>富文本</Radio>
<Radio value='text'>文本</Radio>
</Radio.Group>
......@@ -183,10 +183,10 @@ const FeiShuForm: React.FC<AlertInstanceFormProps> = (props) => {
return (
<Modal
width={1200}
width={"40%"}
bodyStyle={{padding: '32px 40px 48px'}}
destroyOnClose
title={formVals.id?"维护报警实例配置":"创建报警实例配置"}
title={formVals.id ? "维护报警实例配置" : "创建报警实例配置"}
visible={modalVisible}
footer={renderFooter()}
onCancel={() => handleModalVisible()}
......
......@@ -55,19 +55,19 @@ const WeChatForm: React.FC<AlertInstanceFormProps> = (props) => {
modalVisible,
} = props;
const onValuesChange = (change: any,all: any)=>{
setFormVals({...formVals,...change});
const onValuesChange = (change: any, all: any) => {
setFormVals({...formVals, ...change});
};
const sendTestForm = async () => {
const fieldsValue = await form.validateFields();
setFormVals(buildJSONData(formVals,fieldsValue));
handleTest(buildJSONData(formVals,fieldsValue));
setFormVals(buildJSONData(formVals, fieldsValue));
handleTest(buildJSONData(formVals, fieldsValue));
};
const submitForm = async () => {
const fieldsValue = await form.validateFields();
setFormVals(buildJSONData(formVals,fieldsValue));
handleSubmit(buildJSONData(formVals,fieldsValue));
setFormVals(buildJSONData(formVals, fieldsValue));
handleSubmit(buildJSONData(formVals, fieldsValue));
};
const renderContent = (vals) => {
......@@ -92,7 +92,7 @@ const WeChatForm: React.FC<AlertInstanceFormProps> = (props) => {
<Radio value='群聊'>群聊</Radio>
</Radio.Group>
</Form.Item>
{ (vals.sendType == "群聊") ?
{(vals.sendType == "群聊") ?
<>
<Form.Item
name="webhook"
......@@ -114,7 +114,7 @@ const WeChatForm: React.FC<AlertInstanceFormProps> = (props) => {
<Switch checkedChildren="启用" unCheckedChildren="禁用"
defaultChecked={vals.isAtAll}/>
</Form.Item>
{ ( !vals.isAtAll )&&
{(!vals.isAtAll) &&
<Form.Item
name="users"
label="被@用户"
......@@ -124,44 +124,44 @@ const WeChatForm: React.FC<AlertInstanceFormProps> = (props) => {
</Form.Item>
}
</>
:
<>
<Form.Item
name="corpId"
label="企业Id"
rules={[{required: true, message: '请输入企业Id!'}]}
>
<Input placeholder="请输入CorpId"/>
</Form.Item>
<Form.Item
name="secret"
label="密令"
rules={[{required: true, message: '请输入密令!'}]}
>
<Input placeholder="请输入secret"/>
</Form.Item>
<Form.Item
name="users"
label="用户"
rules={[{required: true, message: '请输入用户!'}]}
>
<Input placeholder="请输入用户"/>
</Form.Item>
<Form.Item
name="agentId"
label="代理ID"
rules={[{required: true, message: '请输入代理ID!'}]}
>
<Input placeholder="请输入代理ID"/>
</Form.Item>
</>
:
<>
<Form.Item
name="corpId"
label="企业Id"
rules={[{required: true, message: '请输入企业Id!'}]}
>
<Input placeholder="请输入CorpId"/>
</Form.Item>
<Form.Item
name="secret"
label="密令"
rules={[{required: true, message: '请输入密令!'}]}
>
<Input placeholder="请输入secret"/>
</Form.Item>
<Form.Item
name="users"
label="用户"
rules={[{required: true, message: '请输入用户!'}]}
>
<Input placeholder="请输入用户"/>
</Form.Item>
<Form.Item
name="agentId"
label="代理ID"
rules={[{required: true, message: '请输入代理ID!'}]}
>
<Input placeholder="请输入代理ID"/>
</Form.Item>
</>
}
<Form.Item
name="msgtype"
label="展示方式"
rules={[{required: true, message: '请选择展示方式!'}]}
>
<Radio.Group >
<Radio.Group>
<Radio value='markdown'>MarkDown</Radio>
<Radio value='text'>文本</Radio>
</Radio.Group>
......@@ -192,10 +192,10 @@ const WeChatForm: React.FC<AlertInstanceFormProps> = (props) => {
return (
<Modal
width={1200}
width={"40%"}
bodyStyle={{padding: '32px 40px 48px'}}
destroyOnClose
title={formVals.id?"维护报警实例配置":"创建报警实例配置"}
title={formVals.id ? "维护报警实例配置" : "创建报警实例配置"}
visible={modalVisible}
footer={renderFooter()}
onCancel={() => handleModalVisible()}
......
......@@ -60,17 +60,17 @@ const AlertInstanceTableList: React.FC<{}> = (props: any) => {
}> = ({item}) => (
<Dropdown
overlay={
<Menu onClick={({key}) => editAndDelete(key, item)}>
<Menu.Item key="edit">编辑</Menu.Item>
<Menu.Item key="delete">删除</Menu.Item>
</Menu>
}
>
<a>
更多 <DownOutlined/>
</a>
</Dropdown>
);
<Menu onClick={({key}) => editAndDelete(key, item)}>
<Menu.Item key="edit">编辑</Menu.Item>
<Menu.Item key="delete">删除</Menu.Item>
</Menu>
}
>
<a>
更多 <DownOutlined/>
</a>
</Dropdown>
);
const columns: ProColumns<AlertInstanceTableListItem>[] = [
{
......@@ -108,13 +108,13 @@ const AlertInstanceTableList: React.FC<{}> = (props: any) => {
{
text: 'DingTalk',
value: 'DingTalk',
},{
}, {
text: 'WeChat',
value: 'WeChat',
},{
}, {
text: 'FeiShu',
value: 'FeiShu',
},{
}, {
text: 'Email',
value: 'Email',
}
......@@ -176,131 +176,131 @@ const AlertInstanceTableList: React.FC<{}> = (props: any) => {
render: (_, record) => [
<a
onClick={() => {
handleModalVisible(true);
handleModalVisible(true);
setValues(record);
}}
>
配置
</a>,
<MoreBtn key="more" item={record}/>,
],
},
];
}}
>
配置
</a>,
<MoreBtn key="more" item={record}/>,
],
},
];
return (
<PageContainer>
<PageContainer title={false}>
<ProTable<AlertInstanceTableListItem>
headerTitle="报警实例管理"
actionRef={actionRef}
rowKey="id"
search={{
labelWidth: 120,
}}
toolBarRender={() => [
<Button type="primary" onClick={() => handleModalVisible(true)}>
<PlusOutlined/> 新建
</Button>,
]}
request={(params, sorter, filter) => queryData(url, {...params, sorter, filter})}
columns={columns}
rowSelection={{
onChange: (_, selectedRows) => setSelectedRows(selectedRows),
}}
/>
{selectedRowsState?.length > 0 && (
<FooterToolbar
extra={
<div>
已选择 <a style={{fontWeight: 600}}>{selectedRowsState.length}</a>&nbsp;&nbsp;
<span>
actionRef={actionRef}
rowKey="id"
search={{
labelWidth: 120,
}}
toolBarRender={() => [
<Button type="primary" onClick={() => handleModalVisible(true)}>
<PlusOutlined/> 新建
</Button>,
]}
request={(params, sorter, filter) => queryData(url, {...params, sorter, filter})}
columns={columns}
rowSelection={{
onChange: (_, selectedRows) => setSelectedRows(selectedRows),
}}
/>
{selectedRowsState?.length > 0 && (
<FooterToolbar
extra={
<div>
已选择 <a style={{fontWeight: 600}}>{selectedRowsState.length}</a>&nbsp;&nbsp;
<span>
被禁用的报警实例共 {selectedRowsState.length - selectedRowsState.reduce((pre, item) => pre + (item.enabled ? 1 : 0), 0)}
</span>
</div>
}
>
<Button type="primary" danger
onClick={() => {
Modal.confirm({
title: '删除报警实例',
content: '确定删除选中的报警实例吗?',
okText: '确认',
cancelText: '取消',
onOk: async () => {
await handleRemove(url, selectedRowsState);
setSelectedRows([]);
actionRef.current?.reloadAndRest?.();
}
});
}}
>
批量删除
</Button>
<Button type="primary"
onClick={() => {
Modal.confirm({
title: '启用报警实例',
content: '确定启用选中的报警实例吗?',
okText: '确认',
cancelText: '取消',
onOk: async () => {
await updateEnabled(url, selectedRowsState, true);
setSelectedRows([]);
actionRef.current?.reloadAndRest?.();
}
});
}}
>批量启用</Button>
<Button danger
onClick={() => {
Modal.confirm({
title: '禁用报警实例',
content: '确定禁用选中的报警实例吗?',
okText: '确认',
cancelText: '取消',
onOk: async () => {
await updateEnabled(url, selectedRowsState, false);
setSelectedRows([]);
actionRef.current?.reloadAndRest?.();
}
});
}}
>批量禁用</Button>
</FooterToolbar>
)}
<AlertInstanceChooseForm onCancel={() => {
handleModalVisible(false);
setValues(undefined);
}}
modalVisible={modalVisible}
onSubmit={() => {
actionRef.current?.reloadAndRest?.();
}}
values={values}
/>
<Drawer
width={600}
visible={!!row}
onClose={() => {
setRow(undefined);
}}
closable={false}
>
{row?.name && (
<ProDescriptions<AlertInstanceTableListItem>
column={2}
title={row?.name}
request={async () => ({
data: row || {},
})}
params={{
id: row?.name,
}}
columns={columns}
/>
)}
</Drawer>
</PageContainer>
);
</div>
}
>
<Button type="primary" danger
onClick={() => {
Modal.confirm({
title: '删除报警实例',
content: '确定删除选中的报警实例吗?',
okText: '确认',
cancelText: '取消',
onOk: async () => {
await handleRemove(url, selectedRowsState);
setSelectedRows([]);
actionRef.current?.reloadAndRest?.();
}
});
}}
>
批量删除
</Button>
<Button type="primary"
onClick={() => {
Modal.confirm({
title: '启用报警实例',
content: '确定启用选中的报警实例吗?',
okText: '确认',
cancelText: '取消',
onOk: async () => {
await updateEnabled(url, selectedRowsState, true);
setSelectedRows([]);
actionRef.current?.reloadAndRest?.();
}
});
}}
>批量启用</Button>
<Button danger
onClick={() => {
Modal.confirm({
title: '禁用报警实例',
content: '确定禁用选中的报警实例吗?',
okText: '确认',
cancelText: '取消',
onOk: async () => {
await updateEnabled(url, selectedRowsState, false);
setSelectedRows([]);
actionRef.current?.reloadAndRest?.();
}
});
}}
>批量禁用</Button>
</FooterToolbar>
)}
<AlertInstanceChooseForm onCancel={() => {
handleModalVisible(false);
setValues(undefined);
}}
modalVisible={modalVisible}
onSubmit={() => {
actionRef.current?.reloadAndRest?.();
}}
values={values}
/>
<Drawer
width={600}
visible={!!row}
onClose={() => {
setRow(undefined);
}}
closable={false}
>
{row?.name && (
<ProDescriptions<AlertInstanceTableListItem>
column={2}
title={row?.name}
request={async () => ({
data: row || {},
})}
params={{
id: row?.name,
}}
columns={columns}
/>
)}
</Drawer>
</PageContainer>
);
};
export default AlertInstanceTableList;
......@@ -111,7 +111,7 @@ const NameSpaceForm: React.FC<TenantFormProps> = (props) => {
return (
<Modal
width={640}
width={"40%"}
bodyStyle={{padding: '32px 40px 48px'}}
destroyOnClose
title={formVals.id ? l('pages.nameSpace.update') : l('pages.nameSpace.create')}
......
......@@ -148,7 +148,7 @@ const RoleForm: React.FC<TenantFormProps> = (props) => {
return (
<Modal
width={1000}
width={"40%"}
bodyStyle={{padding: '32px 40px 48px'}}
destroyOnClose
title={formVals.id ? l('pages.role.update') : l('pages.role.create')}
......
......@@ -97,7 +97,7 @@ const TenantForm: React.FC<TenantFormProps> = (props) => {
return (
<Modal
width={640}
width={"40%"}
bodyStyle={{padding: '32px 40px 48px'}}
destroyOnClose
title={formVals.id ? intl.formatMessage({id: 'pages.tenant.update'}) : intl.formatMessage({id: 'pages.tenant.create'})}
......
......@@ -84,7 +84,7 @@ const TenantFormList: React.FC<{}> = (props: any) => {
const handleGrantTenantForm = () => {
return (
<Modal title={l('pages.tenant.AssignUser')} visible={handleGrantTenant}
destroyOnClose={true} width={"1500px"}
destroyOnClose={true} width={"90%"}
onCancel={() => {
setHandleGrantTenant(false);
}}
......
......@@ -114,7 +114,7 @@ const PasswordForm: React.FC<PasswordFormProps> = (props) => {
return (
<Modal
width={1200}
width={"40%"}
bodyStyle={{padding: '32px 40px 48px'}}
destroyOnClose
title={l('button.changePassword')}
......
......@@ -122,7 +122,7 @@ const UserForm: React.FC<UserFormProps> = (props) => {
return (
<Modal
width={1200}
width={"40%"}
bodyStyle={{padding: '32px 40px 48px'}}
destroyOnClose
title={formVals.id ? l('pages.user.UserUpdateUser') : l('pages.user.UserCreateUser')}
......
......@@ -89,7 +89,7 @@ const UserTableList: React.FC<{}> = (props: any) => {
const handleGrantRoleForm = () => {
return (
<Modal title={l('pages.user.AssignRole')} visible={handleGrantRole} destroyOnClose={true} width={"1500px"}
<Modal title={l('pages.user.AssignRole')} visible={handleGrantRole} destroyOnClose={true} width={"90%"}
onCancel={() => {
setHandleGrantRole(false);
}}
......
......@@ -18,8 +18,8 @@
*/
import React, {useEffect, useState} from 'react';
import {Form, Button, Input, Modal, Select, Switch} from 'antd';
import React, {useState} from 'react';
import {Button, Form, Input, Modal, Select, Switch} from 'antd';
import {ClusterTableListItem} from "@/pages/Cluster/data";
import {RUN_MODE} from "@/components/Studio/conf";
......@@ -154,7 +154,7 @@ const ClusterForm: React.FC<ClusterFormProps> = (props) => {
return (
<Modal
width={640}
width={"40%"}
bodyStyle={{padding: '32px 40px 48px'}}
destroyOnClose
title={formVals.id ? "修改集群" : "创建集群"}
......
This diff is collapsed.
......@@ -376,8 +376,8 @@ const ClusterConfigurationForm: React.FC<ClusterConfigurationFormProps> = (props
return (
<Modal
width={1200}
bodyStyle={{padding: '32px 40px 48px'}}
width={"60%"}
bodyStyle={{padding: '32px 40px 48px', height: '600px', overflowY: 'auto'}}
destroyOnClose
title={formVals.id ? "维护集群配置" : "创建集群配置"}
visible={modalVisible}
......
......@@ -19,11 +19,10 @@
import React, {useRef, useState} from "react";
import {DownOutlined, HeartOutlined, PlusOutlined, UserOutlined} from '@ant-design/icons';
import {ActionType, ProColumns} from "@ant-design/pro-table";
import {Button, message, Input, Drawer, Modal, Dropdown, Menu} from 'antd';
import {PageContainer, FooterToolbar} from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import {DownOutlined, PlusOutlined} from '@ant-design/icons';
import ProTable, {ActionType, ProColumns} from "@ant-design/pro-table";
import {Button, Drawer, Dropdown, Menu, Modal} from 'antd';
import {FooterToolbar, PageContainer} from '@ant-design/pro-layout';
import ProDescriptions from '@ant-design/pro-descriptions';
import {ClusterConfigurationTableListItem} from "@/pages/ClusterConfiguration/data";
import {handleAddOrUpdate, handleRemove, queryData, updateEnabled} from "@/components/Common/crud";
......@@ -219,104 +218,104 @@ const ClusterConfigurationTableList: React.FC<{}> = (props: any) => {
];
return (
<PageContainer>
<PageContainer title={false}>
<ProTable<ClusterConfigurationTableListItem>
headerTitle="集群配置管理"
actionRef={actionRef}
rowKey="id"
search={{
labelWidth: 120,
}}
labelWidth: 120,
}}
toolBarRender={() => [
<Button type="primary" onClick={() => handleModalVisible(true)}>
<PlusOutlined/> 新建
</Button>,
]}
<Button type="primary" onClick={() => handleModalVisible(true)}>
<PlusOutlined/> 新建
</Button>,
]}
request={(params, sorter, filter) => queryData(url, {...params, sorter, filter})}
columns={columns}
rowSelection={{
onChange: (_, selectedRows) => setSelectedRows(selectedRows),
}}
/>
{selectedRowsState?.length > 0 && (
<FooterToolbar
extra={
<div>
已选择 <a style={{fontWeight: 600}}>{selectedRowsState.length}</a>&nbsp;&nbsp;
<span>
onChange: (_, selectedRows) => setSelectedRows(selectedRows),
}}
/>
{selectedRowsState?.length > 0 && (
<FooterToolbar
extra={
<div>
已选择 <a style={{fontWeight: 600}}>{selectedRowsState.length}</a>&nbsp;&nbsp;
<span>
被禁用的集群配置共 {selectedRowsState.length - selectedRowsState.reduce((pre, item) => pre + (item.enabled ? 1 : 0), 0)}
</span>
</div>
}
</div>
}
>
<Button type="primary" danger
onClick={() => {
Modal.confirm({
title: '删除集群配置',
content: '确定删除选中的集群配置吗?',
okText: '确认',
cancelText: '取消',
onOk: async () => {
await handleRemove(url, selectedRowsState);
setSelectedRows([]);
actionRef.current?.reloadAndRest?.();
}
});
}}
>
<Button type="primary" danger
onClick={() => {
Modal.confirm({
title: '删除集群配置',
content: '确定删除选中的集群配置吗?',
okText: '确认',
cancelText: '取消',
onOk: async () => {
await handleRemove(url, selectedRowsState);
setSelectedRows([]);
actionRef.current?.reloadAndRest?.();
}
});
}}
>
批量删除
</Button>
<Button type="primary"
onClick={() => {
Modal.confirm({
title: '启用集群配置',
content: '确定启用选中的集群配置吗?',
okText: '确认',
cancelText: '取消',
onOk: async () => {
await updateEnabled(url, selectedRowsState, true);
setSelectedRows([]);
actionRef.current?.reloadAndRest?.();
}
});
}}
>批量启用</Button>
<Button danger
onClick={() => {
Modal.confirm({
title: '禁用集群配置',
content: '确定禁用选中的集群配置吗?',
okText: '确认',
cancelText: '取消',
onOk: async () => {
await updateEnabled(url, selectedRowsState, false);
setSelectedRows([]);
actionRef.current?.reloadAndRest?.();
}
});
}}
>批量禁用</Button>
</FooterToolbar>
)}
<ClusterConfigurationForm
onSubmit={async (value) => {
const success = await handleAddOrUpdate("api/clusterConfiguration", value);
if (success) {
handleModalVisible(false);
setFormValues({});
if (actionRef.current) {
actionRef.current.reload();
}
showClusterConfiguration(dispatch);
}
}}
onCancel={() => {
批量删除
</Button>
<Button type="primary"
onClick={() => {
Modal.confirm({
title: '启用集群配置',
content: '确定启用选中的集群配置吗?',
okText: '确认',
cancelText: '取消',
onOk: async () => {
await updateEnabled(url, selectedRowsState, true);
setSelectedRows([]);
actionRef.current?.reloadAndRest?.();
}
});
}}
>批量启用</Button>
<Button danger
onClick={() => {
Modal.confirm({
title: '禁用集群配置',
content: '确定禁用选中的集群配置吗?',
okText: '确认',
cancelText: '取消',
onOk: async () => {
await updateEnabled(url, selectedRowsState, false);
setSelectedRows([]);
actionRef.current?.reloadAndRest?.();
}
});
}}
>批量禁用</Button>
</FooterToolbar>
)}
<ClusterConfigurationForm
onSubmit={async (value) => {
const success = await handleAddOrUpdate("api/clusterConfiguration", value);
if (success) {
handleModalVisible(false);
}}
modalVisible={modalVisible}
values={{}}
/>
{formValues && Object.keys(formValues).length ? (
setFormValues({});
if (actionRef.current) {
actionRef.current.reload();
}
showClusterConfiguration(dispatch);
}
}}
onCancel={() => {
handleModalVisible(false);
}}
modalVisible={modalVisible}
values={{}}
/>
{formValues && Object.keys(formValues).length ? (
<ClusterConfigurationForm
onSubmit={async (value) => {
const success = await handleAddOrUpdate("api/clusterConfiguration", value);
......@@ -336,31 +335,31 @@ const ClusterConfigurationTableList: React.FC<{}> = (props: any) => {
modalVisible={updateModalVisible}
values={formValues}
/>
): null}
<Drawer
width={600}
visible={!!row}
onClose={() => {
setRow(undefined);
}}
closable={false}
>
{row?.name && (
<ProDescriptions<ClusterConfigurationTableListItem>
column={2}
title={row?.name}
request={async () => ({
) : null}
<Drawer
width={600}
visible={!!row}
onClose={() => {
setRow(undefined);
}}
closable={false}
>
{row?.name && (
<ProDescriptions<ClusterConfigurationTableListItem>
column={2}
title={row?.name}
request={async () => ({
data: row || {},
})}
params={{
params={{
id: row?.name,
}}
columns={columns}
/>
)}
</Drawer>
columns={columns}
/>
)}
</Drawer>
</PageContainer>
);
);
};
export default ClusterConfigurationTableList;
......@@ -35,7 +35,7 @@ export type UpdateFormProps = {
values: Partial<DataBaseItem>;
};
const data:any = [
const data: any = [
{
type: 'MySql',
},
......@@ -76,11 +76,11 @@ const DBForm: React.FC<UpdateFormProps> = (props) => {
const [dbType, setDbType] = useState<string>();
const chooseOne = (item:DataBaseItem)=>{
const chooseOne = (item: DataBaseItem) => {
setDbType(item.type);
};
const onSubmit = async (value:any)=>{
const onSubmit = async (value: any) => {
const success = await createOrModifyDatabase(value);
if (success) {
handleChooseDBModalVisible();
......@@ -89,25 +89,25 @@ const DBForm: React.FC<UpdateFormProps> = (props) => {
}
};
const onTest = async (value:any)=>{
const onTest = async (value: any) => {
await testDatabaseConnect(value);
};
return (
<Modal
width={800}
width={"40%"}
bodyStyle={{padding: '32px 40px 48px'}}
title={values.id?'编辑数据源':'创建数据源'}
title={values.id ? '编辑数据源' : '创建数据源'}
visible={modalVisible}
onCancel={() => {
setDbType(undefined);
handleChooseDBModalVisible();
}}
maskClosable = {false}
destroyOnClose = {true}
maskClosable={false}
destroyOnClose={true}
footer={null}
>{
(!dbType&&!values.id)&&(<List
(!dbType && !values.id) && (<List
grid={{
gutter: 16,
xs: 1,
......@@ -118,8 +118,10 @@ const DBForm: React.FC<UpdateFormProps> = (props) => {
xxl: 4,
}}
dataSource={data}
renderItem={(item:DataBaseItem) => (
<List.Item onClick={()=>{chooseOne(item)}}>
renderItem={(item: DataBaseItem) => (
<List.Item onClick={() => {
chooseOne(item)
}}>
<Card>
<Image
height={80}
......@@ -134,8 +136,8 @@ const DBForm: React.FC<UpdateFormProps> = (props) => {
}
<DataBaseForm
onCancel={() => setDbType(undefined)}
modalVisible={!!values.type||!!dbType}
type={(!values.type)?dbType:values.type}
modalVisible={!!values.type || !!dbType}
type={(!values.type) ? dbType : values.type}
values={values}
onSubmit={(value) => {
onSubmit(value);
......
......@@ -86,7 +86,7 @@ const DataBaseTableList: React.FC<{}> = (props: any) => {
};
return (
<PageContainer>
<PageContainer title={false}>
<ProList
actionRef={actionRef}
toolBarRender={() => {
......
......@@ -24,7 +24,7 @@ import {DocumentTableListItem} from "@/pages/Document/data";
import TextArea from "antd/es/input/TextArea";
import {getDocumentFormData,} from "@/pages/Document/function";
export type DocumentFormProps = {
export type DocumentFormProps = {
onCancel: (flag?: boolean) => void;
onSubmit: (values: Partial<DocumentTableListItem>) => void;
modalVisible: boolean;
......@@ -54,7 +54,7 @@ const DocumentForm: React.FC<DocumentFormProps> = (props) => {
fillValue: props.values.fillValue,
version: props.values.version,
likeNum: props.values.likeNum,
enabled: props.values.enabled?props.values.enabled:true,
enabled: props.values.enabled ? props.values.enabled : true,
});
const {
......@@ -66,8 +66,8 @@ const DocumentForm: React.FC<DocumentFormProps> = (props) => {
const submitForm = async () => {
const fieldsValue = await form.validateFields();
setFormVals({...formVals,...fieldsValue});
handleSubmit({...formVals,...fieldsValue});
setFormVals({...formVals, ...fieldsValue});
handleSubmit({...formVals, ...fieldsValue});
};
const renderContent = (formVals) => {
......@@ -84,7 +84,7 @@ const DocumentForm: React.FC<DocumentFormProps> = (props) => {
label="文档类型"
rules={[{required: true, message: '请选择该文档所属类型!'}]}
>
<Select allowClear>
<Select allowClear>
<Option value="Method">Method</Option>
<Option value="Function">Function</Option>
<Option value="Constructor">Constructor</Option>
......@@ -120,7 +120,7 @@ const DocumentForm: React.FC<DocumentFormProps> = (props) => {
label="类型"
rules={[{required: true, message: '请选择该文档所属函数类型!'}]}
>
<Select allowClear>
<Select allowClear>
<Option value="优化参数">优化参数</Option>
<Option value="建表语句">建表语句</Option>
<Option value="CataLog">CataLog</Option>
......@@ -165,22 +165,23 @@ const DocumentForm: React.FC<DocumentFormProps> = (props) => {
label="填充值"
rules={[{required: true, message: '请输入填充值!'}]}
>
<TextArea placeholder="请输入填充值,编辑器内使用名称触发提示 eg: 如果希望在函数LTRIM(parms)中输入参数 则语法为: LTRIM(${1:}) 此时的1代表第一个光标 如需多个 数字+1即可 tab键切换光标 ; 如不需要参数则直接输入期望填充值"
allowClear
autoSize={{minRows: 3, maxRows: 10}}/>
<TextArea
placeholder="请输入填充值,编辑器内使用名称触发提示 eg: 如果希望在函数LTRIM(parms)中输入参数 则语法为: LTRIM(${1:}) 此时的1代表第一个光标 如需多个 数字+1即可 tab键切换光标 ; 如不需要参数则直接输入期望填充值"
allowClear
autoSize={{minRows: 3, maxRows: 10}}/>
</FormItem>
<FormItem
name="version"
label="版本"
rules={[{required: true, message: '请选择该文档所属版本!'}]}
>
<Select allowClear >
<Select allowClear>
<Option value="1.11">Flink-1.11</Option>
<Option value="1.12">Flink-1.12</Option>
<Option value="1.13">Flink-1.13</Option>
<Option value="1.14">Flink-1.14</Option>
<Option value="1.15">Flink-1.15</Option>
<Option value="ALL Version">ALL Version</Option>
<Option value="ALL Version">ALL Version</Option>
</Select>
</FormItem>
<FormItem
......@@ -207,10 +208,10 @@ const DocumentForm: React.FC<DocumentFormProps> = (props) => {
return (
<Modal
width={1200}
width={"40%"}
bodyStyle={{padding: '32px 40px 48px'}}
destroyOnClose
title={formVals.id?"维护文档":"创建文档"}
title={formVals.id ? "维护文档" : "创建文档"}
visible={modalVisible}
footer={renderFooter()}
onCancel={() => handleModalVisible()}
......
......@@ -140,58 +140,58 @@ const DocumentTableList: React.FC<{}> = (props: any) => {
}, {
text: 'Property',
value: 'Property',
},{
}, {
text: 'Event',
value: 'Event',
},{
}, {
text: 'Operator',
value: 'Operator',
},{
}, {
text: 'Unit',
value: 'Unit',
},{
}, {
text: 'Value',
value: 'Value',
},{
}, {
text: 'Constant',
value: 'Constant',
},{
}, {
text: 'Enum',
value: 'Enum',
},{
}, {
text: 'EnumMember',
value: 'EnumMember',
},{
}, {
text: 'Keyword',
value: 'Keyword',
},{
}, {
text: 'Text',
value: 'Text',
},{
}, {
text: 'Color',
value: 'Color',
},{
}, {
text: 'File',
value: 'File',
},{
}, {
text: 'Reference',
value: 'Reference',
},{
}, {
text: 'Customcolor',
value: 'Customcolor',
},{
}, {
text: 'Folder',
value: 'Folder',
},{
}, {
text: 'TypeParameter',
value: 'TypeParameter',
},{
}, {
text: 'User',
value: 'User',
},{
}, {
text: 'Issue',
value: 'Issue',
},{
}, {
text: 'Snippet',
value: 'Snippet',
},
......@@ -288,87 +288,87 @@ const DocumentTableList: React.FC<{}> = (props: any) => {
{
text: 'Batch/Streaming',
value: 'Batch/Streaming',
},{
}, {
text: 'Batch',
value: 'Batch',
},{
}, {
text: 'Streaming',
value: 'Streaming',
},{
}, {
text: 'Other',
value: 'Other',
},{
}, {
text: '比较函数',
value: '比较函数',
},{
}, {
text: '逻辑函数',
value: '逻辑函数',
},{
}, {
text: '算术函数',
value: '算术函数',
},{
}, {
text: '字符串函数',
value: '字符串函数',
},{
}, {
text: '时间函数',
value: '时间函数',
},{
}, {
text: '类型转换函数功能',
value: '类型转换函数功能',
},{
}, {
text: '条件函数',
value: '条件函数',
},{
}, {
text: 'Collection 函数',
value: 'Collection 函数',
},{
}, {
text: 'Value Construction函数',
value: 'Value Construction函数',
},{
}, {
text: 'Value Access函数',
value: 'Value Access函数',
},{
}, {
text: '分组函数',
value: '分组函数',
},{
}, {
text: 'hash函数',
value: 'hash函数',
},{
}, {
text: '聚合函数',
value: '聚合函数',
},{
}, {
text: '列函数',
value: '列函数',
},{
}, {
text: '表值聚合函数',
value: '表值聚合函数',
},{
}, {
text: '其他函数',
value: '其他函数',
},
],
filterMultiple: false,
valueEnum: {
'Batch/Streaming' : {text: 'Batch/Streaming'},
'Batch' : {text: 'Batch'},
'Streaming' : {text: 'Streaming'},
'Other' : {text: 'Other'},
'比较函数' : {text: '比较函数'},
'逻辑函数' : {text: '逻辑函数'},
'算术函数' : {text: '算术函数'},
'字符串函数' : {text: '字符串函数'},
'时间函数' : {text: '时间函数'},
'条件函数' : {text: '条件函数'},
'类型转换函数功能' : {text: '类型转换函数功能'},
'Collection 函数' : {text: 'Collection 函数'},
'Value Construction函数' : {text: 'Value Construction函数'},
'Value Access函数' : {text: 'Value Access函数'},
'分组函数' : {text: '分组函数'},
'hash函数' : {text: 'hash函数'},
'聚合函数' : {text: '聚合函数'},
'列函数' : {text: '列函数'},
'表值聚合函数' : {text: '表值聚合函数'},
'其他函数' : {text: '其他函数'},
'Batch/Streaming': {text: 'Batch/Streaming'},
'Batch': {text: 'Batch'},
'Streaming': {text: 'Streaming'},
'Other': {text: 'Other'},
'比较函数': {text: '比较函数'},
'逻辑函数': {text: '逻辑函数'},
'算术函数': {text: '算术函数'},
'字符串函数': {text: '字符串函数'},
'时间函数': {text: '时间函数'},
'条件函数': {text: '条件函数'},
'类型转换函数功能': {text: '类型转换函数功能'},
'Collection 函数': {text: 'Collection 函数'},
'Value Construction函数': {text: 'Value Construction函数'},
'Value Access函数': {text: 'Value Access函数'},
'分组函数': {text: '分组函数'},
'hash函数': {text: 'hash函数'},
'聚合函数': {text: '聚合函数'},
'列函数': {text: '列函数'},
'表值聚合函数': {text: '表值聚合函数'},
'其他函数': {text: '其他函数'},
},
},
{
......@@ -473,7 +473,7 @@ const DocumentTableList: React.FC<{}> = (props: any) => {
];
return (
<PageContainer>
<PageContainer title={false}>
<ProTable<DocumentTableListItem>
headerTitle="文档管理"
actionRef={actionRef}
......
......@@ -22,7 +22,7 @@ import {Button, Form, Input, Modal, Switch} from 'antd';
import TextArea from "antd/es/input/TextArea";
import {FragmentVariableTableListItem} from "@/pages/FragmentVariable/data";
export type FragmentFormProps = {
export type FragmentFormProps = {
onCancel: (flag?: boolean) => void;
onSubmit: (values: Partial<FragmentVariableTableListItem>) => void;
modalVisible: boolean;
......@@ -38,7 +38,7 @@ const formLayout = {
wrapperCol: {span: 13},
};
const FragmentForm : React.FC<FragmentFormProps> = (props:any) => {
const FragmentForm: React.FC<FragmentFormProps> = (props: any) => {
const [form] = Form.useForm();
const [formVals, setFormVals] = useState<Partial<FragmentVariableTableListItem>>({
......@@ -62,11 +62,11 @@ const FragmentForm : React.FC<FragmentFormProps> = (props:any) => {
const submitForm = async () => {
const fieldsValue = await form.validateFields();
fieldsValue.id = formVals.id;
setFormVals({...formVals,...fieldsValue});
handleSubmit({...formVals,...fieldsValue});
setFormVals({...formVals, ...fieldsValue});
handleSubmit({...formVals, ...fieldsValue});
};
const renderContent = (formVals : FragmentVariableTableListItem) => {
const renderContent = (formVals: FragmentVariableTableListItem) => {
return (
<>
<FormItem
......@@ -120,10 +120,10 @@ const FragmentForm : React.FC<FragmentFormProps> = (props:any) => {
return (
<Modal
width={1200}
width={"40%"}
bodyStyle={{padding: '32px 40px 48px'}}
destroyOnClose
title={formVals.id?"维护全局变量":"新建全局变量"}
title={formVals.id ? "维护全局变量" : "新建全局变量"}
visible={modalVisible}
footer={renderFooter()}
onCancel={() => handleModalVisible()}
......
......@@ -183,7 +183,7 @@ const FragmentTableList: React.FC<{}> = (props: any) => {
];
return (
<PageContainer>
<PageContainer title={false}>
<ProTable<FragmentVariableTableListItem>
headerTitle="全局变量列表"
actionRef={actionRef}
......
......@@ -18,8 +18,8 @@
*/
import React, {useEffect, useState} from 'react';
import {Form, Button, Input, Modal, Select,Divider,Switch} from 'antd';
import React, {useState} from 'react';
import {Button, Divider, Form, Input, Modal, Select, Switch} from 'antd';
import {JarTableListItem} from "@/pages/Jar/data";
export type JarFormProps = {
......@@ -42,12 +42,12 @@ const JarForm: React.FC<JarFormProps> = (props) => {
id: props.values.id,
name: props.values.name,
alias: props.values.alias,
type: props.values.type?props.values.type:'UserApp',
type: props.values.type ? props.values.type : 'UserApp',
path: props.values.path,
mainClass: props.values.mainClass,
paras: props.values.paras,
note: props.values.note,
enabled: props.values.enabled?props.values.enabled:true,
enabled: props.values.enabled ? props.values.enabled : true,
});
const {
......@@ -139,10 +139,10 @@ const JarForm: React.FC<JarFormProps> = (props) => {
return (
<Modal
width={1200}
width={"40%"}
bodyStyle={{padding: '32px 40px 48px'}}
destroyOnClose
title={formVals.id?"维护Jar配置":"创建Jar配置"}
title={formVals.id ? "维护Jar配置" : "创建Jar配置"}
visible={modalVisible}
footer={renderFooter()}
onCancel={() => handleModalVisible()}
......
......@@ -228,7 +228,7 @@ const JarTableList: React.FC<{}> = (props: any) => {
];
return (
<PageContainer>
<PageContainer title={false}>
<ProTable<JarTableListItem>
headerTitle="Jar 配置管理"
actionRef={actionRef}
......
......@@ -27,7 +27,7 @@ import {loadSettings} from "@/pages/SettingCenter/FlinkSettings/function";
type SettingsProps = {
dispatch:any;
dispatch: any;
};
const Settings: React.FC<SettingsProps> = (props) => {
......@@ -37,9 +37,9 @@ const Settings: React.FC<SettingsProps> = (props) => {
return (
<PageContainer>
<FlinkConfigView />
</PageContainer>
<PageContainer title={false}>
<FlinkConfigView/>
</PageContainer>
);
};
export default connect(({Settings}: { Settings: SettingsStateType }) => ({
......
......@@ -123,7 +123,7 @@ const Login: React.FC = () => {
//const {code } = userLoginState;
const handleShowTenant = (item: API.LoginParams) => {
const handleShowTenant = () => {
return <>
<Modal title={intl.formatMessage({id: 'pages.login.chooseTenant'})} visible={chooseTenant} destroyOnClose={true}
......@@ -291,7 +291,7 @@ const Login: React.FC = () => {
</div>
</div>
<Footer/>
{handleShowTenant(userParamsState)}
{handleShowTenant()}
</div>
);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment