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/31 08:32:05 UTC

[2/4] incubator-griffin git commit: Format code and add scroll bar in measuer view

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/e7034710/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 11413c9..1c6c927 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
@@ -16,64 +16,61 @@ KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License.
 */
-import { Component, OnInit } from '@angular/core';
-import { FormControl } from '@angular/forms';
-import { FormsModule } from '@angular/forms';
-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 { Router} from "@angular/router";
+import { Component, OnInit } from "@angular/core";
+import { FormControl } from "@angular/forms";
+import { FormsModule } from "@angular/forms";
+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 { Router } from "@angular/router";
 import { DataTableModule } from "angular2-datatable";
-import { AfterViewChecked, ElementRef } from '@angular/core';
-import { AngularMultiSelectModule } from 'angular2-multiselect-dropdown/angular2-multiselect-dropdown';
+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';
-
-
 
 class node {
   name: string;
   id: number;
-  children:object[];
-  isExpanded:boolean;
-  cols:Col[];
-  parent:string;
-  location:string;
-};
-
-class Rule{
-  type:string;
+  children: object[];
+  isExpanded: boolean;
+  cols: Col[];
+  parent: string;
+  location: string;
 }
 
-class Col{
-  name:string;
-  type:string;
-  comment:string;
-  selected :boolean;
-  isNum:boolean;
-  isExpanded:boolean;
+class Rule {
+  type: string;
+}
+
+class Col {
+  name: string;
+  type: string;
+  comment: string;
+  selected: boolean;
+  isNum: boolean;
+  isExpanded: boolean;
   // rules:string[];
-  groupby:string;
-  RE:string;
-  rules:any;
-  newRules:Rule[];
+  groupby: string;
+  RE: string;
+  rules: any;
+  newRules: Rule[];
   ruleLength = 0;
-  constructor(name:string,type:string,comment:string,selected:boolean){
+  constructor(name: string, type: string, comment: string, selected: boolean) {
     this.name = name;
     this.type = type;
     this.comment = comment;
     this.selected = false;
     this.isExpanded = false;
-    this.groupby = '';
+    this.groupby = "";
     this.rules = [];
-    this.RE = '';
+    this.RE = "";
     this.newRules = [];
 
-    var patt = new RegExp('int|double|float/i');
-    if(patt.test(this.type)){
+    var patt = new RegExp("int|double|float/i");
+    if (patt.test(this.type)) {
       this.isNum = true;
     }
     // this.rules = [];
@@ -81,17 +78,13 @@ class Col{
 }
 
 @Component({
-  selector: 'app-pr',
-  templateUrl: './pr.component.html',
-  providers:[ServiceService],
-  styleUrls: ['./pr.component.css']
+  selector: "app-pr",
+  templateUrl: "./pr.component.html",
+  providers: [ServiceService],
+  styleUrls: ["./pr.component.css"]
 })
-export class PrComponent implements  AfterViewChecked, OnInit{
-
+export class PrComponent implements AfterViewChecked, OnInit {
   noderule = [];
-  // grp = [];
-  // showgrp:string;
-  // finalgrp = [];
   transrule = [];
   transenumrule = [];
   transnullrule = [];
@@ -103,51 +96,51 @@ export class PrComponent implements  AfterViewChecked, OnInit{
   currentStep = 1;
   firstCond = false;
   mouseover = false;
-  selection : Col[];
+  selection: Col[];
   selectedAll = false;
-  currentDB = '';
-  currentTable = '';
-  schemaCollection:Col[];
+  currentDB = "";
+  currentTable = "";
+  schemaCollection: Col[];
   totallen = 0;
-  type = 'profiling';
-  data:any;
-  desc:string;
-  owner = 'test';
+  type = "profiling";
+  data: any;
+  desc: string;
+  owner = "test";
   currentDBstr: string;
   rulenode = {
-    "name": "",
-    "noderules": ""
+    name: "",
+    noderules: ""
   };
-  timezone = '';
+  timezone = "";
   newMeasure = {
-    "name": "",
-    "measure.type":"griffin",
+    name: "",
+    "measure.type": "griffin",
     "dq.type": "profiling",
     "process.type": "batch",
-    "owner":"",
-    "description":"",
+    owner: "",
+    description: "",
     // "group":[],
     "data.sources": [
       {
-        "name": "source",
-        "connectors": [
+        name: "source",
+        connectors: [
           {
-            "name":"",
-            "type": "hive",
-            "version": "1.2",
-            "data.unit":"",
-            "data.time.zone":"",
-            "config": {
-              "database": "",
-              "table.name":"",
-              "where":''
+            name: "",
+            type: "hive",
+            version: "1.2",
+            "data.unit": "",
+            "data.time.zone": "",
+            config: {
+              database: "",
+              "table.name": "",
+              where: ""
             },
-            "predicates":[
+            predicates: [
               {
-                "type":"file.exist",
-                "config":{
-                  "root.path":"hdfs:///griffin/demo_src",
-                  "path":""
+                type: "file.exist",
+                config: {
+                  "root.path": "hdfs:///griffin/demo_src",
+                  path: ""
                 }
               }
             ]
@@ -156,14 +149,14 @@ export class PrComponent implements  AfterViewChecked, OnInit{
       }
     ],
     "evaluate.rule": {
-      "rules": [
+      rules: [
         {
           "dsl.type": "griffin-dsl",
           "dq.type": "profiling",
-          "rule": "",
-          "description": "",
-          "name": "",
-          "details": {
+          rule: "",
+          description: "",
+          name: "",
+          details: {
             // "profiling": {
             // "name": ""
             // }
@@ -172,18 +165,18 @@ export class PrComponent implements  AfterViewChecked, OnInit{
       ]
     }
   };
-  name:'';
-  createResult :any;
-  newCond:any;
+  name: "";
+  createResult: any;
+  newCond: any;
   srclocation: string;
   srcname: string;
   config = {
-    "where":'',
-    "timezone":'',
-    "num":1,
-    "timetype":'day',
-    "needpath":false,
-    "path":''
+    where: "",
+    timezone: "",
+    num: 1,
+    timetype: "day",
+    needpath: false,
+    path: ""
   };
   where: string;
   size: string;
@@ -196,7 +189,7 @@ export class PrComponent implements  AfterViewChecked, OnInit{
 
   public hide(): void {
     this.visibleAnimate = false;
-    setTimeout(() => this.visible = false, 300);
+    setTimeout(() => (this.visible = false), 300);
     this.transrule = [];
     this.transenumrule = [];
     this.transnullrule = [];
@@ -204,50 +197,55 @@ export class PrComponent implements  AfterViewChecked, OnInit{
   }
 
   public onContainerClicked(event: MouseEvent): void {
-    if ((<HTMLElement>event.target).classList.contains('modal')) {
+    if ((<HTMLElement>event.target).classList.contains("modal")) {
       this.hide();
     }
   }
 
-  onResize(event){
+  onResize(event) {
     this.resizeWindow();
   }
 
-  resizeWindow(){
-    var stepSelection = '.formStep';
+  resizeWindow() {
+    var stepSelection = ".formStep";
     $(stepSelection).css({
       // height: window.innerHeight - $(stepSelection).offset().top - $('#footerwrap').outerHeight()
       height: window.innerHeight - $(stepSelection).offset().top
     });
-    $('fieldset').height($(stepSelection).height() - $(stepSelection + '>.stepDesc').height() - $('.btn-container').height() - 130);
-    $('.y-scrollable').css({
+    $("fieldset").height(
+      $(stepSelection).height() -
+        $(stepSelection + ">.stepDesc").height() -
+        $(".btn-container").height() -
+        130
+    );
+    $(".y-scrollable").css({
       // 'max-height': $('fieldset').height()- $('.add-dataset').outerHeight()
-      'height': $('fieldset').height()
+      height: $("fieldset").height()
     });
   }
 
-  setDropdownList(){
-    if(this.selection){
-      for(let item of this.selection){
-        if(item.isNum == true){
+  setDropdownList() {
+    if (this.selection) {
+      for (let item of this.selection) {
+        if (item.isNum == true) {
           this.dropdownList[item.name] = [
-            {"id":1,"itemName":"Null Count","category": "Simple Statistics"},
-            {"id":2,"itemName":"Distinct Count","category": "Simple Statistics"},
-            {"id":3,"itemName":"Total Count","category": "Summary Statistics"},
-            {"id":4,"itemName":"Maximum","category": "Summary Statistics"},
-            {"id":5,"itemName":"Minimum","category": "Summary Statistics"},
-            {"id":6,"itemName":"Average","category": "Summary Statistics"},
+            { id: 1, itemName: "Null Count", category: "Simple Statistics" },
+            { id: 2, itemName: "Distinct Count", category: "Simple Statistics" },
+            { id: 3, itemName: "Total Count", category: "Summary Statistics" },
+            { id: 4, itemName: "Maximum", category: "Summary Statistics" },
+            { id: 5, itemName: "Minimum", category: "Summary Statistics" },
+            { id: 6, itemName: "Average", category: "Summary Statistics" },
             // {"id":7,"itemName":"Median","category": "Summary Statistics"},
             // {"id":8,"itemName":"Rule Detection Count","category": "Advanced Statistics"},
-            {"id":9,"itemName":"Enum Detection Count","category": "Advanced Statistics"}
+            { id: 9, itemName: "Enum Detection Count", category: "Advanced Statistics" }
           ];
-        }else{
+        } else {
           this.dropdownList[item.name] = [
-            {"id":1,"itemName":"Null Count","category": "Simple Statistics"},
-            {"id":2,"itemName":"Distinct Count","category": "Simple Statistics"},
-            {"id":3,"itemName":"Total Count","category": "Summary Statistics"},
+            { id: 1, itemName: "Null Count", category: "Simple Statistics" },
+            { id: 2, itemName: "Distinct Count", category: "Simple Statistics" },
+            { id: 3, itemName: "Total Count", category: "Summary Statistics" },
             // {"id":8,"itemName":"Rule Detection Count","category": "Advanced Statistics"},
-            {"id":9,"itemName":"Enum Detection Count","category": "Advanced Statistics"},
+            { id: 9, itemName: "Enum Detection Count", category: "Advanced Statistics" }
             // {"id":10,"itemName":"Regular Expression Detection Count","category": "Advanced Statistics"}
           ];
         }
@@ -255,75 +253,100 @@ export class PrComponent implements  AfterViewChecked, OnInit{
     }
   }
 
-  toggleSelection (row) {
+  toggleSelection(row) {
     row.selected = !row.selected;
     var idx = this.selection.indexOf(row);
     // is currently selected
     if (idx > -1) {
-        this.selection.splice(idx, 1);
-        this.selectedAll = false;
-        for(let key in this.selectedItems){
-          if(key === row.name){
-            delete this.selectedItems[key];
-          }
+      this.selection.splice(idx, 1);
+      this.selectedAll = false;
+      for (let key in this.selectedItems) {
+        if (key === row.name) {
+          delete this.selectedItems[key];
         }
-        //this.selectedItems[row.name] = [];
-    }
-    // is newly selected
-    else {
+      }
+    } else {
+      // is newly selected
       this.selection.push(row);
     }
-    if(this.selection.length == 3){
+    if (this.selection.length == 3) {
       this.selectedAll = true;
-    }else{
+    } else {
       this.selectedAll = false;
     }
     this.setDropdownList();
-  };
+  }
 
-  toggleAll () {
+  toggleAll() {
     this.selectedAll = !this.selectedAll;
     this.selection = [];
-    for(var i =0; i < this.schemaCollection.length; i ++){
+    for (var i = 0; i < this.schemaCollection.length; i++) {
       this.schemaCollection[i].selected = this.selectedAll;
       if (this.selectedAll) {
         this.selection.push(this.schemaCollection[i]);
       }
     }
     this.setDropdownList();
-  };
+  }
 
-  transferRule(rule,col){
-    switch(rule){
-      case 'Total Count':
-        return 'count(source.`'+col.name+'`) AS `'+col.name+'-count`';
-      case 'Distinct Count':
-        return 'approx_count_distinct(source.`'+col.name+'`) AS `'+col.name+'-distcount`';
-      case 'Null Count':
-        return 'count(source.`'+col.name+'`) AS `'+col.name+'-nullcount'+'` WHERE source.`'+col.name+'` IS NULL';
+  transferRule(rule, col) {
+    switch (rule) {
+      case "Total Count":
+        return "count(source.`" + col.name + "`) AS `" + col.name + "-count`";
+      case "Distinct Count":
+        return (
+          "approx_count_distinct(source.`" +
+          col.name +
+          "`) AS `" +
+          col.name +
+          "-distcount`"
+        );
+      case "Null Count":
+        return (
+          "count(source.`" +
+          col.name +
+          "`) AS `" +
+          col.name +
+          "-nullcount" +
+          "` WHERE source.`" +
+          col.name +
+          "` IS NULL"
+        );
       // case 'Regular Expression Detection Count':
       //   return 'count(source.`'+col.name+'`) where source.`'+col.name+'` LIKE ';
       // case 'Rule Detection Count':
       //   return 'count(source.`'+col.name+'`) where source.`'+col.name+'` LIKE ';
-      case 'Maximum':
-        return 'max(source.`'+col.name+'`) AS `'+col.name+'-max`';
-      case 'Minimum':
-        return 'min(source.`'+col.name+'`) AS `'+col.name+'-min`';
+      case "Maximum":
+        return "max(source.`" + col.name + "`) AS `" + col.name + "-max`";
+      case "Minimum":
+        return "min(source.`" + col.name + "`) AS `" + col.name + "-min`";
       // case 'Median':
       //   return 'median(source.`'+col.name+'`) ';
-      case 'Average':
-        return 'avg(source.`'+col.name+'`) AS `'+col.name+'-average`';
-      case 'Enum Detection Count':
-        return 'source.`'+col.name+'`,count(*) AS `'+col.name+'-grp` GROUP BY source.`'+col.name+'`';
+      case "Average":
+        return "avg(source.`" + col.name + "`) AS `" + col.name + "-average`";
+      case "Enum Detection Count":
+        return (
+          "source.`" +
+          col.name +
+          "`,count(*) AS `" +
+          col.name +
+          "-grp` GROUP BY source.`" +
+          col.name +
+          "`"
+        );
     }
   }
 
-  next (form) {
-    if(this.formValidation(this.currentStep)){
+  next(form) {
+    if (this.formValidation(this.currentStep)) {
       this.currentStep++;
-    }else{
-      this.toasterService.pop('error','Error!','Please select at least one attribute!');
-        return false;
+    } else {
+      this.toasterService.pop(
+        "error",
+        "Error!",
+        "Please select at least one attribute!"
+      );
+      return false;
     }
   }
 
@@ -336,114 +359,112 @@ export class PrComponent implements  AfterViewChecked, OnInit{
     } else if (step == 2) {
       var len = 0;
       var selectedlen = 0;
-      for(let key in this.selectedItems){
-        selectedlen ++;
+      for (let key in this.selectedItems) {
+        selectedlen++;
         len = this.selectedItems[key].length;
-        if(len == 0){
+        if (len == 0) {
           return false;
         }
       }
-      return (this.selection.length == selectedlen) ? true :false;
+      return this.selection.length == selectedlen ? true : false;
     } else if (step == 3) {
       return true;
-    } else if(step == 4){
+    } else if (step == 4) {
     }
     return false;
-  }
+  };
 
-  prev (form) {
+  prev(form) {
     this.currentStep--;
   }
-  goTo (i) {
+  goTo(i) {
     this.currentStep = i;
   }
-  submit (form) {
-      // form.$setPristine();
-    // this.finalgrp = [];
+  submit(form) {
     if (!form.valid) {
-      this.toasterService.pop('error', 'Error!', 'please complete the form in this step before proceeding');
+      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,
-        // "group":this.finalgrp,
-        "data.sources": [
-          {
-            "name": "source",
-            "connectors": [
-              {
-                "name":this.srcname,
-                "type": "hive",
-                "version": "1.2",
-                "data.unit":this.size,
-                "data.time.zone":this.timezone,
-                "config": {
-                  "database": this.currentDB,
-                  "table.name":this.currentTable,
-                  "where":this.where
-                },
-                "predicates":[
-                  {
-                    "type":"file.exist",
-                    "config":{
-                      "root.path":"hdfs:///griffin/demo_src",
-                      "path":this.path
-                    }
+      name: this.name,
+      "measure.type": "griffin",
+      "dq.type": "profiling",
+      "process.type": "batch",
+      owner: this.owner,
+      description: this.desc,
+      // "group":this.finalgrp,
+      "data.sources": [
+        {
+          name: "source",
+          connectors: [
+            {
+              name: this.srcname,
+              type: "hive",
+              version: "1.2",
+              "data.unit": this.size,
+              "data.time.zone": this.timezone,
+              config: {
+                database: this.currentDB,
+                "table.name": this.currentTable,
+                where: this.where
+              },
+              predicates: [
+                {
+                  type: "file.exist",
+                  config: {
+                    "root.path": "hdfs:///griffin/demo_src",
+                    path: this.path
                   }
-                ]
-              }
-            ]
-          }
-        ],
-        "evaluate.rule": {
-          "rules": [
-            // {
-            //   "dsl.type": "griffin-dsl",
-            //   "dq.type": "profiling",
-            //   "rule": "",
-            //   "details": {}
-            // }
+                }
+              ]
+            }
           ]
         }
+      ],
+      "evaluate.rule": {
+        rules: [
+          // {
+          //   "dsl.type": "griffin-dsl",
+          //   "dq.type": "profiling",
+          //   "rule": "",
+          //   "details": {}
+          // }
+        ]
+      }
     };
     this.getGrouprule();
-    if(this.size.indexOf('0')==0){
-        delete this.newMeasure['data.sources'][0]['connectors'][0]['data.unit'];
+    if (this.size.indexOf("0") == 0) {
+      delete this.newMeasure["data.sources"][0]["connectors"][0]["data.unit"];
     }
-    if(this.path==''){
-        delete this.newMeasure['data.sources'][0]['connectors'][0]['predicates'];
+    if (this.path == "") {
+      delete this.newMeasure["data.sources"][0]["connectors"][0]["predicates"];
     }
     this.visible = true;
-    setTimeout(() => this.visibleAnimate = true, 100);
+    setTimeout(() => (this.visibleAnimate = true), 100);
   }
 
-  getRule(trans,otherinfo){
-    var rule = '';
-    for(let i of trans){
-       rule = rule + i + ',';
+  getRule(trans, otherinfo) {
+    var rule = "";
+    for (let i of trans) {
+      rule = rule + i + ",";
     }
-    rule = rule.substring(0,rule.lastIndexOf(','));
-    this.pushRule(rule,otherinfo);
+    rule = rule.substring(0, rule.lastIndexOf(","));
+    this.pushRule(rule, otherinfo);
   }
 
-  pushEnmRule(rule,grpname,originrule){
+  pushEnmRule(rule, grpname, originrule) {
     var self = this;
-    self.newMeasure['evaluate.rule'].rules.push({
+    self.newMeasure["evaluate.rule"].rules.push({
       "dsl.type": "griffin-dsl",
       "dq.type": "profiling",
-      "rule": rule,
-      "description": originrule,
-      "name": grpname,
-      "details": {
+      rule: rule,
+      description: originrule,
+      name: grpname,
+      details: {
         // "profiling": {
         //   "name": grpname,
         //   "persist.type": "metric"
@@ -452,15 +473,15 @@ export class PrComponent implements  AfterViewChecked, OnInit{
     });
   }
 
-  pushNullRule(rule,nullname,originrule){
+  pushNullRule(rule, nullname, originrule) {
     var self = this;
-    self.newMeasure['evaluate.rule'].rules.push({
+    self.newMeasure["evaluate.rule"].rules.push({
       "dsl.type": "griffin-dsl",
       "dq.type": "profiling",
-      "rule": rule,
-      "description": originrule,
-      "name": nullname,
-      "details": {
+      rule: rule,
+      description: originrule,
+      name: nullname,
+      details: {
         // "profiling": {
         //   "name": nullname,
         //   "persist.type": "metric"
@@ -469,57 +490,61 @@ export class PrComponent implements  AfterViewChecked, OnInit{
     });
   }
 
-  pushRule(rule,otherinfo){
+  pushRule(rule, otherinfo) {
     var self = this;
-    self.newMeasure['evaluate.rule'].rules.push({
+    self.newMeasure["evaluate.rule"].rules.push({
       "dsl.type": "griffin-dsl",
       "dq.type": "profiling",
-      "rule": rule,
-      "description": otherinfo,
-      "name": "profiling",
-      "details": {}
+      rule: rule,
+      description: otherinfo,
+      name: "profiling",
+      details: {}
     });
   }
 
   save() {
     var addModels = this.serviceService.config.uri.addModels;
-    this.http
-    .post(addModels, this.newMeasure)
-    .subscribe(data => {
+    this.http.post(addModels, this.newMeasure).subscribe(
+      data => {
         this.createResult = data;
         this.hide();
-        this.router.navigate(['/measures']);
-    },
-    err => {
-      console.log('Something went wrong!');
-    });
+        this.router.navigate(["/measures"]);
+      },
+      err => {
+        let response = JSON.parse(err.error);
+        if(response.code === '40901'){
+          this.toasterService.pop("error", "Error!", "Measure name already exists!");
+        } else {
+          this.toasterService.pop("error", "Error!", "Error when creating measure");
+        }
+        console.log("Error when creating measure");
+      }
+    );
   }
 
   options: ITreeOptions = {
-    displayField: 'name',
-    isExpandedField: 'expanded',
-    idField: 'id',
+    displayField: "name",
+    isExpandedField: "expanded",
+    idField: "id",
     actionMapping: {
       mouse: {
         click: (tree, node, $event) => {
           if (node.hasChildren) {
             this.currentDB = node.data.name;
-            this.currentDBstr = this.currentDB + '.';
-            this.currentTable = '';
+            this.currentDBstr = this.currentDB + ".";
+            this.currentTable = "";
             this.schemaCollection = [];
             this.selectedAll = false;
             TREE_ACTIONS.TOGGLE_EXPANDED(tree, node, $event);
-          }
-          else if(node.data.cols)
-          {
+          } else if (node.data.cols) {
             this.currentTable = node.data.name;
             this.currentDB = node.data.parent;
             this.schemaCollection = node.data.cols;
-            this.srcname = 'source' + new Date().getTime();
+            this.srcname = "source" + new Date().getTime();
             this.srclocation = node.data.location;
             this.selectedAll = false;
             this.selection = [];
-            for(let row of this.schemaCollection){
+            for (let row of this.schemaCollection) {
               row.selected = false;
             }
           }
@@ -531,79 +556,77 @@ export class PrComponent implements  AfterViewChecked, OnInit{
     animateAcceleration: 1.2
   };
 
-  nodeList:object[];
-  nodeListTarget:object[];
+  nodeList: object[];
+  nodeListTarget: object[];
 
-  constructor(private elementRef:ElementRef,toasterService: ToasterService,private http: HttpClient,private router:Router,public serviceService:ServiceService) {
+  constructor(
+    private elementRef: ElementRef,
+    toasterService: ToasterService,
+    private http: HttpClient,
+    private router: Router,
+    public serviceService: ServiceService
+  ) {
     this.toasterService = toasterService;
     this.selection = [];
-  };
+  }
 
-  // onItemSelect(item){
-  //   this.getRule();
-  // }
-
-  getGrouprule(){
-    var selected = {name: ''};
-    var value = '';
-    var nullvalue = '';
-    var nullname = '';
-    var enmvalue = '';
-    var grpname = '';
-    for(let key in this.selectedItems){
+  getGrouprule() {
+    var selected = { name: "" };
+    var value = "";
+    var nullvalue = "";
+    var nullname = "";
+    var enmvalue = "";
+    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 info = "";
+      var otherinfo = "";
+      for (let i = 0; i < this.selectedItems[key].length; i++) {
         var originrule = this.selectedItems[key][i].itemName;
-        info = info + originrule + ',';
-        if(originrule == 'Enum Detection Count'){
-          enmvalue = this.transferRule(originrule,selected);
-          grpname = selected.name + '-grp';
+        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,originrule);
-        }else if(originrule == 'Null Count'){
-          nullvalue = this.transferRule(originrule,selected);
-          nullname = selected.name + '-nullct';
+          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,originrule);
-        }else{
-          otherinfo = otherinfo + originrule + ',';
-          value = this.transferRule(originrule,selected);
+          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(','));
+      info = info.substring(0, info.lastIndexOf(","));
+      otherinfo = otherinfo.substring(0, otherinfo.lastIndexOf(","));
       this.noderule.push({
-        "name":key,
-        "infos":info
+        name: key,
+        infos: info
       });
     }
-    if(this.transrule.length != 0){
-      this.getRule(this.transrule,otherinfo);
+    if (this.transrule.length != 0) {
+      this.getRule(this.transrule, otherinfo);
     }
   }
 
-  // OnItemDeSelect(item){
-  //   this.getRule();
-  // }
-
-  confirmAdd(){
-    document.getElementById('rule').style.display = 'none';
+  confirmAdd() {
+    document.getElementById("rule").style.display = "none";
   }
 
-  showRule(){
-    document.getElementById('showrule').style.display = '';
-    document.getElementById('notshowrule').style.display = 'none';
+  showRule() {
+    document.getElementById("showrule").style.display = "";
+    document.getElementById("notshowrule").style.display = "none";
   }
 
-  back () {
-    document.getElementById('showrule').style.display = 'none';
-    document.getElementById('notshowrule').style.display = '';
+  back() {
+    document.getElementById("showrule").style.display = "none";
+    document.getElementById("notshowrule").style.display = "";
   }
 
-  getData(evt){
+  getData(evt) {
     this.config = evt;
     this.timezone = evt.timezone;
     this.where = evt.where;
@@ -613,51 +636,50 @@ export class PrComponent implements  AfterViewChecked, OnInit{
 
   ngOnInit() {
     var allDataassets = this.serviceService.config.uri.dataassetlist;
-    this.http.get(allDataassets).subscribe(data =>{
+    this.http.get(allDataassets).subscribe(data => {
       this.nodeList = new Array();
       let i = 1;
       this.data = data;
       for (let db in this.data) {
-          let new_node = new node();
-          new_node.name = db;
-          new_node.id = i;
-          new_node.isExpanded = true;
-          i++;
-          new_node.children = new Array();
-          for(let i = 0;i<this.data[db].length;i++){
-            let new_child = new node();
-            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++){
-                let new_col = new Col(this.data[db][i]['sd']['cols'][j].name,
-                this.data[db][i]['sd']['cols'][j].type,
-                this.data[db][i]['sd']['cols'][j].comment,false);
-                new_child.cols.push(new_col);
-            }
+        let new_node = new node();
+        new_node.name = db;
+        new_node.id = i;
+        new_node.isExpanded = true;
+        i++;
+        new_node.children = new Array();
+        for (let i = 0; i < this.data[db].length; i++) {
+          let new_child = new node();
+          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++) {
+            let new_col = new Col(
+              this.data[db][i]["sd"]["cols"][j].name,
+              this.data[db][i]["sd"]["cols"][j].type,
+              this.data[db][i]["sd"]["cols"][j].comment,
+              false
+            );
+            new_child.cols.push(new_col);
           }
-          this.nodeList.push(new_node);
+        }
+        this.nodeList.push(new_node);
       }
       this.nodeListTarget = JSON.parse(JSON.stringify(this.nodeList));
-
     });
     this.dropdownSettings = {
       singleSelection: false,
-      text:"Select Rule",
-      // selectAllText:'Select All',
-      // unSelectAllText:'UnSelect All',
-      // badgeShowLimit: 5,
+      text: "Select Rule",
       enableCheckAll: false,
       enableSearchFilter: true,
       classes: "myclass",
       groupBy: "category"
     };
-    this.size = '1day';
-  };
-  ngAfterViewChecked(){
+    this.size = "1day";
+  }
+  ngAfterViewChecked() {
     this.resizeWindow();
   }
-}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/e7034710/ui/angular/src/app/measure/create-measure/pr/rule/rule.component.css
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/measure/create-measure/pr/rule/rule.component.css b/ui/angular/src/app/measure/create-measure/pr/rule/rule.component.css
index 49fa7b4..1fe05fe 100644
--- a/ui/angular/src/app/measure/create-measure/pr/rule/rule.component.css
+++ b/ui/angular/src/app/measure/create-measure/pr/rule/rule.component.css
@@ -17,33 +17,33 @@ specific language governing permissions and limitations
 under the License.
 */
 
-.table > thead > tr.success > td{
-	background-color: #77b300;
+.table>thead>tr.success>td {
+  background-color: #77b300;
 }
-mark{
-	background-color: #ff8800;
-	padding: .2em;
+
+mark {
+  background-color: #ff8800;
+  padding: .2em;
 }
-h5{
-	font-size: 20px;
+
+h5 {
+  font-size: 20px;
 }
-.y-scrollable::-webkit-scrollbar-track
-{
-	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-	border-radius: 10px;
-	background-color: #F5F5F5;
+
+.y-scrollable::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  border-radius: 10px;
+  background-color: #F5F5F5;
 }
 
-.y-scrollable::-webkit-scrollbar
-{
-	width: 5px;
-	border-radius: 10px;
-	background-color: #F5F5F5;
+.y-scrollable::-webkit-scrollbar {
+  width: 5px;
+  border-radius: 10px;
+  background-color: #F5F5F5;
 }
 
-.y-scrollable::-webkit-scrollbar-thumb
-{
-	border-radius: 10px;
-	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
-	background-color: #AAAAAA;
+.y-scrollable::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
+  background-color: #AAAAAA;
 }

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/e7034710/ui/angular/src/app/measure/create-measure/pr/rule/rule.component.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/measure/create-measure/pr/rule/rule.component.ts b/ui/angular/src/app/measure/create-measure/pr/rule/rule.component.ts
index 1df2404..8db602b 100644
--- a/ui/angular/src/app/measure/create-measure/pr/rule/rule.component.ts
+++ b/ui/angular/src/app/measure/create-measure/pr/rule/rule.component.ts
@@ -31,5 +31,4 @@ export class RuleComponent implements OnInit {
   ngOnInit() {
   	this.vaType = '2';
   }
-
 }

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/e7034710/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 cf3a212..a01f0ed 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
@@ -21,7 +21,7 @@ under the License.
     <h5 class="over-title margin-bottom-15">View Measure</h5>
   </div>
   <!--//row-->
-  <div class="row">
+  <div class="row y-scrollable" style="max-height: 150px;">
     <div class="col-sm-6 col-xs-12">
       <div id="viewruleDefinition" class="viewrule-content">
         <div class="row">
@@ -48,14 +48,6 @@ under the License.
             {{ruleData.type}}
           </div>
         </div>
-        <!-- <div class="row">
-          <label for="systemSelector" class="col-xs-4">
-            Organization:
-          </label>
-          <div class="col-xs-8 " style="color: #fff">
-            {{ruleData.organization}}
-          </div>
-        </div> -->
         <div class="row" *ngIf="ruleData.type=='accuracy'">
           <label class="col-xs-4">
             Source:

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/e7034710/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 efa2894..7271296 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
@@ -16,24 +16,26 @@ KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License.
 */
-import { Component, OnInit } from '@angular/core';
-import { Router, ActivatedRoute, ParamMap } from '@angular/router';
-import 'rxjs/add/operator/switchMap';
-import {HttpClient} from '@angular/common/http';
-import {ServiceService} from '../../service/service.service';
-
-
+import { Component, OnInit } from "@angular/core";
+import { Router, ActivatedRoute, ParamMap } from "@angular/router";
+import "rxjs/add/operator/switchMap";
+import { HttpClient } from "@angular/common/http";
+import { ServiceService } from "../../service/service.service";
 
 @Component({
-  selector: 'app-measure-detail',
-  templateUrl: './measure-detail.component.html',
-  providers:[ServiceService],
-  styleUrls: ['./measure-detail.component.css']
+  selector: "app-measure-detail",
+  templateUrl: "./measure-detail.component.html",
+  providers: [ServiceService],
+  styleUrls: ["./measure-detail.component.css"]
 })
 export class MeasureDetailComponent implements OnInit {
-  currentId:string;
-  constructor(private route: ActivatedRoute,
-  private router: Router,private http:HttpClient,public serviceService:ServiceService) { };
+  currentId: string;
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    private http: HttpClient,
+    public serviceService: ServiceService
+  ) {}
   ruleData: any;
   sourceLength: number;
   sourceDB: string;
@@ -50,9 +52,9 @@ export class MeasureDetailComponent implements OnInit {
   targetpath: string;
   type: string;
   currentrule: string;
-  prorule = '';
+  prorule = "";
 
-  fetchData(value,index){
+  fetchData(value, index) {
     var data = this.ruleData["data.sources"][index].connectors[0];
     var size = value + "size";
     var zone = value + "zone";
@@ -63,7 +65,7 @@ export class MeasureDetailComponent implements OnInit {
     this[size] = data["data.unit"];
     this[zone] = data["data.time.zone"];
     this[where] = data.config.where;
-    if(data.predicates.length !== 0){
+    if (data.predicates.length !== 0) {
       this[path] = data.predicates[0].config.path;
     }
     this[database] = data.config.database;
@@ -72,37 +74,42 @@ export class MeasureDetailComponent implements OnInit {
 
   ngOnInit() {
     this.ruleData = {
-      'evaluateRule':''
+      evaluateRule: ""
     };
-  	var getModelUrl;
+    var getModelUrl;
     var getModel = this.serviceService.config.uri.getModel;
-  	this.currentId = this.route.snapshot.paramMap.get('id');
-    getModelUrl = getModel+"/"+this.currentId;
-    this.http.get(getModelUrl).subscribe(data=>{
-      this.ruleData = data;
-      if(this.ruleData['measure.type'] === 'external'){
-        this.ruleData.type = this.ruleData["measure.type"];
-      }
-      else{
-        this.ruleData.type = this.ruleData["dq.type"];
-        var currentprorule = this.ruleData['evaluate.rule'].rules;
-        this.currentrule = currentprorule;
-        for(let index in currentprorule){
-          this.prorule = this.prorule + currentprorule[index].description + ','
-        }
-        this.prorule = this.prorule.substring(0,this.prorule.lastIndexOf(','));
-        this.fetchData("source",0);
-        if(this.ruleData.type === "accuracy"){
-          this.fetchData("target",1);
-        }else{
-          this.targetDB = '';
-          this.targetTable = '';
+    this.currentId = this.route.snapshot.paramMap.get("id");
+    getModelUrl = getModel + "/" + this.currentId;
+    this.http.get(getModelUrl).subscribe(
+      data => {
+        this.ruleData = data;
+        if (this.ruleData["measure.type"] === "external") {
+          this.ruleData.type = this.ruleData["measure.type"];
+        } else {
+          this.ruleData.type = this.ruleData["dq.type"];
+          var currentprorule = this.ruleData["evaluate.rule"].rules;
+          this.currentrule = currentprorule;
+          for (let index in currentprorule) {
+            this.prorule =
+              this.prorule + currentprorule[index].description + ",";
+          }
+          this.prorule = this.prorule.substring(
+            0,
+            this.prorule.lastIndexOf(",")
+          );
+          this.fetchData("source", 0);
+          if (this.ruleData.type === "accuracy") {
+            this.fetchData("target", 1);
+          } else {
+            this.targetDB = "";
+            this.targetTable = "";
+          }
         }
+      },
+      err => {
+        console.log("error");
+        // toaster.pop('error', 'Error when geting record', response.message);
       }
-     },err => {
-     	console.log('error');
-      // toaster.pop('error', 'Error when geting record', response.message);
-    });
+    );
   }
-
-}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/e7034710/ui/angular/src/app/measure/measure.component.css
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/measure/measure.component.css b/ui/angular/src/app/measure/measure.component.css
index 8d0edd2..d9218f6 100644
--- a/ui/angular/src/app/measure/measure.component.css
+++ b/ui/angular/src/app/measure/measure.component.css
@@ -17,240 +17,237 @@ specific language governing permissions and limitations
 under the License.
 */
 
-.table-striped > tbody > tr:nth-of-type(even) {
-     background-color: #1f1f1f; 
+.table-striped>tbody>tr:nth-of-type(even) {
+  background-color: #1f1f1f;
 }
-.table-striped > tbody > tr:nth-of-type(odd) {
-     background-color: #080808; 
+
+.table-striped>tbody>tr:nth-of-type(odd) {
+  background-color: #080808;
 }
 
-.icon{
+.icon {
   color: #fff;
   position: absolute;
   left: 50%;
   top: 20%;
 }
 
-#measureTable{
-	font-size:18px;
+#measureTable {
+  font-size: 18px;
 }
 
-.po{
+.po {
   cursor: pointer;
 }
-.ng2-st-actions-title .ng2-smart-title{
-	color:#1e6bb8;
-}
 
-#measureTable .ng2-smart-titles{
-	background-color:#7D95CC;
+.ng2-st-actions-title .ng2-smart-title {
+  color: #1e6bb8;
 }
 
-.pagination > li > a{
-  cursor:pointer;
+#measureTable .ng2-smart-titles {
+  background-color: #7D95CC;
 }
 
+.pagination>li>a {
+  cursor: pointer;
+}
 
 .swMain>ul {
-    display: table;
-    list-style: none;
-    margin: 0 0 20px;
-    padding: 10px 0;
-    position: relative;
-    width: 100%;
-    background: #f7f7f8;
-    border-radius: 5px
+  display: table;
+  list-style: none;
+  margin: 0 0 20px;
+  padding: 10px 0;
+  position: relative;
+  width: 100%;
+  background: #f7f7f8;
+  border-radius: 5px
 }
 
-.formStep{
+.formStep {
   background-color: #000000;
   border-radius: 5px;
-  padding:10px;
+  padding: 10px;
   /*height:800px;*/
 }
 
 .swMain>ul li {
-    display: table-cell;
-    text-align: center;
-    width: 1%
+  display: table-cell;
+  text-align: center;
+  width: 1%
 }
 
 .swMain>ul li>a:before {
-    border-top: 4px solid #c8c7cc;
-    content: "";
-    display: block;
-    font-size: 0;
-    height: 1px;
-    overflow: hidden;
-    position: relative;
-    top: 21px;
-    width: 100%;
-    z-index: 1
+  border-top: 4px solid #c8c7cc;
+  content: "";
+  display: block;
+  font-size: 0;
+  height: 1px;
+  overflow: hidden;
+  position: relative;
+  top: 21px;
+  width: 100%;
+  z-index: 1
 }
 
 .swMain>ul li:first-child>a:before {
-    left: 50%;
-    max-width: 51%
+  left: 50%;
+  max-width: 51%
 }
 
 .swMain>ul li:last-child>a:before {
-    max-width: 50%;
-    width: 50%
+  max-width: 50%;
+  width: 50%
 }
 
-.swMain li>a.done:before,.swMain>ul li>a.selected:before {
-    border-color: #007AFF
+.swMain li>a.done:before,
+.swMain>ul li>a.selected:before {
+  border-color: #007AFF
 }
 
-.onlyone:before{
-  left:0  !important;
+.onlyone:before {
+  left: 0 !important;
   max-width: 100% !important;
   width: 100% !important;
 }
 
 .swMain>ul .stepNumber {
-    background-color: #fff;
-    border: 5px solid #c8c7cc;
-    border-radius: 100%;
-    color: #546474;
-    display: inline-block;
-    font-size: 15px;
-    height: 40px;
-    line-height: 30px;
-    position: relative;
-    text-align: center;
-    width: 40px;
-    z-index: 2
+  background-color: #fff;
+  border: 5px solid #c8c7cc;
+  border-radius: 100%;
+  color: #546474;
+  display: inline-block;
+  font-size: 15px;
+  height: 40px;
+  line-height: 30px;
+  position: relative;
+  text-align: center;
+  width: 40px;
+  z-index: 2
 }
 
 .swMain>ul li>a.selected .stepNumber {
-    border-color: #007AFF
+  border-color: #007AFF
 }
 
-/*.swMain ul li>a.done .stepNumber,.swMain>ul li:last-child>a.selected .stepNumber {*/
-.swMain ul li>a.done .stepNumber{
-    border-color: #007AFF;
-    background-color: #007AFF;
-    color: #fff;
-    text-indent: -9999px
+.swMain ul li>a.done .stepNumber {
+  border-color: #007AFF;
+  background-color: #007AFF;
+  color: #fff;
+  text-indent: -9999px
 }
 
-/*.swMain ul li>a.done .stepNumber:before,.swMain>ul li:last-child>a.selected .stepNumber:before {*/
 .swMain ul li>a.done .stepNumber:before {
-    content: "\f00c";
-    display: inline;
-    float: right;
-    font-family: FontAwesome;
-    font-weight: 300;
-    height: auto;
-    text-shadow: none;
-    margin-right: 7px;
-    text-indent: 0
+  content: "\f00c";
+  display: inline;
+  float: right;
+  font-family: FontAwesome;
+  font-weight: 300;
+  height: auto;
+  text-shadow: none;
+  margin-right: 7px;
+  text-indent: 0
 }
 
 .swMain ul li>a.done.wait .stepNumber {
-    background-color: #F6F6F6!important;
-    color: #CCC!important;
-    text-indent: 0!important
+  background-color: #F6F6F6!important;
+  color: #CCC!important;
+  text-indent: 0!important
 }
 
 .swMain ul li>a.done.wait .stepNumber:before {
-    content: ""!important
+  content: ""!important
 }
 
 .swMain>ul li .stepDesc {
-    color: #8e8e93;
-    display: block;
-    font-size: 14px;
-    margin-top: 4px;
-    max-width: 100%;
-    table-layout: fixed;
-    text-align: center;
-    word-wrap: break-word;
-    z-index: 104
+  color: #8e8e93;
+  display: block;
+  font-size: 14px;
+  margin-top: 4px;
+  max-width: 100%;
+  table-layout: fixed;
+  text-align: center;
+  word-wrap: break-word;
+  z-index: 104
 }
 
-.swMain li>a.done .stepDesc,.swMain>ul li>a.selected .stepDesc {
-    /*color: #2B3D53*/
-    color: #007AFF
+.swMain li>a.done .stepDesc,
+.swMain>ul li>a.selected .stepDesc {
+  /*color: #2B3D53*/
+  color: #007AFF
 }
 
 .swMain>ul li>a.disabled {
-    cursor: default
+  cursor: default
 }
 
 .swMain .progress {
-    margin-bottom: 30px
+  margin-bottom: 30px
 }
 
 .swMain .stepContainer {
-    height: auto!important
+  height: auto!important
 }
 
-/*.swMain .close,.swMain .loader,.swMain [class*=" button"],.swMain [class^=button] {
-    display: none
-}*/
-
-.swMain .y-scrollable{
+.swMain .y-scrollable {
   overflow-y: auto;
   overflow-x: hidden;
   max-height: 600px;
 }
 
-fieldset{
+fieldset {
   border: 1px solid #e6e8e8;
   border-radius: 5px;
-  margin:20px 0;
+  margin: 20px 0;
   padding: 25px;
-  position:relative;
-  min-width:0;
-  display:block;
-
+  position: relative;
+  min-width: 0;
+  display: block;
 }
 
-fieldset legend{
+fieldset legend {
   background-color: #000000;
   left: 10px;
   padding: 0 10px;
   position: absolute;
   top: -12px;
-  color:#fff;
+  color: #fff;
   font-weight: 400;
   width: auto!important;
   border: none!important;
 }
 
-.btn-o{
-  background:0 0!important;
+.btn-o {
+  background: 0 0!important;
 }
 
-.btn-wide{
-  min-width:120px;
+.btn-wide {
+  min-width: 120px;
 }
 
 .highlight {
-    background: rgba(255, 230, 0, 0.5);
-    padding: 3px 5px;
-    margin: -3px -5px;
-    line-height: 1.7;
-    word-break: break-word;
-    /*border-radius: 3px;*/
-    /*display:inline-block;*/
+  background: rgba(255, 230, 0, 0.5);
+  padding: 3px 5px;
+  margin: -3px -5px;
+  line-height: 1.7;
+  word-break: break-word;
+  /*border-radius: 3px;*/
+  /*display:inline-block;*/
 }
 
-.label-definition{
-  color:#fff;
+.label-definition {
+  color: #fff;
 }
-.formStep>.stepDesc{
+
+.formStep>.stepDesc {
   color: #b2c831;
 }
 
-.formStep>.container-fluid{
+.formStep>.container-fluid {
   /*position:relative;*/
 }
 
-.btn-container{
-  height:50px;
+.btn-container {
+  height: 50px;
   /*position: absolute;
   bottom: 10;*/
 }
@@ -258,113 +255,120 @@ fieldset legend{
 .panel-disabled {
   border-color: #B9D3DF;
 }
-.panel-disabled > .panel-heading {
+
+.panel-disabled>.panel-heading {
   background-color: #B9D3DF;
   border-color: #B9D3DF;
 }
 
-.panel-body>ul{
-  border-radius:0;
+.panel-body>ul {
+  border-radius: 0;
   background: none;
-  margin:0;
+  margin: 0;
 }
 
 
 .panel-green {
-    border-color: #5cb85c;
+  border-color: #5cb85c;
 }
 
 .panel-green .panel-heading {
-    border-color: #5cb85c;
-    color: #fff;
-    background-color: #5cb85c;
+  border-color: #5cb85c;
+  color: #fff;
+  background-color: #5cb85c;
 }
 
 .panel-green a {
-    color: #5cb85c;
+  color: #5cb85c;
 }
 
 .panel-green a:hover {
-    color: #3d8b3d;
+  color: #3d8b3d;
 }
 
 .panel-red {
-    border-color: #d9534f;
+  border-color: #d9534f;
 }
 
 .panel-red .panel-heading {
-    border-color: #d9534f;
-    color: #fff;
-    background-color: #d9534f;
+  border-color: #d9534f;
+  color: #fff;
+  background-color: #d9534f;
 }
 
 .panel-red a {
-    color: #d9534f;
+  color: #d9534f;
 }
 
 .panel-red a:hover {
-    color: #b52b27;
+  color: #b52b27;
 }
 
 .panel-yellow {
-    border-color: #f0ad4e;
+  border-color: #f0ad4e;
 }
 
 .panel-yellow .panel-heading {
-    border-color: #f0ad4e;
-    color: #fff;
-    background-color: #f0ad4e;
+  border-color: #f0ad4e;
+  color: #fff;
+  background-color: #f0ad4e;
 }
 
 .panel-yellow a {
-    color: #f0ad4e;
+  color: #f0ad4e;
 }
 
 .panel-yellow a:hover {
-    color: #df8a13;
+  color: #df8a13;
 }
 
-.viewrule-content{
-  border:1px solid #fff;
-  border-radius:4px;
-  padding:10px;
+.viewrule-content {
+  border: 1px solid #fff;
+  border-radius: 4px;
+  padding: 10px;
 }
 
-.ruletypes>.panel{
-  cursor:pointer
+.ruletypes>.panel {
+  cursor: pointer
 }
 
-.ruletypes>.panel:hover{
-  box-shadow:         3px 3px 5px 6px #ccc;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
-  -webkit-box-shadow: 3px 3px 5px 6px #ccc;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
-  -moz-box-shadow:    3px 3px 5px 6px #ccc;  /* Firefox 3.5 - 3.6 */
+.ruletypes>.panel:hover {
+  box-shadow: 3px 3px 5px 6px #ccc;
+  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
+  -webkit-box-shadow: 3px 3px 5px 6px #ccc;
+  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
+  -moz-box-shadow: 3px 3px 5px 6px #ccc;
+  /* Firefox 3.5 - 3.6 */
 }
 
-.createrule-hint{
-  color:#b2c831;
-  padding-top:10px;
+.createrule-hint {
+  color: #b2c831;
+  padding-top: 10px;
 }
 
 
 ::-webkit-scrollbar {
-    width: 6px;
+  width: 6px;
 }
+
 ::-webkit-scrollbar-track {
-    background-color: #eaeaea;
-    /*background-color: #0a0a0a;*/
-    border-left: 1px solid #ccc;
+  background-color: #eaeaea;
+  /*background-color: #0a0a0a;*/
+  border-left: 1px solid #ccc;
 }
+
 ::-webkit-scrollbar-thumb {
-    background-color: #ccc;
+  background-color: #ccc;
 }
+
 ::-webkit-scrollbar-thumb:hover {
-    background-color: #aaa;
+  background-color: #aaa;
 }
 
 .disabled {
-    pointer-events: none;
-    cursor: default;
-    opacity: 0.6;
+  pointer-events: none;
+  cursor: default;
+  opacity: 0.6;
 }
 
 .test-result {
@@ -372,9 +376,12 @@ fieldset legend{
   padding: 1px 5px;
 }
 
-.delete-alert{
-  text-align: left;color: white;font-size: 150%;
+.delete-alert {
+  text-align: left;
+  color: white;
+  font-size: 150%;
 }
-a{
+
+a {
   color: white;
-}
\ No newline at end of file
+}

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/e7034710/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 383c938..cde2d49 100644
--- a/ui/angular/src/app/measure/measure.component.html
+++ b/ui/angular/src/app/measure/measure.component.html
@@ -19,9 +19,9 @@ under the License.
 <div>
   <p>
     <a routerLink="/createmeasure" style="background-color: #337ab7;" class="btn btn-primary  btn-wide">
-        <i class="fa fa-plus"></i> 
-        Create Measure
-        </a>
+      <i class="fa fa-plus"></i> 
+      Create Measure
+    </a>
   </p>
   <div id="modelContainer">
     <table class="table table-striped" [mfData]="results" #mf="mfDataTable" [mfRowsOnPage]="10">
@@ -45,10 +45,8 @@ under the License.
           <td><a routerLink="/measure/{{row.id}}">{{row.name}}</a></td>
           <td>{{row["dq.type"]}}</td>
           <td>{{row.description}}</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;
@@ -107,14 +105,6 @@ under the License.
                       {{deletedRow["dq.type"]}}
                     </div>
                   </div>
-                  <!-- <div class="row">
-                    <label for="systemSelector" class="col-md-4 col-lg-4 col-sm-4">
-                      Organization:
-                    </label>
-                    <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
-                      {{deletedRow.organization}}
-                    </div>
-                  </div> -->
                   <div class="row">
                     <label class="col-md-4 col-lg-4 col-sm-4">
                       DataAsset:

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/e7034710/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 c89c062..a7f7c76 100644
--- a/ui/angular/src/app/measure/measure.component.ts
+++ b/ui/angular/src/app/measure/measure.component.ts
@@ -16,84 +16,91 @@ KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License.
 */
-import { Component, OnInit} from '@angular/core';
-import { HttpClient} from '@angular/common/http';
-import { DataTableModule} from "angular2-datatable";
-import { Router} from "@angular/router";
-import { FormControl } from '@angular/forms';
-import { FormsModule } from '@angular/forms';
-import {ServiceService} from '../service/service.service';
-
-import { BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import { ToasterModule, ToasterService} from 'angular2-toaster';
-import * as $ from 'jquery';
+import { Component, OnInit } from "@angular/core";
+import { HttpClient } from "@angular/common/http";
+import { DataTableModule } from "angular2-datatable";
+import { Router } from "@angular/router";
+import { FormControl } from "@angular/forms";
+import { FormsModule } from "@angular/forms";
+import { ServiceService } from "../service/service.service";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import { ToasterModule, ToasterService } from "angular2-toaster";
+import * as $ from "jquery";
 
 @Component({
-  selector: 'app-measure',
-  templateUrl: './measure.component.html',
-  providers:[ServiceService],
-  styleUrls: ['./measure.component.css']
+  selector: "app-measure",
+  templateUrl: "./measure.component.html",
+  providers: [ServiceService],
+  styleUrls: ["./measure.component.css"]
 })
 export class MeasureComponent implements OnInit {
-  //results:object[];
-  results:any;
+  results: any;
   public visible = false;
   public visibleAnimate = false;
-  deletedRow : any;
-  sourceTable :string;
-  targetTable :string;
-  deleteId : number;
-  deleteIndex:number;
-  
+  deletedRow: any;
+  sourceTable: string;
+  targetTable: string;
+  deleteId: number;
+  deleteIndex: number;
+  private toasterService: ToasterService;
+
   public hide(): void {
     this.visibleAnimate = false;
-    setTimeout(() => this.visible = false, 300);
+    setTimeout(() => (this.visible = false), 300);
   }
 
   public onContainerClicked(event: MouseEvent): void {
-    if ((<HTMLElement>event.target).classList.contains('modal')) {
+    if ((<HTMLElement>event.target).classList.contains("modal")) {
       this.hide();
     }
   }
- 
-  constructor(private http:HttpClient,private router:Router,public serviceService:ServiceService) { 
-  };
 
-  remove(row){
+  constructor(
+    toasterService: ToasterService,
+    private http: HttpClient,
+    private router: Router,
+    public serviceService: ServiceService
+  ) {
+    this.toasterService = toasterService;
+  }
+
+  remove(row) {
     this.visible = true;
-    setTimeout(() => this.visibleAnimate = true, 100);
+    setTimeout(() => (this.visibleAnimate = true), 100);
     this.deleteId = row.id;
     this.deleteIndex = this.results.indexOf(row);
     this.deletedRow = row;
-    var sourcedata = this.deletedRow["data.sources"][0].connectors[0].config;          
+    var sourcedata = this.deletedRow["data.sources"][0].connectors[0].config;
     this.sourceTable = sourcedata["table.name"];
-    if(this.deletedRow.type === "accuracy"){
+    if (this.deletedRow.type === "accuracy") {
       var targetdata = this.deletedRow["data.sources"][1].connectors[0].config;
       this.targetTable = targetdata["table.name"];
-    }else{
-      this.targetTable = '';
-    }          
+    } else {
+      this.targetTable = "";
+    }
   }
 
-  confirmDelete(){
+  confirmDelete() {
     var deleteModel = this.serviceService.config.uri.deleteModel;
-    let deleteUrl = deleteModel + '/' + this.deleteId;
-    this.http.delete(deleteUrl).subscribe(data => {
-      let deleteResult:any = data;
-      if(deleteResult.code==202){
+    let deleteUrl = deleteModel + "/" + this.deleteId;
+    this.http.delete(deleteUrl).subscribe(
+      data => {
         var self = this;
-        setTimeout(function () {
-          self.results.splice(self.deleteIndex,1);
-          // self.source.load(self.results);
+        setTimeout(function() {
+          self.results.splice(self.deleteIndex, 1);
           self.hide();
-        },200);
+        }, 200);
+      },
+      err => {
+        this.toasterService.pop("error", "Error!", "Failed to delete measure!");
+        console.log("Error when deleting measure!");
       }
-    });
-  };
+    );
+  }
 
-  ngOnInit():void {
+  ngOnInit(): void {
     var allModels = this.serviceService.config.uri.allModels;
-  	this.http.get(allModels).subscribe(data =>{
+    this.http.get(allModels).subscribe(data => {
       // for(let measure in data){
       //   data[measure].trueName = data[measure].name;
       //   if(data[measure].type !== 'griffin'){
@@ -102,16 +109,13 @@ export class MeasureComponent implements OnInit {
       //     data[measure].type = '';
       //   }
       // }
-  		this.results = Object.keys(data).map(function(index){
+      this.results = Object.keys(data).map(function(index) {
         let measure = data[index];
-        if(measure['measure.type'] === 'external'){
-          measure['dq.type'] = 'external';
+        if (measure["measure.type"] === "external") {
+          measure["dq.type"] = "external";
         }
         return measure;
       });
-  	});
-  // };
-// }
-   // this.results = this.measureData;
+    });
   }
-}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/e7034710/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 adb60c0..953226e 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
@@ -16,83 +16,85 @@ KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License.
 */
-import { Component, OnInit, OnChanges, SimpleChanges, OnDestroy,AfterViewInit,NgZone } from '@angular/core';
-import {ChartService} from '../../service/chart.service';
-import {ServiceService} from '../../service/service.service';
-
-import { Router, ActivatedRoute, ParamMap } from '@angular/router';
-import 'rxjs/add/operator/switchMap';
-import {HttpClient} from '@angular/common/http';
-import * as $ from 'jquery';
+import { Component, OnInit, OnChanges, SimpleChanges, OnDestroy, AfterViewInit, NgZone } from "@angular/core";
+import { ChartService } from "../../service/chart.service";
+import { ServiceService } from "../../service/service.service";
+import { Router, ActivatedRoute, ParamMap } from "@angular/router";
+import "rxjs/add/operator/switchMap";
+import { HttpClient } from "@angular/common/http";
+import * as $ from "jquery";
 
 @Component({
-  selector: 'app-detail-metric',
-  templateUrl: './detail-metric.component.html',
-  styleUrls: ['./detail-metric.component.css'],
-  providers:[ChartService,ServiceService]
+  selector: "app-detail-metric",
+  templateUrl: "./detail-metric.component.html",
+  styleUrls: ["./detail-metric.component.css"],
+  providers: [ChartService, ServiceService]
 })
 export class DetailMetricComponent implements OnInit {
-
-  constructor(public chartService:ChartService,private route: ActivatedRoute,
-  private router: Router,private http:HttpClient,private zone:NgZone,public serviceService:ServiceService
-) {
-    //     var self = this;
-    // setTimeout(function () {
-    //     self.currentMeasure = self.route.snapshot.paramMap.get('name');
-    //     self.chartOption = self.chartService.getOptionBig(self.getData(self.currentMeasure));
-    //     $('#bigChartDiv').height(window.innerHeight-120+'px');
-    //     $('#bigChartDiv').width(window.innerWidth-400+'px');
-    //     $('#bigChartContainer').show();
-    // },200);
-  };
-  selectedMeasure:string;
-  chartOption:{};
-  data:any;
-  currentJob:string;
-  finalData:any;
-  metricName:string;
+  constructor(
+    public chartService: ChartService,
+    private route: ActivatedRoute,
+    private router: Router,
+    private http: HttpClient,
+    private zone: NgZone,
+    public serviceService: ServiceService
+  ) {}
+  selectedMeasure: string;
+  chartOption: {};
+  data: any;
+  currentJob: string;
+  finalData: any;
+  metricName: string;
   size = 300;
   offset = 0;
 
   ngOnInit() {
-  	this.currentJob = this.route.snapshot.paramMap.get('name');
+    this.currentJob = this.route.snapshot.paramMap.get("name");
     var self = this;
     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,
-        'dq':0,
-        'details':[]
-      };
-      this.data = data;
-      if(this.data){
-        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));
+    var metricDetailUrl =
+      metricdetail +
+      "?metricName=" +
+      this.currentJob +
+      "&size=" +
+      this.size +
+      "&offset=" +
+      this.offset;
+    this.http.get(metricDetailUrl).subscribe(
+      data => {
+        var metric = {
+          name: "",
+          timestamp: 0,
+          dq: 0,
+          details: []
+        };
+        this.data = data;
+        if (this.data) {
+          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");
+        $("#bigChartDiv").width(window.innerWidth - 400 + "px");
+        $("#bigChartContainer").show();
+      },
+      err => {
+        console.log("Error occurs when connect to elasticsearh!");
       }
-      this.chartOption = this.chartService.getOptionBig(metric);
-      $('#bigChartDiv').height(window.innerHeight-120+'px');
-      $('#bigChartDiv').width(window.innerWidth-400+'px');
-      $('#bigChartContainer').show();
-    },
-    err => {
-      console.log('Error occurs when connect to elasticsearh!');
-    });  
+    );
   }
 
-  onResize(event){
+  onResize(event) {
     this.resizeTreeMap();
   }
 
-  resizeTreeMap(){
-    $('#bigChartDiv').height( $('#mainWindow').height());
-    $('#bigChartDiv').width( $('#mainWindow').width());
+  resizeTreeMap() {
+    $("#bigChartDiv").height($("#mainWindow").height());
+    $("#bigChartDiv").width($("#mainWindow").width());
   }
 
-  getData(metricName){
-  	 
-  }
-}
+  getData(metricName) {}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/e7034710/ui/angular/src/app/metric/metric.component.css
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/metric/metric.component.css b/ui/angular/src/app/metric/metric.component.css
index c04b653..f501062 100644
--- a/ui/angular/src/app/metric/metric.component.css
+++ b/ui/angular/src/app/metric/metric.component.css
@@ -17,48 +17,45 @@ specific language governing permissions and limitations
 under the License.
 */
 
-#orgSelector{
-	padding: 4px 6px;
-	height: 30px;
-	width: 230px;
-	background-color: #d1d3d2;
-	display: inline-block;
-	margin-left: 10px;
+#orgSelector {
+  padding: 4px 6px;
+  height: 30px;
+  width: 230px;
+  background-color: #d1d3d2;
+  display: inline-block;
+  margin-left: 10px;
 }
 
-#measureSelector{
-	padding: 4px 6px;
-	height: 30px;
-	width: 230px;
-	background-color: #d1d3d2;
-	display: inline-block;
-	margin-left: 10px;
+#measureSelector {
+  padding: 4px 6px;
+  height: 30px;
+  width: 230px;
+  background-color: #d1d3d2;
+  display: inline-block;
+  margin-left: 10px;
 }
 
-#dashboard{
-    overflow-y:auto;
-    height:680px;
-    overflow-x: hidden;
-    padding-right: 10px;
+#dashboard {
+  overflow-y: auto;
+  height: 680px;
+  overflow-x: hidden;
+  padding-right: 10px;
 }
 
-#dashboard::-webkit-scrollbar-track
-{
-    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-    border-radius: 10px;
-    background-color: #F5F5F5;
+#dashboard::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  border-radius: 10px;
+  background-color: #F5F5F5;
 }
 
-#dashboard::-webkit-scrollbar
-{
-    width: 7px;
-    border-radius: 10px;
-    background-color: #F5F5F5;
+#dashboard::-webkit-scrollbar {
+  width: 7px;
+  border-radius: 10px;
+  background-color: #F5F5F5;
 }
 
-#dashboard::-webkit-scrollbar-thumb
-{
-    border-radius: 2px;
-    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
-    background-color: #ADADAD;
+#dashboard::-webkit-scrollbar-thumb {
+  border-radius: 2px;
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
+  background-color: #ADADAD;
 }

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/e7034710/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 f80cdde..bab752c 100644
--- a/ui/angular/src/app/metric/metric.component.html
+++ b/ui/angular/src/app/metric/metric.component.html
@@ -20,13 +20,6 @@ under the License.
   <div class="container-fluid">
     <div class="row col-lg-12" style="margin-top: 15px;">
       <div class="form-group">
-        <!-- <span>
-	      <label>Group: </label>
-	        <select ng-disabled="orgSelectDisabled" class="form-control"  (change)="changeOrg()" id="orgSelector" [(ngModel)]="selectedOrgIndex">
-              <option value="0"> All </option>
-              <option *ngFor="let opt of orgs;let m = index" value="{{m+1}}"  >{{opt.name}}</option>
-	        </select>
-	      </span> -->
         <span style="padding-left:30px;">
 	      <label>Measure: </label>
 	        <select class="form-control"  (change)="changeMeasure()" [(ngModel)]="selectedMeasureIndex" id="measureSelector">

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/e7034710/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 62d180b..dba4d06 100644
--- a/ui/angular/src/app/metric/metric.component.ts
+++ b/ui/angular/src/app/metric/metric.component.ts
@@ -16,139 +16,134 @@ KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License.
 */
-import { Component, OnInit } from '@angular/core';
-import  {HttpClient} from '@angular/common/http';
-import  {Router} from "@angular/router";
-import {ChartService} from '../service/chart.service';
-// import {GetMetricService} from '../service/get-metric.service';
-import {ServiceService} from '../service/service.service';
-import * as $ from 'jquery';
+import { Component, OnInit } from "@angular/core";
+import { HttpClient } from "@angular/common/http";
+import { Router } from "@angular/router";
+import { ChartService } from "../service/chart.service";
+import { ServiceService } from "../service/service.service";
+import * as $ from "jquery";
 
 @Component({
-  selector: 'app-metric',
-  templateUrl: './metric.component.html',
-  styleUrls: ['./metric.component.css'],
-  providers:[ChartService,ServiceService]
+  selector: "app-metric",
+  templateUrl: "./metric.component.html",
+  styleUrls: ["./metric.component.css"],
+  providers: [ChartService, ServiceService]
 })
 export class MetricComponent implements OnInit {
-  
   constructor(
-  	public chartService:ChartService,
-  	// public getMetricService:GetMetricService,
-    public serviceService:ServiceService,
-  	private http: HttpClient,
-  	private router:Router) { }
-  data :any;
+    public chartService: ChartService,
+    public serviceService: ServiceService,
+    private http: HttpClient,
+    private router: Router
+  ) {}
+  data: any;
   finalData = [];
   chartOption = new Map();
-  // dataData = [];
-  originalData:any;
+  originalData: any;
   measureOptions = [];
   selectedMeasureIndex = 0;
-  chartHeight:any;
-  // var formatUtil = echarts.format;
-  mesWithJob:any;
-  
+  chartHeight: any;
+  mesWithJob: any;
 
   ngOnInit() {
-    this.renderData();	
+    this.renderData();
   }
 
-  renderData(){
+  renderData() {
     let url_dashboard = this.serviceService.config.uri.dashboard;
     this.http.get(url_dashboard).subscribe(data => {
-      this.mesWithJob = data;
+      this.mesWithJob = JSON.parse(JSON.stringify(data));
       var mesNode = null;
-      for(let mesName in this.mesWithJob){
+      for (let mesName in this.mesWithJob) {
+        var jobs = this.mesWithJob[mesName];
         mesNode = new Object();
         mesNode.name = mesName;
         var node = null;
         node = new Object();
         node.name = mesName;
         node.dq = 0;
-        var metricNode = {
-          'name':'',
-          'timestamp':'',
-          'dq':0,
-          'details':[]
-        }
         node.metrics = [];
         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);
+        if (
+          metricData.metricValues[0] != undefined &&
+          metricData.metricValues[0].value.matched != undefined
+        ) {
+          for(let i=0;i<jobs.length;i++){
+            var metricNode = {
+              name: "",
+              timestamp: "",
+              dq: 0,
+              details: []
+            };
+            metricNode.details = JSON.parse(
+              JSON.stringify(jobs[i].metricValues)
+            );
+            metricNode.name = jobs[i].name;
+            metricNode.timestamp = jobs[i].metricValues[0].value.tmst;
+            metricNode.dq =
+              jobs[i].metricValues[0].value.matched /
+              jobs[i].metricValues[0].value.total *
+              100;
+            node.metrics.push(metricNode);
+          }
         }
-        this.finalData.push(node);                 
+        this.finalData.push(node);
       }
       this.originalData = JSON.parse(JSON.stringify(this.finalData));
       var self = this;
       setTimeout(function function_name(argument) {
         self.redraw(self.finalData);
-      },1000)
+      }, 1000);
     });
   }
 
-  getOption(parent,i){
-   	return this.chartOption.get('thumbnail'+parent+'-'+i);
+  getOption(parent, i) {
+    return this.chartOption.get("thumbnail" + parent + "-" + i);
   }
 
-  redraw (data) {
-    this.chartHeight = $('.chartItem:eq(0)').width()*0.8+'px';
-    for(let i = 0;i<data.length;i++){
+  redraw(data) {
+    this.chartHeight = $(".chartItem:eq(0)").width() * 0.8 + "px";
+    for (let i = 0; i < data.length; i++) {
       var parentIndex = i;
-      for(let j = 0;j<data[i].metrics.length;j++){
-      	let index = j;
-      	let chartId = 'thumbnail' + parentIndex + '-' + index;
-        let _chartId = '#' + chartId;
+      for (let j = 0; j < data[i].metrics.length; j++) {
+        let index = j;
+        let chartId = "thumbnail" + parentIndex + "-" + index;
+        let _chartId = "#" + chartId;
         var divs = $(_chartId);
-        divs.get(0).style.width = divs.parent().width()+'px';
+        divs.get(0).style.width = divs.parent().width() + "px";
         divs.get(0).style.height = this.chartHeight;
-  	  this.chartOption.set(chartId,this.chartService.getOptionThum(data[i].metrics[j]));
+        this.chartOption.set(
+          chartId,
+          this.chartService.getOptionThum(data[i].metrics[j])
+        );
       }
     }
   }
 
-  goTo(parent,i){
-   	this.router.navigate(['/detailed/'+this.finalData[parent].metrics[i].name]) ;
+  goTo(parent, i) {
+    this.router.navigate([
+      "/detailed/" + this.finalData[parent].metrics[i].name
+    ]);
   }
 
-
   changeMeasure() {
     this.finalData = [];
-    if(this.selectedMeasureIndex == 0){
-      for(let data of this.originalData){
+    if (this.selectedMeasureIndex == 0) {
+      for (let data of this.originalData) {
         this.finalData.push(data);
       }
-    }else{
-      var measure = this.measureOptions[this.selectedMeasureIndex-1];
-      for(let data of this.originalData){
-        if(data.name === measure){
+    } else {
+      var measure = this.measureOptions[this.selectedMeasureIndex - 1];
+      for (let data of this.originalData) {
+        if (data.name === measure) {
           this.finalData.push(JSON.parse(JSON.stringify(data)));
         }
-      };
+      }
     }
     var self = this;
     setTimeout(function() {
       self.redraw(self.finalData);
     }, 0);
   }
-
-
-        // function resizePieChart() {
-        //   $('#data-asset-pie').css({
-        //       height: $('#data-asset-pie').parent().width(),
-        //       width: $('#data-asset-pie').parent().width()
-        //   });
-        // }
-
-        // this.$on('resizeHandler', function() {
-        //   if($route.current.$$route.controller == 'MetricsCtrl') {
-        //     console.log('metrics resize');
-        //     redraw(this.dataData);
-        //   }
-        // });
-}
+}
\ No newline at end of file