Skip to content

GitLab

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

Refactor the depiction of VO services

parent 62b54714
Hide whitespace changes
Inline Side-by-side
Showing with 126 additions and 70 deletions
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