init

console/src/container/modal/cosumer-topic.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { modal } from 'store/modal';
+import { consume } from 'store/consume';
+import Modal from 'antd/es/modal';
+import { observer } from 'mobx-react';
+import Table from 'antd/es/table';
+
+const columns = [
+  {
+    title: 'Topic 列表',
+    dataIndex: 'topicName',
+    key: 'topicName',
+  },
+];
+
+@observer
+export default class ConsumerTopic extends React.Component {
+  public componentDidMount() {
+    const { clusterId, consumerGroup, location } = modal.consumberGroup;
+    consume.getConsumerTopic(clusterId, consumerGroup, location.toLowerCase());
+  }
+  public render() {
+    return (
+      <Modal
+        title="消费的Topic列表"
+        style={{ top: 200 }}
+        visible={true}
+        onCancel={modal.close}
+        maskClosable={false}
+        width={500}
+        footer={null}
+      >
+        <Table
+          rowKey="topicName"
+          columns={columns}
+          pagination={false}
+          dataSource={consume.consumerTopic}
+        />
+      </Modal>
+    );
+  }
+}