Skip to content

Rename device status component to system status component #80

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dshil merged 1 commit into from
Sep 22, 2025
Merged

Rename device status component to system status component #80

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 11 additions & 11 deletions src/ui/preact/device_status_component.css → src/ui/preact/system_status_component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
}

/* Main Container */
.device-status-card {
.system-status-card {
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius);
Expand All @@ -21,28 +21,28 @@
width: 100%;
}

.device-status-card:hover {
.system-status-card:hover {
box-shadow: var(--shadow-hover);
}

/* Header Section */
.device-status-header {
.system-status-header {
padding: var(--spacing);
cursor: pointer;
}

.device-status-header.expanded {
.system-status-header.expanded {
border-bottom: 1px solid var(--color-border);
}

.device-status-title-row {
.system-status-title-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--spacing-small);
}

.device-status-title {
.system-status-title {
margin: 0;
font-size: var(--font-size-l);
font-weight: 600;
Expand Down Expand Up @@ -89,7 +89,7 @@
}

/* Loading State */
.device-status-loading {
.system-status-loading {
color: var(--color-text-secondary);
font-style: italic;
margin: 0;
Expand All @@ -98,7 +98,7 @@
}

/* Details Section */
.device-status-details {
.system-status-details {
padding: var(--spacing);
background-color: var(--color-bg);
}
Expand Down Expand Up @@ -152,8 +152,8 @@

/* Mobile Responsive */
@media (max-width: 768px) {
.device-status-header,
.device-status-details {
.system-status-header,
.system-status-details {
padding: var(--spacing);
}

Expand Down Expand Up @@ -182,7 +182,7 @@

/* Extra Small Mobile */
@media (max-width: 480px) {
.device-status-title {
.system-status-title {
font-size: var(--font-size-m);
}

Expand Down
6 changes: 3 additions & 3 deletions ...i/preact/device_status_component.test.tsx → ...i/preact/system_status_component.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@ import { Fetcher } from "@device-ui/lib/http/fetcher";
import { TestFetcher } from "@device-ui/lib/tests/test_fetcher";
import { FanoutConnectionHandler } from "@device-ui/lib/device/fanout_connection_handler";

import { DeviceStatusComponent } from "@device-ui/ui/preact/device_status_component";
import { SystemStatusComponent } from "@device-ui/ui/preact/system_status_component";

describe("Device Status Component", () => {
describe("System Status Component", () => {
test("Queue state management on mount/unmount", async () => {
const telemetryStore = new DataStore(new JSONFormatter());
expect(telemetryStore.len()).toBe(0);
Expand All @@ -22,7 +22,7 @@ describe("Device Status Component", () => {
expect(connectionHandler.len()).toBe(0);

const { unmount } = render(
<DeviceStatusComponent
<SystemStatusComponent
telemetryStore={telemetryStore}
registrationStore={registrationStore}
connectionHandler={connectionHandler}
Expand Down
54 changes: 27 additions & 27 deletions src/ui/preact/device_status_component.tsx → src/ui/preact/system_status_component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,13 @@ import { TimeOps } from "@device-ui/lib/algo/time_ops";
import { ConnectionHandler } from "@device-ui/lib/device/connection_handler";
import { FanoutConnectionHandler } from "@device-ui/lib/device/fanout_connection_handler";

import "@device-ui/ui/preact/device_status_component.css";
import "@device-ui/ui/preact/system_status_component.css";

export type DeviceStatusComponentProps = {
// Telemetry fetcher to receive latest telemetry data.
export type SystemStatusComponentProps = {
// Telemetry store to receive latest telemetry data.
telemetryStore: DataStore;

// Registration fetcher to receive latest registration data.
// Registration store to receive latest registration data.
registrationStore: DataStore;

// Connection handler to receive the device connection status.
Expand Down Expand Up @@ -42,7 +42,7 @@ class RegistrationData {
) {}
}

type DeviceStatusComponentState = {
type SystemStatusComponentState = {
expanded: boolean;
connected: boolean;
telemetry: TelemetryData | null;
Expand All @@ -69,11 +69,11 @@ function formatResetReason(reason: string): string {
return reasonMap[reason] || reason;
}

export class DeviceStatusComponent
extends Component<DeviceStatusComponentProps, DeviceStatusComponentState>
export class SystemStatusComponent
extends Component<SystemStatusComponentProps, SystemStatusComponentState>
implements ObjectMonitor, ConnectionHandler
{
constructor(props: DeviceStatusComponentProps) {
constructor(props: SystemStatusComponentProps) {
super(props);

this.state = {
Expand All @@ -91,21 +91,21 @@ export class DeviceStatusComponent
error = this.props.telemetryStore.add(this);
if (error) {
console.error(
`device_status_component: failed to register for telemetry changes: ${error}`,
`system_status_component: failed to register for telemetry changes: ${error}`,
);
}

error = this.props.registrationStore.add(this);
if (error) {
console.error(
`device_status_component: failed to register for registration changes: ${error}`,
`system_status_component: failed to register for registration changes: ${error}`,
);
}

error = this.props.connectionHandler.add(this);
if (error) {
console.error(
`device_status_component: failed to register for connection changes: ${error}`,
`system_status_component: failed to register for connection changes: ${error}`,
);
}
}
Expand All @@ -116,21 +116,21 @@ export class DeviceStatusComponent
error = this.props.telemetryStore.remove(this);
if (error) {
console.error(
`device_status_component: failed to unregister for telemetry changes: ${error}`,
`system_status_component: failed to unregister for telemetry changes: ${error}`,
);
}

error = this.props.registrationStore.remove(this);
if (error) {
console.error(
`device_status_component: failed to unregister for registration changes: ${error}`,
`system_status_component: failed to unregister for registration changes: ${error}`,
);
}

error = this.props.connectionHandler.remove(this);
if (error) {
console.error(
`device_status_component: failed to unregister for connection changes: ${error}`,
`system_status_component: failed to unregister for connection changes: ${error}`,
);
}

Expand All @@ -146,12 +146,12 @@ export class DeviceStatusComponent
render() {
if (!this.state.telemetry && !this.state.registration) {
return (
<div className="device-status-card">
<div className="device-status-header">
<div className="device-status-title-row">
<h3 className="device-status-title">Device Status</h3>
<div className="system-status-card">
<div className="system-status-header">
<div className="system-status-title-row">
<h3 className="system-status-title">System Status</h3>
</div>
<p className="device-status-loading">Loading device data...</p>
<p className="system-status-loading">Loading device data...</p>
</div>
</div>
);
Expand All @@ -161,14 +161,14 @@ export class DeviceStatusComponent
const statusClass = `status-${deviceStatus.status}`;

return (
<div className="device-status-card">
<div className="system-status-card">
{/* Header - always visible */}
<div
className={`device-status-header ${this.state.expanded ? "expanded" : ""}`}
className={`system-status-header ${this.state.expanded ? "expanded" : ""}`}
onClick={this.toggleExpanded}
>
<div className="device-status-title-row">
<h3 className="device-status-title">Device Status</h3>
<div className="system-status-title-row">
<h3 className="system-status-title">System Status</h3>
<div
className={`expand-arrow ${this.state.expanded ? "expanded" : ""}`}
/>
Expand Down Expand Up @@ -208,7 +208,7 @@ export class DeviceStatusComponent

{/* Expanded details */}
{this.state.expanded && (
<div className="device-status-details">
<div className="system-status-details">
<div className="details-grid">
{this.state.telemetry && (
<>
Expand Down Expand Up @@ -277,12 +277,12 @@ export class DeviceStatusComponent
notifyChanged() {
const rawTelemetryData = this.props.telemetryStore.getData();
const telemetryData = rawTelemetryData
? DeviceStatusComponent.formatTelemetryData(rawTelemetryData)
? SystemStatusComponent.formatTelemetryData(rawTelemetryData)
: null;

const rawRegistrationData = this.props.registrationStore.getData();
const registrationData = rawRegistrationData
? DeviceStatusComponent.formatRegistrationData(rawRegistrationData)
? SystemStatusComponent.formatRegistrationData(rawRegistrationData)
: null;

this.setState({
Expand Down Expand Up @@ -361,7 +361,7 @@ export class DeviceStatusComponent
}, 1500);
} catch (error) {
console.error(
"device_status_component: failed to copy device ID:",
"system_status_component: failed to copy device ID:",
error,
);
}
Expand Down