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

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.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,27 @@ 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))
+        )
+      }
     }
   }
 
@@ -111,6 +128,8 @@ export class ServiceInstanceCardComponent extends CardCell<APIResource<IServiceI
   cfOrgSpace: CfOrgSpaceLabelService;
   serviceBrokerName$: Observable<string>;
 
+  private service$: Observable<APIResource<IService>>;
+
   private detach = () => {
     this.serviceActionHelperService.detachServiceBinding(
       this.serviceInstanceEntity.entity.service_bindings,
@@ -135,7 +154,10 @@ export class ServiceInstanceCardComponent extends CardCell<APIResource<IServiceI
   )
 
   getServiceName = () => {
-    return getServiceName(this.serviceInstanceEntity.entity.service_plan.entity.service);
+    // See note for this.serviceBrokerName$
+    return this.service$.pipe(
+      map(getServiceName)
+    )
   }
 
   getServicePlanName = () => {
@@ -150,7 +172,7 @@ export class ServiceInstanceCardComponent extends CardCell<APIResource<IServiceI
   getServiceUrl = () => {
     return getServiceSummaryUrl(
       this.serviceInstanceEntity.entity.cfGuid,
-      this.serviceInstanceEntity.entity.service_plan.entity.service.metadata.guid
+      this.serviceInstanceEntity.entity.service_guid
     );
   }
 }