From 2f15baee387996e6ab7d0ae180f71e899d51c9a4 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 18 Jun 2026 17:56:11 +0000
Subject: [PATCH] Replace Infrastructure world map with a Node Status grid

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
---
 src/pages/Infrastructure.tsx | 57 ++++++++++++++++++++++++++----------
 1 file changed, 42 insertions(+), 15 deletions(-)

diff --git a/src/pages/Infrastructure.tsx b/src/pages/Infrastructure.tsx
index 53bbd1e..48b6a4a 100644
--- a/src/pages/Infrastructure.tsx
+++ b/src/pages/Infrastructure.tsx
@@ -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>