31 lines
1.4 KiB
TypeScript
31 lines
1.4 KiB
TypeScript
import {Incident} from "../nws-api/types";
|
|
import ReactTooltip from "react-tooltip";
|
|
import React from "react";
|
|
|
|
export default function IncidentCard(props: {incident: Incident}) {
|
|
|
|
const severityText: string[] = [
|
|
"Low Severity means that this issue does not affect any services running on NWS.",
|
|
"Medium Severity means that this issue may cause some slowdowns or outages on some services.",
|
|
"High Severity means that this issue causes an outage on the entire NWS network or most of the services running on it."
|
|
];
|
|
let severityClass: string = props.incident.severity == 0 ? 'low' : (props.incident.severity == 1 ? 'med' : 'high');
|
|
let severityString: string = props.incident.severity == 0 ? 'Low' : (props.incident.severity == 1 ? 'Medium' : 'High');
|
|
|
|
return (
|
|
<div className={`row text-left nws-card`} style={{width: '75vw'}}>
|
|
<p className={"col-md-10 col-12 mb-2"}><b>{props.incident.title}</b></p>
|
|
<div className={`col-md-2 col-12 mb-2`}>
|
|
<div className={`severity-label w-max-content ${severityClass}-severity`}
|
|
data-tip={severityText[props.incident.severity]}>
|
|
<b>
|
|
{severityString} Severity ⓘ
|
|
</b>
|
|
<ReactTooltip />
|
|
</div>
|
|
</div>
|
|
<p className={"mb-0"}>{props.incident.description}</p>
|
|
</div>
|
|
);
|
|
}
|