Fix failure rate outdated fault event sidebar

public/locales/cs/translation.json

@@ -112,7 +112,8 @@
   },
   "faultEventMessage": {
     "outOfSyncValue": "Hodnota je zastaralá, intenzita poruch u některých listových uzlů byla aktualizována!",
-    "referencedValueOutdated": "Referenční hodnota byla změněna. Hodnota bude aktualizována při vyhodnocení stromu",
+    "referencedValueOutdated": "Referencovaná hodnota byla změněna na {{newValue}}. Tuto hodnotu lze aktualizovat pomocí akce přepočítaní intenzity poruch.",
+    "predictedFailureRateOutdated": "Referencovaná hodnota byla změněna na {{newValue}}. Tuto hodnotu lze aktualizovat pomocí akce přepočítaní intenzity poruch.",
     "experimental": "Min. provozní hodiny (MOH) poruchoveho stromu se liší od MOH jeho systému",
     "requirementViolated": "Vypočtená intenzita poruch je větší, než je požadováno!"
   },

public/locales/en/translation.json

@@ -112,7 +112,8 @@
   },
   "faultEventMessage": {
     "outOfSyncValue": "The value is outdated, some of the leaf node failure rates were updated!",
-    "referencedValueOutdated": "The referenced value has changed. The value will be updated on tree evaluation.",
+    "referencedValueOutdated": "The referenced value has changed to {{newValue}}. The value can be updated with action to recalculate failure rate.",
+    "predictedFailureRateOutdated": "The referenced value has changed to {{newValue}}. The value can be updated with action to recalculate failure rate.",
     "experimental": "Fault tree's min. operational hours (MOH) is different from its system's MOH",
     "requirementViolated": "Calculated failure rate is bigger than required!"
   },

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

@@ -30,7 +30,7 @@ import UnsavedChangesDialog from "./UnsavedChangesDialog";
 import { useAppBar } from "@contexts/AppBarContext";
 import { syncProblemIcon, warnIcon } from "@components/Icons";
 import HintText from "@components/hintText/HintText";
