detail modal

client/src/Pages/Incidents2/Components/IncidentDetailsModal/index.jsx

@@ -0,0 +1,406 @@
+// Components
+import { Stack, Typography, Grid, Box, Button, Divider } from "@mui/material";
+import { GenericDialog } from "@/Components/v1/Dialog/genericDialog.jsx";
+import GenericFallback from "@/Components/v1/GenericFallback/index.jsx";
+import SummaryCard from "@/Pages/Incidents2/Components/SummaryCard";
+import ResolveIncidentDialog from "../ResolveIncidentDialog/index.jsx";
+
+// Utils
+import { useEffect, useState } from "react";
+import { useTheme } from "@emotion/react";
+import { useTranslation } from "react-i18next";
+import { formatDateWithTz } from "@/Utils/timeUtils";
+import { useSelector } from "react-redux";
+import PropTypes from "prop-types";
+
+// Hooks
+import useFetchIncidents from "@/Pages/Incidents2/hooks/useFetchIncidents";
+import useGetIncidentsDuration from "@/Pages/Incidents2/hooks/useGetIncidentsDuration";
+
+const IncidentDetailsModal = ({ open, incidentId, onClose, onResolved }) => {
+	const theme = useTheme();
+	const { t } = useTranslation();
+	const { fetchIncidentById, resolveIncident } = useFetchIncidents();
+	const [incident, setIncident] = useState(null);
+	const [isLoading, setIsLoading] = useState(false);
+	const [isResolveDialogOpen, setIsResolveDialogOpen] = useState(false);
+	const uiTimezone = useSelector((state) => state.ui.timezone);
+	const isActive = incident?.status === true;
+	const duration = useGetIncidentsDuration(incident || null, isActive);
+
+	const statusColor = isActive ? theme.palette.error.main : theme.palette.success.main;
+	const toCapitalLetter = (text) =>
+		typeof text === "string" && text.length > 0
+			? text.charAt(0).toUpperCase() + text.slice(1)
+			: text;
+
+	const KeyValueRow = ({ label, value, sx = {} }) => (
+		<Grid
+			container
+			spacing={2}
+			alignItems="flex-start"
+			sx={{ ...sx }}
+		>
+			<Grid
+				item
+				xs={4}
+			>
+				<Typography variant="body1">{label}</Typography>
+			</Grid>
+			<Grid
+				item
+				xs
+			>
+				<Typography
+					variant="body1"
+					textAlign="right"
+				>
+					{value ?? "-"}
+				</Typography>
+			</Grid>
+		</Grid>
+	);
+
+	useEffect(() => {
+		const loadIncident = async () => {
+			if (!incidentId || !open) {
+				setIncident(null);
+				setIsLoading(false);
+				return;
+			}
+
+			setIsLoading(true);
+			try {
+				const incidentData = await fetchIncidentById(incidentId);
+				setIncident(incidentData);
+			} catch (error) {
+				console.error("Error fetching incident:", error);
+				setIncident(null);
+			} finally {
+				setIsLoading(false);
+			}
+		};
+
+		loadIncident();
+	}, [incidentId, open, fetchIncidentById]);
+
+	const openResolveDialog = () => {
+		setIsResolveDialogOpen(true);
+	};
+
+	const closeResolveDialog = () => {
+		setIsResolveDialogOpen(false);
+	};
+
+	const handleAfterResolve = async () => {
+		if (!incidentId) return;
+		const updatedIncident = await fetchIncidentById(incidentId);
+		if (updatedIncident) {
+			setIncident(updatedIncident);
+		}
+	};
+
+	const renderContent = () => {
+		if (isLoading) {
+			return (
+				<GenericFallback
+					isLoading={true}
+					message={t("incidentsPage.loadingIncidentDetails")}
+				/>
+			);
+		}
+
+		if (!incident) {
+			return (
+				<GenericFallback
+					isLoading={false}
+					message={t("incidentsPage.incidentNotFound")}
+				/>
+			);
+		}
+
+		return (
+			<Stack gap={theme.spacing(8)}>
+				<Grid
+					container
+					spacing={3}
+				>
+					<Grid
+						item
+						xs={12}
+						md={12}
+					>
+						<SummaryCard title={t("incidentsPage.overview")}>
+							<Stack
+								direction="row"
+								alignItems="center"
+								gap={theme.spacing(2)}
+								sx={{ mb: theme.spacing(3) }}
+							>
+								<Box
+									sx={{
+										width: 8,
+										height: 8,
+										borderRadius: "50%",
+										bgcolor: statusColor,
+									}}
+								/>
+								<Typography
+									variant="body2"
+									sx={{
+										color: statusColor,
+										fontWeight: 700,
+										letterSpacing: 0.4,
+									}}
+								>
+									{isActive ? t("incidentsPage.active") : t("incidentsPage.resolved")}
+								</Typography>
+							</Stack>
+							<Stack
+								direction="column"
+								alignItems="start"
+								gap={theme.spacing(3)}
+							>
+								<Stack
+									direction="row"
+									gap={2}
+									sx={{ alignItems: "baseline" }}
+								>
+									<Typography
+										variant="body1"
+										color="text.secondary"
+										fontWeight={500}
+										sx={{ minWidth: 70 }}
+									>
+										{t("incidentsPage.incidentItemMonitor")}:
+									</Typography>
+									<Typography
+										variant="body1"
+										sx={{ flex: 1 }}
+									>
+										{incident?.monitorId?.name || t("incidentsPage.unknownMonitor")}
+									</Typography>
+								</Stack>
+								<Stack
+									direction="row"
+									gap={2}
+									sx={{ alignItems: "baseline" }}
+								>
+									<Typography
+										variant="body1"
+										color="text.secondary"
+										fontWeight={500}
+										sx={{ minWidth: 70 }}
+									>
+										{t("incidentsPage.URL")}:
+									</Typography>
+									<Typography
+										variant="body1"
+										sx={{ flex: 1, wordBreak: "break-word", fontFamily: "monospace" }}
+									>
+										{incident?.monitorId?.url || "-"}
+									</Typography>
+								</Stack>
+							</Stack>
+						</SummaryCard>
+					</Grid>
+				</Grid>
+				<Grid
+					container
+					spacing={3}
+				>
+					<Grid
+						item
+						xs={12}
+						sm={12}
+					>
+						<SummaryCard title={t("incidentsPage.incidentAnalysis")}>
+							<Grid
+								container
+								spacing={3}
+								alignItems="stretch"
+							>
+								<Grid
+									item
+									xs={12}
+									sm={6}
+								>
+									<Stack gap={theme.spacing(2)}>
+										<Typography
+											variant="subtitle1"
+											fontWeight={700}
+										>
+											{t("incidentsPage.timeline")}
+										</Typography>
+										<Divider sx={{ mt: 2 }} />
+
+										<KeyValueRow
+											label={t("incidentsPage.startedAt")}
+											value={
+												formatDateWithTz(
+													incident?.startTime,
+													"D MMM YYYY, h:mm A",
+													uiTimezone
+												) || "-"
+											}
+											sx={{ paddingBottom: theme.spacing(3) }}
+										/>
+										{!isActive && (
+											<KeyValueRow
+												label={t("incidentsPage.endedAt")}
+												value={
+													formatDateWithTz(
+														incident?.endTime,
+														"D MMM YYYY, h:mm A",
+														uiTimezone
+													) || "-"
+												}
+												sx={{ paddingBottom: theme.spacing(3) }}
+											/>
+										)}
+
+										<KeyValueRow
+											label={t("incidentsPage.downtime")}
+											value={duration || "-"}
+										/>
+									</Stack>
+								</Grid>
+								<Grid
+									item
+									sm="auto"
+									sx={{ display: { xs: "none", sm: "flex" } }}
+								>
+									<Divider
+										orientation="vertical"
+										flexItem
+									/>
+								</Grid>
+								<Grid
+									item
+									xs={12}
+									sm
+								>
+									<Stack gap={theme.spacing(2)}>
+										<Typography
+											variant="subtitle1"
+											sx={{ letterSpacing: 0.6, fontWeight: 700 }}
+										>
+											{isActive
+												? t("incidentsPage.errorDetails")
+												: t("incidentsPage.resolutionDetails")}
+										</Typography>
+
+										<Divider sx={{ mt: 2 }} />
+
+										<KeyValueRow
+											label={t("incidentsPage.statusCode")}
+											value={incident?.statusCode ?? "-"}
+										/>
+
+										<Typography
+											variant="body2"
+											sx={{
+												fontFamily: "monospace",
+
+												wordBreak: "break-word",
+												lineHeight: 1.6,
+											}}
+										>
+											{incident?.message || "-"}
+										</Typography>
+
+										{!isActive && (
+											<>
+												<Divider sx={{ mb: theme.spacing(2) }} />
+
+												<KeyValueRow
+													label={t("incidentsPage.resolutionMethod")}
+													value={toCapitalLetter(incident?.resolutionType) || "-"}
+												/>
+												{incident?.resolutionType === "manual" && (
+													<>
+														<KeyValueRow
+															label={t("incidentsPage.resolvedBy")}
+															value={incident?.resolvedBy?.email || "Unknown"}
+														/>
+
+														<KeyValueRow
+															label={t("incidentsPage.comment")}
+															value={
+																incident?.comment?.trim()
+																	? incident.comment
+																	: t("incidentsPage.noCommentProvided")
+															}
+														/>
+													</>
+												)}
+											</>
+										)}
+									</Stack>
+								</Grid>
+							</Grid>
+						</SummaryCard>
+					</Grid>
+				</Grid>
+			</Stack>
+		);
+	};
+
+	return (
+		<GenericDialog
+			open={open}
+			onClose={onClose}
+			theme={theme}
+			title={t("incidentsPage.incidentDetails")}
+			width={{ xs: "95%", md: "45%", lg: "40%", xl: "35%" }}
+		>
+			<Stack
+				gap={theme.spacing(6)}
+				sx={{ maxHeight: "70vh", overflowY: "auto", pr: 1 }}
+			>
+				{renderContent()}
+				<Stack
+					direction="row"
+					justifyContent="flex-end"
+					gap={2}
+					sx={{ pt: theme.spacing(3) }}
+				>
+					{isActive && (
+						<Button
+							variant="outlined"
+							color="error"
+							onClick={openResolveDialog}
+						>
+							{t("incidentsPage.incidentsTableActionResolveManually")}
+						</Button>
+					)}
+
+					<Button
+						variant="contained"
+						color="secondary"
+						onClick={onClose}
+					>
+						{t("close")}
+					</Button>
+				</Stack>
+				<ResolveIncidentDialog
+					open={isResolveDialogOpen}
+					incidentId={incidentId}
+					onClose={closeResolveDialog}
+					onResolve={resolveIncident}
+					onAfterResolve={handleAfterResolve}
+					onResolved={onResolved}
+				/>
+			</Stack>
+		</GenericDialog>
+	);
+};
+
+IncidentDetailsModal.propTypes = {
+	open: PropTypes.bool.isRequired,
+	incidentId: PropTypes.string,
+	onClose: PropTypes.func.isRequired,
+	onResolved: PropTypes.func,
+};
+
+export default IncidentDetailsModal;

