Distinguish calculated failure rate

public/locales/cs/translation.json

@@ -74,6 +74,10 @@
       "description": "Intenzita poruch nastavená manuálně týmem AVA na základě zkušeného inženýrského úsudku."
     }
   },
+  "faultEventMessage": {
+    "outOfSyncValue": "Hodnota je zastaralá!",
+    "requirementViolated": "Vypočtená intenzita poruch je větší, než je požadováno!"
+  },
   "faultTreeOverviewTable": {
     "name": "Jméno",
     "aircraftType": "Typ systému",

public/locales/en/translation.json

@@ -74,6 +74,10 @@
       "description": "Failure rate manually set by AVA team based on experienced engineering judgment."
     }
   },
+  "faultEventMessage": {
+    "outOfSyncValue": "The value is outdated!",
+    "requirementViolated": "Calculated failure rate is bigger than required!"
+  },
   "faultTreeOverviewTable": {
     "name": "Name",
     "aircraftType": "System type",

src/components/Icons.tsx

@@ -0,0 +1,15 @@
+import { SyncProblem, Warning } from "@mui/icons-material";
+import { Tooltip } from "@mui/material";
+import React from "react";
+
+export const warnIcon = (message: string) => {
+  return iconWithMessage(<Warning transform={"scale(0.9)"} />, message);
+};
+
+export const syncProblemIcon = (message: string) => {
+  return iconWithMessage(<SyncProblem transform={"scale(0.9)"} />, message);
+};
+
+export const iconWithMessage = (icon, message: string) => {
+  return <Tooltip title={message}>{icon}</Tooltip>;
+};

src/components/editor/faultTree/menu/faultEvent/FaultEventMenu.styles.tsx

@@ -33,9 +33,9 @@ const useStyles = makeStyles()((theme: Theme) => ({
     color: theme.main.grey,
   },
   outdated: {
-    color: "red",
+    color: theme.main.orange,
     "&.Mui-checked": {
-      color: theme.main.red,
+      color: theme.main.orange,
     },
   },
   divider: {

src/components/editor/faultTree/menu/faultEvent/FaultEventMenu.tsx

@@ -28,6 +28,7 @@ import { useSelectedSystemSummaries } from "@hooks/useSelectedSystemSummaries";
 import { useForm } from "react-hook-form";
 import UnsavedChangesDialog from "./UnsavedChangesDialog";
 import { useAppBar } from "@contexts/AppBarContext";
+import { warnIcon } from "@components/Icons";
 
 interface Props {
   selectedShapeToolData?: FaultEvent;
@@ -315,6 +316,11 @@ const FaultEventMenu = ({ selectedShapeToolData, onEventUpdated, refreshTree, ro
     return <FailureRateBox value={rateType} label={t(labelKey)} rate={rate} selected={selected} outdated={outdated} />;
   };
 
+  const violatesRequirement =
+    shapeToolData?.probability && getRequiredFailureRate() && shapeToolData.probability > getRequiredFailureRate();
+
+  const requiredFailureRateStatusColor = violatesRequirement ? theme.main.red : theme.main.black;
+
   return (
     <Box paddingLeft={2} marginRight={2}>
       {shapeToolData && (
@@ -340,11 +346,12 @@ const FaultEventMenu = ({ selectedShapeToolData, onEventUpdated, refreshTree, ro
             </Box>
           )}
           {getRequiredFailureRate() && (
-            <Box className={classes.eventPropertyRow}>
+            <Box className={classes.eventPropertyRow} style={{ color: requiredFailureRateStatusColor }}>
               <Typography>
                 <span className={classes.label}>{t("faultEventMenu.requiredFailureRate")}:</span>
                 {getRequiredFailureRate().toExponential(2)}
               </Typography>
+              {violatesRequirement && warnIcon(t("faultEventMessage.requirementViolated"))}
             </Box>
           )}
           <Divider className={classes.divider} />
@@ -372,11 +379,12 @@ const FaultEventMenu = ({ selectedShapeToolData, onEventUpdated, refreshTree, ro
             </Box>
           )}
           {getRequiredFailureRate() && (
-            <Box className={classes.eventPropertyRow}>
+            <Box className={classes.eventPropertyRow} style={{ color: requiredFailureRateStatusColor }}>
               <Typography>
                 <span className={classes.label}>{t("faultEventMenu.requiredFailureRate")}:</span>
                 {getRequiredFailureRate().toExponential(2)}
               </Typography>
+              {violatesRequirement && warnIcon(t("faultEventMessage.requirementViolated"))}
             </Box>
           )}
           <Divider className={classes.divider} />

src/components/table/FaultTreeTableBody.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from "react";
-import { TableRow, TableCell, Button, Box, Tooltip, Typography } from "@mui/material";
+import { TableRow, TableCell, Button, Box, Tooltip, Typography, useTheme, Stack } from "@mui/material";
 import MoreVertIcon from "@mui/icons-material/MoreVert";
 import { useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
@@ -10,6 +10,7 @@ import { findByIri, formatDate } from "@utils/utils";
 import { ROUTES, Status } from "@utils/constants";
 import { useSelectedSystemSummaries } from "@hooks/useSelectedSystemSummaries";
 import { useSystems } from "@hooks/useSystems";
+import { syncProblemIcon, warnIcon } from "@components/Icons";
 
 interface FaultTreeTableBodyProps {
   faultTrees: FaultTree[];
@@ -18,6 +19,7 @@ interface FaultTreeTableBodyProps {
 
 const FaultTreeTableBody: FC<FaultTreeTableBodyProps> = ({ faultTrees, handleFaultTreeContextMenu }) => {
   const navigate = useNavigate();
+  const theme = useTheme();
   const { t } = useTranslation();
   const { classes } = useStyles();
 
@@ -29,28 +31,46 @@ const FaultTreeTableBody: FC<FaultTreeTableBodyProps> = ({ faultTrees, handleFau
     navigate(routePath);
   };
 
-  const failureRate = (fr: number) => (
-    <Tooltip title={fr}>
-      <Typography>{fr?.toExponential(2)}</Typography>
-    </Tooltip>
+  const failureRate = (fr: number, icon = null) => (
+    <Stack alignItems="center" direction="row" gap={0}>
+      <Tooltip title={fr}>
+        <Typography>{fr?.toExponential(2)}</Typography>
+      </Tooltip>
+      {!!icon && icon}
+    </Stack>
   );
 
   return (
     <>
       {faultTrees.map((faultTree, rowIndex) => {
         const routePath = ROUTES.FTA + `/${extractFragment(faultTree.iri)}`;
-        const statusColor = faultTree?.status !== Status.OK ? "red" : "black";
+        const isSynced = faultTree?.status === Status.OK;
+        const syncStatusColor = isSynced ? theme.synchronized.color : theme.notSynchronized.color;
+        const violatedRequirement =
+          faultTree?.requiredFailureRate &&
+          faultTree?.calculatedFailureRate &&
+          faultTree?.calculatedFailureRate > faultTree?.requiredFailureRate;
+        const violatedRequirementStatusColor = violatedRequirement ? theme.main.red : theme.main.black;
+
         const editor = faultTree?.editor || faultTree?.creator;
         return (
           <TableRow key={rowIndex} className={classes.noBorder}>
             <TableCell className={classes.firstColumn}>{faultTree.name}</TableCell>
             <TableCell className={classes.tableCell}>{faultTree?.system?.name}</TableCell>
             <TableCell className={classes.tableCell}>{faultTree?.subSystem?.name}</TableCell>
-            <TableCell style={{ color: statusColor }} className={classes.tableCell}>
-              {failureRate(faultTree?.calculatedFailureRate)}
+            <TableCell style={{ color: syncStatusColor }} className={classes.tableCell}>
+              {failureRate(
+                faultTree?.calculatedFailureRate,
+                !isSynced && faultTree?.calculatedFailureRate && syncProblemIcon(t("faultEventMessage.outOfSyncValue")),
+              )}
             </TableCell>
             <TableCell className={classes.tableCell}>{failureRate(faultTree?.fhaBasedFailureRate)}</TableCell>
-            <TableCell className={classes.tableCell}>{failureRate(faultTree?.requiredFailureRate)}</TableCell>
+            <TableCell className={classes.tableCell} style={{ color: violatedRequirementStatusColor }}>
+              {failureRate(
+                faultTree?.requiredFailureRate,
+                violatedRequirement && warnIcon(t("faultEventMessage.requirementViolated")),
+              )}
+            </TableCell>
             <TableCell className={classes.tableCell}>{formatDate(faultTree?.modified)}</TableCell>
             <TableCell className={classes.tableCell}>{formatDate(faultTree?.created)}</TableCell>
             <TableCell className={classes.tableCell}>{editor?.username}</TableCell>

src/styles/App.styles.declarations.tsx

@@ -39,6 +39,7 @@ declare module "@mui/material/styles" {
       black: string;
       grey: string;
       red: string;
+      orange: string;
       notSynchronized?: {
         color: COLOR;
       };

src/styles/App.styles.tsx

@@ -38,11 +38,12 @@ export const appTheme = createCustomMuiTheme({
     black: "#000000",
     grey: "#808080",
     red: "#FF0000",
+    orange: "#FF9F00",
   },
   notSynchronized: {
-    color: "red",
+    color: "#FF9F00",
   },
   synchronized: {
-    color: "black",
+    color: "#000000",
   },
 });