Merge pull request #2 from didi/master

pull

console/src/container/admin-home/index.tsx

@@ -10,7 +10,7 @@ import { IClusterData } from 'types/base-type';
 
 const TabPane = Tabs.TabPane;
 
-const detailUrl ='/admin/cluster_detail?clusterId=';
+const detailUrl = '/admin/cluster_detail?clusterId=';
 
 const collectionColumns: Array<ColumnProps<IClusterData>> = [
   {
@@ -24,7 +24,8 @@ const collectionColumns: Array<ColumnProps<IClusterData>> = [
     key: 'clusterName',
     sorter: (a: IClusterData, b: IClusterData) => a.clusterName.charCodeAt(0) - b.clusterName.charCodeAt(0),
     render: (text, record) => {
-      return <a href={`${detailUrl}${record.clusterId}`}>{record.clusterName}</a>;
+      const url = `${detailUrl}${record.clusterId}&clusterName=${record.clusterName}`;
+      return <a href={encodeURI(url)}>{record.clusterName}</a>;
     },
   },
   {

console/src/container/admin-usermanage/index.tsx

@@ -39,10 +39,10 @@ export class UserManage extends SearchAndFilter {
   public renderColumns = () => {
     const role = Object.assign({
       title: '角色',
-      key: 'role',
-      dataIndex: 'role',
+      key: 'roleName',
+      dataIndex: 'roleName',
       filters: users.filterRole,
-      onFilter: (value: string, record: any) => record.role.indexOf(value) === 0,
+      onFilter: (value: string, record: any) => record.roleName.indexOf(value) === 0,
     }, this.renderColumnsFilter('filterVisible'));
 
     return [

console/src/container/broker-info/base-info.tsx

 import * as React from 'react';
 import './index.less';
-import { Table, Modal, notification, PaginationConfig, Button } from 'component/antd';
+import { Table, Modal, notification, PaginationConfig, Button, Spin } from 'component/antd';
 import { broker, IBroker, IBrokerNetworkInfo, IBrokerPartition } from 'store/broker';
 import { observer } from 'mobx-react';
 import { StatusGraghCom } from 'component/flow-table';
@@ -49,10 +49,19 @@ export class BrokerList extends SearchAndFilter {
 
     const status = Object.assign({
       title: '已同步',
-      dataIndex: 'status',
-      key: 'status',
-      filters: [{ text: '是', value: '是' }, { text: '否', value: '否' }],
-      onFilter: (value: string, record: IBrokerPartition) => record.status === value,
+      dataIndex: 'underReplicatedPartitionCount',
+      key: 'underReplicatedPartitionCount',
+      filters: [{ text: '是', value: '1' }, { text: '否', value: '0' }],
+      onFilter: (value: string, record: IBrokerPartition) => {
+        // underReplicatedPartitionCount > 0 表示未同步完成
+        const syncStatus = record.underReplicatedPartitionCount ? '0' : '1';
+        return syncStatus === value;
+      },
+      render: (text: number) => (
+        <>
+          <span style={{ marginRight: 8 }}>{text ? '否' : '是'}</span>
+        </>
+      ),
     }, this.renderColumnsFilter('filterVisible'));
 
     return [{
@@ -80,7 +89,8 @@ export class BrokerList extends SearchAndFilter {
       title: '未同步副本数量',
       dataIndex: 'notUnderReplicatedPartitionCount',
       key: 'notUnderReplicatedPartitionCount',
-      sorter: (a: IBrokerPartition, b: IBrokerPartition) => a.notUnderReplicatedPartitionCount - b.notUnderReplicatedPartitionCount,
+      sorter: (a: IBrokerPartition, b: IBrokerPartition) =>
+        a.notUnderReplicatedPartitionCount - b.notUnderReplicatedPartitionCount,
     },
       status,
       region,
@@ -205,7 +215,7 @@ export class BrokerList extends SearchAndFilter {
     const dataPartitions = this.state.searchId !== '' ?
       broker.partitions.filter((d) => d.brokerId === +this.state.searchId) : broker.partitions;
     return (
-      <>
+      <Spin spinning={broker.loading}>
         <div className="k-row">
           <ul className="k-tab">
             <li>Broker概览</li>
@@ -239,7 +249,7 @@ export class BrokerList extends SearchAndFilter {
             pagination={pagination}
           />
         </div>
-      </>
+      </Spin>
     );
   }
 }

console/src/container/modal/leader-rebalance.tsx

@@ -45,14 +45,19 @@ class LeaderRebalance extends React.Component<any> {
   constructor(props: any) {
     super(props);
     const url = Url();
-    this.clusterName = decodeURI(atob(url.search.clusterName));
+    if (url.search.clusterName) {
+      this.clusterName = decodeURI(url.search.clusterName);
+    }
     this.clusterId = Number(url.search.clusterId);
   }
 
   public handleSubmit = (e: React.MouseEvent<any, MouseEvent>) => {
     e.preventDefault();
-    this.setState({ loading: true });
     this.props.form.validateFieldsAndScroll((err: any, values: any) => {
+      if (err) {
+        return;
+      }
+      this.setState({ loading: true });
       this.brokerId = Number(values.brokerId);
       addRebalance({ brokerId: this.brokerId, clusterId: this.clusterId, dimension: 0 }).then(() => {
         cluster.getRebalance(this.clusterId).then(() => {

console/src/store/broker.ts

@@ -35,6 +35,7 @@ export interface IBrokerPartition extends IBroker {
   leaderCount: number;
   partitionCount: number;
   notUnderReplicatedPartitionCount: number;
+  underReplicatedPartitionCount?: number;
   regionName: string;
   bytesInPerSec: number;
 }
@@ -74,6 +75,9 @@ interface IBrokerOption {
 }
 
 class Broker {
+  @observable
+  public loading: boolean = false;
+
   @observable
   public brokerBaseInfo: IBrokerBaseInfo = {} as IBrokerBaseInfo;
 
@@ -119,6 +123,11 @@ class Broker {
   @observable
   public BrokerOptions: IValueLabel[] = [{ value: null, label: '请选择Broker' }];
 
+  @action.bound
+  public setLoading(value: boolean) {
+    this.loading = value;
+  }
+
   @action.bound
   public setBrokerBaseInfo(data: IBrokerBaseInfo) {
     data.startTime = moment(data.startTime).format('YYYY-MM-DD HH:mm:ss'),
@@ -216,7 +225,8 @@ class Broker {
   }
 
   public getBrokerList(clusterId: number) {
-    getBrokerList(clusterId).then(this.setBrokerList);
+    this.setLoading(true);
+    getBrokerList(clusterId).then(this.setBrokerList).finally(() => this.setLoading(false));
   }
 
   public getBrokerNetwork(clusterId: number) {
@@ -224,7 +234,8 @@ class Broker {
   }
 
   public getBrokerPartition(clusterId: number) {
-    getBrokerPartition(clusterId).then(this.setBrokerPartition);
+    this.setLoading(true);
+    getBrokerPartition(clusterId).then(this.setBrokerPartition).finally(() => this.setLoading(false));
   }
 
   public getOneBrokerNetwork(clusterId: number, brokerId: number) {

console/src/store/users.ts

@@ -17,7 +17,7 @@ export class Users {
   @action.bound
   public setUserData(data: []) {
     this.userData = data.map((d: any) => {
-      d.role = this.roleMap[d.role];
+      d.roleName = this.roleMap[d.role];
       return d;
     });
   }