kafka-manager 2.0

kafka-manager-console/src/container/admin/admin-app-list.tsx

@@ -0,0 +1,47 @@
+import { observer } from 'mobx-react';
+import * as React from 'react';
+import 'styles/table-filter.less';
+import { app } from 'store/app';
+import { CommonAppList } from 'container/app/app-list';
+
+@observer
+export class AdminAppList extends CommonAppList {
+  public static defaultProps = {
+    from: 'admin',
+  };
+
+  constructor(defaultProps: any) {
+    super(defaultProps);
+  }
+
+  public componentDidMount() {
+    if (!app.adminAppData.length) {
+      app.getAdminAppList();
+    }
+  }
+
+  public renderTable() {
+    return this.renderTableList(this.getData(app.adminAppData));
+  }
+
+  public renderOperationPanel() {
+    return (
+      <ul>
+        {this.renderSearch('', '请输入应用名称或者负责人')}
+      </ul>
+    );
+  }
+
+  public render() {
+    return (
+      <div className="container">
+        <div className="table-operation-panel">
+          {this.renderOperationPanel()}
+        </div>
+        <div className="table-wrapper">
+          {this.renderTable()}
+        </div>
+      </div>
+    );
+  }
+}

kafka-manager-console/src/container/admin/bill-detail.tsx

@@ -0,0 +1,103 @@
+import * as React from 'react';
+import { Table, Tabs, Icon, Spin } from 'component/antd';
+import { pagination } from 'constants/table';
+import { observer } from 'mobx-react';
+import { bill } from 'store/bill';
+import { SearchAndFilterContainer } from 'container/search-filter';
+import { billDetailCols } from '../user-center/config';
+import { admin } from 'store/admin';
+import { IBillDetail } from 'types/base-type';
+import { getCookie } from 'lib/utils';
+import { timeMonth } from 'constants/strategy';
+import Url from 'lib/url-parser';
+import * as XLSX from 'xlsx';
+import moment from 'moment';
+
+const { TabPane } = Tabs;
+
+@observer
+export class BillDetail extends SearchAndFilterContainer {
+  public state = {
+    searchKey: '',
+  };
+
+  private timestamp: number = null;
+  constructor(props: any) {
+    super(props);
+    const url = Url();
+    this.timestamp = Number(url.search.timestamp);
+  }
+
+  public componentDidMount() {
+    admin.getBillDetailStaffList(getCookie('username'), this.timestamp);
+  }
+
+  public getData<T extends IBillDetail>(origin: T[]) {
+    let data: T[] = origin;
+    let { searchKey } = this.state;
+    searchKey = (searchKey + '').trim().toLowerCase();
+
+    data = searchKey ? origin.filter((item: IBillDetail) =>
+      (item.topicName !== undefined && item.topicName !== null) && item.topicName.toLowerCase().includes(searchKey as string),
+    ) : origin ;
+    return data;
+  }
+
+  public handleDownLoad() {
+    const tableData = admin.billDetailStaffData.map(item => {
+      return {
+        // tslint:disable
+        '集群ID': item.clusterId,
+        '集群名称': item.clusterName,
+        'quota数量': item.quota,
+        'Topic名称': item.topicName,
+        '金额': item.cost,
+      };
+    });
+    const data = [].concat(tableData);
+    const wb = XLSX.utils.book_new();
+    // json转sheet
+    const ws = XLSX.utils.json_to_sheet(data, {
+      header: ['集群ID', '集群名称', 'quota数量', 'Topic名称', '金额'],
+    });
+    // XLSX.utils.
+    XLSX.utils.book_append_sheet(wb, ws, 'bill');
+    // 输出
+    XLSX.writeFile(wb, 'bill-' + moment(this.timestamp).format(timeMonth) + '.xlsx');
+  }
+
+  public renderTableList() {
+    return (
+      <Spin spinning={bill.loading}>
+        <Table
+          rowKey="key"
+          columns={billDetailCols}
+          dataSource={this.getData(admin.billDetailStaffData)}
+          pagination={pagination}
+        />
+      </Spin>
+    );
+  }
+
+  public render() {
+    return (
+      <>
+        <div className="container">
+          <Tabs defaultActiveKey="1" type="card">
+            <TabPane tab={`账单详情-${moment(this.timestamp).format(timeMonth)}`} key="1">
+              {this.renderTableList()}
+            </TabPane>
+          </Tabs>
+          <div className="operation-panel special">
+            <ul>
+              {this.renderSearch('', '请输入TopicName')}
+              <li className="right-btn-1">
+                <Icon type="download" onClick={this.handleDownLoad.bind(this, null)} />
+              </li>
+            </ul>
+          </div>
+        </div>
+      </>
+    );
+  }
+}

kafka-manager-console/src/container/admin/bill-management/index.less

@@ -0,0 +1,5 @@
+.bill-head{
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}

kafka-manager-console/src/container/admin/bill-management/index.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { handleTabKey } from 'lib/utils';
+import { PersonalBill } from './personal-bill';
+import { Tabs } from 'antd';
+
+const { TabPane } = Tabs;
+
+export class BillManagement extends React.Component {
+  public render() {
+    return(
+      <>
+        <Tabs activeKey={location.hash.substr(1) || '1'} type="card" onChange={handleTabKey}>
+        <TabPane tab="个人账单" key="1">
+          <PersonalBill />
+        </TabPane>
+      </Tabs>
+      </>
+    );
+  }
+}

kafka-manager-console/src/container/admin/bill-management/personal-bill.tsx

@@ -0,0 +1,128 @@
+import * as React from 'react';
+import { Table, DatePicker } from 'antd';
+import { SearchAndFilterContainer } from 'container/search-filter';
+import { admin } from 'store/admin';
+import { Moment } from 'moment';
+import { observer } from 'mobx-react';
+import { IStaffSummary } from 'types/base-type';
+import { pagination } from 'constants/table';
+
+import './index.less';
+const { MonthPicker } = DatePicker;
+
+import moment = require('moment');
+import { timeFormat } from 'constants/strategy';
+
+@observer
+export class PersonalBill extends SearchAndFilterContainer {
+  public state = {
+    searchKey: '',
+  };
+
+  public handleTimeChange = (value: Moment) => {
+    const timestamp = value.valueOf();
+    admin.getStaffSummary(timestamp);
+  }
+
+  public selectTime() {
+    return (
+      <>
+        <div className="zoning-otspots">
+          <div>
+            <span>选择月份：</span>
+            <MonthPicker
+              placeholder="Select month"
+              defaultValue={moment()}
+              onChange={this.handleTimeChange}
+            />
+          </div>
+        </div>
+      </>
+    );
+  }
+
+  public getData<T extends IStaffSummary>(origin: T[]) {
+    let data: T[] = origin;
+    let { searchKey } = this.state;
+    searchKey = (searchKey + '').trim().toLowerCase();
+
+    data = searchKey ? origin.filter((item: IStaffSummary) =>
+      (item.username !== undefined && item.username !== null) && item.username.toLowerCase().includes(searchKey as string),
+    ) : origin ;
+    return data;
+  }
+
+  public pendingTopic() {
+    const columns = [
+      {
+        title: '月份',
+        dataIndex: 'gmtMonth',
+        width: '15%',
+        sorter: (a: IStaffSummary, b: IStaffSummary) => b.timestamp - a.timestamp,
+        render: (text: string, record: IStaffSummary) => (
+          <a href={`${this.urlPrefix}/admin/bill-individual`}> {text} </a>),
+      },
+      {
+        title: '用户名',
+        dataIndex: 'username',
+        width: '20%',
+        sorter: (a: IStaffSummary, b: IStaffSummary) => a.username.charCodeAt(0) - b.username.charCodeAt(0),
+      },
+      {
+        title: 'Topic数量',
+        dataIndex: 'topicNum',
+        width: '15%',
+        sorter: (a: IStaffSummary, b: IStaffSummary) => b.topicNum - a.topicNum,
+      },
+      {
+        title: '时间',
+        dataIndex: 'timestamp',
+        width: '20%',
+        sorter: (a: IStaffSummary, b: IStaffSummary) => b.timestamp - a.timestamp,
+        render: (t: number) => moment(t).format(timeFormat),
+      },
+      {
+        title: 'Quota(M/S)',
+        dataIndex: 'quota',
+        width: '15%',
+        sorter: (a: IStaffSummary, b: IStaffSummary) => b.quota - a.quota,
+        render: (t: number) => t === null ? '' : Number.isInteger(t) ? t : (t).toFixed(2),
+      },
+      {
+        title: '金额',
+        dataIndex: 'cost',
+        width: '15%',
+        sorter: (a: IStaffSummary, b: IStaffSummary) => b.cost - a.cost,
+        render: (t: number) => t === null ? '' : Number.isInteger(t) ? t : (t).toFixed(2),
+      },
+    ];
+
+    return (
+      <>
+        <ul className="bill-head">
+          {this.renderSearch('名称：', '请输入用户名')}
+          {this.selectTime()}
+        </ul>
+        <Table
+          columns={columns}
+          dataSource={this.getData(admin.staffSummary)}
+          pagination={pagination}
+          rowKey="key"
+        />
+      </>
+    );
+  }
+
+  public componentDidMount() {
+    const timestamp = +moment().format('x');
+    admin.getStaffSummary(timestamp);
+  }
+
+  public render() {
+    return(
+      <>
+        {admin.staffSummary ? this.pendingTopic() : null}
+      </>
+    );
+  }
+}

kafka-manager-console/src/container/admin/broker-detail/base-info.tsx

@@ -0,0 +1,121 @@
+import * as React from 'react';
+import { ILabelValue, IBrokersBasicInfo, IOptionType, IClusterReal } from 'types/base-type';
+import { observer } from 'mobx-react';
+import moment from 'moment';
+import Url from 'lib/url-parser';
+import { admin } from 'store/admin';
+import { PageHeader, Descriptions, Spin } from 'component/antd';
+import { selectBrokerMap } from 'constants/status-map';
+import { StatusGraghCom } from 'component/flow-table';
+import { NetWorkFlow, renderTrafficTable } from 'container/network-flow';
+import { timeFormat } from 'constants/strategy';
+
+@observer
+export class BaseInfo extends React.Component {
+  public clusterId: number;
+  public brokerId: number;
+
+  constructor(props: any) {
+    super(props);
+    const url = Url();
+    this.clusterId = Number(url.search.clusterId);
+    this.brokerId = Number(url.search.brokerId);
+  }
+
+  public updateRealStatus = () => {
+    admin.getBrokersMetrics(this.clusterId, this.brokerId);
+  }
+
+  public onSelectChange(e: IOptionType) {
+    return admin.changeBrokerType(e);
+  }
+
+  public getOptionApi = () => {
+    return admin.getBrokersMetricsHistory(this.clusterId, this.brokerId);
+  }
+
+  public componentDidMount() {
+    admin.getBrokersBasicInfo(this.clusterId, this.brokerId);
+    admin.getBrokersMetrics(this.clusterId, this.brokerId);
+  }
+
+  public renderBrokerContent() {
+    let content = {} as IBrokersBasicInfo;
+    content = admin.brokersBasicInfo ? admin.brokersBasicInfo : content;
+    const brokerContent = [{
+      value: content.host,
+      label: '主机名',
+    }, {
+      value: content.port,
+      label: '服务端口',
+    }, {
+      value: content.jmxPort,
+      label: 'JMX端口',
+    },  {
+      value: content.topicNum,
+      label: 'Topic数',
+    }, {
+      value: content.leaderCount,
+      label: 'Leader分区数',
+    }, {
+      value: content.partitionCount,
+      label: '分区数',
+    }, {
+      value: moment(content.startTime).format(timeFormat),
+      label: '启动时间',
+    }];
+    return (
+      <>
+        <div className="chart-title">基本信息</div>
+        <PageHeader className="detail" title="">
+          <Descriptions size="small" column={3}>
+            {brokerContent.map((item: ILabelValue, index: number) => (
+              <Descriptions.Item key={index} label={item.label}>{item.value}</Descriptions.Item>
+            ))}
+          </Descriptions>
+        </PageHeader>
+      </>
+    );
+  }
+
+  public renderHistoryTraffic() {
+    return (
+      <NetWorkFlow
+        key="1"
+        selectArr={selectBrokerMap}
+        type={admin.type}
+        selectChange={(value: IOptionType) => this.onSelectChange(value)}
+        getApi={() => this.getOptionApi()}
+      />
+    );
+  }
+
+  public renderTrafficInfo = () => {
+    return (
+      <Spin spinning={admin.realBrokerLoading}>
+        {renderTrafficTable(this.updateRealStatus, StatusGragh)}
+      </Spin>
+    );
+  }
+
+  public render() {
+    return (
+      <>
+        {this.renderBrokerContent()}
+        {this.renderTrafficInfo()}
+        {this.renderHistoryTraffic()}
+      </>
+    );
+  }
+}
+
+@observer
+class StatusGragh extends StatusGraghCom<IClusterReal> {
+  public getData = () => {
+    return admin.brokersMetrics;
+  }
+
+  public getLoading = () => {
+    return admin.realBrokerLoading;
+  }
+}

kafka-manager-console/src/container/admin/broker-detail/disk-info.tsx

@@ -0,0 +1,172 @@
+import * as React from 'react';
+import { observer } from 'mobx-react';
+import { Table, Tooltip } from 'component/antd';
+import { diskDefault } from 'constants/status-map';
+import Url from 'lib/url-parser';
+import { pagination } from 'constants/table';
+import { admin } from 'store/admin';
+import { IPartitionsLocation } from 'types/base-type';
+import { SearchAndFilterContainer } from 'container/search-filter';
+import './index.less';
+
+@observer
+export class DiskInfo extends SearchAndFilterContainer {
+  public clusterId: number;
+  public brokerId: number;
+
+  public state = {
+    searchKey: '',
+    filterStatusVisible: false,
+  };
+
+  constructor(props: any) {
+    super(props);
+    const url = Url();
+    this.clusterId = Number(url.search.clusterId);
+    this.brokerId = Number(url.search.brokerId);
+  }
+
+  public getDescription = (value: any, record: any) => {
+    return Object.keys(value).map((key: keyof any, index: any) => {
+      return (
+        <>
+          <p key={index}>
+            <span>{value[key]}</span>
+            {(record[key] as []).join(',')}（共{(record[key] as []).length}个)
+          </p>
+        </>
+      );
+    });
+  }
+
+  public getMoreDetail = (record: IPartitionsLocation) => {
+    return (
+      <div className="p-description" key={record.key}>
+        <p><span>diskName: </span>{record.diskName}</p>
+        <p><span>brokerId: </span>{record.brokerId}</p>
+        <p><span>isUnderReplicated:</span>{record.underReplicated + ''}</p>
+        <p><span>topic: </span>{record.topicName}</p>
+        {this.getDescription(diskDefault, record)}
+        <p><span>clusterId: </span>{record.clusterId}</p>
+        <p><span>underReplicatedPartitions: </span></p>
+      </div>
+    );
+  }
+
+  public componentDidMount() {
+    admin.getPartitionsLocation(this.clusterId, this.brokerId);
+  }
+
+  public getData<T extends IPartitionsLocation>(origin: T[]) {
+    let data: T[] = origin;
+    let { searchKey } = this.state;
+    searchKey = (searchKey + '').trim().toLowerCase();
+
+    data = searchKey ? origin.filter((item: IPartitionsLocation) =>
+      (item.diskName !== undefined && item.diskName !== null) && item.diskName.toLowerCase().includes(searchKey as string)
+      || (item.topicName !== undefined && item.topicName !== null) && item.topicName.toLowerCase().includes(searchKey as string),
+    ) : origin ;
+    return data;
+  }
+
+  public renderDiskInfo() {
+    const underReplicated = Object.assign({
+      title: '状态',
+      dataIndex: 'underReplicated',
+      key: 'underReplicated',
+      filters: [{ text: '已同步', value: 'false' }, { text: '未同步', value: 'true' }],
+      onFilter: (value: string, record: IPartitionsLocation) => record.underReplicated + '' === value,
+      render: (t: boolean) => <span>{t ? '未同步' : '已同步'}</span>,
+    }, this.renderColumnsFilter('filterStatusVisible'));
+    const columns = [{
+      title: '磁盘名称',
+      dataIndex: 'diskName',
+      key: 'diskName',
+      sorter: (a: IPartitionsLocation, b: IPartitionsLocation) => a.diskName.charCodeAt(0) - b.diskName.charCodeAt(0),
+      render: (val: string) => <Tooltip placement="bottomLeft" title={val}> {val} </Tooltip>,
+    }, {
+      title: 'Topic名称',
+      dataIndex: 'topicName',
+      key: 'topicName',
+      sorter: (a: IPartitionsLocation, b: IPartitionsLocation) => a.topicName.charCodeAt(0) - b.topicName.charCodeAt(0),
+      render: (val: string) => <Tooltip placement="bottomLeft" title={val}> {val} </Tooltip>,
+    }, {
+      title: 'Leader分区',
+      dataIndex: 'leaderPartitions',
+      key: 'leaderPartitions',
+      onCell: () => ({
+        style: {
+          maxWidth: 250,
+          overflow: 'hidden',
+          whiteSpace: 'nowrap',
+          textOverflow: 'ellipsis',
+          cursor: 'pointer',
+        },
+      }),
+      render: (value: number[]) => {
+        return (
+          <Tooltip placement="bottomLeft" title={value.join('、')}>
+            {value.map(i => <span key={i} className="p-params">{i}</span>)}
+          </Tooltip>
+        );
+      },
+    }, {
+      title: 'Follow分区',
+      dataIndex: 'followerPartitions',
+      key: 'followerPartitions',
+      onCell: () => ({
+        style: {
+          maxWidth: 250,
+          overflow: 'hidden',
+          whiteSpace: 'nowrap',
+          textOverflow: 'ellipsis',
+          cursor: 'pointer',
+        },
+      }),
+      render: (value: number[]) => {
+        return (
+          <Tooltip placement="bottomLeft" title={value.join('、')}>
+            {value.map(i => <span key={i} className="p-params">{i}</span>)}
+          </Tooltip>
+        );
+      },
+    }, {
+      title: '未同步副本',
+      dataIndex: 'notUnderReplicatedPartitions',
+      render: (value: number[]) => {
+        return (
+          <Tooltip placement="bottomLeft" title={value.join('、')}>
+            {value.map(i => <span key={i} className="p-params p-params-unFinished">{i}</span>)}
+          </Tooltip>
+        );
+      },
+    },
+    underReplicated,
+    ];
+
+    return (
+          <>
+          <div className="k-row">
+            <ul className="k-tab">
+              <li>{this.props.tab}</li>
+              {this.renderSearch('', '请输入磁盘名或者Topic名称')}
+            </ul>
+            <Table
+              columns={columns}
+              expandIconColumnIndex={-1}
+              expandedRowRender={this.getMoreDetail}
+              dataSource={this.getData(admin.partitionsLocation)}
+              rowKey="key"
+              pagination={pagination}
+            />
+          </div>
+          </>
+    );
+  }
+
+  public render() {
+    return (
+      admin.partitionsLocation ? <> {this.renderDiskInfo()} </>  : null
+    );
+  }
+}

kafka-manager-console/src/container/admin/broker-detail/index.less

@@ -0,0 +1,139 @@
+.p-params {
+  display: inline-block;
+  padding: 0px 10px;
+  border-radius: 4px;
+  border: 1px solid rgba(217, 217, 217, 1);
+  margin: 0px 8px 8px 0px;
+  &-unFinished {
+    background: rgba(245, 34, 45, 0.2);
+  }
+}
+
+.p-description {
+  margin-left: 20px;
+  span {
+    display: inline-block;
+    width: 180px;
+    text-align: right;
+    margin-right: 10px;
+  }
+}
+
+p.k-title {
+  width: 100%;
+  font-size: 14px;
+  font-family: PingFangSC-Medium;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.85);
+  height: 48px;
+  line-height: 48px;
+  background: rgba(0, 0, 0, 0.02);
+  padding-left: 24px;
+  margin: 0;
+}
+
+.right-flow {
+  .k-abs {
+    right: 24px;
+    cursor: pointer;
+    & > i {
+      margin-right: 5px;
+    }
+  }
+}
+
+.title-flow{
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  .k-text{
+    width: 420px;
+    line-height: 50px;
+    background: #00000005;
+  }
+}
+
+.mb-24 {
+  margin-bottom: 24px;
+}
+
+.k-summary {
+  width: 100%;
+  font-family: PingFangSC-Regular;
+  background: #fff;
+  .k-row-1 {
+    width: 100%;
+    height: 48px;
+    display: flex;
+    border-bottom: solid 1px #e8e8e8;
+    div {
+      flex: 1;
+      line-height: 48px;
+      padding-left: 32px;
+      font-size: 15px;
+      color: rgba(0, 0, 0, 0.85);
+    }
+    div + div {
+      border-left: solid 1px #e8e8e8;
+    }
+  }
+  .k-row-2 {
+    width: 100%;
+    padding: 24px 0;
+    border-top: solid 1px #e8e8e8;
+    border-bottom: solid 1px #e8e8e8;
+    display: flex;
+    text-align: center;
+    div {
+      height: 58px;
+      flex: 1;
+      span {
+        display: block;
+        line-height: 22px;
+        color: rgba(0, 0, 0, 0.45);
+        font-size: 14px;
+      }
+      p {
+        line-height: 32px;
+        margin-top: 4px;
+        font-size: 24px;
+        font-weight: 400;
+        color: rgba(0, 0, 0, 0.85);
+      }
+    }
+    div + div {
+      border-left: solid 2px #e8e8e8;
+    }
+  }
+  .k-row-3 {
+    width: 100%;
+    text-align: center;
+    display: flex;
+    div {
+      padding: 9px 0;
+      flex: 1;
+      span {
+        display: block;
+        line-height: 22px;
+        color: rgba(0, 0, 0, 0.45);
+        font-size: 14px;
+      }
+      p {
+        line-height: 22px;
+        margin-top: 1px;
+        font-size: 18px;
+        font-weight: 400;
+        color: rgba(0, 0, 0, 0.85);
+      }
+    }
+    .long-text {
+      font-size: 12px;
+    }
+    div + div {
+      border-left: solid 2px #e8e8e8;
+    }
+  }
+}
+.option-map {
+  min-width: 1200px;
+}

