Receive monitoring time

docs/dev/mockoon.json

@@ -437,7 +437,7 @@
           "rulesOperator": "OR",
           "disableTemplating": false,
           "fallbackTo404": false,
-          "default": false,
+          "default": true,
           "crudKey": "id",
           "callbacks": []
         },
@@ -532,7 +532,7 @@
           "rulesOperator": "OR",
           "disableTemplating": false,
           "fallbackTo404": false,
-          "default": true,
+          "default": false,
           "crudKey": "id",
           "callbacks": []
         },

framework/python/src/core/session.py

@@ -106,6 +106,7 @@ def __init__(self, root_dir):
     # Start time of testing
     self._started = None
     self._finished = None
+    self._monitor_started = None
 
     # Current testing results
     self._results = []
@@ -187,6 +188,12 @@ def start(self):
   def start_timer(self):
     self._started = datetime.datetime.now()
 
+  def start_monitor_timer(self):
+    self._monitor_started = datetime.datetime.now()
+
+  def get_monitor_started(self):
+    return self._monitor_started
+
   def get_started(self):
     return self._started
 
@@ -440,6 +447,8 @@ def get_status(self) -> TestrunStatus:
     return self._status
 
   def set_status(self, status: TestrunStatus):
+    if status == TestrunStatus.MONITORING and self._monitor_started is None:
+      self.start_monitor_timer()
     self._status = status
 
   def get_result(self) -> TestrunResult:
@@ -904,6 +913,7 @@ def reset(self):
     self._results = []
     self._started = None
     self._finished = None
+    self._monitor_started = None
     self._ifaces = IPControl.get_sys_interfaces()
 
   def to_json(self):
@@ -923,6 +933,7 @@ def to_json(self):
         'device': device,
         'started': self.get_started(),
         'finished': self.get_finished(),
+        'monitor_started': self.get_monitor_started(),
         'tests': results
     }
 

modules/ui/src/app/app.store.spec.ts

