Add listing for separate keys

src/app/service/service.component.html

@@ -10,35 +10,47 @@
 					<mat-icon style="vertical-align: middle; padding-right: 5px;">storage</mat-icon>
 					{{ site.name }}
 				</span>
-				<span [ngSwitch]="userService.taskState(site, serviceData)">
-					<span *ngSwitchCase="'pending'"
-						mat-button mat-icon-button style="display: inline-block; vertical-align: middle"
-						matTooltip="Waiting for site">
-						<mat-progress-spinner diameter="24" mode="indeterminate"></mat-progress-spinner>
-					</span>
-					<span *ngSwitchCase="'answered'"
-						mat-button mat-icon-button style="display: inline-block; vertical-align: middle"
-						matTooltip="Waiting for site">
-						<mat-progress-spinner diameter="24" mode="indeterminate"></mat-progress-spinner>
-					</span>
-					<button *ngSwitchCase="'done'"
-						mat-button mat-icon-button style="display: inline-block; vertical-align: middle"
-						matTooltip="The credentials have the supposed state.">
-						<mat-icon style="vertical-align: middle">done</mat-icon>
+				<div *ngIf="userService.user.ssh_keys.length > 0">
+					<span *ngFor="let key of userService.user.ssh_keys"
+						[ngSwitch]="userService.taskState(site, serviceData, key)" class="childs-inline">
+						<!-- states with actions -->
+						<button *ngSwitchCase="'deployed'" mat-button mat-icon-button
+							matTooltip="The credentials are deployed to the site.">
+							<mat-icon style="vertical-align: middle">call_made</mat-icon>
 						</button>
-					<button *ngSwitchCase="'failed'"
-						mat-button mat-icon-button style="display: inline-block; vertical-align: middle"
-						matTooltip="This site failed to deploy the credentials. It will retry the deployment.">
-						<mat-icon style="vertical-align: middle">error</mat-icon>
-					</button>
-					<button *ngSwitchCase="'rejected'"
+						<button *ngSwitchCase="'questionnaire'" mat-button mat-icon-button
 							(click)="dialog.openQuestionnaire(userService.taskItem(site, serviceData))"
-						mat-button mat-icon-button style="display: inline-block; vertical-align: middle"
 							matTooltip="This site needs more data to deploy the credentials. Please click to
 							submit the data.">
 							<mat-icon>warning</mat-icon>
 						</button>
+						<!-- states without actions -->
+						<span *ngSwitchCase="'deployment_pending'"
+													matTooltip="Waiting for the deployment of the credentials from the site">
+							<mat-progress-spinner diameter="24" mode="indeterminate"></mat-progress-spinner>
+						</span>
+						<span *ngSwitchCase="'removal_pending'"
+												 matTooltip="Waiting for the removal of the credentials from the site">
+							<mat-progress-spinner diameter="24" mode="indeterminate"></mat-progress-spinner>
+						</span>
+						<span *ngSwitchCase="'not_deployed'"
+											  matTooltip="The credential is not deployed to this site.">
+							<mat-icon style="vertical-align: middle">call_received</mat-icon>
+						</span>
+						<span *ngSwitchCase="'failed'"
+										matTooltip="This site failed to deploy the credentials. The deployment will be retried.">
+							<mat-icon style="vertical-align: middle">error</mat-icon>
+						</span>
+						<span *ngSwitchCase="'rejected'"
+										  matTooltip="This site rejected the deployment. You can not use this service.">
+							<mat-icon style="vertical-align: middle">error</mat-icon>
+						</span>
+						<span *ngSwitchDefault
+								matTooltip="Unrecognized state">
+							<mat-icon style="vertical-align: middle">details</mat-icon>
+						</span>
 					</span>
+				</div>
 			</td>
 		</tr>
 		<tr>

src/app/types/types.module.ts

@@ -47,8 +47,8 @@ export interface User {
   userinfo: any;
   ssh_keys: SSHKey[];
   deployments: Deployment[];
-  deployment_tasks: any[];
-  deployment_task_items: any[];
+  deployment_states: any[];
+  deployment_state_items: any[];
   id: number;
 }
 

src/app/user.service.ts

@@ -237,8 +237,7 @@ export class UserService {
   }
 
   public sentQuestionnaire(taskItemID: number, answers: any) {
-    const body = answers;
-    return this.http.post('/backend/api/questionnaire?id='+String(taskItemID), body).subscribe(
+    return this.http.post('/backend/api/questionnaire?id='+String(taskItemID), answers).subscribe(
       (data) => {
         this.snackBar.open('Uploaded questionnaire');
         //this.snackBar.open('Deployed key ' + key.name);
@@ -318,10 +317,12 @@ export class UserService {
     });
   }
 
-  public taskItem(site, service): any {
-    if (this.user.deployment_task_items && site && service) {
-      for (const item of this.user.deployment_task_items){
-        if (item.site.id == site.id && item.service.id == service.id) {
+  public taskItem(site: any, service: any, key: any): any {
+    if (this.user.deployment_state_items && site && service && key) {
+      for (const item of this.user.deployment_state_items){
+        if (item.site.id == site.id
+          && item.key.id == key.id
+          && item.service.id == service.id) {
           return item;
         }
       }
@@ -329,11 +330,11 @@ export class UserService {
     return null;
   }
 
-  public taskState(site, service): string {
-    let item = this.taskItem(site, service);
+  public taskState(site: any, service: any, key: any): string {
+    let item = this.taskItem(site, service, key);
     if (item !== null) {
       return item.state;
     }
-    return "done";
+    return "";
   }
 }

src/styles.css

@@ -40,6 +40,11 @@ body {
 	width: 100%;
 }
 
+.childs-inline > * {
+	display: inline-block;
+	vertical-align: middle;
+}
+
 .form-vertical > button {
 	width: 25%;
 }