Add the ability to fully expand operation details with one click [BA-…

…5908] (#672)
DataBiosphere · Aug 15, 2019 · 0b68979 · 0b68979
1 parent 2f913f4
commit 0b68979
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 22 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,8 @@
 
 ### Added a link to the top-level execution directory for the job.
 
+### Added the ability to completely expand the operation details with one click.
+
 ## v1.5.0 Release Notes
 
 ### Added the ability -- if Job Manager is being run with access to a SAM server -- to see the contents of Google Storage log files within the UI.

diff --git a/ui/src/app/job-details/common/attempt/attempt.component.css b/ui/src/app/job-details/common/attempt/attempt.component.css
@@ -84,25 +84,25 @@ mat-expansion-panel.mat-expansion-panel .task-links {
 }
 
 mat-expansion-panel.mat-expansion-panel .task-status,
-mat-expansion-panel.mat-expansion-panel .task-duration,
 mat-expansion-panel.mat-expansion-panel .task-inputs,
-mat-expansion-panel.mat-expansion-panel .task-outputs {
-  width: 5rem;
+mat-expansion-panel.mat-expansion-panel .task-outputs,
+mat-expansion-panel.mat-expansion-panel .task-attempts {
+  width: 4.875rem;
 }
 
-mat-expansion-panel.mat-expansion-panel .task-attempts {
-  width: 5rem;
+mat-expansion-panel.mat-expansion-panel .task-duration {
+  width: 5.875rem;
 }
 
 :host-context(mat-accordion.mat-accordion.content) mat-expansion-panel.mat-expansion-panel .task-status,
-:host-context(mat-accordion.mat-accordion.content) mat-expansion-panel.mat-expansion-panel .task-duration,
 :host-context(mat-accordion.mat-accordion.content) mat-expansion-panel.mat-expansion-panel .task-inputs,
-:host-context(mat-accordion.mat-accordion.content) mat-expansion-panel.mat-expansion-panel .task-outputs {
-  width: 5rem;
+:host-context(mat-accordion.mat-accordion.content) mat-expansion-panel.mat-expansion-panel .task-outputs,
+:host-context(mat-accordion.mat-accordion.content) mat-expansion-panel.mat-expansion-panel .task-attempts {
+  width: 4.875rem;
 }
 
-:host-context(mat-accordion.mat-accordion.content) mat-expansion-panel.mat-expansion-panel .task-attempts {
-  width: 4.375rem;
+:host-context(mat-accordion.mat-accordion.content) mat-expansion-panel.mat-expansion-panel .task-duration {
+  width: 5.875rem;
 }
 
 mat-expansion-panel.mat-expansion-panel .task-links,

diff --git a/ui/src/app/job-details/common/debug-icons/resource-contents/resource-contents.component.html b/ui/src/app/job-details/common/debug-icons/resource-contents/resource-contents.component.html
@@ -2,9 +2,10 @@
   <h2 mat-dialog-title *ngIf="data">{{ data.resourceName }}</h2>
   <mat-dialog-content *ngIf="data && data.resourceContents">
     <span *ngIf="data.resourceType != 'json'" class="text">{{data.resourceContents}}</span>
-    <span *ngIf="data.resourceType == 'json'" class="json"><ngx-json-viewer [json]="resourceJson" [expanded]="false"></ngx-json-viewer></span>
+    <span *ngIf="data.resourceType == 'json'" class="json"><ngx-json-viewer #jsonViewer [json]="resourceJson" [expanded]="false"></ngx-json-viewer></span>
   </mat-dialog-content>
-  <mat-dialog-actions *ngIf="!!data.resourceLink">
-    <a [href]="data.resourceLink" target="_blank">go to file in Google console</a>
+  <mat-dialog-actions>
+    <a *ngIf="!!data.resourceLink" [href]="data.resourceLink" target="_blank">go to file in Google console</a>
+    <a *ngIf="!data.resourceLink && !isExpanded()" (click)="expandJson()">Expand All</a>
   </mat-dialog-actions>
 </div>
diff --git a/ui/src/app/job-details/common/debug-icons/resource-contents/resource-contents.component.ts b/ui/src/app/job-details/common/debug-icons/resource-contents/resource-contents.component.ts
@@ -1,5 +1,6 @@
-import {Component, Inject, OnInit} from "@angular/core";
+import {Component, Inject, OnInit, ViewChild} from "@angular/core";
 import {MAT_DIALOG_DATA} from "@angular/material";
+import {NgxJsonViewerComponent} from "ngx-json-viewer";
 
 @Component({
   selector: 'jm-resource-contents-component',
@@ -8,6 +9,7 @@ import {MAT_DIALOG_DATA} from "@angular/material";
 })
 export class JobResourceContentsComponent implements OnInit{
   resourceJson: object;
+  @ViewChild('jsonViewer') jsonViewer: NgxJsonViewerComponent;
 
   constructor(
     @Inject(MAT_DIALOG_DATA) public data: any) { }
@@ -17,4 +19,15 @@ export class JobResourceContentsComponent implements OnInit{
       this.resourceJson = JSON.parse(this.data.resourceContents);
     }
   }
+
+  expandJson(): void {
+    if (this.jsonViewer) {
+      this.jsonViewer.expanded = true;
+      this.jsonViewer.ngOnChanges();
+    }
+  }
+
+  isExpanded(): boolean {
+    return this.jsonViewer && this.jsonViewer.expanded;
+  }
 }
diff --git a/ui/src/app/job-details/tabs/scattered-attempts/scattered-attempts.component.css b/ui/src/app/job-details/tabs/scattered-attempts/scattered-attempts.component.css
@@ -78,15 +78,14 @@ mat-expansion-panel.mat-expansion-panel.list-header .task-links {
 }
 
 mat-expansion-panel.mat-expansion-panel .task-status,
-mat-expansion-panel.mat-expansion-panel .task-duration,
 mat-expansion-panel.mat-expansion-panel .task-inputs,
-mat-expansion-panel.mat-expansion-panel .task-outputs {
-  width: 5rem;
+mat-expansion-panel.mat-expansion-panel .task-outputs,
+mat-expansion-panel.mat-expansion-panel .task-attempts {
+  width: 4.875rem;
 }
 
-mat-expansion-panel.mat-expansion-panel .task-attempts {
-  width: 4.375rem;
-  text-align: right;
+mat-expansion-panel.mat-expansion-panel .task-duration {
+  width: 5.875rem;
 }
 
 mat-expansion-panel.mat-expansion-panel .mat-expansion-panel-header[aria-disabled='true'] {

diff --git a/ui/src/app/job-details/tabs/tabs.component.css b/ui/src/app/job-details/tabs/tabs.component.css
@@ -93,11 +93,14 @@ mat-expansion-panel.mat-expansion-panel.list-header .task-links {
 }
 
 mat-expansion-panel.mat-expansion-panel .task-status,
-mat-expansion-panel.mat-expansion-panel .task-duration,
 mat-expansion-panel.mat-expansion-panel .task-inputs,
 mat-expansion-panel.mat-expansion-panel .task-outputs,
 mat-expansion-panel.mat-expansion-panel .task-attempts {
-  width: 5rem;
+  width: 4.875rem;
+}
+
+mat-expansion-panel.mat-expansion-panel .task-duration {
+  width: 5.875rem;
 }
 
 mat-expansion-panel.mat-expansion-panel .task-attempts {