Rename Pilot test results

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

@@ -15,6 +15,7 @@
  */
 import {
   IResult,
+  RequiredResult,
   StatusOfTestrun,
   TestrunStatus,
   TestsData,
@@ -26,17 +27,20 @@ export const TEST_DATA_RESULT: IResult[] = [
     name: 'dns.network.hostname_resolution',
     description: 'The device should resolve hostnames',
     result: 'Compliant',
+    required_result: RequiredResult.Required,
   },
   {
     name: 'dns.network.from_dhcp',
     description:
       'The device should use the DNS server provided by the DHCP server',
     result: 'Non-Compliant',
+    required_result: RequiredResult.Informational,
   },
   {
     name: 'dns.mdns',
     description: 'Does the device has MDNS (or any kind of IP multicast)',
     result: 'Not Started',
+    required_result: RequiredResult.RequiredIfApplicable,
   },
 ];
 
@@ -50,6 +54,7 @@ export const TEST_DATA_RESULT_WITH_RECOMMENDATIONS: IResult[] = [
       'An example of a step to resolve',
       'Disable any running NTP server',
     ],
+    required_result: RequiredResult.Required,
   },
 ];
 
@@ -58,17 +63,20 @@ export const TEST_DATA_RESULT_WITH_ERROR: IResult[] = [
     name: 'dns.network.hostname_resolution',
     description: 'The device should resolve hostnames',
     result: 'Compliant',
+    required_result: RequiredResult.Required,
   },
   {
     name: 'dns.network.from_dhcp',
     description:
       'The device should use the DNS server provided by the DHCP server',
     result: 'Error',
+    required_result: RequiredResult.Required,
   },
   {
     name: 'dns.mdns',
     description: 'Does the device has MDNS (or any kind of IP multicast)',
     result: 'Not Started',
+    required_result: RequiredResult.Required,
   },
 ];
 

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

