Commit 68457a37 authored by Lukas Burgey's avatar Lukas Burgey

Add a separate vo component

parent 59ef63ca
...@@ -27,6 +27,7 @@ import {BodyComponent} from './body/body.component'; ...@@ -27,6 +27,7 @@ import {BodyComponent} from './body/body.component';
import {ServiceComponent} from './service/service.component'; import {ServiceComponent} from './service/service.component';
import {HeaderComponent} from './header/header.component'; import {HeaderComponent} from './header/header.component';
import {FooterComponent} from './footer/footer.component'; import {FooterComponent} from './footer/footer.component';
import { VoComponent } from './vo/vo.component';
@NgModule({ @NgModule({
...@@ -50,6 +51,7 @@ import {FooterComponent} from './footer/footer.component'; ...@@ -50,6 +51,7 @@ import {FooterComponent} from './footer/footer.component';
BodyComponent, BodyComponent,
FooterComponent, FooterComponent,
ServiceComponent, ServiceComponent,
VoComponent,
], ],
providers: [ providers: [
CookieService, CookieService,
......
...@@ -13,44 +13,7 @@ ...@@ -13,44 +13,7 @@
<div *ngIf="userService.user" style="padding-bottom: 30px;"> <div *ngIf="userService.user" style="padding-bottom: 30px;">
<h2>Your Virtual Organisations</h2> <h2>Your Virtual Organisations</h2>
<mat-accordion *ngIf="userService.user.groups.length > 0"> <mat-accordion *ngIf="userService.user.groups.length > 0">
<mat-expansion-panel *ngFor="let group of userService.getGroups()"> <app-vo *ngFor="let group of userService.getGroups()" [group]="group"></app-vo>
<mat-expansion-panel-header>
<mat-panel-title>{{ group.name }}</mat-panel-title>
</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 }}":
</p>
<mat-accordion>
<app-service *ngFor="let service of userService.getServices(group)" [service]="service"></app-service>
</mat-accordion>
</ng-template>
<ng-template #noServiceList>
<p>
No services need membership of the VO "{{ group.name }}".
</p>
</ng-template>
<!--
<mat-action-row>
<div *ngIf="userService.user.ssh_keys.length > 0; then boxes else upload"></div>
<ng-template #boxes>
<span style="margin-right: 15px;">
Please select SSH Keys to deploy:
</span>
<mat-checkbox *ngFor="let key of userService.user.ssh_keys" style="margin-right: 8px" [checked]="isDeployed(key)" (change)="deploymentChange(key)">
{{ key.name }}
</mat-checkbox>
</ng-template>
<ng-template #upload>
<span style="margin-right: 15px;">
Please upload an SSH Key to use this service:
</span>
<button mat-icon-button (click)="dialog.openSshKeys()"><mat-icon>vpn_key</mat-icon></button>
</ng-template>
</mat-action-row>
-->
</mat-expansion-panel>
</mat-accordion> </mat-accordion>
</div> </div>
</div> </div>
......
...@@ -74,8 +74,9 @@ export interface DeploymentState { ...@@ -74,8 +74,9 @@ export interface DeploymentState {
export interface Deployment { export interface Deployment {
id: number; id: number;
service: Service; service: Service;
services: Service[];
group: number; // the group id
ssh_keys: SSHKeyRef[]; ssh_keys: SSHKeyRef[];
ssh_keys_to_withdraw: SSHKeyRef[];
states: DeploymentState[]; states: DeploymentState[];
} }
......
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>{{ group.name }} {{ group.id }}</mat-panel-title>
</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 }}":
</p>
<mat-accordion>
<app-service *ngFor="let service of userService.getServices(group)" [service]="service"></app-service>
</mat-accordion>
</ng-template>
<ng-template #noServiceList>
<p>
No services need membership of the VO "{{ group.name }}".
</p>
</ng-template>
<div>
Deployment: {{ deployment | json }}
</div>
<mat-action-row>
<div *ngIf="userService.user.ssh_keys.length > 0; then boxes else upload"></div>
<ng-template #boxes>
<span style="margin-right: 15px;">
Please select SSH Keys to deploy:
</span>
<mat-checkbox *ngFor="let key of userService.user.ssh_keys" style="margin-right: 8px" [checked]="isDeployed(key)" (change)="deploymentChange(key)">
{{ key.name }}
</mat-checkbox>
</ng-template>
<ng-template #upload>
<span style="margin-right: 15px;">
Please upload an SSH Key to use this service:
</span>
<button mat-icon-button (click)="dialog.openSshKeys()"><mat-icon>vpn_key</mat-icon></button>
</ng-template>
</mat-action-row>
</mat-expansion-panel>
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { VoComponent } from './vo.component';
describe('VoComponent', () => {
let component: VoComponent;
let fixture: ComponentFixture<VoComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ VoComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(VoComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit, Input } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { UserService } from '../user.service';
import * as t from '../types/types.module';
@Component({
selector: 'app-vo',
templateUrl: './vo.component.html',
styleUrls: ['./vo.component.css']
})
export class VoComponent implements OnInit {
@Input() group: t.Group;
public deployment: t.Deployment;
constructor(
public userService: UserService,
public http: HttpClient,
) { }
ngOnInit() {
let deployments = this.userService.userState.deployments;
this.deployment = deployments.find(
(d: t.Deployment) => {
if (d.group === this.group.id) {
return true;
}
return false;
}
);
console.log(this.deployment);
}
public isDeployed(key: t.SSHKeyRef): boolean {
if (this.deployment) {
return this.deployment.ssh_keys.some(k => {
return k.id === key.id;
});
}
return false;
}
public taskItem(site: t.Site, key: t.SSHKeyRef): t.DeploymentStateItem {
if (this.deployment) {
const deploymentState = this.deployment.states.find(
state => {
return state.key.id === key.id
}
);
if (deploymentState) {
return deploymentState.state_items.find(
item => {
return item.site.id === site.id
}
);
}
}
}
public taskState(site: t.Site, key: t.SSHKeyRef): string {
let item = this.taskItem(site, key);
if (item) {
return item.state;
}
return "";
}
public changeDeployment(key: t.SSHKeyRef, action: string) {
const body = {
'type': action,
'key': key.id,
'group': this.group.id,
};
return this.http.post('/backend/api/deployments', body).subscribe(
(newDep: t.Deployment) => {
// update the deployment
this.deployment = newDep;
},
(err) => {
console.log(err);
this.userService.update();
}
);
}
public deploymentChange(key: t.SSHKeyRef) {
if (!this.isDeployed(key)) {
this.changeDeployment(key, 'add');
} else {
this.changeDeployment(key, 'remove');
}
}
}
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