sam/dev_arc_aws
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Replace Infrastructure world map with a Node Status grid

Browse source 
A world map didn't fit a small-scale infra. Show servers as a tile grid
with colored status dots (healthy/warning/critical) instead.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BbJV5nm8KPVH1oNJYKpnoF
This commit is contained in:
Claude 2026-06-18 17:56:11 +00:00
parent d3bb51f621
commit 2f15baee38
No known key found for this signature in database
1 changed files with 42 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
src/pages/Infrastructure.tsx
View file

@ -1,6 +1,6 @@
import { useState } from 'react'
import { PieChart, Pie, Cell, ResponsiveContainer, LineChart, Line, XAxis } from 'recharts'
import { Plus, Server, Activity, AlertTriangle, DollarSign, Globe2 } from 'lucide-react'
import { Plus, Server, Activity, AlertTriangle, DollarSign } from 'lucide-react'
const subTabs = ['Overview']
@ -19,15 +19,27 @@ const costData = [
{ name: 'Network', value: 15, color: '#7A7D85' },
]
const regions = [
{ name: 'us-east-1', x: '22%', y: '38%', resources: 42 },
{ name: 'us-west-2', x: '12%', y: '42%', resources: 18 },
{ name: 'eu-west-1', x: '48%', y: '30%', resources: 31 },
{ name: 'ap-southeast-1', x: '78%', y: '58%', resources: 22 },
{ name: 'sa-east-1', x: '32%', y: '72%', resources: 9 },
{ name: 'ap-northeast-1', x: '85%', y: '40%', resources: 6 },
const nodes = [
{ name: 'web-frontend-lb', status: 'healthy' },
{ name: 'app-server-01', status: 'healthy' },
{ name: 'app-server-02', status: 'healthy' },
{ name: 'app-server-03', status: 'warning' },
{ name: 'db-primary-01', status: 'healthy' },
{ name: 'db-replica-02', status: 'healthy' },
{ name: 'cache-cluster-02', status: 'critical' },
{ name: 'batch-worker-04', status: 'healthy' },
{ name: 'storage-node-01', status: 'healthy' },
{ name: 'storage-node-02', status: 'healthy' },
{ name: 'monitoring-01', status: 'healthy' },
{ name: 'vpn-gateway', status: 'warning' },
]
const nodeStatusColor: Record<string, string> = {
healthy: '#2ECC71',
warning: '#E67E22',
critical: '#E74C3C',
}
const trendData = Array.from({ length: 14 }, (_, i) => ({
day: i,
compute: 60 + i * 0.6 + Math.sin(i / 2) * 3,
@ -219,17 +231,32 @@ export default function Infrastructure() {
</div>
</div>
{/* Infrastructure Map — expanded */}
{/* Node Status — expanded */}
<div style={framedCard('/blank-kpi-bg.png')}>
<div style={cardDim} />
<div style={cardVignette} />
<div className="relative z-10 flex flex-1 flex-col">
<h3 style={sectionTitle}>Infrastructure Map</h3>
<div className="relative flex-1" style={{ minHeight: '140px' }}>
<Globe2 size={160} strokeWidth={0.6} style={{ position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)', color: 'rgba(200,164,52,0.08)' }} />
{regions.map((r) => (
<div key={r.name} className="absolute" style={{ left: r.x, top: r.y, transform: 'translate(-50%, -50%)' }} title={`${r.name}: ${r.resources} resources`}>
<div style={{ width: '8px', height: '8px', borderRadius: '50%', backgroundColor: '#C8A434', boxShadow: '0 0 10px rgba(200,164,52,0.7)' }} />
<h3 style={sectionTitle}>Node Status</h3>
<div className="grid flex-1 grid-cols-4 gap-3 content-center">
{nodes.map((node) => (
<div
key={node.name}
title={`${node.name}: ${node.status}`}
style={{
backgroundColor: 'rgba(10, 10, 12, 0.55)',
border: `1px solid ${nodeStatusColor[node.status]}33`,
borderRadius: '8px',
padding: '10px 12px',
display: 'flex',
flexDirection: 'column',
gap: '6px',
}}
>
<div className="flex items-center gap-1.5">
<span style={{ width: '7px', height: '7px', borderRadius: '50%', backgroundColor: nodeStatusColor[node.status], boxShadow: `0 0 6px ${nodeStatusColor[node.status]}` }} />
<Server size={12} style={{ color: '#7A7D85' }} />
</div>
<span style={{ fontSize: '11px', color: '#E8E6E0', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{node.name}</span>
</div>
))}
</div>