Commit fd871539 authored by Lukas Burgey's avatar Lukas Burgey

Fix the vo and service components

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