launcher.component.html

<div  fxFlex style="flex: 1 1 0%; box-sizing: border-box">
<div fxLayout="column" fxLayoutAlign="space-around stretch" style="height: 100%; width: 100%" >
<mat-toolbar color="primary">
  <mat-toolbar-row>
    <button mat-icon-button (click)=idSideNav.toggle()><mat-icon>menu</mat-icon></button>

    <span>Strudel v2.0</span>
    <span class="fill-horizontal-space"></span>
    </mat-toolbar-row>
  </mat-toolbar>
<mat-sidenav-container style="height: 100%; width: 100%">
  <mat-sidenav #idSideNav mode="side" opened>
    <div fxLayout="column" style="height: 100%">
        <div>
            <mat-accordion style="width: 100%">
            <div *ngFor="let id of (computeSitesService.appidentities | async)">
                <mat-expansion-panel (opened)="selectId(id)" style="width: 100%">
                    <mat-expansion-panel-header>
                    <mat-panel-title>
                        <span fxFlex matBadge="{{ countErrors((id.systemalerts | async), (id.accountalerts | async)) }}" 
                                                  [matBadgeHidden]= "countErrors((id.systemalerts | async), (id.accountalerts | async)) == 0"  
                                                  matBadgePosition="above before" 
                                                  matBadgeColor="warn" 
                                                  matBadgeOverlap="false" matBadgeSize="small"
                                                  style="text-align: left; margin-left: 20px; margin-top: 10px" >
                            {{ id.displayName() }}
                        </span>
                        </mat-panel-title>
                    </mat-expansion-panel-header>
                    <app-strudelapplist [applist]=id.site.appCatalog [identity]="id" (appChange)="selectApp($event)" style="width: 100%"></app-strudelapplist>
                </mat-expansion-panel>
            </div>
            </mat-accordion>
        </div>
        <div fxFlex></div>
        <mat-menu #actionmenu="matMenu">
            <div *ngFor="let az of (authService.loggedInAuthZ | async)">
                <button mat-menu-item routerLink="/logout"><mat-icon>logout</mat-icon>Log out of {{ az.name }}</button>
            </div>
            <button mat-menu-item routerLink="/settings"><mat-icon>settings</mat-icon>Settings</button>
            <button *ngIf="(authService.loggedOutAuthZ | async).length > 0" mat-menu-item routerLink="/login"><mat-icon>exit_to_app</mat-icon>Login</button>
        </mat-menu>
        <button  mat-icon-button [matMenuTriggerFor]="actionmenu">
            <mat-icon>person</mat-icon>
        </button>
    </div>
  </mat-sidenav>
  <mat-sidenav-content>
    <div fxLayout="column" style="height: 100%">
        
    <!-- the list of warning either on the computer system or the users account -->
    <div *ngIf="(identitySubject | async) !== null" >
      <mat-list>
      <div *ngFor="let h of ((identitySubject | async).systemalerts | async)">
         <mat-list-item>
         <div *ngIf="h.stat == 'error'">
           <div class='health-warn'>
            {{ h.msg }}
           </div>
         </div>
         </mat-list-item>
      </div>
      </mat-list>
    </div>
    <div *ngIf="(identitySubject | async) !== null" >
      <mat-list>
      <div *ngFor="let h of ((identitySubject | async).accountalerts | async)">
         <mat-list-item>
         <div *ngIf="h.stat == 'error'">
           <div class='health-warn'>
            {{ h.msg }}
           </div>
         </div>
         </mat-list-item>
      </div>
      </mat-list>
    </div>

    <!-- The dialog asking how many resources to use to run a job -->
    <div  *ngIf="app !== null && identity  !== null" >
      <app-launch-dialog [identity]="identitySubject | async" [appSubject]="appSubject"></app-launch-dialog>
    </div>



    <!-- the list of running jobs -->
    <app-joblist [identitySubject]="identitySubject" [appSubject]="appSubject"></app-joblist>

  </div>
  </mat-sidenav-content>

</mat-sidenav-container>

<!-- <app-joblist></app-joblist> -->