http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a714b60c/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 1fdfac4..fb2d80c 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,7 +16,7 @@ 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'; +import { Component, OnInit, AfterViewChecked } from '@angular/core'; import { FormControl } from '@angular/forms'; import { FormsModule, Validator} from '@angular/forms'; import {ServiceService} from '../../../service/service.service'; @@ -65,7 +65,7 @@ class Col{ styleUrls: ['./ac.component.css'] }) -export class AcComponent implements OnInit { +export class AcComponent implements OnInit , AfterViewChecked { currentStep = 1; org:string; @@ -87,9 +87,11 @@ export class AcComponent implements OnInit { schemaCollectionTarget:Col[]; matchFunctions = ['=', '!=', '>', '>=','<',"<="]; data:any; + currentDBTargetStr: string; + currentDBstr: string; measureTypes = ['accuracy','validity','anomaly detection','publish metrics']; - type = 'accuracy'; + type = "accuracy"; newMeasure = { "name":'', "process.type": "batch", @@ -176,44 +178,44 @@ export class AcComponent implements OnInit { } 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 { - this.selection.push(row.name); - } - if(this.selection.length == 3){ - this.selectedAll = true; - }else{ - this.selectedAll = false; - } + 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 { + this.selection.push(row.name); + } + if(this.selection.length == 3){ + this.selectedAll = true; + }else{ + this.selectedAll = false; + } }; 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 { - this.selectionTarget.push(row.name); - } - if(this.selectionTarget.length == 3){ - this.selectedAllTarget = true; - }else{ - this.selectedAllTarget = false; - } - let l = this.selectionTarget.length; - for(let i =0;i<l;i++) - this.matches[i] = "="; + 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 { + this.selectionTarget.push(row.name); + } + if(this.selectionTarget.length == 3){ + this.selectedAllTarget = true; + }else{ + this.selectedAllTarget = false; + } + let l = this.selectionTarget.length; + for(let i =0;i<l;i++) + this.matches[i] = "="; }; toggleAll () { @@ -222,8 +224,8 @@ export class AcComponent implements OnInit { 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] = "="; + this.selection.push(this.schemaCollection[i].name); + this.matches[i] = "="; } } }; @@ -234,7 +236,7 @@ export class AcComponent implements OnInit { 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); + this.selectionTarget.push(this.schemaCollectionTarget[i].name); } } }; @@ -244,32 +246,32 @@ export class AcComponent implements OnInit { this.currentStep++; }else{ this.toasterService.pop('error','Error!','Please select at least one attribute!'); - return false; + return false; } } formValidation = function(step) { - if (step == undefined) { - step = this.currentStep; - } - 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 - // && !((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 - } else if (step == 4) { - } - return false; - } + if (step == undefined) { + step = this.currentStep; + } + 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 + // && !((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 + } else if (step == 4) { + } + return false; + } prev (form) { - this.currentStep--; + this.currentStep--; } goTo (i) { - this.currentStep = i; + this.currentStep = i; } submit (form) { // form.$setPristine(); @@ -349,19 +351,12 @@ export class AcComponent implements OnInit { rule = rules.join(" AND "); this.rules = rule; this.newMeasure.evaluateRule.rules[0].rule = rule; - // for(var i =0; i < this.selectionTarget.length; i ++){ - // this.newMeasure.mappings.push({target:this.selectionTarget[i], - // // src:this.mappings[i], - // matchMethod: this.matches[i]}); - // } this.visible = true; setTimeout(() => this.visibleAnimate = true, 100); } save() { - var addModels = this.serviceService.config.uri.addModels; - this.http .post(addModels, this.newMeasure) .subscribe(data => { @@ -377,7 +372,6 @@ export class AcComponent implements OnInit { err => { console.log('Something went wrong!'); }); - } options: ITreeOptions = { @@ -389,7 +383,10 @@ export class AcComponent implements OnInit { click: (tree, node, $event) => { if (node.hasChildren) { this.currentDB = node.data.name; + this.currentDBstr = this.currentDB + '.'; this.currentTable = ''; + this.selectedAll = false; + this.schemaCollection = []; TREE_ACTIONS.TOGGLE_EXPANDED(tree, node, $event); } else if(node.data.cols) @@ -420,7 +417,11 @@ export class AcComponent implements OnInit { click: (tree, node, $event) => { if (node.hasChildren) { this.currentDBTarget = node.data.name; + 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) @@ -449,14 +450,19 @@ export class AcComponent implements OnInit { }; onResize(event){ - this.resizeWindow(); + this.resizeWindow(); } resizeWindow(){ - var stepSelection = '.formStep[id=step-' + this.currentStep + ']'; - $(stepSelection).css({ - height: window.innerHeight - $(stepSelection).offset().top - }); + 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() + }); } ngOnInit() { @@ -489,7 +495,10 @@ export class AcComponent implements OnInit { this.nodeList.push(new_node); } this.nodeListTarget = JSON.parse(JSON.stringify(this.nodeList)); - }); - + }); }; + + ngAfterViewChecked(){ + this.resizeWindow(); + } }
http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a714b60c/ui/angular/src/app/measure/create-measure/create-measure.component.html ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/measure/create-measure/create-measure.component.html b/ui/angular/src/app/measure/create-measure/create-measure.component.html index d960912..cb1bd57 100644 --- a/ui/angular/src/app/measure/create-measure/create-measure.component.html +++ b/ui/angular/src/app/measure/create-measure/create-measure.component.html @@ -16,8 +16,7 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> - -<div class="container-fluid" id="main" > +<div class="container-fluid" id="main"> <div class="row"> <h5 class="over-title margin-bottom-15">Create DQ Model</h5> </div> @@ -30,107 +29,107 @@ under the License. <span class="fa fa-arrow-circle-right" (click)="click('ac')"></span> </span> </div> - <div class="swMain panel-body" > + <div class="swMain panel-body"> <label class="label-definition">Definition: Measured by how the values agree with an identified source of truth</label> <ul style="border-radius:0; background: none"> - <li > - <a class="selected" > - <div class="stepNumber"> - 1 - </div> - <span class="stepDesc text-small"> Choose Source </span> - </a> - </li> - <li> - <a> - <div class="stepNumber"> - 2 - </div> - <span class="stepDesc text-small"> Choose Target </span> - </a> - </li> - <li > - <a> - <div class="stepNumber"> - 3 - </div> - <span class="stepDesc text-small"> Mapping Source and Target </span> - </a> - </li> - <li> - <a> - <div class="stepNumber"> - 4 - </div> - <span class="stepDesc text-small"> Configuration </span> - </a> - </li> - </ul> - <div> - <ol> - <li>Select the source dataset and fields which will be used for comparision</li> - <li>Select the target dataset and fields which will be used for comparision</li> - <li>Mapping the target fields with source</li> - <li>Set basic configuration for your model (name, system, threshold, etc.)</li> - </ol> - </div> - </div> - <div class="panel-footer stepDesc"> - <label>Example:</label> suppose source table A has 1000 records and target table B only has 999 records pefectly matched with A for selected fields, then - Accuracy Rate(%) = 999/1000 * 100% = 99.9% + <li> + <a class="selected"> + <div class="stepNumber"> + 1 + </div> + <span class="stepDesc text-small"> Choose Source </span> + </a> + </li> + <li> + <a> + <div class="stepNumber"> + 2 + </div> + <span class="stepDesc text-small"> Choose Target </span> + </a> + </li> + <li> + <a> + <div class="stepNumber"> + 3 + </div> + <span class="stepDesc text-small"> Mapping Source and Target </span> + </a> + </li> + <li> + <a> + <div class="stepNumber"> + 4 + </div> + <span class="stepDesc text-small"> Configuration </span> + </a> + </li> + </ul> + <div> + <ol> + <li>Select the source dataset and fields which will be used for comparision</li> + <li>Select the target dataset and fields which will be used for comparision</li> + <li>Mapping the target fields with source</li> + <li>Set basic configuration for your model (name, system, threshold, etc.)</li> + </ol> </div> - </section> - </div> - <!-- <div class="col-lg-6 col-md-6 col-sm-6 ruletypes"> --> - <div class="col-lg-6 col-md-6 col-sm-6"> - <!-- <section id="panel-2" class="panel panel-primary" (click)="click('pr')"> --> - <section id="panel-2" class="panel panel-primary"> - <div class="panel-heading"> - <span style="font-size:20px">Data Profiling</span> - <span class="pull-right" style="font-size:20px"> + </div> + <div class="panel-footer stepDesc"> + <label>Example:</label> suppose source table A has 1000 records and target table B only has 999 records pefectly matched with A for selected fields, then Accuracy Rate(%) = 999/1000 * 100% = 99.9% + </div> + </section> + </div> + <div class="col-lg-6 col-md-6 col-sm-6 ruletypes"> + <!-- <div class="col-lg-6 col-md-6 col-sm-6"> --> + <section id="panel-2" class="panel panel-primary" (click)="click('pr')"> + <!-- <section id="panel-2" class="panel panel-primary"> --> + <div class="panel-heading"> + <span style="font-size:20px">Data Profiling</span> + <span class="pull-right" style="font-size:20px"> <span class="fa fa-arrow-circle-right"></span> - </span> + </span> + </div> + <div class="swMain panel-body"> + <label class="label-definition">Definition: Data profiling is the process of examining the data available in an existing data set and collecting statistics and information about that data</label> + <ul style="border-radius:0; background: none"> + <li> + <a class="selected" style="cursor:default"> + <div class="stepNumber"> + 1 + </div> + <span class="stepDesc text-small"> Choose Target </span> + </a> + </li> + <li> + <a style="cursor:default"> + <div class="stepNumber"> + 2 + </div> + <span class="stepDesc text-small">Define/Select Models </span> + </a> + </li> + <li> + <a style="cursor:default"> + <div class="stepNumber"> + 3 + </div> + <span class="stepDesc text-small"> Configuration </span> + </a> + </li> + </ul> + <div> + <ol> + <li>Select the target dataset and fields which want to be checked</li> + <li>Define your syntax check logic which will be applied on the selected fields</li> + <li>Set basic configuration for your model(name, system, threshold, etc.)</li> + </ol> </div> - <div class="swMain panel-body" > - <label class="label-definition">Definition: Data profiling is the process of examining the data available in an existing data set and collecting statistics and information about that data</label> - <ul style="border-radius:0; background: none"> - <li > - <a class="selected" style="cursor:default"> - <div class="stepNumber"> - 1 - </div> - <span class="stepDesc text-small"> Choose Target </span> - </a> - </li> - <li> - <a style="cursor:default" > - <div class="stepNumber"> - 2 - </div> - <span class="stepDesc text-small">Define/Select Models </span> - </a> - </li> - <li > - <a style="cursor:default" > - <div class="stepNumber"> - 3 - </div> - <span class="stepDesc text-small"> Configuration </span> - </a> - </li> - </ul> - <div> - <ol> - <li>Select the target dataset and fields which want to be checked</li> - <li>Define your syntax check logic which will be applied on the selected fields</li> - <li>Set basic configuration for your model(name, system, threshold, etc.)</li> - </ol> - </div> - </div> - <div class="panel-footer stepDesc"> - <label>Example:</label> Check the data range(minimum, maximum) within a set of allowable values - </div> - </section> - </div> - </div><!--//row--> + </div> + <div class="panel-footer stepDesc"> + <label>Example:</label> Check the data range(minimum, maximum) within a set of allowable values + </div> + </section> + </div> + </div> + <!--//row--> </div> http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a714b60c/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 ea89cf2..bbfb830 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,7 +16,7 @@ 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'; +import { Component, OnInit, AfterViewInit } from '@angular/core'; import { FormControl} from '@angular/forms'; import { FormsModule } from '@angular/forms'; @@ -32,21 +32,17 @@ import { Router} from "@angular/router"; templateUrl: './create-measure.component.html', styleUrls: ['./create-measure.component.css'] }) -export class CreateMeasureComponent implements OnInit { +export class CreateMeasureComponent implements AfterViewInit { constructor(private router:Router) { } - - ngOnInit() { - $('#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()}); - - } 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()}); + } } http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a714b60c/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 41cca61..058e373 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 @@ -65,12 +65,12 @@ under the License. Select attributes </legend> <div class="y-scrollable"> - <div> + <div style="margin-top:10px;"> <label>View schema:</label> - <i style="color:#fff;font-weight: bold;">{{currentDB}}.{{currentTable}} + <i style="color:#fff;font-weight: bold;">{{currentDBstr}}{{currentTable}} </i> </div> - <div> + <div style="margin-top:5px;"> <table class="table table-striped no-border"> <thead> <tr style="background-color:#7D95CC"> @@ -112,12 +112,13 @@ under the License. <label class="stepDesc">Please choose one of the profiling models provided below:</label> <div class="container-fluid" id="notshowrule"> <div class="col-md-12 col-lg-12 col-sm-12"> - <fieldset style="max-height:400px;overflow-y:scroll"> + <!-- <fieldset style="max-height:400px;overflow-y:scroll;"> --> + <fieldset> <div class="y-scrollable"> <div style="display:block"> - <label style="color:#888888">View schema:</label> <i style="color:#fff;font-weight: bold;">{{currentDB}}.{{currentTable}}</i> + <label style="margin-left:15px">View schema:</label> <i style="color:#fff;font-weight: bold;">{{currentDB}}.{{currentTable}}</i> </div> - <div class="col-md-12 col-lg-12 col-sm-12" style="z-index:100"> + <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"> @@ -151,17 +152,17 @@ under the License. </button> </div> </div> - </div> - <div class="container-fluid" id="showrule" style="display:none;"> - <div class="col-md-12 col-lg-12 col-sm-12"> - <fieldset> - <app-rule></app-rule> - </fieldset> - </div> - <div class="form-group btn-container"> - <button class="btn btn-primary btn-o back-step btn-wide pull-left" (click)="back()"> - <i class="fa fa-arrow-circle-left"></i> Back - </button> + <div class="container-fluid formStep" id="showrule" style="display:none;"> + <div class="col-md-12 col-lg-12 col-sm-12"> + <fieldset> + <app-rule></app-rule> + </fieldset> + </div> + <div class="form-group btn-container"> + <button class="btn btn-primary btn-o back-step btn-wide pull-left" (click)="back()"> + <i class="fa fa-arrow-circle-left"></i> Back + </button> + </div> </div> </div> <div id="step-3" *ngIf="currentStep == 3" class="formStep"> @@ -173,7 +174,7 @@ under the License. Required Information </legend> <div class="y-scrollable"> - <div class="col-md-12 col-lg-12 col-sm-12"> + <div class="col-md-12 col-lg-12 col-sm-12" style="margin-top:30px;"> <div class="form-group" [ngClass]="{'has-error':prName.dirty&&prName.invalid, 'has-success':prName.valid}"> <label class="col-md-2 col-lg-2 col-sm-2 control-label"> Measure Name<span class="symbol required"></span>: @@ -187,6 +188,16 @@ under the License. </div> <div class="col-md-12 col-lg-12 col-sm-12"> <div class="form-group"> + <label class="col-md-2 col-lg-2 col-sm-2 control-label"> + Measure Description: + </label> + <div class="col-md-10 col-lg-10 col-sm-10 "> + <input type="text" class="form-control" [(ngModel)]="desc" placeholder="Please input detailed description of your measure" name="desc"> + </div> + </div> + </div> + <div class="col-md-12 col-lg-12 col-sm-12"> + <div class="form-group"> <label for="typeSelector" class="col-md-2 col-lg-2 col-sm-2 control-label"> Measure Type: </label> @@ -200,10 +211,10 @@ under the License. <div class="col-md-12 col-lg-12 col-sm-12"> <div class="form-group"> <label for="systemSelector" class="col-md-2 col-lg-2 col-sm-2 control-label"> - Organization: + Organization<span class="symbol required"></span>: </label> <div class="col-md-10 col-lg-10 col-sm-10 "> - <input type="text" id="systemSelector" class="form-control" required ng-pattern="'([0-9a-zA-Z\\_\\-])+'" name="org" value="{{currentDB}}" disabled> + <input type="text" id="systemSelector" class="form-control" required ng-pattern="'([0-9a-zA-Z\\_\\-])+'" name="org" [(ngModel)]="org"> </div> </div> </div> @@ -217,17 +228,16 @@ under the License. </div> </div> </div> - <!-- <div class="col-md-12 col-lg-12 col-sm-12"> - <div class="form-group"> - <label class="col-md-2 col-lg-2 col-sm-2 control-label"> - Owner: - </label> - <div class="col-md-10 col-lg-10 col-sm-10"> - <input type="text" class="form-control" name="owner" disabled - [(ngModel)]="owner" > - </div> + <div class="col-md-12 col-lg-12 col-sm-12"> + <div class="form-group"> + <label class="col-md-2 col-lg-2 col-sm-2 control-label"> + Owner: + </label> + <div class="col-md-10 col-lg-10 col-sm-10"> + <input type="text" class="form-control" name="owner" disabled [(ngModel)]="owner"> </div> - </div> --> + </div> + </div> </div> <div style="color:#b2c831"> <p> @@ -272,6 +282,14 @@ under the License. </div> <div class="row"> <label class="col-md-4 col-lg-4 col-sm-4"> + Measure Description: + </label> + <div class="col-md-8 col-lg-8 col-sm-8 "> + {{desc}} + </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 "> @@ -283,7 +301,7 @@ under the License. Organization: </label> <div class="col-md-8 col-lg-8 col-sm-8 "> - {{currentDB}} + {{org}} </div> </div> <div class="row"> @@ -294,14 +312,14 @@ under the License. {{currentTable}} </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" > - {{owner}} - </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"> + {{owner}} + </div> + </div> </div> </div> </div> @@ -316,30 +334,6 @@ under the License. {{index}} </div> <br/> - <!-- <h5 class="row">Mapping rules</h5> --> - <!-- <div class="row"> - <p>{{rules}}</p> - <p> - <label style="color:#B2C831">Accuracy Calculation Formula as Below:</label> - </p> - <div class="col-md-12 col-lg-12 col-sm-12" style="color:#fff;font-size:16px;display: flex; align-items: center"> - <div class="" style="text-align:right;display:block;float:left;width:20%;"> - Accuracy Rate(%) = - </div> - <div class="" style="text-align:center;display:block;float:left;margin:0 10px 0 10px"> - <div class="formula-text-up" style="border-bottom:1px solid;"> - Total Count of Matched records between <span class="badge">{{selectionTarget.length}}</span> <span style="color:green;">{{currentTableTarget}}</span> and <span class="badge">{{mappings.length}} - </span> <span style="color:green;">{{currentTable}}</span> fields - </div> - <div> - Total Count of records in <span style="color:green;font-weight:bold;">{{currentDB}}.{{currentTable}}</span> - </div> - </div> - <div class="" style="text-align:left;display:block;float:left;width:10%;"> - x 100% - </div> - </div> - </div> --> </div> </div> <div class="modal-footer"> http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a714b60c/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 98d1c86..b49f55c 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 @@ -27,7 +27,7 @@ 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 { AfterViewChecked, ElementRef} from '@angular/core'; import { AngularMultiSelectModule } from 'angular2-multiselect-dropdown/angular2-multiselect-dropdown'; @@ -43,38 +43,6 @@ 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 - // } - // ]; } class Col{ @@ -99,8 +67,7 @@ class Col{ this.groupby = ''; this.rules = []; this.RE = ''; - this.newRules = [ - ]; + this.newRules = []; var patt = new RegExp('int|double|float/i'); if(patt.test(this.type)){ @@ -116,8 +83,9 @@ class Col{ providers:[ServiceService], styleUrls: ['./pr.component.css'] }) -export class PrComponent implements OnInit { +export class PrComponent implements AfterViewChecked, OnInit{ + org:string; transrule = []; transenumrule = []; transnullrule = []; @@ -136,9 +104,15 @@ export class PrComponent implements OnInit { totallen = 0; type = 'profiling'; data:any; + desc:string; + owner = 'test'; + currentDBstr: string; newMeasure = { "name": "", "process.type": "batch", + "owner":"", + "description":"", + "organization":"", "data.sources": [ { "name": "source", @@ -159,8 +133,12 @@ export class PrComponent implements OnInit { { "dsl.type": "griffin-dsl", "dq.type": "profiling", - "rule": "" - // "details": {} + "rule": "", + "details": { + // "profiling": { + // "name": "" + // } + } } ] } @@ -187,55 +165,47 @@ export class PrComponent implements OnInit { } } -onResize(event){ - this.resizeWindow(); + onResize(event){ + this.resizeWindow(); } -resizeWindow(){ + resizeWindow(){ var stepSelection = '.formStep'; $(stepSelection).css({ - height: window.innerHeight - $(stepSelection).offset().top - $('#footerwrap').outerHeight() + // height: window.innerHeight - $(stepSelection).offset().top - $('#footerwrap').outerHeight() + height: window.innerHeight - $(stepSelection).offset().top }); - $('fieldset').height($(stepSelection).height() - $(stepSelection + '>.stepDesc').height() - $('.btn-container').height() - 80); + $('fieldset').height($(stepSelection).height() - $(stepSelection + '>.stepDesc').height() - $('.btn-container').height() - 130); $('.y-scrollable').css({ - 'max-height': $('fieldset').height()- $('.add-dataset').outerHeight() + // 'max-height': $('fieldset').height()- $('.add-dataset').outerHeight() + 'height': $('fieldset').height() }); } - // 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"} - ]; + {"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"} - ]; + {"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"} + ]; } } } @@ -243,17 +213,26 @@ resizeWindow(){ 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; - this.selectedItems[row.name] = []; + this.selectedAll = false; + for(let key in this.selectedItems){ + if(key === row.name){ + delete this.selectedItems[key]; + } + } + //this.selectedItems[row.name] = []; } // is newly selected else { - this.selection.push(row); + this.selection.push(row); + } + if(this.selection.length == 3){ + this.selectedAll = true; + }else{ + this.selectedAll = false; } this.setDropdownList(); }; @@ -264,7 +243,7 @@ resizeWindow(){ for(var i =0; i < this.schemaCollection.length; i ++){ this.schemaCollection[i].selected = this.selectedAll; if (this.selectedAll) { - this.selection.push(this.schemaCollection[i]); + this.selection.push(this.schemaCollection[i]); } } this.setDropdownList(); @@ -291,31 +270,7 @@ resizeWindow(){ case 'Average': return 'avg(source.`'+col.name+'`) AS `'+col.name+'-average`'; case 'Enum Detection Count': - 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': - // return 'SELECT COUNT(*) FROM source'; - // case 'distinct count': - // return 'SELECT DISTINCT COUNT(source.'+col.name+') FROM source'; - // case 'null detection count': - // return 'SELECT COUNT(source.'+col.name+') FROM source WHERE source.'+col.name+' is null'; - // case 'regular expression detection count': - // return 'SELECT COUNT(source.'+col.name+') FROM source WHERE source.'+col.name+' like '+col.RE; - // case 'rule detection count': - // return 'SELECT COUNT(source.'+col.name+') FROM source WHERE source.'+col.name+' like '; - // case 'max': - // return 'SELECT max(source.'+col.name+') FROM source'; - // case 'min': - // return 'SELECT min(source.'+col.name+') FROM source'; - // case 'median': - // return 'SELECT median(source.'+col.name+') FROM source'; - // case 'avg': - // return 'SELECT average(source.'+col.name+') FROM source'; - // case 'enum detection group count': - // return 'source.'+col.name+' group by source.'+col.name+''; - // case 'groupby count': - // return 'source.'+col.name+' group by source.'+col.name+' '+col.groupby; + return 'source.`'+col.name+'`,count(*) AS `'+col.name+'-grp` GROUP BY source.`'+col.name+'`'; } } @@ -324,24 +279,27 @@ resizeWindow(){ this.currentStep++; }else{ this.toasterService.pop('error','Error!','Please select at least one attribute!'); - return false; + return false; } } formValidation = function(step) { if (step == undefined) { - step = this.currentStep; + step = this.currentStep; } if (step == 1) { - return this.selection && this.selection.length > 0; + return this.selection && this.selection.length > 0; } else if (step == 2) { var len = 0; - console.log(this.selection); - console.log(this.selectedItems); + var selectedlen = 0; for(let key in this.selectedItems){ - len += this.selectedItems[key].length; + selectedlen ++; + len = this.selectedItems[key].length; + if(len == 0){ + return false; + } } - return (this.selection.length == len) ? true :false; + return (this.selection.length == selectedlen) ? true :false; } else if (step == 3) { } return false; @@ -355,13 +313,16 @@ resizeWindow(){ } submit (form) { // form.$setPristine(); - // if (!form.valid) { - // this.toasterService.pop('error', 'Error!', 'please complete the form in this step before proceeding'); - // return false; - // } + if (!form.valid) { + this.toasterService.pop('error', 'Error!', 'please complete the form in this step before proceeding'); + return false; + } this.newMeasure = { "name": this.name, "process.type": "batch", + "owner":this.owner, + "description":this.desc, + "organization":this.org, "data.sources": [ { "name": "source", @@ -382,8 +343,8 @@ resizeWindow(){ // { // "dsl.type": "griffin-dsl", // "dq.type": "profiling", - // "rule": "" - // "details": {} + // "rule": "", + // "details": {} // } ] } @@ -393,23 +354,56 @@ resizeWindow(){ setTimeout(() => this.visibleAnimate = true, 100); } - getRule(trans){ - var self = this; + getRule(trans){ var rule = ''; for(let i of trans){ rule = rule + i + ','; } rule = rule.substring(0,rule.lastIndexOf(',')); + this.pushRule(rule); + } + + pushEnmRule(rule,grpname){ + var self = this; self.newMeasure.evaluateRule.rules.push({ "dsl.type": "griffin-dsl", "dq.type": "profiling", "rule": rule, - // "details": {} + "details": { + "profiling": { + "name": grpname, + "persist.type": "metric" + } + } + }); + } + + pushNullRule(rule,nullname){ + var self = this; + self.newMeasure.evaluateRule.rules.push({ + "dsl.type": "griffin-dsl", + "dq.type": "profiling", + "rule": rule, + "details": { + "profiling": { + "name": nullname, + "persist.type": "metric" + } + } + }); + } + + pushRule(rule){ + var self = this; + self.newMeasure.evaluateRule.rules.push({ + "dsl.type": "griffin-dsl", + "dq.type": "profiling", + "rule": rule, + "details": {} }); } save() { - console.log(this.newMeasure); var addModels = this.serviceService.config.uri.addModels; this.http .post(addModels, this.newMeasure) @@ -422,124 +416,6 @@ resizeWindow(){ console.log('Something went wrong!'); }); } - - // data: { [key: string]: Array<object>; } = { - // "default": [ - // { - // "tableName": "ext", - // "dbName": "default", - // "owner": "hadoop", - // "createTime": 1488353464, - // "lastAccessTime": 0, - // "retention": 0, - // "sd": { - // "cols": [ - // { - // "name": "id", - // "type": "int", - // "comment": null, - // "setName": true, - // "setComment": false, - // "setType": true - // }, - // { - // "name": "name", - // "type": "string", - // "comment": null, - // "setName": true, - // "setComment": false, - // "setType": true - // }, - // { - // "name": "age", - // "type": "int", - // "comment": null, - // "setName": true, - // "setComment": false, - // "setType": true - // } - // ], - // "location": "hdfs://10.9.246.187/user/hive/ext", - // }, - // }, - // { - // "tableName": "ext1", - // "dbName": "default", - // "owner": "hadoop", - // "createTime": 1489382943, - // "lastAccessTime": 0, - // "retention": 0, - // "sd": { - // "cols": [ - // { - // "name": "id", - // "type": "int", - // "comment": null, - // "setName": true, - // "setComment": false, - // "setType": true - // }, - // { - // "name": "name", - // "type": "string", - // "comment": null, - // "setName": true, - // "setComment": false, - // "setType": true - // }, - // { - // "name": "age", - // "type": "int", - // "comment": null, - // "setName": true, - // "setComment": false, - // "setType": true - // } - // ], - // "location": "hdfs://10.9.246.187/user/hive/ext1", - // }, - // } - // ], - // "griffin": [ - // { - // "tableName": "avr_out", - // "dbName": "griffin", - // "owner": "hadoop", - // "createTime": 1493892603, - // "lastAccessTime": 0, - // "retention": 0, - // "sd": { - // "cols": [ - // { - // "name": "id", - // "type": "bigint", - // "comment": null, - // "setName": true, - // "setComment": false, - // "setType": true - // }, - // { - // "name": "age", - // "type": "int", - // "comment": null, - // "setName": true, - // "setComment": false, - // "setType": true - // }, - // { - // "name": "desc", - // "type": "string", - // "comment": null, - // "setName": true, - // "setComment": false, - // "setType": true - // } - // ], - // "location": "hdfs://10.9.246.187/griffin/data/batch/avr_out", - // }, - // } - // ], - // }; options: ITreeOptions = { displayField: 'name', @@ -550,7 +426,10 @@ resizeWindow(){ click: (tree, node, $event) => { if (node.hasChildren) { this.currentDB = node.data.name; + this.currentDBstr = this.currentDB + '.'; this.currentTable = ''; + this.schemaCollection = []; + this.selectedAll = false; TREE_ACTIONS.TOGGLE_EXPANDED(tree, node, $event); } else if(node.data.cols) @@ -558,6 +437,11 @@ resizeWindow(){ this.currentTable = node.data.name; this.currentDB = node.data.parent; this.schemaCollection = node.data.cols; + this.selectedAll = false; + this.selection = []; + for(let row of this.schemaCollection){ + row.selected = false; + } } } } @@ -582,25 +466,33 @@ resizeWindow(){ getGrouprule(){ var selected = {name: ''}; var value = ''; + var nullvalue = ''; + var nullname = ''; + var enmvalue = ''; + var grpname = ''; 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); + if(originrule == 'Enum Detection Count'){ + enmvalue = this.transferRule(originrule,selected); + grpname = selected.name + '-grp'; + this.transenumrule.push(enmvalue); + this.pushEnmRule(enmvalue,grpname); }else if(originrule == 'Null Count'){ - value = this.transferRule(originrule,selected); - this.transnullrule.push(value); + nullvalue = this.transferRule(originrule,selected); + nullname = selected.name + '-nullct'; + this.transnullrule.push(nullvalue); + this.pushNullRule(nullvalue,nullname); }else{ value = this.transferRule(originrule,selected); this.transrule.push(value); } } } - this.getRule(this.transenumrule); - this.getRule(this.transnullrule); - this.getRule(this.transrule); + if(this.transrule.length != 0){ + this.getRule(this.transrule); + } } // OnItemDeSelect(item){ @@ -654,18 +546,18 @@ resizeWindow(){ }); this.dropdownSettings = { - singleSelection: false, - text:"Select Rule", - // selectAllText:'Select All', - // unSelectAllText:'UnSelect All', - // badgeShowLimit: 5, - enableCheckAll: false, - enableSearchFilter: true, - classes: "myclass", - groupBy: "category" - }; - - - + singleSelection: false, + text:"Select Rule", + // selectAllText:'Select All', + // unSelectAllText:'UnSelect All', + // badgeShowLimit: 5, + enableCheckAll: false, + enableSearchFilter: true, + classes: "myclass", + groupBy: "category" + }; }; -} + ngAfterViewChecked(){ + this.resizeWindow(); + } +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a714b60c/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 index 60750ce..49fa7b4 100644 --- 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 @@ -27,3 +27,23 @@ mark{ h5{ font-size: 20px; } +.y-scrollable::-webkit-scrollbar-track +{ + -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); + border-radius: 10px; + background-color: #F5F5F5; +} + +.y-scrollable::-webkit-scrollbar +{ + width: 5px; + border-radius: 10px; + background-color: #F5F5F5; +} + +.y-scrollable::-webkit-scrollbar-thumb +{ + border-radius: 10px; + -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); + background-color: #AAAAAA; +} http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a714b60c/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 index 806cbdf..eceb302 100644 --- 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 @@ -945,11 +945,11 @@ under the License. <p class="text-left"> The result is: <br> - <kbd>COUNTRY |COUNT(CUSTOMERID) + <kbd>COUNTRY |COUNT(CUSTOMERID) <br> Germany|2 <br> Mexico |2 - <br> China |2 - <br> UK |1 + <br> China |2 + <br> UK |1 <br> Sweden |1</kbd> </p> </div> http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a714b60c/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 0b4ed62..857cbca 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 @@ -16,90 +16,92 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> - <div class="container-fluid" id="viewruleContent"> - <div class="row"> - <h5 class="over-title margin-bottom-15">View Measure</h5> - </div><!--//row--> - <div class="row"> - <div class="col-sm-6 col-xs-12"> - <div id="viewruleDefinition" class="viewrule-content"> - <div class="row"> - <label class="col-xs-4"> - Measure Name: - </label> - <div class="col-xs-8 " style="color: #fff"> - {{ruleData.name}} - </div> - </div> - <div class="row"> - <label class="col-xs-4"> - Measure Description: - </label> - <div class="col-xs-8 " style="color: #fff"> - {{ruleData.description}} - </div> - </div> - <div class="row"> - <label class="col-xs-4"> - Measure Type: - </label> - <div class="col-xs-8 " style="color: #fff"> - {{ruleData.type}} - </div> - </div> - <div class="row"> - <label for="systemSelector" class="col-xs-4"> - Organization: - </label> - <div class="col-xs-8 " style="color: #fff"> - {{ruleData.organization}} - </div> - </div> - <div class="row"> - <label class="col-xs-4"> - DataAsset: - </label> - <div class="col-xs-8" style="color: #fff"> - {{sourceTable}} {{targetTable}} - </div> - </div> - <div class="row"> - <label class="col-xs-4"> - Owner: - </label> - <div class="col-xs-8" style="color: #fff"> - {{ruleData.owner}} - </div> - </div> - </div> + <div class="row"> + <h5 class="over-title margin-bottom-15">View Measure</h5> + </div> + <!--//row--> + <div class="row"> + <div class="col-sm-6 col-xs-12"> + <div id="viewruleDefinition" class="viewrule-content"> + <div class="row"> + <label class="col-xs-4"> + Measure Name: + </label> + <div class="col-xs-8 " style="color: #fff"> + {{ruleData.name}} + </div> + </div> + <div class="row"> + <label class="col-xs-4"> + Measure Description: + </label> + <div class="col-xs-8 " style="color: #fff"> + {{ruleData.description}} + </div> + </div> + <div class="row"> + <label class="col-xs-4"> + Measure Type: + </label> + <div class="col-xs-8 " style="color: #fff"> + {{ruleData.type}} + </div> + </div> + <div class="row"> + <label for="systemSelector" class="col-xs-4"> + Organization: + </label> + <div class="col-xs-8 " style="color: #fff"> + {{ruleData.organization}} + </div> </div> - </div><!--//row--> - <br/> - <div ng-if="ruleData.type=='accuracy'"><!--Accuracy--> - <h5 class="row">Mapping rules</h5> - <div class=""> - <p>{{currentrule}}</p> - <p> - <label style="color:#B2C831">Accuracy Calculation Formula as Below:</label> - </p> - <div class="col-md-12 col-lg-12 col-sm-12" style="color:#fff;font-size:16px;display: flex;align-items: center"> - <div class="" style="text-align:right;display:block;float:left;width:20%;"> - Accuracy Rate(%) = - </div> - <div class="" style="text-align:center;display:block;float:left;margin:0 10px 0 10px"> - <div class="formula-text-up" style="border-bottom:1px solid;"> - Total Count of Matched records between <span class="badge">{{sourceLength}}</span> <span style="color:green;">{{targetTable}}</span> and <span class="badge">{{sourceLength}}</span> <span style="color:green;">{{sourceTable}}</span> fields - </div> - <div class=""> - Total Count of records in <span style="color:green;font-weight:bold;">{{targetDB}} {{targetTable}}</span> - </div> - </div> - <div class="" style="text-align:left;display:block;float:left;width:10%;"> - x 100% - </div> + <div class="row"> + <label class="col-xs-4"> + DataAsset: + </label> + <div class="col-xs-8" style="color: #fff"> + {{sourceTable}} {{targetTable}} + </div> + </div> + <div class="row"> + <label class="col-xs-4"> + Owner: + </label> + <div class="col-xs-8" style="color: #fff"> + {{ruleData.owner}} + </div> + </div> + </div> + </div> + </div> + <!--//row--> + <br/> + <div> + <h5 class="row">Mapping rules</h5> + <div class=""> + <p *ngFor="let index of currentrule">{{index.rule}}</p> + <div *ngIf="ruleData.type=='accuracy'"> + <p> + <label style="color:#B2C831">Accuracy Calculation Formula as Below:</label> + </p> + <div class="col-md-12 col-lg-12 col-sm-12" style="color:#fff;font-size:16px;display: flex;align-items: center"> + <div class="" style="text-align:right;display:block;float:left;width:20%;"> + Accuracy Rate(%) = + </div> + <div class="" style="text-align:center;display:block;float:left;margin:0 10px 0 10px"> + <div class="formula-text-up" style="border-bottom:1px solid;"> + Total Count of Matched records between <span class="badge">{{sourceLength}}</span> <span style="color:green;">{{targetTable}}</span> and <span class="badge">{{sourceLength}}</span> <span style="color:green;">{{sourceTable}}</span> fields + </div> + <div class=""> + Total Count of records in <span style="color:green;font-weight:bold;">{{targetDB}} {{targetTable}}</span> </div> + </div> + <div class="" style="text-align:left;display:block;float:left;width:10%;"> + x 100% + </div> </div> + </div> </div> + </div> </div> - \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a714b60c/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 463b7c9..68f70a2 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 @@ -50,24 +50,26 @@ export class MeasureDetailComponent implements OnInit { var getModelUrl; 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; - 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; - this.sourceTable = this.ruleData["data.sources"][0].connectors[0].config["table.name"]; - this.targetTable = this.ruleData["data.sources"][1].connectors[0].config["table.name"]; - this.ruleData.type = this.ruleData.evaluateRule.rules[0]["dq.type"] - },err => { - console.log('error'); - // toaster.pop('error', 'Error when geting record', response.message); - }); + this.http.get(getModelUrl).subscribe(data=>{ + this.ruleData = data; + this.currentrule = this.ruleData.evaluateRule.rules; + this.ruleData.type = this.currentrule[0]["dq.type"]; + var sourcedata = this.ruleData["data.sources"][0].connectors[0].config; + this.sourceDB = sourcedata.database; + this.sourceTable = sourcedata["table.name"]; + if(this.ruleData.type === "accuracy"){ + var targetdata = this.ruleData["data.sources"][1].connectors[0].config; + this.targetDB = targetdata.database; + this.targetTable = targetdata["table.name"]; + }else{ + this.targetDB = ''; + this.targetTable = ''; + } + },err => { + console.log('error'); + // toaster.pop('error', 'Error when geting record', response.message); + }); } } http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a714b60c/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 66bd01c..8d0edd2 100644 --- a/ui/angular/src/app/measure/measure.component.css +++ b/ui/angular/src/app/measure/measure.component.css @@ -28,7 +28,7 @@ under the License. color: #fff; position: absolute; left: 50%; - top: 80%; + top: 20%; } #measureTable{ http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a714b60c/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 ee8cabd..de70a43 100644 --- a/ui/angular/src/app/measure/measure.component.ts +++ b/ui/angular/src/app/measure/measure.component.ts @@ -42,8 +42,8 @@ export class MeasureComponent implements OnInit { public visible = false; public visibleAnimate = false; deletedRow : any; - // sourceTable :string; - // targetTable :string; + sourceTable :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"}]; @@ -68,8 +68,14 @@ export class MeasureComponent implements OnInit { this.deleteId = row.id; this.deleteIndex = this.results.indexOf(row); this.deletedRow = row; - // this.sourceTable = this.deletedRow.source.config["table.name"]; - // this.targetTable = this.deletedRow.target.config["table.name"]; + var sourcedata = this.deletedRow["data.sources"][0].connectors[0].config; + this.sourceTable = sourcedata["table.name"]; + if(this.deletedRow.type === "accuracy"){ + var targetdata = this.deletedRow["data.sources"][1].connectors[0].config; + this.targetTable = targetdata["table.name"]; + }else{ + this.targetTable = ''; + } } confirmDelete(){ @@ -77,7 +83,6 @@ export class MeasureComponent implements OnInit { let deleteUrl = deleteModel + '/' + this.deleteId; this.http.delete(deleteUrl).subscribe(data => { let deleteResult:any = data; - console.log(deleteResult.code); if(deleteResult.code==202){ var self = this; setTimeout(function () { @@ -92,18 +97,18 @@ export class MeasureComponent implements OnInit { ngOnInit():void { var allModels = this.serviceService.config.uri.allModels; this.http.get(allModels).subscribe(data =>{ - for(let measure in data){ - data[measure].trueName = data[measure].name; - if(data[measure].evaluateRule.rules[0]){ - data[measure].type = data[measure].evaluateRule.rules[0]["dq.type"]; - }else{ - data[measure].type = ''; - } + for(let measure in data){ + data[measure].trueName = data[measure].name; + 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]; - return measure; - }); + } + this.results = Object.keys(data).map(function(index){ + let measure = data[index]; + return measure; + }); }); // }; // } http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a714b60c/ui/angular/src/app/metric/detail-metric/detail-metric.component.html ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/metric/detail-metric/detail-metric.component.html b/ui/angular/src/app/metric/detail-metric/detail-metric.component.html index d836f2d..0359ac9 100644 --- a/ui/angular/src/app/metric/detail-metric/detail-metric.component.html +++ b/ui/angular/src/app/metric/detail-metric/detail-metric.component.html @@ -16,13 +16,12 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> - -<div id="bigChartContainer" class="big-chart-container" (window:resize)="onResize($event)" style="display:none;"> - <div id="bigChartShow" class="big-chart-content"> - <div class="container-fluid"> - <div class="row"> - <div id="bigChartDiv" echarts [options]="chartOption" ></div> - </div> - </div> +<div id="bigChartContainer" class="big-chart-container" (window:resize)="onResize($event)" style="display:none;"> + <div id="bigChartShow" class="big-chart-content"> + <div class="container-fluid"> + <div class="row"> + <div id="bigChartDiv" echarts [options]="chartOption"></div> + </div> </div> -</div> \ No newline at end of file + </div> +</div> http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a714b60c/ui/angular/src/app/metric/detail-metric/detail-metric.component.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/metric/detail-metric/detail-metric.component.ts b/ui/angular/src/app/metric/detail-metric/detail-metric.component.ts index 1cb2038..dca8ae4 100644 --- a/ui/angular/src/app/metric/detail-metric/detail-metric.component.ts +++ b/ui/angular/src/app/metric/detail-metric/detail-metric.component.ts @@ -83,7 +83,7 @@ export class DetailMetricComponent implements OnInit { } onResize(event){ - this.resizeTreeMap(); + this.resizeTreeMap(); } resizeTreeMap(){ http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a714b60c/ui/angular/src/app/metric/metric.component.css ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/metric/metric.component.css b/ui/angular/src/app/metric/metric.component.css index 94d8ebc..c04b653 100644 --- a/ui/angular/src/app/metric/metric.component.css +++ b/ui/angular/src/app/metric/metric.component.css @@ -33,4 +33,32 @@ under the License. background-color: #d1d3d2; display: inline-block; margin-left: 10px; -} \ No newline at end of file +} + +#dashboard{ + overflow-y:auto; + height:680px; + overflow-x: hidden; + padding-right: 10px; +} + +#dashboard::-webkit-scrollbar-track +{ + -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); + border-radius: 10px; + background-color: #F5F5F5; +} + +#dashboard::-webkit-scrollbar +{ + width: 7px; + border-radius: 10px; + background-color: #F5F5F5; +} + +#dashboard::-webkit-scrollbar-thumb +{ + border-radius: 2px; + -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); + background-color: #ADADAD; +} http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a714b60c/ui/angular/src/app/metric/metric.component.html ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/metric/metric.component.html b/ui/angular/src/app/metric/metric.component.html index 004cc91..afca42b 100644 --- a/ui/angular/src/app/metric/metric.component.html +++ b/ui/angular/src/app/metric/metric.component.html @@ -16,45 +16,39 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> - -<div id="dashboard" class="bs-component" > - <div class="container-fluid"> - <div class="row col-lg-12" style="margin-top: 15px;"> - <div class="form-group"> - <span> - <label>Organization: </label> - <select ng-disabled="orgSelectDisabled" class="form-control" (change)="changeOrg()" id="orgSelector" [(ngModel)]="selectedOrgIndex"> - <option value="0">-- All --</option> - <option *ngFor="let opt of orgs;let m = index" value="{{m+1}}" >{{opt.name}}</option> - </select> - </span> - <span style="padding-left:30px;"> - <label>Measure: </label> - <select class="form-control" (change)="changeMeasure()" [(ngModel)]="selectedMeasureIndex" id="measureSelector"> - <option value="0"> -- All -- </option> - <option *ngFor="let opt of measureOptions;let n = index" value="{{n+1}}">{{opt}}</option> - </select> - </span> - </div> - </div> - <div *ngFor="let outerItems of oData;let parent=index"> - <div class="row" > - <div class="col-sm-12 col-md-12 col-lg-12"> - <h4>{{outerItems.name}}</h4> - </div> - </div> - <div class="row"> - <div class="col-sm-6 col-md-4 col-xs-12 col-lg-3 chartItem" *ngFor="let items of outerItems.metrics;let i=index;" style="margin-bottom:30px;"> - <div class="row-fluid" style="cursor: pointer;"> - <div id="thumbnail{{parent}}-{{i}}" class="thumb-chart" style="border: 2px solid;" echarts [options]="getOption(parent,i)" (click)="goTo(parent,i)"></div> - <!-- <p class="text-right"> - <a href (click)="getSample(items)" style="font-size: 11px;"> - <u>Download Sample</u> - </a> - </p> --> - </div> - </div> - </div> - </div> - </div> -</div> \ No newline at end of file +<div id="dashboard" class="bs-component"> + <div class="container-fluid"> + <div class="row col-lg-12" style="margin-top: 15px;"> + <div class="form-group"> + <span> + <label>Organization: </label> + <select ng-disabled="orgSelectDisabled" class="form-control" (change)="changeOrg()" id="orgSelector" [(ngModel)]="selectedOrgIndex"> + <option value="0">-- All --</option> + <option *ngFor="let opt of orgs;let m = index" value="{{m+1}}" >{{opt.name}}</option> + </select> + </span> + <span style="padding-left:30px;"> + <label>Measure: </label> + <select class="form-control" (change)="changeMeasure()" [(ngModel)]="selectedMeasureIndex" id="measureSelector"> + <option value="0"> -- All -- </option> + <option *ngFor="let opt of measureOptions;let n = index" value="{{n+1}}">{{opt}}</option> + </select> + </span> + </div> + </div> + <div *ngFor="let outerItems of oData;let parent=index"> + <div class="row"> + <div class="col-sm-12 col-md-12 col-lg-12"> + <h4>{{outerItems.name}}</h4> + </div> + </div> + <div class="row"> + <div class="col-sm-6 col-md-4 col-xs-12 col-lg-3 chartItem" *ngFor="let items of outerItems.metrics;let i=index;" style="margin-bottom:30px;"> + <div class="row-fluid" style="cursor: pointer;"> + <div id="thumbnail{{parent}}-{{i}}" class="thumb-chart" style="border: 2px solid;" echarts [options]="getOption(parent,i)" (click)="goTo(parent,i)"></div> + </div> + </div> + </div> + </div> + </div> +</div>
