update viewers page
This commit is contained in:
+1
-89
@@ -2609,7 +2609,6 @@ function LocationSignalMap({ countries, locations }) {
|
|||||||
const radius = isCityMarker
|
const radius = isCityMarker
|
||||||
? scaleMarkerRadius(location.visitors, 5, 14)
|
? scaleMarkerRadius(location.visitors, 5, 14)
|
||||||
: scaleMarkerRadius(location.visitors, 8, 24)
|
: scaleMarkerRadius(location.visitors, 8, 24)
|
||||||
const tooltipPlace = isCityMarker ? location.label : location.label
|
|
||||||
L.circleMarker([location.lat, location.lon], {
|
L.circleMarker([location.lat, location.lon], {
|
||||||
color: countryMarkerColor,
|
color: countryMarkerColor,
|
||||||
fillColor: countryMarkerColor,
|
fillColor: countryMarkerColor,
|
||||||
@@ -2617,93 +2616,6 @@ function LocationSignalMap({ countries, locations }) {
|
|||||||
opacity: 0,
|
opacity: 0,
|
||||||
radius,
|
radius,
|
||||||
stroke: false,
|
stroke: false,
|
||||||
})
|
|
||||||
.bindTooltip(`${tooltipPlace}: ${formatNumber(location.visitors)} visitors`, {
|
|
||||||
direction: 'top',
|
|
||||||
opacity: 0.95,
|
|
||||||
})
|
|
||||||
.addTo(layer)
|
|
||||||
})
|
|
||||||
}, [cityMarkers, countryMarkerColor, countryMarkers, maxMarkerVisitors])
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="p-5">
|
|
||||||
<div className="relative h-[340px] overflow-hidden rounded-md border border-border bg-surface">
|
|
||||||
<div ref={mapRef} className="h-full w-full" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mt-4 grid gap-2 sm:grid-cols-2">
|
|
||||||
{topLocations.map((location) => (
|
|
||||||
<div className="grid grid-cols-[1fr_auto] gap-3 rounded-md bg-surface px-3 py-2 text-sm" key={`${location.key}-row`}>
|
|
||||||
<div className="min-w-0">
|
|
||||||
<p className="truncate font-semibold">{location.label}</p>
|
|
||||||
<p className="truncate text-xs text-text-soft">{location.detail}</p>
|
|
||||||
</div>
|
|
||||||
<p className="font-semibold text-fury-cyan">{formatNumber(location.visitors)}</p>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{!countries.length && !locations.length ? (
|
|
||||||
<p className="mt-4 text-sm text-text-soft">
|
|
||||||
No Cloudflare location signals have been shared yet.
|
|
||||||
</p>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function UptimePage({ uptime }) {
|
|
||||||
const [hoveredSnapshot, setHoveredSnapshot] = useState(null)
|
|
||||||
const checks = uptime.checks
|
|
||||||
const history = uptime.history
|
|
||||||
const operationalCount = checks.filter((check) => check.ok).length
|
|
||||||
const allOperational = checks.length > 0 && operationalCount === checks.length
|
|
||||||
const updatedAt = uptime.updatedAt ? dateFormat.format(new Date(uptime.updatedAt)) : 'Not checked yet'
|
|
||||||
const lastIssue = history.find((item) => item.status !== 'operational')
|
|
||||||
const uptimeSummary = uptime.summary || {}
|
|
||||||
const overview = [
|
|
||||||
{
|
|
||||||
label: 'Live checks',
|
|
||||||
value: formatNumber(checks.length),
|
|
||||||
detail: allOperational ? 'all endpoints responding' : `${formatNumber(checks.length - operationalCount)} need attention`,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '7 day uptime',
|
|
||||||
value: `${Math.round(Number(uptimeSummary.uptime_percent_7d || 0))}%`,
|
|
||||||
detail: `${formatNumber(uptimeSummary.samples_7d || 0)} retained probes`,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Last issue',
|
|
||||||
value: lastIssue ? shortDateFormat.format(new Date(lastIssue.checked_at)) : 'None',
|
|
||||||
detail: lastIssue ? `${lastIssue.status} on ${lastIssue.target}` : 'no stored incidents',
|
|
||||||
},
|
|
||||||
]
|
|
||||||
const radius = scaleMarkerRadius(country.visitors, 8, 24)
|
|
||||||
L.circleMarker([country.lat, country.lon], {
|
|
||||||
color: '#e82517',
|
|
||||||
fillColor: '#e82517',
|
|
||||||
fillOpacity: 0.4,
|
|
||||||
opacity: 0,
|
|
||||||
radius,
|
|
||||||
stroke: false,
|
|
||||||
})
|
|
||||||
.bindTooltip(`${country.label}: ${formatNumber(country.visitors)} visitors`, {
|
|
||||||
direction: 'top',
|
|
||||||
opacity: 0.95,
|
|
||||||
})
|
|
||||||
.addTo(layer)
|
|
||||||
})
|
|
||||||
|
|
||||||
cityMarkers.forEach((location) => {
|
|
||||||
const radius = scaleMarkerRadius(location.visitors, 5, 14)
|
|
||||||
L.circleMarker([location.lat, location.lon], {
|
|
||||||
color: '#000000',
|
|
||||||
fillColor: '#000000',
|
|
||||||
fillOpacity: 0.4,
|
|
||||||
opacity: 0,
|
|
||||||
radius,
|
|
||||||
stroke: false,
|
|
||||||
})
|
})
|
||||||
.bindTooltip(`${location.label}: ${formatNumber(location.visitors)} visitors`, {
|
.bindTooltip(`${location.label}: ${formatNumber(location.visitors)} visitors`, {
|
||||||
direction: 'top',
|
direction: 'top',
|
||||||
@@ -2711,7 +2623,7 @@ function UptimePage({ uptime }) {
|
|||||||
})
|
})
|
||||||
.addTo(layer)
|
.addTo(layer)
|
||||||
})
|
})
|
||||||
}, [cityMarkers, countryMarkers, maxMarkerVisitors])
|
}, [cityMarkers, countryMarkerColor, countryMarkers, maxMarkerVisitors])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="p-5">
|
<div className="p-5">
|
||||||
|
|||||||
Reference in New Issue
Block a user