Display the state of task items to the user

src/app/service/service.component.html

@@ -6,21 +6,32 @@
 	<table width="60%">
 		<tr style="margin-bottom: 15px;">
 			<td *ngFor="let site of serviceData.site">
-				<span matTooltip="Provided at site {{ site.name }}">
+				<span matTooltip="Provided at site {{ site.name }}" style="margin-right: 10px;">
 					<mat-icon style="vertical-align: middle; padding-right: 5px;">storage</mat-icon>
 					{{ site.name }}
 				</span>
-				<span *ngIf="userService.taskInProgress(site, serviceData); then progress else done"></span>
-				<ng-template #progress matTooltip="A task is in progress">
-					<span style="display: inline-block; vertical-align: middle">
+				<span [ngSwitch]="userService.taskState(site, serviceData)">
+					<span *ngSwitchCase="'pending'"
+						style="display: inline-block; vertical-align: middle"
+						matTooltip="This deployment is in progress">
 						<mat-progress-spinner diameter="24" mode="indeterminate"></mat-progress-spinner>
 					</span>
-				</ng-template>
-				<ng-template #done>
-					<span matTooltip="All tasks are done">
+					<span *ngSwitchCase="'done'"
+						style="display: inline-block; vertical-align: middle"
+						matTooltip="This deployment was successful">
 						<mat-icon style="vertical-align: middle">done</mat-icon>
 					</span>
-				</ng-template>
+					<span *ngSwitchCase="'failed'"
+						style="display: inline-block; vertical-align: middle"
+						matTooltip="This deployment has failed">
+						<mat-icon style="vertical-align: middle">error</mat-icon>
+					</span>
+					<span *ngSwitchCase="'rejected'"
+						style="display: inline-block; vertical-align: middle"
+						matTooltip="This deployment was rejected. The client needs more data.">
+						<mat-icon style="vertical-align: middle">warning</mat-icon>
+					</span>
+				</span>
 			</td>
 		</tr>
 		<tr>

src/app/user.service.ts

@@ -49,7 +49,7 @@ export class UserService {
   public getIdPPreference(): Observable<AllAuthInfo> {
     let idpID = Number(this.cookieService.get(environment.idpCookieName));
 
-    return this.http.get('/backend/auth/v1/info/').map(
+    return this.http.get('/backend/auth/v1/info').map(
       (authInfo: AuthInfo) => {
         let selected = authInfo.idps[1];
 
@@ -136,7 +136,7 @@ export class UserService {
 
   public updateState() {
     this.http
-      .get('/backend/api/state/')
+      .get('/backend/api/state')
       .subscribe(
         (data: UserState) => {
           this.updateData(data);
@@ -154,11 +154,11 @@ export class UserService {
 
   public login(idp: IdP) {
     this.setIdPPreference(idp);
-    window.location.href = 'https://hdf-portal.data.kit.edu/backend/auth/v1/request/';
+    window.location.href = 'https://hdf-portal.data.kit.edu/backend/auth/v1/request';
   }
 
   public logout() {
-    this.http.post('/backend/auth/v1/logout/', {}).subscribe(
+    this.http.post('/backend/auth/v1/logout', {}).subscribe(
       data => {
         this.updateData(data);
       }
@@ -170,7 +170,7 @@ export class UserService {
       'type': 'add',
       'key': key,
     };
-    return this.http.post('/backend/api/sshkey/', body).subscribe(
+    return this.http.post('/backend/api/sshkey', body).subscribe(
       data => {
         this.updateData(data);
       },
@@ -187,7 +187,7 @@ export class UserService {
       'type': 'remove',
       'id': key.id,
     };
-    return this.http.post('/backend/api/sshkey/', body).subscribe(
+    return this.http.post('/backend/api/sshkey', body).subscribe(
       (data) => {
         this.updateData(data);
       },
@@ -205,7 +205,7 @@ export class UserService {
       'key': key.id,
       'service': service.id,
     };
-    return this.http.post('/backend/api/deployments/', body).subscribe(
+    return this.http.post('/backend/api/deployments', body).subscribe(
       (data) => {
         //this.snackBar.open('Deployed key ' + key.name);
         this.updateData(data);
@@ -225,7 +225,7 @@ export class UserService {
       'service':  service.id,
     };
 
-    return this.http.post('/backend/api/deployments/', body).subscribe(
+    return this.http.post('/backend/api/deployments', body).subscribe(
       (data) => {
         //this.snackBar.open('Withdrew key ' + key.name);
         this.updateData(data);
@@ -315,4 +315,16 @@ export class UserService {
     }
     return false;
   }
+
+  public taskState(site, service): string {
+    if (site && service) {
+
+      for (const item of this.user.deployment_task_items){
+        if (item.site.id == site.id && item.service.id == service.id) {
+          return item.state;
+        }
+      }
+    }
+    return "done";
+  }
 }