From 5be4952a0d3596afff181b6e667baabd698a9574 Mon Sep 17 00:00:00 2001
From: Andrey Melnikov <vafilor@gmail.com>
Date: Fri, 18 Dec 2020 11:50:35 -0800
Subject: [PATCH 1/2] fix: align workflow execution columns so metrics are
 flush with the to. Also fix issue where metrics all expanded when one was
 selected to expand. Now it's each individual one.

---
 .../workflow-executions-list.component.html      | 16 ++++++++--------
 .../workflow-executions-list.component.scss      |  5 +++++
 .../workflow-executions-list.component.ts        | 10 +++++++---
 src/styles/flex-styles.scss                      |  5 +++++
 4 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/src/app/workflow/workflow-executions-list/workflow-executions-list.component.html b/src/app/workflow/workflow-executions-list/workflow-executions-list.component.html
index c6b662cb..67b612fe 100644
--- a/src/app/workflow/workflow-executions-list/workflow-executions-list.component.html
+++ b/src/app/workflow/workflow-executions-list/workflow-executions-list.component.html
@@ -66,25 +66,25 @@
             <cdk-header-cell *cdkHeaderCellDef mat-sort-header class="ml-4">Metrics</cdk-header-cell>
             <cdk-cell *cdkCellDef="let workflow" class="ml-2">
                 <ng-container *ngIf="workflow.metrics">
-                    <table class="font-roboto">
+                    <table class="font-roboto font-size-smaller">
                         <ng-container *ngFor="let metric of workflow.metrics; let index = index">
-                            <tr *ngIf="index == 0 || showAllMetrics">
+                            <tr *ngIf="index == 0 || showAllMetrics.get(workflow.uid)">
                                 <td class="pr-2 text-left">
-                                    <strong>{{metric.name}}</strong>
+                                    {{metric.name}}
                                 </td>
                                 <td *ngIf="metric.format === '%'" class="text-right">
                                     {{metric.value}}%
                                 </td>
-                                <td *ngIf="!metric.format" class="text-right">
+                                <td *ngIf="!metric.format" class="text-right font-medium-gray">
                                     {{metric.value}}
                                 </td>
                             </tr>
                         </ng-container>
                     </table>
 
-                    <div class="font-roboto font-size-regular underline pointer-hover mt-3" (click)="this.toggleShowMetrics()">
-                        <span *ngIf="showAllMetrics">Hide metrics</span>
-                        <span *ngIf="!showAllMetrics">Show all metrics</span>
+                    <div class="font-roboto font-size-regular underline pointer-hover mt-3" (click)="this.toggleShowMetrics(workflow.uid)">
+                        <span *ngIf="showAllMetrics.get(workflow.uid)">Hide metrics</span>
+                        <span *ngIf="!showAllMetrics.get(workflow.uid)">Show all metrics</span>
                     </div>
                 </ng-container>
             </cdk-cell>
@@ -119,7 +119,7 @@
         <!-- Header and Row Declarations -->
         <cdk-header-row *cdkHeaderRowDef="displayedColumns" class="op-table-header d-flex"></cdk-header-row>
         <cdk-row *cdkRowDef="let row; columns: displayedColumns"
-                 class="d-flex flex-wrap op-table-row align-items-baseline">
+                 class="d-flex flex-wrap op-table-row align-items-flex-start">
         </cdk-row>
     </cdk-table>
 </div>
diff --git a/src/app/workflow/workflow-executions-list/workflow-executions-list.component.scss b/src/app/workflow/workflow-executions-list/workflow-executions-list.component.scss
index f28f00b2..d7643699 100644
--- a/src/app/workflow/workflow-executions-list/workflow-executions-list.component.scss
+++ b/src/app/workflow/workflow-executions-list/workflow-executions-list.component.scss
@@ -38,6 +38,11 @@
 
   .cdk-column-metrics {
     flex-basis: 200px;
+
+    table {
+      position: relative;
+      top: -1px
+    }
   }
 
   .cdk-column-actions {
diff --git a/src/app/workflow/workflow-executions-list/workflow-executions-list.component.ts b/src/app/workflow/workflow-executions-list/workflow-executions-list.component.ts
index 0cf364fe..d44bc59a 100644
--- a/src/app/workflow/workflow-executions-list/workflow-executions-list.component.ts
+++ b/src/app/workflow/workflow-executions-list/workflow-executions-list.component.ts
@@ -24,7 +24,7 @@ import { PermissionService } from '../../permissions/permission.service';
 })
 export class WorkflowExecutionsListComponent implements OnInit, OnDestroy {
     private snackbarRef: MatSnackBarRef<SimpleSnackBar>;
-    showAllMetrics = false;
+    showAllMetrics = new Map<string, boolean>();
 
     @Input() displayedColumns = ['name', 'status', 'start', 'end', 'metrics', 'template', 'createdAt', 'spacer', 'actions', 'labels'];
     @Input() sort = 'createdAt';
@@ -128,7 +128,11 @@ export class WorkflowExecutionsListComponent implements OnInit, OnDestroy {
         this.sortChange.emit(event);
     }
 
-    toggleShowMetrics() {
-        this.showAllMetrics = !this.showAllMetrics;
+    toggleShowMetrics(workflowUid: string) {
+        if (this.showAllMetrics.get(workflowUid)) {
+            this.showAllMetrics.set(workflowUid, false);
+        } else {
+            this.showAllMetrics.set(workflowUid, true);
+        }
     }
 }
diff --git a/src/styles/flex-styles.scss b/src/styles/flex-styles.scss
index 2f239ba6..8433c6e0 100644
--- a/src/styles/flex-styles.scss
+++ b/src/styles/flex-styles.scss
@@ -30,6 +30,10 @@
   align-items: center;
 }
 
+.align-items-flex-start {
+  align-items: flex-start;
+}
+
 .justify-content-between {
   justify-content: space-between;
 }
@@ -38,6 +42,7 @@
   justify-content: center;
 }
 
+
 @for $i from 1 through 10 {
   .flex-grow-#{$i} {
     flex-grow: $i;

From e7cf6c60d836e77cc36ca4f27d31ba29e25061f7 Mon Sep 17 00:00:00 2001
From: Andrey Melnikov <vafilor@gmail.com>
Date: Fri, 18 Dec 2020 12:10:52 -0800
Subject: [PATCH 2/2] chore: codacy

---
 .../workflow-executions-list.component.scss                     | 2 +-
 src/styles/flex-styles.scss                                     | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/app/workflow/workflow-executions-list/workflow-executions-list.component.scss b/src/app/workflow/workflow-executions-list/workflow-executions-list.component.scss
index d7643699..2e702bdc 100644
--- a/src/app/workflow/workflow-executions-list/workflow-executions-list.component.scss
+++ b/src/app/workflow/workflow-executions-list/workflow-executions-list.component.scss
@@ -41,7 +41,7 @@
 
     table {
       position: relative;
-      top: -1px
+      top: -1px;
     }
   }
 
diff --git a/src/styles/flex-styles.scss b/src/styles/flex-styles.scss
index 8433c6e0..ae36e3d1 100644
--- a/src/styles/flex-styles.scss
+++ b/src/styles/flex-styles.scss
@@ -42,7 +42,6 @@
   justify-content: center;
 }
 
-
 @for $i from 1 through 10 {
   .flex-grow-#{$i} {
     flex-grow: $i;