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

Add selectable node status tiles and a Node Detail card

Browse source 
Clicking a tile in Node Status highlights it and surfaces its name,
source integration, status, and detail in a new Node Detail card on
the bottom row, between Integration Health and a now-narrower Recent
Activity card.
This commit is contained in:
Claude 2026-06-21 11:43:10 +00:00
parent 99ca1ba39c
commit 8a60279720
No known key found for this signature in database
1 changed files with 39 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
src/pages/Infrastructure.tsx
View file

@ -108,6 +108,7 @@ export default function Infrastructure() {
const [resources, setResources] = useState<Resource[] | null>(null)
const [integrations, setIntegrations] = useState<Integration[] | null>(null)
const [events, setEvents] = useState<Event[] | null>(null)
const [selectedNode, setSelectedNode] = useState<Resource | null>(null)
const navigate = useNavigate()
useEffect(() => {
@ -251,9 +252,11 @@ export default function Infrastructure() {
<div
key={i}
title={`${node.name}: ${node.detail ?? node.status}`}
onClick={() => setSelectedNode(node)}
className="cursor-pointer transition-colors"
style={{
backgroundColor: 'rgba(10, 10, 12, 0.55)',
border: `1px solid ${nodeStatusColor[node.status]}33`,
backgroundColor: selectedNode === node ? 'rgba(200,164,52,0.1)' : 'rgba(10, 10, 12, 0.55)',
border: selectedNode === node ? '1px solid rgba(200,164,52,0.5)' : `1px solid ${nodeStatusColor[node.status]}33`,
borderRadius: '8px',
padding: '8px 10px',
display: 'flex',
@ -281,7 +284,7 @@ export default function Infrastructure() {
{/* Bottom Row */}
<div className="shrink-0">
<div className="grid w-full grid-cols-2 gap-6">
<div className="grid w-full grid-cols-[1fr_1.5fr_0.7fr] gap-6">
{/* Integration Health */}
<div style={{ ...framedCard('/archnest-network-traffic-bg.png'), height: 'auto', padding: '20px' }} className="hover:!border-gold/15">
<div style={cardDim} />
@ -306,6 +309,39 @@ export default function Infrastructure() {
</div>
</div>
{/* Node Detail — shows the node selected up in Node Status */}
<div style={{ ...cardBase, height: 'auto' }} className="hover:!border-gold/15">
<div className="relative z-10">
<h3 style={sectionTitle}>Node Detail</h3>
{selectedNode ? (
<div className="flex flex-col gap-3">
<div className="flex items-center gap-2">
<span
style={{
width: '8px',
height: '8px',
borderRadius: '50%',
backgroundColor: nodeStatusColor[selectedNode.status],
boxShadow: `0 0 6px ${nodeStatusColor[selectedNode.status]}`,
}}
/>
<span style={{ fontSize: '14px', fontWeight: 600, color: '#E8E6E0' }}>{selectedNode.name}</span>
</div>
<div className="flex items-center gap-3" style={{ fontSize: '11px', color: '#7A7D85' }}>
<span>{selectedNode.integration}</span>
<span style={{ color: 'rgba(200,164,52,0.3)' }}>|</span>
<span style={{ textTransform: 'capitalize', color: nodeStatusColor[selectedNode.status] }}>{selectedNode.status}</span>
</div>
{selectedNode.detail && (
<p style={{ fontSize: '12px', color: '#A8A6A0', lineHeight: 1.5 }}>{selectedNode.detail}</p>
)}
</div>
) : (
<p style={{ fontSize: '12px', color: '#7A7D85' }}>Select a node above to view its details.</p>
)}
</div>
</div>
{/* Recent Activity */}
<div style={{ ...cardBase, height: 'auto' }} className="hover:!border-gold/15">
<div className="relative z-10">