Make minor changes

src/app/body/body.component.html

-<div class="body">
-	<div *ngIf="userService.loggedIn()" class="mat-typography">
-		<div style="padding-bottom: 30px;">
+<div class="body" class="mat-typography" class="body">
+	<mat-tab-group *ngIf="userService.loggedIn()">
+		<mat-tab label="Your VOs">
+			<div class="mat-typography" class="body">
 				<h2>Your Virtual Organisations</h2>
 				<mat-accordion *ngIf="userService.user.groups.length > 0">
 					<app-vo *ngFor="let group of userService.getGroups()" [group]="group" [deployment]="userService.getDeploymentByGroup(group)"></app-vo>
 				</mat-accordion>
+				<p *ngIf="userService.user.groups.length == 0">
+				You are not a member in any group.
+				</p>
 			</div>
-		<div style="padding-bottom: 30px;">
-			<h2>Services</h2>
+		</mat-tab>
+		<mat-tab label="Services">
+			<div class="mat-typography" class="body">
+				<h2>Available Services</h2>
 				<mat-accordion *ngIf="userService.services.length > 0">
 					<app-service *ngFor="let service of userService.services" [deployment]="userService.getDeployment(service)" [service]="service"></app-service>
 				</mat-accordion>
@@ -16,5 +22,6 @@
 				This is due services requiring users to be member of a certain group.
 				</p>
 			</div>
-	</div>
+		</mat-tab>
+	</mat-tab-group>
 </div>

src/app/dialogues/dialog.service.ts

@@ -6,6 +6,7 @@ import { SshKeysComponent } from './ssh-keys/ssh-keys.component';
 import { AccountComponent } from './account/account.component';
 import { QuestionnaireComponent } from './questionnaire/questionnaire.component';
 import { CredentialsComponent } from './credentials/credentials.component';
+import { MessageComponent } from './message/message.component';
 
 import * as t from '../types/types.module';
 
@@ -16,6 +17,7 @@ export class DialogService {
   accountDialog: MatDialogRef<any>;
   questionnaireDialog: MatDialogRef<any>;
   credentialsDialog: MatDialogRef<any>;
+  messageDialog: MatDialogRef<any>;
 
   settings = {
     width: '80%',
@@ -68,4 +70,15 @@ export class DialogService {
       }
     );
   }
+
+  public openMessage(stateItem: t.DeploymentStateItem) {
+    this.messageDialog = this.dialog.open(
+      MessageComponent,
+      {
+        data: {
+          stateItem: stateItem,
+        }
+      }
+    );
+  }
 }

src/app/dialogues/dialogues.module.ts

@@ -12,6 +12,7 @@ import {ProfileComponent} from './profile/profile.component';
 import {SshKeysComponent} from './ssh-keys/ssh-keys.component';
 import {AccountComponent} from './account/account.component';
 import {CredentialsComponent} from './credentials/credentials.component';
+import {MessageComponent} from './message/message.component';
 
 //providers
 import {DialogService} from './dialog.service';
@@ -29,6 +30,7 @@ import {DialogService} from './dialog.service';
     SshKeysComponent,
     AccountComponent,
     CredentialsComponent,
