Add information to Results box (Testing tab)

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

@@ -53,6 +53,7 @@ import { FocusManagerService } from './services/focus-manager.service';
 import { TestRunMqttService } from './services/test-run-mqtt.service';
 import { MOCK_ADAPTERS } from './mocks/settings.mock';
 import { TestingType } from './model/device';
+import { ResultOfTestrun, StatusOfTestrun } from './model/testrun-status';
 
 const mock = (() => {
   let store: { [key: string]: string } = {};
@@ -499,7 +500,8 @@ describe('AppStore', () => {
 
         store.overrideSelector(selectIsTestingComplete, true);
         store.overrideSelector(selectSystemStatus, {
-          status: 'Compliant',
+          result: ResultOfTestrun.Compliant,
+          status: StatusOfTestrun.Complete,
           mac_addr: '00:1e:42:35:73:c4',
           device: {
             manufacturer: 'Delta',

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

@@ -53,7 +53,7 @@ import {
   setTestModules,
   updateAdapters,
 } from './store/actions';
-import { StatusOfTestrun, TestrunStatus } from './model/testrun-status';
+import { ResultOfTestrun, TestrunStatus } from './model/testrun-status';
 import {
   Adapters,
   SettingMissedError,
@@ -333,7 +333,7 @@ export class AppStore extends ComponentStore<AppComponentState> {
       filter(([isTestingComplete]) => isTestingComplete === true),
       filter(
         ([, testrunStatus]) =>
-          testrunStatus?.status === StatusOfTestrun.Compliant &&
+          testrunStatus?.result === ResultOfTestrun.Compliant &&
           testrunStatus?.device.test_pack === TestingType.Pilot
       ),
       tap(() => {

modules/ui/src/app/components/download-report/download-report.component.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { StatusOfTestrun, TestrunStatus } from '../../model/testrun-status';
+import { ResultOfTestrun, TestrunStatus } from '../../model/testrun-status';
 import { CommonModule, DatePipe } from '@angular/common';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { ReportActionComponent } from '../report-action/report-action.component';
@@ -40,16 +40,16 @@ export class DownloadReportComponent extends ReportActionComponent {
     }
     return `${data.device.manufacturer} ${data.device.model} ${
       data.device.firmware
-    } ${data.status} ${this.getFormattedDateString(data.started)}`
+    } ${data.result ? data.result : data.status} ${this.getFormattedDateString(data.started)}`
       .replace(/ /g, '_')
       .toLowerCase();
   }
 
   getClass(data: TestrunStatus) {
-    if (data.status === StatusOfTestrun.Compliant) {
+    if (data.result === ResultOfTestrun.Compliant) {
       return `${this.class}-compliant`;
     }
-    if (data.status === StatusOfTestrun.NonCompliant) {
+    if (data.result === ResultOfTestrun.NonCompliant) {
       return `${this.class}-non-compliant`;
     }
     return this.class;

modules/ui/src/app/components/download-zip-modal/download-zip-modal.component.html

@@ -28,12 +28,15 @@
     class="testing-result"
     id="testing-result-main-info"
     [class]="
-      data.testrunStatus.status === StatusOfTestrun.Compliant ||
+      (data.testrunStatus.result === ResultOfTestrun.Compliant &&
+        data.testrunStatus.status === StatusOfTestrun.Complete) ||
       data.testrunStatus.status === StatusOfTestrun.Proceed
         ? 'success-result'
         : 'failed-result'
     ">
-    <p class="testing-result-status">{{ data.testrunStatus.status }}</p>
+    <p class="testing-result-status">
+      {{ getTestingResult(data.testrunStatus) }}
+    </p>
     <p class="testing-result-description">
       {{ data.testrunStatus.description }}
     </p>

modules/ui/src/app/components/download-zip-modal/download-zip-modal.component.ts

@@ -25,7 +25,11 @@ import { MatOptionModule } from '@angular/material/core';
 import { TestRunService } from '../../services/test-run.service';
 import { Routes } from '../../model/routes';
 import { Router, RouterLink } from '@angular/router';
-import { TestrunStatus, StatusOfTestrun } from '../../model/testrun-status';
+import {
+  TestrunStatus,
+  StatusOfTestrun,
+  ResultOfTestrun,
+} from '../../model/testrun-status';
 import { DownloadReportComponent } from '../download-report/download-report.component';
 import { Subject, takeUntil, timer } from 'rxjs';
 import { FocusManagerService } from '../../services/focus-manager.service';
@@ -80,6 +84,7 @@ export class DownloadZipModalComponent
   } as Profile;
   public readonly Routes = Routes;
   public readonly StatusOfTestrun = StatusOfTestrun;
+  public readonly ResultOfTestrun = ResultOfTestrun;
   profiles: Profile[] = [];
   selectedProfile: Profile;
   constructor(
@@ -165,6 +170,13 @@ export class DownloadZipModalComponent
     return this.testRunService.getRiskClass(riskResult);
   }
 
+  public getTestingResult(data: TestrunStatus): string {
+    if (data.status === StatusOfTestrun.Complete && data.result) {
+      return data.result;
+    }
+    return data.status;
+  }
+
   private getZipLink(reportURL: string): string {
     return reportURL.replace('report', 'export');
   }

modules/ui/src/app/mocks/reports.mock.ts

@@ -5,7 +5,8 @@ import { DeviceStatus, TestingType } from '../model/device';
 export const HISTORY = [
   {
     mac_addr: '01:02:03:04:05:06',
-    status: 'compliant',
+    status: 'Complete',
+    result: 'Compliant',
     device: {
       status: DeviceStatus.VALID,
       manufacturer: 'Delta',
@@ -20,7 +21,8 @@ export const HISTORY = [
     finished: '2023-06-23T10:17:10.123Z',
   },
   {
-    status: 'compliant',
+    status: 'Complete',
+    result: 'Compliant',
     mac_addr: '01:02:03:04:05:07',
     device: {
       status: DeviceStatus.VALID,
@@ -37,7 +39,8 @@ export const HISTORY = [
   },
   {
     mac_addr: null,
-    status: 'compliant',
+    status: 'Complete',
+    result: 'Compliant',
     device: {
       status: DeviceStatus.VALID,
       manufacturer: 'Delta',
@@ -56,7 +59,8 @@ export const HISTORY = [
 export const HISTORY_AFTER_REMOVE = [
   {
     mac_addr: '01:02:03:04:05:06',
-    status: 'compliant',
+    status: 'Complete',
+    result: 'Compliant',
     device: {
       status: DeviceStatus.VALID,
       manufacturer: 'Delta',
@@ -72,7 +76,8 @@ export const HISTORY_AFTER_REMOVE = [
   },
   {
     mac_addr: null,
-    status: 'compliant',
+    status: 'Complete',
+    result: 'Compliant',
     device: {
       status: DeviceStatus.VALID,
       manufacturer: 'Delta',
@@ -86,11 +91,12 @@ export const HISTORY_AFTER_REMOVE = [
     started: '2023-06-23T10:11:00.123Z',
     finished: '2023-06-23T10:17:10.123Z',
   },
-];
+] as TestrunStatus[];
 
 export const FORMATTED_HISTORY = [
   {
-    status: 'compliant',
+    status: 'Complete',
+    result: 'Compliant',
     mac_addr: '01:02:03:04:05:06',
     device: {
       status: DeviceStatus.VALID,
@@ -110,7 +116,8 @@ export const FORMATTED_HISTORY = [
     program: 'Device Qualification',
   },
   {
-    status: 'compliant',
+    status: 'Complete',
+    result: 'Compliant',
     mac_addr: '01:02:03:04:05:07',
     device: {
       status: DeviceStatus.VALID,
@@ -131,7 +138,8 @@ export const FORMATTED_HISTORY = [
   },
   {
     mac_addr: null,
-    status: 'compliant',
+    status: 'Complete',
+    result: 'Compliant',
     device: {
       status: DeviceStatus.VALID,
       manufacturer: 'Delta',
@@ -149,7 +157,7 @@ export const FORMATTED_HISTORY = [
     duration: '06m 10s',
     program: 'Device Qualification',
   },
-];
+] as HistoryTestrun[];
 
 export const FILTERS = {
   deviceInfo: 'test',

modules/ui/src/app/mocks/testrun.mock.ts

@@ -16,6 +16,7 @@
 import {
   IResult,
   RequiredResult,
+  ResultOfTestrun,
   StatusOfTestrun,
   TestrunStatus,
   TestsData,
@@ -95,12 +96,13 @@ export const TEST_DATA: TestsData = {
 };
 
 const PROGRESS_DATA_RESPONSE = (
-  status: string,
+  status: StatusOfTestrun,
   finished: string | null,
   tests: TestsData | IResult[],
-  report: string = ''
+  report: string = '',
+  result?: ResultOfTestrun
 ) => {
-  return {
+  const response = {
     status,
     mac_addr: '01:02:03:04:05:06',
     device: {
@@ -115,7 +117,11 @@ const PROGRESS_DATA_RESPONSE = (
     tests,
     report,
     tags: ['VSA', 'Other tag', 'And one more'],
-  };
+  } as TestrunStatus;
+  if (result) {
+    response.result = result;
+  }
+  return response;
 };
 
 export const MOCK_PROGRESS_DATA_CANCELLING: TestrunStatus =
@@ -126,18 +132,20 @@ export const MOCK_PROGRESS_DATA_IN_PROGRESS_EMPTY: TestrunStatus =
   PROGRESS_DATA_RESPONSE(StatusOfTestrun.InProgress, null, []);
 export const MOCK_PROGRESS_DATA_COMPLIANT: TestrunStatus =
   PROGRESS_DATA_RESPONSE(
-    StatusOfTestrun.Compliant,
+    StatusOfTestrun.Complete,
     '2023-06-22T09:20:00.123Z',
     TEST_DATA_RESULT,
-    'https://api.testrun.io/report.pdf'
+    'https://api.testrun.io/report.pdf',
+    ResultOfTestrun.Compliant
   );
 
 export const MOCK_PROGRESS_DATA_NON_COMPLIANT: TestrunStatus =
   PROGRESS_DATA_RESPONSE(
-    StatusOfTestrun.NonCompliant,
+    StatusOfTestrun.Complete,
     '2023-06-22T09:20:00.123Z',
     TEST_DATA_RESULT,
-    'https://api.testrun.io/report.pdf'
+    'https://api.testrun.io/report.pdf',
+    ResultOfTestrun.NonCompliant
   );
 
 export const MOCK_PROGRESS_DATA_CANCELLED: TestrunStatus =

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

@@ -17,7 +17,8 @@ import { Device } from './device';
 
 export interface TestrunStatus {
   mac_addr: string | null;
-  status: string;
+  status: StatusOfTestrun;
+  result?: ResultOfTestrun;
   description?: string;
   device: IDevice;
   started: string | null;
@@ -59,24 +60,28 @@ export enum RequiredResult {
   RequiredIfApplicable = 'Required if Applicable',
 }
 
+export enum ResultOfTestrun {
+  Compliant = 'Compliant', // used for Completed
+  NonCompliant = 'Non-Compliant', // used for Completed
+}
+
 export enum StatusOfTestrun {
   InProgress = 'In Progress',
   WaitingForDevice = 'Waiting for Device',
   Cancelled = 'Cancelled',
   Cancelling = 'Cancelling',
   Failed = 'Failed',
-  Compliant = 'Compliant', // used for Completed
   CompliantLimited = 'Compliant (Limited)',
   CompliantHigh = 'Compliant (High)',
-  NonCompliant = 'Non-Compliant', // used for Completed
-  SmartReady = 'Smart Ready', // used for Completed
+  SmartReady = 'Smart Ready',
   Idle = 'Idle',
   Monitoring = 'Monitoring',
   Starting = 'Starting',
   Error = 'Error',
   Validating = 'Validating Network',
-  Proceed = 'Proceed',
-  DoNotProceed = 'Do Not Proceed',
+  Complete = 'Complete', // device qualification
+  Proceed = 'Proceed', // pilot assessment
+  DoNotProceed = 'Do Not Proceed', // pilot assessment
 }
 
 export enum StatusOfTestResult {

modules/ui/src/app/pages/testrun/components/download-options/download-options.component.ts

@@ -26,7 +26,7 @@ import { MatSelectModule } from '@angular/material/select';
 import { CommonModule, DatePipe } from '@angular/common';
 import { MatIconModule } from '@angular/material/icon';
 import {
-  StatusOfTestrun,
+  ResultOfTestrun,
   TestrunStatus,
 } from '../../../../model/testrun-status';
 import { MatOptionSelectionChange } from '@angular/material/core';
@@ -113,9 +113,9 @@ export class DownloadOptionsComponent {
 
   sendGAEvent(data: TestrunStatus, type: string) {
     let event = `download_report_${type === DownloadOption.PDF ? 'pdf' : 'zip'}`;
-    if (data.status === StatusOfTestrun.Compliant) {
+    if (data.result === ResultOfTestrun.Compliant) {
       event += '_compliant';
-    } else if (data.status === StatusOfTestrun.NonCompliant) {
+    } else if (data.result === ResultOfTestrun.NonCompliant) {
       event += '_non_compliant';
     }
     // @ts-expect-error data layer is not null

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

@@ -16,7 +16,8 @@
 <ng-container *ngIf="systemStatus as data">
   <div
     class="progress-card"
-    [ngClass]="getClass(data.status)"
+    [class.progress-card-pilot]="data.device.test_pack === TestingType.Pilot"
+    [ngClass]="getClass(data.status, data.result)"
     aria-live="assertive"
     role="alert">
     <div>
@@ -125,11 +126,12 @@
 
 <ng-template #Finished let-data="data">
   <div>
-    <p
-      class="progress-card-result-title"
-      *ngIf="data.device.test_pack !== TestingType.Pilot">
-      Test result
+    <p class="progress-card-result-title">Test result</p>
+    <p class="progress-card-result-text">
+      <span>{{ getTestResult(data) }}</span>
     </p>
+  </div>
+  <div *ngIf="data.device.test_pack === TestingType.Pilot">
     <p
       class="progress-card-result-title"
       *ngIf="data.device.test_pack === TestingType.Pilot">

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

@@ -32,6 +32,10 @@
   box-sizing: border-box;
   padding: 16px 32px;
 
+  &-pilot {
+    gap: 6px;
+  }
+
   &.progress {
     background-color: mat.m2-get-color-from-palette($color-primary, 700);
   }