Commit fd871539 authored by Lukas Burgey's avatar Lukas Burgey

Fix the vo and service components

parent e28d0f8c
...@@ -3,17 +3,12 @@ ...@@ -3,17 +3,12 @@
<mat-panel-title>{{ service.name }}</mat-panel-title> <mat-panel-title>{{ service.name }}</mat-panel-title>
<mat-panel-description>{{ service.description }}</mat-panel-description> <mat-panel-description>{{ service.description }}</mat-panel-description>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<table style="margin-bottom: 30px;"> <table style="margin-bottom: 30px; margin: auto;">
<thead> <thead>
<tr> <tr>
<td style="min-width: 150px;">Sites</td> <td style="min-width: 150px;">Site</td>
<td>SSH Key Deployments</td> <td>State</td>
</tr> <td style="min-width: 150px;"></td>
<tr>
<td></td>
<td *ngFor="let key of userService.user.ssh_keys" style="width: 75px;">
{{key.name}}
</td>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
...@@ -24,72 +19,51 @@ ...@@ -24,72 +19,51 @@
{{ site.name }} {{ site.name }}
</span> </span>
</td> </td>
<td *ngFor="let key of userService.user.ssh_keys"> <td>
<span [ngSwitch]="taskState(site, key)" class="childs-inline"> <span [ngSwitch]="stateItem(site)?.state" class="childs-inline">
<!-- states with actions --> <mat-icon *ngSwitchCase="'deployed'" matTooltip="The credentials are deployed for the service {{ service.name }}. Click to see details.">call_made</mat-icon>
<button *ngSwitchCase="'deployed'" mat-button mat-icon-button <mat-icon *ngSwitchCase="'questionnaire'" matTooltip="The site {{ site.name }} needs more data to deploy your credentials. Please click to submit the data.">warning</mat-icon>
(click)="dialog.openCredentials(service, taskItem(site, key))" <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>
matTooltip="The key {{key.name}} is deployed to the site. Click to see details."> <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 style="vertical-align: middle">call_made</mat-icon> <mat-icon *ngSwitchCase="'not_deployed'" mat-icon-button matTooltip="The credentials are not deployed for the service {{ service.name }}.">call_received</mat-icon>
</button> <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>
<button *ngSwitchCase="'questionnaire'" mat-button mat-icon-button <mat-icon *ngSwitchCase="'rejected'" mat-icon-button matTooltip="Site {{ site.name }} rejected the deployment of the credentials. Click for details.">error</mat-icon>
(click)="dialog.openQuestionnaire(taskItem(site, y))" <mat-icon *ngSwitchDefault mat-icon-button matTooltip="Access to this service was never requested.">call_received</mat-icon>
matTooltip="This site needs more data to deploy the keys. Please click to submit the data.">
<mat-icon>warning</mat-icon>
</button>
<!-- states without actions -->
<span *ngSwitchCase="'deployment_pending'" mat-icon-button matTooltip="Waiting for the deployment of the key {{ key.name }} by the site">
<mat-progress-spinner diameter="24" mode="indeterminate"></mat-progress-spinner>
</span>
<span *ngSwitchCase="'removal_pending'" mat-icon-button matTooltip="Waiting for the removal of the key {{ key.name }} from the site">
<mat-progress-spinner diameter="24" mode="indeterminate"></mat-progress-spinner>
</span>
<button *ngSwitchCase="'not_deployed'" mat-icon-button matTooltip="The key {{ key.name }} is not deployed to this site.">
<mat-icon style="vertical-align: middle">call_received</mat-icon>
</button>
<button *ngSwitchCase="'failed'" mat-icon-button matTooltip="This site failed to deploy the credentials. The deployment will be retried.">
<mat-icon style="vertical-align: middle">error</mat-icon>
</button>
<button *ngSwitchCase="'rejected'" mat-icon-button matTooltip="This site rejected the deployment of the key {{ key.name }}.">
<mat-icon style="vertical-align: middle">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 this site.">
<mat-icon style="vertical-align: middle">call_received</mat-icon>
</span>
</span> </span>
</td> </td>
</tr> <td>
</tbody> <span [ngSwitch]="stateItem(site)?.state">
</table> <button *ngSwitchCase="'questionnaire'" (click)="dialog.openQuestionnaire(stateItem(site))" mat-raised-button class="mat-elevation-z6"> Questionnaire </button>
<table> <button *ngSwitchCase="'deployed'" (click)="dialog.openCredentials(stateItem(site))" mat-raised-button class="mat-elevation-z6"> Credentials </button>
<tr> <button *ngSwitchCase="'failed'" (click)="dialog.openMessage(stateItem(site))" mat-raised-button class="mat-elevation-z6"> Failure </button>
<td *ngFor="let group of service.groups" style="margin-right: 15px;"> <button *ngSwitchCase="'rejected'" (click)="dialog.openMessage(stateItem(site))" mat-raised-button class="mat-elevation-z6"> Rejected </button>
<span matTooltip="Can be used with membership of group {{ group.name }}">
<mat-icon style="vertical-align: middle; padding-right: 5px;">lock outline</mat-icon>
{{ group.name }}
</span> </span>
</td> </td>
</tr> </tr>
</tbody>
</table> </table>
<mat-action-row> <mat-action-row>
<div *ngIf="userService.user.ssh_keys.length > 0; then boxes else upload"></div> <div [ngSwitch]="deployment?.state_target">
<ng-template #boxes> <span *ngSwitchCase="'not_deployed'" style="margin-right: 15px;">
<span style="margin-right: 15px;"> You did not request access to this service.
SSH keys to deploy: </span>
<span *ngSwitchCase="'deployed'" style="margin-right: 15px;">
You requested access to this service.
</span> </span>
<mat-checkbox *ngFor="let key of userService.user.ssh_keys" <span *ngSwitchDefault style="margin-right: 15px;">
style="margin-right: 8px" You never requested access to this service.
[checked]="isDeployed(key)"
(change)="deploymentChange(key)">
{{ key.name }}
</mat-checkbox>
</ng-template>
<ng-template #upload>
<span style="margin-right: 15px;">
Please upload an SSH Key to use this service:
</span> </span>
<button mat-icon-button (click)="dialog.openSshKeys()"><mat-icon>vpn_key</mat-icon></button> </div>
</ng-template> <div [ngSwitch]="deployment?.state_target">
<button *ngSwitchCase="'not_deployed'" (click)="changeDeployment('add')" mat-raised-button color="primary" matTooltip="Deploy credentials to the service">
Deploy credentials
</button>
<button *ngSwitchCase="'deployed'" (click)="changeDeployment('remove')" mat-raised-button color="primary" matTooltip="Remove credentials from the service">
Remove credentials
</button>
<button *ngSwitchDefault (click)="changeDeployment('add')" mat-raised-button color="primary" matTooltip="Deploy credentials to the service for the first time">
Deploy credentials
</button>
</div>
</mat-action-row> </mat-action-row>
</mat-expansion-panel> </mat-expansion-panel>
...@@ -27,49 +27,20 @@ export class ServiceComponent implements OnInit { ...@@ -27,49 +27,20 @@ export class ServiceComponent implements OnInit {
ngOnInit() { ngOnInit() {
} }
public isDeployed(key: t.SSHKeyRef): boolean { public stateItem(site: t.Site): t.DeploymentStateItem | undefined {
/* TODO
if (this.deployment) { if (this.deployment) {
return this.deployment.ssh_keys.some(k => { return this.deployment.state_items.find(
return k.id === key.id;
});
}
*/
return false;
}
public taskItem(site: t.Site, key: t.SSHKeyRef): t.DeploymentStateItem {
if (this.deployment) {
const deploymentState = null;
/*
const deploymentState = this.deployment.states.find(
state => {
return state.key.id === key.id
}
);
*/
if (deploymentState) {
return deploymentState.state_items.find(
item => { item => {
return item.site.id === site.id return item.site.id === site.id
} }
); );
} }
} return undefined;
} }
public taskState(site: t.Site, key: t.SSHKeyRef): string { public changeDeployment(action: string) {
let item = this.taskItem(site, key);
if (item) {
return item.state;
}
return "";
}
public changeDeployment(key: t.SSHKeyRef, action: string) {
const body = { const body = {
'type': action, 'type': action,
'key': key.id,
'service': this.service.id, 'service': this.service.id,
}; };
return this.http.post('/backend/api/deployments', body).subscribe( return this.http.post('/backend/api/deployments', body).subscribe(
...@@ -83,13 +54,4 @@ export class ServiceComponent implements OnInit { ...@@ -83,13 +54,4 @@ export class ServiceComponent implements OnInit {
} }
); );
} }
public deploymentChange(key: t.SSHKeyRef) {
if (!this.isDeployed(key)) {
this.changeDeployment(key, 'add');
} else {
this.changeDeployment(key, 'remove');
}
}
} }
...@@ -8,65 +8,60 @@ ...@@ -8,65 +8,60 @@
<div *ngIf="userService.getServices(group).length > 0; then serviceList else noServiceList"></div> <div *ngIf="userService.getServices(group).length > 0; then serviceList else noServiceList"></div>
<ng-template #serviceList> <ng-template #serviceList>
<p> <p>
These services are provided for members of this VO. You can inspect credentials by clicking on the arrows. These services are provided for members of this VO.
</p> </p>
<table style="margin-bottom: 30px; margin: auto;"> <table style="margin-bottom: 30px; margin: auto;">
<thead> <thead>
<tr> <tr>
<td style="min-width: 100px;">Site</td> <td style="min-width: 100px;">Site</td>
<td style="min-width: 100px;">Service</td> <td style="min-width: 100px;">Service</td>
<td style="min-width: 75px;">State</td> <td>State</td>
<td style="min-width: 200px;"></td> <td style="min-width: 150px;"></td>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr *ngFor="let item of deployment?.state_items" > <ng-container *ngFor="let site of sites()">
<tr *ngFor="let service of servicesBySite(site)" >
<td> <td>
<span style="margin-right: 10px;" matTooltip="Site {{ item.site.name }} provides the service {{ item.service.name }} for members of {{ item.group.name }}"> <span style="margin-right: 10px;" matTooltip="Site {{ site.name }} provides the service {{ service.name }} for members of {{ group.name }}">
<mat-icon>account_balance</mat-icon> <mat-icon>account_balance</mat-icon>
{{ item.site.name }} {{ site.name }}
</span> </span>
</td> </td>
<td> <td>
<span style="margin-right: 10px;" matTooltip="{{ userService.serviceDescription(item.service) }}"> <span style="margin-right: 10px;" matTooltip="{{ userService.serviceDescription(service) }}">
<mat-icon>web</mat-icon> <mat-icon>web</mat-icon>
{{ item.service.name }} {{ service.name }}
</span> </span>
</td> </td>
<td> <td style="height: 42px;">
<span [ngSwitch]="item.state" class="childs-inline"> <span [ngSwitch]="stateItem(site, service)?.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="'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-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="'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 {{ 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 {{ 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="'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 {{ item.site.name }} failed to deploy the credentials. The deployment will be retried. Click for details.">error</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 {{ item.site.name }} rejected the deployment of the credentials. 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> <mat-icon *ngSwitchDefault mat-icon-button matTooltip="Access to this service was never requested.">call_received</mat-icon>
</span> </span>
</td> </td>
<td> <td>
<button *ngIf="item.state == 'questionnaire'" (click)="dialog.openQuestionnaire(item)" mat-raised-button class="mat-elevation-z6"> <span [ngSwitch]="stateItem(site, service)?.state">
Questionnaire <button *ngSwitchCase="'questionnaire'" (click)="dialog.openQuestionnaire(stateItem(site, service))" mat-raised-button class="mat-elevation-z6"> Questionnaire </button>
</button> <button *ngSwitchCase="'deployed'" (click)="dialog.openCredentials(stateItem(site, service))" mat-raised-button class="mat-elevation-z6"> Credentials </button>
<button *ngIf="item.state == 'deployed'" (click)="dialog.openCredentials(item)" mat-raised-button class="mat-elevation-z6"> <button *ngSwitchCase="'failed'" (click)="dialog.openMessage(stateItem(site, service))" mat-raised-button class="mat-elevation-z6"> Failure </button>
Credentials <button *ngSwitchCase="'rejected'" (click)="dialog.openMessage(stateItem(site, service))" mat-raised-button class="mat-elevation-z6"> Rejected </button>
</button> </span>
<button *ngIf="item.state == 'failed'" (click)="dialog.openMessage(item)" mat-raised-button class="mat-elevation-z6">
Failure
</button>
<button *ngIf="item.state == 'rejected'" (click)="dialog.openMessage(item)" mat-raised-button class="mat-elevation-z6">
Rejected
</button>
</td> </td>
</tr> </tr>
</ng-container>
</tbody> </tbody>
</table> </table>
</ng-template> </ng-template>
<ng-template #noServiceList> <ng-template #noServiceList>
<p> <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 Currently, no services need membership of this VO. You can request a deployment anyway. We will deploy them to new services of this VO.
membership of this VO.
</p> </p>
</ng-template> </ng-template>
<mat-action-row> <mat-action-row>
...@@ -80,13 +75,13 @@ ...@@ -80,13 +75,13 @@
</div> </div>
<div [ngSwitch]="deployment?.state_target"> <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 }}"> <button *ngSwitchCase="'not_deployed'" (click)="changeDeployment('add')" mat-raised-button color="primary" matTooltip="Deploy credentials to services of VO {{ group.name }}">
Deploy credentials Deploy my credentials
</button> </button>
<button *ngSwitchCase="'deployed'" (click)="changeDeployment('remove')" mat-raised-button color="primary" matTooltip="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 Remove my credentials
</button> </button>
<button *ngSwitchDefault (click)="changeDeployment('add')" mat-raised-button color="primary" matTooltip="Deploy credentials to services of VO {{ group.name }} the first time"> <button *ngSwitchDefault (click)="changeDeployment('add')" mat-raised-button color="primary" matTooltip="Deploy credentials to services of VO {{ group.name }} the first time">
Deploy credentials Deploy my credentials
</button> </button>
</div> </div>
</mat-action-row> </mat-action-row>
......
...@@ -30,16 +30,25 @@ export class VoComponent implements OnInit { ...@@ -30,16 +30,25 @@ export class VoComponent implements OnInit {
} }
public sites(): t.Site[] { public sites(): t.Site[] {
return this.userService.getServices(this.group).map( let sites: Map<number, t.Site> = new Map();
let ss:t.Site[] = [];
this.userService.getServices(this.group).map(
(s: t.Service) => { (s: t.Service) => {
if (s.site.length == 1) { s.site.forEach(
return s.site[0]; site => {
} else { sites.set(site.id, site);
console.log("Group service is provided by more than one site!") }
return undefined );
} }
);
sites.forEach(
site => {
ss.push(site);
} }
); );
return ss;
} }
public servicesBySite(site: t.Site): t.Service[] { public servicesBySite(site: t.Site): t.Service[] {
...@@ -64,7 +73,7 @@ export class VoComponent implements OnInit { ...@@ -64,7 +73,7 @@ export class VoComponent implements OnInit {
return this.userService.getServices(this.group); return this.userService.getServices(this.group);
} }
public stateItem(service: t.Service, site: t.Site): t.DeploymentStateItem | undefined { public stateItem(site: t.Site, service: t.Service): t.DeploymentStateItem | undefined {
if (!this.deploymentMapped()) { if (!this.deploymentMapped()) {
return undefined; return undefined;
} }
......
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