Add mockmission for instant feedback in mission queue

frontend/src/App.tsx

@@ -4,11 +4,11 @@ import { FlotillaSite } from 'components/Pages/FlotillaSite'
 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 { MissionsProvider } from 'components/Contexts/MissionListsContext'
 
 function App() {
     return (
-        <MissionQueueProvider>
+        <MissionsProvider>
             <LanguageProvider>
                 <MissionControlProvider>
                     <>
@@ -25,7 +25,7 @@ function App() {
                     </>
                 </MissionControlProvider>
             </LanguageProvider>
-        </MissionQueueProvider>
+        </MissionsProvider>
     )
 }
 

frontend/src/components/Contexts/MissionListsContext.tsx

@@ -0,0 +1,70 @@
+import { createContext, FC, useContext, useEffect, useState } from 'react'
+import { Mission, MissionStatus } from 'models/Mission'
+import { refreshInterval } from 'components/Pages/FrontPage/FrontPage'
+import { BackendAPICaller } from 'api/ApiCaller'
+
+interface IMissionsContext {
+    ongoingMissions: Mission[]
+    missionQueue: Mission[]
+}
+
+interface Props {
+    children: React.ReactNode
+}
+
+const defaultMissionsContext: IMissionsContext = {
+    ongoingMissions: [],
+    missionQueue: [],
+}
+
+export const MissionsContext = createContext<IMissionsContext>(defaultMissionsContext)
+
+interface MissionsResult {
+    ongoingMissions: Mission[]
+    missionQueue: Mission[]
+}
+
+const fetchMissions = (params: {
+    statuses: MissionStatus[]
+    pageSize: number
+    orderBy: string
+}): Promise<Mission[]> => {
+    return BackendAPICaller.getMissionRuns(params).then((response) => response.content)
+}
+export const useMissions = (refreshInterval: number): MissionsResult => {
+    const [ongoingMissions, setOngoingMissions] = useState<Mission[]>([])
+    const [missionQueue, setMissionQueue] = useState<Mission[]>([])
+
+    useEffect(() => {
+        const fetchAndUpdateMissions = async () => {
+            const ongoing = await fetchMissions({
+                statuses: [MissionStatus.Ongoing, MissionStatus.Paused],
+                pageSize: 100,
+                orderBy: 'StartTime desc',
+            })
+            setOngoingMissions(ongoing)
+
+            const queue = await fetchMissions({
+                statuses: [MissionStatus.Pending],
+                pageSize: 100,
+                orderBy: 'DesiredStartTime',
+            })
+            setMissionQueue(queue)
+        }
+
+        fetchAndUpdateMissions()
+
+        const id = setInterval(fetchAndUpdateMissions, refreshInterval)
+
+        return () => clearInterval(id)
+    }, [refreshInterval])
+
+    return { ongoingMissions, missionQueue }
+}
+export const MissionsProvider: FC<Props> = ({ children }) => {
+    const { ongoingMissions, missionQueue } = useMissions(refreshInterval)
+
+    return <MissionsContext.Provider value={{ ongoingMissions, missionQueue }}>{children}</MissionsContext.Provider>
+}
+
+export const useMissionsContext = () => useContext(MissionsContext)

frontend/src/components/Pages/FrontPage/MissionOverview/MissionQueueCard.tsx

@@ -1,7 +1,7 @@
-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'
+import { Mission, dummyMission } from 'models/Mission'
 import styled from 'styled-components'
 import { useNavigate } from 'react-router-dom'
 import { useState } from 'react'
@@ -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 === 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>

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'
@@ -12,7 +12,7 @@ import { useLanguageContext } from 'components/Contexts/LanguageContext'
 import { useInstallationContext } from 'components/Contexts/InstallationContext'
 import { CreateMissionButton } from './CreateMissionButton'
 import { EchoMissionDefinition } from 'models/MissionDefinition'
-import { useMissionQueueContext } from 'components/Contexts/MissionQueueContext'
+import { useMissionsContext } from 'components/Contexts/MissionListsContext'
 
 const StyledMissionView = styled.div`
     display: grid;
@@ -41,7 +41,8 @@ const mapEchoMissionToString = (missions: EchoMissionDefinition[]): Map<string,
 
 export function MissionQueueView({ refreshInterval }: RefreshProps) {
     const { TranslateText } = useLanguageContext()
-    const { missionQueue } = useMissionQueueContext()
+    const { missionQueue, ongoingMissions } = useMissionsContext()
+    const [loadingMissionNames, setLoadingMissionNames] = useState<Set<string>>(new Set())
 
     const [selectedEchoMissions, setSelectedEchoMissions] = useState<EchoMissionDefinition[]>([])
     const [selectedRobot, setSelectedRobot] = useState<Robot>()
@@ -74,7 +75,6 @@ export function MissionQueueView({ refreshInterval }: RefreshProps) {
     }
     const onSelectedRobot = (selectedRobot: Robot) => {
         if (robotOptions === undefined) return
-
         setSelectedRobot(selectedRobot)
     }
 
@@ -83,6 +83,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 +123,31 @@ export function MissionQueueView({ refreshInterval }: RefreshProps) {
         }
     }, [robotOptions, installationCode])
 
+    useEffect(() => {
+        setLoadingMissionNames((currentLoadingNames) => {
+            const updatedLoadingMissionIds = new Set(currentLoadingNames)
+            missionQueue.forEach((mission) => updatedLoadingMissionIds.delete(mission.name))
+            ongoingMissions.forEach((mission) => updatedLoadingMissionIds.delete(mission.name))
+            return updatedLoadingMissionIds
+        })
+    }, [missionQueue, ongoingMissions])
+
     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

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,8 @@ 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 { useOngoingMissionsContext } from 'components/Contexts/OngoingMissionsContext' */
+import { useMissionsContext } from 'components/Contexts/MissionListsContext'
 
 const StyledOngoingMissionView = styled.div`
     display: flex;
@@ -28,32 +27,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 { ongoingMissions } = useMissionsContext()
 
+    var ongoingMissionscard = ongoingMissions.map(function (mission, index) {
+        return <OngoingMissionCard key={index} mission={mission} />
+    })
     let navigate = useNavigate()
     const routeChange = () => {
         let path = `${config.FRONTEND_BASE_ROUTE}/history`
@@ -66,8 +44,8 @@ export function OngoingMissionView({ refreshInterval }: RefreshProps) {
                 {TranslateText('Ongoing Missions')}
             </Typography>
             <OngoingMissionSection>
-                {missions.length > 0 && missionDisplay}
-                {missions.length === 0 && <NoOngoingMissionsPlaceholder />}
+                {ongoingMissions.length > 0 && ongoingMissionscard}
+                {ongoingMissions.length === 0 && <NoOngoingMissionsPlaceholder />}
             </OngoingMissionSection>
             <ButtonStyle>
                 <Button variant="outlined" onClick={routeChange}>

frontend/src/models/Mission.ts

@@ -1,5 +1,5 @@
 import { MapMetadata } from './MapMetadata'
-import { Robot } from './Robot'
+import { Robot, dummyRobot } from './Robot'
 import { Task } from './Task'
 
 export enum MissionStatus {
@@ -32,3 +32,12 @@ export interface Mission {
     tasks: Task[]
     map?: MapMetadata
 }
+export const dummyMission: Mission = {
+    id: 'dummyId',
+    name: 'dummyMission',
+    robot: dummyRobot,
+    status: MissionStatus.Pending,
+    isCompleted: false,
+    desiredStartTime: new Date(),
+    tasks: [],
+}

frontend/src/models/Robot.ts

@@ -1,7 +1,7 @@
 import { Area } from './Area'
 import { BatteryStatus } from './Battery'
 import { Pose } from './Pose'
-import { RobotModel } from './RobotModel'
+import { RobotModel, dummyRobotModel } from './RobotModel'
 import { VideoStream } from './VideoStream'
 
 export enum RobotStatus {
@@ -29,3 +29,9 @@ export interface Robot {
     isarUri?: string
     currentArea?: Area
 }
+export const dummyRobot: Robot = {
+    id: 'dummyRobotId',
+    model: dummyRobotModel,
+    currentInstallation: 'DummyInstallation',
+    status: RobotStatus.Available,
+}

frontend/src/models/RobotModel.ts

@@ -16,3 +16,9 @@ export interface RobotModel {
     upperPressureWarningThreshold: number
     lowerPressureWarningThreshold: number
 }
+export const dummyRobotModel: RobotModel = {
+    id: 'dummyModelId',
+    type: RobotType.Robot,
+    upperPressureWarningThreshold: 100,
+    lowerPressureWarningThreshold: 10,
+}