Merge pull request #555 from superspeedone/dev

Dev

km-console/packages/layout-clusters-fe/src/pages/TopicDetail/Messages.tsx

@@ -10,6 +10,7 @@ const defaultParams: any = {
   maxRecords: 100,
   pullTimeoutUnitMs: 5000,
   // filterPartitionId: 1,
+  filterOffsetReset: 0
 };
 const defaultpaPagination = {
   current: 1,
@@ -29,12 +30,20 @@ const TopicMessages = (props: any) => {
   const [pagination, setPagination] = useState<any>(defaultpaPagination);
   const [form] = Form.useForm();
 
+  // 获取消息开始位置
+  const offsetResetList = [
+    { 'label': 'latest', value: 0 },
+    { 'label': 'earliest', value: 1 }
+  ];
+
   // 默认排序
   const defaultSorter = {
     sortField: 'timestampUnitMs',
     sortType: 'desc',
   };
 
+  const [sorter, setSorter] = useState<any>(defaultSorter);
+
   // 请求接口获取数据
   const genData = async () => {
     if (urlParams?.clusterId === undefined || hashData?.topicName === undefined) return;
@@ -49,7 +58,7 @@ const TopicMessages = (props: any) => {
       });
       setPartitionIdList(newPartitionIdList || []);
     });
-    request(Api.getTopicMessagesList(hashData?.topicName, urlParams?.clusterId), { data: { ...params, ...defaultSorter }, method: 'POST' })
+    request(Api.getTopicMessagesList(hashData?.topicName, urlParams?.clusterId), { data: { ...params, ...sorter }, method: 'POST' })
       .then((res: any) => {
         // setPagination({
         //   current: res.pagination?.pageNo,
@@ -87,8 +96,15 @@ const TopicMessages = (props: any) => {
     history.push(`/cluster/${urlParams?.clusterId}/testing/consumer`);
   };
 
-  const onTableChange = (pagination: any, filters: any, sorter: any) => {
+  const onTableChange = (pagination: any, filters: any, sorter: any, extra: any) => {
     setPagination(pagination);
+    // 只有排序事件时，触发重新请求后端数据
+    if(extra.action === 'sort') {
+      setSorter({
+        sortField: sorter.field || '',
+        sortType: sorter.order ? sorter.order.substring(0, sorter.order.indexOf('end')) : ''
+      });
+    }
     // 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 });
@@ -96,7 +112,7 @@ const TopicMessages = (props: any) => {
 
   useEffect(() => {
     props.positionType === 'Messages' && genData();
-  }, [props, params]);
+  }, [props, params, sorter]);
 
   return (
     <>
@@ -119,6 +135,15 @@ const TopicMessages = (props: any) => {
         </div>
         <div className="messages-query">
           <Form form={form} layout="inline" onFinish={onFinish}>
+            <Form.Item name="filterOffsetReset">
+              <Select
+                  options={offsetResetList}
+                  size="small"
+                  style={{ width: '120px' }}
+                  className={'detail-table-select'}
+                  placeholder="请选择offset"
+              />
+            </Form.Item>
             <Form.Item name="filterPartitionId">
               <Select
                 options={partitionIdList}
@@ -158,7 +183,7 @@ const TopicMessages = (props: any) => {
         showQueryForm={false}
         tableProps={{
           showHeader: false,
-          rowKey: 'path',
+          rowKey: 'offset',
           loading: loading,
           columns: getTopicMessagesColmns(),
           dataSource: data,
@@ -169,6 +194,7 @@ const TopicMessages = (props: any) => {
             bordered: false,
             onChange: onTableChange,
             scroll: { x: 'max-content' },
+            sortDirections: ['descend', 'ascend', 'default']
           },
         }}
       />

km-console/packages/layout-clusters-fe/src/pages/TopicDetail/config.tsx

@@ -85,7 +85,8 @@ export const getTopicMessagesColmns = () => {
       title: 'Timestamp',
       dataIndex: 'timestampUnitMs',
       key: 'timestampUnitMs',
-      render: (t: number) => (t ? moment(t).format(timeFormat) : '-'),
+      sorter: true,
+      render: (t: number) => (t ? moment(t).format(timeFormat) + '.' + moment(t).millisecond() : '-'),
     },
     {
       title: 'Key',