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%" [displayMode]="flat">
            <div *ngFor="let id of (computeSitesService.appidentities | async)">
                <mat-expansion-panel (afterExpand)="selectId(id)" (closed)="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 && (appSubject | async) === null" >
        <div *ngIf="countErrors(((identitySubject | async).systemalerts | async),((identitySubject | async).accountalerts | async)) == 0; then noAlerts else displayAlerts"></div>
        <ng-template #noAlerts><h2> No Alerts for {{ (identitySubject | async).displayName() }}</h2></ng-template>
        <ng-template #displayAlerts>

          <h2>Alerts for {{ (identitySubject | async).displayName() }}</h2>
          <!-- This is all the system level alerts-->
          <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>

          <!-- this is all the user level alerts that are not quota -->
          <mat-list>
              <div *ngFor="let h of ((identitySubject | async).accountalerts | async)">
                 <div *ngIf="h.type === undefined || h.type != 'quota'">
                     <mat-list-item>
                         <div [ngClass]="h.stat == 'error' || h.stat == 'warn' ? 'health-warn': 'health-ok'">
                       {{ h.msg }}
                     </div>
                     </mat-list-item>
                 </div>
                 <!--<div *ngIf="h.type == 'table'">
                     <table mat-table [dataSource]="h.data">
                         <div *ngFor="let c of h.cols">
                             <ng-container *matColumnDef="c.key">
                                 <th mat-header-cell *matHeaderCellDef>{{c.name}}</th>
                                 <th mat-cell *matCellDef="let row;"> {{row[c.key]}}</th>
                             </ng-container>
                         </div>
                         <ng-container matColumnDef="usage">
                            <th mat-header-cell *matHeaderCellDef> Usage </th>
                            <td mat-cell *matCellDef="let row"> {{row.pu}} </td>
                          </ng-container>
                          <ng-container matColumnDef="quota">
                            <th mat-header-cell *matHeaderCellDef> Quota </th>
                            <td mat-cell *matCellDef="let row"> {{row.pq}} </td>
                          </ng-container>

                          <tr mat-header-row *matHeaderRowDef="displayedColumns" ></tr>
                          <tr mat-row *matRowDef="let row; columns: displayedColumns;"  [ngClass]="quotaClass(row)"></tr>
                          <tr mat-row *matRowDef="let row;  columns: displayedColumns" ></tr>
                     </table>
                 </div>-->
              </div>
          </mat-list>

          <!-- this table contains all the user level alerts that are quotas -->
          <!--<table mat-table [dataSource]="quotas" style="width: 100%">

              <ng-container matColumnDef="resource">
                <th mat-header-cell *matHeaderCellDef> Resource </th>
                <td mat-cell *matCellDef="let quota"> {{quota.data.resource}} </td>
              </ng-container>

              <ng-container matColumnDef="usage">
                <th mat-header-cell *matHeaderCellDef> Usage </th>
                <td mat-cell *matCellDef="let quota"> {{humanKBytes(quota.data.usage)}} </td>
              </ng-container>
              <ng-container matColumnDef="quota">
                <th mat-header-cell *matHeaderCellDef> Quota </th>
                <td mat-cell *matCellDef="let quota"> {{humanKBytes(quota.data.quota)}} </td>
              </ng-container>

              <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
              <tr mat-row *matRowDef="let row; columns: displayedColumns;"  [ngClass]="quotaClass(row)"></tr>
          </table>-->

        </ng-template>
    </div>

    <div  *ngIf="(appSubject | async) !== null && (identitySubject | async)  !== null" >
      <app-launch-dialog [identity]="identitySubject | async" [appSubject]="appSubject"></app-launch-dialog>
      <app-joblist [identitySubject]="identitySubject" [appSubject]="appSubject"></app-joblist>
    </div>
    </div>

  </mat-sidenav-content>

</mat-sidenav-container>

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