Fix updating of vo data when services change

src/app/vo-data/vo-data.component.html

@@ -8,42 +8,44 @@
 	</mat-panel-description>
   </mat-expansion-panel-header>
 
-  <!-- expansion body -->
-  <p *ngIf="vo.description != ''">
-  {{ vo.description }}
-  </p>
-  <div *ngIf="(services$$ | async) as services; else noServiceList">
-	<div *ngIf="services != undefined && services.length > 0; else noServiceList">
-	  <p>
-	  These services are provided for members of this VO.
-	  </p>
-	  <table>
-		<thead>
-		  <tr>
-			<td>Site</td>
-			<td>Service</td>
-			<td>State</td>
-		  </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>
-		</tbody>
-	  </table>
+  <ng-template matExpansionPanelContent>
+	<!-- expansion body -->
+	<p *ngIf="vo.description != ''">
+	{{ vo.description }}
+	</p>
+	<div *ngIf="(services$$ | async) as services; else noServiceList">
+	  <div *ngIf="services != undefined && services.length > 0; else noServiceList">
+		<p>
+		These services are provided for members of this VO.
+		</p>
+		<table>
+		  <thead>
+			<tr>
+			  <td>Site</td>
+			  <td>Service</td>
+			  <td>State</td>
+			</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>
+		  </tbody>
+		</table>
+	  </div>
 	</div>
-  </div>
-  <ng-template #noServiceList>
-	<div *ngIf="(deployment$ | async) as deployment; else noDeployment">
-	  <p *ngIf="deployment.state_target === 'deployed'; else noDeployment">
-	  Currently, no services need membership of this VO. We will deploy your credentials to new services.
+	<ng-template #noServiceList>
+	  <div *ngIf="(deployment$ | async) as deployment; else noDeployment">
+		<p *ngIf="deployment.state_target === 'deployed'; else noDeployment">
+		Currently, no services need membership of this VO. We will deploy your credentials to new services.
+		</p>
+	  </div>
+	</ng-template>
+	<ng-template #noDeployment>
+	  <p>
+	  Currently, no services need membership of this VO. You can request a deployment anyway. We will deploy them to new services.
 	  </p>
-	</div>
-  </ng-template>
-  <ng-template #noDeployment>
-	<p>
-	Currently, no services need membership of this VO. You can request a deployment anyway. We will deploy them to new services.
-	</p>
+	</ng-template>
   </ng-template>
   <mat-action-row deployment-action-row [deployment$]="deployment$" [vo]="vo"></mat-action-row>
 </mat-expansion-panel>

src/app/vo-data/vo-data.component.ts

@@ -35,34 +35,44 @@ 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.subscribeServices().subscribe(
       (services: Service[]) => {
-        // filter by the vo of this vo
-        this.services = services.filter(
-          (s: Service) => s.vos.some(
-            (g: VO) => this.vo.name == g.name
-          ),
-        );
+        this.services = services;
         this.services$.next(this.services);
+      }
+    );
 
-        // generate the sites from the services
-        this.services.map(
+    this.deployment$.subscribe(
+      (dep: Deployment) => {
+        if (dep != undefined) {
+          this.services = dep.services;
+          this.services$.next(this.services);
+        }
+      }
+    );
+
+    this.services$$.subscribe(
+      (services: Service[]) => {
+        services.map(
           (s: Service) => this.sites.set(s.site.id, s.site)
         );
 
-        let uniqueSites = []
+        const uniqueSites = []
         this.sites.forEach(
           site => uniqueSites.push(site)
         );
         this.sites$.next(uniqueSites);
       }
     );
-
-    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
-    );
   }
 
   ngOnDestroy(): void {