初始化3.0.0版本

2026-01-10 17:12:11 +08:00 · 2022-08-18 17:04:05 +08:00
parent 462303fca0
commit 51832385b1
2446 changed files with 93177 additions and 127211 deletions
--- a/km-console/packages/layout-clusters-fe/src/pages/TopicDetail/Messages.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/TopicDetail/Messages.tsx
@@ -0,0 +1,179 @@
+import React, { useState, useEffect } from 'react';
+import { Alert, Button, Checkbox, Form, IconFont, Input, ProTable, Select, Tooltip, Utils } from 'knowdesign';
+import Api from '@src/api';
+import { useParams, useHistory } from 'react-router-dom';
+import { getTopicMessagesColmns } from './config';
+
+const { request } = Utils;
+const defaultParams: any = {
+  truncate: true,
+  maxRecords: 100,
+  pullTimeoutUnitMs: 8000,
+  // filterPartitionId: 1,
+};
+const defaultpaPagination = {
+  current: 1,
+  pageSize: 10,
+  position: 'bottomRight',
+  showSizeChanger: true,
+  pageSizeOptions: ['10', '20', '50', '100'],
+};
+const TopicMessages = (props: any) => {
+  const { hashData } = props;
+  const urlParams = useParams<any>(); // 获取地址栏参数
+  const history = useHistory();
+  const [loading, setLoading] = useState(false);
+  const [data, setData] = useState([]);
+  const [params, setParams] = useState(defaultParams);
+  const [partitionIdList, setPartitionIdList] = useState([]);
+  const [pagination, setPagination] = useState<any>(defaultpaPagination);
+  const [form] = Form.useForm();
+
+  // 默认排序
+  const defaultSorter = {
+    sortField: 'timestampUnitMs',
+    sortType: 'desc',
+  };
+
+  // 请求接口获取数据
+  const genData = async () => {
+    if (urlParams?.clusterId === undefined || hashData?.topicName === undefined) return;
+    setLoading(true);
+    request(Api.getTopicMessagesMetadata(hashData?.topicName, urlParams?.clusterId)).then((res: any) => {
+      // console.log(res, 'metadata');
+      const newPartitionIdList = res?.partitionIdList.map((item: any) => {
+        return {
+          label: item,
+          value: item,
+        };
+      });
+      setPartitionIdList(newPartitionIdList || []);
+    });
+    request(Api.getTopicMessagesList(hashData?.topicName, urlParams?.clusterId), { data: { ...params, ...defaultSorter }, method: 'POST' })
+      .then((res: any) => {
+        // setPagination({
+        //   current: res.pagination?.pageNo,
+        //   pageSize: res.pagination?.pageSize,
+        //   total: res.pagination?.total,
+        // });
+        setData(res || []);
+        setLoading(false);
+      })
+      .catch((err) => {
+        setLoading(false);
+      });
+  };
+
+  // 查询
+  const onFinish = (formData: any) => {
+    setParams({ ...params, ...formData, filterKey: formData?.filterKey ? formData?.filterKey : undefined });
+  };
+
+  // 截断
+  const checkBoxChange = (e: any) => {
+    setParams({ ...params, truncate: e.target.checked });
+  };
+
+  // 刷新
+  const refreshClick = () => {
+    // genData();
+    // form.resetFields();
+    setPagination(defaultpaPagination);
+    genData();
+  };
+
+  // 跳转Consume
+  const jumpConsume = () => {
+    history.push(`/cluster/${urlParams?.clusterId}/testing/consumer`);
+  };
+
+  const onTableChange = (pagination: any, filters: any, sorter: any) => {
+    setPagination(pagination);
+    // const asc = sorter?.order && sorter?.order === 'ascend' ? true : false;
+    // const sortColumn = sorter.field && toLine(sorter.field);
+    // genData({ pageNo: pagination.current, pageSize: pagination.pageSize, filters, asc, sortColumn, queryTerm: searchResult, ...allParams });
+  };
+
+  useEffect(() => {
+    props.positionType === 'Messages' && genData();
+  }, [props, params]);
+
+  return (
+    <>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+        <div>
+          <span
+            style={{ display: 'inline-block', padding: '0 10px', marginRight: '10px', borderRight: '1px solid #ccc', fontSize: '13px' }}
+            onClick={refreshClick}
+          >
+            <i className="iconfont icon-shuaxin1" style={{ fontSize: '13px', cursor: 'pointer' }} />
+          </span>
+          <span style={{ fontSize: '13px' }}>
+            <Checkbox checked={params.truncate} onChange={checkBoxChange}>
+              是否要截断数据
+            </Checkbox>
+          </span>
+          <Tooltip title={'截断数据后只展示前1024字符的数据'}>
+            <IconFont style={{ fontSize: '14px' }} type="icon-zhushi" />
+          </Tooltip>
+        </div>
+        <div className="messages-query">
+          <Form form={form} layout="inline" onFinish={onFinish}>
+            <Form.Item name="filterPartitionId">
+              <Select
+                options={partitionIdList}
+                size="small"
+                style={{ width: '140px' }}
+                className={'detail-table-select'}
+                placeholder="请选择分区"
+              />
+            </Form.Item>
+            <Form.Item name="filterKey">
+              <Input size="small" style={{ width: '140px' }} className={'detail-table-input'} placeholder="请输入key" />
+            </Form.Item>
+            <Form.Item name="filterValue">
+              <Input size="small" style={{ width: '140px' }} className={'detail-table-input'} placeholder="请输入value" />
+            </Form.Item>
+            <Form.Item>
+              <Button size="small" type="primary" ghost htmlType="submit">
+                查询
+              </Button>
+            </Form.Item>
+          </Form>
+        </div>
+      </div>
+      <div>
+        <Alert
+          style={{ margin: '12px 0 4px', padding: '7px 12px', background: '#FFF9E6' }}
+          message={
+            <div>
+              此处展示Topic最近的100条messages，若想获取其他messages，可前往<a onClick={jumpConsume}>Produce&Consume</a>进行操作
+            </div>
+          }
+          type="warning"
+          closable
+        />
+      </div>
+      <ProTable
+        showQueryForm={false}
+        tableProps={{
+          showHeader: false,
+          rowKey: 'path',
+          loading: loading,
+          columns: getTopicMessagesColmns(),
+          dataSource: data,
+          paginationProps: pagination,
+          // noPagination: true,
+          attrs: {
+            // className: 'frameless-table', // 纯无边框表格类名
+            bordered: false,
+            onChange: onTableChange,
+            scroll: { x: 'max-content' },
+          },
+        }}
+      />
+    </>
+  );
+};
+
+export default TopicMessages;