8x48/KnowStreaming
1
0
Fork 0
mirror of https://github.com/didi/KnowStreaming.git synced 2026-01-03 19:38:20 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

v2.1 fe

Browse Source
This commit is contained in:
zengqiao
2020-12-19 00:40:52 +08:00
parent 49280a8617
commit 447a575f4f
83 changed files with 1578 additions and 559 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
kafka-manager-console/src/container/modal/admin/cluster.ts
View File

@@ -29,6 +29,7 @@ export const showEditClusterTopic = (item: IClusterTopics) => {
}],
attrs: {
placeholder: '请输入应用ID',
disabled: true,
},
},
{
@@ -57,7 +58,7 @@ export const showEditClusterTopic = (item: IClusterTopics) => {
key: 'properties',
label: 'Topic属性列表',
type: 'text_area',
rules: [{ required: false}],
rules: [{ required: false }],
attrs: {
placeholder: '请输入Topic属性列表',
},
@@ -78,7 +79,7 @@ export const showEditClusterTopic = (item: IClusterTopics) => {
clusterName: item.clusterName,
appId: item.appId,
topicName: item.topicName,
retentionTime: transMSecondToHour(item.retentionTime),
retentionTime: transMSecondToHour(item.retentionTime),
properties: JSON.stringify(item.properties, null, 4),
description: item.description,
},
@@ -97,18 +98,13 @@ export const showEditClusterTopic = (item: IClusterTopics) => {
};
export const showLogicalClusterOpModal = (clusterId: number, record?: ILogicalCluster) => {
let clusterModes = [] as IConfigInfo[];
clusterModes = cluster.clusterModes ? cluster.clusterModes : clusterModes;
const xFormModal = {
formMap: [
{
key: 'logicalClusterName',
label: '逻辑集群名称',
rules: [{ required: true, message: '请输入逻辑集群名称' }],
attrs: {
disabled: record ? true : false,
},
},
let isShow = false;
if (record && record.mode != 0) {
isShow = true;
}
const updateFormModal = (isShow: boolean) => {
const formMap = wrapper.xFormWrapper.formMap;
isShow ? formMap.splice(2, 0,
{
key: 'appId',
label: '所属应用',
@@ -123,6 +119,41 @@ export const showLogicalClusterOpModal = (clusterId: number, record?: ILogicalCl
attrs: {
placeholder: '请选择所属应用',
},
}) : formMap.splice(2, 1);
const formData = wrapper.xFormWrapper.formData;
wrapper.ref && wrapper.ref.updateFormMap$(formMap, formData || {});
};
let clusterModes = [] as IConfigInfo[];
clusterModes = cluster.clusterModes ? cluster.clusterModes : clusterModes;
let xFormModal = {
formMap: [
{
key: 'logicalClusterName',
label: '逻辑集群中文名称',
// defaultValue:'',
rules: [{
required: true,
message: '请输入逻辑集群中文名称，支持中文、字母、数字、下划线(_)和短划线(-)组成，长度在3-128字符之间', // 不能以下划线（_）和短划线(-)开头和结尾
pattern: /^[a-zA-Z0-9_\-\u4e00-\u9fa5]{3,128}$/g, //(?!(_|\-))(?!.*?(_|\-)$)
}],
attrs: {
// disabled: record ? true : false,
placeholder:'请输入逻辑集群中文名称'
},
},
{
key: 'logicalClusterName1',
label: '逻辑集群英文名称',
// defaultValue:'',
rules: [{
required: true,
message: '请输入逻辑集群英文名称，支持字母、数字、下划线(_)和短划线(-)组成，长度在3-128字符之间', //不能以下划线（_）和短划线(-)开头和结尾
pattern:/^[a-zA-Z0-9_\-]{3,128}$/g, //(?!(_|\-))(?!.*?(_|\-)$)
}],
attrs: {
disabled: record ? true : false,
placeholder:'请输入逻辑集群英文名称，创建后无法修改'
},
},
{
key: 'mode',
@@ -136,8 +167,32 @@ export const showLogicalClusterOpModal = (clusterId: number, record?: ILogicalCl
};
}),
attrs: {
onChange(item: any) {
if (isShow && item == 0) {
updateFormModal(false);
isShow = false;
} else if (!isShow && (item == 1 || item == 2)) {
updateFormModal(true);
isShow = true;
}
},
},
},
// {
// key: 'appId',
// label: '所属应用',
// rules: [{ required: true , message: '请选择所属应用' }],
// type: 'select',
// options: app.adminAppData.map(item => {
// return {
// label: item.name,
// value: item.appId,
// };
// }),
// attrs: {
// placeholder: '请选择所属应用',
// },
// },
{
key: 'regionIdList',
label: 'RegionIdList',
@@ -149,10 +204,10 @@ export const showLogicalClusterOpModal = (clusterId: number, record?: ILogicalCl
value: item.id,
};
}),
rules: [{ required: true, message: '请选择BrokerIdList' }],
rules: [{ required: true, message: '请选择RegionIdList' }],
attrs: {
mode: 'multiple',
placeholder: '请选择BrokerIdList',
placeholder: '请选择RegionIdList',
},
},
{
@@ -169,7 +224,7 @@ export const showLogicalClusterOpModal = (clusterId: number, record?: ILogicalCl
],
formData: record,
visible: true,
title: '新增逻辑集群',
title: record ? '编辑逻辑集群' : '新增逻辑集群',
onSubmit: (value: INewLogical) => {
const params = {
appId: value.appId,
@@ -178,6 +233,7 @@ export const showLogicalClusterOpModal = (clusterId: number, record?: ILogicalCl
id: record ? record.logicalClusterId : '',
mode: value.mode,
name: value.logicalClusterName,
englishName:value.logicalClusterEName, // 存储逻辑集群英文名称
regionIdList: value.regionIdList,
} as INewLogical;
if (record) {
@@ -190,11 +246,12 @@ export const showLogicalClusterOpModal = (clusterId: number, record?: ILogicalCl
});
},
};
wrapper.open(xFormModal);
};
export const showClusterRegionOpModal = (clusterId: number, content: IMetaData, record?: IBrokersRegions) => {
const xFormModal = {
const xFormModal = {
formMap: [
{
key: 'name',
@@ -216,9 +273,9 @@ export const showClusterRegionOpModal = (clusterId: number, content: IMetaData,
key: 'brokerIdList',
label: 'Broker列表',
defaultValue: record ? record.brokerIdList.join(',') : [] as any,
rules: [{ required: true, message: '请输入BrokerIdList' }],
rules: [{ required: true, message: '请输入BrokerID,多个BrokerID用半角逗号分隔' }],
attrs: {
placeholder: '请输入BrokerIdList',
placeholder: '请输入BrokerID,多个BrokerID用半角逗号分隔',
},
},
{
@@ -274,5 +331,5 @@ export const showClusterRegionOpModal = (clusterId: number, content: IMetaData,
});
},
};
wrapper.open(xFormModal);
wrapper.open(xFormModal);
};

173
kafka-manager-console/src/container/modal/admin/confirm-detail-topic.tsx Normal file
View File

@@ -0,0 +1,173 @@
import * as React from 'react';
import { admin } from 'store/admin';
import { notification, Modal, Form, Input, Switch, Select, Tooltip, Radio } from 'antd';
import { IBrokersMetadata, IBrokersRegions, IExpand } from 'types/base-type';
import { searchProps } from 'constants/table';
import { expandPartition } from 'lib/api';
const layout = {
labelCol: { span: 6 },
wrapperCol: { span: 15 },
};
interface IXFormProps {
form: any;
formData?: any;
visible?: boolean;
handleVisible?: any;
clusterId?: number;
deleteTopic?: any;
}
class CustomForm extends React.Component<IXFormProps> {
// public state = {
// checked: false,
// };
// public onSwitchChange(checked: boolean) {
// this.setState({ checked });
// this.props.form.validateFields((err: any, values: any) => {
// checked ? values.brokerIdList = [] : values.regionId = '';
// });
// }
public handleExpandOk() {
this.props.form.validateFields((err: any, values: any) => {
const deleteData = this.props.formData;
if (!err) {
// console.log('values', values);
if (values.topicName !== this.props.formData.topicName) {
notification.error({ message: 'topic名称不正确，请重新输入' });
} else {
this.props.handleVisible(false);
// 调用删除接口
this.props.deleteTopic(deleteData);
}
}
// if (!err) {
// this.props.handleVisible(false);
// const params = {
// topicName: values.topicName,
// clusterId: this.props.clusterId,
// partitionNum: values.partitionNum,
// } as IExpand;
// if (values.brokerIdList) {
// params.brokerIdList = values.brokerIdList;
// } else {
// params.regionId = values.regionId;
// }
// const valueParams = [] as IExpand[];
// valueParams.push(params);
// expandPartition(valueParams).then(data => {
// notification.success({ message: '扩分成功' });
// this.props.form.resetFields();
// admin.getClusterTopics(this.props.clusterId);
// });
});
}
public handleExpandCancel() {
this.props.handleVisible(false);
this.props.form.resetFields();
}
public componentDidMount() {
admin.getBrokersMetadata(this.props.clusterId);
admin.getBrokersRegions(this.props.clusterId);
}
public render() {
// console.log('props', this.props);
const { formData = {} as any, visible } = this.props;
const { getFieldDecorator } = this.props.form;
let metadata = [] as IBrokersMetadata[];
metadata = admin.brokersMetadata ? admin.brokersMetadata : metadata;
let regions = [] as IBrokersRegions[];
regions = admin.brokersRegions ? admin.brokersRegions : regions;
return (
<Modal
title="提示"
visible={visible}
onOk={() => this.handleExpandOk()}
onCancel={() => this.handleExpandCancel()}
maskClosable={false}
okText="确认"
cancelText="取消"
>
<Form {...layout} name="basic" onSubmit={() => ({})} >
{/* <Form.Item label="Topic名称" >
{getFieldDecorator('topicName', {
initialValue: formData.topicName,
rules: [{ required: true, message: '请输入Topic名称' }],
})(<Input disabled={true} placeholder="请输入Topic名称" />)}
</Form.Item> */}
{/* 运维管控-topic信息-扩分区操作 */}
{/* <Form.Item label="所属region" >
{getFieldDecorator('topicName', {
initialValue: formData.topicName,
rules: [{ required: true, message: '请输入所属region' }],
})(<Input disabled={true} placeholder="请输入所属region" />)}
</Form.Item> */}
{/* 运维管控-topic信息-扩分区操作 */}
<div style={{ textAlign: 'center', padding: '10px 0', fontSize: '13px', fontWeight: 'bold', color: 'red' }}>
<span>由于删除Topic是高危操作,需再次输入Topic名称进行确认。</span>
</div>
<Form.Item label="Topic名称" >
{getFieldDecorator('topicName', {
rules: [{
required: true,
message: 'topic名称错误',
}],
})(<Input />)}
</Form.Item>
{/* <Form.Item label="brokerIdList" style={{ display: this.state.checked ? 'none' : '' }}>
{getFieldDecorator('brokerIdList', {
initialValue: formData.brokerIdList,
rules: [{ required: !this.state.checked, message: '请输入brokerIdList' }],
})(
<Select
mode="multiple"
{...searchProps}
>
{metadata.map((v, index) => (
<Select.Option
key={v.brokerId || v.key || index}
value={v.brokerId}
>
{v.host.length > 16 ?
<Tooltip placement="bottomLeft" title={v.host}> {v.host} </Tooltip>
: v.host}
</Select.Option>
))}
</Select>,
)}
</Form.Item>*/}
{/* <Form.Item label="regionId" style={{ display: this.state.checked ? '' : 'none' }} >
{getFieldDecorator('regionId', {
initialValue: formData.regionId,
rules: [{ required: this.state.checked, message: '请选择regionId' }],
})(
<Select {...searchProps}>
{regions.map((v, index) => (
<Select.Option
key={v.id || v.key || index}
value={v.id}
>
{v.name.length > 16 ?
<Tooltip placement="bottomLeft" title={v.name}> {v.name} </Tooltip>
: v.name}
</Select.Option>
))}
</Select>,
)}
</Form.Item> */}
</Form>
</Modal>
);
}
}
export const ConfirmDetailTopicFormWrapper = Form.create<IXFormProps>()(CustomForm);

37
kafka-manager-console/src/container/modal/admin/expand-partition.tsx
View File

@@ -1,6 +1,6 @@
import * as React from 'react';
import { admin } from 'store/admin';
import { notification, Modal, Form, Input, Switch, Select, Tooltip } from 'antd';
import { notification, Modal, Form, Input, Switch, Select, Tooltip, Radio } from 'antd';
import { IBrokersMetadata, IBrokersRegions, IExpand } from 'types/base-type';
import { searchProps } from 'constants/table';
import { expandPartition } from 'lib/api';
@@ -89,14 +89,31 @@ class CustomForm extends React.Component<IXFormProps> {
rules: [{ required: true, message: '请输入Topic名称' }],
})(<Input disabled={true} placeholder="请输入Topic名称" />)}
</Form.Item>
{/* 运维管控-topic信息-扩分区操作 */}
<Form.Item label="所属region" >
{getFieldDecorator('regionNameList', {
initialValue: admin.topicsBasic ? admin.topicsBasic.regionNameList : '',
rules: [{ required: true, message: '请输入所属region' }],
})(<Input disabled={true} />)}
</Form.Item>
{/* 运维管控-topic信息-扩分区操作 */}
<Form.Item label="分区数" >
{getFieldDecorator('partitionNum', {
rules: [{ required: true,
message: '请输入分区数' }],
rules: [{
required: true,
message: '请输入分区数',
}],
})(<Input placeholder="请输入分区数" />)}
</Form.Item>
<Form.Item label={this.state.checked ? 'Region类型' : 'Borker类型'} >
<Switch onChange={(checked) => this.onSwitchChange(checked)} />
<Form.Item label="类型">
{/* <Form.Item label={this.state.checked ? 'Region类型' : 'Borker类型'} > */}
{/* <Switch onChange={(checked) => this.onSwitchChange(checked)} /> */}
<Radio.Group value={this.state.checked ? 'region' : 'broker'} onChange={(e) => { this.onSwitchChange(e.target.value === 'region' ? true : false); }}>
<Radio.Button value="region">Region类型</Radio.Button>
<Radio.Button value="broker">Borker类型</Radio.Button>
</Radio.Group>
</Form.Item>
<Form.Item label="brokerIdList" style={{ display: this.state.checked ? 'none' : '' }}>
{getFieldDecorator('brokerIdList', {
@@ -107,14 +124,14 @@ class CustomForm extends React.Component<IXFormProps> {
mode="multiple"
{...searchProps}
>
{ metadata.map((v, index) => (
{metadata.map((v, index) => (
<Select.Option
key={v.brokerId || v.key || index}
value={v.brokerId}
>
{v.host.length > 16 ?
<Tooltip placement="bottomLeft" title={v.host}> {v.host} </Tooltip>
: v.host}
{v.host.length > 16 ?
<Tooltip placement="bottomLeft" title={v.host}> {v.host} </Tooltip>
: v.host}
</Select.Option>
))}
</Select>,
@@ -127,7 +144,7 @@ class CustomForm extends React.Component<IXFormProps> {
rules: [{ required: this.state.checked, message: '请选择regionId' }],
})(
<Select {...searchProps}>
{ regions.map((v, index) => (
{regions.map((v, index) => (
<Select.Option
key={v.id || v.key || index}
value={v.id}

52
kafka-manager-console/src/container/modal/admin/leader-rebalance.tsx
View File

@@ -1,5 +1,5 @@
import * as React from 'react';
import { Table, notification, Button, Modal, Input, Form, Select, message, Tooltip } from 'component/antd';
import { Table, notification, Button, Modal, Input, Form, Select, message, Tooltip, Icon, Spin } from 'component/antd';
import { IBrokersMetadata, IRebalance } from 'types/base-type';
import { admin } from 'store/admin';
import { implementRegions, rebalanceStatus } from 'lib/api';
@@ -27,6 +27,7 @@ class LeaderRebalanceModal extends React.Component<IXFormProps> {
public state = {
imVisible: false,
status: '',
isExecutionBtn: false
};
public handleRebalanceCancel() {
@@ -48,6 +49,7 @@ class LeaderRebalanceModal extends React.Component<IXFormProps> {
public handleSubmit = (e: any) => {
e.preventDefault();
this.props.form.validateFields((err: any, values: any) => {
values.brokerId && this.setState({ isExecutionBtn: true })
if (!err) {
let params = {} as IRebalance;
params = {
@@ -58,12 +60,19 @@ class LeaderRebalanceModal extends React.Component<IXFormProps> {
topicName: '',
};
implementRegions(params).then(data => {
message.success('获取成功');
// message.success('获取成功');
this.getStatus();
this.setState({
imVisible: true,
isExecutionBtn: false
});
});
}).catch((err) => {
message.error('获取失败')
this.setState({
imVisible: true,
isExecutionBtn: false
});
})
}
});
}
@@ -77,7 +86,7 @@ class LeaderRebalanceModal extends React.Component<IXFormProps> {
public getStatus() {
rebalanceStatus(this.props.clusterId).then((data: any) => {
message.success('状态更新成功');
// message.success('状态更新成功');
if (data.code === 30) { // code -1 未知 101 成功 30 运行中
setTimeout(this.iTimer, 0);
} else {
@@ -91,6 +100,8 @@ class LeaderRebalanceModal extends React.Component<IXFormProps> {
public componentWillUnmount() {
clearInterval(this.timer);
}
// 执行加载图标
public antIcon = <Icon type="loading" style={{ fontSize: 12, color: '#cccccc' }} spin />
public render() {
const { visible } = this.props;
@@ -140,21 +151,21 @@ class LeaderRebalanceModal extends React.Component<IXFormProps> {
{getFieldDecorator('brokerId', {
rules: [{ required: true, message: '请输入Broker' }],
})(
<Select
onChange={(value: number) => this.onMetaChange(value)}
{...searchProps}
>
{this.metadata.map((v, index) => (
<Select.Option
key={v.brokerId || v.key || index}
value={v.brokerId}
>
{v.host.length > 16 ?
<Tooltip placement="bottomLeft" title={v.host}> {v.host} </Tooltip>
: v.host}
</Select.Option>
))}
</Select>)}
<Select
onChange={(value: number) => this.onMetaChange(value)}
{...searchProps}
>
{this.metadata.map((v, index) => (
<Select.Option
key={v.brokerId || v.key || index}
value={v.brokerId}
>
{v.host.length > 16 ?
<Tooltip placement="bottomLeft" title={v.host}> {v.host} </Tooltip>
: v.host}
</Select.Option>
))}
</Select>)}
</Form.Item>
<Form.Item label="" >
{getFieldDecorator('submit')(
@@ -162,8 +173,9 @@ class LeaderRebalanceModal extends React.Component<IXFormProps> {
htmlType="submit"
type="primary"
className="implement-button"
disabled={this.state.isExecutionBtn}
>
执行
{this.state.isExecutionBtn ? (<span>执行中<Spin indicator={this.antIcon} size="small" /></span>) : '执行'}
</Button>,
)}
</Form.Item>

82
kafka-manager-console/src/container/modal/admin/migration.ts
View File

@@ -19,42 +19,42 @@ export const startMigrationTask = (item: IReassignTasks, action: string) => {
};
export const modifyMigrationTask = (item: IReassignTasks, action: string) => {
const status: number = item.status;
const xFormModal = {
formMap: [
{
key: 'beginTime',
label: '计划开始时间',
type: 'date_picker',
rules: [{
required: status === 0,
message: '请输入计划开始时间',
}],
attrs: {
placeholder: '请输入计划开始时间',
format: timeFormat,
showTime: true,
disabled: status !== 0,
},
const status: number = item.status;
const xFormModal = {
formMap: [
{
key: 'beginTime',
label: '计划开始时间',
type: 'date_picker',
rules: [{
required: status === 0,
message: '请输入计划开始时间',
}],
attrs: {
placeholder: '请输入计划开始时间',
format: timeFormat,
showTime: true,
disabled: status !== 0,
},
],
formData: {
beginTime: moment(item.beginTime),
},
visible: true,
title: '操作迁移任务',
onSubmit: (value: IExecute) => {
const params = {
action,
beginTime: +moment(value.beginTime).format('x'),
taskId: item.taskId,
} as IExecute;
expert.getExecuteTask(params).then(data => {
notification.success({ message: '操作成功' });
});
},
};
wrapper.open(xFormModal);
],
formData: {
beginTime: moment(item.beginTime),
},
visible: true,
title: '操作迁移任务',
onSubmit: (value: IExecute) => {
const params = {
action,
beginTime: +moment(value.beginTime).format('x'),
taskId: item.taskId,
} as IExecute;
expert.getExecuteTask(params).then(data => {
notification.success({ message: '操作成功' });
});
},
};
wrapper.open(xFormModal);
};
export const modifyTransferTask = (item: IReassign, action: string, taskId: number) => {
@@ -287,6 +287,7 @@ export const addMigrationTask = () => {
formData: {},
visible: true,
title: '新建集群任务',
isWaitting: true,
onSubmit: (value: INewBulidEnums) => {
value.kafkaPackageName = value.kafkafileNameMd5.split(',')[0];
value.kafkaPackageMd5 = value.kafkafileNameMd5.split(',')[1];
@@ -294,10 +295,21 @@ export const addMigrationTask = () => {
value.serverPropertiesMd5 = value.serverfileNameMd5.split(',')[1];
delete value.kafkafileNameMd5;
delete value.serverfileNameMd5;
admin.addMigrationTask(value).then(data => {
return admin.addMigrationTask(value).then(data => {
notification.success({ message: '新建集群任务成功' });
});
},
onSubmitFaild: (err: any, ref: any, formData: any, formMap: any) => {
if (err.message === '主机列表错误，请检查主机列表') {
const hostList = ref.getFieldValue('hostList');
ref.setFields({
hostList: {
value: hostList,
errors: [new Error('主机列表错误，请检查主机列表')],
}
})
}
}
};
wrapper.open(xFormModal);
};

49
kafka-manager-console/src/container/modal/admin/task.ts
View File

@@ -12,12 +12,12 @@ const updateFormModal = (topicName?: string) => {
const formMap = wrapper.xFormWrapper.formMap;
const formData = wrapper.xFormWrapper.formData;
if (topicName) {
formMap[5].options = expert.partitionIdMap[topicName]; // 3
formMap[2].options = expert.partitionIdMap[topicName]; // 3
formData.originalRetentionTime = transMSecondToHour(admin.topicsBasic.retentionTime);
} else {
formMap[1].options = expert.taskTopicMetadata;
formMap[3].options = admin.brokersMetadata; // 2
formMap[4].options = admin.brokersRegions;
formMap[4].options = admin.brokersMetadata; // 2
formMap[5].options = admin.brokersRegions;
}
// tslint:disable-next-line:no-unused-expression
wrapper.ref && wrapper.ref.updateFormMap$(formMap, wrapper.xFormWrapper.formData, !!topicName, ['partitionIdList']);
@@ -25,11 +25,11 @@ const updateFormModal = (topicName?: string) => {
const updateInputModal = (status?: string) => {
const formMap = wrapper.xFormWrapper.formMap;
formMap[3].invisible = status === 'region';
formMap[4].invisible = status !== 'region';
formMap[4].invisible = status === 'region';
formMap[5].invisible = status !== 'region';
formMap[3].rules = [{required: status !== 'region'}];
formMap[4].rules = [{required: status === 'region'}];
formMap[4].rules = [{required: status !== 'region'}];
formMap[5].rules = [{required: status === 'region'}];
// tslint:disable-next-line:no-unused-expression
wrapper.ref && wrapper.ref.updateFormMap$(formMap, wrapper.xFormWrapper.formData);
};
@@ -81,6 +81,19 @@ export const createMigrationTasks = () => {
},
},
},
{
key: 'partitionIdList',
label: '分区ID',
type: 'select',
defaultValue: [] as any,
rules: [{
required: false,
}],
attrs: {
mode: 'tags',
placeholder: '请选择PartitionIdList',
},
},
{
key: 'species',
label: '类型',
@@ -110,10 +123,10 @@ export const createMigrationTasks = () => {
defaultValue: [] as any,
invisible: false,
options: admin.brokersMetadata,
rules: [{ required: true, message: '请选择Broker' }],
rules: [{ required: true, message: '请选择目标Broker,Broker数量需大于等于副本数量' }],
attrs: {
mode: 'multiple',
placeholder: '请选择Broker',
placeholder: '请选择目标Broker,Broker数量需大于等于副本数量',
},
},
{
@@ -123,24 +136,12 @@ export const createMigrationTasks = () => {
defaultValue: [] as any,
invisible: true,
options: admin.brokersRegions,
rules: [{ required: false, message: '请选择Region' }],
rules: [{ required: false, message: '请选择目标Region' }],
attrs: {
placeholder: '请选择Region',
},
},
{
key: 'partitionIdList',
label: '分区ID',
type: 'select',
defaultValue: [] as any,
rules: [{
required: false,
}],
attrs: {
mode: 'tags',
placeholder: '请选择PartitionIdList',
placeholder: '请选择目标Region',
},
},
{
key: 'beginTime',
label: '计划开始时间',

3
kafka-manager-console/src/container/modal/admin/user.ts
View File

@@ -12,6 +12,9 @@ export const showApplyModal = (record?: IUser) => {
key: 'username',
label: '用户名',
rules: [{ required: true, message: '请输入用户名' }],
attrs: {
disabled: record ? true : false
}
}, {
key: 'role',
label: '角色',

18
kafka-manager-console/src/container/modal/admin/version.ts
View File

@@ -1,10 +1,15 @@
import * as React from 'react';
import { notification } from 'component/antd';
import { IUploadFile, IConfigure } from 'types/base-type';
import { version } from 'store/version';
import { admin } from 'store/admin';
import { wrapper } from 'store';
import { computeChecksumMd5 } from 'lib/utils';
import format2json from 'format-to-json';
interface ISearchAndFilterState {
[filter: string]: boolean | string | number | any[];
}
const handleSelectChange = (e: number) => {
version.setAcceptFileType(e);
updateFormModal(e);
@@ -150,7 +155,11 @@ export const showModifyModal = (record: IUploadFile) => {
wrapper.open(xFormModal);
};
export const showConfigureModal = (record?: IConfigure) => {
export const showConfigureModal = async (record?: IConfigure) => {
if (record) {
const result:any = await format2json(record.configValue);
record.configValue = result.result;
}
const xFormModal = {
formMap: [
{
@@ -163,8 +172,11 @@ export const showConfigureModal = (record?: IConfigure) => {
}, {
key: 'configValue',
label: '配置值',
type: 'text_area',
rules: [{ required: true, message: '请输入配置值' }],
type: 'monaco_editor',
rules: [{
required: true,
message: '请输入配置值',
}],
}, {
key: 'configDescription',
label: '备注',

39
kafka-manager-console/src/container/modal/app.tsx
View File

@@ -28,8 +28,8 @@ export const showEditModal = (record?: IAppItem, from?: string, isDisabled?: boo
defaultValue: record && record.name || '',
rules: [{
required: isDisabled ? false : true,
message: '请输入不得超过64个字符',
pattern: /^.{1,64}$/,
message: '应用名称只支持中文、字母、数字、下划线、短划线，长度限制在3-64字符',
pattern: /[\u4e00-\u9fa5_a-zA-Z0-9_-]{3,64}/,
}],
attrs: { disabled: isDisabled },
}, {
@@ -45,11 +45,11 @@ export const showEditModal = (record?: IAppItem, from?: string, isDisabled?: boo
attrs: {
disabled: true,
suffix: (
<Icon
onClick={() => copyString(record.password)}
type="copy"
className="icon-color"
/>),
<Icon
onClick={() => copyString(record.password)}
type="copy"
className="icon-color"
/>),
},
}, {
key: 'idc',
@@ -64,7 +64,7 @@ export const showEditModal = (record?: IAppItem, from?: string, isDisabled?: boo
key: 'principalList',
label: '负责人',
type: 'custom',
customFormItem: <StaffSelect isDisabled={isDisabled}/>,
customFormItem: <StaffSelect isDisabled={isDisabled} />,
rules: [{
required: isDisabled ? false : true,
message: '请选择负责人（至少两人）',
@@ -74,18 +74,20 @@ export const showEditModal = (record?: IAppItem, from?: string, isDisabled?: boo
}
return true;
},
}],
}],
}, {
key: 'description',
label: '应用描述',
type: 'text_area',
rules: [{ required: isDisabled ? false : true, message: '请输入描述'}],
rules: [{ required: isDisabled ? false : true, message: '请输入描述' }],
attrs: { disabled: isDisabled },
},
],
formData: record,
visible: true,
title: `${isDisabled ? '详情' : record ? '编辑' : '应用申请'}`,
title: isDisabled ? '详情' : record ? '编辑' : <div><span>应用申请</span><a className='applicationDocument' href="###" target='_blank'>应用申请文档</a></div>,
// customRenderElement: isDisabled ? '' : record ? '' : <span className="tips">集群资源充足时，预计1分钟自动审批通过</span>,
isWaitting: true,
onSubmit: (value: IAppItem) => {
if (isDisabled) {
return;
@@ -98,7 +100,18 @@ export const showEditModal = (record?: IAppItem, from?: string, isDisabled?: boo
}
});
},
};
onSubmitFaild: (err: any, ref: any, formData: any, formMap: any) => {
if (err.message == '资源已经存在') {
const topic = ref.getFieldValue('name');
ref.setFields({
name: {
value: topic,
errors: [new Error('该应用名称已存在')],
}
})
}
}
};
wrapper.open(xFormModal);
};
@@ -116,7 +129,7 @@ const operateApp = (isEdit: boolean, value: IAppItem, record?: IAppItem, from?:
params.extensions = JSON.stringify({ principals, idc: value.idc, name: value.name });
let modifyParams = {};
if (isEdit) {
modifyParams = {
modifyParams = {
appId: record.appId,
description: value.description,
name: value.name,

4
kafka-manager-console/src/container/modal/cancel-topic-permission.tsx
View File

@@ -116,11 +116,11 @@ export class CancelTopicPermission extends React.Component {
type: 'check_box',
defaultValue: accessStatus,
options: [{
label: '消费权限',
label: '取消消费权限',
value: '1',
disabled: send,
}, {
label: '发送权限',
label: '取消发送权限',
value: '2',
disabled: consume,
}],

5
kafka-manager-console/src/container/modal/connect-topic-list.tsx
View File

@@ -1,5 +1,5 @@
import * as React from 'react';
import { Table, Modal, Tooltip, Icon, message, notification } from 'component/antd';
import { Table, Modal, Tooltip, Icon, message, notification, Alert } from 'component/antd';
import { getApplyOnlineColumns } from 'container/topic/config';
import { observer } from 'mobx-react';
import { modal } from 'store/modal';
@@ -59,7 +59,7 @@ export class ConnectTopicList extends React.Component {
maskClosable={false}
onCancel={this.handleCancel}
onOk={this.handleSubmit}
okText="下线"
okText="确认"
cancelText="取消"
okButtonProps={{ disabled: topic.connectLoading || !!topic.connectionInfo.length }}
width={700}
@@ -74,6 +74,7 @@ export class ConnectTopicList extends React.Component {
pagination={false}
bordered={true}
/>
<Alert message="如若有连接信息，则表示资源正处于使用中，禁止下线操作。如需下线，烦请关闭连接信息中的Kafka发送/消费客户端后再进行下线。" type="error" showIcon />
</Modal>
</>
);

5
kafka-manager-console/src/container/modal/offline-app-modal.tsx
View File

@@ -1,5 +1,5 @@
import * as React from 'react';
import { Table, Modal, Tooltip, Icon, message, notification } from 'component/antd';
import { Table, Modal, Tooltip, Icon, message, notification, Alert } from 'component/antd';
import { app } from 'store/app';
import { getApplyOnlineColumns } from 'container/topic/config';
import { observer } from 'mobx-react';
@@ -55,7 +55,7 @@ export class ConnectAppList extends React.Component {
maskClosable={false}
onCancel={this.handleCancel}
onOk={this.handleSubmit}
okText="下线"
okText="确认"
cancelText="取消"
okButtonProps={{ disabled: app.connectLoading || !!app.appsConnections.length }}
width={700}
@@ -70,6 +70,7 @@ export class ConnectAppList extends React.Component {
pagination={false}
bordered={true}
/>
<Alert message="如若有连接信息，则表示资源正处于使用中，禁止下线操作。如需下线，烦请关闭连接信息中的Kafka发送/消费客户端后再进行下线。" type="error" showIcon />
</Modal>
</>
);

2
kafka-manager-console/src/container/modal/offline-cluster-modal.tsx
View File

@@ -74,7 +74,7 @@ export class OfflineClusterModal extends React.Component {
maskClosable={false}
onCancel={this.handleCancel}
onOk={this.handleSubmit}
okText="下线"
okText="确认"
cancelText="取消"
okButtonProps={{ disabled: cluster.filterLoading || !!cluster.clusterMetaTopics.length }}
width={700}

49
kafka-manager-console/src/container/modal/order.tsx
View File

@@ -57,25 +57,26 @@ export const showApprovalModal = (info: IOrderInfo, status: number, from?: strin
}],
}, {
key: 'retentionTime',
label: '保存时间',
defaultValue: '48',
type: 'select',
options: [{
label: '12小时',
value: '12',
}, {
label: '24小时',
value: '24',
}, {
label: '48小时',
value: '48',
}, {
label: '72小时',
value: '72',
}],
label: '保存时间（/小时）',
defaultValue: '12',
type: 'input_number',
// options: [{
// label: '12小时',
// value: '12',
// }, {
// label: '24小时',
// value: '24',
// }, {
// label: '48小时',
// value: '48',
// }, {
// label: '72小时',
// value: '72',
// }],
rules: [{
required: true,
message: '请选择',
message: '请输入大于12小于999的整数',
pattern: /^([1-9]{1}[0-9]{2})$|^([2-9]{1}[0-9]{1})$|^(1[2-9]{1})$/,
}],
}, {
key: 'species',
@@ -242,11 +243,15 @@ export const showApprovalModal = (info: IOrderInfo, status: number, from?: strin
if ((type === 2 || type === 12) && status === 1) { // 通过配额 12分区
xFormWrapper.formMap.splice(1, 0, ...quotaFormMap);
}
wrapper.open(xFormWrapper);
};
export const renderOrderOpModal = (selectedRowKeys: IBaseOrder[], status: number) => {
export const renderOrderOpModal = (selectedRowKeys: IBaseOrder[], status: number, rowsCallBack?: any) => {
if (modal.actionAfterClose === 'close') {
// tslint:disable-next-line: no-unused-expression
rowsCallBack && rowsCallBack.onChange([], []);
order.setSelectedRows([]);
}
const orderIdList = selectedRowKeys.map((ele: IBaseOrder) => {
return ele.id;
});
@@ -283,6 +288,7 @@ export const renderOrderOpModal = (selectedRowKeys: IBaseOrder[], status: number
order.batchApprovalOrders(params).then(data => {
modal.setAction('close');
modal.showOrderOpResult();
order.setSelectedRows();
});
},
};
@@ -293,6 +299,7 @@ export const RenderOrderOpResult = () => {
const handleOk = () => {
order.getApplyOrderList(0);
order.getApprovalList(0);
order.setSelectedRows();
modal.close();
};
@@ -309,7 +316,7 @@ export const RenderOrderOpResult = () => {
render: (t: number) => {
return (
<span className={t === 0 ? 'success' : 'fail'}>
{t === 0 ? '成功' : '失败'}
{t === 0 ? '成功' : '失败'}
</span>
);
},
@@ -327,7 +334,7 @@ export const RenderOrderOpResult = () => {
render: (text: string) => {
return (
<Tooltip placement="bottomLeft" title={text} >
{text}
{text}
</Tooltip>);
},
},

2
kafka-manager-console/src/container/modal/render-order-op-result.tsx
View File

@@ -59,7 +59,7 @@ export class RenderOrderOpResult extends React.Component {
maskClosable={false}
onCancel={this.handleCancel}
onOk={this.handleSubmit}
okText="下线"
okText="确认"
cancelText="取消"
okButtonProps={{ disabled: topic.connectLoading || !!topic.connectionInfo.length }}
width={700}

44
kafka-manager-console/src/container/modal/topic.tsx
View File

@@ -22,7 +22,7 @@ export const applyTopic = () => {
formMap: [
{
key: 'clusterId',
label: '所属集群：',
label: '所属逻辑集群：',
type: 'select',
options: cluster.clusterData,
rules: [{ required: true, message: '请选择' }],
@@ -36,8 +36,8 @@ export const applyTopic = () => {
addonBefore: region.currentRegion === 'us' || region.currentRegion === 'ru' ? `${region.currentRegion}01_` : '',
},
rules: [
{ required: true },
{
required: true,
pattern: /^[-\w]{3,128}$/,
message: '只能包含字母、数字、下划线（_）和短划线(-),长度限制在3-128字符之间',
},
@@ -90,6 +90,8 @@ export const applyTopic = () => {
visible: true,
title: '申请Topic',
okText: '确认',
// customRenderElement: <span className="tips">集群资源充足时，预计1分钟自动审批通过</span>,
isWaitting: true,
onSubmit: (value: any) => {
value.topicName = region.currentRegion === 'us' || region.currentRegion === 'ru' ?
`${region.currentRegion}01_` + value.topicName : value.topicName;
@@ -102,11 +104,21 @@ export const applyTopic = () => {
description: value.description,
extensions: JSON.stringify(params),
};
topic.applyTopic(quotaParams).then(data => {
notification.success({ message: '申请Topic成功' });
return topic.applyTopic(quotaParams).then(data => {
window.location.href = `${urlPrefix}/user/order-detail/?orderId=${data.id}&region=${region.currentRegion}`;
});
})
},
onSubmitFaild: (err: any, ref: any, formData: any, formMap: any) => {
if (err.message === 'topic already existed') {
const topic = ref.getFieldValue('topicName');
ref.setFields({
topicName: {
value: topic,
errors: [new Error('该topic名称已存在')],
}
})
}
}
};
wrapper.open(xFormModal);
};
@@ -170,7 +182,7 @@ export const showApplyQuatoModal = (item: ITopic | IAppsIdInfo, record: IQuotaQu
formMap: [
{
key: 'clusterName',
label: '集群名称',
label: '逻辑集群名称',
rules: [{ required: true, message: '' }],
attrs: { disabled: true },
invisible: !item.hasOwnProperty('clusterName'),
@@ -187,7 +199,7 @@ export const showApplyQuatoModal = (item: ITopic | IAppsIdInfo, record: IQuotaQu
attrs: { disabled: true },
}, {
key: 'produceQuota',
label: '发送数据速率',
label: '申请发送数据速率',
attrs: {
disabled: isProduce,
placeholder: '请输入',
@@ -199,7 +211,7 @@ export const showApplyQuatoModal = (item: ITopic | IAppsIdInfo, record: IQuotaQu
}],
}, {
key: 'consumeQuota',
label: '消费数据速率',
label: '申请消费数据速率',
attrs: {
disabled: isConsume,
placeholder: '请输入',
@@ -282,10 +294,10 @@ export const showTopicApplyQuatoModal = (item: ITopic) => {
formMap: [
{
key: 'clusterName',
label: '集群名称',
label: '逻辑集群名称',
rules: [{ required: true, message: '' }],
attrs: { disabled: true },
invisible: !item.hasOwnProperty('clusterName'),
// invisible: !item.hasOwnProperty('clusterName'),
}, {
key: 'topicName',
label: 'Topic名称',
@@ -318,7 +330,7 @@ export const showTopicApplyQuatoModal = (item: ITopic) => {
},
}, { // 0 无权限 1可读 2可写 3 可读写 4可读写可管理
key: 'produceQuota',
label: '发送数据速率',
label: '申请发送数据速率',
attrs: {
disabled: false,
placeholder: '请输入',
@@ -330,7 +342,7 @@ export const showTopicApplyQuatoModal = (item: ITopic) => {
}],
}, {
key: 'consumeQuota',
label: '消费数据速率',
label: '申请消费数据速率',
attrs: {
disabled: false,
placeholder: '请输入',
@@ -704,14 +716,14 @@ export const applyExpandModal = (item: ITopic) => {
rules: [{ required: true }],
}, {
key: 'needIncrPartitionNum',
label: '分区',
label: '申请增加分区数量',
type: 'input_number',
rules: [{
required: true,
message: '请输入0-100正整数',
pattern: /^((?!0)\d{1,2}|100)$/,
message: '请输入0-1000正整数',
pattern: /^((?!0)\d{1,3}|1000)$/,
}],
attrs: { placeholder: '0-100正整数' },
attrs: { placeholder: '0-1000正整数' },
renderExtraElement: () => <div className="form-tip mr--10">分区标准为3MB/s一个，请按需申请</div>,
}, {
key: 'description',