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/25 04:55:02 UTC

[1/2] incubator-griffin git commit: Add partition configuration when create measure

Repository: incubator-griffin
Updated Branches:
  refs/heads/master a0b130ae0 -> f581db306


http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/f581db30/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 058e373..0230d71 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
@@ -45,6 +45,14 @@ under the License.
               <div class="stepNumber">
                 3
               </div>
+              <span class="stepDesc text-small">Partition Configuration </span>
+            </a>
+          </li>
+          <li (click)="goTo(4)">
+            <a [ngClass]="{'selected' : currentStep >= 4, 'done' : currentStep > 4}">
+              <div class="stepNumber">
+                4
+              </div>
               <span class="stepDesc text-small"> Configuration </span>
             </a>
           </li>
@@ -166,6 +174,35 @@ under the License.
         </div>
       </div>
       <div id="step-3" *ngIf="currentStep == 3" class="formStep">
+        <label class="stepDesc">Please complete the partition configuration for {{currentTable}}</label>
+        <div class="container-fluid">
+          <div class="col-md-12 col-lg-12 col-sm-12">
+            <fieldset>
+              <legend>
+                Required Information
+              </legend>
+              <div class="y-scrollable">
+                <div class="col-md-12 col-lg-12 col-sm-12">
+                  <div class="form-group" style="text-align:center">
+                    Data Source:{{currentDB}}.{{currentTable}}
+                  </div>
+                  <app-configuration [data]="config" [location]="srclocation" (event)="getData($event)"></app-configuration>
+                </div>
+              </div>
+            </fieldset>
+          </div>
+          <div class="form-group btn-container">
+            <button class="btn btn-primary btn-o back-step btn-wide pull-left" (click)="prev(Form)">
+              <i class="fa fa-arrow-circle-left"></i> Back
+            </button>
+            <toaster-container></toaster-container>
+            <button class="btn btn-primary btn-o next-step btn-wide pull-right" (click)="next(Form)">
+              Next <i class="fa fa-arrow-circle-right"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+      <div id="step-4" *ngIf="currentStep == 4" class="formStep">
         <label class="stepDesc">Please setup the measure required information</label>
         <div class="container-fluid">
           <div class="col-md-12 col-lg-12 col-sm-12">
@@ -208,7 +245,7 @@ under the License.
                     </div>
                   </div>
                 </div>
-                <div class="col-md-12 col-lg-12 col-sm-12">
+                <!-- <div class="col-md-12 col-lg-12 col-sm-12">
                   <div class="form-group">
                     <label for="systemSelector" class="col-md-2 col-lg-2 col-sm-2 control-label">
                       Organization<span class="symbol required"></span>:
@@ -217,11 +254,21 @@ under the License.
                       <input type="text" id="systemSelector" class="form-control" required ng-pattern="'([0-9a-zA-Z\\_\\-])+'" name="org" [(ngModel)]="org">
                     </div>
                   </div>
-                </div>
+                </div> -->
+                <!-- <div class="col-md-12 col-lg-12 col-sm-12">
+                  <div class="form-group">
+                    <label for="systemSelector" class="col-md-2 col-lg-2 col-sm-2 control-label">
+                      Group:<span class="symbol required"></span>:
+                    </label>
+                    <div class="col-md-10 col-lg-10 col-sm-10 ">
+                      <tag-input class="form-control" style="height: 44px;padding: 0 6px;" id="systemSelector" required [(ngModel)]='grp' [editable]='true' name="grp"></tag-input>
+                    </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">
-                      DataAsset:
+                      DataSource:
                     </label>
                     <div class="col-md-10 col-lg-10 col-sm-10">
                       <input type="text" class="form-control" name="DataAsset" value="{{currentTable}}" disabled>
@@ -261,7 +308,7 @@ under the License.
         <div class="modal-dialog modal-xg modal-lg">
           <div class="modal-content">
             <div class="modal-header">
-              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+              <button type="button" class="close" (click)="hide()">&times;</button>
               <h4 class="modal-title">Save the measure with the below information?</h4>
             </div>
             <div class="modal-body">
@@ -296,20 +343,20 @@ under the License.
                           {{type}}
                         </div>
                       </div>
-                      <div class="row">
+                      <!-- <div class="row">
                         <label for="systemSelector" class="col-md-4 col-lg-4 col-sm-4">
-                          Organization:
+                          Group:
                         </label>
                         <div class="col-md-8 col-lg-8 col-sm-8 ">
-                          {{org}}
+                          {{showgrp}}
                         </div>
-                      </div>
+                      </div> -->
                       <div class="row">
                         <label class="col-md-4 col-lg-4 col-sm-4">
-                          DataAsset:
+                          DataSource:
                         </label>
                         <div class="col-md-8 col-lg-8 col-sm-8">
-                          {{currentTable}}
+                          {{currentDB}}.{{currentTable}}
                         </div>
                       </div>
                       <div class="row">
@@ -324,7 +371,18 @@ under the License.
                   </div>
                 </div>
                 <h5 class="row">Rules</h5>
-                <div class="row" *ngFor="let index of transrule;">
+                <!-- <div *ngIf="selectedItems">
+                  <div class="row" *ngFor="let key of objectKeys(selectedItems)">
+                  &nbsp;&nbsp;&nbsp;&nbsp;{{key}}:
+                  <div style="display:inline-block" *ngFor="let index of objectKeys(selectedItems[key])" >
+                    {{selectedItems[key][index].itemName}}&nbsp;,
+                  </div>
+                  </div>
+                </div> -->
+                <div class="row" *ngFor="let index of noderule;">
+                  &nbsp;&nbsp;&nbsp;&nbsp;{{index.name}}&nbsp;:&nbsp;{{index.infos}}
+                </div>
+                <!-- <div class="row" *ngFor="let index of transrule;">
                   &nbsp;&nbsp;&nbsp;&nbsp;{{index}}
                 </div>
                 <div class="row" *ngFor="let index of transnullrule;">
@@ -332,7 +390,7 @@ under the License.
                 </div>
                 <div class="row" *ngFor="let index of transenumrule;">
                   &nbsp;&nbsp;&nbsp;&nbsp;{{index}}
-                </div>
+                </div> -->
                 <br/>
               </div>
             </div>

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/f581db30/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 b49f55c..def6071 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
@@ -19,16 +19,18 @@ under the License.
 import { Component, OnInit } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import {ServiceService} from '../../../service/service.service';
