Add loader mission to mission Queue

mrica-equinor · Sep 20, 2023 · 5f96adb · 5f96adb
1 parent ab90618
commit 5f96adb
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 54 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -5,26 +5,29 @@ import { LanguageProvider } from 'components/Contexts/LanguageContext'
 import { MissionControlProvider } from 'components/Contexts/MissionControlContext'
 import { MissionFilterProvider } from 'components/Contexts/MissionFilterContext'
 import { MissionQueueProvider } from 'components/Contexts/MissionQueueContext'
+import { MissionOngoingProvider } from 'components/Contexts/MissionOngoingContext'
 
 function App() {
     return (
         <MissionQueueProvider>
-            <LanguageProvider>
-                <MissionControlProvider>
-                    <>
-                        <UnauthenticatedTemplate>
-                            <div className="sign-in-page">
-                                <SignInPage></SignInPage>
-                            </div>
-                        </UnauthenticatedTemplate>
-                        <AuthenticatedTemplate>
-                            <MissionFilterProvider>
-                                <FlotillaSite />
-                            </MissionFilterProvider>
-                        </AuthenticatedTemplate>
-                    </>
-                </MissionControlProvider>
-            </LanguageProvider>
+            <MissionOngoingProvider>
+                <LanguageProvider>
+                    <MissionControlProvider>
+                        <>
+                            <UnauthenticatedTemplate>
+                                <div className="sign-in-page">
+                                    <SignInPage></SignInPage>
+                                </div>
+                            </UnauthenticatedTemplate>
+                            <AuthenticatedTemplate>
+                                <MissionFilterProvider>
+                                    <FlotillaSite />
+                                </MissionFilterProvider>
+                            </AuthenticatedTemplate>
+                        </>
+                    </MissionControlProvider>
+                </LanguageProvider>
+            </MissionOngoingProvider>
         </MissionQueueProvider>
     )
 }

diff --git a/frontend/src/components/Pages/FrontPage/MissionOverview/MissionQueueCard.tsx b/frontend/src/components/Pages/FrontPage/MissionOverview/MissionQueueCard.tsx
@@ -1,4 +1,4 @@
-import { Button, Card, Checkbox, Dialog, Icon, Typography } from '@equinor/eds-core-react'
+import { Button, Card, Checkbox, Dialog, Icon, Typography, DotProgress } from '@equinor/eds-core-react'
 import { config } from 'config'
 import { tokens } from '@equinor/eds-tokens'
 import { Mission } from 'models/Mission'
