state.component.html

<td>
	<h4>{{ service.site.name }}</h4>
	<br>
	<small>{{ service.site.description }}</small>
</td>

<td>
	<h4>{{ service.name }}</h4>
	<br>
	<small>{{ service.description }}</small>
</td>

<ng-container *ngIf="(state$ | async) as state; else noStateItem">
	<td [matTooltip]="tooltip(state)">
		<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>
		<h4>{{ lang.printState(state.state) }}</h4>
		<br>
		<div class="mat-small">tooltip(state)</div>
	</td>

	<!-- state dependent buttons -->
	<td *ngIf="state.state == 'deployed'">
		<button (click)="dialog.openCredentials(state$)" mat-raised-button class="mat-elevation-z6">
			Credentials
		</button>
	</td>
	<td *ngIf="state.state == 'questionnaire'">
		<button (click)="dialog.openQuestionnaire(state$)" mat-raised-button class="mat-elevation-z6">
			Questionnaire
		</button>
	</td>
	<td *ngIf="state.state == 'failed'">
		<button (click)="dialog.openMessage(state)" mat-raised-button class="mat-elevation-z6">
			Failure
		</button>
	</td>
	<td *ngIf="state.state == 'rejected'">
		<button (click)="dialog.openMessage(state)" mat-raised-button class="mat-elevation-z6">
			Rejected
		</button>
	</td>
	<td *ngIf="!state.is_pending && state.is_credential_pending">
		<span>
			<mat-progress-spinner diameter="24" mode="indeterminate"></mat-progress-spinner>
			SSH Keys pending
		</span>
	</td>
	<td *ngIf="(state.questionnaire | ObjKeys).length > 0 && state.state == 'deployed'"
																					matTooltip="Change previously submitted answers">
		<button (click)="dialog.openQuestionnaire(state$)" mat-icon-button>
			<mat-icon>edit</mat-icon>
		</button>
	</td>
</ng-container>

<ng-template #noStateItem>
	<td>
		<span>
			<mat-icon mat-icon-button>call_received</mat-icon>
		</span>
		<h4>{{ lang.printState('not_deployed') }}</h4>
		<br>
		<small>Access to this service was never requested.</small>
	</td>
</ng-template>