Commit 7ec40c26 authored by Lukas Burgey's avatar Lukas Burgey

Rework the vo datas visuals

This is an alternate rework
parent 98e4a281
......@@ -5,82 +5,83 @@
</mat-expansion-panel-header>
<!-- expansion body -->
<div *ngIf="services$$ | async; then serviceList else noServiceList"></div>
<ng-template #serviceList>
<p>
These services are provided for members of this VO.
</p>
<table style="margin-bottom: 30px; margin: auto;">
<thead>
<tr>
<td>Site</td>
<td>Service</td>
<td>State</td>
</tr>
</thead>
<tbody>
<ng-container *ngFor="let site of sites$$ | async">
<tr *ngFor="let service of servicesAtSite(site) | async" class="padded">
<td>
<span matTooltip="Site {{ site.name }} provides the service {{ service.name }} for members of {{ vo.name }}">
<mat-icon>account_balance</mat-icon>
{{ site.name }}
</span>
</td>
<td>
<span matTooltip="{{ userService.serviceDescription(service) }}">
<mat-icon>web</mat-icon>
{{ service.name }}
</span>
</td>
<ng-container *ngIf="(subscribeStateItem(site, service) | async) as stateItem; else noStateItem">
<td style="height: 42px;" class="childs-inline">
<span [ngSwitch]="stateItem.state" style="margin-right: 5px;">
<mat-icon *ngSwitchCase="'deployed'" matTooltip="The credentials are deployed for the service {{ 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 {{ 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 {{ site.name }}"></mat-progress-spinner>
<mat-icon *ngSwitchCase="'not_deployed'" mat-icon-button matTooltip="The credentials are not deployed for the service {{ service.name }}.">call_received</mat-icon>
<mat-icon *ngSwitchCase="'failed'" mat-icon-button matTooltip="Site {{ 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 {{ 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>
{{ stateItem.state }}
</td>
<td *ngIf="stateItem.state === 'questionaire'">
<button (click)="dialog.openQuestionnaire(stateItem)" mat-raised-button class="mat-elevation-z6"> Questionnaire </button>
</td>
<td *ngIf="stateItem.state === 'deployed'">
<button (click)="dialog.openCredentials(stateItem)" mat-raised-button class="mat-elevation-z6"> Credentials </button>
</td>
<td *ngIf="stateItem.state === 'failed'">
<button (click)="dialog.openMessage(stateItem)" mat-raised-button class="mat-elevation-z6"> Failure </button>
</td>
<td *ngIf="stateItem.state === 'rejected'">
<button (click)="dialog.openMessage(stateItem)" mat-raised-button class="mat-elevation-z6"> Rejected </button>
</td>
<td *ngIf="stateItem.is_credential_pending" class="childs-inline">
<span style="margin-right: 5px;">
<mat-progress-spinner diameter="24" mode="indeterminate"></mat-progress-spinner>
<div *ngIf="(services$$ | async) as services; else noServiceList">
<div *ngIf="services != undefined && services.length > 0; else noServiceList">
<p>
These services are provided for members of this VO.
</p>
<table style="margin: 30px 0px 30px 30px;">
<thead>
<tr>
<td>Site</td>
<td>Service</td>
<td>State</td>
</tr>
</thead>
<tbody>
<ng-container *ngFor="let site of sites$$ | async">
<tr *ngFor="let service of servicesAtSite(site) | async" class="padded">
<td>
<span matTooltip="Site {{ site.name }} provides the service {{ service.name }} for members of {{ vo.name }}">
<mat-icon>account_balance</mat-icon>
{{ site.name }}
</span>
SSH Keys pending
</td>
</ng-container>
<ng-template #noStateItem>
<td>
<span>
<mat-icon mat-icon-button matTooltip="Access to this service was never requested.">call_received</mat-icon>
<span matTooltip="{{ userService.serviceDescription(service) }}">
<mat-icon>web</mat-icon>
{{ service.name }}
</span>
</td>
</ng-template>
</tr>
</ng-container>
</tbody>
</table>
</ng-template>
<ng-container *ngIf="(subscribeStateItem(site, service) | async) as stateItem; else noStateItem">
<td style="height: 42px;" class="childs-inline">
<span [ngSwitch]="stateItem.state" style="margin-right: 5px;">
<mat-icon *ngSwitchCase="'deployed'" matTooltip="The credentials are deployed for the service {{ 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 {{ 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 {{ site.name }}"></mat-progress-spinner>
<mat-icon *ngSwitchCase="'not_deployed'" mat-icon-button matTooltip="The credentials are not deployed for the service {{ service.name }}.">call_received</mat-icon>
<mat-icon *ngSwitchCase="'failed'" mat-icon-button matTooltip="Site {{ 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 {{ 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>
{{ stateItem.state }}
</td>
<td *ngIf="stateItem.state === 'questionaire'">
<button (click)="dialog.openQuestionnaire(stateItem)" mat-raised-button class="mat-elevation-z6"> Questionnaire </button>
</td>
<td *ngIf="stateItem.state === 'deployed'">
<button (click)="dialog.openCredentials(stateItem)" mat-raised-button class="mat-elevation-z6"> Credentials </button>
</td>
<td *ngIf="stateItem.state === 'failed'">
<button (click)="dialog.openMessage(stateItem)" mat-raised-button class="mat-elevation-z6"> Failure </button>
</td>
<td *ngIf="stateItem.state === 'rejected'">
<button (click)="dialog.openMessage(stateItem)" mat-raised-button class="mat-elevation-z6"> Rejected </button>
</td>
<td *ngIf="stateItem.is_credential_pending" class="childs-inline">
<span style="margin-right: 5px;">
<mat-progress-spinner diameter="24" mode="indeterminate"></mat-progress-spinner>
</span>
SSH Keys pending
</td>
</ng-container>
<ng-template #noStateItem>
<td>
<span>
<mat-icon mat-icon-button matTooltip="Access to this service was never requested.">call_received</mat-icon>
</span>
</td>
</ng-template>
</tr>
</ng-container>
</tbody>
</table>
</div>
</div>
<ng-template #noServiceList>
<div *ngIf="deployment$$ | async as deployment">
<p *ngIf="deployment.state_target == 'deployed'">
<div *ngIf="(deployment$$ | async) as deployment; else noDeployment">
<p *ngIf="deployment.state_target === 'deployed'; else noDeployment">
Currently, no services need membership of this VO. We will deploy your credentials to new services.
</p>
</div>
......
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