Merge pull request #224 from Vafilor/fix/align.metrics

fix: align workflow execution columns so metrics are flush top
onepanelio · Dec 18, 2020 · 0c05669 · 0c05669
2 parents 3ab48a7 + e7cf6c6
commit 0c05669
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 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
@@ -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
@@ -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
@@ -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
@@ -30,6 +30,10 @@
   align-items: center;
 }
 
+.align-items-flex-start {
+  align-items: flex-start;
+}
+
 .justify-content-between {
   justify-content: space-between;
 }