http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/e7034710/ui/angular/src/app/measure/create-measure/ac/ac.component.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/measure/create-measure/ac/ac.component.ts b/ui/angular/src/app/measure/create-measure/ac/ac.component.ts index f8fcaa8..7230b76 100644 --- a/ui/angular/src/app/measure/create-measure/ac/ac.component.ts +++ b/ui/angular/src/app/measure/create-measure/ac/ac.component.ts @@ -16,65 +16,55 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -import { Component, OnInit, AfterViewChecked, ViewChild } from '@angular/core'; -import { FormControl } from '@angular/forms'; -import { FormsModule, Validator} from '@angular/forms'; -import {ServiceService} from '../../../service/service.service'; -// import { PatternValidator } from '@angular/forms'; - - -import { TREE_ACTIONS, KEYS, IActionMapping, ITreeOptions } from 'angular-tree-component'; -import { BrowserAnimationsModule} from '@angular/platform-browser/animations'; -import { ToasterModule, ToasterService} from 'angular2-toaster'; -import * as $ from 'jquery'; -import { HttpClient} from '@angular/common/http'; -import { Router} from "@angular/router"; -// import { TagInputModule } from 'ngx-chips'; - +import { Component, OnInit, AfterViewChecked, ViewChild } from "@angular/core"; +import { FormControl } from "@angular/forms"; +import { FormsModule, Validator } from "@angular/forms"; +import { ServiceService } from "../../../service/service.service"; +import { TREE_ACTIONS, KEYS, IActionMapping, ITreeOptions } from "angular-tree-component"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { ToasterModule, ToasterService } from "angular2-toaster"; +import * as $ from "jquery"; +import { HttpClient } from "@angular/common/http"; +import { Router } from "@angular/router"; class node { name: string; id: number; - children:object[]; - isExpanded:boolean; - cols:Col[]; - parent:string; - location:string; -}; -class Col{ - name:string; - type:string; - comment:string; - selected :boolean; - constructor(name:string,type:string,comment:string,selected:boolean){ + children: object[]; + isExpanded: boolean; + cols: Col[]; + parent: string; + location: string; +} +class Col { + name: string; + type: string; + comment: string; + selected: boolean; + constructor(name: string, type: string, comment: string, selected: boolean) { this.name = name; this.type = type; this.comment = comment; this.selected = false; } - getSelected(){ + getSelected() { return this.selected; } - setSelected(selected){ + setSelected(selected) { this.selected = selected; } } @Component({ - selector: 'app-ac', - templateUrl: './ac.component.html', - providers:[ServiceService], - styleUrls: ['./ac.component.css'] + selector: "app-ac", + templateUrl: "./ac.component.html", + providers: [ServiceService], + styleUrls: ["./ac.component.css"] }) - -export class AcComponent implements OnInit , AfterViewChecked { - - defaultValue:string; +export class AcComponent implements OnInit, AfterViewChecked { + defaultValue: string; currentStep = 1; - // grp = []; - // showgrp:string; - // finalgrp = []; - desc:string; + desc: string; selection = []; selectedAll = false; selectedAllTarget = false; @@ -82,44 +72,44 @@ export class AcComponent implements OnInit , AfterViewChecked { map = []; mappings = []; matches = []; - dataAsset = ''; - rules = ''; - currentDB = ''; - currentTable = ''; - currentDBTarget = ''; - currentTableTarget = ''; - schemaCollection:Col[]; - schemaCollectionTarget:Col[]; - matchFunctions = ['=', '!=', '>', '>=','<',"<="]; - data:any; + dataAsset = ""; + rules = ""; + currentDB = ""; + currentTable = ""; + currentDBTarget = ""; + currentTableTarget = ""; + schemaCollection: Col[]; + schemaCollectionTarget: Col[]; + matchFunctions = ["=", "!=", ">", ">=", "<", "<="]; + data: any; currentDBTargetStr: string; currentDBstr: string; srcconfig = { - "where":'', - "timezone":'', - "num":1, - "timetype":'day', - "needpath":false, - "path":'' + where: "", + timezone: "", + num: 1, + timetype: "day", + needpath: false, + path: "" }; tgtconfig = { - "where":'', - "timezone":'', - "num":1, - "timetype":'day', - "needpath":false, - "path":'' + where: "", + timezone: "", + num: 1, + timetype: "day", + needpath: false, + path: "" }; srcdata = { - "database":'', - "table":'', - "selection":[] - } + database: "", + table: "", + selection: [] + }; tgtdata = { - "database":'', - "table":'', - "selection":[] - } + database: "", + table: "", + selection: [] + }; src_where: string; tgt_where: string; src_size: string; @@ -133,102 +123,108 @@ export class AcComponent implements OnInit , AfterViewChecked { src_timezone: string; tgt_timezone: string; - measureTypes = ['accuracy','validity','anomaly detection','publish metrics']; + measureTypes = [ + "accuracy", + "validity", + "anomaly detection", + "publish metrics" + ]; type = "accuracy"; newMeasure = { - "name":'', - "measure.type":"griffin", + name: "", + "measure.type": "griffin", "dq.type": "accuracy", "process.type": "batch", - "owner":"", - "description":"", + owner: "", + description: "", // "group":[], "data.sources": [ - { - "name": "source", - "connectors": [ - { - "name":"", - "type": "HIVE", - "version": "1.2", - "data.unit":"", - "data.time.zone":"", - "config":{ - "database":'', - "table.name":'', - "where":'' - }, - "predicates":[ - { - "type":"file.exist", - "config":{ - "root.path":"hdfs:///griffin/demo_src", - "path":"" - } - } - ] - } - ] - }, { - "name": "target", - "connectors": [ - { - "name":"", - "type": "HIVE", - "version": "1.2", - "data.unit":"", - "data.time.zone":"", - "config":{ - "database":'', - "table.name":'', - "where":'' - }, - "predicates":[ - { - "type":"file.exist", - "config":{ - "root.path":"hdfs:///griffin/demo_src", - "path":"" + { + name: "source", + connectors: [ + { + name: "", + type: "HIVE", + version: "1.2", + "data.unit": "", + "data.time.zone": "", + config: { + database: "", + "table.name": "", + where: "" + }, + predicates: [ + { + type: "file.exist", + config: { + "root.path": "hdfs:///griffin/demo_src", + path: "" + } } - } - ] - } - ] - } - ], - - "evaluate.rule":{ - "rules": [ + ] + } + ] + }, + { + name: "target", + connectors: [ { - "dsl.type": "griffin-dsl", - "dq.type": "accuracy", - "name": "accuracy", - "rule": "" - // "details": { - // "source": "source", - // "target": "target", - // "miss.records": { - // "name": "miss.records", - // "persist.type": "record" - // }, - // "accuracy": { - // "name": "accu", - // "persist.type": "metric" - // }, - // "miss": "miss", - // "total": "total", - // "matched": "matched" - // } + name: "", + type: "HIVE", + version: "1.2", + "data.unit": "", + "data.time.zone": "", + config: { + database: "", + "table.name": "", + where: "" + }, + predicates: [ + { + type: "file.exist", + config: { + "root.path": "hdfs:///griffin/demo_src", + path: "" + } + } + ] } ] + } + ], + + "evaluate.rule": { + rules: [ + { + "dsl.type": "griffin-dsl", + "dq.type": "accuracy", + name: "accuracy", + rule: "" + // "details": { + // "source": "source", + // "target": "target", + // "miss.records": { + // "name": "miss.records", + // "persist.type": "record" + // }, + // "accuracy": { + // "name": "accu", + // "persist.type": "metric" + // }, + // "miss": "miss", + // "total": "total", + // "matched": "matched" + // } + } + ] } }; - name:''; + name: ""; // evaluate.rule:any; // desc:''; // grp:''; - owner = 'test'; - createResult :any; + owner = "test"; + createResult: any; private toasterService: ToasterService; public visible = false; @@ -236,92 +232,93 @@ export class AcComponent implements OnInit , AfterViewChecked { public hide(): void { this.visibleAnimate = false; - setTimeout(() => this.visible = false, 300); + setTimeout(() => (this.visible = false), 300); } public onContainerClicked(event: MouseEvent): void { - if ((<HTMLElement>event.target).classList.contains('modal')) { + if ((<HTMLElement>event.target).classList.contains("modal")) { this.hide(); } } - addMapping(x,i){ + addMapping(x, i) { this.mappings[i] = x; } - toggleSelection (row) { + toggleSelection(row) { row.selected = !row.selected; var idx = this.selection.indexOf(row.name); // is currently selected if (idx > -1) { this.selection.splice(idx, 1); this.selectedAll = false; - } - // is newly selected - else { + } else { + // is newly selected this.selection.push(row.name); } - if(this.selection.length == 3){ + if (this.selection.length == 3) { this.selectedAll = true; - }else{ + } else { this.selectedAll = false; } - }; + } - toggleSelectionTarget (row) { + toggleSelectionTarget(row) { row.selected = !row.selected; var idx = this.selectionTarget.indexOf(row.name); // is currently selected if (idx > -1) { this.selectionTarget.splice(idx, 1); this.selectedAllTarget = false; - } - // is newly selected - else { + } else { + // is newly selected this.selectionTarget.push(row.name); } - if(this.selectionTarget.length == 3){ + if (this.selectionTarget.length == 3) { this.selectedAllTarget = true; - }else{ + } else { this.selectedAllTarget = false; } let l = this.selectionTarget.length; - for(let i =0;i<l;i++){ + for (let i = 0; i < l; i++) { this.matches[i] = "="; // this.mappings[i] = this.currentDB + '.' + this.currentTable + '.' + row.name; } + } - }; - - toggleAll () { + toggleAll() { this.selectedAll = !this.selectedAll; this.selection = []; - for(var i =0; i < this.schemaCollection.length; i ++){ + for (var i = 0; i < this.schemaCollection.length; i++) { this.schemaCollection[i].selected = this.selectedAll; if (this.selectedAll) { this.selection.push(this.schemaCollection[i].name); this.matches[i] = "="; } } - }; + } - toggleAllTarget () { + toggleAllTarget() { this.selectedAllTarget = !this.selectedAllTarget; this.selectionTarget = []; - for(var i =0; i < this.schemaCollectionTarget.length; i ++){ + for (var i = 0; i < this.schemaCollectionTarget.length; i++) { this.schemaCollectionTarget[i].selected = this.selectedAllTarget; if (this.selectedAllTarget) { this.selectionTarget.push(this.schemaCollectionTarget[i].name); } } - }; + } - next (form) { - if(this.formValidation(this.currentStep)){ + next(form) { + if (this.formValidation(this.currentStep)) { this.currentStep++; - }else{ - this.toasterService.pop('error','Error!','Please select at least one attribute!'); - return false; + } else { + this.toasterService.pop( + "error", + "Error!", + "Please select at least one attribute!" + ); + return false; } } @@ -332,197 +329,210 @@ export class AcComponent implements OnInit , AfterViewChecked { if (step == 1) { return this.selection && this.selection.length > 0; } else if (step == 2) { - return (this.selectionTarget && this.selectionTarget.length > 0)//at least one target is selected + return this.selectionTarget && this.selectionTarget.length > 0; //at least one target is selected // && !((this.currentTable.name == this.currentTableTarget.name)&&(this.currentDB.name == this.currentDBTarget.name));//target and source should be different } else if (step == 3) { - return this.selectionTarget && this.selectionTarget.length == this.mappings.length - && this.mappings.indexOf('') == -1 + return ( + this.selectionTarget && + this.selectionTarget.length == this.mappings.length && + this.mappings.indexOf("") == -1 + ); } else if (step == 4) { return true; - } else if(step == 5){ - + } else if (step == 5) { } return false; - } + }; - prev (form) { + prev(form) { this.currentStep--; } - goTo (i) { + goTo(i) { this.currentStep = i; } - submit (form) { - // form.$setPristine(); - // this.finalgrp = []; - if (!form.valid) { - this.toasterService.pop('error', 'Error!', 'please complete the form in this step before proceeding'); - return false; - } - // for(let i=0;i<this.grp.length;i++){ - // this.finalgrp.push(this.grp[i].value); - // } - // this.showgrp = this.finalgrp.join(","); - var rule = ''; - this.newMeasure = { - "name":this.name, - "measure.type":"griffin", - "dq.type": "accuracy", - "process.type": "batch", - "owner":this.owner, - "description":this.desc, - // "group":this.finalgrp, - "data.sources": [ - { - "name": "source", - "connectors": [ - { - "name":this.src_name, - "type": "HIVE", - "version": "1.2", - "data.unit":this.src_size, - "data.time.zone":this.src_timezone, - "config":{ - "database":this.currentDB, - "table.name":this.currentTable, - "where":this.src_where - }, - "predicates":[ - { - "type":"file.exist", - "config":{ - "root.path":"hdfs:///griffin/demo_src", - "path":this.src_path - } - } - ] - } - ] - }, { - "name": "target", - "connectors": [ - { - "name":this.tgt_name, - "type": "HIVE", - "version": "1.2", - "data.unit":this.tgt_size, - "data.time.zone":this.tgt_timezone, - "config":{ - "database":this.currentDBTarget, - "table.name":this.currentTableTarget, - "where":this.tgt_where - }, - "predicates":[ - { - "type":"file.exist", - "config":{ - "root.path":"hdfs:///griffin/demo_src", - "path":this.tgt_path - } + submit(form) { + // form.$setPristine(); + // this.finalgrp = []; + if (!form.valid) { + this.toasterService.pop( + "error", + "Error!", + "please complete the form in this step before proceeding" + ); + return false; + } + // for(let i=0;i<this.grp.length;i++){ + // this.finalgrp.push(this.grp[i].value); + // } + // this.showgrp = this.finalgrp.join(","); + var rule = ""; + this.newMeasure = { + name: this.name, + "measure.type": "griffin", + "dq.type": "accuracy", + "process.type": "batch", + owner: this.owner, + description: this.desc, + // "group":this.finalgrp, + "data.sources": [ + { + name: "source", + connectors: [ + { + name: this.src_name, + type: "HIVE", + version: "1.2", + "data.unit": this.src_size, + "data.time.zone": this.src_timezone, + config: { + database: this.currentDB, + "table.name": this.currentTable, + where: this.src_where + }, + predicates: [ + { + type: "file.exist", + config: { + "root.path": "hdfs:///griffin/demo_src", + path: this.src_path } - ] - } - ] - } - ], - "evaluate.rule":{ - "rules": [ + } + ] + } + ] + }, + { + name: "target", + connectors: [ { - "dsl.type": "griffin-dsl", - "dq.type": "accuracy", - "name": "accuracy", - "rule": "" - // "details": { - // "source": "source", - // "target": "target", - // "miss.records": { - // "name": "miss.records", - // "persist.type": "record" - // }, - // "accuracy": { - // "name": "accu", - // "persist.type": "metric" - // }, - // "miss": "miss", - // "total": "total", - // "matched": "matched" - // } + name: this.tgt_name, + type: "HIVE", + version: "1.2", + "data.unit": this.tgt_size, + "data.time.zone": this.tgt_timezone, + config: { + database: this.currentDBTarget, + "table.name": this.currentTableTarget, + where: this.tgt_where + }, + predicates: [ + { + type: "file.exist", + config: { + "root.path": "hdfs:///griffin/demo_src", + path: this.tgt_path + } + } + ] } ] } - }; - if(this.src_size.indexOf('0')==0){ - delete this.newMeasure['data.sources'][0]['connectors'][0]['data.unit']; - } - if(this.tgt_size.indexOf('0')==0){ - delete this.newMeasure['data.sources'][1]['connectors'][0]['data.unit']; - } - if(this.src_path==''){ - delete this.newMeasure['data.sources'][0]['connectors'][0]['predicates']; - } - if(this.tgt_path==''){ - delete this.newMeasure['data.sources'][1]['connectors'][0]['predicates']; - } - var mappingRule = function(src, tgt, matches) { - var rules; - rules = 'source.' + src + matches + 'target.' + tgt - return rules; + ], + "evaluate.rule": { + rules: [ + { + "dsl.type": "griffin-dsl", + "dq.type": "accuracy", + name: "accuracy", + rule: "" + // "details": { + // "source": "source", + // "target": "target", + // "miss.records": { + // "name": "miss.records", + // "persist.type": "record" + // }, + // "accuracy": { + // "name": "accu", + // "persist.type": "metric" + // }, + // "miss": "miss", + // "total": "total", + // "matched": "matched" + // } + } + ] } - var self = this; - var rules = this.mappings.map(function(item, i) { - return mappingRule(item,self.selectionTarget[i], self.matches[i]); - }); - rule = rules.join(" AND "); - this.rules = rule; - this.newMeasure['evaluate.rule'].rules[0].rule = rule; - console.log(this.newMeasure); - this.visible = true; - setTimeout(() => this.visibleAnimate = true, 100); + }; + if (this.src_size.indexOf("0") == 0) { + this.deleteUnit(0); + } + if (this.tgt_size.indexOf("0") == 0) { + this.deleteUnit(1); + } + if (this.src_path == "") { + this.deletePredicates(0); + } + if (this.tgt_path == "") { + this.deletePredicates(1); + } + var mappingRule = function(src, tgt, matches) { + var rules; + rules = "source." + src + matches + "target." + tgt; + return rules; + }; + var self = this; + var rules = this.mappings.map(function(item, i) { + return mappingRule(item, self.selectionTarget[i], self.matches[i]); + }); + rule = rules.join(" AND "); + this.rules = rule; + this.newMeasure["evaluate.rule"].rules[0].rule = rule; + this.visible = true; + setTimeout(() => (this.visibleAnimate = true), 100); + } + + deleteUnit(index){ + delete this.newMeasure["data.sources"][index]["connectors"][0]["data.unit"]; + } + + deletePredicates(index){ + delete this.newMeasure["data.sources"][index]["connectors"][0]["predicates"]; } save() { var addModels = this.serviceService.config.uri.addModels; - this.http - .post(addModels, this.newMeasure) - .subscribe(data => { + this.http.post(addModels, this.newMeasure).subscribe( + data => { this.createResult = data; this.hide(); - this.router.navigate(['/measures']); - // var self = this; - // setTimeout(function () { - // self.hide(); - // self.router.navigate(['/measures']); - // },0) - }, - err => { - console.log('Something went wrong!'); - }); + this.router.navigate(["/measures"]); + }, + err => { + let response = JSON.parse(err.error); + if(response.code === '40901'){ + this.toasterService.pop("error", "Error!", "Measure name already exists!"); + } else { + this.toasterService.pop("error", "Error!", "Error when creating measure"); + } + console.log("Error when creating measure"); + } + ); } options: ITreeOptions = { - displayField: 'name', - isExpandedField: 'expanded', - idField: 'id', + displayField: "name", + isExpandedField: "expanded", + idField: "id", actionMapping: { mouse: { click: (tree, node, $event) => { if (node.hasChildren) { this.currentDB = node.data.name; - this.currentDBstr = this.currentDB + '.'; - this.currentTable = ''; + this.currentDBstr = this.currentDB + "."; + this.currentTable = ""; this.selectedAll = false; this.schemaCollection = []; TREE_ACTIONS.TOGGLE_EXPANDED(tree, node, $event); - } - else if(node.data.cols) - { + } else if (node.data.cols) { this.currentTable = node.data.name; this.currentDB = node.data.parent; this.schemaCollection = node.data.cols; this.src_location = node.data.location; - this.src_name = 'source' + new Date().getTime(); + this.src_name = "source" + new Date().getTime(); this.selectedAll = false; this.selection = []; - for(let row of this.schemaCollection){ + for (let row of this.schemaCollection) { row.selected = false; } } @@ -535,31 +545,29 @@ export class AcComponent implements OnInit , AfterViewChecked { }; targetOptions: ITreeOptions = { - displayField: 'name', - isExpandedField: 'expanded', - idField: 'id', + displayField: "name", + isExpandedField: "expanded", + idField: "id", actionMapping: { mouse: { click: (tree, node, $event) => { if (node.hasChildren) { this.currentDBTarget = node.data.name; - this.currentDBTargetStr = this.currentDBTarget + '.'; - this.currentTableTarget = ''; + this.currentDBTargetStr = this.currentDBTarget + "."; + this.currentTableTarget = ""; this.selectedAllTarget = false; this.selectionTarget = []; this.schemaCollectionTarget = []; TREE_ACTIONS.TOGGLE_EXPANDED(tree, node, $event); - } - else if(node.data.cols) - { + } else if (node.data.cols) { this.currentTableTarget = node.data.name; this.currentDBTarget = node.data.parent; this.schemaCollectionTarget = node.data.cols; this.tgt_location = node.data.location; - this.tgt_name = 'target' + new Date().getTime(); + this.tgt_name = "target" + new Date().getTime(); this.selectedAllTarget = false; this.selectionTarget = []; - for(let row of this.schemaCollectionTarget){ + for (let row of this.schemaCollectionTarget) { row.selected = false; } } @@ -571,31 +579,36 @@ export class AcComponent implements OnInit , AfterViewChecked { animateAcceleration: 1.2 }; - nodeList:object[]; - nodeListTarget:object[]; - constructor(toasterService: ToasterService,private http: HttpClient,private router:Router,public serviceService:ServiceService) { + nodeList: object[]; + nodeListTarget: object[]; + constructor( + toasterService: ToasterService, + private http: HttpClient, + private router: Router, + public serviceService: ServiceService + ) { this.toasterService = toasterService; - }; + } - onResize(event){ + onResize(event) { this.resizeWindow(); } - srcAttr(evt){ + srcAttr(evt) { this.srcdata = evt; this.currentDB = evt.database; this.currentTable = evt.table; this.selection = evt.selection; } - tgtAttr(evt){ + tgtAttr(evt) { this.tgtdata = evt; this.currentDBTarget = evt.database; this.currentTableTarget = evt.table; this.selectionTarget = evt.selection; } - getSrc(evt){ + getSrc(evt) { this.srcconfig = evt; this.src_timezone = evt.timezone; this.src_where = evt.where; @@ -603,7 +616,7 @@ export class AcComponent implements OnInit , AfterViewChecked { this.src_path = evt.path; } - getTgt(evt){ + getTgt(evt) { this.tgtconfig = evt; this.tgt_timezone = evt.timezone; this.tgt_where = evt.where; @@ -611,22 +624,26 @@ export class AcComponent implements OnInit , AfterViewChecked { this.tgt_path = evt.path; } - - resizeWindow(){ - var stepSelection = '.formStep[id=step-' + this.currentStep + ']'; + resizeWindow() { + var stepSelection = ".formStep[id=step-" + this.currentStep + "]"; $(stepSelection).css({ height: window.innerHeight - $(stepSelection).offset().top }); - $('fieldset').height($(stepSelection).height() - $(stepSelection + '>.stepDesc').height() - $('.btn-container').height() - 130); - $('.y-scrollable').css({ - // 'max-height': $('fieldset').height()- $('.add-dataset').outerHeight() - 'height': $('fieldset').height() + $("fieldset").height( + $(stepSelection).height() - + $(stepSelection + ">.stepDesc").height() - + $(".btn-container").height() - + 130 + ); + $(".y-scrollable").css({ + // 'max-height': $('fieldset').height()- $('.add-dataset').outerHeight() + height: $("fieldset").height() }); } ngOnInit() { var allDataassets = this.serviceService.config.uri.dataassetlist; - this.http.get(allDataassets).subscribe(data =>{ + this.http.get(allDataassets).subscribe(data => { this.nodeList = new Array(); let i = 1; this.data = data; @@ -637,30 +654,33 @@ export class AcComponent implements OnInit , AfterViewChecked { new_node.isExpanded = true; i++; new_node.children = new Array(); - for(let i = 0;i<this.data[db].length;i++){ + for (let i = 0; i < this.data[db].length; i++) { let new_child = new node(); - new_child.name = this.data[db][i]['tableName']; + new_child.name = this.data[db][i]["tableName"]; new_node.children.push(new_child); new_child.isExpanded = false; - new_child.location = this.data[db][i]['sd']['location']; + new_child.location = this.data[db][i]["sd"]["location"]; new_child.parent = db; new_child.cols = Array<Col>(); - for(let j = 0;j<this.data[db][i]['sd']['cols'].length;j++){ - let new_col = new Col(this.data[db][i]['sd']['cols'][j].name, - this.data[db][i]['sd']['cols'][j].type, - this.data[db][i]['sd']['cols'][j].comment,false); - new_child.cols.push(new_col); + for (let j = 0; j < this.data[db][i]["sd"]["cols"].length; j++) { + let new_col = new Col( + this.data[db][i]["sd"]["cols"][j].name, + this.data[db][i]["sd"]["cols"][j].type, + this.data[db][i]["sd"]["cols"][j].comment, + false + ); + new_child.cols.push(new_col); } } this.nodeList.push(new_node); - } - this.nodeListTarget = JSON.parse(JSON.stringify(this.nodeList)); + } + this.nodeListTarget = JSON.parse(JSON.stringify(this.nodeList)); }); - this.src_size = '1day'; - this.tgt_size = '1day'; - }; + this.src_size = "1day"; + this.tgt_size = "1day"; + } - ngAfterViewChecked(){ + ngAfterViewChecked() { this.resizeWindow(); } -} +} \ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/e7034710/ui/angular/src/app/measure/create-measure/configuration/configuration.component.css ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/measure/create-measure/configuration/configuration.component.css b/ui/angular/src/app/measure/create-measure/configuration/configuration.component.css index 7ce6451..e884cdd 100644 --- a/ui/angular/src/app/measure/create-measure/configuration/configuration.component.css +++ b/ui/angular/src/app/measure/create-measure/configuration/configuration.component.css @@ -16,11 +16,3 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ - -.scrollable{ - max-height: 300px; - overflow: auto; - } - .scrollable select{ - border: none; - } \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/e7034710/ui/angular/src/app/measure/create-measure/configuration/configuration.component.html ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/measure/create-measure/configuration/configuration.component.html b/ui/angular/src/app/measure/create-measure/configuration/configuration.component.html index a881ee8..ae2a1e3 100644 --- a/ui/angular/src/app/measure/create-measure/configuration/configuration.component.html +++ b/ui/angular/src/app/measure/create-measure/configuration/configuration.component.html @@ -16,7 +16,6 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> - <div class="col-md-12 col-lg-12 col-sm-12" style="margin-top:20px;"> <div class="form-group"> <label class="col-md-2 col-lg-2 col-sm-2 control-label"> @@ -48,8 +47,7 @@ under the License. Time Zone: </label> <div class="col-md-10 col-lg-10 col-sm-10 scrollable"> - <select id="timezone" class="form-control" name="zone" [(ngModel)]="timezone" required - (change)="upward()"> + <select id="timezone" class="form-control" name="zone" [(ngModel)]="timezone" required (change)="upward()"> <option *ngFor="let item of timezones;let i = index" [value]="item">{{item}}</option> </select> </div> @@ -59,16 +57,15 @@ under the License. <div class="form-group"> <input style="margin-left:15px" type="checkbox" [checked]="needpath" (change)="needpath=!needpath;upward()"> <label> - has Done file + has Done file </label> </div> </div> -<div class="form-group" *ngIf="needpath"> +<div class="form-group" *ngIf="needpath"> <div style="margin-left:45px;font-weight: bold;"> please write the Done file path relative to {{location}} </div> <div style="margin-left:45px"> - <input type="text" class="form-control" id="path" [(ngModel)]="path" name="filepath" (change)="upward()" placeholder="/dt=#YYYYMMdd#/hour=#HH#/_DONE"> - </div> + <input type="text" class="form-control" id="path" [(ngModel)]="path" name="filepath" (change)="upward()" placeholder="/dt=#YYYYMMdd#/hour=#HH#/_DONE"> + </div> </div> - http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/e7034710/ui/angular/src/app/measure/create-measure/configuration/configuration.component.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/measure/create-measure/configuration/configuration.component.ts b/ui/angular/src/app/measure/create-measure/configuration/configuration.component.ts index 841b6aa..5d0fac4 100644 --- a/ui/angular/src/app/measure/create-measure/configuration/configuration.component.ts +++ b/ui/angular/src/app/measure/create-measure/configuration/configuration.component.ts @@ -17,70 +17,104 @@ specific language governing permissions and limitations under the License. */ -import { Component, OnInit, EventEmitter, Input, Output } from '@angular/core'; -import * as $ from 'jquery'; +import { Component, OnInit, EventEmitter, Input, Output } from "@angular/core"; +import * as $ from "jquery"; @Component({ - selector: 'app-configuration', - templateUrl: './configuration.component.html', - styleUrls: ['./configuration.component.css'] + selector: "app-configuration", + templateUrl: "./configuration.component.html", + styleUrls: ["./configuration.component.css"] }) export class ConfigurationComponent implements OnInit { @Output() event = new EventEmitter(); - @Input() data = { - "where":'', - "timezone":'', - "num":1, - "timetype":'day', - "needpath":false, - "path":'' + @Input() + data = { + where: "", + timezone: "", + num: 1, + timetype: "day", + needpath: false, + path: "" }; - @Input() location:string; + @Input() location: string; - constructor() { } - num:number; - path:string; - where:string; - needpath:boolean; + constructor() {} + num: number; + path: string; + where: string; + needpath: boolean; selectedType: string; configuration = { - "where":'', - "timezone":'', - "num":1, - "timetype":'day', - "needpath":false, - "path":'' - } - timetypes = ["day","hour","minute"]; - timetype :string; - timezones = ["UTC-12(IDL)","UTC-11(MIT)","UTC-10(HST)","UTC-9:30(MSIT)","UTC-9(AKST)","UTC-8(PST)", - "UTC-7(MST)","UTC-6(CST)","UTC-5(EST)","UTC-4(AST)","UTC-3:30(NST)","UTC-3(SAT)", - "UTC-2(BRT)","UTC-1(CVT)","UTC(WET,GMT)","UTC+1(CET)","UTC+2(EET)","UTC+3(MSK)", - "UTC+3:30(IRT)","UTC+4(META)","UTC+4:30(AFT)","UTC+5(METB)","UTC+5:30(IDT)","UTC+5:45(NPT)", - "UTC+6(BHT)","UTC+6:30(MRT)","UTC+7(IST)","UTC+8(EAT)","UTC+8:30(KRT)","UTC+9(FET)", - "UTC+9:30(ACST)","UTC+10(AEST)","UTC+10:30(FAST)","UTC+11(VTT)","UTC+11:30(NFT)","UTC+12(PSTB)", - "UTC+12:45(CIT)","UTC+13(PSTC)","UTC+14(PSTD)"]; + where: "", + timezone: "", + num: 1, + timetype: "day", + needpath: false, + path: "" + }; + timetypes = ["day", "hour", "minute"]; + timetype: string; + timezones = [ + "UTC-12(IDL)", + "UTC-11(MIT)", + "UTC-10(HST)", + "UTC-9:30(MSIT)", + "UTC-9(AKST)", + "UTC-8(PST)", + "UTC-7(MST)", + "UTC-6(CST)", + "UTC-5(EST)", + "UTC-4(AST)", + "UTC-3:30(NST)", + "UTC-3(SAT)", + "UTC-2(BRT)", + "UTC-1(CVT)", + "UTC(WET,GMT)", + "UTC+1(CET)", + "UTC+2(EET)", + "UTC+3(MSK)", + "UTC+3:30(IRT)", + "UTC+4(META)", + "UTC+4:30(AFT)", + "UTC+5(METB)", + "UTC+5:30(IDT)", + "UTC+5:45(NPT)", + "UTC+6(BHT)", + "UTC+6:30(MRT)", + "UTC+7(IST)", + "UTC+8(EAT)", + "UTC+8:30(KRT)", + "UTC+9(FET)", + "UTC+9:30(ACST)", + "UTC+10(AEST)", + "UTC+10:30(FAST)", + "UTC+11(VTT)", + "UTC+11:30(NFT)", + "UTC+12(PSTB)", + "UTC+12:45(CIT)", + "UTC+13(PSTC)", + "UTC+14(PSTD)" + ]; timezone: string; - upward(){ + upward() { this.configuration = { - "where":this.where, - "timezone":this.timezone, - "num":this.num, - "timetype":this.timetype, - "needpath":this.needpath, - "path":this.path - } + where: this.where, + timezone: this.timezone, + num: this.num, + timetype: this.timetype, + needpath: this.needpath, + path: this.path + }; this.event.emit(this.configuration); } ngOnInit() { this.where = this.data.where; - this.timezone = this.data.timezone + this.timezone = this.data.timezone; this.num = this.data.num; this.timetype = this.data.timetype; this.needpath = this.data.needpath; this.path = this.data.path; } - -} +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/e7034710/ui/angular/src/app/measure/create-measure/create-measure.component.css ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/measure/create-measure/create-measure.component.css b/ui/angular/src/app/measure/create-measure/create-measure.component.css index 4e3c6f7..af70368 100644 --- a/ui/angular/src/app/measure/create-measure/create-measure.component.css +++ b/ui/angular/src/app/measure/create-measure/create-measure.component.css @@ -16,108 +16,109 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ + @import url('../../../../node_modules/angular2-toaster/toaster.css'); @import url('../measure.component.css'); div.tree div.tree-children::before, div.tree::before { - content: ""; - position: absolute; - border-left: 1px dotted #23527c; - height: 100%; - top: -14px; - left: 12px + content: ""; + position: absolute; + border-left: 1px dotted #23527c; + height: 100%; + top: -14px; + left: 12px } div.tree { - padding-left: 0; - margin-left: -5px + padding-left: 0; + margin-left: -5px } div.tree div.tree-children { - position: relative; - padding-left: 0; - margin-left: 16px + position: relative; + padding-left: 0; + margin-left: 16px } div.tree div.tree-children::before { - left: 5px + left: 5px } div.tree treenode>div>.node-wrapper { - margin-left: 24px + margin-left: 24px } div.tree treenode>div>.node-wrapper>.node-content-wrapper { - margin-left: 4px + margin-left: 4px } div.tree treenode>div.tree-node-leaf>.node-wrapper { - margin-left: 0 + margin-left: 0 } div.tree treenode>div::before { - content: ""; - position: absolute; - border-bottom: 1px dotted #23527c; - width: 7px; - margin-top: 12px; - left: 7px + content: ""; + position: absolute; + border-bottom: 1px dotted #23527c; + width: 7px; + margin-top: 12px; + left: 7px } div.tree treenode>div .toggle-children-wrapper { - width: 13px; - height: 13px; - border: 1px solid #23527c; - position: absolute; - left: 15px; - margin-top: 5px; - margin-left: 0; - display: inline-block; - background-color: #fff; - z-index: 1 + width: 13px; + height: 13px; + border: 1px solid #23527c; + position: absolute; + left: 15px; + margin-top: 5px; + margin-left: 0; + display: inline-block; + background-color: #fff; + z-index: 1 } div.tree treenode>div .toggle-children-wrapper::before { - content: ""; - display: inline-block; - width: 7px; - border-top: 1px solid #23527c; - position: absolute; - top: 5px; - left: 2px + content: ""; + display: inline-block; + width: 7px; + border-top: 1px solid #23527c; + position: absolute; + top: 5px; + left: 2px } div.tree treenode>div .toggle-children-wrapper.toggle-children-wrapper-collapsed::after { - content: ""; - display: inline-block; - height: 7px; - border-left: 1px solid #23527c; - position: absolute; - top: 2px; - left: 5px + content: ""; + display: inline-block; + height: 7px; + border-left: 1px solid #23527c; + position: absolute; + top: 2px; + left: 5px } div.tree treenode>div .toggle-children-wrapper .toggle-children { - display: none + display: none } div.tree treenode>div .node-content-wrapper { - margin-left: 4px + margin-left: 4px } div.tree>treenode>div::before { - left: 14px + left: 14px } div.tree>treenode>div>.node-wrapper>treenodeexpander>.toggle-children-wrapper { - left: 22px + left: 22px } -.panel{ - background-color: #222222; +.panel { + background-color: #222222; } -.panel-footer{ - background-color: #3c3c3c; -} \ No newline at end of file +.panel-footer { + background-color: #3c3c3c; +} http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/e7034710/ui/angular/src/app/measure/create-measure/create-measure.component.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/measure/create-measure/create-measure.component.ts b/ui/angular/src/app/measure/create-measure/create-measure.component.ts index bbfb830..f2a60c0 100644 --- a/ui/angular/src/app/measure/create-measure/create-measure.component.ts +++ b/ui/angular/src/app/measure/create-measure/create-measure.component.ts @@ -16,33 +16,40 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -import { Component, OnInit, AfterViewInit } from '@angular/core'; -import { FormControl} from '@angular/forms'; -import { FormsModule } from '@angular/forms'; +import { Component, OnInit, AfterViewInit } from "@angular/core"; +import { FormControl } from "@angular/forms"; +import { FormsModule } from "@angular/forms"; -import { TREE_ACTIONS, KEYS, IActionMapping, ITreeOptions } from 'angular-tree-component'; -import { BrowserAnimationsModule} from '@angular/platform-browser/animations'; -import { ToasterModule, ToasterService, ToasterConfig} from 'angular2-toaster'; -import * as $ from 'jquery'; -import { HttpClient} from '@angular/common/http'; -import { Router} from "@angular/router"; +import { TREE_ACTIONS, KEYS, IActionMapping, ITreeOptions } from "angular-tree-component"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { ToasterModule, ToasterService, ToasterConfig } from "angular2-toaster"; +import * as $ from "jquery"; +import { HttpClient } from "@angular/common/http"; +import { Router } from "@angular/router"; @Component({ - selector: 'app-create-measure', - templateUrl: './create-measure.component.html', - styleUrls: ['./create-measure.component.css'] + selector: "app-create-measure", + templateUrl: "./create-measure.component.html", + styleUrls: ["./create-measure.component.css"] }) export class CreateMeasureComponent implements AfterViewInit { + constructor(private router: Router) {} - constructor(private router:Router) { } - - click(type){ - this.router.navigate(['/createmeasure'+type]); + click(type) { + this.router.navigate(["/createmeasure" + type]); } - ngAfterViewInit(){ - $('#panel-2 >.panel-body').css({height: $('#panel-1 >.panel-body').outerHeight() + $('#panel-1 >.panel-footer').outerHeight() - $('#panel-2 >.panel-footer').outerHeight()}); - $('#panel-4 >.panel-body').css({height: $('#panel-3 >.panel-body').outerHeight() + $('#panel-3 >.panel-footer').outerHeight() - $('#panel-4 >.panel-footer').outerHeight()}); + ngAfterViewInit() { + $("#panel-2 >.panel-body").css({ + height: + $("#panel-1 >.panel-body").outerHeight() + + $("#panel-1 >.panel-footer").outerHeight() - + $("#panel-2 >.panel-footer").outerHeight() + }); + $("#panel-4 >.panel-body").css({ + height: + $("#panel-3 >.panel-body").outerHeight() + + $("#panel-3 >.panel-footer").outerHeight() - + $("#panel-4 >.panel-footer").outerHeight() + }); } -} - - +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/e7034710/ui/angular/src/app/measure/create-measure/pr/pr.component.css ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/measure/create-measure/pr/pr.component.css b/ui/angular/src/app/measure/create-measure/pr/pr.component.css index f4a62c4..512868c 100644 --- a/ui/angular/src/app/measure/create-measure/pr/pr.component.css +++ b/ui/angular/src/app/measure/create-measure/pr/pr.component.css @@ -16,154 +16,150 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ + @import url('../../../../../node_modules/angular2-toaster/toaster.css'); @import url('../../measure.component.css'); -.selected-list .c-list .c-token{ - background: #6faece; +.selected-list .c-list .c-token { + background: #6faece; } - div.tree div.tree-children::before, div.tree::before { - content: ""; - position: absolute; - border-left: 1px dotted #23527c; - height: 100%; - top: -14px; - left: 12px + content: ""; + position: absolute; + border-left: 1px dotted #23527c; + height: 100%; + top: -14px; + left: 12px } -tree-root{ - color: #999; +tree-root { + color: #999; } div.tree { - padding-left: 0; - margin-left: -5px + padding-left: 0; + margin-left: -5px } div.tree div.tree-children { - position: relative; - padding-left: 0; - margin-left: 16px + position: relative; + padding-left: 0; + margin-left: 16px } div.tree div.tree-children::before { - left: 5px + left: 5px } div.tree treenode>div>.node-wrapper { - margin-left: 24px + margin-left: 24px } div.tree treenode>div>.node-wrapper>.node-content-wrapper { - margin-left: 4px + margin-left: 4px } div.tree treenode>div.tree-node-leaf>.node-wrapper { - margin-left: 0 + margin-left: 0 } div.tree treenode>div::before { - content: ""; - position: absolute; - border-bottom: 1px dotted #23527c; - width: 7px; - margin-top: 12px; - left: 7px + content: ""; + position: absolute; + border-bottom: 1px dotted #23527c; + width: 7px; + margin-top: 12px; + left: 7px } div.tree treenode>div .toggle-children-wrapper { - width: 13px; - height: 13px; - border: 1px solid #23527c; - position: absolute; - left: 15px; - margin-top: 5px; - margin-left: 0; - display: inline-block; - background-color: #fff; - z-index: 1 + width: 13px; + height: 13px; + border: 1px solid #23527c; + position: absolute; + left: 15px; + margin-top: 5px; + margin-left: 0; + display: inline-block; + background-color: #fff; + z-index: 1 } div.tree treenode>div .toggle-children-wrapper::before { - content: ""; - display: inline-block; - width: 7px; - border-top: 1px solid #23527c; - position: absolute; - top: 5px; - left: 2px + content: ""; + display: inline-block; + width: 7px; + border-top: 1px solid #23527c; + position: absolute; + top: 5px; + left: 2px } div.tree treenode>div .toggle-children-wrapper.toggle-children-wrapper-collapsed::after { - content: ""; - display: inline-block; - height: 7px; - border-left: 1px solid #23527c; - position: absolute; - top: 2px; - left: 5px + content: ""; + display: inline-block; + height: 7px; + border-left: 1px solid #23527c; + position: absolute; + top: 2px; + left: 5px } div.tree treenode>div .toggle-children-wrapper .toggle-children { - display: none + display: none } div.tree treenode>div .node-content-wrapper { - margin-left: 4px + margin-left: 4px } div.tree>treenode>div::before { - left: 14px + left: 14px } div.tree>treenode>div>.node-wrapper>treenodeexpander>.toggle-children-wrapper { - left: 22px + left: 22px } -label{ - font-weight: normal; +label { + font-weight: normal; } -.container{ - max-height: 40vh; - overflow-y:scroll; + +.container { + max-height: 40vh; + overflow-y: scroll; } -.badgebox -{ - opacity: 0; +.badgebox { + opacity: 0; } -.badgebox + .badge -{ - /* Move the check mark away when unchecked */ - text-indent: -999999px; - /* Makes the badge's width stay the same checked and unchecked */ - width: 27px; +.badgebox+.badge { + /* Move the check mark away when unchecked */ + text-indent: -999999px; + /* Makes the badge's width stay the same checked and unchecked */ + width: 27px; } -.badgebox:focus + .badge -{ - /* Set something to make the badge looks focused */ - /* This really depends on the application, in my case it was: */ - - /* Adding a light border */ - box-shadow: inset 0px 0px 5px; - /* Taking the difference out of the padding */ +.badgebox:focus+.badge { + /* Set something to make the badge looks focused */ + /* This really depends on the application, in my case it was: */ + /* Adding a light border */ + box-shadow: inset 0px 0px 5px; + /* Taking the difference out of the padding */ } -.badgebox:checked + .badge -{ - /* Move the check mark back when checked */ - text-indent: 0; +.badgebox:checked+.badge { + /* Move the check mark back when checked */ + text-indent: 0; } -.middle{ - vertical-align: middle; +.middle { + vertical-align: middle; } -.no-border{ - border: 1px solid transparent !important; -} \ No newline at end of file +.no-border { + border: 1px solid transparent !important; +} http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/e7034710/ui/angular/src/app/measure/create-measure/pr/pr.component.html ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/measure/create-measure/pr/pr.component.html b/ui/angular/src/app/measure/create-measure/pr/pr.component.html index 4b2fac2..ad955f7 100644 --- a/ui/angular/src/app/measure/create-measure/pr/pr.component.html +++ b/ui/angular/src/app/measure/create-measure/pr/pr.component.html @@ -76,32 +76,32 @@ under the License. <div style="margin-top:10px;"> <label>View schema:</label> <i style="color:#fff;font-weight: bold;">{{currentDBstr}}{{currentTable}} - </i> + </i> </div> <div style="margin-top:5px;"> <table class="table table-striped no-border"> <thead> - <tr style="background-color:#7D95CC"> - <th> - <input type="checkbox" (click)="toggleAll()" [checked]="selectedAll" /> - </th> - <th>Column Name</th> - <th>Type</th> - <th>Comment</th> - </tr> + <tr style="background-color:#7D95CC"> + <th> + <input type="checkbox" (click)="toggleAll()" [checked]="selectedAll" /> + </th> + <th>Column Name</th> + <th>Type</th> + <th>Comment</th> + </tr> </thead> <tbody> - <tr *ngIf="!schemaCollection || schemaCollection.length == 0"> - <td colspan="5" style="text-align:center;"><span class="highlight">Please select a schema from the left tree first</span></td> - </tr> - <tr *ngFor="let row of schemaCollection"> - <td> - <input type="checkbox" (click)='toggleSelection(row)' [checked]="row.selected" value={{row.name}} /> - </td> - <td>{{row.name}}</td> - <td>{{row.type}}</td> - <td>{{row.comment}}</td> - </tr> + <tr *ngIf="!schemaCollection || schemaCollection.length == 0"> + <td colspan="5" style="text-align:center;"><span class="highlight">Please select a schema from the left tree first</span></td> + </tr> + <tr *ngFor="let row of schemaCollection"> + <td> + <input type="checkbox" (click)='toggleSelection(row)' [checked]="row.selected" value={{row.name}} /> + </td> + <td>{{row.name}}</td> + <td>{{row.type}}</td> + <td>{{row.comment}}</td> + </tr> </tbody> </table> </div> @@ -129,20 +129,20 @@ under the License. <div class="col-md-12 col-lg-12 col-sm-12" style="z-index:100;margin-top:5px;"> <table class="table table-striped" [mfData]="results" #mf="mfDataTable"> <thead> - <tr style="background-color:#7D95CC"> - <th>Column Name</th> - <th>Data Type</th> - <th>Rule <i style="color:#b2c831;" class="fa fa-question-circle fa-lg"></i><i style="font-family: 'Open Sans', sans-serif;">Click <a (click)="showRule()" class="bark-link po">here</a> to view the rule definition</i></th> - </tr> + <tr style="background-color:#7D95CC"> + <th>Column Name</th> + <th>Data Type</th> + <th>Rule <i style="color:#b2c831;" class="fa fa-question-circle fa-lg"></i><i style="font-family: 'Open Sans', sans-serif;">Click <a (click)="showRule()" class="bark-link po">here</a> to view the rule definition</i></th> + </tr> </thead> <tbody> - <tr *ngFor="let item of selection"> - <td class="middle">{{item.name}}</td> - <td class="middle">{{item.type}}</td> - <td class="col-md-5 middle"> - <angular2-multiselect [data]="dropdownList[item.name]" name="rules-{{item.name}}" [(ngModel)]="selectedItems[item.name]" [settings]="dropdownSettings"></angular2-multiselect> - </td> - </tr> + <tr *ngFor="let item of selection"> + <td class="middle">{{item.name}}</td> + <td class="middle">{{item.type}}</td> + <td class="col-md-5 middle"> + <angular2-multiselect [data]="dropdownList[item.name]" name="rules-{{item.name}}" [(ngModel)]="selectedItems[item.name]" [settings]="dropdownSettings"></angular2-multiselect> + </td> + </tr> </tbody> </table> </div> @@ -343,14 +343,6 @@ under the License. {{type}} </div> </div> - <!-- <div class="row"> - <label for="systemSelector" class="col-md-4 col-lg-4 col-sm-4"> - Group: - </label> - <div class="col-md-8 col-lg-8 col-sm-8 "> - {{showgrp}} - </div> - </div> --> <div class="row"> <label class="col-md-4 col-lg-4 col-sm-4"> DataSource: @@ -403,26 +395,9 @@ under the License. </div> </div> <h5 class="row">Rules</h5> - <!-- <div *ngIf="selectedItems"> - <div class="row" *ngFor="let key of objectKeys(selectedItems)"> - {{key}}: - <div style="display:inline-block" *ngFor="let index of objectKeys(selectedItems[key])" > - {{selectedItems[key][index].itemName}} , - </div> - </div> - </div> --> <div class="row" *ngFor="let index of noderule;"> {{index.name}} : {{index.infos}} </div> - <!-- <div class="row" *ngFor="let index of transrule;"> - {{index}} - </div> - <div class="row" *ngFor="let index of transnullrule;"> - {{index}} - </div> - <div class="row" *ngFor="let index of transenumrule;"> - {{index}} - </div> --> <br/> </div> </div>
