feat: Add error message and details columns

Adds error_message and details columns to the Incident History table in the service detail page.
This commit is contained in:
Tola Leng
2025-06-20 20:13:18 +07:00
parent 458f5f7d82
commit 918a248b8f
8 changed files with 116 additions and 28 deletions
@@ -55,7 +55,8 @@ export const useRealTimeUpdates = ({
setUptimeData(prev => {
const newData: UptimeData = {
id: e.record.id,
serviceId: e.record.service_id,
service_id: e.record.service_id, // Include service_id
serviceId: e.record.service_id, // Keep for backward compatibility
timestamp: e.record.timestamp,
status: e.record.status,
responseTime: e.record.response_time || 0,
@@ -84,4 +85,4 @@ export const useRealTimeUpdates = ({
console.error("Error setting up real-time updates:", error);
}
}, [serviceId, startDate, endDate, setService, setUptimeData]);
};
};
@@ -68,7 +68,8 @@ export const useUptimeData = ({ serviceId, serviceType, status, interval }: UseU
const placeholderHistory: UptimeData[] = Array(20).fill(null).map((_, index) => ({
id: `placeholder-${serviceId}-${index}`,
serviceId: serviceId || "",
service_id: serviceId || "", // Include service_id
serviceId: serviceId || "", // Keep for backward compatibility
timestamp: new Date(Date.now() - (index * interval * 1000)).toISOString(),
status: statusValue as "up" | "down" | "warning" | "paused",
responseTime: 0
@@ -96,7 +97,8 @@ export const useUptimeData = ({ serviceId, serviceType, status, interval }: UseU
return {
id: `padding-${serviceId}-${index}`,
serviceId: serviceId || "",
service_id: serviceId || "", // Include service_id
serviceId: serviceId || "", // Keep for backward compatibility
timestamp: new Date(baseTime - timeOffset).toISOString(),
status: lastStatus,
responseTime: 0
@@ -25,6 +25,8 @@ export function IncidentTable({ incidents }: IncidentTableProps) {
<TableHead className={theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}>{t("time")}</TableHead>
<TableHead className={theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}>{t("status")}</TableHead>
<TableHead className={theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}>{t("responseTime")}</TableHead>
<TableHead className={theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}>Error Message</TableHead>
<TableHead className={theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}>Details</TableHead>
</TableRow>
</TableHeader>
<TableBody>
@@ -52,10 +54,28 @@ export function IncidentTable({ incidents }: IncidentTableProps) {
? `${check.responseTime}ms`
: "N/A"}
</TableCell>
<TableCell className={`text-sm ${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'} max-w-[200px]`}>
{check.error_message ? (
<div className="truncate" title={check.error_message}>
{check.error_message}
</div>
) : (
<span className={theme === 'dark' ? 'text-gray-500' : 'text-gray-400'}>-</span>
)}
</TableCell>
<TableCell className={`text-sm ${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'} max-w-[250px]`}>
{check.details ? (
<div className="truncate" title={check.details}>
{check.details}
</div>
) : (
<span className={theme === 'dark' ? 'text-gray-500' : 'text-gray-400'}>-</span>
)}
</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
);
}
}