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/08/20 14:34:39 UTC

[2/5] incubator-griffin git commit: make ui style consistent

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/ui/angular/src/app/measure/create-measure/pub/pub.component.css
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/measure/create-measure/pub/pub.component.css b/ui/angular/src/app/measure/create-measure/pub/pub.component.css
index 194a251..22a9156 100644
--- a/ui/angular/src/app/measure/create-measure/pub/pub.component.css
+++ b/ui/angular/src/app/measure/create-measure/pub/pub.component.css
@@ -16,7 +16,6 @@ KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License.
 */
-
 @import url('../../../../../node_modules/angular2-toaster/toaster.css');
 /* @import url('../../measure.component.css'); */
 
@@ -53,19 +52,19 @@ div.tree div.tree-children::before {
   left: 5px
 }
 
-div.tree treenode>div>.node-wrapper {
+div.tree treenode > div > .node-wrapper {
   margin-left: 24px
 }
 
-div.tree treenode>div>.node-wrapper>.node-content-wrapper {
+div.tree treenode > div > .node-wrapper > .node-content-wrapper {
   margin-left: 4px
 }
 
-div.tree treenode>div.tree-node-leaf>.node-wrapper {
+div.tree treenode > div.tree-node-leaf > .node-wrapper {
   margin-left: 0
 }
 
-div.tree treenode>div::before {
+div.tree treenode > div::before {
   content: "";
   position: absolute;
   border-bottom: 1px dotted #23527c;
@@ -74,7 +73,7 @@ div.tree treenode>div::before {
   left: 7px
 }
 
-div.tree treenode>div .toggle-children-wrapper {
+div.tree treenode > div .toggle-children-wrapper {
   width: 13px;
   height: 13px;
   border: 1px solid #23527c;
@@ -87,7 +86,7 @@ div.tree treenode>div .toggle-children-wrapper {
   z-index: 1
 }
 
-div.tree treenode>div .toggle-children-wrapper::before {
+div.tree treenode > div .toggle-children-wrapper::before {
   content: "";
   display: inline-block;
   width: 7px;
@@ -97,7 +96,7 @@ div.tree treenode>div .toggle-children-wrapper::before {
   left: 2px
 }
 
-div.tree treenode>div .toggle-children-wrapper.toggle-children-wrapper-collapsed::after {
+div.tree treenode > div .toggle-children-wrapper.toggle-children-wrapper-collapsed::after {
   content: "";
   display: inline-block;
   height: 7px;
@@ -107,19 +106,19 @@ div.tree treenode>div .toggle-children-wrapper.toggle-children-wrapper-collapsed
   left: 5px
 }
 
-div.tree treenode>div .toggle-children-wrapper .toggle-children {
+div.tree treenode > div .toggle-children-wrapper .toggle-children {
   display: none
 }
 
-div.tree treenode>div .node-content-wrapper {
+div.tree treenode > div .node-content-wrapper {
   margin-left: 4px
 }
 
-div.tree>treenode>div::before {
+div.tree > treenode > div::before {
   left: 14px
 }
 
-div.tree>treenode>div>.node-wrapper>treenodeexpander>.toggle-children-wrapper {
+div.tree > treenode > div > .node-wrapper > treenodeexpander > .toggle-children-wrapper {
   left: 22px
 }
 
@@ -151,11 +150,11 @@ specific language governing permissions and limitations
 under the License.
 */
 
-.table-striped>tbody>tr:nth-of-type(even) {
+.table-striped > tbody > tr:nth-of-type(even) {
   background-color: #1f1f1f;
 }
 
-.table-striped>tbody>tr:nth-of-type(odd) {
+.table-striped > tbody > tr:nth-of-type(odd) {
   background-color: #080808;
 }
 
@@ -182,11 +181,11 @@ under the License.
   background-color: #7D95CC;
 }
 
-.pagination>li>a {
+.pagination > li > a {
   cursor: pointer;
 }
 
-.swMain>ul {
+.swMain > ul {
   display: table;
   list-style: none;
   margin: 0 0 20px;
@@ -204,13 +203,13 @@ under the License.
   /*height:800px;*/
 }
 
-.swMain>ul li {
+.swMain > ul li {
   display: table-cell;
   text-align: center;
   width: 1%
 }
 
-.swMain>ul li>a:before {
+.swMain > ul li > a:before {
   border-top: 4px solid #c8c7cc;
   /* content: ""; */
   display: block;
@@ -229,7 +228,7 @@ under the License.
   width: 100% !important;
 }
 
-.swMain>ul .stepNumber {
+.swMain > ul .stepNumber {
   background-color: #fff;
   border: 5px solid #c8c7cc;
   border-radius: 100%;
@@ -244,18 +243,18 @@ under the License.
   z-index: 2
 }
 
-.swMain>ul li>a.selected .stepNumber {
+.swMain > ul li > a.selected .stepNumber {
   border-color: #007AFF
 }
 
-.swMain ul li>a.done .stepNumber {
+.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 > a.done .stepNumber:before {
   content: "\f00c";
   display: inline;
   float: right;
@@ -267,17 +266,17 @@ under the License.
   text-indent: 0
 }
 
-.swMain ul li>a.done.wait .stepNumber {
-  background-color: #F6F6F6!important;
-  color: #CCC!important;
-  text-indent: 0!important
+.swMain ul li > a.done.wait .stepNumber {
+  background-color: #F6F6F6 !important;
+  color: #CCC !important;
+  text-indent: 0 !important
 }
 
-.swMain ul li>a.done.wait .stepNumber:before {
-  content: ""!important
+.swMain ul li > a.done.wait .stepNumber:before {
+  content: "" !important
 }
 
-.swMain>ul li .stepDesc {
+.swMain > ul li .stepDesc {
   color: #8e8e93;
   display: block;
   font-size: 14px;
@@ -289,13 +288,13 @@ under the License.
   z-index: 104
 }
 
-.swMain li>a.done .stepDesc,
-.swMain>ul li>a.selected .stepDesc {
+.swMain li > a.done .stepDesc,
+.swMain > ul li > a.selected .stepDesc {
   /*color: #2B3D53*/
   color: #007AFF
 }
 
-.swMain>ul li>a.disabled {
+.swMain > ul li > a.disabled {
   cursor: default
 }
 
@@ -304,7 +303,7 @@ under the License.
 }
 
 .swMain .stepContainer {
-  height: auto!important
+  height: auto !important
 }
 
 .swMain .y-scrollable {
@@ -331,12 +330,12 @@ fieldset legend {
   top: -12px;
   color: #fff;
   font-weight: 400;
-  width: auto!important;
-  border: none!important;
+  width: auto !important;
+  border: none !important;
 }
 
 .btn-o {
-  background: 0 0!important;
+  background: 0 0 !important;
 }
 
 .btn-wide {
@@ -357,11 +356,11 @@ fieldset legend {
   color: #fff;
 }
 
-.formStep>.stepDesc {
+.formStep > .stepDesc {
   color: #b2c831;
 }
 
-.formStep>.container-fluid {
+.formStep > .container-fluid {
   /*position:relative;*/
 }
 
@@ -375,18 +374,17 @@ fieldset legend {
   border-color: #B9D3DF;
 }
 
-.panel-disabled>.panel-heading {
+.panel-disabled > .panel-heading {
   background-color: #B9D3DF;
   border-color: #B9D3DF;
 }
 
-.panel-body>ul {
+.panel-body > ul {
   border-radius: 0;
   background: none;
   margin: 0;
 }
 
-
 .panel-green {
   border-color: #5cb85c;
 }
@@ -447,11 +445,11 @@ fieldset legend {
   padding: 10px;
 }
 
-.ruletypes>.panel {
+.ruletypes > .panel {
   cursor: pointer
 }
 
-.ruletypes>.panel:hover {
+.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;
@@ -465,7 +463,6 @@ fieldset legend {
   padding-top: 10px;
 }
 
-
 ::-webkit-scrollbar {
   width: 6px;
 }

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/ui/angular/src/app/measure/create-measure/pub/pub.component.html
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/measure/create-measure/pub/pub.component.html b/ui/angular/src/app/measure/create-measure/pub/pub.component.html
index 7fd8950..916ede6 100644
--- a/ui/angular/src/app/measure/create-measure/pub/pub.component.html
+++ b/ui/angular/src/app/measure/create-measure/pub/pub.component.html
@@ -23,7 +23,7 @@ under the License.
   <div class="row">
     <form name="Form" id="form" #prForm="ngForm" novalidate>
       <div id="wizard" class="swMain">
-        <ul> 
+        <ul>
           <li>
             <a class="selected">
               <div class="stepNumber">
@@ -33,8 +33,8 @@ under the License.
             </a>
           </li>
         </ul>
-      </div>  
-      <div id="step-4"  class="formStep">
+      </div>
+      <div id="step-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">
@@ -44,39 +44,47 @@ under the License.
               </legend>
               <div class="y-scrollable">
                 <div class="col-md-12 col-lg-12 col-sm-12" style="margin-top:30px;">
-                  <div class="form-group" [ngClass]="{'has-error':prName.dirty&&prName.invalid, 'has-success':prName.valid}">
+                  <div class="form-group"
+                       [ngClass]="{'has-error':prName.dirty&&prName.invalid, 'has-success':prName.valid}">
                     <label class="col-md-2 col-lg-2 col-sm-2 control-label">
                       Measure Name<span class="symbol required"></span>:
                     </label>
                     <div class="col-md-10 col-lg-10 col-sm-10 ">
-                      <input type="text" class="form-control" [(ngModel)]="newMeasure.name" #prName="ngModel" name="prName" placeholder="Please input the measure name" required pattern="^[a-zA-Z0-9_-]*$">
+                      <input type="text" class="form-control" [(ngModel)]="newMeasure.name" #prName="ngModel"
+                             name="prName" placeholder="Please input the measure name" required
+                             pattern="^[a-zA-Z0-9_-]*$">
                       <span class="error text-small block " *ngIf="prName.dirty && (prName.errors?.required)">Measure Name is required</span>
                       <span class="error text-small block " *ngIf="prName.dirty && (prName.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" [ngClass]="{'has-error':mName.dirty&&mName.invalid, 'has-success':mName.valid}">
+                <div class="col-md-12 col-lg-12 col-sm-12">
+                  <div class="form-group"
+                       [ngClass]="{'has-error':mName.dirty&&mName.invalid, 'has-success':mName.valid}">
                     <label class="col-md-2 col-lg-2 col-sm-2 control-label">
                       Metric 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)]="newMeasure.metricName" #mName="ngModel" name="mName" placeholder="Please input the metric name" required pattern="^[a-zA-Z0-9_-]*$">
+                      <input type="text" class="form-control" [(ngModel)]="newMeasure.metricName" #mName="ngModel"
+                             name="mName" placeholder="Please input the metric name" required
+                             pattern="^[a-zA-Z0-9_-]*$">
                       <span class="error text-small block " *ngIf="mName.dirty && (mName.errors?.required)">Metric Name is required</span>
                       <span class="error text-small block " *ngIf="mName.dirty && (mName.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" [ngClass]="{'has-error':mName.dirty&&mName.invalid, 'has-success':mName.valid}">
+                <div class="col-md-12 col-lg-12 col-sm-12">
+                  <div class="form-group"
+                       [ngClass]="{'has-error':mName.dirty&&mName.invalid, 'has-success':mName.valid}">
                     <label class="col-md-2 col-lg-2 col-sm-2 control-label">
                       Dq Type<span class="symbol required"></span>:
                     </label>
                     <div class="col-md-10 col-lg-10 col-sm-10 ">
-                      <select [(ngModel)]="newMeasure.dqType" name="dqTypeOptions[{{i}}]"  class="form-control input-sm" placeholder="Visual Type" required>
-                       <option *ngFor="let t of dqTypeOptions" value="{{t}}">{{t}}</option>
-                      </select>  
-                      <span class="error text-small block " *ngIf="mName.dirty && (mName.errors?.required)">Metric Name is required</span>                     
+                      <select [(ngModel)]="newMeasure.dqType" name="dqTypeOptions[{{i}}]" class="form-control input-sm"
+                              placeholder="Visual Type" required>
+                        <option *ngFor="let t of dqTypeOptions" value="{{t}}">{{t}}</option>
+                      </select>
+                      <span class="error text-small block " *ngIf="mName.dirty && (mName.errors?.required)">Metric Name is required</span>
                     </div>
                   </div>
                 </div>
@@ -86,7 +94,8 @@ under the License.
                       Measure Description:
                     </label>
                     <div class="col-md-10 col-lg-10 col-sm-10 ">
-                      <input type="text" class="form-control" [(ngModel)]="newMeasure.description" placeholder="Please input detailed description of your measure" name="desc">
+                      <input type="text" class="form-control" [(ngModel)]="newMeasure.description"
+                             placeholder="Please input detailed description of your measure" name="desc">
                     </div>
                   </div>
                 </div>
@@ -96,12 +105,13 @@ under the License.
                       Measure Type:
                     </label>
                     <div class="col-md-10 col-lg-10 col-sm-10 ">
-                      <select id="typeSelector" class="form-control" [(ngModel)]="newMeasure.measureType" disabled required name="type">
+                      <select id="typeSelector" class="form-control" [(ngModel)]="newMeasure.measureType" disabled
+                              required name="type">
                         <option>{{newMeasure.measureType}}</option>
                       </select>
                     </div>
                   </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">
@@ -115,7 +125,9 @@ under the License.
               </div>
               <div style="color:#b2c831">
                 <p>
-                  <i class="fa fa-info-circle"></i> After submitted, please go to "<a class="bark-link" routerLink="/measures">Measures</a>" to check the measure status
+                  <i class="fa fa-info-circle"></i> After submitted, please go to "<a class="bark-link"
+                                                                                      routerLink="/measures">Measures</a>"
+                  to check the measure status
                 </p>
               </div>
             </fieldset>
@@ -128,7 +140,9 @@ under the License.
           </div>
         </div>
       </div>
-      <div class="modal fade" id="confirm" role="dialog" #modal tabindex="-1" [ngClass]="{'in': visibleAnimate}" [ngStyle]="{'display': visible ? 'block' : 'none', 'opacity': visibleAnimate ? 1 : 0}" (click)="onContainerClicked($event)">
+      <div class="modal fade" id="confirm" role="dialog" #modal tabindex="-1" [ngClass]="{'in': visibleAnimate}"
+           [ngStyle]="{'display': visible ? 'block' : 'none', 'opacity': visibleAnimate ? 1 : 0}"
+           (click)="onContainerClicked($event)">
         <div class="modal-dialog modal-xg modal-lg">
           <div class="modal-content">
             <div class="modal-header">
@@ -182,7 +196,7 @@ under the License.
                         <div class="col-md-8 col-lg-8 col-sm-8 ">
                           {{newMeasure.measureType}}
                         </div>
-                      </div> 
+                      </div>
                       <div class="row">
                         <label class="col-md-4 col-lg-4 col-sm-4">
                           Owner:
@@ -193,7 +207,7 @@ under the License.
                       </div>
                     </div>
                   </div>
-                </div>                
+                </div>
               </div>
             </div>
             <div class="modal-footer">

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/ui/angular/src/app/measure/create-measure/pub/pub.component.spec.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/measure/create-measure/pub/pub.component.spec.ts b/ui/angular/src/app/measure/create-measure/pub/pub.component.spec.ts
index 0b74802..aa54581 100644
--- a/ui/angular/src/app/measure/create-measure/pub/pub.component.spec.ts
+++ b/ui/angular/src/app/measure/create-measure/pub/pub.component.spec.ts
@@ -16,9 +16,9 @@ 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 {async, ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { PubComponent } from './pub.component';
+import {PubComponent} from './pub.component';
 
 describe('PrComponent', () => {
   let component: PubComponent;
@@ -26,9 +26,9 @@ describe('PrComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ PubComponent ]
+      declarations: [PubComponent]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/ui/angular/src/app/measure/create-measure/pub/pub.component.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/measure/create-measure/pub/pub.component.ts b/ui/angular/src/app/measure/create-measure/pub/pub.component.ts
index e103817..fd01bbd 100644
--- a/ui/angular/src/app/measure/create-measure/pub/pub.component.ts
+++ b/ui/angular/src/app/measure/create-measure/pub/pub.component.ts
@@ -16,20 +16,20 @@ 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 {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 { ConfigurationComponent } from "../configuration/configuration.component";
+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 {ConfigurationComponent} from "../configuration/configuration.component";
 
 interface pubMeasure {
   name: string;
@@ -39,12 +39,13 @@ interface pubMeasure {
   dqType: string;
   owner: string
 }
+
 export function createPubMeasure(name: string,
-  metricName: string,
-  description: string,
-  measureType: string,
-  dqType: string,
-  owner: string) {
+                                 metricName: string,
+                                 description: string,
+                                 measureType: string,
+                                 dqType: string,
+                                 owner: string) {
   return {
     name,
     metricName,
@@ -54,15 +55,16 @@ export function createPubMeasure(name: string,
     owner
   }
 }
+
 @Component({
   selector: "app-pub",
   templateUrl: "./pub.component.html",
   providers: [ServiceService],
   styleUrls: ["./pub.component.css"]
 })
-export class PubComponent implements AfterViewChecked, OnInit {    
-  newMeasure = createPubMeasure("", "", "","external","ACCURACY","test"); 
-  dqTypeOptions =["accuracy"];
+export class PubComponent implements AfterViewChecked, OnInit {
+  newMeasure = createPubMeasure("", "", "", "external", "ACCURACY", "test");
+  dqTypeOptions = ["accuracy"];
   createResult: any;
   private toasterService: ToasterService;
   public visible = false;
@@ -91,9 +93,9 @@ export class PubComponent implements AfterViewChecked, OnInit {
     });
     $("fieldset").height(
       $(stepSelection).height() -
-        $(stepSelection + ">.stepDesc").height() -
-        $(".btn-container").height() -
-        130
+      $(stepSelection + ">.stepDesc").height() -
+      $(".btn-container").height() -
+      130
     );
     $(".y-scrollable").css({
       height: $("fieldset").height()
@@ -101,7 +103,7 @@ export class PubComponent implements AfterViewChecked, OnInit {
   }
 
 
-  formValidation = function(step) {
+  formValidation = function (step) {
     if (step == undefined) {
       step = this.currentStep;
     }
@@ -138,16 +140,15 @@ export class PubComponent implements AfterViewChecked, OnInit {
     setTimeout(() => (this.visibleAnimate = true), 100);
   }
 
-  
 
-  save() {     
-    var measure2Save ={
-      name:this.newMeasure.name,
+  save() {
+    var measure2Save = {
+      name: this.newMeasure.name,
       "metric.name": this.newMeasure.metricName,
-      "measure.type":this.newMeasure.measureType,
-      description:this.newMeasure.description,
-      "dq.type":this.newMeasure.dqType.toUpperCase(),
-      owner:this.newMeasure.owner
+      "measure.type": this.newMeasure.measureType,
+      description: this.newMeasure.description,
+      "dq.type": this.newMeasure.dqType.toUpperCase(),
+      owner: this.newMeasure.owner
     }
     console.log(measure2Save);
     var addModels = this.serviceService.config.uri.addModels;
@@ -160,7 +161,7 @@ export class PubComponent implements AfterViewChecked, OnInit {
       },
       err => {
         let response = JSON.parse(err.error);
-        if(response.code === '40901'){
+        if (response.code === '40901') {
           this.toasterService.pop("error", "Error!", "Measure name already exists!");
         } else {
           this.toasterService.pop("error", "Error!", "Error when creating measure");
@@ -178,11 +179,11 @@ export class PubComponent implements AfterViewChecked, OnInit {
       mouse: {
         click: (tree, node, $event) => {
           if (node.hasChildren) {
-            
+
             TREE_ACTIONS.TOGGLE_EXPANDED(tree, node, $event);
           } else if (node.data.cols) {
-           
-            
+
+
           }
         }
       }
@@ -209,10 +210,11 @@ export class PubComponent implements AfterViewChecked, OnInit {
     var allDataassets = this.serviceService.config.uri.dataassetlist;
     this.http.get(allDataassets).subscribe(data => {
       this.nodeList = new Array();
-      
+
     });
-    
+
   }
+
   ngAfterViewChecked() {
     this.resizeWindow();
   }

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/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 fc7d1df..dcf78fa 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
@@ -171,7 +171,9 @@ under the License.
           </div>
           <div class="" style="text-align:center;display:block;float:left;margin:0 10px 0 10px">
             <div class="formula-text-up" style="border-bottom:1px solid;">
-              Total Count of Matched records between <span class="badge">{{sourceLength}}</span> <span style="color:green;">{{targetTable}}</span> and <span class="badge">{{sourceLength}}</span> <span style="color:green;">{{sourceTable}}</span> fields
+              Total Count of Matched records between <span class="badge">{{sourceLength}}</span> <span
+              style="color:green;">{{targetTable}}</span> and <span class="badge">{{sourceLength}}</span> <span
+              style="color:green;">{{sourceTable}}</span> fields
             </div>
             <div class="">
               Total Count of records in <span style="color:green;font-weight:bold;">{{targetDB}}&nbsp;&nbsp;{{targetTable}}</span>
@@ -184,7 +186,7 @@ under the License.
       </div>
     </div>
     <div *ngIf="ruleData.type=='profiling'" class="">
-      <div *ngFor="let index of ruleDes;" >
+      <div *ngFor="let index of ruleDes;">
         {{index.name}}&nbsp;:&nbsp;{{index.infos}}
       </div>
     </div>

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/ui/angular/src/app/measure/measure-detail/measure-detail.component.spec.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/measure/measure-detail/measure-detail.component.spec.ts b/ui/angular/src/app/measure/measure-detail/measure-detail.component.spec.ts
index 4a5d8a2..8a8ac40 100644
--- a/ui/angular/src/app/measure/measure-detail/measure-detail.component.spec.ts
+++ b/ui/angular/src/app/measure/measure-detail/measure-detail.component.spec.ts
@@ -16,9 +16,9 @@ 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 {async, ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { MeasureDetailComponent } from './measure-detail.component';
+import {MeasureDetailComponent} from './measure-detail.component';
 
 describe('MeasureDetailComponent', () => {
   let component: MeasureDetailComponent;
@@ -26,9 +26,9 @@ describe('MeasureDetailComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ MeasureDetailComponent ]
+      declarations: [MeasureDetailComponent]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/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 409c79c..b19636b 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,11 +16,11 @@ 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 {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 {HttpClient} from "@angular/common/http";
+import {ServiceService} from "../../service/service.service";
 
 @Component({
   selector: "app-measure-detail",
@@ -30,12 +30,15 @@ import { ServiceService } from "../../service/service.service";
 })
 export class MeasureDetailComponent implements OnInit {
   currentId: string;
+
   constructor(
     private route: ActivatedRoute,
     private router: Router,
     private http: HttpClient,
     public serviceService: ServiceService
-  ) {}
+  ) {
+  }
+
   ruleData: any;
   ruleDes = [];
   sourceLength: number;
@@ -86,10 +89,10 @@ export class MeasureDetailComponent implements OnInit {
         if (this.ruleData["measure.type"] === "external") {
           this.ruleData.type = this.ruleData["measure.type"].toLowerCase();
           this.ruleData.dqType = this.ruleData["dq.type"].toLowerCase();
-        } else{
+        } else {
           this.ruleData.type = this.ruleData["dq.type"].toLowerCase();
           this.currentrule = this.ruleData["evaluate.rule"].rules;
-          if(this.ruleData["rule.description"]){
+          if (this.ruleData["rule.description"]) {
             this.ruleDes = this.ruleData["rule.description"].details
           }
           this.fetchData("source", 0);
@@ -107,4 +110,4 @@ export class MeasureDetailComponent implements OnInit {
       }
     );
   }
-}
\ No newline at end of file
+}

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/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 0483912..3d1d82f 100644
--- a/ui/angular/src/app/measure/measure.component.css
+++ b/ui/angular/src/app/measure/measure.component.css
@@ -17,11 +17,11 @@ specific language governing permissions and limitations
 under the License.
 */
 
-.table-striped>tbody>tr:nth-of-type(even) {
+.table-striped > tbody > tr:nth-of-type(even) {
   background-color: #1f1f1f;
 }
 
-.table-striped>tbody>tr:nth-of-type(odd) {
+.table-striped > tbody > tr:nth-of-type(odd) {
   background-color: #080808;
 }
 
@@ -48,11 +48,11 @@ under the License.
   background-color: #7D95CC;
 }
 
-.pagination>li>a {
+.pagination > li > a {
   cursor: pointer;
 }
 
-.swMain>ul {
+.swMain > ul {
   display: table;
   list-style: none;
   margin: 0 30px 20px 30px;
@@ -69,13 +69,13 @@ under the License.
   /*height:800px;*/
 }
 
-.swMain>ul li {
+.swMain > ul li {
   display: table-cell;
   text-align: center;
   width: 1%
 }
 
-.swMain>ul li>a:before {
+.swMain > ul li > a:before {
   border-top: 4px solid #c8c7cc;
   content: "";
   display: block;
@@ -88,18 +88,18 @@ under the License.
   z-index: 1
 }
 
-.swMain>ul li:first-child>a:before {
+.swMain > ul li:first-child > a:before {
   left: 50%;
   max-width: 51%
 }
 
-.swMain>ul li:last-child>a:before {
+.swMain > ul li:last-child > a:before {
   max-width: 50%;
   width: 50%
 }
 
-.swMain li>a.done:before,
-.swMain>ul li>a.selected:before {
+.swMain li > a.done:before,
+.swMain > ul li > a.selected:before {
   border-color: #007AFF
 }
 
@@ -109,7 +109,7 @@ under the License.
   width: 100% !important;
 }
 
-.swMain>ul .stepNumber {
+.swMain > ul .stepNumber {
   background-color: #fff;
   border: 5px solid #c8c7cc;
   border-radius: 100%;
@@ -124,18 +124,18 @@ under the License.
   z-index: 2
 }
 
-.swMain>ul li>a.selected .stepNumber {
+.swMain > ul li > a.selected .stepNumber {
   border-color: #007AFF
 }
 
-.swMain ul li>a.done .stepNumber {
+.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 > a.done .stepNumber:before {
   content: "\f00c";
   display: inline;
   float: right;
@@ -147,17 +147,17 @@ under the License.
   text-indent: 0
 }
 
-.swMain ul li>a.done.wait .stepNumber {
-  background-color: #F6F6F6!important;
-  color: #CCC!important;
-  text-indent: 0!important
+.swMain ul li > a.done.wait .stepNumber {
+  background-color: #F6F6F6 !important;
+  color: #CCC !important;
+  text-indent: 0 !important
 }
 
-.swMain ul li>a.done.wait .stepNumber:before {
-  content: ""!important
+.swMain ul li > a.done.wait .stepNumber:before {
+  content: "" !important
 }
 
-.swMain>ul li .stepDesc {
+.swMain > ul li .stepDesc {
   color: #8e8e93;
   display: block;
   font-size: 14px;
@@ -169,13 +169,13 @@ under the License.
   z-index: 104
 }
 
-.swMain li>a.done .stepDesc,
-.swMain>ul li>a.selected .stepDesc {
+.swMain li > a.done .stepDesc,
+.swMain > ul li > a.selected .stepDesc {
   /*color: #2B3D53*/
   color: #007AFF
 }
 
-.swMain>ul li>a.disabled {
+.swMain > ul li > a.disabled {
   cursor: default
 }
 
@@ -184,7 +184,7 @@ under the License.
 }
 
 .swMain .stepContainer {
-  height: auto!important
+  height: auto !important
 }
 
 .swMain .y-scrollable {
@@ -210,12 +210,12 @@ fieldset legend {
   top: -12px;
   color: #fff;
   font-weight: 400;
-  width: auto!important;
-  border: none!important;
+  width: auto !important;
+  border: none !important;
 }
 
 .btn-o {
-  background: 0 0!important;
+  background: 0 0 !important;
 }
 
 .btn-wide {
@@ -236,11 +236,11 @@ fieldset legend {
   color: #fff;
 }
 
-.formStep>.stepDesc {
+.formStep > .stepDesc {
   color: #b2c831;
 }
 
-.formStep>.container-fluid {
+.formStep > .container-fluid {
   /*position:relative;*/
 }
 
@@ -254,18 +254,17 @@ fieldset legend {
   border-color: #B9D3DF;
 }
 
-.panel-disabled>.panel-heading {
+.panel-disabled > .panel-heading {
   background-color: #B9D3DF;
   border-color: #B9D3DF;
 }
 
-.panel-body>ul {
+.panel-body > ul {
   border-radius: 0;
   background: none;
   margin: 0;
 }
 
-
 .panel-green {
   border-color: #5cb85c;
 }
@@ -326,11 +325,11 @@ fieldset legend {
   padding: 10px;
 }
 
-.ruletypes>.panel {
+.ruletypes > .panel {
   cursor: pointer
 }
 
-.ruletypes>.panel:hover {
+.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;
@@ -344,7 +343,6 @@ fieldset legend {
   padding-top: 10px;
 }
 
-
 ::-webkit-scrollbar {
   width: 6px;
 }
@@ -384,14 +382,16 @@ a {
   color: white;
 }
 
-.swMain li>div.done .stepDesc,
-.swMain>ul li>div.selected1child .stepDesc {
+.swMain li > div.done .stepDesc,
+.swMain > ul li > div.selected1child .stepDesc {
   color: #007AFF
 }
-.swMain li>div.done:before,
-.swMain>ul li>div.selected1child:before {
+
+.swMain li > div.done:before,
+.swMain > ul li > div.selected1child:before {
   border-color: #007AFF
 }
-.swMain>ul li>div.selected1child .stepNumber {
+
+.swMain > ul li > div.selected1child .stepNumber {
   border-color: #007AFF
 }

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/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 09991e7..5541b87 100644
--- a/ui/angular/src/app/measure/measure.component.html
+++ b/ui/angular/src/app/measure/measure.component.html
@@ -19,53 +19,55 @@ under the License.
 <div>
   <p>
     <a routerLink="/createmeasure" style="background-color: #337ab7;" class="btn btn-primary  btn-wide">
-      <i class="fa fa-plus"></i> 
+      <i class="fa fa-plus"></i>
       Create Measure
     </a>
   </p>
   <div id="modelContainer">
     <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">Group</th> -->
-          <th st-ratio="5">Action</th>
-        </tr>
+      <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">Group</th> -->
+        <th st-ratio="5">Action</th>
+      </tr>
       </thead>
       <tbody>
-        <tr *ngIf="!results">
-          <td colspan="7" style="text-align:center;display:none">No content!</td>
-          <!-- <td class="icon" style="border-top-style:none">
-            <span class="fa fa-spinner fa-spin fa-3x fa-fw"></span>
-          </td> -->
-        </tr>
-        <tr *ngFor="let row of mf.data">
-          <td><a routerLink="/measure/{{row.id}}">{{row.name}}</a></td>
-          <td>{{row["dq.type"].toLowerCase()}}</td>
-          <td>{{row.description}}</td>
-          <td>
-            &nbsp;
-            <a (click)="remove(row)" title="delete" style="text-decoration:none">
-              <i class="fa fa-trash-o po"></i>
-            </a> &nbsp;
-            <a routerLink="/measure/{{row.id}}" title="subscribe">
-              <i class="fa fa-eye"></i>
-            </a>
-          </td>
-        </tr>
+      <tr *ngIf="!results">
+        <td colspan="7" style="text-align:center;display:none">No content!</td>
+        <!-- <td class="icon" style="border-top-style:none">
+          <span class="fa fa-spinner fa-spin fa-3x fa-fw"></span>
+        </td> -->
+      </tr>
+      <tr *ngFor="let row of mf.data">
+        <td><a routerLink="/measure/{{row.id}}">{{row.name}}</a></td>
+        <td>{{row["dq.type"].toLowerCase()}}</td>
+        <td>{{row.description}}</td>
+        <td>
+          &nbsp;
+          <a (click)="remove(row)" title="delete" style="text-decoration:none">
+            <i class="fa fa-trash-o po"></i>
+          </a> &nbsp;
+          <a routerLink="/measure/{{row.id}}" title="subscribe">
+            <i class="fa fa-eye"></i>
+          </a>
+        </td>
+      </tr>
       </tbody>
       <tfoot>
-        <tr>
-          <td colspan="8" class="text-right">
-            <mfBootstrapPaginator></mfBootstrapPaginator>
-          </td>
-        </tr>
+      <tr>
+        <td colspan="8" class="text-right">
+          <mfBootstrapPaginator></mfBootstrapPaginator>
+        </td>
+      </tr>
       </tfoot>
     </table>
   </div>
-  <div class="modal fade" id="deleteConfirmation" role="dialog" #modal tabindex="-1" [ngClass]="{'in': visibleAnimate}" *ngIf="deletedRow" [ngStyle]="{'display': visible ? 'block' : 'none', 'opacity': visibleAnimate ? 1 : 0}" (click)="onContainerClicked($event)">
+  <div class="modal fade" id="deleteConfirmation" role="dialog" #modal tabindex="-1" [ngClass]="{'in': visibleAnimate}"
+       *ngIf="deletedRow" [ngStyle]="{'display': visible ? 'block' : 'none', 'opacity': visibleAnimate ? 1 : 0}"
+       (click)="onContainerClicked($event)">
     <div class="modal-dialog modal-xg modal-lg">
       <div class="modal-content">
         <div class="modal-header">
@@ -128,7 +130,8 @@ under the License.
           </div>
         </div>
         <div class="modal-footer">
-          <p class="delete-alert">If you delete this measure, your running jobs on this measure will also be deleted, please be careful!</p>
+          <p class="delete-alert">If you delete this measure, your running jobs on this measure will also be deleted,
+            please be careful!</p>
           <button type="button" id="save" class="btn btn-default" (click)="confirmDelete()">Yes</button>
           <button type="button" class="btn btn-primary" (click)="hide()">No</button>
         </div>

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/ui/angular/src/app/measure/measure.component.spec.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/measure/measure.component.spec.ts b/ui/angular/src/app/measure/measure.component.spec.ts
index c615b4f..f6cf3fa 100644
--- a/ui/angular/src/app/measure/measure.component.spec.ts
+++ b/ui/angular/src/app/measure/measure.component.spec.ts
@@ -17,9 +17,9 @@ specific language governing permissions and limitations
 under the License.
 */
 
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { MeasureComponent } from './measure.component';
+import {MeasureComponent} from './measure.component';
 
 describe('MeasureComponent', () => {
   let component: MeasureComponent;
@@ -27,9 +27,9 @@ describe('MeasureComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ MeasureComponent ]
+      declarations: [MeasureComponent]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/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 19ea70f..23f7a15 100644
--- a/ui/angular/src/app/measure/measure.component.ts
+++ b/ui/angular/src/app/measure/measure.component.ts
@@ -16,15 +16,15 @@ 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 {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({
@@ -71,7 +71,7 @@ export class MeasureComponent implements OnInit {
     this.deleteIndex = this.results.indexOf(row);
     this.deletedRow = row;
     $("#save").removeAttr("disabled");
-    if(this.deletedRow["measure.type"]!=="external"){
+    if (this.deletedRow["measure.type"] !== "external") {
       var sourcedata = this.deletedRow["data.sources"][0].connectors[0].config;
       this.sourceTable = sourcedata["table.name"];
     }
@@ -90,7 +90,7 @@ export class MeasureComponent implements OnInit {
     this.http.delete(deleteUrl).subscribe(
       data => {
         var self = this;
-        setTimeout(function() {
+        setTimeout(function () {
           self.results.splice(self.deleteIndex, 1);
           self.hide();
         }, 200);
@@ -113,7 +113,7 @@ export class MeasureComponent implements OnInit {
       //     data[measure].type = '';
       //   }
       // }
-      let trans = Object.keys(data).map(function(index) {
+      let trans = Object.keys(data).map(function (index) {
         let measure = data[index];
         if (measure["measure.type"] === "external") {
           measure["dq.type"] = "external";
@@ -125,7 +125,7 @@ export class MeasureComponent implements OnInit {
         return measure;
       });
       // this.results = Object.assign([],trans).reverse();
-      this.results = Object.assign([],trans).sort(function(a,b){
+      this.results = Object.assign([], trans).sort(function (a, b) {
         return b.id - a.id;
       });
     });

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/ui/angular/src/app/metric/detail-metric/detail-metric.component.css
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/metric/detail-metric/detail-metric.component.css b/ui/angular/src/app/metric/detail-metric/detail-metric.component.css
index 924c34a..ee1b824 100644
--- a/ui/angular/src/app/metric/detail-metric/detail-metric.component.css
+++ b/ui/angular/src/app/metric/detail-metric/detail-metric.component.css
@@ -45,11 +45,11 @@ under the License.
   vertical-align: top;
 }
 
-.main-table>tbody>tr:nth-of-type(even) {
+.main-table > tbody > tr:nth-of-type(even) {
   background-color: #1f1f1f;
 }
 
-.main-table>tbody>tr:nth-of-type(odd) {
+.main-table > tbody > tr:nth-of-type(odd) {
   background-color: #080808;
 }
 

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/ui/angular/src/app/metric/detail-metric/detail-metric.component.html
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/metric/detail-metric/detail-metric.component.html b/ui/angular/src/app/metric/detail-metric/detail-metric.component.html
index f99e5fe..66c9d8d 100644
--- a/ui/angular/src/app/metric/detail-metric/detail-metric.component.html
+++ b/ui/angular/src/app/metric/detail-metric/detail-metric.component.html
@@ -20,7 +20,8 @@ under the License.
   <b>No content</b>
 </div>
 
-<div *ngIf="!noresults" id="bigChartContainer" class="big-chart-container" (window:resize)="onResize($event)" style="display:none;">
+<div *ngIf="!noresults" id="bigChartContainer" class="big-chart-container" (window:resize)="onResize($event)"
+     style="display:none;">
   <div id="bigChartShow" class="big-chart-content">
     <div class="container-fluid">
       <div class="row">
@@ -37,31 +38,34 @@ under the License.
   <div class="table-wrap">
     <table class="main-table y-scrollable" [mfData]="prodata" #mf="mfDataTable" [mfRowsOnPage]="18">
       <thead>
-        <tr style="background-color:#7D95CC">
-          <th class="fixed-side" scope="col" style="background-color:#7D95CC">Time</th>
-          <th class="cover" scope="col">Time</th>
-          <th scope="col" *ngFor="let name of this.columnname" style="text-align: center;">{{name}}</th>
-        </tr>
+      <tr style="background-color:#7D95CC">
+        <th class="fixed-side" scope="col" style="background-color:#7D95CC">Time</th>
+        <th class="cover" scope="col">Time</th>
+        <th scope="col" *ngFor="let name of this.columnname" style="text-align: center;">{{name}}</th>
+      </tr>
       </thead>
       <tbody>
-        <tr *ngFor="let item of mf.data">
-          <th class="fixed-side">{{(item.tmst | date: 'yyyy/MM/dd HH:mm:ss') || 'N/A' }}</th>
-          <th class="cover">{{(item.tmst | date: 'yyyy/MM/dd HH:mm:ss') || 'N/A' }}</th>
-          <td *ngFor="let key of objectKeys(item.value)">{{item.value[key]}}</td>
-        </tr>
+      <tr *ngFor="let item of mf.data">
+        <th class="fixed-side">{{(item.tmst | date: 'yyyy/MM/dd HH:mm:ss') || 'N/A' }}</th>
+        <th class="cover">{{(item.tmst | date: 'yyyy/MM/dd HH:mm:ss') || 'N/A' }}</th>
+        <td *ngFor="let key of objectKeys(item.value)">{{item.value[key]}}</td>
+      </tr>
       </tbody>
       <tfoot>
-        <tr>
-          <td class="text-center" colspan="8" style="background-color:#1f1f1f;position: fixed;margin-left: 30%;" id="pagination">
-            <mfBootstrapPaginator></mfBootstrapPaginator>
-          </td>
-        </tr>
+      <tr>
+        <td class="text-center" colspan="8" style="background-color:#1f1f1f;position: fixed;margin-left: 30%;"
+            id="pagination">
+          <mfBootstrapPaginator></mfBootstrapPaginator>
+        </td>
+      </tr>
       </tfoot>
     </table>
   </div>
 </div>
 
-<div class="modal fade" id="downloadSampleModal" role="dialog" tabindex="-1" [ngClass]="{'in': visibleAnimate}" *ngIf="missRecordList" [ngStyle]="{'display': visible ? 'block' : 'none', 'opacity': visibleAnimate ? 1 : 0}" (click)="onContainerClicked($event)">
+<div class="modal fade" id="downloadSampleModal" role="dialog" tabindex="-1" [ngClass]="{'in': visibleAnimate}"
+     *ngIf="missRecordList" [ngStyle]="{'display': visible ? 'block' : 'none', 'opacity': visibleAnimate ? 1 : 0}"
+     (click)="onContainerClicked($event)">
   <div class="modal-dialog modal-md modal-md">
     <div class="modal-content">
       <div class="modal-header">
@@ -71,24 +75,25 @@ under the License.
       </div>
       <div class="modal-body">
         <div class="container-fluid" id="dowloadContent" style="overflow:auto;">
-          <tr  >
+          <tr>
             <td colspan="7" style="padding:20px 30px 10px 30px;">
               <table class="table table-striped" [mfData]="missRecordList" #mf2="mfDataTable" [mfRowsOnPage]="10">
 
                 <tbody>
-                  <tr *ngIf="!missRecordList">
-                    <td colspan="7" style="text-align:center">No content.</td>
-                  </tr>
-                  <tr *ngFor="let item of mf2.data">
-                    <td style="background-color:black;"><a (click)="downloadSample(item)" >{{item.tmst}}  {{item.tmst | date: 'yyyy/MM/dd HH:mm:ss'}}</a>  </td>
-                  </tr>
+                <tr *ngIf="!missRecordList">
+                  <td colspan="7" style="text-align:center">No content.</td>
+                </tr>
+                <tr *ngFor="let item of mf2.data">
+                  <td style="background-color:black;"><a (click)="downloadSample(item)">{{item.tmst}} {{item.tmst |
+                    date: 'yyyy/MM/dd HH:mm:ss'}}</a></td>
+                </tr>
                 </tbody>
                 <tfoot>
-                  <tr>
-                    <td class="text-center" colspan="8" style="background-color:#1f1f1f;" id="paginationdownlad">
-                      <mfBootstrapPaginator></mfBootstrapPaginator>
-                    </td>
-                  </tr>
+                <tr>
+                  <td class="text-center" colspan="8" style="background-color:#1f1f1f;" id="paginationdownlad">
+                    <mfBootstrapPaginator></mfBootstrapPaginator>
+                  </td>
+                </tr>
                 </tfoot>
               </table>
             </td>

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/ui/angular/src/app/metric/detail-metric/detail-metric.component.spec.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/metric/detail-metric/detail-metric.component.spec.ts b/ui/angular/src/app/metric/detail-metric/detail-metric.component.spec.ts
index 2eb668d..42a922e 100644
--- a/ui/angular/src/app/metric/detail-metric/detail-metric.component.spec.ts
+++ b/ui/angular/src/app/metric/detail-metric/detail-metric.component.spec.ts
@@ -16,9 +16,9 @@ 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 {async, ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { DetailMetricComponent } from './detail-metric.component';
+import {DetailMetricComponent} from './detail-metric.component';
 
 describe('DetailMetricComponent', () => {
   let component: DetailMetricComponent;
@@ -26,9 +26,9 @@ describe('DetailMetricComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ DetailMetricComponent ]
+      declarations: [DetailMetricComponent]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/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 5279f93..9294641 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,14 +16,23 @@ 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, AfterViewChecked, NgZone } from "@angular/core";
-import { ChartService } from "../../service/chart.service";
-import { ServiceService } from "../../service/service.service";
-import { Router, ActivatedRoute, ParamMap } from "@angular/router";
+import {
+  Component,
+  OnInit,
+  OnChanges,
+  SimpleChanges,
+  OnDestroy,
+  AfterViewInit,
+  AfterViewChecked,
+  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 {HttpClient} from "@angular/common/http";
 import * as $ from "jquery";
-import { DataTableModule } from "angular2-datatable";
+import {DataTableModule} from "angular2-datatable";
 
 @Component({
   selector: "app-detail-metric",
@@ -33,6 +42,7 @@ import { DataTableModule } from "angular2-datatable";
 })
 export class DetailMetricComponent implements AfterViewChecked, OnInit {
   objectKeys = Object.keys;
+
   constructor(
     public chartService: ChartService,
     private route: ActivatedRoute,
@@ -40,7 +50,9 @@ export class DetailMetricComponent implements AfterViewChecked, OnInit {
     private http: HttpClient,
     private zone: NgZone,
     public serviceService: ServiceService
-  ) {}
+  ) {
+  }
+
   selectedMeasure: string;
   chartOption: {};
   data: any;
@@ -73,10 +85,10 @@ export class DetailMetricComponent implements AfterViewChecked, OnInit {
     this.http.get(metricDetailUrl).subscribe(
       data => {
         this.data = data;
-        if(this.data.length == 0){
+        if (this.data.length == 0) {
           this.noresults = true;
         }
-        if(this.data.length != 0 && this.data[0].value.matched != undefined){
+        if (this.data.length != 0 && this.data[0].value.matched != undefined) {
           var metric = {
             name: "",
             timestamp: 0,
@@ -87,27 +99,27 @@ export class DetailMetricComponent implements AfterViewChecked, OnInit {
           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));
+          metric.details = JSON.parse(JSON.stringify(this.data));
           this.chartOption = this.chartService.getOptionBig(metric);
-          this.missRecordList = metric.details.filter(val => val.value.missed!== 0);
+          this.missRecordList = metric.details.filter(val => val.value.missed !== 0);
           $("#bigChartDiv").height(window.innerHeight - 120 + "px");
           $("#bigChartDiv").width(window.innerWidth - 400 + "px");
           $("#bigChartContainer").show();
-        }else if(this.data.length != 0){
+        } else if (this.data.length != 0) {
           this.prodata = this.data;
           this.profiling = true;
-          for(let item of this.prodata){
-            for(let key in item.value){
-              if(typeof(item.value[key]) != "object"){
+          for (let item of this.prodata) {
+            for (let key in item.value) {
+              if (typeof(item.value[key]) != "object") {
                 item.value[key].toString();
-              }else{
+              } else {
                 let keysplit = key.split('-');
-                let records ='';
+                let records = '';
                 let record;
-                for(let i in item.value[key]){
-                  let name,count;
-                  for(let category in item.value[key][i]){
-                    if(category != "count"){
+                for (let i in item.value[key]) {
+                  let name, count;
+                  for (let category in item.value[key][i]) {
+                    if (category != "count") {
                       name = item.value[key][i][category];
                       count = item.value[key][i].count;
                     }
@@ -138,7 +150,7 @@ export class DetailMetricComponent implements AfterViewChecked, OnInit {
               }
             }
           }
-          for(let key in this.data[0].value){
+          for (let key in this.data[0].value) {
             this.columnname.push(key);
           }
         }
@@ -158,7 +170,8 @@ export class DetailMetricComponent implements AfterViewChecked, OnInit {
     $("#bigChartDiv").width($("#mainWindow").width());
   }
 
-  getData(metricName) {}
+  getData(metricName) {
+  }
 
   ngAfterViewChecked() {
     $(".main-table").addClass('clone');
@@ -173,20 +186,21 @@ export class DetailMetricComponent implements AfterViewChecked, OnInit {
     this.visibleAnimate = false;
     setTimeout(() => (this.visible = false), 300);
   }
+
   public onContainerClicked(event: MouseEvent): void {
     if ((<HTMLElement>event.target).classList.contains("close")) {
       this.hide();
     }
   }
-  
-  downloadSample(row){
+
+  downloadSample(row) {
     let urlDownload = this.serviceService.config.uri.missRecordDownload + "?jobName=" + row.name + "&ts=" + row.tmst;
     this.http
       .get(urlDownload,
-      { responseType: 'blob', observe: 'response' })
+        {responseType: 'blob', observe: 'response'})
       .map(res => {
         return {
-          filename: row.name+"_"+row.tmst+'_missRecordSample.json',
+          filename: row.name + "_" + row.tmst + '_missRecordSample.json',
           data: res.body
         };
       })
@@ -206,5 +220,5 @@ export class DetailMetricComponent implements AfterViewChecked, OnInit {
       }, () => {
         console.log('Completed file download.')
       });
-    }
   }
+}

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/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 01e0080..fd7927d 100644
--- a/ui/angular/src/app/metric/metric.component.html
+++ b/ui/angular/src/app/metric/metric.component.html
@@ -22,7 +22,8 @@ under the License.
       <div class="form-group">
         <span style="padding-left:30px;">
 	      <label>Measure: </label>
-	        <select class="form-control"  (change)="changeMeasure()" [(ngModel)]="selectedMeasureIndex" id="measureSelector">
+	        <select class="form-control" (change)="changeMeasure()" [(ngModel)]="selectedMeasureIndex"
+                  id="measureSelector">
               <option value="0"> -- All -- </option>
               <option *ngFor="let key of measureOptions;let n = index" value="{{n+1}}">{{key}}</option>
 	        </select>
@@ -31,18 +32,20 @@ under the License.
     </div>
     <!-- <div class="col-sm-5 chartItem"  *ngFor="let outerItems of finalData;let parent=index" style="margin-bottom:30px;margin-right:15px;"> -->
     <div *ngFor="let outerItems of finalData;let parent=index">
-      <!-- <div class="row">      
+      <!-- <div class="row">
         <div style="text-align: center;" >
           <h4>{{outerItems.name}}</h4>
         </div>
       </div> -->
       <!-- <div class="row"> -->
-        <div class="col-sm-6 col-md-4 col-xs-12 col-lg-3 chartItem" *ngFor="let items of outerItems.metrics;let i=index;" style="margin-bottom:30px;">
-          <!-- <div *ngFor="let items of outerItems.metrics;let i=index;"> -->
-          <div class="row-fluid" style="cursor: pointer;">
-            <div id="thumbnail{{parent}}-{{i}}" class="thumb-chart" style="border: 2px solid;" echarts [options]="getOption(parent,i)" (click)="goTo(parent,i)"></div>
-          </div>
+      <div class="col-sm-6 col-md-4 col-xs-12 col-lg-3 chartItem" *ngFor="let items of outerItems.metrics;let i=index;"
+           style="margin-bottom:30px;">
+        <!-- <div *ngFor="let items of outerItems.metrics;let i=index;"> -->
+        <div class="row-fluid" style="cursor: pointer;">
+          <div id="thumbnail{{parent}}-{{i}}" class="thumb-chart" style="border: 2px solid;" echarts
+               [options]="getOption(parent,i)" (click)="goTo(parent,i)"></div>
         </div>
+      </div>
       <!-- </div> -->
     </div>
   </div>

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/ui/angular/src/app/metric/metric.component.spec.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/metric/metric.component.spec.ts b/ui/angular/src/app/metric/metric.component.spec.ts
index e93d618..5ac910b 100644
--- a/ui/angular/src/app/metric/metric.component.spec.ts
+++ b/ui/angular/src/app/metric/metric.component.spec.ts
@@ -16,9 +16,9 @@ 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 {async, ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { MetricComponent } from './metric.component';
+import {MetricComponent} from './metric.component';
 
 describe('MetricComponent', () => {
   let component: MetricComponent;
@@ -26,9 +26,9 @@ describe('MetricComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ MetricComponent ]
+      declarations: [MetricComponent]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/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 1fce6c5..4b52086 100644
--- a/ui/angular/src/app/metric/metric.component.ts
+++ b/ui/angular/src/app/metric/metric.component.ts
@@ -16,11 +16,11 @@ 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 { ServiceService } from "../service/service.service";
+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({
@@ -35,7 +35,9 @@ export class MetricComponent implements OnInit {
     public serviceService: ServiceService,
     private http: HttpClient,
     private router: Router
-  ) {}
+  ) {
+  }
+
   data: any;
   finalData = [];
   chartOption = new Map();
@@ -50,7 +52,7 @@ export class MetricComponent implements OnInit {
     this.renderData();
   }
 
-  checkvalue(job){
+  checkvalue(job) {
     return job.metricValues.length === 0;
   }
 
@@ -58,9 +60,9 @@ export class MetricComponent implements OnInit {
     let url_dashboard = this.serviceService.config.uri.dashboard;
     this.http.get(url_dashboard).subscribe(data => {
       this.mesWithJob = JSON.parse(JSON.stringify(data));
-      for(let i=0;i<this.mesWithJob.length;i++) {
-        if(this.mesWithJob[i].some(this.checkvalue)){
-          this.mesWithJob[i].splice(i,1);
+      for (let i = 0; i < this.mesWithJob.length; i++) {
+        if (this.mesWithJob[i].some(this.checkvalue)) {
+          this.mesWithJob[i].splice(i, 1);
         }
       }
       for (let mesName in this.mesWithJob) {
@@ -77,7 +79,7 @@ export class MetricComponent implements OnInit {
           node.type = "ACCURACY";
           for (let i = 0; i < jobs.length; i++) {
             if (jobs[i].metricValues.length != 0) {
-              var someMetrics = jobs[i].metricValues.slice(0,30);
+              var someMetrics = jobs[i].metricValues.slice(0, 30);
               jobs[i].metricValues = JSON.parse(
                 JSON.stringify(someMetrics)
               );
@@ -162,7 +164,7 @@ export class MetricComponent implements OnInit {
       }
     }
     var self = this;
-    setTimeout(function() {
+    setTimeout(function () {
       self.redraw(self.finalData);
     }, 0);
   }

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/ui/angular/src/app/mydashboard/mydashboard.component.spec.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/mydashboard/mydashboard.component.spec.ts b/ui/angular/src/app/mydashboard/mydashboard.component.spec.ts
index 7306847..abbb512 100644
--- a/ui/angular/src/app/mydashboard/mydashboard.component.spec.ts
+++ b/ui/angular/src/app/mydashboard/mydashboard.component.spec.ts
@@ -16,9 +16,9 @@ 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 {async, ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { MydashboardComponent } from './mydashboard.component';
+import {MydashboardComponent} from './mydashboard.component';
 
 describe('MydashboardComponent', () => {
   let component: MydashboardComponent;
@@ -26,9 +26,9 @@ describe('MydashboardComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ MydashboardComponent ]
+      declarations: [MydashboardComponent]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/ui/angular/src/app/mydashboard/mydashboard.component.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/mydashboard/mydashboard.component.ts b/ui/angular/src/app/mydashboard/mydashboard.component.ts
index 11573d2..848d877 100644
--- a/ui/angular/src/app/mydashboard/mydashboard.component.ts
+++ b/ui/angular/src/app/mydashboard/mydashboard.component.ts
@@ -16,8 +16,8 @@ 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 } from '@angular/router';
+import {Component, OnInit} from '@angular/core';
+import {Router} from '@angular/router';
 
 @Component({
   selector: 'app-mydashboard',
@@ -26,7 +26,8 @@ import { Router } from '@angular/router';
 })
 export class MydashboardComponent implements OnInit {
 
-  constructor(public router: Router) { }
+  constructor(public router: Router) {
+  }
 
   ngOnInit() {
   }

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/ui/angular/src/app/service/chart.service.spec.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/service/chart.service.spec.ts b/ui/angular/src/app/service/chart.service.spec.ts
index a6a06af..c72bc03 100644
--- a/ui/angular/src/app/service/chart.service.spec.ts
+++ b/ui/angular/src/app/service/chart.service.spec.ts
@@ -16,9 +16,9 @@ KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License.
 */
-import { TestBed, inject } from '@angular/core/testing';
+import {TestBed, inject} from '@angular/core/testing';
 
-import { ChartService } from './chart.service';
+import {ChartService} from './chart.service';
 
 describe('ChartService', () => {
   beforeEach(() => {

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/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 c1a41bf..5b5a12c 100644
--- a/ui/angular/src/app/service/chart.service.ts
+++ b/ui/angular/src/app/service/chart.service.ts
@@ -16,11 +16,12 @@ KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License.
 */
-import { Injectable } from "@angular/core";
+import {Injectable} from "@angular/core";
 
 @Injectable()
 export class ChartService {
-  constructor() {}
+  constructor() {
+  }
 
   formatter_value(value, index) {
     if (value < 1000) {
@@ -83,7 +84,7 @@ export class ChartService {
           ]);
       }
     }
-    data.sort(function(a, b) {
+    data.sort(function (a, b) {
       return a[0] - b[0];
     });
     return data;
@@ -106,7 +107,7 @@ export class ChartService {
       },
       tooltip: {
         trigger: "axis",
-        formatter: function(params) {
+        formatter: function (params) {
           return self.getTooltip(params);
         }
       },
@@ -208,10 +209,10 @@ export class ChartService {
       },
       tooltip: {
         trigger: "axis",
-        formatter: function(params) {
+        formatter: function (params) {
           return self.getTooltip(params);
         },
-        position: function(point, params, dom) {
+        position: function (point, params, dom) {
           return self.getTooltipPosition(point, params, dom);
         }
       },
@@ -297,7 +298,7 @@ export class ChartService {
       ],
       tooltip: {
         trigger: "axis",
-        formatter: function(params) {
+        formatter: function (params) {
           return self.getTooltip(params);
         }
       },

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/ui/angular/src/app/service/http.service.spec.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/service/http.service.spec.ts b/ui/angular/src/app/service/http.service.spec.ts
index ddbe59b..69c1860 100644
--- a/ui/angular/src/app/service/http.service.spec.ts
+++ b/ui/angular/src/app/service/http.service.spec.ts
@@ -16,9 +16,9 @@ KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License.
 */
-import { TestBed, inject } from '@angular/core/testing';
+import {TestBed, inject} from '@angular/core/testing';
 
-import { HttpService } from './http.service';
+import {HttpService} from './http.service';
 
 describe('ServiceService', () => {
   beforeEach(() => {

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/ui/angular/src/app/service/http.service.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/service/http.service.ts b/ui/angular/src/app/service/http.service.ts
index 52ce666..c21bd7d 100644
--- a/ui/angular/src/app/service/http.service.ts
+++ b/ui/angular/src/app/service/http.service.ts
@@ -16,35 +16,35 @@ KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License.
 */
-import { Injectable } from '@angular/core';
-import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse } from "@angular/common/http";
-import { Observable } from "rxjs/Observable";
+import {Injectable} from '@angular/core';
+import {HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse} from "@angular/common/http";
+import {Observable} from "rxjs/Observable";
 import 'rxjs/add/operator/do';
-import { LoaderService } from "./../loader/loader.service";
+import {LoaderService} from "./../loader/loader.service";
 
 @Injectable()
 export class HttpService implements HttpInterceptor {
 
-    constructor(private loaderService: LoaderService) {
-    }
-
-    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {  
-        this.showLoading();
-        return next.handle(req).do((event: HttpEvent<any>) => {           
-            if (event instanceof HttpResponse) {               
-                this.hideLoading();
-            }
-        }, (err: any) => {            
-            this.hideLoading();
-        });
-    }
-
-    private showLoading(): void {
-        this.loaderService.show();
-    }
-
-    private hideLoading(): void {
-        this.loaderService.hide();
-    }
-
-}
\ No newline at end of file
+  constructor(private loaderService: LoaderService) {
+  }
+
+  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    this.showLoading();
+    return next.handle(req).do((event: HttpEvent<any>) => {
+      if (event instanceof HttpResponse) {
+        this.hideLoading();
+      }
+    }, (err: any) => {
+      this.hideLoading();
+    });
+  }
+
+  private showLoading(): void {
+    this.loaderService.show();
+  }
+
+  private hideLoading(): void {
+    this.loaderService.hide();
+  }
+
+}

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/ui/angular/src/app/service/service.service.spec.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/service/service.service.spec.ts b/ui/angular/src/app/service/service.service.spec.ts
index 32edfd7..acc57f9 100644
--- a/ui/angular/src/app/service/service.service.spec.ts
+++ b/ui/angular/src/app/service/service.service.spec.ts
@@ -16,9 +16,9 @@ KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License.
 */
-import { TestBed, inject } from '@angular/core/testing';
+import {TestBed, inject} from '@angular/core/testing';
 
-import { ServiceService } from './service.service';
+import {ServiceService} from './service.service';
 
 describe('ServiceService', () => {
   beforeEach(() => {

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/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 3e35de5..d64c99c 100644
--- a/ui/angular/src/app/service/service.service.ts
+++ b/ui/angular/src/app/service/service.service.ts
@@ -16,11 +16,13 @@ KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License.
 */
-import { Injectable } from "@angular/core";
+import {Injectable} from "@angular/core";
 
 @Injectable()
 export class ServiceService {
-  constructor() {}
+  constructor() {
+  }
+
   // public BACKEND_SERVER = 'http://10.64.222.80:38080';
 //  public BACKEND_SERVER = 'http://localhost:8080';
   public BACKEND_SERVER = "";
@@ -33,15 +35,15 @@ export class ServiceService {
 
       login: this.BACKEND_SERVER + this.API_ROOT_PATH + "/login/authenticate",
       dbtree:
-        this.BACKEND_SERVER + this.API_ROOT_PATH + "/metadata/hive/dbs/tables",
+      this.BACKEND_SERVER + this.API_ROOT_PATH + "/metadata/hive/dbs/tables",
       dataassetlist:
-        this.BACKEND_SERVER + this.API_ROOT_PATH + "/metadata/hive/dbs/tables",
+      this.BACKEND_SERVER + this.API_ROOT_PATH + "/metadata/hive/dbs/tables",
 
       getdataasset: this.BACKEND_SERVER + this.API_ROOT_PATH + "/dataassets",
 
       //mydashboard
       getmydashboard:
-        this.BACKEND_SERVER + this.API_ROOT_PATH + "/metrics/mydashboard/",
+      this.BACKEND_SERVER + this.API_ROOT_PATH + "/metrics/mydashboard/",
       // getsubscribe: this.BACKEND_SERVER + this.API_ROOT_PATH + '/subscribe/',
       // newsubscribe: this.BACKEND_SERVER + this.API_ROOT_PATH + '/subscribe',
 
@@ -64,15 +66,15 @@ export class ServiceService {
       // 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",
+      this.BACKEND_SERVER + this.API_ROOT_PATH + "/metrics/values",
 
       // dashboard:this.ES_SERVER+'/griffin/accuracy/_search?pretty&filter_path=hits.hits._source',
       metricsample:
-        this.BACKEND_SERVER + this.API_ROOT_PATH + "/metrics/sample",
+      this.BACKEND_SERVER + this.API_ROOT_PATH + "/metrics/sample",
       metricdownload:
-        this.BACKEND_SERVER + this.API_ROOT_PATH + "/metrics/download",
+      this.BACKEND_SERVER + this.API_ROOT_PATH + "/metrics/download",
       missRecordDownload:
-        this.BACKEND_SERVER + this.API_ROOT_PATH + "/jobs/download",
+      this.BACKEND_SERVER + this.API_ROOT_PATH + "/jobs/download",
 
 
       //Models
@@ -81,7 +83,7 @@ export class ServiceService {
       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",
+      this.BACKEND_SERVER + this.API_ROOT_PATH + "/models/enableModel",
 
       //Jobs
       allJobs: this.BACKEND_SERVER + this.API_ROOT_PATH + "/jobs",
@@ -89,10 +91,10 @@ export class ServiceService {
       modifyJobs: this.BACKEND_SERVER + this.API_ROOT_PATH + "/jobs",
       getJobById: this.BACKEND_SERVER + this.API_ROOT_PATH + "/jobs/config",
       getMeasuresByOwner:
-        this.BACKEND_SERVER + this.API_ROOT_PATH + "/measures/owner/",
+      this.BACKEND_SERVER + this.API_ROOT_PATH + "/measures/owner/",
       deleteJob: this.BACKEND_SERVER + this.API_ROOT_PATH + "/jobs",
       getInstances:
-        this.BACKEND_SERVER + this.API_ROOT_PATH + "/jobs/instances",
+      this.BACKEND_SERVER + this.API_ROOT_PATH + "/jobs/instances",
 
       //              allJobs:'/jobs.json',
       newAccuracyModel: this.BACKEND_SERVER + this.API_ROOT_PATH + "/models",
@@ -110,7 +112,7 @@ export class ServiceService {
 
       //Notification
       getnotifications:
-        this.BACKEND_SERVER + this.API_ROOT_PATH + "/notifications"
+      this.BACKEND_SERVER + this.API_ROOT_PATH + "/notifications"
     }
   };
 }

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/ui/angular/src/app/service/user.service.spec.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/service/user.service.spec.ts b/ui/angular/src/app/service/user.service.spec.ts
index b26195c..97eafff 100644
--- a/ui/angular/src/app/service/user.service.spec.ts
+++ b/ui/angular/src/app/service/user.service.spec.ts
@@ -1,6 +1,6 @@
-import { TestBed, inject } from '@angular/core/testing';
+import {TestBed, inject} from '@angular/core/testing';
 
-import { UserService } from './user.service';
+import {UserService} from './user.service';
 
 describe('UserService', () => {
   beforeEach(() => {

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/ui/angular/src/app/service/user.service.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/service/user.service.ts b/ui/angular/src/app/service/user.service.ts
index 47efa02..3ed105d 100644
--- a/ui/angular/src/app/service/user.service.ts
+++ b/ui/angular/src/app/service/user.service.ts
@@ -16,12 +16,13 @@ KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License.
 */
-import { Injectable } from "@angular/core";
+import {Injectable} from "@angular/core";
 
 @Injectable()
 export class UserService {
   ntAccount: string;
   timestamp: Date;
+
   setCookie(name, value, days) {
     let expires;
     if (days) {
@@ -38,4 +39,4 @@ export class UserService {
     var keyValue = document.cookie.match("(^|;) ?" + key + "=([^;]*)(;|$)");
     return keyValue ? keyValue[2] : null;
   }
-}
\ No newline at end of file
+}

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/ui/angular/src/app/sidebar/sidebar.component.css
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/sidebar/sidebar.component.css b/ui/angular/src/app/sidebar/sidebar.component.css
index c9a5dbe..16482b7 100644
--- a/ui/angular/src/app/sidebar/sidebar.component.css
+++ b/ui/angular/src/app/sidebar/sidebar.component.css
@@ -23,12 +23,12 @@ under the License.
   align-items: center
 }
 
-.sidebar-stat-center>img {
+.sidebar-stat-center > img {
   max-width: 24px;
   margin-right: 5px;
 }
 
-.sidebar-stat-center>span {
+.sidebar-stat-center > span {
   font-size: 18px;
   color: #fff
 }
@@ -108,7 +108,7 @@ under the License.
   /*margin-left: 20px;*/
 }
 
-a>.side-name:hover {
+a > .side-name:hover {
   color: #b2c831;
   /*position: absolute;*/
   /*left: 210px;*/
@@ -146,10 +146,8 @@ a>.side-name:hover {
   float: none;
 }
 
-
 /*side-bar end*/
 
-
 /* led start */
 
 .led-red {
@@ -185,7 +183,6 @@ a>.side-name:hover {
   box-shadow: #000 0 -1px 7px 1px, inset #460 0 -1px 9px, #7D0 0 2px 12px;
 }
 
-
 /* led end   */
 
 @media (max-width: 1200px) {

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/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 ab1195b..0a445a1 100644
--- a/ui/angular/src/app/sidebar/sidebar.component.html
+++ b/ui/angular/src/app/sidebar/sidebar.component.html
@@ -26,7 +26,7 @@ under the License.
         </div>
         <div class="sidebar-stat-center">
           <i class="fa fa-line-chart" style="color:#b2c831;" aria-hidden="true"></i>
-          <span><a routerLink="/metrics" >&nbsp;DQ Metrics</a></span>
+          <span><a routerLink="/metrics">&nbsp;DQ Metrics</a></span>
         </div>
       </div>
     </div>
@@ -40,7 +40,7 @@ under the License.
       <div class="well" *ngIf="outerItems.metrics.length != 0">
         <div class="col-sm-4 col-lg-4 col-md-4 ">
           <h4>
-                <!-- <a routerLink="/metrics/{{outerItems.name}}"> {{outerItems.name}}</a> -->
+            <!-- <a routerLink="/metrics/{{outerItems.name}}"> {{outerItems.name}}</a> -->
             <a> {{outerItems.name}}</a>
           </h4>
         </div>
@@ -55,15 +55,16 @@ under the License.
           <div class="panel panel-default">
             <div class="panel-heading" style="background:transparent;">
               <h4 class="panel-title side-metrics">
-                <a style="cursor: pointer;" (click)="draw(items,parent, i);items.tag=!items.tag;" >
-                  <i class="faChevron" [ngClass]="items.tag ? 'fa fa-caret-down':'fa fa-caret-right'" style="width:10px"></i>
+                <a style="cursor: pointer;" (click)="draw(items,parent, i);items.tag=!items.tag;">
+                  <i class="faChevron" [ngClass]="items.tag ? 'fa fa-caret-down':'fa fa-caret-right'"
+                     style="width:10px"></i>
                   <i class="fa fa-line-chart faArrows"></i>
                   <span class="side-date">{{items.timestamp | date:'short' }}</span>
-                    &nbsp;&nbsp;
+                  &nbsp;&nbsp;
                   <span class="side-name" title="{{items.name}}">{{items.name |truncate :13}}
                   </span>
                 </a>
-               </h4>
+              </h4>
             </div>
             <div id="side{{parent}}{{i}}" class="panel-collapse collapse">
               <div class="panel-body" style="cursor:pointer;padding:0px 15px;border-top-width: 0;">

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/ui/angular/src/app/sidebar/sidebar.component.spec.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/sidebar/sidebar.component.spec.ts b/ui/angular/src/app/sidebar/sidebar.component.spec.ts
index 528bab2..a8c8134 100644
--- a/ui/angular/src/app/sidebar/sidebar.component.spec.ts
+++ b/ui/angular/src/app/sidebar/sidebar.component.spec.ts
@@ -16,9 +16,9 @@ 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 {async, ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { SidebarComponent } from './sidebar.component';
+import {SidebarComponent} from './sidebar.component';
 
 describe('SidebarComponent', () => {
   let component: SidebarComponent;
@@ -26,9 +26,9 @@ describe('SidebarComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ SidebarComponent ]
+      declarations: [SidebarComponent]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/b306d872/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 a902cfa..01f1b40 100644
--- a/ui/angular/src/app/sidebar/sidebar.component.ts
+++ b/ui/angular/src/app/sidebar/sidebar.component.ts
@@ -16,13 +16,13 @@ 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 { DatePipe } from "@angular/common";
-import { ServiceService } from "../service/service.service";
-import { TruncatePipe } from "./truncate.pipe";
+import {Component, OnInit} from "@angular/core";
+import {HttpClient} from "@angular/common/http";
+import {Router} from "@angular/router";
+import {ChartService} from "../service/chart.service";
+import {DatePipe} from "@angular/common";
+import {ServiceService} from "../service/service.service";
+import {TruncatePipe} from "./truncate.pipe";
 import * as $ from "jquery";
 
 @Component({
@@ -37,7 +37,8 @@ export class SidebarComponent implements OnInit {
     private router: Router,
     public serviceService: ServiceService,
     public chartService: ChartService
-  ) {}
+  ) {
+  }
 
   finalData = [];
   chartOption = new Map();
@@ -50,7 +51,8 @@ export class SidebarComponent implements OnInit {
       data => {
         this.sideBarList(null);
       },
-      err => {}
+      err => {
+      }
     );
   }
 
@@ -66,7 +68,7 @@ export class SidebarComponent implements OnInit {
   resizeSideChart() {
     $("#side-bar-metrics").css({
       height:
-        $("#mainContent").height() - $("#side-bar-stats").outerHeight() + 70
+      $("#mainContent").height() - $("#side-bar-stats").outerHeight() + 70
     });
     for (let i = 0; i < this.finalData.length; i++) {
       for (let j = 0; j < this.finalData[i].metrics.length; j++) {
@@ -86,7 +88,7 @@ export class SidebarComponent implements OnInit {
     this.chartOption.set(chartId, this.chartService.getOptionSide(metric));
     var self = this;
     $("#" + chartId).unbind("click");
-    $("#" + chartId).click(function(e) {
+    $("#" + chartId).click(function (e) {
       self.router.navigate([
         "/detailed/" + self.finalData[parentIndex].metrics[index].name
       ]);
@@ -97,7 +99,7 @@ export class SidebarComponent implements OnInit {
     return this.chartOption.get("chart" + parent + "-" + i);
   }
 
-  checkvalue(job){
+  checkvalue(job) {
     return job.metricValues.length === 0;
   }
 
@@ -105,9 +107,9 @@ export class SidebarComponent implements OnInit {
     let url_dashboard = this.serviceService.config.uri.dashboard;
     this.http.get(url_dashboard).subscribe(data => {
       this.mesWithJob = JSON.parse(JSON.stringify(data));
-      for(let i=0;i<this.mesWithJob.length;i++) {
-        if(this.mesWithJob[i].some(this.checkvalue)){
-          this.mesWithJob[i].splice(i,1);
+      for (let i = 0; i < this.mesWithJob.length; i++) {
+        if (this.mesWithJob[i].some(this.checkvalue)) {
+          this.mesWithJob[i].splice(i, 1);
         }
       }
       for (let mesName in this.mesWithJob) {
@@ -124,7 +126,7 @@ export class SidebarComponent implements OnInit {
           node.type = "ACCURACY";
           for (let i = 0; i < jobs.length; i++) {
             if (jobs[i].metricValues.length != 0) {
-              var someMetrics = jobs[i].metricValues.slice(0,30);
+              var someMetrics = jobs[i].metricValues.slice(0, 30);
               jobs[i].metricValues = JSON.parse(
                 JSON.stringify(someMetrics)
               );