Major WIP

- Correctly wired in servide broker to service plan availability function

src/frontend/app/core/cf-api-svc.types.ts

@@ -58,6 +58,7 @@ export interface IServicePlan {
   description: string;
   service_guid: string;
   extra: string; // stringified IServiceExtra
+  extraTyped?: IServicePlanExtra;
   unique_id: string;
   public: boolean;
   bindable: number | boolean;

src/frontend/app/core/utils.service.ts

@@ -253,3 +253,10 @@ export const safeUnsubscribe = (...subs: Subscription[]) => {
     }
   });
 };
+
+export const safeJsonParse = <T>(input: string): T => {
+  try {
+    return JSON.parse(input) as T;
+  } catch (e) { }
+  return null;
+};

src/frontend/app/features/service-catalog/service-catalog.routing.ts

@@ -48,6 +48,10 @@ const serviceCatalog: Routes = [
             path: 'instances',
             component: ServiceInstancesComponent
           },
+          {
+            path: 'plans',
+            component: ServicePlansComponent
+          }
         ]
       }
     ]

src/frontend/app/features/service-catalog/service-plans/service-plans.component.html

@@ -1,3 +1 @@
-<p>
-  service-plans works!
-</p>
+<app-list></app-list>

src/frontend/app/features/service-catalog/service-plans/service-plans.component.ts

@@ -1,11 +1,19 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
+
+import {
+  ServicePlansListConfigService,
+} from '../../../shared/components/list/list-types/service-plans/service-plans-list-config.service';
+import { ListConfig } from '../../../shared/components/list/list.component.types';
 
 @Component({
   selector: 'app-service-plans',
   templateUrl: './service-plans.component.html',
-  styleUrls: ['./service-plans.component.scss']
+  styleUrls: ['./service-plans.component.scss'],
+  providers: [
+    {
+      provide: ListConfig,
+      useClass: ServicePlansListConfigService
+    }
+  ]
 })
-export class ServicePlansComponent {
-
-  constructor() { }
-}
+export class ServicePlansComponent { }

src/frontend/app/features/service-catalog/service-tabs-base/service-tabs-base.component.ts

@@ -28,6 +28,10 @@ export class ServiceTabsBaseComponent {
     {
       link: 'instances',
       label: 'Instances'
+    },
+    {
+      link: 'plans',
+      label: 'Plans'
     }
   ];
   breadcrumbs: IHeaderBreadcrumb[] = [

src/frontend/app/features/service-catalog/services-helper.ts

@@ -1,27 +1,41 @@
 import { ActivatedRoute } from '@angular/router';
 import { Store } from '@ngrx/store';
-import { Observable, of as observableOf, Subscription } from 'rxjs';
-import { filter, first, share, switchMap } from 'rxjs/operators';
+import { Observable, of as observableOf } from 'rxjs';
+import { combineLatest, filter, first, map, share, switchMap } from 'rxjs/operators';
 
 import {
   IService,
   IServiceBroker,
   IServiceInstance,
   IServicePlan,
+  IServicePlanExtra,
   IServicePlanVisibility,
 } from '../../core/cf-api-svc.types';
+import { EntityService } from '../../core/entity-service';
+import { EntityServiceFactory } from '../../core/entity-service-factory.service';
+import { safeJsonParse } from '../../core/utils.service';
+import { CardStatus } from '../../shared/components/application-state/application-state.service';
 import { PaginationMonitorFactory } from '../../shared/monitors/pagination-monitor.factory';
+import { GetServiceBroker } from '../../store/actions/service-broker.actions';
 import { GetServiceInstances } from '../../store/actions/service-instances.actions';
-import { GetServicePlansForService } from '../../store/actions/service.actions';
+import { GetService, GetServicePlansForService } from '../../store/actions/service.actions';
 import { AppState } from '../../store/app-state';
-import { entityFactory, serviceInstancesSchemaKey, servicePlanSchemaKey } from '../../store/helpers/entity-factory';
+import {
+  entityFactory,
+  serviceBrokerSchemaKey,
+  serviceInstancesSchemaKey,
+  servicePlanSchemaKey,
+  serviceSchemaKey,
+} from '../../store/helpers/entity-factory';
 import { createEntityRelationPaginationKey } from '../../store/helpers/entity-relations/entity-relations.types';
 import { getPaginationObservables } from '../../store/reducers/pagination-reducer/pagination-reducer.helper';
 import { APIResource } from '../../store/types/api.types';
 import { getIdFromRoute } from '../cloud-foundry/cf.helpers';
+import { ServicePlanAccessibility } from './services.service';
 
 
-export const getSvcAvailability = (servicePlan: APIResource<IServicePlan>,
+export const getSvcAvailability = (
+  servicePlan: APIResource<IServicePlan>,
   serviceBroker: APIResource<IServiceBroker>,
   allServicePlanVisibilities: APIResource<IServicePlanVisibility>[]) => {
   const svcAvailability = {
@@ -108,3 +122,93 @@ export const getServicePlans = (
       }
     }));
 };
