Commit d30be74b authored by Lukas Burgey's avatar Lukas Burgey

Change the visuals of the vo component

parent db947c60
...@@ -22,7 +22,7 @@ export class CredentialsComponent implements OnInit { ...@@ -22,7 +22,7 @@ export class CredentialsComponent implements OnInit {
@Inject(MAT_DIALOG_DATA) public data: any, @Inject(MAT_DIALOG_DATA) public data: any,
) { ) {
this.stateItem = data.stateItem; this.stateItem = data.stateItem;
this.service = data.service; this.service = data.stateItem.service;
} }
ngOnInit() { ngOnInit() {
......
...@@ -59,13 +59,12 @@ export class DialogService { ...@@ -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( this.credentialsDialog = this.dialog.open(
CredentialsComponent, CredentialsComponent,
{ {
data: { data: {
stateItem: stateItem, stateItem: stateItem,
service: service,
} }
} }
); );
......
<mat-expansion-panel> <mat-expansion-panel>
<mat-expansion-panel-header> <mat-expansion-panel-header>
<mat-panel-title style="min-width: 100px;">{{ group.name }}</mat-panel-title> <mat-panel-title style="min-width: 100px;">{{ group.name }}</mat-panel-title>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<div *ngIf="deploymentMapped()"> <div *ngIf="deploymentMapped()">
<div [ngSwitch]="deployment.state_target"> <div [ngSwitch]="deployment?.state_target">
<span *ngSwitchCase="'not_deployed'"> <span *ngSwitchCase="'not_deployed'">
You currently did not request access to services of this VO. You currently did not request access to services of this VO.
</span> </span>
<span *ngSwitchCase="'deployed'"> <span *ngSwitchCase="'deployed'">
You requested access to services of this VO. You requested access to services of this VO.
</span> </span>
</div>
</div> </div>
<p *ngIf="!deploymentMapped()"> </div>
No deployment is currently mapped to this VO. <p *ngIf="!deploymentMapped()">
No deployment is currently mapped to this VO.
</p>
<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. You can inspect credentials by clicking on the arrows.
</p> </p>
<div *ngIf="userService.getServices(group).length > 0; then serviceList else noServiceList"></div> <table style="margin-bottom: 30px; margin: auto;">
<ng-template #serviceList> <thead>
<p> <tr>
These services are provided for members of this VO. You can inspect credentials by clicking on the arrows. <td style="min-width: 100px;">Site</td>
</p> <td style="min-width: 100px;">Service</td>
<table style="margin-bottom: 30px; margin: auto;"> <td style="min-width: 75px;">State</td>
<thead> <td style="min-width: 200px;"></td>
<tr> </tr>
<td style="min-width: 100px;">Site</td> </thead>
<td style="min-width: 100px;">Service</td> <tbody>
<td style="min-width: 100px;">State</td> <tr *ngFor="let item of deployment?.state_items" >
<td style="min-width: 100px;">Message</td> <td>
</tr> <span style="margin-right: 10px;" matTooltip="Site {{ item.site.name }} provides the service {{ item.service.name }} for members of {{ item.group.name }}">
</thead> <mat-icon>account_balance</mat-icon>
<tbody> {{ item.site.name }}
<ng-container *ngFor="let site of sites()"> </span>
<tr *ngFor="let service of servicesBySite(site);" style="height: 42px;"> </td>
<td> <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="{{ userService.serviceDescription(item.service) }}">
<mat-icon>account_balance</mat-icon> <mat-icon>web</mat-icon>
{{ site.name }} {{ item.service.name }}
</span> </span>
</td> </td>
<td> <td>
<span style="margin-right: 10px;" matTooltip="{{ userService.serviceDescription(service) }}"> <span [ngSwitch]="item.state" class="childs-inline">
<mat-icon>web</mat-icon> <mat-icon *ngSwitchCase="'deployed'" matTooltip="The credentials are deployed for the service {{ item.service.name }}. Click to see details.">call_made</mat-icon>
{{ service.name }} <mat-icon *ngSwitchCase="'questionnaire'" matTooltip="This site needs more data to deploy the keys. Please click to submit the data.">warning</mat-icon>
</span> <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>
</td> <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>
<td> <mat-icon *ngSwitchCase="'not_deployed'" mat-icon-button matTooltip="The credentials are not deployed for the service {{ item.service.name }}.">call_received</mat-icon>
<span [ngSwitch]="stateItem(service, site)?.state" class="childs-inline"> <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>
<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 *ngSwitchCase="'rejected'" mat-icon-button matTooltip="Site {{ item.site.name }} rejected the deployment of the credentials. Click for details.">error</mat-icon>
<mat-icon>call_made</mat-icon> <mat-icon *ngSwitchDefault mat-icon-button matTooltip="Access to this service was never requested.">call_received</mat-icon>
</button> </span>
<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."> </td>
<mat-icon>warning</mat-icon> <td>
</button> <button *ngIf="item.state == 'questionnaire'" (click)="dialog.openQuestionnaire(item)" mat-raised-button class="mat-elevation-z6">
<span *ngSwitchCase="'deployment_pending'" mat-icon-button matTooltip="Waiting for the deployment of the credentials to the site {{ site.name }}"> Questionnaire
<mat-progress-spinner diameter="24" mode="indeterminate"></mat-progress-spinner> </button>
</span> <button *ngIf="item.state == 'deployed'" (click)="dialog.openCredentials(item)" mat-raised-button class="mat-elevation-z6">
<span *ngSwitchCase="'removal_pending'" mat-icon-button matTooltip="Waiting for the removal of the credentials from the site {{ site.name }}"> Credentials
<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>
</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>
<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>
<button *ngSwitchDefault mat-icon-button matTooltip="Access to this service was never requested.">
<mat-icon>call_received</mat-icon>
</button>
</span>
</td>
<td>
<p>
{{ stateItem(service, site)?.message }}
</p>
</td>
</tr>
</ng-container>
</tbody>
</table>
</ng-template>
<ng-template #noServiceList>
<p>
Currently, no services need membership of this VO. You can select keys for this VO anyway. We will deploy them to new services, that need
membership of this VO.
</p>
</ng-template>
<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> </button>
<button *ngSwitchCase="'deployed'" mat-raised-button color="accent" matTooltip="TODO" (click)="changeDeployment('remove')"> <button *ngIf="item.state == 'failed'" (click)="dialog.openMessage(item)" mat-raised-button class="mat-elevation-z6">
Remove credentials from services of VO {{ group.name }} Failure
</button> </button>
<button *ngSwitchDefault mat-raised-button color="accent" matTooltip="TODO" (click)="changeDeployment('add')"> <button *ngIf="item.state == 'rejected'" (click)="dialog.openMessage(item)" mat-raised-button class="mat-elevation-z6">
Deploy credentials to future services of VO {{ group.name }} Rejected
</button> </button>
</div> </td>
</mat-action-row> </tr>
</tbody>
</table>
</ng-template>
<ng-template #noServiceList>
<p>
Currently, no services need membership of this VO. You can select keys for this VO anyway. We will deploy them to new services, that need
membership of this VO.
</p>
</ng-template>
{{ deployment?.state_items | json }}
<mat-action-row>
<div [ngSwitch]="deployment?.state_target">
<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'" (click)="changeDeployment('remove')" mat-raised-button color="primary" matTooltip="Remove credentials from services of VO {{ group.name }}">
Remove credentials
</button>
<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>
</mat-expansion-panel> </mat-expansion-panel>
...@@ -38,6 +38,9 @@ button.mat-button { ...@@ -38,6 +38,9 @@ button.mat-button {
mat-icon { mat-icon {
vertical-align: middle; vertical-align: middle;
} }
button.mat-raised-button {
vertical-align: middle;
}
mat-checkbox { mat-checkbox {
margin-right: 10px; margin-right: 10px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment