0a7b4f320b
Some checks failed
API CI / API Lint (push) Has been cancelled
API CI / API Type Check (push) Has been cancelled
API CI / API Test (push) Has been cancelled
API CI / API Build (push) Has been cancelled
CD Pipeline / Deploy to Staging (push) Has been cancelled
CI Pipeline / Lint and Type Check (push) Has been cancelled
CI Pipeline / Test Backend (push) Has been cancelled
CI Pipeline / Test Frontend (push) Has been cancelled
CI Pipeline / Security Scan (push) Has been cancelled
Deploy to Staging / Deploy to Staging (push) Has been cancelled
Portal CI / Portal Lint (push) Has been cancelled
Portal CI / Portal Type Check (push) Has been cancelled
Portal CI / Portal Test (push) Has been cancelled
Portal CI / Portal Build (push) Has been cancelled
Test Suite / frontend-tests (push) Has been cancelled
Test Suite / api-tests (push) Has been cancelled
Test Suite / blockchain-tests (push) Has been cancelled
Type Check / type-check (map[directory:. name:root]) (push) Has been cancelled
Type Check / type-check (map[directory:api name:api]) (push) Has been cancelled
Type Check / type-check (map[directory:portal name:portal]) (push) Has been cancelled
API CI / Build Docker Image (push) Has been cancelled
CD Pipeline / Deploy to Production (push) Has been cancelled
CI Pipeline / Build (push) Has been cancelled
- root .eslintrc with recommended TS rules; eslint --fix import order project-wide - Replace any/unknown in lib clients (ArgoCD, K8s, Phoenix), hooks, and key components - Form labels: htmlFor+id; escape apostrophes; remove or gate console (error boundary keep) - Crossplane VM status typing; webhook test result interface; infrastructure/resources maps typed Made-with: Cursor
83 lines
2.6 KiB
TypeScript
83 lines
2.6 KiB
TypeScript
'use client';
|
|
|
|
import { Activity, CheckCircle, AlertCircle } from 'lucide-react';
|
|
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card';
|
|
import { usePhoenixHealthSummary } from '@/hooks/usePhoenixRailing';
|
|
|
|
export function PhoenixHealthTile() {
|
|
const { data, isLoading, error } = usePhoenixHealthSummary();
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<Card className="bg-gray-800 border-gray-700">
|
|
<CardHeader>
|
|
<CardTitle className="text-white flex items-center gap-2">
|
|
<Activity className="h-5 w-5 text-orange-500" />
|
|
Phoenix Health
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-center text-gray-400 py-4">Loading...</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<Card className="bg-gray-800 border-gray-700">
|
|
<CardHeader>
|
|
<CardTitle className="text-white flex items-center gap-2">
|
|
<Activity className="h-5 w-5 text-orange-500" />
|
|
Phoenix Health
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-center text-red-400 py-4">Error loading health (check PHOENIX_RAILING_URL)</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
const status = data?.status ?? 'unknown';
|
|
const hosts = data?.hosts ?? [];
|
|
const alerts = data?.alerts ?? [];
|
|
|
|
return (
|
|
<Card className="bg-gray-800 border-gray-700">
|
|
<CardHeader>
|
|
<div className="flex items-center justify-between">
|
|
<CardTitle className="text-white flex items-center gap-2">
|
|
<Activity className="h-5 w-5 text-orange-500" />
|
|
Phoenix Health (Railing)
|
|
</CardTitle>
|
|
<span
|
|
className={`px-3 py-1 rounded-full text-xs font-semibold ${
|
|
status === 'healthy' ? 'bg-green-500/20 text-green-400' :
|
|
status === 'degraded' ? 'bg-yellow-500/20 text-yellow-400' :
|
|
'bg-red-500/20 text-red-400'
|
|
}`}
|
|
>
|
|
{status}
|
|
</span>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-2 text-sm">
|
|
<div className="flex items-center gap-2">
|
|
<CheckCircle className="h-4 w-4 text-green-400" />
|
|
<span>Hosts: {hosts.length}</span>
|
|
</div>
|
|
{alerts.length > 0 && (
|
|
<div className="flex items-center gap-2 text-yellow-400">
|
|
<AlertCircle className="h-4 w-4" />
|
|
<span>Alerts: {alerts.length}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|