Feature json schema

package.json

@@ -46,6 +46,7 @@
     "@angular/compiler": "^6.1.1",
     "@angular/core": "^6.1.1",
     "@angular/forms": "^6.1.1",
+    "@angular/flex-layout": "^6.0.0-beta.16",
     "@angular/http": "^6.1.1",
     "@angular/material": "^6.1.0",
     "@angular/platform-browser": "^6.1.1",
@@ -58,6 +59,7 @@
     "@ngrx/store-devtools": "^6.0.1",
     "@swimlane/ngx-charts": "^8.1.0",
     "angular2-virtual-scroll": "^0.3.1",
+    "stratos-angular6-json-schema-form": "1.0.3",
     "core-js": "^2.5.7",
     "hammerjs": "^2.0.8",
     "js-yaml": "^3.11.0",

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

@@ -67,12 +67,28 @@ export interface IServicePlan {
   service?: APIResource<IService>;
   guid?: string;
   cfGuid?: string;
+  schemas?: ServicePlanSchemas;
+}
+
+export interface ServicePlanSchemas {
+  service_instance: ServicePlanSchema;
+  service_binding: ServicePlanSchema;
+}
+
+export interface ServicePlanSchema {
+  create?: {
+    parameters: object
+  };
+  update?: {
+    parameters: object
+  };
 }
 
 export interface IServicePlanExtra {
   displayName: string;
   bullets: string[];
 }
+
 export interface IService {
   label: string;
   description: string;

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

@@ -244,3 +244,19 @@ export function parseHttpPipeError(res): {} {
   }
   return {};
 }
+
+export function safeStringToObj(value: string): object {
+  try {
+    if (value) {
+      const jsonObj = JSON.parse(value);
+      // Check if jsonObj is actually an obj
+      if (jsonObj.constructor !== {}.constructor) {
+        throw new Error('not an object');
+      }
+      return jsonObj;
+    }
+  } catch (e) {
+    return null;
+  }
+  return null;
+}

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

@@ -20,7 +20,6 @@ import { getPaginationObservables } from '../../store/reducers/pagination-reduce
 import { APIResource } from '../../store/types/api.types';
 import { getIdFromRoute } from '../cloud-foundry/cf.helpers';
 
-
 export const getSvcAvailability = (servicePlan: APIResource<IServicePlan>,
   serviceBroker: APIResource<IServiceBroker>,
   allServicePlanVisibilities: APIResource<IServicePlanVisibility>[]) => {
@@ -43,17 +42,6 @@ export const getSvcAvailability = (servicePlan: APIResource<IServicePlan>,
 
 export const safeUnsubscribe = (s: Subscription) => { if (s) { s.unsubscribe(); } };
 
-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, 'cfId');
@@ -90,23 +78,25 @@ export const getServicePlans = (
   cfGuid: string,
   store: Store<AppState>,
   paginationMonitorFactory: PaginationMonitorFactory
-): Observable<APIResource<IServicePlan>[]>  => {
+): Observable<APIResource<IServicePlan>[]> => {
   return service$.pipe(
     filter(p => !!p),
     switchMap(service => {
-    if (service.entity.service_plans && service.entity.service_plans.length > 0) {
-      return observableOf(service.entity.service_plans);
-    } else {
-      const guid = service.metadata.guid;
-      const paginationKey = createEntityRelationPaginationKey(servicePlanSchemaKey, guid);
-      const getServicePlansAction = new GetServicePlansForService(guid, cfGuid, paginationKey);
-      // Could be a space-scoped service, make a request to fetch the plan
-      return getPaginationObservables<APIResource<IServicePlan>>({
-        store: store,
-        action: getServicePlansAction,
-        paginationMonitor: paginationMonitorFactory.create(getServicePlansAction.paginationKey, entityFactory(servicePlanSchemaKey))
-      }, true)
-        .entities$.pipe(share(), first());
-    }
-  }));
+      if (service.entity.service_plans && service.entity.service_plans.length > 0) {
+        return observableOf(service.entity.service_plans);
+      } else {
+        const guid = service.metadata.guid;
+        const paginationKey = createEntityRelationPaginationKey(servicePlanSchemaKey, guid);
+        const getServicePlansAction = new GetServicePlansForService(guid, cfGuid, paginationKey);
+        // Could be a space-scoped service, make a request to fetch the plan
+        return getPaginationObservables<APIResource<IServicePlan>>({
+          store: store,
+          action: getServicePlansAction,
+          paginationMonitor: paginationMonitorFactory.create(getServicePlansAction.paginationKey, entityFactory(servicePlanSchemaKey))
+        }, true)
+          .entities$.pipe(share(), first());
+      }
+    }));
 };
