v2.1 fe

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

@@ -2,6 +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 { Table, notification, Tooltip, Popconfirm } from 'antd';
 import { pagination, cellStyle } from 'constants/table';
 import { observer } from 'mobx-react';
@@ -15,6 +16,8 @@ import './index.less';
 
 import moment = require('moment');
 import { ExpandPartitionFormWrapper } from 'container/modal/admin/expand-partition';
+import { ConfirmDetailTopicFormWrapper } from 'container/modal/admin/confirm-detail-topic';
+
 import { showEditClusterTopic } from 'container/modal/admin';
 import { timeFormat } from 'constants/strategy';
 
@@ -26,6 +29,7 @@ export class ClusterTopic extends SearchAndFilterContainer {
   public state = {
     searchKey: '',
     expandVisible: false,
+    detailTopicVisible: false,
   };
 
   constructor(props: any) {
@@ -44,10 +48,43 @@ export class ClusterTopic extends SearchAndFilterContainer {
     this.setState({ expandVisible: val });
   }
 
+  // 运维管控－集群列表－Topic列表修改删除业务逻辑-确认删除topic
+  public handleConfirmVisible(val: boolean) {
+    this.setState({ detailTopicVisible: val });
+  }
+
   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,
+      });
+    });
+    // if (item.logicalClusterId) {
+    //   topic.getTopicBasicInfo(item.logicalClusterId, item.topicName).then(data => {
+    //     item.regionNameList = topic.baseInfo.regionNameList;
+    //     this.clusterTopicsFrom = item;
+    //     this.setState({
+    //       expandVisible: true,
+    //     });
+    //   });
+    // } else {
+    //   this.clusterTopicsFrom = item;
+    //   this.setState({
+    //     expandVisible: true,
+    //   });
+    // }
+  }
+
+  // 运维管控－集群列表－Topic列表修改删除业务逻辑-确认删除topic
+  public confirmDetailTopic(item: IClusterTopics) {
     this.clusterTopicsFrom = item;
+    // console.log(this.clusterTopicsFrom);
     this.setState({
-      expandVisible: true,
+      detailTopicVisible: true,
     });
   }
 
@@ -71,7 +108,7 @@ export class ClusterTopic extends SearchAndFilterContainer {
     data = searchKey ? origin.filter((item: IClusterTopics) =>
       (item.appName !== undefined && item.appName !== null) && item.appName.toLowerCase().includes(searchKey as string)
       || (item.topicName !== undefined && item.topicName !== null) && item.topicName.toLowerCase().includes(searchKey as string),
-    ) : origin ;
+    ) : origin;
     return data;
   }
 
