Improve blocked alert

equinor · Jan 10, 2024 · 50e380d · 50e380d
1 parent 50e1df0
commit 50e380d
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 22 deletions.
diff --git a/frontend/src/components/Alerts/BlockedRobotAlert.tsx b/frontend/src/components/Alerts/BlockedRobotAlert.tsx
@@ -3,7 +3,6 @@ import styled from 'styled-components'
 import { useLanguageContext } from 'components/Contexts/LanguageContext'
 import { Icons } from 'utils/icons'
 import { tokens } from '@equinor/eds-tokens'
-import { Robot } from 'models/Robot'
 
 const StyledDiv = styled.div`
     align-items: center;
@@ -20,10 +19,10 @@ const Indent = styled.div`
 `
 
 interface AlertProps {
-    robot: Robot
+    robotNames: string[]
 }
 
-export const BlockedRobotAlertContent = ({ robot }: AlertProps) => {
+export const BlockedRobotAlertContent = ({ robotNames }: AlertProps) => {
     const { TranslateText } = useLanguageContext()
     return (
         <StyledDiv>
@@ -33,9 +32,11 @@ export const BlockedRobotAlertContent = ({ robot }: AlertProps) => {
             </StyledAlertTitle>
             <Indent>
                 <Button as={Typography} variant="ghost" color="secondary">
-                    {`${TranslateText('The robot')} ${robot.name} ${TranslateText(
-                        'is blocked and cannot perform tasks'
-                    )}.`}
+                    {robotNames.length === 1 &&
+                        `${TranslateText('The robot')} ${robotNames[0]} ${TranslateText(
+                            'is blocked and cannot perform tasks'
+                        )}.`}
+                    {robotNames.length > 1 && TranslateText('Several robots are blocked and cannot perform tasks.')}
                 </Button>
             </Indent>
         </StyledDiv>

diff --git a/frontend/src/components/Contexts/AlertContext.tsx b/frontend/src/components/Contexts/AlertContext.tsx
@@ -8,6 +8,8 @@ import { useInstallationContext } from './InstallationContext'
 import { Alert } from 'models/Alert'
 import { FailedSafeZoneAlertContent } from 'components/Alerts/FailedSafeZoneAlertContent'
 import { useRobotContext } from './RobotContext'
+import { BlockedRobotAlertContent } from 'components/Alerts/BlockedRobotAlert'
+import { RobotStatus } from 'models/Robot'
 
 type AlertDictionaryType = { [key in AlertType]?: { content: ReactNode | undefined; dismissFunction: () => void } }
 
@@ -45,6 +47,7 @@ export const AlertContext = createContext<IAlertContext>(defaultAlertInterface)
 export const AlertProvider: FC<Props> = ({ children }) => {
     const [alerts, setAlerts] = useState<AlertDictionaryType>(defaultAlertInterface.alerts)
     const [recentFailedMissions, setRecentFailedMissions] = useState<Mission[]>([])
+    const [blockedRobotNames, setBlockedRobotNames] = useState<string[]>([])
     const { registerEvent, connectionReady } = useSignalRContext()
     const { installationCode } = useInstallationContext()
     const { enabledRobots } = useRobotContext()
@@ -158,6 +161,30 @@ export const AlertProvider: FC<Props> = ({ children }) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [newFailedMissions])
 
+    useEffect(() => {
+        const newBlockedRobotNames = enabledRobots
+            .filter(
+                (robot) =>
+                    robot.currentInstallation.installationCode.toLocaleLowerCase() ===
+                        installationCode.toLocaleLowerCase() && robot.status === RobotStatus.Blocked
+            )
+            .map((robot) => robot.name!)
+
+        const isBlockedRobotNamesModifyed =
+            newBlockedRobotNames.some((name) => !blockedRobotNames.includes(name)) ||
+            newBlockedRobotNames.length !== blockedRobotNames.length
+
+        if (isBlockedRobotNamesModifyed) {
+            if (newBlockedRobotNames.length > 0) {
+                setAlert(AlertType.BlockedRobot, <BlockedRobotAlertContent robotNames={newBlockedRobotNames} />)
+            } else {
+                clearAlert(AlertType.BlockedRobot)
+            }
+        }
+        setBlockedRobotNames(newBlockedRobotNames)
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [enabledRobots, installationCode])
+
     return (
         <AlertContext.Provider
             value={{

diff --git a/frontend/src/components/Pages/FrontPage/RobotCards/RobotStatusSection.tsx b/frontend/src/components/Pages/FrontPage/RobotCards/RobotStatusSection.tsx
@@ -2,9 +2,7 @@ import { Typography } from '@equinor/eds-core-react'
 import { Robot } from 'models/Robot'
 import { useEffect } from 'react'
 import styled from 'styled-components'
-import { BlockedRobotAlertContent } from 'components/Alerts/BlockedRobotAlert'
 import { RobotStatusCard, RobotStatusCardPlaceholder } from './RobotStatusCard'
-import { AlertType, useAlertContext } from 'components/Contexts/AlertContext'
 import { useInstallationContext } from 'components/Contexts/InstallationContext'
 import { useLanguageContext } from 'components/Contexts/LanguageContext'
 import { useSafeZoneContext } from 'components/Contexts/SafeZoneContext'
@@ -21,16 +19,12 @@ const RobotView = styled.div`
     gap: 1rem;
 `
 
-const isRobotBlocked = (robot: Robot): boolean => {
-    return robot.status === 'Blocked'
-}
-
 export const RobotStatusSection = () => {
     const { TranslateText } = useLanguageContext()
     const { installationCode } = useInstallationContext()
     const { enabledRobots } = useRobotContext()
     const { switchSafeZoneStatus } = useSafeZoneContext()
-    const { setAlert } = useAlertContext()
+
     const relevantRobots = enabledRobots
         .filter(
             (robot) =>
@@ -47,13 +41,9 @@ export const RobotStatusSection = () => {
         )
 
     useEffect(() => {
-        const missionQueueFozenStatus = relevantRobots.some((robot: Robot) => robot.missionQueueFrozen)
-        switchSafeZoneStatus(missionQueueFozenStatus)
-        const blockedRobots = relevantRobots.filter(isRobotBlocked)
-        if (blockedRobots.length > 0) {
-            setAlert(AlertType.BlockedRobot, <BlockedRobotAlertContent robot={blockedRobots[0]} />)
-        }
-    }, [enabledRobots, installationCode, switchSafeZoneStatus, relevantRobots, setAlert])
+        const missionQueueFrozenStatus = relevantRobots.some((robot: Robot) => robot.missionQueueFrozen)
+        switchSafeZoneStatus(missionQueueFrozenStatus)
+    }, [relevantRobots, switchSafeZoneStatus])
 
     const robotDisplay = relevantRobots.map((robot) => <RobotStatusCard key={robot.id} robot={robot} />)
 

diff --git a/frontend/src/language/en.json b/frontend/src/language/en.json
@@ -201,5 +201,6 @@
     "Robot is blocked": "Robot is blocked",
     "The robot": "The robot",
     "is blocked and cannot perform tasks": "is blocked and cannot perform tasks",
-    "Blocked": "Blocked"
+    "Blocked": "Blocked",
+    "Several robots are blocked and cannot perform tasks.": "Several robots are blocked and cannot perform tasks."
 }
diff --git a/frontend/src/language/no.json b/frontend/src/language/no.json
@@ -201,5 +201,6 @@
     "Robot is blocked": "Roboten er blokkert",
     "The robot": "Roboten",
     "is blocked and cannot perform tasks": "er blokkert og kan ikke utføre oppgaver",
-    "Blocked": "Blokkert"
+    "Blocked": "Blokkert",
+    "Several robots are blocked and cannot perform tasks.": "Flere roboter er blokkerte og kan ikke utføre oppgaver."
 }