UI Improvements for Section 508, API health check and embedded iframe display (#502)

* Made a few modifications to Steamfitter UI for Section 508 Compliance

* hides vmId and vmName from results when taskAction starts with http, core, or linux

* adds title to crucible logo

* updates red background color to match player and corrects contrast issues

* adds theme selection via url param

* detects whether in iframe and removes topbar

* adds close-circle-outline to exit administration page

* adds settings cog

* only show admin cog for superusers

* implements healthcheck

Co-authored-by: Nuria Pacheco <[email protected]>

Author: sei-awelle

src/app/app.component.ts

@@ -5,9 +5,10 @@ import { OverlayContainer } from '@angular/cdk/overlay';
 import { Component, HostBinding, OnDestroy } from '@angular/core';
 import { MatIconRegistry } from '@angular/material/icon';
 import { DomSanitizer } from '@angular/platform-browser';
-import { ComnAuthQuery, Theme } from '@cmusei/crucible-common';
+import { ComnAuthQuery, ComnAuthService, Theme } from '@cmusei/crucible-common';
 import { Subject, Observable } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
+import { ActivatedRoute, Router } from '@angular/router';
 
 @Component({
   selector: 'app-root',
@@ -17,13 +18,17 @@ import { takeUntil } from 'rxjs/operators';
 export class AppComponent implements OnDestroy {
   @HostBinding('class') componentCssClass: string;
   theme$: Observable<Theme> = this.authQuery.userTheme$;
+  private paramTheme;
   unsubscribe$: Subject<null> = new Subject<null>();
 
   constructor(
     iconRegistry: MatIconRegistry,
     sanitizer: DomSanitizer,
     private overlayContainer: OverlayContainer,
-    private authQuery: ComnAuthQuery
+    private authQuery: ComnAuthQuery,
+    private activatedRoute: ActivatedRoute,
+    private router: Router,
+    private authService: ComnAuthService
   ) {
     iconRegistry.setDefaultFontSetClass('mdi');
 
@@ -259,10 +264,33 @@ export class AppComponent implements OnDestroy {
         'assets/svg-icons/ic_crucible_steamfitter.svg'
       )
     );
+    iconRegistry.addSvgIcon(
+      'close-circle-outline',
+      sanitizer.bypassSecurityTrustResourceUrl(
+        'assets/svg-icons/close-circle-outline.svg'
+      )
+    );
 
     this.theme$.pipe(takeUntil(this.unsubscribe$)).subscribe((theme) => {
+      if (this.paramTheme && this.paramTheme !== theme) {
+        this.router.navigate([], {
+          queryParams: { theme: theme },
+          queryParamsHandling: 'merge',
+        });
+      }
       this.setTheme(theme);
     });
+    this.activatedRoute.queryParamMap
+      .pipe(takeUntil(this.unsubscribe$))
+      .subscribe((params) => {
+        const theme = params.get('theme');
+
+        if (theme != null) {
+          this.paramTheme = theme === Theme.DARK ? Theme.DARK : Theme.LIGHT;
+          this.authService.setUserTheme(this.paramTheme);
+        }
+      });
+
   }
 
   setTheme(theme: Theme) {
@@ -279,6 +307,7 @@ export class AppComponent implements OnDestroy {
         classList.remove(Theme.LIGHT);
     }
   }
+
   ngOnDestroy(): void {
     throw new Error('Method not implemented.');
   }

src/app/components/admin/admin-container/admin-container.component.html

@@ -19,8 +19,8 @@
         <a class="nolink" [routerLink]="['/']">
           <div fxLayout="row" fxLayoutAlign="start center">
             <mat-icon
-              class="steamfitter-icon"
-              svgIcon="ic_crucible_steamfitter"
+              class="icon-35px"
+              svgIcon="close-circle-outline"
             ></mat-icon>
             <h2 class="icon-text">Administration</h2>
           </div>
@@ -45,13 +45,14 @@ <h2 class="icon-text">Administration</h2>
         </div>
 
         <div>
-          <button mat-icon-button>
+          <button mat-icon-button aria-label="Users">
             <mat-icon class="icon-color" svgIcon="ic_chevron_right"></mat-icon>
           </button>
         </div>
       </mat-list-item>
     </mat-list>
     <img
+      *ngIf="!hideTopbar"
       class="crucible-logo"
       [src]="
         (theme$ | async) === 'light-theme'
@@ -62,6 +63,7 @@ <h2 class="icon-text">Administration</h2>
   </mat-sidenav>
   <mat-sidenav-content>
     <app-topbar
+      *ngIf="!hideTopbar"
       [title]="usersText"
       [topbarView]="TopbarView.STEAMFITTER_ADMIN"
       [topbarColor]="topbarColor"

src/app/components/admin/admin-container/admin-container.component.ts

@@ -40,7 +40,8 @@ export class AdminContainerComponent implements OnDestroy {
   pageIndex: Observable<number>;
   private unsubscribe$ = new Subject();
   TopbarView = TopbarView;
-  topbarColor = '#ef3a47';
+  hideTopbar = false;
+  topbarColor = '#BB0000';
   topbarTextColor = '#FFFFFF';
   theme$: Observable<Theme>;
 
@@ -53,6 +54,7 @@ export class AdminContainerComponent implements OnDestroy {
     private authQuery: ComnAuthQuery
   ) {
     this.theme$ = this.authQuery.userTheme$;
+    this.hideTopbar = this.inIframe();
 
     this.userDataService.isSuperUser
       .pipe(takeUntil(this.unsubscribe$))
@@ -102,6 +104,14 @@ export class AdminContainerComponent implements OnDestroy {
     this.userDataService.logout();
   }
 
+  inIframe() {
+    try {
+      return window.self !== window.top;
+    } catch (e) {
+      return true;
+    }
+  }
+
   selectUser(userId: string) {
     this.router.navigate([], {
       queryParams: { userId: userId },

src/app/components/admin/admin-users/admin-users.component.ts

@@ -33,7 +33,7 @@ export class AdminUsersComponent implements OnInit {
   addingNewUser = false;
   newUser: User = { id: '', name: '' };
   isLoading = false;
-  topbarColor = '#ef3a47';
+  topbarColor = '#BB0000';
 
   constructor(private settingsService: ComnSettingsService) {
     this.topbarColor = this.settingsService.settings.AppTopBarHexColor

src/app/components/history/history.component.ts

@@ -71,7 +71,7 @@ export class HistoryComponent implements OnInit, OnDestroy {
   private unsubscribe$ = new Subject();
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
   @ViewChild(MatSort, { static: true }) sort: MatSort;
-  topbarColor = '#ef3a47';
+  topbarColor = '#BB0000';
 
   constructor(
     private resultQuery: ResultQuery,

src/app/components/home-app/home-app.component.html

@@ -21,6 +21,16 @@ <h2 class="icon-text">
             {{ titleText }}
           </h2>
         </div>
+        <button
+          *ngIf="isSuperUser"
+          aria-label="Show Administration Page"
+          mat-icon-button
+          [routerLink]="['/admin']"
+          style="outline: none;"
+          title="Administration"
+        >
+          <mat-icon aria-hidden="false" class="mdi-24px" fontIcon="mdi-cog"></mat-icon>
+        </button>
         <mat-divider></mat-divider>
       </mat-list-item>
       <mat-list-item
@@ -41,7 +51,7 @@ <h2 class="icon-text">
         </div>
 
         <div>
-          <button mat-icon-button>
+          <button mat-icon-button aria-label="Scenario Templates">
             <mat-icon class="icon-color" svgIcon="ic_chevron_right"></mat-icon>
           </button>
         </div>
@@ -64,7 +74,7 @@ <h2 class="icon-text">
         </div>
 
         <div>
-          <button mat-icon-button>
+          <button mat-icon-button aria-label="Scenarios">
             <mat-icon class="icon-color" svgIcon="ic_chevron_right"></mat-icon>
           </button>
         </div>
@@ -87,7 +97,7 @@ <h2 class="icon-text">
         </div>
 
         <div>
-          <button mat-icon-button>
+          <button mat-icon-button aria-label="Tasks">
             <mat-icon class="icon-color" svgIcon="ic_chevron_right"></mat-icon>
           </button>
         </div>
@@ -110,13 +120,15 @@ <h2 class="icon-text">
         </div>
 
         <div>
-          <button mat-icon-button>
+          <button mat-icon-button aria-label="History">
             <mat-icon class="icon-color" svgIcon="ic_chevron_right"></mat-icon>
           </button>
         </div>
       </mat-list-item>
     </mat-list>
     <img
+      *ngIf="!hideTopbar"
+      title="crucible logo"
       class="crucible-logo"
       [src]="
         (theme$ | async) === 'light-theme'
@@ -127,14 +139,27 @@ <h2 class="icon-text">
   </mat-sidenav>
   <mat-sidenav-content>
     <app-topbar
+      *ngIf="!hideTopbar"
       [title]="selectedSection"
       [topbarView]="TopbarView.STEAMFITTER_HOME"
       [topbarColor]="topbarColor"
       [topbarTextColor]="topbarTextColor"
       [sidenav]="sidenav"
       (sidenavToggle)="sidenavToggleFn()"
     ></app-topbar>
-    <span *ngIf="isAuthorizedUser">
+
+    <div
+      *ngIf="apiIsSick"
+      class="app-header-container mat-elevation-z8"
+      autosize
+    >
+    <h1>{{ apiMessage }}</h1>
+    <h2>Please refresh this page.</h2>
+      <h2>If the problem persists, please contact the site administrator.</h2>
+    </div>
+
+
+    <span *ngIf="!apiIsSick && isAuthorizedUser">
       <app-scenario-templates
         *ngIf="selectedSection === section.scenarioTemplates"
       ></app-scenario-templates>

src/app/components/home-app/home-app.component.scss

@@ -15,6 +15,13 @@
   font-family: open_sansbold;
 }
 
+.app-header-container {
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  text-align: center;
+}
+
 .appcontent-container {
   position: absolute;
   top: 0;

src/app/components/home-app/home-app.component.ts

@@ -14,6 +14,7 @@ import {
 import { SignalRService } from 'src/app/services/signalr/signalr.service';
 import { UserDataService } from '../../data/user/user-data.service';
 import { TopbarView } from './../shared/top-bar/topbar.models';
+import { HealthService } from 'src/app/generated/steamfitter.api';
 
 enum Section {
   taskBuilder = 'Tasks',
@@ -29,6 +30,8 @@ enum Section {
 })
 export class HomeAppComponent implements OnDestroy {
   @ViewChild('sidenav') sidenav: MatSidenav;
+  apiIsSick = false;
+  apiMessage = 'The API web service is not responding.';
   titleText = 'Steamfitter';
   section = Section;
   selectedSection: Section;
@@ -38,7 +41,8 @@ export class HomeAppComponent implements OnDestroy {
   isSidebarOpen = true;
   viewList = this.playerDataService.viewList;
   private unsubscribe$ = new Subject();
-  topbarColor = '#ef3a47';
+  hideTopbar = false;
+  topbarColor = '#BB0000';
   topbarTextColor = '#FFFFFF';
   TopbarView = TopbarView;
   theme$: Observable<Theme>;
@@ -50,9 +54,13 @@ export class HomeAppComponent implements OnDestroy {
     private playerDataService: PlayerDataService,
     private settingsService: ComnSettingsService,
     private signalRService: SignalRService,
+    private healthService: HealthService,
     private authQuery: ComnAuthQuery
   ) {
+    this.healthCheck();
+
     this.theme$ = this.authQuery.userTheme$;
+    this.hideTopbar = this.inIframe();
 
     this.playerDataService.getViewsFromApi();
     activatedRoute.queryParamMap
@@ -100,6 +108,28 @@ export class HomeAppComponent implements OnDestroy {
     this.userDataService.logout();
   }
 
+  inIframe() {
+    try {
+      return window.self !== window.top;
+    } catch (e) {
+      return true;
+    }
+  }
+
+  healthCheck() {
+    this.healthService
+      .healthGetReadiness('body')
+      .subscribe(
+        (message) => {
+          this.apiIsSick = message !== 'Healthy';
+          this.apiMessage = message;
+        },
+        (error) => {
+          this.apiIsSick = true;
+        }
+      );
+  }
+
   ngOnDestroy() {
     this.unsubscribe$.next(null);
     this.unsubscribe$.complete();

src/app/components/results/results.component.html

@@ -45,9 +45,10 @@
         </button>
         <div *ngIf="showResults[result.id]">
           id: {{ result.id }}<br />
+          <div *ngIf="showVmFields">
           vmId: {{ result.vmId }}<br />
           vmName: {{ result.vmName }}<br />
-          apiUrl: {{ result.apiUrl }}<br />
+          </div>
           actionParameters:<br />
           <span *ngFor="let k of result.actionParameters | keyvalue"
             >&nbsp;&nbsp;&nbsp;&nbsp;{{ k.key }}:
@@ -86,9 +87,10 @@
               </button>
               <div *ngIf="showResults[oldResult.id]">
                 id: {{ oldResult.id }}<br />
+                <div *ngIf="showVmFields">
                 vmId: {{ oldResult.vmId }}<br />
                 vmName: {{ oldResult.vmName }}<br />
-                apiUrl: {{ oldResult.apiUrl }}<br />
+                </div>
                 actionParameters:<br />
                 <span *ngFor="let k of result.actionParameters | keyvalue"
                   >&nbsp;&nbsp;&nbsp;&nbsp;{{ k.key }}:

src/app/components/results/results.component.ts

@@ -23,6 +23,7 @@ enum ResultStatus {
 export class ResultsComponent implements OnInit, OnDestroy {
   @Input() results: Observable<Result[]>;
   @Input() taskId: string;
+  @Input() taskAction: string;
 
   allResults: Result[];
   currentResults: Result[];
@@ -31,6 +32,7 @@ export class ResultsComponent implements OnInit, OnDestroy {
   showResults: Record<string, boolean | undefined> = {};
   private lastExecutionTime: Date;
   private unsubscribe$ = new Subject();
+  showVmFields: boolean;
 
   constructor(private playerDataService: PlayerDataService) {}
 
@@ -43,6 +45,14 @@ export class ResultsComponent implements OnInit, OnDestroy {
       }
       this.filterCurrentResults();
     });
+    this.showVmFields = this.hasVmFields();
+  }
+
+  hasVmFields() {
+    if (/^http|linux|core/.test(this.taskAction)) {
+      return false;
+    };
+    return true;
   }
 
   filterCurrentResults() {