+    MessageComponent,
   ],
   entryComponents: [
     QuestionnaireComponent,
@@ -36,6 +38,7 @@ import {DialogService} from './dialog.service';
     SshKeysComponent,
     AccountComponent,
     CredentialsComponent,
+    MessageComponent,
   ],
   providers: [
     DialogService,

src/app/dialogues/message/message.component.html

+<div class="mat-typography">
+	<h2>Deployment State</h2>
+	<div [ngSwitch]="stateItem.state">
+		<p *ngSwitchCase="'failed'">
+		The deployment of key {{ stateItem.key.name }} failed:
+		</p>
+		<p *ngSwitchCase="'rejected'">
+		The deployment of key {{ stateItem.key.name }} was rejected:
+		</p>
+		<p *ngSwitchDefault>
+		The deployment of key {{ stateItem.key.name }} has unknown state:
+		</p>
+	</div>
+	<p>
+		{{ stateItem.message }}
+	</p>
+</div>

src/app/dialogues/message/message.component.ts

+import {Component, OnInit,Inject} from '@angular/core';
+import {MAT_DIALOG_DATA} from '@angular/material';
+
+import { UserService } from '../../user.service';
+import * as t from '../../types/types.module';
+
+@Component({
+  selector: 'app-message',
+  templateUrl: './message.component.html',
+  styleUrls: ['./message.component.css']
+})
+export class MessageComponent implements OnInit {
+  public stateItem: t.DeploymentStateItem;
+
+  constructor(
+    public userService: UserService,
+    @Inject(MAT_DIALOG_DATA) public data: any,
+  ) {
+    this.stateItem = data.stateItem;
+  }
+
+  ngOnInit() {
+  }
+}

src/app/material/material.module.ts

@@ -15,6 +15,7 @@ import {MatCheckboxModule} from '@angular/material/checkbox';
 import {MatTooltipModule} from '@angular/material/tooltip';
 import {MatProgressBarModule} from '@angular/material/progress-bar';
 import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
+import {MatTabsModule} from '@angular/material/tabs';
 
 @NgModule({
   imports: [
@@ -32,6 +33,7 @@ import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
     MatCheckboxModule,
     MatTooltipModule,
     MatProgressSpinnerModule,
+    MatTabsModule,
   ],
   exports: [
     MatButtonModule,
@@ -47,6 +49,7 @@ import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
     MatCheckboxModule,
     MatTooltipModule,
     MatProgressSpinnerModule,
+    MatTabsModule,
   ],
 })
 export class MaterialModule { }

src/app/types/types.module.ts

@@ -67,6 +67,7 @@ export interface DeploymentStateItem {
   service: Service;
   services: Service[];
   group: Group;
+  message: string;
 }
 export interface DeploymentState {
   id: number;

src/app/vo/vo.component.html

@@ -8,7 +8,7 @@
 	<div *ngIf="userService.getServices(group).length > 0; then serviceList else noServiceList"></div>
 	<ng-template #serviceList>
 		<p>
-		These services are provided for members of this VO:
+		These services are provided for members of this VO. You can inspect credentials by clicking on the arrows.
 		</p>
 		<table style="margin-bottom: 30px; margin: auto;">
 			<thead>
@@ -67,16 +67,20 @@
 											 matTooltip="The key {{ key.name }} is not deployed for the service {{ service.name }}.">
 									<mat-icon>call_received</mat-icon>
 								</button>
-								<button *ngSwitchCase="'failed'" mat-icon-button matTooltip="Site {{ site.name }} failed to deploy the credentials. The deployment will be retried.">
+								<button *ngSwitchCase="'failed'" mat-icon-button 
+			matTooltip="Site {{ site.name }} failed to deploy the key {{ key.name }}. The deployment will be retried. Click for details."
+   (click)="dialog.openMessage(taskItem(site, key))">
+								
 									<mat-icon>error</mat-icon>
 								</button>
-								<button *ngSwitchCase="'rejected'" mat-icon-button matTooltip="Site {{ site.name }} rejected the deployment of the key {{ key.name }}.">
+								<button *ngSwitchCase="'rejected'" mat-icon-button matTooltip="Site {{ site.name }} rejected the deployment of the key {{ key.name }}. Click for details."
+														   (click)="dialog.openMessage(taskItem(site, key))">
 									<mat-icon>error</mat-icon>
 								</button>
 								<!-- if we have no deployment -> assume state == not_deployed -->
-								<span *ngSwitchDefault mat-icon-button matTooltip="The key {{ key.name }} is not deployed to the site {{ site.name }}.">
+								<button *ngSwitchDefault mat-icon-button matTooltip="The key {{ key.name }} was never deployed to the site {{ site.name }}.">
 									<mat-icon>call_received</mat-icon>
-								</span>
+								</button>
 							</span>
 						</td>
 					</tr>

src/styles.css

@@ -37,7 +37,6 @@ button.mat-button {
 
 mat-icon {
 	vertical-align: middle;
-	padding-right: 5px;
 }
 
 mat-checkbox {