fix(devices): signal glyph polish, fix invisible copy button, even firmware row
Follow-up on 529e866 after review:
- SignalIndicator: offline now renders a diagonal slash (standard
"no signal" convention) instead of an X. Added a distinct amber "?"
state for devices that are online but whose firmware never reports rssi
at all (legacy v1 heartbeats predate the rssi/state/ok fields — see API
Reference's v2 migration notes) — previously this looked identical to
"not loaded yet". DeviceListCardView's online block now opts into this
by passing isOnline explicitly.
- Copy-to-clipboard for the serial number was invisible: the icon button
had opacity:0 as an inline style, which beats a CSS hover rule at equal
specificity, so the reveal-on-hover code paths never fired. Replaced
with a shared CopyableSerial component (components/shared/) where the
whole serial text is clickable, not just a trailing icon, and the icon
sits at partial opacity at rest instead of fully hidden. Wired into both
DeviceDetail's header and OverviewTab's hero Serial Number field.
- GeneralTab firmware hero: all stat columns are now equal-width via a
grid instead of ad-hoc flex gaps, and backup_version's "Unknown" sentinel
(the device's own placeholder when no second OTA slot has ever been
flashed) is no longer rendered as the literal string "vUnknown".
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Claude Sonnet 5
@@ -1026,85 +1026,110 @@ export default function GeneralTab({
|
||||
ROW 0 — Firmware (full width, short)
|
||||
════════════════════════════════════════════════════════════════════ */}
|
||||
<GlassCard>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
gap: 'var(--space-6)',
|
||||
flexWrap: 'wrap',
|
||||
}}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)', minWidth: 0 }}>
|
||||
<div style={{
|
||||
width: 36, height: 36, flexShrink: 0,
|
||||
borderRadius: 'var(--radius-md)',
|
||||
background: 'var(--color-primary-subtle)',
|
||||
border: '1px solid rgba(192,193,255,0.20)',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
}}>
|
||||
<Icon name="firmware" size={17} color="var(--color-primary)" />
|
||||
</div>
|
||||
<div style={{ minWidth: 0 }}>
|
||||
<SectionLabel>Firmware</SectionLabel>
|
||||
<div style={{ display: 'flex', alignItems: 'baseline', gap: 'var(--space-2)', marginTop: 2 }}>
|
||||
<span style={{
|
||||
fontSize: 'var(--font-size-lg)',
|
||||
fontWeight: 'var(--font-weight-semibold)',
|
||||
fontFamily: 'var(--font-family-mono)',
|
||||
color: 'var(--color-text-primary)',
|
||||
}}>
|
||||
{firmwareStatus?.current_version ? `v${firmwareStatus.current_version}` : '—'}
|
||||
</span>
|
||||
{firmwareStatus?.build_date && (
|
||||
<span style={{ fontSize: 'var(--font-size-xs)', color: 'var(--color-text-muted)' }}>
|
||||
built {firmwareStatus.build_date}
|
||||
{(() => {
|
||||
// The firmware reports the literal string "Unknown" (not null/absent) for
|
||||
// backup_version when no second OTA slot has ever been flashed — guard
|
||||
// against that sentinel so it doesn't render as "vUnknown".
|
||||
const backupKnown = firmwareStatus?.backup_version && firmwareStatus.backup_version !== 'Unknown'
|
||||
const items = [
|
||||
{
|
||||
label: 'Version',
|
||||
content: (
|
||||
<div style={{ display: 'flex', alignItems: 'baseline', gap: 'var(--space-2)' }}>
|
||||
<span style={{ fontSize: 'var(--font-size-lg)', fontWeight: 'var(--font-weight-semibold)', fontFamily: 'var(--font-family-mono)', color: 'var(--color-text-primary)' }}>
|
||||
{firmwareStatus?.current_version ? `v${firmwareStatus.current_version}` : '—'}
|
||||
</span>
|
||||
)}
|
||||
{firmwareStatus?.build_date && (
|
||||
<span style={{ fontSize: 'var(--font-size-xs)', color: 'var(--color-text-muted)' }}>
|
||||
built {firmwareStatus.build_date}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
label: 'Channel',
|
||||
content: (
|
||||
<StatusBadge variant={firmwareStatus?.ota_channel === 'stable' ? 'success' : firmwareStatus?.ota_channel === 'beta' ? 'warning' : 'neutral'}>
|
||||
{firmwareStatus?.ota_channel || '—'}
|
||||
</StatusBadge>
|
||||
),
|
||||
},
|
||||
{
|
||||
label: 'Validation',
|
||||
content: (
|
||||
<StatusBadge variant={
|
||||
firmwareStatus?.validation_state === 'VALIDATED' ? 'success' :
|
||||
firmwareStatus?.is_testing ? 'warning' : 'neutral'
|
||||
}>
|
||||
{firmwareStatus?.validation_state || '—'}
|
||||
</StatusBadge>
|
||||
),
|
||||
},
|
||||
{
|
||||
label: 'Boot Count',
|
||||
content: (
|
||||
<span style={{ fontSize: 'var(--font-size-base)', fontWeight: 'var(--font-weight-medium)', fontFamily: 'var(--font-family-mono)', color: 'var(--color-text-primary)' }}>
|
||||
{Number.isFinite(firmwareStatus?.boot_count) ? firmwareStatus.boot_count : '—'}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
label: 'Backup Slot',
|
||||
content: (
|
||||
<span style={{ fontSize: 'var(--font-size-base)', fontWeight: 'var(--font-weight-medium)', fontFamily: 'var(--font-family-mono)', color: 'var(--color-text-primary)' }}>
|
||||
{backupKnown ? `v${firmwareStatus.backup_version}` : '—'}
|
||||
{backupKnown && (
|
||||
<span style={{ marginLeft: 6, fontSize: 'var(--font-size-xs)', fontFamily: 'var(--font-family-base)', color: firmwareStatus?.backup_is_valid ? 'var(--color-success)' : 'var(--color-danger)' }}>
|
||||
{firmwareStatus?.backup_is_valid ? 'valid' : 'invalid'}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
label: 'Testing Window',
|
||||
content: (
|
||||
<StatusBadge variant={firmwareStatus?.is_testing ? 'warning' : 'neutral'}>
|
||||
{firmwareStatus?.is_testing ? 'Open' : 'Closed'}
|
||||
</StatusBadge>
|
||||
),
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 'var(--space-4)',
|
||||
}}>
|
||||
<div style={{
|
||||
width: 36, height: 36, flexShrink: 0,
|
||||
borderRadius: 'var(--radius-md)',
|
||||
background: 'var(--color-primary-subtle)',
|
||||
border: '1px solid rgba(192,193,255,0.20)',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
}}>
|
||||
<Icon name="firmware" size={17} color="var(--color-primary)" />
|
||||
</div>
|
||||
|
||||
<div style={{
|
||||
flex: 1,
|
||||
display: 'grid',
|
||||
gridTemplateColumns: `repeat(${items.length}, minmax(0, 1fr))`,
|
||||
gap: 'var(--space-4)',
|
||||
minWidth: 0,
|
||||
}}>
|
||||
{items.map(({ label, content }) => (
|
||||
<div key={label} style={{ display: 'flex', flexDirection: 'column', gap: 2, minWidth: 0 }}>
|
||||
<SectionLabel>{label}</SectionLabel>
|
||||
{content}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-6)', flexWrap: 'wrap' }}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
<SectionLabel>Channel</SectionLabel>
|
||||
<StatusBadge variant={firmwareStatus?.ota_channel === 'stable' ? 'success' : firmwareStatus?.ota_channel === 'beta' ? 'warning' : 'neutral'}>
|
||||
{firmwareStatus?.ota_channel || '—'}
|
||||
</StatusBadge>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
<SectionLabel>Validation</SectionLabel>
|
||||
<StatusBadge variant={
|
||||
firmwareStatus?.validation_state === 'VALIDATED' ? 'success' :
|
||||
firmwareStatus?.is_testing ? 'warning' : 'neutral'
|
||||
}>
|
||||
{firmwareStatus?.validation_state || '—'}
|
||||
</StatusBadge>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
<SectionLabel>Boot Count</SectionLabel>
|
||||
<span style={{ fontSize: 'var(--font-size-base)', fontWeight: 'var(--font-weight-medium)', fontFamily: 'var(--font-family-mono)', color: 'var(--color-text-primary)' }}>
|
||||
{Number.isFinite(firmwareStatus?.boot_count) ? firmwareStatus.boot_count : '—'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
<SectionLabel>Backup Slot</SectionLabel>
|
||||
<span style={{ fontSize: 'var(--font-size-base)', fontWeight: 'var(--font-weight-medium)', fontFamily: 'var(--font-family-mono)', color: 'var(--color-text-primary)' }}>
|
||||
{firmwareStatus?.backup_version ? `v${firmwareStatus.backup_version}` : '—'}
|
||||
{firmwareStatus?.backup_version && (
|
||||
<span style={{ marginLeft: 6, fontSize: 'var(--font-size-xs)', fontFamily: 'var(--font-family-base)', color: firmwareStatus?.backup_is_valid ? 'var(--color-success)' : 'var(--color-danger)' }}>
|
||||
{firmwareStatus?.backup_is_valid ? 'valid' : 'invalid'}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{firmwareStatus?.is_testing && (
|
||||
<StatusBadge variant="warning">Testing — awaiting commit</StatusBadge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})()}
|
||||
</GlassCard>
|
||||
|
||||
{/* ════════════════════════════════════════════════════════════════════
|
||||
|
||||
@@ -20,6 +20,7 @@ import {
|
||||
} from './shared'
|
||||
import DeviceNoteModal from '@/modals/bellcloud/devices/DeviceNoteModal'
|
||||
import EntryFormModal from '@/modals/crm/helpdesk/EntryFormModal'
|
||||
import CopyableSerial from '@/components/shared/CopyableSerial'
|
||||
|
||||
// ─── Glass surface tokens ─────────────────────────────────────────────────────
|
||||
|
||||
@@ -505,7 +506,12 @@ export default function OverviewTab({
|
||||
rowGap: 'var(--space-5)',
|
||||
width: '100%',
|
||||
}}>
|
||||
<InfoField label="Serial Number" mono>{sn || '—'}</InfoField>
|
||||
<InfoField label="Serial Number">
|
||||
<CopyableSerial
|
||||
serial={sn}
|
||||
textStyle={{ fontFamily: 'var(--font-family-mono)' }}
|
||||
/>
|
||||
</InfoField>
|
||||
<InfoField label="Hardware Family">{hwVariant}</InfoField>
|
||||
<InfoField label="Device Uptime">
|
||||
{mqttStatus?.last_heartbeat?.uptime_ms != null
|
||||
|
||||
Reference in New Issue
Block a user