Allow key-value options to be passed in for harmonization flows in UI

quick-start/src/main/ui/app/app.module.ts

@@ -60,6 +60,9 @@ import { FacetsComponent } from './facets/facets.component';
 import { ObjectToArrayPipe } from './object-to-array.pipe';
 import { DatePipeModule } from './date-pipe/date-pipe.module';
 
+import { SelectKeyValuesComponent } from './select-key-values/select-key-values.component';
+
+
 @NgModule({
   declarations: [
     AppComponent,
@@ -97,7 +100,8 @@ import { DatePipeModule } from './date-pipe/date-pipe.module';
     FacetsComponent,
     TitlecasePipe,
     TruncateCharactersPipe,
-    ObjectToArrayPipe
+    ObjectToArrayPipe,
+    SelectKeyValuesComponent
   ],
   entryComponents: [
     HasBugsDialogComponent,

quick-start/src/main/ui/app/entities/entities.service.ts

@@ -194,9 +194,9 @@ export class EntitiesService {
     return this.http.post(url, options).subscribe(() => {});
   }
 
-  runHarmonizeFlow(flow: Flow, batchSize: number, threadCount: number) {
+  runHarmonizeFlow(flow: Flow, batchSize: number, threadCount: number, options: any) {
     const url = this.url(`/entities/${flow.entityName}/flows/harmonize/${flow.flowName}/run`);
-    return this.http.post(url, { batchSize: batchSize, threadCount: threadCount }).subscribe(() => {});
+    return this.http.post(url, { batchSize: batchSize, threadCount: threadCount, options: options }).subscribe(() => {});
   }
 
   private extractTypes() {

quick-start/src/main/ui/app/flows/flows.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, OnInit, OnDestroy, QueryList, ViewChildren } from '@angular/core';
+import { Component, EventEmitter, OnInit, OnDestroy, QueryList, ViewChildren, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 
 import { Entity } from '../entities/entity.model';
@@ -38,6 +38,7 @@ import * as _ from 'lodash';
 })
 export class FlowsComponent implements OnInit, OnDestroy {
   @ViewChildren(CodemirrorComponent) codemirrors: QueryList<CodemirrorComponent>;
+  @ViewChild(HarmonizeFlowOptionsComponent) harmonizeFlowOptions: HarmonizeFlowOptionsComponent;
 
   flowTypes: Array<string> = ['Input', 'Harmonize'];
   entities: Array<Entity>;
@@ -221,6 +222,7 @@ export class FlowsComponent implements OnInit, OnDestroy {
     event.cancelBubble = true;
     this.dialogService.confirm(`Really delete ${flow.flowName}`, 'Cancel', 'Delete').subscribe(() => {
       this.entitiesService.deleteFlow(flow, flowType).subscribe(() => {
+        this.harmonizeFlowOptions.deleteSettings(flow.flowName);
         this.router.navigate(['/flows']);
       });
     },
@@ -356,7 +358,7 @@ export class FlowsComponent implements OnInit, OnDestroy {
   }
 
   runHarmonizeFlow(flow: Flow, options: any): void {
-    this.entitiesService.runHarmonizeFlow(flow, options.batchSize, options.threadCount);
+    this.entitiesService.runHarmonizeFlow(flow, options.batchSize, options.threadCount, options.options);
     this.snackbar.showSnackbar({
       message: flow.entityName + ': ' + flow.flowName + ' starting...',
     });

quick-start/src/main/ui/app/harmonize-flow-options/harmonize-flow-options.component.html

@@ -10,15 +10,25 @@ <h3>Run Flow</h3>
         <mdl-textfield floating-label type="number"
           label="Batch Size"
           name="batchSize"
-          [(ngModel)]="settings.batchSize"></mdl-textfield>
+          [(ngModel)]="settings.batchSize"
+          (input)="saveSettings()"
+          ></mdl-textfield>
       </div>
       <div class="setting">
         <mdl-textfield floating-label type="number"
           label="Thread Count"
           name="threadCount"
-          [(ngModel)]="settings.threadCount"></mdl-textfield>
+          [(ngModel)]="settings.threadCount"
+          (input)="saveSettings()"
+          ></mdl-textfield>
       </div>
-    </div>
+      <app-select-key-values
+        [title]="keyValTitle"
+        [keyVals]="keyVals"
+        (onChange)="updateKayVals($event)"
+        (onRemove)="saveSettings()"
+      ></app-select-key-values>
+</div>
     <div>
       <mdl-button mdl-button-type="raised" mdl-colored="primary" mdl-ripple (click)="runHarmonize()">Run Harmonize</mdl-button>
     </div>

quick-start/src/main/ui/app/harmonize-flow-options/harmonize-flow-options.component.ts

@@ -4,33 +4,103 @@ import {
   HostBinding,
   Input,
   OnInit,
-  Output
+  Output,
+  OnChanges,
+  SimpleChanges
 } from '@angular/core';
 import { Flow } from '../entities/flow.model';
 
+import { SelectKeyValuesComponent } from '../select-key-values/select-key-values.component';
+
 @Component({
   selector: 'app-harmonize-flow-options',
   templateUrl: './harmonize-flow-options.component.html',
   styleUrls: ['./harmonize-flow-options.component.scss']
 })
-export class HarmonizeFlowOptionsComponent implements OnInit {
+export class HarmonizeFlowOptionsComponent implements OnInit, OnChanges {
 
   @Input() flow: Flow;
-
+  @Output() onChange = new EventEmitter<any>();
   @Output() onRun: EventEmitter<any> = new EventEmitter();;
 
   _isVisible: boolean = false;
 
-  settings: any = {
-    batchSize: 100,
-    threadCount: 4
-  };
+  settings: any;
+  keyVals: any;
+  keyValTitle = 'Options';
 
   constructor() {}
 
-  ngOnInit() {}
+  setDefaults() {
+    this.settings = {
+      batchSize: 100,
+      threadCount: 4,
+      options: {}
+    };
+    this.keyVals = [{
+      key: '',
+      val: ''
+    }];
+  }
+
+  ngOnInit() {
+    this.setDefaults();
+    this.loadSettings(this.flow.flowName);
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    this.setDefaults();
+    this.loadSettings(changes.flow.currentValue.flowName);
+  }
+
+  updateKayVals(newKeyVals) {
+    this.keyVals = newKeyVals;
+    this.saveSettings();
+  }
 
   runHarmonize(): void {
+    this.keyVals.forEach(function (kv) {
+      if (kv.key !== '' && kv.val !== '') {
+        this.settings.options[kv.key] = kv.val;
+      }
+    }, this);
     this.onRun.emit(this.settings);
   }
+
+  loadSettings(flowName) {
+    let localString = localStorage.getItem("flowSettings");
+    if (localString) {
+      let localObj = JSON.parse(localString);
+      if (localObj[flowName]) {
+        this.settings.batchSize = localObj[flowName].batchSize,
+        this.settings.threadCount = localObj[flowName].threadCount,
+        this.keyVals = localObj[flowName].keyVals;
+      }
+    }
+  }
+
+  saveSettings() {
+    let localString = localStorage.getItem("flowSettings");
+    let localObj = {};
+    if (localString) {
+      localObj = JSON.parse(localString);
+    }
+    localObj[this.flow.flowName] = {
+      batchSize: this.settings.batchSize,
+      threadCount: this.settings.threadCount,
+      keyVals: this.keyVals
+    }
+    localStorage.setItem("flowSettings", JSON.stringify(localObj));
+  }
+
+  deleteSettings(flowName) {
+    let localString = localStorage.getItem("flowSettings");
+    let localObj = {};
+    if (localString) {
+      localObj = JSON.parse(localString);
+      delete localObj[flowName];
+    }
+    localStorage.setItem("flowSettings", JSON.stringify(localObj));
+  }
+
 }

quick-start/src/main/ui/app/select-key-values/select-key-values.component.html

@@ -0,0 +1,29 @@
+<div class="select-key-values">
+  <div class="key-value-heading">
+   <h4>{{title}}</h4>
+  </div>
+  <div class="key-value-add">
+    <mdl-button mdl-button-type="icon" (click)="add(keyVals.length)">
+      <i class="fa fa-plus"></i>
+    </mdl-button>
+  </div>
+</div>
+<div *ngFor="let kv of keyVals; let i = index">
+  <div class="key-value-input">
+    <mdl-textfield floating-label type="string"
+      label="{{keyLabel}}"
+      [(ngModel)]="kv.key"
+      (input)="onChange.emit(keyVals);"></mdl-textfield>
+  </div>
+  <div class="key-value-input">
+    <mdl-textfield floating-label type="string"
+      label="{{valLabel}}"
+      [(ngModel)]="kv.val"
+      (input)="onChange.emit(keyVals);"></mdl-textfield>
+  </div>
+  <div class="key-value-remove">
+    <mdl-button mdl-button-type="icon" (click)="remove(i)">
+        <i class="fa fa-minus"></i>
+    </mdl-button>
+  </div>
+</div>

quick-start/src/main/ui/app/select-key-values/select-key-values.component.scss

@@ -0,0 +1,25 @@
+.key-value-heading {
+  float:left;
+}
+
+.key-value-add {
+  padding-top: 23px;
+  padding-left: 10px;
+}
+
+.key-value-input:first-child {
+  padding-left:0;
+  clear: both;
+}
+
+.key-value-input {
+  float:left;
+  width: 180px;
+  padding-left:10px;
+}
+
+.key-value-remove {
+  float:left;
+  padding-top:18px;
+  padding-left:10px;
+}

quick-start/src/main/ui/app/select-key-values/select-key-values.component.ts

@@ -0,0 +1,30 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'app-select-key-values',
+  templateUrl: './select-key-values.component.html',
+  styleUrls: ['./select-key-values.component.scss'],
+})
+export class SelectKeyValuesComponent {
+  @Input() title: string;
+  @Input() keyLabel: string = "Key";
+  @Input() valLabel: string = "Value";
+  @Input() keyVals: any;
+  @Output() onChange = new EventEmitter<any>();
+  @Output() onAdd = new EventEmitter<any>();
+  @Output() onRemove = new EventEmitter<any>();
+
+  constructor() {
+  }
+
+  add(index): void {
+    this.keyVals.push({key:'',val:''});
+    this.onAdd.emit({index: index});
+  }
+
+  remove(index): void {
+    this.keyVals.splice(index, 1);
+    this.onRemove.emit({index: index});
+  }
+
+}