From 59a79cdc7a1734fd709948f1835d65d1893a8e32 Mon Sep 17 00:00:00 2001
From: Dmitry Meyer <me@undef.im>
Date: Fri, 11 Oct 2024 08:11:04 +0000
Subject: [PATCH] [UI] Fix runs ordering and pagination (#1812)

Fixes: https://github.com/dstackai/dstack/issues/1807
---
 .../src/pages/Runs/AdministrationList/index.tsx    |  3 ++-
 frontend/src/pages/Runs/MainList/index.tsx         | 14 ++++----------
 2 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/frontend/src/pages/Runs/AdministrationList/index.tsx b/frontend/src/pages/Runs/AdministrationList/index.tsx
index c499e531c..d2a8757c3 100644
--- 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
index 513cc8abf..588936c11 100644
--- 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(),