refactor(explorer-es): log table use backend sorting

n9e · Apr 4, 2023 · fe6deed · fe6deed
1 parent a336133
commit fe6deed
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 24 deletions.
diff --git a/src/pages/explorer/Elasticsearch/index.tsx b/src/pages/explorer/Elasticsearch/index.tsx
@@ -25,7 +25,7 @@ interface IProps {
   form: FormInstance;
 }
 
-const LOGS_LIMIT = 50;
+const LOGS_LIMIT = 500;
 const TIME_FORMAT = 'YYYY.MM.DD HH:mm:ss';
 
 export default function index(props: IProps) {
@@ -51,7 +51,7 @@ export default function index(props: IProps) {
   const [interval, setInterval] = useState(1);
   const [intervalUnit, setIntervalUnit] = useState<'second' | 'min' | 'hour'>('min');
   const totalRef = useRef(0);
-  const pageRef = useRef(1);
+  const sortOrder = useRef('desc');
   const timesRef =
     useRef<{
       start: number;
@@ -74,16 +74,14 @@ export default function index(props: IProps) {
       });
     }
   };
-  const fetchData = (page) => {
+  const fetchData = () => {
     form.validateFields().then((values) => {
       const { start, end } = parseRange(values.query.range);
       timesRef.current = {
         start: moment(start).valueOf(),
         end: moment(end).valueOf(),
       };
-      if (page === 1) {
-        setLoading(true);
-      }
+      setLoading(true);
       getLogsQuery(
         values.datasourceValue,
         normalizeLogsQueryRequestBody({
@@ -92,7 +90,7 @@ export default function index(props: IProps) {
           filter: values.query.filter,
           date_field: values.query.date_field,
           limit: LOGS_LIMIT,
-          page,
+          order: sortOrder.current,
         }),
       )
         .then((res) => {
@@ -104,18 +102,14 @@ export default function index(props: IProps) {
             };
           });
           totalRef.current = res.total;
-          setData(page === 1 ? newData : [...data, ...newData]);
-          if (page === 1) {
-            const tableEleNodes = document.querySelectorAll(`.event-logs-table .ant-table-body`)[0];
-            tableEleNodes?.scrollTo(0, 0);
-          }
+          setData(newData);
+          const tableEleNodes = document.querySelectorAll(`.event-logs-table .ant-table-body`)[0];
+          tableEleNodes?.scrollTo(0, 0);
         })
         .finally(() => {
           setLoading(false);
         });
-      if (page === 1) {
-        fetchSeries(values);
-      }
+      fetchSeries(values);
     });
   };
 
@@ -154,7 +148,7 @@ export default function index(props: IProps) {
       });
 
       onIndexChange(params.get('index_name'));
-      fetchData(1);
+      fetchData();
     }
   }, [params.get('data_source_id')]);
 
@@ -297,7 +291,7 @@ export default function index(props: IProps) {
               <Button
                 type='primary'
                 onClick={() => {
-                  fetchData(1);
+                  fetchData();
                 }}
               >
                 {t('query_btn')}
@@ -366,8 +360,7 @@ export default function index(props: IProps) {
                       setIsMore(false);
                       return false;
                     }
-                    fetchData(pageRef.current + 1);
-                    pageRef.current = pageRef.current + 1;
+                    fetchData();
                   }
                 }}
               >
@@ -422,6 +415,12 @@ export default function index(props: IProps) {
                         }
                       : undefined
                   }
+                  onChange={(pagination, filters, sorter: any, extra) => {
+                    if (sorter.columnKey === 'time') {
+                      sortOrder.current = sorter.order === 'ascend' ? 'asc' : 'desc';
+                      fetchData();
+                    }
+                  }}
                 />
               </div>
             </div>

diff --git a/src/pages/explorer/Elasticsearch/utils.tsx b/src/pages/explorer/Elasticsearch/utils.tsx
@@ -34,6 +34,7 @@ export function getColumnsFromFields(selectedFields: string[], dateField?: strin
       return {
         title: item,
         dataIndex: 'fields',
+        key: item,
         render: (fields) => {
           const value = _.isArray(fields[item]) ? _.join(fields[item], ',') : fields[item];
           return value;
@@ -46,13 +47,14 @@ export function getColumnsFromFields(selectedFields: string[], dateField?: strin
     columns.unshift({
       title: 'Time',
       dataIndex: 'fields',
+      key: 'time',
       width: 200,
       render: (fields) => {
         return fields[dateField];
       },
-      sorter: (a, b) => {
-        return localeCompareFunc(_.join(_.get(a, `fields[${dateField}]`, '')), _.join(_.get(b, `fields[${dateField}]`, '')));
-      },
+      defaultSortOrder: 'descend',
+      sortDirections: ['ascend', 'descend', 'ascend'],
+      sorter: true,
     });
   }
   return columns;
@@ -95,7 +97,6 @@ export function normalizeLogsQueryRequestBody(params: any) {
   };
   const body = {
     size: params.limit,
-    from: params.page,
     query: {
       bool: {
         filter: [
@@ -122,7 +123,7 @@ export function normalizeLogsQueryRequestBody(params: any) {
     sort: [
       {
         [params.date_field]: {
-          order: 'desc',
+          order: params.order || 'desc',
           unmapped_type: 'boolean',
         },
       },