kafka-manager 2.0

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

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