Add per-resource kind labeling and proper Node Status icons
Each adapter now tags its Resources with a kind (vm, container, app, host, network) so Node Status tiles show the right icon instead of a generic server glyph — Proxmox LXCs/Docker containers get a container icon, VMs get a VM icon, Uptime Kuma monitors get an app icon, etc. Also stops silently swallowing listResources() failures — they're now logged as warnings, since a connected-but-empty integration (e.g. Uptime Kuma reporting zero monitors) was previously indistinguishable from a real adapter error.
This commit is contained in:
parent
8a60279720
commit
58f007e6db
11 changed files with 26 additions and 7 deletions
|
|
@ -39,6 +39,7 @@ export const aws: IntegrationAdapter = {
|
||||||
name: nameTag || instance.InstanceId || 'unknown',
|
name: nameTag || instance.InstanceId || 'unknown',
|
||||||
status: state === 'running' ? 'healthy' : state === 'stopped' || state === 'terminated' ? 'critical' : 'warning',
|
status: state === 'running' ? 'healthy' : state === 'stopped' || state === 'terminated' ? 'critical' : 'warning',
|
||||||
detail: `${instance.InstanceType ?? 'unknown type'} — ${state}`,
|
detail: `${instance.InstanceType ?? 'unknown type'} — ${state}`,
|
||||||
|
kind: 'vm',
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -40,6 +40,7 @@ export const cloudflare: IntegrationAdapter = {
|
||||||
name: body.result.name,
|
name: body.result.name,
|
||||||
status: body.result.status === 'active' ? 'healthy' : body.result.status === 'pending' || body.result.status === 'initializing' ? 'warning' : 'critical',
|
status: body.result.status === 'active' ? 'healthy' : body.result.status === 'pending' || body.result.status === 'initializing' ? 'warning' : 'critical',
|
||||||
detail: `Zone status: ${body.result.status}`,
|
detail: `Zone status: ${body.result.status}`,
|
||||||
|
kind: 'network',
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -23,6 +23,7 @@ export const docker: IntegrationAdapter = {
|
||||||
name: c.Names[0]?.replace(/^\//, '') ?? 'unknown',
|
name: c.Names[0]?.replace(/^\//, '') ?? 'unknown',
|
||||||
status: c.State === 'running' ? 'healthy' : c.State === 'restarting' ? 'warning' : 'critical',
|
status: c.State === 'running' ? 'healthy' : c.State === 'restarting' ? 'warning' : 'critical',
|
||||||
detail: c.State,
|
detail: c.State,
|
||||||
|
kind: 'container',
|
||||||
}))
|
}))
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -39,6 +39,7 @@ export const netbird: IntegrationAdapter = {
|
||||||
name: p.name || p.hostname || p.ip || 'unknown peer',
|
name: p.name || p.hostname || p.ip || 'unknown peer',
|
||||||
status: p.connected ? 'healthy' : 'critical',
|
status: p.connected ? 'healthy' : 'critical',
|
||||||
detail: p.connected ? `Online — ${p.ip ?? ''}`.trim() : 'Offline',
|
detail: p.connected ? `Online — ${p.ip ?? ''}`.trim() : 'Offline',
|
||||||
|
kind: 'network',
|
||||||
}))
|
}))
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -59,6 +59,7 @@ export const proxmox: IntegrationAdapter = {
|
||||||
name: entry.name ?? `vm-${entry.vmid}`,
|
name: entry.name ?? `vm-${entry.vmid}`,
|
||||||
status: entry.status === 'running' ? 'healthy' : entry.status === 'stopped' ? 'unknown' : 'warning',
|
status: entry.status === 'running' ? 'healthy' : entry.status === 'stopped' ? 'unknown' : 'warning',
|
||||||
detail: `${entry.type} on ${entry.node} — ${entry.status}`,
|
detail: `${entry.type} on ${entry.node} — ${entry.status}`,
|
||||||
|
kind: entry.type === 'lxc' ? 'container' : 'vm',
|
||||||
}))
|
}))
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -82,6 +82,7 @@ export const ssh: IntegrationAdapter = {
|
||||||
name: hostname,
|
name: hostname,
|
||||||
status: critical ? 'critical' : warning ? 'warning' : 'healthy',
|
status: critical ? 'critical' : warning ? 'warning' : 'healthy',
|
||||||
detail: parts.join(' · ') || undefined,
|
detail: parts.join(' · ') || undefined,
|
||||||
|
kind: 'host',
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
} catch {
|
} catch {
|
||||||
|
|
|
||||||
|
|
@ -22,6 +22,7 @@ export interface Resource {
|
||||||
name: string
|
name: string
|
||||||
status: 'healthy' | 'warning' | 'critical' | 'unknown'
|
status: 'healthy' | 'warning' | 'critical' | 'unknown'
|
||||||
detail?: string
|
detail?: string
|
||||||
|
kind?: 'vm' | 'container' | 'app' | 'host' | 'network'
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface IntegrationAdapter {
|
export interface IntegrationAdapter {
|
||||||
|
|
|
||||||
|
|
@ -108,7 +108,7 @@ export const uptimeKuma: IntegrationAdapter = {
|
||||||
: beat.status === 2
|
: beat.status === 2
|
||||||
? 'warning'
|
? 'warning'
|
||||||
: 'unknown'
|
: 'unknown'
|
||||||
resources.push({ name: monitor.name, status, detail: beat?.msg || undefined })
|
resources.push({ name: monitor.name, status, detail: beat?.msg || undefined, kind: 'app' })
|
||||||
}
|
}
|
||||||
return resources
|
return resources
|
||||||
} finally {
|
} finally {
|
||||||
|
|
|
||||||
|
|
@ -152,8 +152,8 @@ export async function integrationRoutes(app: FastifyInstance) {
|
||||||
try {
|
try {
|
||||||
const found = await adapter.listResources(config, secrets)
|
const found = await adapter.listResources(config, secrets)
|
||||||
for (const r of found) resources.push({ ...r, integration: row.name })
|
for (const r of found) resources.push({ ...r, integration: row.name })
|
||||||
} catch {
|
} catch (err) {
|
||||||
// adapter unreachable — skip, connection test already surfaces this
|
app.log.warn(`listResources failed for integration "${row.name}" (${row.type}): ${err instanceof Error ? err.message : err}`)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return { resources }
|
return { resources }
|
||||||
|
|
|
||||||
|
|
@ -443,6 +443,7 @@ export interface Resource {
|
||||||
status: 'healthy' | 'warning' | 'critical' | 'unknown'
|
status: 'healthy' | 'warning' | 'critical' | 'unknown'
|
||||||
detail?: string
|
detail?: string
|
||||||
integration: string
|
integration: string
|
||||||
|
kind?: 'vm' | 'container' | 'app' | 'host' | 'network'
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface TransferProgress {
|
export interface TransferProgress {
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
import { useEffect, useMemo, useState } from 'react'
|
import { useEffect, useMemo, useState } from 'react'
|
||||||
import { useNavigate } from 'react-router-dom'
|
import { useNavigate } from 'react-router-dom'
|
||||||
import { PieChart, Pie, Cell, ResponsiveContainer } from 'recharts'
|
import { PieChart, Pie, Cell, ResponsiveContainer } from 'recharts'
|
||||||
import { Plus, Server, Activity, AlertTriangle, CircleCheck } from 'lucide-react'
|
import { Plus, Server, Activity, AlertTriangle, CircleCheck, Box, MonitorSmartphone, Waypoints, AppWindow, type LucideIcon } from 'lucide-react'
|
||||||
import { api, type Resource, type Integration, type Event } from '../lib/api'
|
import { api, type Resource, type Integration, type Event } from '../lib/api'
|
||||||
|
|
||||||
const subTabs = ['Overview']
|
const subTabs = ['Overview']
|
||||||
|
|
@ -68,6 +68,14 @@ const nodeStatusColor: Record<string, string> = {
|
||||||
|
|
||||||
const integrationPalette = ['#C8A434', '#E67E22', '#2ECC71', '#7A7D85', '#3B82F6', '#8B5E3C']
|
const integrationPalette = ['#C8A434', '#E67E22', '#2ECC71', '#7A7D85', '#3B82F6', '#8B5E3C']
|
||||||
|
|
||||||
|
const kindIcon: Record<string, LucideIcon> = {
|
||||||
|
vm: MonitorSmartphone,
|
||||||
|
container: Box,
|
||||||
|
app: AppWindow,
|
||||||
|
host: Server,
|
||||||
|
network: Waypoints,
|
||||||
|
}
|
||||||
|
|
||||||
function Donut({ data, centerLabel }: { data: { name: string; value: number; color: string }[]; centerLabel?: string }) {
|
function Donut({ data, centerLabel }: { data: { name: string; value: number; color: string }[]; centerLabel?: string }) {
|
||||||
const hasData = data.some((d) => d.value > 0)
|
const hasData = data.some((d) => d.value > 0)
|
||||||
return (
|
return (
|
||||||
|
|
@ -248,7 +256,9 @@ export default function Infrastructure() {
|
||||||
<h3 style={sectionTitle}>Node Status</h3>
|
<h3 style={sectionTitle}>Node Status</h3>
|
||||||
{resources && resources.length > 0 ? (
|
{resources && resources.length > 0 ? (
|
||||||
<div className="scrollbar-ghost grid min-h-0 flex-1 grid-cols-5 content-start gap-2" style={{ overflowY: 'auto' }}>
|
<div className="scrollbar-ghost grid min-h-0 flex-1 grid-cols-5 content-start gap-2" style={{ overflowY: 'auto' }}>
|
||||||
{resources.map((node, i) => (
|
{resources.map((node, i) => {
|
||||||
|
const NodeIcon = kindIcon[node.kind ?? ''] ?? Server
|
||||||
|
return (
|
||||||
<div
|
<div
|
||||||
key={i}
|
key={i}
|
||||||
title={`${node.name}: ${node.detail ?? node.status}`}
|
title={`${node.name}: ${node.detail ?? node.status}`}
|
||||||
|
|
@ -266,11 +276,12 @@ export default function Infrastructure() {
|
||||||
>
|
>
|
||||||
<div className="flex items-center gap-1.5">
|
<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]}` }} />
|
<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' }} />
|
<NodeIcon size={12} style={{ color: '#7A7D85' }} />
|
||||||
</div>
|
</div>
|
||||||
<span style={{ fontSize: '11px', color: '#E8E6E0', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{node.name}</span>
|
<span style={{ fontSize: '11px', color: '#E8E6E0', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{node.name}</span>
|
||||||
</div>
|
</div>
|
||||||
))}
|
)
|
||||||
|
})}
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="flex flex-1 items-center justify-center">
|
<div className="flex flex-1 items-center justify-center">
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue