Commit dec71a6c authored by Lukas Burgey's avatar Lukas Burgey

Simplify vo-data

parent 6e87dc8c
......@@ -19,7 +19,7 @@
</tr>
</thead>
<tbody>
<tr deployment-state-tr [service]="service" [site]="site"></tr>
<tr deployment-state-tr [service]="service"></tr>
</tbody>
</table>
</div>
......
......@@ -16,8 +16,6 @@ export class ServiceComponent implements OnInit {
@Input() service: Service;
public site: Site;
public deployment$: Observable<Deployment>;
public deploymentState$: Observable<DeploymentState>;
......@@ -28,7 +26,6 @@ export class ServiceComponent implements OnInit {
) { }
ngOnInit() {
this.site = this.service.site;
this.deploymentState$ = this.userService.subscribeStateFor(this.service);
this.deployment$ = this.userService.subscribeDeployment(
(dep: Deployment) => dep.service ? dep.service.id == this.service.id : false
......
<td>
<span matTooltip="Site {{ site.name }} provides the service {{ service.name }} for you">
<mat-icon>account_balance</mat-icon>
{{ site.name }}
</span>
<span matTooltip="Site {{ service.site.name }} provides the service {{ service.name }} for you">
<mat-icon>account_balance</mat-icon>
{{ service.site.name }}
</span>
</td>
<td>
<span matTooltip="{{ service.description }}">
<mat-icon>web</mat-icon>
{{ service.name }}
</span>
<span matTooltip="{{ service.description }}">
<mat-icon>web</mat-icon>
{{ service.name }}
</span>
</td>
<ng-container *ngIf="(state$ | async) as state; else noStateItem">
<td [matTooltip]="tooltip(state)">
<span [ngSwitch]="state.state" class="spaced">
<mat-icon *ngSwitchCase="'deployed'">call_made</mat-icon>
<mat-icon *ngSwitchCase="'questionnaire'">warning</mat-icon>
<mat-progress-spinner *ngSwitchCase="'deployment_pending'" diameter="24" mode="indeterminate"></mat-progress-spinner>
<mat-progress-spinner *ngSwitchCase="'removal_pending'" diameter="24" mode="indeterminate"></mat-progress-spinner>
<mat-icon *ngSwitchCase="'not_deployed'" mat-icon-button>call_received</mat-icon>
<mat-icon *ngSwitchCase="'failed'" mat-icon-button>error</mat-icon>
<mat-icon *ngSwitchCase="'rejected'" mat-icon-button>error</mat-icon>
<mat-icon *ngSwitchDefault mat-icon-button>call_received</mat-icon>
</span>
{{ lang.printState(state.state) }}
</td>
<td [matTooltip]="tooltip(state)">
<span [ngSwitch]="state.state" class="spaced">
<mat-icon *ngSwitchCase="'deployed'">call_made</mat-icon>
<mat-icon *ngSwitchCase="'questionnaire'">warning</mat-icon>
<mat-progress-spinner *ngSwitchCase="'deployment_pending'" diameter="24" mode="indeterminate"></mat-progress-spinner>
<mat-progress-spinner *ngSwitchCase="'removal_pending'" diameter="24" mode="indeterminate"></mat-progress-spinner>
<mat-icon *ngSwitchCase="'not_deployed'" mat-icon-button>call_received</mat-icon>
<mat-icon *ngSwitchCase="'failed'" mat-icon-button>error</mat-icon>
<mat-icon *ngSwitchCase="'rejected'" mat-icon-button>error</mat-icon>
<mat-icon *ngSwitchDefault mat-icon-button>call_received</mat-icon>
</span>
{{ lang.printState(state.state) }}
</td>
<!-- state dependent buttons -->
<td *ngIf="state.state == 'deployed'">
<button (click)="dialog.openCredentials(state$)" mat-raised-button class="mat-elevation-z6">
Credentials
</button>
</td>
<td *ngIf="state.state == 'questionnaire'">
<button (click)="dialog.openQuestionnaire(state$)" mat-raised-button class="mat-elevation-z6">
Questionnaire
</button>
</td>
<td *ngIf="state.state == 'failed'">
<button (click)="dialog.openMessage(state)" mat-raised-button class="mat-elevation-z6">
Failure
</button>
</td>
<td *ngIf="state.state == 'rejected'">
<button (click)="dialog.openMessage(state)" mat-raised-button class="mat-elevation-z6">
Rejected
</button>
</td>
<td *ngIf="!state.is_pending && state.is_credential_pending">
<span>
<mat-progress-spinner diameter="24" mode="indeterminate"></mat-progress-spinner>
SSH Keys pending
</span>
</td>
<td *ngIf="(state.questionnaire | ObjKeys).length > 0 && state.state == 'deployed'"
matTooltip="Change previously submitted answers">
<button (click)="dialog.openQuestionnaire(state$)" mat-icon-button>
<mat-icon>edit</mat-icon>
</button>
</td>
<!-- state dependent buttons -->
<td *ngIf="state.state == 'deployed'">
<button (click)="dialog.openCredentials(state$)" mat-raised-button class="mat-elevation-z6">
Credentials
</button>
</td>
<td *ngIf="state.state == 'questionnaire'">
<button (click)="dialog.openQuestionnaire(state$)" mat-raised-button class="mat-elevation-z6">
Questionnaire
</button>
</td>
<td *ngIf="state.state == 'failed'">
<button (click)="dialog.openMessage(state)" mat-raised-button class="mat-elevation-z6">
Failure
</button>
</td>
<td *ngIf="state.state == 'rejected'">
<button (click)="dialog.openMessage(state)" mat-raised-button class="mat-elevation-z6">
Rejected
</button>
</td>
<td *ngIf="!state.is_pending && state.is_credential_pending">
<span>
<mat-progress-spinner diameter="24" mode="indeterminate"></mat-progress-spinner>
SSH Keys pending
</span>
</td>
<td *ngIf="(state.questionnaire | ObjKeys).length > 0 && state.state == 'deployed'"
matTooltip="Change previously submitted answers">
<button (click)="dialog.openQuestionnaire(state$)" mat-icon-button>
<mat-icon>edit</mat-icon>
</button>
</td>
</ng-container>
<ng-template #noStateItem>
<td>
<span>
<mat-icon mat-icon-button matTooltip="Access to this service was never requested.">call_received</mat-icon>
</span>
{{ lang.printState('not_deployed') }}
</td>
<td>
<span>
<mat-icon mat-icon-button matTooltip="Access to this service was never requested.">call_received</mat-icon>
</span>
{{ lang.printState('not_deployed') }}
</td>
</ng-template>
......@@ -14,7 +14,6 @@ import { Site, Service, DeploymentState } from '../types/types.module';
})
export class StateComponent implements OnInit {
@Input() site: Site;
@Input() service: Service;
public state$: Observable<DeploymentState>;
......@@ -39,15 +38,15 @@ export class StateComponent implements OnInit {
case "deployed":
return `The credentials are deployed for the service ${ this.service.name }. Click to see details.`;
case "deployment_pending":
return `Waiting for the deployment of the credentials to the site ${ this.site.name }`;
return `Waiting for the deployment of the credentials to the site ${ this.service.site.name }`;
case "removal_pending":
return `Waiting for the removal of the credentials from the site ${ this.site.name }`;
return `Waiting for the removal of the credentials from the site ${ this.service.site.name }`;
case "questionnaire":
return `Site ${ this.site.name } needs more data to deploy the keys. Please click to submit the data.`;
return `Site ${ this.service.site.name } needs more data to deploy the keys. Please click to submit the data.`;
case "failed":
return `Site ${ this.site.name } failed to deploy the credentials. The deployment will be retried. Click for details.`;
return `Site ${ this.service.site.name } failed to deploy the credentials. The deployment will be retried. Click for details.`;
case "rejected":
return `Site ${ this.site.name } rejected the deployment of the credentials. Click for details.`;
return `Site ${ this.service.site.name } rejected the deployment of the credentials. Click for details.`;
default:
return "Access to this service was never requested.";
}
......
......@@ -13,8 +13,12 @@
<p *ngIf="vo.description != ''">
{{ vo.description }}
</p>
<div *ngIf="(services$$ | async) as services; else noServiceList">
<div *ngIf="services != undefined && services.length > 0; else noServiceList">
<!--
<div>
<div *ngIf="groups != undefined && groups.length > 0; else noServiceList">
-->
<div *ngIf="(groupedServices$ | async) as grouped; else noServiceList">
<div>
<p>
These services are provided for members of this VO.
</p>
......@@ -27,9 +31,7 @@
</tr>
</thead>
<tbody>
<ng-container *ngFor="let site of sites$$ | async">
<tr *ngFor="let service of servicesAtSite(site) | async" deployment-state-tr [service]="service" [site]="site"></tr>
</ng-container>
<tr *ngFor="let service of grouped" deployment-state-tr [service]="service"></tr>
</tbody>
</table>
</div>
......
import { Component, OnInit, Input } from '@angular/core';
import { Observable, BehaviorSubject } from 'rxjs';
import { map } from 'rxjs/operators';
import { Observable, GroupedObservable, of, from, EMPTY } from 'rxjs';
import { map, tap, filter, flatMap, groupBy, toArray } from 'rxjs/operators';
import { UserService } from '../user.service';
import { LanguageService } from '../language.service';
import { DialogService } from '../dialogues/dialog.service';
import { VO, Site, Service, Deployment, DeploymentState } from '../types/types.module';
import { User, VO, Site, Service, Deployment, DeploymentState } from '../types/types.module';
@Component({
selector: 'app-vo-data',
......@@ -17,15 +17,11 @@ export class VoDataComponent implements OnInit {
@Input() vo: VO;
private services: Service[];
private services$ = new BehaviorSubject<Service[]>([]);
public services$$: Observable<Service[]>;
private sites: Map<number, Site> = new Map();
private sites$ = new BehaviorSubject<Site[]>([]);
public sites$$: Observable<Site[]>;
public user$: Observable<User>;
public deployment$: Observable<Deployment>;
// service grouped by site
public groupedServices$: Observable<Service[]>;
constructor(
public userService: UserService,
......@@ -35,58 +31,21 @@ export class VoDataComponent implements OnInit {
}
ngOnInit(): void {
this.services$$ = this.services$.asObservable();
this.sites$$ = this.sites$.asObservable();
this.deployment$ = this.userService.subscribeDeployment(
(dep: Deployment) => dep.vo ? dep.vo.id == this.vo.id : false
);
// this is just used when no deployment exists
this.userService.servicesSrc().subscribe(
(services: Service[]) => {
this.services = services;
this.services$.next(this.services);
}
);
this.deployment$.subscribe(
(dep: Deployment) => {
if (dep != undefined) {
this.services = dep.services;
this.services$.next(this.services);
this.groupedServices$ = this.userService.userSrc().pipe(
map(user => {
if (user != undefined && user.services != undefined) {
const voServices = user.services.filter(
service => service.vos.some(svo => svo.id == this.vo.id),
);
const groupedServices = voServices.sort(service => service.site.id);
return groupedServices;
}
}
);
this.services$$.subscribe(
(services: Service[]) => {
services.map(
(s: Service) => this.sites.set(s.site.id, s.site)
);
const uniqueSites = []
this.sites.forEach(
site => uniqueSites.push(site)
);
this.sites$.next(uniqueSites);
}
);
}
ngOnDestroy(): void {
this.services$.complete();
this.sites$.complete();
}
public servicesAtSite(site: Site): Observable<Service[]> {
return this.services$$.pipe(
map(
(services: Service[]) => services.filter(
(service: Service) => service.site.id === site.id
),
),
return [];
}),
);
}
}
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