Repository: incubator-griffin Updated Branches: refs/heads/master f581db306 -> 2972aa2d0
Add partition configuration in measure detail page Add partition configuration in measure detail page Author: ahutsunshine <ahutsunsh...@gmail.com> Author: dodobel <1254288...@qq.com> Author: He Wang <wanghe...@qq.com> Closes #200 from dodobel/develop. Project: http://git-wip-us.apache.org/repos/asf/incubator-griffin/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-griffin/commit/2972aa2d Tree: http://git-wip-us.apache.org/repos/asf/incubator-griffin/tree/2972aa2d Diff: http://git-wip-us.apache.org/repos/asf/incubator-griffin/diff/2972aa2d Branch: refs/heads/master Commit: 2972aa2d08685449932147f42019b66411fcde21 Parents: f581db3 Author: dodobel <1254288...@qq.com> Authored: Fri Jan 26 14:22:40 2018 +0800 Committer: Lionel Liu <bhlx3l...@163.com> Committed: Fri Jan 26 14:22:40 2018 +0800 ---------------------------------------------------------------------- .../job/create-job/create-job.component.html | 73 +------- .../app/job/create-job/create-job.component.ts | 187 ++----------------- .../measure/create-measure/ac/ac.component.html | 164 ++++++++++------ .../measure/create-measure/ac/ac.component.ts | 32 ++-- .../measure/create-measure/pr/pr.component.html | 88 +++++---- .../measure/create-measure/pr/pr.component.ts | 57 +++--- .../measure-detail.component.html | 54 +++++- .../measure-detail/measure-detail.component.ts | 59 ++++-- .../src/app/measure/measure.component.html | 6 +- ui/angular/src/app/service/service.service.ts | 4 +- 10 files changed, 330 insertions(+), 394 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/2972aa2d/ui/angular/src/app/job/create-job/create-job.component.html ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/job/create-job/create-job.component.html b/ui/angular/src/app/job/create-job/create-job.component.html index 6e64f53..50f1b08 100644 --- a/ui/angular/src/app/job/create-job/create-job.component.html +++ b/ui/angular/src/app/job/create-job/create-job.component.html @@ -70,21 +70,8 @@ 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"> - Time Baseline: - </label> - <div class="col-md-10 col-lg-10 col-sm-10 "> - <select id="baseline" class="form-control" ngControl="name" required name="baseline" [(ngModel)]="baseline" > - <option *ngFor="let row of dropdownList" value="{{row.name}}">{{row.name}}</option> - </select> - </div> - </div> - </div> --> <div *ngFor="let connector of this.dropdownList; let i=index"> <div> - <!-- <input style="margin-left:30px" type="checkbox" [checked]="needrange[i]" (change)="needrange[i]=!needrange[i];"> --> <label style="padding-left: 30px;padding-top: 10px;"> please select data range for {{connector.name}} </label> @@ -92,22 +79,13 @@ under the License. <p style="margin-left:60px" class="setcolor"> <i class="fa fa-info-circle"></i> One step means a partition size,and {{connector.name}} partition size = {{connector.size}} </p> - <!-- <div class="col-md-12 col-lg-12 col-sm-12"> --> - <div class="col-md-11 col-lg-11 col-sm-11 center"> - begin : - <input type="number" class="setborder" value="{{ someKeyboard[i][0] }}" [(ngModel)]="someKeyboard[i][0]" max="0" name="begin{{i}}" (ngModelChange)="changeRange(index,someKeyboard[i][0],i)"> - end : - <input type="number" class="setborder" max="0" value="{{ someKeyboard[i][1] }}" [(ngModel)]="someKeyboard[i][1]" name="end{{i}}" (ngModelChange)="changeRange(1,$event,i)"> - </div> - <!-- <div> --> - <!-- <button class="btn-info col-md-1 col-lg-1 col-sm-1" style="margin-top: 6px;" (click)="updateSliderRange()"> - range - </button> --> - <nouislider class="col-md-11 col-lg-11 col-sm-11 center" id="slider{{i}}" #sliderRef name="slider{{i}}" [config]="someKeyboardConfig[i]" [(ngModel)]="someKeyboard[i]" (ngModelChange)="rangeChange($event,i)" (keyup)="blinkKeyupLabel()" (keydown)="blinkKeydownLabel()" style="margin-bottom: 5rem"></nouislider> - <!-- </div> --> - <!-- <div class="range">Range: {{ someKeyboard[i] | json }}</div> --> - - <!-- </div> --> + <div class="col-md-11 col-lg-11 col-sm-11 center"> + begin : + <input type="number" class="setborder" value="{{ someKeyboard[i][0] }}" [(ngModel)]="someKeyboard[i][0]" max="0" name="begin{{i}}" (ngModelChange)="changeRange(index,someKeyboard[i][0],i)"> + end : + <input type="number" class="setborder" max="0" value="{{ someKeyboard[i][1] }}" [(ngModel)]="someKeyboard[i][1]" name="end{{i}}" (ngModelChange)="changeRange(1,$event,i)"> + </div> + <nouislider class="col-md-11 col-lg-11 col-sm-11 center" id="slider{{i}}" #sliderRef name="slider{{i}}" [config]="someKeyboardConfig[i]" [(ngModel)]="someKeyboard[i]" (ngModelChange)="rangeChange($event,i)" (keyup)="blinkKeyupLabel()" (keydown)="blinkKeydownLabel()" style="margin-bottom: 5rem"></nouislider> </div> </div> <div class="setcolor"> @@ -122,10 +100,8 @@ under the License. <button class="btn btn-primary btn-o back-step btn-wide pull-left" (click)="prev()"> <i class="fa fa-arrow-circle-left"></i> Back </button> - <!-- <button class="btn btn-primary btn-o next-step btn-wide pull-right" (click)="form.submit(Form)"> --> <toaster-container></toaster-container> <button type="submit" class="btn btn-primary btn-o next-step btn-wide pull-right" (click)="submit(jobForm)"> - <!-- <button class="btn btn-primary btn-o next-step btn-wide pull-right" data-toggle="modal" data-target="#confirm"> --> Submit </button> </div> @@ -139,31 +115,13 @@ under the License. <h4 class="modal-title">Save the job with the below information?</h4> </div> <div class="modal-body"> - <!-- <ng-include src="'/pages/jobs/confirmation-ac.html'"/> --> <div class="container-fluid" id="viewJobContent" 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"> - <label class="col-md-4 col-lg-4 col-sm-4"> - Source Pattern: - </label> - <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff"> - {{sourcePat}} - </div> - </div> - <div class="row"> - <label class="col-md-4 col-lg-4 col-sm-4"> - Target Pattern: - </label> - <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff"> - {{targetPat}} - </div> - </div> --> <div class="row"> <label class="col-md-4 col-lg-4 col-sm-4"> Measure Name: @@ -204,25 +162,9 @@ under the License. </div> </div> </div> - <!-- <div class="row"> - <label for="systemSelector" class="col-md-4 col-lg-4 col-sm-4"> - Start at: - </label> - <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff" *ngIf="jobStartTime"> - {{jobStartTime.toLocaleDateString("en-US")}} {{timeDetail}} - </div> - </div> - <div class="row"> - <label class="col-md-4 col-lg-4 col-sm-4"> - Interval: - </label> - <div class="col-md-8 col-lg-8 col-sm-8" style="color: #fff">{{periodTime}} {{timeType}} - </div> - </div> --> </div> </div> </div> - <!--//row--> <br/> </div> </div> @@ -235,5 +177,4 @@ under the License. </div> </form> </div> - <!--//row--> </div> http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/2972aa2d/ui/angular/src/app/job/create-job/create-job.component.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/job/create-job/create-job.component.ts b/ui/angular/src/app/job/create-job/create-job.component.ts index 990a805..44c9585 100644 --- a/ui/angular/src/app/job/create-job/create-job.component.ts +++ b/ui/angular/src/app/job/create-job/create-job.component.ts @@ -44,9 +44,9 @@ export class CreateJobComponent implements OnInit, AfterViewChecked { constructor(toasterService: ToasterService,private http: HttpClient,private router:Router,public serviceService:ServiceService) { this.toasterService = toasterService; }; - + @ViewChildren('sliderRef') sliderRefs; - // someRange=[-20, 0]; + someKeyboard = []; someKeyboardConfig = []; config:any; @@ -54,32 +54,16 @@ export class CreateJobComponent implements OnInit, AfterViewChecked { cronExp :string; dropdownList = []; currentStep = 1; - Times = ['seconds','minutes','hours']; maskOpen = false; - keyupLabelOn = false; keydownLabelOn = false; periodTime :number; - StartTime = ''; - sourcePat :''; - targetPat :''; createResult = ''; - jobStartTime : any; jobname : string; - Measures:object; measureinfo:object; - measure:string; measureid:any; - ntAccount = 0; - // newJob={ - // "sourcePattern":'', - // "targetPattern":'', - // "jobStartTime":0, - // "interval":'', - // "groupName":'', - // } newJob={ "cron.expression": "", @@ -130,14 +114,6 @@ export class CreateJobComponent implements OnInit, AfterViewChecked { this.hide(); } } - - showTime(evt){ - evt.target.nextElementSibling.style.display=''; - } - - OnMouseleave(evt){ - evt.target.style.display = 'none'; - } close(){ this.maskOpen = false; @@ -147,64 +123,6 @@ export class CreateJobComponent implements OnInit, AfterViewChecked { history.back(); } - // submit (jobForm) { - // this.measureid = this.getMeasureId(); - // // jobForm.markAsPristine(); - // var period; - // if(this.timeType=='minutes') - // period = this.periodTime *60; - // else if(this.timeType=='hours') - // period = this.periodTime * 3600; - // else period = this.periodTime; - // var rule = ''; - // var time :number; - // if(this.jobStartTime){ - // var year = this.jobStartTime.getFullYear(); - // var month = this.jobStartTime.getMonth() + 1; - // var day = this.jobStartTime.getDate(); - // var startTime = year +'-'+ month + '-'+ day + ' '+ this.timeDetail; - // } - - // time = Date.parse(startTime); - // if(isNaN(time)){ - // this.toasterService.pop('error','Error!','Please input the right format of start time'); - // return false; - // } - // if (!jobForm.valid) { - // this.toasterService.pop('error', 'Error!', 'Please complete the form!'); - // return false; - // } - - // this.newJob={ - // "sourcePattern":this.sourcePat, - // "targetPattern":this.targetPat, - // "jobStartTime":time, - // "interval":period, - // "groupName":'BA', - // }, - // this.visible = true; - // setTimeout(() => this.visibleAnimate = true, 100); - // } - // save() { - // var date = new Date(); - // var datastr = date.toString(); - // var month = date.getMonth()+1; - // var timestamp = Date.parse(datastr); - // var jobName = this.measure + '-BA-' + this.ntAccount + '-' + timestamp; - // var addJobs = this.serviceService.config.uri.addJobs; - // var newJob = addJobs + '?group=' + this.newJob.groupName + '&jobName=' + jobName + '&measureId=' + this.measureid; - // this.http - // .post(newJob, this.newJob) - // .subscribe(data => { - // this.createResult = data['results']; - // this.hide(); - // this.router.navigate(['/jobs']); - // }, - // err => { - // console.log('Error when creating job'); - // }); - // } - submit (form){ if (!form.valid) { this.toasterService.pop('error', 'Error!', 'Please complete the form!'); @@ -212,13 +130,13 @@ export class CreateJobComponent implements OnInit, AfterViewChecked { } this.measureid = this.getMeasureId(); let time = new Date().getTimezoneOffset() / 60; - let timezone = 'GMT' + time + ':00'; + let timezone = 'GMT' + time + ':00'; this.newJob = { "job.name": this.jobname, "measure.id": this.measureid, "cron.expression": this.cronExp, "cron.time.zone": timezone, - // "cron.time.zone": "GMT+8:00", + // "cron.time.zone": "GMT+8:00", // "predicate.config": { // "interval": "1m", // "repeat": 2 @@ -261,11 +179,6 @@ export class CreateJobComponent implements OnInit, AfterViewChecked { } save() { - var date = new Date(); - var datastr = date.toString(); - // var month = date.getMonth()+1; - var timestamp = Date.parse(datastr); - // var jobName = this.measure + '-BA-' + this.ntAccount + '-' + timestamp; var addJobs = this.serviceService.config.uri.addJobs; this.http .post(addJobs,this.newJob) @@ -312,17 +225,16 @@ export class CreateJobComponent implements OnInit, AfterViewChecked { for(let index in this.Measures){ if(this.measure == this.Measures[index].name){ return this.Measures[index].id; - } + } } } - + onChange(measure){ this.dropdownList = []; for(let index in this.Measures){ var map = this.Measures[index]; if(measure == map.name){ var source = map["data.sources"]; - // this.baseline = (source.length == 2) ? 'target[0]' : 'source[0]'; for(let i = 0;i < source.length;i++){ var details = source[i].connectors; for(let j = 0;j < details.length;j++){ @@ -336,7 +248,7 @@ export class CreateJobComponent implements OnInit, AfterViewChecked { } } } - } + } } for(let i = 0;i < this.dropdownList.length;i++){ this.someKeyboard[i] = [-1,0]; @@ -348,10 +260,10 @@ export class CreateJobComponent implements OnInit, AfterViewChecked { 'max': 0 } }); - } - } + } + } } - + changeRange(index,value,i){ let newRange = []; @@ -360,7 +272,7 @@ export class CreateJobComponent implements OnInit, AfterViewChecked { this.updateSliderRange(value,i); this.someKeyboard[i] = newRange[i]; } - + rangeChange(evt,i){ var oldmin = this.sliderRefs._results[i].config.range.min; if((evt[0] - oldmin)<=2){ @@ -369,7 +281,7 @@ export class CreateJobComponent implements OnInit, AfterViewChecked { 'min': oldmin-10, 'max': 0 } - }); + }); } if((evt[0] - oldmin)>=13){ this.sliderRefs._results[i].slider.updateOptions({ @@ -377,13 +289,13 @@ export class CreateJobComponent implements OnInit, AfterViewChecked { 'min': oldmin+10, 'max': 0 } - }); + }); } - this.someKeyboard[i] = evt; + this.someKeyboard[i] = evt; } updateSliderRange(value,i){ - // setTimeout(() => { + // setTimeout(() => { var oldmin = this.sliderRefs._results[i].config.range.min; var oldmax = this.sliderRefs._results[i].config.range.max var newmin = Math.floor(value/10); @@ -417,73 +329,6 @@ export class CreateJobComponent implements OnInit, AfterViewChecked { this.http.get(allModels).subscribe(data =>{ this.Measures = data; }); -// this.Measures = [{ -// "name":"demo_accu", -// "type":"griffin", -// "process.type":"batch", -// "owner":"test", -// "data.sources":[ -// { -// "name":"source", -// "connectors":[ -// { -// "name":"source1513317492171", -// "type":"HIVE", -// "version":"1.2", -// "data.unit":"2day", -// "config":{ -// "database":"default", -// "table.name":"demo_src", -// "where":"dt=#YYYYMMdd# AND hour=#HH#" -// }, -// "predicates":[ -// { -// "type":"file.exist", -// "config":{ -// "root.path":"hdfs:///griffin/demo_src", -// "path":"/dt=#YYYYMMdd#/hour=#HH#/_DONE" -// } -// } -// ] -// } -// ] -// }, -// { -// "name":"target", -// "connectors":[ -// { -// "name":"target1513317499033", -// "type":"HIVE", -// "version":"1.2", -// "data.unit":"1hour", -// "config":{ -// "database":"default", -// "table.name":"demo_tgt", -// "where":"dt=#YYYYMMdd# AND hour=#HH#" -// }, -// "predicates":[ -// { -// "type":"file.exist", -// "config":{ -// "root.path":"hdfs:///griffin/demo_src", -// "path":"" -// } -// } -// ] -// } -// ] -// } -// ], -// "evaluateRule":{ -// "rules":[ -// { -// "dsl.type":"griffin-dsl", -// "dq.type":"accuracy", -// "rule":"source.id=target.id" -// } -// ] -// } -// }] this.config={ behaviour: 'drag', connect: true, @@ -504,7 +349,7 @@ export class CreateJobComponent implements OnInit, AfterViewChecked { } } - + ngAfterViewChecked(){ this.resizeWindow(); } http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/2972aa2d/ui/angular/src/app/measure/create-measure/ac/ac.component.html ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/measure/create-measure/ac/ac.component.html b/ui/angular/src/app/measure/create-measure/ac/ac.component.html index fdb7031..8084564 100644 --- a/ui/angular/src/app/measure/create-measure/ac/ac.component.html +++ b/ui/angular/src/app/measure/create-measure/ac/ac.component.html @@ -84,32 +84,32 @@ under the License. <div style="margin-top:10px;"> <label>View schema:</label> <i style="color:#fff;font-weight: bold;">{{currentDBstr}}{{currentTable}} - </i> + </i> </div> <div style="margin-top:5px;"> <table class="table table-striped"> <thead> - <tr style="background-color:#7D95CC"> - <th> - <input type="checkbox" (click)="toggleAll()" [checked]="selectedAll" /> - </th> - <th>Column Name</th> - <th>Type</th> - <th>Comment</th> - </tr> + <tr style="background-color:#7D95CC"> + <th> + <input type="checkbox" (click)="toggleAll()" [checked]="selectedAll" /> + </th> + <th>Column Name</th> + <th>Type</th> + <th>Comment</th> + </tr> </thead> <tbody> - <tr *ngIf="!schemaCollection || schemaCollection.length == 0"> - <td colspan="5" style="text-align:center"><span class="highlight">Please select a schema from the left tree first</span></td> - </tr> - <tr *ngFor="let row of schemaCollection"> - <td> - <input type="checkbox" (click)='toggleSelection(row)' [checked]="row.selected" value={{row.name}} /> - </td> - <td>{{row.name}}</td> - <td>{{row.type}}</td> - <td>{{row.comment}}</td> - </tr> + <tr *ngIf="!schemaCollection || schemaCollection.length == 0"> + <td colspan="5" style="text-align:center"><span class="highlight">Please select a schema from the left tree first</span></td> + </tr> + <tr *ngFor="let row of schemaCollection"> + <td> + <input type="checkbox" (click)='toggleSelection(row)' [checked]="row.selected" value={{row.name}} /> + </td> + <td>{{row.name}}</td> + <td>{{row.type}}</td> + <td>{{row.comment}}</td> + </tr> </tbody> </table> </div> @@ -146,27 +146,27 @@ under the License. <div style="margin-top:5px;"> <table st-table="schemaCollectionTarget" class="table table-striped"> <thead> - <tr style="background-color:#7D95CC"> - <th> - <input type="checkbox" (click)="toggleAllTarget()" [checked]="selectedAllTarget" /> - </th> - <th>Column Name</th> - <th>Type</th> - <th>Comment</th> - </tr> + <tr style="background-color:#7D95CC"> + <th> + <input type="checkbox" (click)="toggleAllTarget()" [checked]="selectedAllTarget" /> + </th> + <th>Column Name</th> + <th>Type</th> + <th>Comment</th> + </tr> </thead> <tbody> - <tr *ngIf="!schemaCollectionTarget || schemaCollectionTarget.length == 0"> - <td colspan="5" style="text-align:center"><span class="highlight">Please select a schema from the left tree first</span></td> - </tr> - <tr *ngFor="let row of schemaCollectionTarget"> - <td> - <input type="checkbox" (click)='toggleSelectionTarget(row)' [checked]="row.selected" /> - </td> - <td>{{row.name}}</td> - <td>{{row.type}}</td> - <td>{{row.comment}}</td> - </tr> + <tr *ngIf="!schemaCollectionTarget || schemaCollectionTarget.length == 0"> + <td colspan="5" style="text-align:center"><span class="highlight">Please select a schema from the left tree first</span></td> + </tr> + <tr *ngFor="let row of schemaCollectionTarget"> + <td> + <input type="checkbox" (click)='toggleSelectionTarget(row)' [checked]="row.selected" /> + </td> + <td>{{row.name}}</td> + <td>{{row.type}}</td> + <td>{{row.comment}}</td> + </tr> </tbody> </table> </div> @@ -196,27 +196,27 @@ under the License. <div class="container col-md-12 col-lg-12 col-sm-12"> <table class="table table-striped"> <thead> - <tr style="background-color:#7D95CC;font-size:20px"> - <th style="width:40%;">Target Fields</th> - <th style="width:10%;text-align:center">Map To</th> - <th style="width:40%;text-align:center">Source Fields</th> - </tr> + <tr style="background-color:#7D95CC;font-size:20px"> + <th style="width:40%;">Target Fields</th> + <th style="width:10%;text-align:center">Map To</th> + <th style="width:40%;text-align:center">Source Fields</th> + </tr> </thead> <tbody> - <tr *ngFor="let item of selectionTarget; let i=index"> - <td>{{currentDBTarget}}.{{currentTableTarget}}.{{item}}</td> - <td style="text-align:center;"> - <select class="form-control" style="background:#00FFFF;font-weight:bold" id="mapRule" name='mapRule-{{i}}' [(ngModel)]="matches[i]" value="matches[i]"> - <option *ngFor="let func of matchFunctions">{{func}}</option> - </select> - </td> - <td> - <select class="form-control" [(ngModel)]='mappings[i]' name="mappings{{i}}" (ngModelChange)="addMapping($event,i)" value="mappings[i]"> - <option *ngFor="let itemSrc of selection" [ngValue]="itemSrc"> - {{currentDB}}.{{currentTable}}.{{itemSrc}}</option> - </select> - </td> - </tr> + <tr *ngFor="let item of selectionTarget; let i=index"> + <td>{{currentDBTarget}}.{{currentTableTarget}}.{{item}}</td> + <td style="text-align:center;"> + <select class="form-control" style="background:#00FFFF;font-weight:bold" id="mapRule" name='mapRule-{{i}}' [(ngModel)]="matches[i]" value="matches[i]"> + <option *ngFor="let func of matchFunctions">{{func}}</option> + </select> + </td> + <td> + <select class="form-control" [(ngModel)]='mappings[i]' name="mappings{{i}}" (ngModelChange)="addMapping($event,i)" value="mappings[i]"> + <option *ngFor="let itemSrc of selection" [ngValue]="itemSrc"> + {{currentDB}}.{{currentTable}}.{{itemSrc}}</option> + </select> + </td> + </tr> </tbody> </table> <p> @@ -448,6 +448,30 @@ under the License. {{currentDB}}.{{currentTable}} </div> </div> + <div class="row" *ngIf="this.src_size"> + <label class="col-md-4 col-lg-4 col-sm-4"> + Source Partition Size: + </label> + <div class="col-md-8 col-lg-8 col-sm-8"> + {{this.src_size}} + </div> + </div> + <div class="row" *ngIf="this.src_where"> + <label class="col-md-4 col-lg-4 col-sm-4"> + Source Where: + </label> + <div class="col-md-8 col-lg-8 col-sm-8"> + {{this.src_where}} + </div> + </div> + <div class="row" *ngIf="this.src_path"> + <label class="col-md-4 col-lg-4 col-sm-4"> + Source Path: + </label> + <div class="col-md-8 col-lg-8 col-sm-8"> + {{this.src_path}} + </div> + </div> <div class="row"> <label class="col-md-4 col-lg-4 col-sm-4"> Target: @@ -456,6 +480,30 @@ under the License. {{currentDB}}.{{currentTableTarget}} </div> </div> + <div class="row" *ngIf="this.tgt_size"> + <label class="col-md-4 col-lg-4 col-sm-4"> + Target Partition Size: + </label> + <div class="col-md-8 col-lg-8 col-sm-8"> + {{this.tgt_size}} + </div> + </div> + <div class="row" *ngIf="this.tgt_where"> + <label class="col-md-4 col-lg-4 col-sm-4"> + Target Where: + </label> + <div class="col-md-8 col-lg-8 col-sm-8"> + {{this.tgt_where}} + </div> + </div> + <div class="row" *ngIf="this.tgt_path"> + <label class="col-md-4 col-lg-4 col-sm-4"> + Target Path: + </label> + <div class="col-md-8 col-lg-8 col-sm-8"> + {{this.tgt_path}} + </div> + </div> <div class="row"> <label class="col-md-4 col-lg-4 col-sm-4"> Owner: http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/2972aa2d/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 d592059..b1dfa5e 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 @@ -68,7 +68,7 @@ class Col{ }) export class AcComponent implements OnInit , AfterViewChecked { - + defaultValue:string; currentStep = 1; // grp = []; @@ -143,7 +143,7 @@ export class AcComponent implements OnInit , AfterViewChecked { { "name": "source", "connectors": [ - { + { "name":"", "type": "HIVE", "version": "1.2", @@ -239,7 +239,7 @@ export class AcComponent implements OnInit , AfterViewChecked { } } - addMapping(x,i){ + addMapping(x,i){ this.mappings[i] = x; } @@ -284,7 +284,7 @@ export class AcComponent implements OnInit , AfterViewChecked { this.matches[i] = "="; // this.mappings[i] = this.currentDB + '.' + this.currentTable + '.' + row.name; } - + }; toggleAll () { @@ -337,7 +337,7 @@ export class AcComponent implements OnInit , AfterViewChecked { } return false; - } + } prev (form) { this.currentStep--; @@ -345,7 +345,7 @@ export class AcComponent implements OnInit , AfterViewChecked { goTo (i) { this.currentStep = i; } - submit (form) { + submit (form) { // form.$setPristine(); // this.finalgrp = []; if (!form.valid) { @@ -415,7 +415,7 @@ export class AcComponent implements OnInit , AfterViewChecked { } ] } - ], + ], "evaluate.rule":{ "rules": [ { @@ -448,6 +448,12 @@ export class AcComponent implements OnInit , AfterViewChecked { if(this.tgt_size.indexOf('0')==0){ delete this.newMeasure['data.sources'][1]['connectors'][0]['data.unit']; } + if(this.src_path==''){ + delete this.newMeasure['data.sources'][0]['connectors'][0]['predicates']; + } + if(this.tgt_path==''){ + delete this.newMeasure['data.sources'][1]['connectors'][0]['predicates']; + } var mappingRule = function(src, tgt, matches) { var rules; rules = 'source.' + src + matches + 'target.' + tgt @@ -489,7 +495,7 @@ export class AcComponent implements OnInit , AfterViewChecked { idField: 'id', actionMapping: { mouse: { - click: (tree, node, $event) => { + click: (tree, node, $event) => { if (node.hasChildren) { this.currentDB = node.data.name; this.currentDBstr = this.currentDB + '.'; @@ -561,18 +567,18 @@ export class AcComponent implements OnInit , AfterViewChecked { constructor(toasterService: ToasterService,private http: HttpClient,private router:Router,public serviceService:ServiceService) { this.toasterService = toasterService; }; - + onResize(event){ this.resizeWindow(); } - + srcAttr(evt){ this.srcdata = evt; this.currentDB = evt.database; this.currentTable = evt.table; this.selection = evt.selection; } - + tgtAttr(evt){ this.tgtdata = evt; this.currentDBTarget = evt.database; @@ -593,7 +599,7 @@ export class AcComponent implements OnInit , AfterViewChecked { this.tgt_size = evt.num + evt.timetype; this.tgt_path = evt.path; } - + resizeWindow(){ var stepSelection = '.formStep[id=step-' + this.currentStep + ']'; @@ -606,7 +612,7 @@ export class AcComponent implements OnInit , AfterViewChecked { 'height': $('fieldset').height() }); } - + ngOnInit() { var allDataassets = this.serviceService.config.uri.dataassetlist; this.http.get(allDataassets).subscribe(data =>{ http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/2972aa2d/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 0230d71..4da7ab6 100644 --- a/ui/angular/src/app/measure/create-measure/pr/pr.component.html +++ b/ui/angular/src/app/measure/create-measure/pr/pr.component.html @@ -76,32 +76,32 @@ under the License. <div style="margin-top:10px;"> <label>View schema:</label> <i style="color:#fff;font-weight: bold;">{{currentDBstr}}{{currentTable}} - </i> + </i> </div> <div style="margin-top:5px;"> <table class="table table-striped no-border"> <thead> - <tr style="background-color:#7D95CC"> - <th> - <input type="checkbox" (click)="toggleAll()" [checked]="selectedAll" /> - </th> - <th>Column Name</th> - <th>Type</th> - <th>Comment</th> - </tr> + <tr style="background-color:#7D95CC"> + <th> + <input type="checkbox" (click)="toggleAll()" [checked]="selectedAll" /> + </th> + <th>Column Name</th> + <th>Type</th> + <th>Comment</th> + </tr> </thead> <tbody> - <tr *ngIf="!schemaCollection || schemaCollection.length == 0"> - <td colspan="5" style="text-align:center;"><span class="highlight">Please select a schema from the left tree first</span></td> - </tr> - <tr *ngFor="let row of schemaCollection"> - <td> - <input type="checkbox" (click)='toggleSelection(row)' [checked]="row.selected" value={{row.name}} /> - </td> - <td>{{row.name}}</td> - <td>{{row.type}}</td> - <td>{{row.comment}}</td> - </tr> + <tr *ngIf="!schemaCollection || schemaCollection.length == 0"> + <td colspan="5" style="text-align:center;"><span class="highlight">Please select a schema from the left tree first</span></td> + </tr> + <tr *ngFor="let row of schemaCollection"> + <td> + <input type="checkbox" (click)='toggleSelection(row)' [checked]="row.selected" value={{row.name}} /> + </td> + <td>{{row.name}}</td> + <td>{{row.type}}</td> + <td>{{row.comment}}</td> + </tr> </tbody> </table> </div> @@ -129,20 +129,20 @@ under the License. <div class="col-md-12 col-lg-12 col-sm-12" style="z-index:100;margin-top:5px;"> <table class="table table-striped" [mfData]="results" #mf="mfDataTable"> <thead> - <tr style="background-color:#7D95CC"> - <th>Column Name</th> - <th>Data Type</th> - <th>Rule <i style="color:#b2c831;" class="fa fa-question-circle fa-lg"></i><i style="font-family: 'Open Sans', sans-serif;">Click <a (click)="showRule()" class="bark-link po">here</a> to view the rule definition</i></th> - </tr> + <tr style="background-color:#7D95CC"> + <th>Column Name</th> + <th>Data Type</th> + <th>Rule <i style="color:#b2c831;" class="fa fa-question-circle fa-lg"></i><i style="font-family: 'Open Sans', sans-serif;">Click <a (click)="showRule()" class="bark-link po">here</a> to view the rule definition</i></th> + </tr> </thead> <tbody> - <tr *ngFor="let item of selection"> - <td class="middle">{{item.name}}</td> - <td class="middle">{{item.type}}</td> - <td class="col-md-5 middle"> - <angular2-multiselect [data]="dropdownList[item.name]" name="rules-{{item.name}}" [(ngModel)]="selectedItems[item.name]" [settings]="dropdownSettings"></angular2-multiselect> - </td> - </tr> + <tr *ngFor="let item of selection"> + <td class="middle">{{item.name}}</td> + <td class="middle">{{item.type}}</td> + <td class="col-md-5 middle"> + <angular2-multiselect [data]="dropdownList[item.name]" name="rules-{{item.name}}" [(ngModel)]="selectedItems[item.name]" [settings]="dropdownSettings"></angular2-multiselect> + </td> + </tr> </tbody> </table> </div> @@ -359,6 +359,30 @@ under the License. {{currentDB}}.{{currentTable}} </div> </div> + <div class="row" *ngIf="this.where"> + <label class="col-md-4 col-lg-4 col-sm-4"> + Source Where: + </label> + <div class="col-md-8 col-lg-8 col-sm-8"> + {{this.where}} + </div> + </div> + <div class="row" *ngIf="this.size"> + <label class="col-md-4 col-lg-4 col-sm-4"> + Source Partition Size: + </label> + <div class="col-md-8 col-lg-8 col-sm-8"> + {{this.size}} + </div> + </div> + <div class="row" *ngIf="this.path"> + <label class="col-md-4 col-lg-4 col-sm-4"> + Source Path: + </label> + <div class="col-md-8 col-lg-8 col-sm-8"> + {{this.path}} + </div> + </div> <div class="row"> <label class="col-md-4 col-lg-4 col-sm-4"> Owner: http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/2972aa2d/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 def6071..d27339d 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 @@ -71,7 +71,7 @@ class Col{ this.rules = []; this.RE = ''; this.newRules = []; - + var patt = new RegExp('int|double|float/i'); if(patt.test(this.type)){ this.isNum = true; @@ -87,7 +87,7 @@ class Col{ styleUrls: ['./pr.component.css'] }) export class PrComponent implements AfterViewChecked, OnInit{ - + noderule = []; // grp = []; // showgrp:string; @@ -205,7 +205,7 @@ export class PrComponent implements AfterViewChecked, OnInit{ this.hide(); } } - + onResize(event){ this.resizeWindow(); } @@ -263,7 +263,7 @@ export class PrComponent implements AfterViewChecked, OnInit{ if(key === row.name){ delete this.selectedItems[key]; } - } + } //this.selectedItems[row.name] = []; } // is newly selected @@ -338,7 +338,7 @@ export class PrComponent implements AfterViewChecked, OnInit{ len = this.selectedItems[key].length; if(len == 0){ return false; - } + } } return (this.selection.length == selectedlen) ? true :false; } else if (step == 3) { @@ -346,7 +346,7 @@ export class PrComponent implements AfterViewChecked, OnInit{ } else if(step == 4){ } return false; - } + } prev (form) { this.currentStep--; @@ -354,7 +354,7 @@ export class PrComponent implements AfterViewChecked, OnInit{ goTo (i) { this.currentStep = i; } - submit (form) { + submit (form) { // form.$setPristine(); // this.finalgrp = []; if (!form.valid) { @@ -377,7 +377,7 @@ export class PrComponent implements AfterViewChecked, OnInit{ { "name": "source", "connectors": [ - { + { "name":this.srcname, "type": "hive", "version": "1.2", @@ -410,22 +410,25 @@ export class PrComponent implements AfterViewChecked, OnInit{ // } ] } - }; + }; this.getGrouprule(); if(this.size.indexOf('0')==0){ delete this.newMeasure['data.sources'][0]['connectors'][0]['data.unit']; - } + } + if(this.path==''){ + delete this.newMeasure['data.sources'][0]['connectors'][0]['predicates']; + } this.visible = true; setTimeout(() => this.visibleAnimate = true, 100); } - - getRule(trans,otherinfo){ + + getRule(trans,otherinfo){ var rule = ''; for(let i of trans){ rule = rule + i + ','; } rule = rule.substring(0,rule.lastIndexOf(',')); - this.pushRule(rule,otherinfo); + this.pushRule(rule,otherinfo); } pushEnmRule(rule,grpname,originrule){ @@ -444,7 +447,7 @@ export class PrComponent implements AfterViewChecked, OnInit{ } }); } - + pushNullRule(rule,nullname,originrule){ var self = this; self.newMeasure['evaluate.rule'].rules.push({ @@ -487,7 +490,7 @@ export class PrComponent implements AfterViewChecked, OnInit{ console.log('Something went wrong!'); }); } - + options: ITreeOptions = { displayField: 'name', isExpandedField: 'expanded', @@ -531,11 +534,11 @@ export class PrComponent implements AfterViewChecked, OnInit{ this.toasterService = toasterService; this.selection = []; }; - + // onItemSelect(item){ // this.getRule(); // } - + getGrouprule(){ var selected = {name: ''}; var value = ''; @@ -548,9 +551,9 @@ export class PrComponent implements AfterViewChecked, OnInit{ var info = ''; var otherinfo = ''; for(let i = 0;i<this.selectedItems[key].length;i++){ - var originrule = this.selectedItems[key][i].itemName; + var originrule = this.selectedItems[key][i].itemName; info = info + originrule + ','; - if(originrule == 'Enum Detection Count'){ + if(originrule == 'Enum Detection Count'){ enmvalue = this.transferRule(originrule,selected); grpname = selected.name + '-grp'; this.transenumrule.push(enmvalue); @@ -562,7 +565,7 @@ export class PrComponent implements AfterViewChecked, OnInit{ this.pushNullRule(nullvalue,nullname,originrule); }else{ otherinfo = otherinfo + originrule + ','; - value = this.transferRule(originrule,selected); + value = this.transferRule(originrule,selected); this.transrule.push(value); } } @@ -571,11 +574,11 @@ export class PrComponent implements AfterViewChecked, OnInit{ this.noderule.push({ "name":key, "infos":info - }); + }); } if(this.transrule.length != 0){ this.getRule(this.transrule,otherinfo); - } + } } // OnItemDeSelect(item){ @@ -595,7 +598,7 @@ export class PrComponent implements AfterViewChecked, OnInit{ document.getElementById('showrule').style.display = 'none'; document.getElementById('notshowrule').style.display = ''; } - + getData(evt){ this.config = evt; this.where = evt.where; @@ -636,8 +639,8 @@ export class PrComponent implements AfterViewChecked, OnInit{ this.nodeListTarget = JSON.parse(JSON.stringify(this.nodeList)); }); - this.dropdownSettings = { - singleSelection: false, + this.dropdownSettings = { + singleSelection: false, text:"Select Rule", // selectAllText:'Select All', // unSelectAllText:'UnSelect All', @@ -647,9 +650,9 @@ export class PrComponent implements AfterViewChecked, OnInit{ classes: "myclass", groupBy: "category" }; - this.size = '1day'; + this.size = '1day'; }; ngAfterViewChecked(){ this.resizeWindow(); } -} \ No newline at end of file +} http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/2972aa2d/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 f51095f..428a851 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 @@ -64,6 +64,38 @@ under the License. {{sourceTable}} </div> </div> + <div class="row" *ngIf="ruleData.type=='profiling'"> + <label class="col-xs-4"> + DataSource: + </label> + <div class="col-xs-8" style="color: #fff"> + {{sourceTable}} + </div> + </div> + <div class="row" *ngIf="sourcesize"> + <label class="col-xs-4"> + Source Partition Size: + </label> + <div class="col-xs-8" style="color: #fff"> + {{sourcesize}} + </div> + </div> + <div class="row" *ngIf="sourcewhere"> + <label class="col-xs-4"> + Source Where: + </label> + <div class="col-xs-8" style="color: #fff"> + {{sourcewhere}} + </div> + </div> + <div class="row" *ngIf="sourcepath"> + <label class="col-xs-4"> + Source Path: + </label> + <div class="col-xs-8" style="color: #fff"> + {{sourcepath}} + </div> + </div> <div class="row" *ngIf="ruleData.type=='accuracy'"> <label class="col-xs-4"> Target: @@ -72,12 +104,28 @@ under the License. {{targetTable}} </div> </div> - <div class="row" *ngIf="ruleData.type=='profiling'"> + <div class="row" *ngIf="ruleData.type=='accuracy' && targetsize"> <label class="col-xs-4"> - DataSource: + Target Partition Size: </label> <div class="col-xs-8" style="color: #fff"> - {{sourceTable}} + {{targetsize}} + </div> + </div> + <div class="row" *ngIf="ruleData.type=='accuracy' && targetwhere"> + <label class="col-xs-4"> + Target Where: + </label> + <div class="col-xs-8" style="color: #fff"> + {{targetwhere}} + </div> + </div> + <div class="row" *ngIf="ruleData.type=='accuracy' && targetpath"> + <label class="col-xs-4"> + Target Path: + </label> + <div class="col-xs-8" style="color: #fff"> + {{targetpath}} </div> </div> <div class="row"> http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/2972aa2d/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 5087bf0..874d42f 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 @@ -34,46 +34,67 @@ export class MeasureDetailComponent implements OnInit { currentId:string; constructor(private route: ActivatedRoute, private router: Router,private http:HttpClient,public serviceService:ServiceService) { }; - ruleData : any; - sourceLength : number; - sourceDB : string; - targetDB : string; - sourceTable : string; - targetTable : string; - type:string; - currentrule:string; + ruleData: any; + sourceLength: number; + sourceDB: string; + targetDB: string; + sourceTable: string; + targetTable: string; + sourcesize: string; + targetsize: string; + sourcewhere: string; + targetwhere: string; + sourcepath: string; + targetpath: string; + type: string; + currentrule: string; prorule = ''; + fetchData(value,index){ + var data = this.ruleData["data.sources"][index].connectors[0]; + var size = value + "size"; + var where = value + "where"; + var path = value + "path"; + var database = value + "DB"; + var table = value + "Table"; + this[size] = data["data.unit"]; + this[where] = data.config.where; + if(data.predicates[0].config){ + this[path] = data.predicates[0].config.path; + } + this[database] = data.config.database; + this[table] = data.config["table.name"]; + } + ngOnInit() { this.ruleData = { 'evaluateRule':'' }; var getModelUrl; - var getModel = this.serviceService.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=>{ this.ruleData = data; - this.ruleData.type = this.ruleData["dq.type"]; - if(this.ruleData['measure.type'] !== 'external'){ - this.currentrule = this.ruleData['evaluate.rule'].rules; + if(this.ruleData['measure.type'] === 'external'){ + this.ruleData.type = this.ruleData["measure.type"]; + } + else{ + this.ruleData.type = this.ruleData["dq.type"]; var currentprorule = this.ruleData['evaluate.rule'].rules; + this.currentrule = currentprorule; for(let index in currentprorule){ this.prorule = this.prorule + currentprorule[index].description + ',' } this.prorule = this.prorule.substring(0,this.prorule.lastIndexOf(',')); - var sourcedata = this.ruleData["data.sources"][0].connectors[0].config; - this.sourceDB = sourcedata.database; - this.sourceTable = sourcedata["table.name"]; + this.fetchData("source",0); if(this.ruleData.type === "accuracy"){ - var targetdata = this.ruleData["data.sources"][1].connectors[0].config; - this.targetDB = targetdata.database; - this.targetTable = targetdata["table.name"]; + this.fetchData("target",1); }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/2972aa2d/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 9a6b5e9..383c938 100644 --- a/ui/angular/src/app/measure/measure.component.html +++ b/ui/angular/src/app/measure/measure.component.html @@ -104,17 +104,17 @@ under the License. Measure Type: </label> <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff"> - {{deletedRow.type}} + {{deletedRow["dq.type"]}} </div> </div> - <div class="row"> + <!-- <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> --> <div class="row"> <label class="col-md-4 col-lg-4 col-sm-4"> DataAsset: http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/2972aa2d/ui/angular/src/app/service/service.service.ts ---------------------------------------------------------------------- diff --git a/ui/angular/src/app/service/service.service.ts b/ui/angular/src/app/service/service.service.ts index 9ee267e..32b9f58 100644 --- a/ui/angular/src/app/service/service.service.ts +++ b/ui/angular/src/app/service/service.service.ts @@ -23,8 +23,8 @@ export class ServiceService { constructor() { } //public BACKEND_SERVER = 'http://10.65.145.88:38080'; - public BACKEND_SERVER = 'http://localhost:8080'; - // public BACKEND_SERVER = ''; + // public BACKEND_SERVER = 'http://localhost:8080'; + public BACKEND_SERVER = ''; public API_ROOT_PATH = '/api/v1'; // public ES_SERVER = "http://" + location.host.replace("8080", "9200"); // public ES_SERVER = "http://10.64.222.80:39200" ;