Commit 9261c69b authored by Lukas Burgey's avatar Lukas Burgey

Rewrite some core components

We now make use of attribute selectors at some places.
parent 9700e4ed
......@@ -31,6 +31,8 @@ import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { VoDataComponent } from './vo-data/vo-data.component';
import { ServiceComponent } from './service/service.component';
import { StateComponent } from './state/state.component';
import { DeploymentActionRowComponent } from './deployment-action-row/deployment-action-row.component';
@NgModule({
......@@ -56,6 +58,8 @@ import { ServiceComponent } from './service/service.component';
FooterComponent,
VoDataComponent,
ServiceComponent,
StateComponent,
DeploymentActionRowComponent,
],
providers: [
CookieService,
......
<div [ngSwitch]="(deployment$ | async)?.state_target">
<span *ngSwitchCase="'not_deployed'" style="margin-right: 15px;">
You did not request access to services of this VO.
</span>
<span *ngSwitchCase="'deployed'" style="margin-right: 15px;">
You requested access to the services of this VO.
</span>
</div>
<div [ngSwitch]="(deployment$ | async)?.state_target">
<button *ngSwitchCase="'not_deployed'" (click)="changeDeployment('add')" mat-raised-button color="primary" matTooltip="Deploy credentials to these services">
Deploy my credentials
</button>
<button *ngSwitchCase="'deployed'" (click)="changeDeployment('remove')" mat-raised-button color="primary" matTooltip="Remove credentials from these services">
Remove my credentials
</button>
<button *ngSwitchDefault (click)="changeDeployment('add')" mat-raised-button color="primary" matTooltip="Deploy credentials these services">
Deploy my credentials
</button>
</div>
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { DeploymentActionRowComponent } from './deployment-action-row.component';
describe('DeploymentActionRowComponent', () => {
let component: DeploymentActionRowComponent;
let fixture: ComponentFixture<DeploymentActionRowComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ DeploymentActionRowComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(DeploymentActionRowComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit, Input } from '@angular/core';
import { Observable } from 'rxjs';
import { UserService } from '../user.service';
import { Deployment, VO, Service } from '../types/types.module'
@Component({
selector: '[deployment-action-row]',
templateUrl: './deployment-action-row.component.html',
styleUrls: ['./deployment-action-row.component.css']
})
export class DeploymentActionRowComponent implements OnInit {
@Input() vo: VO;
@Input() service: Service;
@Input() deployment$: Observable<Deployment>;
constructor(
public userService: UserService,
) { }
ngOnInit() {
}
public changeDeployment(action: string): void {
if (this.vo != undefined) {
this.userService.changeVODeployment(action, this.vo);
} else if (this.service != undefined) {
this.userService.changeServiceDeployment(action, this.service);
}
}
}
<div *ngIf="(stateItem$ | async) as stateItem" class="mat-typography">
<h2>Credentials</h2>
<p>
For access to the service {{ stateItem.service.name }} at {{ stateItem.service.site.name }} additional credentials are needed.
For access to the service {{ stateItem.service?.name }} at {{ stateItem.service?.site?.name }} additional credentials are needed.
The additional credentials are listed below.
</p>
<div *ngIf="credentialCount > 0" style="margin-bottom: 50px;">
<mat-table [dataSource]="table">
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
<mat-cell *matCellDef="let element">{{ element.name}}</mat-cell>
<mat-cell *matCellDef="let element">{{ element ? element.name : '' }}</mat-cell>
</ng-container>
<ng-container matColumnDef="value">
<mat-header-cell *matHeaderCellDef>Value</mat-header-cell>
......@@ -21,7 +21,7 @@
<div>
<h2>Key Information</h2>
<p>
These are the current states of your keys at this service. The keys listed as "{{ lang.printState('deployed') }}" can be used to access the service via ssh.
These are the current states of your keys at this service. The keys listed as "deployed" can be used to access the service via ssh.
</p>
<table>
<thead>
......@@ -47,7 +47,7 @@
{{ lang.printState(state.state) }}
</td>
<td style="font-size: 110%;">
{{ state.credential.name }}
{{ state.credential?.name }}
</td>
<td *ngIf="state.is_pending">
<span class="spaced">
......
......@@ -22,6 +22,8 @@ export class LanguageService {
return "Failed";
case "rejected":
return "Rejected";
case "questionnaire":
return "Questionnaire";
default:
return "Not deployed";
}
......
......@@ -19,61 +19,7 @@
</tr>
</thead>
<tbody>
<tr>
<td>
<span matTooltip="Site {{ site.name }} provides the service {{ service.name }}.">
<mat-icon>account_balance</mat-icon>
{{ site.name }}
</span>
</td>
<td>
<span matTooltip="{{ service.description }}">
<mat-icon>web</mat-icon>
{{ service.name }}
</span>
</td>
<ng-container *ngIf="(deploymentState$ | async) as stateItem; else noStateItem">
<td>
<span [ngSwitch]="stateItem.state" class="spaced">
<mat-icon *ngSwitchCase="'deployed'" matTooltip="The credentials are deployed for the service {{ service.name }}. Click to see details.">call_made</mat-icon>
<mat-icon *ngSwitchCase="'questionnaire'" matTooltip="This site needs more data to deploy the keys. Please click to submit the data.">warning</mat-icon>
<mat-progress-spinner *ngSwitchCase="'deployment_pending'" diameter="24" mode="indeterminate" matTooltip="Waiting for the deployment of the credentials to the site {{ site.name }}"></mat-progress-spinner>
<mat-progress-spinner *ngSwitchCase="'removal_pending'" diameter="24" mode="indeterminate" matTooltip="Waiting for the removal of the credentials from the site {{ site.name }}"></mat-progress-spinner>
<mat-icon *ngSwitchCase="'not_deployed'" mat-icon-button matTooltip="The credentials are not deployed for the service {{ service.name }}.">call_received</mat-icon>
<mat-icon *ngSwitchCase="'failed'" mat-icon-button matTooltip="Site {{ site.name }} failed to deploy the credentials. The deployment will be retried. Click for details.">error</mat-icon>
<mat-icon *ngSwitchCase="'rejected'" mat-icon-button matTooltip="Site {{ site.name }} rejected the deployment of the credentials. Click for details.">error</mat-icon>
<mat-icon *ngSwitchDefault mat-icon-button matTooltip="Access to this service was never requested.">call_received</mat-icon>
</span>
{{ lang.printState(stateItem.state) }}
</td>
<td *ngIf="stateItem.state === 'questionaire'">
<button (click)="dialog.openQuestionnaire(stateItem)" mat-raised-button class="mat-elevation-z6"> Questionnaire </button>
</td>
<td *ngIf="stateItem.state === 'deployed'">
<button (click)="dialog.openCredentials(userService.subscribeStateFor(service))" mat-raised-button class="mat-elevation-z6"> Credentials </button>
</td>
<td *ngIf="stateItem.state === 'failed'">
<button (click)="dialog.openMessage(stateItem)" mat-raised-button class="mat-elevation-z6"> Failure </button>
</td>
<td *ngIf="stateItem.state === 'rejected'">
<button (click)="dialog.openMessage(stateItem)" mat-raised-button class="mat-elevation-z6"> Rejected </button>
</td>
<td *ngIf="!stateItem.is_pending && stateItem.is_credential_pending">
<span class="spaced">
<mat-progress-spinner diameter="24" mode="indeterminate"></mat-progress-spinner>
</span>
SSH Keys pending
</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>
</ng-template>
</tr>
<tr deployment-state-tr [service]="service" [site]="site"></tr>
</tbody>
</table>
</div>
......@@ -82,25 +28,5 @@
Your credentials were never deployed to the service {{ service.name }}
</p>
</ng-template>
<mat-action-row>
<div [ngSwitch]="(deployment$ | async)?.state_target">
<span *ngSwitchCase="'not_deployed'" style="margin-right: 15px;">
You did not request access to this service.
</span>
<span *ngSwitchCase="'deployed'" style="margin-right: 15px;">
You requested access to this service.
</span>
</div>
<div [ngSwitch]="(deployment$ | async)?.state_target">
<button *ngSwitchCase="'not_deployed'" (click)="changeDeployment('add')" mat-raised-button color="primary" matTooltip="Deploy credentials the service {{ service.name }}">
Deploy my credentials
</button>
<button *ngSwitchCase="'deployed'" (click)="changeDeployment('remove')" mat-raised-button color="primary" matTooltip="Remove credentials from the service {{ service.name }}">
Remove my credentials
</button>
<button *ngSwitchDefault (click)="changeDeployment('add')" mat-raised-button color="primary" matTooltip="Deploy credentials to the service {{ service.name }} the first time">
Deploy my credentials
</button>
</div>
</mat-action-row>
<mat-action-row deployment-action-row [deployment$]="deployment$" [service]="service"></mat-action-row>
</mat-expansion-panel>
<td>
<span matTooltip="Site {{ site.name }} provides the service {{ service.name }} for you">
<mat-icon>account_balance</mat-icon>
{{ site.name }}
</span>
</td>
<td>
<span matTooltip="{{ service.description }}">
<mat-icon>web</mat-icon>
{{ service.name }}
</span>
</td>
<ng-container *ngIf="(state$ | async) as stateItem; else noStateItem">
<td class="spaced" [matTooltip]="tooltip(stateItem)">
<span [ngSwitch]="stateItem.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(stateItem.state) }}
</td>
<td class="spaced">
<span [ngSwitch]="stateItem.state">
<button *ngSwitchCase="'deployed'" (click)="dialog.openCredentials(userService.subscribeStateFor(service))" mat-raised-button class="mat-elevation-z6">
Credentials
</button>
<button *ngSwitchCase="'questionnaire'" (click)="dialog.openQuestionnaire(stateItem)" mat-raised-button class="mat-elevation-z6">
Questionnaire
</button>
<button *ngSwitchCase="'failed'" (click)="dialog.openMessage(stateItem)" mat-raised-button class="mat-elevation-z6">
Failure
</button>
<button *ngSwitchCase="'rejected'" (click)="dialog.openMessage(stateItem)" mat-raised-button class="mat-elevation-z6">
Rejected
</button>
</span>
</td>
<td class="spaced">
<span *ngIf="!stateItem.is_pending && stateItem.is_credential_pending" class="spaced">
<mat-progress-spinner diameter="24" mode="indeterminate"></mat-progress-spinner>
SSH Keys pending
</span>
</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>
</ng-template>
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { StateComponent } from './state.component';
describe('StateComponent', () => {
let component: StateComponent;
let fixture: ComponentFixture<StateComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ StateComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(StateComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit, Input } from '@angular/core';
import { Observable } from 'rxjs';
import { UserService } from '../user.service';
import { LanguageService } from '../language.service';
import { DialogService } from '../dialogues/dialog.service';
import { Site, Service, DeploymentState } from '../types/types.module';
@Component({
selector: '[deployment-state-tr]',
templateUrl: './state.component.html',
styleUrls: ['./state.component.css']
})
export class StateComponent implements OnInit {
@Input() site: Site;
@Input() service: Service;
public state$: Observable<DeploymentState>;
public stateTooltip: string;
constructor(
public userService: UserService,
public lang: LanguageService,
public dialog: DialogService,
) { }
ngOnInit() {
this.state$ = this.userService.subscribeStateFor(this.service);
this.stateTooltip = "foo";
}
public tooltip(state: DeploymentState): string {
switch(state.state) {
case "not_deployed":
return `The credentials are not deployed for the service ${ this.service.name }.`;
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 }`;
case "removal_pending":
return `Waiting for the removal of the credentials from the site ${ this.site.name }`;
case "questionnaire":
return `Site ${ this.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.`;
case "rejected":
return `Site ${ this.site.name } rejected the deployment of the credentials. Click for details.`;
default:
return "Access to this service was never requested.";
}
}
}
......@@ -27,61 +27,7 @@
</thead>
<tbody>
<ng-container *ngFor="let site of sites$$ | async">
<tr *ngFor="let service of servicesAtSite(site) | async">
<td>
<span matTooltip="Site {{ site.name }} provides the service {{ service.name }} for members of {{ vo.name }}">
<mat-icon>account_balance</mat-icon>
{{ site.name }}
</span>
</td>
<td>
<span matTooltip="{{ service.description }}">
<mat-icon>web</mat-icon>
{{ service.name }}
</span>
</td>
<ng-container *ngIf="(userService.subscribeStateFor(service) | async) as stateItem; else noStateItem">
<td>
<span [ngSwitch]="stateItem.state" class="spaced">
<mat-icon *ngSwitchCase="'deployed'" matTooltip="The credentials are deployed for the service {{ service.name }}. Click to see details.">call_made</mat-icon>
<mat-icon *ngSwitchCase="'questionnaire'" matTooltip="This site needs more data to deploy the keys. Please click to submit the data.">warning</mat-icon>
<mat-progress-spinner *ngSwitchCase="'deployment_pending'" diameter="24" mode="indeterminate" matTooltip="Waiting for the deployment of the credentials to the site {{ site.name }}"></mat-progress-spinner>
<mat-progress-spinner *ngSwitchCase="'removal_pending'" diameter="24" mode="indeterminate" matTooltip="Waiting for the removal of the credentials from the site {{ site.name }}"></mat-progress-spinner>
<mat-icon *ngSwitchCase="'not_deployed'" mat-icon-button matTooltip="The credentials are not deployed for the service {{ service.name }}.">call_received</mat-icon>
<mat-icon *ngSwitchCase="'failed'" mat-icon-button matTooltip="Site {{ site.name }} failed to deploy the credentials. The deployment will be retried. Click for details.">error</mat-icon>
<mat-icon *ngSwitchCase="'rejected'" mat-icon-button matTooltip="Site {{ site.name }} rejected the deployment of the credentials. Click for details.">error</mat-icon>
<mat-icon *ngSwitchDefault mat-icon-button matTooltip="Access to this service was never requested.">call_received</mat-icon>
</span>
{{ lang.printState(stateItem.state) }}
</td>
<td *ngIf="stateItem.state === 'questionaire'">
<button (click)="dialog.openQuestionnaire(stateItem)" mat-raised-button class="mat-elevation-z6"> Questionnaire </button>
</td>
<td *ngIf="stateItem.state === 'deployed'">
<button (click)="dialog.openCredentials(userService.subscribeStateFor(service))" mat-raised-button class="mat-elevation-z6"> Credentials </button>
</td>
<td *ngIf="stateItem.state === 'failed'">
<button (click)="dialog.openMessage(stateItem)" mat-raised-button class="mat-elevation-z6"> Failure </button>
</td>
<td *ngIf="stateItem.state === 'rejected'">
<button (click)="dialog.openMessage(stateItem)" mat-raised-button class="mat-elevation-z6"> Rejected </button>
</td>
<td *ngIf="!stateItem.is_pending && stateItem.is_credential_pending">
<span class="spaced">
<mat-progress-spinner diameter="24" mode="indeterminate"></mat-progress-spinner>
</span>
SSH Keys pending
</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>
</ng-template>
</tr>
<tr *ngFor="let service of servicesAtSite(site) | async" deployment-state-tr [service]="service" [site]="site"></tr>
</ng-container>
</tbody>
</table>
......@@ -99,25 +45,5 @@
Currently, no services need membership of this VO. You can request a deployment anyway. We will deploy them to new services.
</p>
</ng-template>
<mat-action-row>
<div [ngSwitch]="(deployment$ | async)?.state_target">
<span *ngSwitchCase="'not_deployed'" style="margin-right: 15px;">
You did not request access to services of this VO.
</span>
<span *ngSwitchCase="'deployed'" style="margin-right: 15px;">
You requested access to the services of this VO.
</span>
</div>
<div [ngSwitch]="(deployment$ | async)?.state_target">
<button *ngSwitchCase="'not_deployed'" (click)="changeDeployment('add')" mat-raised-button color="primary" matTooltip="Deploy credentials to services of VO {{ vo.name }}">
Deploy my credentials
</button>
<button *ngSwitchCase="'deployed'" (click)="changeDeployment('remove')" mat-raised-button color="primary" matTooltip="Remove credentials from services of VO {{ vo.name }}">
Remove my credentials
</button>
<button *ngSwitchDefault (click)="changeDeployment('add')" mat-raised-button color="primary" matTooltip="Deploy credentials to services of VO {{ vo.name }} the first time">
Deploy my credentials
</button>
</div>
</mat-action-row>
<mat-action-row deployment-action-row [deployment$]="deployment$" [vo]="vo"></mat-action-row>
</mat-expansion-panel>
......@@ -79,8 +79,4 @@ export class VoDataComponent implements OnInit {
),
);
}
public changeDeployment(action: string): void {
this.userService.changeVODeployment(action, this.vo);
}
}
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