init

2026-01-03 02:52:08 +08:00 · 2020-03-19 17:59:34 +08:00
commit 229140f067
407 changed files with 46207 additions and 0 deletions
--- a/console/src/container/admin-home/index.tsx
+++ b/console/src/container/admin-home/index.tsx
@@ -0,0 +1,132 @@
+import * as React from 'react';
+import './index.less';
+
+import { Table, Tabs, ColumnProps, PaginationConfig } from 'component/antd';
+
+import { modal } from 'store';
+import { cluster } from 'store/cluster';
+import { observer } from 'mobx-react';
+import { IClusterData } from 'types/base-type';
+
+const TabPane = Tabs.TabPane;
+
+const detailUrl ='/admin/cluster_detail?clusterId=';
+
+const collectionColumns: Array<ColumnProps<IClusterData>> = [
+  {
+    title: '集群ID',
+    dataIndex: 'clusterId',
+    key: 'clusterId',
+    sorter: (a: IClusterData, b: IClusterData) => a.clusterId - b.clusterId,
+  },
+  {
+    title: '集群名称',
+    key: 'clusterName',
+    sorter: (a: IClusterData, b: IClusterData) => a.clusterName.charCodeAt(0) - b.clusterName.charCodeAt(0),
+    render: (text, record) => {
+      return <a href={`${detailUrl}${record.clusterId}`}>{record.clusterName}</a>;
+    },
+  },
+  {
+    title: 'Topic 数',
+    key: 'topicNum',
+    sorter: (a: IClusterData, b: IClusterData) => a.topicNum - b.topicNum,
+    render: (text, record) => {
+      return <a href={`${detailUrl}${record.clusterId}#1`}>{record.topicNum}</a>;
+    },
+  },
+  {
+    title: 'Broker 数量',
+    dataIndex: 'brokerNum',
+    key: 'brokerNum',
+    sorter: (a: IClusterData, b: IClusterData) => a.brokerNum - b.brokerNum,
+    render: (text, record) => {
+      return (
+        <a
+          href={
+            `${detailUrl}${record.clusterId}&clusterName=${btoa(encodeURIComponent(record.clusterName))}#2`}
+        >
+          {record.brokerNum}
+        </a>);
+    },
+  },
+  {
+    title: 'ConsumerGroup 数',
+    key: 'consumerGroupNum',
+    sorter: (a: IClusterData, b: IClusterData) => a.consumerGroupNum - b.consumerGroupNum,
+    render: (text, record) => {
+      return <a href={`${detailUrl}${record.clusterId}#3`}>{record.consumerGroupNum}</a>;
+    },
+  },
+  {
+    title: 'Region 数',
+    key: 'regionNum',
+    sorter: (a: IClusterData, b: IClusterData) => a.regionNum - b.regionNum,
+    render: (text, record) => {
+      return <a href={`${detailUrl}${record.clusterId}&#4`}>{record.regionNum}</a>;
+    },
+  },
+  {
+    title: 'ControllerID',
+    key: 'controllerId',
+    sorter: (a: IClusterData, b: IClusterData) => a.controllerId - b.controllerId,
+    render: (text, record) => {
+      return <a href={`${detailUrl}${record.clusterId}#5`}>{record.controllerId}</a>;
+    },
+  },
+  {
+    title: '操作',
+    dataIndex: 'operation',
+    key: 'operation',
+    render: (text, record) => {
+      return (
+        <span className="table-operation">
+          <a onClick={modal.showModifyCluster.bind(null, record)}>修改</a>
+        </span>
+      );
+    },
+  },
+];
+
+const pagination: PaginationConfig = {
+  position: 'bottom',
+  showQuickJumper: true,
+  pageSize: 10,
+  showTotal: (total) => `共 ${total} 条`,
+};
+
+@observer
+export class AdminHome extends React.Component {
+  public renderList() {
+    return (
+      <Table
+        columns={collectionColumns}
+        dataSource={cluster.data.slice(1)}
+        pagination={pagination}
+        rowKey="clusterId"
+      />
+    );
+  }
+
+  public componentDidMount() {
+    cluster.getClusters();
+    cluster.getKafkaVersions();
+  }
+
+  public render() {
+    return (
+      <>
+        <ul className="table-operation-bar">
+          <li className="new-topic" onClick={modal.showNewCluster}>
+            <i className="k-icon-xinjian didi-theme"/>添加集群
+          </li>
+        </ul>
+        <Tabs defaultActiveKey="1" type="card">
+          <TabPane tab="集群列表" key="1">
+            {this.renderList()}
+          </TabPane>
+        </Tabs>
+      </>
+    );
+  }
+}