[INLONG-10898][Dashboard] Data ranking increases according to dt sort…

…ing (#10899)

inlong-dashboard/src/ui/pages/GroupDetail/DataStream/PreviewModal.tsx

@@ -24,6 +24,7 @@ import { useRequest, useUpdateEffect } from '@/ui/hooks';
 import i18n from '@/i18n';
 import { ColumnsType } from 'antd/es/table';
 import dayjs from 'dayjs';
+import { SortOrder } from 'antd/es/table/interface';
 
 export interface Props extends ModalProps {
   inlongGroupId: string;
@@ -87,18 +88,26 @@ const Comp: React.FC<Props> = ({ inlongGroupId, inlongStreamId, ...modalProps })
     }
     return;
   };
+  const timestampSorter = (a, b) => {
+    const dateA = dayjs(a.dt, 'YYYY-MM-DD HH:mm:ss');
+    const dateB = dayjs(b.dt, 'YYYY-MM-DD HH:mm:ss');
+    return dateA.isBefore(dateB) ? -1 : dateA.isAfter(dateB) ? 1 : 0;
+  };
+  const sortOrder: SortOrder = 'descend';
 
   const detailColumns: ColumnsType<DataType> = [
     {
       title: i18n.t('pages.GroupDetail.Stream.Dt'),
       key: 'dt',
       width: 200,
       dataIndex: 'dt',
+      sorter: timestampSorter,
+      defaultSortOrder: sortOrder,
     },
   ].concat(
     (getColumn() ? getColumn() : []).concat([
       {
-        title: 'operation',
+        title: i18n.t('basic.Operating'),
         key: 'operation',
         fixed: 'right',
         width: 100,