Skip to content

Render station lockout banner in the web GUI #29

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

Open
jzho987 wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Render station lockout banner in the web GUI #29

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f2e97dd
Render station lockout banner in the web GUI
jzho987 Aug 17, 2026
7c5fd04
Drop the em dash from the lockout banner
jzho987 Aug 18, 2026
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
2 changes: 1 addition & 1 deletion ...gui/dist/css/app.5800c558eb6fed0e89c5.css → ...gui/dist/css/app.f3e7df6d1c0fcf19f10e.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion ...dist/css/app.5800c558eb6fed0e89c5.css.map → ...dist/css/app.f3e7df6d1c0fcf19f10e.css.map
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions openhtf/output/web_gui/dist/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<head><link href="/css/app.5800c558eb6fed0e89c5.css" rel="stylesheet"></head><!doctype html>
<head><link href="/css/app.f3e7df6d1c0fcf19f10e.css" rel="stylesheet"></head><!doctype html>
<!--
Copyright 2022 Google LLC

Expand All @@ -22,4 +22,4 @@

<base href="/">
<htf-app config="{{ json_encode(config) }}">Loading...</htf-app>
<script type="text/javascript" src="/js/polyfills.5800c558eb6fed0e89c5.js"></script><script type="text/javascript" src="/js/vendor.5800c558eb6fed0e89c5.js"></script><script type="text/javascript" src="/js/app.5800c558eb6fed0e89c5.js"></script>
<script type="text/javascript" src="/js/polyfills.f3e7df6d1c0fcf19f10e.js"></script><script type="text/javascript" src="/js/vendor.f3e7df6d1c0fcf19f10e.js"></script><script type="text/javascript" src="/js/app.f3e7df6d1c0fcf19f10e.js"></script>
1 change: 0 additions & 1 deletion openhtf/output/web_gui/dist/js/app.5800c558eb6fed0e89c5.js.map
View file
Open in desktop

This file was deleted.

