From 7f115c1b3ece692dcdcc5a63d25c3f6ecb82f5d0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AD=99=E8=B6=85?= Date: Mon, 25 Jan 2021 15:34:07 +0800 Subject: [PATCH] add fe page --- .../src/component/x-form/index.tsx | 3 +- kafka-manager-console/src/constants/table.ts | 2 +- .../admin/cluster-detail/cluster-consumer.tsx | 4 +- .../admin/cluster-detail/cluster-topic.tsx | 5 +- .../cluster-detail/exclusive-cluster.tsx | 2 +- .../admin/cluster-detail/logical-cluster.tsx | 8 +-- .../container/admin/cluster-list/index.tsx | 20 +++--- .../src/container/admin/individual-bill.tsx | 10 +-- .../container/alarm/add-alarm/filter-form.tsx | 60 +++++++++++------- .../src/container/alarm/add-alarm/index.less | 14 +++-- .../src/container/alarm/add-alarm/index.tsx | 21 ++++--- .../alarm/add-alarm/strategy-form.tsx | 44 +++++++++++-- .../container/alarm/add-alarm/type-form.tsx | 34 +++++----- .../cluster-detail/cluster-overview.tsx | 10 +-- .../src/container/cluster/config.tsx | 40 ++++++------ .../src/container/cluster/my-cluster.tsx | 4 +- .../src/container/drawer/data-migration.tsx | 6 +- .../src/container/modal/admin/cluster.ts | 63 +++++++++++++------ .../modal/admin/expand-partition.tsx | 7 ++- .../src/container/modal/admin/task.ts | 14 ++--- .../src/container/modal/app.tsx | 2 +- .../src/container/modal/cluster.tsx | 6 +- .../src/container/modal/topic.tsx | 39 ++++++------ .../src/container/topic/config.tsx | 3 +- .../src/container/topic/topic-all.tsx | 2 +- .../topic/topic-detail/base-information.tsx | 2 +- .../topic/topic-detail/bill-information.tsx | 30 ++++----- .../container/topic/topic-detail/index.tsx | 26 +++++--- .../src/container/topic/topic-mine.tsx | 26 ++++---- .../src/container/user-center/my-bill.tsx | 10 +-- kafka-manager-console/src/lib/fetch.ts | 1 + kafka-manager-console/src/store/alarm.ts | 3 +- kafka-manager-console/src/store/cluster.ts | 26 ++++---- kafka-manager-console/src/types/alarm.ts | 1 + kafka-manager-console/src/types/base-type.ts | 6 +- 35 files changed, 329 insertions(+), 225 deletions(-) diff --git a/kafka-manager-console/src/component/x-form/index.tsx b/kafka-manager-console/src/component/x-form/index.tsx index 20b7c421..9530f2bb 100755 --- a/kafka-manager-console/src/component/x-form/index.tsx +++ b/kafka-manager-console/src/component/x-form/index.tsx @@ -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 { case FormItemType.upload: return ( false} {...item.attrs}> - + {version.fileSuffix && {`请上传${version.fileSuffix}文件`}} ); } diff --git a/kafka-manager-console/src/constants/table.ts b/kafka-manager-console/src/constants/table.ts index 8a148407..3028e78d 100644 --- a/kafka-manager-console/src/constants/table.ts +++ b/kafka-manager-console/src/constants/table.ts @@ -19,7 +19,7 @@ export const cellStyle = { overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', - cursor: 'pointer', + // cursor: 'pointer', }; export const searchProps = { diff --git a/kafka-manager-console/src/container/admin/cluster-detail/cluster-consumer.tsx b/kafka-manager-console/src/container/admin/cluster-detail/cluster-consumer.tsx index dd0df49a..5605a372 100644 --- a/kafka-manager-console/src/container/admin/cluster-detail/cluster-consumer.tsx +++ b/kafka-manager-console/src/container/admin/cluster-detail/cluster-consumer.tsx @@ -38,7 +38,7 @@ export class ClusterConsumer extends SearchAndFilterContainer { key: 'operation', width: '10%', render: (t: string, item: IOffset) => { - return ( this.getConsumeDetails(item)}>详情); + return ( this.getConsumeDetails(item)}>消费详情); }, }]; private xFormModal: IXFormWrapper; @@ -110,7 +110,7 @@ export class ClusterConsumer extends SearchAndFilterContainer { /> this.handleDetailsOk()} onCancel={() => this.handleDetailsCancel()} diff --git a/kafka-manager-console/src/container/admin/cluster-detail/cluster-topic.tsx b/kafka-manager-console/src/container/admin/cluster-detail/cluster-topic.tsx index 9aab6cf9..7b7aaae7 100644 --- a/kafka-manager-console/src/container/admin/cluster-detail/cluster-topic.tsx +++ b/kafka-manager-console/src/container/admin/cluster-detail/cluster-topic.tsx @@ -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() { diff --git a/kafka-manager-console/src/container/admin/cluster-detail/exclusive-cluster.tsx b/kafka-manager-console/src/container/admin/cluster-detail/exclusive-cluster.tsx index 24b90c5e..6aaa2e78 100644 --- a/kafka-manager-console/src/container/admin/cluster-detail/exclusive-cluster.tsx +++ b/kafka-manager-console/src/container/admin/cluster-detail/exclusive-cluster.tsx @@ -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')} {this.renderRegion()} + {this.renderDeleteRegionModal()} ); } diff --git a/kafka-manager-console/src/container/admin/cluster-detail/logical-cluster.tsx b/kafka-manager-console/src/container/admin/cluster-detail/logical-cluster.tsx index 93a58703..b0ae63f4 100644 --- a/kafka-manager-console/src/container/admin/cluster-detail/logical-cluster.tsx +++ b/kafka-manager-console/src/container/admin/cluster-detail/logical-cluster.tsx @@ -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' }, { diff --git a/kafka-manager-console/src/container/admin/cluster-list/index.tsx b/kafka-manager-console/src/container/admin/cluster-list/index.tsx index 97d6cb5d..82ab41ad 100644 --- a/kafka-manager-console/src/container/admin/cluster-list/index.tsx +++ b/kafka-manager-console/src/container/admin/cluster-list/index.tsx @@ -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="确认" > - - {item.status === 1 ? '暂停监控' : '开始监控'} - + + + {item.status === 1 ? '暂停监控' : '开始监控'} + + 删除 diff --git a/kafka-manager-console/src/container/admin/individual-bill.tsx b/kafka-manager-console/src/container/admin/individual-bill.tsx index ef43a616..8524b3de 100644 --- a/kafka-manager-console/src/container/admin/individual-bill.tsx +++ b/kafka-manager-console/src/container/admin/individual-bill.tsx @@ -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 ( ); } - + public renderChart() { return (
- this.chart = ref } getChartData={this.getData.bind(this, null)} /> + this.chart = ref} getChartData={this.getData.bind(this, null)} />
); } @@ -132,7 +132,7 @@ export class IndividualBill extends React.Component { <>
- 账单趋势  - } + } key="1" > {this.renderDatePick()} diff --git a/kafka-manager-console/src/container/alarm/add-alarm/filter-form.tsx b/kafka-manager-console/src/container/alarm/add-alarm/filter-form.tsx index 50e9ce32..3e5dd0b7 100644 --- a/kafka-manager-console/src/container/alarm/add-alarm/filter-form.tsx +++ b/kafka-manager-console/src/container/alarm/add-alarm/filter-form.tsx @@ -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 { 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 { 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 { 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 { }); } - 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 { 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 { 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 { } 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 { }, 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 { }), 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 { key={v.value || v.key || index} value={v.value} > - {v.label.length > 25 ? + {v.label?.length > 25 ? {v.label} : v.label} diff --git a/kafka-manager-console/src/container/alarm/add-alarm/index.less b/kafka-manager-console/src/container/alarm/add-alarm/index.less index 9946c0c1..11d9b3a3 100644 --- a/kafka-manager-console/src/container/alarm/add-alarm/index.less +++ b/kafka-manager-console/src/container/alarm/add-alarm/index.less @@ -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; } } diff --git a/kafka-manager-console/src/container/alarm/add-alarm/index.tsx b/kafka-manager-console/src/container/alarm/add-alarm/index.tsx index ae201823..590c5847 100644 --- a/kafka-manager-console/src/container/alarm/add-alarm/index.tsx +++ b/kafka-manager-console/src/container/alarm/add-alarm/index.tsx @@ -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 (
- 报警策略 + 报警策略
this.strategyForm = form} />
@@ -139,9 +142,9 @@ export class AddAlarm extends SearchAndFilterContainer { public renderTimeForm() { return ( - <> - this.timeForm = form} /> - + <> + this.timeForm = form} /> + ); } @@ -164,7 +167,7 @@ export class AddAlarm extends SearchAndFilterContainer { {this.renderAlarmStrategy()} {this.renderTimeForm()} this.actionForm = actionForm} /> -
+
); } diff --git a/kafka-manager-console/src/container/alarm/add-alarm/strategy-form.tsx b/kafka-manager-console/src/container/alarm/add-alarm/strategy-form.tsx index 1852c468..677462fd 100644 --- a/kafka-manager-console/src/container/alarm/add-alarm/strategy-form.tsx +++ b/kafka-manager-console/src/container/alarm/add-alarm/strategy-form.tsx @@ -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 { public crudList = [] as ICRUDItem[]; public state = { shouldUpdate: false, + monitorType: alarm.monitorType }; public componentDidMount() { @@ -130,7 +132,7 @@ class DynamicSetStrategy extends React.Component { 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 { } 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 ( + {element} + ) + } + public renderFormList(row: ICRUDItem, monitorType: string) { const key = row.id; const funcType = row.func; @@ -309,6 +342,7 @@ class DynamicSetStrategy extends React.Component { key: key + '-func', } as IFormSelect)} {this.getFuncItem(row)} + {row.func !== 'c_avg_rate_abs' && row.func !== 'pdiff' ? this.unit(monitorType) : null} ); } @@ -340,8 +374,8 @@ class DynamicSetStrategy extends React.Component {
{crudList.map((row, index) => { return ( -
- {this.renderFormList(row)} +
+ {this.renderFormList(row, alarm.monitorType)} { crudList.length > 1 ? ( -
- 基本信息 -
- this.$form = form} - formData={formData} - formMap={xTypeFormMap} - layout="inline" - /> -
-
-
- 选择指标 -
- this.filterForm = form} /> -
-
+
+ 基本信息 +
+ this.$form = form} + formData={formData} + formMap={xTypeFormMap} + layout="inline" + /> +
+
+
+ 选择指标 +
+ this.filterForm = form} /> +
+
); } diff --git a/kafka-manager-console/src/container/cluster/cluster-detail/cluster-overview.tsx b/kafka-manager-console/src/container/cluster/cluster-detail/cluster-overview.tsx index 49a25a3c..84c17703 100644 --- a/kafka-manager-console/src/container/cluster/cluster-detail/cluster-overview.tsx +++ b/kafka-manager-console/src/container/cluster/cluster-detail/cluster-overview.tsx @@ -31,11 +31,11 @@ export class ClusterOverview extends React.Component { 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 { value: moment(content.gmtCreate).format(timeFormat), label: '接入时间', }, { - value: content.physicalClusterId, - label: '物理集群ID', + value: content.clusterId, + label: '集群ID', }]; const clusterInfo = [{ value: content.clusterVersion, diff --git a/kafka-manager-console/src/container/cluster/config.tsx b/kafka-manager-console/src/container/cluster/config.tsx index bbd03cb0..ca2ea880 100644 --- a/kafka-manager-console/src/container/cluster/config.tsx +++ b/kafka-manager-console/src/container/cluster/config.tsx @@ -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) => ( - - {text} - - ), - }, - { - title: '逻辑集群英文名称', + title: '集群名称', dataIndex: 'clusterName', key: 'clusterName', width: '13%', @@ -55,6 +37,24 @@ export const getClusterColumns = (urlPrefix: string) => { ), }, + // { + // 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) => ( + // + // {text} + // + // ), + // }, { title: 'Topic数量', dataIndex: 'topicNum', diff --git a/kafka-manager-console/src/container/cluster/my-cluster.tsx b/kafka-manager-console/src/container/cluster/my-cluster.tsx index 7fc2f666..3c54763a 100644 --- a/kafka-manager-console/src/container/cluster/my-cluster.tsx +++ b/kafka-manager-console/src/container/cluster/my-cluster.tsx @@ -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; } diff --git a/kafka-manager-console/src/container/drawer/data-migration.tsx b/kafka-manager-console/src/container/drawer/data-migration.tsx index 0743476b..28353004 100644 --- a/kafka-manager-console/src/container/drawer/data-migration.tsx +++ b/kafka-manager-console/src/container/drawer/data-migration.tsx @@ -127,7 +127,7 @@ class DataMigrationFormTable extends React.Component { 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 { dataSource={this.props.data} columns={columns} pagination={false} - scroll={{y: 520}} + scroll={{ y: 520 }} className="migration-table" /> @@ -316,7 +316,7 @@ export class InfoForm extends React.Component { {getFieldDecorator('description', { initialValue: '', - rules: [{ required: true, message: '请输入至少5个字符', pattern: /^.{5,}.$/ }], + rules: [{ required: true, message: '请输入至少5个字符', pattern: /^.{4,}.$/ }], })( , )} diff --git a/kafka-manager-console/src/container/modal/admin/cluster.ts b/kafka-manager-console/src/container/modal/admin/cluster.ts index ccf1aa54..cea987f6 100644 --- a/kafka-manager-console/src/container/modal/admin/cluster.ts +++ b/kafka-manager-console/src/container/modal/admin/cluster.ts @@ -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); }; diff --git a/kafka-manager-console/src/container/modal/admin/expand-partition.tsx b/kafka-manager-console/src/container/modal/admin/expand-partition.tsx index 89133734..dfb51ba9 100644 --- a/kafka-manager-console/src/container/modal/admin/expand-partition.tsx +++ b/kafka-manager-console/src/container/modal/admin/expand-partition.tsx @@ -50,7 +50,10 @@ class CustomForm extends React.Component { 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 { {/* 运维管控-topic信息-扩分区操作 */} {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' }], })()} diff --git a/kafka-manager-console/src/container/modal/admin/task.ts b/kafka-manager-console/src/container/modal/admin/task.ts index 8b9e5086..be240f7a 100644 --- a/kafka-manager-console/src/container/modal/admin/task.ts +++ b/kafka-manager-console/src/container/modal/admin/task.ts @@ -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: '请输入备注', diff --git a/kafka-manager-console/src/container/modal/app.tsx b/kafka-manager-console/src/container/modal/app.tsx index 26becc73..bda37418 100644 --- a/kafka-manager-console/src/container/modal/app.tsx +++ b/kafka-manager-console/src/container/modal/app.tsx @@ -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 }, }, { diff --git a/kafka-manager-console/src/container/modal/cluster.tsx b/kafka-manager-console/src/container/modal/cluster.tsx index 23cb48ba..8ea048ef 100644 --- a/kafka-manager-console/src/container/modal/cluster.tsx +++ b/kafka-manager-console/src/container/modal/cluster.tsx @@ -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}®ion=${region.currentRegion}`; }); }, diff --git a/kafka-manager-console/src/container/modal/topic.tsx b/kafka-manager-console/src/container/modal/topic.tsx index e4c47f14..7053a497 100644 --- a/kafka-manager-console/src/container/modal/topic.tsx +++ b/kafka-manager-console/src/container/modal/topic.tsx @@ -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: { diff --git a/kafka-manager-console/src/container/topic/config.tsx b/kafka-manager-console/src/container/topic/config.tsx index a845cec1..8485ec42 100644 --- a/kafka-manager-console/src/container/topic/config.tsx +++ b/kafka-manager-console/src/container/topic/config.tsx @@ -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) => { {text} ); }, diff --git a/kafka-manager-console/src/container/topic/topic-all.tsx b/kafka-manager-console/src/container/topic/topic-all.tsx index 19bdc709..59456660 100644 --- a/kafka-manager-console/src/container/topic/topic-all.tsx +++ b/kafka-manager-console/src/container/topic/topic-all.tsx @@ -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 { diff --git a/kafka-manager-console/src/container/topic/topic-detail/base-information.tsx b/kafka-manager-console/src/container/topic/topic-detail/base-information.tsx index 48a58f36..a9d91a2f 100644 --- a/kafka-manager-console/src/container/topic/topic-detail/base-information.tsx +++ b/kafka-manager-console/src/container/topic/topic-detail/base-information.tsx @@ -69,7 +69,7 @@ export class BaseInformation extends React.Component { label: '压缩格式', value: baseInfo.topicCodeC, }, { - label: '所属物理集群ID', + label: '集群ID', value: baseInfo.clusterId, }, { label: '所属region', diff --git a/kafka-manager-console/src/container/topic/topic-detail/bill-information.tsx b/kafka-manager-console/src/container/topic/topic-detail/bill-information.tsx index d7bb90b6..5a10b666 100644 --- a/kafka-manager-console/src/container/topic/topic-detail/bill-information.tsx +++ b/kafka-manager-console/src/container/topic/topic-detail/bill-information.tsx @@ -95,23 +95,23 @@ export class BillInformation extends SearchAndFilterContainer { } public render() { - return( + return ( <> -
-
    -
  • 账单信息  +
    +
      +
    • 账单信息  - - -
      • - {this.renderDatePick()} -
    - {this.renderChart()} -
    + // tslint:disable-next-line:max-line-length + href="https://github.com/didi/kafka-manager" + target="_blank" + > + + +
    • + {this.renderDatePick()} +
+ {this.renderChart()} +
); } diff --git a/kafka-manager-console/src/container/topic/topic-detail/index.tsx b/kafka-manager-console/src/container/topic/topic-detail/index.tsx index 451e5382..0220341b 100644 --- a/kafka-manager-console/src/container/topic/topic-detail/index.tsx +++ b/kafka-manager-console/src/container/topic/topic-detail/index.tsx @@ -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 { drawerVisible: false, infoVisible: false, infoTopicList: [] as IInfoData[], + isExecutionBtn: false }; private $formRef: any; @@ -54,7 +55,7 @@ export class TopicDetail extends React.Component { 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 { formData={formData} formMap={formMap} /> - + {infoVisible ? this.renderInfo() : null} @@ -243,7 +246,11 @@ export class TopicDetail extends React.Component { ); } + // 执行加载图标 + public antIcon = + 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 { 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 { 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 { topicName: this.topicName, clusterName: this.clusterName } as ITopic; - app.getAppList(); return ( <> @@ -342,9 +352,9 @@ export class TopicDetail extends React.Component { {this.needAuth == "true" && } - - - {showEditBtn && } + + + {/* {showEditBtn && } */} } /> diff --git a/kafka-manager-console/src/container/topic/topic-mine.tsx b/kafka-manager-console/src/container/topic/topic-mine.tsx index c0a0b14a..d4f473d1 100644 --- a/kafka-manager-console/src/container/topic/topic-mine.tsx +++ b/kafka-manager-console/src/container/topic/topic-mine.tsx @@ -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 ( <> -
- this.handleTabKey(key)}> - - {this.renderOperationPanel(1)} - {this.renderMyTopicTable(this.getData(topic.mytopicData))} - - - {this.renderOperationPanel(2)} - {this.renderDeprecatedTopicTable(this.getData(topic.expireData))} - - -
+
+ this.handleTabKey(key)}> + + {this.renderOperationPanel(1)} + {this.renderMyTopicTable(this.getData(topic.mytopicData))} + + + {this.renderOperationPanel(2)} + {this.renderDeprecatedTopicTable(this.getData(topic.expireData))} + + +
); } diff --git a/kafka-manager-console/src/container/user-center/my-bill.tsx b/kafka-manager-console/src/container/user-center/my-bill.tsx index 3383861a..1449ef9a 100644 --- a/kafka-manager-console/src/container/user-center/my-bill.tsx +++ b/kafka-manager-console/src/container/user-center/my-bill.tsx @@ -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 (
); } - + public renderChart() { return (
- this.chart = ref } getChartData={this.getData.bind(this, null)} /> + this.chart = ref} getChartData={this.getData.bind(this, null)} />
); } @@ -131,7 +131,7 @@ export class MyBill extends React.Component { <>
- 账单趋势  - } + } key="1" > {this.renderDatePick()} diff --git a/kafka-manager-console/src/lib/fetch.ts b/kafka-manager-console/src/lib/fetch.ts index 037b0787..ef307ccb 100644 --- a/kafka-manager-console/src/lib/fetch.ts +++ b/kafka-manager-console/src/lib/fetch.ts @@ -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({ diff --git a/kafka-manager-console/src/store/alarm.ts b/kafka-manager-console/src/store/alarm.ts index 7139a42e..b3e004df 100644 --- a/kafka-manager-console/src/store/alarm.ts +++ b/kafka-manager-console/src/store/alarm.ts @@ -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 diff --git a/kafka-manager-console/src/store/cluster.ts b/kafka-manager-console/src/store/cluster.ts index aabe41c9..7fb32793 100644 --- a/kafka-manager-console/src/store/cluster.ts +++ b/kafka-manager-console/src/store/cluster.ts @@ -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 diff --git a/kafka-manager-console/src/types/alarm.ts b/kafka-manager-console/src/types/alarm.ts index 3c4ddbd6..124282b0 100644 --- a/kafka-manager-console/src/types/alarm.ts +++ b/kafka-manager-console/src/types/alarm.ts @@ -19,6 +19,7 @@ export interface IStrategyFilter { tkey: string; topt: string; tval: string[]; + clusterIdentification?: string; } export interface IRequestParams { appId: string; diff --git a/kafka-manager-console/src/types/base-type.ts b/kafka-manager-console/src/types/base-type.ts index 5cfbb999..1170a696 100644 --- a/kafka-manager-console/src/types/base-type.ts +++ b/kafka-manager-console/src/types/base-type.ts @@ -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 {