Feature json schema

package.json

@@ -46,6 +46,7 @@
     "@angular/common": "6.0.3",
     "@angular/compiler": "6.0.3",
     "@angular/core": "6.0.3",
+    "@angular/flex-layout": "^6.0.0-beta.16",
     "@angular/forms": "6.0.3",
     "@angular/http": "6.0.3",
     "@angular/material": "^6.1.0",
@@ -59,6 +60,7 @@
     "@ngrx/store-devtools": "^6.0.1",
     "@swimlane/ngx-charts": "^8.1.0",
     "angular2-virtual-scroll": "^0.3.1",
+    "angular6-json-schema-form": "1.0.3",
     "core-js": "^2.5.7",
     "hammerjs": "^2.0.8",
     "hyperlist": "^1.0.0-beta",

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

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

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

@@ -19,6 +19,7 @@ import { createEntityRelationPaginationKey } from '../../store/helpers/entity-re
 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 { JsonPointer } from 'angular6-json-schema-form';
 
 
 export const getSvcAvailability = (servicePlan: APIResource<IServicePlan>,
@@ -90,23 +91,34 @@ 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());
+      }
+    }));
+};
+
+export const prettyValidationErrors = (formValidationErrors: any[]): string => {
+  if (!formValidationErrors) { return null; }
+  return formValidationErrors.reduce((a, c) => {
+      const arrMessage = JsonPointer.parse(c.dataPath).reduce((aa, cc) => {
+          const dd = /^\d+$/.test(cc) ? `[${cc}]` : `.${cc}`;
+          return aa + dd;
+      }, '');
+      return `${a} ${arrMessage} ${c.message} <br>`;
+  }, '');
 };

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

@@ -12,7 +12,7 @@
     <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" finishButtonText="Bind">
       <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 ">

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

@@ -20,6 +20,7 @@ import { SelectPlanStepComponent } from '../select-plan-step/select-plan-step.co
 import { SelectServiceComponent } from '../select-service/select-service.component';
 import { SpecifyDetailsStepComponent } from '../specify-details-step/specify-details-step.component';
 import { AddServiceInstanceComponent } from './add-service-instance.component';
