8x48/KnowStreaming
1
0
Fork 0
mirror of https://github.com/didi/KnowStreaming.git synced 2026-01-05 04:50:55 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

迭代V2.5, 修复broker监控问题，增加JMX认证支持等...

Browse Source
This commit is contained in:
孙超
2021-02-09 15:26:47 +08:00
parent 2672502c07
commit 6080f76a9c
38 changed files with 810 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
kafka-manager-console/src/container/admin/cluster-detail/cluster-consumer.tsx
View File

@@ -100,7 +100,7 @@ export class ClusterConsumer extends SearchAndFilterContainer {
<div className="k-row">
<ul className="k-tab">
<li>{this.props.tab}</li>
{this.renderSearch()}
{this.renderSearch('', '请输入消费组名称')}
</ul>
<Table
columns={this.columns}

191
kafka-manager-console/src/container/admin/cluster-detail/cluster-controller.tsx
View File

@@ -2,7 +2,8 @@
import * as React from 'react';
import { SearchAndFilterContainer } from 'container/search-filter';
import { Table } from 'component/antd';
import { Table, Button, Popconfirm, Modal, Transfer, notification } from 'component/antd';
// import { Transfer } from 'antd'
import { observer } from 'mobx-react';
import { pagination } from 'constants/table';
import Url from 'lib/url-parser';
@@ -16,8 +17,12 @@ import { timeFormat } from 'constants/strategy';
export class ClusterController extends SearchAndFilterContainer {
public clusterId: number;
public state = {
public state: any = {
searchKey: '',
searchCandidateKey: '',
isCandidateModel: false,
mockData: [],
targetKeys: [],
};
constructor(props: any) {
@@ -37,6 +42,94 @@ export class ClusterController extends SearchAndFilterContainer {
return data;
}
public getCandidateData<T extends IController>(origin: T[]) {
let data: T[] = origin;
let { searchCandidateKey } = this.state;
searchCandidateKey = (searchCandidateKey + '').trim().toLowerCase();
data = searchCandidateKey ? origin.filter((item: IController) =>
(item.host !== undefined && item.host !== null) && item.host.toLowerCase().includes(searchCandidateKey as string),
) : origin;
return data;
}
// 候选controller
public renderCandidateController() {
const columns = [
{
title: 'BrokerId',
dataIndex: 'brokerId',
key: 'brokerId',
width: '20%',
sorter: (a: IController, b: IController) => b.brokerId - a.brokerId,
render: (r: string, t: IController) => {
return (
<a href={`${this.urlPrefix}/admin/broker-detail?clusterId=${this.clusterId}&brokerId=${t.brokerId}`}>{r}
</a>
);
},
},
{
title: 'BrokerHost',
key: 'host',
dataIndex: 'host',
width: '20%',
// render: (r: string, t: IController) => {
// return (
// <a href={`${this.urlPrefix}/admin/broker-detail?clusterId=${this.clusterId}&brokerId=${t.brokerId}`}>{r}
// </a>
// );
// },
},
{
title: 'Broker状态',
key: 'status',
dataIndex: 'status',
width: '20%',
render: (r: number, t: IController) => {
return (
<span>{r === 1 ? '不在线' : '在线'}</span>
);
},
},
{
title: '创建时间',
dataIndex: 'startTime',
key: 'startTime',
width: '25%',
sorter: (a: IController, b: IController) => b.timestamp - a.timestamp,
render: (t: number) => moment(t).format(timeFormat),
},
{
title: '操作',
dataIndex: 'operation',
key: 'operation',
width: '15%',
render: (r: string, t: IController) => {
return (
<Popconfirm
title="确定删除？"
onConfirm={() => this.deleteCandidateCancel(t)}
cancelText="取消"
okText="确认"
>
<a>删除</a>
</Popconfirm>
);
},
},
];
return (
<Table
columns={columns}
dataSource={this.getCandidateData(admin.controllerCandidate)}
pagination={pagination}
rowKey="key"
/>
);
}
public renderController() {
const columns = [
@@ -58,12 +151,6 @@ export class ClusterController extends SearchAndFilterContainer {
key: 'host',
dataIndex: 'host',
width: '30%',
// render: (r: string, t: IController) => {
// return (
// <a href={`${this.urlPrefix}/admin/broker-detail?clusterId=${this.clusterId}&brokerId=${t.brokerId}`}>{r}
// </a>
// );
// },
},
{
title: '变更时间',
@@ -87,16 +174,104 @@ export class ClusterController extends SearchAndFilterContainer {
public componentDidMount() {
admin.getControllerHistory(this.clusterId);
admin.getCandidateController(this.clusterId);
admin.getBrokersMetadata(this.clusterId);
}
public addController = () => {
this.setState({ isCandidateModel: true, targetKeys: [] })
}
public addCandidateChange = (targetKeys: any) => {
this.setState({ targetKeys })
}
public handleCandidateCancel = () => {
this.setState({ isCandidateModel: false });
}
public handleCandidateOk = () => {
let brokerIdList = this.state.targetKeys.map((item: any) => {
return admin.brokersMetadata[item].brokerId
})
admin.addCandidateController(this.clusterId, brokerIdList).then(data => {
notification.success({ message: '新增成功' });
admin.getCandidateController(this.clusterId);
}).catch(err => {
notification.error({ message: '新增失败' });
})
this.setState({ isCandidateModel: false, targetKeys: [] });
}
public deleteCandidateCancel = (target: any) => {
admin.deleteCandidateCancel(this.clusterId, [target.brokerId]).then(() => {
notification.success({ message: '删除成功' });
});
this.setState({ isCandidateModel: false });
}
public renderAddCandidateController() {
let filterControllerCandidate = admin.brokersMetadata.filter((item: any) => {
return !admin.filtercontrollerCandidate.includes(item.brokerId)
})
return (
<Modal
title="新增候选Controller"
visible={this.state.isCandidateModel}
// okText="确认"
// cancelText="取消"
maskClosable={false}
// onOk={() => this.handleCandidateOk()}
onCancel={() => this.handleCandidateCancel()}
footer={<>
<Button style={{ width: '60px' }} onClick={() => this.handleCandidateCancel()}>取消</Button>
<Button disabled={this.state.targetKeys.length > 0 ? false : true} style={{ width: '60px' }} type="primary" onClick={() => this.handleCandidateOk()}>确定</Button>
</>
}
>
<Transfer
dataSource={filterControllerCandidate}
targetKeys={this.state.targetKeys}
render={item => item.host}
onChange={(targetKeys) => this.addCandidateChange(targetKeys)}
titles={['未选', '已选']}
locale={{
itemUnit: '项',
itemsUnit: '项',
}}
listStyle={{
width: "45%",
}}
/>
</Modal>
);
}
public render() {
return (
<div className="k-row">
<ul className="k-tab">
<li>
<span>候选Controller</span>
<span style={{ display: 'inline-block', color: "#a7a8a9", fontSize: '12px', marginLeft: '15px' }}>Controller将会优先从以下Broker中选举</span>
</li>
<div style={{ display: 'flex' }}>
<div style={{ marginRight: '15px' }}>
<Button onClick={() => this.addController()} type='primary'>新增候选Controller</Button>
</div>
{this.renderSearch('', '请查找Host', 'searchCandidateKey')}
</div>
</ul>
{this.renderCandidateController()}
<ul className="k-tab" style={{ marginTop: '10px' }}>
<li>{this.props.tab}</li>
{this.renderSearch('', '请输入Host')}
</ul>
{this.renderController()}
{this.renderAddCandidateController()}
</div>
);
}

6
kafka-manager-console/src/container/admin/cluster-detail/index.less
View File

@@ -94,4 +94,10 @@
.region-prompt{
font-weight: bold;
text-align: center;
}
.asd{
display: flex;
justify-content: space-around;
align-items: center;
}

14
kafka-manager-console/src/container/admin/cluster-detail/index.tsx
View File

@@ -32,9 +32,9 @@ export class ClusterDetail extends React.Component {
}
public render() {
let content = {} as IMetaData;
content = admin.basicInfo ? admin.basicInfo : content;
return (
let content = {} as IMetaData;
content = admin.basicInfo ? admin.basicInfo : content;
return (
<>
<PageHeader
className="detail topic-detail-header"
@@ -46,7 +46,7 @@ export class ClusterDetail extends React.Component {
<ClusterOverview basicInfo={content} />
</TabPane>
<TabPane tab="Topic信息" key="2">
<ClusterTopic tab={'Topic信息'}/>
<ClusterTopic tab={'Topic信息'} />
</TabPane>
<TabPane tab="Broker信息" key="3">
<ClusterBroker tab={'Broker信息'} basicInfo={content} />
@@ -60,11 +60,11 @@ export class ClusterDetail extends React.Component {
<TabPane tab="逻辑集群信息" key="6">
<LogicalCluster tab={'逻辑集群信息'} basicInfo={content} />
</TabPane>
<TabPane tab="Controller变更历史" key="7">
<TabPane tab="Controller信息" key="7">
<ClusterController tab={'Controller变更历史'} />
</TabPane>
<TabPane tab="限流信息" key="8">
<CurrentLimiting tab={'限流信息'}/>
<TabPane tab="限流信息" key="8">
<CurrentLimiting tab={'限流信息'} />
</TabPane>
</Tabs>
</>

20
kafka-manager-console/src/container/admin/cluster-list/index.tsx
View File

@@ -12,6 +12,7 @@ import { urlPrefix } from 'constants/left-menu';
import { indexUrl } from 'constants/strategy'
import { region } from 'store';
import './index.less';
import Monacoeditor from 'component/editor/monacoEditor';
import { getAdminClusterColumns } from '../config';
const { confirm } = Modal;
@@ -132,6 +133,25 @@ export class ClusterList extends SearchAndFilterContainer {
"security.protocol": "SASL_PLAINTEXT",
"sasl.mechanism": "PLAIN",
"sasl.jaas.config": "org.apache.kafka.common.security.plain.PlainLoginModule required username=\\"xxxxxx\\" password=\\"xxxxxx\\";"
}`,
rows: 8,
},
},
{
key: 'jmxProperties',
label: 'JMX认证',
type: 'text_area',
rules: [{
required: false,
message: '请输入JMX认证',
}],
attrs: {
placeholder: `请输入JMX认证，例如：
{
"maxConn": 10, #KM对单台Broker对最大连接数
"username": "xxxxx", #用户名
"password": "xxxxx", #密码
"openSSL": true, #开启SSL，true表示开启SSL，false表示关闭
}`,
rows: 8,
},

86
kafka-manager-console/src/container/admin/config.tsx
View File

@@ -1,8 +1,8 @@
import * as React from 'react';
import { IUser, IUploadFile, IConfigure, IMetaData, IBrokersPartitions } from 'types/base-type';
import { IUser, IUploadFile, IConfigure, IConfigGateway, IMetaData } from 'types/base-type';
import { users } from 'store/users';
import { version } from 'store/version';
import { showApplyModal, showModifyModal, showConfigureModal } from 'container/modal/admin';
import { showApplyModal, showApplyModalModifyPassword, showModifyModal, showConfigureModal, showConfigGatewayModal } from 'container/modal/admin';
import { Popconfirm, Tooltip } from 'component/antd';
import { admin } from 'store/admin';
import { cellStyle } from 'constants/table';
@@ -27,6 +27,7 @@ export const getUserColumns = () => {
return (
<span className="table-operation">
<a onClick={() => showApplyModal(record)}>编辑</a>
<a onClick={() => showApplyModalModifyPassword(record)}>修改密码</a>
<Popconfirm
title="确定删除？"
onConfirm={() => users.deleteUser(record.username)}
@@ -184,6 +185,87 @@ export const getConfigureColumns = () => {
return columns;
};
// 网关配置
export const getConfigColumns = () => {
const columns = [
{
title: '配置类型',
dataIndex: 'type',
key: 'type',
width: '25%',
ellipsis: true,
sorter: (a: IConfigGateway, b: IConfigGateway) => a.type.charCodeAt(0) - b.type.charCodeAt(0),
},
{
title: '配置键',
dataIndex: 'name',
key: 'name',
width: '15%',
ellipsis: true,
sorter: (a: IConfigGateway, b: IConfigGateway) => a.name.charCodeAt(0) - b.name.charCodeAt(0),
},
{
title: '配置值',
dataIndex: 'value',
key: 'value',
width: '20%',
ellipsis: true,
sorter: (a: IConfigGateway, b: IConfigGateway) => a.value.charCodeAt(0) - b.value.charCodeAt(0),
render: (t: string) => {
return t.substr(0, 1) === '{' && t.substr(0, -1) === '}' ? JSON.stringify(JSON.parse(t), null, 4) : t;
},
},
{
title: '修改时间',
dataIndex: 'modifyTime',
key: 'modifyTime',
width: '15%',
sorter: (a: IConfigGateway, b: IConfigGateway) => b.modifyTime - a.modifyTime,
render: (t: number) => moment(t).format(timeFormat),
},
{
title: '版本号',
dataIndex: 'version',
key: 'version',
width: '10%',
ellipsis: true,
sorter: (a: IConfigGateway, b: IConfigGateway) => b.version.charCodeAt(0) - a.version.charCodeAt(0),
},
{
title: '描述信息',
dataIndex: 'description',
key: 'description',
width: '20%',
ellipsis: true,
onCell: () => ({
style: {
maxWidth: 180,
...cellStyle,
},
}),
},
{
title: '操作',
width: '10%',
render: (text: string, record: IConfigGateway) => {
return (
<span className="table-operation">
<a onClick={() => showConfigGatewayModal(record)}>编辑</a>
<Popconfirm
title="确定删除？"
onConfirm={() => admin.deleteConfigGateway({ id: record.id })}
cancelText="取消"
okText="确认"
>
<a>删除</a>
</Popconfirm>
</span>);
},
},
];
return columns;
};
const renderClusterHref = (value: number | string, item: IMetaData, key: number) => {
return ( // 0 暂停监控--不可点击 1 监控中---可正常点击
<>

38
kafka-manager-console/src/container/admin/configure-management.tsx
View File

@@ -3,11 +3,11 @@ import { SearchAndFilterContainer } from 'container/search-filter';
import { Table, Button, Spin } from 'component/antd';
import { admin } from 'store/admin';
import { observer } from 'mobx-react';
import { IConfigure } from 'types/base-type';
import { IConfigure, IConfigGateway } from 'types/base-type';
import { users } from 'store/users';
import { pagination } from 'constants/table';
import { getConfigureColumns } from './config';
import { showConfigureModal } from 'container/modal/admin';
import { getConfigureColumns, getConfigColumns } from './config';
import { showConfigureModal, showConfigGatewayModal } from 'container/modal/admin';
@observer
export class ConfigureManagement extends SearchAndFilterContainer {
@@ -17,7 +17,12 @@ export class ConfigureManagement extends SearchAndFilterContainer {
};
public componentDidMount() {
admin.getConfigure();
if (this.props.isShow) {
admin.getGatewayList();
admin.getGatewayType();
} else {
admin.getConfigure();
}
}
public getData<T extends IConfigure>(origin: T[]) {
@@ -34,15 +39,34 @@ export class ConfigureManagement extends SearchAndFilterContainer {
return data;
}
public getGatewayData<T extends IConfigGateway>(origin: T[]) {
let data: T[] = origin;
let { searchKey } = this.state;
searchKey = (searchKey + '').trim().toLowerCase();
data = searchKey ? origin.filter((item: IConfigGateway) =>
((item.name !== undefined && item.name !== null) && item.name.toLowerCase().includes(searchKey as string))
|| ((item.value !== undefined && item.value !== null) && item.value.toLowerCase().includes(searchKey as string))
|| ((item.description !== undefined && item.description !== null) &&
item.description.toLowerCase().includes(searchKey as string)),
) : origin;
return data;
}
public renderTable() {
return (
<Spin spinning={users.loading}>
<Table
{this.props.isShow ? <Table
rowKey="key"
columns={getConfigColumns()}
dataSource={this.getGatewayData(admin.configGatewayList)}
pagination={pagination}
/> : <Table
rowKey="key"
columns={getConfigureColumns()}
dataSource={this.getData(admin.configureList)}
pagination={pagination}
/>
/>}
</Spin>
);
@@ -53,7 +77,7 @@ export class ConfigureManagement extends SearchAndFilterContainer {
<ul>
{this.renderSearch('', '请输入配置键、值或描述')}
<li className="right-btn-1">
<Button type="primary" onClick={() => showConfigureModal()}>增加配置</Button>
<Button type="primary" onClick={() => this.props.isShow ? showConfigGatewayModal() : showConfigureModal()}>增加配置</Button>
</li>
</ul>
);

4
kafka-manager-console/src/container/admin/data-curve/index.tsx
View File

@@ -6,6 +6,7 @@ import { curveKeys, CURVE_KEY_MAP, PERIOD_RADIO_MAP, PERIOD_RADIO } from './conf
import moment = require('moment');
import { observer } from 'mobx-react';
import { timeStampStr } from 'constants/strategy';
import { adminMonitor } from 'store/admin-monitor';
@observer
export class DataCurveFilter extends React.Component {
@@ -21,6 +22,7 @@ export class DataCurveFilter extends React.Component {
}
public refreshAll = () => {
adminMonitor.setRequestId(null);
Object.keys(curveKeys).forEach((c: curveKeys) => {
const { typeInfo, curveInfo: option } = CURVE_KEY_MAP.get(c);
const { parser } = typeInfo;
@@ -32,7 +34,7 @@ export class DataCurveFilter extends React.Component {
return (
<>
<Radio.Group onChange={this.radioChange} defaultValue={curveInfo.periodKey}>
{PERIOD_RADIO.map(p => <Radio.Button key={p.key} value={p.key}>{p.label}</Radio.Button>)}
{PERIOD_RADIO.map(p => <Radio.Button key={p.key} value={p.key}>{p.label}</Radio.Button>)}
</Radio.Group>
<DatePicker.RangePicker
format={timeStampStr}

25
kafka-manager-console/src/container/admin/platform-management.tsx
View File

@@ -13,17 +13,20 @@ export class PlatformManagement extends React.Component {
public render() {
return (
<>
<Tabs activeKey={location.hash.substr(1) || '1'} type="card" onChange={handleTabKey}>
<TabPane tab="应用管理" key="1">
<AdminAppList />
</TabPane>
<TabPane tab="用户管理" key="2">
<UserManagement />
</TabPane>
<TabPane tab="配置管理" key="3">
<ConfigureManagement />
</TabPane>
</Tabs>
<Tabs activeKey={location.hash.substr(1) || '1'} type="card" onChange={handleTabKey}>
<TabPane tab="应用管理" key="1">
<AdminAppList />
</TabPane>
<TabPane tab="用户管理" key="2">
<UserManagement />
</TabPane>
<TabPane tab="平台配置" key="3">
<ConfigureManagement isShow={false} />
</TabPane>
<TabPane tab="网关配置" key="4">
<ConfigureManagement isShow={true} />
</TabPane>
</Tabs>
</>
);
}

2
kafka-manager-console/src/container/admin/user-management.tsx
View File

@@ -29,7 +29,7 @@ export class UserManagement extends SearchAndFilterContainer {
searchKey = (searchKey + '').trim().toLowerCase();
data = searchKey ? origin.filter((item: IUser) =>
(item.username !== undefined && item.username !== null) && item.username.toLowerCase().includes(searchKey as string)) : origin ;
(item.username !== undefined && item.username !== null) && item.username.toLowerCase().includes(searchKey as string)) : origin;
return data;
}

6
kafka-manager-console/src/container/alarm/add-alarm/alarm-select.tsx
View File

@@ -1,7 +1,7 @@
import * as React from 'react';
import { alarm } from 'store/alarm';
import { IMonitorGroups } from 'types/base-type';
import { getValueFromLocalStorage, setValueToLocalStorage } from 'lib/local-storage';
import { getValueFromLocalStorage, setValueToLocalStorage, deleteValueFromLocalStorage } from 'lib/local-storage';
import { VirtualScrollSelect } from '../../../component/virtual-scroll-select';
interface IAlarmSelectProps {
@@ -36,6 +36,10 @@ export class AlarmSelect extends React.Component<IAlarmSelectProps> {
onChange && onChange(params);
}
public componentWillUnmount() {
deleteValueFromLocalStorage('monitorGroups');
}
public render() {
const { value, isDisabled } = this.props;
return (

10
kafka-manager-console/src/container/alarm/alarm-list.tsx
View File

@@ -9,6 +9,7 @@ import { pagination } from 'constants/table';
import { urlPrefix } from 'constants/left-menu';
import { alarm } from 'store/alarm';
import 'styles/table-filter.less';
import { Link } from 'react-router-dom';
@observer
export class AlarmList extends SearchAndFilterContainer {
@@ -24,7 +25,7 @@ export class AlarmList extends SearchAndFilterContainer {
if (app.active !== '-1' || searchKey !== '') {
data = origin.filter(d =>
((d.name !== undefined && d.name !== null) && d.name.toLowerCase().includes(searchKey as string)
|| ((d.operator !== undefined && d.operator !== null) && d.operator.toLowerCase().includes(searchKey as string)))
|| ((d.operator !== undefined && d.operator !== null) && d.operator.toLowerCase().includes(searchKey as string)))
&& (app.active === '-1' || d.appId === (app.active + '')),
);
} else {
@@ -55,9 +56,7 @@ export class AlarmList extends SearchAndFilterContainer {
{this.renderSearch('名称：', '请输入告警规则或者操作人')}
<li className="right-btn-1">
<Button type="primary">
<a href={`${urlPrefix}/alarm/add`}>
新增规则
</a>
<Link to={`/alarm/add`}>新增规则</Link>
</Button>
</li>
</>
@@ -68,6 +67,9 @@ export class AlarmList extends SearchAndFilterContainer {
if (!alarm.monitorStrategies.length) {
alarm.getMonitorStrategies();
}
if (!app.data.length) {
app.getAppList();
}
}
public render() {

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

@@ -91,7 +91,7 @@ export class MyCluster extends SearchAndFilterContainer {
],
formData: {},
visible: true,
title: '申请集群',
title: <div><span>申请集群</span><a className='applicationDocument' href="https://github.com/didi/Logi-KafkaManager/blob/master/docs/user_guide/resource_apply.md" target='_blank'>资源申请文档</a></div>,
okText: '确认',
onSubmit: (value: any) => {
value.idc = region.currentRegion;

4
kafka-manager-console/src/container/drawer/data-migration.tsx
View File

@@ -117,12 +117,12 @@ class DataMigrationFormTable extends React.Component<IFormTableProps> {
key: 'maxThrottle',
editable: true,
}, {
title: '迁移保存时间(h)',
title: '迁移后Topic保存时间(h)',
dataIndex: 'reassignRetentionTime',
key: 'reassignRetentionTime',
editable: true,
}, {
title: '原本保存时间(h)',
title: '原Topic保存时间(h)',
dataIndex: 'retentionTime',
key: 'retentionTime', // originalRetentionTime
width: '132px',

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

@@ -61,6 +61,7 @@ export const showEditClusterTopic = (item: IClusterTopics) => {
attrs: {
placeholder: '请输入保存时间',
suffix: '小时',
prompttype:'修改保存时间，预计一分钟左右生效!'
},
},
{

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

@@ -158,26 +158,26 @@ export const createMigrationTasks = () => {
},
{
key: 'originalRetentionTime',
label: '原本保存时间',
label: '原Topic保存时间',
rules: [{
required: true,
message: '请输入原本保存时间',
message: '请输入原Topic保存时间',
}],
attrs: {
disabled: true,
placeholder: '请输入原本保存时间',
placeholder: '请输入原Topic保存时间',
suffix: '小时',
},
},
{
key: 'reassignRetentionTime',
label: '迁移保存时间',
label: '迁移后Topic保存时间',
rules: [{
required: true,
message: '请输入迁移保存时间',
message: '请输入迁移后Topic保存时间',
}],
attrs: {
placeholder: '请输入迁移保存时间',
placeholder: '请输入迁移后Topic保存时间',
suffix: '小时',
},
},

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

@@ -24,26 +24,111 @@ export const showApplyModal = (record?: IUser) => {
value: +item,
})),
rules: [{ required: true, message: '请选择角色' }],
}, {
key: 'password',
label: '密码',
type: FormItemType.inputPassword,
rules: [{ required: !record, message: '请输入密码' }],
},
},
// {
// key: 'password',
// label: '密码',
// type: FormItemType.inputPassword,
// rules: [{ required: !record, message: '请输入密码' }],
// },
],
formData: record || {},
visible: true,
title: record ? '修改用户' : '新增用户',
onSubmit: (value: IUser) => {
if (record) {
return users.modfiyUser(value).then(() => {
message.success('操作成功');
});
return users.modfiyUser(value)
}
return users.addUser(value).then(() => {
message.success('操作成功');
});
},
};
if(!record){
let formMap: any = xFormModal.formMap
formMap.splice(2, 0,{
key: 'password',
label: '密码',
type: FormItemType.inputPassword,
rules: [{ required: !record, message: '请输入密码' }],
},)
}
wrapper.open(xFormModal);
};
// const handleCfPassword = (rule:any, value:any, callback:any)=>{
// if()
// }
export const showApplyModalModifyPassword = (record: IUser) => {
const xFormModal:any = {
formMap: [
// {
// key: 'oldPassword',
// label: '旧密码',
// type: FormItemType.inputPassword,
// rules: [{
// required: true,
// message: '请输入旧密码',
// }]
// },
{
key: 'newPassword',
label: '新密码',
type: FormItemType.inputPassword,
rules: [
{
required: true,
message: '请输入新密码',
}
],
attrs:{
onChange:(e:any)=>{
users.setNewPassWord(e.target.value)
}
}
},
{
key: 'confirmPassword',
label: '确认密码',
type: FormItemType.inputPassword,
rules: [
{
required: true,
message: '请确认密码',
validator:(rule:any, value:any, callback:any) => {
// 验证新密码的一致性
if(users.newPassWord){
if(value!==users.newPassWord){
rule.message = "两次密码输入不一致";
callback('两次密码输入不一致')
}else{
callback()
}
}else if(!value){
rule.message = "请确认密码";
callback('请确认密码');
}else{
callback()
}
},
}
],
},
],
formData: record || {},
visible: true,
title: '修改密码',
onSubmit: (value: IUser) => {
let params:any = {
username:record?.username,
password:value.confirmPassword,
role:record?.role,
}
return users.modfiyUser(params).then(() => {
message.success('操作成功');
});
},
}
wrapper.open(xFormModal);
};

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

@@ -1,6 +1,6 @@
import * as React from 'react';
import { notification } from 'component/antd';
import { IUploadFile, IConfigure } from 'types/base-type';
import { notification, Select } from 'component/antd';
import { IUploadFile, IConfigure, IConfigGateway } from 'types/base-type';
import { version } from 'store/version';
import { admin } from 'store/admin';
import { wrapper } from 'store';
@@ -97,8 +97,8 @@ const updateFormModal = (type: number) => {
formMap[2].attrs = {
accept: version.fileSuffix,
},
// tslint:disable-next-line:no-unused-expression
wrapper.ref && wrapper.ref.updateFormMap$(formMap, wrapper.xFormWrapper.formData, true);
// tslint:disable-next-line:no-unused-expression
wrapper.ref && wrapper.ref.updateFormMap$(formMap, wrapper.xFormWrapper.formData, true);
}
};
@@ -157,8 +157,8 @@ export const showModifyModal = (record: IUploadFile) => {
export const showConfigureModal = async (record?: IConfigure) => {
if (record) {
const result:any = await format2json(record.configValue);
record.configValue = result.result;
const result: any = await format2json(record.configValue);
record.configValue = result.result || record.configValue;
}
const xFormModal = {
formMap: [
@@ -193,10 +193,69 @@ export const showConfigureModal = async (record?: IConfigure) => {
return admin.editConfigure(value).then(data => {
notification.success({ message: '编辑配置成功' });
});
} else {
return admin.addNewConfigure(value).then(data => {
notification.success({ message: '新建配置成功' });
});
}
},
};
wrapper.open(xFormModal);
};
export const showConfigGatewayModal = async (record?: IConfigGateway) => {
const xFormModal = {
formMap: [
{
key: 'type',
label: '配置类型',
rules: [{ required: true, message: '请选择配置类型' }],
type: "select",
options: admin.gatewayType.map((item: any, index: number) => ({
key: index,
label: item.configName,
value: item.configType,
})),
attrs: {
disabled: record ? true : false,
}
}, {
key: 'name',
label: '配置键',
rules: [{ required: true, message: '请输入配置键' }],
attrs: {
disabled: record ? true : false,
},
}, {
key: 'value',
label: '配置值',
type: 'text_area',
rules: [{
required: true,
message: '请输入配置值',
}],
}, {
key: 'description',
label: '描述',
type: 'text_area',
rules: [{ required: true, message: '请输入备注' }],
},
],
formData: record || {},
visible: true,
isWaitting: true,
title: `${record ? '编辑配置' : '新建配置'}`,
onSubmit: async (parmas: IConfigGateway) => {
if (record) {
parmas.id = record.id;
return admin.editConfigGateway(parmas).then(data => {
notification.success({ message: '编辑配置成功' });
});
} else {
return admin.addNewConfigGateway(parmas).then(data => {
notification.success({ message: '新建配置成功' });
});
}
return admin.addNewConfigure(value).then(data => {
notification.success({ message: '新建配置成功' });
});
},
};
wrapper.open(xFormModal);

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

@@ -85,7 +85,7 @@ export const showEditModal = (record?: IAppItem, from?: string, isDisabled?: boo
],
formData: record,
visible: true,
title: isDisabled ? '详情' : record ? '编辑' : <div><span>应用申请</span><a className='applicationDocument' href="###" target='_blank'>应用申请文档</a></div>,
title: isDisabled ? '详情' : record ? '编辑' : <div><span>应用申请</span><a className='applicationDocument' href="https://github.com/didi/Logi-KafkaManager/blob/master/docs/user_guide/resource_apply.md" target='_blank'>资源申请文档</a></div>,
// customRenderElement: isDisabled ? '' : record ? '' : <span className="tips">集群资源充足时，预计1分钟自动审批通过</span>,
isWaitting: true,
onSubmit: (value: IAppItem) => {

6
kafka-manager-console/src/container/modal/expert.tsx
View File

@@ -20,14 +20,14 @@ export interface IRenderData {
}
export const migrationModal = (renderData: IRenderData[]) => {
const xFormWrapper = {
const xFormWrapper = {
type: 'drawer',
visible: true,
width: 1000,
title: '新建迁移任务',
customRenderElement: <WrappedDataMigrationFormTable data={renderData}/>,
customRenderElement: <WrappedDataMigrationFormTable data={renderData} />,
nofooter: true,
noform: true,
};
wrapper.open(xFormWrapper as IXFormWrapper);
wrapper.open(xFormWrapper as IXFormWrapper);
};

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

@@ -75,8 +75,8 @@ export const showApprovalModal = (info: IOrderInfo, status: number, from?: strin
// }],
rules: [{
required: true,
message: '请输入大于12小于999的整数',
pattern: /^([1-9]{1}[0-9]{2})$|^([2-9]{1}[0-9]{1})$|^(1[2-9]{1})$/,
message: '请输入大于0小于10000的整数',
pattern: /^\+?[1-9]\d{0,3}(\.\d*)?$/,
}],
}, {
key: 'species',

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

@@ -88,7 +88,7 @@ export const applyTopic = () => {
],
formData: {},
visible: true,
title: '申请Topic',
title: <div><span>申请Topic</span><a className='applicationDocument' href="https://github.com/didi/Logi-KafkaManager/blob/master/docs/user_guide/resource_apply.md" target='_blank'>资源申请文档</a></div>,
okText: '确认',
// customRenderElement: <span className="tips">集群资源充足时，预计1分钟自动审批通过</span>,
isWaitting: true,

2
kafka-manager-console/src/container/search-filter.tsx
View File

@@ -126,7 +126,7 @@ export class SearchAndFilterContainer extends React.Component<any, ISearchAndFil
);
}
public renderSearch(text?: string, placeholder?: string, keyName: string = 'searchKey') {
public renderSearch(text?: string, placeholder?: string, keyName: string = 'searchKey',) {
const value = this.state[keyName] as string;
return (
<li className="render-box">

4
kafka-manager-console/src/container/topic/topic-detail/connect-information.tsx
View File

@@ -101,7 +101,9 @@ export class ConnectInformation extends SearchAndFilterContainer {
<>
<div className="k-row" >
<ul className="k-tab">
<li>连接信息</li>
<li>
连接信息 <span style={{ color: '#a7a8a9', fontSize: '12px', padding: '0 15px' }}>展示近20分钟的连接信息</span>
</li>
{this.renderSearch('', '请输入连接信息', 'searchKey')}
</ul>
{this.renderConnectionInfo(this.getData(topic.connectionInfo))}

26
kafka-manager-console/src/container/topic/topic-detail/group-id.tsx
View File

@@ -138,7 +138,7 @@ export class GroupID extends SearchAndFilterContainer {
public renderConsumerDetails() {
const consumerGroup = this.consumerGroup;
const columns = [{
const columns: any = [{
title: 'Partition ID',
dataIndex: 'partitionId',
key: 'partitionId',
@@ -179,7 +179,8 @@ export class GroupID extends SearchAndFilterContainer {
<>
<div className="details-box">
<b>{consumerGroup}</b>
<div>
<div style={{ display: 'flex' }}>
{this.renderSearch('', '请输入Consumer ID')}
<Button onClick={this.backToPage}>返回</Button>
<Button onClick={this.updateDetailsStatus}>刷新</Button>
<Button onClick={() => this.showResetOffset()}>重置Offset</Button>
@@ -187,7 +188,7 @@ export class GroupID extends SearchAndFilterContainer {
</div>
<Table
columns={columns}
dataSource={topic.consumeDetails}
dataSource={this.getDetailData(topic.consumeDetails)}
rowKey="key"
pagination={pagination}
/>
@@ -214,7 +215,12 @@ export class GroupID extends SearchAndFilterContainer {
dataIndex: 'location',
key: 'location',
width: '34%',
},
}, {
title: '状态',
dataIndex: 'state',
key: 'state',
width: '34%',
}
];
return (
<>
@@ -236,7 +242,17 @@ export class GroupID extends SearchAndFilterContainer {
data = searchKey ? origin.filter((item: IConsumerGroups) =>
(item.consumerGroup !== undefined && item.consumerGroup !== null) && item.consumerGroup.toLowerCase().includes(searchKey as string),
) : origin ;
) : origin;
return data;
}
public getDetailData<T extends IConsumeDetails>(origin: T[]) {
let data: T[] = origin;
let { searchKey } = this.state;
searchKey = (searchKey + '').trim().toLowerCase();
data = searchKey ? origin.filter((item: IConsumeDetails) =>
(item.clientId !== undefined && item.clientId !== null) && item.clientId.toLowerCase().includes(searchKey as string),
) : origin;
return data;
}

34
kafka-manager-console/src/container/topic/topic-detail/reset-offset.tsx
View File

@@ -71,32 +71,32 @@ class ResetOffset extends React.Component<any> {
const { getFieldDecorator } = this.props.form;
const { typeValue, offsetValue } = this.state;
return (
<>
<Alert message="重置之前一定要关闭消费客户端！！！" type="warning" showIcon={true} />
<Alert message="重置之前一定要关闭消费客户端！！！" type="warning" showIcon={true} />
<Alert message="重置之前一定要关闭消费客户端！！！" type="warning" showIcon={true} className="mb-30"/>
<>
<Alert message="重置消费偏移前,请先关闭客户端,否则会重置失败 ！！！" type="warning" showIcon={true} />
<Alert message="关闭客户端后,请等待一分钟之后再重置消费偏移 ！！！" type="warning" showIcon={true} />
{/* <Alert message="重置之前一定要关闭消费客户端！！！" type="warning" showIcon={true} className="mb-30" /> */}
<div className="o-container">
<Form labelAlign="left" onSubmit={this.handleSubmit} >
<Radio.Group onChange={this.onChangeType} value={typeValue}>
<Radio.Group onChange={this.onChangeType} value={typeValue}>
<Radio value="time"><span className="title-con">重置到指定时间</span></Radio>
<Row>
<Col span={26}>
<Form.Item label="" >
<Radio.Group
onChange={this.onChangeOffset}
value={offsetValue}
disabled={typeValue === 'partition'}
defaultValue="offset"
className="mr-10"
>
<Radio.Button value="offset">最新offset</Radio.Button>
<Radio.Button value="custom">自定义</Radio.Button>
</Radio.Group>
<Radio.Group
onChange={this.onChangeOffset}
value={offsetValue}
disabled={typeValue === 'partition'}
defaultValue="offset"
className="mr-10"
>
<Radio.Button value="offset">最新offset</Radio.Button>
<Radio.Button value="custom">自定义</Radio.Button>
</Radio.Group>
{typeValue === 'time' && offsetValue === 'custom' &&
getFieldDecorator('timestamp', {
rules: [{ required: false, message: '' }],
initialValue: moment(),
})(
})(
<DatePicker
showTime={true}
format={timeMinute}
@@ -109,7 +109,7 @@ class ResetOffset extends React.Component<any> {
</Col>
</Row>
<Radio value="partition"><span className="title-con">重置指定分区及偏移</span></Radio>
</Radio.Group>
</Radio.Group>
<Row>
<Form.Item>
<Row>