44 changes: 22 additions & 22 deletions ...b_gui/dist/js/app.5800c558eb6fed0e89c5.js → ...b_gui/dist/js/app.f3e7df6d1c0fcf19f10e.js
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions openhtf/output/web_gui/dist/js/app.f3e7df6d1c0fcf19f10e.js.map
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion ...dist/js/polyfills.5800c558eb6fed0e89c5.js → ...dist/js/polyfills.f3e7df6d1c0fcf19f10e.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion .../js/polyfills.5800c558eb6fed0e89c5.js.map → .../js/polyfills.f3e7df6d1c0fcf19f10e.js.map
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion ...ui/dist/js/vendor.5800c558eb6fed0e89c5.js → ...ui/dist/js/vendor.f3e7df6d1c0fcf19f10e.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion ...ist/js/vendor.5800c558eb6fed0e89c5.js.map → ...ist/js/vendor.f3e7df6d1c0fcf19f10e.js.map
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 4 additions & 0 deletions openhtf/output/web_gui/src/app/shared/models/station.model.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,10 @@ export class Station {
host: string;
hostPort: string; // Used to uniquely identify stations.
label: string;
lockoutLastUpdatedAt: string|null;
lockoutLastUpdatedBy: string|null;
lockoutLocked: boolean|null;
lockoutReason: string|null;
port: string;
stationId: string;
status: StationStatus;
Expand Down
19 changes: 19 additions & 0 deletions openhtf/output/web_gui/src/app/stations/station-list/dashboard.service.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,13 @@ interface RawStation {
ddns_hostname?: string|null;
ddns_resolved_ip?: string|null;
ddns_status?: string|null;
// The lockout fields are only emitted by the single-station dashboard
// server on Halter stations; absent elsewhere, in which case the UI shows
// no lockout banner.
lockout_locked?: boolean|null;
lockout_reason?: string|null;
lockout_last_updated_by?: string|null;
lockout_last_updated_at?: string|null;
}

interface DashboardApiResponse {
Expand Down Expand Up @@ -113,6 +120,18 @@ export class DashboardService extends Subscription {
host: rawStation.host,
hostPort,
label: DashboardService.getStationLabel(rawStation),
lockoutLastUpdatedAt: rawStation.lockout_last_updated_at != null ?
rawStation.lockout_last_updated_at :
null,
lockoutLastUpdatedBy: rawStation.lockout_last_updated_by != null ?
rawStation.lockout_last_updated_by :
null,
lockoutLocked: typeof rawStation.lockout_locked === 'boolean' ?
rawStation.lockout_locked :
null,
lockoutReason: rawStation.lockout_reason != null ?
rawStation.lockout_reason :
null,
port: rawStation.port,
stationId: rawStation.station_id,
status: dashboardStatusMap[rawStation.status],
Expand Down
18 changes: 18 additions & 0 deletions openhtf/output/web_gui/src/app/stations/station/station.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,24 @@

<div class="station">

<div
*ngIf="selectedStation.lockoutLocked"
class="lockout-banner">
<div class="lockout-banner-title">
&#x26A0; STATION LOCKED OUT: testing restricted to control units
</div>
<div
*ngIf="selectedStation.lockoutReason"
class="lockout-banner-reason">
{{ selectedStation.lockoutReason }}
</div>
<div
*ngIf="lockoutUpdatedText"
class="lockout-banner-meta">
{{ lockoutUpdatedText }}
</div>
</div>

<div class="nav-bar">
<button
*ngIf="dashboardEnabled"
Expand Down
23 changes: 23 additions & 0 deletions openhtf/output/web_gui/src/app/stations/station/station.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,29 @@
margin-bottom: 12px;
}

.lockout-banner {
background-color: $theme-red;
border-radius: 3px;
color: $text-white;
margin-bottom: $gutter-small;
padding: 12px $widget-inner-padding;
}

.lockout-banner-title {
font-size: $font-size-large;
font-weight: bold;
}

.lockout-banner-reason {
margin-top: 4px;
}

.lockout-banner-meta {
font-size: $font-size-small;
margin-top: 4px;
opacity: .85;
}

.status-bar {
margin-bottom: ($gutter-small - 2px);
}
Expand Down
4 changes: 4 additions & 0 deletions openhtf/output/web_gui/src/app/stations/station/station.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,10 @@ class HostComponent {
host: 'localhost',
hostPort: 'localhost:12000',
label: 'mock-station-id',
lockoutLastUpdatedAt: null,
lockoutLastUpdatedBy: null,
lockoutLocked: null,
lockoutReason: null,
port: '12000',
stationId: 'mock-station-id',
status: StationStatus.online,
Expand Down
21 changes: 21 additions & 0 deletions openhtf/output/web_gui/src/app/stations/station/station.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,27 @@ export class StationComponent implements OnDestroy, OnInit {
return !(this.hasError || this.isLoading);
}

// Attribution line for the lockout banner; empty when there is nothing
// beyond the locked flag to show.
get lockoutUpdatedText(): string {
const station = this.selectedStation;
if (!station || !station.lockoutLocked) {
return '';
}
const by = station.lockoutLastUpdatedBy;
const at = station.lockoutLastUpdatedAt;
if (by && at) {
return `Locked by ${by} at ${at}`;
}
if (by) {
return `Locked by ${by}`;
}
if (at) {
return `Locked at ${at}`;
}
return '';
}

// Human-readable explanation of the DDNS indicator, shown on hover.
get ddnsTooltip(): string {
const station = this.selectedStation;
Expand Down
8 changes: 8 additions & 0 deletions openhtf/output/web_gui/src/app/stations/station/station.service.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,10 @@ const mockStation = new Station({
host: 'localhost',
hostPort: 'localhost:12000',
label: 'mock-station-id',
lockoutLastUpdatedAt: null,
lockoutLastUpdatedBy: null,
lockoutLocked: null,
lockoutReason: null,
port: '12000',
stationId: 'mock-station-id',
status: StationStatus.online,
Expand All @@ -55,6 +59,10 @@ const mockStation2 = new Station({
host: 'localhost',
hostPort: 'localhost:12001',
label: 'mock-station-id',
lockoutLastUpdatedAt: null,
lockoutLastUpdatedBy: null,
lockoutLocked: null,
lockoutReason: null,
port: '12001',
stationId: 'mock-station-id',
status: StationStatus.online,
Expand Down
Loading