Add MissionListsContext

frontend/src/App.tsx

@@ -4,31 +4,28 @@ 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 { MissionOngoingProvider } from 'components/Contexts/MissionOngoingContext'
+import { MissionsProvider } from 'components/Contexts/MissionListsContext'
 
 function App() {
     return (
-        <MissionQueueProvider>
-            <MissionOngoingProvider>
-                <LanguageProvider>
-                    <MissionControlProvider>
-                        <>
-                            <UnauthenticatedTemplate>
-                                <div className="sign-in-page">
-                                    <SignInPage></SignInPage>
-                                </div>
-                            </UnauthenticatedTemplate>
-                            <AuthenticatedTemplate>
-                                <MissionFilterProvider>
-                                    <FlotillaSite />
-                                </MissionFilterProvider>
-                            </AuthenticatedTemplate>
-                        </>
-                    </MissionControlProvider>
-                </LanguageProvider>
-            </MissionOngoingProvider>
-        </MissionQueueProvider>
+        <MissionsProvider>
+            <LanguageProvider>
+                <MissionControlProvider>
+                    <>
+                        <UnauthenticatedTemplate>
+                            <div className="sign-in-page">
+                                <SignInPage></SignInPage>
+                            </div>
+                        </UnauthenticatedTemplate>
+                        <AuthenticatedTemplate>
+                            <MissionFilterProvider>
+                                <FlotillaSite />
+                            </MissionFilterProvider>
+                        </AuthenticatedTemplate>
+                    </>
+                </MissionControlProvider>
+            </LanguageProvider>
+        </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, 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'
@@ -57,7 +57,7 @@ export function MissionQueueCard({ mission, onDeleteMission }: MissionQueueCardP
                 <HorizontalNonButtonContent onClick={routeChange}>
                     <Checkbox />
 
-                    {mission.name === 'dummyMission' ? (
+                    {mission === dummyMission ? (
                         <DotProgress size={64} color="primary" />
                     ) : (
                         <Button variant="ghost" fullWidth>

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

@@ -12,8 +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 { useMissionOngoingContext } from 'components/Contexts/MissionOngoingContext'
+import { useMissionsContext } from 'components/Contexts/MissionListsContext'
 
 const StyledMissionView = styled.div`
     display: grid;
@@ -42,8 +41,7 @@ const mapEchoMissionToString = (missions: EchoMissionDefinition[]): Map<string,
 
 export function MissionQueueView({ refreshInterval }: RefreshProps) {
     const { TranslateText } = useLanguageContext()
-    const { missionQueue } = useMissionQueueContext()
-    const { missionOngoing } = useMissionOngoingContext()
+    const { missionQueue, ongoingMissions } = useMissionsContext()
     const [loadingMissionNames, setLoadingMissionNames] = useState<Set<string>>(new Set())
 
     const [selectedEchoMissions, setSelectedEchoMissions] = useState<EchoMissionDefinition[]>([])
@@ -129,10 +127,10 @@ export function MissionQueueView({ refreshInterval }: RefreshProps) {
         setLoadingMissionNames((currentLoadingNames) => {
             const updatedLoadingMissionIds = new Set(currentLoadingNames)
             missionQueue.forEach((mission) => updatedLoadingMissionIds.delete(mission.name))
-            missionOngoing.forEach((mission) => updatedLoadingMissionIds.delete(mission.name))
+            ongoingMissions.forEach((mission) => updatedLoadingMissionIds.delete(mission.name))
             return updatedLoadingMissionIds
         })
-    }, [missionQueue, missionOngoing])
+    }, [missionQueue, ongoingMissions])
 
     var missionQueueDisplay = missionQueue.map(function (mission, index) {
         return <MissionQueueCard key={index} mission={mission} onDeleteMission={onDeleteMission} />

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

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