credentials.component.html

<div *ngIf="(stateItem$ | async) as stateItem" class="mat-typography">
  <h2>Credentials</h2>
  <p>
  For access to the service {{ stateItem.service.name }} at {{ stateItem.service.site.name }} additional credentials are needed.
  The additional credentials are listed below.
  </p>
  <div *ngIf="credentialCount > 0" style="margin-bottom: 50px;">
	<mat-table [dataSource]="table">
	  <ng-container matColumnDef="name">
		<mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
		<mat-cell *matCellDef="let element">{{ element.name}}</mat-cell>
	  </ng-container>
	  <ng-container matColumnDef="value">
		<mat-header-cell *matHeaderCellDef>Value</mat-header-cell>
		<mat-cell *matCellDef="let element">{{ element.value }}</mat-cell>
	  </ng-container>
	  <mat-header-row *matHeaderRowDef="columns"></mat-header-row>
	  <mat-row *matRowDef="let row; columns: columns;"></mat-row>
	</mat-table>
  </div>
  <div>
	<h2>Key Information</h2>
	<p>
	 These are the current states of your keys at this service. The keys listed as "deployed" can be used to access the service via ssh.
	</p>
	<table>
	  <thead>
		<tr>
		  <td>State</td>
		  <td>Key</td>
		  <td></td>
		</tr>
	  </thead>
	  <tbody>
		<tr *ngFor="let state of stateItem.credential_states">
		  <td>
			<span [ngSwitch]="state.state" class="spaced">
			  <mat-icon *ngSwitchCase="'deployed'">call_made</mat-icon>
			  <mat-icon *ngSwitchCase="'questionnaire'">warning</mat-icon>
			  <mat-progress-spinner *ngSwitchCase="'deployment_pending'" diameter="24" mode="indeterminate"></mat-progress-spinner>
			  <mat-progress-spinner *ngSwitchCase="'removal_pending'" diameter="24" mode="indeterminate"></mat-progress-spinner>
			  <mat-icon *ngSwitchCase="'not_deployed'" mat-icon-button>call_received</mat-icon>
			  <mat-icon *ngSwitchCase="'failed'" mat-icon-button>error</mat-icon>
			  <mat-icon *ngSwitchCase="'rejected'" mat-icon-button>error</mat-icon>
			  <mat-icon *ngSwitchDefault mat-icon-button>call_received</mat-icon>
			</span>
			{{ state.state }}
		  </td>
		  <td style="font-size: 110%;">
			{{ state.credential.name }}
		  </td>
		  <td *ngIf="state.is_pending">
			<span class="spaced">
			  <mat-progress-spinner diameter="24" mode="indeterminate"></mat-progress-spinner>
			</span>
			<span *ngIf="state.state_target === 'deployed'">
			  Key is being deployed
			</span>
			<span *ngIf="state.state_target === 'not_deployed'">
			  Key is being removed
			</span>
		  </td>
		</tr>
	  </tbody>
	</table>
  </div>
</div>