client/src/Pages/Incidents2/Components/IncidentTable/IncidentActionsMenu.jsx

@@ -2,28 +2,25 @@
 import IconButton from "@mui/material/IconButton";
 import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
-import Settings from "../../../../../assets/icons/settings-bold.svg?react";
-import { GenericDialog } from "@/Components/v1/Dialog/genericDialog.jsx";
-import TextInput from "@/Components/v1/Inputs/TextInput/index.jsx";
-import { Button, Stack } from "@mui/material";
+import Settings from "../../../../assets/icons/settings-bold.svg?react";
+import ResolveIncidentDialog from "../ResolveIncidentDialog/index.jsx";
 import useFetchIncidents from "../../hooks/useFetchIncidents";
 
 // Utils
 import { useState } from "react";
 import { useTheme } from "@emotion/react";
 import { useTranslation } from "react-i18next";
-import { useNavigate } from "react-router-dom";
 import { TypeToPathMap } from "@/Utils/monitorUtils.js";
+import { useNavigate } from "react-router-dom";
 import PropTypes from "prop-types";
 
-const IncidentActionsMenu = ({ incident, onResolve }) => {
+const IncidentActionsMenu = ({ incident, onResolve, onOpenDetails }) => {
 	const [anchorEl, setAnchorEl] = useState(null);
 	const [isDialogOpen, setIsDialogOpen] = useState(false);
-	const [comment, setComment] = useState("");
 	const theme = useTheme();
 	const { t } = useTranslation();
-	const navigate = useNavigate();
 	const { fetchIncidentById } = useFetchIncidents();
+	const navigate = useNavigate();
 	const openMenu = (event) => {
 		event.preventDefault();
 		event.stopPropagation();
@@ -39,7 +36,6 @@ const IncidentActionsMenu = ({ incident, onResolve }) => {
 
 	const openResolveDialog = (e) => {
 		closeMenu(e);
-		setComment("");
 		setIsDialogOpen(true);
 	};
 
@@ -47,17 +43,6 @@ const IncidentActionsMenu = ({ incident, onResolve }) => {
 		if (e) {
 			e.stopPropagation();
 		}
-		setComment("");
-		setIsDialogOpen(false);
-	};
-
-	const handleConfirmResolve = (e) => {
-		e.stopPropagation();
-		if (onResolve) {
-			const options = comment.trim() ? { comment: comment.trim() } : {};
-			onResolve(incident._id, options);
-		}
-		setComment("");
 		setIsDialogOpen(false);
 	};
 
@@ -65,7 +50,9 @@ const IncidentActionsMenu = ({ incident, onResolve }) => {
 	const handleGoToDetails = (e) => {
 		e.stopPropagation();
 		closeMenu(e);
-		navigate(`/incidents/details/${incident._id}`);
+		if (onOpenDetails) {
+			onOpenDetails(incident._id);
+		}
 	};
 
 	const handleGoToMonitor = async (e) => {
@@ -128,6 +115,12 @@ const IncidentActionsMenu = ({ incident, onResolve }) => {
 					},
 				}}
 			>
+				<MenuItem onClick={handleGoToDetails}>
+					{t("incidentsPage.incidentsTableActionDetails", "Details")}
+				</MenuItem>
+				<MenuItem onClick={handleGoToMonitor}>
+					{t("incidentsPage.incidentsTableActionGoToMonitor", "Go to monitor")}
+				</MenuItem>
 				{isActive && (
 					<MenuItem
 						onClick={(e) => {
@@ -138,57 +131,13 @@ const IncidentActionsMenu = ({ incident, onResolve }) => {
 						{t("incidentsPage.incidentsTableActionResolveManually")}
 					</MenuItem>
 				)}
-				<MenuItem onClick={handleGoToDetails}>
-					{t("incidentsPage.incidentsTableActionDetails", "Details")}
-				</MenuItem>
-				<MenuItem onClick={handleGoToMonitor}>
-					{t("incidentsPage.incidentsTableActionGoToMonitor", "Go to monitor")}
-				</MenuItem>
-				<MenuItem
-				//onClick={handleResolve}
-				>
-					Add comment
-				</MenuItem>
-				{/* Future options will be added here */}
 			</Menu>
-			<GenericDialog
+			<ResolveIncidentDialog
 				open={isDialogOpen}
-				theme={theme}
-				title={t("incidentsPage.resolveIncidentDialogTitle")}
-				description={t("incidentsPage.resolveIncidentDialogDescription")}
+				incidentId={incident._id}
 				onClose={closeDialog}
-			>
-				<Stack gap={theme.spacing(4)}>
-					<TextInput
-						label={t("incidentsPage.resolveIncidentDialogCommentLabel")}
-						placeholder={t("incidentsPage.resolveIncidentDialogCommentPlaceholder")}
-						value={comment}
-						onChange={(e) => setComment(e.target.value)}
-						maxWidth="100%"
-					/>
-					<Stack
-						direction="row"
-						gap={theme.spacing(4)}
-						mt={theme.spacing(4)}
-						justifyContent="flex-end"
-					>
-						<Button
-							variant="contained"
-							color="secondary"
-							onClick={closeDialog}
-						>
-							{t("cancel", "Cancel")}
-						</Button>
-						<Button
-							variant="contained"
-							color="error"
-							onClick={handleConfirmResolve}
-						>
-							{t("incidentsPage.resolveIncidentDialogConfirm")}
-						</Button>
-					</Stack>
-				</Stack>
-			</GenericDialog>
+				onResolve={onResolve}
+			/>
 		</>
 	);
 };
@@ -199,6 +148,7 @@ IncidentActionsMenu.propTypes = {
 		status: PropTypes.bool.isRequired,
 	}).isRequired,
 	onResolve: PropTypes.func.isRequired,
+	onOpenDetails: PropTypes.func,
 };
 
 export default IncidentActionsMenu;

client/src/Pages/Incidents2/Components/IncidentTable/index.jsx

@@ -26,6 +26,7 @@ const IncidentTable = ({
 	handleChangeRowsPerPage,
 	resolveIncident,
 	handleUpdateTrigger,
+	onOpenDetails,
 }) => {
 	const uiTimezone = useSelector((state) => state.ui.timezone);
 
@@ -125,6 +126,7 @@ const IncidentTable = ({
 					<IncidentActionsMenu
 						incident={row}
 						onResolve={handleResolveIncident}
+						onOpenDetails={onOpenDetails}
 					/>
 				);
 			},
@@ -180,6 +182,7 @@ IncidentTable.propTypes = {
 	handleChangeRowsPerPage: PropTypes.func.isRequired, // Handler for rows per page change
 	resolveIncident: PropTypes.func.isRequired,
 	handleUpdateTrigger: PropTypes.func.isRequired,
+	onOpenDetails: PropTypes.func,
 };
 
 export default IncidentTable;

client/src/Pages/Incidents2/Components/ResolveIncidentDialog/index.jsx

@@ -0,0 +1,105 @@
+import { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import { Button, Stack } from "@mui/material";
+import { useTranslation } from "react-i18next";
+import { useTheme } from "@emotion/react";
+import { GenericDialog } from "@/Components/v1/Dialog/genericDialog.jsx";
+import TextInput from "@/Components/v1/Inputs/TextInput/index.jsx";
+
+const ResolveIncidentDialog = ({
+	open,
+	incidentId,
+	onClose,
+	onResolve,
+	onAfterResolve,
+	onResolved,
+	isLoading,
+}) => {
+	const { t } = useTranslation();
+	const theme = useTheme();
+	const [comment, setComment] = useState("");
+	const [isSubmitting, setIsSubmitting] = useState(false);
+
+	useEffect(() => {
+		if (open) {
+			setComment("");
+		}
+	}, [open]);
+
+	const handleConfirm = async () => {
+		if (!incidentId) return;
+		const trimmed = comment.trim();
+		try {
+			setIsSubmitting(true);
+			await onResolve(incidentId, trimmed ? { comment: trimmed } : {});
+			if (onAfterResolve) {
+				await onAfterResolve();
+			}
+			onResolved?.();
+			onClose();
+		} catch (error) {
+			console.error("Error resolving incident:", error);
+		} finally {
+			setIsSubmitting(false);
+		}
+	};
+
+	return (
+		<GenericDialog
+			open={open}
+			theme={theme}
+			title={t("incidentsPage.resolveIncidentDialogTitle")}
+			description={t("incidentsPage.resolveIncidentDialogDescription")}
+			onClose={onClose}
+		>
+			<Stack gap={theme.spacing(4)}>
+				<TextInput
+					label={t("incidentsPage.resolveIncidentDialogCommentLabel")}
+					placeholder={t("incidentsPage.resolveIncidentDialogCommentPlaceholder")}
+					value={comment}
+					onChange={(e) => setComment(e.target.value)}
+					maxWidth="100%"
+				/>
+				<Stack
+					direction="row"
+					gap={theme.spacing(4)}
+					mt={theme.spacing(4)}
+					justifyContent="flex-end"
+				>
+					<Button
+						variant="contained"
+						color="secondary"
+						onClick={onClose}
+						disabled={isLoading || isSubmitting}
+					>
+						{t("cancel", "Cancel")}
+					</Button>
+					<Button
+						variant="contained"
+						color="error"
+						onClick={handleConfirm}
+						disabled={isLoading || isSubmitting}
+					>
+						{t("incidentsPage.resolveIncidentDialogConfirm")}
+					</Button>
+				</Stack>
+			</Stack>
+		</GenericDialog>
+	);
+};
+
+ResolveIncidentDialog.propTypes = {
+	open: PropTypes.bool.isRequired,
+	incidentId: PropTypes.string.isRequired,
+	onClose: PropTypes.func.isRequired,
+	onResolve: PropTypes.func.isRequired,
+	onAfterResolve: PropTypes.func,
+	isLoading: PropTypes.bool,
+	onResolved: PropTypes.func,
+};
+
+ResolveIncidentDialog.defaultProps = {
+	isLoading: false,
+};
+
+export default ResolveIncidentDialog;

client/src/Pages/Incidents2/index.jsx

@@ -5,6 +5,7 @@ import GenericFallback from "@/Components/v1/GenericFallback/index.jsx";
 import IncidentTable from "./Components/IncidentTable/index.jsx";
 import OptionsHeader from "./Components/OptionsHeader/index.jsx";
 import IncidentsSummaryPanel from "./Components/IncidentsSummaryPanel/index.jsx";
+import IncidentDetailsModal from "./Components/IncidentDetailsModal/index.jsx";
 
 //Utils
 import { useTheme } from "@emotion/react";
@@ -30,6 +31,8 @@ const Incidents2 = () => {
 	const [rowsPerPage, setRowsPerPage] = useState(10);
 	const [monitorLookup, setMonitorLookup] = useState(undefined);
 	const [updateTrigger, setUpdateTrigger] = useState(false);
+	const [isDetailsOpen, setIsDetailsOpen] = useState(false);
+	const [selectedIncidentId, setSelectedIncidentId] = useState(null);
 	const handleUpdateTrigger = () => {
 		setUpdateTrigger((prev) => !prev);
 	};
@@ -114,6 +117,17 @@ const Incidents2 = () => {
 		setPage(0);
 	};
 
+	const handleOpenDetails = (id) => {
+		if (!id) return;
+		setSelectedIncidentId(id);
+		setIsDetailsOpen(true);
+	};
+
+	const handleCloseDetails = () => {
+		setIsDetailsOpen(false);
+		setSelectedIncidentId(null);
+	};
+
 	return (
 		<Stack gap={theme.spacing(10)}>
 			<Breadcrumbs list={BREADCRUMBS} />
@@ -142,6 +156,13 @@ const Incidents2 = () => {
 				handleChangeRowsPerPage={handleChangeRowsPerPage}
 				resolveIncident={resolveIncident}
 				handleUpdateTrigger={handleUpdateTrigger}
+				onOpenDetails={handleOpenDetails}
+			/>
+			<IncidentDetailsModal
+				open={isDetailsOpen}
+				incidentId={selectedIncidentId}
+				onClose={handleCloseDetails}
+				onResolved={handleUpdateTrigger}
 			/>
 		</Stack>
 	);

client/src/Routes/index.jsx

@@ -29,10 +29,8 @@ import InfrastructureDetails from "../Pages/Infrastructure/Details/index.jsx";
 import ServerUnreachable from "../Pages/ServerUnreachable.jsx";
 
 // Incidents
-import Checks from "../Pages/v1/Incidents";
+import Checks from "../Pages/Incidents/index.jsx";
 import Incidents2 from "../Pages/Incidents2/index.jsx";
-import IncidentDetails from "../Pages/v1/Incidents2/Details";
-
 
 // Status pages
 import CreateStatus from "../Pages/StatusPage/Create/index.jsx";
@@ -136,10 +134,6 @@ const Routes = () => {
 					path="checks/:monitorId?"
 					element={<Checks />}
 				/>
-				<Route
-					path="incidents/details/:incidentId"
-					element={<IncidentDetails />}
-				/>
 				<Route
 					path="incidents/:monitorId?"
 					element={<Incidents2 />}

client/src/locales/en.json

@@ -247,6 +247,7 @@
 	"addMonitors": "Add monitors",
 	"window": "window",
 	"cancel": "Cancel",
+	"close": "Close",
 	"message": "Message",
 	"low": "low",
 	"high": "high",
@@ -1203,6 +1204,23 @@
 		"hours": "hours",
 		"loading": "Loading incident details...",
 		"incidentNotFound": "Incident not found",
-		"incidentDetails": "Incident Details"
+		"incidentDetails": "INCIDENT DETAILS",
+		"activeIncident": "ACTIVE INCIDENT",
+		"resolvedIncident": "RESOLVED INCIDENT",
+		"overview": "OVERVIEW",
+		"URL": "URL",
+		"incidentAnalysis": "INCIDENT ANALYSIS",
+		"timeline": "Timeline",
+		"startedAt": "Started at",
+		"endedAt": "Ended at",
+		"downtime": "Downtime",
+		"errorDetails": "Error details",
+		"resolutionDetails": "Resolution details",
+		"statusCode": "Status code",
+		"resolutionMethod": "Resolution method",
+		"resolvedBy": "Resolved by",
+		"comment": "Comment",
+		"noCommentProvided": "No comment provided",
+		"loadingIncidentDetails": "Loading incident details..."
 	}
 }