Let the metrics dashboard switch regions at runtime
Angular · Angular · intermediate · modification
Adds runtime region switching to the traffic dashboard. Replaces the hardcoded 'na' region with a `region` signal plus a row of region buttons and a `selectRegion()` handler, so an analyst can flip between North America, EMEA, and APAC without reopening the view. The 5-second poll, the immediate first load, and the teardown are unchanged.
The dashboard is opened once and left up on a wall monitor for the whole shift; ngOnInit runs a single time when the component is created, and the poll keeps running for the lifetime of that component while the analyst clicks between regions.
Requirements
- Keep the existing behavior: poll MetricsService.load every 5 seconds (and once immediately) and render the returned rows.
- Let the user switch the region at runtime with the region buttons; selecting a region updates the `region` signal.
- The running poll must reflect the currently selected region — after a switch, the next refresh loads data for the newly chosen region, with no remount.
Files touched
- src/app/dashboard/region-metrics-dashboard.ts
--- src/app/dashboard/region-metrics-dashboard.ts
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { interval, startWith, switchMap } from 'rxjs';
-import { MetricsService, RegionMetrics } from '../services/metrics.service';
+import { MetricsService, Region, RegionMetrics } from '../services/metrics.service';
const POLL_MS = 5000;
+
+const REGIONS: { id: Region; label: string }[] = [
+ { id: 'na', label: 'North America' },
+ { id: 'emea', label: 'EMEA' },
+ { id: 'apac', label: 'APAC' },
+];
@Component({
selector: 'app-region-metrics',
template: `
- <h2>Traffic (North America)</h2>
+ <div class="regions">
+ @for (r of regions; track r.id) {
+ <button [class.active]="r.id === region()" (click)="selectRegion(r.id)">{{ r.label }}</button>
+ }
+ </div>
<ul class="rows">
@for (row of rows(); track row.label) {
private destroyRef = inject(DestroyRef);
+ regions = REGIONS;
+ region = signal<Region>('na');
rows = signal<RegionMetrics[]>([]);