@@ -85,7 +122,7 @@ export class ClusterTopic extends SearchAndFilterContainer {
         title: 'Topic名称',
         dataIndex: 'topicName',
         key: 'topicName',
-        width: '15%',
+        width: '120px',
         sorter: (a: IClusterTopics, b: IClusterTopics) => a.topicName.charCodeAt(0) - b.topicName.charCodeAt(0),
         render: (text: string, record: IClusterTopics) => {
           return (
@@ -99,11 +136,18 @@ export class ClusterTopic extends SearchAndFilterContainer {
             </Tooltip>);
         },
       },
+      {
+        title: '分区数',
+        dataIndex: 'partitionNum',
+        key: 'partitionNum',
+        width: '90px',
+        sorter: (a: IClusterTopics, b: IClusterTopics) => b.partitionNum - a.partitionNum,
+      },
       {
         title: 'QPS',
         dataIndex: 'produceRequest',
         key: 'produceRequest',
-        width: '10%',
+        // width: '10%',
         sorter: (a: IClusterTopics, b: IClusterTopics) => b.produceRequest - a.produceRequest,
         render: (t: number) => t === null ? '' : t.toFixed(2),
       },
@@ -111,15 +155,23 @@ export class ClusterTopic extends SearchAndFilterContainer {
         title: 'Bytes In(KB/s)',
         dataIndex: 'byteIn',
         key: 'byteIn',
-        width: '15%',
+        // width: '15%',
         sorter: (a: IClusterTopics, b: IClusterTopics) => b.byteIn - a.byteIn,
         render: (t: number) => t === null ? '' : (t / 1024).toFixed(2),
       },
+      {
+        title: 'Bytes Out(KB/s)',
+        dataIndex: 'byteOut',
+        key: 'byteOut',
+        // width: '15%',
+        sorter: (a: IClusterTopics, b: IClusterTopics) => b.byteOut - a.byteOut,
+        render: (t: number) => t && t === null ? '' : (t / 1024).toFixed(2),
+      },
       {
         title: '所属应用',
         dataIndex: 'appName',
         key: 'appName',
-        width: '10%',
+        // width: '10%',
         render: (val: string, record: IClusterTopics) => (
           <Tooltip placement="bottomLeft" title={record.appId} >
             {val}
@@ -130,22 +182,23 @@ export class ClusterTopic extends SearchAndFilterContainer {
         title: '保存时间(h)',
         dataIndex: 'retentionTime',
         key: 'retentionTime',
-        width: '10%',
+        // width: '10%',
         sorter: (a: IClusterTopics, b: IClusterTopics) => b.retentionTime - a.retentionTime,
-        render: (time: any) =>  transMSecondToHour(time),
+        render: (time: any) => transMSecondToHour(time),
       },
       {
         title: '更新时间',
         dataIndex: 'updateTime',
         key: 'updateTime',
+        sorter: (a: IClusterTopics, b: IClusterTopics) => b.updateTime - a.updateTime,
         render: (t: number) => moment(t).format(timeFormat),
-        width: '10%',
+        // width: '10%',
       },
       {
         title: 'Topic说明',
         dataIndex: 'description',
         key: 'description',
-        width: '15%',
+        // width: '15%',
         onCell: () => ({
           style: {
             maxWidth: 180,
@@ -155,14 +208,19 @@ export class ClusterTopic extends SearchAndFilterContainer {
       },
       {
         title: '操作',
-        width: '30%',
+        width: '120px',
         render: (value: string, item: IClusterTopics) => (
           <>
             <a onClick={() => this.getBaseInfo(item)} className="action-button">编辑</a>
             <a onClick={() => this.expandPartition(item)} className="action-button">扩分区</a>
+            {/* <a onClick={() => this.expandPartition(item)} className="action-button">删除</a> */}
             <Popconfirm
               title="确定删除？"
-              onConfirm={() => this.deleteTopic(item)}
+              // 运维管控－集群列表－Topic列表修改删除业务逻辑
+              onConfirm={() => this.confirmDetailTopic(item)}
+              // onConfirm={() => this.deleteTopic(item)}
+              cancelText="取消"
+              okText="确认"
             >
               <a>删除</a>
             </Popconfirm>
@@ -190,6 +248,24 @@ export class ClusterTopic extends SearchAndFilterContainer {
           />
         </div>
         {this.renderExpandModal()}
+        {this.renderConfirmDetailModal()}
+      </>
+    );
+  }
+  // 运维管控－集群列表－Topic列表修改删除业务逻辑-确认删除topic
+  public renderConfirmDetailModal() {
+    let formData = {} as IClusterTopics;
+    formData = this.clusterTopicsFrom ? this.clusterTopicsFrom : formData;
+    // console.log(formData);
+    return (
+      <>
+        {this.state.detailTopicVisible && <ConfirmDetailTopicFormWrapper
+          deleteTopic={(val: IClusterTopics) => this.deleteTopic(val)}
+          handleVisible={(val: boolean) => this.handleConfirmVisible(val)}
+          visible={this.state.detailTopicVisible}
+          formData={formData}
+          clusterId={this.clusterId}
+        />}
       </>
     );
   }