+import { MaterialDesignFrameworkModule } from 'angular6-json-schema-form';
 
 describe('AddServiceInstanceComponent', () => {
   let component: AddServiceInstanceComponent;
@@ -40,6 +41,7 @@ describe('AddServiceInstanceComponent', () => {
       imports: [
         PageHeaderModule,
         SteppersModule,
+        MaterialDesignFrameworkModule,
         // CoreModule,
         BaseTestModulesNoShared
       ],

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

@@ -14,4 +14,25 @@
       </mat-error>
     </mat-form-field>
   </form>
+  <div *ngIf="!!schema" class="json-schema">
+    <mat-card class="json-schema-form">
+      <mat-card-header>
+        <mat-card-title><b>Generated Form</b><button mat-button color="accent" (click)="showJsonSchema=!showJsonSchema">Json schema</button>
+        </mat-card-title>
+      </mat-card-header>
+      <mat-card-content>
+        <json-schema-form loadExternalAssets="true" [options]="jsonFormOptions" [schema]="schema" [framework]="selectedFramework" (validationErrors)="validationErrors($event)" (onChanges)="onFormChange($event)">
+        </json-schema-form>
+        <div *ngIf="!!prettyValidationErrors" class="data-bad" [innerHTML]="prettyValidationErrors"></div>
+      </mat-card-content>
+    </mat-card>
+    <mat-card *ngIf="showJsonSchema" class="json-schema-data">
+      <mat-card-header>
+        <mat-card-title><b>Json schema</b></mat-card-title>
+      </mat-card-header>
+      <mat-card-content>
+        <pre class="display-json">{{schema | json}} </pre>
+      </mat-card-content>
+    </mat-card>
+  </div>
 </div>

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

@@ -1,3 +1,31 @@
+@import '../../../../../sass/mixins';
 :host {
   flex: 1;
 }
+
+@mixin json-schema-component() {
+  .data-bad { background-color: #fcc; }
+  .display-json {
+    white-space: -moz-pre-wrap;
+    white-space: -pre-wrap;
+    white-space: -o-pre-wrap;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+  }
+  .json-schema {
+    display: flex;
+    flex-direction: column;
+    @include breakpoint(laptop) {
+      flex-direction: row;
+    }
+  }
+  .json-schema-data,
+  .json-schema-form {
+    width: 100%;
+    @include breakpoint(laptop) {
+      width: 50%;
+    }
+  }
+}
+
+@include json-schema-component();

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

@@ -6,6 +6,7 @@ import { ServicesService } from '../../../../features/service-catalog/services.s
 import { ServicesServiceMock } from '../../../../features/service-catalog/services.service.mock';
 import { CsiGuidsService } from '../csi-guids.service';
 import { PaginationMonitorFactory } from '../../../monitors/pagination-monitor.factory';
+import { MaterialDesignFrameworkModule } from 'angular6-json-schema-form';
 
 describe('BindAppsStepComponent', () => {
   let component: BindAppsStepComponent;
@@ -14,7 +15,7 @@ describe('BindAppsStepComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [BindAppsStepComponent],
-      imports: [BaseTestModulesNoShared],
+      imports: [BaseTestModulesNoShared , MaterialDesignFrameworkModule],
       providers: [
         { provide: ServicesService, useClass: ServicesServiceMock },
         CsiGuidsService,

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

@@ -18,6 +18,7 @@ import { PaginationMonitorFactory } from '../../../monitors/pagination-monitor.f
 import { StepOnNextResult } from '../../stepper/step/step.component';
 import { CsiGuidsService } from '../csi-guids.service';
 import { SpecifyDetailsStepComponent } from '../specify-details-step/specify-details-step.component';
+import { safeUnsubscribe, prettyValidationErrors } from '../../../../features/service-catalog/services-helper';
 
 @Component({
   selector: 'app-bind-apps-step',
@@ -35,6 +36,14 @@ export class BindAppsStepComponent implements OnDestroy, AfterContentInit {
   stepperForm: FormGroup;
   apps$: Observable<APIResource<IApp>[]>;
   guideText = 'Specify the application to bind (Optional)';
+
+  selectedFramework = 'material-design';
+  schema: any;
+  showJsonSchema: boolean;
+  jsonFormOptions: any = { addSubmit: false };
+  selectedServiceSubscription: Subscription;
+  formValidationErrors: any;
+  selectedService$: any;
   constructor(
     private store: Store<AppState>,
     private paginationMonitorFactory: PaginationMonitorFactory
@@ -53,6 +62,23 @@ export class BindAppsStepComponent implements OnDestroy, AfterContentInit {
     }
   }
 
+  onFormChange(jsonData) {
+    if (!!jsonData) {
+      try {
+        const stringData = JSON.stringify(jsonData);
+        this.stepperForm.get('params').setValue(stringData);
+      } catch { }
+    }
+  }
+
+  validationErrors(data: any): void {
+    this.formValidationErrors = data;
+  }
+
+  get prettyValidationErrors() {
+    return prettyValidationErrors(this.formValidationErrors);
+  }
+
   ngAfterContentInit() {
     this.validateSubscription = this.stepperForm.statusChanges.pipe(
       map(() => {
@@ -80,9 +106,27 @@ export class BindAppsStepComponent implements OnDestroy, AfterContentInit {
     this.setBoundApp();
   }
 
+  onEnter = (selectedService$?) => {
+    this.selectedService$ = selectedService$;
+    if (selectedService$ instanceof Observable) {
+      this.selectedServiceSubscription = selectedService$.pipe(
+        first()
+      ).subscribe(selectedService => {
+        this.schema = this.filterSchema(selectedService.entity.entity.schemas.service_binding.create.parameters);
+      });
+    }
+  }
+
+  private filterSchema = (schema: any): any => {
+    return Object.keys(schema).reduce((obj, key) => {
+      if (key !== '$schema') { obj[key] = schema[key]; }
+      return obj;
+    }, {});
+  }
+
   submit = (): Observable<StepOnNextResult> => {
     this.setApp();
-    return observableOf({ success: true });
+    return observableOf({ success: true, data: this.selectedService$ });
   }
 
   setApp = () => this.store.dispatch(
@@ -91,6 +135,7 @@ export class BindAppsStepComponent implements OnDestroy, AfterContentInit {
 
   ngOnDestroy(): void {
     this.validateSubscription.unsubscribe();
+    safeUnsubscribe(this.selectedServiceSubscription);
   }
 
 }

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

@@ -169,7 +169,7 @@ export class SelectPlanStepComponent implements OnDestroy {
 
   onNext = (): Observable<StepOnNextResult> => {
     this.store.dispatch(new SetCreateServiceInstanceServicePlan(this.stepperForm.controls.servicePlans.value));
-    return observableOf({ success: true });
+    return observableOf({ success: true, data: this.selectedService$ });
   }
 
   ngOnDestroy(): void {

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

@@ -37,6 +37,26 @@
         <mat-option *ngFor="let sI of bindableServiceInstances$ | async" [disabled]="!sI.metadata.guid" [value]="sI.metadata.guid">{{ sI.entity.name }}</mat-option>
       </mat-select>
     </mat-form-field>
-
   </form>
+  <div *ngIf="!!schema" class="json-schema">
+    <mat-card class="json-schema-form">
+      <mat-card-header>
+        <mat-card-title><b>Generated Form</b><button mat-button color="accent" (click)="showJsonSchema=!showJsonSchema">Json schema</button>
+        </mat-card-title>
+      </mat-card-header>
+      <mat-card-content>
+        <json-schema-form loadExternalAssets="true" [options]="jsonFormOptions" [schema]="schema" [framework]="selectedFramework" (validationErrors)="validationErrors($event)" (onChanges)="onFormChange($event)">
+        </json-schema-form>
+        <div *ngIf="!!prettyValidationErrors" class="data-bad" [innerHTML]="prettyValidationErrors"></div>
+      </mat-card-content>
+    </mat-card>
+    <mat-card *ngIf="showJsonSchema" class="json-schema-data">
+      <mat-card-header>
+        <mat-card-title><b>Json schema</b></mat-card-title>
+      </mat-card-header>
+      <mat-card-content>
+        <pre class="display-json">{{schema | json}} </pre>
+      </mat-card-content>
+    </mat-card>
+  </div>
 </div>

src/frontend/app/shared/components/add-service-instance/specify-details-step/specify-details-step.component.scss

@@ -1,3 +1,4 @@
+@import '../bind-apps-step/bind-apps-step.component';
 :host {
   flex: 1;
 }
@@ -23,3 +24,5 @@
     }
   }
 }
+
+@include json-schema-component();

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

@@ -7,6 +7,7 @@ import { CsiGuidsService } from '../csi-guids.service';
 import { PaginationMonitorFactory } from '../../../monitors/pagination-monitor.factory';
 import { EntityMonitorFactory } from '../../../monitors/entity-monitor.factory.service';
 import { CsiModeService } from '../csi-mode.service';
+import { MaterialDesignFrameworkModule } from 'angular6-json-schema-form';
 
 describe('SpecifyDetailsStepComponent', () => {
   let component: SpecifyDetailsStepComponent;
@@ -15,7 +16,7 @@ describe('SpecifyDetailsStepComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [SpecifyDetailsStepComponent],
-      imports: [BaseTestModulesNoShared],
+      imports: [BaseTestModulesNoShared, MaterialDesignFrameworkModule],
       providers: [
         CreateServiceInstanceHelperServiceFactory,
         CsiGuidsService,