kafka-manager-console/src/container/admin/broker-detail/index.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { observer } from 'mobx-react';
+import { Tabs, PageHeader } from 'antd';
+import { handleTabKey } from 'lib/utils';
+import { IMetaData } from 'types/base-type';
+import Url from 'lib/url-parser';
+import { BaseInfo } from './base-info';
+import { MonitorInfo } from './monitor-info';
+import { TopicInfo } from './topic-info';
+import { DiskInfo } from './disk-info';
+import { PartitionInfo } from './partition-info';
+import { TopicAnalysis } from './topic-analysis';
+import { handlePageBack } from 'lib/utils';
+import { admin } from 'store/admin';
+
+const { TabPane } = Tabs;
+
+@observer
+export class BrokerDetail extends React.Component {
+  public clusterId: number;
+  public brokerId: number;
+
+  constructor(props: any) {
+    super(props);
+    const url = Url();
+    this.clusterId = Number(url.search.clusterId);
+    this.brokerId = Number(url.search.brokerId);
+  }
+
+  public componentDidMount() {
+    admin.getBasicInfo(this.clusterId);
+  }
+
+  public render() {
+    let content = {} as IMetaData;
+    content = admin.basicInfo ? admin.basicInfo : content;
+    return (
+      <>
+      <PageHeader
+          className="detail topic-detail-header"
+          onBack={() => handlePageBack(`/admin/cluster-detail?clusterId=${this.clusterId}#3`)}
+          title={`集群列表/${content.clusterName || ''}/${this.brokerId || ''}`}
+      />
+      <Tabs activeKey={location.hash.substr(1) || '1'} type="card" onChange={handleTabKey}>
+        <TabPane tab="基本信息" key="1">
+          <BaseInfo/>
+        </TabPane>
+        <TabPane tab="监控信息" key="2">
+          <MonitorInfo />
+        </TabPane>
+        <TabPane tab="Topic信息" key="3">
+          <TopicInfo tab={'Topic信息'} />
+        </TabPane>
+        <TabPane tab="磁盘信息" key="4">
+          <DiskInfo tab={'磁盘信息'} />
+        </TabPane>
+        <TabPane tab="partition信息" key="5">
+          <PartitionInfo tab={'partition信息'} />
+        </TabPane>
+        <TabPane tab="Topic分析" key="6">
+          <TopicAnalysis />
+        </TabPane>
+      </Tabs>
+      </>
+    );
+  }
+}

kafka-manager-console/src/container/admin/broker-detail/monitor-info.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { observer } from 'mobx-react';
+import Url from 'lib/url-parser';
+import { adminMonitor } from 'store/admin-monitor';
+import moment from 'moment';
+import './index.less';
+import { ExpandCard } from 'component/expand-card';
+import { DataCurveFilter } from '../data-curve';
+import { allCurves, ICurveType } from '../data-curve/config';
+import { CommonCurve } from 'container/common-curve';
+
+@observer
+export class MonitorInfo extends React.Component {
+  public clusterId: number;
+  public brokerId: number;
+  public $chart: any;
+  public chart11: any;
+
+  public state = {
+    startTime: moment().subtract(1, 'hour'),
+    endTime: moment(),
+  };
+
+  constructor(props: any) {
+    super(props);
+    const url = Url();
+    this.clusterId = Number(url.search.clusterId);
+    this.brokerId = Number(url.search.brokerId);
+    adminMonitor.setCurrentBrokerId(this.brokerId);
+    adminMonitor.setCurrentClusterId(this.clusterId);
+  }
+
+  public handleRef(chart: any, index: number) {
+    this.$chart[index] = chart;
+  }
+
+  public getCurves = (curveType: ICurveType) => {
+    return curveType.curves.map(o => {
+      return <CommonCurve key={o.path} options={o} parser={curveType.parser} />;
+    });
+  }
+
+  public renderChart() {
+    return (
+      <div className="curve-wrapper">
+        <DataCurveFilter />
+        {allCurves.map(c => {
+          return <ExpandCard key={c.type} title={c.title} charts={this.getCurves(c)} />;
+        })}
+      </div>
+    );
+  }
+
+  public componentDidMount() {
+    adminMonitor.getBrokersMetricsList(moment().subtract(1, 'hour').format('x'), moment().format('x'));
+  }
+
+  public render() {
+    return (
+      <>
+        {adminMonitor.brokersMetricsHistory ? this.renderChart() : null}
+      </>
+    );
+  }
+}