-import { calculationStatusMessages } from "@components/fta/FTAStatus";
+import { statusMessages } from "@components/fta/FTAStatus";
 import { FaultTreeStatus } from "@models/faultTreeModel";
 
 interface Props {
@@ -305,74 +305,69 @@ const FaultEventMenu = ({
     );
   };
 
-  const numberValue = (value, cls = classes.notEditableValue) => {
+  const numberValue = (value) => {
     return <Tooltip title={<span className={classes.hint}>{value}</span>}>{value.toExponential(2)}</Tooltip>;
   };
 
-  const requiredFailureRateComponent = (failureRate, requirementStatusColor, violates) => {
+  const requiredFailureRateComponent = (failureRate, violates) => {
     const cls = violates ? classes.violated : classes.notEditableValue;
     return (
       <Typography className={classes.eventPropertyRow}>
         {propertyLabelWithHint("eventDescription.requiredFailureRate")}
         <Box className={[classes.eventPropertyRow, cls]}>
           {numberValue(failureRate)}
-          {violates &&
-            warnIcon(calculationStatusMessages("faultEventMessage.requirementViolated", t), requirementStatusColor)}
+          {violates && warnIcon(statusMessages(t("faultEventMessage.requirementViolated")))}
         </Box>
       </Typography>
     );
   };
 
-  const failureRateComponent = (failureRate, failureRateCode, statusCodes: string[] = []) => {
-    const isOutOfSync = statusCodes && statusCodes.length > 0;
+  const failureRateComponent = (failureRate, failureRateCode, statusMessages: string[] = []) => {
+    const _statusMessages = asArray(statusMessages);
+    const isOutOfSync = _statusMessages && _statusMessages.length > 0;
     const cls = isOutOfSync ? classes.outdated : classes.notEditableValue;
     return (
       <Typography className={classes.eventPropertyRow}>
         {propertyLabelWithHint(failureRateCode)}
         <Box className={[classes.eventPropertyRow, cls]}>
           {numberValue(failureRate)}
-          {isOutOfSync && syncProblemIcon(calculationStatusMessages(statusCodes, t), statusCodes.length)}
+          {isOutOfSync && syncProblemIcon(statusMessages(_statusMessages), _statusMessages.length)}
         </Box>
       </Typography>
     );
   };
 
-  const fhaFailureRateComponent = (failureRate, failureRateStatusColor, faultTreeStatus: FaultTreeStatus) => {
-    return failureRateComponent(
-      failureRate,
-      "eventDescription.fhaBasedFailureRate",
-      failureRateStatusColor,
-      faultTreeStatus,
-    );
+  const fhaFailureRateComponent = (failureRate) => {
+    return failureRateComponent(failureRate, "eventDescription.fhaBasedFailureRate", null);
   };
 
-  const calculatedFailureRateComponent = (failureRate, failureRateStatusColor, statusCodes: string[]) => {
-    return failureRateComponent(failureRate, "eventDescription.calculatedFailureRate", statusCodes);
+  const calculatedFailureRateComponent = (failureRate, failureRateStatusColor, statusMessages: string[]) => {
+    return failureRateComponent(failureRate, "eventDescription.calculatedFailureRate", statusMessages);
   };
 
-  const FailureRateBox = ({ value, failureRateKey, rate, selected, outdated }) => (
-    <Box display="flex" flexDirection="row" alignItems="center">
-      <FormControlLabel
-        value={value}
-        control={<Radio style={{ color: theme.main.black }} />}
-        label={propertyLabelWithHint(failureRateKey)}
-        className={selected ? classes.selected : classes.notSelected}
-      />
-      <Tooltip title={<span className={classes.hint}>{rate}</span>}>
-        <Typography className={outdated ? classes.outdated : classes.notEditableValue}>
-          {rate.toExponential(2)}
-        </Typography>
-      </Tooltip>
-    </Box>
-  );
+  const FailureRateBox = ({ value, failureRateKey, rate, selected, outdated, messageCode, newValue }) => {
+    const cls = outdated ? classes.outdated : classes.notEditableValue;
+
+    return (
+      <Box display="flex" flexDirection="row" alignItems="center">
+        <FormControlLabel
+          value={value}
+          control={<Radio style={{ color: theme.main.black }} />}
+          label={propertyLabelWithHint(failureRateKey)}
+          className={selected ? classes.selected : classes.notSelected}
+        />
+        <Box className={[classes.eventPropertyRow, cls]}>
+          {numberValue(rate)}
+          {outdated && syncProblemIcon(statusMessages(t(messageCode, { newValue: newValue })), 1)}
+        </Box>
+      </Box>
+    );
+  };
 
-  const renderFailureRateBox = (rateType, rateValue, iri, selectedRadioButton, failureRateKey) => {
-    const rate =
-      shapeToolData.probability !== rateValue && shapeToolData?.selectedEstimate?.iri === iri
-        ? shapeToolData.probability
-        : rateValue;
+  const renderFailureRateBox = (rateType, rateValue, iri, selectedRadioButton, failureRateKey, messageCode) => {
     const selected = selectedRadioButton === rateType;
-    const outdated = selected && shapeToolData.probability !== rateValue;
+    const outdated = shapeToolData.probability !== rateValue && shapeToolData?.selectedEstimate?.iri === iri;
+    const rate = outdated ? shapeToolData.probability : rateValue;
 
     return (
       <FailureRateBox
@@ -381,15 +376,15 @@ const FaultEventMenu = ({
         rate={rate}
         selected={selected}
         outdated={outdated}
+        messageCode={messageCode}
+        newValue={outdated ? rateValue : undefined}
       />
     );
   };
 
   const violatesRequirement =
     shapeToolData?.probability && getRequiredFailureRate() && shapeToolData.probability > getRequiredFailureRate();
 
-  const requiredFailureRateStatusColor = violatesRequirement ? theme.requirementViolation.color : theme.main.black;
-
   const calculatedFailureRateStatusColor = faultTreeStatus.isOk ? theme.main.black : theme.notSynchronized.color;
 
   return (
@@ -408,14 +403,13 @@ const FaultEventMenu = ({
               {calculatedFailureRateComponent(
                 shapeToolData.probability,
                 calculatedFailureRateStatusColor,
-                faultTreeStatus.statusCodes,
+                asArray(faultTreeStatus.statusCodes).map((c) => t(c)),
               )}
             </Box>
           )}
-          {getRequiredFailureRate() &&
-            requiredFailureRateComponent(getRequiredFailureRate(), requiredFailureRateStatusColor, violatesRequirement)}
+          {getRequiredFailureRate() && requiredFailureRateComponent(getRequiredFailureRate(), violatesRequirement)}
           {(frEstimate?.value || frEstimate?.value === 0) && (
-            <Box className={classes.eventPropertyRow}>{fhaFailureRateComponent(frEstimate.value, null, null)}</Box>
+            <Box className={classes.eventPropertyRow}>{fhaFailureRateComponent(frEstimate.value)}</Box>
           )}
         </>
       )}
@@ -428,12 +422,17 @@ const FaultEventMenu = ({
               {calculatedFailureRateComponent(
                 shapeToolData.probability,
                 null,
-                isReferenceProbabilityOutdated(shapeToolData) ? ["faultEventMessage.referencedValueOutdated"] : [],
+                isReferenceProbabilityOutdated(shapeToolData)
+                  ? [
+                      t("faultEventMessage.referencedValueOutdated", {
+                        newValue: shapeToolData?.references?.probability,
+                      }),
+                    ]
+                  : [],
               )}
             </Box>
           )}
-          {getRequiredFailureRate() &&
-            requiredFailureRateComponent(getRequiredFailureRate(), requiredFailureRateStatusColor, violatesRequirement)}
+          {getRequiredFailureRate() && requiredFailureRateComponent(getRequiredFailureRate(), violatesRequirement)}
           {(frEstimate?.value || frEstimate?.value) && (
             <Box className={classes.eventPropertyRow}>{fhaFailureRateComponent(frEstimate.value, null, null)}</Box>
           )}
@@ -463,6 +462,7 @@ const FaultEventMenu = ({
                     frPrediction?.iri,
                     selectedRadioButton,
                     "eventDescription.predictedFailureRate",
+                    "faultEventMessage.referencedValueOutdated",
                   )}
                 {snsOperationalFailureRate &&
                   renderFailureRateBox(
@@ -471,6 +471,7 @@ const FaultEventMenu = ({
                     frEstimate?.iri,
                     selectedRadioButton,
                     "eventDescription.operationalFailureRate",
+                    "faultEventMessage.predictedFailureRateOutdated",
                   )}
                 <Box display={"flex"} flexDirection={"row"} alignItems="center">
                   <FormControlLabel
@@ -536,7 +537,7 @@ const FaultEventMenu = ({
                 <Tooltip
                   title={
                     <Typography>
-                      {ataNames.map((n) => {
+                      {ataNames?.map((n) => {
                         return <div>{n}</div>;
                       })}
                     </Typography>

src/components/fta/FTAStatus.tsx

@@ -2,17 +2,17 @@ import * as React from "react";
 import { asArray } from "@utils/utils";
 import { Typography } from "@mui/material";
 
-export const calculationStatusMessages = (statusCodes: string[], t: any) => {
-  const _statusCodes = asArray(statusCodes);
-  return _statusCodes.length > 1 ? (
+export const statusMessages = (statusMessages: string | string[]) => {
+  const _statusMessages = asArray(statusMessages);
+  return _statusMessages.length > 1 ? (
     <ul style={{ fontSize: 16, margin: "0px", paddingInlineStart: "25px", paddingInlineEnd: "0px" }}>
-      {_statusCodes.map((c) => (
-        <li key={c}>{t(c)}</li>
+      {_statusMessages.map((c) => (
+        <li key={c}>{c}</li>
       ))}
     </ul>
-  ) : _statusCodes.length == 1 ? (
+  ) : _statusMessages.length == 1 ? (
     <Typography style={{ margin: "0px", paddingInlineStart: "20px", paddingInlineEnd: "0px", textAlign: "start" }}>
-      {t(_statusCodes[0])}
+      {_statusMessages[0]}
     </Typography>
   ) : null;
 };

src/components/hintText/HintText.tsx

@@ -4,7 +4,6 @@ import useStyles from "./HintText.styles";
 import { HelpOutline } from "@mui/icons-material";
 
 interface HintTextProps {
-  text: string;
   hint: string;
 }
 

src/components/table/FaultTreeTableBody.tsx

@@ -7,11 +7,11 @@ import useStyles from "./FaultTreeOverviewTable.styles";
 import { FaultTree, getFaultTreeCalculationStatus } from "@models/faultTreeModel";
 import { extractFragment } from "@services/utils/uriIdentifierUtils";
 import { asArray, findByIri, formatDate } from "@utils/utils";
-import { ROUTES, Status } from "@utils/constants";
+import { ROUTES } from "@utils/constants";
 import { useSelectedSystemSummaries } from "@hooks/useSelectedSystemSummaries";
 import { useSystems } from "@hooks/useSystems";
 import { syncProblemIcon, warnIcon } from "@components/Icons";
-import { calculationStatusMessages } from "@components/fta/FTAStatus";
+import { statusMessages } from "@components/fta/FTAStatus";
 
 interface FaultTreeTableBodyProps {
   faultTrees: FaultTree[];
@@ -86,7 +86,7 @@ const FaultTreeTableBody: FC<FaultTreeTableBodyProps> = ({ faultTrees, handleFau
                 !calculationStatus.isOk &&
                   faultTree?.calculatedFailureRate &&
                   syncProblemIcon(
-                    calculationStatusMessages(calculationStatus.statusCodes, t),
+                    statusMessages(calculationStatus.statusCodes?.map((c) => t(c))),
                     calculationStatus.statusCodes?.length,
                   ),
               )}
@@ -95,8 +95,7 @@ const FaultTreeTableBody: FC<FaultTreeTableBodyProps> = ({ faultTrees, handleFau
             <TableCell className={classes.tableCell} style={{ color: violatedRequirementStatusColor }}>
               {failureRate(
                 faultTree?.requiredFailureRate,
-                violatedRequirement &&
-                  warnIcon(calculationStatusMessages(["faultEventMessage.requirementViolated"], t)),
+                violatedRequirement && warnIcon(statusMessages(t("faultEventMessage.requirementViolated"))),
               )}
             </TableCell>
             <TableCell className={classes.tableCell}>{formatDate(faultTree?.modified)}</TableCell>