+
+

src/frontend/app/shared/components/add-service-instance/add-service-instance/add-service-instance.component.html

@@ -12,10 +12,10 @@
     <app-step title="Select Plan" [onNext]="selectPlan.onNext" [blocked]="initialisedService$ | async" [onEnter]="selectPlan.onEnter" [valid]="selectPlan.validate | async" cancelButtonText="Cancel">
       <app-select-plan-step #selectPlan></app-select-plan-step>
     </app-step>
-    <app-step [title]="bindAppStepperText" *ngIf="modeService.viewDetail.showBindApp" [skip]="skipApps$ | async" [onNext]="bindApp.submit " [valid]="bindApp.validate | async" cancelButtonText="Cancel" finishButtonText="Bind">
+    <app-step [title]="bindAppStepperText" *ngIf="modeService.viewDetail.showBindApp" [skip]="skipApps$ | async" [onEnter]="bindApp.onEnter" [onNext]="bindApp.submit " [valid]="bindApp.validate | async" cancelButtonText="Cancel">
       <app-bind-apps-step #bindApp [boundAppId]="appId"></app-bind-apps-step>
     </app-step>
-    <app-step title="Service Instance" [onNext]="specifyDetails.onNext" [onEnter]="specifyDetails.onEnter" [blocked]="!!(specifyDetails.serviceInstancesInit$  | async)" [valid]=" specifyDetails.validate | async " cancelButtonText="Cancel " nextButtonText="Create ">
+    <app-step title="Service Instance" [onNext]="specifyDetails.onNext" [onEnter]="specifyDetails.onEnter" [blocked]="!!(specifyDetails.serviceInstancesInit$  | async)" [valid]="specifyDetails.validate | async " cancelButtonText="Cancel " nextButtonText="Create ">
       <app-specify-details-step [appId]="appId" #specifyDetails [showModeSelection]="!!appId "></app-specify-details-step>
     </app-step>
   </app-steppers>

src/frontend/app/shared/components/add-service-instance/add-service-instance/add-service-instance.component.spec.ts

@@ -1,4 +1,5 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { MaterialDesignFrameworkModule } from 'stratos-angular6-json-schema-form';
 
 import { ServicesService } from '../../../../features/service-catalog/services.service';
 import { ServicesServiceMock } from '../../../../features/service-catalog/services.service.mock';
@@ -26,6 +27,7 @@ import { MetaCardValueComponent } from '../../list/list-cards/meta-card/meta-car
 import { CfServiceCardComponent } from '../../list/list-types/cf-services/cf-service-card/cf-service-card.component';
 import { MetadataItemComponent } from '../../metadata-item/metadata-item.component';
 import { PageHeaderModule } from '../../page-header/page-header.module';
+import { SchemaFormComponent } from '../../schema-form/schema-form.component';
 import { ServiceIconComponent } from '../../service-icon/service-icon.component';
 import { SteppersModule } from '../../stepper/steppers.module';
 import { BindAppsStepComponent } from '../bind-apps-step/bind-apps-step.component';
