8x48/KnowStreaming
1
0
Fork 0
mirror of https://github.com/didi/KnowStreaming.git synced 2025-12-24 03:42:07 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #132 from lucasun/dev_2.2.0_fe

Browse Source 
add fe page
This commit is contained in:
EricZeng
2021-01-25 16:47:02 +08:00
committed by GitHub
parent 850d43df63 7f115c1b3e
commit 0065438305
35 changed files with 329 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
kafka-manager-console/src/component/x-form/index.tsx
View File

@@ -2,6 +2,7 @@ import * as React from 'react';
import { Select, Input, InputNumber, Form, Switch, Checkbox, DatePicker, Radio, Upload, Button, Icon, Tooltip } from 'component/antd';
import Monacoeditor from 'component/editor/monacoEditor';
import { searchProps } from 'constants/table';
import { version } from 'store/version';
import './index.less';
const TextArea = Input.TextArea;
@@ -189,7 +190,7 @@ class XForm extends React.Component<IXFormProps> {
case FormItemType.upload:
return (
<Upload beforeUpload={(file: any) => false} {...item.attrs}>
<Button><Icon type="upload" />上传</Button>
<Button><Icon type="upload" />上传</Button>{version.fileSuffix && <span style={{ color: '#fb3939', padding: '0 0 0 10px' }}>{`请上传${version.fileSuffix}文件`}</span>}
</Upload>
);
}

2
kafka-manager-console/src/constants/table.ts
View File

