Use 'OrderBy' in frontend calls

equinor · Mar 30, 2023 · 6fdc56e · 6fdc56e
1 parent b7c5551
commit 6fdc56e
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 24 deletions.
diff --git a/frontend/src/api/ApiCaller.tsx b/frontend/src/api/ApiCaller.tsx
@@ -98,6 +98,7 @@ export class BackendAPICaller {
         if (parameters.status) path = path + 'status=' + parameters.status + '&'
         if (parameters.pageNumber) path = path + 'PageNumber=' + parameters.pageNumber + '&'
         if (parameters.pageSize) path = path + 'PageSize=' + parameters.pageSize + '&'
+        if (parameters.orderBy) path = path + 'OrderBy=' + parameters.orderBy + '&'
         const result = await this.GET<Mission[]>(path).catch((e) => {
             console.error(`Failed to GET /${path}: ` + e)
             throw e

diff --git a/frontend/src/components/Pages/FrontPage/MissionOverview/FailedMissionAlertView.tsx b/frontend/src/components/Pages/FrontPage/MissionOverview/FailedMissionAlertView.tsx
@@ -79,6 +79,7 @@ function SeveralFailedMissions({ missions }: MissionsProps) {
 export function FailedMissionAlertView({ refreshInterval }: RefreshProps) {
     const handleError = useErrorHandler()
 
+    const PageSize: number = 100
     // The default amount of minutes in the past for failed missions to generate an alert
     const DefaultTimeInterval: number = 10
 
@@ -114,7 +115,7 @@ export function FailedMissionAlertView({ refreshInterval }: RefreshProps) {
 
     const updateRecentFailedMissions = () => {
         const lastDismissTime: Date = getLastDismissalTime()
-        apiCaller.getMissions({ status: MissionStatus.Failed }).then((missions) => {
+        apiCaller.getMissions({ status: MissionStatus.Failed, pageSize: 100 }).then((missions) => {
             const newRecentFailedMissions = missions.content.filter((m) => new Date(m.endTime!) > lastDismissTime)
             setRecentFailedMissions(newRecentFailedMissions)
         })

diff --git a/frontend/src/components/Pages/FrontPage/MissionOverview/MissionQueueView.tsx b/frontend/src/components/Pages/FrontPage/MissionOverview/MissionQueueView.tsx
@@ -13,7 +13,6 @@ import { Text } from 'components/Contexts/LanguageContext'
 import { useAssetContext } from 'components/Contexts/AssetContext'
 import { Icons } from 'utils/icons'
 import { useErrorHandler } from 'react-error-boundary'
-import { compareByDate } from 'utils/filtersAndSorts'
 
 const StyledMissionView = styled.div`
     display: grid;
@@ -100,13 +99,6 @@ export function MissionQueueView({ refreshInterval }: RefreshProps) {
         apiCaller.deleteMission(mission.id) //.catch((e) => handleError(e))
     }
 
-    useEffect(() => {
-        apiCaller.getMissions({ status: MissionStatus.Pending, pageSize: missionPageSize }).then((missions) => {
-            setMissionQueue(missions.content.sort((a, b) => compareByDate(a.desiredStartTime, b.desiredStartTime)))
-        })
-        //.catch((e) => handleError(e))
-    }, [])
-
     useEffect(() => {
         const id = setInterval(() => {
             apiCaller.getRobots().then((robots) => {
@@ -120,9 +112,15 @@ export function MissionQueueView({ refreshInterval }: RefreshProps) {
 
     useEffect(() => {
         const id = setInterval(() => {
-            apiCaller.getMissions({ status: MissionStatus.Pending }).then((missions) => {
-                setMissionQueue(missions.content)
-            })
+            apiCaller
+                .getMissions({
+                    status: MissionStatus.Pending,
+                    pageSize: missionPageSize,
+                    orderBy: 'DesiredStartTime desc',
+                })
+                .then((missions) => {
+                    setMissionQueue(missions.content)
+                })
             //.catch((e) => handleError(e))
         }, refreshInterval)
         return () => clearInterval(id)

diff --git a/frontend/src/components/Pages/FrontPage/MissionOverview/OngoingMissionView.tsx b/frontend/src/components/Pages/FrontPage/MissionOverview/OngoingMissionView.tsx
@@ -11,6 +11,7 @@ import { useNavigate } from 'react-router-dom'
 import { config } from 'config'
 import { Icons } from 'utils/icons'
 import { useErrorHandler } from 'react-error-boundary'
+import { PaginatedResponse } from 'models/PaginatedResponse'
 
 const StyledOngoingMissionView = styled.div`
     display: flex;
@@ -48,15 +49,19 @@ export function OngoingMissionView({ refreshInterval }: RefreshProps) {
         return () => clearInterval(id)
     }, [])
 
+    const getCurrentMissions = (status: MissionStatus): Promise<PaginatedResponse<Mission>> => {
+        return apiCaller.getMissions({ status: status, pageSize: missionPageSize, orderBy: 'StartTime desc' })
+    }
+
     const updateOngoingMissions = () => {
-        apiCaller.getMissions({ status: MissionStatus.Ongoing, pageSize: missionPageSize }).then((missions) => {
+        getCurrentMissions(MissionStatus.Ongoing).then((missions) => {
             setOngoingMissions(missions.content)
         })
         //.catch((e) => handleError(e))
     }
 
     const updatePausedMissions = () => {
-        apiCaller.getMissions({ status: MissionStatus.Paused }).then((missions) => {
+        getCurrentMissions(MissionStatus.Paused).then((missions) => {
             setPausedMissions(missions.content)
         })
         //.catch((e) => handleError(e))

diff --git a/frontend/src/components/Pages/MissionHistoryPage/MissionHistoryView.tsx b/frontend/src/components/Pages/MissionHistoryPage/MissionHistoryView.tsx
@@ -8,7 +8,6 @@ import { RefreshProps } from './MissionHistoryPage'
 import styled from 'styled-components'
 import { Text } from 'components/Contexts/LanguageContext'
 import { useErrorHandler } from 'react-error-boundary'
-import { compareByDate } from 'utils/filtersAndSorts'
 import { PaginationHeader } from 'models/PaginatedResponse'
 
 const TableWithHeader = styled.div`
@@ -50,15 +49,13 @@ export function MissionHistoryView({ refreshInterval }: RefreshProps) {
     const updateCompletedMissions = () => {
         const page = currentPage ?? 1
         console.log('Page is ' + page)
-        apiCaller.getMissions({ pageSize: pageSize, pageNumber: page }).then((paginatedMissions) => {
-            setPaginationDetails(paginatedMissions.pagination)
-            setCompletedMissions(
-                paginatedMissions.content
-                    .filter((m) => completedStatuses.includes(m.status))
-                    .sort((a, b) => compareByDate(a.endTime, b.endTime))
-            )
-            setIsLoading(false)
-        })
+        apiCaller
+            .getMissions({ pageSize: pageSize, pageNumber: page, orderBy: 'EndTime desc, Name' })
+            .then((paginatedMissions) => {
+                setPaginationDetails(paginatedMissions.pagination)
+                setCompletedMissions(paginatedMissions.content.filter((m) => completedStatuses.includes(m.status)))
+                setIsLoading(false)
+            })
         //.catch((e) => handleError(e))
     }
 

diff --git a/frontend/src/models/MissionQueryParameters.ts b/frontend/src/models/MissionQueryParameters.ts
@@ -15,4 +15,5 @@ export interface MissionQueryParameters {
     maxDesiredStartTime?: number
     pageNumber?: number
     pageSize?: number
+    orderBy?: string
 }