+import { ServiceService } from '../../../service/service.service';
 import { TREE_ACTIONS, KEYS, IActionMapping, ITreeOptions } from 'angular-tree-component';
 import { BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import { ToasterModule, ToasterService,ToasterContainerComponent} from 'angular2-toaster';
 import * as $ from 'jquery';
-import { HttpClient} from '@angular/common/http';
+import { HttpClient } from '@angular/common/http';
 import { Router} from "@angular/router";
-import {DataTableModule} from "angular2-datatable";
-import { AfterViewChecked, ElementRef} from '@angular/core';
+import { DataTableModule } from "angular2-datatable";
+import { AfterViewChecked, ElementRef } from '@angular/core';
 import { AngularMultiSelectModule } from 'angular2-multiselect-dropdown/angular2-multiselect-dropdown';
+import { ConfigurationComponent } from "../configuration/configuration.component";
+// import { TagInputModule } from 'ngx-chips';
 
 
 
@@ -39,6 +41,7 @@ class node {
   isExpanded:boolean;
   cols:Col[];
   parent:string;
+  location:string;
 };
 
 class Rule{
@@ -85,13 +88,17 @@ class Col{
 })
 export class PrComponent implements  AfterViewChecked, OnInit{
   
-  org:string;
+  noderule = [];
+  // grp = [];
+  // showgrp:string;
+  // finalgrp = [];
   transrule = [];
   transenumrule = [];
   transnullrule = [];
   showrule = false;
   dropdownList = {};
   selectedItems = {};
+  allRules = {};
   dropdownSettings = {};
   currentStep = 1;
   firstCond = false;
@@ -107,33 +114,53 @@ export class PrComponent implements  AfterViewChecked, OnInit{
   desc:string;
   owner = 'test';
   currentDBstr: string;
+  rulenode = {
+    "name": "",
+    "noderules": ""
+  };
   newMeasure = {
     "name": "",
+    "measure.type":"griffin",
+    "dq.type": "profiling",
     "process.type": "batch",
     "owner":"",
     "description":"",
-    "organization":"",
+    // "group":[],
     "data.sources": [
       {
         "name": "source",
         "connectors": [
           {
+            "name":"",
             "type": "hive",
             "version": "1.2",
+            "data.unit":"",
             "config": {
               "database": "",
-              "table.name":""
-            }
+              "table.name":"",
+              "where":''
+            },
+            "predicates":[
+              {
+                "type":"file.exist",
+                "config":{
+                  "root.path":"hdfs:///griffin/demo_src",
+                  "path":""
+                }
+              }
+            ]
           }
         ]
       }
     ],
-    "evaluateRule": {
+    "evaluate.rule": {
       "rules": [
         {
           "dsl.type": "griffin-dsl",
           "dq.type": "profiling",
           "rule": "",
+          "description": "",
+          "name": "",
           "details": {
             // "profiling": {
             // "name": ""
@@ -146,6 +173,19 @@ export class PrComponent implements  AfterViewChecked, OnInit{
   name:'';
   createResult :any;
   newCond:any;
+  srclocation: string;
+  srcname: string;
+  config = {
+    "where":'',
+    "num":1,
+    "timetype":'day',
+    "needpath":false,
+    "path":''
+  };
+  where: string;
+  size: string;
+  path: string;
+  location: string;
 
   private toasterService: ToasterService;
   public visible = false;
@@ -157,6 +197,7 @@ export class PrComponent implements  AfterViewChecked, OnInit{
     this.transrule = [];
     this.transenumrule = [];
     this.transnullrule = [];
+    this.noderule = [];
   }
 
   public onContainerClicked(event: MouseEvent): void {
@@ -301,6 +342,8 @@ export class PrComponent implements  AfterViewChecked, OnInit{
       }
       return (this.selection.length == selectedlen) ? true :false;
     } else if (step == 3) {
+      return true;
+    } else if(step == 4){
     }
     return false;
   } 
@@ -311,34 +354,53 @@ export class PrComponent implements  AfterViewChecked, OnInit{
   goTo (i) {
     this.currentStep = i;
   }
-  submit (form) {            
+  submit (form) {         
       // form.$setPristine();
+    // this.finalgrp = [];
     if (!form.valid) {
       this.toasterService.pop('error', 'Error!', 'please complete the form in this step before proceeding');
       return false;
     }
+    // for(let i=0;i<this.grp.length;i++){
+    //   this.finalgrp.push(this.grp[i].value);
+    // }
+    // this.showgrp = this.finalgrp.join(",");
     this.newMeasure = {
         "name": this.name,
+        "measure.type":"griffin",
+        "dq.type": "profiling",
         "process.type": "batch",
         "owner":this.owner,
         "description":this.desc,
-        "organization":this.org,
+        // "group":this.finalgrp,
         "data.sources": [
           {
             "name": "source",
             "connectors": [
-              {
+              { 
+                "name":this.srcname,
                 "type": "hive",
                 "version": "1.2",
+                "data.unit":this.size,
                 "config": {
                   "database": this.currentDB,
-                  "table.name":this.currentTable
-                }
+                  "table.name":this.currentTable,
+                  "where":this.where
+                },
+                "predicates":[
+                  {
+                    "type":"file.exist",
+                    "config":{
+                      "root.path":"hdfs:///griffin/demo_src",
+                      "path":this.path
+                    }
+                  }
+                ]
               }
             ]
           }
         ],
-        "evaluateRule": {
+        "evaluate.rule": {
           "rules": [
             // {
             //   "dsl.type": "griffin-dsl",
@@ -350,55 +412,64 @@ export class PrComponent implements  AfterViewChecked, OnInit{
         }
     };   
     this.getGrouprule();
+    if(this.size.indexOf('0')==0){
+        delete this.newMeasure['data.sources'][0]['connectors'][0]['data.unit'];
+      }
     this.visible = true;
     setTimeout(() => this.visibleAnimate = true, 100);
   }
   
-  getRule(trans){    
+  getRule(trans,otherinfo){    
     var rule = '';
     for(let i of trans){
        rule = rule + i + ',';
     }
     rule = rule.substring(0,rule.lastIndexOf(','));
-    this.pushRule(rule);    
+    this.pushRule(rule,otherinfo);    
   }
 
-  pushEnmRule(rule,grpname){
+  pushEnmRule(rule,grpname,originrule){
     var self = this;
-    self.newMeasure.evaluateRule.rules.push({
+    self.newMeasure['evaluate.rule'].rules.push({
       "dsl.type": "griffin-dsl",
       "dq.type": "profiling",
       "rule": rule,
+      "description": originrule,
+      "name": grpname,
       "details": {
-        "profiling": {
-          "name": grpname,
-          "persist.type": "metric"
-        }
+        // "profiling": {
+        //   "name": grpname,
+        //   "persist.type": "metric"
+        // }
       }
     });
   }
   
-  pushNullRule(rule,nullname){
+  pushNullRule(rule,nullname,originrule){
     var self = this;
-    self.newMeasure.evaluateRule.rules.push({
+    self.newMeasure['evaluate.rule'].rules.push({
       "dsl.type": "griffin-dsl",
       "dq.type": "profiling",
       "rule": rule,
+      "description": originrule,
+      "name": nullname,
       "details": {
-        "profiling": {
-          "name": nullname,
-          "persist.type": "metric"
-        }
+        // "profiling": {
+        //   "name": nullname,
+        //   "persist.type": "metric"
+        // }
       }
     });
   }
 
-  pushRule(rule){
+  pushRule(rule,otherinfo){
     var self = this;
-    self.newMeasure.evaluateRule.rules.push({
+    self.newMeasure['evaluate.rule'].rules.push({
       "dsl.type": "griffin-dsl",
       "dq.type": "profiling",
       "rule": rule,
+      "description": otherinfo,
+      "name": "profiling",
       "details": {}
     });
   }
@@ -437,6 +508,8 @@ export class PrComponent implements  AfterViewChecked, OnInit{
             this.currentTable = node.data.name;
             this.currentDB = node.data.parent;
             this.schemaCollection = node.data.cols;
+            this.srcname = 'source' + new Date().getTime();
+            this.srclocation = node.data.location;
             this.selectedAll = false;
             this.selection = [];
             for(let row of this.schemaCollection){
@@ -472,26 +545,36 @@ export class PrComponent implements  AfterViewChecked, OnInit{
     var grpname = '';
     for(let key in this.selectedItems){
       selected.name = key;
+      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'){          
           enmvalue = this.transferRule(originrule,selected);
           grpname = selected.name + '-grp';
           this.transenumrule.push(enmvalue);
-          this.pushEnmRule(enmvalue,grpname);
+          this.pushEnmRule(enmvalue,grpname,originrule);
         }else if(originrule == 'Null Count'){
           nullvalue = this.transferRule(originrule,selected);
           nullname = selected.name + '-nullct';
           this.transnullrule.push(nullvalue);
-          this.pushNullRule(nullvalue,nullname);
-        }else{ 
+          this.pushNullRule(nullvalue,nullname,originrule);
+        }else{
+          otherinfo = otherinfo + originrule + ',';
           value = this.transferRule(originrule,selected);      
           this.transrule.push(value);
         }
-      }  
+      }
+      info = info.substring(0,info.lastIndexOf(','));
+      otherinfo = otherinfo.substring(0,otherinfo.lastIndexOf(','));
+      this.noderule.push({
+        "name":key,
+        "infos":info
+      });  
     }
     if(this.transrule.length != 0){
-      this.getRule(this.transrule);
+      this.getRule(this.transrule,otherinfo);
     }   
   }
 
@@ -512,6 +595,13 @@ 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;
+    this.size = evt.num + evt.timetype;
+    this.path = evt.path;
+  }
 
   ngOnInit() {
     var allDataassets = this.serviceService.config.uri.dataassetlist;
@@ -531,6 +621,7 @@ export class PrComponent implements  AfterViewChecked, OnInit{
             new_child.name = this.data[db][i]['tableName'];
             new_node.children.push(new_child);
             new_child.isExpanded = false;
+            new_child.location = this.data[db][i]['sd']['location'];
             new_child.parent = db;
             new_child.cols = Array<Col>();
             for(let j = 0;j<this.data[db][i]['sd']['cols'].length;j++){
@@ -555,7 +646,8 @@ export class PrComponent implements  AfterViewChecked, OnInit{
       enableSearchFilter: true,
       classes: "myclass",
       groupBy: "category"
-      };     
+    };
+    this.size = '1day';     
   };
   ngAfterViewChecked(){
     this.resizeWindow();

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/f581db30/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 857cbca..f51095f 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
@@ -48,20 +48,36 @@ under the License.
             {{ruleData.type}}
           </div>
         </div>
-        <div class="row">
+        <!-- <div class="row">
           <label for="systemSelector" class="col-xs-4">
             Organization:
           </label>
           <div class="col-xs-8 " style="color: #fff">
             {{ruleData.organization}}
           </div>
+        </div> -->
+        <div class="row" *ngIf="ruleData.type=='accuracy'">
+          <label class="col-xs-4">
+            Source:
+          </label>
+          <div class="col-xs-8" style="color: #fff">
+            {{sourceTable}}
+          </div>
         </div>
-        <div class="row">
+        <div class="row" *ngIf="ruleData.type=='accuracy'">
           <label class="col-xs-4">
-            DataAsset:
+            Target:
           </label>
           <div class="col-xs-8" style="color: #fff">
-            {{sourceTable}}&nbsp;&nbsp;{{targetTable}}
+            {{targetTable}}
+          </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">
@@ -77,11 +93,11 @@ under the License.
   </div>
   <!--//row-->
   <br/>
-  <div>
+  <div *ngIf="ruleData['measure.type']!=='external'">
     <h5 class="row">Mapping rules</h5>
-    <div class="">
+    <div *ngIf="ruleData.type=='accuracy'" class="">
       <p *ngFor="let index of currentrule">{{index.rule}}</p>
-      <div *ngIf="ruleData.type=='accuracy'">
+      <div>
         <p>
           <label style="color:#B2C831">Accuracy Calculation Formula as Below:</label>
         </p>
@@ -103,5 +119,8 @@ under the License.
         </div>
       </div>
     </div>
+    <div *ngIf="ruleData.type=='profiling'" class="">
+      <p>{{this.prorule}}</p>
+    </div>
   </div>
 </div>

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/f581db30/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 68f70a2..5087bf0 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
@@ -42,6 +42,7 @@ export class MeasureDetailComponent implements OnInit {
   targetTable : string;
   type:string;
   currentrule:string;
+  prorule = '';
 
   ngOnInit() {
     this.ruleData = {
@@ -53,18 +54,25 @@ export class MeasureDetailComponent implements OnInit {
     getModelUrl = getModel+"/"+this.currentId;
     this.http.get(getModelUrl).subscribe(data=>{
       this.ruleData = data;
-      this.currentrule = this.ruleData.evaluateRule.rules;
-      this.ruleData.type = this.currentrule[0]["dq.type"];
-      var sourcedata = this.ruleData["data.sources"][0].connectors[0].config;          
-      this.sourceDB = sourcedata.database;
-      this.sourceTable = sourcedata["table.name"];
-      if(this.ruleData.type === "accuracy"){
-        var targetdata = this.ruleData["data.sources"][1].connectors[0].config;
-        this.targetDB = targetdata.database;
-        this.targetTable = targetdata["table.name"];
-      }else{
-        this.targetDB = '';
-        this.targetTable = '';
+      this.ruleData.type = this.ruleData["dq.type"];
+      if(this.ruleData['measure.type'] !== 'external'){
+        this.currentrule = this.ruleData['evaluate.rule'].rules;
+        var currentprorule = this.ruleData['evaluate.rule'].rules;
+        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"];
+        if(this.ruleData.type === "accuracy"){
+          var targetdata = this.ruleData["data.sources"][1].connectors[0].config;
+          this.targetDB = targetdata.database;
+          this.targetTable = targetdata["table.name"];
+        }else{
+          this.targetDB = '';
+          this.targetTable = '';
+        }
       }          
      },err => {
      	console.log('error');

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/f581db30/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 8f71f6a..9a6b5e9 100644
--- a/ui/angular/src/app/measure/measure.component.html
+++ b/ui/angular/src/app/measure/measure.component.html
@@ -24,14 +24,13 @@ under the License.
         </a>
   </p>
   <div id="modelContainer">
-    <!-- <ng2-smart-table [settings]="settings" [source]="source" id="measureTable"  (delete)="onDelete($event)" (edit)="onEdit($event)"></ng2-smart-table> -->
     <table class="table table-striped" [mfData]="results" #mf="mfDataTable" [mfRowsOnPage]="10">
       <thead>
         <tr style="background-color:#7D95CC">
           <th st-ratio="15">Measure Name</th>
           <th st-ratio="15">Measure Type</th>
           <th st-ratio="20">Description</th>
-          <th st-ratio="5">Organization</th>
+          <!-- <th st-ratio="5">Group</th> -->
           <th st-ratio="5">Action</th>
         </tr>
       </thead>
@@ -44,18 +43,18 @@ under the License.
         </tr>
         <tr *ngFor="let row of mf.data">
           <td><a routerLink="/measure/{{row.id}}">{{row.name}}</a></td>
-          <td>{{row.type}}</td>
+          <td>{{row["dq.type"]}}</td>
           <td>{{row.description}}</td>
-          <td>{{row.organization}}</td>
+          <!-- <td>{{row.group}}</td> -->
           <td>
             &nbsp;
             <!-- <a [ngClass]="(!adminAccess && ntAccount!=row.owner)?'disabled':''" href="" (click)="remove(row)" title="delete" style="text-decoration:none"> -->
             <a (click)="remove(row)" title="delete" style="text-decoration:none">
-                        <i class="fa fa-trash-o po"></i>
-                    </a> &nbsp;
+              <i class="fa fa-trash-o po"></i>
+            </a> &nbsp;
             <a routerLink="/measure/{{row.id}}" title="subscribe">
-                        <i class="fa fa-eye"></i>
-                    </a>
+              <i class="fa fa-eye"></i>
+            </a>
           </td>
         </tr>
       </tbody>

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/f581db30/ui/angular/src/app/measure/measure.component.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/measure/measure.component.ts b/ui/angular/src/app/measure/measure.component.ts
index de70a43..c89c062 100644
--- a/ui/angular/src/app/measure/measure.component.ts
+++ b/ui/angular/src/app/measure/measure.component.ts
@@ -18,8 +18,7 @@ under the License.
 */
 import { Component, OnInit} from '@angular/core';
 import { HttpClient} from '@angular/common/http';
-import { Ng2SmartTableModule ,LocalDataSource} from 'ng2-smart-table';
-import {DataTableModule} from "angular2-datatable";
+import { DataTableModule} from "angular2-datatable";
 import { Router} from "@angular/router";
 import { FormControl } from '@angular/forms';
 import { FormsModule } from '@angular/forms';
@@ -38,7 +37,6 @@ import * as $ from 'jquery';
 export class MeasureComponent implements OnInit {
   //results:object[];
   results:any;
-  source:LocalDataSource;
   public visible = false;
   public visibleAnimate = false;
   deletedRow : any;
@@ -46,8 +44,7 @@ export class MeasureComponent implements OnInit {
   targetTable :string;
   deleteId : number;
   deleteIndex:number;
-  // measureData= [{"id":22,"name":"i","description":"i","organization":"waq","type":"accuracy","source":{"id":43,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext"}},"target":{"id":44,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext1"}},"evaluateRule":{"id":22,"sampleRatio":0,"rules":"$source['id'] == $target['id']"},"owner":"test","deleted":false,"process.type":"batch"},{"id":23,"name":"y","description":"y","organization":"waq","type":"accuracy","source":{"id":45,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext"}},"target":{"id":46,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext1"}},"evaluateRule":{"id":23,"sampleRatio":0,"rules":"$source['age'] > $target['age']"},"owner":"test","deleted":false,"process.type":"batch"},{"id":24,"name":"ggg","description":"g","organization":"waq","type":"accuracy","source":{"id":47,"type":"HIVE","version":"1.2","config":{"database"
 :"default","table.name":"ext"}},"target":{"id":48,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext1"}},"evaluateRule":{"id":24,"sampleRatio":0,"rules":"$source['id'] !== $target['id']"},"owner":"test","deleted":false,"process.type":"batch"},{"id":25,"name":"t","description":"t","organization":"qaq","type":"accuracy","source":{"id":49,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext1"}},"target":{"id":50,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext"}},"evaluateRule":{"id":25,"sampleRatio":0,"rules":"$source['name'] >= $target['name']"},"owner":"test","deleted":false,"process.type":"batch"},{"id":26,"name":"yyy","description":"yyy","organization":"yyy","type":"accuracy","source":{"id":51,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext"}},"target":{"id":52,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext1"}},"evaluateRule":{"id":26,"
 sampleRatio":0,"rules":"$source['id'] !== $target['name']"},"owner":"test","deleted":false,"process.type":"batch"},{"id":27,"name":"dd","description":"dd","organization":"waq","type":"accuracy","source":{"id":53,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext1"}},"target":{"id":54,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext"}},"evaluateRule":{"id":27,"sampleRatio":0,"rules":"$source['name'] !== $target['id']"},"owner":"test","deleted":false,"process.type":"batch"},{"id":28,"name":"yyyyyyyyy","description":"y","organization":"waq","type":"accuracy","source":{"id":55,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext"}},"target":{"id":56,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext1"}},"evaluateRule":{"id":28,"sampleRatio":0,"rules":"$source['id'] !== $target['id']"},"owner":"test","deleted":false,"process.type":"batch"},{"id":29,"name":"this","description":n
 ull,"organization":"hadoop","type":"accuracy","source":{"id":57,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext"}},"target":{"id":58,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext1"}},"evaluateRule":{"id":29,"sampleRatio":0,"rules":"$source['id'] == $target['id'] AND $source['name'] !== $target['name'] AND $source['age'] > $target['age']"},"owner":"test","deleted":false,"process.type":"batch"},{"id":30,"name":"new","description":null,"organization":"griffin","type":"accuracy","source":{"id":59,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext"}},"target":{"id":60,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext1"}},"evaluateRule":{"id":30,"sampleRatio":0,"rules":"$source['id'] !== $target['id'] AND $source['name'] == $target['name'] AND $source['age'] > $target['age']"},"owner":"test","deleted":false,"process.type":"batch"},{"id":31,"name":"www","description":"wn
 ","organization":"waq","type":"accuracy","source":{"id":61,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext"}},"target":{"id":62,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext1"}},"evaluateRule":{"id":31,"sampleRatio":0,"rules":"$source['id'] > $target['id'] AND $source['name'] == $target['name'] AND $source['age'] !== $target['age']"},"owner":"test","deleted":false,"process.type":"batch"},{"id":32,"name":"testtest","description":null,"organization":"waq","type":"accuracy","source":{"id":63,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext1"}},"target":{"id":64,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext"}},"evaluateRule":{"id":32,"sampleRatio":0,"rules":"$source['id'] !== $target['id'] AND $source['name'] > $target['name'] AND $source['age'] == $target['age']"},"owner":"test","deleted":false,"process.type":"batch"},{"id":33,"name":"search_hourly","descriptio
 n":"search","organization":"waq","type":"accuracy","source":{"id":65,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext"}},"target":{"id":66,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext1"}},"evaluateRule":{"id":33,"sampleRatio":0,"rules":"$source['id'] !== $target['id'] AND $source['name'] == $target['name'] AND $source['age'] >= $target['age']"},"owner":"test","deleted":false,"process.type":"batch"},{"id":34,"name":"testt","description":null,"organization":"waq","type":"accuracy","source":{"id":67,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext"}},"target":{"id":68,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext1"}},"evaluateRule":{"id":34,"sampleRatio":0,"rules":"$source['id'] !== $target['id'] AND $source['name'] == $target['name'] AND $source['age'] > $target['age']"},"owner":"test","deleted":false,"process.type":"batch"}];
-
+  
   public hide(): void {
     this.visibleAnimate = false;
     setTimeout(() => this.visible = false, 300);
@@ -97,16 +94,19 @@ export class MeasureComponent implements OnInit {
   ngOnInit():void {
     var allModels = this.serviceService.config.uri.allModels;
   	this.http.get(allModels).subscribe(data =>{
-      for(let measure in data){
-        data[measure].trueName = data[measure].name;
-        if(data[measure].evaluateRule.rules[0]){
-          data[measure].type = data[measure].evaluateRule.rules[0]["dq.type"];
-        }else{
-          data[measure].type = '';
-        }
-      }
+      // for(let measure in data){
+      //   data[measure].trueName = data[measure].name;
+      //   if(data[measure].type !== 'griffin'){
+      //     data[measure].type = data[measure]['evaluate.rule'].rules[0]["dq.type"];
+      //   }else{
+      //     data[measure].type = '';
+      //   }
+      // }
   		this.results = Object.keys(data).map(function(index){
         let measure = data[index];
+        if(measure['measure.type'] === 'external'){
+          measure['dq.type'] = 'external';
+        }
         return measure;
       });
   	});

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/f581db30/ui/angular/src/app/metric/detail-metric/detail-metric.component.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/metric/detail-metric/detail-metric.component.ts b/ui/angular/src/app/metric/detail-metric/detail-metric.component.ts
index dca8ae4..adb60c0 100644
--- a/ui/angular/src/app/metric/detail-metric/detail-metric.component.ts
+++ b/ui/angular/src/app/metric/detail-metric/detail-metric.component.ts
@@ -48,14 +48,18 @@ export class DetailMetricComponent implements OnInit {
   selectedMeasure:string;
   chartOption:{};
   data:any;
-  currentMeasure:string;
+  currentJob:string;
   finalData:any;
+  metricName:string;
+  size = 300;
+  offset = 0;
 
   ngOnInit() {
-  	this.currentMeasure = this.route.snapshot.paramMap.get('name');
+  	this.currentJob = this.route.snapshot.paramMap.get('name');
     var self = this;
-    var metricDetailUrl = this.serviceService.config.uri.dashboard;
-    this.http.post(metricDetailUrl, {"query": {  "bool":{"filter":[ {"term" : {"name.keyword": this.currentMeasure }}]}},  "sort": [{"tmst": {"order": "desc"}}],"size":10000}).subscribe( data=> {
+    var metricdetail = self.serviceService.config.uri.metricdetail;
+    var metricDetailUrl = metricdetail + '?metricName=' + this.currentJob + '&size=' + this.size + '&offset=' + this.offset;
+    this.http.get(metricDetailUrl).subscribe(data => {
       var metric = {
         'name':'',
         'timestamp':0,
@@ -64,13 +68,10 @@ export class DetailMetricComponent implements OnInit {
       };
       this.data = data;
       if(this.data){
-        metric.name = this.data.hits.hits[0]._source.name;
-        metric.timestamp =this.data.hits.hits[this.data.hits.hits.length-1]._source.tmst;
-        metric.dq = this.data.hits.hits[this.data.hits.hits.length-1]._source.value.matched/this.data.hits.hits[this.data.hits.hits.length-1]._source.value.matched*100;
-        metric.details = new Array();
-        for(let point of this.data.hits.hits){
-          metric.details.push(point);
-        };
+        metric.name = this.data[0].name;
+        metric.timestamp =this.data[0].tmst;
+        metric.dq = this.data[0].value.matched/this.data[0].value.total*100;
+        metric.details = JSON.parse(JSON.stringify(this.data));
       }
       this.chartOption = this.chartService.getOptionBig(metric);
       $('#bigChartDiv').height(window.innerHeight-120+'px');

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/f581db30/ui/angular/src/app/metric/metric.component.html
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/metric/metric.component.html b/ui/angular/src/app/metric/metric.component.html
index afca42b..f80cdde 100644
--- a/ui/angular/src/app/metric/metric.component.html
+++ b/ui/angular/src/app/metric/metric.component.html
@@ -20,23 +20,23 @@ under the License.
   <div class="container-fluid">
     <div class="row col-lg-12" style="margin-top: 15px;">
       <div class="form-group">
-        <span>
-	      <label>Organization: </label>
+        <!-- <span>
+	      <label>Group: </label>
 	        <select ng-disabled="orgSelectDisabled" class="form-control"  (change)="changeOrg()" id="orgSelector" [(ngModel)]="selectedOrgIndex">
-              <option value="0">-- All --</option>
+              <option value="0"> All </option>
               <option *ngFor="let opt of orgs;let m = index" value="{{m+1}}"  >{{opt.name}}</option>
 	        </select>
-	    </span>
+	      </span> -->
         <span style="padding-left:30px;">
 	      <label>Measure: </label>
 	        <select class="form-control"  (change)="changeMeasure()" [(ngModel)]="selectedMeasureIndex" id="measureSelector">
               <option value="0"> -- All -- </option>
-              <option *ngFor="let opt of measureOptions;let n = index" value="{{n+1}}">{{opt}}</option>
+              <option *ngFor="let key of measureOptions;let n = index" value="{{n+1}}">{{key}}</option>
 	        </select>
 	    </span>
       </div>
     </div>
-    <div *ngFor="let outerItems of oData;let parent=index">
+    <div *ngFor="let outerItems of finalData;let parent=index">
       <div class="row">
         <div class="col-sm-12 col-md-12 col-lg-12">
           <h4>{{outerItems.name}}</h4>

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/f581db30/ui/angular/src/app/metric/metric.component.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/metric/metric.component.ts b/ui/angular/src/app/metric/metric.component.ts
index f50f652..62d180b 100644
--- a/ui/angular/src/app/metric/metric.component.ts
+++ b/ui/angular/src/app/metric/metric.component.ts
@@ -31,71 +31,41 @@ import * as $ from 'jquery';
   providers:[ChartService,ServiceService]
 })
 export class MetricComponent implements OnInit {
-
+  
   constructor(
   	public chartService:ChartService,
   	// public getMetricService:GetMetricService,
     public serviceService:ServiceService,
   	private http: HttpClient,
   	private router:Router) { }
-  orgs = [];
-  // finalData :any;
   data :any;
   finalData = [];
-  oData = [];
-  mData = [];
-  fData = [];
-  originalOrgs = [];
-  status:{
-  	'health':number,
-  	'invalid':number
-  };
   chartOption = new Map();
-  dataData = [];
+  // dataData = [];
   originalData:any;
-  metricName = [];
-  metricNameUnique = [];
-  myData = [];
   measureOptions = [];
   selectedMeasureIndex = 0;
   chartHeight:any;
-  selectedOrgIndex = 0;
   // var formatUtil = echarts.format;
-  metricData = [];
-  orgWithMeasure:any;
-  alljobs = [];
+  mesWithJob:any;
   
 
-  public duplicateArray() {
-  let arr = [];
-  this.oData.forEach((x) => {
-    arr.push(Object.assign({}, x));
-  });
-  // arr.map((x) => {x.status = DEFAULT});
-  return this.oData.concat(arr);
-  }
-
   ngOnInit() {
     this.renderData();	
   }
-  
+
   renderData(){
-    var url_organization = this.serviceService.config.uri.organization;
     let url_dashboard = this.serviceService.config.uri.dashboard;
-    this.http.get(url_organization).subscribe(data => {
-      var jobMap = new Map();
-      this.orgWithMeasure = data;
-      var orgNode = null;
-      for(let orgName in this.orgWithMeasure){
-        orgNode = new Object();
-        orgNode.name = orgName;
-        orgNode.jobMap = [];
-        orgNode.measureMap = [];
+    this.http.get(url_dashboard).subscribe(data => {
+      this.mesWithJob = data;
+      var mesNode = null;
+      for(let mesName in this.mesWithJob){
+        mesNode = new Object();
+        mesNode.name = mesName;
         var node = null;
         node = new Object();
-        node.name = orgName;
+        node.name = mesName;
         node.dq = 0;
-        //node.metrics = new Array();
         var metricNode = {
           'name':'',
           'timestamp':'',
@@ -103,57 +73,25 @@ export class MetricComponent implements OnInit {
           'details':[]
         }
         node.metrics = [];
-        for(let key in this.orgWithMeasure[orgName]){
-          orgNode.measureMap.push(key);
-          this.measureOptions.push(key);
-          var jobs = this.orgWithMeasure[orgName][key];          
-            for(let i = 0;i < jobs.length;i++){
-              orgNode.jobMap.push(jobs[i].jobName);
-              var job = jobs[i].jobName;
-              jobMap.set(job, orgNode.name);
-              this.http.post(url_dashboard, {"query": {  "bool":{"filter":[ {"term" : {"name.keyword": job }}]}},  "sort": [{"tmst": {"order": "desc"}}],"size":300}).subscribe( jobes=> { 
-                this.originalData = jobes;
-                if(this.originalData.hits){
-                  this.metricData = this.originalData.hits.hits;
-                  if(this.metricData[0]._source.value.miss != undefined){
-                    metricNode.details = this.metricData;                                
-                    metricNode.name = this.metricData[0]._source.name;
-                    metricNode.timestamp = this.metricData[0]._source.tmst;
-                    metricNode.dq = this.metricData[0]._source.value.matched/this.metricData[0]._source.value.total*100;
-                    this.pushToNode(jobMap, metricNode);
-                  }
-                }
-              },
-              err => {
-                // console.log(err);
-              console.log('Error occurs when connect to elasticsearh!');
-              });            
-            }                          
-        } 
-        this.finalData.push(node); 
-        this.orgs.push(orgNode);                 
+        this.measureOptions.push(mesName);
+        var metricData = this.mesWithJob[mesName][0];
+        if(metricData.metricValues[0] != undefined && metricData.metricValues[0].value.matched != undefined){
+          metricNode.details = JSON.parse(JSON.stringify(metricData.metricValues));
+          metricNode.name = metricData.name;
+          metricNode.timestamp = metricData.metricValues[0].value.tmst;
+          metricNode.dq = metricData.metricValues[0].value.matched/metricData.metricValues[0].value.total*100;
+          node.metrics.push(metricNode);
+        }
+        this.finalData.push(node);                 
       }
-      this.oData = this.finalData.slice(0);
+      this.originalData = JSON.parse(JSON.stringify(this.finalData));
       var self = this;
       setTimeout(function function_name(argument) {
-        self.redraw(self.oData);
-      },1000) 
+        self.redraw(self.finalData);
+      },1000)
     });
   }
 
-  pushToNode(jobMap, metricNode){
-    var jobName = metricNode.name;
-    var orgName = jobMap.get(jobName);
-    var org = null;
-    for(var i = 0; i < this.finalData.length; i ++){
-      org = this.finalData[i];
-      if(orgName == org.name){
-        org.metrics.push(Object.assign({}, metricNode));
-      }
-    }
-  }  
-
-
   getOption(parent,i){
    	return this.chartOption.get('thumbnail'+parent+'-'+i);
   }
@@ -175,67 +113,27 @@ export class MetricComponent implements OnInit {
   }
 
   goTo(parent,i){
-   	this.router.navigate(['/detailed/'+this.oData[parent].metrics[i].name]) ;
+   	this.router.navigate(['/detailed/'+this.finalData[parent].metrics[i].name]) ;
   }
 
-  changeOrg() {
-    this.selectedMeasureIndex = undefined;
-    this.measureOptions = [];
-    this.oData = this.finalData.slice(0);
-    if(this.selectedOrgIndex == 0){
-      this.oData = this.finalData;
-    }
-    else {
-      var org = this.orgs[this.selectedOrgIndex-1];
-      this.measureOptions = org.measureMap;
-      for(let i = 0;i<this.oData.length;i++){
-        if(this.oData[i].name!=org.name){
-          for(var j = i; j < this.oData.length - 1; j++){
-            this.oData[j] = this.oData[j + 1];
-          }
-          this.oData.length--;
-          i--;
-        }
-      }
-    }
-    this.mData = this.oData.slice(0);
-    var self = this;
-    setTimeout(function() {
-      self.redraw(self.oData);
-    }, 1000);
-  };
 
   changeMeasure() {
-    var jobdetail = [];  
-    this.fData = JSON.parse(JSON.stringify(this.mData));
-    this.oData = this.fData; 
-    if(this.selectedMeasureIndex != undefined && this.selectedMeasureIndex != 0){
+    this.finalData = [];
+    if(this.selectedMeasureIndex == 0){
+      for(let data of this.originalData){
+        this.finalData.push(data);
+      }
+    }else{
       var measure = this.measureOptions[this.selectedMeasureIndex-1];
-      for(let key in this.orgWithMeasure){
-        if(key == this.fData[0].name){
-          for(let measurename in this.orgWithMeasure[key]){
-            if(measurename == measure){
-              var jobname = this.orgWithMeasure[key][measurename];
-              for(let i=0;i< jobname.length;i++){
-                  jobdetail.push(jobname[i].jobName);
-                }
-            }
-          }
+      for(let data of this.originalData){
+        if(data.name === measure){
+          this.finalData.push(JSON.parse(JSON.stringify(data)));
         }
-      }
-      for(let i = 0;i<this.fData[0].metrics.length;i++){
-        if(jobdetail.indexOf(this.fData[0].metrics[i].name) === -1){
-          for(var j = i; j < this.fData[0].metrics.length - 1; j++){
-            this.fData[0].metrics[j] = this.fData[0].metrics[j + 1];
-          }
-          this.fData[0].metrics.length--;
-          i--;
-        }          
-      }
+      };
     }
     var self = this;
     setTimeout(function() {
-      self.redraw(self.oData);
+      self.redraw(self.finalData);
     }, 0);
   }
 

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/f581db30/ui/angular/src/app/service/chart.service.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/service/chart.service.ts b/ui/angular/src/app/service/chart.service.ts
index 32210dd..9ae6dcd 100644
--- a/ui/angular/src/app/service/chart.service.ts
+++ b/ui/angular/src/app/service/chart.service.ts
@@ -58,16 +58,33 @@ export class ChartService {
       return timestamp+TzOffset*60*60*1000;
   }
 
+  // getMetricData(metric) {
+  //   var data = [];
+  //   var chartData = metric.details;
+  //   for(var i = 0; i < chartData.length; i++){
+  //          if(chartData[i]._source.total!=0)
+  //            data.push([this.formatTimeStamp(chartData[i]._source.tmst), parseFloat((chartData[i]._source.value.matched/chartData[i]._source.value.total*100).toFixed(2))]);
+  //          else
+  //            data.push([this.formatTimeStamp(chartData[i]._source.tmst), parseFloat((0).toFixed(2))]);
+  //     }
+
+  //   data.sort(function(a, b){
+  //     return a[0] - b[0];
+  //   });
+  //   return data;
+  // }
+
   getMetricData(metric) {
     var data = [];
-    var chartData = metric.details;
-    for(var i = 0; i < chartData.length; i++){
-           if(chartData[i]._source.total!=0)
-             data.push([this.formatTimeStamp(chartData[i]._source.tmst), parseFloat((chartData[i]._source.value.matched/chartData[i]._source.value.total*100).toFixed(2))]);
-           else
-             data.push([this.formatTimeStamp(chartData[i]._source.tmst), parseFloat((0).toFixed(2))]);
+    if(metric.details){
+      var chartData = metric.details;
+      for(var i = 0; i < chartData.length; i++){
+        if(chartData[i].value.total!=0)
+          data.push([this.formatTimeStamp(chartData[i].tmst), parseFloat((chartData[i].value.matched/chartData[i].value.total*100).toFixed(2))]);
+        else
+          data.push([this.formatTimeStamp(chartData[i].tmst), parseFloat((0).toFixed(2))]);
       }
-
+    }
     data.sort(function(a, b){
       return a[0] - b[0];
     });

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/f581db30/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 301be49..9ee267e 100644
--- a/ui/angular/src/app/service/service.service.ts
+++ b/ui/angular/src/app/service/service.service.ts
@@ -22,13 +22,14 @@ import { Injectable } from '@angular/core';
 export class ServiceService {
 
   constructor() { }
-    // public this.BACKEND_SERVER = 'http://10.65.145.88:38080';
-    // public BACKEND_SERVER = 'http://localhost:8080';
-    public BACKEND_SERVER = '';
+    //public BACKEND_SERVER = 'http://10.65.145.88:38080';
+    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" ;
+    // public ES_SERVER = "http://" + location.host.replace("8080", "9200");
+    // public ES_SERVER = "http://10.64.222.80:39200" ;
     // public ES_SERVER = "http://10.65.145.88:39200" ;
+    // public ES_SERVER = "http://localhost:8080" ;
 
     public config = {
           // URI paths, always have a trailing /
@@ -71,19 +72,21 @@ export class ServiceService {
 //              dashboard:'/dashboard.json',
 
 
-              organization:this.BACKEND_SERVER + this.API_ROOT_PATH + '/org/measure/jobs',
+              // organization:this.BACKEND_SERVER + this.API_ROOT_PATH + '/org/measure/jobs',
+              dashboard:this.BACKEND_SERVER + this.API_ROOT_PATH + '/metrics',
+              metricdetail:this.BACKEND_SERVER + this.API_ROOT_PATH + '/metrics/values',
 
 
-              dashboard:this.ES_SERVER+'/griffin/accuracy/_search?pretty&filter_path=hits.hits._source',
+              // dashboard:this.ES_SERVER+'/griffin/accuracy/_search?pretty&filter_path=hits.hits._source',
               metricsample: this.BACKEND_SERVER + this.API_ROOT_PATH + '/metrics/sample',
               metricdownload: this.BACKEND_SERVER + this.API_ROOT_PATH + '/metrics/download',
 
               //Models
 
               allModels: this.BACKEND_SERVER + this.API_ROOT_PATH + '/measures',
-              addModels: this.BACKEND_SERVER + this.API_ROOT_PATH + '/measure',
-              deleteModel:this.BACKEND_SERVER + this.API_ROOT_PATH + '/measure',
-              getModel: this.BACKEND_SERVER + this.API_ROOT_PATH + '/measure',
+              addModels: this.BACKEND_SERVER + this.API_ROOT_PATH + '/measures',
+              deleteModel:this.BACKEND_SERVER + this.API_ROOT_PATH + '/measures',
+              getModel: this.BACKEND_SERVER + this.API_ROOT_PATH + '/measures',
               enableModel: this.BACKEND_SERVER + this.API_ROOT_PATH + '/models/enableModel',
 
               //Jobs

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/f581db30/ui/angular/src/app/sidebar/sidebar.component.html
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/sidebar/sidebar.component.html b/ui/angular/src/app/sidebar/sidebar.component.html
index 194db04..f2b0cad 100644
--- a/ui/angular/src/app/sidebar/sidebar.component.html
+++ b/ui/angular/src/app/sidebar/sidebar.component.html
@@ -35,7 +35,7 @@ under the License.
     </div>
   </div>
   <div id="side-bar-metrics" class="row">
-    <div *ngFor="let outerItems of oData;let parent=index">
+    <div *ngFor="let outerItems of finalData;let parent=index">
       <div class="well">
         <div class="col-sm-4 col-lg-4 col-md-4 ">
           <h4>

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/f581db30/ui/angular/src/app/sidebar/sidebar.component.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/sidebar/sidebar.component.ts b/ui/angular/src/app/sidebar/sidebar.component.ts
index 8a62fbf..8a8d461 100644
--- a/ui/angular/src/app/sidebar/sidebar.component.ts
+++ b/ui/angular/src/app/sidebar/sidebar.component.ts
@@ -41,22 +41,11 @@ export class SidebarComponent implements OnInit {
   	public chartService:ChartService) {
   }
   
-  oData = [];
-  orgs = [];
   finalData = [];
-  originalOrgs = [];
-  status:{
-  	'health':number,
-  	'invalid':number
-  };
-  metricData = [];
-  originalData :any;
-  metricName = [];
-  metricNameUnique = [];
-  myData = [];
+  oData = [];
   chartOption = new Map();
   orgWithMeasure:any;
-  measureOptions = [];
+  mesWithJob:any;
   // var formatUtil = echarts.format;
 
   pageInit() {
@@ -106,76 +95,36 @@ export class SidebarComponent implements OnInit {
   }
 
   sideBarList(sysName){
-    // this.finalData = this.getMetricService.renderData();
-    var url_organization = this.serviceService.config.uri.organization;
     let url_dashboard = this.serviceService.config.uri.dashboard;
-    this.http.get(url_organization).subscribe(data => {
-      var jobMap = new Map();
-      this.orgWithMeasure = data;
-      var orgNode = null;
-      for(let orgName in this.orgWithMeasure){
-        orgNode = new Object();
-        orgNode.name = orgName;
-        orgNode.jobMap = [];
-        orgNode.measureMap = [];
+    this.http.get(url_dashboard).subscribe(data => {
+      this.mesWithJob = data;
+      var mesNode = null;
+      for(let mesName in this.mesWithJob){
+        mesNode = new Object();
+        mesNode.name = mesName;
         var node = null;
         node = new Object();
-        node.name = orgName;
+        node.name = mesName;
         node.dq = 0;
-        //node.metrics = new Array();
         var metricNode = {
           'name':'',
           'timestamp':'',
           'dq':0,
           'details':[]
         }
-        var array = [];
-        node.metrics = array;
-        for(let key in this.orgWithMeasure[orgName]){
-          orgNode.measureMap.push(key);
-          this.measureOptions.push(key);
-          var jobs = this.orgWithMeasure[orgName][key];          
-            for(let i = 0;i < jobs.length;i++){
-              orgNode.jobMap.push(jobs[i].jobName);
-              var job = jobs[i].jobName;
-              jobMap.set(job, orgNode.name);
-              this.http.post(url_dashboard, {"query": {  "bool":{"filter":[ {"term" : {"name.keyword": job }}]}},  "sort": [{"tmst": {"order": "desc"}}],"size":300}).subscribe( jobes=> { 
-                this.originalData = jobes;
-                if(this.originalData.hits){
-                  this.metricData = this.originalData.hits.hits;
-                  if(this.metricData[0]._source.value.miss != undefined){
-                    metricNode.details = this.metricData;                                
-                    metricNode.name = this.metricData[0]._source.name;
-                    metricNode.timestamp = this.metricData[0]._source.tmst;
-                    metricNode.dq = this.metricData[0]._source.value.matched/this.metricData[0]._source.value.total*100;
-                    this.pushToNode(jobMap, metricNode);
-                  }
-                }
-              },
-              err => {
-                // console.log(err);
-              console.log('Error occurs when connect to elasticsearh!');
-              });            
-            }                          
-        } 
-        this.finalData.push(node); 
-        this.orgs.push(orgNode);                 
+        node.metrics = [];
+        var metricData = this.mesWithJob[mesName][0];
+        if(metricData.metricValues[0] != undefined && metricData.metricValues[0].value.matched != undefined){
+          metricNode.details = JSON.parse(JSON.stringify(metricData.metricValues));
+          metricNode.name = metricData.name;
+          metricNode.timestamp = metricData.metricValues[0].value.tmst;
+          metricNode.dq = metricData.metricValues[0].value.matched/metricData.metricValues[0].value.total*100;
+          node.metrics.push(metricNode);
+        }
+        this.finalData.push(node);                 
       }
-      this.oData = this.finalData.slice(0);
     });
   }
-  
-  pushToNode(jobMap, metricNode){
-    var jobName = metricNode.name;
-    var orgName = jobMap.get(jobName);
-    var org = null;
-    for(var i = 0; i < this.finalData.length; i ++){
-      org = this.finalData[i];
-      if(orgName == org.name){
-        org.metrics.push(Object.assign({}, metricNode));
-      }
-    }
-  }  
 
   ngOnInit() {
   	this.sideBarList(null);

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/f581db30/ui/angular/src/main.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/main.ts b/ui/angular/src/main.ts
index 27a3fd8..55c7b58 100644
--- a/ui/angular/src/main.ts
+++ b/ui/angular/src/main.ts
@@ -18,12 +18,10 @@ under the License.
 */
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
 import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';
 import { RouterModule, Routes } from '@angular/router';
 import {HttpClientModule} from '@angular/common/http';
-import { Ng2SmartTableModule } from 'ng2-smart-table';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 
 import 'bootstrap/dist/css/bootstrap.css';

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/f581db30/ui/angular/src/styles.css
----------------------------------------------------------------------
diff --git a/ui/angular/src/styles.css b/ui/angular/src/styles.css
index 0806a18..4c80f95 100644
--- a/ui/angular/src/styles.css
+++ b/ui/angular/src/styles.css
@@ -22,6 +22,7 @@ under the License.
 @import url('../node_modules/font-awesome/css/font-awesome.css');
 @import "~@angular/material/prebuilt-themes/indigo-pink.css";
 @import url('../node_modules/angular2-toaster/toaster.css');
+@import url('../node_modules/nouislider/distribute/nouislider.min.css');
 
 
 /*@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');*/
@@ -1092,6 +1093,7 @@ tbody {
   text-align: center;
   border: 5px solid #c5c5c5;
   border-radius: 3px;
+  color: #999;
 }
 
 #hourSelector{
@@ -1108,7 +1110,7 @@ tbody {
 }
 
 
-#secondSelector{
+#daySelector{
   width:20%;
   height:100%;
   display: inline-block;


[2/2] incubator-griffin git commit: Add partition configuration when create measure

Posted by gu...@apache.org.
Add partition configuration when create measure

1.update measure detail's mapping rules
2.get metrics value from backend instead of elasticsearch
3.add partition configuration when create measure
4.add data range when create job

Author: ahutsunshine <ah...@gmail.com>
Author: dodobel <12...@qq.com>
Author: He Wang <wa...@qq.com>

Closes #199 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/f581db30
Tree: http://git-wip-us.apache.org/repos/asf/incubator-griffin/tree/f581db30
Diff: http://git-wip-us.apache.org/repos/asf/incubator-griffin/diff/f581db30

Branch: refs/heads/master
Commit: f581db306da63f56c9342ef4a99dd1a8290db4c7
Parents: a0b130a
Author: ahutsunshine <ah...@gmail.com>
Authored: Thu Jan 25 12:54:55 2018 +0800
Committer: Lionel Liu <bh...@163.com>
Committed: Thu Jan 25 12:54:55 2018 +0800

----------------------------------------------------------------------
 ui/angular/package.json                         |   5 +-
 ui/angular/src/app/app.module.ts                |  22 +-
 .../src/app/dataasset/dataasset.component.css   |   2 +-
 .../src/app/dataasset/dataasset.component.ts    |  18 +-
 ui/angular/src/app/health/health.component.ts   |  92 +---
 .../app/job/create-job/create-job.component.css |  16 +
 .../job/create-job/create-job.component.html    | 149 +++---
 .../app/job/create-job/create-job.component.ts  | 484 +++++++++++++++----
 ui/angular/src/app/job/job.component.html       |   8 +-
 ui/angular/src/app/job/job.component.ts         |  58 +--
 .../measure/create-measure/ac/ac.component.html |  84 +++-
 .../measure/create-measure/ac/ac.component.ts   | 269 ++++++++---
 .../configuration/configuration.component.css   |  18 +
 .../configuration/configuration.component.html  |  61 +++
 .../configuration.component.spec.ts             |  44 ++
 .../configuration/configuration.component.ts    |  73 +++
 .../create-measure.component.html               |  18 +
 .../measure/create-measure/pr/pr.component.html |  82 +++-
 .../measure/create-measure/pr/pr.component.ts   | 168 +++++--
 .../measure-detail.component.html               |  33 +-
 .../measure-detail/measure-detail.component.ts  |  32 +-
 .../src/app/measure/measure.component.html      |  15 +-
 ui/angular/src/app/measure/measure.component.ts |  26 +-
 .../detail-metric/detail-metric.component.ts    |  23 +-
 ui/angular/src/app/metric/metric.component.html |  12 +-
 ui/angular/src/app/metric/metric.component.ts   | 174 ++-----
 ui/angular/src/app/service/chart.service.ts     |  31 +-
 ui/angular/src/app/service/service.service.ts   |  23 +-
 .../src/app/sidebar/sidebar.component.html      |   2 +-
 ui/angular/src/app/sidebar/sidebar.component.ts |  89 +---
 ui/angular/src/main.ts                          |   2 -
 ui/angular/src/styles.css                       |   4 +-
 32 files changed, 1420 insertions(+), 717 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/f581db30/ui/angular/package.json
----------------------------------------------------------------------
diff --git a/ui/angular/package.json b/ui/angular/package.json
index b6b6ead..0eceb6f 100644
--- a/ui/angular/package.json
+++ b/ui/angular/package.json
@@ -24,14 +24,16 @@
     "@angular/platform-browser-dynamic": "4.4.4",
     "@angular/router": "4.4.4",
     "angular2-datatable": "0.6.0",
-    "angular2-toaster": "4.0.1",
     "angular2-multiselect-dropdown": "1.3.4",
+    "angular2-toaster": "4.0.1",
     "bootstrap": "^3.3.7",
     "core-js": "^2.4.1",
     "echarts": "^3.7.0",
     "font-awesome": "^4.7.0",
     "ng2-bootstrap": "1.6.3",
+    "ng2-nouislider": "^1.7.6",
     "ngx-echarts": "1.2.4",
+    "nouislider": "11.0.3",
     "rxjs": "5.4.2",
     "zone.js": "^0.8.14"
   },
@@ -56,7 +58,6 @@
     "karma-coverage-istanbul-reporter": "^1.2.1",
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
-    "ng2-smart-table": "^1.2.1",
     "protractor": "~5.1.2",
     "ts-node": "~3.2.0",
     "tslint": "~5.3.2",

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/f581db30/ui/angular/src/app/app.module.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/app.module.ts b/ui/angular/src/app/app.module.ts
index e99f6e1..4bb030b 100644
--- a/ui/angular/src/app/app.module.ts
+++ b/ui/angular/src/app/app.module.ts
@@ -17,21 +17,17 @@ specific language governing permissions and limitations
 under the License.
 */
 import { BrowserModule } from '@angular/platform-browser';
-import {NgModule} from '@angular/core';
+import { NgModule} from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { HttpClientModule} from '@angular/common/http';
-
-import { Ng2SmartTableModule } from 'ng2-smart-table';
-import {DataTableModule} from "angular2-datatable";
+import { DataTableModule} from "angular2-datatable";
 import { TreeModule } from 'angular-tree-component';
 import { BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import { AngularEchartsModule } from 'ngx-echarts';
 // import { MdDatepickerModule, MdNativeDateModule} from '@angular/material';
 import { MatDatepickerModule, MatNativeDateModule} from '@angular/material';
 import { Location, LocationStrategy, HashLocationStrategy} from '@angular/common';
-
-
-import {ToasterModule, ToasterService} from 'angular2-toaster';
+import { ToasterModule, ToasterService} from 'angular2-toaster';
 import { FormsModule } from '@angular/forms';
 import { AppComponent } from './app.component';
 import { MeasureComponent } from './measure/measure.component';
@@ -50,8 +46,9 @@ import { PrComponent } from './measure/create-measure/pr/pr.component';
 import { LoginComponent } from './login/login.component';
 import { AngularMultiSelectModule } from 'angular2-multiselect-dropdown/angular2-multiselect-dropdown';
 import { RuleComponent } from './measure/create-measure/pr/rule/rule.component';
-import {TruncatePipe} from './sidebar/truncate.pipe';
-
+import { TruncatePipe} from './sidebar/truncate.pipe';
+import { ConfigurationComponent } from './measure/create-measure/configuration/configuration.component';
+import { NouisliderModule } from 'ng2-nouislider';
 
 
 const appRoutes: Routes = [
@@ -138,16 +135,17 @@ const appRoutes: Routes = [
     PrComponent,
     LoginComponent,
     RuleComponent,
-    TruncatePipe
+    TruncatePipe,
+    ConfigurationComponent
   ],
   imports: [
     BrowserModule,
     HttpClientModule,
-    Ng2SmartTableModule,
     TreeModule,
     BrowserAnimationsModule,
     ToasterModule,
     FormsModule,
+    NouisliderModule,
     AngularEchartsModule,
     DataTableModule,
     AngularMultiSelectModule,
@@ -157,8 +155,6 @@ const appRoutes: Routes = [
     ),
     MatNativeDateModule,
     MatDatepickerModule
-
-
   ],
   providers: [],
   bootstrap: [AppComponent]

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/f581db30/ui/angular/src/app/dataasset/dataasset.component.css
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/dataasset/dataasset.component.css b/ui/angular/src/app/dataasset/dataasset.component.css
index 627c734..0d004e6 100644
--- a/ui/angular/src/app/dataasset/dataasset.component.css
+++ b/ui/angular/src/app/dataasset/dataasset.component.css
@@ -20,7 +20,7 @@ under the License.
   color: #fff;
   position: absolute;
   left: 50%;
-  top: 80%;
+  top: 20%;
 }
 .co{
 	border-collapse: separate;

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/f581db30/ui/angular/src/app/dataasset/dataasset.component.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/dataasset/dataasset.component.ts b/ui/angular/src/app/dataasset/dataasset.component.ts
index c99fde3..877768e 100644
--- a/ui/angular/src/app/dataasset/dataasset.component.ts
+++ b/ui/angular/src/app/dataasset/dataasset.component.ts
@@ -18,7 +18,6 @@ under the License.
 */
 import { Component, OnInit } from '@angular/core';
 import {HttpClient} from '@angular/common/http';
-import { Ng2SmartTableModule ,LocalDataSource} from 'ng2-smart-table';
 import * as $ from 'jquery';
 import {ServiceService} from '../service/service.service';
 
@@ -30,7 +29,6 @@ import {ServiceService} from '../service/service.service';
 })
 export class DataassetComponent implements OnInit {
   public results = [];
-  source:LocalDataSource;
   public visible = false;
   public visibleAnimate = false;
   sourceTable :string;
@@ -69,15 +67,13 @@ export class DataassetComponent implements OnInit {
   ngOnInit() {
     var allDataassets = this.serviceService.config.uri.dataassetlist;
     this.http.get(allDataassets).subscribe(data =>{
-        for (let db in data) {
-            for(let table of data[db]){           
-            table.location = table.sd.location;
-            this.results.push(table);
-            }       
-        }
-        this.source = new LocalDataSource(this.results);
-        this.source.load(this.results);
-        $('.icon').hide();
+      for (let db in data) {
+        for(let table of data[db]){           
+          table.location = table.sd.location;
+          this.results.push(table);
+        }       
+      }
+      $('.icon').hide();
     },err =>{
       
     });

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/f581db30/ui/angular/src/app/health/health.component.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/health/health.component.ts b/ui/angular/src/app/health/health.component.ts
index 1b53f4d..c08a9c0 100644
--- a/ui/angular/src/app/health/health.component.ts
+++ b/ui/angular/src/app/health/health.component.ts
@@ -35,26 +35,13 @@ export class HealthComponent implements OnInit {
   constructor(private http: HttpClient,private router:Router,public serviceService:ServiceService) { };
   chartOption:object;
   // var formatUtil = echarts.format;
-  orgs = [];
   dataData = [];
   finalData = [];
   oData = [];
   // originalData = [];
   originalData:any;
-  metricName = [];
-  metricNameUnique = [];
-  myData = [];
-  measureOptions = [];
-  originalOrgs = [];
-  orgWithMeasure: any;
-
-
-  status:{
-    'health':number,
-    'invalid':number
-  };
+  mesWithJob:any;
   // var formatUtil = echarts.format;
-  metricData = [];
 
   
   onChartClick($event){
@@ -181,80 +168,41 @@ export class HealthComponent implements OnInit {
   
 
   renderData(){
-    var url_organization = this.serviceService.config.uri.organization;
     let url_dashboard = this.serviceService.config.uri.dashboard;
-    this.http.get(url_organization).subscribe(data => {
-      var jobMap = new Map();
-      this.orgWithMeasure = data;
-      var orgNode = null;
-      for(let orgName in this.orgWithMeasure){
-        orgNode = new Object();
-        orgNode.name = orgName;
-        orgNode.jobMap = [];
-        orgNode.measureMap = [];
+    this.http.get(url_dashboard).subscribe(data => {
+      this.mesWithJob = data;
+      var mesNode = null;
+      for(let mesName in this.mesWithJob){
+        mesNode = new Object();
+        mesNode.name = mesName;
         var node = null;
         node = new Object();
-        node.name = orgName;
+        node.name = mesName;
         node.dq = 0;
-        //node.metrics = new Array();
         var metricNode = {
           'name':'',
           'timestamp':'',
           'dq':0,
           'details':[]
         }
-        var array = [];
-        node.metrics = array;
-        for(let key in this.orgWithMeasure[orgName]){
-          orgNode.measureMap.push(key);
-          this.measureOptions.push(key);
-          var jobs = this.orgWithMeasure[orgName][key];          
-            for(let i = 0;i < jobs.length;i++){
-               orgNode.jobMap.push(jobs[i].jobName);
-               var job = jobs[i].jobName;
-               jobMap.set(job, orgNode.name);
-               this.http.post(url_dashboard, {"query": {  "bool":{"filter":[ {"term" : {"name.keyword": job }}]}},  "sort": [{"tmst": {"order": "desc"}}],"size":300}).subscribe( jobes=> { 
-                 this.originalData = jobes;
-                 if(this.originalData.hits){
-                    this.metricData = this.originalData.hits.hits;
-                    if(this.metricData[0]._source.value.miss != undefined){
-                      metricNode.details = this.metricData;                                
-                      metricNode.name = this.metricData[0]._source.name;
-                      metricNode.timestamp = this.metricData[0]._source.tmst;
-                      metricNode.dq = this.metricData[0]._source.value.matched/this.metricData[0]._source.value.total*100;
-                      this.pushToNode(jobMap, metricNode);
-                  }
-                 }
-               },
-               err => {
-                 // console.log(err);
-               console.log('Error occurs when connect to elasticsearh!');
-               });            
-            }                          
-        } 
-        this.finalData.push(node); 
-        this.orgs.push(orgNode);                 
+        node.metrics = [];
+        var metricData = this.mesWithJob[mesName][0];
+        if(metricData.metricValues[0] != undefined && metricData.metricValues[0].value.matched != undefined){
+          metricNode.details = JSON.parse(JSON.stringify(metricData.metricValues));
+          metricNode.name = metricData.name;
+          metricNode.timestamp = metricData.metricValues[0].value.tmst;
+          metricNode.dq = metricData.metricValues[0].value.matched/metricData.metricValues[0].value.total*100;
+          node.metrics.push(metricNode);
+        }
+        this.finalData.push(node);                 
       }
-      this.oData = this.finalData.slice(0);
       var self = this;
       setTimeout(function function_name(argument) {
-         self.renderTreeMap(self.oData);
-      },1000) 
+        self.renderTreeMap(self.finalData);
+      },1000)
     });
   };
 
-  pushToNode(jobMap, metricNode){
-    var jobName = metricNode.name;
-    var orgName = jobMap.get(jobName);
-    var org = null;
-    for(var i = 0; i < this.finalData.length; i ++){
-      org = this.finalData[i];
-      if(orgName == org.name){
-        org.metrics.push(Object.assign({}, metricNode));
-      }
-    }
-  }
-
   ngOnInit() {
     var self = this;
     this.renderData();

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/f581db30/ui/angular/src/app/job/create-job/create-job.component.css
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/job/create-job/create-job.component.css b/ui/angular/src/app/job/create-job/create-job.component.css
index bc9b681..4f382c9 100644
--- a/ui/angular/src/app/job/create-job/create-job.component.css
+++ b/ui/angular/src/app/job/create-job/create-job.component.css
@@ -71,4 +71,20 @@ fieldset {
 
 #md-datepicker-0{
 	height:250px;
+}
+
+.center{
+    margin-left: 5%;
+}
+
+.range{
+    display:block;
+    width: 20%;
+    height: 10%;
+    margin-bottom: 5px;
+}
+.setborder{
+    border:2px solid;
+    border-radius: 5px;
+    width: 8%;
 }
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/f581db30/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 a71f622..6e64f53 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
@@ -24,7 +24,7 @@ under the License.
   <!--//row-->
   <div class="row">
     <!-- <form name="Form" id="form" novalidate> -->
-    <form name="Form" id="form" (ngSubmit)="submit(jobForm)" #jobForm="ngForm" novalidate>
+    <form name="jobForm" id="form" (ngSubmit)="submit(jobForm)" #jobForm="ngForm" novalidate>
       <div class="formStep">
         <label class="stepDesc info">Please setup the job required information</label>
         <div class="container-fluid">
@@ -38,33 +38,23 @@ under the License.
                 <div class="col-md-12 col-lg-12 col-sm-12">
                   <div class="form-group" [ngClass]="{'has-error':jobName.dirty&&jobName.invalid, 'has-success':jobName.valid}">
                     <label class="col-md-2 col-lg-2 col-sm-2 control-label">
-                      Source Pattern<span class="symbol required"></span>:
+                      Job Name<span class="symbol required"></span>:
                     </label>
                     <div class="col-md-10 col-lg-10 col-sm-10 ">
-                      <input type="text" class="form-control" [(ngModel)]="sourcePat" #jobName="ngModel" name="jobName" placeholder="Please input the source partition, such as 'YYYYMMdd-HH'." required pattern="YYYYMMdd-HH" maxlength='11'>
-                      <!-- /i<span class="error text-small block " *ngIf="jobName.dirty && jobName.errors.Pattern">Please input partition like 'YYYYMMdd-HH'</span> jobName.dirty && jobName.errors.pattern-->
-                      <span class="error text-small block " *ngIf="jobName.dirty&&jobName.invalid">Please input partition like 'YYYYMMdd-HH'</span>
-                    </div>
-                  </div>
-                </div>
-                <div class="col-md-12 col-lg-12 col-sm-12">
-                  <div class="form-group" [ngClass]="{'has-error':targetName.dirty&&targetName.invalid, 'has-success':targetName.valid}">
-                    <label class="col-md-2 col-lg-2 col-sm-2 control-label">
-                      Target Pattern<span class="symbol required"></span>:
-                    </label>
-                    <div class="col-md-10 col-lg-10 col-sm-10 ">
-                      <input type="text" class="form-control" [(ngModel)]="targetPat" placeholder="Please input target partition of your job, such as 'YYYYMMdd-HH'." required pattern="YYYYMMdd-HH" maxlength='11' name="targetName" #targetName="ngModel">
-                      <span class="error text-small block " *ngIf="targetName.dirty&&targetName.invalid">Please input partition like 'YYYYMMdd-HH'</span>
+                      <input type="text" class="form-control" [(ngModel)]="jobname" name="jobName" #jobName="ngModel" placeholder="Please input the job name" required pattern="^[a-zA-Z0-9_-]*$" id="jobName">
+                      <span class="error text-small block " *ngIf="jobName.dirty && (jobName.errors?.required)">
+                        Job Name is required</span>
+                      <span class="error text-small block " *ngIf="jobName.dirty && (jobName.errors?.pattern)">Only letter, number, "-" and "_" are allowed</span>
                     </div>
                   </div>
                 </div>
                 <div class="col-md-12 col-lg-12 col-sm-12">
                   <div class="form-group">
                     <label for="measureSelector" class="col-md-2 col-lg-2 col-sm-2 control-label">
-                      Measure Name:
+                      Measure Name<span class="symbol required"></span>:
                     </label>
                     <div class="col-md-10 col-lg-10 col-sm-10 ">
-                      <select id="measureSelector" class="form-control" ngControl="name" required name="measure.name" [(ngModel)]="measure">
+                      <select id="measureSelector" class="form-control" ngControl="name" required name="measure.name" [(ngModel)]="measure" (ngModelChange)="onChange($event)">
                         <option *ngFor="let row of Measures" value="{{row.name}}">{{row.name}}</option>
                       </select>
                     </div>
@@ -72,64 +62,52 @@ under the License.
                 </div>
                 <div class="col-md-12 col-lg-12 col-sm-12">
                   <div class="form-group">
-                    <label class="col-md-2 col-lg-2 col-sm-2 control-label">
-                      Start At:
+                    <label for="measureSelector" class="col-md-2 col-lg-2 col-sm-2 control-label">
+                      Cron Expression<span class="symbol required"></span>:
                     </label>
-                    <!-- <div class="col-md-5 col-lg-5 col-sm-5 ">
-                        <input type="text" id="datepicker" class="form-control" name="jobStartTime" [(ngModel)]="jobStartTime" >
-                    </div> -->
-                    <div class="col-md-5 col-lg-5 col-sm-5 ">
-                      <!-- <md-form-field> -->
-                      <input matInput [matDatepicker]="picker" placeholder="Choose a date" style="color:black;" [(ngModel)]="jobStartTime" name="jobStartTime">
-                      <mat-datepicker-toggle mdSuffix [for]="picker" (click)="setHeight()"></mat-datepicker-toggle>
-                      <mat-datepicker #picker></mat-datepicker>
-                      <!-- </md-form-field> -->
-                    </div>
-                    <div class="col-md-5 col-lg-5 col-sm-5" [ngClass]="{'has-error':timeDetail.invalid, 'has-success':timeDetail.valid}">
-                      <input type="text" class="form-control" id="timeDetail" (click)="showTime()" value="{{hourDetail}}:{{minuteDetail}}:{{secondDetail}} " [(ngModel)]="timeDetail" name="time">
-                      <div id="timePopup" class="col-md-11 col-lg-11 col-sm-11 setgrey" *ngIf="isOpen">
-                        <div id="hourSelector">
-                          <p (click)="changeTime(0,23,true,hourDetail,1)"><i class="fa fa-caret-up" aria-hidden="true"></i></p>
-                          <p>{{hourDetail}}</p>
-                          <p (click)="changeTime(0,23,false,hourDetail,1)"><i class="fa fa-caret-down" aria-hidden="true"></i></p>
-                        </div>
-                        <div class="division">
-                          <p>:</p>
-                        </div>
-                        <div id="minuteSelector">
-                          <p (click)="changeTime(0,59,true,minuteDetail,2)"><i class="fa fa-caret-up" aria-hidden="true"></i></p>
-                          <p>{{minuteDetail}}</p>
-                          <p (click)="changeTime(0,59,false,minuteDetail,2)"><i class="fa fa-caret-down" aria-hidden="true"></i></p>
-                        </div>
-                        <div class="division">
-                          <p>:</p>
-                        </div>
-                        <div id="secondSelector">
-                          <p (click)="changeTime(0,59,true,secondDetail,3)"><i class="fa fa-caret-up" aria-hidden="true"></i></p>
-                          <p>{{secondDetail}}</p>
-                          <p (click)="changeTime(0,59,false,secondDetail,3)"><i class="fa fa-caret-down" aria-hidden="true"></i></p>
-                        </div>
-                      </div>
+                    <div class="col-md-10 col-lg-10 col-sm-10 ">
+                      <input class="form-control" ngControl="name" required [(ngModel)]="cronExp" name="cronExp">
                     </div>
                   </div>
                 </div>
-                <div class="col-md-12 col-lg-12 col-sm-12">
+                <!-- <div class="col-md-12 col-lg-12 col-sm-12">
                   <div class="form-group">
-                    <label for="systemSelector" class="col-md-2 col-lg-2 col-sm-2 control-label">
-                      Interval:
+                    <label class="col-md-2 col-lg-2 col-sm-2 control-label">
+                      Time Baseline:
                     </label>
-                    <div class="col-md-5 col-lg-5 col-sm-5 ">
-                      <input type="text" id="systemSelector" class="form-control" [(ngModel)]="periodTime" required placeholder="How often it works" name="periodTime" onblur="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}">
-                    </div>
-                    <div class="col-md-5 col-lg-5 col-sm-5 ">
-                      <select id="timeSelector" class="form-control" [(ngModel)]="timeType" name="timeSelector" required>
-                        <!--<option  value="hours" >hours</option>-->
-                        <!--<option  value="minutes" >minutes</option>-->
-                        <!--<option  value="seconds" >seconds</option>-->
-                        <option *ngFor="let time of Times">{{time}}</option>
+                    <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>
+                  </div>
+                  <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>
               </div>
               <div class="setcolor">
@@ -170,7 +148,7 @@ under the License.
                 <div class="row">
                   <div class="col-lg-12 col-md-12 col-sm-12">
                     <div id="viewrule-definition" class="viewrule-content">
-                      <div class="row">
+                      <!-- <div class="row">
                         <label class="col-md-4 col-lg-4 col-sm-4">
                           Source Pattern:
                         </label>
@@ -185,7 +163,7 @@ under the License.
                         <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
                           {{targetPat}}
                         </div>
-                      </div>
+                      </div> -->
                       <div class="row">
                         <label class="col-md-4 col-lg-4 col-sm-4">
                           Measure Name:
@@ -196,6 +174,37 @@ under the License.
                         </div>
                       </div>
                       <div class="row">
+                        <label class="col-md-4 col-lg-4 col-sm-4">
+                          Cron Expression:
+                        </label>
+                        <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
+                          {{cronExp}}
+                        </div>
+                      </div>
+                      <div *ngFor="let connector of this.dropdownList; let i=index">
+                        <div class="row">
+                          <label class="col-md-12 col-lg-12 col-sm-12">
+                            {{connector.name}}:
+                          </label>
+                        </div>
+                        <div class="row">
+                          <label class="col-md-4 col-lg-4 col-sm-4">
+                            Begin:
+                          </label>
+                          <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
+                            {{originBegin[i]}}
+                          </div>
+                        </div>
+                        <div class="row">
+                          <label class="col-md-4 col-lg-4 col-sm-4">
+                            Length:
+                          </label>
+                          <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
+                            {{originLength[i]}}
+                          </div>
+                        </div>
+                      </div>
+                      <!-- <div class="row">
                         <label for="systemSelector" class="col-md-4 col-lg-4 col-sm-4">
                           Start at:
                         </label>
@@ -209,7 +218,7 @@ under the License.
                         </label>
                         <div class="col-md-8 col-lg-8 col-sm-8" style="color: #fff">{{periodTime}}&nbsp;{{timeType}}
                         </div>
-                      </div>
+                      </div> -->
                     </div>
                   </div>
                 </div>

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/f581db30/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 79f61cb..990a805 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
@@ -16,22 +16,22 @@ KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License.
 */
-import { Component, OnInit, AfterViewChecked } from '@angular/core';
+import { Component, OnInit, AfterViewChecked, ViewChildren } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { MaxLengthValidator } from '@angular/forms';
-import { NgControlStatus ,Validators} from '@angular/forms';
+import { NgControlStatus ,Validators } from '@angular/forms';
 import { PatternValidator } from '@angular/forms';
 // import {MdDatepickerModule} from '@angular/material';
-import {MatDatepickerModule} from '@angular/material';
-import {ServiceService} from '../../service/service.service';
-
-
-import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {ToasterModule, ToasterService, ToasterConfig} from 'angular2-toaster';
+import { MatDatepickerModule } from '@angular/material';
+import { ServiceService } from '../../service/service.service';
+import { AngularMultiSelectModule } from 'angular2-multiselect-dropdown/angular2-multiselect-dropdown';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ToasterModule, ToasterService, ToasterConfig } from 'angular2-toaster';
 import * as $ from 'jquery';
-import  {HttpClient,HttpParams} from '@angular/common/http';
-import  {Router} from "@angular/router";
+import  { HttpClient,HttpParams } from '@angular/common/http';
+import  { Router } from "@angular/router";
+import { NouisliderModule } from 'ng2-nouislider';
 
 @Component({
   selector: 'app-create-job',
@@ -44,36 +44,75 @@ 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;
+  baseline :string;
+  cronExp :string;
+  dropdownList = [];
   currentStep = 1;
   Times = ['seconds','minutes','hours'];
-  timeType = 'seconds';
-  isOpen = false;
   maskOpen = false;
-
-  hourDetail = '00';
-  minuteDetail = '00';
-  secondDetail = '00';
-  timeDetail = '00:00:00';
+  
+  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={
-        "sourcePattern":'',
-        "targetPattern":'',
-        "jobStartTime":0,
-        "interval":'',
-        "groupName":'',
-      }
+    "cron.expression": "",
+    "measure.id":"",
+    "job.name": "",
+    "cron.time.zone": "",
+    // "cron.time.zone": "GMT+8:00",
+    // "predicate.config": {
+    //   "interval": "1m",
+    //   "repeat": 2
+    // },
+    "data.segments": [
+      // {
+      //   "data.connector.index": "source[0]",
+      //   "segment.range": {
+      //     "begin": "",
+      //     "length": ""
+      //   }
+      // },
+      // {
+      //   "data.connector.index": "target[0]",
+      //   "segment.range": {
+      //     "begin": "",
+      //     "length": ""
+      //   }
+      // }
+    ]
+  }
+
+  beginTime = [];
+  timeLength = [];
+  originBegin = [];
+  originLength = [];
 
   private toasterService: ToasterService;
 
@@ -91,37 +130,16 @@ export class CreateJobComponent implements OnInit, AfterViewChecked {
       this.hide();
     }
   }
-
-  changeTime(min,max,increase,time,type){
-  	time = parseInt(time);
-  	if(increase){
-          if(time==max)
-              time = min;
-          else time = time + 1;
-      }
-      else{
-          if(time==min)
-              time = max;
-          else time = time - 1;
-      }
-      if(time < 10)
-          time = '0' + time;
-      if(type==1)
-          this.hourDetail = time;
-      else if(type==2)
-          this.minuteDetail = time;
-      else
-          this.secondDetail = time;
-      this.timeDetail = this.hourDetail+':'+this.minuteDetail+':'+this.secondDetail;
+  
+  showTime(evt){
+    evt.target.nextElementSibling.style.display='';
   }
 
-  showTime(){
-  	this.isOpen = !this.isOpen;
-    this.maskOpen = !this.maskOpen;
+  OnMouseleave(evt){
+    evt.target.style.display = 'none';
   }
 
   close(){
-  	this.isOpen = false;
     this.maskOpen = false;
   }
 
@@ -129,65 +147,144 @@ 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;
-      }
+  // 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;
-      }
+  //     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);
+  //     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!');
+      return false;
+    }
+    this.measureid = this.getMeasureId();
+    let time = new Date().getTimezoneOffset() / 60;
+    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", 
+      // "predicate.config": {
+      // "interval": "1m",
+      // "repeat": 2
+      // },
+      "data.segments": [
+      // {
+      //   "data.connector.index": "source[0]",
+      //   "segment.range": {
+      //   "begin": "",
+      //   "length": ""
+      //   }
+      // },
+      // {
+      //   "data.connector.index": "target[0]",
+      //   "segment.range": {
+      //   "begin": "",
+      //   "length": ""
+      //   }
+      // }
+      ]
+    }
+    for(let i = 0;i < this.dropdownList.length;i++){
+      var length = this.someKeyboard[i][1]-this.someKeyboard[i][0];
+      this.newJob['data.segments'].push({
+        "data.connector.name": this.dropdownList[i].connectorname,
+        "as.baseline":true,
+        "segment.range": {
+          "begin": this.someKeyboard[i][0],
+          "length": length
+        }
+      });
+      this.originBegin.push(this.someKeyboard[i][0]);
+      this.originLength.push(length);
+    };
+    if(this.dropdownList.length == 2){
+      delete this.newJob['data.segments'][1]['as.baseline'];
+    }
+    this.visible = true;
+    setTimeout(() => this.visibleAnimate = true, 100);
   }
+
   save() {
-  	var date = new Date();
-  	var datastr = date.toString();
-    var month = date.getMonth()+1;
+    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 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)
+    .post(addJobs,this.newJob)
     .subscribe(data => {
-      this.createResult = data['results'];
-      this.hide();
-      this.router.navigate(['/jobs']);
+      console.log(data['code']);
+      if(data['code'] != 205){
+        this.toasterService.pop('error','Error!','Error when creating job');
+        return false;
+      }else{
+        this.createResult = data['results'];
+        this.hide();
+        this.router.navigate(['/jobs']);
+      }
     },
     err => {
       console.log('Error when creating job');
     });
   }
 
-
   onResize(event){
    this.resizeWindow();
   }
@@ -195,15 +292,15 @@ export class CreateJobComponent implements OnInit, AfterViewChecked {
   resizeWindow(){
     var stepSelection = '.formStep';
     $(stepSelection).css({
-        height: window.innerHeight - $(stepSelection).offset().top - $('#footerwrap').outerHeight()
+      height: window.innerHeight - $(stepSelection).offset().top - $('#footerwrap').outerHeight()
     });
     $('fieldset').height($(stepSelection).height() - $(stepSelection + '>.stepDesc').height() - $('.btn-container').height() - 200);
     $('.y-scrollable').css({
-        'max-height': $('fieldset').height()- $('.add-dataset').outerHeight()
+      'height': $('fieldset').height()
     });
     $('#data-asset-pie').css({
-        height: $('#data-asset-pie').parent().width(),
-        width: $('#data-asset-pie').parent().width()
+      height: $('#data-asset-pie').parent().width(),
+      width: $('#data-asset-pie').parent().width()
     });
   }
 
@@ -218,18 +315,197 @@ export class CreateJobComponent implements OnInit, AfterViewChecked {
       }     
     }
   }
+  
+  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++){
+            console.log(details[j]['data.unit']);
+            if(details[j]['data.unit']!=undefined){
+              var table = details[j].config.database+'.'+details[j].config['table.name'];
+              var size = details[j]['data.unit'];
+              var connectorname = details[j]['name'];
+              var detail = {"id":i+1,"name":table,"size":size,"connectorname":connectorname};
+              this.dropdownList.push(detail);
+            }
+          }
+        }
+      }     
+    }
+    for(let i = 0;i < this.dropdownList.length;i++){
+      this.someKeyboard[i] = [-1,0];
+      this.someKeyboardConfig[i] = JSON.parse(JSON.stringify(this.config));
+      if(this.sliderRefs._results[i]){
+        this.sliderRefs._results[i].slider.updateOptions({
+          range: {
+            'min': -10,
+            'max': 0
+          }
+        });
+      }   
+    }       
+  }
+  
+
+  changeRange(index,value,i){
+    let newRange = [];
+    newRange[i] = [this.someKeyboard[i][0], this.someKeyboard[i][1]];
+    newRange[i][index] = value;
+    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){
+      this.sliderRefs._results[i].slider.updateOptions({
+        range: {
+          'min': oldmin-10,
+          'max': 0
+        }
+      }); 
+    }
+    if((evt[0] - oldmin)>=13){
+      this.sliderRefs._results[i].slider.updateOptions({
+        range: {
+          'min': oldmin+10,
+          'max': 0
+        }
+      }); 
+    }
+    this.someKeyboard[i] = evt; 
+  }
+
+  updateSliderRange(value,i){
+    // 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);
+    if((value - oldmin)<=3){
+      this.sliderRefs._results[i].slider.updateOptions({
+        range: {
+          'min': newmin*10,
+          'max': 0
+        }
+      });
+    }
+    // }, 100)
+  }
+
+  blinkKeyupLabel() {
+    this.keyupLabelOn = true;
+    setTimeout(() => {
+      this.keyupLabelOn = false;
+    }, 450);
+  }
+
+  blinkKeydownLabel() {
+    this.keydownLabelOn = true;
+    setTimeout(() => {
+      this.keydownLabelOn = false;
+    }, 450);
+  }
+
   ngOnInit() {
     var allModels = this.serviceService.config.uri.allModels;
     this.http.get(allModels).subscribe(data =>{
       this.Measures = data;
-      // for(let index in data){
-      // this.measure = data[index].name;
-      // this.measureid = data[index].id;
-      // }
     });
+//     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,
+      start: [-10, 0],
+      keyboard: true,  // same as [keyboard]="true"
+      step: 1,
+      pageSteps: 0,  // number of page steps, defaults to 10
+      range: {
+        min: -10,
+        max: 0
+      },
+      pips:{
+        mode: 'steps',
+        density: 10,
+        // values: 1,
+        stepped: true
+      }
+    }
   }
+
+  
   ngAfterViewChecked(){
     this.resizeWindow();
   }
-
 }

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/f581db30/ui/angular/src/app/job/job.component.html
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/job/job.component.html b/ui/angular/src/app/job/job.component.html
index 077934f..d352054 100644
--- a/ui/angular/src/app/job/job.component.html
+++ b/ui/angular/src/app/job/job.component.html
@@ -26,12 +26,10 @@ under the License.
       <thead>
         <tr style="background-color:#7D95CC">
           <th st-ratio="15">Job Name</th>
-          <th st-ratio="15">Source Pattern</th>
-          <th st-ratio="15">Target Pattern</th>
           <th st-ratio="15">Previous Fire Time</th>
           <th st-ratio="20">Next Fire Time</th>
           <th st-ratio="15">Trigger State</th>
-          <th st-ratio="5">Interval</th>
+          <th st-ratio="5">Cron Expression</th>
           <th st-ratio="5">Action</th>
         </tr>
       </thead>
@@ -52,8 +50,6 @@ under the License.
             <i *ngIf="row.showDetail" class="fa fa-chevron-circle-down blue"></i> {{row.jobName}}
             <!-- -{{(row.createTime | date: 'yyyy/MM/dd HH:mm:ss') || 'N/A' }} -->
           </td>
-          <td>{{row.sourcePattern}}</td>
-          <td>{{row.targetPattern}}</td>
           <td [hidden]="row.previousFireTime!=-1">--/--/-- &nbsp;&nbsp;--:--</td>
           <td [hidden]="row.previousFireTime==-1">{{(row.previousFireTime | date: 'yyyy/MM/dd HH:mm:ss') || 'N/A' }}</td>
           <td>{{(row.nextFireTime | date: 'yyyy/MM/dd HH:mm:ss') || 'N/A' }}</td>
@@ -62,7 +58,7 @@ under the License.
                     </span>
             <span *ngIf='row.triggerState != "NORMAL"' class='unnormal'>{{row.triggerState}}</span>
           </td>
-          <td>{{row.interval}}</td>
+          <td>{{row.cronExpression}}</td>
           <td>
             &nbsp;
             <a (click)="remove(row)" title="delete" style="text-decoration:none">

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/f581db30/ui/angular/src/app/job/job.component.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/job/job.component.ts b/ui/angular/src/app/job/job.component.ts
index 4f6a4bd..3ab852a 100644
--- a/ui/angular/src/app/job/job.component.ts
+++ b/ui/angular/src/app/job/job.component.ts
@@ -18,7 +18,6 @@ under the License.
 */
 import { Component, OnInit } from '@angular/core';
 import { HttpClient} from '@angular/common/http';
-import { Ng2SmartTableModule ,LocalDataSource} from 'ng2-smart-table';
 import {DataTableModule} from "angular2-datatable";
 import {ServiceService} from '../service/service.service';
 
@@ -36,7 +35,6 @@ export class JobComponent implements OnInit {
   // results:object[];
   allInstances:any;
   results:any;
-  source:LocalDataSource;
   deletedBriefRow:object;
   jobName:string;
   public visible = false;
@@ -76,11 +74,14 @@ export class JobComponent implements OnInit {
     this.deletedBriefRow = row;
     this.deleteGroup = row.groupName;
     this.deleteJob = row.jobName;
+    this.deleteId = row.jobId;
+    console.log(this.deleteId);
   }
 
   confirmDelete(){
     let deleteJob = this.serviceService.config.uri.deleteJob;
-    let deleteUrl = deleteJob + '?group=' + this.deleteGroup + '&jobName=' + this.deleteJob;
+    // let deleteUrl = deleteJob + '/' + this.deleteGroup + '&jobName=' + this.deleteJob;
+    let deleteUrl = deleteJob + '/' + this.deleteId;
     this.http.delete(deleteUrl).subscribe(data => {
       let deleteResult:any = data;
       if(deleteResult.code==206){
@@ -106,7 +107,7 @@ export class JobComponent implements OnInit {
     if (this.oldindex!=undefined &&this.oldindex != index){
         this.results[this.oldindex].showDetail = false;}
     let getInstances = this.serviceService.config.uri.getInstances;
-    let getInstanceUrl = getInstances+ '?group=' + 'BA' + '&jobName=' + row.jobName +'&page='+'0'+'&size='+'200';
+    let getInstanceUrl = getInstances+ '?jobId=' + row.jobId +'&page='+'0'+'&size='+'200';
     this.http.get(getInstanceUrl).subscribe(data =>{      
         row.showDetail = !row.showDetail;     
         this.allInstances = data;   
@@ -121,41 +122,40 @@ export class JobComponent implements OnInit {
     this.oldindex = index;
   }
 
-  intervalFormat(second){
-     if(second<60)
-         return (second + 's');
-     else if(second<3600)
-     {
-         if(second%60==0)
-             return(second / 60 + 'min');
-         else 
-             return((second - second % 60) / 60 + 'min'+second % 60 + 's');
-     }
-     else 
-     {
-         if(second%3600==0)
-             return ( second / 3600 + 'h');
-         else
-         {
-             second = (second - second % 3600) / 3600 + 'h';
-             var s = second % 3600;
-             return ( second + (s-s%60)/60+'min'+s%60+'s');
-         }
-     }
-  }
+  // intervalFormat(second){
+  //    if(second<60)
+  //        return (second + 's');
+  //    else if(second<3600)
+  //    {
+  //        if(second%60==0)
+  //            return(second / 60 + 'min');
+  //        else 
+  //            return((second - second % 60) / 60 + 'min'+second % 60 + 's');
+  //    }
+  //    else 
+  //    {
+  //        if(second%3600==0)
+  //            return ( second / 3600 + 'h');
+  //        else
+  //        {
+  //            second = (second - second % 3600) / 3600 + 'h';
+  //            var s = second % 3600;
+  //            return ( second + (s-s%60)/60+'min'+s%60+'s');
+  //        }
+  //    }
+  // }
   
   
   ngOnInit():void {
-
     var self = this;
     let allJobs = this.serviceService.config.uri.allJobs;
   	this.http.get(allJobs).subscribe(data =>{       
         this.results = Object.keys(data).map(function(index){
           let job = data[index];
           job.showDetail = false;
-          job.interval = self.intervalFormat(job.interval);
+          // job.interval = self.intervalFormat(job.interval);
           return job;
-        });    
+        });
     });
    // this.results = this.resultData;
 

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/f581db30/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 a814358..fdb7031 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
@@ -53,6 +53,14 @@ under the License.
               <div class="stepNumber">
                 4
               </div>
+              <span class="stepDesc text-small"> Partition Configuration </span>
+            </a>
+          </li>
+          <li (click)="goTo(5)">
+            <a [ngClass]="{'selected' : currentStep >= 5, 'done' : currentStep > 5}">
+              <div class="stepNumber">
+                5
+              </div>
               <span class="stepDesc text-small"> Configuration </span>
             </a>
           </li>
@@ -247,6 +255,41 @@ under the License.
         </div>
       </div>
       <div id="step-4" *ngIf="currentStep == 4" class="formStep">
+        <label class="stepDesc">Please complete the partition configuration for {{currentTable}} and {{currentTableTarget}}</label>
+        <div class="container-fluid">
+          <div class="col-md-12 col-lg-12 col-sm-12">
+            <fieldset>
+              <legend>
+                Required Information
+              </legend>
+              <div class="y-scrollable">
+                <div class="col-md-6 col-lg-6 col-sm-6">
+                  <div class="form-group" style="text-align:center">
+                    {{currentDB}}.{{currentTable}}
+                  </div>
+                  <app-configuration [data]="srcconfig" [location]="src_location" (event)="getSrc($event)"></app-configuration>
+                </div>
+                <div class="col-md-6 col-lg-6 col-sm-6" id="target">
+                  <div class="form-group" style="text-align:center">
+                    {{currentDB}}.{{currentTableTarget}}
+                  </div>
+                  <app-configuration [data]="tgtconfig" [location]="tgt_location" (event)="getTgt($event)"></app-configuration>
+                </div>
+              </div>
+            </fieldset>
+          </div>
+          <div class="form-group btn-container">
+            <button class="btn btn-primary btn-o back-step btn-wide pull-left" (click)="prev(Form)">
+              <i class="fa fa-arrow-circle-left"></i> Back
+            </button>
+            <toaster-container></toaster-container>
+            <button class="btn btn-primary btn-o next-step btn-wide pull-right" (click)="next(Form)">
+              Next <i class="fa fa-arrow-circle-right"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+      <div id="step-5" *ngIf="currentStep == 5" class="formStep">
         <label class="stepDesc">Please setup the measure required information</label>
         <div class="container-fluid">
           <div class="col-md-12 col-lg-12 col-sm-12">
@@ -291,23 +334,33 @@ under the License.
                     </div>
                   </div>
                 </div>
-                <div class="col-md-12 col-lg-12 col-sm-12">
+                <!-- <div class="col-md-12 col-lg-12 col-sm-12">
                   <div class="form-group">
                     <label for="systemSelector" class="col-md-2 col-lg-2 col-sm-2 control-label">
-                      Organization<span class="symbol required"></span>:
+                      Group:<span class="symbol required"></span>:
                     </label>
                     <div class="col-md-10 col-lg-10 col-sm-10 ">
-                      <input type="text" id="systemSelector" class="form-control" [(ngModel)]="org" required ng-pattern="'([0-9a-zA-Z\\_\\-])+'" name="org">
+                      <tag-input class="form-control" style="height: 44px;padding: 0 6px;" id="systemSelector" required [(ngModel)]='grp' [editable]='true' name="grp"></tag-input>
+                    </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">
+                      Source:
+                    </label>
+                    <div class="col-md-10 col-lg-10 col-sm-10">
+                      <input type="text" class="form-control" name="DataAsset" value="{{currentTable}}" disabled>
                     </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">
-                      DataAsset:
+                      Target:
                     </label>
                     <div class="col-md-10 col-lg-10 col-sm-10">
-                      <input type="text" class="form-control" name="DataAsset" value="{{currentTable}},{{currentTableTarget}}" disabled>
+                      <input type="text" class="form-control" name="DataAsset" value="{{currentTableTarget}}" disabled>
                     </div>
                   </div>
                 </div>
@@ -344,7 +397,7 @@ under the License.
         <div class="modal-dialog modal-xg modal-lg">
           <div class="modal-content">
             <div class="modal-header">
-              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+              <button type="button" class="close" (click)="hide()">&times;</button>
               <h4 class="modal-title">Save the measure with the below information?</h4>
             </div>
             <div class="modal-body">
@@ -379,19 +432,28 @@ under the License.
                           {{type}}
                         </div>
                       </div>
-                      <div class="row">
+                      <!-- <div class="row">
                         <label for="systemSelector" class="col-md-4 col-lg-4 col-sm-4">
-                          Organization:
+                          Group:
                         </label>
                         <div class="col-md-8 col-lg-8 col-sm-8 ">
-                          {{org}}
+                          {{showgrp}}
+                        </div>
+                      </div> -->
+                      <div class="row">
+                        <label class="col-md-4 col-lg-4 col-sm-4">
+                          Source:
+                        </label>
+                        <div class="col-md-8 col-lg-8 col-sm-8">
+                          {{currentDB}}.{{currentTable}}
                         </div>
                       </div>
                       <div class="row">
                         <label class="col-md-4 col-lg-4 col-sm-4">
-                          DataAsset:
+                          Target:
                         </label>
-                        <div class="col-md-8 col-lg-8 col-sm-8">{{currentTable}},{{currentTableTarget}}
+                        <div class="col-md-8 col-lg-8 col-sm-8">
+                          {{currentDB}}.{{currentTableTarget}}
                         </div>
                       </div>
                       <div class="row">

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/f581db30/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 fb2d80c..d592059 100644
--- a/ui/angular/src/app/measure/create-measure/ac/ac.component.ts
+++ b/ui/angular/src/app/measure/create-measure/ac/ac.component.ts
@@ -16,7 +16,7 @@ KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License.
 */
-import { Component, OnInit, AfterViewChecked } from '@angular/core';
+import { Component, OnInit, AfterViewChecked, ViewChild } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { FormsModule, Validator} from '@angular/forms';
 import {ServiceService} from '../../../service/service.service';
@@ -29,6 +29,7 @@ import { ToasterModule, ToasterService} from 'angular2-toaster';
 import * as $ from 'jquery';
 import { HttpClient} from '@angular/common/http';
 import { Router} from "@angular/router";
+// import { TagInputModule } from 'ngx-chips';
 
 
 class node {
@@ -38,6 +39,7 @@ class node {
   isExpanded:boolean;
   cols:Col[];
   parent:string;
+  location:string;
 };
 class Col{
   name:string;
@@ -66,9 +68,12 @@ class Col{
 })
 
 export class AcComponent implements OnInit , AfterViewChecked {
-
+  
+  defaultValue:string;
   currentStep = 1;
-  org:string;
+  // grp = [];
+  // showgrp:string;
+  // finalgrp = [];
   desc:string;
   selection = [];
   selectedAll = false;
@@ -88,49 +93,110 @@ export class AcComponent implements OnInit , AfterViewChecked {
   matchFunctions = ['=', '!=', '>', '>=','<',"<="];
   data:any;
   currentDBTargetStr: string;
-  currentDBstr: string; 
+  currentDBstr: string;
+  srcconfig = {
+    "where":'',
+    "num":1,
+    "timetype":'day',
+    "needpath":false,
+    "path":''
+  };
+  tgtconfig = {
+    "where":'',
+    "num":1,
+    "timetype":'day',
+    "needpath":false,
+    "path":''
+  };
+  srcdata = {
+    "database":'',
+    "table":'',
+    "selection":[]
+  }
+  tgtdata = {
+    "database":'',
+    "table":'',
+    "selection":[]
+  }
+  src_where: string;
+  tgt_where: string;
+  src_size: string;
+  tgt_size: string;
+  src_path: string;
+  tgt_path: string;
+  src_name: string;
+  tgt_name: string;
+  src_location: string;
+  tgt_location: string;
 
   measureTypes = ['accuracy','validity','anomaly detection','publish metrics'];
   type = "accuracy";
   newMeasure = {
     "name":'',
+    "measure.type":"griffin",
+    "dq.type": "accuracy",
     "process.type": "batch",
     "owner":"",
     "description":"",
-    "organization":"",
+    // "group":[],
     "data.sources": [
     {
       "name": "source",
       "connectors": [
-        {
+        { 
+          "name":"",
           "type": "HIVE",
           "version": "1.2",
+          "data.unit":"",
           "config":{
             "database":'',
             "table.name":'',
-          }
+            "where":''
+          },
+          "predicates":[
+            {
+              "type":"file.exist",
+              "config":{
+                "root.path":"hdfs:///griffin/demo_src",
+                "path":""
+              }
+            }
+          ]
         }
       ]
     }, {
       "name": "target",
       "connectors": [
         {
+          "name":"",
           "type": "HIVE",
           "version": "1.2",
+          "data.unit":"",
           "config":{
             "database":'',
             "table.name":'',
-          }
+            "where":''
+          },
+          "predicates":[
+            {
+              "type":"file.exist",
+              "config":{
+                "root.path":"hdfs:///griffin/demo_src",
+                "path":""
+              }
+            }
+          ]
         }
       ]
     }
     ],
 
-    "evaluateRule":{
+    "evaluate.rule":{
         "rules": [
           {
             "dsl.type": "griffin-dsl",
             "dq.type": "accuracy",
+            "name": "accuracy",
             "rule": ""
             // "details": {
             //   "source": "source",
@@ -152,9 +218,9 @@ export class AcComponent implements OnInit , AfterViewChecked {
     }
   };
   name:'';
-  evaluateRule:any;
+  // evaluate.rule:any;
   // desc:'';
-  // org:'';
+  // grp:'';
   owner = 'test';
   createResult :any;
 
@@ -214,8 +280,11 @@ export class AcComponent implements OnInit , AfterViewChecked {
       this.selectedAllTarget = false;
     }
     let l = this.selectionTarget.length;
-    for(let i =0;i<l;i++)
+    for(let i =0;i<l;i++){
       this.matches[i] = "=";
+      // this.mappings[i] = this.currentDB + '.' + this.currentTable + '.' + row.name;
+    }
+      
   };
 
   toggleAll () {
@@ -263,6 +332,9 @@ export class AcComponent implements OnInit , AfterViewChecked {
         return this.selectionTarget && this.selectionTarget.length == this.mappings.length
           && this.mappings.indexOf('') == -1
     } else if (step == 4) {
+      return true;
+    } else if(step == 5){
+
     }
     return false;
   } 
@@ -273,53 +345,84 @@ export class AcComponent implements OnInit , AfterViewChecked {
   goTo (i) {
     this.currentStep = i;
   }
-  submit (form) {                
+  submit (form) {              
       // form.$setPristine();
+      // this.finalgrp = [];
       if (!form.valid) {
         this.toasterService.pop('error', 'Error!', 'please complete the form in this step before proceeding');
         return false;
       }
+      // for(let i=0;i<this.grp.length;i++){
+      //   this.finalgrp.push(this.grp[i].value);
+      // }
+      // this.showgrp = this.finalgrp.join(",");
       var rule = '';
       this.newMeasure = {
-         "name":this.name,
-         "process.type": "batch",
-         "owner":this.owner,
-         "description":this.desc,
-         "organization":this.org,
-         "data.sources": [
-         {
-           "name": "source",
-           "connectors": [
-             {
-               "type": "HIVE",
-               "version": "1.2",
-               "config":{
-                 "database":this.currentDB,
-                 "table.name":this.currentTable,
-               }
-             }
-           ]
-         }, {
-           "name": "target",
-           "connectors": [
-             {
-               "type": "HIVE",
-               "version": "1.2",
-               "config":{
-                 "database":this.currentDBTarget,
-                 "table.name":this.currentTableTarget,
-               }
-             }
-           ]
-         }
-         ],
-     
-         "evaluateRule":{
-             "rules": [
-               {
-                 "dsl.type": "griffin-dsl",
-                 "dq.type": "accuracy",
-                 "rule": ""
+        "name":this.name,
+        "measure.type":"griffin",
+        "dq.type": "accuracy",
+        "process.type": "batch",
+        "owner":this.owner,
+        "description":this.desc,
+        // "group":this.finalgrp,
+        "data.sources": [
+          {
+            "name": "source",
+            "connectors": [
+              {
+                "name":this.src_name,
+                "type": "HIVE",
+                "version": "1.2",
+                "data.unit":this.src_size,
+                "config":{
+                  "database":this.currentDB,
+                  "table.name":this.currentTable,
+                  "where":this.src_where
+                },
+                "predicates":[
+                  {
+                    "type":"file.exist",
+                    "config":{
+                      "root.path":"hdfs:///griffin/demo_src",
+                      "path":this.src_path
+                    }
+                  }
+                ]
+              }
+            ]
+          }, {
+            "name": "target",
+            "connectors": [
+              {
+                "name":this.tgt_name,
+                "type": "HIVE",
+                "version": "1.2",
+                "data.unit":this.tgt_size,
+                "config":{
+                  "database":this.currentDBTarget,
+                  "table.name":this.currentTableTarget,
+                  "where":this.tgt_where
+                },
+                "predicates":[
+                  {
+                    "type":"file.exist",
+                    "config":{
+                      "root.path":"hdfs:///griffin/demo_src",
+                      "path":this.tgt_path
+                    }
+                  }
+                ]
+              }
+            ]
+          }
+        ],     
+        "evaluate.rule":{
+          "rules": [
+            {
+              "dsl.type": "griffin-dsl",
+              "dq.type": "accuracy",
+              "name": "accuracy",
+              "rule": ""
                  // "details": {
                  //   "source": "source",
                  //   "target": "target",
@@ -335,22 +438,28 @@ export class AcComponent implements OnInit , AfterViewChecked {
                  //   "total": "total",
                  //   "matched": "matched"
                  // }
-               }
-             ]
-         }
+            }
+          ]
+        }
       };
+      if(this.src_size.indexOf('0')==0){
+        delete this.newMeasure['data.sources'][0]['connectors'][0]['data.unit'];
+      }
+      if(this.tgt_size.indexOf('0')==0){
+        delete this.newMeasure['data.sources'][1]['connectors'][0]['data.unit'];
+      }
       var mappingRule = function(src, tgt, matches) {
-          var rules;
-          rules = 'source.' + src  + matches + 'target.' + tgt
-          return rules;
+        var rules;
+        rules = 'source.' + src  + matches + 'target.' + tgt
+        return rules;
       }
       var self = this;
       var rules = this.mappings.map(function(item, i) {
-          return mappingRule(item,self.selectionTarget[i], self.matches[i]);
+        return mappingRule(item,self.selectionTarget[i], self.matches[i]);
       });
       rule = rules.join(" AND ");
       this.rules = rule;
-      this.newMeasure.evaluateRule.rules[0].rule = rule;
+      this.newMeasure['evaluate.rule'].rules[0].rule = rule;
       this.visible = true;
       setTimeout(() => this.visibleAnimate = true, 100);
   }
@@ -394,6 +503,8 @@ export class AcComponent implements OnInit , AfterViewChecked {
             this.currentTable = node.data.name;
             this.currentDB = node.data.parent;
             this.schemaCollection = node.data.cols;
+            this.src_location = node.data.location;
+            this.src_name = 'source' + new Date().getTime();
             this.selectedAll = false;
             this.selection = [];
             for(let row of this.schemaCollection){
@@ -429,6 +540,8 @@ export class AcComponent implements OnInit , AfterViewChecked {
             this.currentTableTarget = node.data.name;
             this.currentDBTarget = node.data.parent;
             this.schemaCollectionTarget = node.data.cols;
+            this.tgt_location = node.data.location;
+            this.tgt_name = 'target' + new Date().getTime();
             this.selectedAllTarget = false;
             this.selectionTarget = [];
             for(let row of this.schemaCollectionTarget){
@@ -452,6 +565,35 @@ export class AcComponent implements OnInit , AfterViewChecked {
   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;
+    this.currentTableTarget = evt.table;
+    this.selectionTarget = evt.selection;
+  }
+
+  getSrc(evt){
+    this.srcconfig = evt;
+    this.src_where = evt.where;
+    this.src_size = evt.num + evt.timetype;
+    this.src_path = evt.path;
+  }
+
+  getTgt(evt){
+    this.tgtconfig = evt;
+    this.tgt_where = evt.where;
+    this.tgt_size = evt.num + evt.timetype;
+    this.tgt_path = evt.path;
+  }
+  
 
   resizeWindow(){
     var stepSelection = '.formStep[id=step-' + this.currentStep + ']';
@@ -464,7 +606,7 @@ export class AcComponent implements OnInit , AfterViewChecked {
         'height': $('fieldset').height()
     });
   }
-
+    
   ngOnInit() {
     var allDataassets = this.serviceService.config.uri.dataassetlist;
     this.http.get(allDataassets).subscribe(data =>{
@@ -483,6 +625,7 @@ export class AcComponent implements OnInit , AfterViewChecked {
           new_child.name = this.data[db][i]['tableName'];
           new_node.children.push(new_child);
           new_child.isExpanded = false;
+          new_child.location = this.data[db][i]['sd']['location'];
           new_child.parent = db;
           new_child.cols = Array<Col>();
           for(let j = 0;j<this.data[db][i]['sd']['cols'].length;j++){
@@ -495,7 +638,9 @@ export class AcComponent implements OnInit , AfterViewChecked {
         this.nodeList.push(new_node);
     }
     this.nodeListTarget = JSON.parse(JSON.stringify(this.nodeList));
-    });   
+    });
+    this.src_size = '1day';
+    this.tgt_size = '1day';
   };
 
   ngAfterViewChecked(){

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/f581db30/ui/angular/src/app/measure/create-measure/configuration/configuration.component.css
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/measure/create-measure/configuration/configuration.component.css b/ui/angular/src/app/measure/create-measure/configuration/configuration.component.css
new file mode 100644
index 0000000..214f8c6
--- /dev/null
+++ b/ui/angular/src/app/measure/create-measure/configuration/configuration.component.css
@@ -0,0 +1,18 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/f581db30/ui/angular/src/app/measure/create-measure/configuration/configuration.component.html
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/measure/create-measure/configuration/configuration.component.html b/ui/angular/src/app/measure/create-measure/configuration/configuration.component.html
new file mode 100644
index 0000000..69578ee
--- /dev/null
+++ b/ui/angular/src/app/measure/create-measure/configuration/configuration.component.html
@@ -0,0 +1,61 @@
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+<div class="col-md-12 col-lg-12 col-sm-12" style="margin-top:20px;">
+  <div class="form-group">
+    <label class="col-md-2 col-lg-2 col-sm-2 control-label">
+      Where:
+    </label>
+    <div class="col-md-10 col-lg-10 col-sm-10 ">
+      <input type="text" class="form-control" id="where" name="where" placeholder=" dt=#YYYYMMdd# AND hour=#HH#" [(ngModel)]="where" (change)="upward()">
+    </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" title="Your minimum partition size">
+      Partition Size:
+    </label>
+    <div class="col-md-3 col-lg-3 col-sm-3" style="padding-right: 0px;">
+      <input type="number" min="0" class="form-control" [(ngModel)]="num" (change)="upward()">
+    </div>
+    <div class="col-md-3 col-lg-3 col-sm-3" style="padding-left: 0px;">
+      <select id="typeSelector" class="form-control" [(ngModel)]="timetype" required name="type" (change)="upward()">
+        <option *ngFor="let item of timetypes;let i = index" [value]="item">{{item}}</option>
+      </select>
+    </div>
+  </div>
+</div>
+<div class="col-md-12 col-lg-12 col-sm-12" style="height: 30px;">
+  <div class="form-group">
+    <input style="margin-left:15px" type="checkbox" [checked]="needpath" (change)="needpath=!needpath;upward()">
+    <label>
+      has Done file 
+    </label>
+  </div>
+</div>
+<div  class="form-group" *ngIf="needpath">
+  <div style="margin-left:45px;font-weight: bold;">
+    please write the Done file path relative to {{location}}
+  </div>
+  <div style="margin-left:45px">
+      <input type="text" class="form-control" id="path" [(ngModel)]="path" name="filepath" (change)="upward()" placeholder="/dt=#YYYYMMdd#/hour=#HH#/_DONE">
+    </div>
+</div>
+

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/f581db30/ui/angular/src/app/measure/create-measure/configuration/configuration.component.spec.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/measure/create-measure/configuration/configuration.component.spec.ts b/ui/angular/src/app/measure/create-measure/configuration/configuration.component.spec.ts
new file mode 100644
index 0000000..a16f934
--- /dev/null
+++ b/ui/angular/src/app/measure/create-measure/configuration/configuration.component.spec.ts
@@ -0,0 +1,44 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ConfigurationComponent } from './configuration.component';
+
+describe('ConfigurationComponent', () => {
+  let component: ConfigurationComponent;
+  let fixture: ComponentFixture<ConfigurationComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ConfigurationComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ConfigurationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/f581db30/ui/angular/src/app/measure/create-measure/configuration/configuration.component.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/measure/create-measure/configuration/configuration.component.ts b/ui/angular/src/app/measure/create-measure/configuration/configuration.component.ts
new file mode 100644
index 0000000..2a241d3
--- /dev/null
+++ b/ui/angular/src/app/measure/create-measure/configuration/configuration.component.ts
@@ -0,0 +1,73 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+
+import { Component, OnInit, EventEmitter, Input, Output  } from '@angular/core';
+
+@Component({
+  selector: 'app-configuration',
+  templateUrl: './configuration.component.html',
+  styleUrls: ['./configuration.component.css']
+})
+export class ConfigurationComponent implements OnInit {
+  @Output() event = new EventEmitter();
+  @Input() data = {
+    "where":'',
+    "num":1,
+    "timetype":'day',
+    "needpath":false,
+    "path":''
+  };
+  @Input() location:string;
+
+  constructor() { }
+  num:number;
+  path:string;
+  where:string;
+  needpath:boolean;
+  selectedType: string;
+  configuration = {
+  	"where":'',
+  	"num":1,
+    "timetype":'day',
+    "needpath":false,
+  	"path":''
+  }
+  timetypes = ["day","hour","minute"];
+  timetype :string;
+
+  upward(){
+    this.configuration = {
+      "where":this.where,
+      "num":this.num,
+      "timetype":this.timetype,
+      "needpath":this.needpath,
+      "path":this.path
+    }
+    this.event.emit(this.configuration);
+  }
+
+  ngOnInit() {
+    this.where = this.data.where;
+    this.num = this.data.num;
+    this.timetype = this.data.timetype;
+    this.needpath = this.data.needpath;
+    this.path = this.data.path;
+  }
+ 
+}

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/f581db30/ui/angular/src/app/measure/create-measure/create-measure.component.html
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/measure/create-measure/create-measure.component.html b/ui/angular/src/app/measure/create-measure/create-measure.component.html
index cb1bd57..ab9909b 100644
--- a/ui/angular/src/app/measure/create-measure/create-measure.component.html
+++ b/ui/angular/src/app/measure/create-measure/create-measure.component.html
@@ -61,6 +61,14 @@ under the License.
                 <div class="stepNumber">
                   4
                 </div>
+                <span class="stepDesc text-small"> Partition Configuration </span>
+              </a>
+            </li>
+            <li>
+              <a>
+                <div class="stepNumber">
+                  5
+                </div>
                 <span class="stepDesc text-small"> Configuration </span>
               </a>
             </li>
@@ -70,6 +78,7 @@ under the License.
               <li>Select the source dataset and fields which will be used for comparision</li>
               <li>Select the target dataset and fields which will be used for comparision</li>
               <li>Mapping the target fields with source</li>
+              <li>Set partition configuration for source dataset and target dataset</li>
               <li>Set basic configuration for your model (name, system, threshold, etc.)</li>
             </ol>
           </div>
@@ -113,6 +122,14 @@ under the License.
                 <div class="stepNumber">
                   3
                 </div>
+                <span class="stepDesc text-small"> Partition Configuration </span>
+              </a>
+            </li>
+            <li>
+              <a style="cursor:default">
+                <div class="stepNumber">
+                  4
+                </div>
                 <span class="stepDesc text-small"> Configuration </span>
               </a>
             </li>
@@ -121,6 +138,7 @@ under the License.
             <ol>
               <li>Select the target dataset and fields which want to be checked</li>
               <li>Define your syntax check logic which will be applied on the selected fields</li>
+              <li>Set partition configuration for target dataset</li>
               <li>Set basic configuration for your model(name, system, threshold, etc.)</li>
             </ol>
           </div>