Skip to content

Commit e0800ff

Browse files
dshildshil
committed
Rename device status component to system status component
1 parent 09af0df commit e0800ff

3 files changed

Lines changed: 41 additions & 41 deletions

File tree

src/ui/preact/device_status_component.css renamed to src/ui/preact/system_status_component.css

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
}
1010

1111
/* Main Container */
12-
.device-status-card {
12+
.system-status-card {
1313
background: var(--color-white);
1414
border: 1px solid var(--color-border);
1515
border-radius: var(--radius);
@@ -21,28 +21,28 @@
2121
width: 100%;
2222
}
2323

24-
.device-status-card:hover {
24+
.system-status-card:hover {
2525
box-shadow: var(--shadow-hover);
2626
}
2727

2828
/* Header Section */
29-
.device-status-header {
29+
.system-status-header {
3030
padding: var(--spacing);
3131
cursor: pointer;
3232
}
3333

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

38-
.device-status-title-row {
38+
.system-status-title-row {
3939
display: flex;
4040
justify-content: space-between;
4141
align-items: center;
4242
margin-bottom: var(--spacing-small);
4343
}
4444

45-
.device-status-title {
45+
.system-status-title {
4646
margin: 0;
4747
font-size: var(--font-size-l);
4848
font-weight: 600;
@@ -89,7 +89,7 @@
8989
}
9090

9191
/* Loading State */
92-
.device-status-loading {
92+
.system-status-loading {
9393
color: var(--color-text-secondary);
9494
font-style: italic;
9595
margin: 0;
@@ -98,7 +98,7 @@
9898
}
9999

100100
/* Details Section */
101-
.device-status-details {
101+
.system-status-details {
102102
padding: var(--spacing);
103103
background-color: var(--color-bg);
104104
}
@@ -152,8 +152,8 @@
152152

153153
/* Mobile Responsive */
154154
@media (max-width: 768px) {
155-
.device-status-header,
156-
.device-status-details {
155+
.system-status-header,
156+
.system-status-details {
157157
padding: var(--spacing);
158158
}
159159

@@ -182,7 +182,7 @@
182182

183183
/* Extra Small Mobile */
184184
@media (max-width: 480px) {
185-
.device-status-title {
185+
.system-status-title {
186186
font-size: var(--font-size-m);
187187
}
188188

src/ui/preact/device_status_component.test.tsx renamed to src/ui/preact/system_status_component.test.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ import { Fetcher } from "@device-ui/lib/http/fetcher";
88
import { TestFetcher } from "@device-ui/lib/tests/test_fetcher";
99
import { FanoutConnectionHandler } from "@device-ui/lib/device/fanout_connection_handler";
1010

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

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

2424
const { unmount } = render(
25-
<DeviceStatusComponent
25+
<SystemStatusComponent
2626
telemetryStore={telemetryStore}
2727
registrationStore={registrationStore}
2828
connectionHandler={connectionHandler}

src/ui/preact/device_status_component.tsx renamed to src/ui/preact/system_status_component.tsx

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,13 @@ import { TimeOps } from "@device-ui/lib/algo/time_ops";
66
import { ConnectionHandler } from "@device-ui/lib/device/connection_handler";
77
import { FanoutConnectionHandler } from "@device-ui/lib/device/fanout_connection_handler";
88

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

11-
export type DeviceStatusComponentProps = {
12-
// Telemetry fetcher to receive latest telemetry data.
11+
export type SystemStatusComponentProps = {
12+
// Telemetry store to receive latest telemetry data.
1313
telemetryStore: DataStore;
1414

15-
// Registration fetcher to receive latest registration data.
15+
// Registration store to receive latest registration data.
1616
registrationStore: DataStore;
1717

1818
// Connection handler to receive the device connection status.
@@ -42,7 +42,7 @@ class RegistrationData {
4242
) {}
4343
}
4444

45-
type DeviceStatusComponentState = {
45+
type SystemStatusComponentState = {
4646
expanded: boolean;
4747
connected: boolean;
4848
telemetry: TelemetryData | null;
@@ -69,11 +69,11 @@ function formatResetReason(reason: string): string {
6969
return reasonMap[reason] || reason;
7070
}
7171

72-
export class DeviceStatusComponent
73-
extends Component<DeviceStatusComponentProps, DeviceStatusComponentState>
72+
export class SystemStatusComponent
73+
extends Component<SystemStatusComponentProps, SystemStatusComponentState>
7474
implements ObjectMonitor, ConnectionHandler
7575
{
76-
constructor(props: DeviceStatusComponentProps) {
76+
constructor(props: SystemStatusComponentProps) {
7777
super(props);
7878

7979
this.state = {
@@ -91,21 +91,21 @@ export class DeviceStatusComponent
9191
error = this.props.telemetryStore.add(this);
9292
if (error) {
9393
console.error(
94-
`device_status_component: failed to register for telemetry changes: ${error}`,
94+
`system_status_component: failed to register for telemetry changes: ${error}`,
9595
);
9696
}
9797

9898
error = this.props.registrationStore.add(this);
9999
if (error) {
100100
console.error(
101-
`device_status_component: failed to register for registration changes: ${error}`,
101+
`system_status_component: failed to register for registration changes: ${error}`,
102102
);
103103
}
104104

105105
error = this.props.connectionHandler.add(this);
106106
if (error) {
107107
console.error(
108-
`device_status_component: failed to register for connection changes: ${error}`,
108+
`system_status_component: failed to register for connection changes: ${error}`,
109109
);
110110
}
111111
}
@@ -116,21 +116,21 @@ export class DeviceStatusComponent
116116
error = this.props.telemetryStore.remove(this);
117117
if (error) {
118118
console.error(
119-
`device_status_component: failed to unregister for telemetry changes: ${error}`,
119+
`system_status_component: failed to unregister for telemetry changes: ${error}`,
120120
);
121121
}
122122

123123
error = this.props.registrationStore.remove(this);
124124
if (error) {
125125
console.error(
126-
`device_status_component: failed to unregister for registration changes: ${error}`,
126+
`system_status_component: failed to unregister for registration changes: ${error}`,
127127
);
128128
}
129129

130130
error = this.props.connectionHandler.remove(this);
131131
if (error) {
132132
console.error(
133-
`device_status_component: failed to unregister for connection changes: ${error}`,
133+
`system_status_component: failed to unregister for connection changes: ${error}`,
134134
);
135135
}
136136

@@ -146,12 +146,12 @@ export class DeviceStatusComponent
146146
render() {
147147
if (!this.state.telemetry && !this.state.registration) {
148148
return (
149-
<div className="device-status-card">
150-
<div className="device-status-header">
151-
<div className="device-status-title-row">
152-
<h3 className="device-status-title">Device Status</h3>
149+
<div className="system-status-card">
150+
<div className="system-status-header">
151+
<div className="system-status-title-row">
152+
<h3 className="system-status-title">System Status</h3>
153153
</div>
154-
<p className="device-status-loading">Loading device data...</p>
154+
<p className="system-status-loading">Loading device data...</p>
155155
</div>
156156
</div>
157157
);
@@ -161,14 +161,14 @@ export class DeviceStatusComponent
161161
const statusClass = `status-${deviceStatus.status}`;
162162

163163
return (
164-
<div className="device-status-card">
164+
<div className="system-status-card">
165165
{/* Header - always visible */}
166166
<div
167-
className={`device-status-header ${this.state.expanded ? "expanded" : ""}`}
167+
className={`system-status-header ${this.state.expanded ? "expanded" : ""}`}
168168
onClick={this.toggleExpanded}
169169
>
170-
<div className="device-status-title-row">
171-
<h3 className="device-status-title">Device Status</h3>
170+
<div className="system-status-title-row">
171+
<h3 className="system-status-title">System Status</h3>
172172
<div
173173
className={`expand-arrow ${this.state.expanded ? "expanded" : ""}`}
174174
/>
@@ -208,7 +208,7 @@ export class DeviceStatusComponent
208208

209209
{/* Expanded details */}
210210
{this.state.expanded && (
211-
<div className="device-status-details">
211+
<div className="system-status-details">
212212
<div className="details-grid">
213213
{this.state.telemetry && (
214214
<>
@@ -277,12 +277,12 @@ export class DeviceStatusComponent
277277
notifyChanged() {
278278
const rawTelemetryData = this.props.telemetryStore.getData();
279279
const telemetryData = rawTelemetryData
280-
? DeviceStatusComponent.formatTelemetryData(rawTelemetryData)
280+
? SystemStatusComponent.formatTelemetryData(rawTelemetryData)
281281
: null;
282282

283283
const rawRegistrationData = this.props.registrationStore.getData();
284284
const registrationData = rawRegistrationData
285-
? DeviceStatusComponent.formatRegistrationData(rawRegistrationData)
285+
? SystemStatusComponent.formatRegistrationData(rawRegistrationData)
286286
: null;
287287

288288
this.setState({
@@ -361,7 +361,7 @@ export class DeviceStatusComponent
361361
}, 1500);
362362
} catch (error) {
363363
console.error(
364-
"device_status_component: failed to copy device ID:",
364+
"system_status_component: failed to copy device ID:",
365365
error,
366366
);
367367
}

0 commit comments

Comments
 (0)