V2.4.1 FE

2026-01-11 02:13:28 +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/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>
      </>