mirror of
https://github.com/didi/KnowStreaming.git
synced 2026-01-10 09:04:26 +08:00
kafka-manager 2.0
This commit is contained in:
zengqiao
318
kafka-manager-console/src/container/admin/cluster-list/index.tsx
Normal file
318
kafka-manager-console/src/container/admin/cluster-list/index.tsx
Normal file
@@ -0,0 +1,318 @@
|
||||
import * as React from 'react';
|
||||
import { Modal, Table, Button, notification, message, Tooltip, Icon, Popconfirm } from 'component/antd';
|
||||
import { wrapper } from 'store';
|
||||
import { observer } from 'mobx-react';
|
||||
import { IXFormWrapper, IMetaData, IRegister } from 'types/base-type';
|
||||
import { admin } from 'store/admin';
|
||||
import { registerCluster, createCluster, pauseMonitoring } from 'lib/api';
|
||||
import { SearchAndFilterContainer } from 'container/search-filter';
|
||||
import { cluster } from 'store/cluster';
|
||||
import { customPagination } from 'constants/table';
|
||||
import { urlPrefix } from 'constants/left-menu';
|
||||
import { region } from 'store';
|
||||
import './index.less';
|
||||
import { getAdminClusterColumns } from '../config';
|
||||
|
||||
const { confirm } = Modal;
|
||||
|
||||
@observer
|
||||
export class ClusterList extends SearchAndFilterContainer {
|
||||
public state = {
|
||||
searchKey: '',
|
||||
};
|
||||
|
||||
private xFormModal: IXFormWrapper;
|
||||
|
||||
// TODO: 公共化
|
||||
public renderClusterHref(value: number | string, item: IMetaData, key: number) {
|
||||
return ( // 0 暂停监控--不可点击 1 监控中---可正常点击
|
||||
<>
|
||||
{item.status === 1 ? <a href={`${urlPrefix}/admin/cluster-detail?clusterId=${item.clusterId}#${key}`}>{value}</a>
|
||||
: <a style={{ cursor: 'not-allowed', color: '#999' }}>{value}</a>}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
public createOrRegisterCluster(item: IMetaData) {
|
||||
this.xFormModal = {
|
||||
formMap: [
|
||||
{
|
||||
key: 'clusterName',
|
||||
label: '集群名称',
|
||||
rules: [{
|
||||
required: true,
|
||||
message: '请输入集群名称',
|
||||
}],
|
||||
attrs: {
|
||||
placeholder: '请输入集群名称',
|
||||
disabled: item ? true : false,
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'zookeeper',
|
||||
label: 'zookeeper地址',
|
||||
type: 'text_area',
|
||||
rules: [{
|
||||
required: true,
|
||||
message: '请输入zookeeper地址',
|
||||
}],
|
||||
attrs: {
|
||||
placeholder: '请输入zookeeper地址',
|
||||
rows: 2,
|
||||
disabled: item ? true : false,
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'bootstrapServers',
|
||||
label: 'bootstrapServers',
|
||||
type: 'text_area',
|
||||
rules: [{
|
||||
required: true,
|
||||
message: '请输入bootstrapServers',
|
||||
}],
|
||||
attrs: {
|
||||
placeholder: '请输入bootstrapServers',
|
||||
rows: 2,
|
||||
disabled: item ? true : false,
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'idc',
|
||||
label: '数据中心',
|
||||
defaultValue: region.regionName,
|
||||
rules: [{ required: true, message: '请输入数据中心' }],
|
||||
attrs: {
|
||||
placeholder: '请输入数据中心',
|
||||
disabled: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'mode',
|
||||
label: '集群类型',
|
||||
type: 'select',
|
||||
options: cluster.clusterModes.map(ele => {
|
||||
return {
|
||||
label: ele.message,
|
||||
value: ele.code,
|
||||
};
|
||||
}),
|
||||
rules: [{
|
||||
required: true,
|
||||
message: '请选择集群类型',
|
||||
}],
|
||||
attrs: {
|
||||
placeholder: '请选择集群类型',
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'kafkaVersion',
|
||||
label: 'kafka版本',
|
||||
invisible: item ? false : true,
|
||||
rules: [{
|
||||
required: false,
|
||||
message: '请输入kafka版本',
|
||||
}],
|
||||
attrs: {
|
||||
placeholder: '请输入kafka版本',
|
||||
disabled: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'securityProperties',
|
||||
label: '安全协议',
|
||||
type: 'text_area',
|
||||
rules: [{
|
||||
required: false,
|
||||
message: '请输入安全协议',
|
||||
}],
|
||||
attrs: {
|
||||
placeholder: '请输入安全协议',
|
||||
rows: 6,
|
||||
},
|
||||
},
|
||||
],
|
||||
formData: item ? item : {},
|
||||
visible: true,
|
||||
width: 590,
|
||||
title: '注册集群',
|
||||
onSubmit: (value: IRegister) => {
|
||||
value.idc = region.currentRegion;
|
||||
if (item) {
|
||||
value.clusterId = item.clusterId;
|
||||
registerCluster(value).then(data => {
|
||||
admin.getMetaData(true);
|
||||
notification.success({ message: '修改集群成功' });
|
||||
});
|
||||
} else {
|
||||
createCluster(value).then(data => {
|
||||
admin.getMetaData(true);
|
||||
notification.success({ message: '注册集群成功' });
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
};
|
||||
wrapper.open(this.xFormModal);
|
||||
}
|
||||
|
||||
public pauseMonitor(item: IMetaData) {
|
||||
const info = item.status === 1 ? '暂停监控' : '开始监控';
|
||||
const status = item.status === 1 ? 0 : 1;
|
||||
pauseMonitoring(item.clusterId, status).then(data => {
|
||||
admin.getMetaData(true);
|
||||
notification.success({ message: `${info}成功` });
|
||||
});
|
||||
}
|
||||
|
||||
public showMonitor = (record: IMetaData) => {
|
||||
admin.getBrokersRegions(record.clusterId).then((data) => {
|
||||
confirm({
|
||||
// tslint:disable-next-line:jsx-wrap-multiline
|
||||
title: <>
|
||||
<span className="offline_span">
|
||||
删除集群
|
||||
<a>
|
||||
<Tooltip placement="right" title={'当前集群存在逻辑集群，无法申请下线'} >
|
||||
<Icon type="question-circle" />
|
||||
</Tooltip>
|
||||
</a>
|
||||
</span>
|
||||
</>,
|
||||
icon: 'none',
|
||||
content: this.deleteMonitorModal(data),
|
||||
width: 500,
|
||||
okText: '确认',
|
||||
cancelText: '取消',
|
||||
onOk() {
|
||||
if (data.length) {
|
||||
return message.warning('存在逻辑集群，无法申请下线！');
|
||||
}
|
||||
admin.deleteCluster(record.clusterId).then(data => {
|
||||
notification.success({ message: '删除成功' });
|
||||
});
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
public deleteMonitorModal = (source: any) => {
|
||||
const cellStyle = {
|
||||
overflow: 'hidden',
|
||||
whiteSpace: 'nowrap',
|
||||
textOverflow: 'ellipsis',
|
||||
cursor: 'pointer',
|
||||
};
|
||||
const monitorColumns = [
|
||||
{
|
||||
title: '集群名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
onCell: () => ({
|
||||
style: {
|
||||
maxWidth: 250,
|
||||
...cellStyle,
|
||||
},
|
||||
}),
|
||||
render: (t: string) => {
|
||||
return (
|
||||
<Tooltip placement="bottomLeft" title={t} >{t}</Tooltip>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
return (
|
||||
<>
|
||||
<div className="render_offline">
|
||||
<Table
|
||||
rowKey="key"
|
||||
dataSource={source}
|
||||
columns={monitorColumns}
|
||||
scroll={{ x: 300, y: 200 }}
|
||||
pagination={false}
|
||||
bordered={true}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
public getData<T extends IMetaData>(origin: T[]) {
|
||||
let data: T[] = origin;
|
||||
let { searchKey } = this.state;
|
||||
searchKey = (searchKey + '').trim().toLowerCase();
|
||||
|
||||
data = searchKey ? origin.filter((item: IMetaData) =>
|
||||
(item.clusterName !== undefined && item.clusterName !== null) && item.clusterName.toLowerCase().includes(searchKey as string),
|
||||
) : origin ;
|
||||
return data;
|
||||
}
|
||||
|
||||
public getColumns = () => {
|
||||
const cols = getAdminClusterColumns();
|
||||
const col = {
|
||||
title: '操作',
|
||||
render: (value: string, item: IMetaData) => (
|
||||
<>
|
||||
<a
|
||||
onClick={this.createOrRegisterCluster.bind(this, item)}
|
||||
className="action-button"
|
||||
>修改
|
||||
</a>
|
||||
<Popconfirm
|
||||
title={`确定${item.status === 1 ? '暂停' : '开始'}${item.clusterName}监控？`}
|
||||
onConfirm={() => this.pauseMonitor(item)}
|
||||
>
|
||||
<a
|
||||
className="action-button"
|
||||
>
|
||||
{item.status === 1 ? '暂停监控' : '开始监控'}
|
||||
</a>
|
||||
</Popconfirm>
|
||||
<a onClick={this.showMonitor.bind(this, item)}>
|
||||
删除
|
||||
</a>
|
||||
</>
|
||||
),
|
||||
};
|
||||
cols.push(col as any);
|
||||
return cols;
|
||||
}
|
||||
|
||||
public renderClusterList() {
|
||||
return (
|
||||
<>
|
||||
<div className="container">
|
||||
<div className="table-operation-panel">
|
||||
<ul>
|
||||
{this.renderSearch('', '请输入集群名称')}
|
||||
<li className="right-btn-1">
|
||||
<Button type="primary" onClick={this.createOrRegisterCluster.bind(this, null)}>注册集群</Button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="table-wrapper">
|
||||
<Table
|
||||
rowKey="key"
|
||||
loading={admin.loading}
|
||||
dataSource={this.getData(admin.metaList)}
|
||||
columns={this.getColumns()}
|
||||
pagination={customPagination}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
public componentDidMount() {
|
||||
admin.getMetaData(true);
|
||||
cluster.getClusterModes();
|
||||
admin.getDataCenter();
|
||||
}
|
||||
|
||||
public render() {
|
||||
return (
|
||||
admin.metaList ? <> {this.renderClusterList()} </> : null
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user