Displays master status spec separately from other specs.

src/app/workflow-spec-card/workflow-spec-card.component.html

@@ -5,17 +5,13 @@
       <div class="action-buttons">
         <ng-container *ngTemplateOutlet="actionButtons"></ng-container>
       </div>
-      <span fxFlex></span>
+      <div
-      <ng-container>
+        *ngIf="workflowSpec.is_master_spec"
-        <button (click)="makeMasterStatus()" *ngIf="!workflowSpec.is_master_spec" mat-button color="accent">
+        class="master-status-label"
-          <mat-icon>radio_button_unchecked</mat-icon>
+        matTooltip="This workflow specification controls the availability of the other workflow specifications"
-          Master status spec
+      >
-        </button>
+        Master status spec
-        <button *ngIf="workflowSpec.is_master_spec" (click)="makeMasterStatus()" mat-button color="accent">
+      </div>
-          <mat-icon>radio_button_checked</mat-icon>
-          Master status spec
-        </button>
-      </ng-container>
     </mat-card-title>
   </mat-card-header>
   <mat-card-content>

src/app/workflow-spec-card/workflow-spec-card.component.scss

@@ -5,7 +5,23 @@ mat-card {
   border: 1px solid $brand-gray;
 
   &.master-status {
-    border: 2px dashed $brand-accent;
+    position: relative;
+    border: 4px solid $brand-accent;
+    overflow: hidden;
+
+    .master-status-label {
+      position: absolute;
+      width: 300px;
+      font-size: 1rem;
+      text-align: center;
+      top: 55px;
+      right: -90px;
+      background-color: $brand-accent;
+      color: white;
+      padding: 10px;
+      transform: rotate(45deg);
+
+    }
   }
 
   mat-card-title {

src/app/workflow-spec-list/workflow-spec-list.component.html

@@ -25,27 +25,36 @@
         </div>
       </div>
       <div *ngFor="let wfs of cat.workflow_specs" class="workflow-spec">
-        <app-workflow-spec-card
+        <ng-container *ngTemplateOutlet="workflowSpecCard; context: {wfs: wfs}"></ng-container>
-          [workflowSpec]="wfs"
-          [actionButtons]="actionButtons"
-          (workflowUpdated)="onWorkflowUpdated($event)">
-        </app-workflow-spec-card>
-        <ng-template #actionButtons>
-          <div class="workflow-spec-actions">
-            <button mat-mini-fab title="Check for errors in this workflow specification" color="accent" (click)="validateWorkflowSpec(wfs)">
-              <mat-icon>verified_user</mat-icon>
-            </button>
-            <button mat-mini-fab title="Edit this workflow specification" color="primary" (click)="editWorkflowSpec(wfs)">
-              <mat-icon>edit</mat-icon>
-            </button>
-            <button mat-icon-button title="Delete this workflow specification" color="warn" (click)="confirmDeleteWorkflowSpec(wfs)">
-              <mat-icon>delete</mat-icon>
-            </button>
-          </div>
-        </ng-template>
       </div>
       <div *ngIf="cat.workflow_specs.length === 0">No workflow specs in this category</div>
     </ng-container>
   </ng-container>
+  <mat-divider></mat-divider>
+  <ng-container *ngIf="masterStatusSpec">
+    <h1>Master Status Specification</h1>
+    <ng-container *ngTemplateOutlet="workflowSpecCard; context: {wfs: masterStatusSpec}"></ng-container>
+  </ng-container>
 </div>
 
+<ng-template #workflowSpecCard let-wfs="wfs">
+  <app-workflow-spec-card
+    [workflowSpec]="wfs"
+    [actionButtons]="actionButtons"
+    (workflowUpdated)="onWorkflowUpdated($event)"
+  ></app-workflow-spec-card>
+  <ng-template #actionButtons>
+    <div class="workflow-spec-actions">
+      <button mat-mini-fab title="Check for errors in this workflow specification" color="accent" (click)="validateWorkflowSpec(wfs)">
+        <mat-icon>verified_user</mat-icon>
+      </button>
+      <button mat-mini-fab title="Edit this workflow specification" color="primary" (click)="editWorkflowSpec(wfs)">
+        <mat-icon>edit</mat-icon>
+      </button>
+      <button mat-icon-button title="Delete this workflow specification" color="warn" (click)="confirmDeleteWorkflowSpec(wfs)">
+        <mat-icon>delete</mat-icon>
+      </button>
+    </div>
+  </ng-template>
+</ng-template>
+

src/app/workflow-spec-list/workflow-spec-list.component.ts

@@ -30,6 +30,7 @@ interface WorklflowSpecCategoryGroup {
 export class WorkflowSpecListComponent implements OnInit {
   workflowSpecs: WorkflowSpec[] = [];
   selectedSpec: WorkflowSpec;
+  masterStatusSpec: WorkflowSpec;
   selectedCat: WorkflowSpecCategory;
   workflowSpecsByCategory: WorklflowSpecCategoryGroup[] = [];
   categories: WorkflowSpecCategory[];
@@ -155,7 +156,13 @@ export class WorkflowSpecListComponent implements OnInit {
     this.api.getWorkflowSpecList().subscribe(wfs => {
       this.workflowSpecs = wfs;
       this.workflowSpecsByCategory.forEach(cat => {
-        cat.workflow_specs = this.workflowSpecs.filter(wf => wf.category_id === cat.id);
+        cat.workflow_specs = this.workflowSpecs.filter(wf => {
+          if (wf.is_master_spec) {
+            this.masterStatusSpec = wf;
+          } else {
+            return wf.category_id === cat.id;
+          }
+        });
       });
     });
   }

src/material-theme.scss

@@ -169,6 +169,10 @@
     color: white;
   }
 
+  .mat-tooltip {
+    font-size: 1rem !important;
+  }
+
   .pad-0 {
     padding: 0px;
   }