@@ -50,6 +50,13 @@ export interface IResult {
   description: string;
   result: string;
   recommendations?: string[];
+  required_result: RequiredResult;
+}
+
+export enum RequiredResult {
+  Informational = 'Informational',
+  Required = 'Required',
+  RequiredIfApplicable = 'Required if Applicable',
 }
 
 export enum StatusOfTestrun {
@@ -67,6 +74,8 @@ export enum StatusOfTestrun {
   Monitoring = 'Monitoring',
   Error = 'Error',
   Validating = 'Validating Network',
+  Proceed = 'Proceed',
+  DoNotProceed = 'Do Not Proceed',
 }
 
 export enum StatusOfTestResult {

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

@@ -125,7 +125,16 @@
 
 <ng-template #Finished let-data="data">
   <div>
-    <p class="progress-card-result-title">Test result</p>
+    <p
+      class="progress-card-result-title"
+      *ngIf="data.device.test_pack !== TestingType.Pilot">
+      Test result
+    </p>
+    <p
+      class="progress-card-result-title"
+      *ngIf="data.device.test_pack === TestingType.Pilot">
+      Pilot Recommendation
+    </p>
     <p class="progress-card-result-text">
       <span>{{ data.status }}</span>
     </p>

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

@@ -65,11 +65,13 @@ describe('ProgressStatusCardComponent', () => {
         StatusOfTestrun.Compliant,
         StatusOfTestrun.CompliantLimited,
         StatusOfTestrun.CompliantHigh,
+        StatusOfTestrun.Proceed,
       ];
 
       const statusesForCompletedFailedClass = [
         StatusOfTestrun.NonCompliant,
         StatusOfTestrun.Error,
+        StatusOfTestrun.DoNotProceed,
       ];
 
       statusesForProgressClass.forEach(testCase => {

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

@@ -21,6 +21,7 @@ import {
   TestrunStatus,
   TestsData,
 } from '../../../../model/testrun-status';
+import { TestingType } from '../../../../model/device';
 
 @Component({
   selector: 'app-testrun-status-card',
@@ -32,6 +33,7 @@ export class TestrunStatusCardComponent {
   @Input() systemStatus!: TestrunStatus;
 
   public readonly StatusOfTestrun = StatusOfTestrun;
+  public readonly TestingType = TestingType;
 
   public getClass(status: string): {
     progress: boolean;
@@ -43,11 +45,13 @@ export class TestrunStatusCardComponent {
       progress: this.isProgressStatus(status),
       'completed-success':
         status === StatusOfTestrun.Compliant ||
+        status === StatusOfTestrun.Proceed ||
         status === StatusOfTestrun.CompliantLimited ||
         status === StatusOfTestrun.CompliantHigh ||
         status === StatusOfTestrun.SmartReady,
       'completed-failed':
         status === StatusOfTestrun.NonCompliant ||
+        status === StatusOfTestrun.DoNotProceed ||
         status === StatusOfTestrun.Error,
       canceled:
         status === StatusOfTestrun.Cancelled ||

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

@@ -16,9 +16,10 @@
 <ng-container *ngIf="dataSource">
   <mat-accordion displayMode="flat" multi class="tests-container" tabindex="0">
     <section class="tests-header-row">
+      <span class="tests-header-cell">Result</span>
       <span class="tests-header-cell">Name</span>
       <span class="tests-header-cell">Description</span>
-      <span class="tests-header-cell">Result</span>
+      <span class="tests-header-cell">Required result</span>
       <span class="tests-header-cell expander-button-cell">
         <button
           *ngIf="stepsToResolveCount"
@@ -70,11 +71,19 @@
 </ng-container>
 
 <ng-template #ItemData let-item="item">
-  <span class="tests-item-cell">{{ item.name }}</span>
-  <span class="tests-item-cell">{{ item.description }}</span>
   <span class="tests-item-cell tests-item-cell-result">
     <span class="cell-result-text" [ngClass]="getResultClass(item.result)">
       <span>{{ item.result }}</span>
     </span>
   </span>
+  <span class="tests-item-cell">{{ item.name }}</span>
+  <span class="tests-item-cell">{{ item.description }}</span>
+  <span
+    class="tests-item-cell tests-item-cell-required-result"
+    [ngClass]="getRequiredResultClass(item.required_result)">
+    <span class="cell-result-required-icon"></span>
+    <span class="cell-result-required-text">
+      {{ item.required_result }}
+    </span>
+  </span>
 </ng-template>

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

@@ -88,17 +88,17 @@ $expander-button-size: 28px;
 .tests-item-row {
   min-height: $row-height;
   height: auto;
-  grid-template-columns: 1fr 2.2fr 160px 20px;
+  grid-template-columns: 150px 1fr 2.2fr 222px 20px;
   border-bottom: 1px solid $lighter-grey;
 }
 
 .tests-header-row {
-  grid-template-columns: 1fr 2.2fr 150px $expander-button-size;
+  grid-template-columns: 150px 1fr 2.2fr 216px $expander-button-size;
 }
 
 .expansion-panel-header ::ng-deep.mat-content {
   display: grid;
-  grid-template-columns: 1fr 2.2fr 154px;
+  grid-template-columns: 150px 1fr 2.2fr 216px;
 }
 
 .expansion-panel-header ::ng-deep .mat-expansion-indicator {
@@ -129,8 +129,8 @@ $expander-button-size: 28px;
 
 .expansion-panel-row ::ng-deep.mat-expansion-panel-body {
   display: grid;
-  grid-template-columns: 1fr 2.2fr 160px 20px;
-  grid-template-areas: '. description . .';
+  grid-template-columns: 150px 1fr 2.2fr 216px 20px;
+  grid-template-areas: '. . description . .';
 }
 
 .cel-description {
@@ -190,3 +190,54 @@ $expander-button-size: 28px;
   border-radius: 0;
   box-shadow: none;
 }
+
+.tests-item-cell-required-result {
+  display: flex;
+  align-items: center;
+  .cell-result-required-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 14px;
+    height: 14px;
+    border-radius: 20px;
+    font-size: 12px;
+    &::before {
+      font-family: 'Material Symbols Outlined';
+      line-height: 14px;
+    }
+  }
+  &.informational {
+    color: #146c2e;
+    .cell-result-required-icon {
+      background: #146c2e;
+      color: #ffffff;
+      &::before {
+        content: 'info_i';
+      }
+    }
+  }
+  &.required {
+    color: #1f1f1f;
+    .cell-result-required-icon {
+      background: #1f1f1f;
+      color: #e1e3e1;
+      &::before {
+        content: 'asterisk';
+      }
+    }
+  }
+  &.required-if-applicable {
+    color: #00639b;
+    .cell-result-required-icon {
+      background: #00639b;
+      color: #e1e3e1;
+      &::before {
+        content: 'asterisk';
+      }
+    }
+  }
+  .cell-result-required-text {
+    padding-left: 8px;
+  }
+}

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

@@ -17,7 +17,11 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { TestrunTableComponent } from './testrun-table.component';
 
-import { IResult, StatusOfTestResult } from '../../../../model/testrun-status';
+import {
+  IResult,
+  RequiredResult,
+  StatusOfTestResult,
+} from '../../../../model/testrun-status';
 import {
   TEST_DATA,
   TEST_DATA_RESULT,
@@ -82,6 +86,20 @@ describe('ProgressTableComponent', () => {
 
       expect(result).toEqual('Expand all rows');
     });
+
+    it('#getRequiredResultClass should return class', () => {
+      const result1 = component.getRequiredResultClass(
+        RequiredResult.Informational
+      );
+      const result2 = component.getRequiredResultClass(
+        RequiredResult.RequiredIfApplicable
+      );
+      const result3 = component.getRequiredResultClass(RequiredResult.Required);
+
+      expect(result1).toEqual('informational');
+      expect(result2).toEqual('required-if-applicable');
+      expect(result3).toEqual('required');
+    });
   });
 
   describe('DOM tests', () => {

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

@@ -53,6 +53,11 @@ export class TestrunTableComponent {
   public getResultClass(result: string): StatusResultClassName {
     return this.testRunService.getResultClass(result);
   }
+
+  public getRequiredResultClass(result: string): string {
+    return result.split(' ').join('-').toLowerCase();
+  }
+
   public getAriaLabel(): string {
     const action = this.isAllCollapsed ? 'Expand' : 'Collapse';
     const message = this.stepsToResolveCount === 1 ? 'row' : 'all rows';