@@ -19,7 +19,7 @@ export const cellStyle = {
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
cursor: 'pointer',
// cursor: 'pointer',
};
export const searchProps = {

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

@@ -38,7 +38,7 @@ export class ClusterConsumer extends SearchAndFilterContainer {
key: 'operation',
width: '10%',
render: (t: string, item: IOffset) => {
return (<a onClick={() => this.getConsumeDetails(item)}>详情</a>);
return (<a onClick={() => this.getConsumeDetails(item)}>消费详情</a>);
},
}];
private xFormModal: IXFormWrapper;
@@ -110,7 +110,7 @@ export class ClusterConsumer extends SearchAndFilterContainer {
/>
</div>
<Modal
title="消费的Topic"
title="消费详情"
visible={this.state.detailsVisible}
onOk={() => this.handleDetailsOk()}
onCancel={() => this.handleDetailsCancel()}

5
kafka-manager-console/src/container/admin/cluster-detail/cluster-topic.tsx
View File

@@ -2,7 +2,7 @@ import * as React from 'react';
import Url from 'lib/url-parser';
import { region } from 'store';
import { admin } from 'store/admin';
import { topic } from 'store/topic';
import { app } from 'store/app';
import { Table, notification, Tooltip, Popconfirm } from 'antd';
import { pagination, cellStyle } from 'constants/table';
import { observer } from 'mobx-react';
@@ -56,8 +56,6 @@ export class ClusterTopic extends SearchAndFilterContainer {
public expandPartition(item: IClusterTopics) {
// getTopicBasicInfo
admin.getTopicsBasicInfo(item.clusterId, item.topicName).then(data => {
console.log(admin.topicsBasic);
console.log(admin.basicInfo);
this.clusterTopicsFrom = item;
this.setState({
expandVisible: true,
@@ -114,6 +112,7 @@ export class ClusterTopic extends SearchAndFilterContainer {
public componentDidMount() {
admin.getClusterTopics(this.clusterId);
app.getAdminAppList()
}
public renderClusterTopicList() {

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

@@ -159,7 +159,6 @@ export class ExclusiveCluster extends SearchAndFilterContainer {
public handleDeleteRegion = (record: IBrokersRegions) => {
const filterRegion = admin.logicalClusters.filter(item => item.regionIdList.includes(record.id));
if (!filterRegion) {
return;
}
@@ -335,6 +334,7 @@ export class ExclusiveCluster extends SearchAndFilterContainer {
{this.renderSearch('', '请输入Region名称／broker ID')}
</ul>
{this.renderRegion()}
{this.renderDeleteRegionModal()}
</div >
);
}

8
kafka-manager-console/src/container/admin/cluster-detail/logical-cluster.tsx
View File

@@ -40,15 +40,15 @@ export class LogicalCluster extends SearchAndFilterContainer {
key: 'logicalClusterId',
},
{
title: '逻辑集群中文名称',
title: '逻辑集群名称',
dataIndex: 'logicalClusterName',
key: 'logicalClusterName',
width: '150px'
},
{
title: '逻辑集群英文名称',
dataIndex: 'logicalClusterName',
key: 'logicalClusterName1',
title: '逻辑集群标识',
dataIndex: 'logicalClusterIdentification',
key: 'logicalClusterIdentification',
width: '150px'
},
{

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

@@ -1,5 +1,5 @@
import * as React from 'react';
import { Modal, Table, Button, notification, message, Tooltip, Icon, Popconfirm, Alert } from 'component/antd';
import { Modal, Table, Button, notification, message, Tooltip, Icon, Popconfirm, Alert, Popover } from 'component/antd';
import { wrapper } from 'store';
import { observer } from 'mobx-react';
import { IXFormWrapper, IMetaData, IRegister } from 'types/base-type';
@@ -58,7 +58,7 @@ export class ClusterList extends SearchAndFilterContainer {
message: '请输入zookeeper地址',
}],
attrs: {
placeholder: '请输入zookeeper地址',
placeholder: '请输入zookeeper地址，例如：192.168.0.1:2181,192.168.0.2/logi-kafka',
rows: 2,
disabled: item ? true : false,
},
@@ -72,7 +72,7 @@ export class ClusterList extends SearchAndFilterContainer {
message: '请输入bootstrapServers',
}],
attrs: {
placeholder: '请输入bootstrapServers',
placeholder: '请输入bootstrapServers，例如：192.168.1.1:9092,192.168.1.2:9092',
rows: 2,
disabled: item ? true : false,
},
@@ -131,7 +131,7 @@ 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\";"
"sasl.jaas.config": "org.apache.kafka.common.security.plain.PlainLoginModule required username=\\"xxxxxx\\" password=\\"xxxxxx\\";"
}`,
rows: 8,
},
@@ -271,11 +271,13 @@ export class ClusterList extends SearchAndFilterContainer {
cancelText="取消"
okText="确认"
>
<a
className="action-button"
>
{item.status === 1 ? '暂停监控' : '开始监控'}
</a>
<Tooltip title="暂停监控将无法正常监控指标信息，建议开启监控">
<a
className="action-button"
>
{item.status === 1 ? '暂停监控' : '开始监控'}
</a>
</Tooltip>
</Popconfirm>
<a onClick={this.showMonitor.bind(this, item)}>
删除

10
kafka-manager-console/src/container/admin/individual-bill.tsx
View File

@@ -79,7 +79,7 @@ export class IndividualBill extends React.Component {
}
public renderTableList() {
const adminUrl=`${urlPrefix}/admin/bill-detail`
const adminUrl = `${urlPrefix}/admin/bill-detail`
return (
<Table
rowKey="key"
@@ -89,11 +89,11 @@ export class IndividualBill extends React.Component {
/>
);
}
public renderChart() {
return (
<div className="chart-box">
<BarChartComponet ref={(ref) => this.chart = ref } getChartData={this.getData.bind(this, null)} />
<BarChartComponet ref={(ref) => this.chart = ref} getChartData={this.getData.bind(this, null)} />
</div>
);
}
@@ -132,7 +132,7 @@ export class IndividualBill extends React.Component {
<>
<div className="container">
<Tabs defaultActiveKey="1" type="card">
<TabPane
<TabPane
tab={<>
<span>账单趋势</span>&nbsp;
<a
@@ -142,7 +142,7 @@ export class IndividualBill extends React.Component {
>
<Icon type="question-circle" />
</a>
</>}
</>}
key="1"
>
{this.renderDatePick()}

60
kafka-manager-console/src/container/alarm/add-alarm/filter-form.tsx
View File

@@ -11,6 +11,7 @@ import { filterKeys } from 'constants/strategy';
import { VirtualScrollSelect } from 'component/virtual-scroll-select';
import { IsNotNaN } from 'lib/utils';
import { searchProps } from 'constants/table';
import { toJS } from 'mobx';
interface IDynamicProps {
form?: any;
@@ -33,6 +34,7 @@ export class DynamicSetFilter extends React.Component<IDynamicProps> {
public monitorType: string = null;
public clusterId: number = null;
public clusterName: string = null;
public clusterIdentification: string | number = null;
public topicName: string = null;
public consumerGroup: string = null;
public location: string = null;
@@ -45,16 +47,18 @@ export class DynamicSetFilter extends React.Component<IDynamicProps> {
this.props.form.validateFields((err: Error, values: any) => {
if (!err) {
monitorType = values.monitorType;
const index = cluster.clusterData.findIndex(item => item.clusterId === values.cluster);
const index = cluster.clusterData.findIndex(item => item.clusterIdentification === values.cluster);
if (index > -1) {
values.clusterIdentification = cluster.clusterData[index].clusterIdentification;
values.clusterName = cluster.clusterData[index].clusterName;
}
for (const key of Object.keys(values)) {
if (filterKeys.indexOf(key) > -1) { // 只有这几种值可以设置
filterList.push({
tkey: key === 'clusterName' ? 'cluster' : key, // 传参需要将clusterName转成cluster
tkey: key === 'clusterName' ? 'cluster' : key, // clusterIdentification
topt: '=',
tval: [values[key]],
clusterIdentification: values.clusterIdentification
});
}
}
@@ -74,13 +78,13 @@ export class DynamicSetFilter extends React.Component<IDynamicProps> {
public resetFormValue(
monitorType: string = null,
clusterId: number = null,
clusterIdentification: any = null,
topicName: string = null,
consumerGroup: string = null,
location: string = null) {
const { setFieldsValue } = this.props.form;
setFieldsValue({
cluster: clusterId,
cluster: clusterIdentification,
topic: topicName,
consumerGroup,
location,
@@ -88,18 +92,18 @@ export class DynamicSetFilter extends React.Component<IDynamicProps> {
});
}
public getClusterId = (clusterName: string) => {
public getClusterId = async (clusterIdentification: any) => {
let clusterId = null;
const index = cluster.clusterData.findIndex(item => item.clusterName === clusterName);
const index = cluster.clusterData.findIndex(item => item.clusterIdentification === clusterIdentification);
if (index > -1) {
clusterId = cluster.clusterData[index].clusterId;
}
if (clusterId) {
cluster.getClusterMetaTopics(clusterId);
await cluster.getClusterMetaTopics(clusterId);
this.clusterId = clusterId;
return this.clusterId;
}
return this.clusterId = clusterName as any;
};
return this.clusterId = clusterId as any;
}
public async initFormValue(monitorRule: IRequestParams) {
@@ -108,17 +112,19 @@ export class DynamicSetFilter extends React.Component<IDynamicProps> {
const topicFilter = strategyFilterList.filter(item => item.tkey === 'topic')[0];
const consumerFilter = strategyFilterList.filter(item => item.tkey === 'consumerGroup')[0];
const clusterName = clusterFilter ? clusterFilter.tval[0] : null;
const clusterIdentification = clusterFilter ? clusterFilter.tval[0] : null;
const topic = topicFilter ? topicFilter.tval[0] : null;
const consumerGroup = consumerFilter ? consumerFilter.tval[0] : null;
const location: string = null;
const monitorType = monitorRule.strategyExpressionList[0].metric;
alarm.changeMonitorStrategyType(monitorType);
await this.getClusterId(clusterName);
//增加clusterIdentification替代原来的clusterName
this.clusterIdentification = clusterIdentification;
await this.getClusterId(this.clusterIdentification);
//
await this.handleSelectChange(topic, 'topic');
await this.handleSelectChange(consumerGroup, 'consumerGroup');
this.resetFormValue(monitorType, this.clusterId, topic, consumerGroup, location);
this.resetFormValue(monitorType, this.clusterIdentification, topic, consumerGroup, location);
}
public clearFormData() {
@@ -130,11 +136,12 @@ export class DynamicSetFilter extends React.Component<IDynamicProps> {
this.resetFormValue();
}
public async handleClusterChange(e: number) {
this.clusterId = e;
public async handleClusterChange(e: any) {
this.clusterIdentification = e;
this.topicName = null;
topic.setLoading(true);
await cluster.getClusterMetaTopics(e);
const clusterId = await this.getClusterId(e);
await cluster.getClusterMetaTopics(clusterId);
this.resetFormValue(this.monitorType, e, null, this.consumerGroup, this.location);
topic.setLoading(false);
}
@@ -170,7 +177,7 @@ export class DynamicSetFilter extends React.Component<IDynamicProps> {
}
this.consumerGroup = null;
this.location = null;
this.resetFormValue(this.monitorType, this.clusterId, this.topicName);
this.resetFormValue(this.monitorType, this.clusterIdentification, this.topicName);
topic.setLoading(false);
}
@@ -213,17 +220,24 @@ export class DynamicSetFilter extends React.Component<IDynamicProps> {
},
rules: [{ required: true, message: '请选择监控指标' }],
} as IVritualScrollSelect;
const clusterData = toJS(cluster.clusterData);
const options = clusterData?.length ? clusterData.map(item => {
return {
label: `${item.clusterName}${item.description ? '（' + item.description + '）' : ''}`,
value: item.clusterIdentification
}
}) : null;
const clusterItem = {
label: '集群',
options: cluster.clusterData,
defaultValue: this.clusterId,
options,
defaultValue: this.clusterIdentification,
rules: [{ required: true, message: '请选择集群' }],
attrs: {
placeholder: '请选择集群',
className: 'middle-size',
className: 'large-size',
disabled: this.isDetailPage,
onChange: (e: number) => this.handleClusterChange(e),
onChange: (e: any) => this.handleClusterChange(e),
},
key: 'cluster',
} as unknown as IVritualScrollSelect;
@@ -241,7 +255,7 @@ export class DynamicSetFilter extends React.Component<IDynamicProps> {
}),
attrs: {
placeholder: '请选择Topic',
className: 'middle-size',
className: 'large-size',
disabled: this.isDetailPage,
onChange: (e: string) => this.handleSelectChange(e, 'topic'),
},
@@ -329,7 +343,7 @@ export class DynamicSetFilter extends React.Component<IDynamicProps> {
key={v.value || v.key || index}
value={v.value}
>
{v.label.length > 25 ? <Tooltip placement="bottomLeft" title={v.label}>
{v.label?.length > 25 ? <Tooltip placement="bottomLeft" title={v.label}>
{v.label}
</Tooltip> : v.label}
</Select.Option>

14
kafka-manager-console/src/container/alarm/add-alarm/index.less
View File

@@ -43,21 +43,23 @@
Icon {
margin-left: 8px;
}
.ant-form-item-label {
// padding-left: 10px;
width: 118px;
text-align: right !important;
}
&.type-form {
padding-top: 10px;
padding-top: 10px;
.ant-form{
min-width: 755px;
}
.ant-form-item {
width: 30%;
width: 45%;
min-width: 360px;
}
.ant-form-item-label {
padding-left: 10px;
}
.ant-form-item-control {
width: 220px;
width: 300px;
}
}

21
kafka-manager-console/src/container/alarm/add-alarm/index.tsx
View File

@@ -12,7 +12,6 @@ import { alarm } from 'store/alarm';
import { app } from 'store/app';
import Url from 'lib/url-parser';
import { IStrategyExpression, IRequestParams } from 'types/alarm';
@observer
export class AddAlarm extends SearchAndFilterContainer {
public isDetailPage = window.location.pathname.includes('/alarm-detail'); // 判断是否为详情
@@ -90,8 +89,8 @@ export class AddAlarm extends SearchAndFilterContainer {
const filterObj = this.typeForm.getFormData().filterObj;
// tslint:disable-next-line:max-line-length
if (!actionValue || !timeValue || !typeValue || !strategyList.length || !filterObj || !filterObj.filterList.length) {
message.error('请正确填写必填项');
return null;
message.error('请正确填写必填项');
return null;
}
if (filterObj.monitorType === 'online-kafka-topic-throttled') {
@@ -101,13 +100,17 @@ export class AddAlarm extends SearchAndFilterContainer {
tval: [typeValue.app],
});
}
this.id && filterObj.filterList.forEach((item: any) => {
if (item.tkey === 'cluster') {
item.tval = [item.clusterIdentification]
}
})
strategyList = strategyList.map((row: IStrategyExpression) => {
return {
...row,
metric: filterObj.monitorType,
};
});
return {
appId: typeValue.app,
name: typeValue.alarmName,
@@ -129,7 +132,7 @@ export class AddAlarm extends SearchAndFilterContainer {
public renderAlarmStrategy() {
return (
<div className="config-wrapper">
<span className="span-tag">报警策略</span>
<span className="span-tag" data-set={alarm.monitorType}>报警策略</span>
<div className="info-wrapper">
<WrappedDynamicSetStrategy wrappedComponentRef={(form: any) => this.strategyForm = form} />
</div>
@@ -139,9 +142,9 @@ export class AddAlarm extends SearchAndFilterContainer {
public renderTimeForm() {
return (
<>
<WrappedTimeForm wrappedComponentRef={(form: any) => this.timeForm = form} />
</>
<>
<WrappedTimeForm wrappedComponentRef={(form: any) => this.timeForm = form} />
</>
);
}
@@ -164,7 +167,7 @@ export class AddAlarm extends SearchAndFilterContainer {
{this.renderAlarmStrategy()}
{this.renderTimeForm()}
<ActionForm ref={(actionForm) => this.actionForm = actionForm} />
</div>
</div>
</Spin>
);
}

44
kafka-manager-console/src/container/alarm/add-alarm/strategy-form.tsx
View File

@@ -5,6 +5,7 @@ import { IStringMap } from 'types/base-type';
import { IRequestParams } from 'types/alarm';
import { IFormSelect, IFormItem, FormItemType } from 'component/x-form';
import { searchProps } from 'constants/table';
import { alarm } from 'store/alarm';
interface IDynamicProps {
form: any;
@@ -27,6 +28,7 @@ class DynamicSetStrategy extends React.Component<IDynamicProps> {
public crudList = [] as ICRUDItem[];
public state = {
shouldUpdate: false,
monitorType: alarm.monitorType
};
public componentDidMount() {
@@ -130,7 +132,7 @@ class DynamicSetStrategy extends React.Component<IDynamicProps> {
if (lineValue.func === 'happen' && paramsArray.length > 1 && paramsArray[0] < paramsArray[1]) {
strategyList = []; // 清空赋值
return message.error('周期值应大于次数') ;
return message.error('周期值应大于次数');
}
lineValue.params = paramsArray.join(',');
@@ -292,8 +294,39 @@ class DynamicSetStrategy extends React.Component<IDynamicProps> {
}
return element;
}
public renderFormList(row: ICRUDItem) {
public unit(monitorType: string) {
let element = null;
switch (monitorType) {
case 'online-kafka-topic-msgIn':
element = "条/秒"
break;
case 'online-kafka-topic-bytesIn':
element = "字节/秒"
break;
case 'online-kafka-topic-bytesRejected':
element = "字节/秒"
break;
case 'online-kafka-topic-produce-throttled':
element = "1表示被限流"
break;
case 'online-kafka-topic-fetch-throttled':
element = "1表示被限流"
break;
case 'online-kafka-consumer-maxLag':
element = "条"
break;
case 'online-kafka-consumer-lag':
element = "条"
break;
case 'online-kafka-consumer-maxDelayTime':
element = "秒"
break;
}
return (
<span>{element}</span>
)
}
public renderFormList(row: ICRUDItem, monitorType: string) {
const key = row.id;
const funcType = row.func;
@@ -309,6 +342,7 @@ class DynamicSetStrategy extends React.Component<IDynamicProps> {
key: key + '-func',
} as IFormSelect)}
{this.getFuncItem(row)}
{row.func !== 'c_avg_rate_abs' && row.func !== 'pdiff' ? this.unit(monitorType) : null}
</div>
);
}
@@ -340,8 +374,8 @@ class DynamicSetStrategy extends React.Component<IDynamicProps> {
<Form>
{crudList.map((row, index) => {
return (
<div key={index}>
{this.renderFormList(row)}
<div key={`${index}-${this.state.monitorType}`}>
{this.renderFormList(row, alarm.monitorType)}
{
crudList.length > 1 ? (
<Icon

34
kafka-manager-console/src/container/alarm/add-alarm/type-form.tsx
View File

@@ -50,23 +50,23 @@ export class TypeForm extends React.Component {
return (
<>
<div className="config-wrapper">
<span className="span-tag">基本信息</span>
<div className="alarm-x-form type-form">
<XFormComponent
ref={form => this.$form = form}
formData={formData}
formMap={xTypeFormMap}
layout="inline"
/>
</div>
</div >
<div className="config-wrapper">
<span className="span-tag">选择指标</span>
<div className="alarm-x-form type-form">
<WrappedDynamicSetFilter wrappedComponentRef={(form: any) => this.filterForm = form} />
</div>
</div >
<div className="config-wrapper">
<span className="span-tag">基本信息</span>
<div className="alarm-x-form type-form">
<XFormComponent
ref={form => this.$form = form}
formData={formData}
formMap={xTypeFormMap}
layout="inline"
/>
</div>
</div >
<div className="config-wrapper">
<span className="span-tag">选择指标</span>
<div className="alarm-x-form type-form">
<WrappedDynamicSetFilter wrappedComponentRef={(form: any) => this.filterForm = form} />
</div>
</div >
</>
);
}

10
kafka-manager-console/src/container/cluster/cluster-detail/cluster-overview.tsx
View File

@@ -31,11 +31,11 @@ export class ClusterOverview extends React.Component<IOverview> {
const content = this.props.basicInfo as IBasicInfo;
const clusterContent = [{
value: content.clusterName,
label: '集群中文名称',
label: '集群名称',
},
{
value: content.clusterName,
label: '集群英文名称',
value: content.clusterIdentification,
label: '集群标识',
},
{
value: clusterTypeMap[content.mode],
@@ -44,8 +44,8 @@ export class ClusterOverview extends React.Component<IOverview> {
value: moment(content.gmtCreate).format(timeFormat),
label: '接入时间',
}, {
value: content.physicalClusterId,
label: '物理集群ID',
value: content.clusterId,
label: '集群ID',
}];
const clusterInfo = [{
value: content.clusterVersion,

40
kafka-manager-console/src/container/cluster/config.tsx
View File

@@ -13,32 +13,14 @@ const { confirm } = Modal;
export const getClusterColumns = (urlPrefix: string) => {
return [
{
title: '逻辑集群ID',
title: '集群ID',
dataIndex: 'clusterId',
key: 'clusterId',
width: '9%',
sorter: (a: IClusterData, b: IClusterData) => b.clusterId - a.clusterId,
},
{
title: '逻辑集群中文名称',
dataIndex: 'clusterName',
key: 'clusterName',
width: '13%',
onCell: () => ({
style: {
maxWidth: 120,
...cellStyle,
},
}),
sorter: (a: IClusterData, b: IClusterData) => a.clusterName.charCodeAt(0) - b.clusterName.charCodeAt(0),
render: (text: string, record: IClusterData) => (
<Tooltip placement="bottomLeft" title={text} >
<a href={`${urlPrefix}/cluster/cluster-detail?clusterId=${record.clusterId}`}> {text} </a>
</Tooltip>
),
},
{
title: '逻辑集群英文名称',
title: '集群名称',
dataIndex: 'clusterName',
key: 'clusterName',
width: '13%',
@@ -55,6 +37,24 @@ export const getClusterColumns = (urlPrefix: string) => {
</Tooltip>
),
},
// {
// title: '逻辑集群英文名称',
// dataIndex: 'clusterName',
// key: 'clusterName',
// width: '13%',
// onCell: () => ({
// style: {
// maxWidth: 120,
// ...cellStyle,
// },
// }),
// sorter: (a: IClusterData, b: IClusterData) => a.clusterName.charCodeAt(0) - b.clusterName.charCodeAt(0),
// render: (text: string, record: IClusterData) => (
// <Tooltip placement="bottomLeft" title={text} >
// <a href={`${urlPrefix}/cluster/cluster-detail?clusterId=${record.clusterId}`}> {text} </a>
// </Tooltip>
// ),
// },
{
title: 'Topic数量',
dataIndex: 'topicNum',

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

@@ -78,7 +78,7 @@ export class MyCluster extends SearchAndFilterContainer {
rules: [
{
required: true,
pattern: /^.{5,}.$/,
pattern: /^.{4,}.$/,
message: '请输入至少5个字符',
},
],
@@ -160,7 +160,7 @@ export class MyCluster extends SearchAndFilterContainer {
data = searchKey ? origin.filter((item: IClusterData) =>
(item.clusterName !== undefined && item.clusterName !== null) && item.clusterName.toLowerCase().includes(searchKey as string),
) : origin ;
) : origin;
return data;
}

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

@@ -127,7 +127,7 @@ class DataMigrationFormTable extends React.Component<IFormTableProps> {
key: 'retentionTime', // originalRetentionTime
width: '132px',
sorter: (a: IRenderData, b: IRenderData) => b.retentionTime - a.retentionTime,
render: (time: any) => transMSecondToHour(time),
render: (time: any) => transMSecondToHour(time),
}, {
title: 'BrokerID',
dataIndex: 'brokerIdList',
@@ -254,7 +254,7 @@ class DataMigrationFormTable extends React.Component<IFormTableProps> {
dataSource={this.props.data}
columns={columns}
pagination={false}
scroll={{y: 520}}
scroll={{ y: 520 }}
className="migration-table"
/>
</EditableContext.Provider>
@@ -316,7 +316,7 @@ export class InfoForm extends React.Component<IFormTableProps> {
<Form.Item label="迁移说明" key={2} className="form-item">
{getFieldDecorator('description', {
initialValue: '',
rules: [{ required: true, message: '请输入至少5个字符', pattern: /^.{5,}.$/ }],
rules: [{ required: true, message: '请输入至少5个字符', pattern: /^.{4,}.$/ }],
})(
<Input.TextArea rows={5} placeholder="请输入至少5个字符" />,
)}

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

@@ -23,13 +23,22 @@ export const showEditClusterTopic = (item: IClusterTopics) => {
{
key: 'appId',
label: '应用ID',
type: 'select',
options: app.adminAppData.map(item => {
return {
label: item.appId,
value: item.appId,
};
}),
rules: [{
required: true,
message: '请输入应用ID',
// message: '请输入应用ID',
// message: '请输入应用ID，应用名称只支持字母、数字、下划线、短划线，长度限制在3-64字符',
// pattern: /[_a-zA-Z0-9_-]{3,64}$/,
}],
attrs: {
placeholder: '请输入应用ID',
disabled: true,
// disabled: true,
},
},
{
@@ -104,7 +113,7 @@ export const showLogicalClusterOpModal = (clusterId: number, record?: ILogicalCl
}
const updateFormModal = (isShow: boolean) => {
const formMap = wrapper.xFormWrapper.formMap;
isShow ? formMap.splice(2, 0,
isShow ? formMap.splice(3, 0,
{
key: 'appId',
label: '所属应用',
@@ -119,7 +128,7 @@ export const showLogicalClusterOpModal = (clusterId: number, record?: ILogicalCl
attrs: {
placeholder: '请选择所属应用',
},
}) : formMap.splice(2, 1);
}) : formMap.splice(3, 1);
const formData = wrapper.xFormWrapper.formData;
wrapper.ref && wrapper.ref.updateFormMap$(formMap, formData || {});
};
@@ -129,30 +138,30 @@ export const showLogicalClusterOpModal = (clusterId: number, record?: ILogicalCl
formMap: [
{
key: 'logicalClusterName',
label: '逻辑集群中文名称',
label: '逻辑集群名称',
// defaultValue:'',
rules: [{
required: true,
message: '请输入逻辑集群中文名称，支持中文、字母、数字、下划线(_)和短划线(-)组成，长度在3-128字符之间', // 不能以下划线（_）和短划线(-)开头和结尾
rules: [{
required: true,
message: '请输入逻辑集群名称，支持中文、字母、数字、下划线(_)和短划线(-)组成，长度在3-128字符之间', // 不能以下划线（_）和短划线(-)开头和结尾
pattern: /^[a-zA-Z0-9_\-\u4e00-\u9fa5]{3,128}$/g, //(?!(_|\-))(?!.*?(_|\-)$)
}],
attrs: {
// disabled: record ? true : false,
placeholder:'请输入逻辑集群中文名称'
placeholder: '请输入逻辑集群名称'
},
},
{
key: 'logicalClusterName1',
label: '逻辑集群英文名称',
key: 'logicalClusterIdentification',
label: '逻辑集群标识',
// defaultValue:'',
rules: [{
required: true,
message: '请输入逻辑集群英文名称，支持字母、数字、下划线(_)和短划线(-)组成，长度在3-128字符之间', //不能以下划线（_）和短划线(-)开头和结尾
pattern:/^[a-zA-Z0-9_\-]{3,128}$/g, //(?!(_|\-))(?!.*?(_|\-)$)
rules: [{
required: true,
message: '请输入逻辑集群标识，支持字母、数字、下划线(_)和短划线(-)组成，长度在3-128字符之间', //不能以下划线（_）和短划线(-)开头和结尾
pattern: /^[a-zA-Z0-9_\-]{3,128}$/g, //(?!(_|\-))(?!.*?(_|\-)$)
}],
attrs: {
disabled: record ? true : false,
placeholder:'请输入逻辑集群英文名称，创建后无法修改'
placeholder: '请输入逻辑集标识，创建后无法修改'
},
},
{
@@ -233,7 +242,7 @@ export const showLogicalClusterOpModal = (clusterId: number, record?: ILogicalCl
id: record ? record.logicalClusterId : '',
mode: value.mode,
name: value.logicalClusterName,
englishName:value.logicalClusterEName, // 存储逻辑集群英文名称
identification: value.logicalClusterIdentification,
regionIdList: value.regionIdList,
} as INewLogical;
if (record) {
@@ -246,7 +255,25 @@ export const showLogicalClusterOpModal = (clusterId: number, record?: ILogicalCl
});
},
};
if (record && record.mode != 0) {
isShow = true;
let formMap: any = xFormModal.formMap
formMap.splice(3, 0, {
key: 'appId',
label: '所属应用',
rules: [{ required: true, message: '请选择所属应用' }],
type: 'select',
options: app.adminAppData.map(item => {
return {
label: item.name,
value: item.appId,
};
}),
attrs: {
placeholder: '请选择所属应用',
},
})
}
wrapper.open(xFormModal);
};

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

@@ -50,7 +50,10 @@ class CustomForm extends React.Component<IXFormProps> {
notification.success({ message: '扩分成功' });
this.props.form.resetFields();
admin.getClusterTopics(this.props.clusterId);
});
}).catch(err => {
notification.error({ message: '扩分成功' });
})
}
});
}
@@ -93,7 +96,7 @@ class CustomForm extends React.Component<IXFormProps> {
{/* 运维管控-topic信息-扩分区操作 */}
<Form.Item label="所属region" >
{getFieldDecorator('regionNameList', {
initialValue: admin.topicsBasic ? admin.topicsBasic.regionNameList : '',
initialValue: admin.topicsBasic && admin.topicsBasic.regionNameList.length > 0 ? admin.topicsBasic.regionNameList.join(',') : ' ',
rules: [{ required: true, message: '请输入所属region' }],
})(<Input disabled={true} />)}
</Form.Item>

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

@@ -186,10 +186,10 @@ export const createMigrationTasks = () => {
label: '初始限流',
rules: [{
required: true,
message: '请输入初始限流',
message: '请输入初始限流，并按照：“限流上限>初始限流>限流下限”的大小顺序',
}],
attrs: {
placeholder: '请输入初始限流',
placeholder: '请输入初始限流，并按照：“限流上限>初始限流>限流下限”的大小顺序',
suffix: 'MB/s',
},
},
@@ -198,10 +198,10 @@ export const createMigrationTasks = () => {
label: '限流上限',
rules: [{
required: true,
message: '请输入限流上限',
message: '请输入限流上限，并按照：“限流上限>初始限流>限流下限”的大小顺序',
}],
attrs: {
placeholder: '请输入限流上限',
placeholder: '请输入限流上限，并按照：“限流上限>初始限流>限流下限”的大小顺序',
suffix: 'MB/s',
},
},
@@ -210,10 +210,10 @@ export const createMigrationTasks = () => {
label: '限流下限',
rules: [{
required: true,
message: '请输入限流下限',
message: '请输入限流下限，并按照：“限流上限>初始限流>限流下限”的大小顺序',
}],
attrs: {
placeholder: '请输入限流下限',
placeholder: '请输入限流下限，并按照：“限流上限>初始限流>限流下限”的大小顺序',
suffix: 'MB/s',
},
},
@@ -224,7 +224,7 @@ export const createMigrationTasks = () => {
rules: [{
required: false,
message: '请输入至少5个字符',
pattern: /^.{5,}.$/,
pattern: /^.{4,}.$/,
}],
attrs: {
placeholder: '请输入备注',

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

@@ -29,7 +29,7 @@ export const showEditModal = (record?: IAppItem, from?: string, isDisabled?: boo
rules: [{
required: isDisabled ? false : true,
message: '应用名称只支持中文、字母、数字、下划线、短划线，长度限制在3-64字符',
pattern: /[\u4e00-\u9fa5_a-zA-Z0-9_-]{3,64}/,
pattern: /[\u4e00-\u9fa5_a-zA-Z0-9_-]{3,64}$/,
}],
attrs: { disabled: isDisabled },
}, {

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

@@ -29,7 +29,7 @@ export const showCpacityModal = (item: IClusterData) => {
key: 'description',
label: '申请原因',
type: 'text_area',
rules: [{ required: true, pattern: /^.{5,}.$/, message: '请输入至少5个字符' }],
rules: [{ required: true, pattern: /^.{4,}.$/, message: '请输入至少5个字符' }],
attrs: {
placeholder: '请输入至少5个字符',
},
@@ -44,12 +44,12 @@ export const showCpacityModal = (item: IClusterData) => {
type: value.type,
applicant: users.currentUser.username,
description: value.description,
extensions: JSON.stringify({clusterId: item.clusterId}),
extensions: JSON.stringify({ clusterId: item.clusterId }),
};
cluster.applyCpacity(cpacityParams).then(data => {
notification.success({
message: `申请${value.type === 5 ? '扩容' : '缩容'}成功`,
});
});
window.location.href = `${urlPrefix}/user/order-detail/?orderId=${data.id}&region=${region.currentRegion}`;
});
},

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

@@ -22,7 +22,7 @@ export const applyTopic = () => {
formMap: [
{
key: 'clusterId',
label: '所属逻辑集群：',
label: '所属集群：',
type: 'select',
options: cluster.clusterData,
rules: [{ required: true, message: '请选择' }],
@@ -75,7 +75,7 @@ export const applyTopic = () => {
key: 'description',
label: '申请原因',
type: 'text_area',
rules: [{ required: true, pattern: /^.{5,}.$/s, message: '请输入至少5个字符' }],
rules: [{ required: true, pattern: /^.{4,}.$/s, message: '请输入至少5个字符' }],
attrs: {
placeholder: `概要描述Topic的数据源, Topic数据的生产者/消费者, Topic的申请原因及备注信息等。（最多100个字）
例如:
@@ -180,13 +180,14 @@ export const showApplyQuatoModal = (item: ITopic | IAppsIdInfo, record: IQuotaQu
const isConsume = item.access === 0 || item.access === 2;
const xFormModal = {
formMap: [
// {
// key: 'clusterName',
// label: '逻辑集群名称',
// rules: [{ required: true, message: '' }],
// attrs: { disabled: true },
// invisible: !item.hasOwnProperty('clusterName'),
// },
{
key: 'clusterName',
label: '逻辑集群名称',
rules: [{ required: true, message: '' }],
attrs: { disabled: true },
invisible: !item.hasOwnProperty('clusterName'),
}, {
key: 'topicName',
label: 'Topic名称',
rules: [{ required: true, message: '' }],
@@ -225,7 +226,7 @@ export const showApplyQuatoModal = (item: ITopic | IAppsIdInfo, record: IQuotaQu
key: 'description',
label: '申请原因',
type: 'text_area',
rules: [{ required: true, pattern: /^.{5,}.$/, message: quotaRemarks }],
rules: [{ required: true, pattern: /^.{4,}.$/, message: quotaRemarks }],
attrs: {
placeholder: quotaRemarks,
},
@@ -292,13 +293,15 @@ const updateFormModal = (appId: string) => {
export const showTopicApplyQuatoModal = (item: ITopic) => {
const xFormModal = {
formMap: [
// {
// key: 'clusterName',
// label: '逻辑集群名称',
// rules: [{ required: true, message: '' }],
// attrs: { disabled: true },
// defaultValue: item.clusterName,
// // invisible: !item.hasOwnProperty('clusterName'),
// },
{
key: 'clusterName',
label: '逻辑集群名称',
rules: [{ required: true, message: '' }],
attrs: { disabled: true },
// invisible: !item.hasOwnProperty('clusterName'),
}, {
key: 'topicName',
label: 'Topic名称',
rules: [{ required: true, message: '' }],
@@ -530,7 +533,7 @@ const showAllPermission = (appId: string, item: ITopic, access: number) => {
rules: [{
required: true,
validator: (rule: any, value: string, callback: any) => {
const regexp = /^.{5,}.$/;
const regexp = /^.{4,}.$/;
value = value.trim();
if (!regexp.test(value)) {
callback('请输入至少5个字符');
@@ -629,7 +632,7 @@ export const showPermissionModal = (item: ITopic) => {
rules: [{
required: true,
validator: (rule: any, value: string, callback: any) => {
const regexp = /^.{5,}.$/;
const regexp = /^.{4,}.$/;
value = value.trim();
if (!regexp.test(value)) {
callback('请输入至少5个字符');
@@ -678,7 +681,7 @@ export const showTopicEditModal = (item: ITopic) => {
key: 'description',
label: '备注',
type: 'text_area',
rules: [{ required: false }, { pattern: /^.{5,}.$/, message: '请输入至少5个字符' }],
rules: [{ required: false }, { pattern: /^.{4,}.$/, message: '请输入至少5个字符' }],
},
],
formData: {

3
kafka-manager-console/src/container/topic/config.tsx
View File

@@ -85,7 +85,6 @@ export const applyQuotaQuery = (item: ITopic) => {
};
export const applyTopicQuotaQuery = async (item: ITopic) => {
console.log(item)
await app.getTopicAppQuota(item.clusterId, item.topicName);
await showTopicApplyQuatoModal(item);
};
@@ -142,7 +141,7 @@ export const getAllTopicColumns = (urlPrefix: string) => {
<Tooltip placement="bottomLeft" title={record.topicName} >
<a
// tslint:disable-next-line:max-line-length
href={`${urlPrefix}/topic/topic-detail?clusterId=${record.clusterId}&topic=${record.topicName}&region=${region.currentRegion}&needAuth=${record.needAuth}&clusterName=${record.clusterName}`}
href={`${urlPrefix}/topic/topic-detail?clusterId=${record.clusterId}&topic=${record.topicName}&region=${region.currentRegion}&needAuth=${record.needAuth}`}
>{text}</a>
</Tooltip>);
},

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

@@ -60,7 +60,7 @@ export class AllTopic extends SearchAndFilterContainer {
if (cluster.allActive !== -1 || searchKey !== '') {
data = origin.filter(d =>
((d.topicName !== undefined && d.topicName !== null) && d.topicName.toLowerCase().includes(searchKey as string)
|| ((d.appPrincipals !== undefined && d.appPrincipals !== null) && d.appPrincipals.toLowerCase().includes(searchKey as string)))
|| ((d.appPrincipals !== undefined && d.appPrincipals !== null) && d.appPrincipals.toLowerCase().includes(searchKey as string)))
&& (cluster.allActive === -1 || d.clusterId === cluster.allActive),
);
} else {

2
kafka-manager-console/src/container/topic/topic-detail/base-information.tsx
View File

@@ -69,7 +69,7 @@ export class BaseInformation extends React.Component<IInfoProps> {
label: '压缩格式',
value: baseInfo.topicCodeC,
}, {
label: '所属物理集群ID',
label: '集群ID',
value: baseInfo.clusterId,
}, {
label: '所属region',

30
kafka-manager-console/src/container/topic/topic-detail/bill-information.tsx
View File

@@ -95,23 +95,23 @@ export class BillInformation extends SearchAndFilterContainer {
}
public render() {
return(
return (
<>
<div className="k-row" >
<ul className="k-tab">
<li>账单信息&nbsp;
<div className="k-row" >
<ul className="k-tab">
<li>账单信息&nbsp;
<a
// tslint:disable-next-line:max-line-length
href="https://github.com/didi/kafka-manager"
target="_blank"
>
<Icon type="question-circle" />
</a>
</li>
{this.renderDatePick()}
</ul>
{this.renderChart()}
</div>
// tslint:disable-next-line:max-line-length
href="https://github.com/didi/kafka-manager"
target="_blank"
>
<Icon type="question-circle" />
</a>
</li>
{this.renderDatePick()}
</ul>
{this.renderChart()}
</div>
</>
);
}

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

@@ -1,7 +1,7 @@
import * as React from 'react';
import './index.less';
import { wrapper, region } from 'store';
import { Tabs, PageHeader, Button, notification, Drawer, message, Icon } from 'antd';
import { Tabs, PageHeader, Button, notification, Drawer, message, Icon, Spin } from 'antd';
import { observer } from 'mobx-react';
import { BaseInformation } from './base-information';
import { StatusChart } from './status-chart';
@@ -44,6 +44,7 @@ export class TopicDetail extends React.Component<any> {
drawerVisible: false,
infoVisible: false,
infoTopicList: [] as IInfoData[],
isExecutionBtn: false
};
private $formRef: any;
@@ -54,7 +55,7 @@ export class TopicDetail extends React.Component<any> {
const url = Url();
this.clusterId = Number(url.search.clusterId);
this.needAuth = url.search.needAuth;
this.clusterName = url.search.clusterName;
this.clusterName = decodeURI(decodeURI(url.search.clusterName));
this.topicName = url.search.topic;
const isPhysical = Url().search.hasOwnProperty('isPhysicalClusterId');
this.isPhysicalTrue = isPhysical ? '&isPhysicalClusterId=true' : '';
@@ -197,7 +198,9 @@ export class TopicDetail extends React.Component<any> {
formData={formData}
formMap={formMap}
/>
<Button type="primary" onClick={this.drawerSubmit} className="sample-button">采样</Button>
<Button type="primary" onClick={this.drawerSubmit} className="sample-button" disabled={this.state.isExecutionBtn}>
{this.state.isExecutionBtn ? (<span>采样中<Spin indicator={this.antIcon} size="small" /></span>) : '采 样'}
</Button>
{infoVisible ? this.renderInfo() : null}
</Drawer>
</>
@@ -243,7 +246,11 @@ export class TopicDetail extends React.Component<any> {
);
}
// 执行加载图标
public antIcon = <Icon type="loading" style={{ fontSize: 12, color: '#cccccc', marginLeft: '5px' }} spin />
public drawerSubmit = (value: any) => {
this.setState({ isExecutionBtn: true })
this.$formRef.validateFields((error: Error, result: any) => {
if (error) {
return;
@@ -253,9 +260,12 @@ export class TopicDetail extends React.Component<any> {
this.setState({
infoTopicList: data,
infoVisible: true,
isExecutionBtn: false
});
message.success('采样成功');
});
}).catch(err => {
this.setState({ isExecutionBtn: false })
})
});
}
@@ -315,6 +325,7 @@ export class TopicDetail extends React.Component<any> {
public componentDidMount() {
topic.getTopicBasicInfo(this.clusterId, this.topicName);
topic.getTopicBusiness(this.clusterId, this.topicName);
app.getAppList();
}
public render() {
@@ -326,7 +337,6 @@ export class TopicDetail extends React.Component<any> {
topicName: this.topicName,
clusterName: this.clusterName
} as ITopic;
app.getAppList();
return (
<>
@@ -342,9 +352,9 @@ export class TopicDetail extends React.Component<any> {
{this.needAuth == "true" && <Button key="0" type="primary" onClick={() => showAllPermissionModal(topicRecord)} >申请权限</Button>}
<Button key="1" type="primary" onClick={() => applyTopicQuotaQuery(topicRecord)} >申请配额</Button>
<Button key="2" type="primary" onClick={() => applyExpandModal(topicRecord)} >申请分区</Button>
<Button key="3" type="primary" onClick={() => this.props.history.push(`/alarm/add`)} >新建告警规则</Button>
<Button key="4" type="primary" onClick={this.showDrawer.bind(this)} >采样</Button>
{showEditBtn && <Button key="5" onClick={() => this.compileDetails()} type="primary">编辑</Button>}
<Button key="3" type="primary" onClick={() => this.props.history.push(`/alarm/add`)} >新建告警</Button>
<Button key="4" type="primary" onClick={this.showDrawer.bind(this)} >数据采样</Button>
{/* {showEditBtn && <Button key="5" onClick={() => this.compileDetails()} type="primary">编辑</Button>} */}
</>
}
/>

26
kafka-manager-console/src/container/topic/topic-mine.tsx
View File

@@ -30,7 +30,7 @@ export class MineTopic extends SearchAndFilterContainer {
if (cluster.active !== -1 || app.active !== '-1' || searchKey !== '') {
data = origin.filter(d =>
((d.topicName !== undefined && d.topicName !== null) && d.topicName.toLowerCase().includes(searchKey as string)
|| ((d.appName !== undefined && d.appName !== null) && d.appName.toLowerCase().includes(searchKey as string)))
|| ((d.appName !== undefined && d.appName !== null) && d.appName.toLowerCase().includes(searchKey as string)))
&& (cluster.active === -1 || d.clusterId === cluster.active)
&& (app.active === '-1' || d.appId === (app.active + '')),
);
@@ -152,18 +152,18 @@ export class MineTopic extends SearchAndFilterContainer {
public render() {
return (
<>
<div className="min-width">
<Tabs activeKey={location.hash.substr(1) || '1'} type="card" onChange={(key) => this.handleTabKey(key)}>
<TabPane tab="有效Topic" key="1" >
{this.renderOperationPanel(1)}
{this.renderMyTopicTable(this.getData(topic.mytopicData))}
</TabPane>
<TabPane tab="已过期Topic" key="2">
{this.renderOperationPanel(2)}
{this.renderDeprecatedTopicTable(this.getData(topic.expireData))}
</TabPane>
</Tabs>
</div>
<div className="min-width">
<Tabs activeKey={location.hash.substr(1) || '1'} type="card" onChange={(key) => this.handleTabKey(key)}>
<TabPane tab="有效Topic" key="1" >
{this.renderOperationPanel(1)}
{this.renderMyTopicTable(this.getData(topic.mytopicData))}
</TabPane>
<TabPane tab="已过期Topic" key="2">
{this.renderOperationPanel(2)}
{this.renderDeprecatedTopicTable(this.getData(topic.expireData))}
</TabPane>
</Tabs>
</div>
</>
);
}

10
kafka-manager-console/src/container/user-center/my-bill.tsx
View File

@@ -79,7 +79,7 @@ export class MyBill extends React.Component {
}
public renderTableList() {
const userUrl=`${urlPrefix}/user/bill-detail`
const userUrl = `${urlPrefix}/user/bill-detail`
return (
<Table
rowKey="key"
@@ -89,11 +89,11 @@ export class MyBill extends React.Component {
/>
);
}
public renderChart() {
return (
<div className="chart-box">
<BarChartComponet ref={(ref) => this.chart = ref } getChartData={this.getData.bind(this, null)} />
<BarChartComponet ref={(ref) => this.chart = ref} getChartData={this.getData.bind(this, null)} />
</div>
);
}
@@ -131,7 +131,7 @@ export class MyBill extends React.Component {
<>
<div className="container">
<Tabs defaultActiveKey="1" type="card">
<TabPane
<TabPane
tab={<>
<span>账单趋势</span>&nbsp;
<a
@@ -141,7 +141,7 @@ export class MyBill extends React.Component {
>
<Icon type="question-circle" />
</a>
</>}
</>}
key="1"
>
{this.renderDatePick()}

1
kafka-manager-console/src/lib/fetch.ts
View File

@@ -33,6 +33,7 @@ const checkStatus = (res: Response) => {
};
const filter = (init: IInit) => (res: IRes) => {
if (res.code !== 0 && res.code !== 200) {
if (!init.errorNoTips) {
notification.error({

3
kafka-manager-console/src/store/alarm.ts
View File

@@ -96,7 +96,8 @@ class Alarm {
@action.bound
public setMonitorType(data: IMonitorMetricType) {
this.monitorTypeList = data.metricNames || [];
this.monitorType = this.monitorTypeList[0].metricName;
// this.monitorType = this.monitorTypeList[0].metricName;
this.monitorType = '';
}
@action.bound

26
kafka-manager-console/src/store/cluster.ts
View File

@@ -21,7 +21,7 @@ class Cluster {
public selectData: IClusterData[] = [{
value: -1,
label: '所有集群',
} as IClusterData,
} as IClusterData,
];
@observable
@@ -31,7 +31,7 @@ class Cluster {
public selectAllData: IClusterData[] = [{
value: -1,
label: '所有集群',
} as IClusterData,
} as IClusterData,
];
@observable
@@ -59,7 +59,7 @@ class Cluster {
public clusterMetrics: IClusterMetrics[] = [];
@observable
public type: IOptionType = 'byteIn/byteOut' ;
public type: IOptionType = 'byteIn/byteOut';
@observable
public clusterTopics: IClusterTopics[] = [];
@@ -130,11 +130,11 @@ class Cluster {
public setClusterCombos(data: IConfigInfo[]) {
this.clusterComboList = data || [];
this.clusterComboList = this.clusterComboList.map(item => {
return {
...item,
label: item.message,
value: item.code,
};
return {
...item,
label: item.message,
value: item.code,
};
});
}
@@ -148,7 +148,7 @@ class Cluster {
value: item.code,
};
});
this.clusterMode = (this.clusterModes && this.clusterModes.filter(ele => ele.code !== 0) ) || []; // 去除 0 共享集群
this.clusterMode = (this.clusterModes && this.clusterModes.filter(ele => ele.code !== 0)) || []; // 去除 0 共享集群
}
@action.bound
@@ -158,7 +158,7 @@ class Cluster {
@action.bound
public setClusterDetailRealTime(data: IClusterReal) {
this.clusterRealData = data;
this.clusterRealData = data;
this.setRealLoading(false);
}
@@ -192,9 +192,9 @@ class Cluster {
@action.bound
public setClusterDetailThrottles(data: IThrottles[]) {
this.clustersThrottles = data ? data.map((item, index) => {
item.key = index;
return item;
}) : [];
item.key = index;
return item;
}) : [];
}
@action.bound

1
kafka-manager-console/src/types/alarm.ts
View File

@@ -19,6 +19,7 @@ export interface IStrategyFilter {
tkey: string;
topt: string;
tval: string[];
clusterIdentification?: string;
}
export interface IRequestParams {
appId: string;

6
kafka-manager-console/src/types/base-type.ts
View File

@@ -23,6 +23,7 @@ export interface IBtn {
}
export interface IClusterData {
clusterIdentification: any;
clusterId: number;
mode: number;
clusterName: string;
@@ -598,10 +599,12 @@ export interface IClusterReal {
}
export interface IBasicInfo {
clusterIdentification: any;
bootstrapServers: string;
clusterId: number;
mode: number;
clusterName: string;
clusterNameCn: string;
clusterVersion: string;
gmtCreate: number;
gmtModify: number;
@@ -920,8 +923,9 @@ export interface INewLogical {
mode: number;
name: string;
logicalClusterName?: string;
logicalClusterEName?: string;
logicalClusterNameCn?: string;
regionIdList: number[];
logicalClusterIdentification?:string
}
export interface IPartitionsLocation {