Change the visuals of the vo component

src/app/dialogues/credentials/credentials.component.ts

@@ -22,7 +22,7 @@ export class CredentialsComponent implements OnInit {
     @Inject(MAT_DIALOG_DATA) public data: any,
   ) {
     this.stateItem = data.stateItem;
-    this.service = data.service;
+    this.service = data.stateItem.service;
   }
 
   ngOnInit() {

src/app/dialogues/dialog.service.ts

@@ -59,13 +59,12 @@ export class DialogService {
     );
   }
 
-  public openCredentials(service: t.Service, stateItem: t.DeploymentStateItem) {
+  public openCredentials(stateItem: t.DeploymentStateItem) {
     this.credentialsDialog = this.dialog.open(
       CredentialsComponent,
       {
         data: {
           stateItem: stateItem,
-          service: service,
         }
       }
     );

src/app/vo/vo.component.html

@@ -3,7 +3,7 @@
 	<mat-panel-title style="min-width: 100px;">{{ group.name }}</mat-panel-title>
   </mat-expansion-panel-header>
   <div *ngIf="deploymentMapped()">
-		<div [ngSwitch]="deployment.state_target">
+	<div [ngSwitch]="deployment?.state_target">
 	  <span *ngSwitchCase="'not_deployed'">
 		You currently did not request access to services of this VO.
 	  </span>
@@ -25,60 +25,51 @@
 		<tr>
 		  <td style="min-width: 100px;">Site</td>
 		  <td style="min-width: 100px;">Service</td>
-					<td style="min-width: 100px;">State</td>
-					<td style="min-width: 100px;">Message</td>
+		  <td style="min-width: 75px;">State</td>
+		  <td style="min-width: 200px;"></td>
 		</tr>
 	  </thead>
 	  <tbody>
-				<ng-container *ngFor="let site of sites()">
-					<tr *ngFor="let service of servicesBySite(site);" style="height: 42px;">
+		<tr *ngFor="let item of deployment?.state_items" >
 		  <td>
-							<span style="margin-right: 10px;" matTooltip="Site {{ site.name }} provides the service {{ service.name }} for members of {{ group.name }}">
+			<span style="margin-right: 10px;" matTooltip="Site {{ item.site.name }} provides the service {{ item.service.name }} for members of {{ item.group.name }}">
 			  <mat-icon>account_balance</mat-icon>
-								{{ site.name }}
+		  {{ item.site.name }}
 			</span>
 		  </td>
 		  <td>
-							<span style="margin-right: 10px;" matTooltip="{{ userService.serviceDescription(service) }}">
+			<span style="margin-right: 10px;" matTooltip="{{ userService.serviceDescription(item.service) }}">
 			  <mat-icon>web</mat-icon>
-								{{ service.name }}
+			  {{ item.service.name }}
 			</span>
 		  </td>
 		  <td>
-							<span [ngSwitch]="stateItem(service, site)?.state" class="childs-inline">
-								<button *ngSwitchCase="'deployed'" (click)="dialog.openCredentials(service, stateItem(service, site))" mat-button mat-icon-button matTooltip="The credentials are deployed for the service {{ service.name }}. Click to see details.">
-									<mat-icon>call_made</mat-icon>
-								</button>
-								<button *ngSwitchCase="'questionnaire'" (click)="dialog.openQuestionnaire(stateItem(service, site))" mat-button mat-icon-buttonmatTooltip="This site needs more data to deploy the keys. Please click to submit the data.">
-									<mat-icon>warning</mat-icon>
-								</button>
-								<span *ngSwitchCase="'deployment_pending'" mat-icon-button matTooltip="Waiting for the deployment of the credentials to the site {{ site.name }}">
-									<mat-progress-spinner diameter="24" mode="indeterminate"></mat-progress-spinner>
+			<span [ngSwitch]="item.state" class="childs-inline">
+			  <mat-icon *ngSwitchCase="'deployed'" matTooltip="The credentials are deployed for the service {{ item.service.name }}. Click to see details.">call_made</mat-icon>
+			  <mat-icon *ngSwitchCase="'questionnaire'" matTooltip="This site needs more data to deploy the keys. Please click to submit the data.">warning</mat-icon>
+			  <mat-progress-spinner *ngSwitchCase="'deployment_pending'" diameter="24" mode="indeterminate" matTooltip="Waiting for the deployment of the credentials to the site {{ item.site.name }}"></mat-progress-spinner>
+			  <mat-progress-spinner *ngSwitchCase="'removal_pending'" diameter="24" mode="indeterminate" matTooltip="Waiting for the removal of the credentials from the site {{ item.site.name }}"></mat-progress-spinner>
+			  <mat-icon *ngSwitchCase="'not_deployed'" mat-icon-button matTooltip="The credentials are not deployed for the service {{ item.service.name }}.">call_received</mat-icon>
+			  <mat-icon *ngSwitchCase="'failed'" mat-icon-button matTooltip="Site {{ item.site.name }} failed to deploy the credentials. The deployment will be retried. Click for details.">error</mat-icon>
+			  <mat-icon *ngSwitchCase="'rejected'" mat-icon-button matTooltip="Site {{ item.site.name }} rejected the deployment of the credentials. Click for details.">error</mat-icon>
+			  <mat-icon *ngSwitchDefault mat-icon-button matTooltip="Access to this service was never requested.">call_received</mat-icon>
 			</span>
-								<span *ngSwitchCase="'removal_pending'" mat-icon-button matTooltip="Waiting for the removal of the credentials from the site {{ site.name }}">
-									<mat-progress-spinner diameter="24" mode="indeterminate"></mat-progress-spinner>
-								</span>
-								<button *ngSwitchCase="'not_deployed'" mat-icon-button matTooltip="The credentials are not deployed for the service {{ service.name }}.">
-									<mat-icon>call_received</mat-icon>
+		  </td>
+		  <td>
+			<button *ngIf="item.state == 'questionnaire'" (click)="dialog.openQuestionnaire(item)" mat-raised-button class="mat-elevation-z6">
+			  Questionnaire
 			</button>
-								<button *ngSwitchCase="'failed'" (click)="dialog.openMessage(stateItem(service, site))" mat-icon-button matTooltip="Site {{ site.name }} failed to deploy the credentials. The deployment will be retried. Click for details.">
-									<mat-icon>error</mat-icon>
+			<button *ngIf="item.state == 'deployed'" (click)="dialog.openCredentials(item)" mat-raised-button class="mat-elevation-z6">
+			  Credentials
 			</button>
-								<button *ngSwitchCase="'rejected'" (click)="dialog.openMessage(stateItem(service, site))" mat-icon-button matTooltip="Site {{ site.name }} rejected the deployment of the credentials. Click for details.">
-									<mat-icon>error</mat-icon>
+			<button *ngIf="item.state == 'failed'" (click)="dialog.openMessage(item)" mat-raised-button class="mat-elevation-z6">
+			  Failure
 			</button>
-								<button *ngSwitchDefault mat-icon-button matTooltip="Access to this service was never requested.">
-									<mat-icon>call_received</mat-icon>
+			<button *ngIf="item.state == 'rejected'" (click)="dialog.openMessage(item)" mat-raised-button class="mat-elevation-z6">
+			  Rejected
 			</button>
-							</span>
-						</td>
-						<td>
-							<p>
-							{{ stateItem(service, site)?.message }}
-							</p>
 		  </td>
 		</tr>
-				</ng-container>
 	  </tbody>
 	</table>
   </ng-template>
@@ -88,16 +79,18 @@
 	membership of this VO.
 	</p>
   </ng-template>
+
+  {{ deployment?.state_items | json }}
   <mat-action-row>
 	<div [ngSwitch]="deployment?.state_target">
-			<button *ngSwitchCase="'not_deployed'" mat-raised-button color="accent" matTooltip="TODO" (click)="changeDeployment('add')">
-				Deploy credentials to services of VO {{ group.name }}
+	  <button *ngSwitchCase="'not_deployed'" (click)="changeDeployment('add')" mat-raised-button color="primary" matTooltip="Deploy credentials to services of VO {{ group.name }}">
+		Deploy credentials
 	  </button>
-			<button *ngSwitchCase="'deployed'" mat-raised-button color="accent" matTooltip="TODO" (click)="changeDeployment('remove')">
-				Remove credentials from services of VO {{ group.name }}
+	  <button *ngSwitchCase="'deployed'" (click)="changeDeployment('remove')" mat-raised-button color="primary" matTooltip="Remove credentials from services of VO {{ group.name }}">
+		Remove credentials
 	  </button>
-			<button *ngSwitchDefault mat-raised-button color="accent" matTooltip="TODO" (click)="changeDeployment('add')">
-				Deploy credentials to future services of VO {{ group.name }}
+	  <button *ngSwitchDefault (click)="changeDeployment('add')" mat-raised-button color="primary" matTooltip="Deploy credentials to services of VO {{ group.name }}">
+		Deploy credentials
 	  </button>
 	</div>
   </mat-action-row>

src/styles.css

@@ -38,6 +38,9 @@ button.mat-button {
 mat-icon {
 	vertical-align: middle;
 }
+button.mat-raised-button {
+	vertical-align: middle;
+}
 
 mat-checkbox {
 	margin-right: 10px;