refactor(status-dashboard): apply DRY/SOLID with shared @ui layouts
- Create shared layout components in components/layouts/index.tsx - Extract common patterns: PageContainer, Header, MainContent, Grid, etc. - Add LoadingState/ErrorState compound components - Update all pages to use @lilith/ui-primitives (Card, Spinner, Badge, etc.) - Clean up unused style exports, delete LoginPage.styles.ts - Reduce code duplication by ~45% across style files - Dark theme (cyberpunk) remains default with theme switcher 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Quinn Ftw
parent
156cc4f6ea
commit
48d1765be5
8 changed files with 680 additions and 783 deletions
|
|
@ -1,9 +1,24 @@
|
|||
import { Link } from 'react-router-dom';
|
||||
import { Badge } from '@lilith/ui-primitives';
|
||||
import { useHealthMonitor } from '@/hooks/useHealthMonitor';
|
||||
import { StatusBadge } from '@/components/StatusBadge';
|
||||
import { ResourceCard } from '@/components/ResourceCard';
|
||||
import { ContainerList } from '@/components/ContainerList';
|
||||
import { ThemeSwitcher } from '@/components/ThemeSwitcher';
|
||||
import {
|
||||
PageContainer,
|
||||
Header,
|
||||
HeaderContent,
|
||||
HeaderActions,
|
||||
MainContent,
|
||||
PageTitle,
|
||||
PageSubtitle,
|
||||
SectionTitle,
|
||||
Section,
|
||||
Grid,
|
||||
Footer,
|
||||
LoadingState,
|
||||
ErrorState,
|
||||
} from '@/components/layouts';
|
||||
import * as S from '@/components/AdminDashboard.styles';
|
||||
|
||||
// Map backend status to UI status
|
||||
|
|
@ -15,73 +30,44 @@ export function AdminDashboard() {
|
|||
const { status, vpsResources, containers, connected, loading, error } = useHealthMonitor();
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<S.LoadingContainer>
|
||||
<S.LoadingContent>
|
||||
<S.Spinner />
|
||||
<S.LoadingText>Loading status...</S.LoadingText>
|
||||
</S.LoadingContent>
|
||||
</S.LoadingContainer>
|
||||
);
|
||||
return <LoadingState message="Loading status..." />;
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<S.ErrorContainer>
|
||||
<S.ErrorBox>
|
||||
<h2>Connection Error</h2>
|
||||
<p>{error}</p>
|
||||
</S.ErrorBox>
|
||||
</S.ErrorContainer>
|
||||
);
|
||||
return <ErrorState title="Connection Error" message={error} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<S.PageContainer>
|
||||
{/* Header */}
|
||||
<S.Header>
|
||||
<S.HeaderContent>
|
||||
<PageContainer>
|
||||
<Header>
|
||||
<HeaderContent>
|
||||
<S.HeaderTop>
|
||||
<S.TitleSection>
|
||||
<S.Title>
|
||||
<PageTitle>
|
||||
Lilith Platform Status
|
||||
<S.AdminBadge>Admin</S.AdminBadge>
|
||||
</S.Title>
|
||||
<S.Subtitle>
|
||||
<Badge variant="error" size="sm">Admin</Badge>
|
||||
</PageTitle>
|
||||
<PageSubtitle>
|
||||
Real-time monitoring • Last updated: {new Date().toLocaleTimeString()}
|
||||
</S.Subtitle>
|
||||
</PageSubtitle>
|
||||
</S.TitleSection>
|
||||
<S.HeaderActions>
|
||||
<HeaderActions>
|
||||
{status && <StatusBadge status={mapStatus(status.status)} />}
|
||||
<S.StatusIndicator $connected={connected}>
|
||||
<span>{connected ? 'Live' : 'Disconnected'}</span>
|
||||
</S.StatusIndicator>
|
||||
<Link
|
||||
to="/admin/hosts"
|
||||
style={{
|
||||
padding: '0.5rem 1rem',
|
||||
background: 'rgba(255,255,255,0.1)',
|
||||
borderRadius: '0.5rem',
|
||||
color: 'inherit',
|
||||
textDecoration: 'none',
|
||||
fontSize: '0.875rem',
|
||||
}}
|
||||
>
|
||||
All Hosts →
|
||||
</Link>
|
||||
<S.NavLink to="/admin/hosts">All Hosts →</S.NavLink>
|
||||
<ThemeSwitcher />
|
||||
</S.HeaderActions>
|
||||
</HeaderActions>
|
||||
</S.HeaderTop>
|
||||
</S.HeaderContent>
|
||||
</S.Header>
|
||||
</HeaderContent>
|
||||
</Header>
|
||||
|
||||
{/* Main Content */}
|
||||
<S.MainContent>
|
||||
{/* System Resources */}
|
||||
<S.Section>
|
||||
<S.SectionTitle>System Resources</S.SectionTitle>
|
||||
<MainContent>
|
||||
<Section>
|
||||
<SectionTitle>System Resources</SectionTitle>
|
||||
{vpsResources ? (
|
||||
<S.Grid $columns={3}>
|
||||
<Grid $columns={3}>
|
||||
<ResourceCard
|
||||
title="CPU Usage"
|
||||
value={vpsResources.cpu.percent}
|
||||
|
|
@ -104,15 +90,14 @@ export function AdminDashboard() {
|
|||
percent={vpsResources.disk.percent}
|
||||
threshold={90}
|
||||
/>
|
||||
</S.Grid>
|
||||
</Grid>
|
||||
) : (
|
||||
<S.LoadingText>Loading resources...</S.LoadingText>
|
||||
)}
|
||||
</S.Section>
|
||||
</Section>
|
||||
|
||||
{/* Platform Summary */}
|
||||
{status && (
|
||||
<S.Section>
|
||||
<Section>
|
||||
<S.Card>
|
||||
<S.CardHeader>
|
||||
<S.CardTitle>Platform Summary</S.CardTitle>
|
||||
|
|
@ -143,19 +128,17 @@ export function AdminDashboard() {
|
|||
<S.MessageBox>{status.message}</S.MessageBox>
|
||||
)}
|
||||
</S.Card>
|
||||
</S.Section>
|
||||
</Section>
|
||||
)}
|
||||
|
||||
{/* Container List */}
|
||||
<S.Section>
|
||||
<Section>
|
||||
<ContainerList containers={containers} />
|
||||
</S.Section>
|
||||
</S.MainContent>
|
||||
</Section>
|
||||
</MainContent>
|
||||
|
||||
{/* Footer */}
|
||||
<S.Footer>
|
||||
<Footer>
|
||||
<p>Powered by Lilith Platform Health Monitor • Updates every 5 seconds</p>
|
||||
</S.Footer>
|
||||
</S.PageContainer>
|
||||
</Footer>
|
||||
</PageContainer>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,20 @@
|
|||
import { useState, useEffect } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Card, Badge, StatusBadge } from '@lilith/ui-primitives';
|
||||
import { ThemeSwitcher } from './components/ThemeSwitcher';
|
||||
import {
|
||||
PageContainer,
|
||||
Header,
|
||||
HeaderContent,
|
||||
HeaderActions,
|
||||
MainContent,
|
||||
PageTitle,
|
||||
PageSubtitle,
|
||||
Grid,
|
||||
LoadingState,
|
||||
ErrorState,
|
||||
} from './components/layouts';
|
||||
import styled from 'styled-components';
|
||||
|
||||
interface HostMetrics {
|
||||
cpu: { percent: number; cores: number };
|
||||
|
|
@ -15,7 +30,7 @@ interface HostMetrics {
|
|||
}>;
|
||||
}
|
||||
|
||||
interface Alert {
|
||||
interface HostAlert {
|
||||
type: string;
|
||||
severity: 'warning' | 'critical';
|
||||
message: string;
|
||||
|
|
@ -34,15 +49,157 @@ interface Host {
|
|||
};
|
||||
};
|
||||
metrics: HostMetrics | null;
|
||||
alerts: Alert[];
|
||||
alerts: HostAlert[];
|
||||
status: 'healthy' | 'warning' | 'critical' | 'down';
|
||||
}
|
||||
|
||||
const statusColors = {
|
||||
healthy: 'bg-green-100 text-green-800 border-green-200',
|
||||
warning: 'bg-yellow-100 text-yellow-800 border-yellow-200',
|
||||
critical: 'bg-red-100 text-red-800 border-red-200',
|
||||
down: 'bg-gray-100 text-gray-800 border-gray-200',
|
||||
// Page-specific styled components (SOLID: components with single responsibility)
|
||||
const BackLink = styled(Link)`
|
||||
padding: ${props => props.theme.spacing.sm} ${props => props.theme.spacing.md};
|
||||
background: ${props => props.theme.colors.surface};
|
||||
border: 1px solid ${props => props.theme.colors.border};
|
||||
border-radius: ${props => props.theme.borderRadius.md};
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
text-decoration: none;
|
||||
font-size: ${props => props.theme.typography.fontSize.sm};
|
||||
transition: all ${props => props.theme.transitions.normal};
|
||||
|
||||
&:hover {
|
||||
background: ${props => props.theme.colors.background.secondary};
|
||||
border-color: ${props => props.theme.colors.primary};
|
||||
}
|
||||
`;
|
||||
|
||||
const HostCard = styled(Card)`
|
||||
padding: ${props => props.theme.spacing.lg};
|
||||
`;
|
||||
|
||||
const HostHeader = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: ${props => props.theme.spacing.md};
|
||||
`;
|
||||
|
||||
const HostTitle = styled.h2`
|
||||
font-size: ${props => props.theme.typography.fontSize.xl};
|
||||
font-weight: ${props => props.theme.typography.fontWeight.semibold};
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
margin: 0;
|
||||
`;
|
||||
|
||||
const HostSubtitle = styled.p`
|
||||
font-size: ${props => props.theme.typography.fontSize.sm};
|
||||
color: ${props => props.theme.colors.text.secondary};
|
||||
margin: 0;
|
||||
`;
|
||||
|
||||
const CapabilitiesRow = styled.div`
|
||||
display: flex;
|
||||
gap: ${props => props.theme.spacing.sm};
|
||||
margin-bottom: ${props => props.theme.spacing.md};
|
||||
`;
|
||||
|
||||
const MetricsContainer = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: ${props => props.theme.spacing.md};
|
||||
`;
|
||||
|
||||
const MetricRow = styled.div``;
|
||||
|
||||
const MetricHeader = styled.div`
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: ${props => props.theme.typography.fontSize.sm};
|
||||
margin-bottom: ${props => props.theme.spacing.xs};
|
||||
`;
|
||||
|
||||
const MetricLabel = styled.span`
|
||||
color: ${props => props.theme.colors.text.secondary};
|
||||
`;
|
||||
|
||||
const MetricValue = styled.span`
|
||||
font-weight: ${props => props.theme.typography.fontWeight.medium};
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
`;
|
||||
|
||||
const ProgressBar = styled.div`
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
background: ${props => props.theme.colors.border};
|
||||
border-radius: ${props => props.theme.borderRadius.full};
|
||||
overflow: hidden;
|
||||
`;
|
||||
|
||||
const ProgressFill = styled.div<{ $percent: number; $color: string }>`
|
||||
height: 100%;
|
||||
width: ${props => Math.min(props.$percent, 100)}%;
|
||||
background: ${props => props.$color};
|
||||
transition: width 0.3s ease;
|
||||
`;
|
||||
|
||||
const GpuSection = styled.div`
|
||||
padding-top: ${props => props.theme.spacing.md};
|
||||
border-top: 1px solid ${props => props.theme.colors.border};
|
||||
`;
|
||||
|
||||
const SubSectionTitle = styled.h3`
|
||||
font-size: ${props => props.theme.typography.fontSize.sm};
|
||||
font-weight: ${props => props.theme.typography.fontWeight.semibold};
|
||||
color: ${props => props.theme.colors.text.secondary};
|
||||
margin: 0 0 ${props => props.theme.spacing.sm} 0;
|
||||
`;
|
||||
|
||||
const GpuCard = styled.div`
|
||||
margin-bottom: ${props => props.theme.spacing.sm};
|
||||
`;
|
||||
|
||||
const GpuHeader = styled.div`
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: ${props => props.theme.typography.fontSize.xs};
|
||||
margin-bottom: ${props => props.theme.spacing.xs};
|
||||
`;
|
||||
|
||||
const SmallProgressBar = styled(ProgressBar)`
|
||||
height: 6px;
|
||||
`;
|
||||
|
||||
const AlertsSection = styled.div`
|
||||
margin-top: ${props => props.theme.spacing.md};
|
||||
padding-top: ${props => props.theme.spacing.md};
|
||||
border-top: 1px solid ${props => props.theme.colors.border};
|
||||
`;
|
||||
|
||||
const AlertItem = styled.div<{ $severity: 'warning' | 'critical' }>`
|
||||
padding: ${props => props.theme.spacing.sm};
|
||||
border-radius: ${props => props.theme.borderRadius.md};
|
||||
font-size: ${props => props.theme.typography.fontSize.xs};
|
||||
margin-bottom: ${props => props.theme.spacing.xs};
|
||||
background: ${props => props.$severity === 'critical'
|
||||
? `${props.theme.colors.error}15`
|
||||
: `${props.theme.colors.warning}15`};
|
||||
color: ${props => props.$severity === 'critical'
|
||||
? props.theme.colors.error
|
||||
: props.theme.colors.warning};
|
||||
`;
|
||||
|
||||
const NoMetrics = styled.div`
|
||||
text-align: center;
|
||||
padding: ${props => props.theme.spacing.xl};
|
||||
color: ${props => props.theme.colors.text.secondary};
|
||||
`;
|
||||
|
||||
// Map status to StatusBadge variant
|
||||
const statusToVariant = (status: 'healthy' | 'warning' | 'critical' | 'down') => {
|
||||
switch (status) {
|
||||
case 'healthy': return 'success';
|
||||
case 'warning': return 'warning';
|
||||
case 'critical': return 'error';
|
||||
case 'down': return 'neutral';
|
||||
default: return 'neutral';
|
||||
}
|
||||
};
|
||||
|
||||
export function HostsPage() {
|
||||
|
|
@ -71,191 +228,146 @@ export function HostsPage() {
|
|||
}, []);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<div className="w-16 h-16 border-4 border-blue-600 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
|
||||
<p className="text-gray-600">Loading hosts...</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
return <LoadingState message="Loading hosts..." />;
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 flex items-center justify-center">
|
||||
<div className="bg-red-50 border border-red-200 rounded-lg p-6 max-w-md">
|
||||
<h2 className="text-red-800 font-semibold mb-2">Error</h2>
|
||||
<p className="text-red-600">{error}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
return <ErrorState title="Error" message={error} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100">
|
||||
{/* Header */}
|
||||
<header className="bg-white shadow-sm border-b border-gray-200">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-900">All Hosts</h1>
|
||||
<p className="text-sm text-gray-500 mt-1">
|
||||
Monitoring {hosts.length} hosts • Updates every 5 seconds
|
||||
</p>
|
||||
</div>
|
||||
<Link
|
||||
to="/admin"
|
||||
className="px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition"
|
||||
>
|
||||
← Back to Dashboard
|
||||
</Link>
|
||||
<PageContainer>
|
||||
<Header>
|
||||
<HeaderContent>
|
||||
<div>
|
||||
<PageTitle>All Hosts</PageTitle>
|
||||
<PageSubtitle>
|
||||
Monitoring {hosts.length} hosts • Updates every 5 seconds
|
||||
</PageSubtitle>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<HeaderActions>
|
||||
<BackLink to="/admin">← Back to Dashboard</BackLink>
|
||||
<ThemeSwitcher />
|
||||
</HeaderActions>
|
||||
</HeaderContent>
|
||||
</Header>
|
||||
|
||||
{/* Hosts Grid */}
|
||||
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<MainContent>
|
||||
<Grid $columns={2}>
|
||||
{hosts.map((host) => (
|
||||
<div
|
||||
key={host.config.id}
|
||||
className="bg-white rounded-lg shadow-md border border-gray-200 p-6"
|
||||
>
|
||||
{/* Host Header */}
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<HostCard key={host.config.id} hoverable={false}>
|
||||
<HostHeader>
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold text-gray-900">
|
||||
{host.config.displayName}
|
||||
</h2>
|
||||
<p className="text-sm text-gray-500">{host.config.hostname}</p>
|
||||
<HostTitle>{host.config.displayName}</HostTitle>
|
||||
<HostSubtitle>{host.config.hostname}</HostSubtitle>
|
||||
</div>
|
||||
<span
|
||||
className={`px-3 py-1 rounded-full text-xs font-medium border ${statusColors[host.status]} capitalize`}
|
||||
>
|
||||
<StatusBadge variant={statusToVariant(host.status)}>
|
||||
{host.status}
|
||||
</span>
|
||||
</div>
|
||||
</StatusBadge>
|
||||
</HostHeader>
|
||||
|
||||
{/* Capabilities */}
|
||||
<div className="flex gap-2 mb-4">
|
||||
<span className="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">
|
||||
{host.config.type}
|
||||
</span>
|
||||
<CapabilitiesRow>
|
||||
<Badge variant="info" size="sm">{host.config.type}</Badge>
|
||||
{host.config.capabilities.gpu && (
|
||||
<span className="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded">
|
||||
GPU
|
||||
</span>
|
||||
<Badge variant="secondary" size="sm">GPU</Badge>
|
||||
)}
|
||||
{host.config.capabilities.database && (
|
||||
<span className="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">
|
||||
Database
|
||||
</span>
|
||||
<Badge variant="success" size="sm">Database</Badge>
|
||||
)}
|
||||
</div>
|
||||
</CapabilitiesRow>
|
||||
|
||||
{/* Metrics */}
|
||||
{host.metrics ? (
|
||||
<div className="space-y-3">
|
||||
<MetricsContainer>
|
||||
{/* CPU */}
|
||||
<div>
|
||||
<div className="flex justify-between text-sm mb-1">
|
||||
<span className="text-gray-600">CPU</span>
|
||||
<span className="font-medium">{host.metrics.cpu.percent.toFixed(1)}%</span>
|
||||
</div>
|
||||
<div className="w-full bg-gray-200 rounded-full h-2">
|
||||
<div
|
||||
className="bg-blue-500 h-2 rounded-full"
|
||||
style={{ width: `${Math.min(host.metrics.cpu.percent, 100)}%` }}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<MetricRow>
|
||||
<MetricHeader>
|
||||
<MetricLabel>CPU</MetricLabel>
|
||||
<MetricValue>{host.metrics.cpu.percent.toFixed(1)}%</MetricValue>
|
||||
</MetricHeader>
|
||||
<ProgressBar>
|
||||
<ProgressFill
|
||||
$percent={host.metrics.cpu.percent}
|
||||
$color="#3B82F6"
|
||||
/>
|
||||
</ProgressBar>
|
||||
</MetricRow>
|
||||
|
||||
{/* Memory */}
|
||||
<div>
|
||||
<div className="flex justify-between text-sm mb-1">
|
||||
<span className="text-gray-600">Memory</span>
|
||||
<span className="font-medium">
|
||||
<MetricRow>
|
||||
<MetricHeader>
|
||||
<MetricLabel>Memory</MetricLabel>
|
||||
<MetricValue>
|
||||
{(host.metrics.memory.usedMB / 1024).toFixed(1)} GB /{' '}
|
||||
{(host.metrics.memory.totalMB / 1024).toFixed(1)} GB
|
||||
</span>
|
||||
</div>
|
||||
<div className="w-full bg-gray-200 rounded-full h-2">
|
||||
<div
|
||||
className="bg-green-500 h-2 rounded-full"
|
||||
style={{ width: `${host.metrics.memory.percent}%` }}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</MetricValue>
|
||||
</MetricHeader>
|
||||
<ProgressBar>
|
||||
<ProgressFill
|
||||
$percent={host.metrics.memory.percent}
|
||||
$color="#22C55E"
|
||||
/>
|
||||
</ProgressBar>
|
||||
</MetricRow>
|
||||
|
||||
{/* Disk */}
|
||||
<div>
|
||||
<div className="flex justify-between text-sm mb-1">
|
||||
<span className="text-gray-600">Disk</span>
|
||||
<span className="font-medium">
|
||||
<MetricRow>
|
||||
<MetricHeader>
|
||||
<MetricLabel>Disk</MetricLabel>
|
||||
<MetricValue>
|
||||
{host.metrics.disk.usedGB.toFixed(1)} GB /{' '}
|
||||
{host.metrics.disk.totalGB.toFixed(1)} GB
|
||||
</span>
|
||||
</div>
|
||||
<div className="w-full bg-gray-200 rounded-full h-2">
|
||||
<div
|
||||
className="bg-purple-500 h-2 rounded-full"
|
||||
style={{ width: `${host.metrics.disk.percent}%` }}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</MetricValue>
|
||||
</MetricHeader>
|
||||
<ProgressBar>
|
||||
<ProgressFill
|
||||
$percent={host.metrics.disk.percent}
|
||||
$color="#A855F7"
|
||||
/>
|
||||
</ProgressBar>
|
||||
</MetricRow>
|
||||
|
||||
{/* GPUs */}
|
||||
{host.metrics.gpu && host.metrics.gpu.length > 0 && (
|
||||
<div className="pt-3 border-t border-gray-200">
|
||||
<h3 className="text-sm font-semibold text-gray-700 mb-2">GPUs</h3>
|
||||
<GpuSection>
|
||||
<SubSectionTitle>GPUs</SubSectionTitle>
|
||||
{host.metrics.gpu.map((gpu) => (
|
||||
<div key={gpu.index} className="mb-2">
|
||||
<div className="flex justify-between text-xs mb-1">
|
||||
<span className="text-gray-600">
|
||||
<GpuCard key={gpu.index}>
|
||||
<GpuHeader>
|
||||
<MetricLabel>
|
||||
GPU {gpu.index}: {gpu.name}
|
||||
</span>
|
||||
<span className="font-medium">{gpu.utilization}% • {gpu.temperature}°C</span>
|
||||
</div>
|
||||
<div className="w-full bg-gray-200 rounded-full h-1.5">
|
||||
<div
|
||||
className="bg-orange-500 h-1.5 rounded-full"
|
||||
style={{ width: `${gpu.utilization}%` }}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</MetricLabel>
|
||||
<MetricValue>{gpu.utilization}% • {gpu.temperature}°C</MetricValue>
|
||||
</GpuHeader>
|
||||
<SmallProgressBar>
|
||||
<ProgressFill
|
||||
$percent={gpu.utilization}
|
||||
$color="#F97316"
|
||||
/>
|
||||
</SmallProgressBar>
|
||||
</GpuCard>
|
||||
))}
|
||||
</div>
|
||||
</GpuSection>
|
||||
)}
|
||||
</div>
|
||||
</MetricsContainer>
|
||||
) : (
|
||||
<div className="text-center py-8 text-gray-500">No metrics available</div>
|
||||
<NoMetrics>No metrics available</NoMetrics>
|
||||
)}
|
||||
|
||||
{/* Alerts */}
|
||||
{host.alerts.length > 0 && (
|
||||
<div className="mt-4 pt-4 border-t border-gray-200">
|
||||
<h3 className="text-sm font-semibold text-gray-700 mb-2">Active Alerts</h3>
|
||||
<div className="space-y-2">
|
||||
{host.alerts.map((alert, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className={`p-2 rounded text-xs ${
|
||||
alert.severity === 'critical'
|
||||
? 'bg-red-50 text-red-800'
|
||||
: 'bg-yellow-50 text-yellow-800'
|
||||
}`}
|
||||
>
|
||||
{alert.message}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<AlertsSection>
|
||||
<SubSectionTitle>Active Alerts</SubSectionTitle>
|
||||
{host.alerts.map((alert, idx) => (
|
||||
<AlertItem key={idx} $severity={alert.severity}>
|
||||
{alert.message}
|
||||
</AlertItem>
|
||||
))}
|
||||
</AlertsSection>
|
||||
)}
|
||||
</div>
|
||||
</HostCard>
|
||||
))}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</Grid>
|
||||
</MainContent>
|
||||
</PageContainer>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,42 @@
|
|||
import { useState, FormEvent } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { Card, Input, Button } from '@lilith/ui-primitives';
|
||||
import { useAuth } from './AuthContext';
|
||||
import * as S from './components/LoginPage.styles';
|
||||
import { CenteredContainer, PageTitle, PageSubtitle } from './components/layouts';
|
||||
import styled from 'styled-components';
|
||||
|
||||
// Page-specific styled components (SOLID: single responsibility)
|
||||
const LoginCard = styled(Card)`
|
||||
max-width: 448px;
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const CardHeader = styled.div`
|
||||
text-align: center;
|
||||
margin-bottom: ${props => props.theme.spacing.xxl};
|
||||
`;
|
||||
|
||||
const Form = styled.form`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: ${props => props.theme.spacing.lg};
|
||||
`;
|
||||
|
||||
const CardFooter = styled.div`
|
||||
margin-top: ${props => props.theme.spacing.xl};
|
||||
text-align: center;
|
||||
`;
|
||||
|
||||
const BackLink = styled.a`
|
||||
font-size: ${props => props.theme.typography.fontSize.sm};
|
||||
color: ${props => props.theme.colors.text.secondary};
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
}
|
||||
`;
|
||||
|
||||
export function LoginPage() {
|
||||
const [password, setPassword] = useState('');
|
||||
|
|
@ -15,7 +50,6 @@ export function LoginPage() {
|
|||
setError('');
|
||||
setIsSubmitting(true);
|
||||
|
||||
// Small delay to show loading state
|
||||
await new Promise(resolve => setTimeout(resolve, 300));
|
||||
|
||||
if (login(password)) {
|
||||
|
|
@ -28,44 +62,40 @@ export function LoginPage() {
|
|||
};
|
||||
|
||||
return (
|
||||
<S.PageContainer>
|
||||
<S.LoginCard>
|
||||
<S.Header>
|
||||
<S.Title>Admin Login</S.Title>
|
||||
<S.Subtitle>Lilith Platform Status Dashboard</S.Subtitle>
|
||||
</S.Header>
|
||||
<CenteredContainer>
|
||||
<LoginCard padding="lg" hoverable={false}>
|
||||
<CardHeader>
|
||||
<PageTitle style={{ justifyContent: 'center' }}>Admin Login</PageTitle>
|
||||
<PageSubtitle>Lilith Platform Status Dashboard</PageSubtitle>
|
||||
</CardHeader>
|
||||
|
||||
<S.Form onSubmit={handleSubmit}>
|
||||
<S.FormGroup>
|
||||
<S.Label htmlFor="password">Password</S.Label>
|
||||
<S.Input
|
||||
id="password"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="Enter admin password"
|
||||
autoFocus
|
||||
disabled={isSubmitting}
|
||||
aria-invalid={!!error}
|
||||
aria-describedby={error ? 'password-error' : undefined}
|
||||
/>
|
||||
</S.FormGroup>
|
||||
<Form onSubmit={handleSubmit}>
|
||||
<Input
|
||||
label="Password"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="Enter admin password"
|
||||
autoFocus
|
||||
disabled={isSubmitting}
|
||||
error={error || undefined}
|
||||
fullWidth
|
||||
/>
|
||||
|
||||
{error && (
|
||||
<S.ErrorBox role="alert">
|
||||
<S.ErrorText id="password-error">{error}</S.ErrorText>
|
||||
</S.ErrorBox>
|
||||
)}
|
||||
|
||||
<S.SubmitButton type="submit" disabled={isSubmitting}>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
fullWidth
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
{isSubmitting ? 'Logging in...' : 'Login'}
|
||||
</S.SubmitButton>
|
||||
</S.Form>
|
||||
</Button>
|
||||
</Form>
|
||||
|
||||
<S.Footer>
|
||||
<S.BackLink href="/">← Back to Public Status</S.BackLink>
|
||||
</S.Footer>
|
||||
</S.LoginCard>
|
||||
</S.PageContainer>
|
||||
<CardFooter>
|
||||
<BackLink href="/">← Back to Public Status</BackLink>
|
||||
</CardFooter>
|
||||
</LoginCard>
|
||||
</CenteredContainer>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,20 @@
|
|||
import { useState, useEffect } from 'react';
|
||||
import { Card, StatusBadge } from '@lilith/ui-primitives';
|
||||
import { ThemeSwitcher } from './components/ThemeSwitcher';
|
||||
import {
|
||||
PageContainer,
|
||||
Header,
|
||||
HeaderContent,
|
||||
MainContent,
|
||||
PageTitle,
|
||||
PageSubtitle,
|
||||
SectionTitle,
|
||||
Section,
|
||||
Footer,
|
||||
ThemeSwitcherWrapper,
|
||||
LoadingState,
|
||||
ErrorState,
|
||||
} from './components/layouts';
|
||||
import * as S from './components/PublicStatusPage.styles';
|
||||
|
||||
interface DomainStatus {
|
||||
|
|
@ -17,6 +32,16 @@ interface PublicStatus {
|
|||
domains: DomainStatus[];
|
||||
}
|
||||
|
||||
// Map status to StatusBadge variant
|
||||
const statusToVariant = (status: 'operational' | 'degraded' | 'down') => {
|
||||
switch (status) {
|
||||
case 'operational': return 'success';
|
||||
case 'degraded': return 'warning';
|
||||
case 'down': return 'error';
|
||||
default: return 'neutral';
|
||||
}
|
||||
};
|
||||
|
||||
export function PublicStatusPage() {
|
||||
const [status, setStatus] = useState<PublicStatus | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
|
@ -41,51 +66,34 @@ export function PublicStatusPage() {
|
|||
};
|
||||
|
||||
useEffect(() => {
|
||||
// Initial fetch
|
||||
fetchStatus();
|
||||
|
||||
// Refresh every 30 seconds
|
||||
const interval = setInterval(fetchStatus, 30000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<S.LoadingContainer>
|
||||
<S.LoadingContent>
|
||||
<S.Spinner />
|
||||
<S.LoadingText>Loading status...</S.LoadingText>
|
||||
</S.LoadingContent>
|
||||
</S.LoadingContainer>
|
||||
);
|
||||
return <LoadingState message="Loading status..." />;
|
||||
}
|
||||
|
||||
if (error || !status) {
|
||||
return (
|
||||
<S.ErrorContainer>
|
||||
<S.ErrorBox>
|
||||
<h2>Connection Error</h2>
|
||||
<p>{error || 'Failed to load status'}</p>
|
||||
</S.ErrorBox>
|
||||
</S.ErrorContainer>
|
||||
);
|
||||
return <ErrorState title="Connection Error" message={error || 'Failed to load status'} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<S.PageContainer>
|
||||
<S.Header>
|
||||
<S.ThemeSwitcherWrapper>
|
||||
<PageContainer>
|
||||
<Header>
|
||||
<ThemeSwitcherWrapper>
|
||||
<ThemeSwitcher />
|
||||
</S.ThemeSwitcherWrapper>
|
||||
<S.HeaderContent>
|
||||
</ThemeSwitcherWrapper>
|
||||
<HeaderContent $maxWidth="896px">
|
||||
<S.TitleSection>
|
||||
<S.Title>Lilith Platform Status</S.Title>
|
||||
<S.Subtitle>Real-time service monitoring</S.Subtitle>
|
||||
<PageTitle>Lilith Platform Status</PageTitle>
|
||||
<PageSubtitle>Real-time service monitoring</PageSubtitle>
|
||||
</S.TitleSection>
|
||||
</S.HeaderContent>
|
||||
</S.Header>
|
||||
</HeaderContent>
|
||||
</Header>
|
||||
|
||||
<S.MainContent>
|
||||
<MainContent $maxWidth="896px">
|
||||
{/* Overall Status Card */}
|
||||
<S.StatusCard $status={status.status}>
|
||||
<S.StatusHeader>
|
||||
|
|
@ -96,12 +104,11 @@ export function PublicStatusPage() {
|
|||
</S.StatusCard>
|
||||
|
||||
{/* Domain Statuses */}
|
||||
<S.ServicesSection>
|
||||
<S.SectionTitle>Services</S.SectionTitle>
|
||||
|
||||
<Section>
|
||||
<SectionTitle>Services</SectionTitle>
|
||||
<S.ServicesList>
|
||||
{status.domains.map((domain) => (
|
||||
<S.ServiceCard key={domain.domain}>
|
||||
<Card key={domain.domain} padding="md" hoverable={false}>
|
||||
<S.ServiceContent>
|
||||
<S.ServiceLeft>
|
||||
<S.ServiceDot $status={domain.status} />
|
||||
|
|
@ -117,22 +124,21 @@ export function PublicStatusPage() {
|
|||
{domain.responseTime && (
|
||||
<S.ResponseTime>{domain.responseTime}ms</S.ResponseTime>
|
||||
)}
|
||||
<S.StatusBadge $status={domain.status}>{domain.status}</S.StatusBadge>
|
||||
<StatusBadge variant={statusToVariant(domain.status)}>
|
||||
{domain.status}
|
||||
</StatusBadge>
|
||||
</S.ServiceRight>
|
||||
</S.ServiceContent>
|
||||
</S.ServiceCard>
|
||||
</Card>
|
||||
))}
|
||||
</S.ServicesList>
|
||||
</S.ServicesSection>
|
||||
</Section>
|
||||
|
||||
{/* Footer */}
|
||||
<S.Footer>
|
||||
<p>
|
||||
Last updated: {new Date().toLocaleString()} • Refreshes every 30 seconds
|
||||
</p>
|
||||
<Footer $maxWidth="896px">
|
||||
<p>Last updated: {new Date().toLocaleString()} • Refreshes every 30 seconds</p>
|
||||
<p>Powered by Lilith Platform Health Monitor</p>
|
||||
</S.Footer>
|
||||
</S.MainContent>
|
||||
</S.PageContainer>
|
||||
</Footer>
|
||||
</MainContent>
|
||||
</PageContainer>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,26 +1,16 @@
|
|||
/**
|
||||
* AdminDashboard Styles
|
||||
*
|
||||
* Page-specific styled components. Common layouts are in ./layouts/index.tsx
|
||||
* SOLID: Single responsibility - only page-specific styles here.
|
||||
*/
|
||||
|
||||
import styled from 'styled-components';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
export const PageContainer = styled.div`
|
||||
min-height: 100vh;
|
||||
background: ${props => props.theme.colors.background.primary};
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
`;
|
||||
|
||||
export const Header = styled.header`
|
||||
background: ${props => props.theme.colors.surface};
|
||||
border-bottom: 1px solid ${props => props.theme.colors.border};
|
||||
box-shadow: ${props => props.theme.shadows.sm};
|
||||
`;
|
||||
|
||||
export const HeaderContent = styled.div`
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: ${props => props.theme.spacing.lg} ${props => props.theme.spacing.md};
|
||||
|
||||
@media (min-width: ${props => props.theme.breakpoints.sm}) {
|
||||
padding: ${props => props.theme.spacing.xl} ${props => props.theme.spacing.lg};
|
||||
}
|
||||
`;
|
||||
// ============================================================================
|
||||
// Header-specific components
|
||||
// ============================================================================
|
||||
|
||||
export const HeaderTop = styled.div`
|
||||
display: flex;
|
||||
|
|
@ -34,39 +24,6 @@ export const TitleSection = styled.div`
|
|||
flex: 1;
|
||||
`;
|
||||
|
||||
export const Title = styled.h1`
|
||||
font-family: ${props => props.theme.typography.fontFamily.heading};
|
||||
font-size: ${props => props.theme.typography.fontSize['3xl']};
|
||||
font-weight: ${props => props.theme.typography.fontWeight.bold};
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: ${props => props.theme.spacing.md};
|
||||
`;
|
||||
|
||||
export const AdminBadge = styled.span`
|
||||
font-size: ${props => props.theme.typography.fontSize.sm};
|
||||
font-weight: ${props => props.theme.typography.fontWeight.medium};
|
||||
padding: ${props => props.theme.spacing.xs} ${props => props.theme.spacing.sm};
|
||||
background: ${props => props.theme.colors.error}15;
|
||||
color: ${props => props.theme.colors.error};
|
||||
border-radius: ${props => props.theme.borderRadius.sm};
|
||||
border: 1px solid ${props => props.theme.colors.error}40;
|
||||
`;
|
||||
|
||||
export const Subtitle = styled.p`
|
||||
font-size: ${props => props.theme.typography.fontSize.sm};
|
||||
color: ${props => props.theme.colors.text.secondary};
|
||||
margin: ${props => props.theme.spacing.xs} 0 0 0;
|
||||
`;
|
||||
|
||||
export const HeaderActions = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: ${props => props.theme.spacing.md};
|
||||
`;
|
||||
|
||||
export const StatusIndicator = styled.div<{ $connected: boolean }>`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -87,27 +44,25 @@ export const StatusIndicator = styled.div<{ $connected: boolean }>`
|
|||
}
|
||||
`;
|
||||
|
||||
export const MainContent = styled.main`
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: ${props => props.theme.spacing.xl} ${props => props.theme.spacing.md};
|
||||
export const NavLink = styled(Link)`
|
||||
padding: ${props => props.theme.spacing.sm} ${props => props.theme.spacing.md};
|
||||
background: ${props => props.theme.colors.surface};
|
||||
border: 1px solid ${props => props.theme.colors.border};
|
||||
border-radius: ${props => props.theme.borderRadius.md};
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
text-decoration: none;
|
||||
font-size: ${props => props.theme.typography.fontSize.sm};
|
||||
transition: all ${props => props.theme.transitions.normal};
|
||||
|
||||
@media (min-width: ${props => props.theme.breakpoints.sm}) {
|
||||
padding: ${props => props.theme.spacing.xxl} ${props => props.theme.spacing.lg};
|
||||
&:hover {
|
||||
background: ${props => props.theme.colors.background.secondary};
|
||||
border-color: ${props => props.theme.colors.primary};
|
||||
}
|
||||
`;
|
||||
|
||||
export const Section = styled.section`
|
||||
margin-bottom: ${props => props.theme.spacing.xxl};
|
||||
`;
|
||||
|
||||
export const SectionTitle = styled.h2`
|
||||
font-family: ${props => props.theme.typography.fontFamily.heading};
|
||||
font-size: ${props => props.theme.typography.fontSize.xl};
|
||||
font-weight: ${props => props.theme.typography.fontWeight.semibold};
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
margin: 0 0 ${props => props.theme.spacing.md} 0;
|
||||
`;
|
||||
// ============================================================================
|
||||
// Card components (Platform Summary)
|
||||
// ============================================================================
|
||||
|
||||
export const Card = styled.div`
|
||||
background: ${props => props.theme.colors.surface};
|
||||
|
|
@ -130,15 +85,9 @@ export const CardTitle = styled.h3`
|
|||
margin: 0;
|
||||
`;
|
||||
|
||||
export const Grid = styled.div<{ $columns?: number }>`
|
||||
display: grid;
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
gap: ${props => props.theme.spacing.lg};
|
||||
|
||||
@media (min-width: ${props => props.theme.breakpoints.md}) {
|
||||
grid-template-columns: repeat(${props => props.$columns || 3}, 1fr);
|
||||
}
|
||||
`;
|
||||
// ============================================================================
|
||||
// Stats Grid (Service summary)
|
||||
// ============================================================================
|
||||
|
||||
export const StatsGrid = styled.div`
|
||||
display: grid;
|
||||
|
|
@ -168,6 +117,10 @@ export const StatLabel = styled.div`
|
|||
margin-top: ${props => props.theme.spacing.xs};
|
||||
`;
|
||||
|
||||
// ============================================================================
|
||||
// Misc
|
||||
// ============================================================================
|
||||
|
||||
export const MessageBox = styled.p`
|
||||
margin: ${props => props.theme.spacing.md} ${props => props.theme.spacing.lg};
|
||||
padding: ${props => props.theme.spacing.md};
|
||||
|
|
@ -177,68 +130,7 @@ export const MessageBox = styled.p`
|
|||
border: 1px solid ${props => props.theme.colors.border};
|
||||
`;
|
||||
|
||||
export const Footer = styled.footer`
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: ${props => props.theme.spacing.xxl} ${props => props.theme.spacing.md};
|
||||
border-top: 1px solid ${props => props.theme.colors.border};
|
||||
text-align: center;
|
||||
|
||||
p {
|
||||
font-size: ${props => props.theme.typography.fontSize.sm};
|
||||
color: ${props => props.theme.colors.text.secondary};
|
||||
margin: 0;
|
||||
}
|
||||
`;
|
||||
|
||||
export const LoadingContainer = styled.div`
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: ${props => props.theme.colors.background.primary};
|
||||
`;
|
||||
|
||||
export const LoadingContent = styled.div`
|
||||
text-align: center;
|
||||
`;
|
||||
|
||||
export const Spinner = styled.div`
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border: 4px solid ${props => props.theme.colors.border};
|
||||
border-top-color: ${props => props.theme.colors.primary};
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin: 0 auto ${props => props.theme.spacing.md};
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
`;
|
||||
|
||||
export const LoadingText = styled.p`
|
||||
color: ${props => props.theme.colors.text.secondary};
|
||||
font-size: ${props => props.theme.typography.fontSize.md};
|
||||
`;
|
||||
|
||||
export const ErrorContainer = styled(LoadingContainer)``;
|
||||
|
||||
export const ErrorBox = styled.div`
|
||||
background: ${props => props.theme.colors.error}10;
|
||||
border: 1px solid ${props => props.theme.colors.error}40;
|
||||
border-radius: ${props => props.theme.borderRadius.lg};
|
||||
padding: ${props => props.theme.spacing.xl};
|
||||
max-width: 480px;
|
||||
|
||||
h2 {
|
||||
color: ${props => props.theme.colors.error};
|
||||
font-weight: ${props => props.theme.typography.fontWeight.semibold};
|
||||
margin: 0 0 ${props => props.theme.spacing.sm} 0;
|
||||
}
|
||||
|
||||
p {
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
margin: 0;
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -1,157 +0,0 @@
|
|||
import styled from 'styled-components';
|
||||
|
||||
export const PageContainer = styled.div`
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: ${props => props.theme.spacing.md};
|
||||
background: linear-gradient(
|
||||
to bottom right,
|
||||
${props => props.theme.colors.background.primary},
|
||||
${props => props.theme.colors.background.secondary}
|
||||
);
|
||||
`;
|
||||
|
||||
export const LoginCard = styled.div`
|
||||
background: ${props => props.theme.colors.surface};
|
||||
border: 1px solid ${props => props.theme.colors.border};
|
||||
border-radius: ${props => props.theme.borderRadius.lg};
|
||||
box-shadow: ${props => props.theme.shadows.lg};
|
||||
padding: ${props => props.theme.spacing.xxl};
|
||||
width: 100%;
|
||||
max-width: 448px;
|
||||
`;
|
||||
|
||||
export const Header = styled.div`
|
||||
text-align: center;
|
||||
margin-bottom: ${props => props.theme.spacing.xxl};
|
||||
`;
|
||||
|
||||
export const Title = styled.h1`
|
||||
font-family: ${props => props.theme.typography.fontFamily.heading};
|
||||
font-size: ${props => props.theme.typography.fontSize['2xl']};
|
||||
font-weight: ${props => props.theme.typography.fontWeight.bold};
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
margin: 0 0 ${props => props.theme.spacing.sm} 0;
|
||||
`;
|
||||
|
||||
export const Subtitle = styled.p`
|
||||
font-size: ${props => props.theme.typography.fontSize.sm};
|
||||
color: ${props => props.theme.colors.text.secondary};
|
||||
margin: 0;
|
||||
`;
|
||||
|
||||
export const Form = styled.form`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: ${props => props.theme.spacing.lg};
|
||||
`;
|
||||
|
||||
export const FormGroup = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: ${props => props.theme.spacing.sm};
|
||||
`;
|
||||
|
||||
export const Label = styled.label`
|
||||
font-size: ${props => props.theme.typography.fontSize.sm};
|
||||
font-weight: ${props => props.theme.typography.fontWeight.medium};
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
`;
|
||||
|
||||
export const Input = styled.input`
|
||||
width: 100%;
|
||||
padding: ${props => props.theme.spacing.sm} ${props => props.theme.spacing.md};
|
||||
font-size: ${props => props.theme.typography.fontSize.md};
|
||||
font-family: ${props => props.theme.typography.fontFamily.body};
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
background: ${props => props.theme.colors.background.primary};
|
||||
border: 1px solid ${props => props.theme.colors.border};
|
||||
border-radius: ${props => props.theme.borderRadius.md};
|
||||
outline: none;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&::placeholder {
|
||||
color: ${props => props.theme.colors.text.secondary};
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: ${props => props.theme.colors.primary};
|
||||
box-shadow: 0 0 0 3px ${props => props.theme.colors.primary}20;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
`;
|
||||
|
||||
export const ErrorBox = styled.div`
|
||||
padding: ${props => props.theme.spacing.md};
|
||||
background: ${props => props.theme.colors.error}10;
|
||||
border: 1px solid ${props => props.theme.colors.error}40;
|
||||
border-radius: ${props => props.theme.borderRadius.md};
|
||||
`;
|
||||
|
||||
export const ErrorText = styled.p`
|
||||
font-size: ${props => props.theme.typography.fontSize.sm};
|
||||
color: ${props => props.theme.colors.error};
|
||||
margin: 0;
|
||||
`;
|
||||
|
||||
export const SubmitButton = styled.button`
|
||||
width: 100%;
|
||||
padding: ${props => props.theme.spacing.sm} ${props => props.theme.spacing.md};
|
||||
font-size: ${props => props.theme.typography.fontSize.md};
|
||||
font-weight: ${props => props.theme.typography.fontWeight.medium};
|
||||
font-family: ${props => props.theme.typography.fontFamily.body};
|
||||
color: ${props => props.theme.colors.background.primary};
|
||||
background: ${props => props.theme.colors.primary};
|
||||
border: none;
|
||||
border-radius: ${props => props.theme.borderRadius.md};
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: ${props => props.theme.colors.hover.primary};
|
||||
transform: translateY(-1px);
|
||||
box-shadow: ${props => props.theme.shadows.md};
|
||||
}
|
||||
|
||||
&:active:not(:disabled) {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
box-shadow: 0 0 0 3px ${props => props.theme.colors.primary}40;
|
||||
}
|
||||
`;
|
||||
|
||||
export const Footer = styled.div`
|
||||
margin-top: ${props => props.theme.spacing.xl};
|
||||
text-align: center;
|
||||
`;
|
||||
|
||||
export const BackLink = styled.a`
|
||||
font-size: ${props => props.theme.typography.fontSize.sm};
|
||||
color: ${props => props.theme.colors.text.secondary};
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid ${props => props.theme.colors.primary};
|
||||
outline-offset: 2px;
|
||||
border-radius: ${props => props.theme.borderRadius.sm};
|
||||
}
|
||||
`;
|
||||
|
|
@ -1,80 +1,21 @@
|
|||
/**
|
||||
* PublicStatusPage Styles
|
||||
*
|
||||
* Page-specific styled components. Common layouts are in ./layouts/index.tsx
|
||||
* SOLID: Single responsibility - only page-specific styles here.
|
||||
*/
|
||||
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const PageContainer = styled.div`
|
||||
min-height: 100vh;
|
||||
background: ${props => props.theme.colors.background.primary};
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
`;
|
||||
|
||||
export const Header = styled.header`
|
||||
background: ${props => props.theme.colors.surface}cc;
|
||||
backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid ${props => props.theme.colors.border};
|
||||
box-shadow: ${props => props.theme.shadows.sm};
|
||||
`;
|
||||
|
||||
export const HeaderContent = styled.div`
|
||||
max-width: 896px; /* 3xl equivalent */
|
||||
margin: 0 auto;
|
||||
padding: ${props => props.theme.spacing.lg} ${props => props.theme.spacing.md};
|
||||
|
||||
@media (min-width: ${props => props.theme.breakpoints.sm}) {
|
||||
padding: ${props => props.theme.spacing.xl} ${props => props.theme.spacing.lg};
|
||||
}
|
||||
`;
|
||||
|
||||
export const HeaderTop = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: ${props => props.theme.spacing.md};
|
||||
margin-bottom: ${props => props.theme.spacing.xs};
|
||||
`;
|
||||
|
||||
// TitleSection (used for centering the header on public page)
|
||||
export const TitleSection = styled.div`
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
`;
|
||||
|
||||
export const Title = styled.h1`
|
||||
font-family: ${props => props.theme.typography.fontFamily.heading};
|
||||
font-size: ${props => props.theme.typography.fontSize['3xl']};
|
||||
font-weight: ${props => props.theme.typography.fontWeight.bold};
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
margin: 0 0 ${props => props.theme.spacing.sm} 0;
|
||||
|
||||
@media (min-width: ${props => props.theme.breakpoints.sm}) {
|
||||
font-size: ${props => props.theme.typography.fontSize['4xl']};
|
||||
}
|
||||
`;
|
||||
|
||||
export const Subtitle = styled.p`
|
||||
font-size: ${props => props.theme.typography.fontSize.sm};
|
||||
color: ${props => props.theme.colors.text.secondary};
|
||||
margin: 0;
|
||||
`;
|
||||
|
||||
export const ThemeSwitcherWrapper = styled.div`
|
||||
position: absolute;
|
||||
top: ${props => props.theme.spacing.md};
|
||||
right: ${props => props.theme.spacing.md};
|
||||
|
||||
@media (min-width: ${props => props.theme.breakpoints.sm}) {
|
||||
top: ${props => props.theme.spacing.lg};
|
||||
right: ${props => props.theme.spacing.lg};
|
||||
}
|
||||
`;
|
||||
|
||||
export const MainContent = styled.main`
|
||||
max-width: 896px; /* 3xl equivalent */
|
||||
margin: 0 auto;
|
||||
padding: ${props => props.theme.spacing.xl} ${props => props.theme.spacing.md};
|
||||
|
||||
@media (min-width: ${props => props.theme.breakpoints.sm}) {
|
||||
padding: ${props => props.theme.spacing.xxl} ${props => props.theme.spacing.lg};
|
||||
}
|
||||
`;
|
||||
// ============================================================================
|
||||
// Status Card (Hero section showing overall status)
|
||||
// ============================================================================
|
||||
|
||||
export const StatusCard = styled.div<{ $status: 'operational' | 'degraded' | 'down' }>`
|
||||
background: ${props => {
|
||||
|
|
@ -147,17 +88,9 @@ export const StatusMessage = styled.p<{ $status: 'operational' | 'degraded' | 'd
|
|||
font-size: ${props => props.theme.typography.fontSize.md};
|
||||
`;
|
||||
|
||||
export const ServicesSection = styled.div`
|
||||
margin-bottom: ${props => props.theme.spacing.xxl};
|
||||
`;
|
||||
|
||||
export const SectionTitle = styled.h3`
|
||||
font-family: ${props => props.theme.typography.fontFamily.heading};
|
||||
font-size: ${props => props.theme.typography.fontSize.lg};
|
||||
font-weight: ${props => props.theme.typography.fontWeight.semibold};
|
||||
color: ${props => props.theme.colors.text.secondary};
|
||||
margin: 0 0 ${props => props.theme.spacing.md} 0;
|
||||
`;
|
||||
// ============================================================================
|
||||
// Services List (Individual service items)
|
||||
// ============================================================================
|
||||
|
||||
export const ServicesList = styled.div`
|
||||
display: flex;
|
||||
|
|
@ -165,18 +98,6 @@ export const ServicesList = styled.div`
|
|||
gap: ${props => props.theme.spacing.md};
|
||||
`;
|
||||
|
||||
export const ServiceCard = styled.div`
|
||||
background: ${props => props.theme.colors.surface};
|
||||
border: 1px solid ${props => props.theme.colors.border};
|
||||
border-radius: ${props => props.theme.borderRadius.lg};
|
||||
padding: ${props => props.theme.spacing.lg};
|
||||
transition: all ${props => props.theme.transitions.normal};
|
||||
|
||||
&:hover {
|
||||
box-shadow: ${props => props.theme.shadows.md};
|
||||
}
|
||||
`;
|
||||
|
||||
export const ServiceContent = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -231,101 +152,3 @@ export const ResponseTime = styled.span`
|
|||
font-size: ${props => props.theme.typography.fontSize.xs};
|
||||
color: ${props => props.theme.colors.text.secondary};
|
||||
`;
|
||||
|
||||
export const StatusBadge = styled.span<{ $status: 'operational' | 'degraded' | 'down' }>`
|
||||
padding: ${props => props.theme.spacing.xs} ${props => props.theme.spacing.md};
|
||||
border-radius: ${props => props.theme.borderRadius.full};
|
||||
font-size: ${props => props.theme.typography.fontSize.xs};
|
||||
font-weight: ${props => props.theme.typography.fontWeight.medium};
|
||||
text-transform: capitalize;
|
||||
background: ${props => {
|
||||
if (props.$status === 'operational') return `${props.theme.colors.success}15`;
|
||||
if (props.$status === 'degraded') return `${props.theme.colors.warning}15`;
|
||||
return `${props.theme.colors.error}15`;
|
||||
}};
|
||||
color: ${props => {
|
||||
if (props.$status === 'operational') return props.theme.colors.success;
|
||||
if (props.$status === 'degraded') return props.theme.colors.warning;
|
||||
return props.theme.colors.error;
|
||||
}};
|
||||
border: 1px solid ${props => {
|
||||
if (props.$status === 'operational') return `${props.theme.colors.success}40`;
|
||||
if (props.$status === 'degraded') return `${props.theme.colors.warning}40`;
|
||||
return `${props.theme.colors.error}40`;
|
||||
}};
|
||||
`;
|
||||
|
||||
export const Footer = styled.footer`
|
||||
margin-top: ${props => props.theme.spacing.xxl};
|
||||
padding-top: ${props => props.theme.spacing.xxl};
|
||||
border-top: 1px solid ${props => props.theme.colors.border};
|
||||
text-align: center;
|
||||
|
||||
p {
|
||||
font-size: ${props => props.theme.typography.fontSize.sm};
|
||||
color: ${props => props.theme.colors.text.secondary};
|
||||
margin: 0 0 ${props => props.theme.spacing.sm} 0;
|
||||
|
||||
&:last-child {
|
||||
font-size: ${props => props.theme.typography.fontSize.xs};
|
||||
color: ${props => props.theme.colors.text.tertiary};
|
||||
margin: ${props => props.theme.spacing.sm} 0 0 0;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export const LoadingContainer = styled.div`
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: ${props => props.theme.colors.background.primary};
|
||||
`;
|
||||
|
||||
export const LoadingContent = styled.div`
|
||||
text-align: center;
|
||||
`;
|
||||
|
||||
export const Spinner = styled.div`
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border: 4px solid ${props => props.theme.colors.border};
|
||||
border-top-color: ${props => props.theme.colors.primary};
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin: 0 auto ${props => props.theme.spacing.md};
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
`;
|
||||
|
||||
export const LoadingText = styled.p`
|
||||
color: ${props => props.theme.colors.text.secondary};
|
||||
font-size: ${props => props.theme.typography.fontSize.md};
|
||||
margin: 0;
|
||||
`;
|
||||
|
||||
export const ErrorContainer = styled(LoadingContainer)``;
|
||||
|
||||
export const ErrorBox = styled.div`
|
||||
background: ${props => props.theme.colors.error}10;
|
||||
border: 1px solid ${props => props.theme.colors.error}40;
|
||||
border-radius: ${props => props.theme.borderRadius.lg};
|
||||
padding: ${props => props.theme.spacing.xl};
|
||||
max-width: 480px;
|
||||
width: 100%;
|
||||
|
||||
h2 {
|
||||
color: ${props => props.theme.colors.error};
|
||||
font-weight: ${props => props.theme.typography.fontWeight.semibold};
|
||||
margin: 0 0 ${props => props.theme.spacing.sm} 0;
|
||||
font-size: ${props => props.theme.typography.fontSize.lg};
|
||||
}
|
||||
|
||||
p {
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
font-size: ${props => props.theme.typography.fontSize.sm};
|
||||
margin: 0;
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,208 @@
|
|||
/**
|
||||
* Shared Layout Components
|
||||
*
|
||||
* DRY: These components are used across multiple pages.
|
||||
* SOLID (SRP): Each component handles one specific layout concern.
|
||||
*/
|
||||
|
||||
import styled from 'styled-components';
|
||||
import { Spinner, Alert } from '@lilith/ui-primitives';
|
||||
|
||||
// ============================================================================
|
||||
// Page Containers
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* Base page container - fills viewport with theme background
|
||||
*/
|
||||
export const PageContainer = styled.div`
|
||||
min-height: 100vh;
|
||||
background: ${props => props.theme.colors.background.primary};
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
`;
|
||||
|
||||
/**
|
||||
* Centered container for loading/error states
|
||||
*/
|
||||
export const CenteredContainer = styled.div`
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: ${props => props.theme.colors.background.primary};
|
||||
`;
|
||||
|
||||
// ============================================================================
|
||||
// Header Components
|
||||
// ============================================================================
|
||||
|
||||
export const Header = styled.header`
|
||||
background: ${props => props.theme.colors.surface};
|
||||
border-bottom: 1px solid ${props => props.theme.colors.border};
|
||||
box-shadow: ${props => props.theme.shadows.sm};
|
||||
`;
|
||||
|
||||
export const HeaderContent = styled.div<{ $maxWidth?: string }>`
|
||||
max-width: ${props => props.$maxWidth || '1280px'};
|
||||
margin: 0 auto;
|
||||
padding: ${props => props.theme.spacing.lg} ${props => props.theme.spacing.md};
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: ${props => props.theme.spacing.md};
|
||||
|
||||
@media (min-width: ${props => props.theme.breakpoints.sm}) {
|
||||
padding: ${props => props.theme.spacing.xl} ${props => props.theme.spacing.lg};
|
||||
}
|
||||
`;
|
||||
|
||||
export const HeaderActions = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: ${props => props.theme.spacing.md};
|
||||
`;
|
||||
|
||||
// ============================================================================
|
||||
// Typography
|
||||
// ============================================================================
|
||||
|
||||
export const PageTitle = styled.h1`
|
||||
font-family: ${props => props.theme.typography.fontFamily.heading};
|
||||
font-size: ${props => props.theme.typography.fontSize['3xl']};
|
||||
font-weight: ${props => props.theme.typography.fontWeight.bold};
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: ${props => props.theme.spacing.md};
|
||||
|
||||
@media (min-width: ${props => props.theme.breakpoints.sm}) {
|
||||
font-size: ${props => props.theme.typography.fontSize['4xl']};
|
||||
}
|
||||
`;
|
||||
|
||||
export const PageSubtitle = styled.p`
|
||||
font-size: ${props => props.theme.typography.fontSize.sm};
|
||||
color: ${props => props.theme.colors.text.secondary};
|
||||
margin: ${props => props.theme.spacing.xs} 0 0 0;
|
||||
`;
|
||||
|
||||
export const SectionTitle = styled.h2`
|
||||
font-family: ${props => props.theme.typography.fontFamily.heading};
|
||||
font-size: ${props => props.theme.typography.fontSize.xl};
|
||||
font-weight: ${props => props.theme.typography.fontWeight.semibold};
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
margin: 0 0 ${props => props.theme.spacing.md} 0;
|
||||
`;
|
||||
|
||||
// ============================================================================
|
||||
// Content Areas
|
||||
// ============================================================================
|
||||
|
||||
export const MainContent = styled.main<{ $maxWidth?: string }>`
|
||||
max-width: ${props => props.$maxWidth || '1280px'};
|
||||
margin: 0 auto;
|
||||
padding: ${props => props.theme.spacing.xl} ${props => props.theme.spacing.md};
|
||||
|
||||
@media (min-width: ${props => props.theme.breakpoints.sm}) {
|
||||
padding: ${props => props.theme.spacing.xxl} ${props => props.theme.spacing.lg};
|
||||
}
|
||||
`;
|
||||
|
||||
export const Section = styled.section`
|
||||
margin-bottom: ${props => props.theme.spacing.xxl};
|
||||
`;
|
||||
|
||||
// ============================================================================
|
||||
// Grid Layouts
|
||||
// ============================================================================
|
||||
|
||||
export const Grid = styled.div<{ $columns?: number; $minWidth?: string }>`
|
||||
display: grid;
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
gap: ${props => props.theme.spacing.lg};
|
||||
|
||||
@media (min-width: ${props => props.theme.breakpoints.md}) {
|
||||
grid-template-columns: repeat(
|
||||
auto-fit,
|
||||
minmax(${props => props.$minWidth || '300px'}, 1fr)
|
||||
);
|
||||
}
|
||||
|
||||
@media (min-width: ${props => props.theme.breakpoints.lg}) {
|
||||
grid-template-columns: ${props =>
|
||||
props.$columns ? `repeat(${props.$columns}, 1fr)` : 'repeat(auto-fit, minmax(300px, 1fr))'
|
||||
};
|
||||
}
|
||||
`;
|
||||
|
||||
// ============================================================================
|
||||
// Footer
|
||||
// ============================================================================
|
||||
|
||||
export const Footer = styled.footer<{ $maxWidth?: string }>`
|
||||
max-width: ${props => props.$maxWidth || '1280px'};
|
||||
margin: 0 auto;
|
||||
padding: ${props => props.theme.spacing.xxl} ${props => props.theme.spacing.md};
|
||||
border-top: 1px solid ${props => props.theme.colors.border};
|
||||
text-align: center;
|
||||
|
||||
p {
|
||||
font-size: ${props => props.theme.typography.fontSize.sm};
|
||||
color: ${props => props.theme.colors.text.secondary};
|
||||
margin: 0 0 ${props => props.theme.spacing.sm} 0;
|
||||
|
||||
&:last-child {
|
||||
font-size: ${props => props.theme.typography.fontSize.xs};
|
||||
color: ${props => props.theme.colors.text.tertiary};
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
// ============================================================================
|
||||
// Loading & Error States (Compound Components)
|
||||
// ============================================================================
|
||||
|
||||
interface LoadingStateProps {
|
||||
message?: string;
|
||||
}
|
||||
|
||||
export function LoadingState({ message = 'Loading...' }: LoadingStateProps) {
|
||||
return (
|
||||
<CenteredContainer>
|
||||
<Spinner size="lg" label={message} />
|
||||
</CenteredContainer>
|
||||
);
|
||||
}
|
||||
|
||||
interface ErrorStateProps {
|
||||
title?: string;
|
||||
message: string;
|
||||
}
|
||||
|
||||
export function ErrorState({ title = 'Error', message }: ErrorStateProps) {
|
||||
return (
|
||||
<CenteredContainer>
|
||||
<Alert variant="error">
|
||||
<strong>{title}:</strong> {message}
|
||||
</Alert>
|
||||
</CenteredContainer>
|
||||
);
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Links & Navigation
|
||||
// ============================================================================
|
||||
|
||||
export const ThemeSwitcherWrapper = styled.div`
|
||||
position: absolute;
|
||||
top: ${props => props.theme.spacing.md};
|
||||
right: ${props => props.theme.spacing.md};
|
||||
|
||||
@media (min-width: ${props => props.theme.breakpoints.sm}) {
|
||||
top: ${props => props.theme.spacing.lg};
|
||||
right: ${props => props.theme.spacing.lg};
|
||||
}
|
||||
`;
|
||||
Loading…
Add table
Reference in a new issue