Fetch service in service instances card via store rather than inline (#…

…4417)

* Fetch service in service instances card via store rather than inline
- fixes #4397
- accessing entity via this.serviceInstanceEntity.entity.service_plan.entity.service.entity.service_broker_guid can sometimes fail
- fetch service, and thus service broker guid, from store instead
- this matches the table way of getting the broker

* Fix unit test

* Fix & Improve Service Instance Card
- ensure async properties have async pipe in html
- bind to params rather than properties

src/frontend/packages/cloud-foundry/src/actions/service-instances.actions.ts

@@ -37,6 +37,9 @@ export class GetServiceInstances
     public includeRelations: string[] = [
       createEntityRelationKey(serviceInstancesEntityType, serviceBindingEntityType),
       createEntityRelationKey(serviceInstancesEntityType, servicePlanEntityType),
+      // Ideally this should just be `createEntityRelationKey(serviceInstancesEntityType, serviceEntityType)`, however even though CF
+      // returns `si.service_url` and `si.service_guid` it does not return the actual service. This means the service is not fetched in the
+      // initial fetch SI request but in lots of separate ones.
       createEntityRelationKey(servicePlanEntityType, serviceEntityType),
       createEntityRelationKey(serviceInstancesEntityType, spaceEntityType),
     ],

src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/services-wall/service-instance-card/service-instance-card.component.html

@@ -13,12 +13,12 @@
   </app-meta-card-item>
   <app-meta-card-item>
     <app-meta-card-key>Service</app-meta-card-key>
-    <app-meta-card-value><a [routerLink]="getServiceUrl()">{{ getServiceName() }}</a>
+    <app-meta-card-value><a [routerLink]="serviceUrl">{{ serviceName$ | async }}</a>
     </app-meta-card-value>
   </app-meta-card-item>
   <app-meta-card-item>
     <app-meta-card-key>Service Plan</app-meta-card-key>
-    <app-meta-card-value>{{ getServicePlanName() }} </app-meta-card-value>
+    <app-meta-card-value>{{ servicePlanName }} </app-meta-card-value>
   </app-meta-card-item>
   <app-meta-card-item>
     <app-meta-card-key>Service Broker</app-meta-card-key>

src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/services-wall/service-instance-card/service-instance-card.component.spec.ts

@@ -75,7 +75,7 @@ describe('ServiceInstanceCardComponent', () => {
         dashboard_url: '',
         type: '',
         tags: [],
-        service_guid: '',
+        service_guid: 'service_guid',
         service_plan_url: '',
         service_bindings: [],
         service_bindings_url: '',

src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/services-wall/service-instance-card/service-instance-card.component.ts

@@ -1,6 +1,7 @@
 import { Component, Input } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { BehaviorSubject, Observable, of as observableOf } from 'rxjs';
+import { filter, map, switchMap } from 'rxjs/operators';
 
 import { CFAppState } from '../../../../../../../../cloud-foundry/src/cf-app-state';
 import { serviceInstancesEntityType } from '../../../../../../../../cloud-foundry/src/cf-entity-types';
@@ -12,7 +13,8 @@ import { CardCell } from '../../../../../../../../core/src/shared/components/lis
 import { APIResource } from '../../../../../../../../store/src/types/api.types';
 import { MenuItem } from '../../../../../../../../store/src/types/menu-item.types';
 import { ComponentEntityMonitorConfig } from '../../../../../../../../store/src/types/shared.types';
-import { IServiceInstance } from '../../../../../../cf-api-svc.types';
+import { IService, IServiceInstance } from '../../../../../../cf-api-svc.types';
+import { cfEntityCatalog } from '../../../../../../cf-entity-catalog';
 import { cfEntityFactory } from '../../../../../../cf-entity-factory';
 import {
   getServiceBrokerName,
@@ -82,12 +84,43 @@ export class ServiceInstanceCardComponent extends CardCell<APIResource<IServiceI
           row.entity.space_guid);
       }
 
-      if (!this.serviceBrokerName$) {
-        this.serviceBrokerName$ = getServiceBrokerName(
-          this.serviceInstanceEntity.entity.service_plan.entity.service.entity.service_broker_guid,
+      if (!this.service$) {
+        this.service$ = cfEntityCatalog.service.store.getEntityService(
+          this.serviceInstanceEntity.entity.service_guid,
           this.serviceInstanceEntity.entity.cfGuid,
+          {
+            includeRelations: []
+          }
+        ).waitForEntity$.pipe(
+          filter(s => !!s),
+          map(s => s.entity)
         );
       }
+
+      if (!this.serviceBrokerName$) {
+        // Note, here we just need the service's service broker. This should be available by
+        // `this.serviceInstanceEntity.entity.service_plan.entity.service.entity.service_broker_guid` however can be empty (see #4397).
+        // So fetch the service separately, as per the table way (this shouldn't start a http request if it's already in the store) 
+        this.serviceBrokerName$ = this.service$.pipe(
+          switchMap(service => getServiceBrokerName(service.entity.service_broker_guid, service.entity.cfGuid))
+        )
+      }
+
+      if (!this.serviceName$) {
+        // See note for this.serviceBrokerName$
+        this.serviceName$ = this.service$.pipe(
+          map(getServiceName)
+        )
+      }
+
+      this.servicePlanName = this.serviceInstanceEntity.entity.service_plan ?
+        getServicePlanName(this.serviceInstanceEntity.entity.service_plan.entity)
+        : null;
+
+      this.serviceUrl = getServiceSummaryUrl(
+        this.serviceInstanceEntity.entity.cfGuid,
+        this.serviceInstanceEntity.entity.service_guid
+      );
     }
   }
 
@@ -110,6 +143,11 @@ export class ServiceInstanceCardComponent extends CardCell<APIResource<IServiceI
 
   cfOrgSpace: CfOrgSpaceLabelService;
   serviceBrokerName$: Observable<string>;
+  serviceName$: Observable<string>;
+  servicePlanName: string;
+  serviceUrl: string;
+
+  private service$: Observable<APIResource<IService>>;
 
   private detach = () => {
     this.serviceActionHelperService.detachServiceBinding(
@@ -134,23 +172,6 @@ export class ServiceInstanceCardComponent extends CardCell<APIResource<IServiceI
     }
   )
 
-  getServiceName = () => {
-    return getServiceName(this.serviceInstanceEntity.entity.service_plan.entity.service);
-  }
-
-  getServicePlanName = () => {
-    if (!this.serviceInstanceEntity.entity.service_plan) {
-      return null;
-    }
-    return getServicePlanName(this.serviceInstanceEntity.entity.service_plan.entity);
-  }
-
   getSpaceBreadcrumbs = () => ({ breadcrumbs: 'services-wall' });
 
-  getServiceUrl = () => {
-    return getServiceSummaryUrl(
-      this.serviceInstanceEntity.entity.cfGuid,
-      this.serviceInstanceEntity.entity.service_plan.entity.service.metadata.guid
-    );
-  }
 }