@@ -56,9 +56,14 @@ export function MissionQueueCard({ mission, onDeleteMission }: MissionQueueCardP
             <HorizontalContent>
                 <HorizontalNonButtonContent onClick={routeChange}>
                     <Checkbox />
-                    <Button variant="ghost" fullWidth>
-                        <Typography variant="body_short_bold">{mission.name}</Typography>
-                    </Button>
+
+                    {mission.name === 'dummyMission' ? (
+                        <DotProgress size={64} color="primary" />
+                    ) : (
+                        <Button variant="ghost" fullWidth>
+                            <Typography variant="body_short_bold">{mission.name}</Typography>
+                        </Button>
+                    )}
                     <Typography variant="caption" color="#6F6F6F">
                         {TranslateText('Robot')}: {mission.robot.name}
                     </Typography>

diff --git a/frontend/src/components/Pages/FrontPage/MissionOverview/MissionQueueView.tsx b/frontend/src/components/Pages/FrontPage/MissionOverview/MissionQueueView.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import { MissionQueueCard } from './MissionQueueCard'
 import { BackendAPICaller } from 'api/ApiCaller'
 import { useEffect, useState } from 'react'
-import { Mission } from 'models/Mission'
+import { Mission, dummyMission } from 'models/Mission'
 import { EmptyMissionQueuePlaceholder } from './NoMissionPlaceholder'
 import { ScheduleMissionDialog } from './ScheduleMissionDialog'
 import { Robot } from 'models/Robot'
@@ -13,6 +13,7 @@ import { useInstallationContext } from 'components/Contexts/InstallationContext'
 import { CreateMissionButton } from './CreateMissionButton'
 import { EchoMissionDefinition } from 'models/MissionDefinition'
 import { useMissionQueueContext } from 'components/Contexts/MissionQueueContext'
+import { useMissionOngoingContext } from 'components/Contexts/MissionOngoingContext'
 
 const StyledMissionView = styled.div`
     display: grid;
@@ -42,6 +43,8 @@ const mapEchoMissionToString = (missions: EchoMissionDefinition[]): Map<string,
 export function MissionQueueView({ refreshInterval }: RefreshProps) {
     const { TranslateText } = useLanguageContext()
     const { missionQueue } = useMissionQueueContext()
+    const { missionOngoing } = useMissionOngoingContext()
+    const [loadingMissionNames, setLoadingMissionNames] = useState<Set<string>>(new Set())
 
     const [selectedEchoMissions, setSelectedEchoMissions] = useState<EchoMissionDefinition[]>([])
     const [selectedRobot, setSelectedRobot] = useState<Robot>()
@@ -74,7 +77,6 @@ export function MissionQueueView({ refreshInterval }: RefreshProps) {
     }
     const onSelectedRobot = (selectedRobot: Robot) => {
         if (robotOptions === undefined) return
-
         setSelectedRobot(selectedRobot)
     }
 
@@ -83,6 +85,11 @@ export function MissionQueueView({ refreshInterval }: RefreshProps) {
 
         selectedEchoMissions.forEach((mission: EchoMissionDefinition) => {
             BackendAPICaller.postMission(mission.echoMissionId, selectedRobot.id, installationCode)
+            setLoadingMissionNames((prev) => {
+                const updatedSet = new Set(prev)
+                updatedSet.add(mission.name)
+                return updatedSet
+            })
         })
 
         setSelectedEchoMissions([])
@@ -118,18 +125,31 @@ export function MissionQueueView({ refreshInterval }: RefreshProps) {
         }
     }, [robotOptions, installationCode])
 
+    useEffect(() => {
+        setLoadingMissionNames((currentLoadingNames) => {
+            const updatedLoadingMissionIds = new Set(currentLoadingNames)
+            missionQueue.forEach((mission) => updatedLoadingMissionIds.delete(mission.name))
+            missionOngoing.forEach((mission) => updatedLoadingMissionIds.delete(mission.name))
+            return updatedLoadingMissionIds
+        })
+    }, [missionQueue, missionOngoing])
+
     var missionQueueDisplay = missionQueue.map(function (mission, index) {
         return <MissionQueueCard key={index} mission={mission} onDeleteMission={onDeleteMission} />
     })
+    const loadingQueueDisplay = () => {
+        return <MissionQueueCard key={'test'} mission={dummyMission} onDeleteMission={() => {}} />
+    }
 
     return (
         <StyledMissionView>
             <Typography variant="h1" color="resting">
                 {TranslateText('Mission Queue')}
             </Typography>
             <MissionTable>
+                {loadingMissionNames.size > 0 && loadingQueueDisplay()}
                 {missionQueue.length > 0 && missionQueueDisplay}
-                {missionQueue.length === 0 && <EmptyMissionQueuePlaceholder />}
+                {loadingMissionNames.size === 0 && missionQueue.length === 0 && <EmptyMissionQueuePlaceholder />}
             </MissionTable>
             <MissionButtonView>
                 <ScheduleMissionDialog

diff --git a/frontend/src/components/Pages/FrontPage/MissionOverview/OngoingMissionView.tsx b/frontend/src/components/Pages/FrontPage/MissionOverview/OngoingMissionView.tsx
@@ -1,6 +1,4 @@
 import { Button, Typography, Icon } from '@equinor/eds-core-react'
-import { Mission, MissionStatus } from 'models/Mission'
-import { useCallback, useEffect, useState } from 'react'
 import styled from 'styled-components'
 import { RefreshProps } from '../FrontPage'
 import { NoOngoingMissionsPlaceholder } from './NoMissionPlaceholder'
@@ -9,7 +7,7 @@ import { useLanguageContext } from 'components/Contexts/LanguageContext'
 import { useNavigate } from 'react-router-dom'
 import { config } from 'config'
 import { Icons } from 'utils/icons'
-import { BackendAPICaller } from 'api/ApiCaller'
+import { useMissionOngoingContext } from 'components/Contexts/MissionOngoingContext'
 
 const StyledOngoingMissionView = styled.div`
     display: flex;
@@ -28,32 +26,11 @@ const ButtonStyle = styled.div`
 
 export function OngoingMissionView({ refreshInterval }: RefreshProps) {
     const { TranslateText } = useLanguageContext()
-    const missionPageSize = 100
-    const [missions, setMissions] = useState<Mission[]>([])
-
-    const updateOngoingAndPausedMissions = useCallback(() => {
-        BackendAPICaller.getMissionRuns({
-            statuses: [MissionStatus.Ongoing, MissionStatus.Paused],
-            pageSize: missionPageSize,
-            orderBy: 'StartTime desc',
-        }).then((missions) => {
-            setMissions(missions.content)
-        })
-    }, [])
-
-    useEffect(() => {
-        updateOngoingAndPausedMissions()
-    }, [updateOngoingAndPausedMissions])
-
-    useEffect(() => {
-        const id = setInterval(() => {
-            updateOngoingAndPausedMissions()
-        }, refreshInterval)
-        return () => clearInterval(id)
-    }, [refreshInterval, updateOngoingAndPausedMissions])
-
-    var missionDisplay = missions.map((mission, index) => <OngoingMissionCard key={index} mission={mission} />)
+    const { missionOngoing } = useMissionOngoingContext()
 
+    var OngoingMissions = missionOngoing.map(function (mission, index) {
+        return <OngoingMissionCard key={index} mission={mission} />
+    })
     let navigate = useNavigate()
     const routeChange = () => {
         let path = `${config.FRONTEND_BASE_ROUTE}/history`
@@ -66,8 +43,8 @@ export function OngoingMissionView({ refreshInterval }: RefreshProps) {
                 {TranslateText('Ongoing Missions')}
             </Typography>
             <OngoingMissionSection>
-                {missions.length > 0 && missionDisplay}
-                {missions.length === 0 && <NoOngoingMissionsPlaceholder />}
+                {missionOngoing.length > 0 && OngoingMissions}
+                {missionOngoing.length === 0 && <NoOngoingMissionsPlaceholder />}
             </OngoingMissionSection>
             <ButtonStyle>
                 <Button variant="outlined" onClick={routeChange}>

diff --git a/frontend/src/models/Mission.ts b/frontend/src/models/Mission.ts
@@ -1,7 +1,8 @@
 import { MapMetadata } from './MapMetadata'
-import { Robot } from './Robot'
+import { Robot , dummyRobot} from './Robot'
 import { Task } from './Task'
 
+
 export enum MissionStatus {
     Pending = 'Pending',
     Ongoing = 'Ongoing',