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/components/shared/CopyableSerial.jsx
+71
View File
@@ -0,0 +1,71 @@
// frontend/src/components/shared/CopyableSerial.jsx
// Serial number display with click-to-copy — the whole text is clickable,
// not just the trailing icon, and the icon stays dimly visible at rest so
// its affordance isn't hover-only-discoverable (it was previously opacity:0
// at rest via an inline style, which beat the hover CSS rule and made the
// button invisible at all times).
import { useState } from 'react'
import Icon from '@/components/ui/Icon'
function copyText(text, onDone) {
if (navigator.clipboard) {
navigator.clipboard.writeText(text).then(onDone).catch(() => {
const ta = document.createElement('textarea')
ta.value = text; ta.style.cssText = 'position:fixed;opacity:0'
document.body.appendChild(ta); ta.select()
try { document.execCommand('copy'); onDone() } catch { /* clipboard unavailable */ }
document.body.removeChild(ta)
})
}
}
export default function CopyableSerial({ serial, className = '', style = {}, textStyle = {}, iconSize = 12 }) {
const [copied, setCopied] = useState(false)
if (!serial) return <span className={className} style={{ ...textStyle, ...style }}>—</span>
const handleCopy = () => {
copyText(serial, () => { setCopied(true); setTimeout(() => setCopied(false), 1500) })
}
return (
<button
type="button"
onClick={handleCopy}
title={copied ? 'Copied!' : 'Click to copy serial number'}
aria-label={copied ? 'Serial number copied' : 'Copy serial number'}
className={['copyable-serial', className].filter(Boolean).join(' ')}
style={{
display: 'inline-flex',
alignItems: 'center',
gap: 'var(--space-1)',
padding: 0,
border: 'none',
background: 'none',
cursor: 'pointer',
font: 'inherit',
color: 'inherit',
...style,
}}
>
<span style={textStyle}>{serial}</span>
<Icon
name={copied ? 'check' : 'copy'}
size={iconSize}
color={copied ? 'var(--color-success)' : 'currentColor'}
className="copyable-serial__icon"
/>
<style>{`
.copyable-serial .copyable-serial__icon {
opacity: 0.45;
transition: opacity 0.15s, color 0.15s;
}
.copyable-serial:hover .copyable-serial__icon,
.copyable-serial:focus-visible .copyable-serial__icon {
opacity: 1;
}
`}</style>
</button>
)
}
frontend/src/components/ui/SignalIndicator.jsx
+39 -12
View File
@@ -5,8 +5,13 @@
// Props:
// rssi — number | null | undefined — signal strength in dBm (e.g. -62). null/undefined = unknown.
// isOnline — boolean | undefined — when explicitly false, renders a dimmed amber
// glyph with an "X" overlay regardless of rssi, so a stale last-known
// reading from an offline device never reads as a live "full signal".
// glyph with a diagonal slash overlay regardless of rssi, so a stale
// last-known reading from an offline device never reads as a live
// "full signal". When true (or undefined) but rssi is null/undefined,
// renders an amber "?" instead — legacy v1-firmware devices report a
// heartbeat with no rssi field at all (see API Reference: legacy
// heartbeats predate rssi/state/ok), so "online with unknown signal"
// is a distinct, expected state from "we haven't loaded it yet".
// size — 'sm' | 'md' (default: 'md')
// className — extra classes
//
@@ -42,11 +47,16 @@ const DIM_COLOR = 'var(--color-bg-island)'
export default function SignalIndicator({ rssi, isOnline, size = 'md', className = '' }) {
const offline = isOnline === false
const known = !offline && rssi != null && Number.isFinite(rssi)
// Online, but the device firmware never reports rssi at all (legacy v1 API).
const unsupported = !offline && !known && isOnline === true
const muted = offline || unsupported
const level = known ? rssiToLevel(rssi) : 0
const color = offline ? 'var(--color-warning)' : rssiToColor(known ? rssi : null)
const color = muted ? 'var(--color-warning)' : rssiToColor(known ? rssi : null)
const { box, strokeWidth } = SIZES[size] || SIZES.md
const label = offline
? 'Signal strength unavailable — device offline'
: unsupported
? 'Signal strength not reported by this device\'s firmware'
: known
? `Signal strength: ${['weak', 'fair', 'good', 'excellent'][level - 1]} (${rssi} dBm)`
: 'Signal strength unknown'
@@ -63,12 +73,12 @@ export default function SignalIndicator({ rssi, isOnline, size = 'md', className
>
<title>{label}</title>
{/* Center dot — level 1 */}
<circle cx="12" cy="18.5" r="1.6" fill={offline ? DIM_COLOR : (level >= 1 ? color : DIM_COLOR)} style={{ transition: 'fill 0.2s' }} />
<circle cx="12" cy="18.5" r="1.6" fill={muted ? DIM_COLOR : (level >= 1 ? color : DIM_COLOR)} style={{ transition: 'fill 0.2s' }} />
{/* Inner arc — level 2 */}
<path
d="M8.2 14.8a5.4 5.4 0 0 1 7.6 0"
fill="none"
stroke={offline ? DIM_COLOR : (level >= 2 ? color : DIM_COLOR)}
stroke={muted ? DIM_COLOR : (level >= 2 ? color : DIM_COLOR)}
strokeWidth={strokeWidth}
strokeLinecap="round"
style={{ transition: 'stroke 0.2s' }}
@@ -77,7 +87,7 @@ export default function SignalIndicator({ rssi, isOnline, size = 'md', className
<path
d="M5 11.6a9.8 9.8 0 0 1 14 0"
fill="none"
stroke={offline ? DIM_COLOR : (level >= 3 ? color : DIM_COLOR)}
stroke={muted ? DIM_COLOR : (level >= 3 ? color : DIM_COLOR)}
strokeWidth={strokeWidth}
strokeLinecap="round"
style={{ transition: 'stroke 0.2s' }}
@@ -86,17 +96,34 @@ export default function SignalIndicator({ rssi, isOnline, size = 'md', className
<path
d="M1.8 8.4a14.2 14.2 0 0 1 20.4 0"
fill="none"
stroke={offline ? DIM_COLOR : (level >= 4 ? color : DIM_COLOR)}
stroke={muted ? DIM_COLOR : (level >= 4 ? color : DIM_COLOR)}
strokeWidth={strokeWidth}
strokeLinecap="round"
style={{ transition: 'stroke 0.2s' }}
/>
{/* Offline overlay — amber X, replaces the arc/dot reading entirely */}
{/* Offline overlay — amber diagonal slash, standard "no signal" convention */}
{offline && (
<g stroke={color} strokeWidth={strokeWidth} strokeLinecap="round">
<path d="M8.5 5.5l7 7" />
<path d="M15.5 5.5l-7 7" />
</g>
<path
d="M3 21L21 3"
stroke={color}
strokeWidth={strokeWidth}
strokeLinecap="round"
/>
)}
{/* Unsupported overlay — amber "?", device is online but its firmware never reports rssi (v1 API) */}
{unsupported && (
<text
x="12"
y="16.5"
textAnchor="middle"
fontSize="11"
fontWeight="700"
fontFamily="var(--font-family-base, sans-serif)"
fill={color}
stroke="none"
>
?
</text>
)}
</svg>
)
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
+87 -62
View File
@@ -1026,14 +1026,83 @@ export default function GeneralTab({
ROW 0 — Firmware (full width, short)
════════════════════════════════════════════════════════════════════ */}
<GlassCard>
{(() => {
// 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',
justifyContent: 'space-between',
gap: 'var(--space-6)',
flexWrap: 'wrap',
gap: 'var(--space-4)',
}}>
<div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)', minWidth: 0 }}>
<div style={{
width: 36, height: 36, flexShrink: 0,
borderRadius: 'var(--radius-md)',
@@ -1043,68 +1112,24 @@ export default function GeneralTab({
}}>
<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)',
<div style={{
flex: 1,
display: 'grid',
gridTemplateColumns: `repeat(${items.length}, minmax(0, 1fr))`,
gap: 'var(--space-4)',
minWidth: 0,
}}>
{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>
)}
{items.map(({ label, content }) => (
<div key={label} style={{ display: 'flex', flexDirection: 'column', gap: 2, minWidth: 0 }}>
<SectionLabel>{label}</SectionLabel>
{content}
</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