Paul Payne
0515faadfd
The dashboard widgets were named after the old 'component' concept. Renamed each to what it actually renders: - ComponentCard → ServiceCard (ServiceSummary, /services/, service actions) - ComponentTable → ProgramTable (ProgramSummary[], the program catalog) - ComponentEditor→ DeploymentEditor (DeploymentDetail, the unified type) - ComponentFields→ DeploymentFields (AnyDetail) - AddComponent → AddDeployment Also purged the domain term 'component' from the rest of the app: the useComponent hook → useDeployment, ConfigPanel + the three detail pages' `component` prop/var → `deployment`, and the gateway/node table headers (Component → Program / Deployment). Props renamed to match (component → service / program / deployment). The React UI directory app/src/components/ keeps its conventional name. App type-checks and builds clean.
25 lines
749 B
TypeScript
25 lines
749 B
TypeScript
import { useMemo } from "react"
|
|
import type { ServiceSummary, HealthStatus } from "@/types"
|
|
import { ServiceCard } from "./ServiceCard"
|
|
import { SectionHeader } from "./SectionHeader"
|
|
|
|
interface ServiceSectionProps {
|
|
services: ServiceSummary[]
|
|
statuses: HealthStatus[]
|
|
}
|
|
|
|
export function ServiceSection({ services, statuses }: ServiceSectionProps) {
|
|
const statusMap = useMemo(() => new Map(statuses.map((s) => [s.id, s])), [statuses])
|
|
|
|
return (
|
|
<section>
|
|
<SectionHeader section="service" />
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{services.map((svc) => (
|
|
<ServiceCard key={svc.id} service={svc} health={statusMap.get(svc.id)} />
|
|
))}
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|