Cache Frontend API Responses for Performance

[nmgaston]

Is your feature request related to a problem? Please describe.
Redundant API calls (AMT Features, Power State, KVM Displays) occur when users revisit device or KVM tabs in the Enterprise and Cloud (sample-web-ui frontend) apps, leading to unnecessary load, sluggish page experience, and inefficiency—especially as these states rarely change within short periods.

Describe the solution you'd like
Implement a 60-second TTL cache in Angular service methods serving the UI to avoid redundant AMT/Power/Display API calls when switching between device tabs. This includes:

• Caching API responses per device in service-layer memory with a 60s expiry (cache maps with TTL)
• Updating service methods to check the cache before making calls
• Adding cache invalidation (e. g., upon setDisplaySelection event or relevant state changes)
• Testing with varying navigation patterns to verify effectiveness and reliability

Describe alternatives you've considered
Calling APIs directly on each tab swap for "freshness"—but that greatly increases API traffic, reduces responsiveness, and is rarely necessary for most endpoints. Increasing cache TTL beyond 60s could risk stale data.

Additional context
Applies To: Enterprise AND Cloud (sample-web-ui frontend)

Expected Benefit:

• ~60-70% reduction in API calls when revisiting KVM tab
• ~70-80% cache hit rate for features/power/displays endpoints
• API calls per session reduced from ~15-20 to ~5-8
• Estimated 80-90% faster subsequent KVM session loads

Projected API Call Reduction:

• AMT Features: ~70% fewer (e.g., 20 → 6)
• Power State: ~70% fewer (e.g., 21 → 6)
• KVM Displays: ~40% fewer (e.g., 5 → 3)
• Consent code requests (Story 2): consolidated, ~0-1 per 2 minutes

Effort: Low (4-6 hours)

Risks:

• Power state may go stale in rare cases; 60s TTL prevents most issues
• All logic is client-side for minimal risk—no backend changes
• Conservative TTL and graceful cache miss handling ensures stability

Cloud Impact: Cloud deployments also benefit from reduced load on MPS/RPS APIs.

Proposed Implementation Steps:

• Add cache maps w/ TTL for each endpoint
• Integrate cache logic in the relevant Angular services
• Ensure invalidation logic (setDisplaySelection, tab switches, logout, etc. )
• Test navigation, tab switch, and regression to validate cache effectiveness

---

Relevant code for implementation:

• src/app/devices/devices.service.ts – Central API service for devices. Methods to update:

  • getAMTFeatures(guid: string): Observable<AMTFeaturesResponse>
    (source)
  • getPowerState(deviceId: string): Observable<PowerState>
    ([source](https://github.com/device-management-toolkit/sample-web-ui/blob/main/src/app/devices/devices. service.ts#L400-L427))
  • Example snippet for caching pattern:

    // Pseudocode for TTL cache in DevicesService:
    private amtFeaturesCache = new Map<string, { value: AMTFeaturesResponse, expiry: number }>();
    getAMTFeatures(guid: string): Observable<AMTFeaturesResponse> {
      const cached = this.amtFeaturesCache. get(guid);
      if (cached && cached.expiry > Date.  now()) {
        return of(cached.value);
      }
      return this.http.get<AMTFeaturesResponse>(...).pipe(
        tap(data => this.amtFeaturesCache.set(guid, { value: data, expiry:  Date.now() + 60000 }))
      )
    }

• Usage in major components:

  • src/app/devices/kvm/kvm. component.ts (KVM tab)
    • Calls getAMTFeatures, getPowerState, and display endpoints as users switch tabs. - [see example lines](https://github.com/device-management-toolkit/sample-web-ui/blob/main/src/app/devices/kvm/kvm. component.ts#L410-L422)
  • src/app/devices/device-toolbar/device-toolbar.component.ts
    • Loads power and features on tab switches/device change
  • Note: Similar patterns in sol.component.ts and any display-selection logic.

• Be cautious with caching Power State calls; invalidation or TTL is preferred as state can change outside app control.

View more code in the repo.

[nmgaston]

Moving back to TODO until other 3 KVM related PRs are complete.