Remove polling and refactor mission page

frontend/src/api/ApiCaller.tsx

@@ -31,9 +31,13 @@ export class BackendAPICaller {
         }
     }
 
-    private static initializeRequest<T>(method: 'GET' | 'POST' | 'PUT' | 'DELETE', body?: T): RequestInit {
+    private static initializeRequest<T>(
+        method: 'GET' | 'POST' | 'PUT' | 'DELETE',
+        body?: T,
+        contentType?: string
+    ): RequestInit {
         const headers = {
-            'content-type': 'application/json',
+            'content-type': contentType ?? 'application/json',
             Authorization: `Bearer ${BackendAPICaller.accessToken}`,
         }
 
@@ -51,11 +55,12 @@ export class BackendAPICaller {
     private static async query<TBody, TContent>(
         method: 'GET' | 'POST' | 'PUT' | 'DELETE',
         path: string,
-        body?: TBody
+        body?: TBody,
+        contentType?: string
     ): Promise<{ content: TContent; headers: Headers }> {
         await BackendAPICaller.ApiReady()
 
-        const initializedRequest: RequestInit = BackendAPICaller.initializeRequest(method, body)
+        const initializedRequest: RequestInit = BackendAPICaller.initializeRequest(method, body, contentType)
 
         const url = `${config.BACKEND_URL}/${path}`
 
@@ -79,8 +84,11 @@ export class BackendAPICaller {
         return { content: responseContent, headers: response.headers }
     }
 
-    private static async GET<TContent>(path: string): Promise<{ content: TContent; headers: Headers }> {
-        return BackendAPICaller.query('GET', path)
+    private static async GET<TContent>(
+        path: string,
+        contentType?: string
+    ): Promise<{ content: TContent; headers: Headers }> {
+        return BackendAPICaller.query('GET', path, undefined, contentType)
     }
 
     private static async POST<TBody, TContent>(
@@ -398,28 +406,13 @@ export class BackendAPICaller {
 
     static async getMap(installationCode: string, mapName: string): Promise<Blob> {
         const path: string = 'missions/' + installationCode + '/' + mapName + '/map'
-        const url = `${config.BACKEND_URL}/${path}`
-
-        const headers = {
-            'content-type': 'image/png',
-            Authorization: `Bearer ${BackendAPICaller.accessToken}`,
-        }
-
-        const options: RequestInit = {
-            method: 'GET',
-            headers,
-            mode: 'cors',
-        }
-
-        let response = await fetch(url, options)
 
-        if (response.status === 200) {
-            const imageBlob = await response.blob()
-            return imageBlob
-        } else {
-            console.error('HTTP-Error: ' + response.status)
-            throw Error
-        }
+        return BackendAPICaller.GET<Response>(path, 'image/png')
+            .then((response) => response.content.blob())
+            .catch((e) => {
+                console.error(`Failed to GET /${path}: ` + e)
+                throw e
+            })
     }
 
     static async getAreas(): Promise<Area[]> {

frontend/src/components/Contexts/MissionControlContext.tsx

@@ -1,6 +1,5 @@
 import { createContext, useContext, useState, FC } from 'react'
 import { BackendAPICaller } from 'api/ApiCaller'
-import { Mission } from 'models/Mission'
 import { MissionStatusRequest } from 'components/Pages/FrontPage/MissionOverview/StopDialogs'
 
 interface IMissionControlState {
@@ -13,12 +12,12 @@ interface Props {
 
 export interface IMissionControlContext {
     missionControlState: IMissionControlState
-    updateMissionState: (newState: MissionStatusRequest, mission: Mission) => void
+    updateRobotMissionState: (newState: MissionStatusRequest, robotId: string) => void
 }
 
 const defaultMissionControlInterface = {
     missionControlState: { isWaitingForResponse: false },
-    updateMissionState: (newState: MissionStatusRequest, mission: Mission) => {},
+    updateRobotMissionState: (newState: MissionStatusRequest, robotId: string) => {},
 }
 
 export const MissionControlContext = createContext<IMissionControlContext>(defaultMissionControlInterface)
@@ -33,21 +32,21 @@ export const MissionControlProvider: FC<Props> = ({ children }) => {
         setMissionControlState({ isWaitingForResponse: isWaiting })
     }
 
-    const updateMissionState = (newState: MissionStatusRequest, mission: Mission) => {
+    const updateRobotMissionState = (newState: MissionStatusRequest, robotId: string) => {
         switch (newState) {
             case MissionStatusRequest.Pause: {
                 setIsWaitingForResponse(true)
-                BackendAPICaller.pauseMission(mission.robot.id).then((_) => setIsWaitingForResponse(false))
+                BackendAPICaller.pauseMission(robotId).then((_) => setIsWaitingForResponse(false))
                 break
             }
             case MissionStatusRequest.Resume: {
                 setIsWaitingForResponse(true)
-                BackendAPICaller.resumeMission(mission.robot.id).then((_) => setIsWaitingForResponse(false))
+                BackendAPICaller.resumeMission(robotId).then((_) => setIsWaitingForResponse(false))
                 break
             }
             case MissionStatusRequest.Stop: {
                 setIsWaitingForResponse(true)
-                BackendAPICaller.stopMission(mission.robot.id).then((_) => setIsWaitingForResponse(false))
+                BackendAPICaller.stopMission(robotId).then((_) => setIsWaitingForResponse(false))
                 break
             }
         }
@@ -57,7 +56,7 @@ export const MissionControlProvider: FC<Props> = ({ children }) => {
         <MissionControlContext.Provider
             value={{
                 missionControlState,
-                updateMissionState,
+                updateRobotMissionState,
             }}
         >
             {children}

frontend/src/components/Contexts/MissionListsContext.tsx

@@ -2,6 +2,7 @@ import { createContext, FC, useContext, useEffect, useState } from 'react'
 import { Mission, MissionStatus } from 'models/Mission'
 import { BackendAPICaller } from 'api/ApiCaller'
 import { SignalREventLabels, useSignalRContext } from './SignalRContext'
+import { translateSignalRMission } from 'utils/EnumTranslations'
 
 const upsertList = (list: Mission[], mission: Mission) => {
     let newList = [...list]
@@ -91,8 +92,7 @@ export const useMissions = (): MissionsResult => {
             })
             registerEvent(SignalREventLabels.missionRunUpdated, (username: string, message: string) => {
                 let updatedMission: Mission = JSON.parse(message)
-                // This conversion translates from the enum as a number to an enum as a string
-                updatedMission.status = Object.values(MissionStatus)[updatedMission.status as unknown as number]
+                updatedMission = translateSignalRMission(updatedMission)
 
                 setMissionQueue((oldQueue) => {
                     const oldQueueCopy = [...oldQueue]

frontend/src/components/Displays/MissionButtons/MissionControlButtons.tsx

@@ -1,4 +1,4 @@
-import { Mission, MissionStatus } from 'models/Mission'
+import { MissionStatus } from 'models/Mission'
 import { Button, CircularProgress, Icon } from '@equinor/eds-core-react'
 import { Icons } from 'utils/icons'
 import { tokens } from '@equinor/eds-tokens'
@@ -8,8 +8,15 @@ import { useLanguageContext } from 'components/Contexts/LanguageContext'
 import { useMissionControlContext } from 'components/Contexts/MissionControlContext'
 import { StopMissionDialog, MissionStatusRequest } from 'components/Pages/FrontPage/MissionOverview/StopDialogs'
 
+interface MissionControlButtonsProps {
+    missionName: string
+    robotId: string
+    missionStatus: MissionStatus
+}
+
 interface MissionProps {
-    mission: Mission
+    missionName: string
+    robotId: string
 }
 
 const ButtonStyle = styled.div`
@@ -24,7 +31,7 @@ const ButtonText = styled.div`
     align-items: center;
 `
 
-export const MissionControlButtons = ({ mission }: MissionProps) => {
+export const MissionControlButtons = ({ missionName, robotId, missionStatus }: MissionControlButtonsProps) => {
     const { missionControlState } = useMissionControlContext()
 
     return (
@@ -33,29 +40,33 @@ export const MissionControlButtons = ({ mission }: MissionProps) => {
                 <CircularProgress size={32} />
             ) : (
                 <>
-                    {mission.status === MissionStatus.Ongoing && <OngoingMissionButton mission={mission} />}
-                    {mission.status === MissionStatus.Paused && <PausedMissionButton mission={mission} />}
+                    {missionStatus === MissionStatus.Ongoing && (
+                        <OngoingMissionButton missionName={missionName} robotId={robotId} />
+                    )}
+                    {missionStatus === MissionStatus.Paused && (
+                        <PausedMissionButton missionName={missionName} robotId={robotId} />
+                    )}
                 </>
             )}
         </>
     )
 }
 
-const OngoingMissionButton = ({ mission }: MissionProps) => {
+const OngoingMissionButton = ({ missionName, robotId }: MissionProps) => {
     const { TranslateText } = useLanguageContext()
-    const { updateMissionState } = useMissionControlContext()
+    const { updateRobotMissionState } = useMissionControlContext()
 
     return (
         <>
             <ButtonStyle>
                 <ButtonText>
-                    <StopMissionDialog mission={mission} />
+                    <StopMissionDialog missionName={missionName} robotId={robotId} />
                     <Typography variant="caption">{TranslateText('Stop')}</Typography>
                 </ButtonText>
                 <ButtonText>
                     <Button
                         variant="ghost_icon"
-                        onClick={() => updateMissionState(MissionStatusRequest.Pause, mission)}
+                        onClick={() => updateRobotMissionState(MissionStatusRequest.Pause, robotId)}
                     >
                         <Icon
                             name={Icons.PauseButton}
@@ -70,21 +81,21 @@ const OngoingMissionButton = ({ mission }: MissionProps) => {
     )
 }
 
-const PausedMissionButton = ({ mission }: MissionProps) => {
+const PausedMissionButton = ({ missionName, robotId }: MissionProps) => {
     const { TranslateText } = useLanguageContext()
-    const { updateMissionState } = useMissionControlContext()
+    const { updateRobotMissionState } = useMissionControlContext()
 
     return (
         <>
             <ButtonStyle>
                 <ButtonText>
-                    <StopMissionDialog mission={mission} />
+                    <StopMissionDialog missionName={missionName} robotId={robotId} />
                     <Typography variant="caption">{TranslateText('Stop')}</Typography>
                 </ButtonText>
                 <ButtonText>
                     <Button
                         variant="ghost_icon"
-                        onClick={() => updateMissionState(MissionStatusRequest.Resume, mission)}
+                        onClick={() => updateRobotMissionState(MissionStatusRequest.Resume, robotId)}
                     >
                         <Icon
                             name={Icons.PlayButton}

frontend/src/components/Displays/MissionButtons/MissionRestartButton.tsx

@@ -1,4 +1,3 @@
-import { Mission } from 'models/Mission'
 import { Button, EdsProvider, Icon, Menu, Tooltip } from '@equinor/eds-core-react'
 import { Icons } from 'utils/icons'
 import { tokens } from '@equinor/eds-tokens'
@@ -8,7 +7,6 @@ import { useNavigate } from 'react-router-dom'
 import { useLanguageContext } from 'components/Contexts/LanguageContext'
 import styled from 'styled-components'
 import { useRef, useState } from 'react'
-import { TaskStatus } from 'models/Task'
 
 const Centered = styled.div`
     display: flex;
@@ -17,15 +15,16 @@ const Centered = styled.div`
 `
 
 interface MissionProps {
-    mission: Mission
+    missionId: string
+    hasFailedTasks: boolean
 }
 
 export enum ReRunOptions {
     ReRun,
     ReRunFailed,
 }
 
-export const MissionRestartButton = ({ mission }: MissionProps) => {
+export const MissionRestartButton = ({ missionId, hasFailedTasks }: MissionProps) => {
     const { TranslateText } = useLanguageContext()
     const [isOpen, setIsOpen] = useState<boolean>(false)
     const anchorRef = useRef<HTMLButtonElement>(null)
@@ -44,7 +43,7 @@ export const MissionRestartButton = ({ mission }: MissionProps) => {
     }
 
     const startReRun = (option: ReRunOptions) => {
-        BackendAPICaller.reRunMission(mission.id, option === ReRunOptions.ReRunFailed).then((mission) =>
+        BackendAPICaller.reRunMission(missionId, option === ReRunOptions.ReRunFailed).then((mission) =>
             navigateToHome()
         )
     }
@@ -59,7 +58,7 @@ export const MissionRestartButton = ({ mission }: MissionProps) => {
                     aria-haspopup="true"
                     aria-expanded={isOpen}
                     aria-controls="menu-default"
-                    onClick={() => (isOpen ? closeMenu() : openMenu())}
+                    onClick={isOpen ? closeMenu : openMenu}
                 >
                     <Icon
                         name={Icons.Replay}
@@ -79,9 +78,7 @@ export const MissionRestartButton = ({ mission }: MissionProps) => {
                     <Menu.Item onClick={() => startReRun(ReRunOptions.ReRun)}>
                         {TranslateText('Re-run full mission')}
                     </Menu.Item>
-                    {mission.tasks.some(
-                        (t) => t.status !== TaskStatus.PartiallySuccessful && t.status !== TaskStatus.Successful
-                    ) && (
+                    {hasFailedTasks && (
                         <Menu.Item onClick={() => startReRun(ReRunOptions.ReRunFailed)}>
                             {TranslateText('Re-run failed and cancelled tasks in the mission')}
                         </Menu.Item>

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

@@ -52,7 +52,11 @@ export const OngoingMissionCard = ({ mission }: MissionProps): JSX.Element => {
                         {mission.name}
                     </Typography>
                 </StyledTitle>
-                <MissionControlButtons mission={mission} />
+                <MissionControlButtons
+                    missionName={mission.name}
+                    robotId={mission.robot.id}
+                    missionStatus={mission.status}
+                />
             </TopContent>
             <BottomContent>
                 <MissionStatusDisplayWithHeader status={mission.status} />