Merge pull request #3 in SSA/vlass_manager_ui from...

Merge pull request #3 in SSA/vlass_manager_ui from feature/SSA-6621-vlass-manager-2.0-ui-updates to release/2.0

* commit 'b9cce2c5':
  changed default for execution warning dates span
  updated favicon and added some title setting domain matches for the new server names
  altered job execution list status color for QA_MANUAL to match the jobspect detail views colors
  added reload buttons to product, jobs, and executions tabs
  adjusted height of notes field
  adjust formatting on paste script to skip the parent object. Also added a base-href param to the deply script so it can resolve dependencies when loaded from a deep link.
  autosave notes; save notes on archive and accept, remove formatting from paste
  resetting env.js
  Set product file links to open in a new tab. Execution notes field now scrolls so the save button is always visible when updating the field.

angular.json

@@ -22,7 +22,7 @@
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
-            "aot": false,
+            "aot": true,
             "assets": [
               "src/favicon.ico",
               "src/assets",
@@ -31,8 +31,7 @@
             "styles": [
               "src/styles.scss"
             ],
-            "scripts": [],
-            "es5BrowserSupport": true
+            "scripts": []
           },
           "configurations": {
             "production": {

deploy.sh

@@ -21,7 +21,7 @@ case $DESTINATION in
     ;;
 esac
 
-ng build --optimization=true --prod=true
+ng build --optimization=true --prod=true --base-href /vlass-manager/
 ssh $USER@$SERVER "rm -R /home/${SERVER}/content/vlass-manager/*"
 scp -r dist/vlass-manager/* $USER@$SERVER:/home/$SERVER/content/vlass-manager
 ssh $USER@$SERVER "chmod -R 775 /home/${SERVER}/content/vlass-manager/*"

src/app/app.component.ts

@@ -57,9 +57,11 @@ export class AppComponent {
     let title = 'VLASS Manager'
     switch (this.window.location.hostname) {
       case 'archive-test.nrao.edu':
+      case 'data-test.nrao.edu':
         title = 'TEST | ' + title;
         break;
       case 'archive-new.nrao.edu':
+      case 'data.nrao.edu':
         // leave the title alone
         break;
       case 'webtest.aoc.nrao.edu':

src/app/directives/content-editable.directive.ts

@@ -33,6 +33,25 @@ export class ContentEditableDirective implements ControlValueAccessor {
     }
   }
 
+  @HostListener('paste', ['$event'])
+  onPaste($event) {
+    // after the paste, remove all the formatting
+    setTimeout(() => {
+      for(let el of this.elementRef.nativeElement.children) {
+        this.clearAttr(el);
+      }
+    }, 500);
+  }
+
+  clearAttr(el: any) {
+    this.renderer.removeAttribute(el, 'style');
+    this.renderer.removeAttribute(el, 'class');
+    this.renderer.removeAttribute(el, 'id');
+    for (let e of el.children) {
+      this.clearAttr(e);
+    }
+  }
+
   /**
    * Writes a new value to the element.
    * This method will be called by the forms API to write

src/app/executions/execution/execution-detail/execution-detail.component.html

@@ -40,7 +40,7 @@
         </button>
       </div>
       <div class="col bg-dark text-light p-2 rounded" contenteditable="true" propValueAccessor="innerHTML"
-           formControlName="notes"></div>
+           formControlName="notes" style="max-height: 400px; overflow-y: scroll; overflow-x: hidden;"></div>
     </div>
   </form>
   <h4 class="pt-2 border-top">

src/app/executions/execution/execution-detail/execution-detail.component.ts

 import {Component, EventEmitter, Input, OnDestroy, OnInit, Output} from '@angular/core';
 import {Job, JobExecution} from "../../../model/job";
-import {Subscription} from "rxjs";
+import {Subject} from "rxjs";
 import {JobsService} from "../../../services/jobs.service";
 import {FormControl, FormGroup} from "@angular/forms";
 import {ConfigurationService} from "../../../env/configuration.service";
 import {faCheckCircle, faCopy, faList, faSave, faStickyNote} from "@fortawesome/free-solid-svg-icons";
 import {AlertService} from "../../../services/alert.service";
+import {auditTime, takeUntil} from "rxjs/operators";
 
 @Component({
   selector: 'app-execution-detail',
@@ -14,9 +15,9 @@ import {AlertService} from "../../../services/alert.service";
 })
 export class ExecutionDetailComponent implements OnInit, OnDestroy {
 
+  private ngUnsubscribe = new Subject<void>();
   @Input() job: Job;
   @Output() reload = new EventEmitter();
-  private jobDetail$: Subscription;
   public jobDetail: JobExecution;
 
   noteFormGroup: FormGroup;
@@ -39,13 +40,16 @@ export class ExecutionDetailComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit() {
-    this.jobDetail$ = this.jobService.getJobExecution(this.job.job_id).subscribe((j: JobExecution) => {
+    this.jobService.getJobExecution(this.job.job_id).pipe(takeUntil(this.ngUnsubscribe)).subscribe((j: JobExecution) => {
       if (j) {
         this.jobDetail = j;
         this.noteFormGroup.get('notes').setValue(j.notes);
         this.noteFormGroup.get('id').setValue(j.id);
       }
     });
+
+    // autosave the form on changes
+    this.noteFormGroup.valueChanges.pipe(auditTime(2000),takeUntil(this.ngUnsubscribe)).subscribe(() => this.updateNotes());
   }
 
   copyToClipboard(text: string): void {
@@ -102,6 +106,7 @@ export class ExecutionDetailComponent implements OnInit, OnDestroy {
   }
 
   acceptQa() {
+    this.updateNotes(); // make sure notes are saved before submitting
     this.alertService.info('Accepting ' + this.job.job_id);
     this.performQa(this.job.job_id, 'accept');
   }
@@ -137,9 +142,8 @@ export class ExecutionDetailComponent implements OnInit, OnDestroy {
 
 
   ngOnDestroy(): void {
-    if (this.jobDetail$) {
-      this.jobDetail$.unsubscribe();
-    }
+    this.ngUnsubscribe.next();
+    this.ngUnsubscribe.complete();
   }
 
 }

src/app/executions/executions.component.html

@@ -55,6 +55,9 @@
           </li>
         </ul>
       </div>
+      <div class="col-auto">
+        <button class="btn btn-sm btn-info" (click)="getPageInfoAndJob()"><fa-icon [icon]="faSyncAlt"></fa-icon> </button>
+      </div>
     </div>
   </div>
 

src/app/executions/executions.component.ts

@@ -13,7 +13,8 @@ import {
   faFastBackward,
   faFastForward,
   faStepBackward,
-  faStepForward
+  faStepForward,
+  faSyncAlt
 } from "@fortawesome/free-solid-svg-icons";
 
 @Component({
@@ -46,7 +47,8 @@ export class ExecutionsComponent implements OnInit, OnDestroy {
   public faFastForward = faFastForward;
   public faStepForward = faStepForward;
   public faExclamationTriangle = faExclamationTriangle;
-  public alertAfterDays = 14;
+  public faSyncAlt = faSyncAlt;
+  public alertAfterDays = 7;
 
   public formGroup: FormGroup;
 

src/app/jobspecs/jobspec/jobspec-detail/jobspec-execution/jobspec-execution.component.ts

@@ -31,6 +31,8 @@ export class JobspecExecutionComponent implements OnInit, OnDestroy {
         return 'badge-warning';
       case 'PROCESSING':
         return 'badge-primary';
+      case 'QA_MANUAL':
+        return 'badge-warning';
       default:
         return 'badge-info';
     }

src/app/jobspecs/jobspecs.component.html

@@ -57,6 +57,9 @@
           </li>
         </ul>
       </div>
+      <div class="col-auto">
+        <button class="btn btn-sm btn-info" (click)="getPageInfoAndJobSpec()"><fa-icon [icon]="faSyncAlt"></fa-icon> </button>
+      </div>
     </div>
   </div>
 

src/app/jobspecs/jobspecs.component.ts

@@ -10,7 +10,13 @@ import {FiltersService} from "../services/filters.service";
 import {Setting} from "../model/setting";
 import {SettingsService} from "../services/settings.service";
 import {Epoch} from "../model/epoch";
-import {faFastBackward, faFastForward, faStepBackward, faStepForward} from "@fortawesome/free-solid-svg-icons";
+import {
+  faFastBackward,
+  faFastForward,
+  faStepBackward,
+  faStepForward,
+  faSyncAlt
+} from "@fortawesome/free-solid-svg-icons";
 
 @Component({
   selector: 'app-jobspecs',
@@ -46,6 +52,8 @@ export class JobspecsComponent implements OnInit, OnDestroy {
   public faStepBackward = faStepBackward;
   public faFastForward = faFastForward;
   public faStepForward = faStepForward;
+  public faSyncAlt = faSyncAlt;
+
 
   constructor(
     private jobService: JobsService,
@@ -162,7 +170,6 @@ export class JobspecsComponent implements OnInit, OnDestroy {
     this.pages$ = this.jobService.getJobSpecRecordCount(epoch.id, queue.name, this.pattern, status).subscribe((jobSpecNumber: number) => {
       this.numResults = jobSpecNumber;
       this.pages = Math.ceil(jobSpecNumber / this.resultsPerPage);
-      console.log('num', jobSpecNumber);
       if (this.currentPage > this.pages) {
         this.currentPage = this.pages;
       }

src/app/products/product/product-details/product-details.component.html

@@ -57,7 +57,7 @@
   <div class="form-row my-2">
     <div class="col-auto">
       <a class="btn btn-sm btn-outline-info bg-light"
-         [routerLink]="['/fileeditor','type', type.id, 'json','configurations']">
+         [routerLink]="['/fileeditor','type', type.id, 'json','configurations']" target="_blank">
         <fa-icon [icon]="faEdit"></fa-icon>
       </a>
     </div>
@@ -76,7 +76,7 @@
   <div class="form-row my-2">
     <div class="col-auto">
       <a class="btn btn-sm btn-outline-info bg-light"
-         [routerLink]="['/fileeditor','product', product.id, 'json','configurations']">
+         [routerLink]="['/fileeditor','product', product.id, 'json','configurations']" target="_blank">
         <fa-icon [icon]="faEdit"></fa-icon>
       </a>
     </div>

src/app/products/products.component.html

@@ -48,6 +48,9 @@
           </li>
         </ul>
       </div>
+      <div class="col-auto">
+        <button class="btn btn-sm btn-info" (click)="getPageInfoAndProduct()"><fa-icon [icon]="faSyncAlt"></fa-icon> </button>
+      </div>
     </div>
   </div>
 

src/app/products/products.component.ts

@@ -13,7 +13,8 @@ import {
   faMinus,
   faPlus,
   faStepBackward,
-  faStepForward
+  faStepForward,
+  faSyncAlt
 } from "@fortawesome/free-solid-svg-icons";
 import {FiltersService} from "../services/filters.service";
 import {Epoch} from "../model/epoch";
@@ -51,6 +52,8 @@ export class ProductsComponent implements OnInit, OnDestroy {
   public pages: number = 1;
   private pages$: Subscription;
 
+  public faSyncAlt = faSyncAlt;
+
   public formGroup: FormGroup;
 
   showNewForm: boolean = false;