Commit 6cad41f1 authored by Lukas Burgey's avatar Lukas Burgey

Implement the logic of vo.component

parent 68457a37
......@@ -6,11 +6,11 @@
<table style="margin-bottom: 30px;">
<thead>
<tr>
<td></td>
<td>SSH Keys</td>
<td style="min-width: 150px;">Sites</td>
<td>SSH Key Deployments</td>
</tr>
<tr>
<td style="min-width: 120px;">Sites</td>
<td></td>
<td *ngFor="let key of userService.user.ssh_keys" style="width: 75px;">
{{key.name}}
</td>
......@@ -76,7 +76,7 @@
<div *ngIf="userService.user.ssh_keys.length > 0; then boxes else upload"></div>
<ng-template #boxes>
<span style="margin-right: 15px;">
Select SSH Keys to deploy:
SSH keys to deploy:
</span>
<mat-checkbox *ngFor="let key of userService.user.ssh_keys"
style="margin-right: 8px"
......
......@@ -181,7 +181,10 @@ export class UserService {
public getDeployment(service: t.Service): t.Deployment {
return this.userState.deployments.find(
dep => {
return dep.service.id === service.id;
if (dep.service) {
return dep.service.id === service.id;
}
return false
}
);
}
......
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>{{ group.name }} {{ group.id }}</mat-panel-title>
<mat-panel-title style="min-width: 100px;">{{ group.name }}</mat-panel-title>
<mat-panel-description>VO "{{ group.name }}" (Group ID: {{ group.id }})</mat-panel-description>
</mat-expansion-panel-header>
<div *ngIf="userService.getServices(group).length > 0; then serviceList else noServiceList"></div>
<ng-template #serviceList>
<p>
You have access to these services, because you are a member of the VO "{{ group.name }}":
</p>
<mat-accordion>
<app-service *ngFor="let service of userService.getServices(group)" [service]="service"></app-service>
</mat-accordion>
<table style="margin-bottom: 30px;">
<thead>
<tr>
<td></td>
<td></td>
<td>SSH Keys</td>
</tr>
<tr>
<td style="min-width: 150px;">Service</td>
<td style="min-width: 150px;">Site</td>
<td *ngFor="let key of userService.user.ssh_keys" style="min-width: 100px;">
{{key.name}}
</td>
</tr>
</thead>
<tbody>
<tr *ngFor="let service of services()" style="height: 42px;">
<td>
<span style="margin-right: 10px;">
<mat-icon>web</mat-icon>
{{ service.name }}
</span>
</td>
<td>
<span *ngFor="let site of service.site" matTooltip="Provided at site {{ site.name }}" style="margin-right: 10px;">
<mat-icon>account_balance</mat-icon>
{{ site.name }}
</span>
</td>
<td *ngFor="let key of userService.user.ssh_keys">
<span *ngFor="let site of service.site" [ngSwitch]="taskState(site, key)" class="childs-inline">
<!-- states with actions -->
<button *ngSwitchCase="'deployed'" mat-button mat-icon-button
(click)="dialog.openCredentials(taskItem(site, key))"
matTooltip="The key {{key.name}} is deployed to the site. Click to see details.">
<mat-icon>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>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>error</mat-icon>
</button>
<button *ngSwitchCase="'rejected'" mat-icon-button matTooltip="This site rejected the deployment of the key {{ key.name }}.">
<mat-icon>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>call_received</mat-icon>
</span>
</span>
</td>
</tr>
</tbody>
</table>
</ng-template>
<ng-template #noServiceList>
<p>
No services need membership of the VO "{{ group.name }}".
</p>
</ng-template>
<div>
Deployment: {{ deployment | json }}
</div>
<mat-action-row>
<div *ngIf="userService.user.ssh_keys.length > 0; then boxes else upload"></div>
<ng-template #boxes>
<span style="margin-right: 15px;">
Please select 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)">
<mat-checkbox *ngFor="let key of userService.user.ssh_keys" [checked]="isDeployed(key)" (change)="deploymentChange(key)">
{{ key.name }}
</mat-checkbox>
</ng-template>
......
......@@ -20,41 +20,41 @@ export class VoComponent implements OnInit {
) { }
ngOnInit() {
let deployments = this.userService.userState.deployments;
this.deployment = deployments.find(
this.deployment = this._deployment();
}
private _deployment(): t.Deployment | undefined {
let dep = this.userService.userState.deployments.find(
(d: t.Deployment) => {
if (d.group === this.group.id) {
return true;
}
return false;
return d.group === this.group.id;
}
);
console.log(this.deployment);
return dep
}
public isDeployed(key: t.SSHKeyRef): boolean {
public services(): t.Service[] {
if (this.deployment) {
return this.deployment.ssh_keys.some(k => {
return k.id === key.id;
});
return this.deployment.services;
}
return false;
return this.userService.getServices(this.group);
}
public taskItem(site: t.Site, key: t.SSHKeyRef): t.DeploymentStateItem {
if (this.deployment) {
const deploymentState = this.deployment.states.find(
state => {
return state.key.id === key.id
public taskItem(site: t.Site, key: t.SSHKeyRef): t.DeploymentStateItem | undefined {
if (this.deployment == undefined) {
return undefined;
}
const deploymentState = this.deployment.states.find(
state => {
return state.key.id === key.id
}
);
if (deploymentState) {
return deploymentState.state_items.find(
item => {
return item.site.id === site.id
}
);
if (deploymentState) {
return deploymentState.state_items.find(
item => {
return item.site.id === site.id
}
);
}
}
}
......@@ -63,7 +63,7 @@ export class VoComponent implements OnInit {
if (item) {
return item.state;
}
return "";
return "unknown";
}
public changeDeployment(key: t.SSHKeyRef, action: string) {
......@@ -84,6 +84,16 @@ export class VoComponent implements OnInit {
);
}
public isDeployed(key: t.SSHKeyRef): boolean {
if (this.deployment == undefined) {
return false;
}
return this.deployment.ssh_keys.some(k => {
return k.id === key.id;
});
}
public deploymentChange(key: t.SSHKeyRef) {
if (!this.isDeployed(key)) {
......
......@@ -31,6 +31,15 @@ body {
}
mat-icon {
vertical-align: middle;
padding-right: 5px;
}
mat-checkbox {
margin-right: 10px;
}
.form-vertical {
display: flex;
flex-direction: column;
......
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