Add service plan list to service pages

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

@@ -246,7 +246,7 @@ export function parseHttpPipeError(res): {} {
   return {};
 }
 
-export function safeStringToObj(value: string): object {
+export function safeStringToObj<T = object>(value: string): T {
   try {
     if (value) {
       const jsonObj = JSON.parse(value);

src/frontend/app/features/applications/application/application-base.component.spec.ts

@@ -1,12 +1,10 @@
-import { CoreModule } from '../../../core/core.module';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 
-import { ApplicationBaseComponent } from './application-base.component';
-import { StoreModule } from '@ngrx/store';
-import { appReducers } from '../../../store/reducers.module';
-import { getInitialTestStoreState, createBasicStoreModule } from '../../../test-framework/store-test-helper';
+import { CoreModule } from '../../../core/core.module';
 import { ApplicationStateService } from '../../../shared/components/application-state/application-state.service';
+import { createBasicStoreModule } from '../../../test-framework/store-test-helper';
+import { ApplicationBaseComponent } from './application-base.component';
 import { ApplicationEnvVarsHelper } from './application-tabs-base/tabs/build-tab/application-env-vars.service';
 
 describe('ApplicationBaseComponent', () => {

src/frontend/app/features/cloud-foundry/cloud-foundry/cloud-foundry.component.spec.ts

@@ -1,15 +1,13 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
-import { CloudFoundryComponent } from './cloud-foundry.component';
+import { CloudFoundryService } from '../../../shared/data-services/cloud-foundry.service';
+import { PaginationMonitorFactory } from '../../../shared/monitors/pagination-monitor.factory';
 import {
   BaseTestModules,
-  getBaseProviders,
-  generateTestCfServiceProvider
+  generateTestCfServiceProvider,
 } from '../../../test-framework/cloud-foundry-endpoint-service.helper';
-import { createBasicStoreModule } from '../../../test-framework/store-test-helper';
-import { PaginationMonitorFactory } from '../../../shared/monitors/pagination-monitor.factory';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { CloudFoundryService } from '../../../shared/data-services/cloud-foundry.service';
+import { CloudFoundryComponent } from './cloud-foundry.component';
 
 describe('CloudFoundryComponent', () => {
   let component: CloudFoundryComponent;

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.spec.ts

@@ -1,5 +1,9 @@
+import { DatePipe } from '@angular/common';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
+import { BaseTestModules } from '../../../test-framework/cloud-foundry-endpoint-service.helper';
+import { ServicesService } from '../services.service';
+import { ServicesServiceMock } from '../services.service.mock';
 import { ServicePlansComponent } from './service-plans.component';
 
 describe('ServicePlansComponent', () => {
@@ -8,9 +12,18 @@ describe('ServicePlansComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ServicePlansComponent ]
+      imports: [
+        ...BaseTestModules
+      ],
+      declarations: [
+        ServicePlansComponent
+      ],
+      providers: [
+        DatePipe,
+        { provide: ServicesService, useClass: ServicesServiceMock },
+      ]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {

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-summary/service-summary.component.html

@@ -1,10 +1,10 @@
 <div class="summary">
   <app-tile-grid fit="true">
-    <app-tile-group  *ngIf="isBrokerAvailable$ | async; else noBrokerTile">
+    <app-tile-group *ngIf="isBrokerAvailable$ | async; else noBrokerTile">
       <app-tile>
         <app-service-summary-card></app-service-summary-card>
       </app-tile>
-      <app-tile >
+      <app-tile>
         <app-service-broker-card></app-service-broker-card>
       </app-tile>
     </app-tile-group>
@@ -20,7 +20,7 @@
         <app-card-number-metric [link]="serviceInstancesLink" icon="library_books" label="Instances" labelSingular="Instance" value="{{ (instances$ | async)?.length }}"></app-card-number-metric>
       </app-tile>
       <app-tile>
-        <app-card-number-metric icon="products" iconFont="stratos-icons" label="Service Plans" labelSingular="Service Plan" value="{{ ( servicePlans$ | async)?.length }}"></app-card-number-metric>
+        <app-card-number-metric [link]="servicePlansLink" icon="products" iconFont="stratos-icons" label="Service Plans" labelSingular="Service Plan" value="{{ ( servicePlans$ | async)?.length }}"></app-card-number-metric>
       </app-tile>
     </app-tile-group>
     <app-tile-group>

src/frontend/app/features/service-catalog/service-summary/service-summary.component.spec.ts

@@ -1,4 +1,5 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
 import { BaseTestModules } from '../../../test-framework/cloud-foundry-endpoint-service.helper';
 import { ServicesService } from '../services.service';
 import { ServicesServiceMock } from '../services.service.mock';
@@ -22,11 +23,11 @@ describe('ServiceSummaryComponent', () => {
       .compileComponents();
   }));
 
-  beforeEach(() => {
+  beforeEach(async(() => {
     fixture = TestBed.createComponent(ServiceSummaryComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
-  });
+  }));
 
   it('should create', () => {
     expect(component).toBeTruthy();

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

@@ -37,4 +37,10 @@ export class ServiceSummaryComponent {
     }));
   }
 
+  servicePlansLink = () => {
+    this.store.dispatch(new RouterNav({
+      path: ['marketplace', this.servicesService.cfGuid, this.servicesService.serviceGuid, 'plans']
+    }));
+  }
+
 }

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,24 +1,37 @@
 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 { 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';
+import { safeStringToObj } from '../../core/utils.service';
 
 export const getSvcAvailability = (servicePlan: APIResource<IServicePlan>,
   serviceBroker: APIResource<IServiceBroker>,
@@ -40,16 +53,6 @@ export const getSvcAvailability = (servicePlan: APIResource<IServicePlan>,
   return svcAvailability;
 };
 
-export const getServiceJsonParams = (params: any): {} => {
-  let prms = params;
-  try {
-    prms = JSON.parse(params) || null;
-  } catch (e) {
-    prms = null;
-  }
-  return prms;
-};
-
 export const isMarketplaceMode = (activatedRoute: ActivatedRoute) => {
   const serviceId = getIdFromRoute(activatedRoute, 'serviceId');
   const cfId = getIdFromRoute(activatedRoute, 'endpointId');
@@ -107,4 +110,91 @@ export const getServicePlans = (
     }));
 };
 
+export const getServicePlanName = (plan: { name: string, extraTyped?: IServicePlanExtra }): string =>
+  plan.extraTyped && plan.extraTyped.displayName ? plan.extraTyped.displayName : plan.name;
+
+export const getServicePlanAccessibility = (
+  servicePlan: APIResource<IServicePlan>,
+  servicePlanVisibilities$: Observable<APIResource<IServicePlanVisibility>[]>,
+  serviceBroker$: Observable<APIResource<IServiceBroker>>): Observable<ServicePlanAccessibility> => {
+  if (servicePlan.entity.public) {
+    return observableOf({
+      isPublic: true,
+      guid: servicePlan.metadata.guid
+    });
+  }
+  const safeServiceBroker$ = serviceBroker$.pipe(filter(sb => !!sb));
+  const safeServicePlanVisibilities$ = servicePlanVisibilities$.pipe(filter(spv => !!spv));
+  return safeServiceBroker$.pipe(
+    combineLatest(safeServicePlanVisibilities$),
+    map(([serviceBroker, allServicePlanVisibilities]) => getSvcAvailability(servicePlan, serviceBroker, allServicePlanVisibilities))
+  );
+};
+
+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()
+  );
+};
+
+/*
+* 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 ? safeStringToObj<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 getCfService = (
+  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
   })