SHIBUI-579 Implemented metadata filters page in wizard

TIER · Jul 3, 2018 · 15cd444 · 15cd444
1 parent 26828df
commit 15cd444
Show file tree

Hide file tree

Showing 16 changed files with 128 additions and 169 deletions.
diff --git a/ui/src/app/metadata/domain/domain.type.ts b/ui/src/app/metadata/domain/domain.type.ts
@@ -6,9 +6,11 @@ import {
 
 import {
     EntityAttributesFilter,
-    FileBackedHttpMetadataResolver,
-    FileBackedHttpMetadataProvider
+    FileBackedHttpMetadataResolver
 } from './entity';
+import {
+    FileBackedHttpMetadataProvider
+} from './model/providers';
 
 export type Filter =
     | EntityAttributesFilter;

diff --git a/ui/src/app/metadata/domain/entity/index.ts b/ui/src/app/metadata/domain/entity/index.ts
@@ -1,3 +1,2 @@
 export * from './filter/entity-attributes-filter';
-export * from './provider/file-backed-http-metadata-provider';
 export * from './resolver/file-backed-http-metadata-resolver';
diff --git a/ui/src/app/metadata/domain/entity/provider/file-backed-http-metadata-provider.spec.ts b/ui/src/app/metadata/domain/entity/provider/file-backed-http-metadata-provider.spec.ts
diff --git a/ui/src/app/metadata/domain/entity/provider/file-backed-http-metadata-provider.ts b/ui/src/app/metadata/domain/entity/provider/file-backed-http-metadata-provider.ts
diff --git a/ui/src/app/metadata/domain/model/providers/file-backed-http-metadata-provider.ts b/ui/src/app/metadata/domain/model/providers/file-backed-http-metadata-provider.ts
@@ -0,0 +1,5 @@
+import { MetadataProvider } from '../metadata-provider';
+
+export interface FileBackedHttpMetadataProvider extends MetadataProvider {
+    metadataFilters: any[];
+}
diff --git a/ui/src/app/metadata/domain/model/providers/index.ts b/ui/src/app/metadata/domain/model/providers/index.ts
@@ -0,0 +1 @@
+export * from './file-backed-http-metadata-provider';
diff --git a/ui/src/app/metadata/provider/action/editor.action.ts b/ui/src/app/metadata/provider/action/editor.action.ts
@@ -6,7 +6,9 @@ export enum EditorActionTypes {
     LOAD_SCHEMA_SUCCESS = '[Provider Editor] Load Schema Success',
     LOAD_SCHEMA_FAIL = '[Provider Editor] Load Schema Fail',
 
-    SELECT_PROVIDER_TYPE = '[Provider Editor] Select Provider Type'
+    SELECT_PROVIDER_TYPE = '[Provider Editor] Select Provider Type',
+
+    CLEAR = '[Provider Editor] Clear'
 }
 
 export class UpdateStatus implements Action {
@@ -39,9 +41,14 @@ export class SelectProviderType implements Action {
     constructor(public payload: string) { }
 }
 
+export class ClearEditor implements Action {
+    readonly type = EditorActionTypes.CLEAR;
+}
+
 export type EditorActionUnion =
     | UpdateStatus
     | LoadSchemaRequest
     | LoadSchemaSuccess
     | LoadSchemaFail
-    | SelectProviderType;
+    | SelectProviderType
+    | ClearEditor;
diff --git a/ui/src/app/metadata/provider/action/entity.action.ts b/ui/src/app/metadata/provider/action/entity.action.ts
@@ -9,7 +9,8 @@ export enum EntityActionTypes {
     SAVE_PROVIDER_SUCCESS = '[Provider Entity] Save Provider Success',
     SAVE_PROVIDER_FAIL = '[Provider Entity] Save Provider Fail',
 
-    RESET_CHANGES = '[Provider Entity] Reset Provider Changes'
+    CLEAR_PROVIDER = '[Provider Entity] Clear',
+    RESET_CHANGES = '[Provider Entity] Reset Changes'
 }
 
 export class SelectProvider implements Action {
@@ -48,6 +49,10 @@ export class SaveProviderFail implements Action {
     constructor(public payload: Error) { }
 }
 
+export class ClearProvider implements Action {
+    readonly type = EntityActionTypes.CLEAR_PROVIDER;
+}
+
 export class ResetChanges implements Action {
     readonly type = EntityActionTypes.RESET_CHANGES;
 }
@@ -59,4 +64,5 @@ export type EntityActionUnion =
     | SaveProviderSuccess
     | SaveProviderFail
     | CreateProvider
+    | ClearProvider
     | ResetChanges;
diff --git a/ui/src/app/metadata/provider/container/provider-wizard.component.html b/ui/src/app/metadata/provider/container/provider-wizard.component.html
@@ -5,14 +5,12 @@
         <div class="col col-xl-6 col-lg-9 col-xs-12">
             <sf-form
                 [schema]="schema$ | async"
-                [model]="formModel"
+                [model]="model$ | async"
                 (onChange)="changeSubject.next($event)"
                 (isValid)="onStatusChange($event)"></sf-form>
         </div>
-        <!--
-        <div class="col col-xl-6 col-lg-9 col-xs-12">
+        <!--<div class="col col-xl-6 col-lg-9 col-xs-12">
             <code class="bg-light border rounded p-4 d-block"><pre>{{ changes$ | async | json }}</pre></code>
-        </div>
-        -->
+        </div>-->
     </div>
 </div>
diff --git a/ui/src/app/metadata/provider/container/provider-wizard.component.ts b/ui/src/app/metadata/provider/container/provider-wizard.component.ts
@@ -1,20 +1,18 @@
-
 import { Component, OnDestroy } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { Subscription, Observable, Subject } from 'rxjs';
-import { distinctUntilChanged, map, withLatestFrom } from 'rxjs/operators';
+import { Observable, Subject } from 'rxjs';
+import { map, withLatestFrom } from 'rxjs/operators';
 import { Store } from '@ngrx/store';
 
 import * as fromProvider from '../reducer';
 import * as fromWizard from '../../../wizard/reducer';
 
-import { SetIndex, SetDisabled, UpdateDefinition, WizardActionTypes, Next, SetDefinition } from '../../../wizard/action/wizard.action';
-import { LoadSchemaRequest, UpdateStatus } from '../action/editor.action';
+import { SetIndex, SetDisabled, SetDefinition, ClearWizard } from '../../../wizard/action/wizard.action';
+import { LoadSchemaRequest, UpdateStatus, ClearEditor } from '../action/editor.action';
 import { startWith } from 'rxjs/operators';
 import { Wizard, WizardStep } from '../../../wizard/model';
 import { MetadataProvider } from '../../domain/model';
 import { MetadataProviderTypes, MetadataProviderWizard } from '../model';
-import { UpdateProvider } from '../action/entity.action';
+import { UpdateProvider, ClearProvider } from '../action/entity.action';
 import { pick } from '../../../shared/util';
 
 @Component({
@@ -24,20 +22,17 @@ import { pick } from '../../../shared/util';
 })
 
 export class ProviderWizardComponent implements OnDestroy {
-    actionsSubscription: Subscription;
-
     changeSubject = new Subject<Partial<any>>();
     private changeEmitted$ = this.changeSubject.asObservable();
 
     schema$: Observable<any>;
     schema: any;
     definition$: Observable<Wizard<MetadataProvider>>;
     changes$: Observable<MetadataProvider>;
+    model$: Observable<any>;
     currentPage: string;
     valid$: Observable<boolean>;
 
-    formModel: any;
-
     nextStep: WizardStep;
     previousStep: WizardStep;
 
@@ -57,6 +52,26 @@ export class ProviderWizardComponent implements OnDestroy {
         this.store.select(fromWizard.getNext).subscribe(n => this.nextStep = n);
         this.store.select(fromWizard.getPrevious).subscribe(p => this.previousStep = p);
 
+        this.model$ = this.schema$.pipe(
+            withLatestFrom(
+                this.store.select(fromWizard.getModel),
+                this.changes$,
+                this.definition$
+            ),
+            map(([schema, model, changes, definition]) => {
+                return ({
+                    model: {
+                        ...model,
+                        ...changes
+                    },
+                    definition
+                });
+            }),
+            map(({ model, definition }) => {
+                return definition.translate ? definition.translate.formatter(model) : model;
+            })
+        );
+
         this.valid$
             .pipe(startWith(false))
             .subscribe((valid) => {
@@ -65,12 +80,9 @@ export class ProviderWizardComponent implements OnDestroy {
 
         this.schema$.subscribe(s => this.schema = s);
 
-        this.changeEmitted$
-            .pipe(
+        this.changeEmitted$.pipe(
                 withLatestFrom(this.schema$, this.definition$),
-            )
-            .subscribe(
-                ([changes, schema, definition]) => {
+                map(([changes, schema, definition]) => {
                     const type = changes.value['@type'];
                     if (type && type !== definition.type) {
                         const newDefinition = MetadataProviderTypes.find(def => def.type === type);
@@ -86,13 +98,17 @@ export class ProviderWizardComponent implements OnDestroy {
                             changes = { value: pick(Object.keys(schema.properties))(changes.value) };
                         }
                     }
-                    this.store.dispatch(new UpdateProvider(changes.value));
-                }
-            );
+                    return { changes: changes.value, definition };
+                }),
+                map(({ changes, definition }) => definition.translate ? definition.translate.parser(changes) : changes)
+            )
+            .subscribe(changes => this.store.dispatch(new UpdateProvider(changes)));
     }
 
     ngOnDestroy() {
-        this.actionsSubscription.unsubscribe();
+        this.store.dispatch(new ClearProvider());
+        this.store.dispatch(new ClearWizard());
+        this.store.dispatch(new ClearEditor());
         this.changeSubject.complete();
     }
 

diff --git a/ui/src/app/metadata/provider/model/file-backed-http.provider.form.ts b/ui/src/app/metadata/provider/model/file-backed-http.provider.form.ts
@@ -1,17 +1,39 @@
 import { Wizard } from '../../../wizard/model';
-import { MetadataProvider } from '../../domain/model';
+import { FileBackedHttpMetadataProvider } from '../../domain/model/providers/file-backed-http-metadata-provider';
 
-export const FileBackedHttpMetadataProviderWizard: Wizard<MetadataProvider> = {
+export const FileBackedHttpMetadataProviderWizard: Wizard<FileBackedHttpMetadataProvider> = {
     label: 'FileBackedHttpMetadataProvider',
     type: '@FileBackedHttpMetadataProvider',
+    translate: {
+        parser: (changes) => ({
+            ...changes,
+            metadataFilters: [
+                ...Object.keys(changes.metadataFilters || {}).reduce((collection, filterName) => ([
+                    ...collection,
+                    {
+                        ...changes.metadataFilters[filterName],
+                        '@type': filterName
+                    }
+                ]), [])
+            ]
+        }),
+        formatter: (changes) => ({
+            ...changes,
+            metadataFilters: {
+                ...(changes.metadataFilters || []).reduce((collection, filter) => ({
+                    ...collection,
+                    [filter['@type']]: filter
+                }), {})
+            }
+        })
+    },
     steps: [
         {
             id: 'common',
             label: 'Common Attributes',
             index: 2,
             initialValues: [],
-            schema: 'assets/schema/provider/filebacked-http-common.schema.json',
-            parser: (changes: Partial<MetadataProvider>, schema: any) => (<MetadataProvider>{ name: '', '@type': '' })
+            schema: 'assets/schema/provider/filebacked-http-common.schema.json'
         },
         {
             id: 'reloading',
@@ -24,7 +46,9 @@ export const FileBackedHttpMetadataProviderWizard: Wizard<MetadataProvider> = {
             id: 'filters',
             label: 'Metadata Filter Plugins',
             index: 4,
-            initialValues: [],
+            initialValues: [
+                { key: 'metadataFilters', value: [] }
+            ],
             schema: 'assets/schema/provider/filebacked-http-filters.schema.json'
         }
     ]