http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/6a309cd0/ui/angular/src/app/measure/create-measure/pr/pr.component.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/measure/create-measure/pr/pr.component.ts b/ui/angular/src/app/measure/create-measure/pr/pr.component.ts index 4e80080..98d1c86 100644 --- a/ui/angular/src/app/measure/create-measure/pr/pr.component.ts +++ b/ui/angular/src/app/measure/create-measure/pr/pr.component.ts @@ -26,6 +26,10 @@ import { ToasterModule, ToasterService,ToasterContainerComponent} from 'angular2 import * as $ from 'jquery'; import { HttpClient} from '@angular/common/http'; import { Router} from "@angular/router"; +import {DataTableModule} from "angular2-datatable"; +import { AfterViewInit, ElementRef} from '@angular/core'; +import { AngularMultiSelectModule } from 'angular2-multiselect-dropdown/angular2-multiselect-dropdown'; + class node { @@ -39,38 +43,38 @@ class node { class Rule{ type:string; - conditionGroup = [ - { - 'type':'where', - 'content':'', - 'chosen':false, - 'avaliable':true - }, - { - 'type':'groupby', - 'content':'', - 'chosen':false, - 'avaliable':true - }, - { - 'type':'having', - 'content':'', - 'chosen':false, - 'avaliable':false - }, - { - 'type':'orderby', - 'content':'', - 'chosen':false, - 'avaliable':true - }, - { - 'type':'limit', - 'content':'', - 'chosen':false, - 'avaliable':true - } - ]; + // conditionGroup = [ + // { + // 'type':'where', + // 'content':'', + // 'chosen':false, + // 'avaliable':true + // }, + // { + // 'type':'groupby', + // 'content':'', + // 'chosen':false, + // 'avaliable':true + // }, + // { + // 'type':'having', + // 'content':'', + // 'chosen':false, + // 'avaliable':false + // }, + // { + // 'type':'orderby', + // 'content':'', + // 'chosen':false, + // 'avaliable':true + // }, + // { + // 'type':'limit', + // 'content':'', + // 'chosen':false, + // 'avaliable':true + // } + // ]; } class Col{ @@ -83,6 +87,7 @@ class Col{ // rules:string[]; groupby:string; RE:string; + rules:any; newRules:Rule[]; ruleLength = 0; constructor(name:string,type:string,comment:string,selected:boolean){ @@ -92,6 +97,7 @@ class Col{ this.selected = false; this.isExpanded = false; this.groupby = ''; + this.rules = []; this.RE = ''; this.newRules = [ ]; @@ -111,12 +117,19 @@ class Col{ styleUrls: ['./pr.component.css'] }) export class PrComponent implements OnInit { - + + transrule = []; + transenumrule = []; + transnullrule = []; + showrule = false; + dropdownList = {}; + selectedItems = {}; + dropdownSettings = {}; currentStep = 1; firstCond = false; + mouseover = false; selection : Col[]; selectedAll = false; - rules = ''; currentDB = ''; currentTable = ''; schemaCollection:Col[]; @@ -163,6 +176,9 @@ export class PrComponent implements OnInit { public hide(): void { this.visibleAnimate = false; setTimeout(() => this.visible = false, 300); + this.transrule = []; + this.transenumrule = []; + this.transnullrule = []; } public onContainerClicked(event: MouseEvent): void { @@ -170,30 +186,76 @@ export class PrComponent implements OnInit { this.hide(); } } + +onResize(event){ + this.resizeWindow(); + } + +resizeWindow(){ + var stepSelection = '.formStep'; + $(stepSelection).css({ + height: window.innerHeight - $(stepSelection).offset().top - $('#footerwrap').outerHeight() + }); + $('fieldset').height($(stepSelection).height() - $(stepSelection + '>.stepDesc').height() - $('.btn-container').height() - 80); + $('.y-scrollable').css({ + 'max-height': $('fieldset').height()- $('.add-dataset').outerHeight() + }); + } - toggleSelectionCond(cond,condIndex,ruleIndex,item){ - cond.chosen = !cond.chosen; - if(condIndex==1&&cond.chosen) - item.newRules[ruleIndex].conditionGroup[2].avaliable = true; - if(condIndex==1&&!cond.chosen){ - item.newRules[ruleIndex].conditionGroup[2].avaliable = false; - item.newRules[ruleIndex].conditionGroup[2].chosen = false; + // toggleSelectionCond(cond,condIndex,ruleIndex,item){ + // cond.chosen = !cond.chosen; + // if(condIndex==1&&cond.chosen) + // item.newRules[ruleIndex].conditionGroup[2].avaliable = true; + // if(condIndex==1&&!cond.chosen){ + // item.newRules[ruleIndex].conditionGroup[2].avaliable = false; + // item.newRules[ruleIndex].conditionGroup[2].chosen = false; + // } + // } + + setDropdownList(){ + if(this.selection){ + for(let item of this.selection){ + if(item.isNum == true){ + this.dropdownList[item.name] = [ + {"id":1,"itemName":"Null Count","category": "Simple Statistics"}, + {"id":2,"itemName":"Distinct Count","category": "Simple Statistics"}, + {"id":3,"itemName":"Total Count","category": "Summary Statistics"}, + {"id":4,"itemName":"Maximum","category": "Summary Statistics"}, + {"id":5,"itemName":"Minimum","category": "Summary Statistics"}, + {"id":6,"itemName":"Average","category": "Summary Statistics"}, + // {"id":7,"itemName":"Median","category": "Summary Statistics"}, + // {"id":8,"itemName":"Rule Detection Count","category": "Advanced Statistics"}, + {"id":9,"itemName":"Enum Detection Count","category": "Advanced Statistics"} + ]; + }else{ + this.dropdownList[item.name] = [ + {"id":1,"itemName":"Null Count","category": "Simple Statistics"}, + {"id":2,"itemName":"Distinct Count","category": "Simple Statistics"}, + {"id":3,"itemName":"Total Count","category": "Summary Statistics"}, + // {"id":8,"itemName":"Rule Detection Count","category": "Advanced Statistics"}, + {"id":9,"itemName":"Enum Detection Count","category": "Advanced Statistics"}, + // {"id":10,"itemName":"Regular Expression Detection Count","category": "Advanced Statistics"} + ]; + } + } } } toggleSelection (row) { - row.selected = !row.selected; - console.log(row); - var idx = this.selection.indexOf(row); - // is currently selected - if (idx > -1) { - this.selection.splice(idx, 1); - this.selectedAll = false; - } - // is newly selected - else { - this.selection.push(row); - } + row.selected = !row.selected; + // console.log(row); + var idx = this.selection.indexOf(row); + // is currently selected + if (idx > -1) { + this.selection.splice(idx, 1); + this.selectedAll = false; + this.selectedItems[row.name] = []; + } + // is newly selected + else { + this.selection.push(row); + } + this.setDropdownList(); }; toggleAll () { @@ -205,30 +267,31 @@ export class PrComponent implements OnInit { this.selection.push(this.schemaCollection[i]); } } + this.setDropdownList(); }; transferRule(rule,col){ switch(rule){ case 'Total Count': - return 'count(source.'+col.name+') '; + return 'count(source.`'+col.name+'`) AS `'+col.name+'-count`'; case 'Distinct Count': - return 'distinct count(source.'+col.name+') '; - case 'Null Detection Count': - return 'count(source.'+col.name+') where source.'+col.name+' is null'; - case 'Regular Expression Detection Count': - return 'count(source.'+col.name+') where source.'+col.name+' like '; - case 'Rule Detection Count': - return 'count(source.'+col.name+') where source.'+col.name+' like '; - case 'Maxium': - return 'max(source.'+col.name+') '; + return 'approx_count_distinct(source.`'+col.name+'`) AS `'+col.name+'-distcount`'; + case 'Null Count': + return 'count(source.`'+col.name+'`) AS `'+col.name+'-nullcount'+'` WHERE source.`'+col.name+'` IS NULL'; + // case 'Regular Expression Detection Count': + // return 'count(source.`'+col.name+'`) where source.`'+col.name+'` LIKE '; + // case 'Rule Detection Count': + // return 'count(source.`'+col.name+'`) where source.`'+col.name+'` LIKE '; + case 'Maximum': + return 'max(source.`'+col.name+'`) AS `'+col.name+'-max`'; case 'Minimum': - return 'min(source.'+col.name+') '; - case 'Median': - return 'median(source.'+col.name+') '; + return 'min(source.`'+col.name+'`) AS `'+col.name+'-min`'; + // case 'Median': + // return 'median(source.`'+col.name+'`) '; case 'Average': - return 'average(source.'+col.name+') '; + return 'avg(source.`'+col.name+'`) AS `'+col.name+'-average`'; case 'Enum Detection Count': - return 'source.'+col.name+' group by source.'+col.name+''; + return 'source.`'+col.name+'`,count(*) AS `'+col.name+'-enum` GROUP BY source.`'+col.name+'`'; // case 'Groupby Count': // return 'source.'+col.name+' group by source.'+col.name+''; // case 'total count': @@ -256,19 +319,6 @@ export class PrComponent implements OnInit { } } - addCond(item,ruleIndex){ } - - addRule(item){ - item.ruleLength++; - let newRule = new Rule(); - item.newRules.push(newRule); - } - - removeRule(item,ruleIndex){ - item.ruleLength--; - item.newRules[ruleIndex] = null; - } - next (form) { if(this.formValidation(this.currentStep)){ this.currentStep++; @@ -285,28 +335,31 @@ export class PrComponent implements OnInit { if (step == 1) { return this.selection && this.selection.length > 0; } else if (step == 2) { - for(let item of this.selection){ - this.totallen = this.totallen + item.newRules.length; - } - return (this.totallen > 0) + var len = 0; + console.log(this.selection); + console.log(this.selectedItems); + for(let key in this.selectedItems){ + len += this.selectedItems[key].length; + } + return (this.selection.length == len) ? true :false; } else if (step == 3) { } return false; } prev (form) { - this.currentStep--; + this.currentStep--; } goTo (i) { - this.currentStep = i; + this.currentStep = i; } - submit (form) { + submit (form) { // form.$setPristine(); // if (!form.valid) { // this.toasterService.pop('error', 'Error!', 'please complete the form in this step before proceeding'); // return false; // } - this.newMeasure = { + this.newMeasure = { "name": this.name, "process.type": "batch", "data.sources": [ @@ -326,58 +379,38 @@ export class PrComponent implements OnInit { ], "evaluateRule": { "rules": [ - { - "dsl.type": "griffin-dsl", - "dq.type": "profiling", - "rule": "" + // { + // "dsl.type": "griffin-dsl", + // "dq.type": "profiling", + // "rule": "" // "details": {} - } + // } ] } - }; - - var self = this; - var rule = ''; - for(let item of this.selection){ - for(let itemRule of item.newRules){ - console.log(self.transferRule(itemRule.type,item)); - if(itemRule.conditionGroup[0].chosen==true){ - let whereRule = self.transferRule(itemRule.type,item); - for(let condition of itemRule.conditionGroup){ - if(condition.content!='') - whereRule = whereRule + condition.type + ' ' + condition.content + ','; - } - self.newMeasure.evaluateRule.rules.push({ - "dsl.type": "griffin-dsl", - "dq.type": "profiling", - "rule": whereRule, - // "details": {} - }); - } - else { - let normalRule = self.transferRule(itemRule.type,item); - for(let condition of itemRule.conditionGroup){ - if(condition.content!='') - normalRule = normalRule + ' '+ condition.type + ' ' + condition.content + ','; - } - rule = rule + normalRule; - } - } - } - // this.newMeasure.evaluateRule.rules[0].rule = rule; - self.newMeasure.evaluateRule.rules.push({ - "dsl.type": "griffin-dsl", - "dq.type": "profiling", - "rule": rule, - // "details": {} - }); - this.visible = true; - setTimeout(() => this.visibleAnimate = true, 100); + }; + this.getGrouprule(); + this.visible = true; + setTimeout(() => this.visibleAnimate = true, 100); + } + + getRule(trans){ + var self = this; + var rule = ''; + for(let i of trans){ + rule = rule + i + ','; + } + rule = rule.substring(0,rule.lastIndexOf(',')); + self.newMeasure.evaluateRule.rules.push({ + "dsl.type": "griffin-dsl", + "dq.type": "profiling", + "rule": rule, + // "details": {} + }); } save() { console.log(this.newMeasure); - var addModels = this.servicecService.config.uri.addModels; + var addModels = this.serviceService.config.uri.addModels; this.http .post(addModels, this.newMeasure) .subscribe(data => { @@ -537,14 +570,59 @@ export class PrComponent implements OnInit { nodeList:object[]; nodeListTarget:object[]; - constructor(toasterService: ToasterService,private http: HttpClient,private router:Router,public servicecService:ServiceService) { + constructor(private elementRef:ElementRef,toasterService: ToasterService,private http: HttpClient,private router:Router,public serviceService:ServiceService) { this.toasterService = toasterService; this.selection = []; }; + + // onItemSelect(item){ + // this.getRule(); + // } + + getGrouprule(){ + var selected = {name: ''}; + var value = ''; + for(let key in this.selectedItems){ + selected.name = key; + for(let i = 0;i<this.selectedItems[key].length;i++){ + var originrule = this.selectedItems[key][i].itemName; + if(originrule == 'Enum Detection Count'){ + value = this.transferRule(originrule,selected); + this.transenumrule.push(value); + }else if(originrule == 'Null Count'){ + value = this.transferRule(originrule,selected); + this.transnullrule.push(value); + }else{ + value = this.transferRule(originrule,selected); + this.transrule.push(value); + } + } + } + this.getRule(this.transenumrule); + this.getRule(this.transnullrule); + this.getRule(this.transrule); + } + + // OnItemDeSelect(item){ + // this.getRule(); + // } + confirmAdd(){ + document.getElementById('rule').style.display = 'none'; + } + + showRule(){ + document.getElementById('showrule').style.display = ''; + document.getElementById('notshowrule').style.display = 'none'; + } + + back () { + document.getElementById('showrule').style.display = 'none'; + document.getElementById('notshowrule').style.display = ''; + } ngOnInit() { - var allDataassets = this.servicecService.config.uri.dataassetlist; + var allDataassets = this.serviceService.config.uri.dataassetlist; this.http.get(allDataassets).subscribe(data =>{ this.nodeList = new Array(); let i = 1; @@ -575,6 +653,19 @@ export class PrComponent implements OnInit { this.nodeListTarget = JSON.parse(JSON.stringify(this.nodeList)); }); + this.dropdownSettings = { + singleSelection: false, + text:"Select Rule", + // selectAllText:'Select All', + // unSelectAllText:'UnSelect All', + // badgeShowLimit: 5, + enableCheckAll: false, + enableSearchFilter: true, + classes: "myclass", + groupBy: "category" + }; + + }; }
http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/6a309cd0/ui/angular/src/app/measure/create-measure/pr/rule/rule.component.css ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/measure/create-measure/pr/rule/rule.component.css b/ui/angular/src/app/measure/create-measure/pr/rule/rule.component.css new file mode 100644 index 0000000..60750ce --- /dev/null +++ b/ui/angular/src/app/measure/create-measure/pr/rule/rule.component.css @@ -0,0 +1,29 @@ +/* +Licensed to the Apache Software Foundation (ASF) under one +or more contributor license agreements. See the NOTICE file +distributed with this work for additional information +regarding copyright ownership. The ASF licenses this file +to you under the Apache License, Version 2.0 (the +"License"); you may not use this file except in compliance +with the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, +software distributed under the License is distributed on an +"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +KIND, either express or implied. See the License for the +specific language governing permissions and limitations +under the License. +*/ + +.table > thead > tr.success > td{ + background-color: #77b300; +} +mark{ + background-color: #ff8800; + padding: .2em; +} +h5{ + font-size: 20px; +} http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/6a309cd0/ui/angular/src/app/measure/create-measure/pr/rule/rule.component.html ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/measure/create-measure/pr/rule/rule.component.html b/ui/angular/src/app/measure/create-measure/pr/rule/rule.component.html new file mode 100644 index 0000000..806cbdf --- /dev/null +++ b/ui/angular/src/app/measure/create-measure/pr/rule/rule.component.html @@ -0,0 +1,1084 @@ +<!-- +Licensed to the Apache Software Foundation (ASF) under one +or more contributor license agreements. See the NOTICE file +distributed with this work for additional information +regarding copyright ownership. The ASF licenses this file +to you under the Apache License, Version 2.0 (the +"License"); you may not use this file except in compliance +with the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, +software distributed under the License is distributed on an +"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +KIND, either express or implied. See the License for the +specific language governing permissions and limitations +under the License. +--> +<div class="y-scrollable"> + <div class="container col-md-12 col-lg-12 col-sm-12"> + <div class="row"> + <div class="col-md-3 col-lg-3 col-sm-3"> + <h5>Simple Statistics</h5> + <div class="container-fluid"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <input name="vaType" type="radio" [(ngModel)]="vaType" value="2" /> + <label>Null Count</label> + </div> + </div> + <div class="container-fluid"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <input name="vaType" type="radio" [(ngModel)]="vaType" value="3" /> + <label>Distinct Count</label> + </div> + </div> + <h5>Summary Statistics</h5> + <div class="container-fluid"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <input name="vaType" type="radio" [(ngModel)]="vaType" value="4" /> + <label>Total Count</label> + </div> + </div> + <div class="container-fluid"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <input name="vaType" type="radio" [(ngModel)]="vaType" value="5" /> + <label>Maximum</label> + </div> + </div> + <div class="container-fluid"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <input name="vaType" type="radio" [(ngModel)]="vaType" value="6" /> + <label>Minimum</label> + </div> + </div> + <div class="container-fluid"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <input name="vaType" type="radio" [(ngModel)]="vaType" value="7" /> + <label>Average</label> + </div> + </div> + <div class="container-fluid"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <input name="vaType" type="radio" [(ngModel)]="vaType" value="8" disabled/> + <label>Median</label> + </div> + </div> + <h5>Advanced Statistics</h5> + <div class="container-fluid"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <input name="vaType" type="radio" [(ngModel)]="vaType" value="9" disabled/> + <label>Rule Detection Count</label> + </div> + </div> + <div class="container-fluid"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <input name="vaType" type="radio" [(ngModel)]="vaType" value="10" /> + <label>Enum Detection Count</label> + </div> + </div> + <div class="container-fluid"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <input name="vaType" type="radio" [(ngModel)]="vaType" value="11" disabled/> + <label>Regular Expression Match</label> + </div> + </div> + </div> + <!-- Simple Statistics --> + <!-- Null Count --> + <div class="col-md-9 col-lg-9 col-sm-9"> + <div class="container-fluid" *ngIf="vaType==2"> + <div class="container-fluid"> + <div class="row"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <h5 class="text-left" style="margin-left: 0px">What is Null Count ?</h5> + </div> + </div> + <div class="row"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <label class="text-left"> + Null is a special marker used to indicate that a data value does not exist. + </label> + </div> + </div> + </div> + <div class="container-fluid"> + <div class="row"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <h5 class="text-left" style="margin-left: 0px">Example</h5> + </div> + </div> + <div class="row"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <label class="text-left"> + Suppose we have the below data table, then the Null Count of "FIRSTNAME" is + <kbd style="font-size: 16px">3</kbd> + </label> + </div> + </div> + <div class="row"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <table class="table table-bordered text-center"> + <thead> + <tr class="success"> + <td>ID</td> + <td>FRISTNAME</td> + <td>LASTNAME</td> + </tr> + </thead> + <tbody> + <tr> + <td>1</td> + <td>lei</td> + <td>li</td> + </tr> + <tr> + <td>2</td> + <td>lei</td> + <td>li</td> + </tr> + <tr> + <td>3</td> + <td>lei</td> + <td>li</td> + </tr> + <tr> + <td>4</td> + <td> + <abbr title="the value isn't necessary " class="initialism"> + <mark>null</mark> + </abbr> + </td> + <td>stone</td> + </tr> + <tr> + <td>5</td> + <td>lei</td> + <td>li</td> + </tr> + <tr> + <td>6</td> + <td>lei</td> + <td>li</td> + </tr> + <tr> + <td>7</td> + <td> + <abbr title="the value isn't necessary " class="initialism"> + <mark>null</mark> + </abbr> + </td> + <td>stone</td> + </tr> + <tr> + <td>8</td> + <td> + <abbr title="the value isn't necessary " class="initialism"> + <mark>null</mark> + </abbr> + </td> + <td>zhang</td> + </tr> + </tbody> + </table> + </div> + </div> + </div> + </div> + <!-- Distinct Count --> + <div class="container-fluid" *ngIf="vaType==3"> + <div class="container-fluid"> + <div class="row"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <h5 class="text-left" style="margin-left: 0px">What is Distinct Count ?</h5> + </div> + </div> + <div class="row"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <label class="text-left"> + The Distinct Constraint prevents two records from having identical values in a particular column. + </label> + </div> + </div> + </div> + <div class="container-fluid"> + <div class="row"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <h5 class="text-left" style="margin-left: 0px">Example</h5> + </div> + </div> + <div class="row"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <label class="text-left"> + Suppose we have the below data table which has four attributes-ID, NAME, AGE and FAVOURITE FOOD. Then the Distinct Count is + <kbd style="font-size: 16px">2</kbd> + </label> + </div> + </div> + <div class="row"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <table class="table table-bordered text-center"> + <colgroup> + <col span="2" style="background-color:#064225"> + </colgroup> + <thead> + <tr class="success"> + <td>ID</td> + <td>NAME</td> + <td>AGE</td> + <td>FAVOURITE FOOD</td> + </tr> + </thead> + <tbody> + <tr> + <td>1</td> + <td>Lily</td> + <td>20</td> + <td>APPLE</td> + </tr> + <tr> + <td>2</td> + <td>Lucy</td> + <td>20</td> + <td>APPLE</td> + </tr> + <tr> + <td>3</td> + <td>John</td> + <td>20</td> + <td>APPLE</td> + </tr> + <tr> + <td>4</td> + <td>David</td> + <td>20</td> + <td>APPLE</td> + </tr> + <tr> + <td>5</td> + <td>Sam</td> + <td>35</td> + <td>banana</td> + </tr> + <tr> + <td>6</td> + <td>Kaka</td> + <td>35</td> + <td>banana</td> + </tr> + <tr> + <td>7</td> + <td>stone</td> + <td>35</td> + <td>banana</td> + </tr> + <tr> + <td>8</td> + <td>Adison</td> + <td>35</td> + <td>banana</td> + </tr> + </tbody> + </table> + </div> + </div> + </div> + </div> + <!-- Summary Statistics --> + <!-- Total Count --> + <div class="container-fluid" *ngIf="vaType==4"> + <div class="container-fluid"> + <div class="row"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <h5 class="text-left" style="margin-left: 0px">What is Total Count ?</h5> + </div> + </div> + <div class="row"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <label class="text-left"> + Total Count is a count of the number of values of the selected column. + </label> + </div> + </div> + </div> + <div class="container-fluid"> + <div class="row"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <h5 class="text-left" style="margin-left: 0px">Example</h5> + </div> + </div> + <div class="row"> + <div class="col-md-12 col-lg-12 col-sm-12"> + Suppose we have the below data table, then the total count of ID is: + <kbd style="font-size: 16px">8</kbd> + </div> + </div> + <div class="row"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <table class="table table-bordered text-center"> + <thead> + <tr class="success"> + <td>ID</td> + <td>NAME</td> + <td>AGE</td> + </tr> + </thead> + <tbody> + <tr> + <td>1</td> + <td>lei</td> + <td>17</td> + </tr> + <tr> + <td>2</td> + <td>lei</td> + <td>18</td> + </tr> + <tr> + <td>3</td> + <td>lei</td> + <td>18</td> + </tr> + <tr> + <td>4</td> + <td>lei</td> + <td>21</td> + </tr> + <tr> + <td>5</td> + <td>lei</td> + <td>23</td> + </tr> + <tr> + <td>6</td> + <td>lei</td> + <td>23</td> + </tr> + <tr> + <td>7</td> + <td>lei</td> + <td>24</td> + </tr> + <tr> + <td>8</td> + <td>lei</td> + <td>26</td> + </tr> + </tbody> + </table> + </div> + </div> + </div> + </div> + <!-- Maximum --> + <div class="container-fluid" *ngIf="vaType==5"> + <div class="container-fluid"> + <div class="row"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <h5 class="text-left" style="margin-left: 0px">What is Maximum ?</h5> + </div> + </div> + <div class="row"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <label class="text-left"> + Maximum is the biggest value of the selected column. + </label> + </div> + </div> + </div> + <div class="container-fluid"> + <div class="row"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <h5 class="text-left" style="margin-left: 0px">Example</h5> + </div> + </div> + <div class="row"> + <div class="col-md-12 col-lg-12 col-sm-12"> + Suppose we have the below data table, then the maximum is: 26 + <kbd style="font-size: 16px">26</kbd> + </div> + </div> + <div class="row"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <table class="table table-bordered text-center"> + <thead> + <tr class="success"> + <td>ID</td> + <td>NAME</td> + <td>AGE</td> + </tr> + </thead> + <tbody> + <tr> + <td>1</td> + <td>lei</td> + <td>17</td> + </tr> + <tr> + <td>2</td> + <td>lei</td> + <td>18</td> + </tr> + <tr> + <td>3</td> + <td>lei</td> + <td>18</td> + </tr> + <tr> + <td>4</td> + <td>lei</td> + <td>21</td> + </tr> + <tr> + <td>5</td> + <td>lei</td> + <td>23</td> + </tr> + <tr> + <td>6</td> + <td>lei</td> + <td>23</td> + </tr> + <tr> + <td>7</td> + <td>lei</td> + <td>24</td> + </tr> + <tr> + <td>8</td> + <td>lei</td> + <td> + <abbr title="the value is the biggest number " class="initialism"> + <mark>26</mark> + </abbr> + </td> + </tr> + </tbody> + </table> + </div> + </div> + </div> + </div> + <!-- Minimum --> + <div class="container-fluid" *ngIf="vaType==6"> + <div class="container-fluid"> + <div class="row"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <h5 class="text-left" style="margin-left: 0px">What is Minimum ?</h5> + </div> + </div> + <div class="row"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <label class="text-left"> + Minimum is smallest value of the selected column. + </label> + </div> + </div> + </div> + <div class="container-fluid"> + <div class="row"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <h5 class="text-left" style="margin-left: 0px">Example</h5> + </div> + </div> + <div class="row"> + <div class="col-md-12 col-lg-12 col-sm-12"> + Suppose we have the below data table, then the minimum is: + <kbd style="font-size: 16px">14</kbd> + </div> + </div> + <div class="row"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <table class="table table-bordered text-center"> + <thead> + <tr class="success"> + <td>ID</td> + <td>NAME</td> + <td>AGE</td> + </tr> + </thead> + <tbody> + <tr> + <td>1</td> + <td>lei</td> + <td>17</td> + </tr> + <tr> + <td>2</td> + <td>lei</td> + <td>18</td> + </tr> + <tr> + <td>3</td> + <td>lei</td> + <td>18</td> + </tr> + <tr> + <td>4</td> + <td>lei</td> + <td> + <abbr title="the value is the minimum number " class="initialism"> + <mark>14</mark> + </abbr> + </td> + </tr> + <tr> + <td>5</td> + <td>lei</td> + <td>23</td> + </tr> + <tr> + <td>6</td> + <td>lei</td> + <td>23</td> + </tr> + <tr> + <td>7</td> + <td>lei</td> + <td>24</td> + </tr> + <tr> + <td>8</td> + <td>lei</td> + <td>26</td> + </tr> + </tbody> + </table> + </div> + </div> + </div> + </div> + <!-- Average --> + <div class="container-fluid" *ngIf="vaType==7"> + <div class="container-fluid"> + <div class="row"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <h5 class="text-left" style="margin-left: 0px">What is Average ?</h5> + </div> + </div> + <div class="row"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <label class="text-left"> + Average is the average of the data values. + </label> + </div> + </div> + </div> + <div class="container-fluid"> + <div class="row"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <h5 class="text-left" style="margin-left: 0px">Example</h5> + </div> + </div> + <div class="row"> + <div class="col-md-12 col-lg-12 col-sm-12"> + Suppose we have the below data table, then the Average of AGE is: + <kbd style="font-size: 16px">20</kbd> + </div> + </div> + <div class="row"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <table class="table table-bordered text-center"> + <thead> + <tr class="success"> + <td>ID</td> + <td>NAME</td> + <td>AGE</td> + </tr> + </thead> + <tbody> + <tr> + <td>1</td> + <td>lei</td> + <td>18</td> + </tr> + <tr> + <td>2</td> + <td>lei</td> + <td>18</td> + </tr> + <tr> + <td>3</td> + <td>lei</td> + <td>19</td> + </tr> + <tr> + <td>4</td> + <td>lei</td> + <td>19</td> + </tr> + <tr> + <td>5</td> + <td>lei</td> + <td>21</td> + </tr> + <tr> + <td>6</td> + <td>lei</td> + <td>21</td> + </tr> + <tr> + <td>7</td> + <td>lei</td> + <td>22</td> + </tr> + <tr> + <td>8</td> + <td>lei</td> + <td>22</td> + </tr> + </tbody> + </table> + </div> + </div> + </div> + </div> + <!-- Median --> + <div class="container-fluid" *ngIf="vaType==8"> + <div class="container-fluid"> + <div class="row"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <h5 class="text-left" style="margin-left: 0px">What is Median ?</h5> + </div> + </div> + <div class="row"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <label class="text-left"> + Median is the middle value. + </label> + </div> + </div> + </div> + <div class="container-fluid"> + <div class="row"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <h5 class="text-left" style="margin-left: 0px">Example</h5> + </div> + </div> + <div class="row"> + <div class="col-md-12 col-lg-12 col-sm-12"> + Suppose we have the below data table, then the median of AGE is: + <kbd style="font-size: 16px">21</kbd> + </div> + </div> + <div class="row"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <table class="table table-bordered text-center"> + <thead> + <tr class="success"> + <td>ID</td> + <td>NAME</td> + <td>AGE</td> + </tr> + </thead> + <tbody> + <tr> + <td>1</td> + <td>lei</td> + <td>17</td> + </tr> + <tr> + <td>2</td> + <td>lei</td> + <td>18</td> + </tr> + <tr> + <td>3</td> + <td>lei</td> + <td>19</td> + </tr> + <tr> + <td>4</td> + <td>lei</td> + <td>20</td> + </tr> + <tr> + <td>5</td> + <td>lei</td> + <td>21</td> + </tr> + <tr> + <td>6</td> + <td>lei</td> + <td>21</td> + </tr> + <tr> + <td>7</td> + <td>lei</td> + <td>22</td> + </tr> + <tr> + <td>8</td> + <td>lei</td> + <td>22</td> + </tr> + <tr> + <td>9</td> + <td>lei</td> + <td>23</td> + </tr> + </tbody> + </table> + </div> + </div> + </div> + </div> + <!-- Rule Detection Count --> + <div class="container-fluid" *ngIf="vaType==9"> + <div class="container-fluid"> + <div class="row"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <h5 class="text-left" style="margin-left: 0px">What is the Rule Detection Count?</h5> + </div> + </div> + <div class="row"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <label class="text-left"> + In theoretical computer science and formal language theory, a regular expression (sometimes called a rational expression) is a sequence of characters that define a search pattern, mainly for use in pattern matching with strings, or string matching, i.e. "find and replace"-like operations. + </label> + </div> + </div> + </div> + <div class="container-fluid"> + <div class="row"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <h5 class="text-left" style="margin-left: 0px">Example</h5> + </div> + </div> + <div class="row"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <label class="text-left"> + There is a series characters of in the column of IDENTIFIER in the following table, and we can use a kind of Regular Expression Matching to search it. + </label> + </div> + </div> + <div class="row"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <table class="table table-bordered text-center"> + <thead> + <tr class="success"> + <td>IDENTIFIER</td> + <td>NAME</td> + <td>AGE</td> + </tr> + </thead> + <tbody> + <tr> + <td>#1111</td> + <td>lei</td> + <td>17</td> + </tr> + <tr> + <td>#1245</td> + <td>lei</td> + <td>18</td> + </tr> + <tr> + <td>15245</td> + <td>lei</td> + <td>18</td> + </tr> + <tr> + <td>87956</td> + <td>lei</td> + <td>21</td> + </tr> + <tr> + <td> + <abbr title="the value is the biggest number " class="initialism"> + <mark>monkey</mark> + </abbr> + </td> + <td>lei</td> + <td>23</td> + </tr> + <tr> + <td> + <abbr title="the value is the biggest number " class="initialism"> + <mark>tiger</mark> + </abbr> + </td> + <td>lei</td> + <td>23</td> + </tr> + <tr> + <td>456</td> + <td>lei</td> + <td>24</td> + </tr> + <tr> + <td>324</td> + <td>lei</td> + <td>26</td> + </tr> + </tbody> + </table> + </div> + </div> + </div> + <div class="container-fluid"> + <div class="row"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <p class="text-left"> + <strong>Suppose Regular Expression is :</strong> ^[A-Za-z]+$ + </p> + </div> + </div> + </div> + <div class="container-fluid"> + <div class="row"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <p class="text-left"> + <strong>The regular expression matching means :</strong> Matches a string consisting of 26 english letters + </p> + </div> + </div> + </div> + <div class="container-fluid"> + <div class="row"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <p class="text-left"> + The result is: + <kbd>2 (MONKEY AND TIGER)</kbd> + </p> + </div> + </div> + </div> + </div> + <!-- Enum Detection Count --> + <div class="container-fluid" *ngIf="vaType==10"> + <div class="container-fluid"> + <div class="row"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <h5 class="text-left" style="margin-left: 0px">What is the Enum Detection Count?</h5> + </div> + </div> + <div class="row"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <label class="text-left"> + The Enum Detection Count is a statement of GROUP BY , which often used with aggregate functions (COUNT, MAX, MIN, SUM, AVG) to group the result-set by one or more columns. + </label> + </div> + </div> + </div> + <div class="container-fluid"> + <div class="row"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <h5 class="text-left" style="margin-left: 0px">Example</h5> + </div> + </div> + <div class="row"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <label class="text-left"> + We can use Enum Detection Count to search the lists the number of customers in each country in the following table: + </label> + </div> + </div> + <div class="row"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <table class="table table-bordered text-center"> + <thead> + <tr class="success"> + <td>CUSTOMERID</td> + <td>NAME</td> + <td>COUNTRY</td> + </tr> + </thead> + <tbody> + <tr> + <td>1</td> + <td>lei</td> + <td>Germany</td> + </tr> + <tr> + <td>2</td> + <td>lei</td> + <td>Mexico</td> + </tr> + <tr> + <td>3</td> + <td>lei</td> + <td>Germany</td> + </tr> + <tr> + <td>4</td> + <td>lei</td> + <td>Mexico</td> + </tr> + <tr> + <td>5</td> + <td>lei</td> + <td>China</td> + </tr> + <tr> + <td>6</td> + <td>lei</td> + <td>China</td> + </tr> + <tr> + <td>7</td> + <td>lei</td> + <td>UK</td> + </tr> + <tr> + <td>8</td> + <td>lei</td> + <td>Sweden</td> + </tr> + </tbody> + </table> + </div> + </div> + </div> + <div class="container-fluid"> + <div class="row"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <p class="text-left"> + <strong>Suppose Enum Expression is :</strong> SELECT COUNT(CUSTORMERID), COUNTRY FROM Customers GROUP BY COUNTRY; + </p> + </div> + </div> + </div> + <div class="container-fluid"> + <div class="row"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <p class="text-left"> + The result is: + <br> + <kbd>COUNTRY |COUNT(CUSTOMERID) + <br> Germany|2 + <br> Mexico |2 + <br> China |2 + <br> UK |1 + <br> Sweden |1</kbd> + </p> + </div> + </div> + </div> + </div> + <!-- Regular Expression Matching --> + <div class="container-fluid" *ngIf="vaType==11"> + <div class="container-fluid"> + <div class="row"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <h5 class="text-left" style="margin-left: 0px">What is the Regular Expression Match?</h5> + </div> + </div> + <div class="row"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <label class="text-left"> + In theoretical computer science and formal language theory, a regular expression (sometimes called a rational expression) is a sequence of characters that define a search pattern, mainly for use in pattern matching with strings, or string matching, i.e. "find and replace"-like operations. + </label> + </div> + </div> + </div> + <div class="container-fluid"> + <div class="row"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <h5 class="text-left" style="margin-left: 0px">Example</h5> + </div> + </div> + <div class="row"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <label class="text-left"> + There is a series characters of in the column of IDENTIFIER in the following table, and we can use a kind of Regular Expression Matching to search it. + </label> + </div> + </div> + <div class="row"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <table class="table table-bordered text-center"> + <thead> + <tr class="success"> + <td>IDENTIFIER</td> + <td>NAME</td> + <td>AGE</td> + </tr> + </thead> + <tbody> + <tr> + <td>#1111</td> + <td>lei</td> + <td>17</td> + </tr> + <tr> + <td>#1245</td> + <td>lei</td> + <td>18</td> + </tr> + <tr> + <td>15245</td> + <td>lei</td> + <td>18</td> + </tr> + <tr> + <td>87956</td> + <td>lei</td> + <td>21</td> + </tr> + <tr> + <td> + <abbr title="the value is the biggest number " class="initialism"> + <mark>monkey</mark> + </abbr> + </td> + <td>lei</td> + <td>23</td> + </tr> + <tr> + <td> + <abbr title="the value is the biggest number " class="initialism"> + <mark>tiger</mark> + </abbr> + </td> + <td>lei</td> + <td>23</td> + </tr> + <tr> + <td>456</td> + <td>lei</td> + <td>24</td> + </tr> + <tr> + <td>324</td> + <td>lei</td> + <td>26</td> + </tr> + </tbody> + </table> + </div> + </div> + </div> + <div class="container-fluid"> + <div class="row"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <p class="text-left"> + <strong>Suppose Regular Expression is :</strong> ^[A-Za-z]+$ + </p> + </div> + </div> + </div> + <div class="container-fluid"> + <div class="row"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <p class="text-left"> + <strong>The regular expression matching means :</strong> Matches a string consisting of 26 english letters + </p> + </div> + </div> + </div> + <div class="container-fluid"> + <div class="row"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <p class="text-left"> + The result is: + <kbd>2 (MONKEY AND TIGER)</kbd> + </p> + </div> + </div> + </div> + </div> + </div> + </div> + </div> +</div> http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/6a309cd0/ui/angular/src/app/measure/create-measure/pr/rule/rule.component.spec.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/measure/create-measure/pr/rule/rule.component.spec.ts b/ui/angular/src/app/measure/create-measure/pr/rule/rule.component.spec.ts new file mode 100644 index 0000000..33f32e5 --- /dev/null +++ b/ui/angular/src/app/measure/create-measure/pr/rule/rule.component.spec.ts @@ -0,0 +1,43 @@ +/* +Licensed to the Apache Software Foundation (ASF) under one +or more contributor license agreements. See the NOTICE file +distributed with this work for additional information +regarding copyright ownership. The ASF licenses this file +to you under the Apache License, Version 2.0 (the +"License"); you may not use this file except in compliance +with the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, +software distributed under the License is distributed on an +"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +KIND, either express or implied. See the License for the +specific language governing permissions and limitations +under the License. +*/ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { RuleComponent } from './rule.component'; + +describe('RuleComponent', () => { + let component: RuleComponent; + let fixture: ComponentFixture<RuleComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ RuleComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(RuleComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should be created', () => { + expect(component).toBeTruthy(); + }); +}); http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/6a309cd0/ui/angular/src/app/measure/create-measure/pr/rule/rule.component.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/measure/create-measure/pr/rule/rule.component.ts b/ui/angular/src/app/measure/create-measure/pr/rule/rule.component.ts new file mode 100644 index 0000000..1df2404 --- /dev/null +++ b/ui/angular/src/app/measure/create-measure/pr/rule/rule.component.ts @@ -0,0 +1,35 @@ +/* +Licensed to the Apache Software Foundation (ASF) under one +or more contributor license agreements. See the NOTICE file +distributed with this work for additional information +regarding copyright ownership. The ASF licenses this file +to you under the Apache License, Version 2.0 (the +"License"); you may not use this file except in compliance +with the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, +software distributed under the License is distributed on an +"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +KIND, either express or implied. See the License for the +specific language governing permissions and limitations +under the License. +*/ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-rule', + templateUrl: './rule.component.html', + styleUrls: ['./rule.component.css'] +}) +export class RuleComponent implements OnInit { + + vaType : string; + constructor() { } + + ngOnInit() { + this.vaType = '2'; + } + +} http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/6a309cd0/ui/angular/src/app/measure/measure-detail/measure-detail.component.html ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/measure/measure-detail/measure-detail.component.html b/ui/angular/src/app/measure/measure-detail/measure-detail.component.html index 4552627..0b4ed62 100644 --- a/ui/angular/src/app/measure/measure-detail/measure-detail.component.html +++ b/ui/angular/src/app/measure/measure-detail/measure-detail.component.html @@ -79,7 +79,7 @@ under the License. <div ng-if="ruleData.type=='accuracy'"><!--Accuracy--> <h5 class="row">Mapping rules</h5> <div class=""> - <p>{{ruleData.evaluateRule.rules}}</p> + <p>{{currentrule}}</p> <p> <label style="color:#B2C831">Accuracy Calculation Formula as Below:</label> </p> http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/6a309cd0/ui/angular/src/app/measure/measure-detail/measure-detail.component.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/measure/measure-detail/measure-detail.component.ts b/ui/angular/src/app/measure/measure-detail/measure-detail.component.ts index 0e9be0b..463b7c9 100644 --- a/ui/angular/src/app/measure/measure-detail/measure-detail.component.ts +++ b/ui/angular/src/app/measure/measure-detail/measure-detail.component.ts @@ -33,7 +33,7 @@ import {ServiceService} from '../../service/service.service'; export class MeasureDetailComponent implements OnInit { currentId:string; constructor(private route: ActivatedRoute, - private router: Router,private http:HttpClient,public servicecService:ServiceService) { }; + private router: Router,private http:HttpClient,public serviceService:ServiceService) { }; ruleData : any; sourceLength : number; sourceDB : string; @@ -41,20 +41,23 @@ export class MeasureDetailComponent implements OnInit { sourceTable : string; targetTable : string; type:string; + currentrule:string; ngOnInit() { this.ruleData = { 'evaluateRule':'' }; var getModelUrl; - var getModel = this.servicecService.config.uri.getModel; + var getModel = this.serviceService.config.uri.getModel; this.currentId = this.route.snapshot.paramMap.get('id'); getModelUrl = getModel+"/"+this.currentId; this.http.get(getModelUrl).subscribe(data=>{ + console.log(data); // let data = {"id":1,"name":"waq","description":"waq","organization":"waq","type":"accuracy","source":{"id":1,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"users_info_src"}},"target":{"id":2,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"users_info_target"}},"evaluateRule":{"id":1,"sampleRatio":0,"rules":"$source['user_id'] == $target['user_id'] AND $source['first_name'] == $target['first_name'] AND $source['last_name'] == $target['last_name'] AND $source['address'] == $target['address'] AND $source['email'] == $target['email'] AND $source['phone'] == $target['phone'] AND $source['post_code'] == $target['post_code']"},"owner":"test"}; this.ruleData = data; - console.log(this.ruleData["data.sources"][0].connectors[0].config); + this.currentrule = this.ruleData.evaluateRule.rules[0].rule; + // console.log(this.ruleData["data.sources"][0].connectors[0].config); // this.sourceLength = this.ruleData.evaluateRule.rules.split('AND').length; this.sourceDB = this.ruleData["data.sources"][0].connectors[0].config.database; this.targetDB = this.ruleData["data.sources"][1].connectors[0].config.database; http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/6a309cd0/ui/angular/src/app/measure/measure.component.css ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/measure/measure.component.css b/ui/angular/src/app/measure/measure.component.css index d8037ed..66bd01c 100644 --- a/ui/angular/src/app/measure/measure.component.css +++ b/ui/angular/src/app/measure/measure.component.css @@ -17,9 +17,19 @@ specific language governing permissions and limitations under the License. */ -.table-striped > tbody > tr:nth-of-type(odd) { +.table-striped > tbody > tr:nth-of-type(even) { background-color: #1f1f1f; } +.table-striped > tbody > tr:nth-of-type(odd) { + background-color: #080808; +} + +.icon{ + color: #fff; + position: absolute; + left: 50%; + top: 80%; +} #measureTable{ font-size:18px; @@ -52,7 +62,7 @@ under the License. border-radius: 5px } -.swMain>div.formStep{ +.formStep{ background-color: #000000; border-radius: 5px; padding:10px; @@ -199,7 +209,7 @@ fieldset{ } fieldset legend{ - background-color: #1f1f1f; + background-color: #000000; left: 10px; padding: 0 10px; position: absolute; http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/6a309cd0/ui/angular/src/app/measure/measure.component.html ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/measure/measure.component.html b/ui/angular/src/app/measure/measure.component.html index f7985c0..8f71f6a 100644 --- a/ui/angular/src/app/measure/measure.component.html +++ b/ui/angular/src/app/measure/measure.component.html @@ -16,134 +16,134 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> - <div> - <p> - <a routerLink="/createmeasure" class="btn btn-primary btn-o btn-wide" style="background-color: #337ab7;"> + <p> + <a routerLink="/createmeasure" style="background-color: #337ab7;" class="btn btn-primary btn-wide"> <i class="fa fa-plus"></i> Create Measure </a> - </p> - <div id="modelContainer"> - <!-- <ng2-smart-table [settings]="settings" [source]="source" id="measureTable" (delete)="onDelete($event)" (edit)="onEdit($event)"></ng2-smart-table> --> - <table class="table table-striped" [mfData]="results" #mf="mfDataTable" [mfRowsOnPage]="10"> - <thead> - <tr style="background-color:#7D95CC"> - <th st-ratio="15">Measure Name</th> - <th st-ratio="15">Measure Type</th> - <th st-ratio="20">Description</th> - <th st-ratio="5">Organization</th> - <th st-ratio="5">Action</th> - </tr> - </thead> - <tbody> - <tr *ngIf="!results"> - <td colspan="7" style="text-align:center">No content!</td> - </tr> - <tr *ngFor="let row of mf.data"> - <td><a routerLink="/measure/{{row.id}}">{{row.name}}</a></td> - <td>{{row.type}}</td> - <td>{{row.description}}</td> - <td>{{row.organization}}</td> - <td> - - <!-- <a [ngClass]="(!adminAccess && ntAccount!=row.owner)?'disabled':''" href="" (click)="remove(row)" title="delete" style="text-decoration:none"> --> - <a (click)="remove(row)" title="delete" style="text-decoration:none"> + </p> + <div id="modelContainer"> + <!-- <ng2-smart-table [settings]="settings" [source]="source" id="measureTable" (delete)="onDelete($event)" (edit)="onEdit($event)"></ng2-smart-table> --> + <table class="table table-striped" [mfData]="results" #mf="mfDataTable" [mfRowsOnPage]="10"> + <thead> + <tr style="background-color:#7D95CC"> + <th st-ratio="15">Measure Name</th> + <th st-ratio="15">Measure Type</th> + <th st-ratio="20">Description</th> + <th st-ratio="5">Organization</th> + <th st-ratio="5">Action</th> + </tr> + </thead> + <tbody> + <tr *ngIf="!results"> + <td colspan="7" style="text-align:center;display:none">No content!</td> + <td class="icon" style="border-top-style:none"> + <span class="fa fa-spinner fa-spin fa-3x fa-fw"></span> + </td> + </tr> + <tr *ngFor="let row of mf.data"> + <td><a routerLink="/measure/{{row.id}}">{{row.name}}</a></td> + <td>{{row.type}}</td> + <td>{{row.description}}</td> + <td>{{row.organization}}</td> + <td> + + <!-- <a [ngClass]="(!adminAccess && ntAccount!=row.owner)?'disabled':''" href="" (click)="remove(row)" title="delete" style="text-decoration:none"> --> + <a (click)="remove(row)" title="delete" style="text-decoration:none"> <i class="fa fa-trash-o po"></i> - </a> - - <a routerLink="/measure/{{row.id}}" title="subscribe"> + </a> + <a routerLink="/measure/{{row.id}}" title="subscribe"> <i class="fa fa-eye"></i> </a> - </td> - </tr> - </tbody> - <tfoot> - <tr> - <td colspan="8" class="text-right"> - <mfBootstrapPaginator></mfBootstrapPaginator> - </td> - </tr> - </tfoot> - </table> - </div> - <div class="modal fade" id="deleteConfirmation" role="dialog" #modal tabindex="-1" [ngClass]="{'in': visibleAnimate}" *ngIf="deletedRow" - [ngStyle]="{'display': visible ? 'block' : 'none', 'opacity': visibleAnimate ? 1 : 0}" - (click)="onContainerClicked($event)"> - <div class="modal-dialog modal-xg modal-lg"> - <div class="modal-content"> - <div class="modal-header"> - <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> - <h4 class="modal-title">Delete the model with the below information?</h4> - </div> - <div class="modal-body"> - - <div class="container-fluid" id="deleteContent" style="overflow:auto;"> + </td> + </tr> + </tbody> + <tfoot> + <tr> + <td colspan="8" class="text-right"> + <mfBootstrapPaginator></mfBootstrapPaginator> + </td> + </tr> + </tfoot> + </table> + </div> + <div class="modal fade" id="deleteConfirmation" role="dialog" #modal tabindex="-1" [ngClass]="{'in': visibleAnimate}" *ngIf="deletedRow" [ngStyle]="{'display': visible ? 'block' : 'none', 'opacity': visibleAnimate ? 1 : 0}" (click)="onContainerClicked($event)"> + <div class="modal-dialog modal-xg modal-lg"> + <div class="modal-content"> + <div class="modal-header"> + <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> + <h4 class="modal-title">Delete the model with the below information?</h4> + </div> + <div class="modal-body"> + <div class="container-fluid" id="deleteContent" style="overflow:auto;"> + <div class="row"> + <h5 class="over-title margin-bottom-15">Basic information</h5> + </div> + <!--//row--> + <div class="row"> + <div class="col-lg-12 col-md-12 col-sm-12"> + <div id="viewrule-definition" class="viewrule-content"> <div class="row"> - <h5 class="over-title margin-bottom-15">Basic information</h5> - </div><!--//row--> + <label class="col-md-4 col-lg-4 col-sm-4"> + Measure Name: + </label> + <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff"> + {{deletedRow.name}} + </div> + </div> <div class="row"> - <div class="col-lg-12 col-md-12 col-sm-12"> - <div id="viewrule-definition" class="viewrule-content"> - <div class="row"> - <label class="col-md-4 col-lg-4 col-sm-4"> - Measure Name: - </label> - <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff"> - {{deletedRow.name}} - </div> - </div> - <div class="row"> - <label class="col-md-4 col-lg-4 col-sm-4"> - Measure Definition: - </label> - <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff"> - {{deletedRow.description}} - </div> - </div> - <div class="row"> - <label class="col-md-4 col-lg-4 col-sm-4"> - Measure Type: - </label> - <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff"> - {{deletedRow.type}} - </div> - </div> - <div class="row"> - <label for="systemSelector" class="col-md-4 col-lg-4 col-sm-4"> - Organization: - </label> - <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff"> - {{deletedRow.organization}} - </div> - </div> - <div class="row"> - <label class="col-md-4 col-lg-4 col-sm-4"> - DataAsset: - </label> - <div class="col-md-8 col-lg-8 col-sm-8" style="color: #fff"> - {{sourceTable}} {{targetTable}} - </div> - </div> - <div class="row"> - <label class="col-md-4 col-lg-4 col-sm-4"> - Owner: - </label> - <div class="col-md-8 col-lg-8 col-sm-8" style="color: #fff"> - {{deletedRow.owner}} - </div> - </div> - </div> + <label class="col-md-4 col-lg-4 col-sm-4"> + Measure Definition: + </label> + <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff"> + {{deletedRow.description}} </div> - </div><!--//row--> - </div> - </div> - <div class="modal-footer"> - <p class="delete-alert">If you delete this measure, your running jobs on this measure will also be deleted, please be careful!</p> - <button type="button" class="btn btn-default" (click)="confirmDelete()">Yes</button> - <button type="button" class="btn btn-primary" (click)="hide()">No</button> + </div> + <div class="row"> + <label class="col-md-4 col-lg-4 col-sm-4"> + Measure Type: + </label> + <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff"> + {{deletedRow.type}} + </div> + </div> + <div class="row"> + <label for="systemSelector" class="col-md-4 col-lg-4 col-sm-4"> + Organization: + </label> + <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff"> + {{deletedRow.organization}} + </div> + </div> + <div class="row"> + <label class="col-md-4 col-lg-4 col-sm-4"> + DataAsset: + </label> + <div class="col-md-8 col-lg-8 col-sm-8" style="color: #fff"> + {{sourceTable}} {{targetTable}} + </div> + </div> + <div class="row"> + <label class="col-md-4 col-lg-4 col-sm-4"> + Owner: + </label> + <div class="col-md-8 col-lg-8 col-sm-8" style="color: #fff"> + {{deletedRow.owner}} + </div> + </div> </div> + </div> </div> + <!--//row--> + </div> + </div> + <div class="modal-footer"> + <p class="delete-alert">If you delete this measure, your running jobs on this measure will also be deleted, please be careful!</p> + <button type="button" class="btn btn-default" (click)="confirmDelete()">Yes</button> + <button type="button" class="btn btn-primary" (click)="hide()">No</button> </div> + </div> </div> -</div> \ No newline at end of file + </div> +</div> http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/6a309cd0/ui/angular/src/app/measure/measure.component.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/measure/measure.component.ts b/ui/angular/src/app/measure/measure.component.ts index 8c2c7bc..ee8cabd 100644 --- a/ui/angular/src/app/measure/measure.component.ts +++ b/ui/angular/src/app/measure/measure.component.ts @@ -43,7 +43,7 @@ export class MeasureComponent implements OnInit { public visibleAnimate = false; deletedRow : any; // sourceTable :string; - targetTable :string; + // targetTable :string; deleteId : number; deleteIndex:number; // measureData= [{"id":22,"name":"i","description":"i","organization":"waq","type":"accuracy","source":{"id":43,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext"}},"target":{"id":44,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext1"}},"evaluateRule":{"id":22,"sampleRatio":0,"rules":"$source['id'] == $target['id']"},"owner":"test","deleted":false,"process.type":"batch"},{"id":23,"name":"y","description":"y","organization":"waq","type":"accuracy","source":{"id":45,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext"}},"target":{"id":46,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext1"}},"evaluateRule":{"id":23,"sampleRatio":0,"rules":"$source['age'] > $target['age']"},"owner":"test","deleted":false,"process.type":"batch"},{"id":24,"name":"ggg","description":"g","organization":"waq","type":"accuracy","source":{"id":47,"type":"HIVE","version":"1.2","config":{"database" :"default","table.name":"ext"}},"target":{"id":48,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext1"}},"evaluateRule":{"id":24,"sampleRatio":0,"rules":"$source['id'] !== $target['id']"},"owner":"test","deleted":false,"process.type":"batch"},{"id":25,"name":"t","description":"t","organization":"qaq","type":"accuracy","source":{"id":49,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext1"}},"target":{"id":50,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext"}},"evaluateRule":{"id":25,"sampleRatio":0,"rules":"$source['name'] >= $target['name']"},"owner":"test","deleted":false,"process.type":"batch"},{"id":26,"name":"yyy","description":"yyy","organization":"yyy","type":"accuracy","source":{"id":51,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext"}},"target":{"id":52,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext1"}},"evaluateRule":{"id":26," sampleRatio":0,"rules":"$source['id'] !== $target['name']"},"owner":"test","deleted":false,"process.type":"batch"},{"id":27,"name":"dd","description":"dd","organization":"waq","type":"accuracy","source":{"id":53,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext1"}},"target":{"id":54,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext"}},"evaluateRule":{"id":27,"sampleRatio":0,"rules":"$source['name'] !== $target['id']"},"owner":"test","deleted":false,"process.type":"batch"},{"id":28,"name":"yyyyyyyyy","description":"y","organization":"waq","type":"accuracy","source":{"id":55,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext"}},"target":{"id":56,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext1"}},"evaluateRule":{"id":28,"sampleRatio":0,"rules":"$source['id'] !== $target['id']"},"owner":"test","deleted":false,"process.type":"batch"},{"id":29,"name":"this","description":n ull,"organization":"hadoop","type":"accuracy","source":{"id":57,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext"}},"target":{"id":58,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext1"}},"evaluateRule":{"id":29,"sampleRatio":0,"rules":"$source['id'] == $target['id'] AND $source['name'] !== $target['name'] AND $source['age'] > $target['age']"},"owner":"test","deleted":false,"process.type":"batch"},{"id":30,"name":"new","description":null,"organization":"griffin","type":"accuracy","source":{"id":59,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext"}},"target":{"id":60,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext1"}},"evaluateRule":{"id":30,"sampleRatio":0,"rules":"$source['id'] !== $target['id'] AND $source['name'] == $target['name'] AND $source['age'] > $target['age']"},"owner":"test","deleted":false,"process.type":"batch"},{"id":31,"name":"www","description":"wn ","organization":"waq","type":"accuracy","source":{"id":61,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext"}},"target":{"id":62,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext1"}},"evaluateRule":{"id":31,"sampleRatio":0,"rules":"$source['id'] > $target['id'] AND $source['name'] == $target['name'] AND $source['age'] !== $target['age']"},"owner":"test","deleted":false,"process.type":"batch"},{"id":32,"name":"testtest","description":null,"organization":"waq","type":"accuracy","source":{"id":63,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext1"}},"target":{"id":64,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext"}},"evaluateRule":{"id":32,"sampleRatio":0,"rules":"$source['id'] !== $target['id'] AND $source['name'] > $target['name'] AND $source['age'] == $target['age']"},"owner":"test","deleted":false,"process.type":"batch"},{"id":33,"name":"search_hourly","descriptio n":"search","organization":"waq","type":"accuracy","source":{"id":65,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext"}},"target":{"id":66,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext1"}},"evaluateRule":{"id":33,"sampleRatio":0,"rules":"$source['id'] !== $target['id'] AND $source['name'] == $target['name'] AND $source['age'] >= $target['age']"},"owner":"test","deleted":false,"process.type":"batch"},{"id":34,"name":"testt","description":null,"organization":"waq","type":"accuracy","source":{"id":67,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext"}},"target":{"id":68,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext1"}},"evaluateRule":{"id":34,"sampleRatio":0,"rules":"$source['id'] !== $target['id'] AND $source['name'] == $target['name'] AND $source['age'] > $target['age']"},"owner":"test","deleted":false,"process.type":"batch"}]; @@ -59,7 +59,7 @@ export class MeasureComponent implements OnInit { } } - constructor(private http:HttpClient,private router:Router,public servicecService:ServiceService) { + constructor(private http:HttpClient,private router:Router,public serviceService:ServiceService) { }; remove(row){ @@ -73,7 +73,7 @@ export class MeasureComponent implements OnInit { } confirmDelete(){ - var deleteModel = this.servicecService.config.uri.deleteModel; + var deleteModel = this.serviceService.config.uri.deleteModel; let deleteUrl = deleteModel + '/' + this.deleteId; this.http.delete(deleteUrl).subscribe(data => { let deleteResult:any = data; @@ -90,11 +90,15 @@ export class MeasureComponent implements OnInit { }; ngOnInit():void { - var allModels = this.servicecService.config.uri.allModels; + var allModels = this.serviceService.config.uri.allModels; this.http.get(allModels).subscribe(data =>{ for(let measure in data){ data[measure].trueName = data[measure].name; - data[measure].type = data[measure].evaluateRule.rules[0]["dq.type"]; + if(data[measure].evaluateRule.rules[0]){ + data[measure].type = data[measure].evaluateRule.rules[0]["dq.type"]; + }else{ + data[measure].type = ''; + } } this.results = Object.keys(data).map(function(index){ let measure = data[index];
