diff --git a/web/components/service/details/service-details-overview.tsx b/web/components/service/details/service-details-overview.tsx index 9f6f33b7..a3330a2b 100644 --- a/web/components/service/details/service-details-overview.tsx +++ b/web/components/service/details/service-details-overview.tsx @@ -1,13 +1,10 @@ "use client"; -import cronstrue from "cronstrue"; import { Activity, Box, - Cpu, Github, Globe, - HardDrive, type LucideIcon, Server, } from "lucide-react"; @@ -160,7 +157,7 @@ export function ServiceDetailsOverview({ service }: { service: Service }) { }); return ( - +
0} @@ -186,7 +183,7 @@ function RequestStatsPanel({ error?: unknown; isLoading: boolean; }) { - const [chartMode, setChartMode] = useState("rate"); + const [chartMode, setChartMode] = useState("total"); const chartRows = useMemo(() => buildChartRows(stats), [stats]); const statusSeries = useMemo(() => buildStatusSeries(stats), [stats]); const hasChartData = chartRows.some((row) => row.totalRequests > 0); @@ -358,12 +355,12 @@ function RequestChartModeToggle({ disabled: boolean; }) { const options: Array<{ value: RequestChartMode; label: string }> = [ - { value: "rate", label: "RPS" }, { value: "total", label: "Total" }, + { value: "rate", label: "RPS" }, ]; return ( -
+
{options.map((option) => { const isSelected = value === option.value; @@ -401,7 +398,7 @@ function ServiceConfigPanel({ const primaryEndpoint = getPrimaryEndpoint(overview.endpoints); return ( -
+
@@ -411,6 +408,7 @@ function ServiceConfigPanel({ + {formatResources(service)} - - {formatReplicaCompact(overview)} - {formatPlacementLabel(service)} - {overview.serverSummaries.length > 0 ? ( - - {formatCount(overview.serverSummaries.length, "server")} - - ) : null} - - } > - {formatEndpointCount(overview.endpoints)} {formatPortSummary(service.ports || [])} {primaryEndpoint.kind !== "private" ? ( {`${service.hostname || service.name}.internal`} ) : null} - - - {formatBackupLabel(service)} - {formatDeployScheduleLabel(service)} -
); @@ -483,7 +457,12 @@ function SummaryItem({ className?: string; }) { return ( -
+
{label} @@ -509,7 +488,12 @@ function ConfigDigestItem({ className?: string; }) { return ( -
+
{label} @@ -630,7 +614,7 @@ function LegendMetric({ function RequestStatsState({ message }: { message: string }) { return ( -
+
{message}
); @@ -649,7 +633,7 @@ function RequestStatsTooltip({ const items = visiblePayload.length > 0 ? visiblePayload : payload; return ( -
+

{formatTooltipDate(String(label))}

{items.map((item) => ( @@ -922,18 +906,6 @@ function formatInstanceSummary(overview: OverviewData): string { return `${overview.runningDeployments}/${configured} Running Across ${formatCount(serverCount, "server")}`; } -function getLockedServerLabel(service: Service): string | null { - if (!service.lockedServerId) return null; - - return ( - service.lockedServer?.name ?? - service.configuredReplicas.find( - (replica) => replica.serverId === service.lockedServerId, - )?.serverName ?? - service.lockedServerId - ); -} - function getPrimaryEndpoint(endpoints: EndpointItem[]): EndpointItem { return ( endpoints.find((endpoint) => endpoint.kind === "public") ?? @@ -948,34 +920,6 @@ function getPrimaryEndpoint(endpoints: EndpointItem[]): EndpointItem { ); } -function formatReplicaCompact(overview: OverviewData): string { - const configured = getConfiguredReplicaCount(overview); - - if (configured === 0) return "No Replicas"; - - return `${overview.runningDeployments}/${configured} Running`; -} - -function formatPlacementLabel(service: Service): string { - const lockedServer = getLockedServerLabel(service); - - if (service.stateful) { - return lockedServer ? `Stateful on ${lockedServer}` : "Stateful"; - } - - return lockedServer ? `Pinned to ${lockedServer}` : "Stateless"; -} - -function formatEndpointCount(endpoints: EndpointItem[]): string { - const publicCount = endpoints.filter( - (endpoint) => endpoint.kind !== "private", - ).length; - - if (publicCount === 0) return "Private Only"; - - return `${formatCount(publicCount, "public endpoint")} + Private`; -} - function formatPortSummary(ports: Service["ports"]): string { if (ports.length === 0) return "No Ports"; if (ports.length === 1) return formatPortLabel(ports[0]); @@ -990,43 +934,6 @@ function formatPortLabel(port: Service["ports"][number]): string { return `${protocol} :${port.port}${external}`; } -function formatDataSummary(service: Service): string { - const volumeCount = service.volumes?.length ?? 0; - const secretCount = service.secrets?.length ?? 0; - const parts = []; - - if (volumeCount > 0) parts.push(formatCount(volumeCount, "volume")); - if (secretCount > 0) parts.push(formatCount(secretCount, "secret")); - - return parts.length > 0 ? parts.join(" ยท ") : "No Volumes or Secrets"; -} - -function formatBackupLabel(service: Service): string { - if ((service.volumes?.length ?? 0) === 0) return "No Backups"; - if (!service.backupEnabled) return "Manual Backups"; - - return service.backupSchedule - ? `Backup ${service.backupSchedule}` - : "Backups On"; -} - -function formatDeployScheduleLabel(service: Service): string { - if (!service.deploymentSchedule) return "Manual Deploy"; - - try { - const scheduleDescription = cronstrue.toString(service.deploymentSchedule, { - verbose: true, - }); - return `Deploy ${lowercaseFirstLetter(scheduleDescription)}`; - } catch { - return "Scheduled Deploy"; - } -} - -function lowercaseFirstLetter(value: string): string { - return value.charAt(0).toLowerCase() + value.slice(1); -} - function formatCount(count: number, singular: string): string { const label = singular .split(" ")