+
+export const getServicePlanName = (plan: { name: string, extraTyped?: IServicePlanExtra }): string =>
+  plan.extraTyped && plan.extraTyped.displayName ? plan.extraTyped.displayName : plan.name;
+
+
+export const getServicePlanAccessibilityCardStatus = (
+  servicePlan: APIResource<IServicePlan>,
+  servicePlanVisibilities$: Observable<APIResource<IServicePlanVisibility>[]>,
+  serviceBroker$?: Observable<APIResource<IServiceBroker>>): Observable<CardStatus> => {
+  return getServicePlanAccessibility(servicePlan, servicePlanVisibilities$, serviceBroker$).pipe(
+    map((servicePlanAccessibility: ServicePlanAccessibility) => {
+      if (servicePlanAccessibility.isPublic) {
+        return CardStatus.OK;
+      } else if (servicePlanAccessibility.spaceScoped || servicePlanAccessibility.hasVisibilities) {
+        return CardStatus.WARNING;
+      } else {
+        return CardStatus.ERROR;
+      }
+    }),
+    first()
+  );
+};
+
+export const getServicePlanAccessibility = (
+  servicePlan: APIResource<IServicePlan>,
+  servicePlanVisibilities$: Observable<APIResource<IServicePlanVisibility>[]>,
+  serviceBroker$?: Observable<APIResource<IServiceBroker>>): Observable<ServicePlanAccessibility> => {// TODO: RC
+  if (servicePlan.entity.public) {
+    return observableOf({
+      isPublic: true,
+      guid: servicePlan.metadata.guid
+    });
+  }
+  const safeServiceBroker$ = serviceBroker$ ? serviceBroker$.pipe(filter(sb => !!sb)) : observableOf(null);
+  const safeServicePlanVisibilities$ = servicePlanVisibilities$.pipe(filter(spv => !!spv));
+  return safeServiceBroker$.pipe(
+    combineLatest(safeServicePlanVisibilities$),
+    map(([serviceBroker, allServicePlanVisibilities]) => getSvcAvailability(servicePlan, serviceBroker, allServicePlanVisibilities))
+  );
+};
+
+/*
+* Show service plan costs if the object is in the open service broker format, otherwise ignore them
+*/
+export const canShowServicePlanCosts = (servicePlan: APIResource<IServicePlan>): boolean => {
+  if (!servicePlan || servicePlan.entity.free) {
+    return false;
+  }
+  const extra = servicePlan.entity.extraTyped;
+  return !!extra && !!extra.costs && !!extra.costs[0] && !!extra.costs[0].amount;
+};
+
+export const populateServicePlanExtraTyped = (servicePlan: APIResource<IServicePlan>): APIResource<IServicePlan> => {
+  if (servicePlan.entity.extraTyped) {
+    return servicePlan;
+  }
+  return {
+    ...servicePlan,
+    entity: {
+      ...servicePlan.entity,
+      extraTyped: servicePlan.entity.extra ? safeJsonParse<IServicePlanExtra>(servicePlan.entity.extra) : null
+    }
+  };
+};
+
+export const getServiceBroker = (
+  serviceBrokerGuid: string,
+  cfGuid: string,
+  entityServiceFactory: EntityServiceFactory): EntityService<APIResource<IServiceBroker>> => {
+  return entityServiceFactory.create<APIResource<IServiceBroker>>(
+    serviceBrokerSchemaKey,
+    entityFactory(serviceBrokerSchemaKey),
+    serviceBrokerGuid,
+    new GetServiceBroker(serviceBrokerGuid, cfGuid),
+    false
+  );
+};
+
+export const getService = (
+  serviceGuid: string,
+  cfGuid: string,
+  entityServiceFactory: EntityServiceFactory): EntityService<APIResource<IService>> => {
+  return entityServiceFactory.create<APIResource<IService>>(
+    serviceSchemaKey,
+    entityFactory(serviceSchemaKey),
+    serviceGuid,
+    new GetService(serviceGuid, cfGuid),
+    true
+  );
+};

