SEAB-6341: Add Metrics type icons in versions tab and Rescent Versions sidebar

cypress/e2e/group3/metrics.ts

@@ -22,6 +22,10 @@ describe('Dockstore Metrics', () => {
       }).as('getMetrics');
     });
     cy.visit('/workflows/github.com/A/l:master');
+    goToTab('Versions');
+    cy.get('[data-cy=execution-metrics-icon]').should('be.visible');
+    cy.get('[data-cy=validation-metrics-icon]').should('be.visible');
+
     cy.wait('@getMetrics');
     goToTab('Metrics');
 

src/app/workflow/executions/executions-tab.component.ts

@@ -13,7 +13,7 @@
  *    See the License for the specific language governing permissions and
  *    limitations under the License.
  */
-import { Component, Input, OnChanges, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core';
 import { EntryTab } from '../../shared/entry/entry-tab';
 import {
   CloudInstance,
@@ -122,6 +122,9 @@
   @Input() entry: BioWorkflow | Service | Notebook;
   @Input() version: WorkflowVersion;
 
+  @Output() showExecutionIcon = new EventEmitter<boolean>();
+  @Output() showValidationIcon = new EventEmitter<boolean>();
+
   constructor(
     private extendedGA4GHService: ExtendedGA4GHService,
     private alertService: AlertService,
@@ -205,6 +208,10 @@
     const metrics = this.metrics.get(partner);
     this.executionMetricsExist = metrics?.executionStatusCount !== null;
 
+    if (this.executionMetricsExist) {
+      this.showExecutionIcon.emit(true);
+    }
+
     if (metrics?.executionStatusCount) {
       this.executionStatusToMetrics = new Map(Object.entries(metrics.executionStatusCount.count));
 
@@ -284,6 +291,7 @@
     if (this.validatorToolMetricsExist) {
       this.validatorToolToValidatorInfo = new Map(Object.entries(this.metrics.get(partner).validationStatus.validatorTools));
       this.validatorTools = Array.from(this.validatorToolToValidatorInfo.keys());
+      this.showValidationIcon.emit(true);
 
       if (this.validatorTools.length > 0) {
         this.onSelectedValidatorToolChange(this.validatorTools[0]);

src/app/workflow/versions/versions.component.html

@@ -217,7 +217,18 @@
         >
       </th>
       <td mat-cell *matCellDef="let version">
-        <mat-icon data-cy="metrics" *ngIf="version.metricsByPlatform && (version.metricsByPlatform | json) !== '{}'">check</mat-icon>
+        <img
+          *ngIf="hasExecutionMetrics"
+          src="assets/svg/manufacturing.svg"
+          alt="Execution Metrics Icon"
+          matTooltip="This version contains execution metrics."
+        />
+        <img
+          *ngIf="hasValidationMetrics"
+          src="assets/svg/data_check.svg"
+          alt="Validation Metrics Icon"
+          matTooltip="This version contains validation metrics."
+        />
       </td>
     </ng-container>
 

src/app/workflow/versions/versions.component.ts

@@ -82,6 +82,9 @@
   @Input() workflowId: number;
   @Input() verifiedVersionPlatforms: Array<VersionVerifiedPlatform>;
   @Input() publicPage: boolean;
+  @Input() hasExecutionMetrics!: boolean;
+  @Input() hasValidationMetrics!: boolean;
+
   _selectedVersion: WorkflowVersion;
   Dockstore = Dockstore;
   @Input() set selectedVersion(value: WorkflowVersion) {

src/app/workflow/workflow.component.html

@@ -343,6 +343,8 @@ <h3>
                 [canRead]="canRead"
                 [canWrite]="canWrite"
                 [isOwner]="isOwner"
+                [hasExecutionMetrics]="hasExecutionMetrics"
+                [hasValidationMetrics]="hasValidationMetrics"
               >
               </app-versions-workflow>
             </div>
@@ -456,7 +458,12 @@ <h3>
             </mat-tab>
           </div>
           <mat-tab id="metricsTab" label="Metrics">
-            <app-executions-tab [entry]="workflow" [version]="selectedVersion"></app-executions-tab>
+            <app-executions-tab
+              [entry]="workflow"
+              [version]="selectedVersion"
+              (showExecutionIcon)="showExecutionMetricsIcon($event)"
+              (showValidationIcon)="showValidationMetricsIcon($event)"
+            ></app-executions-tab>
           </mat-tab>
           <mat-tab *ngIf="!isPublic() && isHosted() && isOwner" id="permissionsTab" label="Permissions">
             <app-permissions [workflow]="workflow"></app-permissions>
@@ -514,6 +521,20 @@ <h3>
                       </a>
                     </mat-chip>
                   </span>
+                  <img
+                    *ngIf="hasExecutionMetrics"
+                    src="assets/svg/manufacturing.svg"
+                    alt="Execution Metrics Icon"
+                    data-cy="execution-metrics-icon"
+                    matTooltip="This version contains execution metrics."
+                  />
+                  <img
+                    *ngIf="hasValidationMetrics"
+                    src="assets/svg/data_check.svg"
+                    alt="Validation Metrics Icon"
+                    data-cy="validation-metrics-icon"
+                    matTooltip="This version contains validation metrics."
+                  />
                 </div>
                 <small>{{ sortedVersion.last_modified | date }}</small>
               </div>

src/app/workflow/workflow.component.ts

@@ -208,6 +208,9 @@
   public selectedVersionDoi: Doi | undefined;
   public selectedConceptDoi: Doi | undefined;
 
+  public hasExecutionMetrics: boolean = false;
+  public hasValidationMetrics: boolean = false;
+
   @Input() user;
   @Input() selectedVersion: WorkflowVersion;
   @Input() shouldClearState: boolean = true;
@@ -558,6 +561,14 @@
     });
   }
 
+  showExecutionMetricsIcon(showExecutionMetricsIcon: boolean) {
+    this.hasExecutionMetrics = showExecutionMetricsIcon;
+  }
+
+  showValidationMetricsIcon(showValidationMetricsIcon: boolean) {
+    this.hasValidationMetrics = showValidationMetricsIcon;
+  }
+
   resetWorkflowEditData() {
     const labelArray = this.dockstoreService.getLabelStrings(this.workflow.labels);
     const workflowLabels = labelArray;