Skip to content

GitLab

feudalWebpage
feudalWebpage
Commit 7ec40c26 authored by Lukas Burgey's avatar Lukas Burgey
Browse files
Options

Rework the vo datas visuals 

This is an alternate rework
parent 98e4a281
Hide whitespace changes
Inline Side-by-side
Showing with 71 additions and 70 deletions
src/app/vo-data/vo-data.component.html
View file @ 7ec40c26
......@@ -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