@@ -73,6 +73,9 @@ const mock = (() => {
     setObject: (key: string, value: object) => {
       store[key] = JSON.stringify(value);
     },
+    removeItem: (key: string) => {
+      delete store[key];
+    },
     clear: () => {
       store = {};
     },

modules/ui/src/app/model/testrun-status.ts

@@ -53,6 +53,7 @@ export interface TestrunStatus {
   report: string;
   export: string;
   tags: string[] | null;
+  monitor_started?: string | null;
 }
 
 export interface HistoryTestrun extends TestrunReport {

modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.html

@@ -118,13 +118,12 @@
 </ng-template>
 
 <ng-template #Monitoring>
-  <ng-container
-    *ngTemplateOutlet="
-      Spinner;
-      context: {
-        text: 'Please wait, this could take a few minutes',
-      }
-    "></ng-container>
+  @if (monitorPeriod) {
+    <app-timer
+      [duration]="monitorPeriod"
+      [startTime]="systemStatus.monitor_started">
+    </app-timer>
+  }
 </ng-template>
 
 <ng-template #Spinner let-text="text">

modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.scss

@@ -177,6 +177,25 @@
   }
 }
 
+.progress-card-result-loading-monitoring {
+  display: flex;
+  align-items: center;
+
+  .monitoring-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex: 1;
+    margin-left: 32px;
+    gap: 32px;
+    flex-wrap: wrap;
+
+    .progress-card-result-title {
+      margin-left: 0;
+    }
+  }
+}
+
 @for $i from 1 through 100 {
   .progress-value-#{$i} ::ng-deep .mdc-linear-progress__primary-bar {
     transform: scaleX(1) !important;

modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.spec.ts

@@ -418,6 +418,7 @@ describe('ProgressStatusCardComponent', () => {
     describe('with available systemStatus$ data, as Monitoring', () => {
       beforeEach(() => {
         component.systemStatus = MOCK_PROGRESS_DATA_MONITORING;
+        component.monitorPeriod = 300;
         fixture.detectChanges();
       });
 
@@ -433,15 +434,12 @@ describe('ProgressStatusCardComponent', () => {
         expect(progressCardEl?.classList).toContain('progress');
       });
 
-      it('should have progress card result title', () => {
+      it('should not have progress card result title during Monitoring', () => {
         const progressCardResultEl = compiled.querySelector(
           '.progress-card-result-title'
         );
 
-        expect(progressCardResultEl).not.toBeNull();
-        expect(progressCardResultEl?.textContent?.trim()).toEqual(
-          'Please wait, this could take a few minutes'
-        );
+        expect(progressCardResultEl).toBeNull();
       });
 
       it('should have progress card status text as "Monitoring"', () => {
@@ -452,6 +450,20 @@ describe('ProgressStatusCardComponent', () => {
         expect(progressCardStatusText).not.toBeNull();
         expect(progressCardStatusText?.textContent).toEqual('Monitoring');
       });
+
+      it('should render the countdown timer component during Monitoring', () => {
+        const timerEl = compiled.querySelector('app-timer');
+
+        expect(timerEl).not.toBeNull();
+      });
+
+      it('should not render timer component when monitorPeriod is not defined', () => {
+        fixture.componentRef.setInput('monitorPeriod', undefined);
+        fixture.detectChanges();
+
+        const timerEl = compiled.querySelector('app-timer');
+        expect(timerEl).toBeNull();
+      });
     });
 
     describe('with available systemStatus$ data, as "Proceed"', () => {

modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.ts

@@ -13,7 +13,15 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Input,
+  OnDestroy,
+  OnInit,
+  inject,
+} from '@angular/core';
 import {
   ResultOfTestrun,
   StatusOfTestResult,
@@ -32,6 +40,12 @@ import { MatDialogModule } from '@angular/material/dialog';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
+import { TimerComponent } from '../timer/timer.component';
+import { Store } from '@ngrx/store';
+import { AppState } from '../../../../store/state';
+import { selectSystemConfig } from '../../../../store/selectors';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
   selector: 'app-testrun-status-card',
@@ -49,14 +63,39 @@ import { MatButtonModule } from '@angular/material/button';
     MatExpansionModule,
     ReactiveFormsModule,
     MatTooltipModule,
+    TimerComponent,
   ],
 })
-export class TestrunStatusCardComponent {
+export class TestrunStatusCardComponent implements OnInit, OnDestroy {
   @Input() systemStatus!: TestrunStatus;
+  @Input() monitorPeriod?: number;
+
+  private readonly store = inject(Store<AppState>, { optional: true });
+  private readonly cdr = inject(ChangeDetectorRef);
+  private destroy$ = new Subject<void>();
 
   public readonly StatusOfTestrun = StatusOfTestrun;
   public readonly TestingType = TestingType;
 
+  ngOnInit(): void {
+    if (this.store && this.monitorPeriod === undefined) {
+      this.store
+        .select(selectSystemConfig)
+        .pipe(takeUntil(this.destroy$))
+        .subscribe(config => {
+          if (config?.monitor_period) {
+            this.monitorPeriod = Number(config.monitor_period);
+            this.cdr.markForCheck();
+          }
+        });
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
   public getClass(
     status: StatusOfTestrun,
     result?: ResultOfTestrun

modules/ui/src/app/pages/testrun/components/timer/timer.component.html

@@ -0,0 +1,62 @@
+<!--
+Copyright 2023 Google LLC
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+@if (!isExpired && remainingSeconds > 0) {
+  <div
+    id="monitoring-countdown-timer"
+    class="monitoring-timer timer-widget"
+    role="timer"
+    aria-live="polite"
+    aria-atomic="true"
+    [attr.aria-label]="timerAriaLabel">
+    <div class="timer-circle-container">
+      <svg class="timer-circle-svg" viewBox="0 0 254 254" aria-hidden="true">
+        <!-- Layer 1: Light blue background circle -->
+        <circle
+          class="timer-circle-layer-bg"
+          cx="127"
+          cy="127"
+          r="122"
+          fill="none" />
+        <!-- Layer 2: Blue progress circle (adds each tick) -->
+        <circle
+          class="timer-circle-layer-progress"
+          cx="127"
+          cy="127"
+          r="122"
+          fill="none"
+          [attr.stroke-linecap]="progressFraction > 0 ? 'round' : 'butt'"
+          [attr.stroke-dasharray]="circleCircumference"
+          [attr.stroke-dashoffset]="strokeDashoffset"
+          [style.opacity]="progressFraction > 0 ? 1 : 0" />
+      </svg>
+      <div class="timer-center-content">
+        <span
+          id="monitoring-timer-value"
+          class="timer-countdown timer-value"
+          aria-hidden="true"
+          >{{ formattedTime }}</span
+        >
+        <span class="timer-label" aria-hidden="true">time remaining</span>
+      </div>
+    </div>
+    <span
+      class="cdk-visually-hidden sr-only"
+      aria-live="polite"
+      aria-atomic="true">
+      {{ liveAnnouncementText }}
+    </span>
+  </div>
+}