Implement the counter on the FE

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": []
         },

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/pages/testrun/components/testrun-status-card/testrun-status-card.component.html

@@ -118,13 +118,9 @@
 </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"> </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>
+}

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

@@ -0,0 +1,108 @@
+/**
+ * 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.
+ */
+@use 'colors';
+@use 'variables';
+
+$timer-size: 254px;
+
+:host {
+  display: inline-block;
+  width: 100%;
+}
+
+.monitoring-timer {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 100%;
+  padding-top: 58px;
+
+  .timer-circle-container {
+    position: relative;
+    width: $timer-size;
+    height: $timer-size;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .timer-circle-svg {
+    width: $timer-size;
+    height: $timer-size;
+    transform: rotate(-90deg);
+    display: block;
+  }
+
+  /* Layer 1: Light blue background circle */
+  .timer-circle-layer-bg {
+    stroke: colors.$primary-container;
+    stroke-width: 10;
+  }
+
+  /* Layer 2: Blue progress circle that adds each tick */
+  .timer-circle-layer-progress {
+    stroke: colors.$primary;
+    stroke-width: 10;
+    transition: stroke-dashoffset 0.3s ease-out;
+  }
+
+  .timer-center-content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+  }
+
+  .timer-countdown {
+    font-family: variables.$font-primary;
+    font-size: 57px;
+    line-height: 64px;
+    font-weight: 500;
+    font-variant-numeric: tabular-nums;
+    letter-spacing: 0;
+    color: colors.$primary;
+  }
+
+  .timer-label {
+    position: absolute;
+    top: calc(50% + 36px);
+    font-family: 'Google Sans Flex', sans-serif;
+    font-size: 12px;
+    line-height: 16px;
+    color: colors.$on-surface-variant;
+    text-align: center;
+    white-space: nowrap;
+    font-weight: 500;
+  }
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}