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:
+3
-2
@@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user