add fe page

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

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

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