bonamin/bellsystems-cp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(devices): signal glyph polish, fix invisible copy button, even firmware row

Browse Source 
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:
bonamin
2026-09-22 12:45:01 +03:00
co-authored by Claude Sonnet 5
parent 529e866fff
commit 0c0dd9d0e9
6 changed files with 228 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/bellcloud/devices/DeviceDetail.jsx
+6 -59
View File
@@ -12,6 +12,7 @@ import Button from '@/components/ui/Button'
import SignalIndicator from '@/components/ui/SignalIndicator'
import EditableText from '@/components/ui/EditableText'
import Icon from '@/components/ui/Icon'
import CopyableSerial from '@/components/shared/CopyableSerial'
import Tabs from '@/components/ui/Tabs'
import Spinner from '@/components/ui/Spinner'
import ConfirmDialog from '@/components/ui/ConfirmDialog'
@@ -36,64 +37,6 @@ import ManageTab from '@/pages/bellcloud/devices/tabs/ManageTab'
import ControlTab from '@/pages/bellcloud/devices/tabs/ControlTab'
import HealthTab from '@/pages/bellcloud/devices/tabs/HealthTab'
// ─── Serial subtitle with hover-to-reveal copy button ────────────────────────
function SerialWithCopy({ serial }) {
const [copied, setCopied] = useState(false)
const handleCopy = () => {
if (!serial) return
const done = () => { setCopied(true); setTimeout(() => setCopied(false), 1500) }
if (navigator.clipboard) {
navigator.clipboard.writeText(serial).then(done).catch(() => {
const ta = document.createElement('textarea')
ta.value = serial; ta.style.cssText = 'position:fixed;opacity:0'
document.body.appendChild(ta); ta.select()
try { document.execCommand('copy'); done() } catch { /* clipboard unavailable */ }
document.body.removeChild(ta)
})
}
}
return (
<span className="device-serial-copy" style={{ display: 'inline-flex', alignItems: 'center', gap: 'var(--space-1)' }}>
<span className="page-header-subtitle" style={{ margin: 0 }}>{serial}</span>
{serial && (
<button
type="button"
onClick={handleCopy}
title={copied ? 'Copied!' : 'Copy serial number'}
aria-label="Copy serial number"
className="device-serial-copy__btn"
style={{
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
width: 18,
height: 18,
padding: 0,
border: 'none',
background: 'none',
borderRadius: 'var(--radius-sm)',
color: copied ? 'var(--color-success)' : 'var(--color-text-muted)',
cursor: 'pointer',
opacity: 0,
transition: 'opacity 0.15s, color 0.15s',
}}
>
<Icon name={copied ? 'check' : 'copy'} size={12} />
</button>
)}
<style>{`
.device-serial-copy:hover .device-serial-copy__btn,
.device-serial-copy__btn:focus-visible {
opacity: 1;
}
`}</style>
</span>
)
}
// ─── Tab config ───────────────────────────────────────────────────────────────
const TABS = [
@@ -458,7 +401,11 @@ export default function DeviceDetail() {
editable={canEdit}
inputAriaLabel="Edit console name"
/>
<SerialWithCopy serial={sn} />
<CopyableSerial
serial={sn}
className="page-header-subtitle"
style={{ margin: 0, color: 'var(--color-text-muted)', fontSize: 'var(--font-size-base)', lineHeight: 'var(--line-height-base)' }}
/>
</span>
</span>
}
frontend/src/pages/bellcloud/devices/DeviceListCardView.jsx
+1 -1
View File
@@ -202,7 +202,7 @@ function OnlineBlock({ online, rssi }) {
aria-label={online ? 'Online' : 'Offline'}
>
{online ? (
<SignalIndicator rssi={rssi} size="sm" />
<SignalIndicator rssi={rssi} isOnline size="sm" />
) : (
<span className="dcard__online-block-dot" aria-hidden="true" />
)}
frontend/src/pages/bellcloud/devices/tabs/GeneralTab.jsx
+101 -76
View File
@@ -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>
{/* ════════════════════════════════════════════════════════════════════
frontend/src/pages/bellcloud/devices/tabs/OverviewTab.jsx
+7 -1
View File
@@ -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