Skip to content

K
kafka-manager

DiDi / kafka-manager
7 个月 前同步成功

通知 58
Star 6372
Fork 1229
K
kafka-manager

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 47b8fe50 编写于 作者: 孙 孙超
浏览文件
操作

V2.4.1 FE

上级 2672502c
隐藏空白更改
内联 并排
Showing with 1554 addition and 325 deletion
kafka-manager-console/src/component/antd/index.tsx
浏览文件 @ 47b8fe50
......@@ -94,6 +94,9 @@ import 'antd/es/divider/style';
import Upload from 'antd/es/upload';
import 'antd/es/upload/style';
import Transfer from 'antd/es/transfer';
import 'antd/es/transfer/style';
import TimePicker from 'antd/es/time-picker';
import 'antd/es/time-picker/style';
......@@ -142,5 +145,6 @@ export {
TimePicker,
RangePickerValue,
Badge,
Popover
Popover,
Transfer
};
kafka-manager-console/src/component/editor/index.less
浏览文件 @ 47b8fe50
......@@ -25,7 +25,7 @@
.editor{
height: 100%;
position: absolute;
left: -14%;
left: -12%;
width: 120%;
}
}
kafka-manager-console/src/component/editor/monacoEditor.tsx
浏览文件 @ 47b8fe50
......@@ -21,24 +21,12 @@ class Monacoeditor extends React.Component<IEditorProps> {
public state = {
placeholder: '',
};
// public arr = '{"clusterId":95,"startId":37397856,"step":100,"topicName":"kmo_topic_metrics_tempory_zq"}';
// public Ars(a: string) {
// const obj = JSON.parse(a);
// const newobj: any = {};
// for (const item in obj) {
// if (typeof obj[item] === 'object') {
// this.Ars(obj[item]);
// } else {
// newobj[item] = obj[item];
// }
// }
// return JSON.stringify(newobj);
// }
public async componentDidMount() {
const { value, onChange } = this.props;
const format: any = await format2json(value);
this.editor = monaco.editor.create(this.ref, {
value: format.result,
value: format.result || value,
language: 'json',
lineNumbers: 'off',
scrollBeyondLastLine: false,
......@@ -48,7 +36,7 @@ class Monacoeditor extends React.Component<IEditorProps> {
minimap: {
enabled: false,
},
// automaticLayout: true, // 自动布局
automaticLayout: true, // 自动布局
glyphMargin: true, // 字形边缘 {},[]
// useTabStops: false,
// formatOnPaste: true,
......
kafka-manager-console/src/component/flow-table/index.tsx
浏览文件 @ 47b8fe50
......@@ -68,8 +68,8 @@ export class StatusGraghCom<T extends IFlowInfo> extends React.Component {
public render() {
const statusData = this.getData();
const loading = this.getLoading();
if (!statusData) return null;
const data: any[] = [];
if (!statusData) return <Table columns={flowColumns} dataSource={data} />;
Object.keys(statusData).map((key) => {
if (statusData[key]) {
const v = key === 'byteIn' || key === 'byteOut' ? statusData[key].map(i => i && (i / 1024).toFixed(2)) :
......@@ -85,7 +85,7 @@ export class StatusGraghCom<T extends IFlowInfo> extends React.Component {
}
});
return (
<Table columns={flowColumns} dataSource={data} pagination={false} loading={loading}/>
<Table columns={flowColumns} dataSource={data} pagination={false} loading={loading} />
);
}
}
kafka-manager-console/src/component/x-form/index.less
浏览文件 @ 47b8fe50
.ant-input-number {
.ant-input-number, .ant-form-item-children .ant-select {
width: 314px
}
......
kafka-manager-console/src/component/x-form/index.tsx
浏览文件 @ 47b8fe50
......@@ -130,6 +130,8 @@ class XForm extends React.Component<IXFormProps> {
this.renderFormItem(formItem),
)}
{formItem.renderExtraElement ? formItem.renderExtraElement() : null}
{/* 添加保存时间提示文案 */}
{formItem.attrs?.prompttype ? <span style={{ color: "#cccccc", fontSize: '12px', lineHeight: '20px', display: 'block' }}>{formItem.attrs.prompttype}</span> : null}
</Form.Item>
);
})}
......
kafka-manager-console/src/constants/left-menu.ts
浏览文件 @ 47b8fe50
......@@ -59,6 +59,10 @@ export const adminMenu = [{
href: `/admin/bill`,
i: 'k-icon-renwuliebiao',
title: '用户账单',
},{
href: `/admin/operation-record`,
i: 'k-icon-operationrecord',
title: '操作记录',
}] as ILeftMenu[];
export const expertMenu = [{
......
kafka-manager-console/src/constants/strategy.ts
浏览文件 @ 47b8fe50
......@@ -67,7 +67,7 @@ export const timeMonthStr = 'YYYY/MM';
// tslint:disable-next-line:max-line-length
export const indexUrl ={
indexUrl:'https://github.com/didi/kafka-manager',
indexUrl:'https://github.com/didi/Logi-KafkaManager/blob/master/docs/user_guide/kafka_metrics_desc.md', // 指标说明
cagUrl:'https://github.com/didi/Logi-KafkaManager/blob/master/docs/user_guide/add_cluster/add_cluster.md', // 集群接入指南 Cluster access Guide
}
......
kafka-manager-console/src/container/admin/cluster-detail/cluster-consumer.tsx
浏览文件 @ 47b8fe50
......@@ -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}
......
kafka-manager-console/src/container/admin/cluster-detail/cluster-controller.tsx
浏览文件 @ 47b8fe50
......@@ -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,14 +42,25 @@ export class ClusterController extends SearchAndFilterContainer {
return data;
}
public renderController() {
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: '30%',
width: '20%',
sorter: (a: IController, b: IController) => b.brokerId - a.brokerId,
render: (r: string, t: IController) => {
return (
......@@ -57,7 +73,7 @@ export class ClusterController extends SearchAndFilterContainer {
title: 'BrokerHost',
key: 'host',
dataIndex: 'host',
width: '30%',
width: '20%',
// render: (r: string, t: IController) => {
// return (
// <a href={`${this.urlPrefix}/admin/broker-detail?clusterId=${this.clusterId}&brokerId=${t.brokerId}`}>{r}
......@@ -65,6 +81,77 @@ export class ClusterController extends SearchAndFilterContainer {
// );
// },
},
{
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 = [
{
title: 'BrokerId',
dataIndex: 'brokerId',
key: 'brokerId',
width: '30%',
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: '30%',
},
{
title: '变更时间',
dataIndex: 'timestamp',
......@@ -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>
);
}
......
kafka-manager-console/src/container/admin/cluster-detail/cluster-topic.tsx
浏览文件 @ 47b8fe50
......@@ -172,7 +172,7 @@ export class ClusterTopic extends SearchAndFilterContainer {
key: 'appName',
// width: '10%',
render: (val: string, record: IClusterTopics) => (
<Tooltip placement="bottomLeft" title={record.appId} >
<Tooltip placement="bottomLeft" title={val} >
{val}
</Tooltip>
),
......
kafka-manager-console/src/container/admin/cluster-detail/exclusive-cluster.tsx
浏览文件 @ 47b8fe50
......@@ -314,8 +314,7 @@ export class ExclusiveCluster extends SearchAndFilterContainer {
>
<div className="region-prompt">
<span>
由于该Region已被逻辑集群【 {this.state.logicalClusterName} 】使用
请先解除Region与逻辑集群的关系
该Region已被逻辑集群【 {this.state.logicalClusterName} 】使用，请先解除Region与逻辑集群的关系
</span>
</div>
</Modal>
......
kafka-manager-console/src/container/admin/cluster-detail/index.less
浏览文件 @ 47b8fe50
......@@ -16,7 +16,7 @@
.traffic-table {
margin: 10px 0;
min-height: 450px;
min-height: 330px;
.traffic-header {
width: 100%;
height: 44px;
......@@ -94,4 +94,10 @@
.region-prompt{
font-weight: bold;
text-align: center;
}
.asd{
display: flex;
justify-content: space-around;
align-items: center;
}
\ No newline at end of file
kafka-manager-console/src/container/admin/cluster-detail/index.tsx
浏览文件 @ 47b8fe50
......@@ -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>
</>
......
kafka-manager-console/src/container/admin/cluster-list/index.tsx
浏览文件 @ 47b8fe50
......@@ -4,6 +4,7 @@ import { wrapper } from 'store';
import { observer } from 'mobx-react';
import { IXFormWrapper, IMetaData, IRegister } from 'types/base-type';
import { admin } from 'store/admin';
import { users } from 'store/users';
import { registerCluster, createCluster, pauseMonitoring } from 'lib/api';
import { SearchAndFilterContainer } from 'container/search-filter';
import { cluster } from 'store/cluster';
......@@ -12,6 +13,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;
......@@ -77,34 +79,34 @@ export class ClusterList extends SearchAndFilterContainer {
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: '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版本',
......@@ -132,6 +134,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的最大jmx连接数
"username": "xxxxx", #用户名
"password": "xxxxx", #密码
"openSSL": true, #开启SSL，true表示开启SSL，false表示关闭
}`,
rows: 8,
},
......@@ -256,32 +277,41 @@ export class ClusterList extends SearchAndFilterContainer {
public getColumns = () => {
const cols = getAdminClusterColumns();
const role = users.currentUser.role;
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)}
cancelText="取消"
okText="确认"
>
<Tooltip title="暂停监控将无法正常监控指标信息，建议开启监控">
{
role && role === 2 ? <>
<a
onClick={this.createOrRegisterCluster.bind(this, item)}
className="action-button"
>编辑
</a>
<Popconfirm
title={`确定${item.status === 1 ? '暂停' : '开始'}${item.clusterName}监控？`}
onConfirm={() => this.pauseMonitor(item)}
cancelText="取消"
okText="确认"
>
{item.status === 1 ? '暂停监控' : '开始监控'}
<Tooltip placement="left" title="暂停监控将无法正常监控指标信息，建议开启监控">
<a
className="action-button"
>
{item.status === 1 ? '暂停监控' : '开始监控'}
</a>
</Tooltip>
</Popconfirm>
<a onClick={this.showMonitor.bind(this, item)}>
删除
</a>
</Tooltip>
</Popconfirm>
<a onClick={this.showMonitor.bind(this, item)}>
删除
</a>
</> : <Tooltip placement="left" title="该功能只对运维人员开放">
<a style={{ color: '#a0a0a0' }} className="action-button">编辑</a>
<a className="action-button" style={{ color: '#a0a0a0' }}>{item.status === 1 ? '暂停监控' : '开始监控'}</a>
<a style={{ color: '#a0a0a0' }}>删除</a>
</Tooltip>
}
</>
),
};
......@@ -290,6 +320,7 @@ export class ClusterList extends SearchAndFilterContainer {
}
public renderClusterList() {
const role = users.currentUser.role;
return (
<>
<div className="container">
......@@ -298,7 +329,14 @@ export class ClusterList extends SearchAndFilterContainer {
{this.renderSearch('', '请输入集群名称')}
<li className="right-btn-1">
<a style={{ display: 'inline-block', marginRight: '20px' }} href={indexUrl.cagUrl} target="_blank">集群接入指南</a>
<Button type="primary" onClick={this.createOrRegisterCluster.bind(this, null)}>接入集群</Button>
{
role && role === 2 ?
<Button type="primary" onClick={this.createOrRegisterCluster.bind(this, null)}>接入集群</Button>
:
<Tooltip placement="left" title="该功能只对运维人员开放" trigger='hover'>
<Button disabled type="primary">接入集群</Button>
</Tooltip>
}
</li>
</ul>
</div>
......
kafka-manager-console/src/container/admin/config.tsx
浏览文件 @ 47b8fe50
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 监控中---可正常点击
<>
......
kafka-manager-console/src/container/admin/configure-management.tsx
浏览文件 @ 47b8fe50
......@@ -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>
);
......
kafka-manager-console/src/container/admin/data-curve/index.tsx
浏览文件 @ 47b8fe50
......@@ -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}
......
kafka-manager-console/src/container/admin/index.tsx
浏览文件 @ 47b8fe50
......@@ -11,3 +11,5 @@ export * from './operation-management/migration-detail';
export * from './configure-management';
export * from './individual-bill';
export * from './bill-detail';
export * from './operation-record';
kafka-manager-console/src/container/admin/operation-record/config.tsx 0 → 100644
浏览文件 @ 47b8fe50
import * as React from 'react';
import { cellStyle } from 'constants/table';
import { Tooltip } from 'antd';
import { admin } from 'store/admin';
import moment = require('moment');
const moduleList = [
{ moduleId: 0, moduleName: 'Topic' },
{ moduleId: 1, moduleName: '应用' },
{ moduleId: 2, moduleName: '配额' },
{ moduleId: 3, moduleName: '权限' },
{ moduleId: 4, moduleName: '集群' },
{ moduleId: 5, moduleName: '分区' },
{ moduleId: 6, moduleName: 'Gateway配置' },
]
export const operateList = {
0: '新增',
1: '删除',
2: '修改'
}
// [
// { operate: '新增', operateId: 0 },
// { operate: '删除', operateId: 1 },
// { operate: '修改', operateId: 2 },
// ]
export const getJarFuncForm: any = (props: any) => {
const formMap = [
{
key: 'moduleId',
label: '模块',
type: 'select',
attrs: {
style: {
width: '130px'
},
placeholder: '请选择模块',
},
options: moduleList.map(item => {
return {
label: item.moduleName,
value: item.moduleId
}
}),
formAttrs: {
initialvalue: 0,
},
},
{
key: 'operator',
label: '操作人',
type: 'input',
attrs: {
style: {
width: '170px'
},
placeholder: '请输入操作人'
},
getvaluefromevent: (event: any) => {
return event.target.value.replace(/\s+/g, '')
},
},
// {
// key: 'resource',
// label: '资源名称',
// type: 'input',
// attrs: {
// style: {
// width: '170px'
// },
// placeholder: '请输入资源名称'
// },
// },
// {
// key: 'content',
// label: '操作内容',
// type: 'input',
// attrs: {
// style: {
// width: '170px'
// },
// placeholder: '请输入操作内容'
// },
// },
]
return formMap;
}
export const getOperateColumns = () => {
const columns: any = [
{
title: '模块',
dataIndex: 'module',
key: 'module',
align: 'center',
width: '12%'
},
{
title: '资源名称',
dataIndex: 'resource',
key: 'resource',
align: 'center',
width: '12%'
},
{
title: '操作内容',
dataIndex: 'content',
key: 'content',
align: 'center',
width: '25%',
onCell: () => ({
style: {
maxWidth: 350,
...cellStyle,
},
}),
render: (text: string, record: any) => {
return (
<Tooltip placement="topLeft" title={text} >{text}</Tooltip>);
},
},
{
title: '操作人',
dataIndex: 'operator',
align: 'center',
width: '12%'
},
];
return columns
}
\ No newline at end of file
kafka-manager-console/src/container/admin/operation-record/index.tsx 0 → 100644
浏览文件 @ 47b8fe50
import * as React from 'react';
import { observer } from 'mobx-react';
import { SearchAndFilterContainer } from 'container/search-filter';
import { IXFormWrapper, IMetaData, IRegister } from 'types/base-type';
import { admin } from 'store/admin';
import { customPagination, cellStyle } from 'constants/table';
import { Table, Tooltip } from 'component/antd';
import { timeFormat } from 'constants/strategy';
import { SearchFormComponent } from '../searchForm';
import { getJarFuncForm, operateList, getOperateColumns } from './config'
import moment = require('moment');
import { tableFilter } from 'lib/utils';
@observer
export class OperationRecord extends SearchAndFilterContainer {
public state: any = {
searchKey: '',
filteredInfo: null,
sortedInfo: null,
};
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 searchForm = (params: any) => {
// this.props.setFuncSubValue(params)
// getSystemFuncList(params).then(res => {
// this.props.setSysFuncList(res.data)
// this.props.setPagination(res.pagination)
// })
const { operator, moduleId } = params || {}
operator ? admin.getOperationRecordData(params) : admin.getOperationRecordData({ moduleId })
// getJarList(params).then(res => {
// this.props.setJarList(res.data)
// this.props.setPagination(res.pagination)
// })
}
public clearAll = () => {
this.setState({
filteredInfo: null,
sortedInfo: null,
});
};
public setHandleChange = (pagination: any, filters: any, sorter: any) => {
this.setState({
filteredInfo: filters,
sortedInfo: sorter,
});
}
public renderOperationRecordList() {
let { sortedInfo, filteredInfo } = this.state;
sortedInfo = sortedInfo || {};
filteredInfo = filteredInfo || {};
const operatingTime = Object.assign({
title: '操作时间',
dataIndex: 'modifyTime',
key: 'modifyTime',
align: 'center',
sorter: (a: any, b: any) => a.modifyTime - b.modifyTime,
render: (t: number) => moment(t).format(timeFormat),
width: '15%',
sortOrder: sortedInfo.columnKey === 'modifyTime' && sortedInfo.order,
});
const operatingPractice = Object.assign({
title: '行为',
dataIndex: 'operate',
key: 'operate',
align: 'center',
width: '12%',
filters: tableFilter<any>(this.getData(admin.oRList), 'operateId', operateList),
// filteredValue: filteredInfo.operate || null,
onFilter: (value: any, record: any) => {
return record.operateId === value
}
}, this.renderColumnsFilter('modifyTime'))
const columns = getOperateColumns()
columns.splice(0, 0, operatingTime);
columns.splice(3, 0, operatingPractice);
return (
<>
<div className="container">
<div className="table-operation-panel">
<SearchFormComponent
formMap={getJarFuncForm()}
onSubmit={(params: any) => this.searchForm(params)}
clearAll={() => this.clearAll()}
isReset={true}
/>
</div>
<div className="table-wrapper">
<Table
rowKey="key"
loading={admin.loading}
dataSource={this.getData(admin.oRList)}
columns={columns}
pagination={customPagination}
bordered
onChange={this.setHandleChange}
/>
</div>
</div>
</>
)
};
componentDidMount() {
admin.getOperationRecordData({ moduleId: 0 });
}
render() {
return <div>
{
this.renderOperationRecordList()
}
</div>
}
}
\ No newline at end of file
kafka-manager-console/src/container/admin/platform-management.tsx
浏览文件 @ 47b8fe50
......@@ -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>
</>
);
}
......
kafka-manager-console/src/container/admin/searchForm.tsx 0 → 100644
浏览文件 @ 47b8fe50
import * as React from 'react';
import { Select, Input, InputNumber, Form, Switch, Checkbox, DatePicker, Radio, Upload, Button, Icon, Tooltip } from 'component/antd';
// import './index.less';
const Search = Input.Search;
export interface IFormItem {
key: string;
label: string;
type: string;
value?: string;
// 内部组件属性注入
attrs?: any;
// form属性注入
formAttrs?: any;
defaultValue?: string | number | any[];
rules?: any[];
invisible?: boolean;
getvaluefromevent: Function;
}
interface SerachFormProps {
formMap: IFormItem[];
// formData: any;
form: any;
onSubmit: Function;
isReset?: boolean;
clearAll: Function;
layout?: 'inline' | 'horizontal' | 'vertical';
}
export interface IFormSelect extends IFormItem {
options: Array<{ key?: string | number, value: string | number, label: string }>;
}
class SearchForm extends React.Component<SerachFormProps>{
public onSubmit = () => {
// this.props.onSubmit()
//
}
public renderFormItem(item: IFormItem) {
switch (item.type) {
default:
case 'input':
return <Input key={item.key} {...item.attrs} />;
case 'select':
return (
<Select
// size="small"
key={item.key}
{...item.attrs}
invisibleValue={item.formAttrs.invisibleValue}
>
{(item as IFormSelect).options && (item as IFormSelect).options.map((v, index) => (
<Select.Option
key={v.value || v.key || index}
value={v.value}
>
{v.label}
{/* <Tooltip placement='left' title={v.value}>
{v.label}
</Tooltip> */}
</Select.Option>
))}
</Select>
);
}
}
public theQueryClick = (value: any) => {
this.props.onSubmit(value)
this.props.clearAll()
// this.props.form.resetFields()
}
public resetClick = () => {
this.props.form.resetFields()
this.props.clearAll()
this.theQueryClick(this.props.form.getFieldsValue())
}
public render() {
const { form, formMap, isReset } = this.props;
const { getFieldDecorator, getFieldsValue } = form;
return (
<Form layout='inline' onSubmit={this.onSubmit}>
{
formMap.map(formItem => {
// const { initialValue, valuePropName } = this.handleFormItem(formItem, formData);
// const getFieldValue = {
// initialValue,
// rules: formItem.rules || [{ required: false, message: '' }],
// valuePropName,
// };
return (
<Form.Item
key={formItem.key}
label={formItem.label}
{...formItem.formAttrs}
>
{getFieldDecorator(formItem.key, {
initialValue: formItem.formAttrs?.initialvalue,
getValueFromEvent: formItem?.getvaluefromevent,
})(
this.renderFormItem(formItem),
)}
</Form.Item>
);
})
}
<Form.Item>
{
isReset && <Button style={{ width: '80px', marginRight: '20px' }} type="primary" onClick={() => this.resetClick()}>重置</Button>
}
<Button style={{ width: '80px' }} type="primary" onClick={() => this.theQueryClick(getFieldsValue())}>查询</Button>
</Form.Item>
</Form>
);
}
}
export const SearchFormComponent = Form.create<SerachFormProps>({ name: 'search-form' })(SearchForm);
\ No newline at end of file
kafka-manager-console/src/container/admin/user-management.tsx
浏览文件 @ 47b8fe50
......@@ -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;
}
......
kafka-manager-console/src/container/alarm/add-alarm/alarm-select.tsx
浏览文件 @ 47b8fe50
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 (
......
kafka-manager-console/src/container/alarm/add-alarm/filter-form.tsx
浏览文件 @ 47b8fe50
......@@ -149,9 +149,9 @@ export class DynamicSetFilter extends React.Component<IDynamicProps> {
public handleSelectChange = (e: string, type: 'topic' | 'consumerGroup' | 'location') => {
switch (type) {
case 'topic':
if (!this.clusterId) {
return message.info('请选择集群');
}
// if (!this.clusterId) {
// return message.info('请选择集群');
// }
this.topicName = e;
const type = this.dealMonitorType();
if (['kafka-consumer-maxLag', 'kafka-consumer-maxDelayTime', 'kafka-consumer-lag'].indexOf(type) > -1) {
......
kafka-manager-console/src/container/alarm/alarm-list.tsx
浏览文件 @ 47b8fe50
......@@ -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() {
......
kafka-manager-console/src/container/app/app-list.tsx
浏览文件 @ 47b8fe50
......@@ -52,8 +52,7 @@ export class CommonAppList extends SearchAndFilterContainer {
},
}),
render: (text: string, record: IAppItem) => {
return (
<Tooltip placement="bottomLeft" title={record.name}>{text}</Tooltip>);
return (<Tooltip placement="bottomLeft" title={record.name}>{text}</Tooltip>);
},
},
{
......@@ -103,7 +102,7 @@ export class CommonAppList extends SearchAndFilterContainer {
}
public getOnlineConnect(record: IAppItem) {
modal.showOfflineAppModal(record.appId);
modal.showOfflineAppNewModal(record.appId);
}
public getData<T extends IAppItem>(origin: T[]) {
......@@ -114,7 +113,7 @@ export class CommonAppList extends SearchAndFilterContainer {
data = searchKey ? origin.filter((item: IAppItem) =>
((item.name !== undefined && item.name !== null) && item.name.toLowerCase().includes(searchKey as string)) ||
((item.principals !== undefined && item.principals !== null) && item.principals.toLowerCase().includes(searchKey as string)) ||
((item.appId !== undefined && item.appId !== null) && item.appId.toLowerCase().includes(searchKey as string)) ) : origin;
((item.appId !== undefined && item.appId !== null) && item.appId.toLowerCase().includes(searchKey as string))) : origin;
return data;
}
......
kafka-manager-console/src/container/cluster/my-cluster.tsx
浏览文件 @ 47b8fe50
......@@ -29,16 +29,16 @@ export class MyCluster extends SearchAndFilterContainer {
public applyCluster() {
const xFormModal = {
formMap: [
{
key: 'idc',
label: '数据中心',
defaultValue: region.regionName,
rules: [{ required: true, message: '请输入数据中心' }],
attrs: {
placeholder: '请输入数据中心',
disabled: true,
},
},
// {
// key: 'idc',
// label: '数据中心',
// defaultValue: region.regionName,
// rules: [{ required: true, message: '请输入数据中心' }],
// attrs: {
// placeholder: '请输入数据中心',
// disabled: true,
// },
// },
{
key: 'appId',
label: '所属应用',
......@@ -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;
......
kafka-manager-console/src/container/drawer/data-migration.tsx
浏览文件 @ 47b8fe50
......@@ -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',
......
kafka-manager-console/src/container/expert/topic-governance/index.tsx
浏览文件 @ 47b8fe50
......@@ -133,15 +133,15 @@ export class GovernanceTopic extends SearchAndFilterContainer {
width: '30%',
sorter: (a: IResource, b: IResource) => a.topicName.charCodeAt(0) - b.topicName.charCodeAt(0),
render: (text: string, item: IResource) =>
(
<Tooltip placement="bottomLeft" title={text}>
<a
// tslint:disable-next-line:max-line-length
href={`${this.urlPrefix}/topic/topic-detail?clusterId=${item.clusterId}&topic=${item.topicName}&isPhysicalClusterId=true&region=${region.currentRegion}`}
>
{text}
</a>
</Tooltip>),
(
<Tooltip placement="bottomLeft" title={text}>
<a
// tslint:disable-next-line:max-line-length
href={`${this.urlPrefix}/topic/topic-detail?clusterId=${item.clusterId}&topic=${item.topicName}&isPhysicalClusterId=true&region=${region.currentRegion}`}
>
{text}
</a>
</Tooltip>),
},
{
title: '所在集群',
......@@ -215,7 +215,7 @@ export class GovernanceTopic extends SearchAndFilterContainer {
return (
<>
{this.pendingTopic(this.getData(expert.resourceData))}
{this.pendingTopic(this.getData(expert.resourceData))}
</>
);
}
......
kafka-manager-console/src/container/header/index.less
浏览文件 @ 47b8fe50
......@@ -16,6 +16,14 @@
line-height: 64px;
vertical-align: middle;
}
.kafka-header-version{
display: inline-block;
vertical-align: middle;
padding-top:5px;
font-size: 12px;
margin-left:10px;
color:#a0a0a0;
}
}
.mid-content {
......
kafka-manager-console/src/container/header/index.tsx
浏览文件 @ 47b8fe50
......@@ -145,6 +145,8 @@ export const Header = observer((props: IHeader) => {
<div className="left-content">
<img className="kafka-header-icon" src={logoUrl} alt="" />
<span className="kafka-header-text">Kafka Manager</span>
<a className='kafka-header-version' href="https://github.com/didi/Logi-KafkaManager/releases" target='_blank'>v2.4.0</a>
{/* 添加版本超链接 */}
</div>
<div className="mid-content">
{headerMenu.map((item: IMenuItem, index: number) =>
......
kafka-manager-console/src/container/modal/admin/cluster.ts
浏览文件 @ 47b8fe50
......@@ -22,11 +22,11 @@ export const showEditClusterTopic = (item: IClusterTopics) => {
},
{
key: 'appId',
label: '应用ID',
label: '应用名称',
type: 'select',
options: app.adminAppData.map(item => {
return {
label: item.appId,
label: item.name,
value: item.appId,
};
}),
......@@ -61,6 +61,7 @@ export const showEditClusterTopic = (item: IClusterTopics) => {
attrs: {
placeholder: '请输入保存时间',
suffix: '小时',
prompttype: '修改保存时间，预计一分钟左右生效!'
},
},
{
......
kafka-manager-console/src/container/modal/admin/confirm-detail-topic.tsx
浏览文件 @ 47b8fe50
......@@ -35,7 +35,6 @@ class CustomForm extends React.Component<IXFormProps> {
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 {
......@@ -77,7 +76,6 @@ class CustomForm extends React.Component<IXFormProps> {
}
public render() {
// console.log('props', this.props);
const { formData = {} as any, visible } = this.props;
const { getFieldDecorator } = this.props.form;
let metadata = [] as IBrokersMetadata[];
......
kafka-manager-console/src/container/modal/admin/expand-partition.tsx
浏览文件 @ 47b8fe50
......@@ -111,11 +111,11 @@ class CustomForm extends React.Component<IXFormProps> {
})(<Input placeholder="请输入分区数" />)}
</Form.Item>
<Form.Item label="类型">
{/* <Form.Item label={this.state.checked ? 'Region类型' : 'Borker类型'} > */}
{/* <Form.Item label={this.state.checked ? 'Region类型' : 'Broker类型'} > */}
{/* <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.Button value="broker">Broker类型</Radio.Button>
</Radio.Group>
</Form.Item>
<Form.Item label="brokerIdList" style={{ display: this.state.checked ? 'none' : '' }}>
......
kafka-manager-console/src/container/modal/admin/task.ts
浏览文件 @ 47b8fe50
......@@ -28,8 +28,8 @@ const updateInputModal = (status?: string) => {
formMap[4].invisible = status === 'region';
formMap[5].invisible = status !== 'region';
formMap[4].rules = [{required: status !== 'region'}];
formMap[5].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);
};
......@@ -103,7 +103,7 @@ export const createMigrationTasks = () => {
label: 'Region',
value: 'region',
}, {
label: 'Borker',
label: 'Broker',
value: 'broker',
}],
rules: [{
......@@ -141,7 +141,7 @@ export const createMigrationTasks = () => {
placeholder: '请选择目标Region',
},
},
{
key: 'beginTime',
label: '计划开始时间',
......@@ -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: '小时',
},
},
......
kafka-manager-console/src/container/modal/admin/user.ts
浏览文件 @ 47b8fe50
......@@ -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);
};
kafka-manager-console/src/container/modal/admin/version.ts
浏览文件 @ 47b8fe50
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);
......
kafka-manager-console/src/container/modal/app.tsx
浏览文件 @ 47b8fe50
......@@ -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) => {
......
kafka-manager-console/src/container/modal/expert.tsx
浏览文件 @ 47b8fe50
......@@ -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);
};
kafka-manager-console/src/container/modal/offline-app-modal-new.tsx 0 → 100644
浏览文件 @ 47b8fe50
import * as React from 'react';
import { Table, Modal, Tooltip, Icon, message, notification, Alert, Button } from 'component/antd';
import { app } from 'store/app';
import { getApplyOnlineColumns } from 'container/topic/config';
import { observer } from 'mobx-react';
import { modal } from 'store/modal';
import { users } from 'store/users';
import { urlPrefix } from 'constants/left-menu';
import { region } from 'store';
@observer
export class ConnectAppNewList extends React.Component {
public componentDidMount() {
app.getAppsConnections(modal.params);
}
public handleCancel = () => {
app.setAppsConnections([]);
modal.close();
}
public handleSubmit = () => {
const connectionList = app.appsConnections;
if (connectionList && connectionList.length) {
return message.warning('存在连接信息，无法申请下线！');
}
const offlineParams = {
type: 11,
applicant: users.currentUser.username,
description: '',
extensions: JSON.stringify({ appId: modal.params }),
};
app.applyAppOffline(offlineParams).then((data: any) => {
notification.success({ message: '申请下线成功' });
window.location.href = `${urlPrefix}/user/order-detail/?orderId=${data.id}&region=${region.currentRegion}`;
});
modal.close();
}
public render() {
const connectionList = app.appsConnections;
return (
<>
<Modal
visible={true}
className="stream-debug-modal"
title="提示"
maskClosable={false}
onCancel={this.handleCancel}
// onOk={this.handleSubmit}
// okText="确认"
// cancelText="取消"
okButtonProps={{ disabled: app.connectLoading || !!app.appsConnections.length }}
footer={connectionList && connectionList.length ?
<Button type="primary" onClick={this.handleCancel}>确定</Button>
:
<>
<Button onClick={this.handleCancel}>取消</Button>
<Button type="primary" onClick={this.handleSubmit}>确定</Button>
</>
}
width={500}
>
<div style={{ textAlign: 'center', fontWeight: "bolder" }}>
{
connectionList && connectionList.length
?
<span>该应用已与Topic关联，请先解除应用与Topic之间的关系。<a href={`${urlPrefix}/topic/app-detail?appId=${modal.params}`}>点击查看</a></span>
:
<span>应用下线后，AppID、密钥将会失效，请谨慎操作！</span>
}
</div>
</Modal>
</>
);
}
}
kafka-manager-console/src/container/modal/order.tsx
浏览文件 @ 47b8fe50
......@@ -4,6 +4,7 @@ import { message, Icon, notification, Modal, Table, Tooltip } from 'component/an
import { IApprovalOrder, IBaseOrder, IOrderInfo } from 'types/base-type';
import { admin } from 'store/admin';
import { modal } from 'store/modal';
import { cluster } from 'store/cluster';
import { cellStyle } from 'constants/table';
import * as React from 'react';
......@@ -37,6 +38,12 @@ const renderModalTilte = (type: number, status: number) => {
export const showApprovalModal = (info: IOrderInfo, status: number, from?: string) => {
const { id, type } = info;
const formMap = [{
key: 'clusterId',
label: '所属集群',
type: 'input_number',
defaultValue: info.detail.logicalClusterName,
attrs: { disabled: true },
}, {
key: 'partitionNum',
label: '分区数',
type: 'input_number',
......@@ -75,8 +82,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',
......@@ -87,7 +94,7 @@ export const showApprovalModal = (info: IOrderInfo, status: number, from?: strin
label: 'Region',
value: 'region',
}, {
label: 'Borker',
label: 'Broker',
value: 'broker',
}],
rules: [{ required: false, message: '请选择类型' }],
......
kafka-manager-console/src/container/modal/topic.tsx
浏览文件 @ 47b8fe50
......@@ -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,
......@@ -399,8 +399,8 @@ export const updateAllTopicFormModal = () => {
const formMap = wrapper.xFormWrapper.formMap;
if (topic.authorities) {
const { consume, send, checkStatus } = judgeAccessStatus(topic.authorities.access);
formMap[3].defaultValue = checkStatus;
formMap[3].options = [{
formMap[2].defaultValue = checkStatus;
formMap[2].options = [{
label: `消费权限${consume ? '（已拥有）' : ''}`,
value: '1',
disabled: consume,
......@@ -409,7 +409,7 @@ export const updateAllTopicFormModal = () => {
value: '2',
disabled: send,
}];
formMap[3].rules = [{
formMap[2].rules = [{
required: true,
validator: (rule: any, value: any, callback: any) => getPowerValidator(rule, value, callback, checkStatus, 'allTopic'),
}];
......@@ -476,7 +476,6 @@ export const showAllPermissionModal = (item: ITopic) => {
const showAllPermission = (appId: string, item: ITopic, access: number) => {
const { consume, send, checkStatus } = judgeAccessStatus(access);
const xFormModal = {
formMap: [
{
......@@ -489,16 +488,6 @@ const showAllPermission = (appId: string, item: ITopic, access: number) => {
disabled: true,
},
},
{
key: 'clusterName',
label: '集群名称',
defaultValue: item.clusterName,
rules: [{ required: true, message: '请输入集群名称' }],
attrs: {
placeholder: '请输入集群名称',
disabled: true,
},
},
{
key: 'appId',
label: '绑定应用',
......@@ -526,6 +515,26 @@ const showAllPermission = (appId: string, item: ITopic, access: number) => {
validator: (rule: any, value: any, callback: any) => getPowerValidator(rule, value, callback, checkStatus, 'allTopic'),
}],
},
// {
// key: 'clusterName',
// label: '集群名称',
// defaultValue: item.clusterName,
// rules: [{ required: true, message: '请输入集群名称' }],
// attrs: {
// placeholder: '请输入集群名称',
// disabled: true,
// },
// },
// {
// key: 'clusterName',
// label: '集群名称',
// defaultValue: item.clusterName,
// rules: [{ required: true, message: '请输入集群名称' }],
// attrs: {
// placeholder: '请输入集群名称',
// disabled: true,
// },
// },
{
key: 'description',
label: '申请原因',
......@@ -587,16 +596,16 @@ export const showPermissionModal = (item: ITopic) => {
disabled: true,
},
},
{
key: 'clusterName',
label: '集群名称',
defaultValue: item.clusterName,
rules: [{ required: true, message: '请输入集群名称' }],
attrs: {
placeholder: '请输入集群名称',
disabled: true,
},
},
// {
// key: 'clusterName',
// label: '集群名称',
// defaultValue: item.clusterName,
// rules: [{ required: true, message: '请输入集群名称' }],
// attrs: {
// placeholder: '请输入集群名称',
// disabled: true,
// },
// },
{
key: 'appName',
label: '绑定应用',
......
kafka-manager-console/src/container/search-filter.tsx
浏览文件 @ 47b8fe50
......@@ -194,7 +194,7 @@ export class SearchAndFilterContainer extends React.Component<any, ISearchAndFil
);
}
public renderColumnsFilter = (type: string) => {
public renderColumnsFilter = (type: string, params?: any) => {
return {
filterIcon: this.renderFilterIcon.bind(null, type),
filterDropdownVisible: this.state[type] as boolean,
......
kafka-manager-console/src/container/staff-select.tsx
浏览文件 @ 47b8fe50
......@@ -28,7 +28,8 @@ export class StaffSelect extends React.Component<IStaffSelectProps> {
public getStaffList = () => {
const { value } = this.props;
const current = users.currentUser.username || getCookie('username');
const principals = value || (current ? [current] : []);
const principals = [''];
// const principals = value || (current ? [current] : []);
const promises: any[] = [];
for (const item of principals) {
......@@ -64,7 +65,6 @@ export class StaffSelect extends React.Component<IStaffSelectProps> {
const { value, isDisabled } = this.props;
const current = users.currentUser.username || getCookie('username');
const principals = value || (current ? [current] : []);
return (
<Select
mode="multiple"
......@@ -72,6 +72,7 @@ export class StaffSelect extends React.Component<IStaffSelectProps> {
defaultValue={principals}
onChange={(e: string[]) => this.handleChange(e)}
onSearch={(e: string) => this.handleSearch(e)}
onFocus={() => this.getFocus()}
disabled={isDisabled}
{...searchProps}
>
......@@ -83,6 +84,10 @@ export class StaffSelect extends React.Component<IStaffSelectProps> {
);
}
public getFocus() {
this.getStaffList();
}
public handleSearch(params: string) {
debounce(() => {
getStaff(params).then((data: IStaff[]) => {
......@@ -98,9 +103,9 @@ export class StaffSelect extends React.Component<IStaffSelectProps> {
});
}, 300)();
}
public handleChange(params: string[]) {
const { onChange } = this.props;
// tslint:disable-next-line:no-unused-expression
onChange && onChange(params);
}
......
kafka-manager-console/src/container/topic/topic-detail/base-information.tsx
浏览文件 @ 47b8fe50
......@@ -129,16 +129,17 @@ export class BaseInformation extends React.Component<IInfoProps> {
}
public realTimeTraffic() {
const realTraffic = topic.realTraffic;
if (realTraffic) {
return (
<>
<Spin spinning={topic.realLoading}>
{renderTrafficTable(this.updateRealStatus, StatusGragh)}
</Spin>
</>
);
}
// const realTraffic = topic.realTraffic;
// if (realTraffic) {
return (
<>
<Spin spinning={topic.realLoading}>
{renderTrafficTable(this.updateRealStatus, StatusGragh)}
</Spin>
</>
);
// }
}
public realTimeConsume() {
......
kafka-manager-console/src/container/topic/topic-detail/connect-information.tsx
浏览文件 @ 47b8fe50
......@@ -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))}
......
kafka-manager-console/src/container/topic/topic-detail/group-id.tsx
浏览文件 @ 47b8fe50
......@@ -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;
}
......
kafka-manager-console/src/container/topic/topic-detail/reset-offset.tsx
浏览文件 @ 47b8fe50
......@@ -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>
......
kafka-manager-console/src/container/user-center/config.tsx
浏览文件 @ 47b8fe50
......@@ -30,7 +30,7 @@ export const getInfoRenderItem = (orderInfo: IOrderInfo, result: boolean) => {
value: orderInfo.detail.principals,
}];
const clusterTypelist: ILabelValue[] = [ {
const clusterTypelist: ILabelValue[] = [{
label: '物理集群名称',
value: orderInfo.detail.physicalClusterName,
}, {
......@@ -80,23 +80,25 @@ export const getInfoRenderItem = (orderInfo: IOrderInfo, result: boolean) => {
phyAuthOfflineList.splice(3, 0, ...clusterTypelist);
const clusterInfoList: ILabelValue[] = [{
label: '流入流量',
value: `${transBToMB(orderInfo.detail.bytesIn)} MB/s`,
}, {
label: '数据中心',
value: orderInfo.detail.idc,
}, {
label: '集群类型',
value: clusterTypeMap[orderInfo.detail.mode],
}, {
label: '应用ID',
value: orderInfo.detail.appId,
},
label: '流入流量',
value: `${transBToMB(orderInfo.detail.bytesIn)} MB/s`,
},
// {
// label: '数据中心',
// value: orderInfo.detail.idc,
// },
{
label: '集群类型',
value: clusterTypeMap[orderInfo.detail.mode],
}, {
label: '应用ID',
value: orderInfo.detail.appId,
},
];
const clusterOfflineList: ILabelValue[] = expansionList;
const phyClusterOfflineList: ILabelValue[] = clusterTypelist;
const maxAvgBytesIn = orderInfo.detail.maxAvgBytesInList && orderInfo.detail.maxAvgBytesInList.map(item => {
const maxAvgBytesIn = orderInfo.detail.maxAvgBytesInList && orderInfo.detail.maxAvgBytesInList.map(item => {
const val = `${transBToMB(item)} MB/s`;
return val;
});
......@@ -125,18 +127,18 @@ export const getInfoRenderItem = (orderInfo: IOrderInfo, result: boolean) => {
phyQuotaInfoList.splice(3, 0, ...clusterTypelist);
const partitionList: ILabelValue[] = expansionList.concat([{
label: 'Topic名称',
value: orderInfo.detail.topicName,
}, {
label: '申请分区数',
value: orderInfo.detail.needIncrPartitionNum,
}, {
label: '当前流入流量',
value: `${transBToMB(orderInfo.detail.bytesIn)} MB/s`,
}, {
label: '近三天峰值流入流量',
value: maxAvgBytesIn && maxAvgBytesIn.join('、'),
},
label: 'Topic名称',
value: orderInfo.detail.topicName,
}, {
label: '申请分区数',
value: orderInfo.detail.needIncrPartitionNum,
}, {
label: '当前流入流量',
value: `${transBToMB(orderInfo.detail.bytesIn)} MB/s`,
}, {
label: '近三天峰值流入流量',
value: maxAvgBytesIn && maxAvgBytesIn.join('、'),
},
]);
const phyPartitionList: ILabelValue[] = partitionList.filter(i => !cluster.includes(i.label));
......
kafka-manager-console/src/container/user-center/order-detail.tsx
浏览文件 @ 47b8fe50
......@@ -133,6 +133,12 @@ export class OrderDetail extends React.Component {
width: '20%',
render: (t: string) => <span>{t === 'consumer' ? '消费' : '生产'}</span>,
},
// {
// title: '客户端语言',
// dataIndex: 'language',
// key: 'language',
// width: '20%',
// },
];
return (
<>
......
kafka-manager-console/src/container/wrapper/custom-modal.tsx
浏览文件 @ 47b8fe50
......@@ -3,6 +3,7 @@ import { observer } from 'mobx-react';
import { modal } from 'store/modal';
import { ConnectTopicList } from '../modal/connect-topic-list';
import { ConnectAppList } from '../modal/offline-app-modal';
import { ConnectAppNewList } from '../modal/offline-app-modal-new';
import { CancelTopicPermission } from 'container/modal/cancel-topic-permission';
import { OfflineClusterModal } from 'container/modal/offline-cluster-modal';
import { RenderOrderOpResult } from 'container/modal/order';
......@@ -22,6 +23,7 @@ export default class AllCustomModalInOne extends React.Component {
const modalMap = {
offlineTopicModal: <ConnectTopicList />,
offlineAppNewModal: <ConnectAppNewList />,
offlineAppModal: <ConnectAppList />,
cancelTopicPermission: <CancelTopicPermission />,
offlineClusterModal: <OfflineClusterModal />,
......
kafka-manager-console/src/lib/api.ts
浏览文件 @ 47b8fe50
import fetch, { formFetch } from './fetch';
import { IUploadFile, IUser, IQuotaModelItem, ILimitsItem, ITopic, IOrderParams, ISample, IMigration, IExecute, IEepand, IUtils, ITopicMetriceParams, IRegister, IEditTopic, IExpand, IDeleteTopic, INewRegions, INewLogical, IRebalance, INewBulidEnums, ITrigger, IApprovalOrder, IMonitorSilences, IConfigure, IBatchApproval } from 'types/base-type';
import { IUploadFile, IUser, IQuotaModelItem, ILimitsItem, ITopic, IOrderParams, ISample, IMigration, IExecute, IEepand, IUtils, ITopicMetriceParams, IRegister, IEditTopic, IExpand, IDeleteTopic, INewRegions, INewLogical, IRebalance, INewBulidEnums, ITrigger, IApprovalOrder, IMonitorSilences, IConfigure, IConfigGateway, IBatchApproval } from 'types/base-type';
import { IRequestParams } from 'types/alarm';
import { apiCache } from 'lib/api-cache';
......@@ -418,6 +418,13 @@ export const getMetaData = (needDetail: boolean = true) => {
return fetch(`/rd/clusters/basic-info?need-detail=${needDetail}`);
};
export const getOperationRecordData = (params: any) => {
return fetch(`/rd/operate-record`,{
method: 'POST',
body: JSON.stringify(params),
});
};
export const getConfigure = () => {
return fetch(`/rd/configs`);
};
......@@ -442,6 +449,34 @@ export const deleteConfigure = (configKey: string) => {
});
};
export const getGatewayList = () => {
return fetch(`/rd/gateway-configs`);
};
export const getGatewayType = () => {
return fetch(`/op/gateway-configs/type-enums`);
};
export const addNewConfigGateway = (params: IConfigGateway) => {
return fetch(`/op/gateway-configs`, {
method: 'POST',
body: JSON.stringify(params),
});
};
export const editConfigGateway = (params: IConfigGateway) => {
return fetch(`/op/gateway-configs`, {
method: 'PUT',
body: JSON.stringify(params),
});
};
export const deleteConfigGateway = (params: IConfigure) => {
return fetch(`/op/gateway-configs`, {
method: 'DELETE',
body: JSON.stringify(params),
});
};
export const getDataCenter = () => {
return fetch(`/normal/configs/idc`);
};
......@@ -530,6 +565,23 @@ export const getControllerHistory = (clusterId: number) => {
return fetch(`/rd/clusters/${clusterId}/controller-history`);
};
export const getCandidateController = (clusterId: number) => {
return fetch(`/rd/clusters/${clusterId}/controller-preferred-candidates`);
};
export const addCandidateController = (params:any) => {
return fetch(`/op/cluster-controller/preferred-candidates`, {
method: 'POST',
body: JSON.stringify(params),
});
};
export const deleteCandidateCancel = (params:any)=>{
return fetch(`/op/cluster-controller/preferred-candidates`, {
method: 'DELETE',
body: JSON.stringify(params),
});
}
/**
* 运维管控 broker
*/
......
kafka-manager-console/src/lib/line-charts-config.ts
浏览文件 @ 47b8fe50
......@@ -77,7 +77,7 @@ export const getControlMetricOption = (type: IOptionType, data: IClusterMetrics[
name = '条';
data.map(item => {
item.messagesInPerSec = item.messagesInPerSec !== null ? Number(item.messagesInPerSec.toFixed(2)) : null;
});
});
break;
case 'brokerNum':
case 'topicNum':
......@@ -224,7 +224,7 @@ export const getClusterMetricOption = (type: IOptionType, record: IClusterMetric
name = '条';
data.map(item => {
item.messagesInPerSec = item.messagesInPerSec !== null ? Number(item.messagesInPerSec.toFixed(2)) : null;
});
});
break;
default:
const { name: unitName, data: xData } = dealFlowData(metricTypeMap[type], data);
......@@ -248,8 +248,8 @@ export const getClusterMetricOption = (type: IOptionType, record: IClusterMetric
const unitSeries = item.data[item.seriesName] !== null ? Number(item.data[item.seriesName]) : null;
// tslint:disable-next-line:max-line-length
result += '<span style="display:inline-block;margin-right:0px;border-radius:10px;width:9px;height:9px;background-color:' + item.color + '"></span>';
if ( (item.data.produceThrottled && item.seriesName === 'appIdBytesInPerSec')
|| (item.data.consumeThrottled && item.seriesName === 'appIdBytesOutPerSec') ) {
if ((item.data.produceThrottled && item.seriesName === 'appIdBytesInPerSec')
|| (item.data.consumeThrottled && item.seriesName === 'appIdBytesOutPerSec')) {
return result += item.seriesName + ': ' + unitSeries + '（被限流）' + '<br>';
}
return result += item.seriesName + ': ' + unitSeries + '<br>';
......@@ -317,7 +317,7 @@ export const getMonitorMetricOption = (seriesName: string, data: IMetricPoint[])
if (ele.name === item.seriesName) {
// tslint:disable-next-line:max-line-length
result += '<span style="display:inline-block;margin-right:0px;border-radius:10px;width:9px;height:9px;background-color:' + item.color + '"></span>';
return result += item.seriesName + ': ' + (item.data.value === null ? '' : item.data.value.toFixed(2)) + '<br>';
return result += item.seriesName + ': ' + (item.data.value === null ? '' : item.data.value.toFixed(2)) + '<br>';
}
});
});
......
kafka-manager-console/src/routers/page/admin.tsx
浏览文件 @ 47b8fe50
......@@ -3,7 +3,7 @@ import CommonRoutePage from './common';
import urlParser from 'lib/url-parser';
import urlQuery from 'store/url-query';
import { AppDetail } from 'container/app';
import { AdminAppList, ClusterList, ClusterDetail, BrokerDetail, UserManagement, VersionManagement, OperationManagement, OperationDetail, BillManagement, ConfigureManagement, IndividualBill, MigrationDetail, BillDetail } from 'container/admin';
import { AdminAppList, ClusterList, ClusterDetail, BrokerDetail, UserManagement, VersionManagement, OperationManagement, OperationDetail, BillManagement, ConfigureManagement, IndividualBill, MigrationDetail, BillDetail, OperationRecord } from 'container/admin';
import { PlatformManagement } from 'container/admin/platform-management';
export default class Home extends React.Component<any> {
......@@ -52,7 +52,11 @@ export default class Home extends React.Component<any> {
path: '/admin/migration-detail',
exact: true,
component: MigrationDetail,
}];
}, {
path: '/admin/operation-record',
exact: true,
component: OperationRecord,
},];
constructor(props: any) {
super(props);
......@@ -66,7 +70,7 @@ export default class Home extends React.Component<any> {
public render() {
return (
<CommonRoutePage pageRoute={this.pageRoute} mode="admin" active="admin"/>
<CommonRoutePage pageRoute={this.pageRoute} mode="admin" active="admin" />
);
}
}
kafka-manager-console/src/store/admin-monitor.ts
浏览文件 @ 47b8fe50
......@@ -3,6 +3,11 @@ import { observable, action } from 'mobx';
import { getBrokersMetricsHistory } from 'lib/api';
import { IClusterMetrics } from 'types/base-type';
const STATUS = {
PENDING: 'pending',
REJECT: 'reject',
FULLFILLED: 'fullfilled'
}
class AdminMonitor {
@observable
public currentClusterId = null as number;
......@@ -33,33 +38,42 @@ class AdminMonitor {
@action.bound
public setBrokersChartsData(data: IClusterMetrics[]) {
this.brokersMetricsHistory = data;
this.setRequestId(null);
this.setRequestId(STATUS.FULLFILLED);
Promise.all(this.taskQueue).then(() => {
this.setRequestId(null);
this.taskQueue = [];
})
return data;
}
public taskQueue = [] as any[];
public getBrokersMetricsList = async (startTime: string, endTime: string) => {
if (this.requestId && this.requestId !== 'error') {
return new Promise((res, rej) => {
window.setTimeout(() => {
if (this.requestId === 'error') {
rej();
} else {
if (this.requestId) {
//逐条定时查询任务状态
const p = new Promise((res, rej) => {
const timer = window.setInterval(() => {
if (this.requestId === STATUS.REJECT) {
rej(this.brokersMetricsHistory);
window.clearInterval(timer);
} else if (this.requestId === STATUS.FULLFILLED) {
res(this.brokersMetricsHistory);
window.clearInterval(timer);
}
}, 800); // TODO: 该实现方式待优化
}, (this.taskQueue.length + 1) * 100);
});
this.taskQueue.push(p);
return p;
}
this.setRequestId('requesting');
this.setRequestId(STATUS.PENDING);
return getBrokersMetricsHistory(this.currentClusterId, this.currentBrokerId, startTime, endTime)
.then(this.setBrokersChartsData).catch(() => this.setRequestId('error'));
.then(this.setBrokersChartsData).catch(() => this.setRequestId(STATUS.REJECT));
}
public getBrokersChartsData = async (startTime: string, endTime: string, reload?: boolean) => {
if (this.brokersMetricsHistory && !reload) {
return new Promise(res => res(this.brokersMetricsHistory));
}
return this.getBrokersMetricsList(startTime, endTime);
}
}
......
kafka-manager-console/src/store/admin.ts
浏览文件 @ 47b8fe50
import { observable, action } from 'mobx';
import { INewBulidEnums, ILabelValue, IClusterReal, IOptionType, IClusterMetrics, IClusterTopics, IKafkaFiles, IMetaData, IConfigure, IBrokerData, IOffset, IController, IBrokersBasicInfo, IBrokersStatus, IBrokersTopics, IBrokersPartitions, IBrokersAnalysis, IAnalysisTopicVO, IBrokersMetadata, IBrokersRegions, IThrottles, ILogicalCluster, INewRegions, INewLogical, ITaskManage, IPartitionsLocation, ITaskType, ITasksEnums, ITasksMetaData, ITaskStatusDetails, IKafkaRoles, IEnumsMap, IStaffSummary, IBill, IBillDetail } from 'types/base-type';
import { INewBulidEnums, ILabelValue, IClusterReal, IOptionType, IClusterMetrics, IClusterTopics, IKafkaFiles, IMetaData, IConfigure, IConfigGateway, IBrokerData, IOffset, IController, IBrokersBasicInfo, IBrokersStatus, IBrokersTopics, IBrokersPartitions, IBrokersAnalysis, IAnalysisTopicVO, IBrokersMetadata, IBrokersRegions, IThrottles, ILogicalCluster, INewRegions, INewLogical, ITaskManage, IPartitionsLocation, ITaskType, ITasksEnums, ITasksMetaData, ITaskStatusDetails, IKafkaRoles, IEnumsMap, IStaffSummary, IBill, IBillDetail } from 'types/base-type';
import {
deleteCluster,
getBasicInfo,
......@@ -9,10 +9,16 @@ import {
getTopicsBasicInfo,
getTasksKafkaFiles,
getMetaData,
getOperationRecordData,
getConfigure,
addNewConfigure,
editConfigure,
addNewConfigGateway,
deleteConfigure,
getGatewayList,
getGatewayType,
editConfigGateway,
deleteConfigGateway,
getDataCenter,
getClusterBroker,
getClusterConsumer,
......@@ -49,6 +55,9 @@ import {
getStaffSummary,
getBillStaffSummary,
getBillStaffDetail,
getCandidateController,
addCandidateController,
deleteCandidateCancel
} from 'lib/api';
import { getControlMetricOption, getClusterMetricOption } from 'lib/line-charts-config';
......@@ -59,6 +68,7 @@ import { transBToMB } from 'lib/utils';
import moment from 'moment';
import { timestore } from './time';
import { message } from 'component/antd';
class Admin {
@observable
......@@ -94,9 +104,23 @@ class Admin {
@observable
public metaList: IMetaData[] = [];
@observable
public oRList: any[] = [];
@observable
public oRparams:any={
moduleId:0
};
@observable
public configureList: IConfigure[] = [];
@observable
public configGatewayList: IConfigGateway[] = [];
@observable
public gatewayType: [];
@observable
public dataCenterList: string[] = [];
......@@ -142,6 +166,12 @@ class Admin {
@observable
public controllerHistory: IController[] = [];
@observable
public controllerCandidate: IController[] = [];
@observable
public filtercontrollerCandidate: string = '';
@observable
public brokersPartitions: IBrokersPartitions[] = [];
......@@ -152,7 +182,7 @@ class Admin {
public brokersAnalysisTopic: IAnalysisTopicVO[] = [];
@observable
public brokersMetadata: IBrokersMetadata[] = [];
public brokersMetadata: IBrokersMetadata[] | any = [];
@observable
public brokersRegions: IBrokersRegions[] = [];
......@@ -206,10 +236,10 @@ class Admin {
public kafkaRoles: IKafkaRoles[];
@observable
public controlType: IOptionType = 'byteIn/byteOut' ;
public controlType: IOptionType = 'byteIn/byteOut';
@observable
public type: IOptionType = 'byteIn/byteOut' ;
public type: IOptionType = 'byteIn/byteOut';
@observable
public currentClusterId = null as number;
......@@ -241,7 +271,7 @@ class Admin {
@action.bound
public setClusterRealTime(data: IClusterReal) {
this.clusterRealData = data;
this.clusterRealData = data;
this.getRealClusterLoading(false);
}
......@@ -284,7 +314,7 @@ class Admin {
return {
...item,
label: item.fileName,
value: item.fileName + ',' + item.fileMd5,
value: item.fileName + ',' + item.fileMd5,
};
}));
}
......@@ -298,6 +328,15 @@ class Admin {
}) : [];
}
@action.bound
public setOperationRecordList(data:any){
this.setLoading(false);
this.oRList = data ? data.map((item:any, index: any) => {
item.key = index;
return item;
}) : [];
}
@action.bound
public setConfigure(data: IConfigure[]) {
this.configureList = data ? data.map((item, index) => {
......@@ -306,6 +345,20 @@ class Admin {
}) : [];
}
@action.bound
public setConfigGatewayList(data: IConfigGateway[]) {
this.configGatewayList = data ? data.map((item, index) => {
item.key = index;
return item;
}) : [];
}
@action.bound
public setConfigGatewayType(data: any) {
this.setLoading(false);
this.gatewayType = data || [];
}
@action.bound
public setDataCenter(data: string[]) {
this.dataCenterList = data || [];
......@@ -335,6 +388,17 @@ class Admin {
}) : [];
}
@action.bound
public setCandidateController(data: IController[]) {
this.controllerCandidate = data ? data.map((item, index) => {
item.key = index;
return item;
}) : [];
this.filtercontrollerCandidate = data?data.map((item,index)=>{
return item.brokerId
}).join(','):''
}
@action.bound
public setBrokersBasicInfo(data: IBrokersBasicInfo) {
this.brokersBasicInfo = data;
......@@ -356,10 +420,10 @@ class Admin {
this.replicaStatus = data.brokerReplicaStatusList.slice(1);
this.bytesInStatus.forEach((item, index) => {
this.peakValueList.push({ name: peakValueMap[index], value: item});
this.peakValueList.push({ name: peakValueMap[index], value: item });
});
this.replicaStatus.forEach((item, index) => {
this.copyValueList.push({name: copyValueMap[index], value: item});
this.copyValueList.push({ name: copyValueMap[index], value: item });
});
}
......@@ -415,16 +479,16 @@ class Admin {
}
@action.bound
public setBrokersMetadata(data: IBrokersMetadata[]) {
this.brokersMetadata = data ? data.map((item, index) => {
item.key = index;
return {
...item,
text: `${item.host} （BrokerID：${item.brokerId}）`,
label: item.host,
value: item.brokerId,
};
}) : [];
public setBrokersMetadata(data: IBrokersMetadata[]|any) {
this.brokersMetadata = data ? data.map((item:any, index:any) => {
item.key = index;
return {
...item,
text: `${item.host} （BrokerID：${item.brokerId}）`,
label: item.host,
value: item.brokerId,
};
}) : [];
}
@action.bound
......@@ -461,9 +525,9 @@ class Admin {
@action.bound
public setLogicalClusters(data: ILogicalCluster[]) {
this.logicalClusters = data ? data.map((item, index) => {
item.key = index;
return item;
}) : [];
item.key = index;
return item;
}) : [];
}
@action.bound
......@@ -474,25 +538,25 @@ class Admin {
@action.bound
public setClustersThrottles(data: IThrottles[]) {
this.clustersThrottles = data ? data.map((item, index) => {
item.key = index;
return item;
}) : [];
item.key = index;
return item;
}) : [];
}
@action.bound
public setPartitionsLocation(data: IPartitionsLocation[]) {
this.partitionsLocation = data ? data.map((item, index) => {
item.key = index;
return item;
}) : [];
item.key = index;
return item;
}) : [];
}
@action.bound
public setTaskManagement(data: ITaskManage[]) {
this.taskManagement = data ? data.map((item, index) => {
item.key = index;
return item;
}) : [];
item.key = index;
return item;
}) : [];
}
@action.bound
......@@ -568,7 +632,7 @@ class Admin {
return deleteCluster(clusterId).then(() => this.getMetaData(true));
}
public getPeakFlowChartData(value: ILabelValue[], map: string []) {
public getPeakFlowChartData(value: ILabelValue[], map: string[]) {
return getPieChartOption(value, map);
}
......@@ -611,6 +675,12 @@ class Admin {
getMetaData(needDetail).then(this.setMetaList);
}
public getOperationRecordData(params: any) {
this.setLoading(true);
this.oRparams = params
getOperationRecordData(params).then(this.setOperationRecordList);
}
public getConfigure() {
getConfigure().then(this.setConfigure);
}
......@@ -627,6 +697,30 @@ class Admin {
deleteConfigure(configKey).then(() => this.getConfigure());
}
public getGatewayList() {
getGatewayList().then(this.setConfigGatewayList);
}
public getGatewayType() {
this.setLoading(true);
getGatewayType().then(this.setConfigGatewayType);
}
public addNewConfigGateway(params: IConfigGateway) {
return addNewConfigGateway(params).then(() => this.getGatewayList());
}
public editConfigGateway(params: IConfigGateway) {
return editConfigGateway(params).then(() => this.getGatewayList());
}
public deleteConfigGateway(params: any) {
deleteConfigGateway(params).then(() => {
// message.success('删除成功')
this.getGatewayList()
});
}
public getDataCenter() {
getDataCenter().then(this.setDataCenter);
}
......@@ -643,6 +737,20 @@ class Admin {
return getControllerHistory(clusterId).then(this.setControllerHistory);
}
public getCandidateController(clusterId: number) {
return getCandidateController(clusterId).then(data=>{
return this.setCandidateController(data)
});
}
public addCandidateController(clusterId: number, brokerIdList: any) {
return addCandidateController({clusterId, brokerIdList}).then(()=>this.getCandidateController(clusterId));
}
public deleteCandidateCancel(clusterId: number, brokerIdList: any){
return deleteCandidateCancel({clusterId, brokerIdList}).then(()=>this.getCandidateController(clusterId));
}
public getBrokersBasicInfo(clusterId: number, brokerId: number) {
return getBrokersBasicInfo(clusterId, brokerId).then(this.setBrokersBasicInfo);
}
......
kafka-manager-console/src/store/alarm.ts
浏览文件 @ 47b8fe50
......@@ -181,6 +181,7 @@ class Alarm {
public modifyMonitorStrategy(params: IRequestParams) {
return modifyMonitorStrategy(params).then(() => {
message.success('操作成功');
window.location.href = `${urlPrefix}/alarm`;
}).finally(() => this.setLoading(false));
}
......
kafka-manager-console/src/store/modal.ts
浏览文件 @ 47b8fe50
......@@ -31,6 +31,12 @@ class CustomModal {
this.params = value;
}
@action.bound
public showOfflineAppNewModal(value: any) {
this.modalId = 'offlineAppNewModal';
this.params = value;
}
@action.bound
public showOrderOpResult() {
this.modalId = 'orderOpResult';
......
kafka-manager-console/src/store/users.ts
浏览文件 @ 47b8fe50
......@@ -19,6 +19,9 @@ export class Users {
@observable
public staff: IStaff[] = [];
@observable
public newPassWord: any = null;
@action.bound
public setAccount(data: IUser) {
setCookie([{ key: 'role', value: `${data.role}`, time: 1 }]);
......@@ -42,6 +45,11 @@ export class Users {
this.loading = value;
}
@action.bound
public setNewPassWord(value: boolean) {
this.newPassWord = value;
}
public getAccount() {
getAccount().then(this.setAccount);
}
......
kafka-manager-console/src/styles/font.css
浏览文件 @ 47b8fe50
......@@ -6,6 +6,16 @@
url('//at.alicdn.com/t/font_1251424_q66z80q0hio.ttf?t=1577526422376') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('//at.alicdn.com/t/font_1251424_q66z80q0hio.svg?t=1577526422376#kafka-manager') format('svg'); /* iOS 4.1- */
}
@font-face {
font-family: 'kafka-manager';
/* project id 2406313 */
src: url('//at.alicdn.com/t/font_2406313_rbsze6uqtta.eot');
src: url('//at.alicdn.com/t/font_2406313_rbsze6uqtta.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_2406313_rbsze6uqtta.woff2') format('woff2'),
url('//at.alicdn.com/t/font_2406313_rbsze6uqtta.woff') format('woff'),
url('//at.alicdn.com/t/font_2406313_rbsze6uqtta.ttf') format('truetype'),
url('//at.alicdn.com/t/font_2406313_rbsze6uqtta.svg#iconfont') format('svg');
}
.kafka-manager {
font-family: "kafka-manager" !important;
......@@ -15,6 +25,15 @@
-moz-osx-font-smoothing: grayscale;
}
/* .kafka-manager-record {
font-family: "kafka-manager" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} */
.k-icon-fuwurenwuguanli:before {
content: "\e660";
}
......@@ -47,6 +66,10 @@
content: "\e634";
}
.k-icon-operationrecord:before {
content: "\e772";
}
.k-icon-menu2:before {
content: "\e609";
}
......
kafka-manager-console/src/types/base-type.ts
浏览文件 @ 47b8fe50
......@@ -190,6 +190,7 @@ export interface IUser {
chineseName?: string;
department?: string;
key?: number;
confirmPassword?: string
}
export interface IOffset {
......@@ -486,6 +487,17 @@ export interface IConfigure {
key?: number;
}
export interface IConfigGateway {
id: number;
key?: number;
modifyTime: number;
name: string;
value: string;
version: string;
type: string;
description: string;
}
export interface IEepand {
brokerIdList: number[];
clusterId: number;
......@@ -650,8 +662,10 @@ export interface IBrokerData {
export interface IController {
brokerId: number;
host: string;
timestamp: number;
version: number;
timestamp?: number;
version?: number;
startTime?: number;
status?: number;
key?: number;
}
......@@ -925,7 +939,7 @@ export interface INewLogical {
logicalClusterName?: string;
logicalClusterNameCn?: string;
regionIdList: number[];
logicalClusterIdentification?:string
logicalClusterIdentification?: string
}
export interface IPartitionsLocation {
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或