[UI] Fix runs ordering and pagination (#1812)

Fixes: #1807
dstackai · Oct 11, 2024 · 59a79cd · 59a79cd
1 parent d17a84a
commit 59a79cd
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 11 deletions.
diff --git a/frontend/src/pages/Runs/AdministrationList/index.tsx b/frontend/src/pages/Runs/AdministrationList/index.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSearchParams } from 'react-router-dom';
+import { orderBy as _orderBy } from 'lodash';
 
 import { Button, FormField, Header, Pagination, SelectCSD, SpaceBetween, Table, Toggle } from 'components';
 
@@ -111,7 +112,7 @@ export const AdministrationList: React.FC = () => {
 
             if (result.length > 0) {
                 setPagesCount((count) => count - 1);
-                setData(result);
+                setData(_orderBy(result, ['submitted_at'], ['desc']));
             } else {
                 setPagesCount(1);
             }

diff --git a/frontend/src/pages/Runs/MainList/index.tsx b/frontend/src/pages/Runs/MainList/index.tsx
@@ -1,7 +1,7 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSearchParams } from 'react-router-dom';
-import { sortBy as _sortBy } from 'lodash';
+import { orderBy as _orderBy } from 'lodash';
 
 import { Button, FormField, Header, Pagination, SelectCSD, SpaceBetween, Table, Toggle } from 'components';
 import { useProjectDropdown } from 'layouts/AppLayout/hooks';
@@ -101,7 +101,7 @@ export const List: React.FC = () => {
 
             if (result.length > 0) {
                 setPagesCount((count) => count - 1);
-                setData(result);
+                setData(_orderBy(result, ['submitted_at'], ['desc']));
             } else {
                 setPagesCount(1);
             }
@@ -121,13 +121,7 @@ export const List: React.FC = () => {
         clearFilter,
     });
 
-    const sortedData = useMemo(() => {
-        if (!data) return [];
-
-        return _sortBy(data, [(i) => -i.submitted_at]);
-    }, [data]);
-
-    const { items, actions, collectionProps } = useCollection(sortedData ?? [], {
+    const { items, actions, collectionProps } = useCollection(data ?? [], {
         filtering: {
             empty: renderEmptyMessage(),
             noMatch: renderNoMatchMessage(),