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

add fe page

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<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>
         );
     }

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 = {

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 (<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()}

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() {

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')}
         </ul>
         {this.renderRegion()}
+        {this.renderDeleteRegionModal()}
       </div >
     );
   }

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'
       },
       {

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

 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)}>
             删除

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 (
       <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()}

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<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>

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;
       }
     }
 

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 (
       <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>
     );
   }

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<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

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

@@ -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 >
       </>
     );
   }

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

@@ -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,

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) => (
-        <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',

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;
   }
 

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

@@ -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个字符" />,
           )}

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);
 };
 

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

@@ -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>

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: '请输入备注',

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 },
       }, {

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}&region=${region.currentRegion}`;
       });
     },

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: {

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) => {
           <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>);
       },

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 {

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

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

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

@@ -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>
       </>
     );
   }

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

 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>} */}
                   </>
                 }
               />

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 (
       <>
-      <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>
       </>
     );
   }

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 (
       <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()}

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({

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

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

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;

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 {