diff --git a/apps/console/src/pages/organizations/risks/ListRiskView.tsx b/apps/console/src/pages/organizations/risks/ListRiskView.tsx
index 56d44bdd4..445234431 100644
--- a/apps/console/src/pages/organizations/risks/ListRiskView.tsx
+++ b/apps/console/src/pages/organizations/risks/ListRiskView.tsx
@@ -16,7 +16,6 @@ import {
useTransition,
} from "react";
import type { ListRiskViewQuery } from "./__generated__/ListRiskViewQuery.graphql";
-import type { RiskTreatment } from "./__generated__/ListRiskView_risks.graphql";
import { useParams, useSearchParams } from "react-router";
import { PageTemplate } from "@/components/PageTemplate";
import { RiskViewSkeleton } from "./ListRiskPage";
@@ -136,12 +135,23 @@ const deleteRiskMutation = graphql`
}
`;
-// Helper function to convert risk score to severity label
-const riskScoreToSeverity = (score: number): string => {
- if (score >= 20) return "Catastrophic";
- if (score >= 12) return "Critical";
- if (score >= 5) return "Marginal";
- return "Negligible";
+// Helper function to convert risk score to risk level
+const calculateRiskLevel = (score: number): string => {
+ if (score >= 15) return "High";
+ if (score >= 8) return "Medium";
+ return "Low";
+};
+
+// Helper function to get color for risk level that matches the matrix colors
+const getRiskLevelColor = (level: string): {backgroundColor: string, color: string} => {
+ switch(level) {
+ case "High":
+ return {backgroundColor: "#ef4444", color: "#ffffff"}; // red-500
+ case "Medium":
+ return {backgroundColor: "#fcd34d", color: "#000000"}; // yellow-300
+ default:
+ return {backgroundColor: "#22c55e", color: "#ffffff"}; // green-500
+ }
};
// Helper function to format treatment value
@@ -224,30 +234,6 @@ const emptyRiskMatrixColors = {
high: "bg-red-50 text-black",
};
-type RiskNode = {
- readonly id: string;
- readonly name: string;
- readonly inherentLikelihood: number;
- readonly inherentImpact: number;
- readonly residualLikelihood: number;
- readonly residualImpact: number;
- readonly treatment: RiskTreatment;
- readonly description: string;
- readonly category: string;
- readonly createdAt: string;
- readonly updatedAt: string;
- readonly owner: {
- readonly id: string;
- readonly fullName: string;
- } | null;
- readonly measures: {
- readonly edges: ReadonlyArray<{
- readonly node: {
- readonly category: string;
- };
- }>;
- };
-};
// Risk Matrix Component
function RiskMatrix({
@@ -312,39 +298,15 @@ function RiskMatrix({
// This follows the 5x5 grid with rows representing impact (5 to 1) and columns representing likelihood (1 to 5)
const colorMatrix = [
// Impact 5 (Catastrophic) - first row
- [
- colorSet.medium,
- colorSet.medium,
- colorSet.high,
- colorSet.high,
- colorSet.high,
- ],
+ [colorSet.low, colorSet.medium, colorSet.high, colorSet.high, colorSet.high],
// Impact 4 (Significant) - second row
- [
- colorSet.low,
- colorSet.medium,
- colorSet.medium,
- colorSet.high,
- colorSet.high,
- ],
+ [colorSet.low, colorSet.medium, colorSet.medium, colorSet.high, colorSet.high],
// Impact 3 (Moderate) - third row
- [
- colorSet.low,
- colorSet.low,
- colorSet.medium,
- colorSet.medium,
- colorSet.high,
- ],
+ [colorSet.low, colorSet.low, colorSet.medium, colorSet.medium, colorSet.high],
// Impact 2 (Low) - fourth row
- [
- colorSet.low,
- colorSet.low,
- colorSet.low,
- colorSet.medium,
- colorSet.medium,
- ],
+ [colorSet.low, colorSet.low, colorSet.low, colorSet.medium, colorSet.medium],
// Impact 1 (Negligible) - fifth row
- [colorSet.low, colorSet.low, colorSet.low, colorSet.low, colorSet.medium],
+ [colorSet.low, colorSet.low, colorSet.low, colorSet.low, colorSet.low],
];
return colorMatrix[row][col];
@@ -409,32 +371,15 @@ function RiskMatrix({
- Risk Score:
+ Risk Level:
- {impactValue * likelihoodValue}
+ {calculateRiskLevel(impactValue * likelihoodValue)} ({impactValue * likelihoodValue})
= 20
- ? "#ef4444"
- : impactValue * likelihoodValue >= 12
- ? "#f59e0b"
- : impactValue * likelihoodValue >= 5
- ? "#10b981"
- : "#94a3b8",
- color:
- impactValue * likelihoodValue >= 12 ? "white" : "inherit",
- }}
+ style={getRiskLevelColor(calculateRiskLevel(impactValue * likelihoodValue))}
>
- {impactValue * likelihoodValue >= 20
- ? "Catastrophic"
- : impactValue * likelihoodValue >= 12
- ? "Critical"
- : impactValue * likelihoodValue >= 5
- ? "Marginal"
- : "Negligible"}
+ {calculateRiskLevel(impactValue * likelihoodValue)}
@@ -449,26 +394,14 @@ function RiskMatrix({
className="text-sm border-l-2 pl-2"
style={{
borderColor:
- (isResidual
- ? (risk.residualImpact || risk.inherentImpact) *
- (risk.residualLikelihood || risk.inherentLikelihood)
- : risk.inherentImpact * risk.inherentLikelihood) >= 20
- ? "#ef4444"
- : (isResidual
+ getRiskLevelColor(
+ calculateRiskLevel(
+ isResidual
? (risk.residualImpact || risk.inherentImpact) *
- (risk.residualLikelihood ||
- risk.inherentLikelihood)
- : risk.inherentImpact *
- risk.inherentLikelihood) >= 12
- ? "#f59e0b"
- : (isResidual
- ? (risk.residualImpact || risk.inherentImpact) *
- (risk.residualLikelihood ||
- risk.inherentLikelihood)
- : risk.inherentImpact *
- risk.inherentLikelihood) >= 5
- ? "#10b981"
- : "#94a3b8",
+ (risk.residualLikelihood || risk.inherentLikelihood)
+ : risk.inherentImpact * risk.inherentLikelihood
+ )
+ ).backgroundColor
}}
>
- Inherent
+ Inherent Risk Score
|
Treatment
|
- Residual
+ Residual Risk Score
|
Owner
@@ -828,25 +761,9 @@ function ListRiskViewContent({
>
= 20
- ? "#ef4444"
- : risk.inherentLikelihood * risk.inherentImpact >= 12
- ? "#f59e0b"
- : risk.inherentLikelihood * risk.inherentImpact >= 5
- ? "#10b981"
- : "#94a3b8",
- color:
- risk.inherentLikelihood * risk.inherentImpact >= 12
- ? "white"
- : "inherit",
- }}
+ style={getRiskLevelColor(calculateRiskLevel(risk.inherentLikelihood * risk.inherentImpact))}
>
- {riskScoreToSeverity(
- risk.inherentLikelihood * risk.inherentImpact
- )}{" "}
- ({risk.inherentLikelihood * risk.inherentImpact})
+ {calculateRiskLevel(risk.inherentLikelihood * risk.inherentImpact)} ({risk.inherentLikelihood * risk.inherentImpact})
@@ -866,25 +783,9 @@ function ListRiskViewContent({
{risk.residualLikelihood && risk.residualImpact ? (
= 20
- ? "#ef4444"
- : risk.residualLikelihood * risk.residualImpact >= 12
- ? "#f59e0b"
- : risk.residualLikelihood * risk.residualImpact >= 5
- ? "#10b981"
- : "#94a3b8",
- color:
- risk.residualLikelihood * risk.residualImpact >= 12
- ? "white"
- : "inherit",
- }}
+ style={getRiskLevelColor(calculateRiskLevel(risk.residualLikelihood * risk.residualImpact))}
>
- {riskScoreToSeverity(
- risk.residualLikelihood * risk.residualImpact
- )}{" "}
- ({risk.residualLikelihood * risk.residualImpact})
+ {calculateRiskLevel(risk.residualLikelihood * risk.residualImpact)} ({risk.residualLikelihood * risk.residualImpact})
) : (
"Not set"
diff --git a/apps/console/src/pages/organizations/risks/ShowRiskView.tsx b/apps/console/src/pages/organizations/risks/ShowRiskView.tsx
index c4cf5b71a..9a538a41a 100644
--- a/apps/console/src/pages/organizations/risks/ShowRiskView.tsx
+++ b/apps/console/src/pages/organizations/risks/ShowRiskView.tsx
@@ -207,46 +207,37 @@ const deleteRiskPolicyMappingMutation = graphql`
}
`;
+// Replace the current getRiskSeverity function with the functions from ListRiskView.tsx
+// Helper function to convert risk score to risk level
+const calculateRiskLevel = (score: number): string => {
+ if (score >= 15) return "High";
+ if (score >= 8) return "Medium";
+ return "Low";
+};
+
+// Helper function to get color for risk level that matches the matrix colors
+const getRiskLevelColor = (level: string): {backgroundColor: string, color: string} => {
+ switch(level) {
+ case "High":
+ return {backgroundColor: "#ef4444", color: "#ffffff"}; // red-500
+ case "Medium":
+ return {backgroundColor: "#fcd34d", color: "#000000"}; // yellow-300
+ default:
+ return {backgroundColor: "#22c55e", color: "#ffffff"}; // green-500
+ }
+};
+
function getRiskSeverity(likelihood: number, impact: number) {
const score = likelihood * impact;
- if (score >= 20)
- return {
- level: "Catastrophic",
- score: score,
- style: {
- backgroundColor: "#ef4444",
- color: "white",
- },
- };
- if (score >= 12)
- return {
- level: "Critical",
- score: score,
- style: {
- backgroundColor: "#f59e0b",
- color: "white",
- },
- };
- if (score >= 5)
- return {
- level: "Marginal",
- score: score,
- style: {
- backgroundColor: "#10b981",
- color: "inherit",
- },
- };
+ const level = calculateRiskLevel(score);
return {
- level: "Negligible",
+ level: level,
score: score,
- style: {
- backgroundColor: "#94a3b8",
- color: "inherit",
- },
+ style: getRiskLevelColor(level),
};
}
-// Add helper functions to convert numerical values to labels
+// Keep the getLikelihoodLabel and getImpactLabel functions as they are
function getLikelihoodLabel(likelihood: number): {
label: string;
style: React.CSSProperties;
@@ -254,26 +245,26 @@ function getLikelihoodLabel(likelihood: number): {
if (likelihood === 5)
return {
label: "Frequent (5)",
- style: { backgroundColor: "#ef4444", color: "white" },
+ style: { backgroundColor: "#fff", color: "black", border: "1px solid #e2e8f0" },
};
if (likelihood === 4)
return {
label: "Probable (4)",
- style: { backgroundColor: "#f59e0b", color: "white" },
+ style: { backgroundColor: "#fff", color: "black", border: "1px solid #e2e8f0" },
};
if (likelihood === 3)
return {
label: "Occasional (3)",
- style: { backgroundColor: "#eab308", color: "black" },
+ style: { backgroundColor: "#fff", color: "black", border: "1px solid #e2e8f0" },
};
if (likelihood === 2)
return {
label: "Remote (2)",
- style: { backgroundColor: "#10b981", color: "black" },
+ style: { backgroundColor: "#fff", color: "black", border: "1px solid #e2e8f0" },
};
return {
label: "Improbable (1)",
- style: { backgroundColor: "#94a3b8", color: "black" },
+ style: { backgroundColor: "#fff", color: "black", border: "1px solid #e2e8f0" },
};
}
@@ -284,26 +275,26 @@ function getImpactLabel(impact: number): {
if (impact === 5)
return {
label: "Catastrophic (5)",
- style: { backgroundColor: "#ef4444", color: "white" },
+ style: { backgroundColor: "#fff", color: "black", border: "1px solid #e2e8f0" },
};
if (impact === 4)
return {
label: "Significant (4)",
- style: { backgroundColor: "#f59e0b", color: "white" },
+ style: { backgroundColor: "#fff", color: "black", border: "1px solid #e2e8f0" },
};
if (impact === 3)
return {
label: "Moderate (3)",
- style: { backgroundColor: "#eab308", color: "black" },
+ style: { backgroundColor: "#fff", color: "black", border: "1px solid #e2e8f0" },
};
if (impact === 2)
return {
label: "Low (2)",
- style: { backgroundColor: "#10b981", color: "black" },
+ style: { backgroundColor: "#fff", color: "black", border: "1px solid #e2e8f0" },
};
return {
label: "Negligible (1)",
- style: { backgroundColor: "#94a3b8", color: "black" },
+ style: { backgroundColor: "#fff", color: "black", border: "1px solid #e2e8f0" },
};
}
|