You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@griffin.apache.org by gu...@apache.org on 2018/01/26 06:23:03 UTC

incubator-griffin git commit: Add partition configuration in measure detail page

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 <ah...@gmail.com>
Author: dodobel <12...@qq.com>
Author: He Wang <wa...@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 <12...@qq.com>
Authored: Fri Jan 26 14:22:40 2018 +0800
Committer: Lionel Liu <bh...@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")}}&nbsp; {{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}}&nbsp;{{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&nbsp;&nbsp;&nbsp;&nbsp;<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&nbsp;&nbsp;&nbsp;&nbsp;<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" ;