src/frontend/app/features/service-catalog/services.service.mock.ts

@@ -86,10 +86,6 @@ export class ServicesServiceMock {
     }
   });
   getVisibleServicePlans = () => this.servicePlans$;
-  getOrgsForSelectedServicePlan = () => observableOf([]);
-  getSelectedServicePlanAccessibility = () => observableOf({
-    isPublic: true
-  })
   getServicePlanAccessibility = () => observableOf({
     isPublic: true
   })

src/frontend/app/features/service-catalog/services.service.ts

@@ -18,21 +18,19 @@ import { EntityServiceFactory } from '../../core/entity-service-factory.service'
 import { PaginationMonitorFactory } from '../../shared/monitors/pagination-monitor.factory';
 import { GetServiceBrokers } from '../../store/actions/service-broker.actions';
 import { GetServicePlanVisibilities } from '../../store/actions/service-plan-visibility.actions';
-import { GetService } from '../../store/actions/service.actions';
 import { GetSpace } from '../../store/actions/space.actions';
 import { AppState } from '../../store/app-state';
 import {
   entityFactory,
   serviceBrokerSchemaKey,
   servicePlanVisibilitySchemaKey,
-  serviceSchemaKey,
   spaceSchemaKey,
 } from '../../store/helpers/entity-factory';
 import { createEntityRelationPaginationKey } from '../../store/helpers/entity-relations/entity-relations.types';
 import { getPaginationObservables } from '../../store/reducers/pagination-reducer/pagination-reducer.helper';
 import { APIResource } from '../../store/types/api.types';
 import { getIdFromRoute } from '../cloud-foundry/cf.helpers';
-import { getServiceInstancesInCf, getServicePlans, getSvcAvailability } from './services-helper';
+import { getService, getServiceInstancesInCf, getServicePlans } from './services-helper';
 
 export interface ServicePlanAccessibility {
   spaceScoped?: boolean;
@@ -75,13 +73,7 @@ export class ServicesService {
     this.cfGuid = getIdFromRoute(activatedRoute, 'endpointId');
     this.serviceGuid = getIdFromRoute(activatedRoute, 'serviceId');
 
-    this.serviceEntityService = this.entityServiceFactory.create(
-      serviceSchemaKey,
-      entityFactory(serviceSchemaKey),
-      this.serviceGuid,
-      new GetService(this.serviceGuid, this.cfGuid),
-      true
-    );
+    this.serviceEntityService = getService(this.serviceGuid, this.cfGuid, this.entityServiceFactory);
     this.service$ = this.serviceEntityService.waitForEntity$.pipe(
       filter(o => !!o && !!o.entity),
       map(o => o.entity),
@@ -134,21 +126,6 @@ export class ServicesService {
       first()
     )
 
-  getServicePlanAccessibility = (servicePlan: APIResource<IServicePlan>): Observable<ServicePlanAccessibility> => {
-    if (servicePlan.entity.public) {
-      return observableOf({
-        isPublic: true,
-        guid: servicePlan.metadata.guid
-      });
-    }
-    return this.service$.pipe(
-      switchMap(o => this.getServiceBrokerById(o.entity.service_broker_guid)),
-      combineLatest(this.servicePlanVisibilities$),
-      filter(([p, q]) => !!p && !!q),
-      map(([serviceBroker, allServicePlanVisibilities]) => getSvcAvailability(servicePlan, serviceBroker, allServicePlanVisibilities))
-    );
-  }
-
   getServiceName = () => {
     return observableCombineLatest(this.serviceExtraInfo$, this.service$)
       .pipe(