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: '逻辑集群英文名称',
+        title: '逻辑集群标识',
-        dataIndex: 'logicalClusterName',
+        dataIndex: 'logicalClusterIdentification',
-        key: 'logicalClusterName1',
+        key: 'logicalClusterIdentification',
         width: '150px'
       },
       {

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="确认"
           >
+            <Tooltip title="暂停监控将无法正常监控指标信息，建议开启监控">
               <a
                 className="action-button"
               >
                 {item.status === 1 ? '暂停监控' : '开始监控'}
               </a>
+            </Tooltip>
           </Popconfirm>
           <a onClick={this.showMonitor.bind(this, item)}>
             删除

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);
-
+    //增加clusterIdentification替代原来的clusterName
-    await this.getClusterId(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) {
+  public async handleClusterChange(e: any) {
-    this.clusterId = e;
+    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,
+      options,
-      defaultValue: this.clusterId,
+      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,6 +43,11 @@
     Icon {
       margin-left: 8px;
     }
+    .ant-form-item-label {
+      // padding-left: 10px;
+      width: 118px;
+      text-align: right !important;
+    }
 
     &.type-form {
       padding-top: 10px;
@@ -50,14 +55,11 @@
         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'); // 判断是否为详情
@@ -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>

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() {
@@ -292,8 +294,39 @@ class DynamicSetStrategy extends React.Component<IDynamicProps> {
     }
     return element;
   }
-
+  public unit(monitorType: string) {
-  public renderFormList(row: ICRUDItem) {
+    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}>
+            <div key={`${index}-${this.state.monitorType}`}>
-              {this.renderFormList(row)}
+              {this.renderFormList(row, alarm.monitorType)}
               {
                 crudList.length > 1 ? (
                   <Icon

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,
+      value: content.clusterIdentification,
-      label: '集群英文名称',
+      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,
+      value: content.clusterId,
-      label: '物理集群ID',
+      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: '逻辑集群中文名称',
+      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: '逻辑集群英文名称',
       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个字符',
             },
           ],

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

@@ -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字符之间', // 不能以下划线（_）和短划线(-)开头和结尾
+          message: '请输入逻辑集群名称，支持中文、字母、数字、下划线(_)和短划线(-)组成，长度在3-128字符之间', // 不能以下划线（_）和短划线(-)开头和结尾
           pattern: /^[a-zA-Z0-9_\-\u4e00-\u9fa5]{3,128}$/g, //(?!(_|\-))(?!.*?(_|\-)$)
         }],
         attrs: {
           // disabled: record ? true : false,
-          placeholder:'请输入逻辑集群中文名称'
+          placeholder: '请输入逻辑集群名称'
         },
       },
       {
-        key: 'logicalClusterName1',
+        key: 'logicalClusterIdentification',
-        label: '逻辑集群英文名称',
+        label: '逻辑集群标识',
         // defaultValue:'',
         rules: [{
           required: true,
-          message: '请输入逻辑集群英文名称，支持字母、数字、下划线(_)和短划线(-)组成，长度在3-128字符之间', //不能以下划线（_）和短划线(-)开头和结尾
+          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个字符',
         },

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-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/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<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="3" type="primary" onClick={() => this.props.history.push(`/alarm/add`)} >新建告警</Button>
-                    <Button key="4" type="primary" onClick={this.showDrawer.bind(this)} >采样</Button>
+                    <Button key="4" type="primary" onClick={this.showDrawer.bind(this)} >数据采样</Button>
-                    {showEditBtn && <Button key="5" onClick={() => this.compileDetails()} type="primary">编辑</Button>}
+                    {/* {showEditBtn && <Button key="5" onClick={() => this.compileDetails()} type="primary">编辑</Button>} */}
                   </>
                 }
               />

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