Paul Payne
930bc601b7
feat: implement HealthBadge and RoleBadge components for displaying health status and roles feat: create LogViewer component for streaming logs of services feat: develop SecretsEditor for managing secrets with CRUD operations feat: introduce ToolCard component for displaying tool information style: add global CSS variables and styles for consistent theming feat: set up API client for handling requests to the backend feat: implement hooks for fetching components, statuses, and tools feat: create routes for dashboard, component details, and tools feat: add service management endpoints for starting, stopping, and restarting services feat: implement event bus for handling real-time updates via SSE feat: create health check and logs endpoints for monitoring services feat: add tests for health and tools endpoints to ensure functionality chore: update project configuration files and dependencies for better development experience
33 lines
902 B
TypeScript
33 lines
902 B
TypeScript
import { cn } from "@/lib/utils"
|
|
|
|
interface HealthBadgeProps {
|
|
status: "up" | "down" | "unknown"
|
|
latency?: number | null
|
|
}
|
|
|
|
export function HealthBadge({ status, latency }: HealthBadgeProps) {
|
|
return (
|
|
<span
|
|
className={cn(
|
|
"inline-flex items-center gap-1.5 text-xs px-2 py-0.5 rounded-full",
|
|
status === "up" && "bg-green-800/50 text-green-300",
|
|
status === "down" && "bg-red-800/50 text-red-300",
|
|
status === "unknown" && "bg-gray-700/50 text-gray-400",
|
|
)}
|
|
>
|
|
<span
|
|
className={cn(
|
|
"w-1.5 h-1.5 rounded-full",
|
|
status === "up" && "bg-green-400",
|
|
status === "down" && "bg-red-400",
|
|
status === "unknown" && "bg-gray-500",
|
|
)}
|
|
/>
|
|
{status}
|
|
{latency != null && status === "up" && (
|
|
<span className="text-gray-500 ml-0.5">{latency}ms</span>
|
|
)}
|
|
</span>
|
|
)
|
|
}
|