init

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

@@ -0,0 +1,87 @@
+import * as React from 'react';
+
+import { Table, Tabs, PaginationConfig } from 'component/antd';
+import { observer } from 'mobx-react';
+import urlQuery from 'store/url-query';
+import { controller } from 'store/controller';
+import { SearchAndFilter } from 'container/cluster-topic';
+import moment from 'moment';
+
+const TabPane = Tabs.TabPane;
+
+const columns = [
+  {
+    title: 'BrokerId',
+    dataIndex: 'brokerId',
+    key: 'brokerId',
+    sorter: (a: any, b: any) => a.brokerNum - b.brokerNum,
+  },
+  {
+    title: 'host',
+    key: 'host',
+    dataIndex: 'host',
+    render: (r: string, t: any) => {
+      return (
+        <a href={`/admin/broker_detail?clusterId=${urlQuery.clusterId}&brokerId=${t.brokerId}`} target="_blank">{r}
+        </a>
+    ); },
+  },
+  {
+    title: '版本',
+    dataIndex: 'controllerVersion',
+    key: 'controllerVersion',
+  },
+  {
+    title: '变更时间',
+    dataIndex: 'controllerTimestamp',
+    key: 'controllerTimestamp',
+    sorter: (a: any, b: any) => a.controllerTimestamp - b.updacontrollerTimestampteTime,
+    render: (t: number) => moment(t).format('YYYY-MM-DD HH:mm:ss'),
+  },
+];
+
+const pagination: PaginationConfig = {
+  position: 'bottom',
+  showQuickJumper: true,
+  pageSize: 10,
+  showTotal: (total) => `共 ${total} 条`,
+};
+
+@observer
+export class AdminController extends SearchAndFilter {
+  public state = {
+    searchKey: '',
+  };
+
+  public componentDidMount() {
+    controller.getController(urlQuery.clusterId);
+  }
+
+  public renderController() {
+    if (!controller.data) return null;
+    const data = controller.data.filter((d) => d.host.includes(this.state.searchKey));
+    return (
+      <Table
+        columns={columns}
+        dataSource={data}
+        pagination={pagination}
+        rowKey="controllerTimestamp"
+      />
+    );
+  }
+
+  public render() {
+    return (
+      <>
+        <ul className="table-operation-bar">
+          {this.renderSearch('请输入关键词')}
+        </ul>
+        <Tabs defaultActiveKey="1" type="card">
+          <TabPane tab="Controller变更历史" key="1">
+            {this.renderController()}
+          </TabPane>
+        </Tabs>
+      </>
+    );
+  }
+}