url/checkcle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor: Separate data display by monitoring source

Browse Source 
and Fix: Display data collection in detail page
This commit is contained in:
Tola Leng
2025-06-24 22:11:29 +07:00
parent 35b11f5a16
commit ab4f0aa6ea
15 changed files with 565 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
application/src/components/services/ServiceDetailContent.tsx
+26 -14
View File
@@ -14,6 +14,8 @@ interface ServiceDetailContentProps {
onDateRangeChange: (start: Date, end: Date, option: DateRangeOption) => void;
onStatusChange: (newStatus: "up" | "down" | "paused" | "warning") => void;
selectedDateOption: DateRangeOption;
selectedRegionalAgent: string;
onRegionalAgentChange: (agent: string) => void;
}
export const ServiceDetailContent = ({
@@ -21,28 +23,37 @@ export const ServiceDetailContent = ({
uptimeData,
onDateRangeChange,
onStatusChange,
selectedDateOption
selectedDateOption,
selectedRegionalAgent,
onRegionalAgentChange
}: ServiceDetailContentProps) => {
// Check if data is available
const hasUptimeData = uptimeData && uptimeData.length > 0;
return (
<div className="p-4 md:p-6 pb-0 h-full overflow-auto">
<ServiceHeader service={service} onStatusChange={onStatusChange} />
<ServiceHeader
service={service}
onStatusChange={onStatusChange}
selectedRegionalAgent={selectedRegionalAgent}
onRegionalAgentChange={onRegionalAgentChange}
/>
<ServiceStatsCards service={service} uptimeData={uptimeData} />
<div className="mb-4 md:mb-6 mt-6 md:mt-8 flex flex-col md:flex-row justify-between items-start md:items-center gap-4 md:gap-0">
<div className="mb-4 md:mb-6 mt-6 md:mt-8 flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4">
<h2 className="text-lg md:text-xl font-medium">Response Time History</h2>
<div className="flex flex-col md:flex-row items-start md:items-center gap-2">
<span className="text-sm text-muted-foreground">
Collection: {service.type.toLowerCase() === 'ping' || service.type.toLowerCase() === 'icmp' ? 'ping_data' :
service.type.toLowerCase() === 'dns' ? 'dns_data' :
service.type.toLowerCase() === 'tcp' ? 'tcp_data' : 'uptime_data'}
</span>
<DateRangeFilter
onRangeChange={onDateRangeChange}
selectedOption={selectedDateOption}
/>
<div className="flex flex-col md:flex-row items-start md:items-center gap-4">
<div className="flex flex-col md:flex-row items-start md:items-center gap-2">
<span className="text-sm text-muted-foreground">
Collection: {service.type.toLowerCase() === 'ping' || service.type.toLowerCase() === 'icmp' ? 'ping_data' :
service.type.toLowerCase() === 'dns' ? 'dns_data' :
service.type.toLowerCase() === 'tcp' ? 'tcp_data' : 'uptime_data'}
</span>
<DateRangeFilter
onRangeChange={onDateRangeChange}
selectedOption={selectedDateOption}
/>
</div>
</div>
</div>
@@ -53,7 +64,8 @@ export const ServiceDetailContent = ({
<AlertTriangle className="h-10 w-10 md:h-12 md:w-12 text-amber-500 mx-auto mb-2 md:mb-3 opacity-70" />
<h3 className="text-base md:text-lg font-medium mb-1">No uptime data available</h3>
<p className="text-muted-foreground max-w-md text-sm md:text-base">
There's no monitoring data for this service in the selected time period.
There's no monitoring data for this service in the selected time period
{selectedRegionalAgent !== "default" ? " from the selected regional agent" : ""}.
This could be because the service was recently added or monitoring is paused.
</p>
</div>