Add a separate vo component

src/app/app.module.ts

@@ -27,6 +27,7 @@ import {BodyComponent} from './body/body.component';
 import {ServiceComponent} from './service/service.component';
 import {HeaderComponent} from './header/header.component';
 import {FooterComponent} from './footer/footer.component';
+import { VoComponent } from './vo/vo.component';
 
 
 @NgModule({
@@ -50,6 +51,7 @@ import {FooterComponent} from './footer/footer.component';
     BodyComponent,
     FooterComponent,
     ServiceComponent,
+    VoComponent,
   ],
   providers: [
     CookieService,

src/app/body/body.component.html

@@ -13,44 +13,7 @@
 		<div *ngIf="userService.user" style="padding-bottom: 30px;">
 			<h2>Your Virtual Organisations</h2>
 			<mat-accordion *ngIf="userService.user.groups.length > 0">
-				<mat-expansion-panel *ngFor="let group of userService.getGroups()">
-					<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>
+				<app-vo *ngFor="let group of userService.getGroups()" [group]="group"></app-vo>
 			</mat-accordion>
 		</div>
 	</div>

src/app/types/types.module.ts

@@ -74,8 +74,9 @@ export interface DeploymentState {
 export interface Deployment {
   id: number;
   service: Service;
+  services: Service[];
+  group: number; // the group id
   ssh_keys: SSHKeyRef[];
-  ssh_keys_to_withdraw: SSHKeyRef[];
   states: DeploymentState[];
 }
 

src/app/vo/vo.component.html

+<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>

src/app/vo/vo.component.spec.ts

+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();
+  });
+});

src/app/vo/vo.component.ts

+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');
+    }
+  }
+}