@@ -60,11 +62,13 @@ describe('AddServiceInstanceComponent', () => {
         BooleanIndicatorComponent,
         AppChipsComponent,
         ApplicationStateIconComponent,
-        ApplicationStateIconPipe
+        ApplicationStateIconPipe,
+        SchemaFormComponent
       ],
       imports: [
         PageHeaderModule,
         SteppersModule,
+        MaterialDesignFrameworkModule,
         // CoreModule,
         BaseTestModulesNoShared
       ],

src/frontend/app/shared/components/add-service-instance/add-service-instance/add-service-instance.component.ts

@@ -69,6 +69,7 @@ export class AddServiceInstanceComponent implements OnDestroy, AfterContentInit
   bindAppStepperText = 'Bind App (Optional)';
   appId: string;
   public inMarketplaceMode: boolean;
+
   constructor(
     private cSIHelperServiceFactory: CreateServiceInstanceHelperServiceFactory,
     private activatedRoute: ActivatedRoute,
@@ -130,13 +131,6 @@ export class AddServiceInstanceComponent implements OnDestroy, AfterContentInit
     }
   }
 
-  private getIdsFromRoute() {
-    const serviceId = getIdFromRoute(this.activatedRoute, 'serviceId');
-    const cfId = getIdFromRoute(this.activatedRoute, 'cfId');
-    const appId = getIdFromRoute(this.activatedRoute, 'id');
-    return { serviceId, cfId, appId };
-  }
-
   private setupForAppServiceMode() {
 
     const appId = getIdFromRoute(this.activatedRoute, 'id');

src/frontend/app/shared/components/add-service-instance/bind-apps-step/bind-apps-step.component.html

@@ -7,11 +7,9 @@
         <mat-option *ngFor="let app of apps$ | async" [value]="app.metadata.guid">{{ app.entity.name }}</mat-option>
       </mat-select>
     </mat-form-field>
-    <mat-form-field>
-      <textarea matInput placeholder="JSON parameters" matAutosizeMinRows="2" matAutosizeMaxRows="5" formControlName="params"></textarea>
-      <mat-error *ngIf="stepperForm.controls.params?.hasError('notValidJson')">
-        Not valid JSON. Please specify a valid JSON Object
-      </mat-error>
-    </mat-form-field>
+    <div *ngIf="stepperForm.controls.apps.value" class="stepper-form__params">
+      <div>Binding Parameters</div>
+      <app-schema-form [config]="schemaFormConfig" (dataChange)="setBindingParams($event)" (validChange)="setParamValid($event)"></app-schema-form>
+    </div>
   </form>
 </div>

src/frontend/app/shared/components/add-service-instance/bind-apps-step/bind-apps-step.component.scss

@@ -1,3 +1,7 @@
 :host {
   flex: 1;
 }
+
+.stepper-form__params {
+  padding-top: 20px;
+}

src/frontend/app/shared/components/add-service-instance/bind-apps-step/bind-apps-step.component.spec.ts

@@ -1,20 +1,28 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { MaterialDesignFrameworkModule } from 'stratos-angular6-json-schema-form';
 
-import { BindAppsStepComponent } from './bind-apps-step.component';
-import { BaseTestModules, BaseTestModulesNoShared } from '../../../../test-framework/cloud-foundry-endpoint-service.helper';
 import { ServicesService } from '../../../../features/service-catalog/services.service';
 import { ServicesServiceMock } from '../../../../features/service-catalog/services.service.mock';
-import { CsiGuidsService } from '../csi-guids.service';
+import { BaseTestModulesNoShared } from '../../../../test-framework/cloud-foundry-endpoint-service.helper';
 import { PaginationMonitorFactory } from '../../../monitors/pagination-monitor.factory';
+import { SchemaFormComponent } from '../../schema-form/schema-form.component';
+import { CsiGuidsService } from '../csi-guids.service';
+import { BindAppsStepComponent } from './bind-apps-step.component';
 
 describe('BindAppsStepComponent', () => {
   let component: BindAppsStepComponent;
   let fixture: ComponentFixture<BindAppsStepComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [BindAppsStepComponent],
-      imports: [BaseTestModulesNoShared],
+      declarations: [
+        BindAppsStepComponent,
+        SchemaFormComponent
+      ],
+      imports: [
+        BaseTestModulesNoShared,
+        MaterialDesignFrameworkModule
+      ],
       providers: [
         { provide: ServicesService, useClass: ServicesServiceMock },
         CsiGuidsService,