Skip to content

GitLab

Commit 0cd7b267 authored by Lukas Burgey's avatar Lukas Burgey
Browse files

Refactor the depiction of VO services

parent 62b54714
Hide whitespace changes
Inline Side-by-side
src/app/body/body.component.html
View file @ 0cd7b267
<div class="body">
<div *ngIf="userService.loggedIn()" class="mat-typography">
<div style="padding-bottom: 30px;">
<h2>Your Virtual Organisations</h2>
<mat-accordion *ngIf="userService.user.groups.length > 0">
<app-vo *ngFor="let group of userService.getGroups()" [group]="group" [deployment]="userService.getDeploymentByGroup(group)"></app-vo>
</mat-accordion>
</div>
<div style="padding-bottom: 30px;">
<h2>Services</h2>
<mat-accordion *ngIf="userService.services.length > 0">
......@@ -10,11 +16,5 @@
This is due services requiring users to be member of a certain group.
</p>
</div>
<div *ngIf="userService.user" style="padding-bottom: 30px;">
<h2>Your Virtual Organisations</h2>
<mat-accordion *ngIf="userService.user.groups.length > 0">
<app-vo *ngFor="let group of userService.getGroups()" [group]="group"></app-vo>
</mat-accordion>
</div>
</div>
</div>
src/app/dialogues/credentials/credentials.component.html
View file @ 0cd7b267
<div class="mat-typography">
<h2>Credentials</h2>
<p>
You can access the service {{ stateItem.service.name }} at {{ stateItem.site.name }} using the SSH Key {{ stateItem.key.name }}.
You can access the service {{ service.name }} at {{ service.site[0].name }} using your SSH Key {{ stateItem.key.name }}.
</p>
<div *ngIf="credentialCount > 0">
<p>
......
src/app/dialogues/credentials/credentials.component.ts
View file @ 0cd7b267
......@@ -13,6 +13,7 @@ import * as t from '../../types/types.module';
export class CredentialsComponent implements OnInit {
public columns = ["name", "value"];
public stateItem: t.DeploymentStateItem;
public service: t.Service;
public credentialCount: number = 0;
public table: MatTableDataSource<any>;
......@@ -21,6 +22,7 @@ export class CredentialsComponent implements OnInit {
@Inject(MAT_DIALOG_DATA) public data: any,
) {
this.stateItem = data.stateItem;
this.service = data.service;
}
ngOnInit() {
......
src/app/dialogues/dialog.service.ts
View file @ 0cd7b267
......@@ -57,12 +57,13 @@ export class DialogService {
);
}
public openCredentials(stateItem: t.DeploymentStateItem) {
public openCredentials(service: t.Service, stateItem: t.DeploymentStateItem) {
this.credentialsDialog = this.dialog.open(
CredentialsComponent,
{
data: {
stateItem: stateItem,
service: service,
}
}
);
......
src/app/service/service.component.html
View file @ 0cd7b267
......@@ -28,7 +28,7 @@
<span [ngSwitch]="taskState(site, key)" class="childs-inline">
<!-- states with actions -->
<button *ngSwitchCase="'deployed'" mat-button mat-icon-button
(click)="dialog.openCredentials(taskItem(site, key))"
(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>
......
src/app/types/types.module.ts
View file @ 0cd7b267
......@@ -48,7 +48,8 @@ export interface SSHKeyRef {
export interface Service {
id: number;
name: string;
sites: Site[];
site: Site[];
description: string;
groups: Group[];
}
......@@ -64,10 +65,14 @@ export interface DeploymentStateItem {
credentials: JSONObject;
key: SSHKeyRef;
service: Service;
services: Service[];
group: Group;
}
export interface DeploymentState {
id: number;
service: Service;
services: Service[];
group: Group;
key: SSHKeyRef;
state_items: DeploymentStateItem[];
}
......@@ -78,6 +83,7 @@ export interface Deployment {
group: number; // the group id
ssh_keys: SSHKeyRef[];
states: DeploymentState[];
sites: Site[];
}
export interface User {
......
src/app/user.service.ts
View file @ 0cd7b267
......@@ -75,7 +75,7 @@ export class UserService {
private connectLiveUpdates() {
this.initStomp();
let subscription = this._stompService.subscribe(
'/exchange/update/' + this.user.id.toString()
'/exchange/users/' + this.user.id.toString()
);
subscription.subscribe(
......@@ -178,6 +178,12 @@ export class UserService {
}
// PUBLIC API
public serviceDescription(service: t.Service): string {
if (service.description != "") {
return service.description;
}
return "No description";
}
public getDeployment(service: t.Service): t.Deployment {
return this.userState.deployments.find(
dep => {
......@@ -193,6 +199,15 @@ export class UserService {
return this.groupMap.get(group.name);
}
private getDeploymentByGroup(group: t.Group): t.Deployment | undefined {
let dep = this.userState.deployments.find(
(d: t.Deployment) => {
return d.group === group.id;
}
);
return dep
}
public getGroups(): t.Group[] {
if (this.user.groups) {
return this.user.groups.sort(
......
src/app/vo/vo.component.html
View file @ 0cd7b267
<mat-expansion-panel>
<mat-expansion-panel-header>
<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-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 }}":
These services are provided for members of this VO:
</p>
<table style="margin-bottom: 30px;">
<table style="margin-bottom: 30px; margin: auto;">
<thead>
<tr>
<td></td>
......@@ -16,69 +18,76 @@
<td>SSH Keys</td>
</tr>
<tr>
<td style="min-width: 150px;">Service</td>
<td style="min-width: 150px;">Site</td>
<td style="min-width: 150px;">Service</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>
<ng-container *ngFor="let site of sites()">
<tr *ngFor="let service of servicesBySite(site);" style="height: 42px;">
<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>
<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>
</td>
<td>
<span style="margin-right: 10px;" matTooltip="{{ userService.serviceDescription(service) }}">
<mat-icon>web</mat-icon>
{{ service.name }}
</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>
</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 for the service {{ service.name }}. Click to see details.">
<mat-icon>call_made</mat-icon>
</button>
<button *ngSwitchCase="'questionnaire'" mat-button mat-icon-button
(click)="dialog.openQuestionnaire(taskItem(site, key))"
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 }} to the site {{ site.name }}">
<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 {{ site.name }}">
<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 for the service {{ service.name }}.">
<mat-icon>call_received</mat-icon>
</button>
<button *ngSwitchCase="'failed'" mat-icon-button matTooltip="Site {{ site.name }} failed to deploy the credentials. The deployment will be retried.">
<mat-icon>error</mat-icon>
</button>
<button *ngSwitchCase="'rejected'" mat-icon-button matTooltip="Site {{ site.name }} 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 the site {{ site.name }}.">
<mat-icon>call_received</mat-icon>
</span>
</span>
</span>
</td>
</tr>
</td>
</tr>
</ng-container>
</tbody>
</table>
</ng-template>
<ng-template #noServiceList>
<p>
No services need membership of the VO "{{ group.name }}".
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.
</p>
</ng-template>
<mat-action-row>
......
src/app/vo/vo.component.ts
View file @ 0cd7b267
import { Component, OnInit, Input } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { DialogService } from '../dialogues/dialog.service';
import { UserService } from '../user.service';
import * as t from '../types/types.module';
......@@ -12,24 +13,46 @@ import * as t from '../types/types.module';
export class VoComponent implements OnInit {
@Input() group: t.Group;
public deployment: t.Deployment;
@Input() deployment: t.Deployment;
constructor(
public userService: UserService,
public http: HttpClient,
public dialog: DialogService,
) { }
ngOnInit() {
this.deployment = this._deployment();
}
private _deployment(): t.Deployment | undefined {
let dep = this.userService.userState.deployments.find(
(d: t.Deployment) => {
return d.group === this.group.id;
public sites(): t.Site[] {
if (this.deployment) {
return this.deployment.sites;
}
return 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
}
}
);
return dep
}
public servicesBySite(site: t.Site): t.Service[] {
if (this.deployment) {
return this.deployment.services.filter(
(s: t.Service) => {
return s.site.some(
(ss: t.Site) => {
return ss.id === site.id;
}
);
}
);
}
return this.userService.getServices(this.group);
}
public services(): t.Service[] {
......@@ -39,7 +62,7 @@ export class VoComponent implements OnInit {
return this.userService.getServices(this.group);
}
public taskItem(site: t.Site, key: t.SSHKeyRef): t.DeploymentStateItem | undefined {
public taskItem(site: t.Site, key: t.SSHKeyRef): t.DeploymentStateItem {
if (this.deployment == 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

Imprint