Commit dec71a6c authored by Lukas Burgey's avatar Lukas Burgey

Simplify vo-data

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