kafka-manager-console/src/container/admin/broker-detail/partition-info.tsx

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import { observer } from 'mobx-react';
+import { Table, Tooltip } from 'component/antd';
+import { columsDefault } from 'constants/status-map';
+import Url from 'lib/url-parser';
+import { pagination } from 'constants/table';
+import { admin } from 'store/admin';
+import { IBrokersPartitions } from 'types/base-type';
+import './index.less';
+import { SearchAndFilterContainer } from 'container/search-filter';
+import { getPartitionInfoColumns } from '../config';
+
+@observer
+export class PartitionInfo extends SearchAndFilterContainer {
+  public clusterId: number;
+  public brokerId: number;
+  public state = {
+    searchKey: '',
+    filterStatusVisible: false,
+  };
+
+  constructor(props: any) {
+    super(props);
+    const url = Url();
+    this.clusterId = Number(url.search.clusterId);
+    this.brokerId = Number(url.search.brokerId);
+  }
+
+  public getColumns = () => {
+    const columns = getPartitionInfoColumns();
+    const status = Object.assign({
+      title: '状态',
+      dataIndex: 'underReplicated',
+      key: 'underReplicated',
+      onCell: null,
+      width: '7%',
+      filters: [{ text: '已同步', value: true }, { text: '未同步', value: false }],
+      onFilter: (value: string, record: IBrokersPartitions) => record.underReplicated === Boolean(value),
+      render: (value: string) => <span>{Boolean(value) ? '已同步' : '未同步'}</span>,
+    }, this.renderColumnsFilter('filterStatusVisible'));
+
+    const col = columns.splice(4, 0, status);
+    return columns;
+  }
+
+  public getDescription = (value: any, record: any) => {
+    return Object.keys(value).map((key: keyof any, index: number) => {
+      return (
+        <>
+          <p key={index}>
+            <span>{value[key]}</span>
+            {(record[key] as []).join(',')}（共{(record[key] as []).length}个)
+          </p>
+        </>
+      );
+    });
+  }
+
+  public getMoreDetail = (record: IBrokersPartitions) => {
+    return (
+      <div className="p-description">
+        <p><span>Topic: </span>{record.topicName}</p>
+        <p><span>isUnderReplicated:</span>{record.underReplicated ? '已同步' : '未同步'}</p>
+        {this.getDescription(columsDefault, record)}
+      </div>
+    );
+  }
+
+  public getData<T extends IBrokersPartitions>(origin: T[]) {
+    let data: T[] = origin;
+    let { searchKey } = this.state;
+    searchKey = (searchKey + '').trim().toLowerCase();
+
+    data = searchKey ? origin.filter((item: IBrokersPartitions) =>
+      (item.topicName !== undefined && item.topicName !== null) && item.topicName.toLowerCase().includes(searchKey as string),
+    ) : origin ;
+    return data;
+  }
+
+  public componentDidMount() {
+    admin.getBrokersPartitions(this.clusterId, this.brokerId);
+  }
+
+  public render() {
+    return (
+      <div className="k-row">
+        <ul className="k-tab">
+          <li>{this.props.tab}</li>
+          {this.renderSearch('', '请输入Topic')}
+        </ul>
+        <Table
+          loading={admin.realBrokerLoading}
+          columns={this.getColumns()}
+          expandIconAsCell={true}
+          expandIconColumnIndex={-1}
+          expandedRowRender={this.getMoreDetail}
+          dataSource={this.getData(admin.brokersPartitions)}
+          rowKey="key"
+          pagination={pagination}
+        />
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,117 @@
+import * as React from 'react';
+import { Table, Tooltip } from 'component/antd';
+import { observer } from 'mobx-react';
+import { admin } from 'store/admin';
+import { brokerMetrics } from 'constants/status-map';
+import { IBrokerHistory, IAnalysisTopicVO } from 'types/base-type';
+import Url from 'lib/url-parser';
+import './index.less';
+
+const columns = [{
+  title: 'Topic名称',
+  dataIndex: 'topicName',
+  key: 'topicName',
+  sorter: (a: IAnalysisTopicVO, b: IAnalysisTopicVO) => a.topicName.charCodeAt(0) - b.topicName.charCodeAt(0),
+  render: (val: string) => <Tooltip placement="bottomLeft" title={val}> {val} </Tooltip>,
+},
+{
+  title: 'Bytes In(KB/s)',
+  dataIndex: 'bytesInRate',
+  key: 'bytesInRate',
+  sorter: (a: IAnalysisTopicVO, b: IAnalysisTopicVO) => Number(b.bytesIn) - Number(a.bytesIn),
+  render: (t: number, record: any) => `${record && (record.bytesIn / 1024).toFixed(2)} (${+Math.ceil((t * 100))}%)`,
+},
+{
+  title: 'Bytes Out(KB/s)',
+  dataIndex: 'bytesOutRate',
+  key: 'bytesOutRate',
+  sorter: (a: IAnalysisTopicVO, b: IAnalysisTopicVO) => Number(b.bytesOut) - Number(a.bytesOut),
+  render: (t: number, record: any) => `${record && (record.bytesOut / 1024).toFixed(2)} (${+Math.ceil((t * 100))}%)`,
+},
+{
+  title: 'Message In(秒)',
+  dataIndex: 'messagesInRate',
+  key: 'messagesInRate',
+  sorter: (a: IAnalysisTopicVO, b: IAnalysisTopicVO) => Number(b.messagesIn) - Number(a.messagesIn),
+  render: (t: number, record: any) => `${record && record.messagesIn} (${+Math.ceil((t * 100))}%)`,
+},
+{
+  title: 'Total Fetch Requests(秒)',
+  dataIndex: 'totalFetchRequestsRate',
+  key: 'totalFetchRequestsRate',
+  sorter: (a: IAnalysisTopicVO, b: IAnalysisTopicVO) => Number(b.totalFetchRequests) - Number(a.totalFetchRequests),
+  render: (t: number, record: any) => `${record && record.totalFetchRequests} (${+Math.ceil((t * 100))}%)`,
+},
+{
+  title: 'Total Produce Requests(秒)',
+  dataIndex: 'totalProduceRequestsRate',
+  key: 'totalProduceRequestsRate',
+  sorter: (a: IAnalysisTopicVO, b: IAnalysisTopicVO) => Number(b.totalProduceRequests) - Number(a.totalProduceRequests),
+  render: (t: number, record: any) => `${record && record.totalProduceRequests} (${+Math.ceil((t * 100))}%)`,
+}];
+
+@observer
+export class TopicAnalysis extends React.Component {
+  public clusterId: number;
+  public brokerId: number;
+
+  constructor(props: any) {
+    super(props);
+    const url = Url();
+    this.clusterId = Number(url.search.clusterId);
+    this.brokerId = Number(url.search.brokerId);
+  }
+
+  public brokerStatus() {
+    return (
+      <div className="k-summary">
+        <div className="k-row-3">
+          <div>
+            <span>Broker ID</span>
+            <p>{this.brokerId}</p>
+          </div>
+          {admin.brokersAnalysis ?
+            Object.keys(brokerMetrics).map((i: keyof IBrokerHistory) => {
+              return (
+                <div key={i}>
+                  <span className={brokerMetrics[i].length > 25 ? 'long-text' : ''}>
+                  {brokerMetrics[i]}</span>
+                  <p>{(admin.brokersAnalysis[i] === null || admin.brokersAnalysis[i] === undefined) ?
+                    '' : admin.brokersAnalysis[i].toFixed(2)}</p>
+                </div>
+              );
+            }) : ''}
+        </div>
+      </div>
+    );
+  }
+
+  public componentDidMount() {
+    admin.getBrokersAnalysis(this.clusterId, this.brokerId);
+  }
+
+  public render() {
+    let analysisTopic = [] as IAnalysisTopicVO[];
+    analysisTopic = admin.brokersAnalysisTopic ? admin.brokersAnalysisTopic : analysisTopic;
+    return(
+      <>
+        <div className="k-row right-flow mb-24">
+          <p className="k-title">Broker 状态</p>
+          {this.brokerStatus()}
+        </div>
+        <div className="k-row right-flow">
+          <div className="title-flow">
+            <p className="k-title">Topic 状态</p>
+            <span className="didi-theme k-text">说明：数值后的百分比表示“占Broker总量的百分比”</span>
+          </div>
+          <Table
+            rowKey="key"
+            columns={columns}
+            dataSource={analysisTopic}
+            pagination={false}
+          />
+        </div>
+      </>
+    );
+  }
+}

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

@@ -0,0 +1,127 @@
+import * as React from 'react';
+import moment from 'moment';
+import { observer } from 'mobx-react';
+import { pagination, cellStyle } from 'constants/table';
+import { SearchAndFilterContainer } from 'container/search-filter';
+import { IBrokersTopics } from 'types/base-type';
+import Url from 'lib/url-parser';
+import { Table, Tooltip } from 'component/antd';
+import { admin } from 'store/admin';
+import { region } from 'store/region';
+import { timeFormat } from 'constants/strategy';
+
+@observer
+export class TopicInfo extends SearchAndFilterContainer {
+  public state = {
+    searchKey: '',
+  };
+
+  public clusterId: number;
+  public brokerId: number;
+
+  constructor(props: any) {
+    super(props);
+    const url = Url();
+    this.clusterId = Number(url.search.clusterId);
+    this.brokerId = Number(url.search.brokerId);
+  }
+
+  public getData<T extends IBrokersTopics>(origin: T[]) {
+    let data: T[] = origin;
+    let { searchKey } = this.state;
+    searchKey = (searchKey + '').trim().toLowerCase();
+
+    data = searchKey ? origin.filter((item: IBrokersTopics) =>
+      (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 ;
+    return data;
+  }
+
+  public renderTopicInfo() {
+    const cloumns = [{
+      title: 'Topic名称',
+      key: 'topicName',
+      onCell: () => ({
+        style: {
+          maxWidth: 250,
+          ...cellStyle,
+        },
+      }),
+      sorter: (a: IBrokersTopics, b: IBrokersTopics) => a.topicName.charCodeAt(0) - b.topicName.charCodeAt(0),
+      render: (t: string, r: IBrokersTopics) => {
+        return (
+          <Tooltip placement="bottomLeft" title={r.topicName} >
+            <a
+              // tslint:disable-next-line:max-line-length
+              href={`${this.urlPrefix}/topic/topic-detail?clusterId=${this.clusterId}&topic=${r.topicName || ''}&isPhysicalClusterId=true&region=${region.currentRegion}`}
+            >
+              {r.topicName}
+            </a>
+          </Tooltip>
+        );
+      },
+    }, {
+      title: '分区数',
+      dataIndex: 'partitionNum',
+      key: 'partitionNum',
+      sorter: (a: IBrokersTopics, b: IBrokersTopics) => b.partitionNum - a.partitionNum,
+    }, {
+      title: '副本数',
+      dataIndex: 'replicaNum',
+      key: 'replicaNum',
+      sorter: (a: IBrokersTopics, b: IBrokersTopics) => b.replicaNum - a.replicaNum,
+    }, {
+      title: 'Bytes In(KB/s)',
+      dataIndex: 'byteIn',
+      key: 'byteIn',
+      sorter: (a: IBrokersTopics, b: IBrokersTopics) => b.byteIn - a.byteIn,
+      render: (t: number) => t === null ? '' : (t / 1024).toFixed(2),
+    }, {
+      title: 'QPS',
+      dataIndex: 'produceRequest',
+      key: 'produceRequest',
+      width: '10%',
+      sorter: (a: IBrokersTopics, b: IBrokersTopics) => b.produceRequest - a.produceRequest,
+      render: (t: number) => t === null ? '' : t.toFixed(2),
+    }, {
+      title: '所属应用',
+      dataIndex: 'appName',
+      key: 'appName',
+      width: '10%',
+      render: (val: string, record: IBrokersTopics) => (
+        <Tooltip placement="bottomLeft" title={record.appId} >
+          {val}
+        </Tooltip>
+      ),
+    }, {
+      title: '修改时间',
+      dataIndex: 'updateTime',
+      key: 'updateTime',
+      sorter: (a: IBrokersTopics, b: IBrokersTopics) => b.updateTime - a.updateTime,
+      render: (t: number) => moment(t).format(timeFormat),
+    }];
+
+    return (
+      <>
+        <div className="k-row">
+          <ul className="k-tab">
+            <li>{this.props.tab}</li>
+            {this.renderSearch('', '请输入Topic名称或者负责人')}
+          </ul>
+          <Table columns={cloumns} dataSource={this.getData(admin.brokersTopics)} rowKey="key" pagination={pagination} />
+        </div>
+      </>
+    );
+  }
+
+  public componentDidMount() {
+    admin.getBrokersTopics(this.clusterId, this.brokerId);
+  }
+
+  public render() {
+    return (
+      admin.brokersTopics ? <> {this.renderTopicInfo()} </>  : null
+    );
+  }
+}

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

@@ -0,0 +1,259 @@
+import * as React from 'react';
+import { Table, notification, Button, Divider, Popconfirm } from 'component/antd';
+import { observer } from 'mobx-react';
+import { pagination } from 'constants/table';
+import { IBrokerData, IEnumsMap, IMetaData } from 'types/base-type';
+import { admin } from 'store/admin';
+import { tableFilter, transBToMB } from 'lib/utils';
+import { SearchAndFilterContainer } from 'container/search-filter';
+import { DoughnutChart } from 'component/chart';
+import { LeaderRebalanceWrapper } from 'container/modal/admin/leader-rebalance';
+import { timeFormat } from 'constants/strategy';
+import Url from 'lib/url-parser';
+import moment from 'moment';
+import './index.less';
+
+@observer
+export class ClusterBroker extends SearchAndFilterContainer {
+  public clusterId: number;
+  public clusterName: string;
+
+  public state = {
+    searchKey: '',
+    filterPeakFlowVisible: false,
+    filterReplicatedVisible: false,
+    filterRegionVisible: false,
+    filterStatusVisible: false,
+    reblanceVisible: false,
+  };
+
+  constructor(props: any) {
+    super(props);
+    const url = Url();
+    this.clusterId = Number(url.search.clusterId);
+  }
+
+  public renderBrokerData(clusterBroker: IBrokerData[]) {
+    let peakFlow = [] as IEnumsMap[];
+    peakFlow = admin.peakFlowStatusList ? admin.peakFlowStatusList : peakFlow;
+
+    const peakFlowStatus = Object.assign({
+      title: '峰值状态',
+      dataIndex: 'peakFlowStatus',
+      key: 'peakFlowStatus',
+      width: '8%',
+      filters: peakFlow.map(ele => ({ text: ele.message, value: ele.code + '' })),
+      onFilter: (value: string, record: IBrokerData) => record.peakFlowStatus === +value,
+      render: (value: number) => {
+        let messgae: string;
+        peakFlow.map(ele => {
+          if (ele.code === value) {
+            messgae = ele.message;
+          }
+        });
+        return (
+          <span>{messgae}</span>
+        );
+      },
+    }, this.renderColumnsFilter('filterPeakFlowVisible'));
+
+    const underReplicated = Object.assign({
+      title: '副本状态',
+      dataIndex: 'underReplicated',
+      key: 'underReplicated',
+      width: '8%',
+      filters: [{ text: '同步', value: 'false' }, { text: '未同步', value: 'true' }],
+      onFilter: (value: string, record: IBrokerData) => record.underReplicated === (value === 'true') ? true : false,
+      render: (t: boolean) => t !== null ? <span className={t ? 'fail' : 'success'}>{t ? '未同步' : '同步'}</span> : '',
+    }, this.renderColumnsFilter('filterReplicatedVisible'));
+
+    const region = Object.assign({
+      title: 'regionName',
+      dataIndex: 'regionName',
+      key: 'regionName',
+      width: '10%',
+      filters: tableFilter<any>(clusterBroker, 'regionName'),
+      onFilter: (value: string, record: IBrokerData) => record.regionName === value,
+    }, this.renderColumnsFilter('filterRegionVisible'));
+
+    const status = Object.assign({
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      width: '8%',
+      filters: [{ text: '未使用', value: '-1' }, { text: '使用中', value: '0' }],
+      onFilter: (value: string, record: IBrokerData) => record.status === Number(value),
+      render: (t: number) => <span className={t === 0 ? 'success' : 'fail'}>{t === 0 ? '使用中' : '未使用'}</span>,
+    }, this.renderColumnsFilter('filterStatusVisible'));
+    const columns = [
+      {
+        title: 'ID',
+        dataIndex: 'brokerId',
+        key: 'brokerId',
+        width: '5%',
+        sorter: (a: IBrokerData, b: IBrokerData) => b.brokerId - a.brokerId,
+        render: (text: number, record: IBrokerData) => {
+          // tslint:disable-next-line:max-line-length
+          const query = `clusterId=${this.clusterId}&brokerId=${record.brokerId}`;
+          const judge = record.underReplicated === false && record.status !== 0;
+          return (
+            <span className={judge ? 'fail' : ''}>
+              {
+              // tslint:disable-next-line:max-line-length
+              record.status === 0 ? <a href={`${this.urlPrefix}/admin/broker-detail?${query}`}>{text}</a>
+                  : <a style={{ cursor: 'not-allowed', color: '#999' }}>{text}</a>}
+            </span>);
+        },
+      },
+      {
+        title: '主机',
+        dataIndex: 'host',
+        key: 'host',
+        width: '10%',
+        sorter: (a: any, b: any) => a.host.charCodeAt(0) - b.host.charCodeAt(0),
+      },
+      {
+        title: 'Port',
+        dataIndex: 'port',
+        key: 'port',
+        width: '6%',
+        sorter: (a: IBrokerData, b: IBrokerData) => b.port - a.port,
+      },
+      {
+        title: 'JMX Port',
+        dataIndex: 'jmxPort',
+        key: 'jmxPort',
+        width: '7%',
+        sorter: (a: IBrokerData, b: IBrokerData) => b.jmxPort - a.jmxPort,
+      },
+      {
+        title: '启动时间',
+        dataIndex: 'startTime',
+        key: 'startTime',
+        width: '10%',
+        sorter: (a: IBrokerData, b: IBrokerData) => b.startTime - a.startTime,
+        render: (time: number) => moment(time).format(timeFormat),
+      },
+      {
+        title: 'Bytes In（MB/s）',
+        dataIndex: 'byteIn',
+        key: 'byteIn',
+        width: '10%',
+        sorter: (a: IBrokerData, b: IBrokerData) => b.byteIn - a.byteIn,
+        render: (t: number) => transBToMB(t),
+      },
+      {
+        title: 'Bytes Out（MB/s）',
+        dataIndex: 'byteOut',
+        key: 'byteOut',
+        width: '10%',
+        sorter: (a: IBrokerData, b: IBrokerData) => b.byteOut - a.byteOut,
+        render: (t: number) => transBToMB(t),
+      },
+      peakFlowStatus,
+      underReplicated,
+      region,
+      status,
+      {
+        title: '操作',
+        width: '10%',
+        render: (text: string, record: IBrokerData) => {
+          // tslint:disable-next-line:max-line-length
+          const query = `clusterId=${this.clusterId}&brokerId=${record.brokerId}`;
+          return ( // 0 监控中 可点击详情，不可删除  -1 暂停监控 不可点击详情，可删除
+            <>
+              {record.status === 0 ?
+                <a href={`${this.urlPrefix}/admin/broker-detail?${query}`} className="action-button">详情</a>
+                  : <a style={{ cursor: 'not-allowed', color: '#999' }}>详情</a>}
+              <Popconfirm
+                title="确定删除？"
+                onConfirm={() => this.deteleTopic(record)}
+                disabled={record.status === 0}
+              >
+                <a style={record.status === 0 ? { cursor: 'not-allowed', color: '#999' } : {}}>
+                  删除
+                </a>
+              </Popconfirm>
+            </>
+          );
+        },
+      },
+    ];
+    return (
+      <Table dataSource={clusterBroker} columns={columns} pagination={pagination} />
+    );
+  }
+
+  public deteleTopic(record: any) {
+    admin.deteleClusterBrokers(this.clusterId, record.brokerId).then(data => {
+      notification.success({ message: '删除成功' });
+    });
+  }
+
+  public reblanceInfo() {
+    this.setState({ reblanceVisible: true });
+  }
+
+  public handleVisible(val: boolean) {
+    this.setState({ reblanceVisible: val });
+  }
+
+  public async componentDidMount() {
+    await admin.getPeakFlowStatus();
+    admin.getClusterBroker(this.clusterId);
+    admin.getBrokersMetadata(this.clusterId);
+    admin.getBrokersStatus(this.clusterId);
+  }
+
+  public getData<T extends IBrokerData>(origin: T[]) {
+    let data: T[] = origin;
+    let { searchKey } = this.state;
+    searchKey = (searchKey + '').trim().toLowerCase();
+
+    data = searchKey ? origin.filter((item: IBrokerData) =>
+      (item.brokerId !== undefined && item.brokerId !== null) && (item.brokerId + '').toLowerCase().includes(searchKey as string)
+      || (item.host !== undefined && item.host !== null) && item.host.toLowerCase().includes(searchKey as string),
+    ) : origin ;
+    return data;
+  }
+
+  public render() {
+    const content = this.props.basicInfo as IMetaData;
+    if (content) {
+      this.clusterName = content.clusterName;
+    }
+    return (
+      <>
+        <div className="diagram">
+          <div className="diagram-box">
+            <h2>峰值使用率分布图</h2>
+            <Divider className="hotspot-divider" />
+            {admin.peakValueList.length ? <DoughnutChart
+              getChartData={() => admin.getPeakFlowChartData(admin.peakValueList, admin.peakValueMap)}
+            /> : null}
+          </div>
+          <div className="diagram-box">
+            <h2>副本状态图</h2>
+            <Divider className="hotspot-divider" />
+            {admin.copyValueList.length ? <DoughnutChart
+              getChartData={() => admin.getSideStatusChartData(admin.copyValueList)}
+            /> : null}
+          </div>
+        </div>
+        <div className="leader-seacrh">
+          <div className="search-top">
+            {this.renderSearch('', '请输入ID或主机')}
+            <Button onClick={() => this.reblanceInfo()} type="primary">Leader Rebalance</Button>
+          </div>
+          {this.renderBrokerData(this.getData(admin.clusterBroker))}
+        </div>
+        { this.state.reblanceVisible && <LeaderRebalanceWrapper
+          changeVisible={(val: boolean) => this.handleVisible(val)}
+          visible={this.state.reblanceVisible}
+          clusterId={this.clusterId}
+          clusterName={this.clusterName}
+        /> }
+      </>
+    );
+  }
+}

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

@@ -0,0 +1,131 @@
+import * as React from 'react';
+
+import { Table, Modal, Tooltip } from 'component/antd';
+import { observer } from 'mobx-react';
+import Url from 'lib/url-parser';
+import { IOffset, IXFormWrapper } from 'types/base-type';
+import { SearchAndFilterContainer } from 'container/search-filter';
+import { pagination } from 'constants/table';
+import { admin } from 'store/admin';
+import { getConsumerDetails } from 'lib/api';
+import './index.less';
+
+@observer
+export class ClusterConsumer extends SearchAndFilterContainer {
+  public clusterId: number;
+  public consumerDetails = [] as string[];
+
+  public state = {
+    searchKey: '',
+    detailsVisible: false,
+  };
+
+  public columns = [{
+    title: '消费组名称',
+    dataIndex: 'consumerGroup',
+    key: 'consumerGroup',
+    width: '70%',
+    sorter: (a: IOffset, b: IOffset) => a.consumerGroup.charCodeAt(0) - b.consumerGroup.charCodeAt(0),
+    render: (text: string) => <Tooltip placement="bottomLeft" title={text} >{text}</Tooltip>,
+  }, {
+    title: 'Location',
+    dataIndex: 'location',
+    key: 'location',
+    width: '20%',
+    render: (t: string) => t.toLowerCase(),
+  }, {
+    title: '操作',
+    key: 'operation',
+    width: '10%',
+    render: (t: string, item: IOffset) => {
+      return (<a onClick={() => this.getConsumeDetails(item)}>详情</a>);
+    },
+  }];
+  private xFormModal: IXFormWrapper;
+
+  constructor(props: any) {
+    super(props);
+    const url = Url();
+    this.clusterId = Number(url.search.clusterId);
+  }
+
+  public getConsumeDetails(record: IOffset) {
+    getConsumerDetails(this.clusterId, record.consumerGroup, record.location).then((data: string[]) => {
+      this.consumerDetails = data;
+      this.setState({ detailsVisible: true });
+    });
+  }
+
+  public handleDetailsOk() {
+    this.setState({ detailsVisible: false });
+  }
+
+  public handleDetailsCancel() {
+    this.setState({ detailsVisible: false });
+  }
+
+  public getData<T extends IOffset>(origin: T[]) {
+    let data: T[] = origin;
+    let { searchKey } = this.state;
+    searchKey = (searchKey + '').trim().toLowerCase();
+
+    data = searchKey ? origin.filter((item: IOffset) =>
+      (item.consumerGroup !== undefined && item.consumerGroup !== null) && item.consumerGroup.toLowerCase().includes(searchKey as string)
+      || (item.location !== undefined && item.location !== null) && item.location.toLowerCase().includes(searchKey as string),
+    ) : origin ;
+    return data;
+  }
+
+  public componentDidMount() {
+    admin.getClusterConsumer(this.clusterId);
+  }
+
+  public render() {
+    let details: any[];
+    details =  this.consumerDetails ? this.consumerDetails.map((ele, index) => {
+      return {
+        key: index,
+        topicName: ele,
+      };
+    }) : [];
+
+    const consumptionColumns = [{
+      title: 'Topic名称',
+      dataIndex: 'topicName',
+      key: 'topicName',
+    }];
+
+    return (
+      <>
+      <div className="k-row">
+        <ul className="k-tab">
+          <li>{this.props.tab}</li>
+          {this.renderSearch()}
+        </ul>
+        <Table
+            columns={this.columns}
+            dataSource={this.getData(admin.consumerData)}
+            pagination={pagination}
+            rowKey="key"
+        />
+      </div>
+      <Modal
+        title="消费的Topic"
+        visible={this.state.detailsVisible}
+        onOk={() => this.handleDetailsOk()}
+        onCancel={() => this.handleDetailsCancel()}
+        maskClosable={false}
+        footer={null}
+      >
+        <Table
+          columns={consumptionColumns}
+          dataSource={details}
+          pagination={pagination}
+          rowKey="key"
+          scroll={{ y: 260 }}
+        />
+      </Modal>
+      </>
+    );
+  }
+}

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

@@ -0,0 +1,97 @@
+
+import * as React from 'react';
+
+import { SearchAndFilterContainer } from 'container/search-filter';
+import { Table } from 'component/antd';
+import { observer } from 'mobx-react';
+import { pagination } from 'constants/table';
+import Url from 'lib/url-parser';
+import { IController } from 'types/base-type';
+import { admin } from 'store/admin';
+import './index.less';
+import moment from 'moment';
+import { timeFormat } from 'constants/strategy';
+
+@observer
+export class ClusterController extends SearchAndFilterContainer {
+  public clusterId: number;
+
+  public state = {
+    searchKey: '',
+  };
+
+  constructor(props: any) {
+    super(props);
+    const url = Url();
+    this.clusterId = Number(url.search.clusterId);
+  }
+
+  public getData<T extends IController>(origin: T[]) {
+    let data: T[] = origin;
+    let { searchKey } = this.state;
+    searchKey = (searchKey + '').trim().toLowerCase();
+
+    data = searchKey ? origin.filter((item: IController) =>
+      (item.host !== undefined && item.host !== null) && item.host.toLowerCase().includes(searchKey as string),
+    ) : origin ;
+    return data;
+  }
+
+  public renderController() {
+
+    const columns = [
+      {
+        title: 'BrokerId',
+        dataIndex: 'brokerId',
+        key: 'brokerId',
+        width: '30%',
+        sorter: (a: IController, b: IController) => b.brokerId - a.brokerId,
+      },
+      {
+        title: 'BrokerHost',
+        key: 'host',
+        dataIndex: 'host',
+        width: '30%',
+        render: (r: string, t: IController) => {
+          return (
+            <a href={`${this.urlPrefix}/admin/broker-detail?clusterId=${this.clusterId}&brokerId=${t.brokerId}`}>{r}
+            </a>
+          );
+        },
+      },
+      {
+        title: '变更时间',
+        dataIndex: 'timestamp',
+        key: 'timestamp',
+        width: '40%',
+        sorter: (a: IController, b: IController) => b.timestamp - a.timestamp,
+        render: (t: number) => moment(t).format(timeFormat),
+      },
+    ];
+
+    return (
+      <Table
+        columns={columns}
+        dataSource={this.getData(admin.controllerHistory)}
+        pagination={pagination}
+        rowKey="key"
+      />
+    );
+  }
+
+  public componentDidMount() {
+    admin.getControllerHistory(this.clusterId);
+  }
+
+  public render() {
+    return (
+      <div className="k-row">
+        <ul className="k-tab">
+          <li>{this.props.tab}</li>
+          {this.renderSearch('', '请输入Host')}
+        </ul>
+        {this.renderController()}
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,141 @@
+import * as React from 'react';
+import { PageHeader, Descriptions, Divider, Tooltip, Icon, Spin } from 'component/antd';
+import { ILabelValue, IMetaData, IOptionType, IClusterReal } from 'types/base-type';
+import { controlOptionMap, clusterTypeMap } from 'constants/status-map';
+import { copyString } from 'lib/utils';
+import { observer } from 'mobx-react';
+import { admin } from 'store/admin';
+import Url from 'lib/url-parser';
+import moment from 'moment';
+import './index.less';
+import { StatusGraghCom } from 'component/flow-table';
+import { renderTrafficTable, NetWorkFlow } from 'container/network-flow';
+import { timeFormat } from 'constants/strategy';
+
+interface IOverview {
+  basicInfo: IMetaData;
+}
+
+@observer
+export class ClusterOverview extends React.Component<IOverview> {
+  public clusterId: number;
+
+  constructor(props: any) {
+    super(props);
+    const url = Url();
+    this.clusterId = Number(url.search.clusterId);
+  }
+
+  public clusterContent() {
+    const content = this.props.basicInfo as IMetaData;
+    const gmtCreate = moment(content.gmtCreate).format(timeFormat);
+    const clusterContent = [{
+      value: content.clusterName,
+      label: '集群名称',
+    }, {
+      value: clusterTypeMap[content.mode],
+      label: '集群类型',
+    }, {
+      value: gmtCreate,
+      label: '接入时间',
+    }];
+    const clusterInfo = [{
+      value: content.kafkaVersion,
+      label: 'kafka版本',
+    }, {
+      value: content.bootstrapServers,
+      label: 'Bootstrap Severs',
+    }, {
+      value: content.zookeeper,
+      label: 'Zookeeper',
+    }];
+    return (
+      <>
+        <div className="chart-title">基本信息</div>
+        <PageHeader className="detail" title="">
+          <Descriptions size="small" column={3}>
+            {clusterContent.map((item: ILabelValue, index: number) => (
+              <Descriptions.Item
+                key={index}
+                label={item.label}
+              >{item.value}
+              </Descriptions.Item>
+            ))}
+            {clusterInfo.map((item: ILabelValue, index: number) => (
+                <Descriptions.Item key={index} label={item.label}>
+                  <Tooltip placement="bottomLeft" title={item.value}>
+                    <span className="overview-bootstrap">
+                      <Icon
+                        onClick={() => copyString(item.value)}
+                        type="copy"
+                        className="didi-theme overview-theme"
+                      />
+                      <i className="overview-boot">{item.value}</i>
+                    </span>
+                  </Tooltip>
+                </Descriptions.Item>
+            ))}
+          </Descriptions>
+        </PageHeader>
+      </>
+    );
+  }
+
+  public updateRealStatus = () => {
+    admin.getClusterRealTime(this.clusterId);
+  }
+
+  public onSelectChange(e: IOptionType) {
+    return admin.changeType(e);
+  }
+
+  public getOptionApi = () => {
+    return admin.getClusterMetrice(this.clusterId);
+  }
+
+  public componentDidMount() {
+    admin.getClusterRealTime(this.clusterId);
+  }
+
+  public renderHistoryTraffic() {
+    return (
+      <NetWorkFlow
+        key="1"
+        selectArr={controlOptionMap}
+        type={admin.type}
+        selectChange={(value: IOptionType) => this.onSelectChange(value)}
+        getApi={() => this.getOptionApi()}
+      />
+    );
+  }
+
+  public renderTrafficInfo = () => {
+    return (
+      <Spin spinning={admin.realClusterLoading}>
+        {renderTrafficTable(this.updateRealStatus, StatusGragh)}
+      </Spin>
+    );
+  }
+
+  public render() {
+    return (
+      <>
+        <div className="base-info">
+          {this.clusterContent()}
+          {this.renderTrafficInfo()}
+          {this.renderHistoryTraffic()}
+        </div>
+      </>
+    );
+  }
+}
+
+@observer
+export class StatusGragh extends StatusGraghCom<IClusterReal> {
+  public getData = () => {
+    return admin.clusterRealData;
+  }
+  public getLoading = () => {
+    return admin.realClusterLoading;
+  }
+}

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

@@ -0,0 +1,217 @@
+import * as React from 'react';
+import Url from 'lib/url-parser';
+import { region } from 'store';
+import { admin } from 'store/admin';
+import { Table, notification, Tooltip, Popconfirm } from 'antd';
+import { pagination, cellStyle } from 'constants/table';
+import { observer } from 'mobx-react';
+import { IClusterTopics } from 'types/base-type';
+import { deleteClusterTopic } from 'lib/api';
+import { SearchAndFilterContainer } from 'container/search-filter';
+import { users } from 'store/users';
+import { urlPrefix } from 'constants/left-menu';
+import { transMSecondToHour } from 'lib/utils';
+import './index.less';
+
+import moment = require('moment');
+import { ExpandPartitionFormWrapper } from 'container/modal/admin/expand-partition';
+import { showEditClusterTopic } from 'container/modal/admin';
+import { timeFormat } from 'constants/strategy';
+
+@observer
+export class ClusterTopic extends SearchAndFilterContainer {
+  public clusterId: number;
+  public clusterTopicsFrom: IClusterTopics;
+
+  public state = {
+    searchKey: '',
+    expandVisible: false,
+  };
+
+  constructor(props: any) {
+    super(props);
+    const url = Url();
+    this.clusterId = Number(url.search.clusterId);
+  }
+
+  public getBaseInfo(item: IClusterTopics) {
+    admin.getTopicsBasicInfo(item.clusterId, item.topicName).then(data => {
+      showEditClusterTopic(data);
+    });
+  }
+
+  public handleVisible(val: boolean) {
+    this.setState({ expandVisible: val });
+  }
+
+  public expandPartition(item: IClusterTopics) {
+    this.clusterTopicsFrom = item;
+    this.setState({
+      expandVisible: true,
+    });
+  }
+
+  public deleteTopic(item: IClusterTopics) {
+    const value = [{
+      clusterId: item.clusterId,
+      topicName: item.topicName,
+      unForce: false,
+    }];
+    deleteClusterTopic(value).then(data => {
+      notification.success({ message: '删除成功' });
+      admin.getClusterTopics(this.clusterId);
+    });
+  }
+
+  public getData<T extends IClusterTopics>(origin: T[]) {
+    let data: T[] = origin;
+    let { searchKey } = this.state;
+    searchKey = (searchKey + '').trim().toLowerCase();
+
+    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 ;
+    return data;
+  }
+
+  public componentDidMount() {
+    admin.getClusterTopics(this.clusterId);
+  }
+
+  public renderClusterTopicList() {
+    const clusterColumns = [
+      {
+        title: 'Topic名称',
+        dataIndex: 'topicName',
+        key: 'topicName',
+        width: '15%',
+        sorter: (a: IClusterTopics, b: IClusterTopics) => a.topicName.charCodeAt(0) - b.topicName.charCodeAt(0),
+        render: (text: string, record: IClusterTopics) => {
+          return (
+            <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 || ''}&isPhysicalClusterId=true&region=${region.currentRegion}`}
+              >
+                {text}
+              </a>
+            </Tooltip>);
+        },
+      },
+      {
+        title: 'QPS',
+        dataIndex: 'produceRequest',
+        key: 'produceRequest',
+        width: '10%',
+        sorter: (a: IClusterTopics, b: IClusterTopics) => b.produceRequest - a.produceRequest,
+        render: (t: number) => t === null ? '' : t.toFixed(2),
+      },
+      {
+        title: 'Bytes In(KB/s)',
+        dataIndex: 'byteIn',
+        key: 'byteIn',
+        width: '15%',
+        sorter: (a: IClusterTopics, b: IClusterTopics) => b.byteIn - a.byteIn,
+        render: (t: number) => t === null ? '' : (t / 1024).toFixed(2),
+      },
+      {
+        title: '所属应用',
+        dataIndex: 'appName',
+        key: 'appName',
+        width: '10%',
+        render: (val: string, record: IClusterTopics) => (
+          <Tooltip placement="bottomLeft" title={record.appId} >
+            {val}
+          </Tooltip>
+        ),
+      },
+      {
+        title: '保存时间(h)',
+        dataIndex: 'retentionTime',
+        key: 'retentionTime',
+        width: '10%',
+        sorter: (a: IClusterTopics, b: IClusterTopics) => b.retentionTime - a.retentionTime,
+        render: (time: any) =>  transMSecondToHour(time),
+      },
+      {
+        title: '更新时间',
+        dataIndex: 'updateTime',
+        key: 'updateTime',
+        render: (t: number) => moment(t).format(timeFormat),
+        width: '10%',
+      },
+      {
+        title: 'Topic说明',
+        dataIndex: 'description',
+        key: 'description',
+        width: '15%',
+        onCell: () => ({
+          style: {
+            maxWidth: 180,
+            ...cellStyle,
+          },
+        }),
+      },
+      {
+        title: '操作',
+        width: '30%',
+        render: (value: string, item: IClusterTopics) => (
+          <>
+            <a onClick={() => this.getBaseInfo(item)} className="action-button">编辑</a>
+            <a onClick={() => this.expandPartition(item)} className="action-button">扩分区</a>
+            <Popconfirm
+              title="确定删除？"
+              onConfirm={() => this.deleteTopic(item)}
+            >
+              <a>删除</a>
+            </Popconfirm>
+          </>
+        ),
+      },
+    ];
+    if (users.currentUser.role !== 2) {
+      clusterColumns.splice(-1, 1);
+    }
+
+    return (
+      <>
+        <div className="k-row">
+          <ul className="k-tab">
+            <li>{this.props.tab}</li>
+            {this.renderSearch('', '请输入Topic名称，应用名称')}
+          </ul>
+          <Table
+            loading={admin.loading}
+            rowKey="key"
+            dataSource={this.getData(admin.clusterTopics)}
+            columns={clusterColumns}
+            pagination={pagination}
+          />
+        </div>
+        {this.renderExpandModal()}
+      </>
+    );
+  }
+
+  public renderExpandModal() {
+    let formData = {} as IClusterTopics;
+    formData = this.clusterTopicsFrom ? this.clusterTopicsFrom : formData;
+    return (
+      <>
+        {this.state.expandVisible && <ExpandPartitionFormWrapper
+          handleVisible={(val: boolean) => this.handleVisible(val)}
+          visible={this.state.expandVisible}
+          formData={formData}
+          clusterId={this.clusterId}
+        />}
+      </>
+    );
+  }
+
+  public render() {
+    return (
+      admin.clusterTopics ? <> {this.renderClusterTopicList()} </> : null
+    );
+  }
+}

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

@@ -0,0 +1,97 @@
+
+import * as React from 'react';
+
+import { SearchAndFilterContainer } from 'container/search-filter';
+import { Table, Tooltip } from 'component/antd';
+import { observer } from 'mobx-react';
+import { pagination } from 'constants/table';
+import Url from 'lib/url-parser';
+import { IThrottles } from 'types/base-type';
+import { admin } from 'store/admin';
+import './index.less';
+
+@observer
+export class CurrentLimiting extends SearchAndFilterContainer {
+  public clusterId: number;
+
+  public state = {
+    searchKey: '',
+  };
+
+  constructor(props: any) {
+    super(props);
+    const url = Url();
+    this.clusterId = Number(url.search.clusterId);
+  }
+
+  public renderController() {
+    const clientType = Object.assign({
+      title: '类型',
+      dataIndex: 'throttleClientType',
+      key: 'throttleClientType',
+      width: '15%',
+      filters: [{ text: 'fetch', value: 'Fetch' }, { text: 'produce', value: 'Produce' }],
+      onFilter: (value: string, record: IThrottles) => record.throttleClientType === value,
+      render: (t: string) => t,
+    }, this.renderColumnsFilter('filterStatus'));
+    const columns = [
+      {
+        title: 'Topic名称',
+        key: 'topicName',
+        dataIndex: 'topicName',
+        width: '50%',
+        sorter: (a: IThrottles, b: IThrottles) => a.topicName.charCodeAt(0) - b.topicName.charCodeAt(0),
+        render: (val: string) => <Tooltip placement="bottomLeft" title={val}> {val} </Tooltip>,
+      },
+      {
+        title: '应用ID',
+        dataIndex: 'appId',
+        key: 'appId',
+        width: '15%',
+        sorter: (a: IThrottles, b: IThrottles) => a.appId.charCodeAt(0) - b.appId.charCodeAt(0),
+      },
+      clientType,
+      {
+        title: 'Broker',
+        dataIndex: 'brokerIdList',
+        key: 'brokerIdList',
+        width: '20%',
+        render: (value: number[]) => {
+          const num = value ? `[${value.join(',')}]` : '';
+          return(
+            <span>{num}</span>
+          );
+        },
+      },
+    ];
+    const { searchKey } = this.state;
+    if (!admin.clustersThrottles ) return null;
+    const clustersThrottles = admin.clustersThrottles.filter(d =>
+      ((d.topicName !== undefined && d.topicName !== null) && d.topicName.toLowerCase().includes(searchKey.toLowerCase()))
+      || ((d.appId !== undefined && d.appId !== null) && d.appId.toLowerCase().includes(searchKey.toLowerCase())));
+    return (
+      <Table
+        columns={columns}
+        dataSource={clustersThrottles}
+        pagination={pagination}
+        rowKey="key"
+      />
+    );
+  }
+
+  public componentDidMount() {
+    admin.getClustersThrottles(this.clusterId);
+  }
+
+  public render() {
+    return (
+      <div className="k-row">
+        <ul className="k-tab">
+            <li>{this.props.tab}</li>
+            {this.renderSearch()}
+        </ul>
+        {this.renderController()}
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,291 @@
+import * as React from 'react';
+
+import { Table, notification, Tooltip, Popconfirm } from 'component/antd';
+import { observer } from 'mobx-react';
+import { SearchAndFilterContainer } from 'container/search-filter';
+import { pagination, cellStyle } from 'constants/table';
+import { wrapper } from 'store';
+import { admin } from 'store/admin';
+import { IXFormWrapper, IBrokersRegions, INewRegions, IMetaData } from 'types/base-type';
+import { deleteRegions } from 'lib/api';
+import { transBToMB } from 'lib/utils';
+import Url from 'lib/url-parser';
+import moment from 'moment';
+import './index.less';
+import { timeFormat } from 'constants/strategy';
+
+@observer
+export class ExclusiveCluster extends SearchAndFilterContainer {
+  public clusterId: number;
+
+  public state = {
+    searchKey: '',
+    filterStatus: false,
+  };
+
+  private xFormModal: IXFormWrapper;
+
+  constructor(props: any) {
+    super(props);
+    const url = Url();
+    this.clusterId = Number(url.search.clusterId);
+  }
+
+  public renderColumns = () => {
+    const status = Object.assign({
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      width: '10%',
+      filters: [{ text: '正常', value: '0' }, { text: '容量已满', value: '1' }],
+      onFilter: (value: string, record: IBrokersRegions) => record.status === Number(value),
+      render: (t: number) => <span className={t === 0 ? 'success' : 'fail'}>{t === 0 ? '正常' : '容量已满'}</span>,
+    }, this.renderColumnsFilter('filterStatus'));
+    return [
+      {
+        title: 'RegionID',
+        dataIndex: 'id',
+        key: 'id',
+        width: '7%',
+      },
+      {
+        title: 'Region名称',
+        dataIndex: 'name',
+        key: 'name',
+        width: '13%',
+        onCell: () => ({
+          style: {
+            maxWidth: 160,
+            ...cellStyle,
+          },
+        }),
+        sorter: (a: IBrokersRegions, b: IBrokersRegions) => a.name.charCodeAt(0) - b.name.charCodeAt(0),
+        render: (text: string, r: IBrokersRegions) => (
+          <Tooltip placement="bottomLeft" title={text}>
+            {text}
+          </Tooltip>),
+      },
+      {
+        title: 'BrokerIdList',
+        dataIndex: 'brokerIdList',
+        key: 'brokerIdList',
+        width: '10%',
+        onCell: () => ({
+          style: {
+            maxWidth: 200,
+            ...cellStyle,
+          },
+        }),
+        render: (value: number[]) => {
+          const num = value ? value.join(',') : '';
+          return(
+            <Tooltip placement="bottomLeft" title={num}>
+              {num}
+            </Tooltip>);
+        },
+      },
+      {
+        title: '预估容量（MB/s）',
+        dataIndex: 'capacity',
+        key: 'capacity',
+        width: '10%',
+        sorter: (a: IBrokersRegions, b: IBrokersRegions) => b.capacity - a.capacity,
+        render: (t: number) => transBToMB(t),
+      },
+      {
+        title: '实际流量（MB/s）',
+        dataIndex: 'realUsed',
+        key: 'realUsed',
+        width: '10%',
+        sorter: (a: IBrokersRegions, b: IBrokersRegions) => b.realUsed - a.realUsed,
+        render: (t: number) => transBToMB(t),
+      },
+      {
+        title: '预估流量（MB/s）',
+        dataIndex: 'estimateUsed',
+        key: 'estimateUsed',
+        width: '10%',
+        sorter: (a: IBrokersRegions, b: IBrokersRegions) => b.estimateUsed - a.estimateUsed,
+        render: (t: number) => transBToMB(t),
+      },
+      {
+        title: '修改时间',
+        dataIndex: 'gmtModify',
+        key: 'gmtModify',
+        width: '10%',
+        sorter: (a: IBrokersRegions, b: IBrokersRegions) => b.gmtModify - a.gmtModify,
+        render: (t: number) => moment(t).format(timeFormat),
+      },
+      status,
+      {
+        title: '备注',
+        dataIndex: 'description',
+        key: 'description',
+        width: '10%',
+        onCell: () => ({
+          style: {
+            maxWidth: 200,
+            ...cellStyle,
+          },
+        }),
+        render: (text: string, r: IBrokersRegions) => (
+          <Tooltip placement="bottomLeft" title={text}>
+            {text}
+          </Tooltip>),
+      },
+      {
+        title: '操作',
+        width: '10%',
+        render: (text: string, record: IBrokersRegions) => {
+          return (
+            <span className="table-operation">
+              <a onClick={() => this.addOrModifyRegion(record)}>编辑</a>
+              <Popconfirm
+                title="确定删除？"
+                onConfirm={() => this.handleDeleteRegion(record)}
+              >
+                <a>删除</a>
+              </Popconfirm>
+            </span>
+          );
+        },
+      },
+    ];
+  }
+
+  public handleDeleteRegion = (record: IBrokersRegions) => {
+    deleteRegions(record.id).then(() => {
+      notification.success({ message: '删除成功' });
+      admin.getBrokersRegions(this.clusterId);
+    });
+  }
+
+  public addOrModifyRegion(record?: IBrokersRegions) {
+    const content = this.props.basicInfo as IMetaData;
+
+    this.xFormModal = {
+      formMap: [
+        {
+          key: 'name',
+          label: 'Region名称',
+          rules: [{ required: true, message: '请输入Region名称' }],
+          attrs: { placeholder: '请输入Region名称' },
+        },
+        {
+          key: 'clusterName',
+          label: '集群名称',
+          rules: [{ required: true, message: '请输入集群名称' }],
+          defaultValue: content.clusterName,
+          attrs: {
+            disabled: true,
+            placeholder: '请输入集群名称',
+          },
+        },
+        {
+          key: 'brokerIdList',
+          label: 'Broker列表',
+          defaultValue: record ? record.brokerIdList.join(',') : [],
+          rules: [{ required: true, message: '请输入BrokerIdList' }],
+          attrs: {
+            placeholder: '请输入BrokerIdList',
+          },
+        },
+        {
+          key: 'status',
+          label: '状态',
+          type: 'select',
+          options: [
+            {
+              label: '正常',
+              value: 0,
+            },
+            {
+              label: '容量已满',
+              value: 1,
+            },
+          ],
+          defaultValue: 0,
+          rules: [{ required: true, message: '请选择状态' }],
+          attrs: {
+            placeholder: '请选择状态',
+          },
+        },
+        {
+          key: 'description',
+          label: '备注',
+          type: 'text_area',
+          rules: [{
+            required: false,
+          }],
+          attrs: {
+            placeholder: '请输入备注',
+          },
+        },
+      ],
+      formData: record,
+      visible: true,
+      title: `${record ? '编辑' : '新增Region'}`,
+      onSubmit: (value: INewRegions) => {
+        value.clusterId = this.clusterId;
+        value.brokerIdList = value.brokerIdList && Array.isArray(value.brokerIdList) ?
+          value.brokerIdList : value.brokerIdList.split(',');
+        if (record) {
+          value.id = record.id;
+        }
+        delete value.clusterName;
+        if (record) {
+          return admin.editRegions(this.clusterId, value).then(data => {
+            notification.success({ message: '编辑Region成功' });
+          });
+        }
+        return admin.addNewRegions(this.clusterId, value).then(data => {
+          notification.success({ message: '新建Region成功' });
+        });
+      },
+    };
+    wrapper.open(this.xFormModal);
+  }
+
+  public componentDidMount() {
+    admin.getBrokersRegions(this.clusterId);
+    admin.getBrokersMetadata(this.clusterId);
+  }
+
+  public getData<T extends IBrokersRegions>(origin: T[]) {
+    let data: T[] = origin;
+    let { searchKey } = this.state;
+    searchKey = (searchKey + '').trim().toLowerCase();
+
+    data = searchKey ? origin.filter((item: IBrokersRegions) =>
+      (item.name !== undefined && item.name !== null) && item.name.toLowerCase().includes(searchKey as string),
+    ) : origin ;
+    return data;
+  }
+
+  public renderRegion() {
+    return (
+      <Table
+        columns={this.renderColumns()}
+        dataSource={this.getData(admin.brokersRegions)}
+        pagination={pagination}
+        rowKey="id"
+      />
+    );
+  }
+
+  public render() {
+    return (
+      <div className="k-row">
+        <ul className="k-tab">
+          <li>{this.props.tab}</li>
+          <li className="k-add" onClick={() => this.addOrModifyRegion()}>
+            <i className="k-icon-xinjian didi-theme" />
+            <span>新增Region</span>
+          </li>
+          {this.renderSearch('', '请输入Region名称')}
+        </ul>
+         {this.renderRegion()}
+      </div>
+    );
+  }
+}

kafka-manager-console/src/container/admin/cluster-detail/index.less

@@ -0,0 +1,84 @@
+.table-operation-bar {
+  position: absolute;
+  right: 24px;
+  z-index: 100;
+  li {
+    display: inline-block;
+    vertical-align: middle;
+    .ant-select {
+      width: 150px;
+    }
+    .ant-input-search {
+      width: 200px;
+    }
+  }
+}
+
+.traffic-table {
+  margin: 10px 0;
+  min-height: 450px;
+  .traffic-header {
+    width: 100%;
+    height: 44px;
+    font-weight: bold;
+    background: rgb(245, 245, 245);
+    border: 1px solid #e8e8e8;
+    padding: 0 10px;
+    display: flex;
+    justify-content: space-between;
+
+    span {
+      color: rgba(0, 0, 0, 0.65);
+      font-size: 13px;
+      line-height: 44px;
+      font-weight: 100;
+    }
+
+    .k-abs {
+      font-size: 12px;
+    }
+  }
+}
+
+.implement-button {
+  float: right;
+  margin-right: -120px;
+}
+
+.diagram {
+  min-width: 900px;
+  background: white;
+  height: 400px;
+  display: flex;
+  justify-content: space-around;
+  .diagram-box {
+    float: left;
+    margin-right: 10px;
+    width: 46%;
+    height: 100%;
+    h2 {
+      line-height: 30px;
+      font-size: 13px;
+      margin-left: 15px;
+      margin-top: 10px;
+    }
+  }
+}
+
+.descriptions {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+}
+
+.leader-seacrh {
+  z-index: 9999999;
+  margin-top: 10px;
+  .search-top {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 10px;
+  }
+}

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

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { observer } from 'mobx-react';
+import { Tabs, PageHeader } from 'antd';
+import { IMetaData } from 'types/base-type';
+import { ClusterOverview } from './cluster-overview';
+import { ClusterTopic } from './cluster-topic';
+import { ClusterBroker } from './cluster-broker';
+import { ClusterConsumer } from './cluster-consumer';
+import { ExclusiveCluster } from './exclusive-cluster';
+import { LogicalCluster } from './logical-cluster';
+import { ClusterController } from './cluster-controller';
+import { CurrentLimiting } from './current-limiting';
+import { handleTabKey } from 'lib/utils';
+import { admin } from 'store/admin';
+import { handlePageBack } from 'lib/utils';
+import Url from 'lib/url-parser';
+
+const { TabPane } = Tabs;
+
+@observer
+export class ClusterDetail extends React.Component {
+  public clusterId: number;
+
+  constructor(props: any) {
+    super(props);
+    const url = Url();
+    this.clusterId = Number(url.search.clusterId);
+  }
+
+  public componentDidMount() {
+    admin.getBasicInfo(this.clusterId);
+  }
+
+  public render() {
+     let content = {} as IMetaData;
+     content = admin.basicInfo ? admin.basicInfo : content;
+     return (
+      <>
+        <PageHeader
+          className="detail topic-detail-header"
+          onBack={() => handlePageBack('/admin')}
+          title={`集群列表/${content.clusterName || ''}`}
+        />
+        <Tabs activeKey={location.hash.substr(1) || '1'} type="card" onChange={handleTabKey}>
+          <TabPane tab="集群概览" key="1">
+            <ClusterOverview basicInfo={content} />
+          </TabPane>
+          <TabPane tab="Topic信息" key="2">
+            <ClusterTopic tab={'Topic信息'}/>
+          </TabPane>
+          <TabPane tab="Broker信息" key="3">
+            <ClusterBroker tab={'Broker信息'} basicInfo={content} />
+          </TabPane>
+          <TabPane tab="消费组信息" key="4">
+            <ClusterConsumer tab={'消费组信息'} />
+          </TabPane>
+          <TabPane tab="Region信息" key="5">
+            <ExclusiveCluster tab={'Region信息'} basicInfo={content} />
+          </TabPane>
+          <TabPane tab="逻辑集群信息" key="6">
+            <LogicalCluster tab={'逻辑集群信息'} basicInfo={content} />
+          </TabPane>
+          <TabPane tab="Controller变更历史" key="7">
+            <ClusterController tab={'Controller变更历史'} />
+          </TabPane>
+          <TabPane tab="限流信息"  key="8">
+            <CurrentLimiting tab={'限流信息'}/>
+          </TabPane>
+        </Tabs>
+      </>
+    );
+  }
+}

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

@@ -0,0 +1,169 @@
+import * as React from 'react';
+
+import { Table, notification, Popconfirm } from 'component/antd';
+import { observer } from 'mobx-react';
+import { SearchAndFilterContainer } from 'container/search-filter';
+import { pagination } from 'constants/table';
+import Url from 'lib/url-parser';
+import moment from 'moment';
+import { admin } from 'store/admin';
+import { cluster } from 'store/cluster';
+import { ILogicalCluster } from 'types/base-type';
+import './index.less';
+import { app } from 'store/app';
+import { showLogicalClusterOpModal } from 'container/modal';
+import { timeFormat } from 'constants/strategy';
+
+@observer
+export class LogicalCluster extends SearchAndFilterContainer {
+  public clusterId: number;
+
+  public state = {
+    searchKey: '',
+    filterStatus: false,
+  };
+
+  constructor(props: any) {
+    super(props);
+    const url = Url();
+    this.clusterId = Number(url.search.clusterId);
+  }
+
+  public renderColumns = () => {
+    return [
+      {
+        title: '逻辑集群ID',
+        dataIndex: 'logicalClusterId',
+        key: 'logicalClusterId',
+      },
+      {
+        title: '逻辑集群名称',
+        dataIndex: 'logicalClusterName',
+        key: 'logicalClusterName',
+      },
+      {
+        title: '应用ID',
+        dataIndex: 'appId',
+        key: 'appId',
+      },
+      {
+        title: 'RegionIdList',
+        dataIndex: 'regionIdList',
+        key: 'regionIdList',
+        render: (value: number[]) => {
+          const num = value ? `[${value.join(',')}]` : '';
+          return(
+            <span>{num}</span>
+          );
+        },
+      },
+      {
+        title: '集群模式',
+        dataIndex: 'mode',
+        key: 'mode',
+        render: (value: number) => {
+          let val = '';
+          cluster.clusterModes.forEach((ele: any) => {
+            if (value === ele.code) {
+              val = ele.message;
+            }
+          });
+          return(<span>{val}</span>);
+        },
+      },
+      {
+        title: '修改时间',
+        dataIndex: 'gmtModify',
+        key: 'gmtModify',
+        render: (t: number) => moment(t).format(timeFormat),
+      },
+      {
+        title: '备注',
+        dataIndex: 'description',
+        key: 'description',
+      },
+      {
+        title: '操作',
+        render: (text: string, record: ILogicalCluster) => {
+          return (
+            <span className="table-operation">
+              <a onClick={() => this.editRegion(record)}>编辑</a>
+              <Popconfirm
+                title="确定删除？"
+                onConfirm={() => this.handleDeleteRegion(record)}
+              >
+                <a>删除</a>
+              </Popconfirm>
+            </span>
+          );
+        },
+      },
+    ];
+  }
+
+  public handleDeleteRegion = (record: ILogicalCluster) => {
+    admin.deteleLogicalClusters(this.clusterId, record.logicalClusterId).then(() => {
+      notification.success({ message: '删除成功' });
+    });
+  }
+
+  public async editRegion(record: ILogicalCluster) {
+    await admin.queryLogicalClusters(record.logicalClusterId);
+    await this.addOrEditLogicalCluster(admin.queryLogical);
+  }
+
+  public addOrEditLogicalCluster(record?: ILogicalCluster) {
+    showLogicalClusterOpModal(this.clusterId, record);
+  }
+
+  public componentDidMount() {
+    admin.getLogicalClusters(this.clusterId);
+    cluster.getClusterModes();
+
+    admin.getBrokersRegions(this.clusterId);
+    if (!app.adminAppData.length) {
+      app.getAdminAppList();
+    }
+
+  }
+
+  public getData<T extends ILogicalCluster>(origin: T[]) {
+    let data: T[] = origin;
+    let { searchKey } = this.state;
+    searchKey = (searchKey + '').trim().toLowerCase();
+
+    data = searchKey ? origin.filter((item: ILogicalCluster) =>
+      (item.logicalClusterName !== undefined && item.logicalClusterName !== null)
+        && item.logicalClusterName.toLowerCase().includes(searchKey as string)
+      || (item.appId !== undefined && item.appId !== null) && item.appId.toLowerCase().includes(searchKey as string),
+    ) : origin ;
+    return data;
+  }
+
+  public renderLogicalCluster() {
+    return (
+      <Table
+        columns={this.renderColumns()}
+        dataSource={this.getData(admin.logicalClusters)}
+        pagination={pagination}
+        rowKey="key"
+      />
+    );
+  }
+
+  public render() {
+    return (
+      <div className="k-row">
+        <ul className="k-tab">
+        <li>{this.props.tab}</li>
+          <li className="k-add" onClick={() => this.addOrEditLogicalCluster()}>
+            <i className="k-icon-xinjian didi-theme" />
+            <span>新增逻辑集群</span>
+          </li>
+          {this.renderSearch('', '请输入逻辑集群名称或AppId')}
+        </ul>
+        {this.renderLogicalCluster()}
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,318 @@
+import * as React from 'react';
+import { Modal, Table, Button, notification, message, Tooltip, Icon, Popconfirm } from 'component/antd';
+import { wrapper } from 'store';
+import { observer } from 'mobx-react';
+import { IXFormWrapper, IMetaData, IRegister } from 'types/base-type';
+import { admin } from 'store/admin';
+import { registerCluster, createCluster, pauseMonitoring } from 'lib/api';
+import { SearchAndFilterContainer } from 'container/search-filter';
+import { cluster } from 'store/cluster';
+import { customPagination } from 'constants/table';
+import { urlPrefix } from 'constants/left-menu';
+import { region } from 'store';
+import './index.less';
+import { getAdminClusterColumns } from '../config';
+
+const { confirm } = Modal;
+
+@observer
+export class ClusterList extends SearchAndFilterContainer {
+  public state = {
+    searchKey: '',
+  };
+
+  private xFormModal: IXFormWrapper;
+
+  // TODO: 公共化
+  public renderClusterHref(value: number | string, item: IMetaData, key: number) {
+    return ( // 0 暂停监控--不可点击  1 监控中---可正常点击
+      <>
+        {item.status === 1 ? <a href={`${urlPrefix}/admin/cluster-detail?clusterId=${item.clusterId}#${key}`}>{value}</a>
+          : <a style={{ cursor: 'not-allowed', color: '#999' }}>{value}</a>}
+      </>
+    );
+  }
+
+  public createOrRegisterCluster(item: IMetaData) {
+    this.xFormModal = {
+      formMap: [
+        {
+          key: 'clusterName',
+          label: '集群名称',
+          rules: [{
+            required: true,
+            message: '请输入集群名称',
+          }],
+          attrs: {
+            placeholder: '请输入集群名称',
+            disabled: item ? true : false,
+          },
+        },
+        {
+          key: 'zookeeper',
+          label: 'zookeeper地址',
+          type: 'text_area',
+          rules: [{
+            required: true,
+            message: '请输入zookeeper地址',
+          }],
+          attrs: {
+            placeholder: '请输入zookeeper地址',
+            rows: 2,
+            disabled: item ? true : false,
+          },
+        },
+        {
+          key: 'bootstrapServers',
+          label: 'bootstrapServers',
+          type: 'text_area',
+          rules: [{
+            required: true,
+            message: '请输入bootstrapServers',
+          }],
+          attrs: {
+            placeholder: '请输入bootstrapServers',
+            rows: 2,
+            disabled: item ? true : false,
+          },
+        },
+        {
+          key: 'idc',
+          label: '数据中心',
+          defaultValue: region.regionName,
+          rules: [{ required: true, message: '请输入数据中心' }],
+          attrs: {
+            placeholder: '请输入数据中心',
+            disabled: true,
+          },
+        },
+        {
+          key: 'mode',
+          label: '集群类型',
+          type: 'select',
+          options: cluster.clusterModes.map(ele => {
+            return {
+              label: ele.message,
+              value: ele.code,
+            };
+          }),
+          rules: [{
+            required: true,
+            message: '请选择集群类型',
+          }],
+          attrs: {
+            placeholder: '请选择集群类型',
+          },
+        },
+        {
+          key: 'kafkaVersion',
+          label: 'kafka版本',
+          invisible: item ? false : true,
+          rules: [{
+            required: false,
+            message: '请输入kafka版本',
+          }],
+          attrs: {
+            placeholder: '请输入kafka版本',
+            disabled: true,
+          },
+        },
+        {
+          key: 'securityProperties',
+          label: '安全协议',
+          type: 'text_area',
+          rules: [{
+            required: false,
+            message: '请输入安全协议',
+          }],
+          attrs: {
+            placeholder: '请输入安全协议',
+            rows: 6,
+          },
+        },
+      ],
+      formData: item ? item : {},
+      visible: true,
+      width: 590,
+      title: '注册集群',
+      onSubmit: (value: IRegister) => {
+        value.idc = region.currentRegion;
+        if (item) {
+          value.clusterId = item.clusterId;
+          registerCluster(value).then(data => {
+            admin.getMetaData(true);
+            notification.success({ message: '修改集群成功' });
+          });
+        } else {
+          createCluster(value).then(data => {
+            admin.getMetaData(true);
+            notification.success({ message: '注册集群成功' });
+          });
+        }
+
+      },
+    };
+    wrapper.open(this.xFormModal);
+  }
+
+  public pauseMonitor(item: IMetaData) {
+    const info = item.status === 1 ? '暂停监控' : '开始监控';
+    const status = item.status === 1 ? 0 : 1;
+    pauseMonitoring(item.clusterId, status).then(data => {
+      admin.getMetaData(true);
+      notification.success({ message: `${info}成功` });
+    });
+  }
+
+  public showMonitor = (record: IMetaData) => {
+    admin.getBrokersRegions(record.clusterId).then((data) => {
+      confirm({
+        // tslint:disable-next-line:jsx-wrap-multiline
+        title: <>
+          <span className="offline_span">
+            删除集群&nbsp;
+          <a>
+              <Tooltip placement="right" title={'当前集群存在逻辑集群，无法申请下线'} >
+                <Icon type="question-circle" />
+              </Tooltip>
+            </a>
+          </span>
+        </>,
+        icon: 'none',
+        content: this.deleteMonitorModal(data),
+        width: 500,
+        okText: '确认',
+        cancelText: '取消',
+        onOk() {
+          if (data.length) {
+            return message.warning('存在逻辑集群，无法申请下线！');
+          }
+          admin.deleteCluster(record.clusterId).then(data => {
+            notification.success({ message: '删除成功' });
+          });
+        },
+      });
+    });
+  }
+
+  public deleteMonitorModal = (source: any) => {
+    const cellStyle = {
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis',
+      cursor: 'pointer',
+    };
+    const monitorColumns = [
+      {
+        title: '集群名称',
+        dataIndex: 'name',
+        key: 'name',
+        onCell: () => ({
+          style: {
+            maxWidth: 250,
+            ...cellStyle,
+          },
+        }),
+        render: (t: string) => {
+          return (
+            <Tooltip placement="bottomLeft" title={t} >{t}</Tooltip>
+          );
+        },
+      },
+    ];
+    return (
+      <>
+        <div className="render_offline">
+          <Table
+            rowKey="key"
+            dataSource={source}
+            columns={monitorColumns}
+            scroll={{ x: 300, y: 200 }}
+            pagination={false}
+            bordered={true}
+          />
+        </div>
+      </>
+    );
+  }
+
+  public getData<T extends IMetaData>(origin: T[]) {
+    let data: T[] = origin;
+    let { searchKey } = this.state;
+    searchKey = (searchKey + '').trim().toLowerCase();
+
+    data = searchKey ? origin.filter((item: IMetaData) =>
+      (item.clusterName !== undefined && item.clusterName !== null) && item.clusterName.toLowerCase().includes(searchKey as string),
+    ) : origin ;
+    return data;
+  }
+
+  public getColumns = () => {
+    const cols = getAdminClusterColumns();
+    const col = {
+      title: '操作',
+      render: (value: string, item: IMetaData) => (
+        <>
+          <a
+            onClick={this.createOrRegisterCluster.bind(this, item)}
+            className="action-button"
+          >修改
+          </a>
+          <Popconfirm
+            title={`确定${item.status === 1 ? '暂停' : '开始'}${item.clusterName}监控？`}
+            onConfirm={() => this.pauseMonitor(item)}
+          >
+            <a
+              className="action-button"
+            >
+              {item.status === 1 ? '暂停监控' : '开始监控'}
+            </a>
+          </Popconfirm>
+          <a onClick={this.showMonitor.bind(this, item)}>
+            删除
+          </a>
+        </>
+      ),
+    };
+    cols.push(col as any);
+    return cols;
+  }
+
+  public renderClusterList() {
+    return (
+      <>
+        <div className="container">
+          <div className="table-operation-panel">
+            <ul>
+              {this.renderSearch('', '请输入集群名称')}
+              <li className="right-btn-1">
+                <Button type="primary" onClick={this.createOrRegisterCluster.bind(this, null)}>注册集群</Button>
+              </li>
+            </ul>
+          </div>
+          <div className="table-wrapper">
+            <Table
+              rowKey="key"
+              loading={admin.loading}
+              dataSource={this.getData(admin.metaList)}
+              columns={this.getColumns()}
+              pagination={customPagination}
+            />
+          </div>
+        </div>
+      </>
+    );
+  }
+
+  public componentDidMount() {
+    admin.getMetaData(true);
+    cluster.getClusterModes();
+    admin.getDataCenter();
+  }
+
+  public render() {
+    return (
+      admin.metaList ? <> {this.renderClusterList()} </> : null
+    );
+  }
+}

kafka-manager-console/src/container/admin/config.tsx

@@ -0,0 +1,319 @@
+import * as React from 'react';
+import { IUser, IUploadFile, IConfigure, IMetaData, IBrokersPartitions } from 'types/base-type';
+import { users } from 'store/users';
+import { version } from 'store/version';
+import { showApplyModal, showModifyModal, showConfigureModal } from 'container/modal/admin';
+import { Popconfirm, Tooltip } from 'component/antd';
+import { admin } from 'store/admin';
+import { cellStyle } from 'constants/table';
+import { timeFormat } from 'constants/strategy';
+import { urlPrefix } from 'constants/left-menu';
+import moment = require('moment');
+
+export const getUserColumns = () => {
+  const columns = [
+    {
+      title: '用户名',
+      dataIndex: 'username',
+      key: 'username',
+      width: '35%',
+    },
+    {
+      title: '操作',
+      dataIndex: 'operation',
+      key: 'operation',
+      width: '30%',
+      render: (text: string, record: IUser) => {
+        return (
+          <span className="table-operation">
+            <a onClick={() => showApplyModal(record)}>修改</a>
+            <Popconfirm
+              title="确定删除？"
+              onConfirm={() => users.deleteUser(record.username)}
+            >
+              <a>删除</a>
+            </Popconfirm>
+          </span>);
+      },
+    },
+  ];
+  return columns;
+};
+
+export const getVersionColumns = () => {
+  const columns = [
+    {
+      title: 'ID',
+      dataIndex: 'id',
+      key: 'id',
+    },
+    {
+      title: '文件名称',
+      dataIndex: 'fileName',
+      key: 'fileName',
+      render: (text: string, record: IUploadFile) => {
+        return (
+          <Tooltip placement="topLeft" title={text} >
+              <a href={`${urlPrefix}/info?fileId=${record.id}`} target="_blank">{text}</a>
+          </Tooltip>);
+      },
+    }, {
+      title: 'MD5',
+      dataIndex: 'fileMd5',
+      key: 'fileMd5',
+      onCell: () => ({
+        style: {
+          maxWidth: 120,
+          ...cellStyle,
+        },
+      }),
+      render: (text: string) => {
+        return (
+          <Tooltip placement="bottomLeft" title={text} >
+              {text.substring(0, 8)}
+          </Tooltip>);
+      },
+    }, {
+      title: '更新时间',
+      dataIndex: 'gmtModify',
+      key: 'gmtModify',
+      render: (t: number) => moment(t).format(timeFormat),
+    }, {
+      title: '更新人',
+      dataIndex: 'operator',
+      key: 'operator',
+    }, {
+      title: '备注',
+      dataIndex: 'description',
+      key: 'description',
+      onCell: () => ({
+        style: {
+          maxWidth: 200,
+          ...cellStyle,
+        },
+      }),
+      render: (text: string) => {
+        return (
+          <Tooltip placement="topLeft" title={text} >
+              {text}
+          </Tooltip>);
+      },
+    }, {
+      title: '操作',
+        dataIndex: 'operation',
+        key: 'operation',
+        render: (text: string, record: IUploadFile) => {
+          return (
+            <span className="table-operation">
+              <a onClick={() => showModifyModal(record)}>修改</a>
+              <Popconfirm
+                title="确定删除？"
+                onConfirm={() => version.deleteFile(record.id)}
+              >
+                <a>删除</a>
+              </Popconfirm>
+            </span>);
+        },
+      },
+  ];
+  return columns;
+};
+
+export const getConfigureColumns = () => {
+  const columns = [
+    {
+      title: '配置键',
+      dataIndex: 'configKey',
+      key: 'configKey',
+      width: '20%',
+      sorter: (a: IConfigure, b: IConfigure) => a.configKey.charCodeAt(0) - b.configKey.charCodeAt(0),
+    },
+    {
+      title: '配置值',
+      dataIndex: 'configValue',
+      key: 'configValue',
+      width: '30%',
+      sorter: (a: IConfigure, b: IConfigure) => a.configValue.charCodeAt(0) - b.configValue.charCodeAt(0),
+      render: (t: string) => {
+        return t.substr(0, 1) === '{' && t.substr(0, -1) === '}' ? JSON.stringify(JSON.parse(t), null, 4) : t;
+      },
+    },
+    {
+      title: '修改时间',
+      dataIndex: 'gmtModify',
+      key: 'gmtModify',
+      width: '20%',
+      sorter: (a: IConfigure, b: IConfigure) => b.gmtModify - a.gmtModify,
+      render: (t: number) => moment(t).format(timeFormat),
+    },
+    {
+      title: '描述信息',
+      dataIndex: 'configDescription',
+      key: 'configDescription',
+      width: '20%',
+      onCell: () => ({
+        style: {
+          maxWidth: 180,
+          ...cellStyle,
+        },
+      }),
+    },
+    {
+      title: '操作',
+      width: '10%',
+      render: (text: string, record: IConfigure) => {
+        return (
+          <span className="table-operation">
+            <a onClick={() => showConfigureModal(record)}>修改</a>
+            <Popconfirm
+              title="确定删除？"
+              onConfirm={() => admin.deleteConfigure(record.configKey)}
+            >
+              <a>删除</a>
+            </Popconfirm>
+          </span>);
+      },
+    },
+  ];
+  return columns;
+};
+
+const  renderClusterHref = (value: number | string, item: IMetaData, key: number) => {
+  return ( // 0 暂停监控--不可点击  1 监控中---可正常点击
+    <>
+    {item.status === 1 ? <a href={`${urlPrefix}/admin/cluster-detail?clusterId=${item.clusterId}#${key}`}>{value}</a>
+      : <a style={{ cursor: 'not-allowed', color: '#999' }}>{value}</a>}
+    </>
+  );
+};
+
+export const getAdminClusterColumns = () => {
+  return [
+    {
+      title: '集群ID',
+      dataIndex: 'clusterId',
+      key: 'clusterId',
+      sorter: (a: IMetaData, b: IMetaData) => b.clusterId - a.clusterId,
+    },
+    {
+      title: '集群名称',
+      dataIndex: 'clusterName',
+      key: 'clusterName',
+      sorter: (a: IMetaData, b: IMetaData) => a.clusterName.charCodeAt(0) - b.clusterName.charCodeAt(0),
+      render: (text: string, item: IMetaData) => renderClusterHref(text, item, 1),
+    },
+    {
+      title: 'Topic数',
+      dataIndex: 'topicNum',
+      key: 'topicNum',
+      sorter: (a: any, b: IMetaData) => b.topicNum - a.topicNum,
+      render: (text: number, item: IMetaData) => renderClusterHref(text, item, 2),
+    },
+    {
+      title: 'Broker数',
+      dataIndex: 'brokerNum',
+      key: 'brokerNum',
+      sorter: (a: IMetaData, b: IMetaData) => b.brokerNum - a.brokerNum,
+      render: (text: number, item: IMetaData) => renderClusterHref(text, item, 3),
+    },
+    {
+      title: 'Consumer数',
+      dataIndex: 'consumerGroupNum',
+      key: 'consumerGroupNum',
+      sorter: (a: IMetaData, b: IMetaData) => b.consumerGroupNum - a.consumerGroupNum,
+      render: (text: number, item: IMetaData) => renderClusterHref(text, item, 4),
+    },
+    {
+      title: 'Region数',
+      dataIndex: 'regionNum',
+      key: 'regionNum',
+      sorter: (a: IMetaData, b: IMetaData) => b.regionNum - a.regionNum,
+      render: (text: number, item: IMetaData) => renderClusterHref(text, item, 5),
+    },
+    {
+      title: 'Controllerld',
+      dataIndex: 'controllerId',
+      key: 'controllerId',
+      sorter: (a: IMetaData, b: IMetaData) => b.controllerId - a.controllerId,
+      render: (text: number, item: IMetaData) => renderClusterHref(text, item, 7),
+    },
+    {
+      title: '监控中',
+      dataIndex: 'status',
+      key: 'status',
+      sorter: (a: IMetaData, b: IMetaData) => b.key - a.key,
+      render: (value: number) => value === 1 ?
+        <span className="success">是</span > : <span className="fail">否</span>,
+    },
+  ];
+};
+
+export const getPartitionInfoColumns = () => {
+  return [{
+    title: 'Topic',
+    dataIndex: 'topicName',
+    key: 'topicName',
+    width: '21%',
+    render: (val: string) => <Tooltip placement="bottomLeft" title={val}> {val} </Tooltip>,
+  }, {
+    title: 'Leader',
+    dataIndex: 'leaderPartitionList',
+    width: '20%',
+    onCell: () => ({
+      style: {
+        maxWidth: 250,
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis',
+        cursor: 'pointer',
+      },
+    }),
+    render: (value: number[]) => {
+      return (
+        <Tooltip placement="bottomLeft" title={value.join('、')}>
+          {value.map(i => <span key={i} className="p-params">{i}</span>)}
+        </Tooltip>
+      );
+    },
+  }, {
+    title: '副本',
+    dataIndex: 'followerPartitionIdList',
+    width: '22%',
+    onCell: () => ({
+      style: {
+        maxWidth: 250,
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis',
+        cursor: 'pointer',
+      },
+    }),
+    render: (value: number[]) => {
+      return (
+        <Tooltip placement="bottomLeft" title={value.join('、')}>
+          {value.map(i => <span key={i} className="p-params">{i}</span>)}
+        </Tooltip>
+      );
+    },
+  }, {
+    title: '未同步副本',
+    dataIndex: 'notUnderReplicatedPartitionIdList',
+    width: '22%',
+    onCell: () => ({
+      style: {
+        maxWidth: 250,
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis',
+        cursor: 'pointer',
+      },
+    }),
+    render: (value: number[]) => {
+      return (
+        <Tooltip placement="bottomLeft" title={value.join('、')}>
+          {value.map(i => <span key={i} className="p-params p-params-unFinished">{i}</span>)}
+        </Tooltip>
+      );
+    },
+  }];
+};

kafka-manager-console/src/container/admin/configure-management.tsx

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { SearchAndFilterContainer } from 'container/search-filter';
+import { Table, Button, Spin } from 'component/antd';
+import { admin } from 'store/admin';
+import { observer } from 'mobx-react';
+import { IConfigure } from 'types/base-type';
+import { users } from 'store/users';
+import { pagination } from 'constants/table';
+import { getConfigureColumns } from './config';
+import { showConfigureModal } from 'container/modal/admin';
+
+@observer
+export class ConfigureManagement extends SearchAndFilterContainer {
+  public state = {
+    searchKey: '',
+    filterRole: '',
+  };
+
+  public componentDidMount() {
+    admin.getConfigure();
+  }
+
+  public getData<T extends IConfigure>(origin: T[]) {
+    let data: T[] = origin;
+    let { searchKey } = this.state;
+    searchKey = (searchKey + '').trim().toLowerCase();
+
+    data = searchKey ? origin.filter((item: IConfigure) =>
+    ((item.configKey !== undefined && item.configKey !== null) && item.configKey.toLowerCase().includes(searchKey as string))
+    || ((item.configValue !== undefined && item.configValue !== null) && item.configValue.toLowerCase().includes(searchKey as string))
+    || ((item.configDescription !== undefined && item.configDescription !== null) &&
+        item.configDescription.toLowerCase().includes(searchKey as string)),
+    ) : origin ;
+    return data;
+  }
+
+  public renderTable() {
+    return (
+      <Spin spinning={users.loading}>
+        <Table
+          rowKey="key"
+          columns={getConfigureColumns()}
+          dataSource={this.getData(admin.configureList)}
+          pagination={pagination}
+        />
+      </Spin>
+
+    );
+  }
+
+  public renderOperationPanel() {
+    return (
+      <ul>
+        {this.renderSearch('', '请输入配置键、值或描述')}
+        <li className="right-btn-1">
+          <Button type="primary" onClick={() => showConfigureModal()}>增加配置</Button>
+        </li>
+      </ul>
+    );
+  }
+
+  public render() {
+    return (
+      <div className="container">
+        <div className="table-operation-panel">
+          {this.renderOperationPanel()}
+        </div>
+        <div className="table-wrapper">
+          {this.renderTable()}
+        </div>
+      </div>
+    );
+  }
+}

kafka-manager-console/src/container/admin/data-curve/config.ts

@@ -0,0 +1,210 @@
+import { EChartOption } from 'echarts/lib/echarts';
+import moment from 'moment';
+import { ICurve } from 'container/common-curve/config';
+import { adminMonitor } from 'store/admin-monitor';
+import { parseBrokerMetricOption } from './parser';
+
+export interface IPeriod {
+  label: string;
+  key: string;
+  dateRange: [moment.Moment, moment.Moment];
+}
+
+export const getMoment = () => {
+  return moment();
+};
+export const baseColors = ['#F28E61', '#7082A6', '#5AD2A2', '#E96A72', '#59AEE9', '#65A8BF', '#9D7ECF'];
+
+export enum curveKeys {
+  'byteIn/byteOut' = 'byteIn/byteOut',
+  bytesRejectedPerSec = 'bytesRejectedPerSec',
+  failFetchRequestPerSec = 'failFetchRequestPerSec',
+  failProduceRequestPerSec = 'failProduceRequestPerSec',
+  fetchConsumerRequestPerSec = 'fetchConsumerRequestPerSec',
+  healthScore = 'healthScore',
+  messagesInPerSec = 'messagesInPerSec',
+  networkProcessorIdlPercent = 'networkProcessorIdlPercent',
+  produceRequestPerSec = 'produceRequestPerSec',
+  requestHandlerIdlPercent = 'requestHandlerIdlPercent',
+  requestQueueSize = 'requestQueueSize',
+  responseQueueSize = 'responseQueueSize',
+  totalTimeFetchConsumer99Th = 'totalTimeFetchConsumer99Th',
+  totalTimeProduce99Th = 'totalTimeProduce99Th',
+}
+
+export const byteCurves: ICurve[] = [
+  {
+    title: 'byteIn/byteOut',
+    path: curveKeys['byteIn/byteOut'],
+    api: adminMonitor.getBrokersChartsData,
+    colors: baseColors,
+  }, {
+    title: 'bytesRejectedPerSec',
+    path: curveKeys.bytesRejectedPerSec,
+    api: adminMonitor.getBrokersChartsData,
+    colors: ['#E96A72'],
+  },
+];
+
+export const perSecCurves: ICurve[] = [
+  {
+    title: 'failFetchRequestPerSec',
+    path: curveKeys.failFetchRequestPerSec,
+    api: adminMonitor.getBrokersChartsData,
+    colors: baseColors,
+  }, {
+    title: 'failProduceRequestPerSec',
+    path: curveKeys.failProduceRequestPerSec,
+    api: adminMonitor.getBrokersChartsData,
+    colors: baseColors,
+  }, {
+    title: 'fetchConsumerRequestPerSec',
+    path: curveKeys.fetchConsumerRequestPerSec,
+    api: adminMonitor.getBrokersChartsData,
+    colors: baseColors,
+  }, {
+    title: 'produceRequestPerSec',
+    path: curveKeys.produceRequestPerSec,
+    api: adminMonitor.getBrokersChartsData,
+    colors: baseColors,
+  },
+];
+
+export const otherCurves: ICurve[] = [
+  {
+    title: 'healthScore',
+    path: curveKeys.healthScore,
+    api: adminMonitor.getBrokersChartsData,
+    colors: baseColors,
+  }, {
+    title: 'messagesInPerSec',
+    path: curveKeys.messagesInPerSec,
+    api: adminMonitor.getBrokersChartsData,
+    colors: baseColors,
+  }, {
+    title: 'networkProcessorIdlPercent',
+    path: curveKeys.networkProcessorIdlPercent,
+    api: adminMonitor.getBrokersChartsData,
+    colors: baseColors,
+  }, {
+    title: 'requestHandlerIdlPercent',
+    path: curveKeys.requestHandlerIdlPercent,
+    api: adminMonitor.getBrokersChartsData,
+    colors: baseColors,
+  }, {
+    title: 'requestQueueSize',
+    path: curveKeys.requestQueueSize,
+    api: adminMonitor.getBrokersChartsData,
+    colors: baseColors,
+  }, {
+    title: 'responseQueueSize',
+    path: curveKeys.responseQueueSize,
+    api: adminMonitor.getBrokersChartsData,
+    colors: baseColors,
+  }, {
+    title: 'totalTimeFetchConsumer99Th',
+    path: curveKeys.totalTimeFetchConsumer99Th,
+    api: adminMonitor.getBrokersChartsData,
+    colors: baseColors,
+  }, {
+    title: 'totalTimeProduce99Th',
+    path: curveKeys.totalTimeProduce99Th,
+    api: adminMonitor.getBrokersChartsData,
+    colors: baseColors,
+  },
+];
+
+export enum curveType {
+  byteCurves = 'byteCurves',
+  perSecCurves = 'perSecCurves',
+  other = 'other',
+}
+
+export interface ICurveType {
+  type: curveType;
+  title: string;
+  curves: ICurve[];
+  parser: (option: ICurve, data: any[]) => EChartOption;
+}
+
+export const byteTypeCurves: ICurveType[] = [
+  {
+    type: curveType.byteCurves,
+    title: 'byte',
+    curves: byteCurves.concat(perSecCurves, otherCurves),
+    parser: parseBrokerMetricOption,
+  },
+];
+export const perSecTypeCurves: ICurveType[] = [
+  {
+    type: curveType.perSecCurves,
+    title: 'perSec',
+    curves: perSecCurves,
+    parser: parseBrokerMetricOption,
+  },
+];
+export const otherTypeCurves: ICurveType[] = [
+  {
+    type: curveType.other,
+    title: 'other',
+    curves: otherCurves,
+    parser: parseBrokerMetricOption,
+  },
+];
+
+export const allCurves: ICurveType[] = [].concat(byteTypeCurves);
+
+const curveKeyMap = new Map<string, {typeInfo: ICurveType, curveInfo: ICurve}>();
+allCurves.forEach(t => {
+  t.curves.forEach(c => {
+    curveKeyMap.set(c.path, {
+      typeInfo: t,
+      curveInfo: c,
+    });
+  });
+});
+export const CURVE_KEY_MAP = curveKeyMap;
+
+export const PERIOD_RADIO = [
+  {
+    label: '10分钟',
+    key: 'tenMin',
+    get dateRange() {
+      return [getMoment().subtract(10, 'minute'), getMoment()];
+    },
+  },
+  {
+    label: '1小时',
+    key: 'oneHour',
+    get dateRange() {
+      return [getMoment().subtract(1, 'hour'), getMoment()];
+    },
+  },
+  {
+    label: '6小时',
+    key: 'sixHour',
+    get dateRange() {
+      return [getMoment().subtract(6, 'hour'), getMoment()];
+    },
+  },
+  {
+    label: '近1天',
+    key: 'oneDay',
+    get dateRange() {
+      return [getMoment().subtract(1, 'day'), getMoment()];
+    },
+  },
+  {
+    label: '近1周',
+    key: 'oneWeek',
+    get dateRange() {
+      return [getMoment().subtract(7, 'day'), getMoment()];
+    },
+  },
+] as IPeriod[];
+
+const periodRadioMap = new Map<string, IPeriod>();
+PERIOD_RADIO.forEach(p => {
+  periodRadioMap.set(p.key, p);
+});
+export const PERIOD_RADIO_MAP = periodRadioMap;

kafka-manager-console/src/container/admin/data-curve/index.less

@@ -0,0 +1,14 @@
+.curve-wrapper {
+  background-color: #fff;
+  padding: 24px;
+  position: relative;
+}
+.right-btn {
+  position: absolute;
+  right: 24px;
+  top: 24px;
+}
+.operator-select {
+  position: absolute;
+  top: 34px;
+}

kafka-manager-console/src/container/admin/data-curve/index.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import './index.less';
+import { Radio, DatePicker, RadioChangeEvent, RangePickerValue, Button, Icon } from 'component/antd';
+import { curveInfo } from 'store/curve-info';
+import { curveKeys, CURVE_KEY_MAP, PERIOD_RADIO_MAP, PERIOD_RADIO } from './config';
+import moment = require('moment');
+import { observer } from 'mobx-react';
+import { timeStampStr } from 'constants/strategy';
+
+@observer
+export class DataCurveFilter extends React.Component {
+  public handleRangeChange = (dates: RangePickerValue, dateStrings: [string, string]) => {
+    curveInfo.setTimeRange(dates as [moment.Moment, moment.Moment]);
+    this.refreshAll();
+  }
+
+  public radioChange = (e: RadioChangeEvent) => {
+    const { value } = e.target;
+    curveInfo.setTimeRange(PERIOD_RADIO_MAP.get(value).dateRange);
+    this.refreshAll();
+  }
+
+  public refreshAll = () => {
+    Object.keys(curveKeys).forEach((c: curveKeys) => {
+      const { typeInfo, curveInfo: option } = CURVE_KEY_MAP.get(c);
+      const { parser } = typeInfo;
+      curveInfo.getCommonCurveData(option, parser, true);
+    });
+  }
+
+  public render() {
+    return (
+      <>
+        <Radio.Group onChange={this.radioChange} defaultValue={curveInfo.periodKey}>
+        {PERIOD_RADIO.map(p => <Radio.Button key={p.key} value={p.key}>{p.label}</Radio.Button>)}
+        </Radio.Group>
+        <DatePicker.RangePicker
+          format={timeStampStr}
+          onChange={this.handleRangeChange}
+          className="ml-10"
+          value={curveInfo.timeRange}
+        />
+        <div className="right-btn">
+          <Button onClick={this.refreshAll}><Icon className="dsui-icon-shuaxin1 mr-4" type="reload" />刷新</Button>
+        </div>
+      </>
+    );
+  }
+}

kafka-manager-console/src/container/admin/data-curve/parser.ts

@@ -0,0 +1,147 @@
+import moment from 'moment';
+import { EChartOption } from 'echarts';
+import { ICurve, ILineData, baseLineLegend, baseLineGrid, baseAxisStyle, noAxis, UNIT_HEIGHT } from 'container/common-curve/config';
+import { IClusterMetrics, ISeriesOption } from 'types/base-type';
+import { timeFormat } from 'constants/strategy';
+import { getFilterSeries } from 'lib/chart-utils';
+import { dealFlowData } from 'lib/chart-utils';
+
+export const getBaseOptions = (option: ICurve, data: ILineData[]) => {
+  const date = (data || []).map(i => moment(i.timeStamp).format(timeFormat));
+
+  return {
+    animationDuration: 200,
+    tooltip: {
+      trigger: 'axis',
+    },
+    toolbox: {
+      feature: {
+        saveAsImage: {},
+      },
+    },
+    legend: {
+      ...baseLineLegend,
+      bottom: '0',
+      align: 'auto',
+    },
+    grid: {
+      ...baseLineGrid,
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: date,
+      ...baseAxisStyle,
+    },
+    yAxis: {
+      type: 'value',
+      ...baseAxisStyle,
+      ...noAxis,
+      name: option.unit || '',
+      nameTextStyle: {
+        lineHeight: UNIT_HEIGHT,
+      },
+    },
+    series: [{
+      type: 'line',
+      data: data.map(i => {
+        return Number(i.value);
+      }),
+    }],
+  } as EChartOption;
+};
+
+export const parseLine = (option: ICurve, data: ILineData[]): EChartOption => {
+  return Object.assign({}, getBaseOptions(option, data), {
+    legend: {
+      ...baseLineLegend,
+      bottom: '0',
+      align: 'auto',
+    },
+  }) as EChartOption;
+};
+
+export const parseBrokerMetricOption = (option: ICurve, data: IClusterMetrics[]): EChartOption => {
+  let name;
+  let series: ISeriesOption[];
+  data = data || [];
+  data = data.map(item => {
+    return {
+      time: moment(item.gmtCreate).format(timeFormat),
+      ...item,
+    };
+  });
+  data = data.sort((a, b) => a.gmtCreate - b.gmtCreate);
+  const legend = option.path === 'byteIn/byteOut' ? ['bytesInPerSec', 'bytesOutPerSec'] : [option.path];
+  series = Array.from(legend, (item: string) => ({
+    name: item,
+    id: item,
+    type: 'line',
+    symbol: 'circle',
+    showSymbol: false,
+    smooth: true,
+    encode: {
+      x: 'time',
+      y: item,
+      tooltip: [
+        item,
+      ],
+    },
+    data: data.map(row => row[item] !== null ? Number(row[item]) : null),
+  }));
+
+  const filterSeries = getFilterSeries(series);
+  const { name: unitName, data: xData } = dealFlowData(legend, data);
+  name = unitName;
+  data = xData;
+
+  return {
+    animationDuration: 200,
+    tooltip: {
+      trigger: 'axis',
+    },
+    toolbox: {
+      feature: {
+        saveAsImage: {},
+      },
+    },
+    grid: {
+      ...baseLineGrid,
+    },
+    xAxis: {
+      splitLine: null,
+      type: 'time',
+    },
+    yAxis: {
+      type: 'value',
+      ...baseAxisStyle,
+      ...noAxis,
+      name,
+      nameTextStyle: {
+        lineHeight: UNIT_HEIGHT,
+      },
+    },
+    legend: {
+      data: legend,
+      ...baseLineLegend,
+      bottom: '0',
+      align: 'auto',
+    },
+    dataset: {
+      source: data,
+    },
+    series: filterSeries,
+  };
+};
+
+export function isM(arr: number[]) {
+  const filterData = arr.filter(i => i !== 0);
+  if (filterData.length) return filterData.reduce((cur, pre) => cur + pre) / filterData.length >= 1000000;
+  return false;
+}
+
+export function isK(arr: number[]) {
+  const filterData = arr.filter(i => i !== 0);
+  if (filterData.length) return filterData.reduce((cur, pre) => cur + pre) / filterData.length >= 1000;
+  return false;
+}

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

@@ -0,0 +1,13 @@
+export * from './cluster-list';
+export * from './cluster-detail';
+export * from './broker-detail';
+export * from './user-management';
+export * from './version-management';
+export * from './operation-management';
+export * from './operation-detail';
+export * from './bill-management';
+export * from './admin-app-list';
+export * from './operation-management/migration-detail';
+export * from './configure-management';
+export * from './individual-bill';
+export * from './bill-detail';

kafka-manager-console/src/container/admin/individual-bill.tsx

@@ -0,0 +1,159 @@
+import * as React from 'react';
+import { Table, Tabs, DatePicker, notification, Icon } from 'component/antd';
+import { pagination } from 'constants/table';
+import moment, { Moment } from 'moment';
+import { BarChartComponet } from 'component/chart';
+import { observer } from 'mobx-react';
+import { getBillListColumns } from '../user-center/config';
+import { urlPrefix } from 'constants/left-menu';
+import { timeMonthStr } from 'constants/strategy';
+import { users } from 'store/users';
+import { admin } from 'store/admin';
+import * as XLSX from 'xlsx';
+
+const { TabPane } = Tabs;
+const { RangePicker } = DatePicker;
+
+@observer
+export class IndividualBill extends React.Component {
+  public username: string;
+
+  public state = {
+    mode: ['month', 'month'] as any,
+    value: [moment(new Date()).subtract(6, 'months'), moment()] as any,
+  };
+
+  private startTime: number = moment(new Date()).subtract(6, 'months').valueOf();
+  private endTime: number = moment().valueOf();
+  private chart: any = null;
+
+  public getData() {
+    const { startTime, endTime } = this;
+    return admin.getBillStaffList(this.username, startTime, endTime);
+  }
+
+  public handleDownLoad() {
+    const tableData = admin.billStaff.map(item => {
+      return {
+        // tslint:disable
+        '月份': item.gmtMonth,
+        'Topic数量': item.topicNum,
+        'quota数量': item.quota,
+        '金额': item.cost,
+      };
+    });
+    const data = [].concat(tableData);
+    const wb = XLSX.utils.book_new();
+    // json转sheet
+    const ws = XLSX.utils.json_to_sheet(data, {
+      header: ['月份', 'Topic数量', 'quota数量', '金额'],
+    });
+    // XLSX.utils.
+    XLSX.utils.book_append_sheet(wb, ws, 'bill');
+    // 输出
+    XLSX.writeFile(wb, 'bill' + '.xlsx');
+  }
+
+  public disabledDateTime = (current: Moment) => {
+    return current && current > moment().endOf('day');
+  }
+
+  public handleChartSearch = (date: moment.Moment[]) => {
+    this.setState({
+      value: date,
+      mode: ['month', 'month'] as any,
+    });
+
+    this.startTime = date[0].valueOf();
+    this.endTime = date[1].valueOf();
+
+    if (this.startTime >= this.endTime) {
+      return notification.error({ message: '开始时间不能大于或等于结束时间' });
+    }
+    this.getData();
+    this.handleRefreshChart();
+  }
+
+  public handleRefreshChart = () => {
+    this.chart.handleRefreshChart();
+  }
+
+  public renderTableList() {
+    const adminUrl=`${urlPrefix}/admin/bill-detail`
+    return (
+      <Table
+        rowKey="key"
+        columns={getBillListColumns(adminUrl)}
+        dataSource={admin.billStaff}
+        pagination={pagination}
+      />
+    );
+  }
+  
+  public renderChart() {
+    return (
+      <div className="chart-box">
+        <BarChartComponet ref={(ref) => this.chart = ref } getChartData={this.getData.bind(this, null)} />
+      </div>
+    );
+  }
+
+  public renderDatePick() {
+    const { value, mode } = this.state;
+
+    return (
+      <>
+        <div className="op-panel">
+          <span>
+            <RangePicker
+              ranges={{
+                近半年: [moment(new Date()).subtract(6, 'months'), moment()],
+                近一年: [moment().startOf('year'), moment().endOf('year')],
+              }}
+              defaultValue={[moment(new Date()).subtract(6, 'months'), moment()]}
+              value={value}
+              mode={mode}
+              format={timeMonthStr}
+              onChange={this.handleChartSearch}
+              onPanelChange={this.handleChartSearch}
+            />
+          </span>
+          <span>
+            <Icon type="download" onClick={this.handleDownLoad.bind(this, null)} />
+          </span>
+        </div>
+      </>
+    );
+  }
+
+  public render() {
+    this.username = users.currentUser.username;
+    return (
+      <>
+        <div className="container">
+          <Tabs defaultActiveKey="1" type="card">
+            <TabPane 
+              tab={<>
+                <span>账单趋势</span>&nbsp;
+                <a
+                  // tslint:disable-next-line:max-line-length
+                  href="https://github.com/didi/kafka-manager"
+                  target="_blank"
+                >
+                  <Icon type="question-circle" />
+                </a>
+              </>}  
+              key="1"
+            >
+              {this.renderDatePick()}
+              {this.username ? this.renderChart() : null}
+            </TabPane>
+          </Tabs>
+          <div className="table-content">
+            {this.renderTableList()}
+          </div>
+        </div>
+      </>
+    );
+  }
+}

kafka-manager-console/src/container/admin/operation-detail/essential-info.tsx

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import { ILabelValue, ITasksMetaData } from 'types/base-type';
+import { Descriptions } from 'antd';
+import { observer } from 'mobx-react';
+import { timeFormat } from 'constants/strategy';
+import { urlPrefix } from 'constants/left-menu';
+import { Table } from 'component/antd';
+import { pagination } from 'constants/table';
+import moment from 'moment';
+
+interface IEassProps {
+  tasksMetaData?: ITasksMetaData;
+}
+
+@observer
+export class EassentialInfo extends React.Component<IEassProps> {
+  public render() {
+    const { tasksMetaData } = this.props;
+    let tasks = {} as ITasksMetaData;
+    tasks = tasksMetaData ? tasksMetaData : tasks;
+    const gmtCreate = moment(tasks.gmtCreate).format(timeFormat);
+    const options = [{
+      value: tasks.taskId,
+      label: '任务ID',
+    }, {
+      value: tasks.clusterId,
+      label: '集群ID',
+    }, {
+      value: tasks.clusterName,
+      label: '集群名称',
+    }, {
+      value: gmtCreate,
+      label: '创建时间',
+    }, {
+      value: tasks.kafkaPackageName,
+      label: 'kafka包',
+    }, {
+      value: tasks.kafkaPackageMd5,
+      label: 'kafka包 MD5',
+    }, {
+      value: tasks.operator,
+      label: '操作人',
+    }];
+    const optionsHost = [{
+      value: tasks.hostList,
+      label: '升级主机列表',
+    }, {
+      value: tasks.pauseHostList,
+      label: '升级的主机暂停点',
+    }];
+    return(
+      <>
+      <Descriptions column={3}>
+        {options.map((item: ILabelValue, index) => (
+          <Descriptions.Item key={item.label || index} label={item.label}>{item.value}</Descriptions.Item>
+        ))}
+        <Descriptions.Item key="server" label="server配置名">
+          <a href={`${urlPrefix}/info?fileId=${tasks.serverPropertiesFileId || ''}`} target="_blank">{tasks.serverPropertiesName}</a>
+        </Descriptions.Item>
+        <Descriptions.Item key="server" label="server配置 MD5">{tasks.serverPropertiesMd5}</Descriptions.Item>
+      </Descriptions>
+      <Descriptions column={1}>
+        {optionsHost.map((item: any, index) => (
+          <Descriptions.Item key={item.label || index} label="">
+            <Table
+              columns={[{
+                title: item.label,
+                dataIndex: '',
+                key: '',
+              }]}
+              dataSource={item.value}
+              pagination={pagination}
+              rowKey="key"
+            />
+          </Descriptions.Item>
+        ))}
+      </Descriptions>
+      </>
+    );
+  }
+
+}

kafka-manager-console/src/container/admin/operation-detail/index.less

@@ -0,0 +1,26 @@
+.task-status li{
+  margin-left: -10px;
+  font-size: 12px;
+  font-weight: 100;
+}
+
+.complete{
+  color: #76a8ca;
+}
+
+.executing {
+  color: #66c84c;
+}
+
+.pending {
+  color: #de9845;
+}
+
+.modal-body{
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.btn-position{
+  margin-right: 10px;
+}

kafka-manager-console/src/container/admin/operation-detail/index.tsx

@@ -0,0 +1,128 @@
+import * as React from 'react';
+import { observer } from 'mobx-react';
+import { Tabs, PageHeader, Button, notification, Popconfirm, Spin } from 'antd';
+import { handleTabKey } from 'lib/utils';
+import { EassentialInfo } from './essential-info';
+import { TaskStatusDetails } from './taskStatus-details';
+import { ITasksMetaData, ITrigger } from 'types/base-type';
+import { triggerClusterTask } from 'lib/api';
+import { handlePageBack } from 'lib/utils';
+import { admin } from 'store/admin';
+import Url from 'lib/url-parser';
+import './index.less';
+
+const { TabPane } = Tabs;
+let showStatus: boolean = false;
+let showContinue: boolean = false;
+
+@observer
+export class OperationDetail extends React.Component {
+  public taskId: number;
+  public taskName: string;
+
+  public state = {
+    showContinue: false,
+  };
+
+  constructor(props: any) {
+    super(props);
+    const url = Url();
+    this.taskId = Number(url.search.taskId);
+  }
+
+  public bindClick() {
+    const type = showContinue ? 'start' : 'pause';
+    const params = {
+      taskId: this.taskId,
+      action: type,
+      hostname: '',
+    } as ITrigger;
+    triggerClusterTask(params).then(data => {
+      admin.getSubtasksStatus(this.taskId);
+      notification.success({ message: `${showContinue ? '继续部署' : '暂停'}成功！` });
+    });
+  }
+
+  public callBackOrCancel(type: string) {
+    const params = {
+      taskId: this.taskId,
+      action: type,
+      hostname: '',
+    } as ITrigger;
+    triggerClusterTask(params).then(data => {
+      admin.getSubtasksStatus(this.taskId);
+      notification.success({ message: `${type === 'rollback' ? '回滚任务' : '取消'}成功` });
+    });
+  }
+  public handleVal(value: number) {
+    showStatus = (value + '').includes('100') ? true : false;
+  }
+
+  public componentDidMount() {
+    admin.getTasksMetadata(this.taskId);
+    admin.getSubtasksStatus(this.taskId);
+  }
+
+  public render() {
+    // 任务状态: 30:运行中(展示暂停), 40:暂停(展示开始), 100:完成(都置灰)
+    showStatus = admin.taskStatusDetails && admin.taskStatusDetails.status === 100 ? true : false;
+    showContinue = admin.taskStatusDetails && admin.taskStatusDetails.status === 40 ? true : false;
+    const showRollBack = admin.taskStatusDetails && admin.taskStatusDetails.rollback;
+    let tasks = {} as ITasksMetaData;
+    tasks = admin.tasksMetaData ? admin.tasksMetaData : tasks;
+    return (
+      <>
+      <Spin spinning={admin.loading}>
+      <PageHeader
+        className="detail hotspot-header"
+        onBack={() => handlePageBack('/admin/operation#1')}
+        title={`任务名称${tasks.taskName ? '/' + tasks.taskName : ''}`}
+        extra={[
+          <Button key="1" type="primary" disabled={showStatus} >
+            <Popconfirm
+              title={`确定${showContinue ? '开始' : '暂停'}？`}
+              onConfirm={() => this.bindClick()}
+            >
+              <a>{showContinue ? '开始' : '暂停'}</a>
+            </Popconfirm>
+          </Button>,
+          <Button
+            key="2"
+            type="primary"
+            disabled={showRollBack || showStatus}
+          >
+            <Popconfirm
+              title={`确定回滚？`}
+              onConfirm={() => this.callBackOrCancel('rollback')}
+            >
+              <a>回滚</a>
+            </Popconfirm>
+          </Button>,
+          <Button
+            key="3"
+            type="primary"
+            disabled={showStatus}
+          >
+            <Popconfirm
+              title={`确定回滚？`}
+              onConfirm={() => this.callBackOrCancel('cancel')}
+            >
+              <a>取消</a>
+            </Popconfirm>
+          </Button>,
+        ]}
+      >
+      <Tabs activeKey={location.hash.substr(1) || '1'} type="card" onChange={handleTabKey}>
+        <TabPane tab="基本信息" key="1">
+          <EassentialInfo tasksMetaData={tasks} />
+        </TabPane>
+        <TabPane tab="任务状态详情" key="2">
+          <TaskStatusDetails handleVal={(value: number) => this.handleVal(value)} />
+        </TabPane>
+      </Tabs>
+      </PageHeader>
+      </Spin>
+      </>
+    );
+  }
+}

kafka-manager-console/src/container/admin/operation-detail/taskStatus-details.tsx

@@ -0,0 +1,211 @@
+import * as React from 'react';
+import { SearchAndFilterContainer } from 'container/search-filter';
+import { pagination } from 'constants/table';
+import { admin } from 'store/admin';
+import { Table, Popconfirm, notification } from 'component/antd';
+import { IEnumsMap, ITaskStatusDetails, ISubtasksStatus, ITrigger, IXFormWrapper } from 'types/base-type';
+import { tableFilter } from 'lib/utils';
+import { triggerClusterTask } from 'lib/api';
+import { wrapper } from 'store';
+import { observer } from 'mobx-react';
+import Url from 'lib/url-parser';
+import './index.less';
+
+let taskStatus = [] as IEnumsMap[];
+let task = {} as ITaskStatusDetails;
+let subTaskStatusList = [] as ISubtasksStatus[];
+let statusNum: number;
+
+@observer
+export class TaskStatusDetails extends SearchAndFilterContainer {
+  public taskId: number;
+  public timer = null as any;
+
+  public state = {
+    searchKey: '',
+    filterGroupVisible: false,
+    filterStatusVisible: false,
+  };
+
+  private xFormWrapper: IXFormWrapper;
+
+  constructor(props: any) {
+    super(props);
+    const url = Url();
+    this.taskId = Number(url.search.taskId);
+  }
+
+  public renderDataMigrationTasks(subTaskStatusList: ISubtasksStatus[]) {
+    const groupId = Object.assign({
+      title: '分组ID',
+      dataIndex: 'groupId',
+      key: 'groupId',
+      width: '20%',
+      filters: tableFilter<any>(subTaskStatusList, 'groupId'),
+      onFilter: (value: number, record: ISubtasksStatus) => record.groupId === value,
+    }, this.renderColumnsFilter('filterGroupVisible'));
+    const status = Object.assign({
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      width: '20%',
+      filters: taskStatus.map(ele => ({ text: ele.message, value: ele.code + '' })),
+      onFilter: (value: number, record: ISubtasksStatus) => record.status === +value,
+      render: (t: number) => {
+        let messgae: string;
+        taskStatus.map(ele => {
+          if (ele.code === t) {
+            messgae = ele.message;
+          }
+        });
+        return(
+          <span className={t === 102 ? 'fail' : t === 101 ? 'succee' : ''}>{messgae}</span>
+        );
+      },
+    }, this.renderColumnsFilter('filterStatusVisible'));
+    const columns = [{
+      title: '主机名',
+      dataIndex: 'hostname',
+      key: 'hostname',
+      width: '20%',
+      sorter: (a: ISubtasksStatus, b: ISubtasksStatus) => a.hostname.charCodeAt(0) - b.hostname.charCodeAt(0),
+    }, {
+      title: '机器角色',
+      dataIndex: 'kafkaRoles',
+      key: 'kafkaRoles',
+      width: '20%',
+    },
+    groupId,
+    status,
+    {
+      title: '操作',
+      width: '20%',
+      render: (value: any, record: ISubtasksStatus) => {
+        return (
+          <>
+          <span className="btn-position">
+          <Popconfirm
+            title={`确定忽略？`}
+            onConfirm={() => this.bindClick(record, 'ignore')}
+          >
+            <a>忽略</a>
+          </Popconfirm>
+          </span>
+          <a onClick={() => this.handleViewLog(record)}>查看日志</a>
+          </>
+        );
+      },
+    },
+    ];
+    return (
+      <>
+        <Table
+          columns={columns}
+          dataSource={subTaskStatusList}
+          pagination={pagination}
+          rowKey="hostname"
+        />
+      </>
+    );
+  }
+
+  public handleViewLog = async (record: ISubtasksStatus) => {
+    await admin.getClusterTaskLog(this.taskId, record.hostname);
+    this.xFormWrapper = {
+      type: 'drawer',
+      visible: true,
+      width: 600,
+      title: '查看日志',
+      customRenderElement: this.showLog(),
+      nofooter: true,
+      noform: true,
+      onSubmit: (value: any) => {
+        // TODO:
+      },
+    };
+    await wrapper.open(this.xFormWrapper);
+  }
+
+  public showLog() {
+    return (
+      <>
+        <div className="config-info">
+          {admin.clusterTaskLog}
+        </div>
+      </>
+    );
+  }
+
+  public bindClick(record: ISubtasksStatus, type: string) {
+    const params = {
+      taskId: this.taskId,
+      action: type,
+      hostname: record.hostname,
+    } as ITrigger;
+    triggerClusterTask(params).then(data => {
+      admin.getSubtasksStatus(this.taskId);
+      notification.success({ message: `${type === 'cancel' ? '取消' : '忽略'}成功！` });
+    });
+  }
+
+  public iTimer = () => {
+    this.timer = setInterval(() => {
+      admin.getSubtasksStatus(this.taskId);
+    }, 3 * 1 * 1000);
+  }
+
+  public componentDidMount() {
+    setTimeout(this.iTimer, 0);
+    admin.getConfigsTaskStatus();
+  }
+
+  public componentWillUnmount() {
+    clearInterval(this.timer);
+  }
+
+  public getData<T extends ISubtasksStatus>(origin: T[]) {
+    let data: T[] = origin;
+    let { searchKey } = this.state;
+    searchKey = (searchKey + '').trim().toLowerCase();
+
+    data = searchKey ? origin.filter((item: ISubtasksStatus) =>
+      (item.hostname !== undefined && item.hostname !== null) && item.hostname.toLowerCase().includes(searchKey as string),
+    ) : origin ;
+    return data;
+  }
+
+  public render() {
+    let message = '';
+    if (admin.taskStatusDetails) {
+      task = admin.taskStatusDetails;
+      subTaskStatusList = admin.taskStatusDetails.subTaskStatusList;
+      statusNum = admin.taskStatusDetails.status;
+      this.props.handleVal(statusNum);
+    }
+    taskStatus = admin.configsTaskStatus ? admin.configsTaskStatus : [] as IEnumsMap[];
+    taskStatus.forEach(ele => {
+      if (ele.code === task.status) {
+        message = ele.message;
+      }
+    });
+    return(
+      <>
+       <div className="k-row" >
+          <ul className="k-tab task-status">
+            <li>
+              状态：<span className="complete">{message}</span>
+              ｜ 总数：<span className="complete">{task.sumCount}</span>
+              ｜ 成功：<span className="success">{task.successCount}</span>
+              ｜ 失败：<span className="fail">{task.failedCount}</span>
+              ｜ 执行中：<span className="executing">{task.runningCount}</span>
+              ｜ 待执行：<span className="pending">{task.waitingCount}</span>
+            </li>
+            {this.renderSearch('', '请输入主机名')}
+          </ul>
+          {this.renderDataMigrationTasks(this.getData(subTaskStatusList))}
+        </div>
+      </>
+    );
+  }
+
+}

kafka-manager-console/src/container/admin/operation-management/cluster-task.tsx

@@ -0,0 +1,172 @@
+import * as React from 'react';
+
+import { Table, Tabs, Button } from 'component/antd';
+import { observer } from 'mobx-react';
+import { ITaskManage, IEnumsMap, ITasksEnums } from 'types/base-type';
+import { SearchAndFilterContainer } from 'container/search-filter';
+import { tableFilter } from 'lib/utils';
+import { pagination } from 'constants/table';
+import { addMigrationTask } from 'container/modal';
+import { admin } from 'store/admin';
+import moment from 'moment';
+import './index.less';
+import { timeFormat } from 'constants/strategy';
+import { region } from 'store';
+
+@observer
+export class ClusterTask extends SearchAndFilterContainer {
+  public state = {
+    searchKey: '',
+    filterClusterVisible: false,
+    filterStatusVisible: false,
+    filterTaskVisible: false,
+  };
+
+  public renderColumns = (data: ITaskManage[]) => {
+    const taskStatus = admin.configsTaskStatus ? admin.configsTaskStatus : [] as IEnumsMap[];
+    const cluster = Object.assign({
+      title: '集群名称',
+      dataIndex: 'clusterName',
+      key: 'clusterName',
+      width: '15%',
+      filters: tableFilter<any>(data, 'clusterName'),
+      onFilter: (value: string, record: ITaskManage) => record.clusterName.indexOf(value) === 0,
+    }, this.renderColumnsFilter('filterClusterVisible'));
+
+    const status = Object.assign({
+      title: '任务状态',
+      dataIndex: 'status',
+      key: 'status',
+      width: '15%',
+      filters: taskStatus.map(ele => ({ text: ele.message, value: ele.code + '' })),
+      onFilter: (value: number, record: ITaskManage) => record.status === +value,
+      render: (t: number) => {
+        let messgae: string;
+        taskStatus.map(ele => {
+          if (ele.code === t) {
+            messgae = ele.message;
+          }
+        });
+        return (
+          <span>{messgae}</span>
+        );
+      },
+    }, this.renderColumnsFilter('filterStatusVisible'));
+
+    const taskType = Object.assign({
+      title: '任务类型',
+      dataIndex: 'taskType',
+      key: 'taskType',
+      width: '15%',
+      filters: admin.tasksEnums && admin.tasksEnums.map(ele => ({ text: ele.message, value: ele.name })),
+      onFilter: (value: string, record: ITaskManage) => record.taskType === value,
+      render: (text: string) => {
+        const task = admin.tasksEnums && admin.tasksEnums.filter(ele => ele.name === text);
+        return (<>{task && task[0].message}</>);
+      },
+    }, this.renderColumnsFilter('filterTaskVisible'));
+
+    return [
+      {
+        title: '任务ID',
+        dataIndex: 'taskId',
+        key: 'taskId',
+        width: '15%',
+        sorter: (a: ITaskManage, b: ITaskManage) => b.taskId - a.taskId,
+      },
+      taskType,
+      cluster,
+      {
+        title: '创建时间',
+        dataIndex: 'gmtCreate',
+        key: 'gmtCreate',
+        width: '15%',
+        sorter: (a: ITaskManage, b: ITaskManage) => b.gmtCreate - a.gmtCreate,
+        render: (t: number) => moment(t).format(timeFormat),
+      },
+      {
+        title: '操作人',
+        dataIndex: 'operator',
+        key: 'operator',
+        width: '15%',
+        sorter: (a: ITaskManage, b: ITaskManage) => a.operator.charCodeAt(0) - b.operator.charCodeAt(0),
+      },
+      status,
+      {
+        title: '操作',
+        dataIndex: 'operation',
+        key: 'operation',
+        width: '10%',
+        render: (text: string, record: ITaskManage) => {
+          return (
+            <span className="table-operation">
+              <a href={`${this.urlPrefix}/admin/operation-detail?taskId=${record.taskId}&region=${region.currentRegion}`}>详情</a>
+              <a href={`${this.urlPrefix}/admin/operation-detail?taskId=${record.taskId}&region=${region.currentRegion}#2`}>状态</a>
+            </span>
+          );
+        },
+      },
+    ];
+  }
+
+  public getLabelValueData(data: any[]) {
+    return data.map(item => {
+      return {
+        label: item,
+        value: item,
+      };
+    });
+  }
+
+  public getPackages() {
+    admin.packageList.map(item => {
+      return {
+        label: item,
+        value: item,
+      };
+    });
+  }
+
+  public componentDidMount() {
+    admin.getTaskManagement();
+    admin.getMetaData(false);
+    admin.getClusterTasksEnums();
+    admin.getConfigsTaskStatus();
+    admin.getConfigsKafkaRoles();
+  }
+
+  public renderOperationPanel() {
+    return (
+      <ul>
+        {this.renderSearch('', '请输入任务ID')}
+        <li className="right-btn-1">
+          <Button type="primary" onClick={() => addMigrationTask()}>新建集群任务</Button>
+        </li>
+      </ul>
+    );
+  }
+
+  public render() {
+    const { searchKey } = this.state;
+    const taskManage: ITaskManage[] = admin.taskManagement && searchKey ?
+      admin.taskManagement.filter((d: { taskId: number; }) => d.taskId === +searchKey) : admin.taskManagement;
+
+    return (
+      <>
+        <div className="container">
+          <div className="table-operation-panel">
+            {this.renderOperationPanel()}
+          </div>
+          <div className="table-wrapper">
+            <Table
+              rowKey="taskId"
+              columns={this.renderColumns(taskManage)}
+              dataSource={taskManage}
+              pagination={pagination}
+            />
+          </div>
+        </div>
+      </>
+    );
+  }
+}

kafka-manager-console/src/container/admin/operation-management/config.tsx

@@ -0,0 +1,59 @@
+
+import * as React from 'react';
+import { IReassignTasks } from 'types/base-type';
+import { Popconfirm } from 'component/antd';
+import { urlPrefix } from 'constants/left-menu';
+import { startMigrationTask, modifyMigrationTask, cancelMigrationTask } from 'container/modal';
+import moment = require('moment');
+import { timeFormat } from 'constants/strategy';
+
+export const migrationTaskColumns = (migrationUrl: string) => {
+  const columns = [{
+    title: '迁移任务名称',
+    dataIndex: 'taskName',
+    render: (text: string, item: IReassignTasks) =>
+    <a href={`${urlPrefix}/${migrationUrl}?taskId=${item.taskId}`}>{text}</a>,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'gmtCreate',
+    render: (t: number) => moment(t).format(timeFormat),
+  },
+  {
+    title: '创建人',
+    dataIndex: 'operator',
+  },
+  {
+    title: 'Topic数量',
+    dataIndex: 'totalTopicNum',
+  },
+  {
+    title: '进度',
+    dataIndex: 'completedTopicNum',
+    render: (value: number, item: IReassignTasks) => <span>{item.completedTopicNum}/{item.totalTopicNum}</span>,
+  },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    render: (value: string, item: IReassignTasks) => (
+      <>
+        {item.status === 0 &&
+          <Popconfirm
+            title="确定开始？"
+            onConfirm={() => startMigrationTask(item, 'start')}
+          >
+            <a style={{ marginRight: 16 }}>开始</a>
+          </Popconfirm>}
+        {[0, 1].indexOf(item.status) > -1 &&
+          <a onClick={() => modifyMigrationTask(item, 'modify')} style={{ marginRight: 16 }}>修改</a>}
+        {item.status === 0 &&
+          <Popconfirm
+            title="确定取消？"
+            onConfirm={() => cancelMigrationTask(item, 'cancel')}
+          ><a>取消</a>
+          </Popconfirm>}
+      </>
+    ),
+  }];
+  return columns;
+};

kafka-manager-console/src/container/admin/operation-management/index.less

@@ -0,0 +1,7 @@
+.hotspot-header {
+  margin-bottom: 10px;
+}
+
+.hotspot-divider {
+  margin-top: 5px;
+}

kafka-manager-console/src/container/admin/operation-management/index.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { observer } from 'mobx-react';
+import { Tabs } from 'antd';
+import { handleTabKey } from 'lib/utils';
+import { ClusterTask } from './cluster-task';
+import { MigrationTask } from './migration-task';
+import { VersionManagement } from '../version-management';
+import { users } from 'store/users';
+import { expert } from 'store/expert';
+
+const { TabPane } = Tabs;
+
+@observer
+export class OperationManagement extends React.Component {
+  public tabs = [{
+    title: '迁移任务',
+    component: <MigrationTask />,
+  }, {
+    title: '集群任务',
+    component: <ClusterTask />,
+  }, {
+    title: '版本管理',
+    component: <VersionManagement />,
+  }];
+
+  public render() {
+    let tabs = [].concat(this.tabs);
+    if (users.currentUser.role !== 2) {
+      tabs = tabs.splice(2);
+    }
+    return (
+      <>
+        <Tabs activeKey={location.hash.substr(1) || '0'} type="card" onChange={handleTabKey}>
+          {
+            tabs.map((item, index) => {
+              return (
+                <TabPane tab={item.title} key={'' + index}>
+                  {item.component}
+                </TabPane>);
+            })
+          }
+        </Tabs>
+      </>
+    );
+  }
+}

kafka-manager-console/src/container/admin/operation-management/migration-detail.tsx

@@ -0,0 +1,226 @@
+import * as React from 'react';
+import './index.less';
+import { Table, PageHeader, Descriptions, Divider, Tooltip } from 'component/antd';
+import { wrapper } from 'store';
+import Url from 'lib/url-parser';
+import { expert } from 'store/expert';
+import { classStatusMap } from 'constants/status-map';
+import { admin } from 'store/admin';
+import { observer } from 'mobx-react';
+import { IXFormWrapper, IReassign, IDetailVO, ILabelValue, IEnumsMap } from 'types/base-type';
+import { modifyTransferTask } from 'container/modal';
+import { SearchAndFilterContainer } from 'container/search-filter';
+import { handlePageBack } from 'lib/utils';
+import moment from 'moment';
+import './index.less';
+import { timeFormat } from 'constants/strategy';
+
+@observer
+export class MigrationDetail extends SearchAndFilterContainer {
+  public taskId: number;
+
+  public state = {
+    filterStatusVisible: false,
+  };
+  private xFormModal: IXFormWrapper;
+
+  constructor(props: any) {
+    super(props);
+    const url = Url();
+    this.taskId = Number(url.search.taskId);
+  }
+
+  public showDetails() {
+    const isUrl = window.location.href.includes('/expert') ? '/expert#2' : '/admin/operation';
+    const detail = expert.tasksDetail;
+    const gmtCreate = moment(detail.gmtCreate).format(timeFormat);
+    const startTime = moment(detail.beginTime).format(timeFormat);
+    const endTime = moment(detail.endTime).format(timeFormat);
+    const options = [{
+      value: detail.taskName,
+      label: '任务名称',
+    }, {
+      value: gmtCreate,
+      label: '创建时间',
+    }, {
+      value: detail.operator,
+      label: '创建人',
+    }, {
+      value: startTime,
+      label: '计划开始时间',
+    }, {
+      value: endTime,
+      label: '完成时间',
+    }];
+    return (
+      <>
+        <PageHeader
+          className="detail hotspot-header"
+          onBack={() => handlePageBack(isUrl)}
+          title={`Topic数据迁移任务/${detail.taskName || ''}`}
+        >
+          <Divider className="hotspot-divider" />
+          <Descriptions column={3}>
+            {options.map((item: ILabelValue, index) => (
+              <Descriptions.Item key={index} label={item.label}>{item.value}</Descriptions.Item>
+            ))}
+            <Descriptions.Item label="任务说明">
+              <Tooltip placement="bottomLeft" title={detail.description}>
+                <span className="overview">
+                  {detail.description}
+                </span>
+              </Tooltip>
+            </Descriptions.Item>
+          </Descriptions>
+        </PageHeader>
+      </>
+    );
+  }
+
+  public detailsTable() {
+    let taskList = [] as IReassign[];
+    taskList = expert.tasksStatus ? expert.tasksStatus : taskList;
+    const taskStatus = admin.configsTaskStatus as IEnumsMap[];
+    const status = Object.assign({
+      title: '任务状态',
+      dataIndex: 'status',
+      key: 'status',
+      filters: taskStatus.map(ele => ({ text: ele.message, value: ele.code + '' })),
+      onFilter: (value: number, record: IReassign) => record.status === +value,
+      render: (t: number) => {
+        let message = '';
+        taskStatus.forEach((ele: any) => {
+            if (ele.code === t) {
+              message = ele.message;
+            }
+        });
+        let statusName = '';
+        if (t === 100 || t === 101) {
+          statusName = 'success';
+        } else if ( t === 40 || t === 99 || t === 102 || t === 103 || t === 104 || t === 105 || t === 106) {
+          statusName = 'fail';
+        }
+        return <span className={statusName}>{message}</span>;
+      },
+    }, this.renderColumnsFilter('filterStatusVisible'));
+    const columns = [
+      {
+        title: 'Topic名称',
+        dataIndex: 'topicName',
+        key: 'topicName',
+        sorter: (a: IReassign, b: IReassign) => a.topicName.charCodeAt(0) - b.topicName.charCodeAt(0),
+        render: (val: string) => <Tooltip placement="bottomLeft" title={val}> {val} </Tooltip>,
+      },
+      {
+        title: '所在集群',
+        dataIndex: 'clusterName',
+        key: 'clusterName',
+      },
+      {
+        title: '迁移进度',
+        dataIndex: 'PartitionNum',
+        key: 'PartitionNum',
+        render: (text: string, item: IReassign) => <span>{item.completedPartitionNum}/{item.totalPartitionNum}</span>,
+      },
+      status,
+      {
+        title: '操作',
+        dataIndex: 'action',
+        key: 'action',
+        render: (text: string, item: IReassign) => (
+          <>
+          <a onClick={() => this.renderRessignDetail(item)} style={{ marginRight: 16 }}>详情</a>
+          <a onClick={() => modifyTransferTask(item, 'modify', this.taskId)}>修改</a>
+          </>
+        ),
+      },
+    ];
+    return (
+      <>
+        <Table rowKey="key" dataSource={taskList} columns={columns} />
+      </>
+    );
+  }
+
+  public renderRessignDetail(item: IReassign) {
+    let statusList = [] as IDetailVO[];
+    statusList = item.reassignList ? item.reassignList : statusList;
+    this.xFormModal = {
+      type: 'drawer',
+      noform: true,
+      nofooter: true,
+      visible: true,
+      title: '查看任务状态',
+      customRenderElement: this.renderInfo(statusList),
+      width: 500,
+      onSubmit: () => {
+        // TODO:
+      },
+    };
+    wrapper.open(this.xFormModal);
+  }
+
+  public renderInfo(statusList: IDetailVO[]) {
+    const statusColumns = [
+      {
+        title: '分区ID',
+        dataIndex: 'partitionId',
+        key: 'partitionId',
+      },
+      {
+        title: '目标BrokerID',
+        dataIndex: 'destReplicaIdList',
+        key: 'destReplicaIdList',
+        onCell: () => ({
+          style: {
+            maxWidth: 180,
+            overflow: 'hidden',
+            whiteSpace: 'nowrap',
+            textOverflow: 'ellipsis',
+            cursor: 'pointer',
+          },
+        }),
+        render: (t: []) => {
+          return t.map(i => <span key={i} className="p-params">{i}</span>);
+        },
+      },
+      {
+        title: '状态',
+        dataIndex: 'status',
+        key: 'status',
+        render: (t: number) => {
+          let message = '';
+          const taskStatus = admin.configsTaskStatus ? admin.configsTaskStatus : [] as IEnumsMap[];
+          taskStatus.forEach((ele: any) => {
+              if (ele.code === t) {
+                message = ele.message;
+              }
+          });
+          return <span className={`${classStatusMap[t]} p-params`}>{message}</span>;
+        },
+      },
+    ];
+
+    return (
+      <Table rowKey="key" dataSource={statusList} columns={statusColumns} />
+    );
+  }
+
+  public componentDidMount() {
+    expert.getReassignTasksDetail(this.taskId);
+    expert.getReassignTasksStatus(this.taskId);
+    admin.getConfigsTaskStatus();
+  }
+
+  public render() {
+    return (
+      expert.tasksDetail ?
+      (
+        <>
+          {this.showDetails()}
+          {admin.configsTaskStatus ? this.detailsTable() : null}
+        </>
+      ) : null
+    );
+  }
+}

kafka-manager-console/src/container/admin/operation-management/migration-task.tsx

@@ -0,0 +1,110 @@
+import * as React from 'react';
+import { IReassignTasks, IEnumsMap } from 'types/base-type';
+import { Table, Button } from 'component/antd';
+import { expert } from 'store/expert';
+import { pagination } from 'constants/table';
+import { observer } from 'mobx-react';
+import { SearchAndFilterContainer } from 'container/search-filter';
+import { createMigrationTasks } from 'container/modal';
+import { admin } from 'store/admin';
+import { migrationTaskColumns } from './config';
+import './index.less';
+
+@observer
+export class MigrationTask extends SearchAndFilterContainer {
+  public state = {
+    searchKey: '',
+    filterStatusVisible: false,
+  };
+
+  public getColumns = () => {
+    const columns = migrationTaskColumns(window.location.href.includes('/expert') ? 'expert/hotspot-detail' : 'admin/migration-detail');
+    const taskStatus = admin.configsTaskStatus as IEnumsMap[];
+    const status = Object.assign({
+      title: '任务状态',
+      dataIndex: 'status',
+      key: 'status',
+      filters: taskStatus.map(ele => ({ text: ele.message, value: ele.code + '' })),
+      onFilter: (value: number, record: IReassignTasks) => record.status === +value,
+      render: (t: number) => {
+        let message = '';
+        taskStatus.forEach((ele: any) => {
+          if (ele.code === t) {
+            message = ele.message;
+          }
+        });
+        let statusName = '';
+        if (t === 100 || t === 101) {
+          statusName = 'success';
+        } else if (t === 40 || t === 99 || t === 102 || t === 103 || t === 104 || t === 105 || t === 106) {
+          statusName = 'fail';
+        }
+        return <span className={statusName}>{message}</span>;
+      },
+    }, this.renderColumnsFilter('filterStatusVisible'));
+    const col = columns.splice(4, 0, status);
+    return columns;
+  }
+
+  public getMigrationTask() {
+    return (
+      <>
+        <Table
+          columns={this.getColumns()}
+          dataSource={expert.reassignTasks}
+          pagination={pagination}
+        />
+      </>
+    );
+  }
+
+  public getData(data: IReassignTasks[]) {
+    let { searchKey } = this.state;
+    searchKey = (searchKey + '').trim().toLowerCase();
+
+    const reassignTasks: IReassignTasks[] = data.filter(d =>
+      (d.taskName !== undefined && d.taskName !== null) && d.taskName.toLowerCase().includes(searchKey as string));
+    return reassignTasks;
+  }
+
+  public componentDidMount() {
+    expert.getReassignTasks();
+    if (!expert.metaData.length) {
+      expert.getMetaData(false);
+    }
+    admin.getConfigsTaskStatus();
+  }
+
+  public renderOperationPanel() {
+    return (
+      <ul>
+        {this.renderSearch('', '请输入任务名称')}
+        {location.pathname.includes('expert') ? null : <li className="right-btn-1">
+          <Button type="primary" onClick={() => createMigrationTasks()}>新建迁移任务</Button>
+        </li>}
+      </ul>
+    );
+  }
+
+  public render() {
+    if (!admin.configsTaskStatus) {
+      return null;
+    }
+    return (
+      <>
+        <div className="container">
+          <div className="table-operation-panel">
+            {this.renderOperationPanel()}
+          </div>
+          <div className="table-wrapper">
+            <Table
+              columns={this.getColumns()}
+              dataSource={this.getData(expert.reassignTasks)}
+              pagination={pagination}
+            />
+          </div>
+        </div>
+      </>
+    );
+  }
+}

kafka-manager-console/src/container/admin/platform-management.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { observer } from 'mobx-react';
+import { Tabs } from 'antd';
+import { handleTabKey } from 'lib/utils';
+import { AdminAppList } from './admin-app-list';
+import { UserManagement } from './user-management';
+import { ConfigureManagement } from './configure-management';
+
+const { TabPane } = Tabs;
+
+@observer
+export class PlatformManagement extends React.Component {
+  public render() {
+    return (
+      <>
+      <Tabs activeKey={location.hash.substr(1) || '1'} type="card" onChange={handleTabKey}>
+        <TabPane tab="应用管理" key="1">
+          <AdminAppList />
+        </TabPane>
+        <TabPane tab="用户管理" key="2">
+          <UserManagement />
+        </TabPane>
+        <TabPane tab="配置管理" key="3">
+          <ConfigureManagement />
+        </TabPane>
+      </Tabs>
+      </>
+    );
+  }
+}

kafka-manager-console/src/container/admin/user-management.tsx

@@ -0,0 +1,88 @@
+import { observer } from 'mobx-react';
+import * as React from 'react';
+import { Table, Button, Spin } from 'component/antd';
+import { SearchAndFilterContainer } from 'container/search-filter';
+import { IUser } from 'types/base-type';
+import { users } from 'store/users';
+import { pagination } from 'constants/table';
+import { getUserColumns } from './config';
+import { showApplyModal } from 'container/modal/admin';
+import { roleMap } from 'constants/status-map';
+import { tableFilter } from 'lib/utils';
+
+@observer
+export class UserManagement extends SearchAndFilterContainer {
+  public state = {
+    searchKey: '',
+    filterRole: false,
+  };
+
+  public componentDidMount() {
+    if (!users.userData.length) {
+      users.getUserList();
+    }
+  }
+
+  public getData<T extends IUser>(origin: T[]) {
+    let data: T[] = origin;
+    let { searchKey } = this.state;
+    searchKey = (searchKey + '').trim().toLowerCase();
+
+    data = searchKey ? origin.filter((item: IUser) =>
+      (item.username !== undefined && item.username !== null) && item.username.toLowerCase().includes(searchKey as string)) : origin ;
+    return data;
+  }
+
+  public renderTable() {
+    const roleColumn = Object.assign({
+      title: '角色权限',
+      dataIndex: 'role',
+      key: 'role',
+      width: '35%',
+      filters: tableFilter<IUser>(users.userData, 'role', roleMap),
+      onFilter: (text: number, record: IUser) => record.role === text,
+      render: (text: number) => roleMap[text] || '',
+
+    }, this.renderColumnsFilter('filterRole')) as any;
+
+    const userColumns = getUserColumns();
+
+    userColumns.splice(1, 0, roleColumn);
+
+    return (
+      <Spin spinning={users.loading}>
+        <Table
+          rowKey="key"
+          columns={userColumns}
+          dataSource={this.getData(users.userData)}
+          pagination={pagination}
+        />
+      </Spin>
+
+    );
+  }
+
+  public renderOperationPanel() {
+    return (
+      <ul>
+        {this.renderSearch('', '请输入用户名或应用名称')}
+        <li className="right-btn-1">
+          <Button type="primary" onClick={() => showApplyModal()}>添加用户</Button>
+        </li>
+      </ul>
+    );
+  }
+
+  public render() {
+    return (
+      <div className="container">
+        <div className="table-operation-panel">
+          {this.renderOperationPanel()}
+        </div>
+        <div className="table-wrapper">
+          {this.renderTable()}
+        </div>
+      </div>
+    );
+  }
+}

kafka-manager-console/src/container/admin/version-management.tsx

@@ -0,0 +1,105 @@
+import { observer } from 'mobx-react';
+import * as React from 'react';
+import { Table, Button, Spin } from 'component/antd';
+import { SearchAndFilterContainer } from 'container/search-filter';
+import { IUploadFile } from 'types/base-type';
+import { version } from 'store/version';
+import { pagination } from 'constants/table';
+import { getVersionColumns } from './config';
+import { showUploadModal } from 'container/modal/admin';
+import { tableFilter } from 'lib/utils';
+import { admin } from 'store/admin';
+
+@observer
+export class VersionManagement extends SearchAndFilterContainer {
+  public state = {
+    searchKey: '',
+    filterClusterNameVisible: false,
+    filterConfigTypeVisible: false,
+  };
+
+  public async componentDidMount() {
+    if (!version.fileTypeList.length) {
+     await version.getFileTypeList();
+    }
+
+    if (!version.fileList.length) {
+      version.getFileList();
+    }
+
+    if (!admin.metaList.length) {
+      admin.getMetaData(false);
+    }
+  }
+  public getColumns = () => {
+    const columns = getVersionColumns();
+    const clusterName = Object.assign({
+      title: '集群名称',
+      dataIndex: 'clusterName',
+      key: 'clusterName',
+      filters: tableFilter<any>(this.getData(version.fileList), 'clusterName'),
+      onFilter: (value: string, record: IUploadFile) => record.clusterName === value,
+    }, this.renderColumnsFilter('filterClusterNameVisible'));
+    const configType = Object.assign({
+      title: '配置类型',
+      dataIndex: 'configType',
+      key: 'configType',
+      filters: tableFilter<any>(this.getData(version.fileList), 'configType'),
+      onFilter: (value: string, record: IUploadFile) => record.configType === value,
+    }, this.renderColumnsFilter('filterConfigTypeVisible'));
+    const col = columns.splice(1, 0, clusterName, configType);
+    return columns;
+  }
+
+  public getData<T extends IUploadFile>(origin: T[]) {
+    let data: T[] = origin;
+    let { searchKey } = this.state;
+    searchKey = (searchKey + '').trim().toLowerCase();
+
+    if (searchKey) {
+      data = origin.filter((item: IUploadFile) => item.id + '' === searchKey
+       || ((item.fileName !== undefined && item.fileName !== null) && item.fileName.toLowerCase().includes(searchKey as string)));
+    }
+    return data;
+  }
+
+  public renderTable() {
+    return (
+      <Spin spinning={version.loading}>
+        <Table
+          rowKey="key"
+          columns={this.getColumns()}
+          dataSource={this.getData(version.fileList)}
+          pagination={pagination}
+        />
+      </Spin>
+
+    );
+  }
+
+  public renderOperationPanel() {
+    return (
+      <ul>
+        {this.renderSearch('', '请输入ID或文件名')}
+        <li className="right-btn-1">
+          <Button type="primary" onClick={() => showUploadModal()}>上传配置</Button>
+        </li>
+      </ul>
+    );
+  }
+
+  public render() {
+    const currentFileType = version.currentFileType;
+    const acceptFileMap = version.acceptFileMap;
+    return (
+      <div className="container">
+        <div className="table-operation-panel">
+          {this.renderOperationPanel()}
+        </div>
+        <div className="table-wrapper">
+          {this.renderTable()}
+        </div>
+      </div>
+    );
+  }
+}