fix(alerts): alert header breaking with unknown severity

frontend/src/pages/AlertDetails/AlertHeader/AlertSeverity/AlertSeverity.tsx

@@ -5,34 +5,39 @@ import SeverityWarningIcon from 'assets/AlertHistory/SeverityWarningIcon';
 
 import './AlertSeverity.styles.scss';
 
+const severityConfig: Record<string, Record<string, string | JSX.Element>> = {
+	critical: {
+		text: 'Critical',
+		className: 'alert-severity--critical',
+		icon: <SeverityCriticalIcon />,
+	},
+	error: {
+		text: 'Error',
+		className: 'alert-severity--error',
+		icon: <SeverityErrorIcon />,
+	},
+	warning: {
+		text: 'Warning',
+		className: 'alert-severity--warning',
+		icon: <SeverityWarningIcon />,
+	},
+	info: {
+		text: 'Info',
+		className: 'alert-severity--info',
+		icon: <SeverityInfoIcon />,
+	},
+};
+
 export default function AlertSeverity({
 	severity,
 }: {
 	severity: string;
 }): JSX.Element {
-	const severityConfig: Record<string, Record<string, string | JSX.Element>> = {
-		critical: {
-			text: 'Critical',
-			className: 'alert-severity--critical',
-			icon: <SeverityCriticalIcon />,
-		},
-		error: {
-			text: 'Error',
-			className: 'alert-severity--error',
-			icon: <SeverityErrorIcon />,
-		},
-		warning: {
-			text: 'Warning',
-			className: 'alert-severity--warning',
-			icon: <SeverityWarningIcon />,
-		},
-		info: {
-			text: 'Info',
-			className: 'alert-severity--info',
-			icon: <SeverityInfoIcon />,
-		},
+	const severityDetails = severityConfig[severity] || {
+		text: severity,
+		className: 'alert-severity--info',
+		icon: <SeverityInfoIcon />,
 	};
-	const severityDetails = severityConfig[severity];
 	return (
 		<div className={`alert-severity ${severityDetails.className}`}>
 			<div className="alert-severity__icon">{severityDetails.icon}</div>