V2.4.1 FE

2025-12-24 11:52:08 +08:00 · 2021-04-25 20:43:20 +08:00
parent 2672502c07
commit 47b8fe5022
63 changed files with 1558 additions and 329 deletions
--- a/kafka-manager-console/src/component/antd/index.tsx
+++ b/kafka-manager-console/src/component/antd/index.tsx
@@ -94,6 +94,9 @@ import 'antd/es/divider/style';
 import Upload from 'antd/es/upload';
 import 'antd/es/upload/style';

+import Transfer from 'antd/es/transfer';
+import 'antd/es/transfer/style';
+
 import TimePicker from 'antd/es/time-picker';
 import 'antd/es/time-picker/style';

@@ -142,5 +145,6 @@ export {
  TimePicker,
  RangePickerValue,
  Badge,
-  Popover
+  Popover,
+  Transfer
 };
--- a/kafka-manager-console/src/component/editor/index.less
+++ b/kafka-manager-console/src/component/editor/index.less
@@ -25,7 +25,7 @@
  .editor{
    height: 100%;
    position: absolute;
-    left: -14%;
+    left: -12%;
    width: 120%;
  }
 }
--- a/kafka-manager-console/src/component/editor/monacoEditor.tsx
+++ b/kafka-manager-console/src/component/editor/monacoEditor.tsx
@@ -21,24 +21,12 @@ class Monacoeditor extends React.Component<IEditorProps> {
  public state = {
    placeholder: '',
  };
-  // public arr = '{"clusterId":95,"startId":37397856,"step":100,"topicName":"kmo_topic_metrics_tempory_zq"}';
-  // public Ars(a: string) {
-  //   const obj = JSON.parse(a);
-  //   const newobj: any = {};
-  //   for (const item in obj) {
-  //     if (typeof obj[item] === 'object') {
-  //       this.Ars(obj[item]);
-  //     } else {
-  //       newobj[item] = obj[item];
-  //     }
-  //   }
-  //   return JSON.stringify(newobj);
-  // }
+
  public async componentDidMount() {
    const { value, onChange } = this.props;
    const format: any = await format2json(value);
    this.editor = monaco.editor.create(this.ref, {
-      value: format.result,
+      value: format.result || value,
      language: 'json',
      lineNumbers: 'off',
      scrollBeyondLastLine: false,
@@ -48,7 +36,7 @@ class Monacoeditor extends React.Component<IEditorProps> {
      minimap: {
        enabled: false,
      },
-      // automaticLayout: true, // 自动布局
+      automaticLayout: true, // 自动布局
      glyphMargin: true, // 字形边缘 {},[]
      // useTabStops: false,
      // formatOnPaste: true,
--- a/kafka-manager-console/src/component/flow-table/index.tsx
+++ b/kafka-manager-console/src/component/flow-table/index.tsx
@@ -68,8 +68,8 @@ export class StatusGraghCom<T extends IFlowInfo> extends React.Component {
  public render() {
    const statusData = this.getData();
    const loading = this.getLoading();
-    if (!statusData) return null;
    const data: any[] = [];
+    if (!statusData) return <Table columns={flowColumns} dataSource={data} />;
    Object.keys(statusData).map((key) => {
      if (statusData[key]) {
        const v = key === 'byteIn' || key === 'byteOut' ? statusData[key].map(i => i && (i / 1024).toFixed(2)) :
@@ -85,7 +85,7 @@ export class StatusGraghCom<T extends IFlowInfo> extends React.Component {
      }
    });
    return (
-      <Table columns={flowColumns} dataSource={data} pagination={false} loading={loading}/>
+      <Table columns={flowColumns} dataSource={data} pagination={false} loading={loading} />
    );
  }
 }
--- a/kafka-manager-console/src/component/x-form/index.less
+++ b/kafka-manager-console/src/component/x-form/index.less
@@ -1,4 +1,4 @@
-.ant-input-number {
+.ant-input-number, .ant-form-item-children .ant-select {
  width: 314px
 }

--- a/kafka-manager-console/src/component/x-form/index.tsx
+++ b/kafka-manager-console/src/component/x-form/index.tsx
@@ -130,6 +130,8 @@ class XForm extends React.Component<IXFormProps> {
                this.renderFormItem(formItem),
              )}
              {formItem.renderExtraElement ? formItem.renderExtraElement() : null}
+              {/* 添加保存时间提示文案 */}
+              {formItem.attrs?.prompttype ? <span style={{ color: "#cccccc", fontSize: '12px', lineHeight: '20px', display: 'block' }}>{formItem.attrs.prompttype}</span> : null}
            </Form.Item>
          );
        })}
--- a/kafka-manager-console/src/constants/left-menu.ts
+++ b/kafka-manager-console/src/constants/left-menu.ts
@@ -59,6 +59,10 @@ export const adminMenu = [{
  href: `/admin/bill`,
  i: 'k-icon-renwuliebiao',
  title: '用户账单',
+},{
+  href: `/admin/operation-record`,
+  i: 'k-icon-operationrecord',
+  title: '操作记录',
 }] as ILeftMenu[];

 export const expertMenu = [{
--- a/kafka-manager-console/src/constants/strategy.ts
+++ b/kafka-manager-console/src/constants/strategy.ts
@@ -67,7 +67,7 @@ export const timeMonthStr = 'YYYY/MM';
 // tslint:disable-next-line:max-line-length

 export const indexUrl ={
-  indexUrl:'https://github.com/didi/kafka-manager',
+  indexUrl:'https://github.com/didi/Logi-KafkaManager/blob/master/docs/user_guide/kafka_metrics_desc.md', // 指标说明
  cagUrl:'https://github.com/didi/Logi-KafkaManager/blob/master/docs/user_guide/add_cluster/add_cluster.md', // 集群接入指南 Cluster access Guide
 } 

--- a/kafka-manager-console/src/container/admin/cluster-detail/cluster-consumer.tsx
+++ b/kafka-manager-console/src/container/admin/cluster-detail/cluster-consumer.tsx
@@ -100,7 +100,7 @@ export class ClusterConsumer extends SearchAndFilterContainer {
        <div className="k-row">
          <ul className="k-tab">
            <li>{this.props.tab}</li>
-            {this.renderSearch()}
+            {this.renderSearch('', '请输入消费组名称')}
          </ul>
          <Table
            columns={this.columns}
--- a/kafka-manager-console/src/container/admin/cluster-detail/cluster-controller.tsx
+++ b/kafka-manager-console/src/container/admin/cluster-detail/cluster-controller.tsx
@@ -2,7 +2,8 @@
 import * as React from 'react';

 import { SearchAndFilterContainer } from 'container/search-filter';
-import { Table } from 'component/antd';
+import { Table, Button, Popconfirm, Modal, Transfer, notification } from 'component/antd';
+// import { Transfer } from 'antd'
 import { observer } from 'mobx-react';
 import { pagination } from 'constants/table';
 import Url from 'lib/url-parser';
@@ -16,8 +17,12 @@ import { timeFormat } from 'constants/strategy';
 export class ClusterController extends SearchAndFilterContainer {
  public clusterId: number;

-  public state = {
+  public state: any = {
    searchKey: '',
+    searchCandidateKey: '',
+    isCandidateModel: false,
+    mockData: [],
+    targetKeys: [],
  };

  constructor(props: any) {
@@ -37,6 +42,94 @@ export class ClusterController extends SearchAndFilterContainer {
    return data;
  }

+  public getCandidateData<T extends IController>(origin: T[]) {
+    let data: T[] = origin;
+    let { searchCandidateKey } = this.state;
+    searchCandidateKey = (searchCandidateKey + '').trim().toLowerCase();
+
+    data = searchCandidateKey ? origin.filter((item: IController) =>
+      (item.host !== undefined && item.host !== null) && item.host.toLowerCase().includes(searchCandidateKey as string),
+    ) : origin;
+    return data;
+  }
+
+  // 候选controller
+  public renderCandidateController() {
+    const columns = [
+      {
+        title: 'BrokerId',
+        dataIndex: 'brokerId',
+        key: 'brokerId',
+        width: '20%',
+        sorter: (a: IController, b: IController) => b.brokerId - a.brokerId,
+        render: (r: string, t: IController) => {
+          return (
+            <a href={`${this.urlPrefix}/admin/broker-detail?clusterId=${this.clusterId}&brokerId=${t.brokerId}`}>{r}
+            </a>
+          );
+        },
+      },
+      {
+        title: 'BrokerHost',
+        key: 'host',
+        dataIndex: 'host',
+        width: '20%',
+        // render: (r: string, t: IController) => {
+        //   return (
+        //     <a href={`${this.urlPrefix}/admin/broker-detail?clusterId=${this.clusterId}&brokerId=${t.brokerId}`}>{r}
+        //     </a>
+        //   );
+        // },
+      },
+      {
+        title: 'Broker状态',
+        key: 'status',
+        dataIndex: 'status',
+        width: '20%',
+        render: (r: number, t: IController) => {
+          return (
+            <span>{r === 1 ? '不在线' : '在线'}</span>
+          );
+        },
+      },
+      {
+        title: '创建时间',
+        dataIndex: 'startTime',
+        key: 'startTime',
+        width: '25%',
+        sorter: (a: IController, b: IController) => b.timestamp - a.timestamp,
+        render: (t: number) => moment(t).format(timeFormat),
+      },
+      {
+        title: '操作',
+        dataIndex: 'operation',
+        key: 'operation',
+        width: '15%',
+        render: (r: string, t: IController) => {
+          return (
+            <Popconfirm
+              title="确定删除？"
+              onConfirm={() => this.deleteCandidateCancel(t)}
+              cancelText="取消"
+              okText="确认"
+            >
+              <a>删除</a>
+            </Popconfirm>
+          );
+        },
+      },
+    ];
+
+    return (
+      <Table
+        columns={columns}
+        dataSource={this.getCandidateData(admin.controllerCandidate)}
+        pagination={pagination}
+        rowKey="key"
+      />
+    );
+  }
+
  public renderController() {

    const columns = [
@@ -58,12 +151,6 @@ export class ClusterController extends SearchAndFilterContainer {
        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: '变更时间',
@@ -87,16 +174,104 @@ export class ClusterController extends SearchAndFilterContainer {

  public componentDidMount() {
    admin.getControllerHistory(this.clusterId);
+    admin.getCandidateController(this.clusterId);
+    admin.getBrokersMetadata(this.clusterId);
+  }
+
+  public addController = () => {
+    this.setState({ isCandidateModel: true, targetKeys: [] })
+  }
+
+  public addCandidateChange = (targetKeys: any) => {
+    this.setState({ targetKeys })
+  }
+
+
+
+  public handleCandidateCancel = () => {
+    this.setState({ isCandidateModel: false });
+  }
+
+  public handleCandidateOk = () => {
+    let brokerIdList = this.state.targetKeys.map((item: any) => {
+      return admin.brokersMetadata[item].brokerId
+    })
+    admin.addCandidateController(this.clusterId, brokerIdList).then(data => {
+      notification.success({ message: '新增成功' });
+      admin.getCandidateController(this.clusterId);
+    }).catch(err => {
+      notification.error({ message: '新增失败' });
+    })
+    this.setState({ isCandidateModel: false, targetKeys: [] });
+  }
+
+  public deleteCandidateCancel = (target: any) => {
+    admin.deleteCandidateCancel(this.clusterId, [target.brokerId]).then(() => {
+      notification.success({ message: '删除成功' });
+    });
+    this.setState({ isCandidateModel: false });
+  }
+
+  public renderAddCandidateController() {
+    let filterControllerCandidate = admin.brokersMetadata.filter((item: any) => {
+      return !admin.filtercontrollerCandidate.includes(item.brokerId)
+    })
+
+    return (
+      <Modal
+        title="新增候选Controller"
+        visible={this.state.isCandidateModel}
+        // okText="确认"
+        // cancelText="取消"
+        maskClosable={false}
+        // onOk={() => this.handleCandidateOk()}
+        onCancel={() => this.handleCandidateCancel()}
+        footer={<>
+          <Button style={{ width: '60px' }} onClick={() => this.handleCandidateCancel()}>取消</Button>
+          <Button disabled={this.state.targetKeys.length > 0 ? false : true} style={{ width: '60px' }} type="primary" onClick={() => this.handleCandidateOk()}>确定</Button>
+        </>
+        }
+      >
+        <Transfer
+          dataSource={filterControllerCandidate}
+          targetKeys={this.state.targetKeys}
+          render={item => item.host}
+          onChange={(targetKeys) => this.addCandidateChange(targetKeys)}
+          titles={['未选', '已选']}
+          locale={{
+            itemUnit: '项',
+            itemsUnit: '项',
+          }}
+          listStyle={{
+            width: "45%",
+          }}
+        />
+      </Modal>
+    );
  }

  public render() {
    return (
      <div className="k-row">
        <ul className="k-tab">
+          <li>
+            <span>候选Controller</span>
+            <span style={{ display: 'inline-block', color: "#a7a8a9", fontSize: '12px', marginLeft: '15px' }}>Controller将会优先从以下Broker中选举</span>
+          </li>
+          <div style={{ display: 'flex' }}>
+            <div style={{ marginRight: '15px' }}>
+              <Button onClick={() => this.addController()} type='primary'>新增候选Controller</Button>
+            </div>
+            {this.renderSearch('', '请查找Host', 'searchCandidateKey')}
+          </div>
+        </ul>
+        {this.renderCandidateController()}
+        <ul className="k-tab" style={{ marginTop: '10px' }}>
          <li>{this.props.tab}</li>
          {this.renderSearch('', '请输入Host')}
        </ul>
        {this.renderController()}
+        {this.renderAddCandidateController()}
      </div>
    );
  }
--- a/kafka-manager-console/src/container/admin/cluster-detail/cluster-topic.tsx
+++ b/kafka-manager-console/src/container/admin/cluster-detail/cluster-topic.tsx
@@ -172,7 +172,7 @@ export class ClusterTopic extends SearchAndFilterContainer {
        key: 'appName',
        // width: '10%',
        render: (val: string, record: IClusterTopics) => (
-          <Tooltip placement="bottomLeft" title={record.appId} >
+          <Tooltip placement="bottomLeft" title={val} >
            {val}
          </Tooltip>
        ),
--- a/kafka-manager-console/src/container/admin/cluster-detail/exclusive-cluster.tsx
+++ b/kafka-manager-console/src/container/admin/cluster-detail/exclusive-cluster.tsx
@@ -314,8 +314,7 @@ export class ExclusiveCluster extends SearchAndFilterContainer {
      >
        <div className="region-prompt">
          <span>
-            由于该Region已被逻辑集群【 {this.state.logicalClusterName} 】使用
-            请先解除Region与逻辑集群的关系
+            该Region已被逻辑集群【 {this.state.logicalClusterName} 】使用，请先解除Region与逻辑集群的关系
          </span>
        </div>
      </Modal>
--- a/kafka-manager-console/src/container/admin/cluster-detail/index.less
+++ b/kafka-manager-console/src/container/admin/cluster-detail/index.less
@@ -16,7 +16,7 @@

 .traffic-table {
  margin: 10px 0;
-  min-height: 450px;
+  min-height: 330px;
  .traffic-header {
    width: 100%;
    height: 44px;
@@ -94,4 +94,10 @@
 .region-prompt{
  font-weight: bold;
  text-align: center;
+}
+
+.asd{
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
 }
--- a/kafka-manager-console/src/container/admin/cluster-detail/index.tsx
+++ b/kafka-manager-console/src/container/admin/cluster-detail/index.tsx
@@ -32,9 +32,9 @@ export class ClusterDetail extends React.Component {
  }

  public render() {
-     let content = {} as IMetaData;
-     content = admin.basicInfo ? admin.basicInfo : content;
-     return (
+    let content = {} as IMetaData;
+    content = admin.basicInfo ? admin.basicInfo : content;
+    return (
      <>
        <PageHeader
          className="detail topic-detail-header"
@@ -46,7 +46,7 @@ export class ClusterDetail extends React.Component {
            <ClusterOverview basicInfo={content} />
          </TabPane>
          <TabPane tab="Topic信息" key="2">
-            <ClusterTopic tab={'Topic信息'}/>
+            <ClusterTopic tab={'Topic信息'} />
          </TabPane>
          <TabPane tab="Broker信息" key="3">
            <ClusterBroker tab={'Broker信息'} basicInfo={content} />
@@ -60,11 +60,11 @@ export class ClusterDetail extends React.Component {
          <TabPane tab="逻辑集群信息" key="6">
            <LogicalCluster tab={'逻辑集群信息'} basicInfo={content} />
          </TabPane>
-          <TabPane tab="Controller变更历史" key="7">
+          <TabPane tab="Controller信息" key="7">
            <ClusterController tab={'Controller变更历史'} />
          </TabPane>
-          <TabPane tab="限流信息"  key="8">
-            <CurrentLimiting tab={'限流信息'}/>
+          <TabPane tab="限流信息" key="8">
+            <CurrentLimiting tab={'限流信息'} />
          </TabPane>
        </Tabs>
      </>
--- a/kafka-manager-console/src/container/admin/cluster-list/index.tsx
+++ b/kafka-manager-console/src/container/admin/cluster-list/index.tsx
@@ -4,6 +4,7 @@ import { wrapper } from 'store';
 import { observer } from 'mobx-react';
 import { IXFormWrapper, IMetaData, IRegister } from 'types/base-type';
 import { admin } from 'store/admin';
+import { users } from 'store/users';
 import { registerCluster, createCluster, pauseMonitoring } from 'lib/api';
 import { SearchAndFilterContainer } from 'container/search-filter';
 import { cluster } from 'store/cluster';
@@ -12,6 +13,7 @@ import { urlPrefix } from 'constants/left-menu';
 import { indexUrl } from 'constants/strategy'
 import { region } from 'store';
 import './index.less';
+import Monacoeditor from 'component/editor/monacoEditor';
 import { getAdminClusterColumns } from '../config';

 const { confirm } = Modal;
@@ -77,34 +79,34 @@ export class ClusterList extends SearchAndFilterContainer {
            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: '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版本',
@@ -132,6 +134,25 @@ export class ClusterList extends SearchAndFilterContainer {
  "security.protocol": "SASL_PLAINTEXT", 
  "sasl.mechanism": "PLAIN", 
  "sasl.jaas.config": "org.apache.kafka.common.security.plain.PlainLoginModule required username=\\"xxxxxx\\" password=\\"xxxxxx\\";"
+}`,
+            rows: 8,
+          },
+        },
+        {
+          key: 'jmxProperties',
+          label: 'JMX认证',
+          type: 'text_area',
+          rules: [{
+            required: false,
+            message: '请输入JMX认证',
+          }],
+          attrs: {
+            placeholder: `请输入JMX认证，例如：
+{
+"maxConn": 10, #KM对单台Broker的最大jmx连接数
+"username": "xxxxx", #用户名
+"password": "xxxxx", #密码
+"openSSL": true, #开启SSL，true表示开启SSL，false表示关闭
 }`,
            rows: 8,
          },
@@ -256,32 +277,41 @@ export class ClusterList extends SearchAndFilterContainer {

  public getColumns = () => {
    const cols = getAdminClusterColumns();
+    const role = users.currentUser.role;
    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)}
-            cancelText="取消"
-            okText="确认"
-          >
-            <Tooltip title="暂停监控将无法正常监控指标信息，建议开启监控">
+          {
+            role && role === 2 ? <>
              <a
+                onClick={this.createOrRegisterCluster.bind(this, item)}
                className="action-button"
-              >
-                {item.status === 1 ? '暂停监控' : '开始监控'}
+              >编辑
              </a>
-            </Tooltip>
-          </Popconfirm>
-          <a onClick={this.showMonitor.bind(this, item)}>
-            删除
-          </a>
+              <Popconfirm
+                title={`确定${item.status === 1 ? '暂停' : '开始'}${item.clusterName}监控？`}
+                onConfirm={() => this.pauseMonitor(item)}
+                cancelText="取消"
+                okText="确认"
+              >
+                <Tooltip placement="left" title="暂停监控将无法正常监控指标信息，建议开启监控">
+                  <a
+                    className="action-button"
+                  >
+                    {item.status === 1 ? '暂停监控' : '开始监控'}
+                  </a>
+                </Tooltip>
+              </Popconfirm>
+              <a onClick={this.showMonitor.bind(this, item)}>
+                删除
+              </a>
+            </> : <Tooltip placement="left" title="该功能只对运维人员开放">
+                <a style={{ color: '#a0a0a0' }} className="action-button">编辑</a>
+                <a className="action-button" style={{ color: '#a0a0a0' }}>{item.status === 1 ? '暂停监控' : '开始监控'}</a>
+                <a style={{ color: '#a0a0a0' }}>删除</a>
+              </Tooltip>
+          }
        </>
      ),
    };
@@ -290,6 +320,7 @@ export class ClusterList extends SearchAndFilterContainer {
  }

  public renderClusterList() {
+    const role = users.currentUser.role;
    return (
      <>
        <div className="container">
@@ -298,7 +329,14 @@ export class ClusterList extends SearchAndFilterContainer {
              {this.renderSearch('', '请输入集群名称')}
              <li className="right-btn-1">
                <a style={{ display: 'inline-block', marginRight: '20px' }} href={indexUrl.cagUrl} target="_blank">集群接入指南</a>
-                <Button type="primary" onClick={this.createOrRegisterCluster.bind(this, null)}>接入集群</Button>
+                {
+                  role && role === 2 ?
+                    <Button type="primary" onClick={this.createOrRegisterCluster.bind(this, null)}>接入集群</Button>
+                    :
+                    <Tooltip placement="left" title="该功能只对运维人员开放" trigger='hover'>
+                      <Button disabled type="primary">接入集群</Button>
+                    </Tooltip>
+                }
              </li>
            </ul>
          </div>
--- a/kafka-manager-console/src/container/admin/config.tsx
+++ b/kafka-manager-console/src/container/admin/config.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { IUser, IUploadFile, IConfigure, IMetaData, IBrokersPartitions } from 'types/base-type';
+import { IUser, IUploadFile, IConfigure, IConfigGateway, IMetaData } from 'types/base-type';
 import { users } from 'store/users';
 import { version } from 'store/version';
-import { showApplyModal, showModifyModal, showConfigureModal } from 'container/modal/admin';
+import { showApplyModal, showApplyModalModifyPassword, showModifyModal, showConfigureModal, showConfigGatewayModal } from 'container/modal/admin';
 import { Popconfirm, Tooltip } from 'component/antd';
 import { admin } from 'store/admin';
 import { cellStyle } from 'constants/table';
@@ -27,6 +27,7 @@ export const getUserColumns = () => {
        return (
          <span className="table-operation">
            <a onClick={() => showApplyModal(record)}>编辑</a>
+            <a onClick={() => showApplyModalModifyPassword(record)}>修改密码</a>
            <Popconfirm
              title="确定删除？"
              onConfirm={() => users.deleteUser(record.username)}
@@ -184,6 +185,87 @@ export const getConfigureColumns = () => {
  return columns;
 };

+// 网关配置
+export const getConfigColumns = () => {
+  const columns = [
+    {
+      title: '配置类型',
+      dataIndex: 'type',
+      key: 'type',
+      width: '25%',
+      ellipsis: true,
+      sorter: (a: IConfigGateway, b: IConfigGateway) => a.type.charCodeAt(0) - b.type.charCodeAt(0),
+    },
+    {
+      title: '配置键',
+      dataIndex: 'name',
+      key: 'name',
+      width: '15%',
+      ellipsis: true,
+      sorter: (a: IConfigGateway, b: IConfigGateway) => a.name.charCodeAt(0) - b.name.charCodeAt(0),
+    },
+    {
+      title: '配置值',
+      dataIndex: 'value',
+      key: 'value',
+      width: '20%',
+      ellipsis: true,
+      sorter: (a: IConfigGateway, b: IConfigGateway) => a.value.charCodeAt(0) - b.value.charCodeAt(0),
+      render: (t: string) => {
+        return t.substr(0, 1) === '{' && t.substr(0, -1) === '}' ? JSON.stringify(JSON.parse(t), null, 4) : t;
+      },
+    },
+    {
+      title: '修改时间',
+      dataIndex: 'modifyTime',
+      key: 'modifyTime',
+      width: '15%',
+      sorter: (a: IConfigGateway, b: IConfigGateway) => b.modifyTime - a.modifyTime,
+      render: (t: number) => moment(t).format(timeFormat),
+    },
+    {
+      title: '版本号',
+      dataIndex: 'version',
+      key: 'version',
+      width: '10%',
+      ellipsis: true,
+      sorter: (a: IConfigGateway, b: IConfigGateway) => b.version.charCodeAt(0) - a.version.charCodeAt(0),
+    },
+    {
+      title: '描述信息',
+      dataIndex: 'description',
+      key: 'description',
+      width: '20%',
+      ellipsis: true,
+      onCell: () => ({
+        style: {
+          maxWidth: 180,
+          ...cellStyle,
+        },
+      }),
+    },
+    {
+      title: '操作',
+      width: '10%',
+      render: (text: string, record: IConfigGateway) => {
+        return (
+          <span className="table-operation">
+            <a onClick={() => showConfigGatewayModal(record)}>编辑</a>
+            <Popconfirm
+              title="确定删除？"
+              onConfirm={() => admin.deleteConfigGateway({ id: record.id })}
+              cancelText="取消"
+              okText="确认"
+            >
+              <a>删除</a>
+            </Popconfirm>
+          </span>);
+      },
+    },
+  ];
+  return columns;
+};
+
 const renderClusterHref = (value: number | string, item: IMetaData, key: number) => {
  return ( // 0 暂停监控--不可点击  1 监控中---可正常点击
    <>
--- a/kafka-manager-console/src/container/admin/configure-management.tsx
+++ b/kafka-manager-console/src/container/admin/configure-management.tsx
@@ -3,11 +3,11 @@ 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 { IConfigure, IConfigGateway } from 'types/base-type';
 import { users } from 'store/users';
 import { pagination } from 'constants/table';
-import { getConfigureColumns } from './config';
-import { showConfigureModal } from 'container/modal/admin';
+import { getConfigureColumns, getConfigColumns } from './config';
+import { showConfigureModal, showConfigGatewayModal } from 'container/modal/admin';

@observer
 export class ConfigureManagement extends SearchAndFilterContainer {
@@ -17,7 +17,12 @@ export class ConfigureManagement extends SearchAndFilterContainer {
  };

  public componentDidMount() {
-    admin.getConfigure();
+    if (this.props.isShow) {
+      admin.getGatewayList();
+      admin.getGatewayType();
+    } else {
+      admin.getConfigure();
+    }
  }

  public getData<T extends IConfigure>(origin: T[]) {
@@ -34,15 +39,34 @@ export class ConfigureManagement extends SearchAndFilterContainer {
    return data;
  }

+  public getGatewayData<T extends IConfigGateway>(origin: T[]) {
+    let data: T[] = origin;
+    let { searchKey } = this.state;
+    searchKey = (searchKey + '').trim().toLowerCase();
+
+    data = searchKey ? origin.filter((item: IConfigGateway) =>
+      ((item.name !== undefined && item.name !== null) && item.name.toLowerCase().includes(searchKey as string))
+      || ((item.value !== undefined && item.value !== null) && item.value.toLowerCase().includes(searchKey as string))
+      || ((item.description !== undefined && item.description !== null) &&
+        item.description.toLowerCase().includes(searchKey as string)),
+    ) : origin;
+    return data;
+  }
+
  public renderTable() {
    return (
      <Spin spinning={users.loading}>
-        <Table
+        {this.props.isShow ? <Table
+          rowKey="key"
+          columns={getConfigColumns()}
+          dataSource={this.getGatewayData(admin.configGatewayList)}
+          pagination={pagination}
+        /> : <Table
          rowKey="key"
          columns={getConfigureColumns()}
          dataSource={this.getData(admin.configureList)}
          pagination={pagination}
-        />
+        />}
      </Spin>

    );
@@ -53,7 +77,7 @@ export class ConfigureManagement extends SearchAndFilterContainer {
      <ul>
        {this.renderSearch('', '请输入配置键、值或描述')}
        <li className="right-btn-1">
-          <Button type="primary" onClick={() => showConfigureModal()}>增加配置</Button>
+          <Button type="primary" onClick={() => this.props.isShow ? showConfigGatewayModal() : showConfigureModal()}>增加配置</Button>
        </li>
      </ul>
    );
--- a/kafka-manager-console/src/container/admin/data-curve/index.tsx
+++ b/kafka-manager-console/src/container/admin/data-curve/index.tsx
@@ -6,6 +6,7 @@ import { curveKeys, CURVE_KEY_MAP, PERIOD_RADIO_MAP, PERIOD_RADIO } from './conf
 import moment = require('moment');
 import { observer } from 'mobx-react';
 import { timeStampStr } from 'constants/strategy';
+import { adminMonitor } from 'store/admin-monitor';

@observer
 export class DataCurveFilter extends React.Component {
@@ -21,6 +22,7 @@ export class DataCurveFilter extends React.Component {
  }

  public refreshAll = () => {
+    adminMonitor.setRequestId(null);
    Object.keys(curveKeys).forEach((c: curveKeys) => {
      const { typeInfo, curveInfo: option } = CURVE_KEY_MAP.get(c);
      const { parser } = typeInfo;
@@ -32,7 +34,7 @@ export class DataCurveFilter extends React.Component {
    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>)}
+          {PERIOD_RADIO.map(p => <Radio.Button key={p.key} value={p.key}>{p.label}</Radio.Button>)}
        </Radio.Group>
        <DatePicker.RangePicker
          format={timeStampStr}
--- a/kafka-manager-console/src/container/admin/index.tsx
+++ b/kafka-manager-console/src/container/admin/index.tsx
@@ -11,3 +11,5 @@ export * from './operation-management/migration-detail';
 export * from './configure-management';
 export * from './individual-bill';
 export * from './bill-detail';
+export * from './operation-record';
+
--- a/kafka-manager-console/src/container/admin/operation-record/config.tsx
+++ b/kafka-manager-console/src/container/admin/operation-record/config.tsx
@@ -0,0 +1,134 @@
+import * as React from 'react';
+import { cellStyle } from 'constants/table';
+
+import { Tooltip } from 'antd';
+import { admin } from 'store/admin';
+import moment = require('moment');
+
+const moduleList = [
+  { moduleId: 0, moduleName: 'Topic' },
+  { moduleId: 1, moduleName: '应用' },
+  { moduleId: 2, moduleName: '配额' },
+  { moduleId: 3, moduleName: '权限' },
+  { moduleId: 4, moduleName: '集群' },
+  { moduleId: 5, moduleName: '分区' },
+  { moduleId: 6, moduleName: 'Gateway配置' },
+]
+
+export const operateList = {
+  0: '新增',
+  1: '删除',
+  2: '修改'
+}
+
+
+// [
+//   { operate: '新增', operateId: 0 },
+//   { operate: '删除', operateId: 1 },
+//   { operate: '修改', operateId: 2 },
+// ]
+
+export const getJarFuncForm: any = (props: any) => {
+  const formMap = [
+    {
+      key: 'moduleId',
+      label: '模块',
+      type: 'select',
+      attrs: {
+        style: {
+          width: '130px'
+        },
+        placeholder: '请选择模块',
+      },
+      options: moduleList.map(item => {
+        return {
+          label: item.moduleName,
+          value: item.moduleId
+        }
+      }),
+      formAttrs: {
+        initialvalue: 0,
+      },
+    },
+    {
+      key: 'operator',
+      label: '操作人',
+      type: 'input',
+      attrs: {
+        style: {
+          width: '170px'
+        },
+        placeholder: '请输入操作人'
+      },
+      getvaluefromevent: (event: any) => {
+        return event.target.value.replace(/\s+/g, '')
+      },
+    },
+    // {
+    //   key: 'resource',
+    //   label: '资源名称',
+    //   type: 'input',
+    //   attrs: {
+    //     style: {
+    //       width: '170px'
+    //     },
+    //     placeholder: '请输入资源名称'
+    //   },
+    // },
+    // {
+    //   key: 'content',
+    //   label: '操作内容',
+    //   type: 'input',
+    //   attrs: {
+    //     style: {
+    //       width: '170px'
+    //     },
+    //     placeholder: '请输入操作内容'
+    //   },
+    // },
+  ]
+  return formMap;
+}
+export const getOperateColumns = () => {
+
+  const columns: any = [
+    {
+      title: '模块',
+      dataIndex: 'module',
+      key: 'module',
+      align: 'center',
+      width: '12%'
+    },
+    {
+      title: '资源名称',
+      dataIndex: 'resource',
+      key: 'resource',
+      align: 'center',
+      width: '12%'
+    },
+    {
+      title: '操作内容',
+      dataIndex: 'content',
+      key: 'content',
+      align: 'center',
+      width: '25%',
+      onCell: () => ({
+        style: {
+          maxWidth: 350,
+          ...cellStyle,
+        },
+      }),
+      render: (text: string, record: any) => {
+        return (
+          <Tooltip placement="topLeft" title={text} >{text}</Tooltip>);
+      },
+    },
+    {
+      title: '操作人',
+      dataIndex: 'operator',
+      align: 'center',
+      width: '12%'
+    },
+  ];
+  return columns
+}
--- a/kafka-manager-console/src/container/admin/operation-record/index.tsx
+++ b/kafka-manager-console/src/container/admin/operation-record/index.tsx
@@ -0,0 +1,130 @@
+import * as React from 'react';
+import { observer } from 'mobx-react';
+import { SearchAndFilterContainer } from 'container/search-filter';
+import { IXFormWrapper, IMetaData, IRegister } from 'types/base-type';
+import { admin } from 'store/admin';
+import { customPagination, cellStyle } from 'constants/table';
+import { Table, Tooltip } from 'component/antd';
+import { timeFormat } from 'constants/strategy';
+import { SearchFormComponent } from '../searchForm';
+import { getJarFuncForm, operateList, getOperateColumns } from './config'
+import moment = require('moment');
+import { tableFilter } from 'lib/utils';
+
+@observer
+export class OperationRecord extends SearchAndFilterContainer {
+  public state: any = {
+    searchKey: '',
+    filteredInfo: null,
+    sortedInfo: null,
+  };
+
+  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 searchForm = (params: any) => {
+    // this.props.setFuncSubValue(params)
+    // getSystemFuncList(params).then(res => {
+    //   this.props.setSysFuncList(res.data)
+    //   this.props.setPagination(res.pagination)
+    // })
+    const { operator, moduleId } = params || {}
+    operator ? admin.getOperationRecordData(params) : admin.getOperationRecordData({ moduleId })
+    // getJarList(params).then(res => {
+    //   this.props.setJarList(res.data)
+    //   this.props.setPagination(res.pagination)
+    // })
+  }
+
+  public clearAll = () => {
+    this.setState({
+      filteredInfo: null,
+      sortedInfo: null,
+    });
+  };
+
+  public setHandleChange = (pagination: any, filters: any, sorter: any) => {
+    this.setState({
+      filteredInfo: filters,
+      sortedInfo: sorter,
+    });
+  }
+
+  public renderOperationRecordList() {
+    let { sortedInfo, filteredInfo } = this.state;
+    sortedInfo = sortedInfo || {};
+    filteredInfo = filteredInfo || {};
+    const operatingTime = Object.assign({
+      title: '操作时间',
+      dataIndex: 'modifyTime',
+      key: 'modifyTime',
+      align: 'center',
+      sorter: (a: any, b: any) => a.modifyTime - b.modifyTime,
+      render: (t: number) => moment(t).format(timeFormat),
+      width: '15%',
+      sortOrder: sortedInfo.columnKey === 'modifyTime' && sortedInfo.order,
+    });
+
+    const operatingPractice = Object.assign({
+      title: '行为',
+      dataIndex: 'operate',
+      key: 'operate',
+      align: 'center',
+      width: '12%',
+      filters: tableFilter<any>(this.getData(admin.oRList), 'operateId', operateList),
+      // filteredValue: filteredInfo.operate || null,
+      onFilter: (value: any, record: any) => {
+        return record.operateId === value
+      }
+    }, this.renderColumnsFilter('modifyTime'))
+
+    const columns = getOperateColumns()
+    columns.splice(0, 0, operatingTime);
+    columns.splice(3, 0, operatingPractice);
+    return (
+      <>
+        <div className="container">
+          <div className="table-operation-panel">
+            <SearchFormComponent
+              formMap={getJarFuncForm()}
+              onSubmit={(params: any) => this.searchForm(params)}
+              clearAll={() => this.clearAll()}
+              isReset={true}
+            />
+          </div>
+          <div className="table-wrapper">
+            <Table
+              rowKey="key"
+              loading={admin.loading}
+              dataSource={this.getData(admin.oRList)}
+              columns={columns}
+              pagination={customPagination}
+              bordered
+              onChange={this.setHandleChange}
+            />
+          </div>
+        </div>
+      </>
+    )
+  };
+
+  componentDidMount() {
+    admin.getOperationRecordData({ moduleId: 0 });
+  }
+
+  render() {
+    return <div>
+      {
+        this.renderOperationRecordList()
+      }
+    </div>
+  }
+}
--- a/kafka-manager-console/src/container/admin/platform-management.tsx
+++ b/kafka-manager-console/src/container/admin/platform-management.tsx
@@ -13,17 +13,20 @@ 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>
+        <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 isShow={false} />
+          </TabPane>
+          <TabPane tab="网关配置" key="4">
+            <ConfigureManagement isShow={true} />
+          </TabPane>
+        </Tabs>
      </>
    );
  }
--- a/kafka-manager-console/src/container/admin/searchForm.tsx
+++ b/kafka-manager-console/src/container/admin/searchForm.tsx
@@ -0,0 +1,120 @@
+import * as React from 'react';
+import { Select, Input, InputNumber, Form, Switch, Checkbox, DatePicker, Radio, Upload, Button, Icon, Tooltip } from 'component/antd';
+// import './index.less';
+const Search = Input.Search;
+export interface IFormItem {
+  key: string;
+  label: string;
+  type: string;
+  value?: string;
+  // 内部组件属性注入
+  attrs?: any;
+  // form属性注入
+  formAttrs?: any;
+  defaultValue?: string | number | any[];
+  rules?: any[];
+  invisible?: boolean;
+  getvaluefromevent: Function;
+}
+
+interface SerachFormProps {
+  formMap: IFormItem[];
+  // formData: any;
+  form: any;
+  onSubmit: Function;
+  isReset?: boolean;
+  clearAll: Function;
+  layout?: 'inline' | 'horizontal' | 'vertical';
+}
+
+export interface IFormSelect extends IFormItem {
+  options: Array<{ key?: string | number, value: string | number, label: string }>;
+}
+
+class SearchForm extends React.Component<SerachFormProps>{
+  public onSubmit = () => {
+    // this.props.onSubmit()
+    //
+  }
+
+  public renderFormItem(item: IFormItem) {
+    switch (item.type) {
+      default:
+      case 'input':
+        return <Input key={item.key} {...item.attrs} />;
+      case 'select':
+        return (
+          <Select
+            // size="small"
+            key={item.key}
+            {...item.attrs}
+            invisibleValue={item.formAttrs.invisibleValue}
+          >
+            {(item as IFormSelect).options && (item as IFormSelect).options.map((v, index) => (
+
+              <Select.Option
+                key={v.value || v.key || index}
+                value={v.value}
+              >
+                {v.label}
+                {/* <Tooltip placement='left' title={v.value}>
+                  {v.label}
+                </Tooltip> */}
+              </Select.Option>
+            ))}
+          </Select>
+        );
+    }
+  }
+
+  public theQueryClick = (value: any) => {
+    this.props.onSubmit(value)
+    this.props.clearAll()
+    // this.props.form.resetFields()
+  }
+  public resetClick = () => {
+    this.props.form.resetFields()
+    this.props.clearAll()
+    this.theQueryClick(this.props.form.getFieldsValue())
+  }
+
+  public render() {
+    const { form, formMap, isReset } = this.props;
+    const { getFieldDecorator, getFieldsValue } = form;
+    return (
+      <Form layout='inline' onSubmit={this.onSubmit}>
+        {
+          formMap.map(formItem => {
+            // const { initialValue, valuePropName } = this.handleFormItem(formItem, formData);
+            // const getFieldValue = {
+            //   initialValue,
+            //   rules: formItem.rules || [{ required: false, message: '' }],
+            //   valuePropName,
+            // };
+            return (
+              <Form.Item
+                key={formItem.key}
+                label={formItem.label}
+                {...formItem.formAttrs}
+              >
+                {getFieldDecorator(formItem.key, {
+                  initialValue: formItem.formAttrs?.initialvalue,
+                  getValueFromEvent: formItem?.getvaluefromevent,
+                })(
+                  this.renderFormItem(formItem),
+                )}
+              </Form.Item>
+            );
+          })
+        }
+        <Form.Item>
+          {
+            isReset && <Button style={{ width: '80px', marginRight: '20px' }} type="primary" onClick={() => this.resetClick()}>重置</Button>
+          }
+          <Button style={{ width: '80px' }} type="primary" onClick={() => this.theQueryClick(getFieldsValue())}>查询</Button>
+        </Form.Item>
+      </Form>
+    );
+  }
+}
+export const SearchFormComponent = Form.create<SerachFormProps>({ name: 'search-form' })(SearchForm);
--- a/kafka-manager-console/src/container/admin/user-management.tsx
+++ b/kafka-manager-console/src/container/admin/user-management.tsx
@@ -29,7 +29,7 @@ export class UserManagement extends SearchAndFilterContainer {
    searchKey = (searchKey + '').trim().toLowerCase();

    data = searchKey ? origin.filter((item: IUser) =>
-      (item.username !== undefined && item.username !== null) && item.username.toLowerCase().includes(searchKey as string)) : origin ;
+      (item.username !== undefined && item.username !== null) && item.username.toLowerCase().includes(searchKey as string)) : origin;
    return data;
  }

--- a/kafka-manager-console/src/container/alarm/add-alarm/alarm-select.tsx
+++ b/kafka-manager-console/src/container/alarm/add-alarm/alarm-select.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { alarm } from 'store/alarm';
 import { IMonitorGroups } from 'types/base-type';
-import { getValueFromLocalStorage, setValueToLocalStorage } from 'lib/local-storage';
+import { getValueFromLocalStorage, setValueToLocalStorage, deleteValueFromLocalStorage } from 'lib/local-storage';
 import { VirtualScrollSelect } from '../../../component/virtual-scroll-select';

 interface IAlarmSelectProps {
@@ -36,6 +36,10 @@ export class AlarmSelect extends React.Component<IAlarmSelectProps> {
    onChange && onChange(params);
  }

+  public componentWillUnmount() {
+    deleteValueFromLocalStorage('monitorGroups');
+  }
+
  public render() {
    const { value, isDisabled } = this.props;
    return (
--- a/kafka-manager-console/src/container/alarm/add-alarm/filter-form.tsx
+++ b/kafka-manager-console/src/container/alarm/add-alarm/filter-form.tsx
@@ -149,9 +149,9 @@ export class DynamicSetFilter extends React.Component<IDynamicProps> {
  public handleSelectChange = (e: string, type: 'topic' | 'consumerGroup' | 'location') => {
    switch (type) {
      case 'topic':
-        if (!this.clusterId) {
-          return message.info('请选择集群');
-        }
+        // if (!this.clusterId) {
+        //   return message.info('请选择集群');
+        // }
        this.topicName = e;
        const type = this.dealMonitorType();
        if (['kafka-consumer-maxLag', 'kafka-consumer-maxDelayTime', 'kafka-consumer-lag'].indexOf(type) > -1) {
--- a/kafka-manager-console/src/container/alarm/alarm-list.tsx
+++ b/kafka-manager-console/src/container/alarm/alarm-list.tsx
@@ -9,6 +9,7 @@ import { pagination } from 'constants/table';
 import { urlPrefix } from 'constants/left-menu';
 import { alarm } from 'store/alarm';
 import 'styles/table-filter.less';
+import { Link } from 'react-router-dom';

@observer
 export class AlarmList extends SearchAndFilterContainer {
@@ -24,7 +25,7 @@ export class AlarmList extends SearchAndFilterContainer {
    if (app.active !== '-1' || searchKey !== '') {
      data = origin.filter(d =>
        ((d.name !== undefined && d.name !== null) && d.name.toLowerCase().includes(searchKey as string)
-        || ((d.operator !== undefined && d.operator !== null) && d.operator.toLowerCase().includes(searchKey as string)))
+          || ((d.operator !== undefined && d.operator !== null) && d.operator.toLowerCase().includes(searchKey as string)))
        && (app.active === '-1' || d.appId === (app.active + '')),
      );
    } else {
@@ -55,9 +56,7 @@ export class AlarmList extends SearchAndFilterContainer {
        {this.renderSearch('名称：', '请输入告警规则或者操作人')}
        <li className="right-btn-1">
          <Button type="primary">
-            <a href={`${urlPrefix}/alarm/add`}>
-              新增规则
-            </a>
+            <Link to={`/alarm/add`}>新增规则</Link>
          </Button>
        </li>
      </>
@@ -68,6 +67,9 @@ export class AlarmList extends SearchAndFilterContainer {
    if (!alarm.monitorStrategies.length) {
      alarm.getMonitorStrategies();
    }
+    if (!app.data.length) {
+      app.getAppList();
+    }
  }

  public render() {
--- a/kafka-manager-console/src/container/app/app-list.tsx
+++ b/kafka-manager-console/src/container/app/app-list.tsx
@@ -52,8 +52,7 @@ export class CommonAppList extends SearchAndFilterContainer {
          },
        }),
        render: (text: string, record: IAppItem) => {
-          return (
-            <Tooltip placement="bottomLeft" title={record.name}>{text}</Tooltip>);
+          return (<Tooltip placement="bottomLeft" title={record.name}>{text}</Tooltip>);
        },
      },
      {
@@ -103,7 +102,7 @@ export class CommonAppList extends SearchAndFilterContainer {
  }

  public getOnlineConnect(record: IAppItem) {
-    modal.showOfflineAppModal(record.appId);
+    modal.showOfflineAppNewModal(record.appId);
  }

  public getData<T extends IAppItem>(origin: T[]) {
@@ -114,7 +113,7 @@ export class CommonAppList extends SearchAndFilterContainer {
    data = searchKey ? origin.filter((item: IAppItem) =>
      ((item.name !== undefined && item.name !== null) && item.name.toLowerCase().includes(searchKey as string)) ||
      ((item.principals !== undefined && item.principals !== null) && item.principals.toLowerCase().includes(searchKey as string)) ||
-      ((item.appId !== undefined && item.appId !== null) && item.appId.toLowerCase().includes(searchKey as string)) ) : origin;
+      ((item.appId !== undefined && item.appId !== null) && item.appId.toLowerCase().includes(searchKey as string))) : origin;

    return data;
  }
--- a/kafka-manager-console/src/container/cluster/my-cluster.tsx
+++ b/kafka-manager-console/src/container/cluster/my-cluster.tsx
@@ -29,16 +29,16 @@ export class MyCluster extends SearchAndFilterContainer {
  public applyCluster() {
    const xFormModal = {
      formMap: [
-        {
-          key: 'idc',
-          label: '数据中心',
-          defaultValue: region.regionName,
-          rules: [{ required: true, message: '请输入数据中心' }],
-          attrs: {
-            placeholder: '请输入数据中心',
-            disabled: true,
-          },
-        },
+        // {
+        //   key: 'idc',
+        //   label: '数据中心',
+        //   defaultValue: region.regionName,
+        //   rules: [{ required: true, message: '请输入数据中心' }],
+        //   attrs: {
+        //     placeholder: '请输入数据中心',
+        //     disabled: true,
+        //   },
+        // },
        {
          key: 'appId',
          label: '所属应用',
@@ -91,7 +91,7 @@ export class MyCluster extends SearchAndFilterContainer {
      ],
      formData: {},
      visible: true,
-      title: '申请集群',
+      title: <div><span>申请集群</span><a className='applicationDocument' href="https://github.com/didi/Logi-KafkaManager/blob/master/docs/user_guide/resource_apply.md" target='_blank'>资源申请文档</a></div>,
      okText: '确认',
      onSubmit: (value: any) => {
        value.idc = region.currentRegion;
--- a/kafka-manager-console/src/container/drawer/data-migration.tsx
+++ b/kafka-manager-console/src/container/drawer/data-migration.tsx
@@ -117,12 +117,12 @@ class DataMigrationFormTable extends React.Component<IFormTableProps> {
      key: 'maxThrottle',
      editable: true,
    }, {
-      title: '迁移保存时间(h)',
+      title: '迁移后Topic保存时间(h)',
      dataIndex: 'reassignRetentionTime',
      key: 'reassignRetentionTime',
      editable: true,
    }, {
-      title: '原本保存时间(h)',
+      title: '原Topic保存时间(h)',
      dataIndex: 'retentionTime',
      key: 'retentionTime', // originalRetentionTime
      width: '132px',
--- a/kafka-manager-console/src/container/expert/topic-governance/index.tsx
+++ b/kafka-manager-console/src/container/expert/topic-governance/index.tsx
@@ -133,15 +133,15 @@ export class GovernanceTopic extends SearchAndFilterContainer {
        width: '30%',
        sorter: (a: IResource, b: IResource) => a.topicName.charCodeAt(0) - b.topicName.charCodeAt(0),
        render: (text: string, item: IResource) =>
-          (
-            <Tooltip placement="bottomLeft" title={text}>
-              <a
-                // tslint:disable-next-line:max-line-length
-                href={`${this.urlPrefix}/topic/topic-detail?clusterId=${item.clusterId}&topic=${item.topicName}&isPhysicalClusterId=true&region=${region.currentRegion}`}
-              >
-                {text}
-              </a>
-            </Tooltip>),
+        (
+          <Tooltip placement="bottomLeft" title={text}>
+            <a
+              // tslint:disable-next-line:max-line-length
+              href={`${this.urlPrefix}/topic/topic-detail?clusterId=${item.clusterId}&topic=${item.topicName}&isPhysicalClusterId=true&region=${region.currentRegion}`}
+            >
+              {text}
+            </a>
+          </Tooltip>),
      },
      {
        title: '所在集群',
@@ -215,7 +215,7 @@ export class GovernanceTopic extends SearchAndFilterContainer {

    return (
      <>
-      {this.pendingTopic(this.getData(expert.resourceData))}
+        {this.pendingTopic(this.getData(expert.resourceData))}
      </>
    );
  }
--- a/kafka-manager-console/src/container/header/index.less
+++ b/kafka-manager-console/src/container/header/index.less
@@ -16,6 +16,14 @@
      line-height: 64px;
      vertical-align: middle;
    }
+    .kafka-header-version{
+      display: inline-block;
+      vertical-align: middle;
+      padding-top:5px;
+      font-size: 12px;
+      margin-left:10px;
+      color:#a0a0a0;
+    }
  }

  .mid-content {
--- a/kafka-manager-console/src/container/header/index.tsx
+++ b/kafka-manager-console/src/container/header/index.tsx
@@ -145,6 +145,8 @@ export const Header = observer((props: IHeader) => {
      <div className="left-content">
        <img className="kafka-header-icon" src={logoUrl} alt="" />
        <span className="kafka-header-text">Kafka Manager</span>
+        <a className='kafka-header-version' href="https://github.com/didi/Logi-KafkaManager/releases" target='_blank'>v2.4.0</a>
+        {/* 添加版本超链接 */}
      </div>
      <div className="mid-content">
        {headerMenu.map((item: IMenuItem, index: number) =>
--- a/kafka-manager-console/src/container/modal/admin/cluster.ts
+++ b/kafka-manager-console/src/container/modal/admin/cluster.ts
@@ -22,11 +22,11 @@ export const showEditClusterTopic = (item: IClusterTopics) => {
      },
      {
        key: 'appId',
-        label: '应用ID',
+        label: '应用名称',
        type: 'select',
        options: app.adminAppData.map(item => {
          return {
-            label: item.appId,
+            label: item.name,
            value: item.appId,
          };
        }),
@@ -61,6 +61,7 @@ export const showEditClusterTopic = (item: IClusterTopics) => {
        attrs: {
          placeholder: '请输入保存时间',
          suffix: '小时',
+          prompttype: '修改保存时间，预计一分钟左右生效!'
        },
      },
      {
--- a/kafka-manager-console/src/container/modal/admin/confirm-detail-topic.tsx
+++ b/kafka-manager-console/src/container/modal/admin/confirm-detail-topic.tsx
@@ -35,7 +35,6 @@ class CustomForm extends React.Component<IXFormProps> {
    this.props.form.validateFields((err: any, values: any) => {
      const deleteData = this.props.formData;
      if (!err) {
-        // console.log('values', values);
        if (values.topicName !== this.props.formData.topicName) {
          notification.error({ message: 'topic名称不正确，请重新输入' });
        } else {
@@ -77,7 +76,6 @@ class CustomForm extends React.Component<IXFormProps> {
  }

  public render() {
-    // console.log('props', this.props);
    const { formData = {} as any, visible } = this.props;
    const { getFieldDecorator } = this.props.form;
    let metadata = [] as IBrokersMetadata[];
--- a/kafka-manager-console/src/container/modal/admin/expand-partition.tsx
+++ b/kafka-manager-console/src/container/modal/admin/expand-partition.tsx
@@ -111,11 +111,11 @@ class CustomForm extends React.Component<IXFormProps> {
            })(<Input placeholder="请输入分区数" />)}
          </Form.Item>
          <Form.Item label="类型">
-            {/* <Form.Item label={this.state.checked ? 'Region类型' : 'Borker类型'} > */}
+            {/* <Form.Item label={this.state.checked ? 'Region类型' : 'Broker类型'} > */}
            {/* <Switch onChange={(checked) => this.onSwitchChange(checked)} /> */}
            <Radio.Group value={this.state.checked ? 'region' : 'broker'} onChange={(e) => { this.onSwitchChange(e.target.value === 'region' ? true : false); }}>
              <Radio.Button value="region">Region类型</Radio.Button>
-              <Radio.Button value="broker">Borker类型</Radio.Button>
+              <Radio.Button value="broker">Broker类型</Radio.Button>
            </Radio.Group>
          </Form.Item>
          <Form.Item label="brokerIdList" style={{ display: this.state.checked ? 'none' : '' }}>
--- a/kafka-manager-console/src/container/modal/admin/task.ts
+++ b/kafka-manager-console/src/container/modal/admin/task.ts
@@ -28,8 +28,8 @@ const updateInputModal = (status?: string) => {
  formMap[4].invisible = status === 'region';
  formMap[5].invisible = status !== 'region';

-  formMap[4].rules = [{required: status !== 'region'}];
-  formMap[5].rules = [{required: status === 'region'}];
+  formMap[4].rules = [{ required: status !== 'region' }];
+  formMap[5].rules = [{ required: status === 'region' }];
  // tslint:disable-next-line:no-unused-expression
  wrapper.ref && wrapper.ref.updateFormMap$(formMap, wrapper.xFormWrapper.formData);
 };
@@ -103,7 +103,7 @@ export const createMigrationTasks = () => {
          label: 'Region',
          value: 'region',
        }, {
-          label: 'Borker',
+          label: 'Broker',
          value: 'broker',
        }],
        rules: [{
@@ -141,7 +141,7 @@ export const createMigrationTasks = () => {
          placeholder: '请选择目标Region',
        },
      },
-      
+
      {
        key: 'beginTime',
        label: '计划开始时间',
@@ -158,26 +158,26 @@ export const createMigrationTasks = () => {
      },
      {
        key: 'originalRetentionTime',
-        label: '原本保存时间',
+        label: '原Topic保存时间',
        rules: [{
          required: true,
-          message: '请输入原本保存时间',
+          message: '请输入原Topic保存时间',
        }],
        attrs: {
          disabled: true,
-          placeholder: '请输入原本保存时间',
+          placeholder: '请输入原Topic保存时间',
          suffix: '小时',
        },
      },
      {
        key: 'reassignRetentionTime',
-        label: '迁移保存时间',
+        label: '迁移后Topic保存时间',
        rules: [{
          required: true,
-          message: '请输入迁移保存时间',
+          message: '请输入迁移后Topic保存时间',
        }],
        attrs: {
-          placeholder: '请输入迁移保存时间',
+          placeholder: '请输入迁移后Topic保存时间',
          suffix: '小时',
        },
      },
--- a/kafka-manager-console/src/container/modal/admin/user.ts
+++ b/kafka-manager-console/src/container/modal/admin/user.ts
@@ -24,26 +24,111 @@ export const showApplyModal = (record?: IUser) => {
          value: +item,
        })),
        rules: [{ required: true, message: '请选择角色' }],
-      }, {
-        key: 'password',
-        label: '密码',
-        type: FormItemType.inputPassword,
-        rules: [{ required: !record, message: '请输入密码' }],
-      },
+      }, 
+      // {
+      //   key: 'password',
+      //   label: '密码',
+      //   type: FormItemType.inputPassword,
+      //   rules: [{ required: !record, message: '请输入密码' }],
+      // },
    ],
    formData: record || {},
    visible: true,
    title: record ? '修改用户' : '新增用户',
    onSubmit: (value: IUser) => {
      if (record) {
-        return users.modfiyUser(value).then(() => {
-          message.success('操作成功');
-        });
+        return users.modfiyUser(value)
      }
      return users.addUser(value).then(() => {
        message.success('操作成功');
      });
    },
  };
+  if(!record){
+   let formMap: any = xFormModal.formMap
+    formMap.splice(2, 0,{
+        key: 'password',
+        label: '密码',
+        type: FormItemType.inputPassword,
+        rules: [{ required: !record, message: '请输入密码' }],
+      },)
+  }
  wrapper.open(xFormModal);
 };
+
+// const handleCfPassword = (rule:any, value:any, callback:any)=>{
+//   if()
+// }
+export const showApplyModalModifyPassword = (record: IUser) => {
+  const xFormModal:any = {
+    formMap: [
+      // {
+      //   key: 'oldPassword',
+      //   label: '旧密码',
+      //   type: FormItemType.inputPassword,
+      //   rules: [{ 
+      //     required: true, 
+      //     message: '请输入旧密码',
+      //   }]
+      // },
+      {
+        key: 'newPassword',
+        label: '新密码',
+        type: FormItemType.inputPassword,
+        rules: [
+          { 
+            required: true, 
+            message: '请输入新密码',
+          }
+        ],
+        attrs:{
+          onChange:(e:any)=>{
+            users.setNewPassWord(e.target.value)
+          }
+        }
+      }, 
+      {
+        key: 'confirmPassword',
+        label: '确认密码',
+        type: FormItemType.inputPassword,
+        rules: [
+          { 
+            required: true, 
+            message: '请确认密码',
+            validator:(rule:any, value:any, callback:any) => {
+              // 验证新密码的一致性
+              if(users.newPassWord){
+                if(value!==users.newPassWord){
+                  rule.message = "两次密码输入不一致";
+                  callback('两次密码输入不一致')
+                }else{
+                  callback()
+                }
+              }else if(!value){
+                rule.message = "请确认密码";
+                callback('请确认密码');
+              }else{
+                callback()
+              }
+            },
+          }
+        ],
+      },
+    ],
+    formData: record || {},
+    visible: true,
+    title: '修改密码',
+    onSubmit: (value: IUser) => {
+      let params:any = {
+        username:record?.username,
+        password:value.confirmPassword,
+        role:record?.role,
+      }
+      return users.modfiyUser(params).then(() => {
+          message.success('操作成功');
+      });
+    },
+  }
+  wrapper.open(xFormModal);
+};
+
--- a/kafka-manager-console/src/container/modal/admin/version.ts
+++ b/kafka-manager-console/src/container/modal/admin/version.ts
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { notification } from 'component/antd';
-import { IUploadFile, IConfigure } from 'types/base-type';
+import { notification, Select } from 'component/antd';
+import { IUploadFile, IConfigure, IConfigGateway } from 'types/base-type';
 import { version } from 'store/version';
 import { admin } from 'store/admin';
 import { wrapper } from 'store';
@@ -97,8 +97,8 @@ const updateFormModal = (type: number) => {
    formMap[2].attrs = {
      accept: version.fileSuffix,
    },
-    // tslint:disable-next-line:no-unused-expression
-    wrapper.ref && wrapper.ref.updateFormMap$(formMap, wrapper.xFormWrapper.formData, true);
+      // tslint:disable-next-line:no-unused-expression
+      wrapper.ref && wrapper.ref.updateFormMap$(formMap, wrapper.xFormWrapper.formData, true);
  }
 };

@@ -157,8 +157,8 @@ export const showModifyModal = (record: IUploadFile) => {

 export const showConfigureModal = async (record?: IConfigure) => {
  if (record) {
-    const result:any = await format2json(record.configValue);
-    record.configValue = result.result;
+    const result: any = await format2json(record.configValue);
+    record.configValue = result.result || record.configValue;
  }
  const xFormModal = {
    formMap: [
@@ -193,10 +193,69 @@ export const showConfigureModal = async (record?: IConfigure) => {
        return admin.editConfigure(value).then(data => {
          notification.success({ message: '编辑配置成功' });
        });
+      } else {
+        return admin.addNewConfigure(value).then(data => {
+          notification.success({ message: '新建配置成功' });
+        });
+      }
+    },
+  };
+  wrapper.open(xFormModal);
+};
+
+export const showConfigGatewayModal = async (record?: IConfigGateway) => {
+  const xFormModal = {
+    formMap: [
+      {
+        key: 'type',
+        label: '配置类型',
+        rules: [{ required: true, message: '请选择配置类型' }],
+        type: "select",
+        options: admin.gatewayType.map((item: any, index: number) => ({
+          key: index,
+          label: item.configName,
+          value: item.configType,
+        })),
+        attrs: {
+          disabled: record ? true : false,
+        }
+      }, {
+        key: 'name',
+        label: '配置键',
+        rules: [{ required: true, message: '请输入配置键' }],
+        attrs: {
+          disabled: record ? true : false,
+        },
+      }, {
+        key: 'value',
+        label: '配置值',
+        type: 'text_area',
+        rules: [{
+          required: true,
+          message: '请输入配置值',
+        }],
+      }, {
+        key: 'description',
+        label: '描述',
+        type: 'text_area',
+        rules: [{ required: true, message: '请输入备注' }],
+      },
+    ],
+    formData: record || {},
+    visible: true,
+    isWaitting: true,
+    title: `${record ? '编辑配置' : '新建配置'}`,
+    onSubmit: async (parmas: IConfigGateway) => {
+      if (record) {
+        parmas.id = record.id;
+        return admin.editConfigGateway(parmas).then(data => {
+          notification.success({ message: '编辑配置成功' });
+        });
+      } else {
+        return admin.addNewConfigGateway(parmas).then(data => {
+          notification.success({ message: '新建配置成功' });
+        });
      }
-      return admin.addNewConfigure(value).then(data => {
-        notification.success({ message: '新建配置成功' });
-      });
    },
  };
  wrapper.open(xFormModal);
--- a/kafka-manager-console/src/container/modal/app.tsx
+++ b/kafka-manager-console/src/container/modal/app.tsx
@@ -85,7 +85,7 @@ export const showEditModal = (record?: IAppItem, from?: string, isDisabled?: boo
    ],
    formData: record,
    visible: true,
-    title: isDisabled ? '详情' : record ? '编辑' : <div><span>应用申请</span><a className='applicationDocument' href="###" target='_blank'>应用申请文档</a></div>,
+    title: isDisabled ? '详情' : record ? '编辑' : <div><span>应用申请</span><a className='applicationDocument' href="https://github.com/didi/Logi-KafkaManager/blob/master/docs/user_guide/resource_apply.md" target='_blank'>资源申请文档</a></div>,
    // customRenderElement: isDisabled ? '' : record ? '' : <span className="tips">集群资源充足时，预计1分钟自动审批通过</span>,
    isWaitting: true,
    onSubmit: (value: IAppItem) => {
--- a/kafka-manager-console/src/container/modal/expert.tsx
+++ b/kafka-manager-console/src/container/modal/expert.tsx
@@ -20,14 +20,14 @@ export interface IRenderData {
 }

 export const migrationModal = (renderData: IRenderData[]) => {
- const xFormWrapper = {
+  const xFormWrapper = {
    type: 'drawer',
    visible: true,
    width: 1000,
    title: '新建迁移任务',
-    customRenderElement: <WrappedDataMigrationFormTable data={renderData}/>,
+    customRenderElement: <WrappedDataMigrationFormTable data={renderData} />,
    nofooter: true,
    noform: true,
  };
- wrapper.open(xFormWrapper as IXFormWrapper);
+  wrapper.open(xFormWrapper as IXFormWrapper);
 };
--- a/kafka-manager-console/src/container/modal/offline-app-modal-new.tsx
+++ b/kafka-manager-console/src/container/modal/offline-app-modal-new.tsx
@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { Table, Modal, Tooltip, Icon, message, notification, Alert, Button } from 'component/antd';
+import { app } from 'store/app';
+import { getApplyOnlineColumns } from 'container/topic/config';
+import { observer } from 'mobx-react';
+import { modal } from 'store/modal';
+import { users } from 'store/users';
+import { urlPrefix } from 'constants/left-menu';
+import { region } from 'store';
+
+@observer
+export class ConnectAppNewList extends React.Component {
+
+  public componentDidMount() {
+    app.getAppsConnections(modal.params);
+  }
+
+  public handleCancel = () => {
+    app.setAppsConnections([]);
+    modal.close();
+  }
+
+  public handleSubmit = () => {
+    const connectionList = app.appsConnections;
+    if (connectionList && connectionList.length) {
+      return message.warning('存在连接信息，无法申请下线！');
+    }
+    const offlineParams = {
+      type: 11,
+      applicant: users.currentUser.username,
+      description: '',
+      extensions: JSON.stringify({ appId: modal.params }),
+    };
+    app.applyAppOffline(offlineParams).then((data: any) => {
+      notification.success({ message: '申请下线成功' });
+      window.location.href = `${urlPrefix}/user/order-detail/?orderId=${data.id}&region=${region.currentRegion}`;
+    });
+    modal.close();
+  }
+
+  public render() {
+    const connectionList = app.appsConnections;
+    return (
+      <>
+        <Modal
+          visible={true}
+          className="stream-debug-modal"
+          title="提示"
+          maskClosable={false}
+          onCancel={this.handleCancel}
+          // onOk={this.handleSubmit}
+          // okText="确认"
+          // cancelText="取消"
+          okButtonProps={{ disabled: app.connectLoading || !!app.appsConnections.length }}
+          footer={connectionList && connectionList.length ?
+            <Button type="primary" onClick={this.handleCancel}>确定</Button>
+            :
+            <>
+              <Button onClick={this.handleCancel}>取消</Button>
+              <Button type="primary" onClick={this.handleSubmit}>确定</Button>
+            </>
+          }
+          width={500}
+        >
+          <div style={{ textAlign: 'center', fontWeight: "bolder" }}>
+            {
+              connectionList && connectionList.length
+                ?
+                <span>该应用已与Topic关联，请先解除应用与Topic之间的关系。<a href={`${urlPrefix}/topic/app-detail?appId=${modal.params}`}>点击查看</a></span>
+                :
+                <span>应用下线后，AppID、密钥将会失效，请谨慎操作！</span>
+            }
+          </div>
+        </Modal>
+      </>
+    );
+  }
+}
--- a/kafka-manager-console/src/container/modal/order.tsx
+++ b/kafka-manager-console/src/container/modal/order.tsx
@@ -4,6 +4,7 @@ import { message, Icon, notification, Modal, Table, Tooltip } from 'component/an
 import { IApprovalOrder, IBaseOrder, IOrderInfo } from 'types/base-type';
 import { admin } from 'store/admin';
 import { modal } from 'store/modal';
+import { cluster } from 'store/cluster';
 import { cellStyle } from 'constants/table';
 import * as React from 'react';

@@ -37,6 +38,12 @@ const renderModalTilte = (type: number, status: number) => {
 export const showApprovalModal = (info: IOrderInfo, status: number, from?: string) => {
  const { id, type } = info;
  const formMap = [{
+    key: 'clusterId',
+    label: '所属集群',
+    type: 'input_number',
+    defaultValue: info.detail.logicalClusterName,
+    attrs: { disabled: true },
+  }, {
    key: 'partitionNum',
    label: '分区数',
    type: 'input_number',
@@ -75,8 +82,8 @@ export const showApprovalModal = (info: IOrderInfo, status: number, from?: strin
    // }],
    rules: [{
      required: true,
-      message: '请输入大于12小于999的整数',
-      pattern: /^([1-9]{1}[0-9]{2})$|^([2-9]{1}[0-9]{1})$|^(1[2-9]{1})$/,
+      message: '请输入大于0小于10000的整数',
+      pattern: /^\+?[1-9]\d{0,3}(\.\d*)?$/,
    }],
  }, {
    key: 'species',
@@ -87,7 +94,7 @@ export const showApprovalModal = (info: IOrderInfo, status: number, from?: strin
      label: 'Region',
      value: 'region',
    }, {
-      label: 'Borker',
+      label: 'Broker',
      value: 'broker',
    }],
    rules: [{ required: false, message: '请选择类型' }],
--- a/kafka-manager-console/src/container/modal/topic.tsx
+++ b/kafka-manager-console/src/container/modal/topic.tsx
@@ -88,7 +88,7 @@ export const applyTopic = () => {
    ],
    formData: {},
    visible: true,
-    title: '申请Topic',
+    title: <div><span>申请Topic</span><a className='applicationDocument' href="https://github.com/didi/Logi-KafkaManager/blob/master/docs/user_guide/resource_apply.md" target='_blank'>资源申请文档</a></div>,
    okText: '确认',
    // customRenderElement: <span className="tips">集群资源充足时，预计1分钟自动审批通过</span>,
    isWaitting: true,
@@ -399,8 +399,8 @@ export const updateAllTopicFormModal = () => {
  const formMap = wrapper.xFormWrapper.formMap;
  if (topic.authorities) {
    const { consume, send, checkStatus } = judgeAccessStatus(topic.authorities.access);
-    formMap[3].defaultValue = checkStatus;
-    formMap[3].options = [{
+    formMap[2].defaultValue = checkStatus;
+    formMap[2].options = [{
      label: `消费权限${consume ? '（已拥有）' : ''}`,
      value: '1',
      disabled: consume,
@@ -409,7 +409,7 @@ export const updateAllTopicFormModal = () => {
      value: '2',
      disabled: send,
    }];
-    formMap[3].rules = [{
+    formMap[2].rules = [{
      required: true,
      validator: (rule: any, value: any, callback: any) => getPowerValidator(rule, value, callback, checkStatus, 'allTopic'),
    }];
@@ -476,7 +476,6 @@ export const showAllPermissionModal = (item: ITopic) => {

 const showAllPermission = (appId: string, item: ITopic, access: number) => {
  const { consume, send, checkStatus } = judgeAccessStatus(access);
-
  const xFormModal = {
    formMap: [
      {
@@ -489,16 +488,6 @@ const showAllPermission = (appId: string, item: ITopic, access: number) => {
          disabled: true,
        },
      },
-      {
-        key: 'clusterName',
-        label: '集群名称',
-        defaultValue: item.clusterName,
-        rules: [{ required: true, message: '请输入集群名称' }],
-        attrs: {
-          placeholder: '请输入集群名称',
-          disabled: true,
-        },
-      },
      {
        key: 'appId',
        label: '绑定应用',
@@ -526,6 +515,26 @@ const showAllPermission = (appId: string, item: ITopic, access: number) => {
          validator: (rule: any, value: any, callback: any) => getPowerValidator(rule, value, callback, checkStatus, 'allTopic'),
        }],
      },
+      // {
+      //   key: 'clusterName',
+      //   label: '集群名称',
+      //   defaultValue: item.clusterName,
+      //   rules: [{ required: true, message: '请输入集群名称' }],
+      //   attrs: {
+      //     placeholder: '请输入集群名称',
+      //     disabled: true,
+      //   },
+      // },
+      // {
+      //   key: 'clusterName',
+      //   label: '集群名称',
+      //   defaultValue: item.clusterName,
+      //   rules: [{ required: true, message: '请输入集群名称' }],
+      //   attrs: {
+      //     placeholder: '请输入集群名称',
+      //     disabled: true,
+      //   },
+      // },
      {
        key: 'description',
        label: '申请原因',
@@ -587,16 +596,16 @@ export const showPermissionModal = (item: ITopic) => {
          disabled: true,
        },
      },
-      {
-        key: 'clusterName',
-        label: '集群名称',
-        defaultValue: item.clusterName,
-        rules: [{ required: true, message: '请输入集群名称' }],
-        attrs: {
-          placeholder: '请输入集群名称',
-          disabled: true,
-        },
-      },
+      // {
+      //   key: 'clusterName',
+      //   label: '集群名称',
+      //   defaultValue: item.clusterName,
+      //   rules: [{ required: true, message: '请输入集群名称' }],
+      //   attrs: {
+      //     placeholder: '请输入集群名称',
+      //     disabled: true,
+      //   },
+      // },
      {
        key: 'appName',
        label: '绑定应用',
--- a/kafka-manager-console/src/container/search-filter.tsx
+++ b/kafka-manager-console/src/container/search-filter.tsx
@@ -194,7 +194,7 @@ export class SearchAndFilterContainer extends React.Component<any, ISearchAndFil
    );
  }

-  public renderColumnsFilter = (type: string) => {
+  public renderColumnsFilter = (type: string, params?: any) => {
    return {
      filterIcon: this.renderFilterIcon.bind(null, type),
      filterDropdownVisible: this.state[type] as boolean,
--- a/kafka-manager-console/src/container/staff-select.tsx
+++ b/kafka-manager-console/src/container/staff-select.tsx
@@ -28,7 +28,8 @@ export class StaffSelect extends React.Component<IStaffSelectProps> {
  public getStaffList = () => {
    const { value } = this.props;
    const current = users.currentUser.username || getCookie('username');
-    const principals = value || (current ? [current] : []);
+    const principals = [''];
+    // const principals = value || (current ? [current] : []);
    const promises: any[] = [];

    for (const item of principals) {
@@ -64,7 +65,6 @@ export class StaffSelect extends React.Component<IStaffSelectProps> {
    const { value, isDisabled } = this.props;
    const current = users.currentUser.username || getCookie('username');
    const principals = value || (current ? [current] : []);
-
    return (
      <Select
        mode="multiple"
@@ -72,6 +72,7 @@ export class StaffSelect extends React.Component<IStaffSelectProps> {
        defaultValue={principals}
        onChange={(e: string[]) => this.handleChange(e)}
        onSearch={(e: string) => this.handleSearch(e)}
+        onFocus={() => this.getFocus()}
        disabled={isDisabled}
        {...searchProps}
      >
@@ -83,6 +84,10 @@ export class StaffSelect extends React.Component<IStaffSelectProps> {
    );
  }

+  public getFocus() {
+    this.getStaffList();
+  }
+
  public handleSearch(params: string) {
    debounce(() => {
      getStaff(params).then((data: IStaff[]) => {
@@ -98,9 +103,9 @@ export class StaffSelect extends React.Component<IStaffSelectProps> {
      });
    }, 300)();
  }
+
  public handleChange(params: string[]) {
    const { onChange } = this.props;
-
    // tslint:disable-next-line:no-unused-expression
    onChange && onChange(params);
  }
--- a/kafka-manager-console/src/container/topic/topic-detail/base-information.tsx
+++ b/kafka-manager-console/src/container/topic/topic-detail/base-information.tsx
@@ -129,16 +129,17 @@ export class BaseInformation extends React.Component<IInfoProps> {
  }

  public realTimeTraffic() {
-    const realTraffic = topic.realTraffic;
-    if (realTraffic) {
-      return (
-        <>
-          <Spin spinning={topic.realLoading}>
-            {renderTrafficTable(this.updateRealStatus, StatusGragh)}
-          </Spin>
-        </>
-      );
-    }
+    // const realTraffic = topic.realTraffic;
+
+    // if (realTraffic) {
+    return (
+      <>
+        <Spin spinning={topic.realLoading}>
+          {renderTrafficTable(this.updateRealStatus, StatusGragh)}
+        </Spin>
+      </>
+    );
+    // }
  }

  public realTimeConsume() {
--- a/kafka-manager-console/src/container/topic/topic-detail/connect-information.tsx
+++ b/kafka-manager-console/src/container/topic/topic-detail/connect-information.tsx
@@ -101,7 +101,9 @@ export class ConnectInformation extends SearchAndFilterContainer {
      <>
        <div className="k-row" >
          <ul className="k-tab">
-            <li>连接信息</li>
+            <li>
+              连接信息 <span style={{ color: '#a7a8a9', fontSize: '12px', padding: '0 15px' }}>展示近20分钟的连接信息</span>
+            </li>
            {this.renderSearch('', '请输入连接信息', 'searchKey')}
          </ul>
          {this.renderConnectionInfo(this.getData(topic.connectionInfo))}
--- a/kafka-manager-console/src/container/topic/topic-detail/group-id.tsx
+++ b/kafka-manager-console/src/container/topic/topic-detail/group-id.tsx
@@ -138,7 +138,7 @@ export class GroupID extends SearchAndFilterContainer {

  public renderConsumerDetails() {
    const consumerGroup = this.consumerGroup;
-    const columns = [{
+    const columns: any = [{
      title: 'Partition ID',
      dataIndex: 'partitionId',
      key: 'partitionId',
@@ -179,7 +179,8 @@ export class GroupID extends SearchAndFilterContainer {
      <>
        <div className="details-box">
          <b>{consumerGroup}</b>
-          <div>
+          <div style={{ display: 'flex' }}>
+            {this.renderSearch('', '请输入Consumer ID')}
            <Button onClick={this.backToPage}>返回</Button>
            <Button onClick={this.updateDetailsStatus}>刷新</Button>
            <Button onClick={() => this.showResetOffset()}>重置Offset</Button>
@@ -187,7 +188,7 @@ export class GroupID extends SearchAndFilterContainer {
        </div>
        <Table
          columns={columns}
-          dataSource={topic.consumeDetails}
+          dataSource={this.getDetailData(topic.consumeDetails)}
          rowKey="key"
          pagination={pagination}
        />
@@ -214,7 +215,12 @@ export class GroupID extends SearchAndFilterContainer {
      dataIndex: 'location',
      key: 'location',
      width: '34%',
-    },
+    }, {
+      title: '状态',
+      dataIndex: 'state',
+      key: 'state',
+      width: '34%',
+    }
    ];
    return (
      <>
@@ -236,7 +242,17 @@ export class GroupID extends SearchAndFilterContainer {

    data = searchKey ? origin.filter((item: IConsumerGroups) =>
      (item.consumerGroup !== undefined && item.consumerGroup !== null) && item.consumerGroup.toLowerCase().includes(searchKey as string),
-    ) : origin ;
+    ) : origin;
+    return data;
+  }
+
+  public getDetailData<T extends IConsumeDetails>(origin: T[]) {
+    let data: T[] = origin;
+    let { searchKey } = this.state;
+    searchKey = (searchKey + '').trim().toLowerCase();
+    data = searchKey ? origin.filter((item: IConsumeDetails) =>
+      (item.clientId !== undefined && item.clientId !== null) && item.clientId.toLowerCase().includes(searchKey as string),
+    ) : origin;
    return data;
  }

--- a/kafka-manager-console/src/container/topic/topic-detail/reset-offset.tsx
+++ b/kafka-manager-console/src/container/topic/topic-detail/reset-offset.tsx
@@ -71,32 +71,32 @@ class ResetOffset extends React.Component<any> {
    const { getFieldDecorator } = this.props.form;
    const { typeValue, offsetValue } = this.state;
    return (
-    <>
-        <Alert message="重置之前一定要关闭消费客户端！！！" type="warning" showIcon={true} />
-        <Alert message="重置之前一定要关闭消费客户端！！！" type="warning" showIcon={true} />
-        <Alert message="重置之前一定要关闭消费客户端！！！" type="warning" showIcon={true} className="mb-30"/>
+      <>
+        <Alert message="重置消费偏移前,请先关闭客户端,否则会重置失败 ！！！" type="warning" showIcon={true} />
+        <Alert message="关闭客户端后,请等待一分钟之后再重置消费偏移 ！！！" type="warning" showIcon={true} />
+        {/* <Alert message="重置之前一定要关闭消费客户端！！！" type="warning" showIcon={true} className="mb-30" /> */}
        <div className="o-container">
          <Form labelAlign="left" onSubmit={this.handleSubmit} >
-          <Radio.Group onChange={this.onChangeType} value={typeValue}>
+            <Radio.Group onChange={this.onChangeType} value={typeValue}>
              <Radio value="time"><span className="title-con">重置到指定时间</span></Radio>
              <Row>
                <Col span={26}>
                  <Form.Item label="" >
-                  <Radio.Group
-                    onChange={this.onChangeOffset}
-                    value={offsetValue}
-                    disabled={typeValue === 'partition'}
-                    defaultValue="offset"
-                    className="mr-10"
-                  >
-                    <Radio.Button value="offset">最新offset</Radio.Button>
-                    <Radio.Button value="custom">自定义</Radio.Button>
-                  </Radio.Group>
+                    <Radio.Group
+                      onChange={this.onChangeOffset}
+                      value={offsetValue}
+                      disabled={typeValue === 'partition'}
+                      defaultValue="offset"
+                      className="mr-10"
+                    >
+                      <Radio.Button value="offset">最新offset</Radio.Button>
+                      <Radio.Button value="custom">自定义</Radio.Button>
+                    </Radio.Group>
                    {typeValue === 'time' && offsetValue === 'custom' &&
                      getFieldDecorator('timestamp', {
                        rules: [{ required: false, message: '' }],
                        initialValue: moment(),
-                        })(
+                      })(
                        <DatePicker
                          showTime={true}
                          format={timeMinute}
@@ -109,7 +109,7 @@ class ResetOffset extends React.Component<any> {
                </Col>
              </Row>
              <Radio value="partition"><span className="title-con">重置指定分区及偏移</span></Radio>
-          </Radio.Group>
+            </Radio.Group>
            <Row>
              <Form.Item>
                <Row>
--- a/kafka-manager-console/src/container/user-center/config.tsx
+++ b/kafka-manager-console/src/container/user-center/config.tsx
@@ -30,7 +30,7 @@ export const getInfoRenderItem = (orderInfo: IOrderInfo, result: boolean) => {
    value: orderInfo.detail.principals,
  }];

-  const clusterTypelist: ILabelValue[] = [ {
+  const clusterTypelist: ILabelValue[] = [{
    label: '物理集群名称',
    value: orderInfo.detail.physicalClusterName,
  }, {
@@ -80,23 +80,25 @@ export const getInfoRenderItem = (orderInfo: IOrderInfo, result: boolean) => {
  phyAuthOfflineList.splice(3, 0, ...clusterTypelist);

  const clusterInfoList: ILabelValue[] = [{
-      label: '流入流量',
-      value: `${transBToMB(orderInfo.detail.bytesIn)} MB/s`,
-    }, {
-      label: '数据中心',
-      value: orderInfo.detail.idc,
-    }, {
-      label: '集群类型',
-      value: clusterTypeMap[orderInfo.detail.mode],
-    }, {
-      label: '应用ID',
-      value: orderInfo.detail.appId,
-    },
+    label: '流入流量',
+    value: `${transBToMB(orderInfo.detail.bytesIn)} MB/s`,
+  },
+  // {
+  //   label: '数据中心',
+  //   value: orderInfo.detail.idc,
+  // },
+  {
+    label: '集群类型',
+    value: clusterTypeMap[orderInfo.detail.mode],
+  }, {
+    label: '应用ID',
+    value: orderInfo.detail.appId,
+  },
  ];

  const clusterOfflineList: ILabelValue[] = expansionList;
  const phyClusterOfflineList: ILabelValue[] = clusterTypelist;
-  const maxAvgBytesIn =  orderInfo.detail.maxAvgBytesInList && orderInfo.detail.maxAvgBytesInList.map(item => {
+  const maxAvgBytesIn = orderInfo.detail.maxAvgBytesInList && orderInfo.detail.maxAvgBytesInList.map(item => {
    const val = `${transBToMB(item)} MB/s`;
    return val;
  });
@@ -125,18 +127,18 @@ export const getInfoRenderItem = (orderInfo: IOrderInfo, result: boolean) => {
  phyQuotaInfoList.splice(3, 0, ...clusterTypelist);

  const partitionList: ILabelValue[] = expansionList.concat([{
-      label: 'Topic名称',
-      value: orderInfo.detail.topicName,
-    }, {
-      label: '申请分区数',
-      value: orderInfo.detail.needIncrPartitionNum,
-    }, {
-      label: '当前流入流量',
-      value: `${transBToMB(orderInfo.detail.bytesIn)} MB/s`,
-    }, {
-      label: '近三天峰值流入流量',
-      value: maxAvgBytesIn && maxAvgBytesIn.join('、'),
-    },
+    label: 'Topic名称',
+    value: orderInfo.detail.topicName,
+  }, {
+    label: '申请分区数',
+    value: orderInfo.detail.needIncrPartitionNum,
+  }, {
+    label: '当前流入流量',
+    value: `${transBToMB(orderInfo.detail.bytesIn)} MB/s`,
+  }, {
+    label: '近三天峰值流入流量',
+    value: maxAvgBytesIn && maxAvgBytesIn.join('、'),
+  },
  ]);

  const phyPartitionList: ILabelValue[] = partitionList.filter(i => !cluster.includes(i.label));
--- a/kafka-manager-console/src/container/user-center/order-detail.tsx
+++ b/kafka-manager-console/src/container/user-center/order-detail.tsx
@@ -133,6 +133,12 @@ export class OrderDetail extends React.Component {
        width: '20%',
        render: (t: string) => <span>{t === 'consumer' ? '消费' : '生产'}</span>,
      },
+      // {
+      //   title: '客户端语言',
+      //   dataIndex: 'language',
+      //   key: 'language',
+      //   width: '20%',
+      // },
    ];
    return (
      <>
--- a/kafka-manager-console/src/container/wrapper/custom-modal.tsx
+++ b/kafka-manager-console/src/container/wrapper/custom-modal.tsx
@@ -3,6 +3,7 @@ import { observer } from 'mobx-react';
 import { modal } from 'store/modal';
 import { ConnectTopicList } from '../modal/connect-topic-list';
 import { ConnectAppList } from '../modal/offline-app-modal';
+import { ConnectAppNewList } from '../modal/offline-app-modal-new';
 import { CancelTopicPermission } from 'container/modal/cancel-topic-permission';
 import { OfflineClusterModal } from 'container/modal/offline-cluster-modal';
 import { RenderOrderOpResult } from 'container/modal/order';
@@ -22,6 +23,7 @@ export default class AllCustomModalInOne extends React.Component {

 const modalMap = {
  offlineTopicModal: <ConnectTopicList />,
+  offlineAppNewModal: <ConnectAppNewList />,
  offlineAppModal: <ConnectAppList />,
  cancelTopicPermission: <CancelTopicPermission />,
  offlineClusterModal: <OfflineClusterModal />,
--- a/kafka-manager-console/src/lib/api.ts
+++ b/kafka-manager-console/src/lib/api.ts
@@ -1,5 +1,5 @@
 import fetch, { formFetch } from './fetch';
-import { IUploadFile, IUser, IQuotaModelItem, ILimitsItem, ITopic, IOrderParams, ISample, IMigration, IExecute, IEepand, IUtils, ITopicMetriceParams, IRegister, IEditTopic, IExpand, IDeleteTopic, INewRegions, INewLogical, IRebalance, INewBulidEnums, ITrigger, IApprovalOrder, IMonitorSilences, IConfigure, IBatchApproval } from 'types/base-type';
+import { IUploadFile, IUser, IQuotaModelItem, ILimitsItem, ITopic, IOrderParams, ISample, IMigration, IExecute, IEepand, IUtils, ITopicMetriceParams, IRegister, IEditTopic, IExpand, IDeleteTopic, INewRegions, INewLogical, IRebalance, INewBulidEnums, ITrigger, IApprovalOrder, IMonitorSilences, IConfigure, IConfigGateway, IBatchApproval } from 'types/base-type';
 import { IRequestParams } from 'types/alarm';
 import { apiCache } from 'lib/api-cache';

@@ -418,6 +418,13 @@ export const getMetaData = (needDetail: boolean = true) => {
  return fetch(`/rd/clusters/basic-info?need-detail=${needDetail}`);
 };

+export const getOperationRecordData = (params: any) => {
+  return fetch(`/rd/operate-record`,{
+    method: 'POST',
+    body: JSON.stringify(params),
+  });
+};
+
 export const getConfigure = () => {
  return fetch(`/rd/configs`);
 };
@@ -442,6 +449,34 @@ export const deleteConfigure = (configKey: string) => {
  });
 };

+export const getGatewayList = () => {
+  return fetch(`/rd/gateway-configs`);
+};
+
+export const getGatewayType = () => {
+  return fetch(`/op/gateway-configs/type-enums`);
+};
+
+export const addNewConfigGateway = (params: IConfigGateway) => {
+  return fetch(`/op/gateway-configs`, {
+    method: 'POST',
+    body: JSON.stringify(params),
+  });
+};
+
+export const editConfigGateway = (params: IConfigGateway) => {
+  return fetch(`/op/gateway-configs`, {
+    method: 'PUT',
+    body: JSON.stringify(params),
+  });
+};
+export const deleteConfigGateway = (params: IConfigure) => {
+  return fetch(`/op/gateway-configs`, {
+    method: 'DELETE',
+    body: JSON.stringify(params),
+  });
+};
+
 export const getDataCenter = () => {
  return fetch(`/normal/configs/idc`);
 };
@@ -530,6 +565,23 @@ export const getControllerHistory = (clusterId: number) => {
  return fetch(`/rd/clusters/${clusterId}/controller-history`);
 };

+export const getCandidateController = (clusterId: number) => {
+  return fetch(`/rd/clusters/${clusterId}/controller-preferred-candidates`);
+};
+
+export const addCandidateController = (params:any) => {
+  return  fetch(`/op/cluster-controller/preferred-candidates`, {
+    method: 'POST',
+    body: JSON.stringify(params),
+  });
+};
+
+export const deleteCandidateCancel = (params:any)=>{
+  return  fetch(`/op/cluster-controller/preferred-candidates`, {
+    method: 'DELETE',
+    body: JSON.stringify(params),
+  });
+}
 /**
 * 运维管控 broker
 */
--- a/kafka-manager-console/src/lib/line-charts-config.ts
+++ b/kafka-manager-console/src/lib/line-charts-config.ts
@@ -77,7 +77,7 @@ export const getControlMetricOption = (type: IOptionType, data: IClusterMetrics[
      name = '条';
      data.map(item => {
        item.messagesInPerSec = item.messagesInPerSec !== null ? Number(item.messagesInPerSec.toFixed(2)) : null;
-       });
+      });
      break;
    case 'brokerNum':
    case 'topicNum':
@@ -224,7 +224,7 @@ export const getClusterMetricOption = (type: IOptionType, record: IClusterMetric
      name = '条';
      data.map(item => {
        item.messagesInPerSec = item.messagesInPerSec !== null ? Number(item.messagesInPerSec.toFixed(2)) : null;
-       });
+      });
      break;
    default:
      const { name: unitName, data: xData } = dealFlowData(metricTypeMap[type], data);
@@ -248,8 +248,8 @@ export const getClusterMetricOption = (type: IOptionType, record: IClusterMetric
          const unitSeries = item.data[item.seriesName] !== null ? Number(item.data[item.seriesName]) : null;
          // tslint:disable-next-line:max-line-length
          result += '<span style="display:inline-block;margin-right:0px;border-radius:10px;width:9px;height:9px;background-color:' + item.color + '"></span>';
-          if ( (item.data.produceThrottled && item.seriesName === 'appIdBytesInPerSec')
-            || (item.data.consumeThrottled && item.seriesName === 'appIdBytesOutPerSec') ) {
+          if ((item.data.produceThrottled && item.seriesName === 'appIdBytesInPerSec')
+            || (item.data.consumeThrottled && item.seriesName === 'appIdBytesOutPerSec')) {
            return result += item.seriesName + ': ' + unitSeries + '（被限流）' + '<br>';
          }
          return result += item.seriesName + ': ' + unitSeries + '<br>';
@@ -317,7 +317,7 @@ export const getMonitorMetricOption = (seriesName: string, data: IMetricPoint[])
            if (ele.name === item.seriesName) {
              // tslint:disable-next-line:max-line-length
              result += '<span style="display:inline-block;margin-right:0px;border-radius:10px;width:9px;height:9px;background-color:' + item.color + '"></span>';
-              return result += item.seriesName + ': ' + (item.data.value === null ?  '' : item.data.value.toFixed(2)) + '<br>';
+              return result += item.seriesName + ': ' + (item.data.value === null ? '' : item.data.value.toFixed(2)) + '<br>';
            }
          });
        });
--- a/kafka-manager-console/src/routers/page/admin.tsx
+++ b/kafka-manager-console/src/routers/page/admin.tsx
@@ -3,7 +3,7 @@ import CommonRoutePage from './common';
 import urlParser from 'lib/url-parser';
 import urlQuery from 'store/url-query';
 import { AppDetail } from 'container/app';
-import { AdminAppList, ClusterList, ClusterDetail, BrokerDetail, UserManagement, VersionManagement, OperationManagement, OperationDetail, BillManagement, ConfigureManagement, IndividualBill, MigrationDetail, BillDetail } from 'container/admin';
+import { AdminAppList, ClusterList, ClusterDetail, BrokerDetail, UserManagement, VersionManagement, OperationManagement, OperationDetail, BillManagement, ConfigureManagement, IndividualBill, MigrationDetail, BillDetail, OperationRecord } from 'container/admin';
 import { PlatformManagement } from 'container/admin/platform-management';

 export default class Home extends React.Component<any> {
@@ -52,7 +52,11 @@ export default class Home extends React.Component<any> {
    path: '/admin/migration-detail',
    exact: true,
    component: MigrationDetail,
-  }];
+  }, {
+    path: '/admin/operation-record',
+    exact: true,
+    component: OperationRecord,
+  },];

  constructor(props: any) {
    super(props);
@@ -66,7 +70,7 @@ export default class Home extends React.Component<any> {

  public render() {
    return (
-      <CommonRoutePage pageRoute={this.pageRoute}  mode="admin" active="admin"/>
+      <CommonRoutePage pageRoute={this.pageRoute} mode="admin" active="admin" />
    );
  }
 }
--- a/kafka-manager-console/src/store/admin-monitor.ts
+++ b/kafka-manager-console/src/store/admin-monitor.ts
@@ -3,6 +3,11 @@ import { observable, action } from 'mobx';
 import { getBrokersMetricsHistory } from 'lib/api';
 import { IClusterMetrics } from 'types/base-type';

+const STATUS = {
+  PENDING: 'pending',
+  REJECT: 'reject',
+  FULLFILLED: 'fullfilled'
+}
 class AdminMonitor {
  @observable
  public currentClusterId = null as number;
@@ -33,33 +38,42 @@ class AdminMonitor {
  @action.bound
  public setBrokersChartsData(data: IClusterMetrics[]) {
    this.brokersMetricsHistory = data;
-    this.setRequestId(null);
+    this.setRequestId(STATUS.FULLFILLED);
+    Promise.all(this.taskQueue).then(() => {
+      this.setRequestId(null);
+      this.taskQueue = [];
+    })
    return data;
  }
+  public taskQueue = [] as any[];

  public getBrokersMetricsList = async (startTime: string, endTime: string) => {
-    if (this.requestId && this.requestId !== 'error') {
-      return new Promise((res, rej) => {
-        window.setTimeout(() => {
-          if (this.requestId === 'error') {
-            rej();
-          } else {
+    if (this.requestId) {
+      //逐条定时查询任务状态
+      const p = new Promise((res, rej) => {
+        const timer = window.setInterval(() => {
+          if (this.requestId === STATUS.REJECT) {
+            rej(this.brokersMetricsHistory);
+            window.clearInterval(timer);
+          } else if (this.requestId === STATUS.FULLFILLED) {
            res(this.brokersMetricsHistory);
+            window.clearInterval(timer);
          }
-        }, 800); // TODO: 该实现方式待优化
+        }, (this.taskQueue.length + 1) * 100);
      });
+      this.taskQueue.push(p);
+      return p;
    }

-    this.setRequestId('requesting');
+    this.setRequestId(STATUS.PENDING);
    return getBrokersMetricsHistory(this.currentClusterId, this.currentBrokerId, startTime, endTime)
-      .then(this.setBrokersChartsData).catch(() => this.setRequestId('error'));
+      .then(this.setBrokersChartsData).catch(() => this.setRequestId(STATUS.REJECT));
  }

  public getBrokersChartsData = async (startTime: string, endTime: string, reload?: boolean) => {
    if (this.brokersMetricsHistory && !reload) {
      return new Promise(res => res(this.brokersMetricsHistory));
    }
-
    return this.getBrokersMetricsList(startTime, endTime);
  }
 }
--- a/kafka-manager-console/src/store/admin.ts
+++ b/kafka-manager-console/src/store/admin.ts
@@ -1,5 +1,5 @@
 import { observable, action } from 'mobx';
-import { INewBulidEnums, ILabelValue, IClusterReal, IOptionType, IClusterMetrics, IClusterTopics, IKafkaFiles, IMetaData, IConfigure, IBrokerData, IOffset, IController, IBrokersBasicInfo, IBrokersStatus, IBrokersTopics, IBrokersPartitions, IBrokersAnalysis, IAnalysisTopicVO, IBrokersMetadata, IBrokersRegions, IThrottles, ILogicalCluster, INewRegions, INewLogical, ITaskManage, IPartitionsLocation, ITaskType, ITasksEnums, ITasksMetaData, ITaskStatusDetails, IKafkaRoles, IEnumsMap, IStaffSummary, IBill, IBillDetail } from 'types/base-type';
+import { INewBulidEnums, ILabelValue, IClusterReal, IOptionType, IClusterMetrics, IClusterTopics, IKafkaFiles, IMetaData, IConfigure, IConfigGateway, IBrokerData, IOffset, IController, IBrokersBasicInfo, IBrokersStatus, IBrokersTopics, IBrokersPartitions, IBrokersAnalysis, IAnalysisTopicVO, IBrokersMetadata, IBrokersRegions, IThrottles, ILogicalCluster, INewRegions, INewLogical, ITaskManage, IPartitionsLocation, ITaskType, ITasksEnums, ITasksMetaData, ITaskStatusDetails, IKafkaRoles, IEnumsMap, IStaffSummary, IBill, IBillDetail } from 'types/base-type';
 import {
  deleteCluster,
  getBasicInfo,
@@ -9,10 +9,16 @@ import {
  getTopicsBasicInfo,
  getTasksKafkaFiles,
  getMetaData,
+  getOperationRecordData,
  getConfigure,
  addNewConfigure,
  editConfigure,
+  addNewConfigGateway,
  deleteConfigure,
+  getGatewayList,
+  getGatewayType,
+  editConfigGateway,
+  deleteConfigGateway,
  getDataCenter,
  getClusterBroker,
  getClusterConsumer,
@@ -49,6 +55,9 @@ import {
  getStaffSummary,
  getBillStaffSummary,
  getBillStaffDetail,
+  getCandidateController,
+  addCandidateController,
+  deleteCandidateCancel
  } from 'lib/api';
 import { getControlMetricOption, getClusterMetricOption } from 'lib/line-charts-config';

@@ -59,6 +68,7 @@ import { transBToMB } from 'lib/utils';

 import moment from 'moment';
 import { timestore } from './time';
+import { message } from 'component/antd';

 class Admin {
  @observable
@@ -94,9 +104,23 @@ class Admin {
  @observable
  public metaList: IMetaData[] = [];

+  @observable
+  public oRList: any[] = [];
+
+  @observable
+  public oRparams:any={
+    moduleId:0
+  };
+
  @observable
  public configureList: IConfigure[] = [];

+  @observable
+  public configGatewayList: IConfigGateway[] = [];
+
+  @observable
+  public gatewayType: [];
+
  @observable
  public dataCenterList: string[] = [];

@@ -142,6 +166,12 @@ class Admin {
  @observable
  public controllerHistory: IController[] = [];

+  @observable
+  public controllerCandidate: IController[] = [];
+
+   @observable
+  public filtercontrollerCandidate: string = '';
+  
  @observable
  public brokersPartitions: IBrokersPartitions[] = [];

@@ -152,7 +182,7 @@ class Admin {
  public brokersAnalysisTopic: IAnalysisTopicVO[] = [];

  @observable
-  public brokersMetadata: IBrokersMetadata[] = [];
+  public brokersMetadata: IBrokersMetadata[] | any = [];

  @observable
  public brokersRegions: IBrokersRegions[] = [];
@@ -206,10 +236,10 @@ class Admin {
  public kafkaRoles: IKafkaRoles[];

  @observable
-  public controlType: IOptionType = 'byteIn/byteOut' ;
+  public controlType: IOptionType = 'byteIn/byteOut';

  @observable
-  public type: IOptionType = 'byteIn/byteOut' ;
+  public type: IOptionType = 'byteIn/byteOut';

  @observable
  public currentClusterId = null as number;
@@ -241,7 +271,7 @@ class Admin {

  @action.bound
  public setClusterRealTime(data: IClusterReal) {
-    this.clusterRealData =  data;
+    this.clusterRealData = data;
    this.getRealClusterLoading(false);
  }

@@ -284,7 +314,7 @@ class Admin {
      return {
        ...item,
        label: item.fileName,
-        value: item.fileName  + ',' + item.fileMd5,
+        value: item.fileName + ',' + item.fileMd5,
      };
    }));
  }
@@ -298,6 +328,15 @@ class Admin {
    }) : [];
  }

+  @action.bound
+  public setOperationRecordList(data:any){
+    this.setLoading(false);
+    this.oRList = data ? data.map((item:any, index: any) => {
+      item.key = index;
+      return item;
+    }) : [];
+  }
+
  @action.bound
  public setConfigure(data: IConfigure[]) {
    this.configureList = data ? data.map((item, index) => {
@@ -306,6 +345,20 @@ class Admin {
    }) : [];
  }

+  @action.bound
+  public setConfigGatewayList(data: IConfigGateway[]) {
+    this.configGatewayList = data ? data.map((item, index) => {
+      item.key = index;
+      return item;
+    }) : [];
+  }
+
+  @action.bound
+  public setConfigGatewayType(data: any) {
+    this.setLoading(false);
+    this.gatewayType = data || [];
+  }
+
  @action.bound
  public setDataCenter(data: string[]) {
    this.dataCenterList = data || [];
@@ -335,6 +388,17 @@ class Admin {
    }) : [];
  }

+  @action.bound
+  public setCandidateController(data: IController[]) {
+    this.controllerCandidate = data ? data.map((item, index) => {
+      item.key = index;
+      return item;
+    }) : [];
+    this.filtercontrollerCandidate = data?data.map((item,index)=>{
+      return item.brokerId
+    }).join(','):''
+  }
+
  @action.bound
  public setBrokersBasicInfo(data: IBrokersBasicInfo) {
    this.brokersBasicInfo = data;
@@ -356,10 +420,10 @@ class Admin {
    this.replicaStatus = data.brokerReplicaStatusList.slice(1);

    this.bytesInStatus.forEach((item, index) => {
-      this.peakValueList.push({ name: peakValueMap[index], value: item});
+      this.peakValueList.push({ name: peakValueMap[index], value: item });
    });
    this.replicaStatus.forEach((item, index) => {
-      this.copyValueList.push({name: copyValueMap[index], value: item});
+      this.copyValueList.push({ name: copyValueMap[index], value: item });
    });
  }

@@ -415,16 +479,16 @@ class Admin {
  }

  @action.bound
-  public setBrokersMetadata(data: IBrokersMetadata[]) {
-    this.brokersMetadata = data ? data.map((item, index) => {
-        item.key = index;
-        return {
-          ...item,
-          text: `${item.host} （BrokerID：${item.brokerId}）`,
-          label: item.host,
-          value: item.brokerId,
-        };
-      }) : [];
+  public setBrokersMetadata(data: IBrokersMetadata[]|any) {
+    this.brokersMetadata = data ? data.map((item:any, index:any) => {
+      item.key = index;
+      return {
+        ...item,
+        text: `${item.host} （BrokerID：${item.brokerId}）`,
+        label: item.host,
+        value: item.brokerId,
+      };
+    }) : [];
  }

  @action.bound
@@ -461,9 +525,9 @@ class Admin {
  @action.bound
  public setLogicalClusters(data: ILogicalCluster[]) {
    this.logicalClusters = data ? data.map((item, index) => {
-        item.key = index;
-        return item;
-      }) : [];
+      item.key = index;
+      return item;
+    }) : [];
  }

  @action.bound
@@ -474,25 +538,25 @@ class Admin {
  @action.bound
  public setClustersThrottles(data: IThrottles[]) {
    this.clustersThrottles = data ? data.map((item, index) => {
-        item.key = index;
-        return item;
-      }) : [];
+      item.key = index;
+      return item;
+    }) : [];
  }

  @action.bound
  public setPartitionsLocation(data: IPartitionsLocation[]) {
    this.partitionsLocation = data ? data.map((item, index) => {
-        item.key = index;
-        return item;
-      }) : [];
+      item.key = index;
+      return item;
+    }) : [];
  }

  @action.bound
  public setTaskManagement(data: ITaskManage[]) {
    this.taskManagement = data ? data.map((item, index) => {
-        item.key = index;
-        return item;
-      }) : [];
+      item.key = index;
+      return item;
+    }) : [];
  }

  @action.bound
@@ -568,7 +632,7 @@ class Admin {
    return deleteCluster(clusterId).then(() => this.getMetaData(true));
  }

-  public getPeakFlowChartData(value: ILabelValue[], map: string []) {
+  public getPeakFlowChartData(value: ILabelValue[], map: string[]) {
    return getPieChartOption(value, map);
  }

@@ -611,6 +675,12 @@ class Admin {
    getMetaData(needDetail).then(this.setMetaList);
  }

+  public getOperationRecordData(params: any) {
+    this.setLoading(true);
+    this.oRparams = params
+    getOperationRecordData(params).then(this.setOperationRecordList);
+  }
+
  public getConfigure() {
    getConfigure().then(this.setConfigure);
  }
@@ -627,6 +697,30 @@ class Admin {
    deleteConfigure(configKey).then(() => this.getConfigure());
  }

+  public getGatewayList() {
+    getGatewayList().then(this.setConfigGatewayList);
+  }
+
+  public getGatewayType() {
+    this.setLoading(true);
+    getGatewayType().then(this.setConfigGatewayType);
+  }
+
+  public addNewConfigGateway(params: IConfigGateway) {
+    return addNewConfigGateway(params).then(() => this.getGatewayList());
+  }
+
+  public editConfigGateway(params: IConfigGateway) {
+    return editConfigGateway(params).then(() => this.getGatewayList());
+  }
+
+  public deleteConfigGateway(params: any) {
+    deleteConfigGateway(params).then(() => {
+      // message.success('删除成功')
+      this.getGatewayList()
+    });
+  }
+
  public getDataCenter() {
    getDataCenter().then(this.setDataCenter);
  }
@@ -643,6 +737,20 @@ class Admin {
    return getControllerHistory(clusterId).then(this.setControllerHistory);
  }

+  public getCandidateController(clusterId: number) {
+    return getCandidateController(clusterId).then(data=>{
+      return this.setCandidateController(data)
+    });
+  }
+
+  public addCandidateController(clusterId: number, brokerIdList: any) {
+    return addCandidateController({clusterId, brokerIdList}).then(()=>this.getCandidateController(clusterId));
+  }
+
+  public deleteCandidateCancel(clusterId: number, brokerIdList: any){
+    return deleteCandidateCancel({clusterId, brokerIdList}).then(()=>this.getCandidateController(clusterId));
+  }
+
  public getBrokersBasicInfo(clusterId: number, brokerId: number) {
    return getBrokersBasicInfo(clusterId, brokerId).then(this.setBrokersBasicInfo);
  }
--- a/kafka-manager-console/src/store/alarm.ts
+++ b/kafka-manager-console/src/store/alarm.ts
@@ -181,6 +181,7 @@ class Alarm {
  public modifyMonitorStrategy(params: IRequestParams) {
    return modifyMonitorStrategy(params).then(() => {
      message.success('操作成功');
+      window.location.href = `${urlPrefix}/alarm`;
    }).finally(() => this.setLoading(false));
  }

--- a/kafka-manager-console/src/store/modal.ts
+++ b/kafka-manager-console/src/store/modal.ts
@@ -31,6 +31,12 @@ class CustomModal {
    this.params = value;
  }

+  @action.bound
+  public showOfflineAppNewModal(value: any) {
+    this.modalId = 'offlineAppNewModal';
+    this.params = value;
+  }
+
  @action.bound
  public showOrderOpResult() {
    this.modalId = 'orderOpResult';
--- a/kafka-manager-console/src/store/users.ts
+++ b/kafka-manager-console/src/store/users.ts
@@ -19,6 +19,9 @@ export class Users {
  @observable
  public staff: IStaff[] = [];

+  @observable
+  public newPassWord: any = null;
+
  @action.bound
  public setAccount(data: IUser) {
    setCookie([{ key: 'role', value: `${data.role}`, time: 1 }]);
@@ -42,6 +45,11 @@ export class Users {
    this.loading = value;
  }

+  @action.bound
+  public setNewPassWord(value: boolean) {
+    this.newPassWord = value;
+  }
+
  public getAccount() {
    getAccount().then(this.setAccount);
  }
--- a/kafka-manager-console/src/styles/font.css
+++ b/kafka-manager-console/src/styles/font.css
@@ -6,6 +6,16 @@
  url('//at.alicdn.com/t/font_1251424_q66z80q0hio.ttf?t=1577526422376') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('//at.alicdn.com/t/font_1251424_q66z80q0hio.svg?t=1577526422376#kafka-manager') format('svg'); /* iOS 4.1- */
 }
+@font-face {
+  font-family: 'kafka-manager';
+  /* project id 2406313 */
+  src: url('//at.alicdn.com/t/font_2406313_rbsze6uqtta.eot');
+  src: url('//at.alicdn.com/t/font_2406313_rbsze6uqtta.eot?#iefix') format('embedded-opentype'),
+    url('//at.alicdn.com/t/font_2406313_rbsze6uqtta.woff2') format('woff2'),
+    url('//at.alicdn.com/t/font_2406313_rbsze6uqtta.woff') format('woff'),
+    url('//at.alicdn.com/t/font_2406313_rbsze6uqtta.ttf') format('truetype'),
+    url('//at.alicdn.com/t/font_2406313_rbsze6uqtta.svg#iconfont') format('svg');
+}

 .kafka-manager {
  font-family: "kafka-manager" !important;
@@ -15,6 +25,15 @@
  -moz-osx-font-smoothing: grayscale;
 }

+/* .kafka-manager-record {
+  font-family: "kafka-manager" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+} */
+
+
 .k-icon-fuwurenwuguanli:before {
  content: "\e660";
 }
@@ -47,6 +66,10 @@
  content: "\e634";
 }

+.k-icon-operationrecord:before {
+  content: "\e772";
+}
+
 .k-icon-menu2:before {
  content: "\e609";
 }
--- a/kafka-manager-console/src/types/base-type.ts
+++ b/kafka-manager-console/src/types/base-type.ts
@@ -190,6 +190,7 @@ export interface IUser {
  chineseName?: string;
  department?: string;
  key?: number;
+  confirmPassword?: string
 }

 export interface IOffset {
@@ -486,6 +487,17 @@ export interface IConfigure {
  key?: number;
 }

+export interface IConfigGateway {
+  id: number;
+  key?: number;
+  modifyTime: number;
+  name: string;
+  value: string;
+  version: string;
+  type: string;
+  description: string;
+}
+
 export interface IEepand {
  brokerIdList: number[];
  clusterId: number;
@@ -650,8 +662,10 @@ export interface IBrokerData {
 export interface IController {
  brokerId: number;
  host: string;
-  timestamp: number;
-  version: number;
+  timestamp?: number;
+  version?: number;
+  startTime?: number;
+  status?: number;
  key?: number;
 }

@@ -925,7 +939,7 @@ export interface INewLogical {
  logicalClusterName?: string;
  logicalClusterNameCn?: string;
  regionIdList: number[];
-  logicalClusterIdentification?:string
+  logicalClusterIdentification?: string
 }

 export interface IPartitionsLocation {