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 2017/10/11 04:31:01 UTC

[01/13] incubator-griffin git commit: refactor ui with angular2

Repository: incubator-griffin
Updated Branches:
  refs/heads/master 460e2fd72 -> 42ee88634


http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/tests/ut/specs/filters/strshorten_spec.js
----------------------------------------------------------------------
diff --git a/ui/tests/ut/specs/filters/strshorten_spec.js b/ui/tests/ut/specs/filters/strshorten_spec.js
deleted file mode 100644
index 7772f22..0000000
--- a/ui/tests/ut/specs/filters/strshorten_spec.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/*-
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-
-*/
-define(['angular', 'angularMocks', 'js/filters/strshorten'],
-  function(angular, mocks, filter) {
-
-    describe('Test /js/filters/strshorten.js', function() {
-      beforeEach(module('app.filters'));
-      // Here we register the function returned by the myFilter AMD module
-      // beforeEach(mocks.module(function($filterProvider) {
-      //   $filterprovider.register('stringsFilter', filter);
-      // }));
-
-      // Our first test!!!!
-      it('string should be shorten', mocks.inject(function($filter) {
-        // console.log($filter('strShorten')('1234567890123444444'));
-        expect($filter('strShorten')('abcde')).toEqual('abcde');
-        expect($filter('strShorten')('1234567890123444444')).toEqual('123456789012...');
-      }));
-
-      // it('should be true', function(){
-      //   expect(1).not.toBeNull();
-      // });
-
-    });
-  }
-);

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/tests/ut/specs/services/services_spec.js
----------------------------------------------------------------------
diff --git a/ui/tests/ut/specs/services/services_spec.js b/ui/tests/ut/specs/services/services_spec.js
deleted file mode 100644
index d91b268..0000000
--- a/ui/tests/ut/specs/services/services_spec.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/*-
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-
-*/
-define(['angular', 'angularMocks', 'js/services/services'],
-  function(angular, mocks, filter) {
-
-    describe('Test /js/services/services.js', function() {
-      beforeEach(module('app.services'));
-      // Here we register the function returned by the myFilter AMD module
-      // beforeEach(mocks.module(function($filterProvider) {
-      //   $filterprovider.register('stringsFilter', filter);
-      // }));
-
-      // Our first test!!!!
-      it('$config uri is set', mocks.inject(function($config) {
-        // expect($config).not.toBeNull();
-        expect(Object.getOwnPropertyNames($config.uri).length).toBeGreaterThan(0);
-      }));
-
-      // it('should be true', function(){
-      //   expect(1).not.toBeNull();
-      // });
-
-    });
-  }
-);

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/tests/ut/test-main.js
----------------------------------------------------------------------
diff --git a/ui/tests/ut/test-main.js b/ui/tests/ut/test-main.js
deleted file mode 100644
index 2e2554f..0000000
--- a/ui/tests/ut/test-main.js
+++ /dev/null
@@ -1,102 +0,0 @@
-/*-
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-
-*/
-//for demo purpose
-var allTestFiles = [];
-var TEST_REGEXP = /(spec|test)\.js$/i;
-
-// Get a list of all the test files to include
-Object.keys(window.__karma__.files).forEach(function(file) {
-  if (TEST_REGEXP.test(file)) {
-    // Normalize paths to RequireJS module names.
-    // If you require sub-dependencies of test files to be loaded as-is (requiring file extension)
-    // then do not normalize the paths
-    var normalizedTestModule = file.replace(/^\/base\/|\.js$/g, '');
-    // var normalizedTestModule = file.replace(/^\/base\//, '').replace(/\.js$/, '');
-    // console.log(normalizedTestModule);
-    allTestFiles.push(normalizedTestModule);
-  }
-});
-
-require.config({
-  // Karma serves files under /base, which is the basePath from your config file
-  baseUrl: '/base',
-
-  waitSeconds: 200,
-  // dynamically load all test files
-  deps: allTestFiles,
-  // dpes: ['C:/temp/Bark_UI/tests/ut/specs/my_first_spec'],
-
-
-  // we have to kickoff jasmine, as it is asynchronous
-  callback: window.__karma__.start,
-  paths: {
-    // 'domReady': '../bower_components/domReady/domReady',
-    'angular': '/base/bower_components/angular/angular',
-    'angularMocks': '/base/node_modules/angular-mocks/angular-mocks',
-    'angularRoute': '/base/bower_components/angular-route/angular-route',
-
-    'ngAnimate': '/base/bower_components/angular-animate/angular-animate',
-    'ngToaster': '/base/bower_components/AngularJS-Toaster/toaster',
-
-    'jquery': '/base/bower_components/jquery/dist/jquery',
-    'bootstrap': '/base/bower_components/bootstrap/dist/js/bootstrap',
-
-    
-		'echarts': '/base/bower_components/echarts/dist/echarts',
-  },
-  shim: {
-    'angular': {
-      deps: ['jquery'],
-      exports: 'angular'
-    },
-    // 'angularMocks': {
-    //   exports: 'angularMocks',
-    //   deps: ['angular']
-    // },
-    'angularMocks': {deps: ['angular'], 'exports': 'angular.mock'},
-    'angularRoute': {
-        deps: ['angular'],
-        exports: 'angularRoute'
-    },
-    'ngSmartTable': {
-      deps: ['angular'],
-      exports: 'ngSmartTable'
-    },
-    'ngAnimate': {
-        deps: ['angular'],
-        exports: 'ngAnimate'
-    },
-    'ngToaster': {
-      deps: ['angular', 'ngAnimate'],
-      exports: 'ngToaster'
-    },
-
-    'jquery': {
-      exports: 'jquery'
-    },
-    'bootstrap': {
-      exports: 'bootstrap',
-      deps: ['jquery']
-    },
-    'echarts': {
-      exports: 'echarts'
-    }
-  }
-});


[06/13] incubator-griffin git commit: refactor ui with angular2

Posted by gu...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/js/controllers/index.js
----------------------------------------------------------------------
diff --git a/ui/js/controllers/index.js b/ui/js/controllers/index.js
deleted file mode 100644
index b388158..0000000
--- a/ui/js/controllers/index.js
+++ /dev/null
@@ -1,48 +0,0 @@
-/*
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-*/
-
-
-define([
-    './nav-ctrl',
-    './sidebar-ctrl',
-    './health-ctrl',
-    './rule-ctrl',
-    './job-ctrl',
-    './createjob-ac-ctrl',
-    './createrule0-ctrl',
-    './createrule-ac-ctrl',
-    './createrule-va-ctrl',
-    './createrule-an-ctrl',
-    './createrule-pu-ctrl',
-    './viewrule-ctrl',
-    './metrics-ctrl',
-    './dataassets-ctrl',
-    './createdataasset-ctrl',
-    './editdataasset-ctrl',
-    './footer-ctrl',
-    './mydashboard-ctrl',
-    './subscribemodel-ctrl',
-    './bigChart-ctrl',
-    './main-ctrl',
-    './downloadSample-ctrl',
-    './detail-ctrl'
-    // './my-ctrl-2'
-], function () {
-  // console.log('my controller 1');
-});

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/js/controllers/job-ctrl.js
----------------------------------------------------------------------
diff --git a/ui/js/controllers/job-ctrl.js b/ui/js/controllers/job-ctrl.js
deleted file mode 100644
index 79efb84..0000000
--- a/ui/js/controllers/job-ctrl.js
+++ /dev/null
@@ -1,151 +0,0 @@
-/*
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-*/
-
-
-define(['./module'], function (controllers) {
-    'use strict';
-    controllers.controller('JobCtrl', ['$scope', '$http', '$config', '$location', '$timeout', '$route', 'toaster', '$filter','$interval', function ($scope, $http, $config, $location, $timeout, $route, toaster, $filter,$interval) {
-        console.log('job controller');
-        console.log($scope.ntAccount);
-        var allJobs = $config.uri.allJobs;
-
-        var ts = null;
-        var start = 0;
-        var number = 10;
-        var originalRowCollection = undefined;
-        var originalInstances = undefined;
-        $scope.n = 0;
-        $scope.currentJob = undefined;
-        $scope.tableState = [];
-        $scope.oldindex = undefined;
-
-        function getJobs(start,number,tableState){
-            $http.get(allJobs).then(function successCallback(data) {
-                angular.forEach(data.data,function(job){
-                    job.Interval = job.interval;
-                    if(job.Interval<60)
-                        job.Interval = job.interval + 's';
-                    else if(job.Interval<3600)
-                    {
-                        if(job.Interval%60==0)
-                            job.Interval = job.interval/60 + 'min';
-                        else
-                            job.Interval = (job.interval - job.interval%60)/60 + 'min'+job.interval%60 + 's';
-                    }
-                    else
-                    {
-                        if(job.Interval%3600==0)
-                            job.Interval = job.interval/3600 + 'h';
-                        else
-                        {
-                            job.Interval = (job.interval - job.interval%3600)/3600 + 'h';
-                            var s = job.interval%3600;
-                            job.Interval = job.Interval + (s-s%60)/60+'min'+s%60+'s';
-                        }
-                    }
-                    var length = job.jobName.split('-').length;
-                    job.createTime = job.jobName.split('-')[length-1];
-                    $scope.jobName = job.jobName;
-                });
-                data.data.sort(function(a,b){
-                    var dateA = a.createTime;
-                    var dateB = b.createTime;
-                    return -(dateA-dateB);
-                });
-                originalRowCollection = angular.copy(data.data);
-                $scope.rowCollection = angular.copy(data.data);
-                $scope.displayed = $scope.rowCollection.slice(start, start+number);
-                tableState.pagination.numberOfPages = Math.ceil($scope.rowCollection.length/number);
-            },function errorCallback(response){});
-        }
-
-
-        function getInstances(start,number,tableState){
-            var allInstances = $config.uri.getInstances + '?group=' + 'BA' + '&jobName=' + $scope.currentJob.jobName +'&page='+'0'+'&size='+'200';
-            $http.get(allInstances).then(function successCallback(data) {
-                originalInstances = angular.copy(data.data);
-                $scope.row_currentInstances = angular.copy(data.data);
-                $scope.currentInstances = $scope.row_currentInstances.slice(start, start+number);
-                tableState.pagination.numberOfPages = Math.ceil($scope.row_currentInstances.length/number);
-            },function errorCallback(response){});
-        }
-
-
-        $scope.pagingJob = function(tableState){
-            $scope.n = 0;
-            $scope.oldindex = undefined;
-            ts = tableState;
-            start = tableState.pagination.start || 0;
-            number = tableState.pagination.number || 10;
-            getJobs(start,number,tableState);
-            $interval(function(){
-                getJobs(start,number,tableState);
-            },600000);
-        };
-
-
-        $scope.pagingInstances = function(tableState){
-            $scope.tableState[$scope.n] = tableState;
-            $scope.n = $scope.n+1;
-            ts = tableState;
-            start = tableState.pagination.start || 0;
-            number = tableState.pagination.number || 10;
-             if($scope.currentJob!=undefined && $scope.currentJob.jobName!=undefined)
-                getInstances(start,number,tableState);
-        };
-
-        $scope.showInstances = function showInstances(row){
-            var index = $scope.displayed.indexOf(row);
-            if ($scope.oldindex!=undefined && $scope.oldindex != index)
-                $scope.displayed[$scope.oldindex].showDetail = false;
-            row.showDetail = !row.showDetail;
-            $scope.currentJob = row;
-            $scope.currentJob.tableState = $scope.tableState[index];
-            $scope.pagingInstances($scope.currentJob.tableState);
-            $scope.oldindex = index;
-        }
-
-        $scope.remove = function remove(row) {
-            $scope.deletedRow = row;
-            $scope.deletedBriefRow = row;
-            $('#deleteJobConfirmation').modal('show');
-        }
-
-        $scope.confirmDelete = function(){
-            var row = $scope.deletedBriefRow;
-            var deleteModelUrl = $config.uri.deleteJob + '?group=' + row.groupName+'&jobName='+row.jobName;
-            $http.delete(deleteModelUrl).then(function successCallback(){
-  
-                var index = $scope.rowCollection.indexOf(row);
-                $scope.rowCollection.splice(index, 1);
-  
-                index = $scope.displayed.indexOf(row);
-                $scope.displayed.splice(index, 1);
-  
-                $('#deleteJobConfirmation').modal('hide');
-            },function errorCallback(response) {
-                toaster.pop('error', 'Error when deleting record', response.message);
-            });
-        }
-
-        $scope.$on('$viewContentLoaded', function() {
-            $scope.$emit('initReq');
-        });
-    }]);
-});
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/js/controllers/main-ctrl.js
----------------------------------------------------------------------
diff --git a/ui/js/controllers/main-ctrl.js b/ui/js/controllers/main-ctrl.js
deleted file mode 100644
index d0f3ea3..0000000
--- a/ui/js/controllers/main-ctrl.js
+++ /dev/null
@@ -1,41 +0,0 @@
-/*
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-*/
-
-define(['./module'], function(controllers) {
-    'use strict';
-    controllers.controller('MainCtrl', ['$scope', '$http', '$config', '$location', '$routeParams', '$timeout', '$compile', '$route', '$barkChart', '$rootScope', function($scope, $http, $config, $location, $routeParams, $timeout, $compile, $route, $barkChart, $rootScope) {
-
-        $scope.resizeMainWindow = function() {
-            $('#mainWindow').height(window.innerHeight-56-90);
-        }
-
-        $(window).resize(function() {
-
-            console.log('main resize');
-            $scope.resizeMainWindow();
-
-            $scope.$broadcast('resizeHandler');
-        });
-
-        $scope.$on('initReq', function(e) {
-            $scope.resizeMainWindow();
-        })
-    }
-    ]);
-});

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/js/controllers/metrics-ctrl.js
----------------------------------------------------------------------
diff --git a/ui/js/controllers/metrics-ctrl.js b/ui/js/controllers/metrics-ctrl.js
deleted file mode 100644
index 3581d12..0000000
--- a/ui/js/controllers/metrics-ctrl.js
+++ /dev/null
@@ -1,208 +0,0 @@
-/*
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-*/
-
-define(['./module'], function(controllers) {
-    'use strict';
-    controllers.controller('MetricsCtrl', ['$scope', '$http', '$config', '$location', '$routeParams', '$timeout', '$compile', '$route', '$barkChart', '$rootScope',function($scope, $http, $config, $location, $routeParams, $timeout, $compile, $route, $barkChart, $rootScope) {
-        console.log('Route parameter: ' + $routeParams.sysName);
-
-        var echarts = require('echarts');
-
-        pageInit();
-        $scope.dataData = [];
-        $scope.finalData = [];
-        function pageInit() {
-          $scope.$emit('initReq');
-          $scope.orgs = [];
-          var url_dashboard = $config.uri.dashboard ;
-          var url_organization = $config.uri.organization;
-
-          $http.get(url_organization).then(function successCallback(res){
-               var orgNode = null;
-               res = res.data;
-               angular.forEach(res, function(value,key) {
-                    orgNode = new Object();
-                    $scope.orgs.push(orgNode);
-                    orgNode.name = key;
-                    orgNode.assetMap = value;
-               });
-               $scope.originalOrgs = angular.copy($scope.orgs);
-              // $http.get(url_dashboard).then(function successCallback(data){
-                $http.post(url_dashboard, {"query": {"match_all":{}},  "sort": [{"tmst": {"order": "asc"}}],"size":1000}).then(function successCallback(data) {
-                    data = data.data;
-                    angular.forEach(data.hits.hits, function(sys) {
-                        var chartData = sys._source;
-                        chartData.sort = function(a,b){
-                            return a.tmst - b.tmst;
-                        }
-                    });
-                    $scope.originalData = angular.copy(data);
-
-                    $scope.myData = angular.copy($scope.originalData.hits.hits);
-                    $scope.metricName = [];
-                    for(var i = 0;i<$scope.myData.length;i++){
-                        $scope.metricName.push($scope.myData[i]._source.name);
-                    }
-                    $scope.metricNameUnique = [];
-                    angular.forEach($scope.metricName,function(name){
-                        if($scope.metricNameUnique.indexOf(name) === -1){
-                            $scope.dataData[$scope.metricNameUnique.length] = new Array();
-                            $scope.metricNameUnique.push(name);
-                        }
-                    });
-
-                    for(var i = 0;i<$scope.myData.length;i++){
-            //push every point to its metric
-                        for(var j = 0 ;j<$scope.metricNameUnique.length;j++){
-                            if($scope.myData[i]._source.name==$scope.metricNameUnique[j]){
-                                $scope.dataData[j].push($scope.myData[i]);
-                            }
-                        }
-                    }
-                    angular.forEach($scope.originalOrgs,function(sys,parentIndex){
-                        var node = null;
-                        node = new Object();
-                        node.name = sys.name;
-                        node.dq = 0;
-                        node.metrics = new Array();
-                        angular.forEach($scope.dataData,function(metric,index){
-                            if(sys.assetMap.indexOf(metric[metric.length-1]._source.name)!= -1){
-                                var metricNode = new Object();
-                                var dq = 0.0;
-                                if (metric[metric.length-1]._source.total > 0)
-                                    dq = metric[metric.length-1]._source.matched/metric[metric.length-1]._source.total*100;
-                                metricNode.dq = dq;
-                                metricNode.name = metric[metric.length-1]._source.name;
-                                metricNode.timestamp = metric[metric.length-1]._source.tmst;
-                                metricNode.details = angular.copy(metric);
-                                node.metrics.push(metricNode);
-                            }
-                        })
-                        $scope.finalData.push(node);
-                    })
-
-                    $scope.originalData = angular.copy($scope.finalData);
-
-                    if($routeParams.sysName && $scope.originalData && $scope.originalData.length > 0){
-                      for(var i = 0; i < $scope.originalData.length; i ++){
-                        if($scope.originalData[i].name == $routeParams.sysName){
-                          $scope.selectedOrgIndex = i;
-                          $scope.changeOrg();
-                          $scope.orgSelectDisabled = true;
-                          break;
-                        }
-
-                      }
-                    }
-                    $timeout(function() {
-                        redraw($scope.finalData);
-                    });
-                });
-            });//          $http.post(url_dashboard, {"query": {"match_all":{}},"size":1000}).success(function(res) {
-        }
-
-        $scope.$watch('selectedOrgIndex', function(newValue){
-          console.log(newValue);
-        });
-        var redraw = function(data) {
-          $scope.chartHeight = $('.chartItem:eq(0)').width()*0.8+'px';
-            angular.forEach(data, function(sys, parentIndex) {
-                var parentIndex = parentIndex
-                angular.forEach(sys.metrics, function(metric, index) {
-                    $('#thumbnail'+parentIndex+'-'+index).get(0).style.width = $('#thumbnail'+parentIndex+'-'+index).parent().width()+'px';
-                    $('#thumbnail'+parentIndex+'-'+index).get(0).style.height = $scope.chartHeight;
-                    var thumbnailChart = echarts.init($('#thumbnail'+parentIndex+'-'+index).get(0), 'dark');
-                    thumbnailChart.setOption($barkChart.getOptionThum(metric));
-                });
-            });
-        }
-        $scope.assetOptions = [];
-
-        $scope.changeOrg = function() {
-            $scope.selectedAssetIndex = undefined;
-            $scope.assetOptions = [];
-            $scope.finalData = [];
-            if($scope.selectedOrgIndex === ""){
-              $scope.finalData = angular.copy($scope.originalData);
-            }
-            else {
-              var org = angular.copy($scope.originalData[$scope.selectedOrgIndex]);
-              $scope.finalData.push(org);
-              angular.forEach(org.metrics, function(metric, index) {
-                if($scope.assetOptions.indexOf(metric.name) == -1) {
-                  $scope.assetOptions.push(metric.name);
-                }
-              });
-            }
-            $timeout(function() {
-                redraw($scope.finalData);
-            }, 0);
-        };
-
-        $scope.changeAsset = function() {
-            $scope.finalData = [];
-            if($scope.selectedOrgIndex === ""){
-              $scope.finalData = angular.copy($scope.originalData);
-            } else {
-              var org = angular.copy($scope.originalData[$scope.selectedOrgIndex]);
-              $scope.finalData.push(org);
-            }
-            if($scope.selectedAssetIndex != undefined && $scope.selectedAssetIndex != ''){
-              var asset = $scope.assetOptions[$scope.selectedAssetIndex];
-              angular.forEach($scope.finalData, function(sys) {
-                var oldMetrics = sys.metrics;
-                sys.metrics = [];
-                angular.forEach(oldMetrics, function(metric, index) {
-                  if(metric.name == asset) {
-                    sys.metrics.push(metric);
-                  }
-                });
-              });
-            }
-            $timeout(function() {
-                redraw($scope.finalData);
-            }, 0);
-        }
-
-        function resizePieChart() {
-          $('#data-asset-pie').css({
-              height: $('#data-asset-pie').parent().width(),
-              width: $('#data-asset-pie').parent().width()
-          });
-        }
-
-        $scope.$on('resizeHandler', function() {
-          if($route.current.$$route.controller == 'MetricsCtrl') {
-            console.log('metrics resize');
-            redraw($scope.dataData);
-          }
-        });
-
-        /*click the chart to be bigger*/
-        $scope.showBig = function(t){
-            // $rootScope.showBigChart($barkChart.getOptionBig(t));
-             window.location.href = '/#!/detailed/'+t.name;
-        }
-
-        $scope.getSample = function(item) {
-          $rootScope.$broadcast('downloadSample', item.name);
-        };
-      }
-   ]);
-});

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/js/controllers/module.js
----------------------------------------------------------------------
diff --git a/ui/js/controllers/module.js b/ui/js/controllers/module.js
deleted file mode 100644
index c42d4b9..0000000
--- a/ui/js/controllers/module.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/*
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-*/
-
-define(['angular'], function (ng) {
-    'use strict';
-    return ng.module('app.controllers', []);
-});

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/js/controllers/mydashboard-ctrl.js
----------------------------------------------------------------------
diff --git a/ui/js/controllers/mydashboard-ctrl.js b/ui/js/controllers/mydashboard-ctrl.js
deleted file mode 100644
index 1e18f5b..0000000
--- a/ui/js/controllers/mydashboard-ctrl.js
+++ /dev/null
@@ -1,89 +0,0 @@
-/*
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-*/
-
-define(['./module'], function(controllers) {
-    'use strict';
-    controllers.controller('MyDashboardCtrl', ['$scope', '$http', '$config', '$location', 'toaster', '$timeout', '$route', '$filter', '$compile', '$barkChart', '$rootScope', function($scope, $http, $config, $location, toaster, $timeout, $route, $filter, $compile, $barkChart, $rootScope) {
-
-        var echarts = require('echarts');
-
-        pageInit();
-
-        function pageInit() {
-          $scope.$emit('initReq');
-
-          var url_dashboard = $config.uri.getmydashboard + $scope.ntAccount;
-//          $http.get(url_dashboard).success(function(res) {
-//              $scope.dashboard = res;
-//              angular.forEach(res, function(sys) {
-//                angular.forEach(sys.metrics, function(metric) {
-//                  var chartData = metric.details;
-//                  chartData.sort(function(a, b){
-//                    return a.timestamp - b.timestamp;
-//                  });
-//
-//                });
-//              });
-//              $scope.originalData = angular.copy(res);
-//              $timeout(function() {
-//                redraw($scope.dashboard);
-//              }, 0);
-//          });
-
-        }
-
-        var redraw = function(data) {
-
-          $scope.chartHeight = $('.chartItem:eq(0)').width()*0.8+'px';
-
-            angular.forEach(data, function(sys, parentIndex) {
-                var parentIndex = parentIndex;
-                angular.forEach(sys.metrics, function(metric, index) {
-                    $('#thumbnail'+parentIndex+'-'+index).get(0).style.width = $('#thumbnail'+parentIndex+'-'+index).parent().width()+'px';
-                    $('#thumbnail'+parentIndex+'-'+index).get(0).style.height = $scope.chartHeight;
-
-                    var thumbnailChart = echarts.init($('#thumbnail'+parentIndex+'-'+index).get(0), 'dark');
-                    thumbnailChart.setOption($barkChart.getOptionThum(metric));
-                });
-            });
-        }
-
-        $scope.$on('resizeHandler', function() {
-            if($route.current.$$route.controller == 'MyDashboardCtrl') {
-                console.log('mydashboard resize');
-                redraw($scope.dashboard);
-            }
-        });
-
-        /*click the chart to be bigger*/
-        $scope.showBig = function(t){
-          var metricDetailUrl = $config.uri.metricdetail + '/' + t.name;
-          // var metricDetailUrl = '/js/mock_data/anom.json';
-//          $http.get(metricDetailUrl).success(function (data){
-//            $rootScope.showBigChart($barkChart.getOptionBig(data));
-//          });
-
-        }
-
-        $scope.getSample = function(item) {
-          $rootScope.$broadcast('downloadSample', item.name);
-        };
-
-    }]);
-});

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/js/controllers/nav-ctrl.js
----------------------------------------------------------------------
diff --git a/ui/js/controllers/nav-ctrl.js b/ui/js/controllers/nav-ctrl.js
deleted file mode 100644
index 1408204..0000000
--- a/ui/js/controllers/nav-ctrl.js
+++ /dev/null
@@ -1,70 +0,0 @@
-/*
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-*/
-
-define(['./module'], function (controllers) {
-    'use strict';
-    controllers.controller('NavCtrl', ['$scope', '$http', '$config', '$location', '$cookies', '$rootScope', '$timeout', function ($scope, $http, $config, $location, $cookies, $rootScope, $timeout) {
-      console.log('Navigation controller');
-      var cookieObjs = $cookies.getAll();
-      if(cookieObjs.ntAccount){
-        $rootScope.ntAccount = cookieObjs.ntAccount;
-        $rootScope.fullName = cookieObjs.fullName;
-      }else{
-        window.location.replace('/login/login.html');
-      }
-
-      var adminGroup = ['lzhixing', 'yosha', 'wenzhao', 'aiye', 'lshao'];
-	    $rootScope.adminAccess = (adminGroup.indexOf($scope.ntAccount)!=-1);
-
-      // $scope.test = 'test';
-      $scope.isActive = function (route) {
-          return $location.path().indexOf(route) == 0;
-          //return $location.path() == route;
-      }
-
-      var timer = null;
-      $("#searchBox").off("keyup");
-      $("#searchBox").on("keyup", function(event){
-        if(timer){
-          $timeout.cancel(timer);
-        }
-        var searchValue = event.target.value;
-
-        if(searchValue != undefined){
-            timer = $timeout(function(){
-              $rootScope.keyword = searchValue.trim();
-            }, 500);
-        }
-      });
-
-      $scope.$on('$routeChangeStart', function(next, current) {
-        $("#searchBox").val('');
-        $rootScope.keyword = '';
-      });
-
-      $scope.logout = function(){
-        $rootScope.ntAccount = undefined;
-        $rootScope.fullName = undefined;
-        $cookies.remove('ntAccount');
-        $cookies.remove('fullName');
-        window.location.replace('/login/login.html');
-      }
-
-    }]);
-});

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/js/controllers/rule-ctrl.js
----------------------------------------------------------------------
diff --git a/ui/js/controllers/rule-ctrl.js b/ui/js/controllers/rule-ctrl.js
deleted file mode 100644
index 03f89c4..0000000
--- a/ui/js/controllers/rule-ctrl.js
+++ /dev/null
@@ -1,176 +0,0 @@
-/*
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-*/
-define(['./module'], function (controllers) {
-    'use strict';
-    controllers.controller('RuleCtrl', ['$scope', '$http', '$config', '$location', '$timeout', '$route', 'toaster', '$filter', function ($scope, $http, $config, $location, $timeout, $route, toaster, $filter) {
-      console.log('rule controller');
-
-      $scope.statusList = $filter('strarr')('modelstatus');
-      $scope.systemList = $filter('strarr')('modelsystem');
-      $scope.typeList = $filter('strarr')('modeltype');
-
-      var allModels = $config.uri.allModels;
-      var ts = null;
-      var start = 0;
-      var number = 10;
-      var originalRowCollection = undefined;
-
-      $scope.paging = function(tableState){
-        console.log(tableState);
-        ts = tableState;
-
-        // tableState.pagination.numberOfPages = $scope.rowCollection.length/10 + 1;
-        start = tableState.pagination.start || 0;
-        number = tableState.pagination.number || 10;
-
-        if(start == 0 && !$scope.rowCollection){
-         $http.get(allModels).then(function successCallback(data) {
-           // data.data.sort(function(a,b){
-           //   return -(a.createDate - b.createDate);
-           // });
-           data.data.reverse();
-           originalRowCollection = angular.copy(data.data);
-           $scope.rowCollection = angular.copy(data.data);
-
-           $scope.displayed = $scope.rowCollection.slice(start, start+number);
-           tableState.pagination.numberOfPages = Math.ceil($scope.rowCollection.length/number);
-         });
-        }else{
-         $scope.displayed = $scope.rowCollection.slice(start, start+number);
-        }
-      };
-
-      var include = function(keyword, str) {
-        if(keyword == undefined || keyword == null){
-          return true;
-        } else if(str == undefined || str == null){
-          return false;
-        } else{
-          var value = keyword.trim().toLowerCase();
-          return str.trim().toLowerCase().includes(value);
-        }
-      };
-
-      var findValue = function(keyword, assetItem) {
-        var date = $filter('date')(assetItem.createDate, 'M/d/yy h:mm a')
-        return include(keyword, assetItem.name)
-          || include(keyword, assetItem.description)
-          || include(keyword, assetItem.owner)
-          || include(keyword, $filter('strmap')(assetItem.system, $scope.systemList))
-          || include(keyword, $filter('strmap')(assetItem.status, $scope.statusList))
-          || include(keyword, $filter('strmap')(assetItem.type, $scope.typeList))
-          || include(keyword, date);
-      };
-
-      $scope.$watch('keyword', function(newValue){
-        if(originalRowCollection){
-          start = 0;
-          if(newValue == undefined || newValue == ''){
-            $scope.rowCollection = angular.copy(originalRowCollection);
-          }else{
-            var result = [];
-            for (var i = 0; i < originalRowCollection.length; i++) {
-              var item = originalRowCollection[i];
-              if(findValue(newValue, item)){
-                result.push(item);
-              }
-            };
-            $scope.rowCollection = angular.copy(result);
-          }
-          $scope.displayed = $scope.rowCollection.slice(start, start+number);
-          ts.pagination.numberOfPages = Math.ceil($scope.rowCollection.length/number);
-        }
-      });
-
-
-      $scope.remove = function remove(row) {
-        var getModelUrl = $config.uri.getModel + '/' +row.id;
-        $http.get(getModelUrl).then(function successCallback(data){
-  			  $scope.deletedRow = data.data;
-              $scope.sourceTable = $scope.deletedRow.source.config["table.name"];
-              $scope.targetTable = $scope.deletedRow.target.config["table.name"];
-  		  });
-        // $scope.deletedRow = row;
-        $scope.deletedBriefRow = row;
-        $('#deleteConfirmation').modal('show');
-      }
-
-      $scope.confirmDelete = function(){
-        var row =   $scope.deletedBriefRow;
-        var deleteModelUrl = $config.uri.deleteModel + '/' + row.id;
-        $http.delete(deleteModelUrl).then(function successCallback(data){
-          if(data.data.description=="Delete Measures By Name Succeed"){
-              var index = $scope.rowCollection.indexOf(row);
-              $scope.rowCollection.splice(index, 1);
-              index = $scope.displayed.indexOf(row);
-              $scope.displayed.splice(index, 1);
-          }
-          else {
-              toaster.pop('error', 'Error when deleting measure', data.data.description);
-          }
-          $('#deleteConfirmation').modal('hide');
-
-          },function errorCallback(response) {
-          toaster.pop('error', 'Error when deleting measure', response.message);
-        });
-      }
-
-      $scope.edit = function edit() {
-      }
-
-      $scope.$on('$viewContentLoaded', function() {
-        $scope.$emit('initReq');
-      });
-
-/*
-       function createRowCollection(){
-         var data = [];
-         for (var j = 0; j < 22; j++) {
-              data.push(createRandomItem());
-          }
-
-          return data;
-       }
-
-       function createRandomItem() {
-         var nameList = ['ViewItem', 'Search', 'BidEvent', 'user_dna', 'LAST_ITEMS_VIEWED'],
-             systemList = ['Bullseye', 'PDS', 'GPS', 'IDLS', 'Hadoop'],
-             dateList = ['2016-03-10', '2016-03-12', '2016-03-15', '2016-03-19', '2016-03-20'],
-             statusList = [0, 1, 2];
-
-           var
-               name = nameList[Math.floor(Math.random() * 5)],
-               system = Math.floor(Math.random() * 7),
-               type = Math.floor(Math.random() * 4),
-               description = 'Only for demo purpose',
-               createDate = dateList[Math.floor(Math.random() * 5)],
-               status = Math.floor(Math.random() * 3);
-
-           return{
-               name: name,
-               system: system,
-               type: type,
-               description: description,
-               createDate: createDate,
-               status:status
-           };
-       }
-*/
-    }]);
-});

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/js/controllers/sidebar-ctrl.js
----------------------------------------------------------------------
diff --git a/ui/js/controllers/sidebar-ctrl.js b/ui/js/controllers/sidebar-ctrl.js
deleted file mode 100644
index 7b5fdbf..0000000
--- a/ui/js/controllers/sidebar-ctrl.js
+++ /dev/null
@@ -1,191 +0,0 @@
-/*
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-*/
-
-define(['./module'], function(controllers) {
-    'use strict';
-    controllers.controller('SideBarCtrl', ['$scope', '$http', '$config', '$filter', '$timeout', '$compile', '$routeParams', '$barkChart', '$rootScope','$location', function($scope, $http, $config, $filter, $timeout, $compile, $routeParams, $barkChart, $rootScope,$location) {
-
-        var echarts = require('echarts');
-        var renderDataAssetPie = function(status) {
-            resizePieChart();
-            $scope.dataAssetPieChart = echarts.init($('#data-asset-pie')[0], 'dark');
-            $scope.dataAssetPieChart.setOption($barkChart.getOptionPie(status));
-        }
-        pageInit();
-
-        $scope.orgs = [];
-        $scope.finalData = [];
-        $scope.metricData = [];
-
-        function pageInit() {
-          var allDataassets = $config.uri.dataassetlist;
-              var health_url = $config.uri.statistics;
-              $scope.status = new Object();
-              $http.get(health_url).then(function successCallback(response){
-                  response = response.data;
-                  $scope.status.health = response.healthyJobCount;
-                  $scope.status.invalid = response.jobCount - response.healthyJobCount;
-                  // renderDataAssetPie($scope.status);
-                  sideBarList();
-              },function errorCallback(response){
-
-              });
-              var dataasset = 0;
-              // $http.get(allDataassets).then(function successCallback(data) {
-              //   angular.forEach(data.data,function(db){
-              //     angular.forEach(db,function(table){
-              //       dataasset = dataasset + 1;
-              //     });
-              //   });
-              //   $scope.dataasset = dataasset;
-              // });
-
-        }
-
-        $scope.$watch(function(){return $routeParams.sysName;}, function(value){
-          console.log('Watched value: ' + value);
-        });
-
-        $scope.draw = function(metric, parentIndex, index) {
-            var chartId = 'chart' + parentIndex + '-' + index;
-            document.getElementById(chartId).style.width = ($('.panel-heading').innerWidth()-20)+'px';
-            document.getElementById(chartId).style.height = '200px';
-            var myChart = echarts.init($('#'+chartId).get(0), 'dark');
-            metric.myOption = $barkChart.getOptionSide(metric);
-            myChart.setOption(metric.myOption);
-
-            $('#'+chartId).unbind('click');
-            $('#'+chartId).click(function(e) {
-              window.location.href = '/#!/detailed/'+$scope.finalData[parentIndex].metrics[index].name;
-            });
-
-        };
-
-        var showBig = function(metric){
-            $rootScope.showBigChart($barkChart.getOptionBig(metric));
-        }
-
-        function sideBarList(sysName){
-             var url_organization = $config.uri.organization;
-//            var url_organization = 'org.json';
-            $http.get(url_organization).then(function successCallback(res){
-               var orgNode = null;
-               angular.forEach(res.data, function(value,key) {
-               orgNode = new Object();
-               $scope.orgs.push(orgNode);
-               orgNode.name = key;
-               orgNode.assetMap = value;
-               });
-               $scope.originalOrg = angular.copy($scope.orgs);
-               var url_briefmetrics = $config.uri.dashboard;
-                $http.post(url_briefmetrics, {"query": {"match_all":{}},  "sort": [{"tmst": {"order": "asc"}}],"size":1000}).then(function successCallback(data) {
-//               $http.get('data.json').then(function successCallback(data){
-                   angular.forEach(data.data.hits.hits, function(sys) {
-                        var chartData = sys._source;
-                        chartData.sort = function(a,b){
-                        return a.tmst - b.tmst;
-                        }
-                   });
-               $scope.originalData = angular.copy(data.data);
-               $scope.myData = angular.copy($scope.originalData.hits.hits);
-               $scope.metricName = [];
-               for(var i = 0;i<$scope.myData.length;i++){
-                   $scope.metricName.push($scope.myData[i]._source.name);
-               }
-               $scope.metricNameUnique = [];
-               angular.forEach($scope.metricName,function(name){
-                   if($scope.metricNameUnique.indexOf(name) === -1){
-                        $scope.metricData[$scope.metricNameUnique.length] = new Array();
-                        $scope.metricNameUnique.push(name);
-                 }
-               });
-               $scope.metricsCount = $scope.metricNameUnique.length;
-
-               for(var i = 0;i<$scope.myData.length;i++){
-            //push every point to its metric
-                    for(var j = 0 ;j<$scope.metricNameUnique.length;j++){
-                        if($scope.myData[i]._source.name==$scope.metricNameUnique[j]){
-                            $scope.metricData[j].push($scope.myData[i]);
-                        }
-                    }
-                }
-               angular.forEach($scope.originalOrg,function(sys,parentIndex){
-                   var node = null;
-                   node = new Object();
-                   node.name = sys.name;
-                   node.dq = 0;
-                   node.metrics = new Array();
-                   angular.forEach($scope.metricData,function(metric,index){
-                        if(sys.assetMap.indexOf(metric[metric.length-1]._source.name)!= -1){
-                            var metricNode = new Object();
-                            metricNode.name = metric[metric.length-1]._source.name;
-                            metricNode.timestamp = metric[metric.length-1]._source.tmst;
-                            metricNode.dq = metric[metric.length-1]._source.matched/metric[metric.length-1]._source.total*100;
-                            metricNode.details = angular.copy(metric);
-                            node.metrics.push(metricNode);
-                        }
-                   });
-                   $scope.finalData.push(node);
-                });
-
-            if(!sysName){
-              $scope.backup_metrics = angular.copy($scope.finalData);
-            }
-            $timeout(function() {
-                resizeSideChart();
-            }, 0);
-           });
-          });
-        }
-
-        $(window).resize(function() {
-            console.log('sidebar resize');
-            if(window.innerWidth < 992) {
-              $('#rightbar').css('display', 'none');
-            } else {
-              $('#rightbar').css('display', 'block');
-              resizePieChart();
-//              $scope.dataAssetPieChart.resize();
-              resizeSideChart();
-            }
-        });
-
-        function resizeSideChart() {
-            $('#side-bar-metrics').css({
-                height: $('#mainContent').height()-$('#side-bar-stats').outerHeight()+70
-            });
-            angular.forEach($scope.finalData, function(sys, sysIndex) {
-            var sysIndex = sysIndex;
-            angular.forEach(sys.metrics, function(metric, index) {
-                if (!metric.tag) {
-                  $scope.draw(metric, sysIndex, index);
-                }
-            })
-          });
-        }
-
-        function resizePieChart() {
-          $('#data-asset-pie').css({
-              height: $('#data-asset-pie').parent().width(),
-              width: $('#data-asset-pie').parent().width()
-          });
-        }
-       }
-    ]);
-});

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/js/controllers/subscribemodel-ctrl.js
----------------------------------------------------------------------
diff --git a/ui/js/controllers/subscribemodel-ctrl.js b/ui/js/controllers/subscribemodel-ctrl.js
deleted file mode 100644
index 4c1cb57..0000000
--- a/ui/js/controllers/subscribemodel-ctrl.js
+++ /dev/null
@@ -1,411 +0,0 @@
-/*
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-*/
-
-define(['./module'], function(controllers) {
-    'use strict';
-    controllers.controller('SubscribeModelCtrl', ['$scope', '$http', '$config', '$location', 'toaster', '$timeout', '$route', '$filter', function($scope, $http, $config, $location, toaster, $timeout, $route, $filter) {
-        var dbtreeUrl = $config.uri.dbtree;
-        var schemaDefinitionUrl = $config.uri.schemadefinition;
-        var subscribeUrl = $config.uri.getsubscribe;
-        var allModelsUrl = $config.uri.allModels;
-
-        $scope.ruleSystems = $filter('strarr')('modelsystem');
-        $scope.ruleTypes = $filter('strarr')('modeltype');
-
-        $http.get(dbtreeUrl).success(function(data) {
-            var dbList = [];
-            if (data && data.length > 0) {
-                data.forEach(function(db) {
-                    var dbNode = {
-                        name: db.platform,
-                        fullname: db.platform,
-                        l1: true,
-                        children: []
-                    };
-                    dbList.push(dbNode);
-                    if (db.systems && db.systems.length > 0) {
-                        db.systems.forEach(function(system) {
-                            var dsNode = {
-                                name: system.name,
-                                fullname: db.platform + '#' + system.name,
-                                l2: true,
-                                children: []
-                            };
-                            dbNode.children.push(dsNode);
-                            dsNode.parent = dbNode;
-
-
-                            if (system.assets && system.assets.length > 0) {
-                                system.assets.sort(function(a, b){
-                                  return (a.name<b.name?-1:(a.name>b.name?1:0));
-                                });
-                                system.assets.forEach(function(schema) {
-                                    var schemaNode = {
-                                        id: schema.id,
-                                        name: schema.name,
-                                        fullname: db.platform + '#' + system.name + '#' + schema.name,
-                                        l3: true
-                                    };
-                                    schemaNode.parent = dsNode;
-                                    dsNode.children.push(schemaNode);
-                                });
-                            }
-                        });
-                    }
-
-                });
-            }
-            $scope.dbList = dbList;
-            $scope.dbListTarget = angular.copy(dbList);
-
-            $http.get(subscribeUrl + $scope.ntAccount).success(function(data){
-                $scope.oldSubscription = data;
-                //updateModelsTable();
-                initializeModelsTable();
-                // $scope.changeCB();
-            });
-
-
-
-
-
-        });
-
-        $http.get(allModelsUrl).success(function(data){
-            $scope.allModels = data;
-        });
-
-        var findPlatformIndex = function(pl, subscribes){
-            for (var i = 0; i < subscribes.length; i++) {
-                if(subscribes[i].platform == pl){
-                    return i;
-                }
-            };
-            return -1;
-        };
-
-        var findSystemIndex = function(sys, systems){
-            for (var i = 0; i < systems.length; i++) {
-                if(systems[i].system == sys){
-                    return i;
-                }
-            };
-            return -1;
-        };
-
-        var getSubscribes = function(){
-            var subscribes = [];
-            var checkedList = angular.element('input:checked');
-            angular.forEach(checkedList, function(item){
-                var value = item.value;
-                var res = value.split('#');
-                if(res.length == 2) {
-                    var pl = res[0];
-                    var sys = res[1];
-                    var plIndex = findPlatformIndex(pl, subscribes);
-                    if(plIndex == -1) {
-                        var newPlatform = {
-                            "platform": pl,
-                            "selectAll": false,
-                            "systems": [{
-                                "system": sys,
-                                "selectAll": true,
-                                "dataassets": []
-                            }]
-                        }
-                        subscribes.push(newPlatform);
-                    } else{
-                        var sysIndex = findSystemIndex(sys, subscribes[plIndex].systems);
-                        if(sysIndex == -1) {
-                            var newSys = {
-                                "system": sys,
-                                "selectAll": true,
-                                "dataassets": []
-                            };
-                            subscribes[plIndex].systems.push(newSys);
-                        }else{
-                            subscribes[plIndex].systems[sysIndex].selectAll = true;
-                        }
-                    }
-                } else if(res.length == 3){
-                    var pl = res[0];
-                    var sys = res[1];
-                    var asset = res[2];
-                    var plIndex = findPlatformIndex(pl, subscribes);
-                    if(plIndex == -1) {
-                        var newPlatform = {
-                            "platform": pl,
-                            "selectAll": false,
-                            "systems":[{
-                                "system": sys,
-                                "selectAll": false,
-                                "dataassets": [asset]
-                            }]
-
-                        };
-                        subscribes.push(newPlatform);
-                    } else{
-                        var sysIndex = findSystemIndex(sys, subscribes[plIndex].systems);
-                        if(sysIndex == -1) {
-                            var newSys = {
-                                "system": sys,
-                                "selectAll": false,
-                                "dataassets": [asset]
-                            };
-                            subscribes[plIndex].systems.push(newSys);
-                        }else{
-                            subscribes[plIndex].systems[sysIndex].dataassets.push(asset);
-                        }
-                    }
-                }
-            })
-            return subscribes;
-        };
-
-        $scope.$on('$viewContentLoaded', function() {
-            $scope.$emit('initReq');
-            resizeWindow();
-        });
-
-        $scope.$on('resizeHandler', function(e) {
-            if ($route.current.$$route.controller == "SubscribeModelCtrl") {
-                resizeWindow();
-            }
-        });
-
-        function resizeWindow() {
-            console.log(window.innerHeight);
-            console.log($('.formStep').offset().top);
-            console.log($('#footerwrap').outerHeight());
-                    $('.formStep').innerHeight(window.innerHeight  -  $('.formStep').offset().top - $('#footerwrap').outerHeight());
-                    $('fieldset').height(window.innerHeight  -  $('fieldset').offset().top - $('#footerwrap').outerHeight()- $('.btn-container').height() -80);
-                    $('.y-scrollable').css({
-                        'max-height': $('fieldset').height()
-                    });
-
-        }
-
-        $scope.form = {
-            submit: function(form) {
-                var subscribes = angular.copy(getSubscribes());
-                var sid = ($scope.oldSubscription=="")?null:$scope.oldSubscription._id;
-                var requestData = {
-                    "id": sid,
-                    // "id": $scope.ntAccount,
-                    "ntaccount": $scope.ntAccount,
-                    "subscribes": subscribes
-                };
-                this.data = requestData;
-                // $('#confirm').modal('show');
-                var newsubscribeUrl = $config.uri.newsubscribe;
-                $http.post(newsubscribeUrl, this.data).success(function(data){
-                    $location.path('/mydashboard').replace();
-                }).error(function(data){
-                    console.log("Fail to new subscription.");
-                });
-            },
-            save: function(form) {
-                var newsubscribeUrl = $config.uri.newsubscribe;
-                $http.post(newsubscribeUrl, this.data).success(function(data){
-                    $('#confirm').on('hidden.bs.modal', function(e) {
-                        $('#confirm').off('hidden.bs.modal');
-                        $location.path('/mydashboard').replace();
-                        $scope.$apply();
-                    });
-                    $('#confirm').modal('hide');
-                }).error(function(data){
-                    console.log("Fail to new subscription.");
-                });
-            }
-        };
-
-        var findAssetId = function(assetname, sysname, pfname, dbList){
-            for (var i = 0; i < dbList.length; i++) {
-                var platform = dbList[i];
-                if(platform.name == pfname){
-                    for (var j = 0; j < platform.children.length; j++) {
-                        var sys = platform.children[j];
-                        if(sys.name == sysname){
-                            for (var k = 0; k < sys.children.length; k++) {
-                                var asset = sys.children[k];
-                                if(assetname==asset.name) {
-                                    return asset.id;
-                                }
-                            };
-                        }
-                    };
-                }
-            };
-            return -1;
-        };
-
-          var getModelsInfo = function(assetname, sysname, allModels) {
-            var result = [];
-            angular.forEach(allModels, function(model) {
-                if(model.assetName == assetname
-                    && $scope.ruleSystems[model.system] == sysname) {
-                    var item = {
-                        'systemName': sysname,
-                        'assetName': assetname,
-                        'modelName': model.name,
-                        'modelType': $scope.ruleTypes[model.type],
-                        'desc': model.description
-                    }
-                    result.push(item);
-                }
-            });
-            return result;
-          }
-
-          var initializeModelsTable = function(){
-            if($scope.oldSubscription == undefined || $scope.oldSubscription == "" || $scope.oldSubscription.subscribes == undefined){
-                return;
-            }
-            $scope.schemaCollection = [];
-            var subscribes = $scope.oldSubscription.subscribes;
-            angular.forEach(subscribes, function(platform){
-                angular.forEach(platform.systems, function(sys){
-                    angular.forEach(sys.dataassets, function(asset){
-                        var models = getModelsInfo(asset, sys.system, $scope.allModels);
-                        $scope.schemaCollection = $scope.schemaCollection.concat(models);
-                    })
-                })
-            });
-
-          };
-
-          var updateModelsTable = function(){
-            $scope.schemaCollection = [];
-            var subscribes = angular.copy(getSubscribes());
-            angular.forEach(subscribes, function(platform){
-                angular.forEach(platform.systems, function(sys){
-                    angular.forEach(sys.dataassets, function(asset){
-                        var models = getModelsInfo(asset, sys.system, $scope.allModels);
-                        $scope.schemaCollection = $scope.schemaCollection.concat(models);
-                    })
-                })
-            });
-
-          };
-
-        $scope.isChecked = function(node) {
-            if($scope.oldSubscription == undefined || $scope.oldSubscription == "" || $scope.oldSubscription.subscribes == undefined){
-                return false;
-            } else {
-                var oldSubscribes = $scope.oldSubscription.subscribes;
-                if(node.l2){
-                    for (var i = 0; i < oldSubscribes.length; i++) {
-                        var subscribe = oldSubscribes[i];
-                        if(subscribe.platform == node.parent.name){
-                            for (var j = 0; j < subscribe.systems.length; j++) {
-                                var sys = subscribe.systems[j];
-                                if(sys.system == node.name && sys.selectAll){
-                                    return true;
-                                }
-                            };
-                        }
-                    };
-                }else if(node.l3){
-                    for (var i = 0; i < oldSubscribes.length; i++) {
-                        var subscribe = oldSubscribes[i];
-                        if(subscribe.platform == node.parent.parent.name){
-                            for (var j = 0; j < subscribe.systems.length; j++) {
-                                var sys = subscribe.systems[j];
-                                if(sys.system == node.parent.name){
-                                    for (var k = 0; k < sys.dataassets.length; k++) {
-                                        var asset = sys.dataassets[k];
-                                        if(asset == node.name) {
-                                            return true;
-                                        }
-                                    };
-                                }
-                            };
-                        }
-                    };
-                }
-            }
-            return false;
-        };
-
-        // setTimeout(function() {
-        //     updateModelsTable();
-        // }, 1000);
-
-        $scope.changeCB = function(node, evt) {
-            // $('input[type="checkbox"]').change(function(e) {
-
-                  var checked = $(evt.target).prop("checked"),
-                      container = $(evt.target).parent(),
-                      siblings = container.siblings();
-
-                  container.find('input[type="checkbox"]').prop({
-                    indeterminate: false,
-                    checked: checked
-                  });
-
-
-                   function checkSiblings(el) {
-
-                    var parent = el.parent().parent().parent(),
-                        all = true;
-
-                    el.siblings().each(function() {
-                      return all = ($(this).children('input[type="checkbox"]').prop("checked") === checked);
-                    });
-
-                    if (all && checked) {
-
-                      parent.children('input[type="checkbox"]').prop({
-                        indeterminate: false,
-                        checked: checked
-                      });
-
-                      checkSiblings(parent);
-
-                    } else if (all && !checked) {
-
-                      parent.children('input[type="checkbox"]').prop("checked", checked);
-                      parent.children('input[type="checkbox"]').prop("indeterminate", (parent.find('input[type="checkbox"]:checked').length > 0));
-                      checkSiblings(parent);
-
-                    } else {
-
-                      el.parents("li").children('input[type="checkbox"]').prop({
-                        indeterminate: true,
-                        checked: false
-                      });
-
-                    }
-
-                  };
-
-                  checkSiblings(container);
-
-                  updateModelsTable();
-            //}
-            // setTimeout(function() {
-            //     updateModelsTable();
-            // }, 300);
-            //updateModelsTable();
-        }
-
-
-
-    }]);
-});

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/js/controllers/viewrule-ctrl.js
----------------------------------------------------------------------
diff --git a/ui/js/controllers/viewrule-ctrl.js b/ui/js/controllers/viewrule-ctrl.js
deleted file mode 100644
index f0b2777..0000000
--- a/ui/js/controllers/viewrule-ctrl.js
+++ /dev/null
@@ -1,114 +0,0 @@
-/*
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-*/
-
-define(['./module'], function (controllers) {
-    'use strict';
-    controllers.controller('ViewRuleCtrl', ['$filter', '$scope', '$http', '$config', '$location', 'toaster', '$timeout', '$routeParams', '$barkChart', '$route',  function ($filter, $scope, $http, $config, $location, toaster, $timeout, $routeParams, $barkChart, $route) {
-
-      var echarts = require('echarts');
-
-      pageInit();
-
-      function pageInit() {
-        $scope.$emit('initReq');
-        console.log($routeParams);
-        var getModelUrl;
-        if(!isNaN($routeParams.modelname))
-            getModelUrl = $config.uri.getModel+"/"+$routeParams.modelname;
-        else getModelUrl = $config.uri.getModel+"?measureName="+$routeParams.modelname;
-        console.log(getModelUrl);
-        $http.get(getModelUrl).then(function successCallback(data){
-          $scope.ruleData = data.data;
-          $scope.sourceLength = $scope.ruleData.evaluateRule.rules.split('AND').length;
-          console.log($scope.sourceLength);
-
-          // console.log(JSON.parse($scope.ruleData.source.config));
-          $scope.sourceDB = $scope.ruleData.source.config.database;
-          console.log($scope.sourceDB);
-          $scope.targetDB = $scope.ruleData.target.config.database;
-          $scope.sourceTable = $scope.ruleData.source.config["table.name"];
-          $scope.targetTable = $scope.ruleData.target.config["table.name"];
-          console.log($scope.targetTable);
-          console.log($scope.targetDB);
-          console.log($scope.ruleData.evaluateRule.rules.split('AND'));
-//          $scope.targetLength = $scope.ruleData.evaluateRule.rules.split(';').length;
-
-          $scope.getNumber = function(n){return new Array(n);}
-        // }).error(function(data){
-        //   // errorMessage(0, 'Save model failed, please try again!');
-        //   toaster.pop('error', data.message);
-        // });
-         },function errorCallback(response) {
-          toaster.pop('error', 'Error when geting record', response.message);
-        });
-
-        $scope.anTypes = ['', 'History Trend Detection', 'Bollinger Bands Detection', 'Deviation Detection'];
-
-        var url= $config.uri.rulemetric+"/"+$routeParams.modelname;
-
-//        $http.get(url).success(function(res){
-//            $scope.modelresultData = res;
-//            if (res.details) {
-//              $('#viewrule-chart').height(200);
-//              $scope.ruleChart = echarts.init(document.getElementById('viewrule-chart'), 'dark');
-//              $scope.ruleChart.setOption($barkChart.getOptionSide(res));
-//
-//            }
-//            resizeWindow();
-//        }).error(function(data) {
-//          resizeWindow();
-//          toaster.pop('error', data.message);
-//        });
-      }
-
-      $scope.confirmDeploy = function(){
-        var deployModelUrl = $config.uri.enableModel + '/' + $scope.ruleData.basic.name;
-        var answer = confirm('Are you sure you want to deploy this model to production?')
-
-        if(answer){
-          $http.get(deployModelUrl).then(function successCallback(){
-            $scope.ruleData.basic.status = 2;
-            toaster.pop('info', 'Your model has been deployed to prduction!');
-          });
-        }
-
-      }
-
-
-      $scope.$on('resizeHandler', function(e) {
-            if ($route.current.$$route.controller == "ViewRuleCtrl") {
-                resizeWindow();
-            }
-        });
-
-      function resizeWindow(){
-
-            var h1 = $('#viewruleDefinition').height();
-            var h2 = $('#viewTestResult').height();
-            var height = Math.max(h1, h2);
-
-            $('#viewruleDefinition').height(height);
-            $('#viewTestResult').height(height);
-
-            if ($scope.ruleChart) {
-              $scope.ruleChart.resize();
-            }
-      }
-    }]);
-});

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/js/directives/bigchart.js
----------------------------------------------------------------------
diff --git a/ui/js/directives/bigchart.js b/ui/js/directives/bigchart.js
deleted file mode 100644
index 1274974..0000000
--- a/ui/js/directives/bigchart.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/*
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-*/
-
-define(['./module'], function (directives) {
-    'use strict';
-    directives.directive( 'bigChart', ['$compile', '$timeout', function( $compile, $timeout ) {
-      return {
-        restrict: 'AE',
-        templateUrl: '/pages/template/bigchart.html',
-        // compile: function(element, attrs){
-        //   return {
-        //     pre: function(scope, element, attrs){
-        //       // $('#bigChartShow').remove();
-        //       console.log('pre');
-        //
-        //     },
-        //     post: function(scope, element, attrs){
-        //       console.log('post');
-        //     }
-        //   };
-        // },
-        // preLink: function( scope, element, attrs ){
-        //   $('#bigChartShow').remove();
-        // },
-        // postLink: function( scope, element, attrs ){
-        //   alert('hello');
-        // // },
-        link: function( scope, element, attrs ) {
-          console.log(scope);
-          var getWidth = function(){
-            return window.innerWidth;
-          }
-          var getHeight = function(){
-            return window.innerHeight;
-          }
-
-        //  $('#bigChartShow').remove();
-          // if($('big-chart')){
-          //   if($('big-chart').length > 1){
-          //     $($('big-chart')[0]).remove();
-          //   }
-          // }
-
-          $timeout(function(){
-            $('#bigChartShow').css({height:getHeight(),
-                                    width: getWidth()
-                                  });
-
-            $(window).resize(function(){
-                $('#bigChartShow').css({height:getHeight(),
-                            width: getWidth()
-                          });
-            });
-          });
-
-          // scope.$watch('chartConfig', function(newValue){
-          //   resizeChart(newValue);
-          // });
-
-          // scope.$on('$routeChangeStart', function(){
-          //   $('#mainWindow').show();
-          //   $('#bigChartContainer').hide();
-          // });
-
-          // function resizeChart(config){
-          //   $timeout(function(){
-          //     config.options.chart.width = getWidth();
-          //     config.options.chart.height = getHeight();
-          //   });
-          // }
-
-          scope.closeBigChart = function(){
-            console.log('close big chart!');
-            $('#bigChartContainer').hide();
-            $('#mainWindow').show();
-
-          }
-        }
-      };
-    }]);
-});

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/js/directives/index.js
----------------------------------------------------------------------
diff --git a/ui/js/directives/index.js b/ui/js/directives/index.js
deleted file mode 100644
index 2b4409d..0000000
--- a/ui/js/directives/index.js
+++ /dev/null
@@ -1,20 +0,0 @@
-/*
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-*/
-
-define(['./treeview', './bigchart'], function () {});

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/js/directives/module.js
----------------------------------------------------------------------
diff --git a/ui/js/directives/module.js b/ui/js/directives/module.js
deleted file mode 100644
index eeabf14..0000000
--- a/ui/js/directives/module.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/*
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-*/
-
-define(['angular'], function (ng) {
-    'use strict';
-    return ng.module('app.directives', []);
-});

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/js/directives/treeview.js
----------------------------------------------------------------------
diff --git a/ui/js/directives/treeview.js b/ui/js/directives/treeview.js
deleted file mode 100644
index 3b7633c..0000000
--- a/ui/js/directives/treeview.js
+++ /dev/null
@@ -1,252 +0,0 @@
-/*
-  The MIT License (MIT)
-
-  Copyright (c) 2013 Steve
-
-  Permission is hereby granted, free of charge, to any person obtaining a copy of
-  this software and associated documentation files (the "Software"), to deal in
-  the Software without restriction, including without limitation the rights to
-  use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
-  the Software, and to permit persons to whom the Software is furnished to do so,
-  subject to the following conditions:
-
-  The above copyright notice and this permission notice shall be included in all
-  copies or substantial portions of the Software.
-
-  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
-  FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
-  COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
-  IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
-  CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-*/
-
-
-/*
-  Made some adaptation and the original copy is from https://github.com/eu81273/angular.treeview
-*/
-define(['./module'], function (directives) {
-    'use strict';
-    directives.directive( 'treeModel', ['$compile', function( $compile ) {
-      return {
-        restrict: 'A',
-        link: function ( scope, element, attrs ) {
-          //tree id
-          // var treeId = attrs.treeId;
-
-          //tree model
-          var treeModel = attrs.treeModel;
-
-          //node id
-          var nodeId = attrs.nodeId || 'id';
-
-          //node label
-          var nodeLabel = attrs.nodeLabel || 'label';
-
-          //children
-          var nodeChildren = attrs.nodeChildren || 'children';
-
-          //select label function name
-          var labelSelect = attrs.labelSelect || 'selectNodeLabel';
-
-          var l1Icon = attrs.l1Icon || 'fa fa-database',
-              l2Icon = attrs.l2Icon || 'fa fa-table';
-
-          //tree template
-          var template =
-            '<ul>' +
-              '<li ng-repeat="node in ' + treeModel + '" >' +
-                '<span ng-show=!node.' + nodeChildren + '.length>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>'+
-                '<i class="collapsed fa fa-caret-right" ng-show="node.' + nodeChildren + '.length && node.collapsed" ng-click="selectNodeHead(node)"></i>' +
-                '<i class="expanded fa fa-caret-down" ng-show="node.' + nodeChildren + '.length && !node.collapsed" ng-click="selectNodeHead(node)"></i>' +
-                '<i class="' + l1Icon + '" ng-show="node.l1"></i>'  +
-                '<i class="' + l2Icon + '" ng-show="node.l2"></i>&nbsp;'  +
-
-                //'<span ng-class="node.selected" ng-click="selectNodeLabel(node)">{{node.' + nodeLabel + '}}</span>' +
-                '<span ng-class="node.selected" ng-click="' + labelSelect + '(node)">{{node.' + nodeLabel + '}}</span>' +
-                // '<div ng-hide="node.collapsed" tree-model="node.' + nodeChildren + '" node-id=' + nodeId + ' node-label=' + nodeLabel + ' node-children=' + nodeChildren + '></div>' +
-                '<div ng-hide="node.collapsed" tree-model="node.' + nodeChildren + '" node-id=' + nodeId + ' node-label=' + nodeLabel + ' node-children=' + nodeChildren + ' label-select=' + labelSelect +'></div>' +
-              '</li>' +
-            '</ul>';
-
-
-          //check tree id, tree model
-          // if( treeId && treeModel ) {
-
-            //root node
-            if( attrs.angularTreeview ) {
-
-
-
-              //if node head clicks,
-              scope.selectNodeHead = scope.selectNodeHead || function( selectedNode ){
-
-                //Collapse or Expand
-                selectedNode.collapsed = !selectedNode.collapsed;
-              };
-
-              //if node label clicks,
-              scope[labelSelect] = scope[labelSelect] || function( selectedNode ){
-
-                //remove highlight from previous node
-                if( scope.currentNode && scope.currentNode.selected ) {
-                  scope.currentNode.selected = undefined;
-                }
-
-                if(selectedNode.children && selectedNode.children.length > 0){
-                  scope.selectNodeHead(selectedNode);
-                }else{
-                  //set highlight to selected node
-                  selectedNode.selected = 'selected';
-                }
-
-                //set currentNode
-                scope.currentNode = selectedNode;
-              };
-            }
-
-
-
-            //Rendering template.
-            element.html('').append( $compile( template )( scope ) );
-          // }
-        }
-      };
-    }]);
-
-    directives.directive( 'treeModelCheck', ['$compile', function( $compile ) {
-      return {
-        restrict: 'A',
-        link: function ( scope, element, attrs ) {
-          //tree id
-          // var treeId = attrs.treeId;
-
-          //tree model
-          var treeModel = attrs.treeModelCheck;
-
-          //node id
-          var nodeId = attrs.nodeId || 'id';
-
-          //node label
-          var nodeLabel = attrs.nodeLabel || 'label';
-
-          //children
-          var nodeChildren = attrs.nodeChildren || 'children';
-
-          //select label function name
-          var labelSelect = attrs.labelSelect || 'selectNodeLabel';
-
-          var l1Icon = attrs.l1Icon || 'fa fa-database',
-              l2Icon = attrs.l2Icon || 'fa fa-table';
-
-          //tree template
-          var template =
-            '<ul>' +
-              '<li ng-repeat="node in ' + treeModel + '">' +
-                '<i class="collapsed fa fa-caret-right" ng-show="node.' + nodeChildren + '.length && node.collapsed" ng-click="selectNodeHead(node)"></i>' +
-                '<i class="expanded fa fa-caret-down" ng-show="node.' + nodeChildren + '.length && !node.collapsed" ng-click="selectNodeHead(node)"></i>' +
-                '<span class="normal" ng-show="node.l3"></span>' +
-                '<input type="checkbox" ng-checked="isChecked(node)" ng-click="changeCB(node, $event)" ng-if="node.l2 || node.l3" value="{{node.fullname}}"/>&nbsp;' +
-                '<i class="' + l1Icon + '" ng-show="node.l1"></i>'  +
-                '<i class="' + l2Icon + '" ng-show="node.l2"></i>&nbsp;'  +
-
-                //'<span ng-class="node.selected" ng-click="selectNodeLabel(node)">{{node.' + nodeLabel + '}}</span>' +
-                '<span ng-class="node.selected">{{node.' + nodeLabel + '}}</span>' +
-                // '<div ng-hide="node.collapsed" tree-model="node.' + nodeChildren + '" node-id=' + nodeId + ' node-label=' + nodeLabel + ' node-children=' + nodeChildren + '></div>' +
-                '<div ng-hide="node.collapsed" tree-model-check="node.' + nodeChildren + '" node-id=' + nodeId + ' node-label=' + nodeLabel + ' node-children=' + nodeChildren + ' label-select=' + labelSelect +'></div>' +
-              '</li>' +
-            '</ul>';
-
-
-          //check tree id, tree model
-          // if( treeId && treeModel ) {
-
-            //root node
-            if( attrs.angularTreeviewcheck ) {
-              // if checkbox clicks,
-              scope.changeCB = scope.changeCB || function( selectedNode){
-                $('input[type="checkbox"]').change(function(e) {
-                  var checked = $(this).prop("checked"),
-                      container = $(this).parent(),
-                      siblings = container.siblings();
-
-                  container.find('input[type="checkbox"]').prop({
-                    indeterminate: false,
-                    checked: checked
-                  });
-
-                  function checkSiblings(el) {
-
-                    var parent = el.parent().parent().parent(),
-                        all = true;
-
-                    el.siblings().each(function() {
-                      return all = ($(this).children('input[type="checkbox"]').prop("checked") === checked);
-                    });
-
-                    if (all && checked) {
-
-                      parent.children('input[type="checkbox"]').prop({
-                        indeterminate: false,
-                        checked: checked
-                      });
-
-                      checkSiblings(parent);
-
-                    } else if (all && !checked) {
-
-                      parent.children('input[type="checkbox"]').prop("checked", checked);
-                      parent.children('input[type="checkbox"]').prop("indeterminate", (parent.find('input[type="checkbox"]:checked').length > 0));
-                      checkSiblings(parent);
-
-                    } else {
-
-                      el.parents("li").children('input[type="checkbox"]').prop({
-                        indeterminate: true,
-                        checked: false
-                      });
-
-                    }
-
-                  }
-
-                  checkSiblings(container);
-                });
-              };
-              //if node head clicks,
-              scope.selectNodeHead = scope.selectNodeHead || function( selectedNode ){
-
-                //Collapse or Expand
-                selectedNode.collapsed = !selectedNode.collapsed;
-              };
-
-              //if node label clicks,
-              scope[labelSelect] = scope[labelSelect] || function( selectedNode ){
-
-                //remove highlight from previous node
-                if( scope.currentNode && scope.currentNode.selected ) {
-                  scope.currentNode.selected = undefined;
-                }
-
-                if(selectedNode.children && selectedNode.children.length > 0){
-                  scope.selectNodeHead(selectedNode);
-                }else{
-                  //set highlight to selected node
-                  selectedNode.selected = 'selected';
-                }
-
-                //set currentNode
-                scope.currentNode = selectedNode;
-              };
-            }
-
-
-
-            //Rendering template.
-            element.html('').append( $compile( template )( scope ) );
-          // }
-        }
-      };
-    }]);
-
-});

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/js/filters/index.js
----------------------------------------------------------------------
diff --git a/ui/js/filters/index.js b/ui/js/filters/index.js
deleted file mode 100644
index 6665e6b..0000000
--- a/ui/js/filters/index.js
+++ /dev/null
@@ -1,20 +0,0 @@
-/*
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-*/
-
-define([ './strshorten', './strmap'], function () {});

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/js/filters/module.js
----------------------------------------------------------------------
diff --git a/ui/js/filters/module.js b/ui/js/filters/module.js
deleted file mode 100644
index d1c7fff..0000000
--- a/ui/js/filters/module.js
+++ /dev/null
@@ -1,25 +0,0 @@
-/*
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-*/
-
-define(['angular'], function (ng) {
-    'use strict';
-    return ng.module('app.filters', []).config(
-      ['$filterProvider', function($filterProvider){}]
-    );
-});

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/js/filters/strmap.js
----------------------------------------------------------------------
diff --git a/ui/js/filters/strmap.js b/ui/js/filters/strmap.js
deleted file mode 100644
index 0e43974..0000000
--- a/ui/js/filters/strmap.js
+++ /dev/null
@@ -1,71 +0,0 @@
-/*
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-*/
-
-define(['./module'], function (filters) {
-    'use strict';
-    var constants = {
-      modeltype: ['Accuracy', 'Validity', 'Anomaly Detection', 'Publish Metrics'],
-      scheduletype: ['Daily', 'Weekly', 'Monthly', 'Hourly'],
-      modelsystem: ['Bullseye', 'GPS', 'Hadoop', 'PDS', 'IDLS', 'Pulsar', 'Kafka', 'Sojourner', 'SiteSpeed', 'EDW'],
-      matchfunction: ['LENGTH', 'LOWER', 'UPPER', 'TRIM'],
-      //modelstatus: ['Testing', 'Need Verify', 'Deployed'],
-      modelstatus: ['Initial', 'Validation', 'Production'],
-      vatype: ['Defaut Count', 'Total Count', 'Null Count', 'Unique Count', 'Duplicate Count', 'Maximum', 'Minimum', 'Mean', 'Median', 'Regular Expression Matching', 'Pattern Frequency'],
-      antype: ['Default', 'History Trend Detection', 'Bollinger Bands Detection', 'Deviation Detection(Based on MAD)']
-    };
-
-    //get tha value by index from an array
-    filters.filter('strmap', function () {
-        return function (index, array) {
-            var result = index;
-            if(!!array && (array instanceof Array)  && index < array.length){
-              result = array[index];
-            }else if(typeof(array)==='string'){
-              if(constants[array] && index < constants[array].length){
-                result = constants[array][index];
-              }
-            }
-            return result;
-        }
-      });
-
-      //get the index of the value in array
-      filters.filter('stridx', function () {
-          return function (value, array) {
-              var result = -1;
-              if(!!array && (array instanceof Array)  && index < array.length){
-                result = array.indexOf(value);
-              }else if(typeof(array)==='string'){
-                if(constants[array]){
-                  result = constants[array].indexOf(value);
-                }
-              }
-              return result;
-          }
-        });
-
-        //Get the array by name
-        filters.filter('strarr', function () {
-            return function (name) {
-                return constants[name];
-            }
-          });
-
-
-});



[04/13] incubator-griffin git commit: refactor ui with angular2

Posted by gu...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/pages/jobs/confirmation-ac.html
----------------------------------------------------------------------
diff --git a/ui/pages/jobs/confirmation-ac.html b/ui/pages/jobs/confirmation-ac.html
deleted file mode 100644
index d7411fc..0000000
--- a/ui/pages/jobs/confirmation-ac.html
+++ /dev/null
@@ -1,86 +0,0 @@
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
--->
-
-<div class="container-fluid" id="viewJobContent" style="overflow:auto;">
-    <div class="row">
-        <h5 class="over-title margin-bottom-15">Basic information</h5>
-    </div><!--//row-->
-    <div class="row">
-
-        <div  class="col-lg-12 col-md-12 col-sm-12">
-            <div id="viewrule-definition" class="viewrule-content">
-                <div class="row">
-                    <label class="col-md-4 col-lg-4 col-sm-4">
-                        Source Pattern:
-                    </label>
-
-                    <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
-                        {{sourcePat}}
-                    </div>
-                </div>
-
-                <div class="row">
-                    <label class="col-md-4 col-lg-4 col-sm-4">
-                        Target Pattern:
-                    </label>
-
-                    <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
-                        {{targetPat}}
-                    </div>
-                </div>
-
-                <div class="row">
-                    <label class="col-md-4 col-lg-4 col-sm-4">
-                        Measure Name:
-                    </label>
-
-                    <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
-                        {{Measures[measure].name}}
-                    </div>
-                </div>
-
-                <div class="row">
-                    <label for="systemSelector" class="col-md-4 col-lg-4 col-sm-4">
-                        Start at:
-                    </label>
-
-                    <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
-                        {{jobStartTime}}&nbsp; {{timeDetail}}
-                    </div>
-                </div>
-
-                <div class="row">
-                    <label class="col-md-4 col-lg-4 col-sm-4">
-                        Interval:
-                    </label>
-
-                    <div class="col-md-8 col-lg-8 col-sm-8" style="color: #fff"  >{{periodTime}}&nbsp;{{timeType}}
-
-                    </div>
-                </div>
-            </div>
-        </div>
-
-
-    </div><!--//row-->
-
-    <br/>
-
-
-</div>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/pages/jobs/createjob-ac.html
----------------------------------------------------------------------
diff --git a/ui/pages/jobs/createjob-ac.html b/ui/pages/jobs/createjob-ac.html
deleted file mode 100644
index ca32e4d..0000000
--- a/ui/pages/jobs/createjob-ac.html
+++ /dev/null
@@ -1,182 +0,0 @@
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
--->
-
-<div class="mask" ng-if = 'maskOpen' ng-click="close()"></div>
-
-<div class="container-fluid">
-    <div class="row">
-        <h5 class="over-title margin-bottom-15">Create Job</h5>
-    </div><!--//row-->
-    <div class="row">
-        <form name="Form" id="form" novalidate>
-            <div  class="formStep" >
-                <label class="stepDesc">Please setup the job required information</label>
-                <div class="container-fluid">
-
-                    <!-- schema definition list -->
-                    <div class="col-md-12 col-lg-12 col-sm-12">
-                        <fieldset>
-                            <legend>
-                                Required Information
-                            </legend>
-                            <div class="y-scrollable">
-                                <div class="col-md-12 col-lg-12 col-sm-12">
-                                    <div class="form-group" ng-class="{'has-error':Form.ruleName.$dirty&&Form.ruleName.$invalid, 'has-success':Form.ruleName.$valid}">
-                                        <label class="col-md-2 col-lg-2 col-sm-2 control-label">
-                                            Source Pattern<span class="symbol required"></span>:
-                                        </label>
-
-                                        <div class="col-md-10 col-lg-10 col-sm-10 ">
-                                            <input type="text" class="form-control" ng-model="sourcePat" name="ruleName" placeholder="Please input the source partition, such as 'YYYYMMdd-HH'." required
-                                                   ng-pattern="/YYYYMMdd-HH/i"
-                                                   ng-maxlength='11'>
-                                            <span class="error text-small block " ng-if="Form.ruleName.$dirty && Form.ruleName.$error.pattern">Please input partition like 'YYYYMMdd-HH'</span>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col-md-12 col-lg-12 col-sm-12">
-                                    <div class="form-group" ng-class="{'has-error':Form.targetPat.$dirty&&Form.targetPat.$invalid, 'has-success':Form.targetPat.$valid}">
-                                        <label class="col-md-2 col-lg-2 col-sm-2 control-label">
-                                            Target Pattern<span class="symbol required"></span>:
-                                        </label>
-                                        <div class="col-md-10 col-lg-10 col-sm-10 ">
-                                            <input type="text" class="form-control" ng-model="targetPat" placeholder="Please input target partition of your job, such as 'YYYYMMdd-HH'."
-                                                   required ng-pattern="/YYYYMMdd-HH/i" ng-maxlength='11' name="targetPat">
-                                            <span class="error text-small block " ng-if="Form.targetPat.$dirty && Form.targetPat.$error.pattern">Please input partition like 'YYYYMMdd-HH'</span>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col-md-12 col-lg-12 col-sm-12">
-                                    <div class="form-group">
-                                        <label for="measureSelector" class="col-md-2 col-lg-2 col-sm-2 control-label">
-                                            Measure Name:
-                                        </label>
-
-                                        <div class="col-md-10 col-lg-10 col-sm-10 ">
-                                            <select id="measureSelector" class="form-control" ng-model="measure"  required>
-                                                <option ng-repeat="row in Measures" value="{{$index}}" >{{row.name}}</option>
-                                            </select>
-                                        </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">
-                                            Start At:
-                                        </label>
-
-                                        <div class="col-md-5 col-lg-5 col-sm-5 ">
-                                            <input type="text" id="datepicker" class="form-control" ng-model="jobStartTime" >
-                                        </div>
-
-                                        <div class="col-md-5 col-lg-5 col-sm-5" ng-class="{'has-error':Form.timeDetail.$invalid, 'has-success':Form.timeDetail.$valid}">
-                                            <input type="text" class="form-control" id="timeDetail" ng-click="showTime()" value="{{hourDetail}}:{{minuteDetail}}:{{secondDetail}} "
-                                                   ng-model="timeDetail"
-
-                                            >
-                                            <div id="timePopup" class="col-md-11 col-lg-11 col-sm-11" ng-if="isOpen">
-                                                <div id="hourSelector">
-                                                    <p ng-click="changeTime(0,24,true,hourDetail,1)"><i class="fa fa-caret-up" aria-hidden="true"></i></p>
-                                                    <p>{{hourDetail}}</p>
-                                                    <p ng-click="changeTime(0,24,false,hourDetail,1)"><i class="fa fa-caret-down" aria-hidden="true"></i></p>
-                                                </div>
-                                                <div class="division">
-                                                    <p>:</p>
-                                                </div>
-                                                <div id="minuteSelector">
-                                                    <p ng-click="changeTime(0,59,true,minuteDetail,2)"><i class="fa fa-caret-up" aria-hidden="true"></i></p>
-                                                    <p >{{minuteDetail}}</p>
-                                                    <p ng-click="changeTime(0,59,false,minuteDetail,2)"><i class="fa fa-caret-down" aria-hidden="true"></i></p>
-                                                </div>
-                                                <div class="division">
-                                                    <p>:</p>
-                                                </div>
-                                                <div id="secondSelector">
-                                                    <p ng-click="changeTime(0,59,true,secondDetail,3)"><i class="fa fa-caret-up" aria-hidden="true"></i></p>
-                                                    <p >{{secondDetail}}</p>
-                                                    <p ng-click="changeTime(0,59,false,secondDetail,3)"><i class="fa fa-caret-down" aria-hidden="true"></i></p>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col-md-12 col-lg-12 col-sm-12">
-                                    <div class="form-group">
-                                        <label for="systemSelector" class="col-md-2 col-lg-2 col-sm-2 control-label">
-                                            Interval:
-                                        </label>
-
-                                        <div class="col-md-5 col-lg-5 col-sm-5 ">
-                                            <input type="text" id="systemSelector" class="form-control" ng-model="periodTime"  required placeholder="How often it works"
-                                                   onblur="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
-                                                   onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}">
-                                        </div>
-                                        <div class="col-md-5 col-lg-5 col-sm-5 ">
-                                            <select id="timeSelector" class="form-control" ng-model="timeType" required>
-                                                <!--<option  value="hours" >hours</option>-->
-                                                <!--<option  value="minutes" >minutes</option>-->
-                                                <!--<option  value="seconds" >seconds</option>-->
-                                                <option ng-repeat="time in Times"  >{{time}}</option>
-                                            </select>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <div style="color:#b2c831">
-                                <p>
-                                    <i class="fa fa-info-circle"></i> After submitted, please go to "<a class="bark-link" href="#!/jobs">Jobs</a>" to check the job status
-                                </p>
-                            </div>
-
-                        </fieldset>
-                    </div>
-
-                    <div class="form-group btn-container" >
-                        <button class="btn btn-primary btn-o back-step btn-wide pull-left" ng-click="form.prev(Form)">
-                            <i class="fa fa-arrow-circle-left"></i> Back
-                        </button>
-                        <button class="btn btn-primary btn-o next-step btn-wide pull-right" ng-click="form.submit(Form)">
-                            <!-- <button class="btn btn-primary btn-o next-step btn-wide pull-right" data-toggle="modal" data-target="#confirm"> -->
-                            Submit
-                        </button>
-                    </div>
-                </div>
-            </div>
-
-            <div class="modal fade" id="confirm-job" role="dialog">
-                <div class="modal-dialog modal-xg modal-lg">
-                    <div class="modal-content">
-                        <div class="modal-header">
-                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-                            <h4 class="modal-title">Save the job with the below information?</h4>
-                        </div>
-                        <div class="modal-body">
-                            <ng-include src="'/pages/jobs/confirmation-ac.html'"/>
-                        </div>
-                        <div class="modal-footer">
-                            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
-                            <button type="button" class="btn btn-primary" ng-click="form.save()">Save</button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </form>
-    </div><!--//row-->
-</div>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/pages/jobs/createjob0.html
----------------------------------------------------------------------
diff --git a/ui/pages/jobs/createjob0.html b/ui/pages/jobs/createjob0.html
deleted file mode 100644
index 7c6506d..0000000
--- a/ui/pages/jobs/createjob0.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
--->
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Title</title>
-</head>
-<body>
-
-</body>
-</html>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/pages/jobs/delete-confirm.html
----------------------------------------------------------------------
diff --git a/ui/pages/jobs/delete-confirm.html b/ui/pages/jobs/delete-confirm.html
deleted file mode 100644
index 3f8094f..0000000
--- a/ui/pages/jobs/delete-confirm.html
+++ /dev/null
@@ -1,95 +0,0 @@
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
--->
-
-<div class="container-fluid" id="deleteContent" style="overflow:auto;">
-    <div class="row">
-        <h5 class="over-title margin-bottom-15">Basic information</h5>
-    </div><!--//row-->
-    <div class="row">
-
-        <div  class="col-lg-12 col-md-12 col-sm-12">
-            <div id="viewrule-definition" class="viewrule-content">
-                <div class="row">
-                    <label class="col-md-4 col-lg-4 col-sm-4">
-                        Job Name:
-                    </label>
-
-                    <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
-                        {{deletedRow.jobName}}
-                    </div>
-                </div>
-                <div class="row">
-                    <label class="col-md-4 col-lg-4 col-sm-4">
-                        Source Pattern:
-                    </label>
-
-                    <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
-                        {{deletedRow.sourcePattern}}
-                    </div>
-                </div>
-
-                <div class="row">
-                    <label class="col-md-4 col-lg-4 col-sm-4">
-                        Target Pattern:
-                    </label>
-
-                    <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
-                        {{deletedRow.targetPattern}}
-                    </div>
-                </div>
-
-                <div class="row">
-                    <label for="systemSelector" class="col-md-4 col-lg-4 col-sm-4">
-                        Next Fire Time:
-                    </label>
-
-                    <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
-                        {{deletedRow.nextFireTime}}
-                    </div>
-                </div>
-
-                <div class="row">
-                    <label class="col-md-4 col-lg-4 col-sm-4">
-                        Interval:
-                    </label>
-
-                    <div class="col-md-8 col-lg-8 col-sm-8" style="color: #fff">
-                        {{deletedRow.interval}}
-                    </div>
-                </div>
-
-                <div class="row">
-                    <label class="col-md-4 col-lg-4 col-sm-4">
-                        Group:
-                    </label>
-
-                    <div class="col-md-8 col-lg-8 col-sm-8" style="color: #fff">
-                        {{deletedRow.groupName}}
-                    </div>
-                </div>
-
-
-            </div>
-        </div>
-
-
-    </div><!--//row-->
-
-
-</div>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/pages/jobs/jobs.html
----------------------------------------------------------------------
diff --git a/ui/pages/jobs/jobs.html b/ui/pages/jobs/jobs.html
deleted file mode 100644
index f495abd..0000000
--- a/ui/pages/jobs/jobs.html
+++ /dev/null
@@ -1,135 +0,0 @@
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
--->
-
-<div >
-    <p>
-        <a class="btn btn-primary btn-o btn-wide" href="#!/createjob-ac"><i class="fa fa-plus"></i> Create Job</a>
-    </p>
-
-    <div id="modelContainer">
-        <table st-table="displayed" st-pipe="pagingJob" class="table table-striped">
-            <thead>
-            <tr style="background-color:#7D95CC">
-                <th st-ratio="15">Job Name</th>
-                <th st-ratio="15">Source Pattern</th>
-                <th st-ratio="15">Target Pattern</th>
-                <th st-ratio="15">Previous Fire Time</th>
-
-                <th st-ratio="20">Next Fire Time</th>
-                <th st-ratio="15">Trigger State</th>
-
-                <th st-ratio="5">Interval</th>
-                <th st-ratio="5">Action</th>
-            </tr>
-            </thead>
-            <tbody>
-            <tr ng-if="!rowCollection || rowCollection.length == 0">
-                <td colspan="7" style="text-align:center">No content!</td>
-            </tr>
-            </tbody>
-            <tbody ng-repeat="row in displayed" ng-init="p_index=$index">
-            <tr ng-click = "showInstances(row)">
-                <td ng-class="{accordion:true}"  style="cursor: pointer;">
-                    <i ng-show="!row.showDetail" class="fa fa-chevron-circle-right blue"></i>
-                    <i ng-show="row.showDetail" class="fa fa-chevron-circle-down blue"></i>
-                    {{row.jobName}}
-                    <!-- -{{(row.createTime | date: 'yyyy/MM/dd HH:mm:ss') || 'N/A' }} -->
-                </td>
-                <td>{{row.sourcePattern}}</td>
-                <td>{{row.targetPattern|strmap:'modeltype'}}</td>
-                <td ng-show="row.previousFireTime==-1">--/--/-- &nbsp;&nbsp;--:--</td>
-                <td ng-show="row.previousFireTime!=-1">{{(row.previousFireTime | date: 'yyyy/MM/dd HH:mm:ss') || 'N/A' }}</td>
-                <td>{{(row.nextFireTime | date: 'yyyy/MM/dd HH:mm:ss') || 'N/A' }}</td>
-                <td>
-                    <span ng-if='row.triggerState == "NORMAL"' class="normal">{{row.triggerState}}
-                    </span>
-                    <span ng-if='row.triggerState != "NORMAL"' class = 'unnormal'>{{row.triggerState}}</span>
-                </td>
-                <td>{{row.Interval}}</td>
-                <td>
-                    &nbsp;
-                    <a ng-class="" href="" ng-click="remove(row)" title="delete" style="text-decoration:none">
-                        <i class="fa fa-trash-o"></i>
-                    </a>
-                    &nbsp;
-                </td>
-            </tr>
-            <tr ng-show="row.showDetail">
-                <td colspan="7" style="padding:20px 30px 10px 30px;">
-                    <table st-table="currentInstances" st-pipe="pagingInstances" class="table table-striped">
-                        <thead>
-                        <tr style="background-color:#7D95CC">
-                            <th style="width:30%" >AppID</th>
-                            <!-- <th style="width:20%" >SessionID</th> -->
-                            <th style="width:25%" >Time</th>
-                            <th style="width:20%" >State</th>
-                        </tr>
-                        </thead>
-                        <tbody >
-                        <tr ng-if="!row_currentInstances || row_currentInstances.length == 0">
-                            <td colspan="7" style="text-align:center">No content.</td>
-                        </tr>
-                        <tr ng-repeat="item in currentInstances track by $index" >
-                            <td><a href={{item.appUri}} target="_blank">{{item.appId}}</a></td>
-                            <!-- <td>{{item.sessionId}}</td> -->
-                            <td>{{item.timestamp | date: 'yyyy/MM/dd HH:mm:ss'}}</td>
-                            <td>{{item.state}}</td>
-                        </tr>
-                        <br>
-
-                        </tbody>
-                        <tfoot>
-                        <tr>
-                            <td colspan="5" class="text-center">
-                                <div st-pagination="" st-items-by-page="10" st-displayed-pages="5"></div>
-                            </td>
-                        </tr>
-                        </tfoot>
-                    </table>
-                </td>
-            </tr>
-            </tbody>
-            <tfoot>
-            <tr>
-                <td colspan="8" class="text-right">
-                    <div  st-items-by-page="10" st-pagination="" st-displayed-pages="10">
-                    </div>
-                </td>
-            </tr>
-            </tfoot>
-        </table>
-    </div>
-    <div class="modal fade" id="deleteJobConfirmation" role="dialog">
-        <div class="modal-dialog modal-xg modal-lg">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-                    <h4 class="modal-title">Delete the job with the below information?</h4>
-                </div>
-                <div class="modal-body">
-                    <ng-include src="'/pages/jobs/delete-confirm.html'"/>
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-primary" ng-click="confirmDelete()">Yes</button>
-                    <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/pages/measures/confirmation-ac.html
----------------------------------------------------------------------
diff --git a/ui/pages/measures/confirmation-ac.html b/ui/pages/measures/confirmation-ac.html
deleted file mode 100644
index a044951..0000000
--- a/ui/pages/measures/confirmation-ac.html
+++ /dev/null
@@ -1,122 +0,0 @@
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
--->
-<div class="container-fluid" id="viewruleContent" style="overflow:auto;">
-  <div class="row">
-    <h5 class="over-title margin-bottom-15">Basic information</h5>
-  </div><!--//row-->
-  <div class="row">
-
-    <div  class="col-lg-12 col-md-12 col-sm-12">
-      <div id="viewrule-definition" class="viewrule-content">
-        <div class="row">
-          <label class="col-md-4 col-lg-4 col-sm-4">
-            Measure Name:
-          </label>
-
-          <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
-            {{basic.name}}
-          </div>
-        </div>
-
-        <div class="row">
-          <label class="col-md-4 col-lg-4 col-sm-4">
-            Measure Description:
-          </label>
-
-          <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
-            {{basic.desc}}
-          </div>
-        </div>
-
-        <div class="row">
-          <label class="col-md-4 col-lg-4 col-sm-4">
-            Measure Type:
-          </label>
-
-          <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
-            {{basic.type|strmap:ruleTypes}}
-          </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">
-            {{basic.system}}
-          </div>
-        </div>
-
-        <div class="row">
-          <label class="col-md-4 col-lg-4 col-sm-4">
-            DataAsset:
-          </label>
-
-          <div class="col-md-8 col-lg-8 col-sm-8" style="color: #fff"  >{{dataAsset}}
-
-          </div>
-        </div>
-
-        <div class="row">
-          <label class="col-md-4 col-lg-4 col-sm-4">
-            Owner:
-          </label>
-
-          <div class="col-md-8 col-lg-8 col-sm-8" style="color: #fff">
-            {{basic.owner}}
-          </div>
-        </div>
-      </div>
-    </div>
-
-
-  </div><!--//row-->
-
-  <br/>
-  <h5 class="row">Mapping rules</h5>
-  <div class="row">
-
-    <p>{{rules}}</p>
-
-    <p>
-      <label style="color:#B2C831">Accuracy Calculation Formula as Below:</label>
-    </p>
-
-    <div class="col-md-12 col-lg-12 col-sm-12" style="color:#fff;font-size:16px;display: flex;align-items: center">
-
-      <div class="" style="text-align:right;display:block;float:left;width:20%;">
-        Accuracy Rate(%) =
-      </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">{{form.data.mappings.length}}</span><span style="color:green;">{{currentNodeTarget.name}}</span> and <span class="badge">{{form.data.mappings.length}}</span> <span style="color:green;">{{currentNode.name}}</span>  fields
-        </div>
-        <div class="">
-          Total Count of records in <span style="color:green;font-weight:bold;">{{currentNode.parent[0].dbName}}.{{currentNodeTarget.name}}</span>
-        </div>
-      </div>
-      <div class="" style="text-align:left;display:block;float:left;width:10%;">
-        x 100%
-      </div>
-
-    </div>
-  </div>
-
-</div>

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/pages/measures/confirmation-an.html
----------------------------------------------------------------------
diff --git a/ui/pages/measures/confirmation-an.html b/ui/pages/measures/confirmation-an.html
deleted file mode 100644
index 9c009b2..0000000
--- a/ui/pages/measures/confirmation-an.html
+++ /dev/null
@@ -1,147 +0,0 @@
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
--->
-<div class="container-fluid" id="viewruleContent" style="overflow:auto;">
-  <div class="row">
-    <h5 class="over-title margin-bottom-15">Basic information</h5>
-  </div><!--//row-->
-  <div class="row">
-
-    <div  class="col-lg-12 col-md-12 col-sm-12">
-        <div id="viewrule-definition" class="viewrule-content">
-          <div class="row">
-            <label class="col-md-4 col-lg-4 col-sm-4">
-              Model Name:
-            </label>
-
-            <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
-              {{form.data.basic.name}}
-            </div>
-          </div>
-
-          <div class="row">
-            <label class="col-md-4 col-lg-4 col-sm-4">
-              Model Definition:
-            </label>
-
-            <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
-              {{form.data.basic.desc}}
-            </div>
-          </div>
-
-          <div class="row">
-            <label class="col-md-4 col-lg-4 col-sm-4">
-              Model Type:
-            </label>
-
-            <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
-              {{form.data.basic.type|strmap:ruleTypes}}
-            </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">
-              {{form.data.basic.system|strmap:ruleSystems}}
-            </div>
-          </div>
-
-          <div class="row">
-            <label class="col-md-4 col-lg-4 col-sm-4">
-              DataAsset:
-            </label>
-
-            <div class="col-md-8 col-lg-8 col-sm-8" style="color: #fff">
-              {{form.data.basic.dataaset}}
-            </div>
-          </div>
-
-          <div class="row">
-            <label class="col-md-4 col-lg-4 col-sm-4">
-              Threshold:
-            </label>
-
-            <div class="col-md-8 col-lg-8 col-sm-8" style="color: #fff">
-              {{form.data.basic.threshold}}
-            </div>
-          </div>
-
-          <div class="row">
-            <label class="col-md-4 col-lg-4 col-sm-4">
-              Schedule Type:
-            </label>
-
-            <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
-              {{form.data.basic.scheduleType|strmap:scheduleTypes}}
-            </div>
-          </div>
-
-          <div class="row">
-            <label class="col-md-4 col-lg-4 col-sm-4">
-              Notification email:
-            </label>
-
-            <div class="col-md-8 col-lg-8 col-sm-8" style="color: #fff">
-              {{form.data.basic.email}}
-            </div>
-          </div>
-
-          <div class="row">
-            <label class="col-md-4 col-lg-4 col-sm-4">
-              Owner:
-            </label>
-
-            <div class="col-md-8 col-lg-8 col-sm-8" style="color: #fff">
-              {{form.data.basic.owner}}
-            </div>
-        </div>
-      </div>
-    </div>
-
-
-  </div><!--//row-->
-
-  <br/>
-  <h5 class="row">Key information</h5>
-  <div class="row">
-    <div  class="col-lg-12 col-md-12 col-sm-12">
-        <div id="viewrule-definition" class="viewrule-content">
-          <div class="row">
-            <label class="col-md-4 col-lg-4 col-sm-4">
-              Detection type:
-            </label>
-
-            <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
-              {{form.anType|strmap:anTypes}}
-            </div>
-          </div>
-          <div class="row-fluid">
-            <img ng-if="form.anType == 1" src="/img/yoy.png" style="max-height: 300px;width:100%"/>
-            <img ng-if="form.anType == 2" src="/img/bollinger.png" style="max-height: 400px;width:100%"/>
-          </div>
-
-
-        </div>
-    </div>
-
-  </div>
-
-</div>

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/pages/measures/confirmation-pu.html
----------------------------------------------------------------------
diff --git a/ui/pages/measures/confirmation-pu.html b/ui/pages/measures/confirmation-pu.html
deleted file mode 100644
index 07725ea..0000000
--- a/ui/pages/measures/confirmation-pu.html
+++ /dev/null
@@ -1,161 +0,0 @@
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
--->
-<div class="container-fluid" id="viewruleContent" style="overflow:auto;">
-  <div class="row">
-    <h5 class="over-title margin-bottom-15">Basic information</h5>
-  </div><!--//row-->
-  <div class="row">
-
-    <div  class="col-lg-12 col-md-12 col-sm-12">
-        <div id="viewrule-definition" class="viewrule-content">
-          <div class="row">
-            <label class="col-md-4 col-lg-4 col-sm-4">
-              Model Name:
-            </label>
-
-            <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
-              {{form.data.basic.name}}
-            </div>
-          </div>
-
-          <div class="row">
-            <label class="col-md-4 col-lg-4 col-sm-4">
-              Model Definition:
-            </label>
-
-            <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
-              {{form.data.basic.desc}}
-            </div>
-          </div>
-
-          <div class="row">
-            <label class="col-md-4 col-lg-4 col-sm-4">
-              Model Type:
-            </label>
-
-            <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
-              {{form.data.basic.type|strmap:ruleTypes}}
-            </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">
-              {{form.data.basic.system|strmap:ruleSystems}}
-            </div>
-          </div>
-
-          <div class="row">
-            <label class="col-md-4 col-lg-4 col-sm-4">
-              DataAsset:
-            </label>
-
-            <div class="col-md-8 col-lg-8 col-sm-8" style="color: #fff">
-              {{form.data.basic.dataaset}}
-            </div>
-          </div>
-
-          <div class="row">
-            <label class="col-md-4 col-lg-4 col-sm-4">
-              Threshold:
-            </label>
-
-            <div class="col-md-8 col-lg-8 col-sm-8" style="color: #fff">
-              {{form.data.basic.threshold}}
-            </div>
-          </div>
-
-          <div class="row">
-            <label class="col-md-4 col-lg-4 col-sm-4">
-              Schedule Type:
-            </label>
-
-            <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
-              {{form.data.basic.scheduleType|strmap:scheduleTypes}}
-            </div>
-          </div>
-
-          <div class="row">
-            <label class="col-md-4 col-lg-4 col-sm-4">
-              Notification email:
-            </label>
-
-            <div class="col-md-8 col-lg-8 col-sm-8" style="color: #fff">
-              {{form.data.basic.email}}
-            </div>
-          </div>
-
-          <div class="row">
-            <label class="col-md-4 col-lg-4 col-sm-4">
-              Owner:
-            </label>
-
-            <div class="col-md-8 col-lg-8 col-sm-8" style="color: #fff">
-              {{form.data.basic.owner}}
-            </div>
-          </div>
-
-
-      </div>
-    </div>
-
-
-  </div><!--//row-->
-
-  <br/>
-  <h5 class="row">Extra information</h5>
-  <div class="row">
-    <div  class="col-lg-12 col-md-12 col-sm-12">
-        <div id="viewrule-definition" class="viewrule-content">
-
-          <div class="row">
-            <label class="col-md-4 col-lg-4 col-sm-4">
-              Publish URL:
-            </label>
-
-            <div class="col-md-8 col-lg-8 col-sm-8" style="color: #fff">
-              {{form.data.extra.publishUrl}}
-            </div>
-          </div>
-
-          <div class="row">
-            <label class="col-md-4 col-lg-4 col-sm-4">
-              Publish data format:
-            </label>
-
-            <div class="col-md-8 col-lg-8 col-sm-8" style="color: #fff">
-              <pre style="background-color:transparent;color:inherit;border:none">Method: POST
-Endpoint: {{form.publishUrl}}
-Body:
-{
-"metricName": "{{form.basic.name}}",
-"timestamp": 1463373496583,
-"value": 99.9
-}</pre>
-            </div>
-          </div>
-        </div>
-    </div>
-
-  </div>
-
-</div>

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/pages/measures/confirmation-va.html
----------------------------------------------------------------------
diff --git a/ui/pages/measures/confirmation-va.html b/ui/pages/measures/confirmation-va.html
deleted file mode 100644
index ab0aac4..0000000
--- a/ui/pages/measures/confirmation-va.html
+++ /dev/null
@@ -1,161 +0,0 @@
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
--->
-<div class="container-fluid" id="viewruleContent" style="overflow:auto;">
-  <div class="row">
-    <h5 class="over-title margin-bottom-15">Basic information</h5>
-  </div><!--//row-->
-  <div class="row">
-
-    <div  class="col-lg-12 col-md-12 col-sm-12">
-        <div id="viewrule-definition" class="viewrule-content">
-          <div class="row">
-            <label class="col-md-4 col-lg-4 col-sm-4">
-              Model Name:
-            </label>
-
-            <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
-              {{form.data.basic.name}}
-            </div>
-          </div>
-
-          <div class="row">
-            <label class="col-md-4 col-lg-4 col-sm-4">
-              Model Definition:
-            </label>
-
-            <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
-              {{form.data.basic.desc}}
-            </div>
-          </div>
-
-          <div class="row">
-            <label class="col-md-4 col-lg-4 col-sm-4">
-              Model Type:
-            </label>
-
-            <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
-              {{form.data.basic.type|strmap:ruleTypes}}
-            </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">
-              {{form.data.basic.system|strmap:ruleSystems}}
-            </div>
-          </div>
-
-          <div class="row">
-            <label class="col-md-4 col-lg-4 col-sm-4">
-              DataAsset:
-            </label>
-
-            <div class="col-md-8 col-lg-8 col-sm-8" style="color: #fff">
-              {{form.data.basic.dataaset}}
-            </div>
-          </div>
-
-          <div class="row" ng-show="form.data.extra.vaType=='9'">
-            <label class="col-md-4 col-lg-4 col-sm-4">
-              Regular Expression:
-            </label>
-
-            <div class="col-md-8 col-lg-8 col-sm-8" style="color: #fff">
-              {{form.data.basic.regex}}
-            </div>
-          </div>
-
-          <div class="row">
-            <label class="col-md-4 col-lg-4 col-sm-4">
-              Threshold:
-            </label>
-
-            <div class="col-md-8 col-lg-8 col-sm-8" style="color: #fff">
-              {{form.data.basic.threshold}}
-            </div>
-          </div>
-
-          <div class="row">
-            <label class="col-md-4 col-lg-4 col-sm-4">
-              Schedule Type:
-            </label>
-
-            <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
-              {{form.data.basic.scheduleType|strmap:scheduleTypes}}
-            </div>
-          </div>
-
-          <div class="row">
-            <label class="col-md-4 col-lg-4 col-sm-4">
-              Notification email:
-            </label>
-
-            <div class="col-md-8 col-lg-8 col-sm-8" style="color: #fff">
-              {{form.data.basic.email}}
-            </div>
-          </div>
-
-          <div class="row">
-            <label class="col-md-4 col-lg-4 col-sm-4">
-              Owner:
-            </label>
-
-            <div class="col-md-8 col-lg-8 col-sm-8" style="color: #fff">
-              {{form.data.basic.owner}}
-            </div>
-        </div>
-      </div>
-    </div>
-
-
-  </div><!--//row-->
-
-  <br/>
-  <h5 class="row">Key information</h5>
-  <div class="row">
-    <div  class="col-lg-12 col-md-12 col-sm-12">
-        <div id="viewrule-definition" class="viewrule-content">
-          <div class="row">
-            <label class="col-md-4 col-lg-4 col-sm-4">
-              Validity type:
-            </label>
-
-            <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
-              {{form.vaType|strmap:vaTypes}}
-            </div>
-          </div>
-
-          <div class="row">
-            <label class="col-md-4 col-lg-4 col-sm-4">
-              Selected column:
-            </label>
-
-            <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
-              {{currentNode.parent.name}}.{{currentNode.name}}.{{form.selection}}
-            </div>
-          </div>
-        </div>
-    </div>
-
-  </div>
-
-</div>

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/pages/measures/createrule-ac.html
----------------------------------------------------------------------
diff --git a/ui/pages/measures/createrule-ac.html b/ui/pages/measures/createrule-ac.html
deleted file mode 100644
index f393673..0000000
--- a/ui/pages/measures/createrule-ac.html
+++ /dev/null
@@ -1,436 +0,0 @@
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
--->
-<div class="container-fluid">
-  <div class="row">
-    <h5 class="over-title margin-bottom-15">Create Measure</h5>
-  </div><!--//row-->
-  <div class="row">
-    <form name="Form" id="form" novalidate>
-      <div id="wizard" class="swMain" >
-        <ul>
-          <li ng-click="form.goTo(Form, 1)">
-            <a href="" ng-class="{'selected' : currentStep >= 1, 'done' : currentStep > 1}" class="selected" style="">
-              <div class="stepNumber">
-                1
-              </div>
-              <span class="stepDesc text-small"> Choose Source </span>
-            </a>
-          </li>
-          <li ng-click="form.goTo(Form, 2)">
-            <a href="" ng-class="{'selected' : currentStep >= 2, 'done' : currentStep > 2}" class="" style="">
-              <div class="stepNumber">
-                2
-              </div>
-              <span class="stepDesc text-small"> Choose Target </span>
-            </a>
-          </li>
-          <li ng-click="form.goTo(Form, 3)">
-            <a href="" ng-class="{'selected' : currentStep >= 3, 'done' : currentStep > 3}" class="" style="">
-              <div class="stepNumber">
-                3
-              </div>
-              <span class="stepDesc text-small"> Mapping Source and Target </span>
-            </a>
-          </li>
-          <li ng-click="form.goTo(Form, 4)">
-            <a href="" ng-class="{'selected' : currentStep >= 4, 'done' : currentStep > 4}">
-              <div class="stepNumber">
-                4
-              </div>
-              <span class="stepDesc text-small"> Configuration </span>
-            </a>
-          </li>
-        </ul>
-      </div>
-
-        <div id="step-1" ng-show="currentStep == 1" class="formStep" >
-          <label class="stepDesc">This step let you choose the single source of truth for data quality comparision with target. Currently you can only select the attributes from one schema</label>
-          <div class="container-fluid">
-            <!-- select db tree -->
-            <div class="col-md-4 col-lg-4 col-sm-4">
-              <fieldset>
-                <legend>Please select schema</legend>
-                <!--<div class="add-dataset" style="color:#b2c831">-->
-                  <!--<a class="bark-link" href="#/createdataasset">Cannot find your DataAsset? Click here to add</a>-->
-                <!--</div>-->
-                <div angular-treeview="true"
-                     tree-model="dbList"
-                     node-id="id"
-                     node-label="name"
-                     node-children="children"
-                     l1-icon="fa fa-database"
-                     l2-icon="fa fa-table"
-                     class="y-scrollable">
-                </div>
-
-              </fieldset>
-            </div>
-
-            <!-- schema definition list -->
-            <div class="col-md-8 col-lg-8 col-sm-8">
-              <fieldset>
-                <legend>
-                  Select attributes
-                </legend>
-                <div class="y-scrollable">
-                  <div>
-                    <label>View schema:</label> <i ng-show="currentNode.parent" style="color:#fff;font-weight: bold;">{{currentNode.parent.name}}.{{currentNode.name}}</i>
-                  </div>
-                  <div>
-                    <table st-table="schemaCollection" class="table table-striped">
-                      <thead>
-                      <tr style="background-color:#7D95CC">
-                        <th><input type="checkbox" ng-click="toggleAll()" ng-model="selectedAll"/></th>
-                        <th>Column Name</th>
-                        <th>Type</th>
-                        <th>Comment</th>
-                      </tr>
-                      </thead>
-                      <tbody>
-                      <tr ng-if="!schemaCollection || schemaCollection.length == 0">
-                        <td colspan="5" style="text-align:center" ><span class="highlight">Please select a schema from the left tree first</span></td>
-                      </tr>
-                      <tr ng-repeat="row in schemaCollection">
-                        <td><input type="checkbox"
-                                   value="{{currentNode.name + '.' + row.name}}"
-                                   ng-checked="selection.indexOf(currentNode.name + '.' + row.name) > -1"
-                                   ng-click="toggleSelection($event)"
-                                   ng-model="row.selected"
-                        />
-                        </td>
-                        <td>{{row.name}}</td>
-                        <td>{{row.type}}</td>
-                        <td>{{row.comment}}</td>
-                        <!--<td class="highlight">{{row.sample}}</td>-->
-                      </tr>
-                      </tbody>
-                    </table>
-                  </div>
-                </div>
-              </fieldset>
-            </div>
-
-            <div class="form-group btn-container">
-              <button class="btn btn-primary btn-o next-step btn-wide pull-right" ng-click="form.next(Form)">
-                Next <i class="fa fa-arrow-circle-right"></i>
-              </button>
-            </div>
-
-          </div>
-
-        </div>
-
-
-
-        <div id="step-2" ng-show="currentStep == 2" class="formStep" >
-          <label class="stepDesc">This step let you choose the target for data quality comparision with source</label>
-          <div class="container-fluid">
-            <!-- select db tree -->
-            <div class="col-md-4 col-lg-4 col-sm-4">
-              <fieldset>
-                <legend>Please select schema</legend>
-                <div angular-treeview="true"
-                     tree-model="dbListTarget"
-                     node-id="id"
-                     node-label="name"
-                     node-children="children"
-                     label-select="selectNodeLabelTarget"
-                     l1-icon="fa fa-database"
-                     l2-icon="fa fa-table"
-                     class="y-scrollable">
-                </div>
-
-              </fieldset>
-            </div>
-
-            <!-- schema definition list -->
-            <div class="col-md-8 col-lg-8 col-sm-8">
-              <fieldset>
-                <legend>
-                  Select attributes
-                </legend>
-                <div class="y-scrollable">
-                  <div>
-                    <label>View schema:</label> <i ng-show="currentNodeTarget.parent" style="color:#fff;font-weight: bold;">{{currentNodeTarget.parent.name}}.{{currentNodeTarget.name}}</i>
-                  </div>
-                  <div>
-                    <table st-table="schemaCollection" class="table table-striped">
-                      <thead>
-                      <tr style="background-color:#7D95CC">
-                        <th><input type="checkbox" ng-click="toggleAllTarget()" ng-model="selectedAllTarget"/></th>
-                        <th>Column Name</th>
-                        <th>Type</th>
-                        <th>Comment</th>
-
-                      </tr>
-                      </thead>
-                      <tbody>
-                      <tr ng-if="!schemaCollectionTarget || schemaCollectionTarget.length == 0">
-                        <td colspan="5" style="text-align:center" ><span class="highlight">Please select a schema from the left tree first</span></td>
-                      </tr>
-                      <tr ng-repeat="row in schemaCollectionTarget">
-                        <td><input type="checkbox"
-                                   value="{{currentNodeTarget.name + '.' + row.name}}"
-                                   ng-checked="selectionTarget.indexOf(currentNodeTarget.name + '.' + row.name) > -1"
-                                   ng-click="toggleSelectionTarget($event)"
-                                   ng-model="row.selected"
-                        />
-                        </td>
-                        <td>{{row.name}}</td>
-                        <td>{{row.type}}</td>
-                        <td>{{row.comment}}</td>
-                      </tr>
-                      </tbody>
-                    </table>
-                  </div>
-                </div>
-              </fieldset>
-            </div>
-
-            <div class="form-group btn-container" >
-              <button class="btn btn-primary btn-o back-step btn-wide pull-left" ng-click="form.prev(Form)">
-                <i class="fa fa-arrow-circle-left"></i> Back
-              </button>
-              <button class="btn btn-primary btn-o next-step btn-wide pull-right" ng-click="form.next(Form)">
-                Next <i class="fa fa-arrow-circle-right"></i>
-              </button>
-            </div>
-          </div>
-        </div>
-
-        <div id="step-3" ng-show="currentStep == 3" class="formStep" >
-          <label class="stepDesc">This step let you map the target data fields to source fields, you can choose the related fields from dropdown list of source</label>
-          <div class="container-fluid">
-
-            <!-- schema definition list -->
-            <div class="col-md-12 col-lg-12 col-sm-12">
-              <fieldset>
-                <legend>
-                  Map the fields
-                </legend>
-
-                <div class="y-scrollable">
-
-                  <div class="container col-md-12 col-lg-12 col-sm-12">
-                    <table class="table table-striped">
-                      <thead style="">
-                      <tr style="background-color:#7D95CC;font-size:20px">
-                        <th style="width:40%;">Target Fields</th>
-                        <th style="width:10%;text-align:center">Map To</th>
-                        <th style="width:40%;text-align:center">Source Fields</th>
-                      </tr>
-                      </thead>
-                      <tbody>
-                      <tr ng-repeat="item in selectionTarget" >
-                        <td>{{currentNodeTarget.parent[0].dbName}}.{{item}}</td>
-                        <td style="text-align:center;">
-                          <select ng-model="matches[$index]" class="form-control" ng-init="matches[$index]='=='" style="background:#00FFFF;font-weight:bold" id="mapRule">
-                            <option ng-repeat="func in matchFunctions" value="{{func}}">{{func}}</option>
-                          </select>
-                        </td>
-                        <td>
-                          <select ng-model="mappings[$index]" class="form-control">
-                            <option value="">---Please select---</option>
-                            <option ng-repeat="itemSrc in selection" value="{{itemSrc}}">{{currentNode.parent[0].dbName}}.{{itemSrc}}</option>
-
-                          </select>
-
-                        </td>
-
-                      </tr>
-
-                      </tbody>
-                    </table>
-                    <p>
-                      <label style="color:#B2C831">Accuracy Calculation Formula as Below:</label>
-                    </p>
-
-                    <div class="col-md-12 col-lg-12 col-sm-12" style="color:#fff;font-size:16px;display: flex;align-items: center">
-
-                      <div class="" style="text-align:right;display:block;float:left;width:20%;">
-                        Accuracy Rate(%) =
-                      </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">{{selectionTarget.length}}</span> <span style="color:green;">{{currentNodeTarget.name}}</span>  and <span class="badge">{{mappings.length}}</span> <span style="color:green;">{{currentNode.name}}</span>  fields
-                        </div>
-                        <div class="">
-                          Total Count of records in <span style="color:green;font-weight:bold;">{{currentNode.parent[0].dbName}}.{{currentNode.name}}</span>
-                        </div>
-                      </div>
-                      <div class="" style="text-align:left;display:block;float:left;width:10%;">
-                        x 100%
-                      </div>
-
-                    </div>
-
-                  </div>
-
-                </div>
-              </fieldset>
-            </div>
-
-            <div class="form-group btn-container" >
-              <button class="btn btn-primary btn-o back-step btn-wide pull-left" ng-click="form.prev(Form)">
-                <i class="fa fa-arrow-circle-left"></i> Back
-              </button>
-              <button class="btn btn-primary btn-o next-step btn-wide pull-right" ng-click="form.next(Form)">
-                Next <i class="fa fa-arrow-circle-right"></i>
-              </button>
-            </div>
-          </div>
-        </div>
-
-        <div id="step-4" ng-show="currentStep == 4" class="formStep" >
-          <label class="stepDesc">Please setup the measure required information</label>
-          <div class="container-fluid">
-
-            <!-- schema definition list -->
-            <div class="col-md-12 col-lg-12 col-sm-12">
-              <fieldset>
-                <legend>
-                  Required Information
-                </legend>
-                <div class="y-scrollable">
-                  <div class="col-md-12 col-lg-12 col-sm-12">
-                    <div class="form-group" ng-class="{'has-error':Form.ruleName.$dirty&&Form.ruleName.$invalid, 'has-success':Form.ruleName.$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" ng-model="basic.name" name="ruleName" placeholder="Please input the measure name" required ng-pattern="'([0-9a-zA-Z\\_\\-])+'">
-                        <span class="error text-small block " ng-if="Form.ruleName.$dirty && Form.ruleName.$error.required">Measure Name is required</span>
-                        <span class="error text-small block " ng-if="Form.ruleName.$dirty && Form.ruleName.$error.pattern">Only letter, number, "-" and "_" are allowed</span>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="col-md-12 col-lg-12 col-sm-12">
-                    <div class="form-group">
-                      <label class="col-md-2 col-lg-2 col-sm-2 control-label">
-                        Measure Description:
-                      </label>
-
-                      <div class="col-md-10 col-lg-10 col-sm-10 ">
-                        <input type="text" class="form-control" ng-model="basic.desc" placeholder="Please input detail description of your measure">
-                      </div>
-                    </div>
-                  </div>
-                  <div class="col-md-12 col-lg-12 col-sm-12">
-                    <div class="form-group">
-                      <label for="typeSelector" class="col-md-2 col-lg-2 col-sm-2 control-label">
-                        Measure Type:
-                      </label>
-
-                      <div class="col-md-10 col-lg-10 col-sm-10 ">
-                        <select id="typeSelector" class="form-control" ng-model="basic.type" ng-init="basic.type='0'" disabled required>
-                          <option ng-repeat="row in ruleTypes" value="{{$index}}" >{{row}}</option>
-                        </select>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="col-md-12 col-lg-12 col-sm-12">
-                    <div class="form-group">
-                      <label for="systemSelector" class="col-md-2 col-lg-2 col-sm-2 control-label">
-                        Organization:
-                      </label>
-
-                      <!--<div class="col-md-10 col-lg-10 col-sm-10 ">-->
-                      <!--<select id="systemSelector" class="form-control" ng-model="form.basic.system">-->
-                      <!--<option ng-repeat="row in ruleSystems" value="{{$index}}" >{{row}}</option>-->
-                      <!--</select>-->
-
-
-                      <!--</div>-->
-                      <div class="col-md-10 col-lg-10 col-sm-10 ">
-                        <input type="text" id="systemSelector" class="form-control" ng-model="basic.system"  required ng-pattern="'([0-9a-zA-Z\\_\\-])+'">
-
-                      </div>
-                    </div>
-                  </div>
-                  <div class="col-md-12 col-lg-12 col-sm-12">
-                    <div class="form-group">
-                      <label class="col-md-2 col-lg-2 col-sm-2 control-label">
-                        DataAsset:
-                      </label>
-
-                      <div class="col-md-10 col-lg-10 col-sm-10">
-                        <input type="text" class="form-control" ng-model="dataAsset" disabled>
-                      </div>
-                    </div>
-                  </div>
-
-                  <div class="col-md-12 col-lg-12 col-sm-12">
-                    <div class="form-group">
-                      <label class="col-md-2 col-lg-2 col-sm-2 control-label">
-                        Owner:
-                      </label>
-
-                      <div class="col-md-10 col-lg-10 col-sm-10">
-                        <input type="text"  class="form-control" ng-model="basic.owner" ng-init="basic.owner=ntAccount" disabled>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-
-                <!-- <div style="color:#fff">
-                  <label style="color:#b2c831">Tips: </label>After submitted, please go to "Rule Repository" to check the rule status
-                </div> -->
-
-                <div style="color:#b2c831">
-                  <p>
-                    <i class="fa fa-info-circle"></i> After submitted, please go to "<a class="bark-link" href="#/measures">Measures</a>" to check the measure status
-                  </p>
-                </div>
-
-              </fieldset>
-            </div>
-
-            <div class="form-group btn-container" >
-              <button class="btn btn-primary btn-o back-step btn-wide pull-left" ng-click="form.prev(Form)">
-                <i class="fa fa-arrow-circle-left"></i> Back
-              </button>
-              <button class="btn btn-primary btn-o next-step btn-wide pull-right" ng-click="form.submit(Form)">
-                <!-- <button class="btn btn-primary btn-o next-step btn-wide pull-right" data-toggle="modal" data-target="#confirm"> -->
-                Submit
-              </button>
-            </div>
-          </div>
-        </div>
-
-        <div class="modal fade" id="confirm" role="dialog">
-          <div class="modal-dialog modal-xg modal-lg">
-            <div class="modal-content">
-              <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-                <h4 class="modal-title">Save the measure with the below information?</h4>
-              </div>
-              <div class="modal-body">
-                <ng-include src="'/pages/measures/confirmation-ac.html'"/>
-              </div>
-              <div class="modal-footer">
-                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
-                <button type="button" class="btn btn-primary" ng-click="form.save()">Save</button>
-              </div>
-            </div>
-          </div>
-        </div>
-    </form>
-  </div><!--//row-->
-</div>

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/pages/measures/createrule-an.html
----------------------------------------------------------------------
diff --git a/ui/pages/measures/createrule-an.html b/ui/pages/measures/createrule-an.html
deleted file mode 100644
index 59ed608..0000000
--- a/ui/pages/measures/createrule-an.html
+++ /dev/null
@@ -1,410 +0,0 @@
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
--->
-<div class="container-fluid">
-  <div class="row">
-    <h5 class="over-title margin-bottom-15">Create DQ Model</h5>
-  </div><!--//row-->
-  <div class="row">
-    <form name="Form" id="form" novalidate>
-      <div id="wizard" class="swMain" >
-        <ul>
-						<li ng-click="form.goTo(Form, 1)">
-							<a href="" ng-class="{'selected' : currentStep >= 1, 'done' : currentStep > 1}" class="selected" style="">
-								<div class="stepNumber">
-									1
-								</div>
-								<span class="stepDesc text-small"> Choose Target </span>
-							</a>
-						</li>
-						<li ng-click="form.goTo(Form, 2)">
-							<a href="" ng-class="{'selected' : currentStep >= 2, 'done' : currentStep > 2}" class="" style="">
-								<div class="stepNumber">
-									2
-								</div>
-								<span class="stepDesc text-small"> Select Models </span>
-							</a>
-						</li>
-						<li ng-click="form.goTo(Form, 3)">
-							<a href="" ng-class="{'selected' : currentStep >= 3, 'done' : currentStep > 3}" class="" style="">
-								<div class="stepNumber">
-									3
-								</div>
-								<span class="stepDesc text-small"> Configuration </span>
-							</a>
-						</li>
-
-					</ul>
-
-        <div id="step-1" ng-show="currentStep == 1" class="formStep" >
-          <label class="stepDesc">This step let you choose the target for data quality model, Apollo datasets are enabled, other platofrms are coming soon. </label>
-
-					<div class="container-fluid">
-            <!-- select db tree -->
-						<div class="col-md-4 col-lg-4 col-sm-4">
-							<fieldset>
-							  <legend>Please select schema</legend>
-                <div class="add-dataset" style="color:#b2c831">
-                    <a class="bark-link" href="#/createdataasset">Cannot find your DataAsset? Click here to add</a>
-                </div>
-
-                <div angular-treeview="true"
-                      tree-model="dbList"
-                      node-id="id"
-                      node-label="name"
-                      node-children="children"
-                      l1-icon="fa fa-database"
-                      l2-icon="fa fa-table"
-                      l3-icon="fa fa-file-text-o"
-                      class="y-scrollable">
-                </div>
-
-              </fieldset>
-						</div>
-
-            <!-- schema definition list -->
-						<div class="col-md-8 col-lg-8 col-sm-8">
-							<fieldset>
-								<legend>
-									<!-- Select one attribute -->
-                  Schema definition
-								</legend>
-
-								<div class="y-scrollable">
-                  <div>
-                   <label>View schema:</label> <i ng-show="currentNode.parent" style="color:#fff;font-weight: bold;">{{currentNode.parent.name}}.{{currentNode.name}}</i>
-                  </div>
-                  <!-- <div>
-                   <label>Selected Column:</label> <i style="color:#fff;font-weight: bold;">{{form.selection}}</i>
-                  </div> -->
-
-                 <div>
-                   <table st-table="schemaCollection" class="table table-striped">
-                   	<thead>
-                     	<tr style="background-color:#7D95CC">
-                        <!-- <th></th> -->
-                     		<th>Column Name</th>
-                     		<th>Description</th>
-                     		<th>Data Type</th>
-                     		<th>Sample Data</th>
-
-                     	</tr>
-                   	</thead>
-                   	<tbody>
-                       <tr ng-if="!schemaCollection || schemaCollection.length == 0">
-                         <td colspan="5" style="text-align:center" ><span class="highlight">Please select a schema from the left tree first</span></td>
-                       </tr>
-                     	<tr ng-repeat="row in schemaCollection">
-                        <!-- <td><input type="radio"
-                              name="selAttr"
-                              value="{{row.name}}"
-                              ng-model="form.selection"
-                            />
-                        </td> -->
-                        <td>{{row.name}}</td>
-                     		<td>{{row.desc}}</td>
-                        <td>{{row.type}}</td>
-                        <td class="highlight">{{row.sample}}</td>
-                     	</tr>
-                   	</tbody>
-                   </table>
-                 </div>
-
-                 <div style="color:#b2c831">
-                   <p ng-show="currentNode.parent">
-                     <i class="fa fa-info-circle"></i> Total Count of this schema will be applied to the machine learning algorithm
-                   </p>
-                 </div>
-                </div>
-              </fieldset>
-            </div>
-
-            <div class="form-group btn-container">
-							<button class="btn btn-primary btn-o next-step btn-wide pull-right" ng-click="form.next(Form)">
-								Next <i class="fa fa-arrow-circle-right"></i>
-							</button>
-						</div>
-
-          </div>
-
-      </div>
-
-
-
-
-      <div id="step-2" ng-show="currentStep == 2" class="formStep" >
-        <label class="stepDesc">Please choose one of the statistical techniques provided below for automatically detecting anomalies:</label>
-        <div class="container-fluid">
-
-
-          <div class="col-md-12 col-lg-12 col-sm-12">
-            <fieldset>
-              <!-- <legend>
-                Map the fields
-              </legend> -->
-
-              <div class="y-scrollable">
-
-                <div class="container col-md-12 col-lg-12 col-sm-12">
-                  <div class="row">
-
-                    <div class="col-md-6 col-lg-6 col-sm-6">
-
-                      <h5>
-                        <input name="anType" type="radio" ng-model="form.anType" value="1" ng-init="form.anType=1" style="width:1em;height:1em;"/>
-                        <span>History Trend Detection</span>
-                      </h5>
-
-                        <label style="color:#fff;">This is a method of evaluating two or more measured events to comparison the results at one time period with those from another time period (or series of time periods), on an yearly, monthly, weekly, daily or hourly basis. Currently weekly comparision is supported.</label>
-
-                    </div>
-                    <div class="col-md-6 col-lg-6 col-sm-6">
-                      <div class="container-fluid">
-                        <!-- <p>Here's an example for Year over Year difference calculation</p> -->
-                        <img src="/img/yoy.png" style="max-height: 200px;width:100%"/>
-                      </div>
-                    </div>
-
-                  </div>
-                  <br/>
-                  <div class="row">
-
-                    <div class="col-md-6 col-lg-6 col-sm-6">
-                      <h5>
-                        <input name="anType" type="radio" ng-model="form.anType" value="3" style="width:1em;height:1em;"/>
-                        <span>Deviation Detection(Based on MAD)</span>
-                      </h5>
-
-                        <label style="color:#fff;">Deviation detection algorithm usually look at a given time window of a metric time series and establish an upper and lower band for accepted deviations and assume any data point out of those band as a deviation.
-                          <a href="https://en.wikipedia.org/wiki/Median_absolute_deviation" target="_blank">MAD(Median absolute deviation)</a> is a robust measure of the variability of a univariate sample of quantitative data
-                        </label>
-
-                    </div>
-                    <div class="col-md-6 col-lg-6 col-sm-6">
-                      <div class="container-fluid">
-                        <!-- <p>Here's an example for Year over Year difference calculation</p> -->
-                        <img src="/img/mad.png" style="max-height: 200px;width:100%"/>
-                      </div>
-                    </div>
-
-                  </div>
-                  <br/>
-                  <div class="row">
-                    <div class="col-md-6 col-lg-6 col-sm-6">
-                      <h5>
-                        <input name="anType" type="radio" ng-model="form.anType" value="2" style="width:1em;height:1em;"/>
-                        Bollinger Bands Detection
-                      </h5>
-
-                      <label style="color:#fff">
-                        <a href="https://en.wikipedia.org/wiki/Bollinger_Bands" target="_blank">Bollinger Bands</a> are volatility bands placed above and below a moving average. Volatility is based on the standard deviation, which changes as volatility increases and decreases. The bands automatically widen when volatility increases and narrow when volatility decreases.
-                      </label>
-                    </div>
-                    <div class="col-md-6 col-lg-6 col-sm-6">
-                      <div class="container-fluid">
-                        <!-- <p>Here's an example for Bollinger Bands</p> -->
-                        <img src="/img/bollinger.png" style="max-height: 200px;width:100%"/>
-                      </div>
-                    </div>
-
-                  </div>
-
-                </div>
-
-              </div>
-            </fieldset>
-          </div>
-
-          <div class="form-group btn-container" >
-            <button class="btn btn-primary btn-o back-step btn-wide pull-left" ng-click="form.prev(Form)">
-                <i class="fa fa-arrow-circle-left"></i> Back
-            </button>
-            <button class="btn btn-primary btn-o next-step btn-wide pull-right" ng-click="form.next(Form)">
-                Next <i class="fa fa-arrow-circle-right"></i>
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <div id="step-3" ng-show="currentStep == 3" class="formStep" >
-        <label class="stepDesc">Please setup the model required information</label>
-        <div class="container-fluid">
-
-          <!-- schema definition list -->
-          <div class="col-md-12 col-lg-12 col-sm-12">
-            <fieldset>
-              <legend>
-                Required Information
-              </legend>
-              <div class="y-scrollable">
-                <div class="col-md-12 col-lg-12 col-sm-12">
-                  <div class="form-group" ng-class="{'has-error':Form.ruleName.$dirty&&Form.ruleName.$invalid, 'has-success':Form.ruleName.$valid}">
-                    <label class="col-md-2 col-lg-2 col-sm-2 control-label">
-                      Model Name<span class="symbol required"></span>:
-                    </label>
-
-                    <div class="col-md-10 col-lg-10 col-sm-10 ">
-                      <input type="text" class="form-control" ng-model="form.basic.name" name="ruleName" placeholder="Please input the measure name" required ng-pattern="'([0-9a-zA-Z\\_\\-])+'">
-                      <span class="error text-small block " ng-if="Form.ruleName.$dirty && Form.ruleName.$error.required">Model Name is required</span>
-                      <span class="error text-small block " ng-if="Form.ruleName.$dirty && Form.ruleName.$error.pattern">Only letter, number, "-" and "_" are allowed</span>
-                    </div>
-                  </div>
-                </div>
-                <div class="col-md-12 col-lg-12 col-sm-12">
-                  <div class="form-group">
-                    <label class="col-md-2 col-lg-2 col-sm-2 control-label">
-                      Model Definition:
-                    </label>
-
-                    <div class="col-md-10 col-lg-10 col-sm-10 ">
-                      <input type="text" class="form-control" ng-model="form.basic.desc" placeholder="Please input detail description of your model">
-                    </div>
-                  </div>
-                </div>
-                <div class="col-md-12 col-lg-12 col-sm-12">
-                  <div class="form-group">
-                    <label for="typeSelector" class="col-md-2 col-lg-2 col-sm-2 control-label">
-                      Model Type:
-                    </label>
-
-                    <div class="col-md-10 col-lg-10 col-sm-10 ">
-                      <select id="typeSelector" class="form-control" ng-model="form.basic.type" ng-init="form.basic.type='2'" disabled required>
-                        <option ng-repeat="row in ruleTypes" value="{{$index}}" >{{row}}</option>
-                      </select>
-                    </div>
-                  </div>
-                </div>
-                <div class="col-md-12 col-lg-12 col-sm-12">
-                  <div class="form-group">
-                    <label for="systemSelector" class="col-md-2 col-lg-2 col-sm-2 control-label">
-                      Organization:
-                    </label>
-
-                    <div class="col-md-10 col-lg-10 col-sm-10 ">
-                      <select id="systemSelector" class="form-control" ng-model="form.basic.system" required disabled>
-                        <option ng-repeat="row in ruleSystems" value="{{$index}}" >{{row}}</option>
-                      </select>
-                    </div>
-                  </div>
-                </div>
-                <div class="col-md-12 col-lg-12 col-sm-12">
-                  <div class="form-group">
-                    <label class="col-md-2 col-lg-2 col-sm-2 control-label">
-                      DataAsset:
-                    </label>
-
-                    <div class="col-md-10 col-lg-10 col-sm-10">
-                      <input type="text" class="form-control" ng-model="currentNode.name" disabled>
-                    </div>
-                  </div>
-                </div>
-                <div class="col-md-12 col-lg-12 col-sm-12">
-                  <div class="form-group" ng-class="{'has-error':Form.threshold.$invalid}">
-                    <label class="col-md-2 col-lg-2 col-sm-2 control-label">
-                      Threshold:
-                    </label>
-
-                    <div class="col-md-10 col-lg-10 col-sm-10">
-                        <input type="number" class="form-control" ng-model="form.basic.threshold" name="threshold">
-                        <span class="error text-small block" ng-if="Form.threshold.$error.number">Only number is allowed</span>
-                    </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">
-                      Schedule Type:
-                    </label>
-
-                    <div class="col-md-10 col-lg-10 col-sm-10 ">
-                      <select class="form-control" ng-init="form.basic.scheduleType='1'" ng-model="form.basic.scheduleType" ng-init="form.basic.scheduleType='0'">
-                        <option ng-repeat="row in scheduleTypes" value="{{$index}}" >{{row}}</option>
-                      </select>
-                    </div>
-                  </div>
-                </div>
-                <div class="col-md-12 col-lg-12 col-sm-12">
-                  <div class="form-group" ng-class="{'has-error':Form.email.$dirty&&Form.email.$invalid, 'has-success':Form.email.$valid}">
-                    <label class="col-md-2 col-lg-2 col-sm-2 control-label">
-                      Notification email<span class="symbol required"></span>:
-                    </label>
-
-                    <div class="col-md-10 col-lg-10 col-sm-10">
-                      <input type="email"  class="form-control" ng-model="form.basic.email" name="email" ng-required="currentStep==3" placeholder="Please input valid email address" ng-pattern="'^[_A-Za-z0-9-\\+]+(\\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\\.[A-Za-z0-9]+)*(\\.[A-Za-z]{2,})$'">
-                      <span class="error text-small block" ng-if="Form.email.$dirty&&Form.email.$invalid">Please, enter a valid email address.</span>
-                    </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">
-                      Owner:
-                    </label>
-
-                    <div class="col-md-10 col-lg-10 col-sm-10">
-                      <input type="text"  class="form-control" ng-model="form.basic.owner" ng-init="form.basic.owner=ntAccount" disabled>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <!-- <div style="color:#fff">
-                <label style="color:#b2c831">Tips: </label>After submitted, please go to "Rule Repository" to check the rule status
-              </div> -->
-
-              <div style="color:#b2c831">
-                <p>
-                  <i class="fa fa-info-circle"></i> After submitted, please go to "<a class="bark-link" href="#/measures">Models</a>" to check the model status
-                </p>
-              </div>
-
-            </fieldset>
-          </div>
-
-          <div class="form-group btn-container" >
-            <button class="btn btn-primary btn-o back-step btn-wide pull-left" ng-click="form.prev(Form)">
-                <i class="fa fa-arrow-circle-left"></i> Back
-            </button>
-            <button class="btn btn-primary btn-o next-step btn-wide pull-right" ng-click="form.submit(Form)">
-            <!-- <button class="btn btn-primary btn-o next-step btn-wide pull-right" data-toggle="modal" data-target="#confirm"> -->
-                Submit
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <div class="modal fade" id="confirm-an" role="dialog">
-        <div class="modal-dialog modal-xg modal-lg">
-          <div class="modal-content">
-            <div class="modal-header">
-              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-              <h4 class="modal-title">Save the model with the below information?</h4>
-            </div>
-            <div class="modal-body">
-              <ng-include src="'/pages/measures/confirmation-an.html'"/>
-            </div>
-            <div class="modal-footer">
-              <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
-              <button type="button" class="btn btn-primary" ng-click="form.save()">Save</button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </form>
-  </div><!--//row-->
-</div>



[12/13] incubator-griffin git commit: refactor ui with angular2

Posted by gu...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/src/app/job/create-job/create-job.component.html
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/job/create-job/create-job.component.html b/ui/angular/src/app/job/create-job/create-job.component.html
new file mode 100644
index 0000000..23e62d0
--- /dev/null
+++ b/ui/angular/src/app/job/create-job/create-job.component.html
@@ -0,0 +1,252 @@
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+<div class="mask" *ngIf = 'maskOpen' (click)="close()"></div>
+
+<div class="container-fluid">
+  <div class="row">
+    <h5 class="over-title margin-bottom-15 job">Create Job</h5>
+  </div><!--//row-->
+  <div class="row">
+    <!-- <form name="Form" id="form" novalidate> -->
+    <form name= "Form" id="form" (ngSubmit)="submit(jobForm)" #jobForm="ngForm" novalidate>
+      <div  class="formStep" >
+        <label class="stepDesc info">Please setup the job required information</label>
+        <div class="container-fluid">
+
+          <!-- schema definition list -->
+          <div class="col-md-12 col-lg-12 col-sm-12">
+            <fieldset (window:resize)="onResize($event)">
+              <legend>
+                Required Information
+              </legend>
+              <div class="y-scrollable">
+                <div class="col-md-12 col-lg-12 col-sm-12">
+                  <div class="form-group"
+                       [ngClass]="{'has-error':jobName.dirty&&jobName.invalid, 'has-success':jobName.valid}">
+                    <label class="col-md-2 col-lg-2 col-sm-2 control-label">
+                      Source Pattern<span class="symbol required"></span>:
+                    </label>
+
+                    <div class="col-md-10 col-lg-10 col-sm-10 ">
+                      <input type="text" class="form-control" [(ngModel)]="sourcePat" #jobName="ngModel" name="jobName" placeholder="Please input the source partition, such as 'YYYYMMdd-HH'." required
+                             pattern="YYYYMMdd-HH"
+                             maxlength='11'>
+                      <!-- /i<span class="error text-small block " *ngIf="jobName.dirty && jobName.errors.Pattern">Please input partition like 'YYYYMMdd-HH'</span> jobName.dirty && jobName.errors.pattern-->
+                      <span class="error text-small block " *ngIf="jobName.dirty&&jobName.invalid">Please input partition like 'YYYYMMdd-HH'</span>
+                    </div>
+                  </div>
+                </div>
+                <div class="col-md-12 col-lg-12 col-sm-12">
+                  <div class="form-group" [ngClass]="{'has-error':targetName.dirty&&targetName.invalid, 'has-success':targetName.valid}">
+                    <label class="col-md-2 col-lg-2 col-sm-2 control-label">
+                      Target Pattern<span class="symbol required"></span>:
+                    </label>
+                    <div class="col-md-10 col-lg-10 col-sm-10 ">
+                      <input type="text" class="form-control" [(ngModel)]="targetPat" placeholder="Please input target partition of your job, such as 'YYYYMMdd-HH'."
+                             required pattern="YYYYMMdd-HH" maxlength='11' name="targetName" #targetName="ngModel">
+                      <span class="error text-small block " *ngIf="targetName.dirty&&targetName.invalid">Please input partition like 'YYYYMMdd-HH'</span>
+                    </div>
+                  </div>
+                </div>
+                <div class="col-md-12 col-lg-12 col-sm-12">
+                  <div class="form-group">
+                    <label for="measureSelector" class="col-md-2 col-lg-2 col-sm-2 control-label">
+                      Measure Name:
+                    </label>
+
+                    <div class="col-md-10 col-lg-10 col-sm-10 ">
+                      <select id="measureSelector" class="form-control"
+                              ngControl="name" required name="measure.name" [(ngModel)]="measure">
+                        <option *ngFor="let row of Measures" value="{{row.name}}" >{{row.name}}</option>
+                      </select>
+                    </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">
+                      Start At:
+                    </label>
+
+                    <!-- <div class="col-md-5 col-lg-5 col-sm-5 ">
+                        <input type="text" id="datepicker" class="form-control" name="jobStartTime" [(ngModel)]="jobStartTime" >
+                    </div> -->
+                    <div class="col-md-5 col-lg-5 col-sm-5 ">
+                      <!-- <md-form-field> -->
+                      <input matInput [matDatepicker]="picker" placeholder="Choose a date" style="color:black;" [(ngModel)]="jobStartTime" name="jobStartTime"
+                      >
+                      <mat-datepicker-toggle mdSuffix [for]="picker" (click)="setHeight()"></mat-datepicker-toggle>
+                      <mat-datepicker #picker ></mat-datepicker>
+
+
+                      <!-- </md-form-field> -->
+                    </div>
+                    <div class="col-md-5 col-lg-5 col-sm-5" [ngClass]="{'has-error':timeDetail.invalid, 'has-success':timeDetail.valid}">
+                      <input type="text" class="form-control" id="timeDetail" (click)="showTime()" value="{{hourDetail}}:{{minuteDetail}}:{{secondDetail}} "
+                             [(ngModel)]="timeDetail" name="time"
+
+                      >
+                      <div id="timePopup"  class="col-md-11 col-lg-11 col-sm-11 setgrey" *ngIf="isOpen">
+                        <div id="hourSelector">
+                          <p (click)="changeTime(0,23,true,hourDetail,1)"><i class="fa fa-caret-up" aria-hidden="true"></i></p>
+                          <p>{{hourDetail}}</p>
+                          <p (click)="changeTime(0,23,false,hourDetail,1)"><i class="fa fa-caret-down" aria-hidden="true"></i></p>
+                        </div>
+                        <div class="division">
+                          <p>:</p>
+                        </div>
+                        <div id="minuteSelector">
+                          <p (click)="changeTime(0,59,true,minuteDetail,2)"><i class="fa fa-caret-up" aria-hidden="true"></i></p>
+                          <p >{{minuteDetail}}</p>
+                          <p (click)="changeTime(0,59,false,minuteDetail,2)"><i class="fa fa-caret-down" aria-hidden="true"></i></p>
+                        </div>
+                        <div class="division">
+                          <p>:</p>
+                        </div>
+                        <div id="secondSelector">
+                          <p (click)="changeTime(0,59,true,secondDetail,3)"><i class="fa fa-caret-up" aria-hidden="true"></i></p>
+                          <p >{{secondDetail}}</p>
+                          <p (click)="changeTime(0,59,false,secondDetail,3)"><i class="fa fa-caret-down" aria-hidden="true"></i></p>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="col-md-12 col-lg-12 col-sm-12">
+                  <div class="form-group">
+                    <label for="systemSelector" class="col-md-2 col-lg-2 col-sm-2 control-label">
+                      Interval:
+                    </label>
+
+                    <div class="col-md-5 col-lg-5 col-sm-5 ">
+                      <input type="text" id="systemSelector" class="form-control" [(ngModel)]="periodTime"  required placeholder="How often it works" name="periodTime"
+                             onblur="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
+                             onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}">
+                    </div>
+                    <div class="col-md-5 col-lg-5 col-sm-5 ">
+                      <select id="timeSelector" class="form-control" [(ngModel)]="timeType" name="timeSelector" required>
+                        <!--<option  value="hours" >hours</option>-->
+                        <!--<option  value="minutes" >minutes</option>-->
+                        <!--<option  value="seconds" >seconds</option>-->
+                        <option *ngFor="let time of Times"  >{{time}}</option>
+                      </select>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div class="setcolor">
+                <p>
+                  <i class="fa fa-info-circle"></i> After submitted, please go to "
+                  <a class="bark-link" href="/jobs">Jobs</a>" to check the job status
+                </p>
+              </div>
+
+            </fieldset>
+          </div>
+
+          <div class="form-group btn-container" >
+            <button class="btn btn-primary btn-o back-step btn-wide pull-left" (click)="form.prev()">
+              <i class="fa fa-arrow-circle-left"></i> Back
+            </button>
+            <!-- <button class="btn btn-primary btn-o next-step btn-wide pull-right" (click)="form.submit(Form)"> -->
+            <toaster-container></toaster-container>
+            <button type="submit" class="btn btn-primary btn-o next-step btn-wide pull-right" (click)="submit(jobForm)"
+            >
+              <!-- <button class="btn btn-primary btn-o next-step btn-wide pull-right" data-toggle="modal" data-target="#confirm"> -->
+              Submit
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div class="modal fade" id="confirm-job" role="dialog" [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">
+              <button type="button" class="close" data-dismiss="modal" aria-hidden="true" (click)="hide()">&times;</button>
+              <h4 class="modal-title">Save the job with the below information?</h4>
+            </div>
+            <div class="modal-body">
+              <!-- <ng-include src="'/pages/jobs/confirmation-ac.html'"/> -->
+              <div class="container-fluid" id="viewJobContent" style="overflow:auto;">
+                <div class="row">
+                  <h5 class="over-title margin-bottom-15">Basic information</h5>
+                </div><!--//row-->
+                <div class="row">
+                  <div  class="col-lg-12 col-md-12 col-sm-12">
+                    <div id="viewrule-definition" class="viewrule-content">
+                      <div class="row">
+                        <label class="col-md-4 col-lg-4 col-sm-4">
+                          Source Pattern:
+                        </label>
+                        <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
+                          {{sourcePat}}
+                        </div>
+                      </div>
+                      <div class="row">
+                        <label class="col-md-4 col-lg-4 col-sm-4">
+                          Target Pattern:
+                        </label>
+                        <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
+                          {{targetPat}}
+                        </div>
+                      </div>
+                      <div class="row">
+                        <label class="col-md-4 col-lg-4 col-sm-4">
+                          Measure Name:
+                        </label>
+                        <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
+                          {{measure}}
+                          <!-- {{Measures}} -->
+                        </div>
+                      </div>
+                      <div class="row">
+                        <label for="systemSelector" class="col-md-4 col-lg-4 col-sm-4">
+                          Start at:
+                        </label>
+                        <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff" *ngIf="jobStartTime">
+                          {{jobStartTime.toLocaleDateString("en-US")}}&nbsp; {{timeDetail}}
+                        </div>
+                      </div>
+                      <div class="row">
+                        <label class="col-md-4 col-lg-4 col-sm-4">
+                          Interval:
+                        </label>
+                        <div class="col-md-8 col-lg-8 col-sm-8" style="color: #fff">{{periodTime}}&nbsp;{{timeType}}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div><!--//row-->
+                <br/>
+              </div>
+            </div>
+            <div class="modal-footer">
+              <button type="button" class="btn btn-default" data-dismiss="modal" (click)="hide()">Cancel</button>
+              <button type="button" class="btn btn-primary" (click)="save()">Save</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </form>
+  </div><!--//row-->
+</div>

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

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/src/app/job/create-job/create-job.component.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/job/create-job/create-job.component.ts b/ui/angular/src/app/job/create-job/create-job.component.ts
new file mode 100644
index 0000000..1cadc85
--- /dev/null
+++ b/ui/angular/src/app/job/create-job/create-job.component.ts
@@ -0,0 +1,229 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+import { Component, OnInit } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { MaxLengthValidator } from '@angular/forms';
+import { NgControlStatus ,Validators} from '@angular/forms';
+import { PatternValidator } from '@angular/forms';
+// import {MdDatepickerModule} from '@angular/material';
+import {MatDatepickerModule} from '@angular/material';
+import {ServiceService} from '../../service/service.service';
+
+
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {ToasterModule, ToasterService, ToasterConfig} from 'angular2-toaster';
+import * as $ from 'jquery';
+import  {HttpClient,HttpParams} from '@angular/common/http';
+import  {Router} from "@angular/router";
+
+@Component({
+  selector: 'app-create-job',
+  templateUrl: './create-job.component.html',
+  providers:[ServiceService],
+  styleUrls: ['./create-job.component.css']
+})
+export class CreateJobComponent implements OnInit {
+
+  constructor(toasterService: ToasterService,private http: HttpClient,private router:Router,public servicecService:ServiceService) {
+    this.toasterService = toasterService;
+  };
+
+  public toasterconfig : ToasterConfig =
+        new ToasterConfig({
+            showCloseButton: true,
+            tapToDismiss: false,
+            timeout: 0
+        });
+
+  currentStep = 1;
+  Times = ['seconds','minutes','hours'];
+  timeType = 'seconds';
+  isOpen = false;
+  maskOpen = false;
+
+  hourDetail = '00';
+  minuteDetail = '00';
+  secondDetail = '00';
+  timeDetail = '00:00:00';
+  periodTime :number;
+  StartTime = '';
+  sourcePat :'';
+  targetPat :'';
+  createResult = '';
+  jobStartTime : any;
+
+  Measures:object;
+
+  measure:string;
+  measureid:string;
+  ntAccount = 0;
+  newJob={
+        "sourcePattern":'',
+        "targetPattern":'',
+        "jobStartTime":0,
+        "interval":'',
+        "groupName":'',
+      }
+
+  private toasterService: ToasterService;
+
+
+  public visible = false;
+  public visibleAnimate = false;
+
+  public hide(): void {
+    this.visibleAnimate = false;
+    setTimeout(() => this.visible = false, 300);
+  }
+
+  public onContainerClicked(event: MouseEvent): void {
+    if ((<HTMLElement>event.target).classList.contains('modal')) {
+      this.hide();
+    }
+  }
+
+  changeTime(min,max,increase,time,type){
+  	time = parseInt(time);
+  	if(increase){
+          if(time==max)
+              time = min;
+          else time = time + 1;
+      }
+      else{
+          if(time==min)
+              time = max;
+          else time = time - 1;
+      }
+      if(time < 10)
+          time = '0' + time;
+      if(type==1)
+          this.hourDetail = time;
+      else if(type==2)
+          this.minuteDetail = time;
+      else
+          this.secondDetail = time;
+      this.timeDetail = this.hourDetail+':'+this.minuteDetail+':'+this.secondDetail;
+  }
+
+  showTime(){
+  	this.isOpen = !this.isOpen;
+    this.maskOpen = !this.maskOpen;
+  }
+
+  close(){
+  	this.isOpen = false;
+    this.maskOpen = false;
+  }
+
+  prev(form){
+  	history.back();
+  }
+
+  submit (jobForm) {
+      // jobForm.markAsPristine();
+      var period;
+      if(this.timeType=='minutes')
+          period = this.periodTime *60;
+      else if(this.timeType=='hours')
+          period = this.periodTime * 3600;
+      else period = this.periodTime;
+      var rule = '';
+      var time :number;
+      if(this.jobStartTime){
+        var year = this.jobStartTime.getFullYear();
+        var month = this.jobStartTime.getMonth() + 1;
+        var day = this.jobStartTime.getDate();
+        var startTime = year +'-'+ month + '-'+ day + ' '+ this.timeDetail;
+      }
+
+      time = Date.parse(startTime);
+      if(isNaN(time)){
+         this.toasterService.pop('error','Error!','Please input the right format of start time');
+          return false;
+      }
+      if (!jobForm.valid) {
+        this.toasterService.pop('error', 'Error!', 'Please complete the form!');
+        return false;
+      }
+
+      this.newJob={
+        "sourcePattern":this.sourcePat,
+        "targetPattern":this.targetPat,
+        "jobStartTime":time,
+        "interval":period,
+        "groupName":'BA',
+      },
+      this.visible = true;
+      setTimeout(() => this.visibleAnimate = true, 100);
+  }
+  save() {
+  	var date = new Date();
+  	var datastr = date.toString();
+    var month = date.getMonth()+1;
+    var timestamp = Date.parse(datastr);
+    var jobName = this.measure + '-BA-' + this.ntAccount + '-' + timestamp;
+    var addJobs = this.servicecService.config.uri.addJobs;
+    var newJob = addJobs + '?group=' + this.newJob.groupName + '&jobName=' + jobName + '&measureId=' + this.measureid;
+    this.http
+    .post(newJob, this.newJob)
+    .subscribe(data => {
+      this.createResult = data['results'];
+      this.hide();
+      this.router.navigate(['/jobs']);
+    },
+    err => {
+      console.log('Error when creating job');
+    });
+  }
+
+
+  onResize(event){
+   this.resizeWindow();
+  }
+
+  resizeWindow(){
+    var stepSelection = '.formStep';
+    $(stepSelection).css({
+        height: window.innerHeight - $(stepSelection).offset().top - $('#footerwrap').outerHeight()
+    });
+    $('fieldset').height($(stepSelection).height() - $(stepSelection + '>.stepDesc').height() - $('.btn-container').height() - 80);
+    $('.y-scrollable').css({
+        'max-height': $('fieldset').height()- $('.add-dataset').outerHeight()
+    });
+    $('#data-asset-pie').css({
+        height: $('#data-asset-pie').parent().width(),
+        width: $('#data-asset-pie').parent().width()
+    });
+  }
+
+  setHeight(){
+  	$('#md-datepicker-0').height(250);
+  }
+
+  ngOnInit() {
+    var allModels = this.servicecService.config.uri.allModels;
+    this.http.get(allModels).subscribe(data =>{
+      this.Measures = data;
+      this.measure = this.Measures[0].name;
+      this.measureid = this.Measures[0].id;
+    });
+  }
+
+}

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/src/app/job/job.component.css
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/job/job.component.css b/ui/angular/src/app/job/job.component.css
new file mode 100644
index 0000000..1c68dfc
--- /dev/null
+++ b/ui/angular/src/app/job/job.component.css
@@ -0,0 +1,29 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+.table-striped > tbody > tr{
+     background-color: #1f1f1f; 
+}
+a{
+	color: white;
+}
+
+#pagination .pagination{
+	margin:20px 0 0 0 ;
+}
+

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/src/app/job/job.component.html
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/job/job.component.html b/ui/angular/src/app/job/job.component.html
new file mode 100644
index 0000000..e2bb2de
--- /dev/null
+++ b/ui/angular/src/app/job/job.component.html
@@ -0,0 +1,192 @@
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+<div >
+    <p>
+        <a routerLink="/createjob" class="btn btn-primary btn-o btn-wide" >
+        <i class="fa fa-plus"></i> Create Job</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">Job Name</th>
+                <th st-ratio="15">Source Pattern</th>
+                <th st-ratio="15">Target Pattern</th>
+                <th st-ratio="15">Previous Fire Time</th>
+
+                <th st-ratio="20">Next Fire Time</th>
+                <th st-ratio="15">Trigger State</th>
+
+                <th st-ratio="5">Interval</th>
+                <th st-ratio="5">Action</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr *ngIf="!results">
+                <td colspan="7" style="text-align:center">No content!</td>
+            </tr>
+            </tbody>
+            <tbody *ngFor="let row of mf.data">
+            <tr (click) = "showInstances(row)">
+                <td [ngClass]="{accordion:true}" style="cursor: pointer;">
+                    <i *ngIf="!row.showDetail" class="fa fa-chevron-circle-right blue"></i>
+                    <i *ngIf="row.showDetail" class="fa fa-chevron-circle-down blue"></i>
+                    {{row.jobName}}
+                     -{{(row.createTime | date: 'yyyy/MM/dd HH:mm:ss') || 'N/A' }}
+                </td>
+                <td>{{row.sourcePattern}}</td>
+                <td>{{row.targetPattern}}</td>
+                <td [hidden]="row.previousFireTime!=-1">--/--/-- &nbsp;&nbsp;--:--</td> 
+                <td [hidden]="row.previousFireTime==-1">{{(row.previousFireTime | date: 'yyyy/MM/dd HH:mm:ss') || 'N/A' }}</td>
+                <td>{{(row.nextFireTime | date: 'yyyy/MM/dd HH:mm:ss') || 'N/A' }}</td>
+                <td>
+                    <span *ngIf='row.triggerState == "NORMAL"' class="normal">{{row.triggerState}}
+                    </span>
+                    <span *ngIf='row.triggerState != "NORMAL"' class = 'unnormal'>{{row.triggerState}}</span>
+                </td>
+                <td>{{row.interval}}</td>
+                <td>
+                    &nbsp;
+                    <a (click)="remove(row)" title="delete" style="text-decoration:none">
+                        <i class="fa fa-trash-o"></i>
+                    </a>
+                    &nbsp;
+                </td>
+            </tr>
+            <tr *ngIf="row.showDetail">
+                <td colspan="7" style="padding:20px 30px 10px 30px;">
+                    <table class="table table-striped" [mfData]="allInstances" #mf2="mfDataTable" [mfRowsOnPage]="10">
+                        <thead>
+                        <tr style="background-color:#7D95CC">
+                            <th style="width:30%" >AppID</th>
+                            <th style="width:25%" >Time</th>
+                            <th style="width:20%" >State</th>
+                        </tr>
+                        </thead>
+                        <tbody >
+                        <tr *ngIf="!allInstances">
+                            <td colspan="7" style="text-align:center">No content.</td>
+                        </tr>
+                        <tr *ngFor="let item of mf2.data" >
+                            <td><a href={{item.appUri}} target="_blank" style="color:white">{{item.appId}}</a></td>
+                            <td>{{item.timestamp | date: 'yyyy/MM/dd HH:mm:ss'}}</td>
+                            <td>{{item.state}}</td>
+                        </tr>                
+                        </tbody>
+                        <tfoot>
+                          <tr>
+                            <td class="text-center" colspan="8" style="background-color:#1f1f1f;" id="pagination">
+                              <mfBootstrapPaginator></mfBootstrapPaginator>
+                            </td>
+                          </tr>
+                        </tfoot>
+                    </table>
+                </td>
+            </tr>
+            </tbody>
+            <tfoot>
+            <tr>
+                <td colspan="8" class="text-right" >
+                    <mfBootstrapPaginator></mfBootstrapPaginator>
+                </td>
+            </tr>
+            </tfoot>
+        </table>
+    </div>
+    <div class="modal fade" id="deleteJobConfirmation" role="dialog" 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">
+                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+                    <h4 class="modal-title">Delete the job with the below information?</h4>
+                </div>
+                <div class="modal-body">
+                    <!-- <ng-include src="'/pages/jobs/delete-confirm.html'"/> -->
+                    <div class="container-fluid" id="deleteContent" style="overflow:auto;">
+                      <div class="row">
+                          <h5 class="over-title margin-bottom-15">Basic information</h5>
+                      </div><!--//row-->
+                      <div class="row">
+                          <div  class="col-lg-12 col-md-12 col-sm-12">
+                              <div id="viewrule-definition" class="viewrule-content">
+                                  <div class="row">
+                                      <label class="col-md-4 col-lg-4 col-sm-4">
+                                          Job Name:
+                                      </label>
+                                      <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
+                                          {{deletedRow.jobName}}
+                                      </div>
+                                  </div>
+                                  <div class="row">
+                                      <label class="col-md-4 col-lg-4 col-sm-4">
+                                          Source Pattern:
+                                      </label>
+                                      <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
+                                          {{deletedRow.sourcePattern}}
+                                      </div>
+                                  </div>
+                                  <div class="row">
+                                      <label class="col-md-4 col-lg-4 col-sm-4">
+                                          Target Pattern:
+                                      </label>
+                                      <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
+                                          {{deletedRow.targetPattern}}
+                                      </div>
+                                  </div>
+                                  <div class="row">
+                                      <label for="systemSelector" class="col-md-4 col-lg-4 col-sm-4">
+                                          Next Fire Time:
+                                      </label>
+                                      <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
+                                          {{(deletedRow.nextFireTime | date: 'yyyy/MM/dd HH:mm:ss') || 'N/A' }}
+                                      </div>
+                                  </div>
+                                  <div class="row">
+                                      <label class="col-md-4 col-lg-4 col-sm-4">
+                                          Interval:
+                                      </label>
+                                      <div class="col-md-8 col-lg-8 col-sm-8" style="color: #fff">
+                                          {{deletedRow.interval}}
+                                      </div>
+                                  </div>
+                                  <div class="row">
+                                      <label class="col-md-4 col-lg-4 col-sm-4">
+                                          Group:
+                                      </label>
+                                      <div class="col-md-8 col-lg-8 col-sm-8" style="color: #fff">
+                                          {{deletedRow.groupName}}
+                                      </div>
+                                  </div>
+                              </div>
+                          </div>
+                      </div><!--//row-->
+                  </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-primary" (click)="confirmDelete()">Yes</button>
+                    <button type="button" class="btn btn-default" data-dismiss="modal" (click)="hide()">No</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

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

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/src/app/job/job.component.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/job/job.component.ts b/ui/angular/src/app/job/job.component.ts
new file mode 100644
index 0000000..5e4a2ea
--- /dev/null
+++ b/ui/angular/src/app/job/job.component.ts
@@ -0,0 +1,165 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+import { Component, OnInit } from '@angular/core';
+import { HttpClient} from '@angular/common/http';
+import { Ng2SmartTableModule ,LocalDataSource} from 'ng2-smart-table';
+import {DataTableModule} from "angular2-datatable";
+import {ServiceService} from '../service/service.service';
+
+import { DatePipe } from '@angular/common';
+import { Router} from "@angular/router";
+import * as $ from 'jquery';
+
+@Component({
+  selector: 'app-job',
+  templateUrl: './job.component.html',
+  providers:[ServiceService],
+  styleUrls: ['./job.component.css']
+})
+export class JobComponent implements OnInit {
+  // results:object[];
+  allInstances:any;
+  results:any;
+  source:LocalDataSource;
+  deletedBriefRow:object;
+  jobName:string;
+  public visible = false;
+  public visibleAnimate = false;
+  oldindex:number;
+
+
+  deletedRow : object;
+  sourceTable :string;
+  targetTable :string;
+  deleteId : string;
+  deleteIndex:number;
+  deleteGroup :string;
+  deleteJob :string;
+
+
+  
+  constructor(private http:HttpClient,private router:Router,public servicecService:ServiceService) { };
+
+  public hide(): void {
+    this.visibleAnimate = false;
+    setTimeout(() => this.visible = false, 300);
+  }
+
+  public onContainerClicked(event: MouseEvent): void {
+    if ((<HTMLElement>event.target).classList.contains('modal')) {
+      this.hide();
+    }
+  }
+  
+  // resultData = [{"jobName":"i-BA-0-1504837194000","measureId":"22","groupName":"BA","targetPattern":"YYYYMMdd-HH","triggerState":"NORMAL","nextFireTime":1505875500000,"previousFireTime":1504864200000,"interval":"300","sourcePattern":"YYYYMMdd-HH","jobStartTime":"1504800000000"},{"jobName":"i-BA-0-1504837194000","measureId":"22","groupName":"BA","targetPattern":"YYYYMMdd-HH","triggerState":"NORMAL","nextFireTime":1505875500000,"previousFireTime":1504864200000,"interval":"300","sourcePattern":"YYYYMMdd-HH","jobStartTime":"1504800000000"},{"jobName":"i-BA-0-1504837194000","measureId":"22","groupName":"BA","targetPattern":"YYYYMMdd-HH","triggerState":"NORMAL","nextFireTime":1505875500000,"previousFireTime":1504864200000,"interval":"300","sourcePattern":"YYYYMMdd-HH","jobStartTime":"1504800000000"}];
+  remove(row){
+    this.visible = true;
+    setTimeout(() => this.visibleAnimate = true, 100);
+    this.deletedRow = row;
+    this.deleteIndex = this.results.indexOf(row);
+    this.deletedBriefRow = row;
+    this.deleteGroup = row.groupName;
+    this.deleteJob = row.jobName;
+  }
+
+  confirmDelete(){
+    let deleteJob = this.servicecService.config.uri.deleteJob;
+    let deleteUrl = deleteJob + '?group=' + this.deleteGroup + '&jobName=' + this.deleteJob;
+    this.http.delete(deleteUrl).subscribe(data => {
+      let deleteResult:any = data;
+      console.log(deleteResult.code);
+      if(deleteResult.code==206){
+        var self = this;
+        self.hide();
+        setTimeout(function () {
+          self.results.splice(self.deleteIndex,1);
+          self.source.load(self.results);
+        },0);
+      }
+    },
+    err =>{
+        console.log('Error when deleting record');
+
+    });
+  };
+  
+  showInstances(row){
+    if(row.showDetail){
+        row.showDetail = !row.showDetail;     
+      return;
+    }
+    let index  = this.results.indexOf(row);
+    if (this.oldindex!=undefined &&this.oldindex != index){
+        this.results[this.oldindex].showDetail = false;}
+    let getInstances = this.servicecService.config.uri.getInstances;
+    let getInstanceUrl = getInstances+ '?group=' + 'BA' + '&jobName=' + row.jobName +'&page='+'0'+'&size='+'200';
+    this.http.get(getInstanceUrl).subscribe(data =>{      
+        row.showDetail = !row.showDetail;     
+        this.allInstances = data;   
+        setTimeout(function(){
+          console.log($('.pagination'));
+          $('.pagination').css("marginBottom","-10px");
+        },0);
+
+        // this.source = new LocalDataSource(this.allInstances);
+        // this.source.load(this.allInstances);
+    });
+    this.oldindex = index;
+  }
+
+  intervalFormat(second){
+     if(second<60)
+         return (second + 's');
+     else if(second<3600)
+     {
+         if(second%60==0)
+             return(second / 60 + 'min');
+         else 
+             return((second - second % 60) / 60 + 'min'+second % 60 + 's');
+     }
+     else 
+     {
+         if(second%3600==0)
+             return ( second / 3600 + 'h');
+         else
+         {
+             second = (second - second % 3600) / 3600 + 'h';
+             var s = second % 3600;
+             return ( second + (s-s%60)/60+'min'+s%60+'s');
+         }
+     }
+  }
+  
+  
+  ngOnInit():void {
+
+    var self = this;
+    let allJobs = this.servicecService.config.uri.allJobs;
+  	this.http.get(allJobs).subscribe(data =>{       
+        this.results = Object.keys(data).map(function(index){
+          let job = data[index];
+          job.showDetail = false;
+          job.interval = self.intervalFormat(job.interval);
+          return job;
+        });    
+    });
+   // this.results = this.resultData;
+
+  };
+}

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/src/app/login/login.component.css
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/login/login.component.css b/ui/angular/src/app/login/login.component.css
new file mode 100644
index 0000000..3ad96c3
--- /dev/null
+++ b/ui/angular/src/app/login/login.component.css
@@ -0,0 +1,83 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+@import url('../../../node_modules/bootstrap/dist/css/bootstrap.css');
+#content {
+    background-color: #1A237E;
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    background-size: cover;
+    height: 100vh;
+}
+hr {
+    margin-bottom: 30px;
+}
+
+@media (min-width: 992px) {
+
+    #content-row {
+        margin-top:12em;
+        margin-bottom:7em;
+    }
+
+    #bark-description {
+        display: block;
+    }
+
+    #bark-description-2 {
+        display: none;
+    }
+}
+
+@media (max-width:991px) {
+
+    #content-row {
+        margin-top:0em;
+        margin-bottom:0em;
+    }
+
+    #bark-description {
+        display: none;
+    }
+
+    #bark-description-2 {
+        margin-top: 3em;
+        display: block;
+    }
+}
+
+#bark-description p, #bark-description-2 p {
+    margin-left: 100px;
+    color: #ffffff;
+    font-size: 20px;
+}
+
+#content-row {
+    padding: 3em 0;
+    background-color: rgba(255, 255, 255, 0.2);
+}
+
+#loginMsg {
+    display: none;
+    background-color: #F1D7D7;
+    color: #A95252;
+    padding: 8px 12px;
+    border-radius: 4px;
+    text-align:center;
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/src/app/login/login.component.html
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/login/login.component.html b/ui/angular/src/app/login/login.component.html
new file mode 100644
index 0000000..c150ca0
--- /dev/null
+++ b/ui/angular/src/app/login/login.component.html
@@ -0,0 +1,88 @@
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+<div *ngIf="!ntAccount" id="content" class="container-fluid">
+        <div class="row" id="content-row">
+
+            <div class="col-md-6 col-md-offset-1 col-xs-12">
+                <div id="bark-description">
+                    <h3>
+                        Data Quality Service Platform on eBay Cloud.
+                    </h3><br>
+                    <p>
+                        Automates your data quality validation
+                    </p><br>
+                    <p>
+                        Health monitoring, Profiling and detection
+                    </p><br>
+                    <p>
+                        Unified Visualization
+                    </p><br>
+                    <p>
+                        One set of tools to build data quality pipelines
+                    </p>
+                </div>
+            </div>
+
+            <div class="col-md-3 col-md-offset-1 col-xs-12">
+                <div id="login-form">
+                    <div style="text-align:center;margin-bottom:30px;">
+                        <img src="../assets/img/logo.png" class="img-rounded" style="width:80%;">
+                    </div>
+
+                    <input type="input" class="form-control" placeholder="username" autocomplete="on" style="margin-bottom:20px;" (focus)="focus($event)">
+
+                    <input type="password" class="form-control" placeholder="password" autocomplete="on" (keyup)="submit($event)" (focus)="focus($event)">
+
+                    <div class="checkbox">
+                    <label style="color:white;">
+                        <input type="checkbox" value="remember-me" checked>Remember me
+                    </label>
+                    </div>
+
+                    <button class="btn btn-default btn-large btn-block" id="login-btn" (click)="login()" style="margin-bottom: 20px;">Log in</button>
+
+                    <div id="loginMsg">Login failed. Try again.</div>
+                </div>
+            </div>
+
+            <div class="col-xs-12">
+                <div id="bark-description-2">
+                    <h3>
+                        Data Quality Service Platform on the eBay Cloud.
+                    </h3><br>
+                    <p>
+                        Automates your data quality validation
+                    </p><br>
+                    <p>
+                        Health monitoring, Profiling and detection
+                    </p><br>
+                    <p>
+                        Unified Visualization
+                    </p><br>
+                    <p>
+                        One set of tools to build data quality pipelines
+                    </p>
+                </div>
+            </div>
+        </div>
+
+</div>
+
+
+

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

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/src/app/login/login.component.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/login/login.component.ts b/ui/angular/src/app/login/login.component.ts
new file mode 100644
index 0000000..632a18f
--- /dev/null
+++ b/ui/angular/src/app/login/login.component.ts
@@ -0,0 +1,31 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.css']
+  // providers:[ServiceService]
+})
+export class LoginComponent implements OnInit {
+	ngOnInit(){
+
+	}
+}

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/src/app/measure/create-measure/ac/ac.component.css
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/measure/create-measure/ac/ac.component.css b/ui/angular/src/app/measure/create-measure/ac/ac.component.css
new file mode 100644
index 0000000..38ec745
--- /dev/null
+++ b/ui/angular/src/app/measure/create-measure/ac/ac.component.css
@@ -0,0 +1,119 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+@import url('../../../../../node_modules/angular2-toaster/toaster.css');
+@import url('../../measure.component.css');
+
+div.tree div.tree-children::before,
+div.tree::before {
+    content: "";
+    position: absolute;
+    border-left: 1px dotted #23527c;
+    height: 100%;
+    top: -14px;
+    left: 12px
+}
+
+div.tree {
+    padding-left: 0;
+    margin-left: -5px
+}
+tree-root{
+    color: #999; 
+}
+
+div.tree div.tree-children {
+    position: relative;
+    padding-left: 0;
+    margin-left: 16px
+}
+
+div.tree div.tree-children::before {
+    left: 5px
+}
+
+div.tree treenode>div>.node-wrapper {
+    margin-left: 24px
+}
+
+div.tree treenode>div>.node-wrapper>.node-content-wrapper {
+    margin-left: 4px
+}
+
+div.tree treenode>div.tree-node-leaf>.node-wrapper {
+    margin-left: 0
+}
+
+div.tree treenode>div::before {
+    content: "";
+    position: absolute;
+    border-bottom: 1px dotted #23527c;
+    width: 7px;
+    margin-top: 12px;
+    left: 7px
+}
+
+div.tree treenode>div .toggle-children-wrapper {
+    width: 13px;
+    height: 13px;
+    border: 1px solid #23527c;
+    position: absolute;
+    left: 15px;
+    margin-top: 5px;
+    margin-left: 0;
+    display: inline-block;
+    background-color: #fff;
+    z-index: 1
+}
+
+div.tree treenode>div .toggle-children-wrapper::before {
+    content: "";
+    display: inline-block;
+    width: 7px;
+    border-top: 1px solid #23527c;
+    position: absolute;
+    top: 5px;
+    left: 2px
+}
+
+div.tree treenode>div .toggle-children-wrapper.toggle-children-wrapper-collapsed::after {
+    content: "";
+    display: inline-block;
+    height: 7px;
+    border-left: 1px solid #23527c;
+    position: absolute;
+    top: 2px;
+    left: 5px
+}
+
+div.tree treenode>div .toggle-children-wrapper .toggle-children {
+    display: none
+}
+
+div.tree treenode>div .node-content-wrapper {
+    margin-left: 4px
+}
+
+div.tree>treenode>div::before {
+    left: 14px
+}
+
+div.tree>treenode>div>.node-wrapper>treenodeexpander>.toggle-children-wrapper {
+    left: 22px
+}
+

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/src/app/measure/create-measure/ac/ac.component.html
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/measure/create-measure/ac/ac.component.html b/ui/angular/src/app/measure/create-measure/ac/ac.component.html
new file mode 100644
index 0000000..57d19cd
--- /dev/null
+++ b/ui/angular/src/app/measure/create-measure/ac/ac.component.html
@@ -0,0 +1,467 @@
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+<div class="container-fluid" (window:resize)="onResize($event)">
+  <div class="row">
+    <h5 class="over-title margin-bottom-15">Create Measure</h5>
+  </div>
+  <div class="row">
+    <form name="Form" id="form" (ngSubmit)="submit(acForm)" #acForm="ngForm"  novalidate>
+      <div id="wizard" class="swMain" >
+        <ul>
+          <li (click)="goTo(1)" >
+            <a [ngClass]="{'selected' : currentStep >= 1, 'done' : currentStep > 1}" class="selected">
+              <div class="stepNumber">
+                1
+              </div>
+              <span class="stepDesc text-small"> Choose Source </span>
+            </a>
+          </li>
+          <li (click)="goTo(2)">
+            <a [ngClass]="{'selected' : currentStep >= 2, 'done' : currentStep > 2}" class="" style="">
+              <div class="stepNumber">
+                2
+              </div>
+              <span class="stepDesc text-small"> Choose Target </span>
+            </a>
+          </li>
+          <li (click)="goTo(3)">
+            <a [ngClass]="{'selected' : currentStep >= 3, 'done' : currentStep > 3}">
+              <div class="stepNumber">
+                3
+              </div>
+              <span class="stepDesc text-small"> Mapping Source and Target </span>
+            </a>
+          </li>
+          <li (click)="goTo(4)">
+            <a [ngClass]="{'selected' : currentStep >= 4, 'done' : currentStep > 4}">
+              <div class="stepNumber">
+                4
+              </div>
+              <span class="stepDesc text-small"> Configuration </span>
+            </a>
+          </li>
+        </ul>
+      </div>
+
+        <div id="step-1" *ngIf="currentStep == 1" class="formStep" >
+          <label class="stepDesc">This step let you choose the single source of truth for data quality comparision with target. Currently you can only select the attributes from one schema</label>
+          <div class="container-fluid">
+           
+            <div class="col-md-4 col-lg-4 col-sm-4">
+              <fieldset>
+                <legend>Please select schema</legend>
+                <tree-root [nodes]="nodeList" [options]="options"></tree-root>
+              </fieldset>
+            </div>
+            <div class="col-md-8 col-lg-8 col-sm-8">
+              <fieldset>
+                <legend>
+                  Select attributes
+                </legend>
+                <div class="y-scrollable">
+                  <div>
+                    <label>View schema:</label> 
+                    <i
+                    style="color:#fff;font-weight: bold;">{{currentDB}}.{{currentTable}}
+                    </i>
+                  </div>
+                  <div>
+                    <table class="table table-striped">
+                      <thead>
+                      <tr style="background-color:#7D95CC">
+                        <th><input type="checkbox" (click)="toggleAll()" [checked]="selectedAll"
+                        /></th>
+                        <th>Column Name</th>
+                        <th>Type</th>
+                        <th>Comment</th>
+                      </tr>
+                      </thead>
+                      <tbody>
+                      <tr *ngIf="!schemaCollection || schemaCollection.length == 0">
+                        <td colspan="5" style="text-align:center" ><span class="highlight">Please select a schema from the left tree first</span></td>
+                      </tr>
+                      <tr *ngFor="let row of schemaCollection">
+                        <td>
+                        <input type="checkbox" (click)='toggleSelection(row)' [checked]="row.selected" value={{row.name}}
+                        />
+                        </td>
+                        <td>{{row.name}}</td>
+                        <td>{{row.type}}</td>
+                        <td>{{row.comment}}</td>
+                      </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+              </fieldset>
+            </div>
+            <div class="form-group btn-container">
+              <toaster-container></toaster-container>
+              <button class="btn btn-primary btn-o next-step btn-wide pull-right" (click)="next(Form)">
+                Next <i class="fa fa-arrow-circle-right"></i>
+              </button>
+            </div>
+          </div>
+        </div>
+        <div id="step-2" *ngIf="currentStep == 2" class="formStep" >
+          <label class="stepDesc">This step let you choose the target for data quality comparision with source</label>
+          <div class="container-fluid">
+            <div class="col-md-4 col-lg-4 col-sm-4">
+              <fieldset>
+                <legend>Please select schema</legend>
+                <tree-root [nodes]="nodeListTarget" [options]="targetOptions"></tree-root>
+              </fieldset>
+            </div>
+            <div class="col-md-8 col-lg-8 col-sm-8">
+              <fieldset>
+                <legend>
+                  Select attributes
+                </legend>
+                <div class="y-scrollable">
+                  <div>
+                    <label>View schema:</label> 
+                    <i style="color:#fff;font-weight: bold;">{{currentDBTarget}}.{{currentTableTarget}}</i>
+                  </div>
+                  <div>
+                    <table st-table="schemaCollectionTarget" class="table table-striped">
+                      <thead>
+                      <tr style="background-color:#7D95CC">
+                        <th><input type="checkbox" (click)="toggleAllTarget()" [checked]="selectedAllTarget"  /></th>
+                        <th>Column Name</th>
+                        <th>Type</th>
+                        <th>Comment</th>
+                      </tr>
+                      </thead>
+                      <tbody>
+                      <tr *ngIf="!schemaCollectionTarget || schemaCollectionTarget.length == 0">
+                        <td colspan="5" style="text-align:center" ><span class="highlight">Please select a schema from the left tree first</span></td>
+                      </tr>
+                      <tr *ngFor="let row of schemaCollectionTarget">
+                        <td>
+                        <input type="checkbox" (click)='toggleSelectionTarget(row)'  [checked]="row.selected"/>
+                        </td>
+                        <td>{{row.name}}</td>
+                        <td>{{row.type}}</td>
+                        <td>{{row.comment}}</td>
+                      </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+              </fieldset>
+            </div>
+            <div class="form-group btn-container" >
+              <button class="btn btn-primary btn-o back-step btn-wide pull-left" (click)="prev(Form)">
+                <i class="fa fa-arrow-circle-left"></i> Back
+              </button>
+              <toaster-container></toaster-container>
+              <button class="btn btn-primary btn-o next-step btn-wide pull-right" (click)="next(Form)">
+                Next <i class="fa fa-arrow-circle-right"></i>
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div id="step-3" *ngIf="currentStep == 3" class="formStep" >
+          <label class="stepDesc">This step let you map the target data fields to source fields, you can choose the related fields from dropdown list of source</label>
+          <div class="container-fluid">
+            <div class="col-md-12 col-lg-12 col-sm-12">
+              <fieldset>
+                <legend>
+                  Map the fields
+                </legend>
+
+                <div class="y-scrollable">
+
+                  <div class="container col-md-12 col-lg-12 col-sm-12">
+                    <table class="table table-striped">
+                      <thead>
+                      <tr style="background-color:#7D95CC;font-size:20px">
+                        <th style="width:40%;">Target Fields</th>
+                        <th style="width:10%;text-align:center">Map To</th>
+                        <th style="width:40%;text-align:center">Source Fields</th>
+                      </tr>
+                      </thead>
+                      <tbody>
+                      <tr *ngFor="let item of selectionTarget; let i=index" >
+                        <td>{{currentDBTarget}}.{{currentTableTarget}}.{{item}}</td>
+                        <td style="text-align:center;">
+                          <select class="form-control" style="background:#00FFFF;font-weight:bold" id="mapRule" name='mapRule-{{i}}' [(ngModel)]="matches[i]" value="matches[i]">
+                            <option *ngFor="let func of matchFunctions">{{func}}</option>
+                          </select>
+                        </td>
+                        <td>
+                          <select class="form-control" [(ngModel)] = 'mappings[i]' name="mappings{{i}}"
+                          (ngModelChange)="addMapping($event,i)" value="mappings[i]">
+                            <option  
+                            *ngFor="let itemSrc of selection"  
+                            [ngValue]="itemSrc"   
+                        >
+                            {{currentDB}}.{{currentTable}}.{{itemSrc}}</option>
+                          </select>
+                        </td>
+                      </tr>
+                      </tbody>
+                    </table>
+                    <p>
+                      <label style="color:#B2C831">Accuracy Calculation Formula as Below:</label>
+                    </p>
+
+                    <div class="col-md-12 col-lg-12 col-sm-12" style="color:#fff;font-size:16px;display: flex;align-items: center">
+
+                      <div class="" style="text-align:right;display:block;float:left;width:20%;">
+                        Accuracy Rate(%) =
+                      </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">{{selectionTarget.length}}</span> <span style="color:green;">{{currentTableTarget}}</span>  and <span class="badge">{{mappings.length}}
+                          </span> <span style="color:green;">{{currentTable}}</span>  fields
+                        </div>
+                        <div>
+                          Total Count of records in <span style="color:green;font-weight:bold;">{{currentDB}}.{{currentTable}}</span>
+                        </div>
+                      </div>
+                      <div class="" style="text-align:left;display:block;float:left;width:10%;">
+                        x 100%
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </fieldset>
+            </div>
+
+            <div class="form-group btn-container" >
+              <button class="btn btn-primary btn-o back-step btn-wide pull-left" (click)="prev(Form)">
+                <i class="fa fa-arrow-circle-left"></i> Back
+              </button>
+              <toaster-container></toaster-container>
+              <button class="btn btn-primary btn-o next-step btn-wide pull-right" (click)="next(Form)">
+                Next <i class="fa fa-arrow-circle-right"></i>
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div id="step-4" *ngIf="currentStep == 4" class="formStep" >
+          <label class="stepDesc">Please setup the measure required information</label>
+          <div class="container-fluid">
+            <div class="col-md-12 col-lg-12 col-sm-12">
+              <fieldset>
+                <legend>
+                  Required Information
+                </legend>
+                <div class="y-scrollable">
+                  <div class="col-md-12 col-lg-12 col-sm-12">
+                    <div class="form-group" [ngClass]="{'has-error':acName.dirty&&acName.invalid, 'has-success':acName.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)]="name" name="acName" #acName="ngModel" placeholder="Please input the measure name" required pattern="^[a-zA-Z0-9_-]*$" id="acName">
+                        <span class="error text-small block " 
+                        *ngIf="acName.dirty && (acName.errors?.required)">
+                        Measure Name is required</span>
+                        <span class="error text-small block " *ngIf="acName.dirty && (acName.errors?.pattern)">Only letter, number, "-" and "_" are allowed</span>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-md-12 col-lg-12 col-sm-12">
+                    <div class="form-group">
+                      <label class="col-md-2 col-lg-2 col-sm-2 control-label">
+                        Measure Description:
+                      </label>
+
+                      <div class="col-md-10 col-lg-10 col-sm-10 ">
+                        <input type="text" class="form-control" [(ngModel)]="desc" placeholder="Please input detailed description of your measure" name="desc">
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-md-12 col-lg-12 col-sm-12">
+                    <div class="form-group">
+                      <label for="typeSelector" class="col-md-2 col-lg-2 col-sm-2 control-label">
+                        Measure Type:
+                      </label>
+                      <div class="col-md-10 col-lg-10 col-sm-10 ">
+                        <select id="typeSelector" class="form-control" [(ngModel)]="type"  disabled required name="type">
+                          <!-- <option *ngFor="let row of measureTypes" value="{{$index}}" >{{type}}</option> -->
+                          <option>{{type}}</option>
+                        </select>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-md-12 col-lg-12 col-sm-12">
+                    <div class="form-group">
+                      <label for="systemSelector" class="col-md-2 col-lg-2 col-sm-2 control-label">
+                        Organization:
+                      </label>
+                      <div class="col-md-10 col-lg-10 col-sm-10 ">
+                        <input type="text" id="systemSelector" class="form-control" [(ngModel)]="org"  required ng-pattern="'([0-9a-zA-Z\\_\\-])+'" name="org">
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-md-12 col-lg-12 col-sm-12">
+                    <div class="form-group">
+                      <label class="col-md-2 col-lg-2 col-sm-2 control-label">
+                        DataAsset:
+                      </label>
+                      <div class="col-md-10 col-lg-10 col-sm-10">
+                        <input type="text" class="form-control" name="DataAsset"
+                        value="{{currentTable}},{{currentTableTarget}}" disabled>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-md-12 col-lg-12 col-sm-12">
+                    <div class="form-group">
+                      <label class="col-md-2 col-lg-2 col-sm-2 control-label">
+                        Owner:
+                      </label>
+                      <div class="col-md-10 col-lg-10 col-sm-10">
+                        <input type="text"  class="form-control" name="owner" disabled
+                        [(ngModel)]="owner" >
+                      </div>
+                    </div>
+                  </div>
+                </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
+                  </p>
+                </div>
+
+              </fieldset>
+            </div>
+
+            <div class="form-group btn-container" >
+              <button class="btn btn-primary btn-o back-step btn-wide pull-left" (click)="prev(Form)">
+                <i class="fa fa-arrow-circle-left"></i> Back
+              </button>
+              <toaster-container></toaster-container>
+              <button type="submit" class="btn btn-primary btn-o next-step btn-wide pull-right">
+                Submit
+              </button>
+            </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-dialog modal-xg modal-lg">
+            <div class="modal-content">
+              <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+                <h4 class="modal-title">Save the measure with the below information?</h4>
+              </div>
+              <div class="modal-body">
+                <div class="container-fluid" id="viewruleContent" style="overflow:auto;">
+                  <div class="row">
+                    <h5 class="over-title margin-bottom-15">Basic information</h5>
+                  </div>
+                  <div class="row">
+                    <div  class="col-lg-12 col-md-12 col-sm-12">
+                      <div id="viewrule-definition" class="viewrule-content">
+                        <div class="row">
+                          <label class="col-md-4 col-lg-4 col-sm-4">
+                            Measure Name:
+                          </label>
+                          <div class="col-md-8 col-lg-8 col-sm-8 ">
+                            {{name}}
+                          </div>
+                        </div>
+                        <div class="row">
+                          <label class="col-md-4 col-lg-4 col-sm-4">
+                            Measure Description:
+                          </label>
+                          <div class="col-md-8 col-lg-8 col-sm-8 ">
+                            {{desc}}
+                          </div>
+                        </div>
+                        <div class="row">
+                          <label class="col-md-4 col-lg-4 col-sm-4">
+                            Measure Type:
+                          </label>
+                          <div class="col-md-8 col-lg-8 col-sm-8 ">
+                            {{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 ">
+                            {{org}}
+                          </div>
+                        </div>
+                        <div class="row">
+                          <label class="col-md-4 col-lg-4 col-sm-4">
+                            DataAsset:
+                          </label>
+                          <div class="col-md-8 col-lg-8 col-sm-8">{{currentTable}},{{currentTableTarget}}
+                          </div>
+                        </div>
+                        <div class="row">
+                          <label class="col-md-4 col-lg-4 col-sm-4">
+                            Owner:
+                          </label>
+                          <div class="col-md-8 col-lg-8 col-sm-8" >
+                            {{owner}}
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <br/>
+                  <h5 class="row">Mapping rules</h5>
+                  <div class="row">
+                    <p>{{rules}}</p>
+                    <p>
+                      <label style="color:#B2C831">Accuracy Calculation Formula as Below:</label>
+                    </p>
+                    <div class="col-md-12 col-lg-12 col-sm-12" style="color:#fff;font-size:16px;display: flex;                align-items: center">
+                      <div class="" style="text-align:right;display:block;float:left;width:20%;">
+                        Accuracy Rate(%) =
+                      </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">{{selectionTarget.length}}</span> <span style="color:green;">{{currentTableTarget}}</span>  and <span class="badge">{{mappings.length}}
+                          </span> <span style="color:green;">{{currentTable}}</span>  fields
+                        </div>
+                        <div>
+                          Total Count of records in <span style="color:green;font-weight:bold;">{{currentDB}}.{{currentTable}}</span>
+                        </div>
+                      </div>
+                      <div class="" style="text-align:left;display:block;float:left;width:10%;">
+                        x 100%
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+              </div>
+              <div class="modal-footer">
+                <button type="button" class="btn btn-default" (click)="hide()">Cancel</button>
+                <button type="button" class="btn btn-primary" (click)="save()">Save</button>
+              </div>
+            </div>
+          </div>
+        </div>
+    </form>
+  </div>
+</div>

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


[10/13] incubator-griffin git commit: refactor ui with angular2

Posted by gu...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/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
new file mode 100644
index 0000000..0e9be0b
--- /dev/null
+++ b/ui/angular/src/app/measure/measure-detail/measure-detail.component.ts
@@ -0,0 +1,70 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+import { Component, OnInit } 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']
+})
+export class MeasureDetailComponent implements OnInit {
+  currentId:string;
+  constructor(private route: ActivatedRoute,
+  private router: Router,private http:HttpClient,public servicecService:ServiceService) { };
+  ruleData : any;
+  sourceLength : number;
+  sourceDB : string;
+  targetDB : string;
+  sourceTable : string;
+  targetTable : string;
+  type:string;
+
+  ngOnInit() {
+    this.ruleData = {
+      'evaluateRule':''
+    };
+  	var getModelUrl;
+    var getModel = this.servicecService.config.uri.getModel; 
+  	this.currentId = this.route.snapshot.paramMap.get('id');
+
+    getModelUrl = getModel+"/"+this.currentId;
+        this.http.get(getModelUrl).subscribe(data=>{
+          // let data = {"id":1,"name":"waq","description":"waq","organization":"waq","type":"accuracy","source":{"id":1,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"users_info_src"}},"target":{"id":2,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"users_info_target"}},"evaluateRule":{"id":1,"sampleRatio":0,"rules":"$source['user_id'] == $target['user_id'] AND $source['first_name'] == $target['first_name'] AND $source['last_name'] == $target['last_name'] AND $source['address'] == $target['address'] AND $source['email'] == $target['email'] AND $source['phone'] == $target['phone'] AND $source['post_code'] == $target['post_code']"},"owner":"test"};
+          this.ruleData = data;
+          console.log(this.ruleData["data.sources"][0].connectors[0].config);
+          // this.sourceLength = this.ruleData.evaluateRule.rules.split('AND').length;
+          this.sourceDB = this.ruleData["data.sources"][0].connectors[0].config.database;
+          this.targetDB = this.ruleData["data.sources"][1].connectors[0].config.database;
+          this.sourceTable = this.ruleData["data.sources"][0].connectors[0].config["table.name"];
+          this.targetTable = this.ruleData["data.sources"][1].connectors[0].config["table.name"];
+          this.ruleData.type = this.ruleData.evaluateRule.rules[0]["dq.type"]
+         },err => {
+         	console.log('error');
+          // toaster.pop('error', 'Error when geting record', response.message);
+        });
+  }
+
+}

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/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
new file mode 100644
index 0000000..2cb4874
--- /dev/null
+++ b/ui/angular/src/app/measure/measure.component.css
@@ -0,0 +1,367 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+
+.table-striped > tbody > tr:nth-of-type(odd) {
+     background-color: #1f1f1f; 
+}
+
+#measureTable{
+	font-size:18px;
+}
+
+.ng2-st-actions-title .ng2-smart-title{
+	color:#1e6bb8;
+}
+
+#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
+}
+
+.swMain>div.formStep{
+  background-color: #000000;
+  border-radius: 5px;
+  padding:10px;
+  /*height:800px;*/
+}
+
+.swMain>ul li {
+    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
+}
+
+.swMain>ul li:first-child>a:before {
+    left: 50%;
+    max-width: 51%
+}
+
+.swMain>ul li:last-child>a:before {
+    max-width: 50%;
+    width: 50%
+}
+
+.swMain li>a.done:before,.swMain>ul li>a.selected:before {
+    border-color: #007AFF
+}
+
+.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
+}
+
+.swMain>ul li>a.selected .stepNumber {
+    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: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
+}
+
+.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 .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
+}
+
+.swMain li>a.done .stepDesc,.swMain>ul li>a.selected .stepDesc {
+    /*color: #2B3D53*/
+    color: #007AFF
+}
+
+.swMain>ul li>a.disabled {
+    cursor: default
+}
+
+.swMain .progress {
+    margin-bottom: 30px
+}
+
+.swMain .stepContainer {
+    height: auto!important
+}
+
+/*.swMain .close,.swMain .loader,.swMain [class*=" button"],.swMain [class^=button] {
+    display: none
+}*/
+
+.swMain .y-scrollable{
+  overflow-y: auto;
+  overflow-x: hidden;
+  max-height: 600px;
+}
+
+fieldset{
+  border: 1px solid #e6e8e8;
+  border-radius: 5px;
+  margin:20px 0;
+  padding: 25px;
+  position:relative;
+  min-width:0;
+  display:block;
+
+}
+
+fieldset legend{
+  background-color: #1f1f1f;
+  left: 10px;
+  padding: 0 10px;
+  position: absolute;
+  top: -12px;
+  color:#fff;
+  font-weight: 400;
+  width: auto!important;
+  border: none!important;
+}
+
+.btn-o{
+  background:0 0!important;
+}
+
+.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;*/
+}
+
+.label-definition{
+  color:#fff;
+}
+.formStep>.stepDesc{
+  color: #b2c831;
+}
+
+.formStep>.container-fluid{
+  /*position:relative;*/
+}
+
+.btn-container{
+  height:50px;
+  /*position: absolute;
+  bottom: 10;*/
+}
+
+.panel-disabled {
+  border-color: #B9D3DF;
+}
+.panel-disabled > .panel-heading {
+  background-color: #B9D3DF;
+  border-color: #B9D3DF;
+}
+
+.panel-body>ul{
+  border-radius:0;
+  background: none;
+  margin:0;
+}
+
+
+.panel-green {
+    border-color: #5cb85c;
+}
+
+.panel-green .panel-heading {
+    border-color: #5cb85c;
+    color: #fff;
+    background-color: #5cb85c;
+}
+
+.panel-green a {
+    color: #5cb85c;
+}
+
+.panel-green a:hover {
+    color: #3d8b3d;
+}
+
+.panel-red {
+    border-color: #d9534f;
+}
+
+.panel-red .panel-heading {
+    border-color: #d9534f;
+    color: #fff;
+    background-color: #d9534f;
+}
+
+.panel-red a {
+    color: #d9534f;
+}
+
+.panel-red a:hover {
+    color: #b52b27;
+}
+
+.panel-yellow {
+    border-color: #f0ad4e;
+}
+
+.panel-yellow .panel-heading {
+    border-color: #f0ad4e;
+    color: #fff;
+    background-color: #f0ad4e;
+}
+
+.panel-yellow a {
+    color: #f0ad4e;
+}
+
+.panel-yellow a:hover {
+    color: #df8a13;
+}
+
+.viewrule-content{
+  border:1px solid #fff;
+  border-radius:4px;
+  padding:10px;
+}
+
+.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 */
+}
+
+.createrule-hint{
+  color:#b2c831;
+  padding-top:10px;
+}
+
+
+::-webkit-scrollbar {
+    width: 6px;
+}
+::-webkit-scrollbar-track {
+    background-color: #eaeaea;
+    /*background-color: #0a0a0a;*/
+    border-left: 1px solid #ccc;
+}
+::-webkit-scrollbar-thumb {
+    background-color: #ccc;
+}
+::-webkit-scrollbar-thumb:hover {
+    background-color: #aaa;
+}
+
+.disabled {
+    pointer-events: none;
+    cursor: default;
+    opacity: 0.6;
+}
+
+.test-result {
+  border-radius: 5px;
+  padding: 1px 5px;
+}
+
+.delete-alert{
+  text-align: left;color: white;font-size: 150%;
+}
+a{
+  color: white;
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/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
new file mode 100644
index 0000000..60a4c8a
--- /dev/null
+++ b/ui/angular/src/app/measure/measure.component.html
@@ -0,0 +1,149 @@
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+<div>
+    <p>
+        <a routerLink="/createmeasure" class="btn btn-primary btn-o btn-wide" style="background-color: #337ab7;">
+        <i class="fa fa-plus"></i> 
+        Create Measure
+        </a>
+    </p>
+    <div id="modelContainer">
+    	<!-- <ng2-smart-table [settings]="settings" [source]="source" id="measureTable"  (delete)="onDelete($event)" (edit)="onEdit($event)"></ng2-smart-table> -->
+      <table class="table table-striped" [mfData]="results" #mf="mfDataTable" [mfRowsOnPage]="10">
+            <thead>
+            <tr style="background-color:#7D95CC">
+                <th st-ratio="15">Measure Name</th>
+                <th st-ratio="15">Measure Type</th>
+                <th st-ratio="20">Description</th>
+                <th st-ratio="5">Organization</th>
+                <th st-ratio="5">Action</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr *ngIf="!results">
+                <td colspan="7" style="text-align:center">No content!</td>
+            </tr>
+            <tr *ngFor="let row of mf.data">
+                <td><a routerLink="/measure/{{row.id}}">{{row.name}}</a></td>
+                <td>{{row.type}}</td>
+                <td>{{row.description}}</td>
+                <td>{{row.organization}}</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"></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>
+            </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-dialog modal-xg modal-lg">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+                    <h4 class="modal-title">Delete the model with the below information?</h4>
+                </div>
+                <div class="modal-body">
+
+                <div class="container-fluid" id="deleteContent" style="overflow:auto;">
+                  <div class="row">
+                    <h5 class="over-title margin-bottom-15">Basic information</h5>
+                  </div><!--//row-->
+                  <div class="row">
+                    <div  class="col-lg-12 col-md-12 col-sm-12">
+                      <div id="viewrule-definition" class="viewrule-content">
+                        <div class="row">
+                          <label class="col-md-4 col-lg-4 col-sm-4">
+                            Measure Name:
+                          </label>
+                          <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
+                            {{deletedRow.name}}
+                          </div>
+                        </div>
+                        <div class="row">
+                          <label class="col-md-4 col-lg-4 col-sm-4">
+                            Measure Definition:
+                          </label>
+                          <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
+                            {{deletedRow.description}}
+                          </div>
+                        </div>
+                        <div class="row">
+                          <label class="col-md-4 col-lg-4 col-sm-4">
+                            Measure Type:
+                          </label>
+                          <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
+                            {{deletedRow.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:
+                          </label>
+                          <div class="col-md-8 col-lg-8 col-sm-8" style="color: #fff">
+                            {{sourceTable}}&nbsp;&nbsp;{{targetTable}}
+                          </div>
+                        </div>
+                        <div class="row">
+                          <label class="col-md-4 col-lg-4 col-sm-4">
+                            Owner:
+                          </label>
+                          <div class="col-md-8 col-lg-8 col-sm-8" style="color: #fff">
+                            {{deletedRow.owner}}
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div><!--//row-->
+                </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>
+                    <button type="button" class="btn btn-default" (click)="confirmDelete()">Yes</button>
+                    <button type="button" class="btn btn-primary" (click)="hide()">No</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file

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

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/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
new file mode 100644
index 0000000..403e41e
--- /dev/null
+++ b/ui/angular/src/app/measure/measure.component.ts
@@ -0,0 +1,108 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+import { Component, OnInit} from '@angular/core';
+import { HttpClient} from '@angular/common/http';
+import { Ng2SmartTableModule ,LocalDataSource} from 'ng2-smart-table';
+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']
+})
+export class MeasureComponent implements OnInit {
+  //results:object[];
+  results:any;
+  source:LocalDataSource;
+  public visible = false;
+  public visibleAnimate = false;
+  deletedRow : any;
+  sourceTable :string;
+  targetTable :string;
+  deleteId : number;
+  deleteIndex:number;
+  // measureData= [{"id":22,"name":"i","description":"i","organization":"waq","type":"accuracy","source":{"id":43,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext"}},"target":{"id":44,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext1"}},"evaluateRule":{"id":22,"sampleRatio":0,"rules":"$source['id'] == $target['id']"},"owner":"test","deleted":false,"process.type":"batch"},{"id":23,"name":"y","description":"y","organization":"waq","type":"accuracy","source":{"id":45,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext"}},"target":{"id":46,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext1"}},"evaluateRule":{"id":23,"sampleRatio":0,"rules":"$source['age'] > $target['age']"},"owner":"test","deleted":false,"process.type":"batch"},{"id":24,"name":"ggg","description":"g","organization":"waq","type":"accuracy","source":{"id":47,"type":"HIVE","version":"1.2","config":{"database"
 :"default","table.name":"ext"}},"target":{"id":48,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext1"}},"evaluateRule":{"id":24,"sampleRatio":0,"rules":"$source['id'] !== $target['id']"},"owner":"test","deleted":false,"process.type":"batch"},{"id":25,"name":"t","description":"t","organization":"qaq","type":"accuracy","source":{"id":49,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext1"}},"target":{"id":50,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext"}},"evaluateRule":{"id":25,"sampleRatio":0,"rules":"$source['name'] >= $target['name']"},"owner":"test","deleted":false,"process.type":"batch"},{"id":26,"name":"yyy","description":"yyy","organization":"yyy","type":"accuracy","source":{"id":51,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext"}},"target":{"id":52,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext1"}},"evaluateRule":{"id":26,"
 sampleRatio":0,"rules":"$source['id'] !== $target['name']"},"owner":"test","deleted":false,"process.type":"batch"},{"id":27,"name":"dd","description":"dd","organization":"waq","type":"accuracy","source":{"id":53,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext1"}},"target":{"id":54,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext"}},"evaluateRule":{"id":27,"sampleRatio":0,"rules":"$source['name'] !== $target['id']"},"owner":"test","deleted":false,"process.type":"batch"},{"id":28,"name":"yyyyyyyyy","description":"y","organization":"waq","type":"accuracy","source":{"id":55,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext"}},"target":{"id":56,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext1"}},"evaluateRule":{"id":28,"sampleRatio":0,"rules":"$source['id'] !== $target['id']"},"owner":"test","deleted":false,"process.type":"batch"},{"id":29,"name":"this","description":n
 ull,"organization":"hadoop","type":"accuracy","source":{"id":57,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext"}},"target":{"id":58,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext1"}},"evaluateRule":{"id":29,"sampleRatio":0,"rules":"$source['id'] == $target['id'] AND $source['name'] !== $target['name'] AND $source['age'] > $target['age']"},"owner":"test","deleted":false,"process.type":"batch"},{"id":30,"name":"new","description":null,"organization":"griffin","type":"accuracy","source":{"id":59,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext"}},"target":{"id":60,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext1"}},"evaluateRule":{"id":30,"sampleRatio":0,"rules":"$source['id'] !== $target['id'] AND $source['name'] == $target['name'] AND $source['age'] > $target['age']"},"owner":"test","deleted":false,"process.type":"batch"},{"id":31,"name":"www","description":"wn
 ","organization":"waq","type":"accuracy","source":{"id":61,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext"}},"target":{"id":62,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext1"}},"evaluateRule":{"id":31,"sampleRatio":0,"rules":"$source['id'] > $target['id'] AND $source['name'] == $target['name'] AND $source['age'] !== $target['age']"},"owner":"test","deleted":false,"process.type":"batch"},{"id":32,"name":"testtest","description":null,"organization":"waq","type":"accuracy","source":{"id":63,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext1"}},"target":{"id":64,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext"}},"evaluateRule":{"id":32,"sampleRatio":0,"rules":"$source['id'] !== $target['id'] AND $source['name'] > $target['name'] AND $source['age'] == $target['age']"},"owner":"test","deleted":false,"process.type":"batch"},{"id":33,"name":"search_hourly","descriptio
 n":"search","organization":"waq","type":"accuracy","source":{"id":65,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext"}},"target":{"id":66,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext1"}},"evaluateRule":{"id":33,"sampleRatio":0,"rules":"$source['id'] !== $target['id'] AND $source['name'] == $target['name'] AND $source['age'] >= $target['age']"},"owner":"test","deleted":false,"process.type":"batch"},{"id":34,"name":"testt","description":null,"organization":"waq","type":"accuracy","source":{"id":67,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext"}},"target":{"id":68,"type":"HIVE","version":"1.2","config":{"database":"default","table.name":"ext1"}},"evaluateRule":{"id":34,"sampleRatio":0,"rules":"$source['id'] !== $target['id'] AND $source['name'] == $target['name'] AND $source['age'] > $target['age']"},"owner":"test","deleted":false,"process.type":"batch"}];
+
+  public hide(): void {
+    this.visibleAnimate = false;
+    setTimeout(() => this.visible = false, 300);
+  }
+
+  public onContainerClicked(event: MouseEvent): void {
+    if ((<HTMLElement>event.target).classList.contains('modal')) {
+      this.hide();
+    }
+  }
+ 
+  constructor(private http:HttpClient,private router:Router,public servicecService:ServiceService) { 
+  };
+
+  remove(row){
+    this.visible = true;
+    setTimeout(() => this.visibleAnimate = true, 100);
+    this.deleteId = row.id;
+    this.deleteIndex = this.results.indexOf(row);
+    this.deletedRow = row;
+    this.sourceTable = this.deletedRow.source.config["table.name"];
+    this.targetTable = this.deletedRow.target.config["table.name"];
+  }
+
+  confirmDelete(){
+    var deleteModel = this.servicecService.config.uri.deleteModel;
+    let deleteUrl = deleteModel + '/' + this.deleteId;
+    this.http.delete(deleteUrl).subscribe(data => {
+      let deleteResult:any = data;
+      console.log(deleteResult.code);
+      if(deleteResult.code==202){
+        var self = this;
+        setTimeout(function () {
+          self.results.splice(self.deleteIndex,1);
+          self.source.load(self.results);
+          self.hide();
+        },200);
+      }
+    });
+  };
+
+  ngOnInit():void {
+    var allModels = this.servicecService.config.uri.allModels;
+  	this.http.get(allModels).subscribe(data =>{
+        for(let measure in data){
+          data[measure].trueName = data[measure].name;
+          data[measure].type = data[measure].evaluateRule.rules[0]["dq.type"];
+        }
+  		  this.results = Object.keys(data).map(function(index){
+          let measure = data[index];
+          return measure;
+        });
+  	});
+  // };
+// }
+   // this.results = this.measureData;
+  }
+}

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

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/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
new file mode 100644
index 0000000..d836f2d
--- /dev/null
+++ b/ui/angular/src/app/metric/detail-metric/detail-metric.component.html
@@ -0,0 +1,28 @@
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+<div 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">
+                <div id="bigChartDiv" echarts [options]="chartOption" ></div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file

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

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/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
new file mode 100644
index 0000000..e0924cb
--- /dev/null
+++ b/ui/angular/src/app/metric/detail-metric/detail-metric.component.ts
@@ -0,0 +1,264 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+import { Component, OnInit, 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]
+})
+export class DetailMetricComponent implements OnInit {
+
+  constructor(public chartService:ChartService,private route: ActivatedRoute,
+  private router: Router,private http:HttpClient,private zone:NgZone,public servicecService: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;
+  currentMeasure:string;
+  finalData:any;
+//   metricData = {
+// "hits" : {
+//     "hits" : [
+//       {
+//         "_source" : {
+//           "name" : "xixi",
+//           "tmst" : 1493962623461,
+//           "total" : 8043288,
+//           "matched" : 8034775
+//         }
+//       },
+//       {
+//         "_source" : {
+//           "name" : "xixi",
+//           "tmst" : 1493973423461,
+//           "total" : 9479698,
+//           "matched" : 9476094
+//         }
+//       },
+//       {
+//         "_source" : {
+//           "name" : "xixi",
+//           "tmst" : 1493987823461,
+//           "total" : 9194117,
+//           "matched" : 9164237
+//         }
+//       },
+//       {
+//         "_source" : {
+//           "name" : "xixi",
+//           "tmst" : 1493995023461,
+//           "total" : 9429018,
+//           "matched" : 9375324
+//         }
+//       },
+//       {
+//         "_source" : {
+//           "name" : "haha",
+//           "tmst" : 1493959023461,
+//           "total" : 1086389,
+//           "matched" : 1083336
+//         }
+//       },
+//       {
+//         "_source" : {
+//           "name" : "haha",
+//           "tmst" : 1493973423461,
+//           "total" : 1090650,
+//           "matched" : 1090445
+//         }
+//       },
+//       {
+//         "_source" : {
+//           "name" : "xixi",
+//           "tmst" : 1494009423461,
+//           "total" : 8029660,
+//           "matched" : 7979653
+//         }
+//       },
+//       {
+//         "_source" : {
+//           "name" : "haha",
+//           "tmst" : 1493980623461,
+//           "total" : 1088940,
+//           "matched" : 1079003
+//         }
+//       },
+//       {
+//         "_source" : {
+//           "name" : "haha",
+//           "tmst" : 1493995023461,
+//           "total" : 1048833,
+//           "matched" : 1047890
+//         }
+//       },
+//       {
+//         "_source" : {
+//           "name" : "search_hourly",
+//           "tmst" : 1493948223461,
+//           "total" : 100,
+//           "matched" : 99
+//         }
+//       },
+//       {
+//         "_source" : {
+//           "name" : "hh",
+//           "tmst" : 1493948224461,
+//           "total" : 100,
+//           "matched" : 99
+//         }
+//       },
+//       {
+//         "_source" : {
+//           "name" : "search_hourly",
+//           "tmst" : 1493948225461,
+//           "total" : 100,
+//           "matched" : 99
+//         }
+//       },
+//       {
+//         "_source" : {
+//           "name" : "hh",
+//           "tmst" : 1493948226461,
+//           "total" : 100,
+//           "matched" : 99
+//         }
+//       },
+//       {
+//         "_source" : {
+//           "name" : "buy_hourly",
+//           "tmst" : 1493948223461,
+//           "total" : 100,
+//           "matched" : 99
+//         }
+//       },
+//       {
+//         "_source" : {
+//           "name" : "hh",
+//           "tmst" : 1493948224461,
+//           "total" : 100,
+//           "matched" : 99
+//         }
+//       },
+//       {
+//         "_source" : {
+//           "name" : "buy_hourly",
+//           "tmst" : 1493948225461,
+//           "total" : 100,
+//           "matched" : 99
+//         }
+//       },
+//       {
+//         "_source" : {
+//           "name" : "buy_hourly",
+//           "tmst" : 1493948226461,
+//           "total" : 100,
+//           "matched" : 99
+//         }
+//       }
+//     ]
+//   }
+// }
+// ;
+
+  ngOnInit() {
+  	console.log('init');
+  	this.currentMeasure = this.route.snapshot.paramMap.get('name');
+    // this.finalData = this.getData(this.currentMeasure);
+    var self = this;
+      // let url_dashboard = this.servicecService.config.uri.dashboard;
+    var metricDetailUrl = this.servicecService.config.uri.dashboard;
+      // let data = this.metricData;
+      this.http.post(metricDetailUrl, {"query": {  "bool":{"filter":[ {"term" : {"name": this.currentMeasure }}]}},  "sort": [{"tmst": {"order": "asc"}}],"size":1000}).subscribe( data=> {
+         var metric = {
+           'name':'',
+           'timestamp':0,
+           'dq':0,
+           'details':[]
+         };
+        this.data = data;
+         metric.name = this.data.hits.hits[0]._source.name;
+         metric.timestamp =this.data.hits.hits[this.data.hits.hits.length-1]._source.tmst;
+         metric.dq = this.data.hits.hits[this.data.hits.hits.length-1]._source.matched/this.data.hits.hits[this.data.hits.hits.length-1]._source.matched*100;
+         metric.details = new Array();
+         for(let point of this.data.hits.hits){
+             metric.details.push(point);
+         };
+         this.chartOption = this.chartService.getOptionBig(metric);
+      $('#bigChartDiv').height(window.innerHeight-120+'px');
+    $('#bigChartDiv').width(window.innerWidth-400+'px');
+    $('#bigChartContainer').show();
+         // return metric;
+     });
+    // setTimeout(function function_name(argument) {
+    //   // body...
+    
+    // })
+    
+  }
+  ngAfterContentInit (){
+    console.log('after content init');
+  }
+
+  ngAfterContentChecked(){
+    console.log('after content checked');
+  }
+
+  ngOnDestroy(){
+  	console.log('destroy');
+  }
+
+  ngAfterViewInit(){
+  	console.log('after view init')
+  }
+
+  ngAfterViewChecked(){
+    console.log('after view checked');
+  }
+
+  onResize(event){
+   this.resizeTreeMap();
+  }
+
+  resizeTreeMap(){
+    $('#bigChartDiv').height( $('#mainWindow').height());
+    $('#bigChartDiv').width( $('#mainWindow').width());
+  }
+
+  getData(metricName){
+  	 
+  }
+}

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

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/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
new file mode 100644
index 0000000..cb85b00
--- /dev/null
+++ b/ui/angular/src/app/metric/metric.component.html
@@ -0,0 +1,60 @@
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+<div id="dashboard" class="bs-component" >
+	<div  class="container-fluid">
+		<div class="row col-lg-12" style="margin-top: 15px;">
+			<div class="form-group">
+	      	<span>
+	            <label>Organization: </label>
+	            <select ng-disabled="orgSelectDisabled" class="form-control"  (change)="changeOrg()" id="orgSelector" [(ngModel)]="selectedOrgIndex">
+                   <option value="0">-- All --</option>
+                   <option *ngFor="let opt of originalOrgs;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">
+                   <option value="0"> -- All -- </option>
+                   <option *ngFor="let opt of measureOptions;let n = index" value="{{n+1}}">{{opt}}</option>
+	            </select>
+	      	</span>
+			</div>
+		</div>
+		<div *ngFor="let outerItems of finalData;let parent=index">
+			<div class="row" >
+				<div class="col-sm-12 col-md-12 col-lg-12">
+					<h4>{{outerItems.name}}</h4>
+				</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 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>
+						<!-- <p class="text-right">
+							<a href (click)="getSample(items)" style="font-size: 11px;">
+								<u>Download&nbsp;Sample</u>
+							</a>
+						</p> -->
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
\ No newline at end of file

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

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/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
new file mode 100644
index 0000000..16cc750
--- /dev/null
+++ b/ui/angular/src/app/metric/metric.component.ts
@@ -0,0 +1,367 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+import { Component, OnInit } 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';
+
+@Component({
+  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 servicecService:ServiceService,
+  	private http: HttpClient,
+  	private router:Router) { }
+  orgs = [];
+  // finalData :any;
+  data :any;
+  finalData = [];
+  originalOrgs = [];
+  status:{
+  	'health':number,
+  	'invalid':number
+  };
+  chartOption = new Map();
+  // var formatUtil = echarts.format;
+  dataData = [];
+  // originalData = [];
+  originalData:any;
+  metricName = [];
+  metricNameUnique = [];
+  myData = [];
+  measureOptions = [];
+  selectedMeasureIndex = 0;
+  chartHeight:any;
+  selectedOrgIndex = 0;
+  // var formatUtil = echarts.format;
+  metricData = [];
+
+  // metricData = {
+  // "hits" : {
+  //   "hits" : [
+  //     {
+  //       "_source" : {
+  //         "name" : "xixi",
+  //         "tmst" : 1493962623461,
+  //         "total" : 8043288,
+  //         "matched" : 8034775
+  //       }
+  //     },
+  //     {
+  //       "_source" : {
+  //         "name" : "xixi",
+  //         "tmst" : 1493973423461,
+  //         "total" : 9479698,
+  //         "matched" : 9476094
+  //       }
+  //     },
+  //     {
+  //       "_source" : {
+  //         "name" : "xixi",
+  //         "tmst" : 1493987823461,
+  //         "total" : 9194117,
+  //         "matched" : 9164237
+  //       }
+  //     },
+  //     {
+  //       "_source" : {
+  //         "name" : "xixi",
+  //         "tmst" : 1493995023461,
+  //         "total" : 9429018,
+  //         "matched" : 9375324
+  //       }
+  //     },
+  //     {
+  //       "_source" : {
+  //         "name" : "xixi",
+  //         "tmst" : 1494009423461,
+  //         "total" : 8029660,
+  //         "matched" : 7979653
+  //       }
+  //     },
+  //     {
+  //       "_source" : {
+  //         "name" : "haha",
+  //         "tmst" : 1493959023461,
+  //         "total" : 1086389,
+  //         "matched" : 1083336
+  //       }
+  //     },
+  //     {
+  //       "_source" : {
+  //         "name" : "haha",
+  //         "tmst" : 1493973423461,
+  //         "total" : 1090650,
+  //         "matched" : 1090445
+  //       }
+  //     },
+  //     {
+  //       "_source" : {
+  //         "name" : "haha",
+  //         "tmst" : 1493980623461,
+  //         "total" : 1088940,
+  //         "matched" : 1079003
+  //       }
+  //     },
+  //     {
+  //       "_source" : {
+  //         "name" : "haha",
+  //         "tmst" : 1493995023461,
+  //         "total" : 1048833,
+  //         "matched" : 1047890
+  //       }
+  //     },
+  //     {
+  //       "_source" : {
+  //         "name" : "haha",
+  //         "tmst" : 1494013023461,
+  //         "total" : 1063349,
+  //         "matched" : 1055783
+  //       }
+  //     }
+  //   ]
+  // }
+  // };
+
+  public duplicateArray() {
+  let arr = [];
+  this.finalData.forEach((x) => {
+    arr.push(Object.assign({}, x));
+  });
+  console.log(arr);
+  // arr.map((x) => {x.status = DEFAULT});
+  return this.finalData.concat(arr);
+  }
+
+  ngOnInit() {
+    this.renderData();
+  	// var self = this;
+   //  // self.finalData = self.getMetricService.renderData();
+   //  // self.finalData = self.renderData();
+   //  // self.originalData = JSON.parse(JSON.stringify(self.finalData));
+   //  self.data = self.renderData();
+  	// setTimeout(function(){
+  	// 	// body...
+   //    // if(self.getMetricService.renderData()){
+      
+  	// 	// self.redraw(self.finalData);
+   //    // self.redraw(self.renderData());
+   //    self.redraw(self.data);
+   //    // }
+  	// },0);
+  	
+  }
+  
+
+  renderData(){
+    var url_organization = this.servicecService.config.uri.organization;
+    this.http.get(url_organization).subscribe(data => {
+      let orgWithMeasure = data;
+      var orgNode = null;
+      for(let orgName in orgWithMeasure){
+        orgNode = new Object();
+        orgNode.name = orgName;
+        orgNode.measureMap = orgWithMeasure[orgName];
+        this.orgs.push(orgNode);
+      }
+      this.originalOrgs = this.orgs;
+      let url_dashboard = this.servicecService.config.uri.dashboard;
+      this.http.post(url_dashboard, {"query": {"match_all":{}},  "sort": [{"tmst": {"order": "asc"}}],"size":1000}).subscribe(data => {
+            // this.originalData = JSON.parse(JSON.stringify(data));
+            this.originalData = data;
+            this.myData = JSON.parse(JSON.stringify(this.originalData.hits.hits));
+            this.metricName = [];
+            for(var i = 0;i<this.myData.length;i++){
+                this.metricName.push(this.myData[i]._source.name);
+            }
+            this.metricNameUnique = [];
+            for(let name of this.metricName){
+                if(this.metricNameUnique.indexOf(name) === -1){
+                    this.metricData[this.metricNameUnique.length] = new Array();
+                    this.metricNameUnique.push(name);
+                }
+            };
+            for(var i = 0;i<this.myData.length;i++){
+                for(var j = 0 ;j<this.metricNameUnique.length;j++){
+                    if(this.myData[i]._source.name==this.metricNameUnique[j]){
+                        this.metricData[j].push(this.myData[i]);
+                    }
+                }
+            }
+            for(let sys of this.originalOrgs){
+                var node = null;
+                node = new Object();
+                node.name = sys.name;
+                node.dq = 0;
+                node.metrics = new Array();
+                for (let metric of this.metricData){
+                    if(sys.measureMap.indexOf(metric[metric.length-1]._source.name)!= -1){
+                        var metricNode = {
+                            'name':'',
+                            'timestamp':'',
+                            'dq':0,
+                            'details':[]
+                        }
+                        metricNode.name = metric[metric.length-1]._source.name;
+                        metricNode.timestamp = metric[metric.length-1]._source.tmst;
+                        metricNode.dq = metric[metric.length-1]._source.matched/metric[metric.length-1]._source.total*100;
+                        metricNode.details = metric;
+                        node.metrics.push(metricNode);
+                    }
+                }
+                this.finalData.push(node);
+            }
+            this.originalData = JSON.parse(JSON.stringify(this.finalData));
+            var self = this;
+            setTimeout(function function_name(argument) {
+              // body...
+              self.redraw(self.finalData);
+
+            },0)
+            console.log(this.finalData);
+            // return JSON.parse(JSON.stringify(this.finalData));
+            return this.finalData;
+      });
+    });
+  };
+
+
+  getOption(parent,i){
+   	return this.chartOption.get('thumbnail'+parent+'-'+i);
+   }
+
+	// this.originalData = angular.copy(this.finalData);
+	    // if($routeParams.sysName && this.originalData && this.originalData.length > 0){
+	    //   for(var i = 0; i < this.originalData.length; i ++){
+	    //     if(this.originalData[i].name == $routeParams.sysName){
+	    //       this.selectedOrgIndex = i;
+	    //       this.changeOrg();
+	    //       this.orgSelectDisabled = true;
+	    //       break;
+	    //     }
+	    //   }
+	    // }
+	    // $timeout(function() {
+	    //     redraw(this.finalData);
+	    // });
+	   // });
+	// });
+//          $http.post(url_dashboard, {"query": {"match_all":{}},"size":1000}).success(function(res) {
+
+  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;
+            $('#thumbnail'+parentIndex+'-'+index).get(0).style.width = $('#thumbnail'+parentIndex+'-'+index).parent().width()+'px';
+            $('#thumbnail'+parentIndex+'-'+index).get(0).style.height = this.chartHeight;
+  			    this.chartOption.set(chartId,this.chartService.getOptionThum(data[i].metrics[j]));
+          }
+      }
+  }
+
+  goTo(parent,i){
+   	this.router.navigate(['/detailed/'+this.finalData[parent].metrics[i].name]) ;
+  }
+
+  changeOrg() {
+      this.selectedMeasureIndex = undefined;
+      this.measureOptions = [];
+      this.finalData = [];
+      if(this.selectedOrgIndex == 0){
+        for(let data of this.originalData){
+      		this.finalData.push(data);
+        }
+      }
+      else {
+        var org = this.originalData[this.selectedOrgIndex-1];
+        this.finalData.push(org);
+        for(let metric of org.metrics){
+        	if(this.measureOptions.indexOf(metric.name) == -1){
+        		this.measureOptions.push(metric.name);
+        	}
+        }
+      }
+      var self = this;
+      // self.data = self.renderData();
+      setTimeout(function() {
+          // self.redraw(self.finalData);
+          self.redraw(self.finalData);
+      }, 0);
+      console.log(this.originalData);
+  };
+
+  changeMeasure() {
+      this.finalData = [];
+      if(this.selectedOrgIndex == 0){
+      	for(let data of this.originalData){
+      		this.finalData.push(data);
+      	}
+      } else {
+        // var org = this.originalData[this.selectedOrgIndex-1];
+        var org = JSON.parse(JSON.stringify(this.originalData[this.selectedOrgIndex-1]));
+        this.finalData.push(org);
+      }
+      if(this.selectedMeasureIndex != undefined && this.selectedMeasureIndex != 0){
+        var measure = this.measureOptions[this.selectedMeasureIndex-1];
+        	for(let sys of this.finalData){
+            let oldMetrics = sys.metrics;
+            sys.metrics = [];
+            for(let i = 0;i<oldMetrics.length;i++){
+              if(oldMetrics[i].name == measure) {
+                sys.metrics.push(oldMetrics[i]);
+              }
+            };
+        };
+      }
+      var self = this;
+      // self.data = self.renderData();
+      setTimeout(function() {
+          // self.redraw(self.finalData);
+          self.redraw(self.finalData);
+      }, 0);
+      console.log(this.originalData);
+  }
+
+        // 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);
+        //   }
+        // });
+}

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

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

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

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/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
new file mode 100644
index 0000000..11573d2
--- /dev/null
+++ b/ui/angular/src/app/mydashboard/mydashboard.component.ts
@@ -0,0 +1,34 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-mydashboard',
+  templateUrl: './mydashboard.component.html',
+  styleUrls: ['./mydashboard.component.css']
+})
+export class MydashboardComponent implements OnInit {
+
+  constructor(public router: Router) { }
+
+  ngOnInit() {
+  }
+
+}

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

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/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
new file mode 100644
index 0000000..760dd9a
--- /dev/null
+++ b/ui/angular/src/app/service/chart.service.ts
@@ -0,0 +1,333 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class ChartService {
+
+  constructor() { }
+
+  formatter_value(value, index) {
+      if (value < 1000) {
+          return value;
+      } else {
+          return value/1000;
+      }
+  }
+
+  formatter_yaxis_name(metric) {
+    return 'accuracy (%)';
+  }
+
+  getUTCTimeStamp(timestamp) {
+    var TzOffset = new Date(timestamp).getTimezoneOffset()/60;
+    return timestamp-TzOffset*60*60*1000;
+  }
+
+  getTooltip(params) {
+    var result = '';
+    if (params.length > 0) {
+          result = new Date(this.getUTCTimeStamp(params[0].data[0])).toUTCString().replace('GMT', '')+
+                      '<br /> Value : ' + params[0].data[1];
+    }
+    return result;
+  }
+
+  getTooltipPosition(point, params, dom) {
+      return [point[0]/2, point[1]/2];
+  }
+
+  formatTimeStamp(timestamp) {
+      var TzOffset = new Date(timestamp).getTimezoneOffset()/60-7;
+      return timestamp+TzOffset*60*60*1000;
+  }
+
+  getMetricData(metric) {
+    var data = [];
+    var chartData = metric.details;
+    for(var i = 0; i < chartData.length; i++){
+           if(chartData[i]._source.total!=0)
+             data.push([this.formatTimeStamp(chartData[i]._source.tmst), parseFloat((chartData[i]._source.matched/chartData[i]._source.total*100).toFixed(2))]);
+           else
+             data.push([this.formatTimeStamp(chartData[i]._source.tmst), parseFloat((0).toFixed(2))]);
+      }
+
+    data.sort(function(a, b){
+      return a[0] - b[0];
+    });
+
+    return data;
+  }
+
+  getOptionSide(metric) {
+    var data = this.getMetricData(metric);
+    var self = this;
+    var option = {
+      title: {
+        show: false
+      },
+      backgroundColor: 'transparent',
+      grid:{
+        right: '5%',
+        left: '5%',
+        bottom: '5%',
+        top: 30,
+        containLabel: true
+
+      },
+      tooltip : {
+          trigger: 'axis',
+          formatter : function(params) {
+            return self.getTooltip(params);
+          }
+      },
+      xAxis : {
+              type : 'time',
+              splitLine: {
+                  show: false
+              },
+              splitNumber: 2,
+              axisLine:{
+              lineStyle:{
+                color:'white'
+              },
+            },
+            axisLabel:{
+              color:'white'
+            },
+            nameTextStyle:{
+              color:'white'
+            }
+      },
+      yAxis : {
+              type : 'value',
+              scale : true,
+              splitNumber: 2,
+              name: 'accuracy%',
+              axisLabel: {
+                  formatter: this.formatter_value,
+                  color:'white'
+              },
+              splitLine:{
+                lineStyle:{
+                  'type':'dashed'
+                }
+              },
+              axisLine:{
+              lineStyle:{
+                color:'white'
+              }
+            },
+              nameTextStyle:{
+                color:'white'
+              },
+              max:100
+              
+      },
+      series:{}
+    };
+    option.series = this.getSeries(metric);
+    return option;
+  }
+
+  getSeriesCount(metric) {
+    var series = [];
+    var data = this.getMetricData(metric);
+    series.push({
+          type: 'line',
+          data: data,
+          smooth:true,
+          lineStyle: {
+            normal: {
+                color: '#d48265'
+            }
+          },
+          itemStyle: {
+              normal: {
+                  color: '#d48265'
+              }
+          }
+      });
+      return series;
+  }
+
+  getSeries(metric) {
+    var series = {};
+    series = this.getSeriesCount(metric);
+    return series;
+  }
+
+  getOptionThum(metric) {
+    var data = this.getMetricData(metric);
+    var self = this;
+    var option = {
+      title: {
+        text:  metric.name,
+        left: 'center',
+        textStyle: {
+            fontWeight: 'normal',
+            fontSize: 15,
+            color:'white'
+        }
+      },
+      backgroundColor: 'transparent',
+      grid:{
+        right: '7%',
+        left: '5%',
+        bottom: '5%',
+        containLabel: true
+      },
+      tooltip : {
+          trigger: 'axis',
+          formatter : function(params) {
+            return self.getTooltip(params);
+          },
+          position: function(point, params, dom) {
+              return self.getTooltipPosition(point, params, dom);
+          }
+      },
+      xAxis : {
+      		  axisLine:{
+      		  	lineStyle:{
+      		  		color:'white'
+      		  	}
+      		  },
+              type : 'time',
+              splitLine: {
+                  show: false
+              },
+              axisLabel:{
+              	color:'white'
+              },
+              nameTextStyle:{
+              	color:'white'
+              },
+              splitNumber: 2
+      },
+   
+      yAxis : {
+              type : 'value',
+              scale : true,
+              name: 'accuracy%',
+              axisLabel: {
+                  formatter: this.formatter_value,
+                  color:'white'
+              },
+              splitLine:{
+              	lineStyle:{
+              		'type':'dashed'
+              	}
+              },
+              axisLine:{
+      		  	lineStyle:{
+      		  		color:'white'
+      		  	}
+      		  },
+              nameTextStyle:{
+              	color:'white'
+              },
+              splitNumber: 2,
+              max:100
+      },
+      series:{}
+    };
+    option.series = this.getSeries(metric);
+    return option;
+  }
+
+  getOptionBig(metric) {
+    var data = this.getMetricData(metric);
+    var self = this;
+    var option = {
+      title: {
+        text:  metric.name,
+        link: '/measure/' + metric.name,
+        target: 'self',
+        left: 'center',
+        textStyle: {
+            fontSize: 25,
+            color:'white'
+        }
+      },
+      grid: {
+        right: '2%',
+        left: '2%',
+        containLabel: true
+      },
+      dataZoom: [{
+        type: 'inside',
+        start: 0,
+        throttle: 50
+      },{
+        show: true,
+        start: 0
+      }],
+      tooltip : {
+          trigger: 'axis',
+          formatter : function(params) {
+            return self.getTooltip(params);
+          }
+      },
+      xAxis : {
+      		  axisLine:{
+      		  	lineStyle:{
+      		  		color:'white'
+      		  	}
+      		  },
+              type : 'time',
+              splitLine: {
+                  show: false
+              },
+              axisLabel:{
+              	color:'white'
+              },
+              nameTextStyle:{
+              	color:'white'
+              }
+      },
+      yAxis : {
+              type : 'value',
+              scale : true,
+              splitLine:{
+              	lineStyle:{
+              		'type':'dashed'
+              	}
+              },
+              name: 'accuracy%',
+              axisLabel: {
+                  formatter: null,
+                  color:'white'
+              },
+              axisLine:{
+      		  	lineStyle:{
+      		  		color:'white'
+      		  	}
+      		  },
+              nameTextStyle:{
+              	color:'white'
+              },
+              max:100
+      },
+      animation: true,
+      series:{}
+    };
+    option.series = this.getSeries(metric);
+    return option;
+  }
+}

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

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/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
new file mode 100644
index 0000000..d778485
--- /dev/null
+++ b/ui/angular/src/app/service/service.service.ts
@@ -0,0 +1,103 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class ServiceService {
+
+  constructor() { }
+  	// public this.BACKEND_SERVER = 'http://10.149.247.156:38080';
+    //public BACKEND_SERVER = 'http://localhost:8080';
+    public BACKEND_SERVER = '';
+    public API_ROOT_PATH = '/api/v1';
+    public ES_SERVER = "http://" + location.host.replace("8080", "9200");
+    //public ES_SERVER = "http://10.64.222.80:39200" ;
+
+    public config = {
+          // URI paths, always have a trailing /
+          uri: {
+              base: this.BACKEND_SERVER + this.API_ROOT_PATH,
+
+              dbtree:this.BACKEND_SERVER + '/metadata/hive/allTables',
+              schemadefinition: this.BACKEND_SERVER + '/metadata/hive/table',
+              dataassetlist: this.BACKEND_SERVER + '/metadata/hive/allTables',
+
+
+              // adddataasset: this.BACKEND_SERVER + this.API_ROOT_PATH + '/dataassets',
+              // updatedataasset: this.BACKEND_SERVER + this.API_ROOT_PATH + '/dataassets',
+              getdataasset: this.BACKEND_SERVER + this.API_ROOT_PATH + '/dataassets',
+              // deletedataasset: this.BACKEND_SERVER + this.API_ROOT_PATH + '/dataassets',
+
+              //mydashboard
+              getmydashboard: 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',
+
+              //metrics
+              statistics: this.BACKEND_SERVER + '/jobs/health',
+              // briefmetrics: this.BACKEND_SERVER + this.API_ROOT_PATH + '/metrics/briefmetrics',
+              heatmap: this.BACKEND_SERVER + this.API_ROOT_PATH + '/metrics/heatmap' ,
+              // metricdetail: this.BACKEND_SERVER + this.API_ROOT_PATH + '/metrics/complete',
+              // rulemetric: this.BACKEND_SERVER + this.API_ROOT_PATH + '/metrics/brief',
+//              organization:this.BACKEND_SERVER+'/org',
+              orgmap: this.BACKEND_SERVER+'/metrics/org',
+
+
+              metricsByOrg:'',
+//              organization:'/org.json',
+//              dashboard:'/dashboard.json',
+
+              organization:this.BACKEND_SERVER + '/orgWithMetricsName',
+              dashboard:this.ES_SERVER+'/griffin/accuracy/_search?pretty&filter_path=hits.hits._source',
+              metricsample: this.BACKEND_SERVER + this.API_ROOT_PATH + '/metrics/sample',
+              metricdownload: this.BACKEND_SERVER + this.API_ROOT_PATH + '/metrics/download',
+
+              //Models
+              allModels: this.BACKEND_SERVER + '/measures',
+              addModels: this.BACKEND_SERVER + '/measure',
+              deleteModel:this.BACKEND_SERVER + '/measure',
+              getModel: this.BACKEND_SERVER + '/measure',
+              enableModel: this.BACKEND_SERVER + this.API_ROOT_PATH + '/models/enableModel',
+
+              //Jobs
+              allJobs:this.BACKEND_SERVER + '/jobs/',
+              addJobs:this.BACKEND_SERVER+'/jobs',
+              getMeasuresByOwner:this.BACKEND_SERVER+'/measures/owner/',
+              deleteJob:this.BACKEND_SERVER + '/jobs',
+              getInstances:this.BACKEND_SERVER + '/jobs/instances',
+//              allJobs:'/jobs.json',
+              newAccuracyModel: this.BACKEND_SERVER + this.API_ROOT_PATH + '/models' ,
+              newValidityModel: this.BACKEND_SERVER + this.API_ROOT_PATH + '/models' ,
+              newAnomalyModel: this.BACKEND_SERVER + this.API_ROOT_PATH + '/models' ,
+              newPublishModel: this.BACKEND_SERVER + this.API_ROOT_PATH + '/models' ,
+              // newAccuracyModel: this.BACKEND_SERVER + this.API_ROOT_PATH + '/models/newAccuracyModel' ,
+              // newValidityModel: this.BACKEND_SERVER + this.API_ROOT_PATH + '/model/newValidityModel' ,
+              // newAnomalyModel: this.BACKEND_SERVER + this.API_ROOT_PATH + '/model/newAnomalyModel' ,
+              // newPublishModel: this.BACKEND_SERVER + this.API_ROOT_PATH + '/model/newPublishModel' ,
+              // getAccuracyModel: this.BACKEND_SERVER + this.API_ROOT_PATH + '/model/getAccuracyModel',
+              // getValidityModel: this.BACKEND_SERVER + this.API_ROOT_PATH + '/model/getValidityModel',
+              // getPublishModel: this.BACKEND_SERVER + this.API_ROOT_PATH + '/model/getPublishModel',
+              // getAnomalyModel: this.BACKEND_SERVER + this.API_ROOT_PATH + '/model/getAnomalyModel',
+
+              //Notification
+              getnotifications: this.BACKEND_SERVER + this.API_ROOT_PATH + '/notifications'
+          }
+
+      };
+}


[13/13] incubator-griffin git commit: refactor ui with angular2

Posted by gu...@apache.org.
refactor ui with angular2

 Update front-end from angularJS to angular2 and modify pom.xml

Author: dodobel <12...@qq.com>

Closes #130 from dodobel/master.


Project: http://git-wip-us.apache.org/repos/asf/incubator-griffin/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-griffin/commit/42ee8863
Tree: http://git-wip-us.apache.org/repos/asf/incubator-griffin/tree/42ee8863
Diff: http://git-wip-us.apache.org/repos/asf/incubator-griffin/diff/42ee8863

Branch: refs/heads/master
Commit: 42ee886343a300eb6ea50465e1c8df38d5bc458c
Parents: 460e2fd
Author: dodobel <12...@qq.com>
Authored: Wed Oct 11 12:30:45 2017 +0800
Committer: Lionel Liu <bh...@163.com>
Committed: Wed Oct 11 12:30:45 2017 +0800

----------------------------------------------------------------------
 ui/.bowerrc                                     |    4 -
 ui/angular/.angular-cli.json                    |   60 +
 ui/angular/.editorconfig                        |   13 +
 ui/angular/.gitignore                           |   43 +
 ui/angular/README.md                            |   28 +
 ui/angular/b3vHigh.jpg                          |  Bin 0 -> 555201 bytes
 ui/angular/karma.conf.js                        |   52 +
 ui/angular/package.json                         |   66 +
 ui/angular/protractor.conf.js                   |   46 +
 ui/angular/src/app/app.component.css            |  142 +++
 ui/angular/src/app/app.component.html           |  163 +++
 ui/angular/src/app/app.component.js             |   43 +
 ui/angular/src/app/app.component.spec.ts        |   50 +
 ui/angular/src/app/app.component.ts             |  151 +++
 ui/angular/src/app/app.module.js                |   65 +
 ui/angular/src/app/app.module.ts                |  158 +++
 .../src/app/dataasset/dataasset.component.css   |   32 +
 .../src/app/dataasset/dataasset.component.html  |  107 ++
 .../app/dataasset/dataasset.component.spec.ts   |   43 +
 .../src/app/dataasset/dataasset.component.ts    |   85 ++
 ui/angular/src/app/health/health.component.css  |   21 +
 ui/angular/src/app/health/health.component.html |   24 +
 .../src/app/health/health.component.spec.ts     |   43 +
 ui/angular/src/app/health/health.component.ts   |  345 ++++++
 .../app/job/create-job/create-job.component.css |   66 +
 .../job/create-job/create-job.component.html    |  252 ++++
 .../job/create-job/create-job.component.spec.ts |   43 +
 .../app/job/create-job/create-job.component.ts  |  229 ++++
 ui/angular/src/app/job/job.component.css        |   29 +
 ui/angular/src/app/job/job.component.html       |  192 +++
 ui/angular/src/app/job/job.component.spec.ts    |   43 +
 ui/angular/src/app/job/job.component.ts         |  165 +++
 ui/angular/src/app/login/login.component.css    |   83 ++
 ui/angular/src/app/login/login.component.html   |   88 ++
 .../src/app/login/login.component.spec.ts       |   43 +
 ui/angular/src/app/login/login.component.ts     |   31 +
 .../measure/create-measure/ac/ac.component.css  |  119 ++
 .../measure/create-measure/ac/ac.component.html |  467 ++++++++
 .../create-measure/ac/ac.component.spec.ts      |   43 +
 .../measure/create-measure/ac/ac.component.ts   |  594 +++++++++
 .../create-measure/create-measure.component.css |  123 ++
 .../create-measure.component.html               |  134 +++
 .../create-measure.component.spec.ts            |   43 +
 .../create-measure/create-measure.component.ts  |   52 +
 .../measure/create-measure/pr/pr.component.css  |  156 +++
 .../measure/create-measure/pr/pr.component.html |  392 ++++++
 .../create-measure/pr/pr.component.spec.ts      |   43 +
 .../measure/create-measure/pr/pr.component.ts   |  580 +++++++++
 .../measure-detail/measure-detail.component.css |   18 +
 .../measure-detail.component.html               |  105 ++
 .../measure-detail.component.spec.ts            |   43 +
 .../measure-detail/measure-detail.component.ts  |   70 ++
 .../src/app/measure/measure.component.css       |  367 ++++++
 .../src/app/measure/measure.component.html      |  149 +++
 .../src/app/measure/measure.component.spec.ts   |   44 +
 ui/angular/src/app/measure/measure.component.ts |  108 ++
 .../detail-metric/detail-metric.component.css   |   18 +
 .../detail-metric/detail-metric.component.html  |   28 +
 .../detail-metric.component.spec.ts             |   43 +
 .../detail-metric/detail-metric.component.ts    |  264 ++++
 ui/angular/src/app/metric/metric.component.css  |   36 +
 ui/angular/src/app/metric/metric.component.html |   60 +
 .../src/app/metric/metric.component.spec.ts     |   43 +
 ui/angular/src/app/metric/metric.component.ts   |  367 ++++++
 .../app/mydashboard/mydashboard.component.css   |   18 +
 .../app/mydashboard/mydashboard.component.html  |   18 +
 .../mydashboard/mydashboard.component.spec.ts   |   43 +
 .../app/mydashboard/mydashboard.component.ts    |   34 +
 .../src/app/service/chart.service.spec.ts       |   33 +
 ui/angular/src/app/service/chart.service.ts     |  333 +++++
 .../src/app/service/service.service.spec.ts     |   33 +
 ui/angular/src/app/service/service.service.ts   |  103 ++
 .../src/app/sidebar/sidebar.component.css       |  219 ++++
 .../src/app/sidebar/sidebar.component.html      |   84 ++
 .../src/app/sidebar/sidebar.component.spec.ts   |   43 +
 ui/angular/src/app/sidebar/sidebar.component.ts |  178 +++
 ui/angular/src/assets/.gitkeep                  |    0
 ui/angular/src/assets/img/1.PNG                 |  Bin 0 -> 13855 bytes
 ui/angular/src/assets/img/2.PNG                 |  Bin 0 -> 8562 bytes
 ui/angular/src/assets/img/b3vHigh.jpg           |  Bin 0 -> 555201 bytes
 ui/angular/src/assets/img/bollinger.png         |  Bin 0 -> 145323 bytes
 ui/angular/src/assets/img/construction.gif      |  Bin 0 -> 4853 bytes
 ui/angular/src/assets/img/favicon.ico           |  Bin 0 -> 9920 bytes
 ui/angular/src/assets/img/logo.gif              |  Bin 0 -> 5764 bytes
 ui/angular/src/assets/img/logo.png              |  Bin 0 -> 20582 bytes
 ui/angular/src/assets/img/mad.png               |  Bin 0 -> 47922 bytes
 ui/angular/src/assets/img/sidebar1.png          |  Bin 0 -> 1536 bytes
 ui/angular/src/assets/img/sidebar2.png          |  Bin 0 -> 1617 bytes
 ui/angular/src/assets/img/yoy.png               |  Bin 0 -> 28400 bytes
 ui/angular/src/environments/environment.js      |   27 +
 ui/angular/src/environments/environment.prod.ts |   21 +
 ui/angular/src/environments/environment.ts      |   26 +
 ui/angular/src/favicon.ico                      |  Bin 0 -> 9920 bytes
 ui/angular/src/index.html                       |   41 +
 ui/angular/src/main.js                          |   32 +
 ui/angular/src/main.ts                          |   35 +
 ui/angular/src/polyfills.ts                     |   90 ++
 ui/angular/src/styles.css                       | 1134 ++++++++++++++++++
 ui/angular/src/test.html                        |   41 +
 ui/angular/src/test.ts                          |   50 +
 ui/angular/src/tsconfig.app.json                |   13 +
 ui/angular/src/tsconfig.spec.json               |   20 +
 ui/angular/src/typings.d.ts                     |   23 +
 ui/angular/src/vendor.ts                        |   33 +
 ui/angular/tsconfig.json                        |   19 +
 ui/angular/tslint.json                          |  142 +++
 ui/angular/webpack.config.js                    |   82 ++
 ui/bower.json                                   |   24 -
 ui/build.xml                                    |   48 -
 ui/css/main.css                                 | 1124 -----------------
 ui/css/sidebar.css                              |  183 ---
 ui/css/treeview-check.css                       |   85 --
 ui/css/treeview.css                             |   85 --
 ui/img/1.PNG                                    |  Bin 13855 -> 0 bytes
 ui/img/2.PNG                                    |  Bin 8562 -> 0 bytes
 ui/img/bollinger.png                            |  Bin 145323 -> 0 bytes
 ui/img/construction.gif                         |  Bin 4853 -> 0 bytes
 ui/img/favicon.ico                              |  Bin 9920 -> 0 bytes
 ui/img/logo.gif                                 |  Bin 5764 -> 0 bytes
 ui/img/logo.png                                 |  Bin 20582 -> 0 bytes
 ui/img/mad.png                                  |  Bin 47922 -> 0 bytes
 ui/img/sidebar1.png                             |  Bin 1536 -> 0 bytes
 ui/img/sidebar2.png                             |  Bin 1617 -> 0 bytes
 ui/img/spinner.gif                              |  Bin 5860 -> 0 bytes
 ui/img/yoy.png                                  |  Bin 28400 -> 0 bytes
 ui/index.html                                   |  194 ---
 ui/js/app.js                                    |   47 -
 ui/js/bs.js                                     |   37 -
 ui/js/controllers/bigChart-ctrl.js              |   74 --
 ui/js/controllers/createdataasset-ctrl.js       |  185 ---
 ui/js/controllers/createjob-ac-ctrl.js          |  210 ----
 ui/js/controllers/createjob0.js                 |   47 -
 ui/js/controllers/createrule-ac-ctrl.js         |  459 -------
 ui/js/controllers/createrule-an-ctrl.js         |  303 -----
 ui/js/controllers/createrule-pu-ctrl.js         |  166 ---
 ui/js/controllers/createrule-va-ctrl.js         |  336 ------
 ui/js/controllers/createrule0-ctrl.js           |   46 -
 ui/js/controllers/dataassets-ctrl.js            |  144 ---
 ui/js/controllers/detail-ctrl.js                |   81 --
 ui/js/controllers/downloadSample-ctrl.js        |   41 -
 ui/js/controllers/editdataasset-ctrl.js         |  219 ----
 ui/js/controllers/footer-ctrl.js                |   61 -
 ui/js/controllers/health-ctrl.js                |  266 ----
 ui/js/controllers/index.js                      |   48 -
 ui/js/controllers/job-ctrl.js                   |  151 ---
 ui/js/controllers/main-ctrl.js                  |   41 -
 ui/js/controllers/metrics-ctrl.js               |  208 ----
 ui/js/controllers/module.js                     |   23 -
 ui/js/controllers/mydashboard-ctrl.js           |   89 --
 ui/js/controllers/nav-ctrl.js                   |   70 --
 ui/js/controllers/rule-ctrl.js                  |  176 ---
 ui/js/controllers/sidebar-ctrl.js               |  191 ---
 ui/js/controllers/subscribemodel-ctrl.js        |  411 -------
 ui/js/controllers/viewrule-ctrl.js              |  114 --
 ui/js/directives/bigchart.js                    |   97 --
 ui/js/directives/index.js                       |   20 -
 ui/js/directives/module.js                      |   23 -
 ui/js/directives/treeview.js                    |  252 ----
 ui/js/filters/index.js                          |   20 -
 ui/js/filters/module.js                         |   25 -
 ui/js/filters/strmap.js                         |   71 --
 ui/js/filters/strshorten.js                     |   50 -
 ui/js/main.js                                   |   97 --
 ui/js/routes.js                                 |  245 ----
 ui/js/services/bark-chart.js                    |  302 -----
 ui/js/services/index.js                         |   19 -
 ui/js/services/module.js                        |   23 -
 ui/js/services/services.js                      |  110 --
 ui/login/b3vHigh.jpg                            |  Bin 555201 -> 0 bytes
 ui/login/login.css                              |   90 --
 ui/login/login.html                             |  120 --
 ui/login/login.js                               |  111 --
 ui/login/logo.gif                               |  Bin 59985 -> 0 bytes
 ui/login/pad.png                                |  Bin 140342 -> 0 bytes
 ui/package.json                                 |   27 -
 ui/pages/dataassets/confirmation-dataasset.html |  125 --
 .../confirmation-delete-dataasset.html          |  104 --
 ui/pages/dataassets/createdataasset.html        |  241 ----
 ui/pages/dataassets/dataassets.html             |  108 --
 ui/pages/dataassets/editdataasset.html          |  223 ----
 ui/pages/health/health.html                     |   49 -
 ui/pages/jobs/confirmation-ac.html              |   86 --
 ui/pages/jobs/createjob-ac.html                 |  182 ---
 ui/pages/jobs/createjob0.html                   |   29 -
 ui/pages/jobs/delete-confirm.html               |   95 --
 ui/pages/jobs/jobs.html                         |  135 ---
 ui/pages/measures/confirmation-ac.html          |  122 --
 ui/pages/measures/confirmation-an.html          |  147 ---
 ui/pages/measures/confirmation-pu.html          |  161 ---
 ui/pages/measures/confirmation-va.html          |  161 ---
 ui/pages/measures/createrule-ac.html            |  436 -------
 ui/pages/measures/createrule-an.html            |  410 -------
 ui/pages/measures/createrule-pu.html            |  238 ----
 ui/pages/measures/createrule-va.html            |  407 -------
 ui/pages/measures/createrule0.html              |  259 ----
 ui/pages/measures/delete-confirm.html           |   95 --
 ui/pages/measures/detail.html                   |   80 --
 ui/pages/measures/measure.css                   |  347 ------
 ui/pages/measures/measures.html                 |  106 --
 ui/pages/measures/va-explaination.html          |  771 ------------
 ui/pages/measures/viewrule.html                 |  214 ----
 ui/pages/metrics/dashboard.html                 |   63 -
 ui/pages/metrics/download-sample.html           |   52 -
 ui/pages/metrics/metrics.css                    |   28 -
 .../mydashboard/confirmation-subscribe.html     |   42 -
 ui/pages/mydashboard/mydashboard.html           |   48 -
 ui/pages/mydashboard/subscribemodel.html        |  118 --
 ui/pages/template/bigchart.css                  |   95 --
 ui/pages/template/bigchart.html                 |   35 -
 ui/pages/template/undercons.html                |   22 -
 ui/pom.xml                                      |   48 +-
 ui/sidebar.html                                 |   92 --
 ui/src/main/java/jar/App.java                   |   33 -
 ui/src/test/java/jar/AppTest.java               |   58 -
 ui/tests/ut/karma.conf.js                       |  107 --
 .../specs/controllers/createjob-ac-ctrl.spec.js |   63 -
 .../controllers/createrule-ac-ctrl.spec.js      |  134 ---
 .../controllers/createrule-pu-ctrl.spec.js      |  110 --
 .../controllers/createrule-va-ctrl.spec.js      |  115 --
 .../specs/controllers/createrule0-ctrl.spec.js  |   67 --
 .../ut/specs/controllers/health-ctrl.spec.js    |   78 --
 ui/tests/ut/specs/controllers/job-ctrl.spec.js  |   62 -
 .../ut/specs/controllers/metrics-ctrl.spec.js   |   81 --
 ui/tests/ut/specs/controllers/nav-ctrl_spec.js  |   52 -
 ui/tests/ut/specs/controllers/rule-ctrl.spec.js |   62 -
 .../ut/specs/controllers/sidebar-ctrl_spec.js   |   94 --
 .../ut/specs/controllers/viewrule-ctrl.spec.js  |   77 --
 ui/tests/ut/specs/filters/strmap_spec.js        |   38 -
 ui/tests/ut/specs/filters/strshorten_spec.js    |   43 -
 ui/tests/ut/specs/services/services_spec.js     |   42 -
 ui/tests/ut/test-main.js                        |  102 --
 231 files changed, 10558 insertions(+), 15048 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/.bowerrc
----------------------------------------------------------------------
diff --git a/ui/.bowerrc b/ui/.bowerrc
deleted file mode 100644
index 959e169..0000000
--- a/ui/.bowerrc
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "directory": "bower_components",
-  "analytics": false
-}

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/.angular-cli.json
----------------------------------------------------------------------
diff --git a/ui/angular/.angular-cli.json b/ui/angular/.angular-cli.json
new file mode 100644
index 0000000..f887426
--- /dev/null
+++ b/ui/angular/.angular-cli.json
@@ -0,0 +1,60 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "project": {
+    "name": "griffin"
+  },
+  "apps": [
+    {
+      "root": "src",
+      "outDir": "dist",
+      "assets": [
+        "assets",
+        "favicon.ico"
+      ],
+      "index": "index.html",
+      "main": "main.ts",
+      "polyfills": "polyfills.ts",
+      "test": "test.ts",
+      "tsconfig": "tsconfig.app.json",
+      "testTsconfig": "tsconfig.spec.json",
+      "prefix": "app",
+      "styles": [
+        "styles.css"
+      ],
+      "scripts": [ "../node_modules/echarts/dist/echarts.min.js", "../node_modules/jquery/dist/jquery.min.js", "../node_modules/bootstrap/dist/js/bootstrap.min.js" ],
+      "environmentSource": "environments/environment.ts",
+      "environments": {
+        "dev": "environments/environment.ts",
+        "prod": "environments/environment.prod.ts"
+      }
+    }
+  ],
+  "e2e": {
+    "protractor": {
+      "config": "./protractor.conf.js"
+    }
+  },
+  "lint": [
+    {
+      "project": "src/tsconfig.app.json",
+      "exclude": "**/node_modules/**"
+    },
+    {
+      "project": "src/tsconfig.spec.json",
+      "exclude": "**/node_modules/**"
+    },
+    {
+      "project": "e2e/tsconfig.e2e.json",
+      "exclude": "**/node_modules/**"
+    }
+  ],
+  "test": {
+    "karma": {
+      "config": "./karma.conf.js"
+    }
+  },
+  "defaults": {
+    "styleExt": "css",
+    "component": {}
+  }
+}

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/.editorconfig
----------------------------------------------------------------------
diff --git a/ui/angular/.editorconfig b/ui/angular/.editorconfig
new file mode 100644
index 0000000..6e87a00
--- /dev/null
+++ b/ui/angular/.editorconfig
@@ -0,0 +1,13 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/.gitignore
----------------------------------------------------------------------
diff --git a/ui/angular/.gitignore b/ui/angular/.gitignore
new file mode 100644
index 0000000..6b66814
--- /dev/null
+++ b/ui/angular/.gitignore
@@ -0,0 +1,43 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+
+# dependencies
+/node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+testem.log
+/typings
+yarn-error.log
+
+# e2e
+/e2e/*.js
+/e2e/*.map
+
+# System Files
+.DS_Store
+Thumbs.db

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/README.md
----------------------------------------------------------------------
diff --git a/ui/angular/README.md b/ui/angular/README.md
new file mode 100644
index 0000000..301832c
--- /dev/null
+++ b/ui/angular/README.md
@@ -0,0 +1,28 @@
+# Griffin
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.3.0.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+Before running the tests make sure you are serving the app via `ng serve`.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/b3vHigh.jpg
----------------------------------------------------------------------
diff --git a/ui/angular/b3vHigh.jpg b/ui/angular/b3vHigh.jpg
new file mode 100644
index 0000000..0d6949d
Binary files /dev/null and b/ui/angular/b3vHigh.jpg differ

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/karma.conf.js
----------------------------------------------------------------------
diff --git a/ui/angular/karma.conf.js b/ui/angular/karma.conf.js
new file mode 100644
index 0000000..25b36fb
--- /dev/null
+++ b/ui/angular/karma.conf.js
@@ -0,0 +1,52 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular/cli'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular/cli/plugins/karma')
+    ],
+    client:{
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      reports: [ 'html', 'lcovonly' ],
+      fixWebpackSourcePaths: true
+    },
+    angularCli: {
+      environment: 'dev'
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false
+  });
+};

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/package.json
----------------------------------------------------------------------
diff --git a/ui/angular/package.json b/ui/angular/package.json
new file mode 100644
index 0000000..8c6e5de
--- /dev/null
+++ b/ui/angular/package.json
@@ -0,0 +1,66 @@
+{
+  "name": "griffin",
+  "version": "0.0.0",
+  "license": "MIT",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "4.4.4",
+    "@angular/cdk": "2.0.0-beta.12",
+    "@angular/common": "4.4.4",
+    "@angular/compiler": "4.4.4",
+    "@angular/core": "4.4.4",
+    "@angular/forms": "4.4.4",
+    "@angular/http": "4.4.4",
+    "@angular/material": "2.0.0-beta.12",
+    "@angular/platform-browser": "4.4.4",
+    "@angular/platform-browser-dynamic": "4.4.4",
+    "@angular/router": "4.4.4",
+    "angular2-datatable": "0.6.0",
+    "angular2-toaster": "4.0.1",
+    "bootstrap": "^3.3.7",
+    "core-js": "^2.4.1",
+    "echarts": "^3.7.0",
+    "font-awesome": "^4.7.0",
+    "ng2-bootstrap": "1.6.3",
+    "ngx-echarts": "1.2.4",
+    "rxjs": "5.4.2",
+    "zone.js": "^0.8.14"
+  },
+  "devDependencies": {
+    "@angular/cli": "1.3.0",
+    "@angular/compiler-cli": "4.4.4",
+    "@angular/language-service": "4.4.4",
+    "@types/jasmine": "~2.5.53",
+    "@types/jasminewd2": "~2.0.2",
+    "@types/jquery": "^3.2.12",
+    "@types/node": "~6.0.60",
+    "angular-tree-component": "^4.1.0",
+    "codelyzer": "~3.1.1",
+    "font-awesome": "^4.7.0",
+    "fontawesome": "^4.7.2",
+    "jasmine-core": "~2.6.2",
+    "jasmine-spec-reporter": "~4.1.0",
+    "jquery": "^3.2.1",
+    "karma": "~1.7.0",
+    "karma-chrome-launcher": "~2.1.1",
+    "karma-cli": "~1.0.1",
+    "karma-coverage-istanbul-reporter": "^1.2.1",
+    "karma-jasmine": "~1.1.0",
+    "karma-jasmine-html-reporter": "^0.2.2",
+    "ng2-smart-table": "^1.2.1",
+    "protractor": "~5.1.2",
+    "ts-node": "~3.2.0",
+    "tslint": "~5.3.2",
+    "typescript": "~2.3.3",
+    "typings": "^2.1.1",
+    "webpack": "^3.5.4"
+  }
+}

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/protractor.conf.js
----------------------------------------------------------------------
diff --git a/ui/angular/protractor.conf.js b/ui/angular/protractor.conf.js
new file mode 100644
index 0000000..bf3c9a3
--- /dev/null
+++ b/ui/angular/protractor.conf.js
@@ -0,0 +1,46 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+const { SpecReporter } = require('jasmine-spec-reporter');
+
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './e2e/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    'browserName': 'chrome'
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  onPrepare() {
+    require('ts-node').register({
+      project: 'e2e/tsconfig.e2e.json'
+    });
+    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+  }
+};

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/src/app/app.component.css
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/app.component.css b/ui/angular/src/app/app.component.css
new file mode 100644
index 0000000..cd5974f
--- /dev/null
+++ b/ui/angular/src/app/app.component.css
@@ -0,0 +1,142 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+@import url('../../node_modules/bootstrap/dist/css/bootstrap.css');
+*{
+	color:white;
+}
+
+.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
+    color: #ffffff;
+    background-color: transparent;
+}
+.navbar-default{
+	background-color: #060606;
+	border-color: #282828;
+}
+#toggle{
+    background: #060606;
+    color:#fff;
+}
+#toggle:hover{
+    color: #fff;
+    background-color: #060606;
+}
+.re:hover{
+    cursor: pointer;
+}
+
+
+h3{
+    font-size: 34px;
+}
+input{
+    margin: 12px;
+}
+
+
+
+.dropdown-menu{
+    background-color: #222222;
+}
+.dropdown-menu > li > a{
+    color: #ffffff;
+}
+.dropdown-menu > li > a:hover{
+    text-decoration: none;
+    color: #ffffff;
+    background-color: #2a9fd6;
+}
+.navbar-default .navbar-nav > .open > a {
+    background-color: #333;
+}
+.btn-circle{
+    font-size: 16px;
+    border-radius: 15px 15px 15px 15px;
+}
+.btn-primary{
+    background-color: #2a9fd6;
+}
+
+#content {
+    background-color: #1A237E;
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    background-size: cover;
+    height: 100vh;
+}
+hr {
+    margin-bottom: 30px;
+}
+
+@media (min-width: 992px) {
+
+    #content-row {
+        margin-top:12em;
+        margin-bottom:7em;
+    }
+
+    #bark-description {
+        display: block;
+    }
+
+    #bark-description-2 {
+        display: none;
+    }
+}
+
+@media (max-width:991px) {
+
+    #content-row {
+        margin-top:0em;
+        margin-bottom:0em;
+    }
+
+    #bark-description {
+        display: none;
+    }
+
+    #bark-description-2 {
+        margin-top: 3em;
+        display: block;
+    }
+}
+
+#bark-description p, #bark-description-2 p {
+    margin-left: 100px;
+    color: #ffffff;
+    font-size: 20px;
+}
+
+#content-row {
+    padding: 3em 0;
+    background-color: rgba(255, 255, 255, 0.2);
+}
+
+#loginMsg {
+    display: none;
+    background-color: #F1D7D7;
+    color: #A95252;
+    padding: 8px 12px;
+    border-radius: 4px;
+    text-align:center;
+}
+
+
+

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/src/app/app.component.html
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/app.component.html b/ui/angular/src/app/app.component.html
new file mode 100644
index 0000000..28f11d1
--- /dev/null
+++ b/ui/angular/src/app/app.component.html
@@ -0,0 +1,163 @@
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+<!--The content below is only a placeholder and can be replaced.-->
+<div *ngIf="ntAccount">
+  <nav class="navbar navbar-default navbar-fixed-top" ng-controller="NavCtrl">
+    <div class="container-fluid">
+        <div class="navbar-header">
+            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
+                <span class="sr-only">Toggle navigation</span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+            </button>
+            <a routerLink="/" class="navbar-brand" style="padding-top:5px;padding-bottom:0;"><img src="/assets/img/logo.png" title="Data Quality Service" style="max-height:40px;"/></a>
+        </div>
+
+        <div class="collapse navbar-collapse" id="navbar-collapse">
+            <ul class="nav navbar-nav">
+                <li><a routerLink="/health" routerLinkActive="active" class="changecolor">Health</a></li>
+                <li><a routerLink="/measures">Measures</a></li>
+                <li><a routerLink="/jobs">Jobs</a></li>
+                <li><a routerLink="/mydashboard">My Dashboard</a></li>
+            </ul>
+
+            <ul class="nav navbar-nav navbar-right">
+                <li class="dropdown">
+                    <a  class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="toggle">{{fullName}} <i class="fa fa-user fa-fw"></i><span class="caret"></span></a>
+                    <ul class="dropdown-menu dropdown-user">
+                        <li><a href="#!/undercons"><i class="fa fa-user fa-fw"></i> User Profile</a></li>
+                        <li><a href="#!/undercons"><i class="fa fa-gear fa-fw"></i> Settings</a></li>
+                        <li class="divider"></li>
+                        <li><a href="/apidocs/index.html" target="_blank"><i class="fa fa-book fa-fw"></i> API DOCs</a></li>
+                        <li><a href="https://github.com/eBay/griffin/blob/master/griffin-doc/userguide.md" target="_blank"><i class="fa fa-question-circle fa-fw"></i> User Guide</a></li>
+                        <li><a href="mailto://ebay-griffin-devs@googlegroups.com" ><i class="fa fa-envelope fa-fw"></i> Contact us</a></li>
+                        <li class="divider"></li>
+                        <li><a (click)="logout()" class="re"><i class="fa fa-sign-out fa-fw"></i> Logout</a>
+                        </li>
+                    </ul>
+                </li>
+            </ul>
+
+            <form class="navbar-search navbar-right nav navbar-nav" >
+                <input id="searchBox" type="text" class="search-query" placeholder="Search..." ng-disabled="!isActive('/measures')&&!isActive('/dataassets')">
+            </form>
+        </div>
+    </div>
+  </nav>
+
+  <div class="container-fluid"  us-spinner="{color:'#ffffff', lines:13, width:14, length:28, radius:42, shadow:true, hwaccel:true, speed:0.8}" spinner-on="false" style="padding-top:56px;padding-bottom:90px;height:100%;padding-right:0;" id="mainContent">
+
+
+    <div class="col-md-9 col-xs-12" >
+        <button type="button" class="btn btn-primary btn-circle" style="position: absolute; top: 0px; right: 30px; z-index:99" (click)="history.back();"><span style="margin-bottom:20px;">Back</span></button>
+        <!-- main content goes here-->
+        <div id="mainWindow" (window:resize)="onResize($event)" class="row" ng-view style="overflow-y: auto;overflow-x:hidden; padding-right: 10px;" >
+        <router-outlet></router-outlet>
+        </div>
+    </div>
+
+    <div  class="col-xs-12 col-md-3" style="padding-right:0;">
+        <app-sidebar></app-sidebar>
+    </div>
+
+    <div id="footerwrap" class="navbar-fixed-bottom">
+        <div class="container-fluid" class="ng-cloak">
+            <div class="row " *ngIf="timestamp|date:'short'">
+                <p *ngIf="!notifications">{{timestamp|date:'short'}} - Welcome <label>{{fullName}}</label>!</p>
+                <p *ngFor="let r of notifications">
+                    {{r.timestamp|date:'short'}} - <label>{{r.owner}}</label> {{r.operation}}d a {{r.target}} named
+                    <a *ngIf="r.target=='model'" routerLink="/viewrule/{{r.name}}">{{r.name}}</a>
+                    <label *ngIf="r.target=='dataasset'">"{{r.name}}"</label>
+                </p>
+            </div>
+        </div>
+    </div>
+</div>
+</div>
+<!-- <app-login></app-login> -->
+<div *ngIf="!ntAccount" id="content" class="container-fluid">
+        <div class="row" id="content-row">
+
+            <div class="col-md-6 col-md-offset-1 col-xs-12">
+                <div id="bark-description">
+                    <h3>
+                        Data Quality Service Platform on eBay Cloud.
+                    </h3><br>
+                    <p>
+                        Automates your data quality validation
+                    </p><br>
+                    <p>
+                        Health monitoring, Profiling and detection
+                    </p><br>
+                    <p>
+                        Unified Visualization
+                    </p><br>
+                    <p>
+                        One set of tools to build data quality pipelines
+                    </p>
+                </div>
+            </div>
+
+            <div class="col-md-3 col-md-offset-1 col-xs-12">
+                <div id="login-form">
+                    <div style="text-align:center;margin-bottom:30px;">
+                        <img src="../assets/img/logo.png" class="img-rounded" style="width:80%;">
+                    </div>
+
+                    <input type="input" class="form-control" placeholder="username" autocomplete="on" style="margin-bottom:20px;" (focus)="focus($event)">
+
+                    <input type="password" class="form-control" placeholder="password" autocomplete="on" (keyup)="submit($event)" (focus)="focus($event)">
+
+                    <div class="checkbox">
+                    <label style="color:white;">
+                        <input type="checkbox" value="remember-me" checked>Remember me
+                    </label>
+                    </div>
+
+                    <button class="btn btn-default btn-large btn-block" id="login-btn" (click)="login()" style="margin-bottom: 20px;">Log in</button>
+
+                    <div id="loginMsg">Login failed. Try again.</div>
+                </div>
+            </div>
+
+            <div class="col-xs-12">
+                <div id="bark-description-2">
+                    <h3>
+                        Data Quality Service Platform on the eBay Cloud.
+                    </h3><br>
+                    <p>
+                        Automates your data quality validation
+                    </p><br>
+                    <p>
+                        Health monitoring, Profiling and detection
+                    </p><br>
+                    <p>
+                        Unified Visualization
+                    </p><br>
+                    <p>
+                        One set of tools to build data quality pipelines
+                    </p>
+                </div>
+            </div>
+        </div>
+
+</div>
+

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/src/app/app.component.js
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/app.component.js b/ui/angular/src/app/app.component.js
new file mode 100644
index 0000000..a7fbf35
--- /dev/null
+++ b/ui/angular/src/app/app.component.js
@@ -0,0 +1,43 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+exports.__esModule = true;
+var core_1 = require("@angular/core");
+// import 'bootstrap/dist/css/bootstrap.css';
+var AppComponent = (function () {
+    function AppComponent() {
+        this.title = 'app';
+    }
+    AppComponent = __decorate([
+        core_1.Component({
+            selector: 'app-root',
+            template: "\n    <h1>Angular Router</h1>\n    <nav>\n      <a routerLink=\"/measures\" routerLinkActive=\"active\"> Measures</a>\n      <a routerLink=\"/jobs\">jobs</a>\n    </nav>\n    <router-outlet></router-outlet>\n  ",
+            templateUrl: './app.component.html',
+            styleUrls: ['./app.component.css']
+        })
+    ], AppComponent);
+    return AppComponent;
+}());
+exports.AppComponent = AppComponent;

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

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/src/app/app.component.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/app.component.ts b/ui/angular/src/app/app.component.ts
new file mode 100644
index 0000000..b36d3b2
--- /dev/null
+++ b/ui/angular/src/app/app.component.ts
@@ -0,0 +1,151 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+import { Component ,Directive,ViewContainerRef} from '@angular/core';
+// import { RouterModule, Routes } from '@angular/router';
+import { Router} from "@angular/router";
+import { HttpClient} from '@angular/common/http';
+import * as $ from 'jquery';
+import {ServiceService} from './service/service.service';
+
+// import jQuery from 'jquery';
+
+// import  'bootstrap/dist/js/bootstrap.min.js';
+
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css'],
+  providers:[ServiceService]
+})
+export class AppComponent {
+  title = 'app';
+  ntAccount : string;
+  // ntAccount = "test";
+  timestamp:Date;
+  onResize(event){
+   this.resizeMainWindow();
+
+  }
+  results:any;
+  fullName ="hello";
+  ngOnInit(){
+    this.ntAccount = this.getCookie("ntAccount");
+    this.fullName = this.getCookie("fullName");
+    this.timestamp = new Date();
+  }
+  constructor(private router:Router,private http:HttpClient,public serviceService:ServiceService){
+
+  }
+  setCookie(name, value, days){
+    
+    let expires;
+        if (days) {
+            var date = new Date();
+            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+            console.log(date);
+            expires = "; expires=" + date.toUTCString();
+      } else {
+          expires = "";
+      }
+      // document.cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value) + expires + "; path=/";
+      document.cookie = name + "=" + value + expires + "; path=/";
+  }
+
+  getCookie(key) {
+        console.log(document.cookie);
+        var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
+        return keyValue ? keyValue[2] : null;
+    }
+
+  loginBtnWait() {
+      $('#login-btn').addClass('disabled')
+        .text('Logging in......');
+    }
+
+  loginBtnActive() {
+        $('#login-btn').removeClass('disabled')
+        .text('Log in');
+    }
+
+  showLoginFailed() {
+      $('#loginMsg').show()
+        .text('Login failed. Try again.');
+    }
+  resizeMainWindow(){
+    $('#mainWindow').height(window.innerHeight-56-90);
+  }
+  logout(){
+      this.ntAccount = undefined;
+      this.setCookie('ntAccount', undefined, -1);
+      this.setCookie('fullName', undefined, -1);
+    // this.router.navigate(['/login']) ;
+    // window.location.replace ('login.html');
+
+   }
+  submit(event){
+    if(event.which == 13){//enter
+        event.preventDefault();
+        $('#login-btn').click();
+        $('#login-btn').focus();
+      }
+  }
+  focus($event){
+    $('#loginMsg').hide();
+  }
+
+  login(){
+      var name = $('input:eq(0)').val();
+      var password = $('input:eq(1)').val();
+      console.log(name);
+      var loginUrl = 'http://localhost:8080/api/v1/login/authenticate';
+      this.loginBtnWait();
+
+      this.http   
+      .post(loginUrl,{username:name, password:password})
+      .subscribe(data => {
+        this.results = data;
+        if(this.results.status == 0)
+          {//logon success
+           if($('input:eq(2)').prop('checked')){
+            this.setCookie('ntAccount', this.results.ntAccount, 30);
+            this.setCookie('fullName', this.results.fullName, 30);
+           }else
+           {
+              this.setCookie('ntAccount', this.results.ntAccount,0);
+              this.setCookie('fullName', this.results.fullName,0);
+           }
+            this.loginBtnActive()
+            window.location.replace('/');
+          }
+          else{
+              this.showLoginFailed();
+              this.loginBtnActive();
+          };
+      
+    },
+    err => {
+          this.showLoginFailed();
+          this.loginBtnActive();
+    });
+
+  }
+}
+
+

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/src/app/app.module.js
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/app.module.js b/ui/angular/src/app/app.module.js
new file mode 100644
index 0000000..1ce697c
--- /dev/null
+++ b/ui/angular/src/app/app.module.js
@@ -0,0 +1,65 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+exports.__esModule = true;
+var platform_browser_1 = require("@angular/platform-browser");
+var core_1 = require("@angular/core");
+var router_1 = require("@angular/router");
+var app_component_1 = require("./app.component");
+var appRoutes = [
+    { path: 'health', component: app_component_1.AppComponent },
+    { path: 'measures', component: app_component_1.AppComponent },
+    { path: 'hero/:id', component: app_component_1.AppComponent },
+    { path: 'mydashboard', component: app_component_1.AppComponent },
+    {
+        path: 'jobs', component: app_component_1.AppComponent,
+        data: { title: 'Heroes List' }
+    },
+    { path: '',
+        redirectTo: 'health',
+        pathMatch: 'full'
+    },
+    { path: '**', component: app_component_1.AppComponent }
+];
+var AppModule = (function () {
+    function AppModule() {
+    }
+    AppModule = __decorate([
+        core_1.NgModule({
+            declarations: [
+                app_component_1.AppComponent
+            ],
+            imports: [
+                platform_browser_1.BrowserModule,
+                router_1.RouterModule.forRoot(appRoutes, { enableTracing: true } // <-- debugging purposes only
+                )
+            ],
+            providers: [],
+            bootstrap: [app_component_1.AppComponent]
+        })
+    ], AppModule);
+    return AppModule;
+}());
+exports.AppModule = AppModule;

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/src/app/app.module.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/app.module.ts b/ui/angular/src/app/app.module.ts
new file mode 100644
index 0000000..c7a3022
--- /dev/null
+++ b/ui/angular/src/app/app.module.ts
@@ -0,0 +1,158 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+import { BrowserModule } from '@angular/platform-browser';
+import {NgModule} from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { HttpClientModule} from '@angular/common/http';
+
+import { Ng2SmartTableModule } from 'ng2-smart-table';
+import {DataTableModule} from "angular2-datatable";
+import { TreeModule } from 'angular-tree-component';
+import { BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import { AngularEchartsModule } from 'ngx-echarts';
+// import { MdDatepickerModule, MdNativeDateModule} from '@angular/material';
+import { MatDatepickerModule, MatNativeDateModule} from '@angular/material';
+
+import {ToasterModule, ToasterService} from 'angular2-toaster';
+import { FormsModule } from '@angular/forms';
+import { AppComponent } from './app.component';
+import { MeasureComponent } from './measure/measure.component';
+import { JobComponent } from './job/job.component';
+import { SidebarComponent } from './sidebar/sidebar.component';
+import { HealthComponent } from './health/health.component';
+import { MydashboardComponent } from './mydashboard/mydashboard.component';
+import { CreateMeasureComponent } from './measure/create-measure/create-measure.component';
+import { MeasureDetailComponent } from './measure/measure-detail/measure-detail.component';
+import { MetricComponent } from './metric/metric.component';
+import { DetailMetricComponent } from './metric/detail-metric/detail-metric.component';
+import { DataassetComponent } from './dataasset/dataasset.component';
+import { CreateJobComponent } from './job/create-job/create-job.component';
+import { AcComponent} from './measure/create-measure/ac/ac.component';
+import { PrComponent } from './measure/create-measure/pr/pr.component';
+import { LoginComponent } from './login/login.component';
+
+
+
+const appRoutes: Routes = [
+  {
+    path: 'health',
+    component: HealthComponent
+  },
+  {
+    path: 'measures',
+    component: MeasureComponent
+  },
+  {
+    path: 'measure/:id',
+    component: MeasureDetailComponent
+  },
+  {
+    path: 'mydashboard',
+    component: MetricComponent
+  },
+  {
+    path: 'jobs',
+    component: JobComponent,
+  },
+  {
+    path: 'createjob',
+    component: CreateJobComponent,
+
+  },
+  {
+    path: 'createmeasure',
+    component:CreateMeasureComponent
+  },
+  {
+    path: 'createmeasureac',
+    component:AcComponent
+  },
+    {
+    path: 'createmeasurepr',
+    component:PrComponent
+  },
+  {
+    path: 'detailed/:name',
+    component:DetailMetricComponent
+  },
+  {
+    path: 'dataassets',
+    component:DataassetComponent
+  },
+  {
+    path: 'metrics',
+    component:MetricComponent
+  },
+  {
+    path: '',
+    redirectTo: 'health',
+    pathMatch: 'full'
+  },
+  {
+    path: 'login',
+    component:LoginComponent
+  },
+  // {
+  //   path: '**',
+  //   component: AppComponent
+  // }
+
+];
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    MeasureComponent,
+    JobComponent,
+    SidebarComponent,
+    HealthComponent,
+    MydashboardComponent,
+    CreateMeasureComponent,
+    MeasureDetailComponent,
+    MetricComponent,
+    DetailMetricComponent,
+    DataassetComponent,
+    CreateJobComponent,
+    AcComponent,
+    PrComponent,
+    LoginComponent,
+  ],
+  imports: [
+    BrowserModule,
+    HttpClientModule,
+    Ng2SmartTableModule,
+    TreeModule,
+    BrowserAnimationsModule,
+    ToasterModule,
+    FormsModule,
+    AngularEchartsModule,
+    DataTableModule,
+    RouterModule.forRoot(
+      appRoutes,
+      { enableTracing: false } // <-- debugging purposes only
+    ),
+    MatNativeDateModule,
+    MatDatepickerModule
+
+
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/src/app/dataasset/dataasset.component.css
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/dataasset/dataasset.component.css b/ui/angular/src/app/dataasset/dataasset.component.css
new file mode 100644
index 0000000..8f58e22
--- /dev/null
+++ b/ui/angular/src/app/dataasset/dataasset.component.css
@@ -0,0 +1,32 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+.icon{
+  color: #fff;
+  position: absolute;
+  left: 50%;
+  top: 80%;
+}
+
+
+.table-striped > tbody > tr{
+     background-color: #1f1f1f; 
+}
+
+
+

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/src/app/dataasset/dataasset.component.html
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/dataasset/dataasset.component.html b/ui/angular/src/app/dataasset/dataasset.component.html
new file mode 100644
index 0000000..7dfcc16
--- /dev/null
+++ b/ui/angular/src/app/dataasset/dataasset.component.html
@@ -0,0 +1,107 @@
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+<div  class="bs-component" >
+	<div id="assetContainer" style="margin-top:40px">
+    <table>
+        <tr>
+		  <td colspan="7" style="text-align:center;display: none" id="message">
+		     No content.
+		  </td>
+		  <td class="icon">
+			<span class="fa fa-spinner fa-spin fa-3x fa-fw"></span>
+		  </td>
+		</tr>
+    </table>
+    <table class="table table-striped" [mfData]="results" #mf="mfDataTable" [mfRowsOnPage]="5">
+	  	<thead>
+	    	<tr style="background-color:#7D95CC">
+				<th st-ratio="10">Table Name</th>
+				<th st-ratio="10">DB Name</th>
+				<th st-ratio="20">Owner</th>
+				<th st-ratio="10">Creation Time</th>
+				<th st-ratio="20">Last Access Time</th>
+				<th st-ratio="20">Location</th>
+
+			</tr>
+	  	</thead>
+	  	<tbody>
+		    <tr *ngIf="!results">
+		     <td *ngIf="!results" colspan="7" style="text-align:center">
+		     No content.
+		     </td>
+		     <td class="icon">
+				 <span class="fa fa-spinner fa-spin fa-3x fa-fw"></span>
+			 </td>
+		    </tr>
+		</tbody>
+	  	<tbody *ngFor="let row of mf.data" style="word-break:break-all;">
+	    	<tr>
+	    		<td [ngClass]="{accordion:true}" (click)="row.showDetail=!(row.showDetail)" style="cursor: pointer;">
+                    <i *ngIf="!row.showDetail" class="fa fa-chevron-circle-right blue"></i>
+                    <i *ngIf="row.showDetail" class="fa fa-chevron-circle-down blue"></i>
+                    {{row.tableName}}</td>
+	    		<td>{{row.dbName || 'N/A'}}</td>
+	        	<td>{{row.owner || 'N/A'}}</td>
+	    		<td>{{(row.createTime * 1000 | date: 'short') ||  'N/A'}}</td>
+	    		<td>{{(row.lastAccessTime * 1000 | date: 'short') || 'N/A' }}</td>
+	    		<td>{{row.sd.location || 'N/A'}}</td>
+	    	</tr>
+	    	<tr *ngIf="row.showDetail">
+	    		<td colspan="7" style="padding:20px 30px 10px 30px;">
+				    <table class="table table-striped" [mfData]="row.sd.cols" #mf2="mfDataTable">
+					  	<thead>
+					    	<tr style="background-color:#7D95CC">
+								<th st-ratio="15">Name</th>
+								<th st-ratio="15">Type</th>
+								<th st-ratio="15">Comment</th>
+					    	</tr>
+					  	</thead>
+					  	<tbody>
+					      <tr *ngIf="!row.sd.cols">
+					        <td colspan="7" style="text-align:center">No content.</td>
+					      </tr>
+					    	<tr *ngFor="let item of mf2.data">
+					    		<td>{{item.name}}</td>
+					    		<td>{{item.type}}</td>
+						        <td>{{item.comment || 'N/A'}}</td>
+					    	</tr>
+					  	</tbody>
+					  	<!-- <tfoot>
+	                      <tr>
+	                        <td colspan="8" class="text-right">
+	                           <mfBootstrapPaginator></mfBootstrapPaginator>
+	                        </td>
+	                      </tr>
+	                    </tfoot> -->
+				    </table>
+				</td>
+	    	</tr>
+	  	</tbody>
+	    <tfoot>
+	      <tr>
+	        <td colspan="8" class="text-right">
+	          <mfBootstrapPaginator></mfBootstrapPaginator>
+	        </td>
+	      </tr>
+	    </tfoot>
+    </table>
+    </div>
+</div>
+

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

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/src/app/dataasset/dataasset.component.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/dataasset/dataasset.component.ts b/ui/angular/src/app/dataasset/dataasset.component.ts
new file mode 100644
index 0000000..f18e818
--- /dev/null
+++ b/ui/angular/src/app/dataasset/dataasset.component.ts
@@ -0,0 +1,85 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+import { Component, OnInit } from '@angular/core';
+import {HttpClient} from '@angular/common/http';
+import { Ng2SmartTableModule ,LocalDataSource} from 'ng2-smart-table';
+import * as $ from 'jquery';
+import {ServiceService} from '../service/service.service';
+
+@Component({
+  selector: 'app-dataasset',
+  templateUrl: './dataasset.component.html',
+  providers:[ServiceService],
+  styleUrls: ['./dataasset.component.css']
+})
+export class DataassetComponent implements OnInit {
+  public results = [];
+  source:LocalDataSource;
+  public visible = false;
+  public visibleAnimate = false;
+  sourceTable :string;
+  targetTable :string;
+  data:object;
+
+  public hide(): void {
+    this.visibleAnimate = false;
+    setTimeout(() => this.visible = false, 300);
+  }
+
+  public onContainerClicked(event: MouseEvent): void {
+    if ((<HTMLElement>event.target).classList.contains('modal')) {
+      this.hide();
+    }
+  }
+  constructor(private http:HttpClient,public servicecService:ServiceService) { }
+  parseDate(time){
+    time = new Date(time);
+    var year = time.getFullYear();
+    var month = time.getMonth() + 1;
+    var day = time.getDate();
+    var hour = time.getHours();
+    if(hour<10)
+      hour = '0' + hour;
+    var minute = time.getMinutes();
+    if(minute<10)
+      minute = '0' + minute;
+    var second = time.getSeconds();
+    if(second<10)
+      second = '0' + second;
+    return  ( year +'/'+ month + '/'+ day + ' '+ hour + ':' + minute + ':' + second);
+  }
+
+
+  ngOnInit() {
+    var allDataassets = this.servicecService.config.uri.dataassetlist;
+    this.http.get(allDataassets).subscribe(data =>{
+        for (let db in data) {
+            for(let table of data[db]){           
+            table.location = table.sd.location;
+            this.results.push(table);
+            }       
+        }
+        this.source = new LocalDataSource(this.results);
+        this.source.load(this.results);
+        $('.icon').hide();
+    },err =>{
+      
+    });
+  };
+}

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

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/src/app/health/health.component.html
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/health/health.component.html b/ui/angular/src/app/health/health.component.html
new file mode 100644
index 0000000..f45e831
--- /dev/null
+++ b/ui/angular/src/app/health/health.component.html
@@ -0,0 +1,24 @@
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+<div class="tab-content" style='margin-top: '>
+  <div class="tab-pane fade active in" id="heatmap" >
+    <div echarts [options]="chartOption" class="demo-chart" id="chart1" (chartClick)="onChartClick($event)" style="margin-top: 50px;"></div>
+  </div>
+</div>
\ No newline at end of file

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

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/src/app/health/health.component.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/health/health.component.ts b/ui/angular/src/app/health/health.component.ts
new file mode 100644
index 0000000..dcb5c8c
--- /dev/null
+++ b/ui/angular/src/app/health/health.component.ts
@@ -0,0 +1,345 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+import { Component, OnInit } from '@angular/core';
+import  {HttpClient} from '@angular/common/http';
+import  {Router} from "@angular/router";
+// import {GetMetricService} from '../service/get-metric.service'
+import {ServiceService} from '../service/service.service';
+
+import * as $ from 'jquery';
+
+@Component({
+  selector: 'app-health',
+  templateUrl: './health.component.html',
+  styleUrls: ['./health.component.css'],
+  // providers:[GetMetricService]
+})
+export class HealthComponent implements OnInit {
+
+  constructor(private http: HttpClient,private router:Router,public servicecService:ServiceService) { };
+  chartOption:object;
+  // var formatUtil = echarts.format;
+  orgs = [];
+  dataData = [];
+  finalData = [];
+  // originalData = [];
+  originalData:any;
+  metricName = [];
+  metricNameUnique = [];
+  myData = [];
+  originalOrgs = [];
+
+
+  status:{
+    'health':number,
+    'invalid':number
+  };
+  // var formatUtil = echarts.format;
+  metricData = [];
+
+
+//   metricData = {
+//   "hits" : {
+//     "hits" : [
+//       {
+//         "_source" : {
+//           "name" : "xixi",
+//           "tmst" : 1493962623461,
+//           "total" : 8043288,
+//           "matched" : 8034775
+//         }
+//       },
+//       {
+//         "_source" : {
+//           "name" : "xixi",
+//           "tmst" : 1493973423461,
+//           "total" : 9479698,
+//           "matched" : 9476094
+//         }
+//       },
+//       {
+//         "_source" : {
+//           "name" : "xixi",
+//           "tmst" : 1493987823461,
+//           "total" : 9194117,
+//           "matched" : 9164237
+//         }
+//       },
+//       {
+//         "_source" : {
+//           "name" : "xixi",
+//           "tmst" : 1493995023461,
+//           "total" : 9429018,
+//           "matched" : 9375324
+//         }
+//       },
+//       {
+//         "_source" : {
+//           "name" : "xixi",
+//           "tmst" : 1494009423461,
+//           "total" : 8029660,
+//           "matched" : 7979653
+//         }
+//       },
+//       {
+//         "_source" : {
+//           "name" : "haha",
+//           "tmst" : 1493959023461,
+//           "total" : 1086389,
+//           "matched" : 1083336
+//         }
+//       },
+//       {
+//         "_source" : {
+//           "name" : "haha",
+//           "tmst" : 1493973423461,
+//           "total" : 1090650,
+//           "matched" : 1090445
+//         }
+//       },
+//       {
+//         "_source" : {
+//           "name" : "haha",
+//           "tmst" : 1493980623461,
+//           "total" : 1088940,
+//           "matched" : 1079003
+//         }
+//       },
+//       {
+//         "_source" : {
+//           "name" : "haha",
+//           "tmst" : 1493995023461,
+//           "total" : 1048833,
+//           "matched" : 1047890
+//         }
+//       },
+//       {
+//         "_source" : {
+//           "name" : "haha",
+//           "tmst" : 1494013023461,
+//           "total" : 1063349,
+//           "matched" : 1055783
+//         }
+//       }
+//     ]
+//   }
+// };
+  
+  onChartClick($event){
+    if($event.data.name){
+        // this.router.navigate(['/detailed/'+$event.data.name]);
+        window.location.href = '/detailed/'+$event.data.name;
+    }
+  }
+
+  resizeTreeMap() {
+    $('#chart1').height( $('#mainWindow').height() - $('.bs-component').outerHeight() );
+  };
+
+  parseData(data) {
+    var sysId = 0;
+    var metricId = 0;
+    var result = [];
+    	for(let sys of data){
+        var item = {
+            'id':'',
+            'name':'',
+            children:[]
+        };
+        item.id = 'id_'+sysId;
+        item.name = sys.name;
+        if (sys.metrics != undefined) {
+            item.children = [];
+            	for(let metric of sys.metrics){
+                var itemChild = {
+                    id: 'id_' + sysId + '_' + metricId,
+                    name: metric.name,
+                    value: 1,
+                    dq: metric.dq,
+                    sysName: sys.name,
+                    itemStyle: {
+                        normal: {
+                            color: '#4c8c6f'
+                        }
+                    },
+                };
+                if (metric.dqfail == 1) {
+                    itemChild.itemStyle.normal.color = '#ae5732';
+                } else {
+                    itemChild.itemStyle.normal.color = '#005732';
+                }
+                item.children.push(itemChild);
+                metricId++;
+            }
+        }
+        result.push(item);
+        sysId ++;
+    }
+    return result;
+   };
+
+   getLevelOption() {
+       return [
+           {
+               itemStyle: {
+                   normal: {
+                       borderWidth: 0,
+                       gapWidth: 6,
+                       borderColor: '#000'
+                   }
+               }
+           },
+           {
+               itemStyle: {
+                   normal: {
+                       gapWidth: 1,
+                       borderColor: '#fff'
+                   }
+               }
+           }
+       ];
+   };
+
+  renderTreeMap(res) {
+    var data = this.parseData(res);
+    var option = {
+        title: {
+            text: 'Data Quality Metrics Heatmap',
+            left: 'center',
+            textStyle:{
+                color:'white'
+            }
+        },
+        backgroundColor: 'transparent',
+        tooltip: {
+            formatter: function(info) {
+                var dqFormat = info.data.dq>100?'':'%';
+                if(info.data.dq)
+                return [
+                    '<span style="font-size:1.8em;">' + info.data.sysName + ' &gt; </span>',
+                    '<span style="font-size:1.5em;">' + info.data.name+'</span><br>',
+                    '<span style="font-size:1.5em;">dq : ' + info.data.dq.toFixed(2) + dqFormat + '</span>'
+                ].join('');
+            }
+        },
+        series: [
+            {
+                name:'System',
+                type:'treemap',
+                itemStyle: {
+                    normal: {
+                        borderColor: '#fff'
+                    }
+                },
+                levels: this.getLevelOption(),
+                breadcrumb: {
+                    show: false
+                },
+                roam: false,
+                nodeClick: 'link',
+                data: data,
+                width: '95%',
+                bottom : 0
+            }
+        ]
+    };
+    this.resizeTreeMap();
+    this.chartOption = option;
+  };
+  
+
+  renderData(){
+    var url_organization = this.servicecService.config.uri.organization;
+    this.http.get(url_organization).subscribe(data => {
+      let orgWithMeasure = data;
+      var orgNode = null;
+      for(let orgName in orgWithMeasure){
+        orgNode = new Object();
+        orgNode.name = orgName;
+        orgNode.measureMap = orgWithMeasure[orgName];
+        this.orgs.push(orgNode);
+      }
+      this.originalOrgs = this.orgs;
+      let url_dashboard = this.servicecService.config.uri.dashboard;
+      this.http.post(url_dashboard, {"query": {"match_all":{}},  "sort": [{"tmst": {"order": "asc"}}],"size":1000}).subscribe(data => {
+            this.originalData = JSON.parse(JSON.stringify(data));
+            this.myData = JSON.parse(JSON.stringify(this.originalData.hits.hits));
+            this.metricName = [];
+            for(var i = 0;i<this.myData.length;i++){
+                this.metricName.push(this.myData[i]._source.name);
+            }
+            this.metricNameUnique = [];
+            for(let name of this.metricName){
+                if(this.metricNameUnique.indexOf(name) === -1){
+                    this.metricData[this.metricNameUnique.length] = new Array();
+                    this.metricNameUnique.push(name);
+                }
+            };
+            for(var i = 0;i<this.myData.length;i++){
+                for(var j = 0 ;j<this.metricNameUnique.length;j++){
+                    if(this.myData[i]._source.name==this.metricNameUnique[j]){
+                        this.metricData[j].push(this.myData[i]);
+                    }
+                }
+            }
+            for(let sys of this.originalOrgs){
+                var node = null;
+                node = new Object();
+                node.name = sys.name;
+                node.dq = 0;
+                node.metrics = new Array();
+                for (let metric of this.metricData){
+                    if(sys.measureMap.indexOf(metric[metric.length-1]._source.name)!= -1){
+                        var metricNode = {
+                            'name':'',
+                            'timestamp':'',
+                            'dq':0,
+                            'details':[]
+                        }
+                        metricNode.name = metric[metric.length-1]._source.name;
+                        metricNode.timestamp = metric[metric.length-1]._source.tmst;
+                        metricNode.dq = metric[metric.length-1]._source.matched/metric[metric.length-1]._source.total*100;
+                        metricNode.details = metric;
+                        node.metrics.push(metricNode);
+                    }
+                }
+                this.finalData.push(node);
+            }
+            console.log(this.finalData);
+            var self = this;
+            setTimeout(function function_name(argument) {
+              // body...
+              self.renderTreeMap(self.finalData);
+            })
+            return JSON.parse(JSON.stringify(this.finalData));
+      });
+    });
+  };
+
+  ngOnInit() {
+    var self = this;
+    this.renderData();
+       // this.renderTreeMap(this.getMetricService.renderData());
+       // setTimeout(function function_name(argument) {
+       //   // body...
+       //     self.renderTreeMap(self.renderData());
+
+       // })
+  };
+}

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/src/app/job/create-job/create-job.component.css
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/job/create-job/create-job.component.css b/ui/angular/src/app/job/create-job/create-job.component.css
new file mode 100644
index 0000000..0bfb175
--- /dev/null
+++ b/ui/angular/src/app/job/create-job/create-job.component.css
@@ -0,0 +1,66 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+.job{
+	font-size: 20px;
+}
+
+.info{
+	color: #b2c831;
+}
+
+legend{
+    background-color: #1f1f1f;
+     color: #007AFF; 
+    left: 10px;
+    padding: 0 10px;
+    position: absolute;
+    top: -12px;
+    font-weight: 400;
+    color: #fff;
+    margin-bottom: 20px;
+    font-size: 21px;
+    width: auto!important;
+    border: none!important;
+}
+fieldset {
+    border: 1px solid #e6e8e8;
+    border-radius: 5px;
+    margin: 20px 0;
+    padding: 25px;
+    position: relative;
+    min-width: 0;
+    display: block;
+    height: 320px;
+}
+.setcolor{
+	color: #b2c831;
+}
+.setgrey{
+	color: #888888;
+}
+.mat-calendar-table{
+	height: 400px;
+}
+.mat-datepicker-content{
+	overflow-y: auto;
+}
+
+#md-datepicker-0{
+	height:250px;
+}
\ No newline at end of file


[07/13] incubator-griffin git commit: refactor ui with angular2

Posted by gu...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/js/controllers/createrule-ac-ctrl.js
----------------------------------------------------------------------
diff --git a/ui/js/controllers/createrule-ac-ctrl.js b/ui/js/controllers/createrule-ac-ctrl.js
deleted file mode 100644
index 6dc6d2b..0000000
--- a/ui/js/controllers/createrule-ac-ctrl.js
+++ /dev/null
@@ -1,459 +0,0 @@
-/*
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-*/
-
-define(['./module'], function(controllers) {
-    'use strict';
-    controllers.controller('CreateRuleACCtrl', ['$scope', '$http', '$config', '$location', 'toaster', '$timeout', '$route', '$filter', function($scope, $http, $config, $location, toaster, $timeout, $route, $filter) {
-        console.log('Create rule controller');
-        $scope.currentStep = 1;
-        //for dev purpose
-        //the selected columns for step 1
-        $scope.selection = [];
-        $scope.selectionTarget = [];
-        $scope.selectionPK = [];
-        $scope.mappings = [];
-        $scope.matches = [];
-        $scope.dataAsset = '';
-        $scope.basic = {};
-        $scope.rules = '';
-        // $scope.pk = '';
-
-        var dbtreeUrl = $config.uri.dbtree;
-        var schemaDefinitionUrl = $config.uri.schemadefinition;
-
-        $http.get(dbtreeUrl,{cache: true}).then(function successCallback(data) {
-            var dbList = [];
-            if (data.data) {
-                angular.forEach(data.data,function(db,key){
-                    var dbNode = {
-                        name: key,
-                        l1: true,
-                        children: []
-                    };
-                    dbList.push(dbNode);
-                    if (db) {
-                        angular.forEach(db,function(table){
-                            var dsNode = {
-                                name: table.tableName,
-                                l2: true,
-                                children: []
-                            };
-                            dbNode.children.push(dsNode);
-                            dsNode.parent = db;
-                            if (table.sd.cols) {
-                                table.sd.cols.sort(function(a, b){
-                                    return (a.name<b.name?-1:(a.name>b.name?1:0));
-                                });
-                                angular.forEach(table.sd.cols,function(col) {
-                                    var schemaNode = {
-                                        name: col.name,
-                                        type: col.type,
-                                        l3: true
-                                    };
-                                });
-                            }
-                         });
-                    };
-                });
-                $scope.dbList = dbList;
-                $scope.dbListTarget = angular.copy(dbList);
-            }
-        });
-
-        //trigger after select schema for src
-        $scope.$watch('currentNode', function(newValue) {
-            console.log(newValue);
-            $scope.selection = [];
-            $scope.selectedAll = false;
-            if (newValue) {
-                $http.get(schemaDefinitionUrl+ '?db=' + newValue.parent[0].dbName+'&table='+newValue.name).then(function successCallback(data) {
-                console.log(data);
-                $scope.schemaCollection = data.data.sd.cols;
-                console.log($scope.schemaCollection);
-                });
-            }
-
-        });
-
-        $scope.selectNodeLabelTarget = function(selectedNode) {
-            //remove highlight from previous node
-            if ($scope.currentNodeTarget && $scope.currentNodeTarget.selected) {
-                $scope.currentNodeTarget.selected = undefined;
-            }
-            if (selectedNode.children && selectedNode.children.length > 0) {
-                $scope.selectNodeHead(selectedNode);
-            } else {
-                //set highlight to selected node
-                selectedNode.selected = 'selected';
-            }
-            //set currentNode
-            $scope.currentNodeTarget = selectedNode;
-            $scope.dataAsset = $scope.currentNodeTarget.name + ',' + $scope.currentNode.name;
-        };
-        //trigger after select schema
-        $scope.$watch('currentNodeTarget', function(newValue) {
-            $scope.selectionTarget = [];
-            $scope.selectedAllTarget = false;
-            if (newValue) {
-                $http.get(schemaDefinitionUrl + '?db=' + newValue.parent[0].dbName+'&table='+newValue.name).then(function successCallback(data) {
-                $scope.schemaCollectionTarget = data.data.sd.cols;
-                });
-            }
-            if($scope.currentNodeTarget)
-                $scope.dataAsset = $scope.currentNodeTarget.name + ',' + $scope.currentNode.name;
-        });
-
-        $scope.toggleSelection = function toggleSelection($event) {
-            var value = $event.target.value;
-            var idx = $scope.selection.indexOf(value);
-            // is currently selected
-            if (idx > -1) {
-                $scope.selection.splice(idx, 1);
-                $scope.selectedAll = false;
-            }
-            // is newly selected
-            else {
-                $scope.selection.push(value);
-            }
-        };
-
-        $scope.toggleAll = function() {
-            if ($scope.selectedAll) {
-                $scope.selectedAll = true;
-            } else {
-                $scope.selectedAll = false;
-            }
-            $scope.selection = [];
-            angular.forEach($scope.schemaCollection, function(item) {
-                item.selected = $scope.selectedAll;
-                if ($scope.selectedAll) {
-                    $scope.selection.push($scope.currentNode.name + '.' + item.name);
-                }
-            });
-        }
-
-        $scope.toggleSelectionTarget = function($event) {
-            var value = $event.target.value;
-            var idx = $scope.selectionTarget.indexOf(value);
-            // is currently selected
-            if (idx > -1) {
-                $scope.selectionTarget.splice(idx, 1);
-                $scope.selectedAllTarget = false;
-            }
-            else {
-                $scope.selectionTarget.push(value);
-            }
-        }
-        ;
-
-        $scope.toggleAllTarget = function() {
-            if ($scope.selectedAllTarget) {
-                $scope.selectedAllTarget = true;
-            } else {
-                $scope.selectedAllTarget = false;
-            }
-
-            $scope.selectionTarget = [];
-            angular.forEach($scope.schemaCollectionTarget, function(item) {
-                item.selected = $scope.selectedAllTarget;
-                if ($scope.selectedAllTarget) {
-                    $scope.selectionTarget.push($scope.currentNodeTarget.name + '.' + item.name);
-                }
-            });
-        }
-
-        $scope.toggleSelectionPK = function($event) {
-            var value = $event.target.value;
-            var idx = $scope.selectionPK.indexOf(value);
-            // is currently selected
-            if (idx > -1) {
-                $scope.selectionPK.splice(idx, 1);
-                $scope.selectedAllPK = false;
-            }
-            // is newly selected
-
-            else {
-                $scope.selectionPK.push(value);
-            }
-        };
-
-        $scope.toggleAllPK = function() {
-            $scope.selectionPK = [];
-            if ($scope.selectedAllPK) {
-                $scope.selectedAllPK = true;
-                angular.forEach($scope.selectionTarget, function(item) {
-                    $scope.selectionPK.push(item);
-                });
-            } else {
-                $scope.selectedAllPK = false;
-            }
-        };
-
-        $scope.$on('$viewContentLoaded', function() {
-            resizeWindow();
-        });
-
-        $scope.$on('resizeHandler', function(e) {
-            if ($route.current.$$route.controller == "CreateRuleACCtrl") {
-                $scope.$emit('initReq');
-                resizeWindow();
-            }
-        });
-
-        function resizeWindow() {
-
-                    var stepSelection = '.formStep[id=step-' + $scope.currentStep + ']';
-                    $(stepSelection).css({
-                        height: window.innerHeight - $(stepSelection).offset().top - $('#footerwrap').outerHeight()
-                    });
-                    //to fix this bug later
-//                    $('fieldset').height($(stepSelection).height() - $(stepSelection + '>.stepDesc').height() - $('.btn-container').height() - 80);
-//                    document.getElementByTag('fieldset').style.minHeight = $(stepSelection).height() - $(stepSelection + '>.stepDesc').height() - $('.btn-container').height() - 80;
-//                    $('.y-scrollable').css({
-//                        'max-height': $('fieldset').height()- $('.add-dataset').outerHeight()
-//                    });
-
-
-        }
-
-        $scope.ruleTypes = $filter('strarr')('modeltype');//['Accuracy', 'Validity', 'Anomaly Detection', 'Publish Metrics'];
-        $scope.scheduleTypes = $filter('strarr')('scheduletype');//['Daily', 'Weekly', 'Monthly', 'Hourly'];
-        $scope.ruleSystems = $filter('strarr')('modelsystem');//['Bullseye', 'GPS', 'Hadoop', 'PDS', 'IDLS', 'Pulsar', 'Kafka'];
-        $scope.matchFunctions = ['==', '!==', '>', '>=','<',"<="];
-
-        // Initial Value
-        $scope.form = {
-
-            next: function(form) {
-
-                if (formValidation()) {
-                    // form.$setPristine();
-                    nextStep();
-                } else {
-                    var field = null
-                      , firstError = null ;
-                    for (field in form) {
-                        if (field[0] != '$') {
-                            if (firstError === null  && !form[field].$valid) {
-                                firstError = form[field].$name;
-                            }
-
-                            if (form[field].$pristine) {
-                                form[field].$dirty = true;
-                            }
-                        }
-                    }
-
-                    //  angular.element('.ng-invalid[name=' + firstError + ']').focus();
-                    errorMessage($scope.currentStep);
-                }
-            },
-            prev: function(form) {
-                //$scope.toTheTop();
-                prevStep();
-            },
-            goTo: function(form, i) {
-                if (parseInt($scope.currentStep) > parseInt(i)) {
-                    // $scope.toTheTop();
-                    goToStep(i);
-
-                } else {
-                    if (formValidation()) {
-                        //   $scope.toTheTop();
-                        if(i - parseInt($scope.currentStep) == 1){
-                          goToStep(i);
-                        }
-
-                    } else {
-                        errorMessage($scope.currentStep);
-                    }
-                }
-            },
-            submit: function(form) {
-                if (!form.$valid) {
-                    var field = null
-                      , firstError = null ;
-                    for (field in form) {
-                        if (field[0] != '$') {
-                            if (firstError === null  && !form[field].$valid) {
-                                firstError = form[field].$name;
-                            }
-
-                            if (form[field].$invalid) {
-                                form[field].$dirty = true;
-                            }
-                        }
-                    }
-                    angular.element('.ng-invalid[name=' + firstError + ']').focus();
-                    errorMessage($scope.currentStep);
-                } else {
-                    //  $location.path('/rules');
-                    form.$setPristine();
-                    var rule = '';
-                    this.data={
-                      "name":$scope.basic.name,
-                      "description":$scope.basic.desc,
-                      "organization":$scope.basic.system,
-                      "type":$scope.basic.type,
-                      "source":{
-                          "type":"HIVE",
-                          "version":"1.2",
-                          "config":{
-                              "database":$scope.currentNode.parent[0].dbName,
-                              "table.name":$scope.currentNode.name,
-                          },
-                      },
-                      "target":{
-                          "type":"HIVE",
-                          "version":"1.2",
-                          "config":{
-                              "database":$scope.currentNodeTarget.parent[0].dbName,
-                              "table.name":$scope.currentNodeTarget.name,
-                          },
-                      },
-                      "evaluateRule":{
-                          "rules":'',
-                      },
-                      "owner":$scope.basic.owner,
-                      mappings:[],
-
-                    };
-
-                    $scope.dataAsset = $scope.currentNodeTarget.name + ',' + $scope.currentNode.name;
-
-                    var mappingRule = function(src, tgt, matches) {
-                        var s = src.split('.');
-                        var t = tgt.split('.');
-                        return "$source['" + s[1] + "'] " + matches + " $target['" + t[1] + "']";
-                    }
-                    var rules = $scope.selectionTarget.map(function(item, i) {
-                        return mappingRule($scope.selection[i], item, $scope.matches[i]);
-                    });
-                    rule = rules.join(" AND ");
-
-                    $scope.rules = rule;
-                    this.data.evaluateRule.rules = rule;
-                    for(var i =0; i < $scope.selectionTarget.length; i ++){
-                      this.data.mappings.push({target:$scope.selectionTarget[i],
-                                      src:$scope.mappings[i],
-                                      matchMethod: $scope.matches[i],
-                                      isPk: ($scope.selectionPK.indexOf($scope.selectionTarget[i])>-1)?true:false});
-                    }
-                    $('#confirm').modal('show');
-                }
-            },
-
-            save: function() {
-                //::TODO: Need to save the data to backend with POST/PUT method
-                var newModel = $config.uri.addModels;
-                $http.post(newModel, this.data).then(function successCallback(data) {
-                    if(data.data.code=='408')
-                        toaster.pop('error','Create Measure Failed, duplicate records');
-                    $('#confirm').on('hidden.bs.modal', function(e) {
-                        $('#confirm').off('hidden.bs.modal');
-                        $location.path('/measures').replace();
-                        $scope.$apply();
-                    });
-                    $('#confirm').modal('hide');
-                },function errorCallback(response) {
-                    toaster.pop('error', 'Error when creating measure', response.message);
-                }
-                );
-            },
-        }
-
-        var nextStep = function() {
-            $scope.currentStep++;
-            $timeout(function(){
-                resizeWindow();
-            }, 0);
-        }
-
-        var prevStep = function() {
-            $scope.currentStep--;
-            $timeout(function(){
-                resizeWindow();
-            }, 0);
-        }
-
-        var goToStep = function(i) {
-            $scope.currentStep = i;
-
-            $timeout(function(){
-                resizeWindow();
-            }, 0);
-        }
-
-        $scope.$watch('currentStep', function(newValue){
-          if(newValue == 3){ //step 3
-            if($scope.selectionTarget.length < $scope.mappings.length){
-              $scope.mappings.splice($scope.selectionTarget.length);
-            }
-          }
-        });
-
-        var existDuplicatedElement = function(arr){
-
-            for (var i = 0; i < arr.length; i++) {
-                for (var j = i+1; j < arr.length; j++) {
-                    if(arr[i] == arr[j]){
-                        return true;
-                    }
-                };
-            };
-            return false;
-        };
-
-        //validation only happens when going forward
-        var formValidation = function(step) {
-            //  return true;//for dev purpose
-            if (step == undefined) {
-                step = $scope.currentStep;
-            }
-            if (step == 1) {
-                return $scope.selection && $scope.selection.length > 0;
-            } else if (step == 2) {
-                return ($scope.selectionTarget && $scope.selectionTarget.length > 0)//at least one target is selected
-                        && !(($scope.currentNode.name == $scope.currentNodeTarget.name)&&($scope.currentNode.parent.name == $scope.currentNodeTarget.parent.name));//target and source should be different
-            } else if (step == 3) {
-                return $scope.selectionTarget && $scope.selectionTarget.length == $scope.mappings.length
-                        && $scope.mappings.indexOf('') == -1 && !existDuplicatedElement($scope.mappings)
-                        /*&& $scope.selectionPK && $scope.selectionPK.length>0*/;
-
-            } else if (step == 4) {
-
-            }
-
-            return false;
-        }
-
-        var errorMessage = function(i, msg) {
-            var errorMsgs = ['Please select at least one attribute!', 'Please select at least one attribute in target, make sure target is different from source!', 'Please make sure to map each target to a unique source.', 'please complete the form in this step before proceeding'];
-            if (!msg) {
-                toaster.pop('error', 'Error', errorMsgs[i - 1], 0);
-            } else {
-                toaster.pop('error', 'Error', msg, 0);
-            }
-        }
-        ;
-    }
-    ]);
-
-
-});

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/js/controllers/createrule-an-ctrl.js
----------------------------------------------------------------------
diff --git a/ui/js/controllers/createrule-an-ctrl.js b/ui/js/controllers/createrule-an-ctrl.js
deleted file mode 100644
index fec69c2..0000000
--- a/ui/js/controllers/createrule-an-ctrl.js
+++ /dev/null
@@ -1,303 +0,0 @@
-/*
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-*/
-
-define(['./module'], function(controllers) {
-    'use strict';
-    controllers.controller('CreateRuleANCtrl', ['$scope', '$http', '$config', '$location', 'toaster', '$timeout', '$route', '$filter', function($scope, $http, $config, $location, toaster, $timeout, $route, $filter) {
-        console.log('CreateRuleANCtrl');
-        $scope.currentStep = 1;
-
-        var dbtreeUrl = $config.uri.dbtree;
-        var schemaDefinitionUrl = $config.uri.schemadefinition;
-
-        $http.get(dbtreeUrl).success(function(data) {
-            var dbList = [];
-            if (data && data.length > 0) {
-                data.forEach(function(db) {
-                    var dbNode = {
-                        name: db.platform,
-                        l1: true,
-                        children: []
-                    };
-                    dbList.push(dbNode);
-                    if (db.systems && db.systems.length > 0) {
-                        db.systems.forEach(function(system) {
-                            var dsNode = {
-                                name: system.name,
-                                l2: true,
-                                children: []
-                            };
-                            dbNode.children.push(dsNode);
-                            dsNode.parent = db;
-
-
-                            if (system.assets && system.assets.length > 0) {
-                                system.assets.sort(function(a, b){
-                                  return (a.name<b.name?-1:(a.name>b.name?1:0));
-                                });
-                                system.assets.forEach(function(schema) {
-                                    var schemaNode = {
-                                        id: schema.id,
-                                        name: schema.name,
-                                        l3: true
-                                    };
-                                    schemaNode.parent = dsNode;
-                                    dsNode.children.push(schemaNode);
-                                });
-                            }
-                        });
-                    }
-
-                });
-            }
-            $scope.dbList = dbList;
-        });
-
-
-        //trigger after select schema for src
-        $scope.$watch('currentNode', function(newValue) {
-            // $scope.schemaCollection = null;
-            if (newValue && newValue.l3) {
-
-                var sysName = newValue.parent.name;
-                $scope.form.basic.system = $filter('stridx')(sysName, 'modelsystem') + '';
-
-                //retrieve the schema definition and display the table
-                $http.get(schemaDefinitionUrl + '/' + newValue.id).success(function(data) {
-                    $scope.schemaCollection = data.schema;
-                });
-            }
-        });
-
-
-
-
-        $scope.$on('$viewContentLoaded', function() {
-            $scope.$emit('initReq');
-            resizeWindow();
-        });
-
-        $scope.$on('resizeHandler', function(e) {
-            if ($route.current.$$route.controller == "CreateRuleANCtrl") {
-                $scope.$emit('initReq');
-                resizeWindow();
-            }
-        });
-
-
-        function resizeWindow() {
-                    var stepSelection = '.formStep[id=step-' + $scope.currentStep + ']';
-                    $(stepSelection).css({
-                        height: window.innerHeight - $(stepSelection).offset().top - $('#footerwrap').outerHeight()
-                    });
-                    $('fieldset').height($(stepSelection).height() - $(stepSelection + '>.stepDesc').height() - $('.btn-container').height() - 80);
-                    $('.y-scrollable').css({
-                        'max-height': $('fieldset').height() - $('.add-dataset').outerHeight()
-                    });
-                    //error message box position
-                    $('.formula-text-mid').css({
-                        'padding-top': (($('.formula-text-up').height() - $('.formula-text-mid').height()) + $('.formula-text-mid').height() / 2) + 'px'
-                    });
-
-        }
-
-        $scope.ruleTypes = $filter('strarr')('modeltype');//['Accuracy', 'Validity', 'Anomaly Detection', 'Publish Metrics'];
-        $scope.scheduleTypes = $filter('strarr')('scheduletype');//['Daily', 'Weekly', 'Monthly', 'Hourly'];
-        $scope.ruleSystems = $filter('strarr')('modelsystem');//['Bullseye', 'GPS', 'Hadoop', 'PDS', 'IDLS', 'Pulsar', 'Kafka'];
-        $scope.anTypes = ['', 'History Trend Detection', 'Bollinger Bands Detection', 'Deviation Detection'];
-        // $scope.ruleType = function(index){
-        //   var types = ['', 'Accuracy', 'Validity', 'Anomaly Detection', 'Publish Metrics'];
-        //   return types[index];
-        // }
-
-        // $scope.scheduleType = function(index){
-        //   var types = ['', 'Daily', 'Weekly', 'Monthly', 'Hourly'];
-        //   return types[index];
-        // }
-        //
-        // $scope.ruleSystem = function(index){
-        //   var sys = ['', 'Bullseye', 'GPS', 'Hadoop', 'PDS', 'IDLS', 'Pulsar', 'Kafka'];
-        //   return sys[index];
-        // }
-
-        // Initial Value
-        $scope.form = {
-
-            next: function(form) {
-
-                if (formValidation()) {
-                    // form.$setPristine();
-                    nextStep();
-                } else {
-                    var field = null
-                      , firstError = null ;
-                    for (field in form) {
-                        if (field[0] != '$') {
-                            if (firstError === null  && !form[field].$valid) {
-                                firstError = form[field].$name;
-                            }
-
-                            if (form[field].$pristine) {
-                                form[field].$dirty = true;
-                            }
-                        }
-                    }
-
-                    //  angular.element('.ng-invalid[name=' + firstError + ']').focus();
-                    errorMessage($scope.currentStep);
-                }
-            },
-            prev: function(form) {
-                //$scope.toTheTop();
-                prevStep();
-            },
-            goTo: function(form, i) {
-                if (parseInt($scope.currentStep) > parseInt(i)) {
-                    // $scope.toTheTop();
-                    goToStep(i);
-
-                } else {
-                    if (formValidation()) {
-                        //   $scope.toTheTop();
-                        if(i - parseInt($scope.currentStep) == 1){
-                          goToStep(i);
-                        }
-
-                    } else {
-                        errorMessage($scope.currentStep);
-                    }
-                }
-            },
-            submit: function(form) {
-                if (!form.$valid) {
-                    var field = null
-                      , firstError = null ;
-                    for (field in form) {
-                        if (field[0] != '$') {
-                            if (firstError === null  && !form[field].$valid) {
-                                firstError = form[field].$name;
-                            }
-
-                            if (form[field].$invalid) {
-                                form[field].$dirty = true;
-                            }
-                        }
-                    }
-                    angular.element('.ng-invalid[name=' + firstError + ']').focus();
-                    errorMessage($scope.currentStep);
-                } else {
-                    form.$setPristine();
-                    this.data={
-                      basic: this.basic,
-                      extra: {
-                        srcDb: $scope.currentNode.parent.parent.platform,
-                        srcDataSet: $scope.currentNode.parent.name,
-                        anType: this.anType
-                      }
-                    };
-
-                    this.data.basic.dataaset = $scope.currentNode.name;
-                    this.data.basic.dataasetId = $scope.currentNode.id;
-                    // this.data.anType = this.anType;
-
-                    $('#confirm-an').modal('show');
-                }
-            },
-
-            save: function() {
-
-                //::TODO: Need to save the data to backend with POST/PUT method
-                console.log(JSON.stringify($scope.form.data));
-
-                var newModel = $config.uri.newAnomalyModel;
-                $http.post(newModel, this.data).success(function(data) {
-                	// if(data.status=='0')
-                	// {
-	                  $('#confirm-an').on('hidden.bs.modal', function(e) {
-	                      $('#confirm-an').off('hidden.bs.modal');
-	                      $location.path('/rules');
-	                      $scope.$apply();
-	                  });
-	                	$('#confirm-an').modal('hide');
-                	// }
-                	// else
-                	// {
-                	// 	errorMessage(0, data.result);
-                	// }
-                }).error(function(data){
-                  // errorMessage(0, 'Save model failed, please try again!');
-                  toaster.pop('error', 'Save model failed, please try again!', data.message);
-                });
-            },
-
-        };
-
-
-        var nextStep = function() {
-            $scope.currentStep++;
-            $timeout(function(){
-                resizeWindow();
-            }, 0);
-        }
-        ;
-        var prevStep = function() {
-            $scope.currentStep--;
-            $timeout(function(){
-                resizeWindow();
-            }, 0);
-        }
-        ;
-        var goToStep = function(i) {
-            $scope.currentStep = i;
-            $timeout(function(){
-                resizeWindow();
-            }, 0);
-        }
-        ;
-
-        //validation only happens when going forward
-        var formValidation = function(step) {
-            //  return true;//for dev purpose
-            if (step == undefined) {
-                step = $scope.currentStep;
-            }
-            if (step == 1) {
-                return $scope.currentNode?true:false;
-            } else if (step == 2) {
-                return true;
-            } else if (step == 3) {
-                return true;
-                //::TODO: also need to check if duplicated mappings or empty mappings
-            }
-
-            return false;
-        }
-
-        var errorMessage = function(i, msg) {
-            var errorMsgs = ['Please select one schema!','', 'please complete the form in this step before proceeding'];
-            if (!msg) {
-                toaster.pop('error', 'Error', errorMsgs[i - 1], 0);
-            } else {
-                toaster.pop('error', 'Error', msg, 0);
-            }
-        }
-        ;
-    }
-    ]);
-});

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/js/controllers/createrule-pu-ctrl.js
----------------------------------------------------------------------
diff --git a/ui/js/controllers/createrule-pu-ctrl.js b/ui/js/controllers/createrule-pu-ctrl.js
deleted file mode 100644
index 7e563b5..0000000
--- a/ui/js/controllers/createrule-pu-ctrl.js
+++ /dev/null
@@ -1,166 +0,0 @@
-/*
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-*/
-
-define(['./module'], function(controllers) {
-    'use strict';
-    controllers.controller('CreateRulePUCtrl', ['$scope', '$http', '$config', '$location', 'toaster', '$timeout', '$route', '$filter', function($scope, $http, $config, $location, toaster, $timeout, $route, $filter) {
-        console.log('Create rule controller');
-        $scope.currentStep = 1;
-
-        // var publishBasic = 'https://bark.vip.ebay.com/api/v1/metrics';
-        var publishBasic = document.location.origin;
-        // $scope.form.publishUrl = publishBasic;
-        $scope.$watch('form.basic.name', function(newValue){
-          $scope.form.publishUrl = publishBasic;// + (newValue?newValue:'');
-        });
-
-        $scope.$on('$viewContentLoaded', function() {
-            $scope.$emit('initReq');
-            resizeWindow();
-        });
-
-        var dbtreeUrl = $config.uri.dbtree;
-          $http.get(dbtreeUrl).success(function(data) {
-            // console.log(data);
-            angular.forEach(data, function(p){
-              if(p.platform == 'Apollo'){ //::TODO:Only Apollo is supported cussrently
-                $scope.allSystem = {};
-                angular.forEach(p.systems, function(sys){ //retrieve all systems
-                  $scope.allSystem[sys.name] = sys.assets;
-                });
-              }
-            });
-
-            $scope.sysChange();
-
-          });
-
-        $scope.sysChange = function(){
-          console.log($scope.form.basic.system);
-          var sys = $scope.form.basic.system;
-          var sysName = $filter('strmap')(sys, 'modelsystem');
-          $scope.assets = $scope.allSystem[sysName];
-
-        }
-
-        $scope.$on('resizeHandler', function(e) {
-            if ($route.current.$$route.controller == "CreateRulePUCtrl") {
-                resizeWindow();
-            }
-        });
-
-        function resizeWindow() {
-                    var stepSelection = '.formStep[id=step-' + $scope.currentStep + ']';
-                    $(stepSelection).css({
-                        height: window.innerHeight - $(stepSelection).offset().top - $('#footerwrap').outerHeight()
-                    });
-                    $('fieldset').height($(stepSelection).height() - $(stepSelection + '>.stepDesc').height() - $('.btn-container').height() - 80);
-                    $('.y-scrollable').css({
-                        'max-height': $('fieldset').height()
-                    });
-        }
-
-        $scope.ruleTypes = $filter('strarr')('modeltype');//['Accuracy', 'Validity', 'Anomaly Detection', 'Publish Metrics'];
-        $scope.scheduleTypes = $filter('strarr')('scheduletype');//['Daily', 'Weekly', 'Monthly', 'Hourly'];
-        $scope.ruleSystems = $filter('strarr')('modelsystem');//['Bullseye', 'GPS', 'Hadoop', 'PDS', 'IDLS', 'Pulsar', 'Kafka'];
-
-        // Initial Value
-        $scope.form = {
-            submit: function(form) {
-                if (!form.$valid) {
-                    var field = null
-                      , firstError = null ;
-                    for (field in form) {
-                        if (field[0] != '$') {
-                            if (firstError === null  && !form[field].$valid) {
-                                firstError = form[field].$name;
-                            }
-
-                            if (form[field].$invalid) {
-                                form[field].$dirty = true;
-                            }
-                        }
-                    }
-                    angular.element('.ng-invalid[name=' + firstError + ']').focus();
-                    errorMessage($scope.currentStep);
-                } else {
-                  if(this.basic.system == -1){
-                    errorMessage(0, 'Please select Organization');
-                  }else{
-                    form.$setPristine();
-                    if(this.basic.dataaset == '-1'){
-                      this.basic.dataaset = undefined;
-                    }
-                    this.data={
-                      basic: this.basic,
-                      extra: {publishUrl: this.publishUrl}
-                    };
-
-                    if($scope.assets){
-                      for(var i = 0; i < $scope.assets.length; i ++){
-                        var aset = $scope.assets[i];
-                        if(aset.name == this.basic.dataaset){
-                          this.data.basic.dataasetId = aset.id;
-
-                        }
-                      }
-                    }
-
-                    $('#confirm-pu').modal('show');
-                  }
-                }
-            },
-
-            save: function() {
-
-
-                //::TODO: Need to save the data to backend with POST/PUT method
-                console.log(JSON.stringify($scope.form.data));
-
-
-                var newModel = $config.uri.newPublishModel;
-                $http.post(newModel, this.data).success(function() {
-
-                    $('#confirm-pu').on('hidden.bs.modal', function(e) {
-                        $('#confirm-pu').off('hidden.bs.modal');
-                        $location.path('/rules');
-                        $scope.$apply();
-                    });
-                  	$('#confirm-pu').modal('hide');
-
-                }).error(function(data){
-                  // errorMessage(0, 'Save model failed, please try again!');
-                  toaster.pop('error', 'Save model failed, please try again!', data.message);
-                });
-            },
-
-        };
-
-        var errorMessage = function(i, msg) {
-            var errorMsgs = ['Please fill in all required fields'];
-            if (!msg) {
-                toaster.pop('error', 'Error', errorMsgs[i - 1], 0);
-            } else {
-                toaster.pop('error', 'Error', msg, 0);
-            }
-        }
-        ;
-    }
-    ]);
-});

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/js/controllers/createrule-va-ctrl.js
----------------------------------------------------------------------
diff --git a/ui/js/controllers/createrule-va-ctrl.js b/ui/js/controllers/createrule-va-ctrl.js
deleted file mode 100644
index b1cfd03..0000000
--- a/ui/js/controllers/createrule-va-ctrl.js
+++ /dev/null
@@ -1,336 +0,0 @@
-/*
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-*/
-
-define(['./module'], function(controllers) {
-    'use strict';
-    controllers.controller('CreateRuleVACtrl', ['$scope', '$http', '$config', '$location', 'toaster', '$timeout', '$route', '$filter', function($scope, $http, $config, $location, toaster, $timeout, $route, $filter) {
-        console.log('Create rule controller');
-        $scope.currentStep = 1;
-
-        var dbtreeUrl = $config.uri.dbtree;
-        var schemaDefinitionUrl = $config.uri.schemadefinition;
-
-
-        $http.get(dbtreeUrl).success(function(data) {
-            var dbList = [];
-            if (data && data.length > 0) {
-                data.forEach(function(db) {
-                    var dbNode = {
-                        name: db.platform,
-                        l1: true,
-                        children: []
-                    };
-                    dbList.push(dbNode);
-                    if (db.systems && db.systems.length > 0) {
-                        db.systems.forEach(function(system) {
-                            var dsNode = {
-                                name: system.name,
-                                l2: true,
-                                children: []
-                            };
-                            dbNode.children.push(dsNode);
-                            dsNode.parent = db;
-
-
-                            if (system.assets && system.assets.length > 0) {
-                                system.assets.sort(function(a, b){
-                                  return (a.name<b.name?-1:(a.name>b.name?1:0));
-                                });
-                                system.assets.forEach(function(schema) {
-                                    var schemaNode = {
-                                        id: schema.id,
-                                        name: schema.name,
-                                        l3: true
-                                    };
-                                    schemaNode.parent = dsNode;
-                                    dsNode.children.push(schemaNode);
-                                });
-                            }
-                        });
-                    }
-
-                });
-            }
-            $scope.dbList = dbList;
-        });
-
-
-        //trigger after select schema for src
-        $scope.$watch('currentNode', function(newValue) {
-            // $scope.schemaCollection = null;
-            if (newValue) {
-                if(newValue.l3){//System selected
-                  var sysName = newValue.parent.name;
-                  $scope.form.basic.system = $filter('stridx')(sysName, 'modelsystem') + '';
-
-                  //retrieve the schema definition and display the table
-                  $http.get(schemaDefinitionUrl + '/' + newValue.id).success(function(data) {
-                      $scope.schemaCollection = data.schema;
-                  });
-                }
-
-            }
-        });
-
-
-
-
-        $scope.$on('$viewContentLoaded', function() {
-            $scope.$emit('initReq');
-            resizeWindow();
-        });
-
-        $scope.$on('resizeHandler', function(e) {
-            if ($route.current.$$route.controller == "CreateRuleVACtrl") {
-                $scope.$emit('initReq');
-                resizeWindow();
-            }
-        });
-
-        function resizeWindow() {
-                    var stepSelection = '.formStep[id=step-' + $scope.currentStep + ']';
-                    $(stepSelection).css({
-                        height: window.innerHeight - $(stepSelection).offset().top - $('#footerwrap').outerHeight()
-                    });
-                    $('fieldset').height($(stepSelection).height() - $(stepSelection + '>.stepDesc').height() - $('.btn-container').height() - 80);
-                    console.log($('fieldset').height());
-                    $('.y-scrollable').css({
-                        'max-height': $('fieldset').height()- $('.add-dataset').outerHeight()
-                    });
-                    //error message box position
-                    $('.formula-text-mid').css({
-                        'padding-top': (($('.formula-text-up').height() - $('.formula-text-mid').height()) + $('.formula-text-mid').height() / 2) + 'px'
-                    });
-
-        }
-
-        $scope.ruleTypes = $filter('strarr')('modeltype');//['Accuracy', 'Validity', 'Anomaly Detection', 'Publish Metrics'];
-        $scope.scheduleTypes = $filter('strarr')('scheduletype');//['Daily', 'Weekly', 'Monthly', 'Hourly'];
-        $scope.ruleSystems = $filter('strarr')('modelsystem');//['Bullseye', 'GPS', 'Hadoop', 'PDS', 'IDLS', 'Pulsar', 'Kafka'];
-        $scope.vaTypes = $filter('strarr')('vatype');
-        //$scope.vaTypes = ['', '', 'Null Count', 'Unique Count', 'Duplicate Count', 'Maximum', 'Minimum', 'Mean', 'Median', 'Regular Expression Matching', 'Pattern Frequency'];
-
-        // $scope.ruleType = function(index){
-        //   var types = ['', 'Accuracy', 'Validity', 'Anomaly Detection', 'Publish Metrics'];
-        //   return types[index];
-        // }
-
-        // $scope.scheduleType = function(index){
-        //   var types = ['', 'Daily', 'Weekly', 'Monthly', 'Hourly'];
-        //   return types[index];
-        // }
-        //
-        // $scope.ruleSystem = function(index){
-        //   var sys = ['', 'Bullseye', 'GPS', 'Hadoop', 'PDS', 'IDLS', 'Pulsar', 'Kafka'];
-        //   return sys[index];
-        // }
-
-        // Initial Value
-        $scope.form = {
-
-            next: function(form) {
-
-                if (formValidation()) {
-                    // form.$setPristine();
-                    nextStep();
-                } else {
-                    var field = null
-                      , firstError = null ;
-                    for (field in form) {
-                        if (field[0] != '$') {
-                            if (firstError === null  && !form[field].$valid) {
-                                firstError = form[field].$name;
-                            }
-
-                            if (form[field].$pristine) {
-                                form[field].$dirty = true;
-                            }
-                        }
-                    }
-
-                    //  angular.element('.ng-invalid[name=' + firstError + ']').focus();
-                    errorMessage($scope.currentStep);
-                }
-            },
-            prev: function(form) {
-                //$scope.toTheTop();
-                prevStep();
-            },
-            goTo: function(form, i) {
-                if (parseInt($scope.currentStep) > parseInt(i)) {
-                    // $scope.toTheTop();
-                    goToStep(i);
-
-                } else {
-                    if (formValidation()) {
-                        //   $scope.toTheTop();
-                        if(i - parseInt($scope.currentStep) == 1){
-                          goToStep(i);
-                        }
-
-                    } else {
-                        errorMessage($scope.currentStep);
-                    }
-                }
-            },
-            submit: function(form) {
-                if (!form.$valid || form['regex'].$invalid) {
-                    var field = null
-                      , firstError = null ;
-                    for (field in form) {
-                        if (field[0] != '$') {
-                            if (firstError === null  && !form[field].$valid) {
-                                firstError = form[field].$name;
-                            }
-
-                            if (form[field].$invalid) {
-                                form[field].$dirty = true;
-                            }
-                        }
-                    }
-                    angular.element('.ng-invalid[name=' + firstError + ']').focus();
-                    errorMessage($scope.currentStep);
-                } else {
-                    form.$setPristine();
-
-                    this.data={
-                      basic: this.basic,
-                      extra: {
-                        srcDb: $scope.currentNode.parent.parent.platform,
-                        srcDataSet: $scope.currentNode.parent.name,
-                        vaType: this.vaType,
-                        column: this.selection
-                      }
-                    };
-
-                    this.data.basic.dataaset = $scope.currentNode.name;
-                    this.data.basic.dataasetId = $scope.currentNode.id;
-                    // this.data.vaType = this.vaType;
-                    // this.data.column = this.selection;
-
-                    $('#confirm-va').modal('show');
-                }
-            },
-
-            save: function() {
-
-
-
-
-                //::TODO: Need to save the data to backend with POST/PUT method
-                console.log(JSON.stringify($scope.form.data));
-
-                var newModel = $config.uri.newValidityModel;
-                $http.post(newModel, this.data).success(function(data) {
-                	// if(data.status=='0')
-                	// {
-	                  $('#confirm-va').on('hidden.bs.modal', function(e) {
-	                      $('#confirm-va').off('hidden.bs.modal');
-	                      $location.path('/rules');
-	                      $scope.$apply();
-	                  });
-	                	$('#confirm-va').modal('hide');
-	                // }
-                	// else
-                	// {
-                	// 	errorMessage(0, data.result);
-                	// }
-                }).error(function(data){
-                  // errorMessage(0, 'Save model failed, please try again!');
-                  toaster.pop('error', 'Save model failed, please try again!', data.message);
-                });
-            },
-            testRegex : function(form) {
-                if($scope.form.basic.regex == undefined || $scope.form.basic.regex == ''){
-                    form['regex'].$invalid = true;
-                    form['regex'].$valid = false;
-                    return;
-                }
-                try{
-                    var re = new RegExp($scope.form.basic.regex);
-                    form['regex'].$invalid = false;
-                    form['regex'].$valid = true;
-                    var str = $scope.form.basic.regexTestStr;
-                    var m;
-                    if(str == undefined) {
-                        $scope.regexTestResult = '';
-                    }else if ((m = re.exec(str)) !== null) {
-                        $scope.regexTestResult = 'Matched';
-                    } else {
-                        $scope.regexTestResult = 'Unmatched';
-                    }
-                } catch(err) {
-                    form['regex'].$invalid = true;
-                    form['regex'].$valid = false;
-                }
-            }
-        };
-
-        var nextStep = function() {
-            $scope.currentStep++;
-            $timeout(function(){
-                resizeWindow();
-            }, 0);
-        }
-        ;
-        var prevStep = function() {
-            $scope.currentStep--;
-            $timeout(function(){
-                resizeWindow();
-            }, 0);
-        }
-        ;
-        var goToStep = function(i) {
-            $scope.currentStep = i;
-            $timeout(function(){
-                resizeWindow();
-            }, 0);
-        }
-        ;
-
-        //validation only happens when going forward
-        var formValidation = function(step) {
-            //  return true;//for dev purpose
-            if (step == undefined) {
-                step = $scope.currentStep;
-            }
-            if (step == 1) {
-                return $scope.form.selection?true:false;
-            } else if (step == 2) {
-                return true;
-            } else if (step == 3) {
-                return true;
-                //::TODO: also need to check if duplicated mappings or empty mappings
-            }
-
-            return false;
-        }
-
-        var errorMessage = function(i, msg) {
-            var errorMsgs = ['Please select one attribute!', 'Please select at least one attribute!', 'Please make sure to map all fields and select primary key'];
-            if (!msg) {
-                toaster.pop('error', 'Error', errorMsgs[i - 1], 0);
-            } else {
-                toaster.pop('error', 'Error', msg, 0);
-            }
-        }
-        ;
-    }
-    ]);
-});

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/js/controllers/createrule0-ctrl.js
----------------------------------------------------------------------
diff --git a/ui/js/controllers/createrule0-ctrl.js b/ui/js/controllers/createrule0-ctrl.js
deleted file mode 100644
index 2c56a12..0000000
--- a/ui/js/controllers/createrule0-ctrl.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/*
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-*/
-
-define(['./module'], function (controllers) {
-    'use strict';
-    controllers.controller('CreateRule0Ctrl', ['$scope', '$http', '$config', '$location', 'toaster', '$timeout', '$route',  function ($scope, $http, $config, $location, toaster, $timeout, $route) {
-      console.log('Create rule 0 controller');
-      $scope.publishURL = document.location.origin;
-
-      $scope.click = function(type){
-        $location.path('/createrule-' + type);
-      }
-      $scope.$on('$viewContentLoaded', function(){
-        $scope.$emit('initReq');
-        resizeWindow();
-      });
-
-      $scope.$on('resizeHandler', function(e) {
-        if($route.current.$$route.controller == 'CreateRule0Ctrl'){
-            console.log('createrule0 resize');
-            resizeWindow();
-        }
-      });
-
-      function resizeWindow(){
-        $('#panel-2 >.panel-body').css({height: $('#panel-1 >.panel-body').outerHeight() + $('#panel-1 >.panel-footer').outerHeight() - $('#panel-2 >.panel-footer').outerHeight()});
-        $('#panel-4 >.panel-body').css({height: $('#panel-3 >.panel-body').outerHeight() + $('#panel-3 >.panel-footer').outerHeight() - $('#panel-4 >.panel-footer').outerHeight()});
-      }
-    }]);
-});

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/js/controllers/dataassets-ctrl.js
----------------------------------------------------------------------
diff --git a/ui/js/controllers/dataassets-ctrl.js b/ui/js/controllers/dataassets-ctrl.js
deleted file mode 100644
index 7df1895..0000000
--- a/ui/js/controllers/dataassets-ctrl.js
+++ /dev/null
@@ -1,144 +0,0 @@
-/*
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-*/
-
-define(['./module'], function (controllers) {
-    'use strict';
-    controllers.controller('DataAssetsCtrl', ['$scope', '$http', '$config', '$location', 'toaster', '$timeout', '$route', '$filter', function ($scope, $http, $config, $location, toaster, $timeout, $route, $filter) {
-
-      var allDataassets = $config.uri.dataassetlist;
-      var ts = null;
-      var start = 0;
-      var number = 10;
-      var originalRowCollection = undefined;
-
-      $scope.isIE = function() {
-            var ua = window.navigator.userAgent;
-            var msie = ua.indexOf("MSIE ");
-            if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)){
-               return true; 
-            }
-            else {
-               return false;
-            }
-        }
-
-      $scope.paging = function(tableState){
-        console.log(tableState);
-        ts = tableState;
-        // tableState.pagination.numberOfPages = $scope.rowCollection.length/10 + 1;
-        start = tableState.pagination.start || 0;
-        number = tableState.pagination.number || 10;
-
-        if(start == 0 && !$scope.rowCollection){
-          $http.get(allDataassets,{cache: true}).then(function successCallback(data) {
-            originalRowCollection = new Array();
-            angular.forEach(data.data,function(db){
-              angular.forEach(db,function(table){
-                originalRowCollection.push(table);
-              });
-            });
-
-            $scope.rowCollection = angular.copy(originalRowCollection);
-
-            $scope.displayed = $scope.rowCollection.slice(start, start+number);
-            tableState.pagination.numberOfPages = Math.ceil($scope.rowCollection.length/number);
-          },function errorCallback(data){
-            console.log(data);
-            toaster.pop('error','Get data assets failed',data.data.message);
-          });
-        }else{
-          $scope.displayed = $scope.rowCollection.slice(start, start+number);
-        }
-      }
-
-      var include = function(keyword, str) {
-        if(keyword == undefined || keyword == null){
-          return true;
-        } else if(str == undefined || str == null){
-          return false;
-        } else{
-          var value = keyword.trim().toLowerCase();
-          return str.trim().toLowerCase().includes(value);
-        }
-      };
-
-      var findValue = function(keyword, assetItem) {
-        var date = $filter('date')(assetItem.timestamp, 'M/d/yy h:mm a')
-        return include(keyword, assetItem.assetName)
-          || include(keyword, assetItem.assetType)
-          || include(keyword, assetItem.owner)
-          || include(keyword, assetItem.system)
-          || include(keyword, assetItem.assetHDFSPath)
-          || include(keyword, date);
-      };
-
-      $scope.$watch('keyword', function(newValue){
-        if(originalRowCollection){
-          start = 0;
-          if(newValue == undefined || newValue == ''){
-            $scope.rowCollection = angular.copy(originalRowCollection);
-          }else{
-            var result = [];
-            for (var i = 0; i < originalRowCollection.length; i++) {
-              var item = originalRowCollection[i];
-              if(findValue(newValue, item)){
-                result.push(item);
-              }
-            };
-            $scope.rowCollection = angular.copy(result);
-          }
-          $scope.displayed = $scope.rowCollection.slice(start, start+number);
-          ts.pagination.numberOfPages = Math.ceil($scope.rowCollection.length/number);
-        }
-      });
-
-		$scope.remove = function(row) {
-			$scope.selectedRow = row;
-			$('#confirm-delete').modal('show');
-
-		};
-
-		$scope.sendDeleteRequest = function() {
-			$http.delete($config.uri.deletedataasset+'/'+$scope.selectedRow._id).then(function successCallback(data){
-
-					$('#confirm-delete').modal('hide');
-          var index = $scope.rowCollection.indexOf($scope.selectedRow);
-          $scope.rowCollection.splice(index, 1);
-
-          index = $scope.displayed.indexOf($scope.selectedRow);
-          $scope.displayed.splice(index, 1);
-
-			// }).error(function(data, status){
-   //      toaster.pop('error', 'Error when deleting record', data);
-   //    });
-            },function errorCallback(response) {
-               toaster.pop('error', 'Error when deleting record', response.message);
-       });
-
-
-		}
-
-    $scope.$on('$viewContentLoaded', function() {
-        $scope.$emit('initReq');
-    });
-
-  }]);
-
-
-});

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/js/controllers/detail-ctrl.js
----------------------------------------------------------------------
diff --git a/ui/js/controllers/detail-ctrl.js b/ui/js/controllers/detail-ctrl.js
deleted file mode 100644
index d0f3dc5..0000000
--- a/ui/js/controllers/detail-ctrl.js
+++ /dev/null
@@ -1,81 +0,0 @@
-/*
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-*/
-
-define(['./module'], function (controllers) {
-    'use strict';
-    controllers.controller('DetailCtrl', ['$scope', '$http', '$config', '$location','$timeout', '$route', '$barkChart', '$rootScope','$routeParams', function ($scope, $http, $config, $location, $timeout, $route, $barkChart, $rootScope,$routeParams) {
-      console.log('detail controller');
-      // var url="/js/controllers/heatmap.json";
-
-        var echarts = require('echarts');
-        var formatUtil = echarts.format;
-
-       if($rootScope.showBigChart==undefined)
-        {
-            $rootScope.showBigChart = function(option) {
-                $scope.selectedModel = option.title.text;
-                $('#bigChartContainer').show();
-                // $('#mainWindow').hide();
-                $rootScope.bigChart.clear();
-                $rootScope.bigChart.setOption(option);
-            }
-        }
-
-        var showBig = function(metricName){
-          var metricDetailUrl = $config.uri.dashboard;
-//          var metricDetailUrl = 'data.json';
-           $http.post(metricDetailUrl, {"query": {  "bool":{"filter":[ {"term" : {"name": metricName }}]}},  "sort": [{"tmst": {"order": "asc"}}],"size":1000}).then(function successCallback(data) {
-//            $http.get(metricDetailUrl).then(function successCallback(data) {
-                // body...
-            
-            var metric = new Object();
-            metric.name = data.data.hits.hits[0]._source.name;
-            metric.timestamp = data.data.hits.hits[data.data.hits.hits.length-1]._source.tmst;
-            metric.dq = data.data.hits.hits[data.data.hits.hits.length-1]._source.matched/data.data.hits.hits[data.data.hits.hits.length-1]._source.matched*100;
-            metric.details = new Array();
-            angular.forEach(data.data.hits.hits,function(point){
-                metric.details.push(point);
-            })
-            $rootScope.showBigChart($barkChart.getOptionBig(metric));
-          });
-        }
-
-        pageInit();
-
-        function pageInit() {
-            $scope.$emit('initReq');
-            showBig($routeParams.modelname);            
-        }
-
-        $scope.$on('resizeHandler', function(e) {
-            if($route.current.$$route.controller == 'HealthCtrl'){
-                console.log('health resize');
-                resizeTreeMap();
-                $scope.myChart.resize();
-            }
-        });
-        
-
-
-        function resizeTreeMap() {
-            $('#chart1').height( $('#mainWindow').height() - $('.bs-component').outerHeight() );
-        }
-
-    }]);
-});

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/js/controllers/downloadSample-ctrl.js
----------------------------------------------------------------------
diff --git a/ui/js/controllers/downloadSample-ctrl.js b/ui/js/controllers/downloadSample-ctrl.js
deleted file mode 100644
index 335e886..0000000
--- a/ui/js/controllers/downloadSample-ctrl.js
+++ /dev/null
@@ -1,41 +0,0 @@
-/*
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-*/
-
-define(['./module'], function(controllers) {
-    'use strict';
-    controllers.controller('DownloadSampleCtrl', ['$scope', '$http', '$config', '$filter', '$timeout', '$compile', '$routeParams', '$barkChart', '$rootScope', function($scope, $http, $config, $filter, $timeout, $compile, $routeParams, $barkChart, $rootScope) {
-
-        $scope.downloadUrl = $config.uri.metricdownload;
-
-        $scope.$on('downloadSample', function(e, itemName) {
-            $scope.selectedModelName = itemName;
-            var sampleUrl = $config.uri.metricsample + '/' + itemName;
-            $http.get(sampleUrl).success(function(data){
-                $scope.sample = data;
-                $('#download-sample').modal('show');
-                $('#viewsample-content').css({
-                    'max-height': window.innerHeight - $('.modal-content').offset().top - $('.modal-header').outerHeight() - $('.modal-footer').outerHeight() - 250
-                });
-
-            });
-        });
-
-    }
-    ]);
-});

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/js/controllers/editdataasset-ctrl.js
----------------------------------------------------------------------
diff --git a/ui/js/controllers/editdataasset-ctrl.js b/ui/js/controllers/editdataasset-ctrl.js
deleted file mode 100644
index 0b5e2dc..0000000
--- a/ui/js/controllers/editdataasset-ctrl.js
+++ /dev/null
@@ -1,219 +0,0 @@
-/*
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-*/
-
-define(['./module'], function (controllers) {
-    'use strict';
-    controllers.controller('EditDataAssetCtrl', ['$scope', '$http', '$config', '$location', 'toaster', '$timeout', '$route', '$routeParams', '$filter', function ($scope, $http, $config, $location, toaster, $timeout, $route, $routeParams, $filter) {
-        $scope.assetId = $routeParams.assetId;
-        $scope.currentStep = 1;
-        $scope.form = {};
-        $scope.form.basic = {};
-
-        // $scope.platformOptions = ['Teradata', 'Apollo'];
-        // $scope.systemOptions = ['Sojourner', 'SiteSpeed', 'Bullseye', 'PDS', 'GPS'];
-        $scope.systemOptions = $filter('strarr')('modelsystem');//['Bullseye', 'GPS', 'Hadoop', 'PDS', 'IDLS', 'Pulsar', 'Kafka'];
-        $scope.assetTypeOptions = ['hdfsfile', 'hivetable'];
-
-        $scope.formatTypeOptions = ['yyyyMMdd', 'yyyy-MM-dd','HH'];
-
-        $scope.$on('$viewContentLoaded', function() {
-            $scope.$emit('initReq');
-            resizeWindow();
-
-        });
-
-        $scope.$on('resizeHandler', function(e) {
-            if ($route.current.$$route.controller == "EditDataAssetCtrl") {
-                resizeWindow();
-            }
-        });
-
-        function resizeWindow() {
-                    $('.formStep').height(window.innerHeight  -  $('.formStep').offset().top - $('#footerwrap').outerHeight());
-                    $('fieldset').height(window.innerHeight  -  $('fieldset').offset().top - $('#footerwrap').outerHeight()- $('.btn-container').height() -80);
-                    $('.y-scrollable').css({
-                        'max-height': $('fieldset').height()
-                    });
-
-        }
-
-        // var dbtree = $config.uri.dbtree;
-        // $http.get(dbtree).success(function(data) {
-        //     $scope.platformOptions = data;
-        //     $scope.getDataAsset();
-        // });
-
-        var assetUri = $config.uri.getdataasset + '/' + $scope.assetId;
-        $scope.getDataAsset = function(){
-            $http.get(assetUri).then(function successCallback(data) {
-                data = data.data;
-                $scope.form.basic.assetName = data.assetName;
-                $scope.form.basic.path = data.assetHDFSPath;
-                $scope.form.basic.type = $scope.assetTypeOptions.indexOf(data.assetType).toString();
-                $scope.form.basic.platform = data.platform;
-                //$scope.getSystemOptions($scope.form.basic.platform);
-                $scope.form.basic.system = $scope.getSystemIndex(data.system).toString();
-                $scope.form.basic.schema = data.schema;
-                $scope.form.basic.partitions = data.partitions;
-            });
-        };
-
-        $scope.getDataAsset();
-
-        // $scope.getPlatformIndex = function(platform) {
-        //     for (var i = 0; i < $scope.platformOptions.length; i++) {
-        //         if($scope.platformOptions[i].platform == platform){
-        //             return i;
-        //         }
-        //     };
-        //     return -1;
-        // };
-
-        $scope.getSystemIndex = function(system) {
-            for (var i = 0; i < $scope.systemOptions.length; i++) {
-                if($scope.systemOptions[i] == system) {
-                    return i;
-                }
-            };
-            return -1;
-        }
-
-        // $scope.getSystemOptions = function(platformIndex){
-        //     if(platformIndex==undefined){
-        //         $scope.systemOptions = [];
-        //     }else{
-        //         $scope.systemOptions = $scope.platformOptions[platformIndex].systems;
-        //     }
-        // };
-
-        $scope.updateHdfsPath = function(typeIndex){
-            if(typeIndex != 0 ){
-                $scope.form.basic.path = '';
-            }
-        };
-
-	    $scope.addSchema = function() {
-	        $scope.form.basic.schema.push({
-	            name: '',
-	            type: 'string',
-	            desc: '',
-	            sample: ''
-	        });
-	    };
-
-      $scope.addPatitionColumn = function() {
-	        $scope.form.basic.partitions.push({
-	            name: '',
-	            format: "yyyyMMdd"
-	        });
-	    };
-
-	    $scope.deleteSchema = function(index) {
-	        $scope.form.basic.schema.splice(index, 1);
-	    };
-
-      $scope.deletePartition = function(index) {
-	        $scope.form.basic.partitions.splice(index, 1);
-	    };
-
-	    // Initial Value
-        $scope.form = {
-            basic: {
-                schema: [{
-                    name: '',
-                    type: 'string',
-                    desc: '',
-                    sample: ''
-                }],
-                partitions: []
-            },
-            submit: function(form) {
-                if (!form.$valid) {
-                    var field = null
-                      , firstError = null ;
-                    for (field in form) {
-                        if (field[0] != '$') {
-                            if (firstError === null  && !form[field].$valid) {
-                                firstError = form[field].$name;
-                            }
-
-                            if (form[field].$invalid) {
-                                form[field].$dirty = true;
-                            }
-                        }
-                    }
-                    angular.element('.ng-invalid[name=' + firstError + ']').focus();
-                    errorMessage($scope.currentStep);
-                } else {
-                    form.$setPristine();
-                    this.data={
-                      basic: this.basic,
-                      extra: {publishUrl: this.publishUrl}
-                    };
-
-
-
-                    $('#confirm-pu').modal('show');
-                }
-            },
-
-            save: function() {
-                $('#confirm-pu').on('hidden.bs.modal', function(e) {
-                    $('#confirm-pu').off('hidden.bs.modal');
-                    $location.path('/dataassets');
-                    $scope.$apply();
-                });
-
-                console.log(JSON.stringify($scope.form.basic));
-                var msg = {
-                	'system' : $scope.systemOptions[$scope.form.basic.system],
-                	'assetType' : $scope.assetTypeOptions[$scope.form.basic.type],
-                    'assetName' : $scope.form.basic.assetName,
-                	'assetHDFSPath' : $scope.form.basic.path,
-                	'platform' : $scope.form.basic.platform,
-                	'schema' : $scope.form.basic.schema,
-                    'owner' : $scope.form.basic.owner,
-                    'partitions' : $scope.form.basic.partitions
-                }
-
-                $http.put($config.uri.updatedataasset, msg).then(function successCallback(data) {
-                	if(data.data.result=='success')
-                	{
-                      	$('#confirm-pu').modal('hide');
-                    }
-                	else
-                	{
-                		errorMessage(0, data.data.result);
-                	}
-                });
-            },
-
-        };
-
-        var errorMessage = function(i, msg) {
-            var errorMsgs = ['Please fill in all required fields'];
-            if (!msg) {
-                toaster.pop('error', 'Error', errorMsgs[i - 1]);
-            } else {
-                toaster.pop('error', 'Error', msg);
-            }
-        };
-
-    }]);
-});

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/js/controllers/footer-ctrl.js
----------------------------------------------------------------------
diff --git a/ui/js/controllers/footer-ctrl.js b/ui/js/controllers/footer-ctrl.js
deleted file mode 100644
index baac654..0000000
--- a/ui/js/controllers/footer-ctrl.js
+++ /dev/null
@@ -1,61 +0,0 @@
-/*
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-*/
-
-define(['./module'], function (controllers) {
-    'use strict';
-    controllers.controller('FooterCtrl', ['$scope', '$http', '$config', '$location', '$cookies', '$interval', function ($scope, $http, $config, $location, $cookies, $interval) {
-      console.log('Footer controller');
-      $scope.timestamp = new Date();
-
-      var start = 0, number = 3;
-      retrieveNotifications();
-      $interval(retrieveNotifications, 60000);
-
-      // $interval(function(){
-      //   if($scope.allNotifications){
-      //     var length = $scope.allNotifications.length;
-      //     if(length == 0){
-      //       return;
-      //     }else if(length <= number){
-      //       $scope.notifications = $scope.allNotifications;
-      //       return;
-      //     }
-      //     var index = start%length;
-      //     var end = index + number;
-
-      //     $scope.notifications = $scope.allNotifications.slice(index, end);
-
-      //     if(end > length){
-      //       $scope.notifications = $scope.notifications.concat($scope.allNotifications.slice(0, end-length ));
-      //     }
-      //     start ++;
-      //   }
-
-      // }, 2000);
-
-      function retrieveNotifications(){
-        var notificationUrl = $config.uri.getnotifications;
-        // $http.get(notificationUrl).success(function(data) {
-        //   // $scope.allNotifications = data.slice(0, 15);
-        //   $scope.notifications = data.slice(0, 3);
-        // });
-      }
-
-    }]);
-});

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/js/controllers/health-ctrl.js
----------------------------------------------------------------------
diff --git a/ui/js/controllers/health-ctrl.js b/ui/js/controllers/health-ctrl.js
deleted file mode 100644
index 933dfe4..0000000
--- a/ui/js/controllers/health-ctrl.js
+++ /dev/null
@@ -1,266 +0,0 @@
-/*
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-*/
-
-define(['./module'], function (controllers) {
-    'use strict';
-    controllers.controller('HealthCtrl', ['$scope', '$http', '$config', '$location','$timeout', '$route', '$barkChart', '$rootScope', function ($scope, $http, $config, $location, $timeout, $route, $barkChart, $rootScope) {
-      console.log('health controller');
-      // var url="/js/controllers/heatmap.json";
-
-        var echarts = require('echarts');
-        var formatUtil = echarts.format;
-        
-        $scope.isIE = function() {
-            var ua = window.navigator.userAgent;
-            var msie = ua.indexOf("MSIE ");
-            if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)){
-               return true; 
-            }
-            else {
-               return false;
-            }
-        }
-
-        pageInit();
-
-        $scope.orgs = [];
-        $scope.dataData = [];
-        function pageInit() {
-            $scope.$emit('initReq');
-            var url_dashboard = $config.uri.dashboard ;
-            var url_organization = $config.uri.organization;
-            $http.get(url_organization).then(function successCallback(res){
-               var orgNode = null;
-               console.log(res);
-               angular.forEach(res.data, function(value,key) {
-                    orgNode = new Object();
-                    $scope.orgs.push(orgNode);
-                    orgNode.name = key;
-                    orgNode.assetMap = value;
-               });
-               $scope.originalOrgs = angular.copy($scope.orgs);
-                  $http.post(url_dashboard, {"query": {"match_all":{}},  "sort": [{"tmst": {"order": "asc"}}],"size":1000}).then(function successCallback(data) {
-//                $http.get(url_dashboard).then(function successCallback(data){
-                    $scope.finalData = [];
-
-                    angular.forEach(data.data.hits.hits, function(sys) {
-                        var chartData = sys._source;
-                        chartData.sort = function(a,b){
-                            return a.tmst - b.tmst;
-                        }
-                    });
-                    $scope.originalData = angular.copy(data.data);
-
-                    $scope.myData = angular.copy($scope.originalData.hits.hits);
-                    $scope.metricName = [];
-                    for(var i = 0;i<$scope.myData.length;i++){
-                        $scope.metricName.push($scope.myData[i]._source.name);
-                    }
-                    $scope.metricNameUnique = [];
-                    angular.forEach($scope.metricName,function(name){
-                        if($scope.metricNameUnique.indexOf(name) === -1){
-                            $scope.dataData[$scope.metricNameUnique.length] = new Array();
-                            $scope.metricNameUnique.push(name);
-                        }
-                    });
-
-                    for(var i = 0;i<$scope.myData.length;i++){
-                        for(var j = 0 ;j<$scope.metricNameUnique.length;j++){
-                            if($scope.myData[i]._source.name==$scope.metricNameUnique[j]){
-                                $scope.dataData[j].push($scope.myData[i]);
-                            }
-                        }
-                    }
-                    angular.forEach($scope.originalOrgs,function(sys,parentIndex){
-                        var node = null;
-                        node = new Object();
-                        node.name = sys.name;
-                        node.dq = 0;
-                        node.metrics = new Array();
-                        angular.forEach($scope.dataData,function(metric,index){
-                            if(sys.assetMap.indexOf(metric[metric.length-1]._source.name)!= -1){
-                                var metricNode = new Object();
-                                metricNode.name = metric[metric.length-1]._source.name;
-                                metricNode.timestamp = metric[metric.length-1]._source.tmst;
-                                metricNode.dq = metric[metric.length-1]._source.matched/metric[metric.length-1]._source.total*100;
-                                metricNode.details = new Array();
-                                node.metrics.push(metricNode);
-                            }
-                        })
-                        $scope.finalData.push(node);
-                    })
-                    $scope.originalData = angular.copy($scope.finalData);
-                    renderTreeMap($scope.finalData);
-                });
-
-            });
-//            $http.get(url).success(function(res) {
-//                renderTreeMap(res);
-//            });
-        }
-
-        function renderTreeMap(res) {
-                function parseData(data) {
-                    var sysId = 0;
-                    var metricId = 0;
-                    var result = [];
-                    angular.forEach(res,function(sys,key){
-                        console.log(sys);
-
-                        var item = {};
-                        item.id = 'id_'+sysId;
-                        item.name = sys.name;
-
-                        if (sys.metrics != undefined) {
-                            item.children = [];
-                            angular.forEach(sys.metrics,function(metric,key){
-                                var itemChild = {
-                                    id: 'id_' + sysId + '_' + metricId,
-                                    name: metric.name,// + '(' + metric.dq + '%)',
-                                    // value: metric.dq,
-                                    value: 1,
-                                    dq: metric.dq,
-                                    sysName: sys.name,
-                                    itemStyle: {
-                                        normal: {
-                                            color: '#4c8c6f'
-                                        }
-                                    },
-                                    // link:'/#/detailed/'+metric.name,
-                                    // target:'self',
-                                };
-                                if (metric.dqfail == 1) {
-                                    itemChild.itemStyle.normal.color = '#ae5732';
-                                } else {
-                                    itemChild.itemStyle.normal.color = '#005732';
-                                }
-                                item.children.push(itemChild);
-                                metricId++;
-                            });
-                        }
-
-                        result.push(item);
-
-                        sysId ++;
-                    });
-                    return result;
-                }
-
-                var data = parseData(res);
-                console.log(data);
-
-                function getLevelOption() {
-                    return [
-                        {
-                            itemStyle: {
-                                normal: {
-                                    borderWidth: 0,
-                                    gapWidth: 6,
-                                    borderColor: '#000'
-                                }
-                            }
-                        },
-
-                        {
-                            itemStyle: {
-                                normal: {
-                                    gapWidth: 1,
-                                    borderColor: '#fff'
-                                }
-                            }
-                        }
-                    ];
-                }
-
-                var option = {
-
-                    title: {
-                        text: 'Data Quality Metrics Heatmap',
-                        left: 'center'
-                    },
-
-                    backgroundColor: 'transparent',
-
-                    tooltip: {
-                        formatter: function(info) {
-                            var dqFormat = info.data.dq>100?'':'%';
-                            return [
-                                '<span style="font-size:1.8em;">' + formatUtil.encodeHTML(info.data.sysName) + ' &gt; </span>',
-                                '<span style="font-size:1.5em;">' + formatUtil.encodeHTML(info.data.name)+'</span><br>',
-                                '<span style="font-size:1.5em;">dq : ' + info.data.dq.toFixed(2) + dqFormat + '</span>'
-                            ].join('');
-                        }
-                    },
-
-                    series: [
-                        {
-                            name:'System',
-                            type:'treemap',
-                            itemStyle: {
-                                normal: {
-                                    borderColor: '#fff'
-                                }
-                            },
-                            levels: getLevelOption(),
-                            breadcrumb: {
-                                show: false
-                            },
-                            roam: false,
-                            nodeClick: 'link',
-                            data: data,
-                            // leafDepth: 1,
-                            width: '95%',
-                            bottom : 0
-                        }
-                    ]
-                };
-
-                resizeTreeMap();
-                $scope.myChart = echarts.init(document.getElementById('chart1'), 'dark');
-                $scope.myChart.setOption(option);
-
-                $scope.myChart.on('click', function(param) {
-                    // if (param.data.sysName) {
-                    //     $location.path('/metrics/' + param.data.sysName);
-                    //     $scope.$apply();
-                    //     return false;
-                    // }
-                    // param.event.event.preventDefault();
-                    if (param.data.name) {
-                        // $location.path('/detailed/'+param.data.name);
-                        window.location.href = '/#!/detailed/'+param.data.name;
-                    }
-                });
-
-        }
-
-        $scope.$on('resizeHandler', function(e) {
-            if($route.current.$$route.controller == 'HealthCtrl'){
-                console.log('health resize');
-                resizeTreeMap();
-                $scope.myChart.resize();
-            }
-        });
-
-        function resizeTreeMap() {
-            $('#chart1').height( $('#mainWindow').height() - $('.bs-component').outerHeight() );
-        }
-
-    }]);
-});



[08/13] incubator-griffin git commit: refactor ui with angular2

Posted by gu...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/css/main.css
----------------------------------------------------------------------
diff --git a/ui/css/main.css b/ui/css/main.css
deleted file mode 100644
index 47a2ad3..0000000
--- a/ui/css/main.css
+++ /dev/null
@@ -1,1124 +0,0 @@
-/*
- Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-*/
-
-
-
-/**********BASE CONFIGURATIONS**********/
-body {
-  background:#1f1f1f;
-    font-family: 'Open Sans', sans-serif;
-    height: 100%;
-}
-
-html{
-  height: 100%;
-}
-
-h1 {
-font-family: 'Raleway', sans-serif;}
-
-h3,h4 , h5 {
-  font-family: 'Open Sans', sans-serif;
-  font-weight:lighter;
-}
-
-h2{
-  font-size:22px;
-}
-
-h3 {
-  font-size:46px;
-  color:#b2c831
-}
-
-h5 {
-  color:#b2c831;
-  margin-left:5px;
-}
-
-/***********BLOCKS & WRAPS***********/
-
-/*--- Dash Unit / Used in Dashboard page ---*/
-.dash-unit {
-  margin-bottom: 30px;
-  padding-bottom:10px;
-  border: 1px solid #383737;
-  background-image:url('../img/sep-half.png');
-  background-color: #3d3d3d;
-  color:white;
-  height:290px;
-}
-
-.dash-unit:hover {
-  background-color: #4f4f4f;
-  -moz-box-shadow:    3px 3px 2px 0px #151515;
-    -webkit-box-shadow: 3px 3px 2px 0px #151515;
-    box-shadow:         3px 3px 2px 0px #151515;
-
-}
-
-.dash-unit dtitle {
-  font-size:11px;
-  text-transform:uppercase;
-  color:#ffffff;
-  margin:8px;
-  padding:0px;
-  height:inherit
-  }
-
-.dash-unit hr {
-    border: 0;
-    border-top: 1px solid #151515;
-    border-top-style: dashed;
-  margin-top:3px;
-}
-
-.dash-unit h1 {
-  font-family: 'Raleway', sans-serif;
-  font-weight:300;
-  font-size: 20px;
-  line-height: 2px;
-  letter-spacing: 0px;
-  color: #ffffff;
-  padding-top:10px;
-  padding-left:5px;
-  margin-top:2px;
-  text-align:center;
-}
-
-.dash-unit h2 {
-  font-family: 'Open Sans', sans-serif;
-  font-weight: bold;
-  font-size: 30px;
-  line-height: 26px;
-  letter-spacing: 0px;
-  color: #ffffff;
-  padding-top:10px;
-  padding-left:5px;
-  margin-top:2px;
-  text-align:center;
-}
-
-
-.dash-unit h3 {
-  font-weight:300;
-  font-size: 15px;
-  line-height: 2px;
-  letter-spacing: 0px;
-  color: #b2c831;
-  padding-top:10px;
-  padding-left:5px;
-  margin-top:2px;
-  text-align:center;
-}
-
-
-.dash-unit p {
-  font-size: 14px;
-  font-weight: 200;
-  line-height: 16px;
-  color: inherit;
-  margin: 0 0 10px;
-  padding:5px;
- }
-
-.dash-unit h4 {
-  padding-left:5px;
-  margin-top:2px;
-  font-size: 13px;
-  font-weight:lighter;
-  line-height: 1;
-  letter-spacing: 0px;
-  color: #fff;
-}
-
-.dash-unit bold{
-  font-family: 'Open Sans', sans-serif;
-  font-size:26px;
-  font-weight:bold;
-  color:#fff;
-  vertical-align:middle;
-}
-
-
-/**********Half-Unit / Used in index.html**********/
-.half-unit {
-  margin-bottom: 30px;
-  padding-bottom: 4px;
-  border: 1px solid #383737;
-  background-image:url('../img/sep-half.png');
-  background-color: #3d3d3d;
-  color:white;
-  height:130px;
-}
-
-.half-unit:hover {
-  background-color: #4f4f4f;
-  -moz-box-shadow:    3px 3px 2px 0px #151515;
-    -webkit-box-shadow: 3px 3px 2px 0px #151515;
-    box-shadow:         3px 3px 2px 0px #151515;
-
-}
-
-.half-unit dtitle {
-  font-size:10px;
-  text-transform:uppercase;
-  color:#ffffff;
-  margin:8px;
-  padding:0px;
-  height:inherit
-  }
-
-.half-unit hr {
-    border: 0;
-    border-top: 1px solid #151515;
-    border-top-style: dashed;
-  margin-top:3px;
-}
-
-.half-unit h1 {
-  font-family: 'Raleway', sans-serif;
-  font-weight:300;
-  font-size: 20px;
-  line-height: 1;
-  letter-spacing: 0px;
-  color: #ffffff;
-  padding-top:10px;
-  padding-left:5px;
-  margin-top:2px;
-  text-align:center;
-}
-
-.half-unit h4 {
-  padding-left:5px;
-  margin-top:2px;
-  font-size: 13px;
-  font-weight:lighter;
-  line-height: 1;
-  letter-spacing: 0px;
-  color: #fff;
-}
-
-
-.half-unit bold{
-  font-family: 'Open Sans', sans-serif;
-  font-size:26px;
-  font-weight:bold;
-  color:#fff;
-  vertical-align:middle;
-}
-
-/**********Styling Elements**********/
-.cont {
-  text-align:center;
-  margin-top:30px;
-}
-
-.cont ok {
-  color:#b2c831;
-}
-
-.cont bad {
-  color:#fa1d2d;
-}
-
-.cont2 {
-  text-align:center;
-  margin-top:-15px;
-  font-size:12px;
-  line-height:7px;
-}
-
-.cont2 bold{
-  font-size:10px;
-  font-weight:bold;
-  color:#b2c831
-}
-
-.text p {
-  font-family: 'Open Sans', sans-serif;
-  margin-left:8px;
-  font-size:14px;
-  line-height:18px;
-}
-
-.text grey {
-  font-size:11px;
-  color:silver
-}
-
-
-/***********Bootstrap Default Modifications***********/
-
-.thumbnail {
-  border:0px;
-  text-align:center;
-  -webkit-box-shadow: 0px;
-     -moz-box-shadow: 0px;
-          box-shadow: 0px;
-    background: none;
-    text-align: center;
-
-}
-
-.modal-header {
-  background-image:url('../img/sep-half.png');
-  background-color: #4f4f4f;
-  color:#fff;
-}
-
-.btn-circle {
-  width: 60px;
-  height: 30px;
-  padding: 4px 8px;
-  font-size: 16px;
-  line-height: 1.33;
-  border-radius: 15px 15px 15px 15px;
-
-  border-width:2px;
-  border-color:#2A9FD6;
-  cursor:pointer;
-}
-
-.btn-circle:hover{
-    /*background: #b2c831;
-    color:#000;*/
-}
-
-/*input[type=submit] {
-  font-family: 'Open Sans', sans-serif;
-  font-size: 15px;
-  background: #b2c831;
-  color: #fff;
-  border: none;
-  padding: 8px 28px 10px 26px;
-    *-webkit-border-radius: 4px;
-     -moz-border-radius: 4px;
-          border-radius: 4px;
-}
-input[type=text], textarea {
-  background: #cdcbcc;
-  font-size: 13px;
-  display: block;
-  width: 100%;
-  border: none;
-  box-shadow: none;
-  height: 30px;
-  line-height: 18px;
-  padding: 0;
-  text-indent: 18px;
-  margin: 0 0 18px;
-}*/
-textarea {
-  line-height: 18px;
-  padding: 18px;
-  width: 100%;
-  text-indent: 0;
-}
-.textarea-container { margin: 0 18px; }
-.textarea-container textarea { margin-left: -18px; }
-#contact textarea { width: 100%; height: 45px; }
-
-
-.progress-bar {
-  background-color: #b2c831;
-}
-
-
-
-
-/***********LineIcons Styles***********/
-
-
-.info-user {
-  text-align:center;
-  font-size: 24px;
-  color: #b2c831;
-  }
-
-.fs1 {
-  padding:5px 5px 5px 5px;
-  position:relative;
-}
-
-.fs1:hover {
-  position:relative;
-  color: #fff;
-  cursor:pointer
-}
-
-.fs2 {
-  padding:5px 5px 5px 5px;
-  position:relative;
-  font-size:35px;
-  vertical-align: text-bottom
-}
-
-/**********Clock Configuration**********/
-
-digiclock {
-  font-size: 30px;
-  color: #fff;
-  text-align: center;
-  line-height: 60px;
-  margin-left: auto
-}
-
-.clockcenter {
-  text-align:center;
-}
-
-
-/**********Mail Style Configuration**********/
-
-.framemail {
-    cursor: default;
-}
-.framemail .window {
-    font-size: 0;
-    margin-top: -1px;
-    overflow: hidden;
-    margin-left: -18px;
-}
-.framemail .window .mail li {
-    background-color:#3d3d3d;
-    background-image: -webkit-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
-    background-image:    -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
-    background-image:     -ms-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
-    background-image:      -o-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
-    background-image:         linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
-    border-top: 1px solid #888;
-    position: relative;
-    margin-left:-18px;
-}
-.framemail .window .mail li:first-child {
-    border-top: none;
-}
-.framemail .window .mail li:hover {
-    background-color: #5d5b5b;
-}
-.framemail .window .mail li:after,
-.framemail .window .mail li:before {
-    border-left: 8px solid transparent;
-    border-top: 8px solid #df6;
-    content: '';
-    height: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-    width: 0;
-}
-.framemail .window .mail li:before {
-    border-top-color: #bbb;
-    border-width: 9px;
-}
-.framemail .window .mail li:nth-child(1):after,
-.framemail .window .mail li:nth-child(1):before {
-    border: none;
-}
-.framemail .window .mail li:nth-child(2):after {
-    border-top-color: #fa1d2d;
-}
-.framemail .window .mail li i {
-    display: inline-block;
-    height: 48px;
-    width: 6px;
-}
-.framemail .window .mail li .read {
-    background-color: #ddd;
-}
-.framemail .window .mail li .unread {
-    background: #b2c831;
-}
-.framemail .window .mail li img {
-    background: #819da2;
-    border-radius: 2px;
-    height: 36px;
-    left: 12px;
-    position: absolute;
-    top: 6px;
-    width: 36px;
-}
-.framemail .window .mail li p {
-    font: 13px/24px sans-serif;
-    left: 56px;
-    position: absolute;
-    top: 3px;
-}
-.framemail .window .mail li .sender {
-    color: #e9e8e8;
-    font-weight: bold;
-    text-shadow: 0 1px 1px hsla(0,0%,100%,.5);
-}
-.framemail .window .mail li .message {
-    color: #999;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    top: 21px;
-    white-space: nowrap;
-}
-.framemail .window .mail li .message strong {
-    color: #999;
-}
-.framemail .window .mail li .actions {
-    height: 16px;
-    position: absolute;
-    right: 19px;
-    text-align: right;
-    top: 0;
-    width: 96px;
-}
-.framemail .window .mail li .actions img {
-    background: none;
-    display: inline-block;
-    height: 16px;
-    margin-left: 6px;
-    opacity: .1;
-    position: relative;
-    width: 16px;
-}
-.framemail .window .mail li:hover .actions img {
-    opacity: .25;
-}
-.framemail .window .mail li .actions img:hover {
-    opacity: .75;
-}
-
-
-/**********DONUT CHARTS STYLES**********/
-#load {
-  width: 11.313em;
-  height: 11.313em;
-  -moz-border-radius: 5px;
-  border-radius: 5px;
-  margin-bottom: 1.063em;
-  background-position: center center;
-  margin:auto;
-}
-
-#space {
-  width: 11.313em;
-  height: 11.313em;
-  -moz-border-radius: 5px;
-  border-radius: 5px;
-  margin-bottom: 1.063em;
-  background-position: center center;
-  margin:auto;
-}
-
-
-/**********LINE AND BARS**********/
-
-.section-graph {
-  position: relative;
-  height: 130px;
-  color: #fff;
-  background-image: linear-gradient(color-stops(#b2c831, #b2c831 50%, #b2c831 50%));
-  margin-bottom:20px;
-}
-.section-graph .graph-info {
-  z-index: 99;
-  position: absolute;
-  font-weight: bold;
-  margin-top: 12px;
-  margin-left: 21px;
-  width: 100px;
-}
-.section-graph .graph-info .graph-arrow {
-  width: 0;
-  height: 0;
-  margin-top: 18px;
-  border-left: 4px solid transparent;
-  border-right: 4px solid transparent;
-  border-bottom: 4px solid white;
-  float: left;
-}
-.section-graph .graph-info .graph-info-big {
-  font-size: 24px;
-  float: left;
-  margin-left: 3px;
-}
-.section-graph .graph-info .graph-info-small {
-  margin-left: 3px;
-  font-size: 12px;
-  font-weight: normal;
-  color: rgba(255, 255, 255, 0.5);
-  clear: left;
-  margin-left: 8px;
-}
-/*
- * Info Section
- */
-.info-aapl {
-  text-align: center;
-
-}
-.info-aapl ul {
-  margin-left:30%;
-
-}
-.info-aapl li {
-  margin: 0;
-  display: block;
-  width: 9px;
-  height: 40px;
-  margin-right: 6px;
-  background-color: #f5f0ec;
-  float:left;
-  position: relative;
-}
-.info-aapl li span {
-  display: block;
-  width: 9px;
-  height: 40px;
-  position: absolute;
-  bottom: 0;
-}
-.info-aapl li span.orange {
-  background-color: #fa1d2d;
-}
-.info-aapl li span.green {
-  background-color: #b2c831;
-}
-
-/**********TWITTER WIDGET **********/
-#jstwitter ul li{
-  color:#bdbdbd;
-  padding:.5em .75em;
-}
-
-#jstwitter ul{
-  margin-left:0;
-  list-style:none
-}
-
-#jstwitter:first-child{
-  border-top:0
-}
-
-ul#jstwitter li a{
-  font-size:10px;
-  font-style:italic;
-  color:#666;
-  text-decoration:none
-}
-
-/********** CUSTOMIZED BUTTON **********/
-.btnnew {
-  display: inline-block;
-  *border-left: 0 none #707070;
-  border-right: 0 none #707070;
-  border-top: 0 none #707070;
-  border-bottom: 0 none #707070;
-  display: inline;
-    padding: 4px 12px;
-    margin-bottom: 0;
-  *margin-left: .3em;
-    font-size: 14px;
-    line-height: 20px;
-    color: #b2c831;
-    text-align: center;
-    vertical-align: middle;
-    cursor: pointer;
-  background-color: #5a5a5a;
-  *background-color: #5a5a5a;
-    background-repeat: repeat-x;
-  *-webkit-border-radius: 4px;
-     -moz-border-radius: 4px;
-          border-radius: 4px;
-    zoom: 1;
-  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-  background-image: linear-gradient(to bottom, #707070, #707070);*
-}
-
-/********** SWITCH BUTTON **********/
-.switch {
-  position: relative;
-  margin: 20px auto;
-  height: 26px;
-  width: 120px;
-  background: rgba(0, 0, 0, 0.25);
-  border-radius: 3px;
-  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
-  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
-}
-
-.switch-label {
-  position: relative;
-  z-index: 2;
-  float: left;
-  width: 58px;
-  line-height: 26px;
-  font-size: 11px;
-  color: rgba(255, 255, 255, 0.35);
-  text-align: center;
-  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
-  cursor: pointer;
-}
-.switch-label:active {
-  font-weight: bold;
-}
-
-.switch-label-off {
-  padding-left: 2px;
-}
-
-.switch-label-on {
-  padding-right: 2px;
-}
-
-/*
- * Note: using adjacent or general sibling selectors combined with
- *       pseudo classes doesn't work in Safari 5.0 and Chrome 12.
- *       See this article for more info and a potential fix:
- *       http://css-tricks.com/webkit-sibling-bug/
- */
-.switch-input {
-  display: none;
-}
-.switch-input:checked + .switch-label {
-  font-weight: bold;
-  color: rgba(0, 0, 0, 0.65);
-  text-shadow: 0 1px rgba(255, 255, 255, 0.25);
-  -webkit-transition: 0.15s ease-out;
-  -moz-transition: 0.15s ease-out;
-  -o-transition: 0.15s ease-out;
-  transition: 0.15s ease-out;
-}
-.switch-input:checked + .switch-label-on ~ .switch-selection {
-  left: 60px;
-  /* Note: left: 50% doesn't transition in WebKit */
-}
-
-.switch-selection {
-  display: block;
-  position: absolute;
-  z-index: 1;
-  top: 2px;
-  left: 2px;
-  width: 58px;
-  height: 22px;
-  background: #b2c831;
-  border-radius: 3px;
-  background-image: -webkit-linear-gradient(top, #b6c753, #b2c831);
-  background-image: -moz-linear-gradient(top, #b6c753, #b2c831);
-  background-image: -o-linear-gradient(top, #b6c753, #b2c831);
-  background-image: linear-gradient(to bottom, #b6c753, #b2c831);
-  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
-  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
-  -webkit-transition: left 0.15s ease-out;
-  -moz-transition: left 0.15s ease-out;
-  -o-transition: left 0.15s ease-out;
-  transition: left 0.15s ease-out;
-}
-.switch-blue .switch-selection {
-  background: #3aa2d0;
-  background-image: -webkit-linear-gradient(top, #4fc9ee, #3aa2d0);
-  background-image: -moz-linear-gradient(top, #4fc9ee, #3aa2d0);
-  background-image: -o-linear-gradient(top, #4fc9ee, #3aa2d0);
-  background-image: linear-gradient(to bottom, #4fc9ee, #3aa2d0);
-}
-.switch-yellow .switch-selection {
-  background: #fa1d2d;
-  background-image: -webkit-linear-gradient(top, #f93e4b, #fa1d2d);
-  background-image: -moz-linear-gradient(top, #f93e4b, #fa1d2d);
-  background-image: -o-linear-gradient(top, #f93e4b, #fa1d2d);
-  background-image: linear-gradient(to bottom, #f93e4b, #fa1d2d);
-}
-
-
-/**********Gauge Chart**********/
-#canvas {
-  display: block;
-  width: 150px;
-  margin: 30px auto;
-}
-
-/**********Accordion Styling**********/
-
-.accordion-group {
-  border: 1px solid #222;
-}
-.accordion-heading {
-  background-color: #5a5a5a;
-  *background-color: #5a5a5a;
-    background-repeat: repeat-x;
-  *-webkit-border-radius: 4px;
-     -moz-border-radius: 4px;
-          border-radius: 4px;
-    zoom: 1;
-  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-  background-image: linear-gradient(to bottom, #707070, #707070);*
-}
-
-/**********Link Styling**********/
-a {
-  color: #b2c831;
-  text-decoration: none;
-}
-
-a:hover {
-  color: #dff948;
-  text-decoration: none;
-}
-
-.bark-link {
-  color: #b2c831;
-  text-decoration: underline;
-}
-
-.bark-link:hover {
-  color: #dff948;
-  text-decoration: none;
-}
-
-/**navigation bar**/
-.docs-search{
-  margin:10px 0;
-  border-radius:20px;
-  background:#626262;
-  vertical-align:middle;
-  padding:4px 0 4px 10px;
-}
-
-.docs-search input{
-  background:#626262;
-  border:0
-}
-
-.docs-search input:focus{
-  outline:none;
-  color:#fff;
-}
-
-.navbar-search {
-    position: relative;
-    float: left;
-    margin-top: 14px;
-    margin-bottom: 0;
-}
-
-.navbar-search .search-query {
-    padding: 4px 9px;
-    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
-    font-size: 13px;
-    font-weight: normal;
-    line-height: 1;
-    color: #ffffff;
-    background-color: #848484;
-    border: 1px solid #151515;
-    border-radius:14px;
-    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);
-    -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);
-    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);
-    -webkit-transition: none;
-    -moz-transition: none;
-    -ms-transition: none;
-    -o-transition: none;
-    transition: none;
-}
-
-.navbar-search .search-query:disabled{
-    background-color: #626262;
-    cursor: not-allowed;
-}
-
-.navbar-search .search-query:-moz-placeholder {
-    color: #cccccc;
-}
-.navbar-search .search-query::-webkit-input-placeholder {
-    color: #cccccc;
-}
-.navbar-search .search-query:focus,.navbar-search .search-query.focused {
-    padding: 5px 10px;
-    color: #333333;
-    text-shadow: 0 1px 0 #ffffff;
-    background-color: #ffffff;
-    border: 0;
-    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
-    -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
-    box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
-    outline: 0;
-}
-
-
-
-/**********FooterWrap Section**********/
-@media (min-width: 992px) {
-    #footerwrap {
-      width: 75%;
-    }
-}
-
-@media (max-width: 991px) { 
-    #footerwrap {
-      width: 100%
-    }
-}
-
-#footerwrap {
-    padding-left: 30px;
-    height: 90px;
-    background:#262626;
-    padding-top:10px;
-    padding-bottom: 10px;
-    border-top-style: solid;
-    border-top-width:8px;
-    border-top-color:#1d1d1d;
-    /*overflow-y:auto;*/
-    z-index:200;
-
-}
-
-#footerwrap p {
-  color:white;
-  font-size:12px;
-  margin:0;
-}
-
-/*#footerwrap>.container-fluid{
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  transform:translateY(100%);
-  animation: scrolling 2s linear infinite;
-}
-
-@keyframes scrolling {
- 0%   {
- transform: translateY(0%);
- }
- 100% {
- transform: translateY(-100%);
- }
-}*/
-
-
-/***********FULLCALENDAR STYLE***********/
-
-#external-events {
-  padding: 0 10px;
-  border: 1px solid #8b8b8a;
-    background-color: #8b8b8a;
-    -webkit-border-radius: 4px;
-       -moz-border-radius: 4px;
-            border-radius: 4px;
-  text-align: left;
-  }
-
-#external-events h4 {
-  font-size: 16px;
-  margin-top: 0;
-  padding-top: 1em;
-  }
-
-.external-event { /* try to mimick the look of a real event */
-  margin: 10px 0;
-  padding: 2px 4px;
-  background: #b2c831;
-  color: #fff;
-  font-size: .85em;
-  cursor: pointer;
-  }
-
-#external-events p {
-  margin: 1.5em 0;
-  font-size: 11px;
-  color: #b2c831;
-  }
-
-#external-events p input {
-  margin: 0;
-  vertical-align: middle;
-  }
-
-#calendar {
-  width:100%;
-  }
-
-.symbol.required:before {
-    content: "*";
-    display: inline;
-    color: #E6674A;
-}
-
-.has-success .symbol:before {
-    content: "\f00c";
-    display: inline;
-    font-family: FontAwesome;
-    color: #468847
-}
-
-.has-error .symbol:before {
-    content: "\f00d";
-    display: inline;
-    font-family: FontAwesome;
-    color: #C82E29
-}
-
-.text-small {
-    font-size: 12px!important
-}
-
-.has-error .error {
-    color: #a94442;
-}
-
-/**********Media Styles**********/
-
-@media (max-width: 360px){
-/*Calendar Adsjustments*/
-.fc-header {margin-top:15px;}
-.fc-header-title h2{font-size:10px; }
-.fc-header-right {display:none}
-}
-/* portrait tablet */
-@media (min-width: 767px) and (max-width: 768px) {
-  .info-aapl ul {
-      margin-left:10px;
-      float:left;
-}
-
-#load {
-  margin-left:5px;
-  margin-right:10px;
-}
-
-#space {
-  margin-left:5px;
-  margin-right:10px;
-}
-
-}
-
-/* Landscape iphone 5 and samsung galaxy */
-@media (min-width: 560px) and (max-width: 685px) {
-  .info-aapl ul {
-      margin-left:40%;
-  }
-
-}
-
-@media (min-width: 1024px) {
-  .modal-xg {
-    width: 1024px;
-  }
-}
-
-.form-control {
-  color: #000000;
-}
-
-tbody {
-  word-break:break-all;
-}
-
-
-/*style of job*/
-.page{
-  cursor: pointer;
-  float: left;
-  border-bottom-left-radius: 4px;
-  border-top-left-radius: 4px;
-  color: #fff;
-  text-decoration: underline;
-}
-
-.page-active{
-  background-color: #2a9fd6;
-  border-color: transparent;
-  cursor: default;
-}
-
-.normal{
-  background-color: #00C853;
-  border-radius: 5px; 
-  padding:3px 4px;
-}
-
-.unnormal{
-  background-color: #EF5350;
-  border-radius: 5px; 
-  padding:3px 4px;
-}
-
-
-#timePopup{
-  position: absolute;
-  z-index:1;
-  height:100px;
-  background-color:white; 
-  /*width:80%;*/
-  text-align: center;
-  border: 5px solid #c5c5c5;
-  border-radius: 3px;
-}
-
-#hourSelector{
-  width: 20%;
-  height: 100%;
-  display: inline-block;
-}
-
-#minuteSelector{
-  width:20%;
-  height:100%;
-  display: inline-block;
-
-}
-
-
-#secondSelector{
-  width:20%;
-  height:100%;
-  display: inline-block;
-
-}
-
-.division{
-  display: inline-block;
-  width:10%;
-  height:100%;
-  position:relative;
-  top: -30px;
-}
-
-.icon{
-  color: #fff;
-  position: absolute;
-  left: 50%;
-  top:20%;
-}
-
-
-
-.ng-cloak{display:none !important;}
-
-.mask{
-  width:100%;
-  height:100%;
-  position:fixed;
-  top:0;
-  left:0;
-  z-index:1;
-}

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/css/sidebar.css
----------------------------------------------------------------------
diff --git a/ui/css/sidebar.css b/ui/css/sidebar.css
deleted file mode 100644
index ed9a250..0000000
--- a/ui/css/sidebar.css
+++ /dev/null
@@ -1,183 +0,0 @@
-/*
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-*/
-/*side-bar start*/
-.sidebar-stat-center{
-	padding:10px 0;
-	display: flex;
-	align-items: center
-}
-
-.sidebar-stat-center>img{
-	max-width:24px;
-	margin-right:5px;
-}
-
-.sidebar-stat-center>span{
-	font-size:18px;
-	color:#fff
-}
-
-.well .faChevron{
-	color: white;
-}
-
-.side-bar-scroll{
-	padding:0px;
-	background:transparent;
-	border:0px;
-}
-
-.sideBar{
-	overflow:scroll;
-	height:650px;
-	overflow-x: hidden;
-}
-
-.sideBar::-webkit-scrollbar-track
-{
-	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-	border-radius: 10px;
-	background-color: #F5F5F5;
-}
-
-.sideBar::-webkit-scrollbar
-{
-	width: 12px;
-	border-radius: 10px;
-	background-color: #F5F5F5;
-}
-
-.sideBar::-webkit-scrollbar-thumb
-{
-	border-radius: 10px;
-	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
-	background-color: #D62929;
-}
-
-.well .side-metrics{
-  font-size: 14px;
-}
-.well .faArrows{
-	background:#ff5c33;
-	color:black;
-}
-
-.well .side-date{
-	color: white;
-	/*position: absolute;*/
-	/*left: 80px;*/
-	/*margin-left: 10px;*/
-}
-
-.well .side-name{
-	color: #999966;
-	/*position: absolute;*/
-	/*left: 210px;*/
-	/*margin-left: 20px;*/
-}
-
-a>.side-name:hover{
-	color: #b2c831;
-	/*position: absolute;*/
-	/*left: 210px;*/
-	/*margin-left: 20px;*/
-}
-
-.well .side-percent{
-	color: #40bf80;
-	/*position: absolute;*/
-	/*left: 390px;*/
-}
-
-.well .side-percent-red{
-	color: #f00;
-}
-
-#gprs{
-  position: absolute;
-  top:5px;
-  clip: rect(0, 50px, 50px, 0);
-  top: -8px;
-  /* clip: shape(top, right, bottom, left); NB 'rect' is the only available option */
-}
-
-.well-next{
-	padding:0px;
-	background:#262626;
-	border:0px;
-	position:relative;
-}
-
-.vcenter {
-    display: inline-block;
-    vertical-align: middle;
-    float: none;
-}
-
-/*side-bar end*/
-
-/* led start */
-.led-red {
-    /*margin: 20px auto;*/
-    margin-top: -26px;
-    margin-left: 180px;
-    width: 12px;
-    height: 12px;
-    background-color: #940;
-    border-radius: 50%;
-    box-shadow: #000 0 -1px 7px 1px, inset #600 0 -1px 9px, #F00 0 2px 12px;
-}
-
-.led-yellow {
-    /*margin: 20px auto;*/
-    /*margin-top: -26px;
-    margin-left: 180px;*/
-    width: 12px;
-    height: 12px;
-    background-color: #A90;
-    border-radius: 50%;
-    box-shadow: #000 0 -1px 7px 1px, inset #660 0 -1px 9px, #DD0 0 2px 12px;
-}
-
-.led-green {
-    /*margin: 20px auto;*/
-    /*margin-top: -26px;
-    margin-left: 180px;*/
-    width: 12px;
-    height: 12px;
-    background-color: #690;
-    border-radius: 50%;
-    box-shadow: #000 0 -1px 7px 1px, inset #460 0 -1px 9px, #7D0 0 2px 12px;
-}
-/* led end   */
-
-@media (max-width: 1200px) {
-	#sidebar-option {
-		height: auto;
-		display: block;
-	}
-}
-
-@media (min-width: 1200px) {
-	#sidebar-option {
-		height: 180px;
-		display: flex;
-		align-items: center;
-	}
-}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/css/treeview-check.css
----------------------------------------------------------------------
diff --git a/ui/css/treeview-check.css b/ui/css/treeview-check.css
deleted file mode 100644
index 1c4249d..0000000
--- a/ui/css/treeview-check.css
+++ /dev/null
@@ -1,85 +0,0 @@
-/*
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-*/
-div[angular-treeviewcheck] {
-  /* prevent user selection */
-  -moz-user-select: -moz-none;
-  -khtml-user-select: none;
-  -webkit-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-
-  /* default */
-  /*font-family: Tahoma;
-  font-size:13px;
-  color: #555;*/
-  font-size:14px;
-  text-decoration: none;
-}
-
-div[tree-model-check] ul {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  border: none;
-  overflow: hidden;
-}
-
-div[tree-model-check] li {
-  position: relative;
-  padding: 0 0 0 20px;
-  color:#ffffff
-  line-height: 20px;
-}
-
-div[tree-model-check] li>span:hover {
-  color:#ffffff;
-}
-
-div[tree-model-check] li .expanded {
-  padding: 1px 8px;
- /*background-image: url("http://cfile23.uf.tistory.com/image/205B973A50C13F4B19D9BD");*/
-  background-repeat: no-repeat;
-}
-
-
-div[tree-model-check] li .collapsed {
-  padding: 1px 10px;
-  /*background-image: url("../img/folder-closed.png");*/
- /*background-image: url("http://cfile23.uf.tistory.com/image/1459193A50C13F4B1B05FB");*/
-  background-repeat: no-repeat;
-}
-
-div[tree-model-check] li .normal {
-  padding: 1px 10px;
-  /*background-image: url("../img/file.png");*/
-  /*background-image: url("http://cfile23.uf.tistory.com/image/165B663A50C13F4B196CCA");*/
-  background-repeat: no-repeat;
-}
-
-div[tree-model-check] li i, div[tree-model-check] li span {
-  cursor: pointer;
-}
-
-div[tree-model-check] li .selected {
-  background-color: #aaddff;
-  font-weight: bold;
-  /*background-color: #D9F40E;*/
-  color:#000000;
-  padding: 1px 5px;
-}

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/css/treeview.css
----------------------------------------------------------------------
diff --git a/ui/css/treeview.css b/ui/css/treeview.css
deleted file mode 100644
index 0b9ab67..0000000
--- a/ui/css/treeview.css
+++ /dev/null
@@ -1,85 +0,0 @@
-/*
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-*/
-div[angular-treeview] {
-  /* prevent user selection */
-  -moz-user-select: -moz-none;
-  -khtml-user-select: none;
-  -webkit-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-
-  /* default */
-  /*font-family: Tahoma;
-  font-size:13px;
-  color: #555;*/
-  font-size:14px;
-  text-decoration: none;
-}
-
-div[tree-model] ul {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  border: none;
-  overflow: hidden;
-}
-
-div[tree-model] li {
-  position: relative;
-  padding: 0 0 0 20px;
-  color:#ffffff
-  line-height: 20px;
-}
-
-div[tree-model] li>span:hover {
-  color:#ffffff;
-}
-
-div[tree-model] li .expanded {
-  padding: 1px 8px;
- /*background-image: url("http://cfile23.uf.tistory.com/image/205B973A50C13F4B19D9BD");*/
-  background-repeat: no-repeat;
-}
-
-
-div[tree-model] li .collapsed {
-  padding: 1px 10px;
-  /*background-image: url("../img/folder-closed.png");*/
- /*background-image: url("http://cfile23.uf.tistory.com/image/1459193A50C13F4B1B05FB");*/
-  background-repeat: no-repeat;
-}
-
-div[tree-model] li .normal {
-  padding: 1px 10px;
-  /*background-image: url("../img/file.png");*/
-  /*background-image: url("http://cfile23.uf.tistory.com/image/165B663A50C13F4B196CCA");*/
-  background-repeat: no-repeat;
-}
-
-div[tree-model] li i, div[tree-model] li span {
-  cursor: pointer;
-}
-
-div[tree-model] li .selected {
-  background-color: #aaddff;
-  font-weight: bold;
-  /*background-color: #D9F40E;*/
-  color:#000000;
-  padding: 1px 5px;
-}

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/img/1.PNG
----------------------------------------------------------------------
diff --git a/ui/img/1.PNG b/ui/img/1.PNG
deleted file mode 100644
index e9a3063..0000000
Binary files a/ui/img/1.PNG and /dev/null differ

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/img/2.PNG
----------------------------------------------------------------------
diff --git a/ui/img/2.PNG b/ui/img/2.PNG
deleted file mode 100644
index af12dc4..0000000
Binary files a/ui/img/2.PNG and /dev/null differ

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/img/bollinger.png
----------------------------------------------------------------------
diff --git a/ui/img/bollinger.png b/ui/img/bollinger.png
deleted file mode 100644
index efb1f49..0000000
Binary files a/ui/img/bollinger.png and /dev/null differ

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/img/construction.gif
----------------------------------------------------------------------
diff --git a/ui/img/construction.gif b/ui/img/construction.gif
deleted file mode 100644
index 7d03450..0000000
Binary files a/ui/img/construction.gif and /dev/null differ

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/img/favicon.ico
----------------------------------------------------------------------
diff --git a/ui/img/favicon.ico b/ui/img/favicon.ico
deleted file mode 100644
index c5ccacf..0000000
Binary files a/ui/img/favicon.ico and /dev/null differ

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/img/logo.gif
----------------------------------------------------------------------
diff --git a/ui/img/logo.gif b/ui/img/logo.gif
deleted file mode 100644
index bf26825..0000000
Binary files a/ui/img/logo.gif and /dev/null differ

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/img/logo.png
----------------------------------------------------------------------
diff --git a/ui/img/logo.png b/ui/img/logo.png
deleted file mode 100644
index ee1a9e6..0000000
Binary files a/ui/img/logo.png and /dev/null differ

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/img/mad.png
----------------------------------------------------------------------
diff --git a/ui/img/mad.png b/ui/img/mad.png
deleted file mode 100644
index aa85a76..0000000
Binary files a/ui/img/mad.png and /dev/null differ

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/img/sidebar1.png
----------------------------------------------------------------------
diff --git a/ui/img/sidebar1.png b/ui/img/sidebar1.png
deleted file mode 100644
index 6a64412..0000000
Binary files a/ui/img/sidebar1.png and /dev/null differ

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/img/sidebar2.png
----------------------------------------------------------------------
diff --git a/ui/img/sidebar2.png b/ui/img/sidebar2.png
deleted file mode 100644
index 425b863..0000000
Binary files a/ui/img/sidebar2.png and /dev/null differ

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/img/spinner.gif
----------------------------------------------------------------------
diff --git a/ui/img/spinner.gif b/ui/img/spinner.gif
deleted file mode 100644
index 21b4b71..0000000
Binary files a/ui/img/spinner.gif and /dev/null differ

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/img/yoy.png
----------------------------------------------------------------------
diff --git a/ui/img/yoy.png b/ui/img/yoy.png
deleted file mode 100644
index 2f071ac..0000000
Binary files a/ui/img/yoy.png and /dev/null differ

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/index.html
----------------------------------------------------------------------
diff --git a/ui/index.html b/ui/index.html
deleted file mode 100644
index a5f9323..0000000
--- a/ui/index.html
+++ /dev/null
@@ -1,194 +0,0 @@
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
--->
-
-<!DOCTYPE html>
-
-<html lang="en">
-
-<head>
-
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="description" content="">
-    <meta name="author" content="">
-    <link rel="icon" href="/img/favicon.ico">
-
-    <title>Griffin - Data Quality Service</title>
-
-    <!-- Bootstrap Core CSS -->
-    <link href="bower_components/bootswatch/cyborg/bootstrap.css" rel="stylesheet">
-    <!-- Custom Fonts -->
-    <link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
-
-    <link href="bower_components/AngularJS-Toaster/toaster.css" rel="stylesheet">
-
-    <link href="css/main.css" rel="stylesheet">
-    <link href="css/treeview.css" rel="stylesheet">
-    <link href="css/treeview-check.css" rel="stylesheet">
-    <link href="css/sidebar.css" rel="stylesheet">
-    <link href="pages/measures/measure.css" rel="stylesheet">
-    <link href="pages/metrics/metrics.css" rel="stylesheet">
-    <link href="pages/template/bigchart.css" rel="stylesheet">
-    <link href="bower_components/jquery-ui/themes/base/jquery-ui.css" rel="stylesheet">
-
-    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
-    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
-    <!--[if lt IE 9]>
-    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
-    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
-    <![endif]-->
-
-</head>
-
-
-<body>
-<toaster-container toaster-options="{'time-out': 3000, 'close-button':true, 'animation-class': 'toast-center-right'}"></toaster-container>
-
-<nav class="navbar navbar-default navbar-fixed-top" ng-controller="NavCtrl">
-    <div class="container-fluid">
-        <!-- Brand and toggle get grouped for better mobile display -->
-        <div class="navbar-header">
-            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
-                <span class="sr-only">Toggle navigation</span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-            </button>
-            <a href="#!/" class="navbar-brand" style="padding-top:5px;padding-bottom:0;"><img src="/img/logo.png" title="Data Quality Service" style="max-height:40px;"/></a>
-        </div>
-
-        <!-- Collect the nav links, forms, and other content for toggling -->
-        <div class="collapse navbar-collapse" id="navbar-collapse">
-            <ul class="nav navbar-nav">
-                <li ng-class="{active:isActive('/health')}"><a href="#!/health"><i class="icon-home icon-white"></i> Health</a></li>
-                <li ng-class="{active:isActive('/measures') || isActive('/createrule')}"><a href="#!/measures"><i class="icon-folder-open icon-white"></i> Measures</a></li>
-                <!-- <li><a href="#/undercons"><i class="icon-calendar icon-white"></i> Data Profiling</a></li> -->
-                <li ng-class="{active:isActive('/jobs') || isActive('/jobs')}"><a href="#!/jobs"><i class="icon-calendar icon-white"></i> Jobs</a></li>
-
-                <li ng-class="{active:isActive('/mydashboard')}"><a href="#!/mydashboard"><i class="icon-calendar icon-white"></i> My Dashboard</a></li>
-            </ul>
-
-            <ul class="nav navbar-nav navbar-right">
-                <li class="dropdown">
-                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{fullName}} <i class="fa fa-user fa-fw"></i><span class="caret"></span></a>
-                    <ul class="dropdown-menu dropdown-user">
-                        <li><a href="#!/undercons"><i class="fa fa-user fa-fw"></i> User Profile</a></li>
-                        <li><a href="#!/undercons"><i class="fa fa-gear fa-fw"></i> Settings</a></li>
-                        <li class="divider"></li>
-                        <li><a href="/apidocs/index.html" target="_blank"><i class="fa fa-book fa-fw"></i> API DOCs</a></li>
-                        <li><a href="https://github.com/eBay/griffin/blob/master/griffin-doc/userguide.md" target="_blank"><i class="fa fa-question-circle fa-fw"></i> User Guide</a></li>
-                        <li><a href="mailto://ebay-griffin-devs@googlegroups.com" ><i class="fa fa-envelope fa-fw"></i> Contact us</a></li>
-                        <li class="divider"></li>
-                        <li><a href="" ng-click="logout()"><i class="fa fa-sign-out fa-fw"></i> Logout</a>
-                        </li>
-                    </ul>
-                </li>
-            </ul>
-
-            <form class="navbar-search navbar-right nav navbar-nav" >
-
-                <input id="searchBox" type="text" class="search-query" placeholder="Search..." ng-disabled="!isActive('/measures')&&!isActive('/dataassets')">
-            </form>
-            <!-- <form class="navbar-form navbar-right" role="search" style="padding-right:150px;">
-              <div class="form-group">
-                <input type="text" class="form-control search-query" id="searchBox" ng-disabled="!isActive('/measures')&&!isActive('/dataassets')" placeholder="Search.." style="border-radius:19px;">
-              </div>
-            </form> -->
-        </div><!-- /.navbar-collapse -->
-    </div><!-- /.container-fluid -->
-</nav>
-
-
-<div class="container-fluid"  us-spinner="{color:'#ffffff', lines:13, width:14, length:28, radius:42, shadow:true, hwaccel:true, speed:0.8}" spinner-on="false" style="padding-top:56px;padding-bottom:90px;height:100%;padding-right:0;" id="mainContent">
-
-
-    <div class="col-md-9 col-xs-12" >
-        <!-- <button type="button" class="btn btn-default btn-circle btn-lg" style="position: absolute; top: 0px; right: 10px; "><i class="fa fa-arrow-left"></i></button> -->
-        <button type="button" class="btn btn-primary btn-circle" style="position: absolute; top: 0px; right: 10px; z-index:99" onclick="history.back();"><span style="margin-bottom:20px;">Back</span></button>
-        <!-- main content goes here-->
-        <div id="mainWindow" class="row" ng-view style="overflow-y: auto;overflow-x:hidden; padding-right: 10px;" ng-controller="MainCtrl">
-
-        </div>
-    </div>
-
-    <div class="col-xs-12 col-md-3" style="padding-right:0;">
-        <!-- <div id="rightbar" ng-controller="SideBarCtrl" class="" style="background-color:#262626;"> -->
-        <ng-include src="'/sidebar.html'"/>
-        <!-- </div> -->
-
-    </div>
-
-    <div id="footerwrap" class="navbar-fixed-bottom" ng-controller="FooterCtrl">
-        <!-- <footer class="clearfix"></footer> -->
-        <div class="container-fluid" class="ng-cloak">
-            <div class="row" ng-show="timestamp|date:'short'">
-                <p ng-show="!notifications" class="ng-cloak">{{timestamp|date:'short'}} - Welcome <label>{{fullName}}</label>!</p>
-                <p ng-repeat="r in notifications" class="ng-cloak">
-                    {{r.timestamp|date:'short'}} - <label>{{r.owner}}</label> {{r.operation}}d a {{r.target}} named
-                    <a ng-if="r.target=='model'" href="#!/viewrule/{{r.name}}">{{r.name}}</a>
-                    <label ng-if="r.target=='dataasset'">"{{r.name}}"</label>
-                </p>
-            </div><!-- /row -->
-        </div><!-- /container -->
-    </div><!-- /footerwrap -->
-
-</div>
-
-<!-- <div id="bigChartContainer"  class="big-chart-container" style="display:none;" ng-controller="BigChartCtrl">
-    <div id="bigChartShow" class="big-chart-content">
-        <div class="container-fluid">
-            <div class="pull-right" style="position:fixed;right:20px;top:10px;z-index:1050;">
-                <button type="button" id="bigChartClose" class="bark-close thick" aria-label="Close" ng-click="closeBigChart()">
-                </button>
-            </div>
-
-            <div class="pull-right" style="position:fixed;right:150px;top:10px;z-index:1050;">
-                <a href ng-click="downloadSample()" style="font-size:15px;color:#d48265;"><u>Download Sample</u></a>
-            </div>
-
-            <div class="row">
-                <div id="bigChartDiv"></div>
-            </div>
-        </div>
-    </div>
-</div> -->
-
-<div class="modal fade" id="download-sample" role="dialog" ng-controller="DownloadSampleCtrl">
-    <div class="modal-dialog modal-xg modal-lg">
-        <div class="modal-content">
-            <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-                <h4 class="modal-title">{{selectedModelName}}</h4>
-            </div>
-            <div class="modal-body">
-                <ng-include src="'/pages/metrics/download-sample.html'"/>
-            </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
-            </div>
-        </div>
-    </div>
-</div>
-
-<script data-main="js/main" src="bower_components/requirejs/require.js"></script>
-
-</body>
-
-</html>

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/js/app.js
----------------------------------------------------------------------
diff --git a/ui/js/app.js b/ui/js/app.js
deleted file mode 100644
index 42e3869..0000000
--- a/ui/js/app.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/*
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-*/
-
-define([
-    'angular',
-    './controllers/index',
-    './directives/index',
-    './filters/index',
-    './services/index',
-    'ngSmartTable',
-    'angularRoute',
-    'ngToaster',
-    'ngCookies',
-    'angularSpinner',
-    'echarts',
-    'echarts-dark'
-], function (angular) {
-    'use strict';
-
-    return angular.module('app', [
-        'app.services',
-        'app.controllers',
-        'smart-table',
-        'app.filters',
-        'app.directives',
-        'ngRoute',
-        'toaster',
-        'ngCookies',
-        'angularSpinner'
-    ]);
-});

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/js/bs.js
----------------------------------------------------------------------
diff --git a/ui/js/bs.js b/ui/js/bs.js
deleted file mode 100644
index c3d20c3..0000000
--- a/ui/js/bs.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/*
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-*/
-
-define([
-    'require',
-    'jquery',
-    'bootstrap',
-    'angular',
-    'app',
-    'routes',
-    'jquery-ui'
-], function (require, $, bootstrap, angular) {
-    'use strict';
-
-   require(['domReady!'], function (document) {
-
-        $('#mainWindow').height($('#mainContent').height());
-
-        angular.bootstrap(document, ['app']);
-    });
-});

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/js/controllers/bigChart-ctrl.js
----------------------------------------------------------------------
diff --git a/ui/js/controllers/bigChart-ctrl.js b/ui/js/controllers/bigChart-ctrl.js
deleted file mode 100644
index 87eba9f..0000000
--- a/ui/js/controllers/bigChart-ctrl.js
+++ /dev/null
@@ -1,74 +0,0 @@
-/*
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-*/
-define(['./module'], function(controllers) {
-    'use strict';
-    controllers.controller('BigChartCtrl', ['$scope', '$http', '$config', '$filter', '$timeout', '$compile', '$routeParams', '$barkChart', '$rootScope', '$location',function($scope, $http, $config, $filter, $timeout, $compile, $routeParams, $barkChart, $rootScope,$location) {
-
-      var echarts = require('echarts');
-
-      pageInit();
-
-      function pageInit() {
-        resizeBigChart();
-        // $scope.bigChart = echarts.init($('#bigChartDiv').get(0), 'dark');
-        $rootScope.bigChart = echarts.init($('#bigChartDiv').get(0), 'dark');
-      }
-
-      function resizeBigChart() {
-        document.getElementById('bigChartDiv').style.width = window.innerWidth+'px';
-        document.getElementById('bigChartDiv').style.height = window.innerHeight+'px';
-      }
-
-      $scope.closeBigChart = function(){
-        console.log('close big chart!');
-        // $('#bigChartContainer').hide();
-        // history.back();
-        $location.path('/health');
-        // $('#mainWindow').show();
-      }
-
-      $scope.downloadSample = function() {
-        $rootScope.$broadcast('downloadSample', $scope.selectedModel);
-      }
-
-      $(window).resize(function() {
-        console.log('big chart resize');
-          resizeBigChart();
-          $rootScope.bigChart.resize();
-      });
-
-      // $rootScope.showBigChart = function(option) {
-      //   $scope.selectedModel = option.title.text;
-      //   $('#bigChartContainer').show();
-      //   // $('#mainWindow').hide();
-      //   $scope.bigChart.clear();
-      //   $scope.bigChart.setOption(option);
-      // }
-         if($rootScope.showBigChart==undefined){
-              $rootScope.showBigChart = function(option) {
-              $scope.selectedModel = option.title.text;
-              $('#bigChartContainer').show();
-              // $('#mainWindow').hide();
-              $rootScope.bigChart.clear();
-              $rootScope.bigChart.setOption(option);
-            }
-          }
-
-    }]);
-});
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/js/controllers/createdataasset-ctrl.js
----------------------------------------------------------------------
diff --git a/ui/js/controllers/createdataasset-ctrl.js b/ui/js/controllers/createdataasset-ctrl.js
deleted file mode 100644
index 6b0deb5..0000000
--- a/ui/js/controllers/createdataasset-ctrl.js
+++ /dev/null
@@ -1,185 +0,0 @@
-/*
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-*/
-
-define(['./module'], function (controllers) {
-    'use strict';
-    controllers.controller('CreateDataAssetCtrl', ['$scope', '$http', '$config', '$location', 'toaster', '$timeout', '$route', '$filter', function ($scope, $http, $config, $location, toaster, $timeout, $route, $filter) {
-        $scope.currentStep = 1;
-
-        // $scope.platformOptions = ['Teradata', 'Apollo'];
-        // $scope.systemOptions = ['Sojourner', 'SiteSpeed', 'Bullseye', 'PDS', 'GPS'];
-        //$scope.assetTypeOptions = ['hdfsfile', 'hivetable'];
-        $scope.assetTypeOptions = ['hivetable'];
-
-        $scope.formatTypeOptions = ['yyyyMMdd', 'yyyy-MM-dd','HH'];
-
-        $scope.regex = '^\\/(?:[0-9a-zA-Z\\_\\-\\.]+\\/?)+';
-
-        // $scope.regex = new RegExp('^\\/(?:[0-9a-zA-Z\\_\\-\\.]+\\/?)+');
-
-        var allModels = $config.uri.dbtree;
-        $http.get(allModels).then(function successCallback(data) {
-            $scope.platformOptions = data.data;
-        });
-
-        //$scope.platformOptions = [{"id":null,"platform":"Teradata","systems":[{"id":null,"name":"gdw_tables","assets":[{"id":108,"name":"dw_bid"},{"id":109,"name":"dw_trans"}]}]},{"id":null,"platform":"Apollo","systems":[{"id":null,"name":"Sojourner","assets":[{"id":22,"name":"ubi_event"}]},{"id":null,"name":"SiteSpeed","assets":[{"id":21,"name":"sitespeed"}]},{"id":null,"name":"PDS","assets":[{"id":20,"name":"last_categories_accessed"}]},{"id":null,"name":"Bullseye","assets":[{"id":1,"name":"be_view_event_queue"},{"id":2,"name":"be_search_event_queue"},{"id":3,"name":"be_item_watch_event_queue"},{"id":4,"name":"be_bid_event_queue"},{"id":5,"name":"be_transaction_event_queue"},{"id":6,"name":"dmg"},{"id":7,"name":"loyaltysgmnt"},{"id":8,"name":"cust_dna_cat_score"},{"id":9,"name":"badge_interest"},{"id":10,"name":"cust_dna_vq_feed"},{"id":11,"name":"user_dna"},{"id":12,"name":"adchoice_user_pref"},{"id":13,"name":"cust_dna_vq_cat_feed"},{"id":14,"name":"cpcp_dealsv17"},{"id":15,"n
 ame":"bbe_tbl_trx"},{"id":17,"name":"bbe_tbl_neg"},{"id":16,"name":"bbe_tbl_neu"},{"id":19,"name":"rtm_segment_dict"},{"id":18,"name":"bbe_tbl_pos"}]}]}];
-        $scope.systemOptions = $filter('strarr')('modelsystem');//['Bullseye', 'GPS', 'Hadoop', 'PDS', 'IDLS', 'Pulsar', 'Kafka'];
-
-        // $scope.getSystemOptions = function(platformIndex){
-        //     if(platformIndex==undefined){
-        //         $scope.systemOptions = [];
-        //     }else{
-        //         $scope.systemOptions = $scope.platformOptions[platformIndex].systems;
-        //     }
-        // };
-
-        $scope.updateHdfsPath = function(typeIndex){
-            if(typeIndex != 0 ){
-                $scope.form.basic.path = '';
-            }
-        };
-
-	    $scope.addSchema = function() {
-	        $scope.form.basic.schema.push({
-	            name: '',
-	            type: 'string',
-	            desc: '',
-	            sample: ''
-	        });
-	    };
-
-      $scope.addPatitionColumn = function() {
-	        $scope.form.basic.partitions.push({
-	            name: '',
-	            format: "yyyyMMdd"
-	        });
-	    };
-
-	    $scope.deleteSchema = function(index) {
-	        $scope.form.basic.schema.splice(index, 1);
-	    };
-
-      $scope.deletePartition = function(index) {
-	        $scope.form.basic.partitions.splice(index, 1);
-	    };
-
-        $scope.$on('$viewContentLoaded', function() {
-            $scope.$emit('initReq');
-            resizeWindow();
-        });
-
-        $scope.$on('resizeHandler', function(e) {
-            if ($route.current.$$route.controller == "CreateDataAssetCtrl") {
-                resizeWindow();
-            }
-        });
-
-        function resizeWindow() {
-                    $('.formStep').height(window.innerHeight  -  $('.formStep').offset().top - $('#footerwrap').outerHeight()-20);
-                    $('fieldset').height(window.innerHeight  -  $('fieldset').offset().top - $('#footerwrap').outerHeight()- $('.btn-container').height() -80);
-                    $('.y-scrollable').css({
-                        'max-height': $('fieldset').height()
-                    });
-
-        }
-
-	    // Initial Value
-        $scope.form = {
-            basic: {
-                platform: 'Apollo',
-                schema: [{
-                    name: '',
-                    type: 'string',
-                    desc: '',
-                    sample: ''
-                }],
-                partitions: []
-            },
-            submit: function(form) {
-                if (!form.$valid) {
-                    var field = null
-                      , firstError = null ;
-                    for (field in form) {
-                        if (field[0] != '$') {
-                            if (firstError === null  && !form[field].$valid) {
-                                firstError = form[field].$name;
-                            }
-
-                            if (form[field].$invalid) {
-                                form[field].$dirty = true;
-                            }
-                        }
-                    }
-                    angular.element('.ng-invalid[name=' + firstError + ']').focus();
-                    errorMessage($scope.currentStep);
-                } else {
-                    form.$setPristine();
-                    this.data={
-                      basic: this.basic
-                    };
-                    this.data.basic.path += this.data.basic.path.substring(this.data.basic.path.length-1)=="/"?'':'/';
-                    //this.data.basic.path += (this.basic.folderFormat==undefined?"":this.basic.folderFormat);
-
-
-
-                    $('#confirm-pu').modal('show');
-                }
-            },
-
-            save: function() {
-
-
-                var msg = {
-                	'system' : $scope.systemOptions[$scope.form.basic.system],
-                	'assetType' : $scope.assetTypeOptions[$scope.form.basic.type],
-                  'assetName' : $scope.form.basic.assetName,
-                	'assetHDFSPath' : $scope.form.data.basic.path + ($scope.form.data.basic.folderFormat==undefined?"":$scope.form.data.basic.folderFormat),
-                	'platform' : $scope.form.basic.platform,
-                	'schema' : $scope.form.basic.schema,
-                  'partitions' : $scope.form.basic.partitions,
-                  'owner' : $scope.form.basic.owner
-                }
-
-                $http.post($config.uri.adddataasset, msg).then(function successCallback() {
-                    $('#confirm-pu').on('hidden.bs.modal', function(e) {
-                        $('#confirm-pu').off('hidden.bs.modal');
-                        $location.path('/dataassets');
-                        $scope.$apply();
-                    });
-
-	                  $('#confirm-pu').modal('hide');
-
-                 },function errorCallback(response) {
-                    toaster.pop('error', 'Error when creating dataasset', response.message);
-                });
-            },
-
-        };
-
-        var errorMessage = function(i, msg) {
-            var errorMsgs = ['Please input valid values'];
-            if (!msg) {
-                toaster.pop('error', 'Error', errorMsgs[i - 1], 0);
-            } else {
-                toaster.pop('error', 'Error', msg, 0);
-            }
-        };
-
-    }]);
-});

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/js/controllers/createjob-ac-ctrl.js
----------------------------------------------------------------------
diff --git a/ui/js/controllers/createjob-ac-ctrl.js b/ui/js/controllers/createjob-ac-ctrl.js
deleted file mode 100644
index 1d0e688..0000000
--- a/ui/js/controllers/createjob-ac-ctrl.js
+++ /dev/null
@@ -1,210 +0,0 @@
-/*
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-*/
-
-
-define(['./module'], function(controllers) {
-    'use strict';
-    controllers.controller('CreateJobACCtrl', ['$scope', '$http', '$config', '$location', 'toaster', '$timeout', '$route', '$filter', '$barkChart',function($scope, $http, $config, $location, toaster, $timeout, $route, $filter,$barkChart) {
-        console.log('Create job controller');
-        $scope.currentStep = 1;
-        var echarts = require('echarts');
-        $( "#datepicker" ).datepicker();
-
-        $scope.Times = ['seconds','minutes','hours'];
-        $scope.timeType = 'seconds';
-        $scope.isOpen = false;
-        $scope.maskOpen = false;
-
-        $scope.hourDetail = '00';
-        $scope.minuteDetail = '00';
-        $scope.secondDetail = '00';
-        $scope.timeDetail = '00:00:00';
-
-        $scope.changeTime = function(min,max,increase,time,type){
-            time = parseInt(time);
-            if(increase){
-                if(time==max)
-                    time = min;
-                else time = time + 1;
-            }
-            else{
-                if(time==min)
-                    time = max;
-                else time = time - 1;
-            }
-            if(time < 10)
-                time = '0' + time;
-
-            if(type==1)
-                $scope.hourDetail = time;
-            else if(type==2)
-                $scope.minuteDetail = time;
-            else
-                $scope.secondDetail = time;
-            $scope.timeDetail = $scope.hourDetail+':'+$scope.minuteDetail+':'+$scope.secondDetail;
-
-        }
-
-        $scope.showTime = function(){
-            $scope.isOpen = !$scope.isOpen;
-            $scope.maskOpen = !$scope.maskOpen;
-        }
-
-        $scope.close = function(){
-            $scope.isOpen = false;
-            $scope.maskOpen = false;
-        }
-
-        $scope.Measures = [];
-        $scope.$on('$viewContentLoaded', function() {
-            $scope.$emit('initReq');
-            resizeWindow();
-        });
-        var getMeasureUrl = $config.uri.getMeasuresByOwner+$scope.ntAccount;
-        $http.get(getMeasureUrl).then(function successCallback(res){
-            angular.forEach(res.data,function(measure){
-                $scope.Measures.push(measure);
-            })
-            $scope.measure = 0;
-        })
-
-        $scope.$on('resizeHandler', function(e) {
-            if ($route.current.$$route.controller == "CreateRuleACCtrl") {
-                $scope.$emit('initReq');
-                resizeWindow();
-            }
-        });
-
-        function resizeWindow() {
-            var stepSelection = '.formStep';
-            $(stepSelection).css({
-                height: window.innerHeight - $(stepSelection).offset().top - $('#footerwrap').outerHeight()
-            });
-            $('fieldset').height($(stepSelection).height() - $(stepSelection + '>.stepDesc').height() - $('.btn-container').height() - 80);
-            $('.y-scrollable').css({
-                'max-height': $('fieldset').height()- $('.add-dataset').outerHeight()
-            });
-            $('#data-asset-pie').css({
-                height: $('#data-asset-pie').parent().width(),
-                width: $('#data-asset-pie').parent().width()
-            });
-        }
-
-        // Initial Value
-        $scope.form = {
-            prev:function(form){
-                history.back();
-            },
-            submit: function(form) {
-                if (!form.$valid) {
-                    var field = null
-                      , firstError = null ;
-                    for (field in form) {
-                        if (field[0] != '$') {
-                            if (firstError === null  && !form[field].$valid) {
-                                firstError = form[field].$name;
-                            }
-
-                            if (form[field].$invalid) {
-                                form[field].$dirty = true;
-                            }
-                        }
-                    }
-                    angular.element('.ng-invalid[name=' + firstError + ']').focus();
-                    errorMessage($scope.currentStep);
-                } else {
-                    //  $location.path('/rules');
-                    form.$setPristine();
-                    var period;
-                    if($scope.timeType=='minutes')
-                        period = $scope.periodTime *60;
-                    else if($scope.timeType=='hours')
-                        period = $scope.periodTime * 3600;
-                    else period = $scope.periodTime;
-                    var rule = '';
-                    var startTime = $scope.jobStartTime;
-                    console.log(startTime);
-                    var year = $scope.jobStartTime.split('/')[2];
-                    var month = $scope.jobStartTime.split('/')[0];
-                    var day = $scope.jobStartTime.split('/')[1];
-                    startTime = year +'-'+ month + '-'+ day + ' '+ $scope.timeDetail;
-                    console.log(startTime);
-                    startTime = Date.parse(startTime);
-                    if(isNaN(startTime)){
-                        toaster.pop('error','Please input the right format of start time');
-                        return;
-                    }
-                    this.data={
-                        "sourcePattern":$scope.sourcePat,
-                        "targetPattern":$scope.targetPat,
-                        "jobStartTime":startTime,
-                        "interval":period,
-                        "groupName":'BA',
-                    };
-                    $('#confirm-job').modal('show');
-                }
-            },
-
-            save: function() {
-                //::TODO: Need to save the data to backend with POST/PUT method
-                var date = new Date();
-                var month = date.getMonth()+1;
-                var timestamp = Date.parse(date);
-                var jobName = $scope.Measures[$scope.measure].name + '-BA-' + $scope.ntAccount + '-' + timestamp;
-
-                var newJob = $config.uri.addJobs + '?group=' + this.data.groupName + '&jobName=' + jobName + '&measureId=' + $scope.Measures[$scope.measure].id;
-                console.log(newJob);
-                console.log(this.data);
-                $http.post(newJob, this.data).then(function successCallback(data) {
-	                $('#confirm-job').on('hidden.bs.modal', function(e) {
-	                    $('#confirm-job').off('hidden.bs.modal');
-	                    $location.path('/jobs').replace();
-	                    $scope.$apply();
-	                });
-	                $('#confirm-job').modal('hide');
-                    var health_url = $config.uri.statistics;
-                    $scope.status = new Object();
-                    $http.get(health_url).then(function successCallback(response){
-                        response = response.data;
-                        $scope.status.health = response.healthyJobCount;
-                        $scope.status.invalid = response.jobCount - response.healthyJobCount;
-                        $('#data-asset-pie').css({
-                            height: $('#data-asset-pie').parent().width(),
-                            width: $('#data-asset-pie').parent().width()
-                        });
-                        $scope.dataAssetPieChart = echarts.init($('#data-asset-pie')[0], 'dark');
-                        $scope.dataAssetPieChart.setOption($barkChart.getOptionPie($scope.status));
-                    });
-                },function errorCallback(response) {
-                    toaster.pop('error', 'Error when creating job', response.message);
-                });
-            },
-        }
-
-        var errorMessage = function(i, msg) {
-            var errorMsgs = ['Please complete the form!', 'please complete the form in this step before proceeding'];
-            if (!msg) {
-                toaster.pop('error', 'Error', errorMsgs[i - 1], 0);
-            } else {
-                toaster.pop('error', 'Error', msg, 0);
-            }
-        };
-    }
-    ]);
-});

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/js/controllers/createjob0.js
----------------------------------------------------------------------
diff --git a/ui/js/controllers/createjob0.js b/ui/js/controllers/createjob0.js
deleted file mode 100644
index eb096eb..0000000
--- a/ui/js/controllers/createjob0.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/*
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-*/
-
-
-define(['./module'], function (controllers) {
-    'use strict';
-    controllers.controller('CreateJob0Ctrl', ['$scope', '$http', '$config', '$location', 'toaster', '$timeout', '$route',  function ($scope, $http, $config, $location, toaster, $timeout, $route) {
-      console.log('Create job 0 controller');
-      $scope.publishURL = document.location.origin;
-
-      $scope.click = function(type){
-        $location.path('/createjob-' + type);
-      }
-      $scope.$on('$viewContentLoaded', function(){
-        $scope.$emit('initReq');
-        resizeWindow();
-      });
-
-      $scope.$on('resizeHandler', function(e) {
-        if($route.current.$$route.controller == 'CreateJob0Ctrl'){
-            console.log('createjob0 resize');
-            resizeWindow();
-        }
-      });
-
-      function resizeWindow(){
-        $('#panel-2 >.panel-body').css({height: $('#panel-1 >.panel-body').outerHeight() + $('#panel-1 >.panel-footer').outerHeight() - $('#panel-2 >.panel-footer').outerHeight()});
-        $('#panel-4 >.panel-body').css({height: $('#panel-3 >.panel-body').outerHeight() + $('#panel-3 >.panel-footer').outerHeight() - $('#panel-4 >.panel-footer').outerHeight()});
-      }
-    }]);
-});


[03/13] incubator-griffin git commit: refactor ui with angular2

Posted by gu...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/pages/measures/createrule-pu.html
----------------------------------------------------------------------
diff --git a/ui/pages/measures/createrule-pu.html b/ui/pages/measures/createrule-pu.html
deleted file mode 100644
index bcc5bf4..0000000
--- a/ui/pages/measures/createrule-pu.html
+++ /dev/null
@@ -1,238 +0,0 @@
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
--->
-<div class="container-fluid">
-  <div class="row">
-    <h5 class="over-title margin-bottom-15">Create DQ Model</h5>
-  </div><!--//row-->
-  <div class="row">
-    <form name="Form" id="form" novalidate>
-      <div id="wizard" class="swMain" >
-        <ul>
-						<li>
-							<a href="" class="onlyone selected" >
-								<div class="stepNumber">
-									1
-								</div>
-								<span class="stepDesc text-small"> Configuration </span>
-							</a>
-        </ul>
-
-        <div id="step-1" ng-show="currentStep == 1" class="formStep" >
-          <label class="stepDesc">Please setup the model required information</label>
-          <div class="container-fluid">
-
-            <!-- schema definition list -->
-            <div class="col-md-12 col-lg-12 col-sm-12">
-              <fieldset>
-                <legend>
-                  Required Information
-                </legend>
-                <div class="y-scrollable">
-                  <div class="col-md-12 col-lg-12 col-sm-12">
-                    <div class="form-group" ng-class="{'has-error':Form.ruleName.$dirty&&Form.ruleName.$invalid, 'has-success':Form.ruleName.$valid}">
-                      <label class="col-md-2 col-lg-2 col-sm-2 control-label">
-                        Model Name<span class="symbol required"></span>:
-                      </label>
-
-                      <div class="col-md-10 col-lg-10 col-sm-10 ">
-                        <input type="text" class="form-control" ng-model="form.basic.name" name="ruleName" placeholder="Please input the measure name" required ng-pattern="'([0-9a-zA-Z\\_\\-])+'">
-                        <span class="error text-small block " ng-if="Form.ruleName.$dirty && Form.ruleName.$error.required">Model Name is required</span>
-                        <span class="error text-small block " ng-if="Form.ruleName.$dirty && Form.ruleName.$error.pattern">Only letter, number, "-" and "_" are allowed</span>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="col-md-12 col-lg-12 col-sm-12">
-                    <div class="form-group">
-                      <label class="col-md-2 col-lg-2 col-sm-2 control-label">
-                        Model Definition:
-                      </label>
-
-                      <div class="col-md-10 col-lg-10 col-sm-10 ">
-                        <input type="text" class="form-control" ng-model="form.basic.desc" placeholder="Please input detail description of your model">
-                      </div>
-                    </div>
-                  </div>
-                  <div class="col-md-12 col-lg-12 col-sm-12">
-                    <div class="form-group">
-                      <label for="typeSelector" class="col-md-2 col-lg-2 col-sm-2 control-label">
-                        Model Type:
-                      </label>
-
-                      <div class="col-md-10 col-lg-10 col-sm-10 ">
-                        <select id="typeSelector" class="form-control" ng-model="form.basic.type" ng-init="form.basic.type='3'" disabled required>
-                          <option ng-repeat="row in ruleTypes" value="{{$index}}" >{{row}}</option>
-                        </select>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="col-md-12 col-lg-12 col-sm-12">
-                    <div class="form-group">
-                      <label for="systemSelector" class="col-md-2 col-lg-2 col-sm-2 control-label">
-                        Organization<span class="symbol required"></span>:
-                      </label>
-
-                      <div class="col-md-10 col-lg-10 col-sm-10 ">
-                        <select id="systemSelector" class="form-control" ng-model="form.basic.system" ng-init="form.basic.system='-1'" ng-change="sysChange()" required>
-                          <option value="-1">Please select...</option>
-                          <option ng-repeat="row in ruleSystems" value="{{$index}}" >{{row}}</option>
-                        </select>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="col-md-12 col-lg-12 col-sm-12">
-                    <div class="form-group">
-                      <label class="col-md-2 col-lg-2 col-sm-2 control-label">
-                        DataAsset:
-                      </label>
-
-                      <div class="col-md-10 col-lg-10 col-sm-10">
-                        <!-- <input type="text" class="form-control" ng-model="form.basic.dataaset"> -->
-                        <select id="assetSelector" class="form-control" ng-model="form.basic.dataaset">
-                          <option value="">Please select...(optional)</option>
-                          <option ng-repeat="row in assets" value="{{row.name}}" >{{row.name}}</option>
-                        </select>
-                     </div>
-
-                    </div>
-                  </div>
-                  <div class="col-md-12 col-lg-12 col-sm-12">
-                    <div class="form-group" ng-class="{'has-error':Form.threshold.$invalid}">
-                      <label class="col-md-2 col-lg-2 col-sm-2 control-label">
-                        Threshold:
-                      </label>
-
-                      <div class="col-md-10 col-lg-10 col-sm-10">
-                          <input type="number" class="form-control" ng-model="form.basic.threshold" name="threshold">
-                          <span class="error text-small block" ng-if="Form.threshold.$error.number">Only number is allowed</span>
-                      </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">
-                        Schedule Type:
-                      </label>
-
-                      <div class="col-md-10 col-lg-10 col-sm-10 ">
-                        <select class="form-control" ng-init="form.basic.scheduleType='1'" ng-model="form.basic.scheduleType" ng-init="form.basic.scheduleType='0'">
-                          <option ng-repeat="row in scheduleTypes" value="{{$index}}" >{{row}}</option>
-                        </select>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="col-md-12 col-lg-12 col-sm-12">
-                    <div class="form-group" ng-class="{'has-error':Form.email.$dirty&&Form.email.$invalid, 'has-success':Form.email.$valid}">
-                      <label class="col-md-2 col-lg-2 col-sm-2 control-label">
-                        Notification email<span class="symbol required"></span>:
-                      </label>
-
-                      <div class="col-md-10 col-lg-10 col-sm-10">
-                        <input type="email"  class="form-control" ng-model="form.basic.email" name="email" ng-required="currentStep==1" placeholder="Please input valid email address" ng-pattern="'^[_A-Za-z0-9-\\+]+(\\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\\.[A-Za-z0-9]+)*(\\.[A-Za-z]{2,})$'">
-                        <span class="error text-small block" ng-if="Form.email.$dirty&&Form.email.$invalid">Please, enter a valid email address.</span>
-                      </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">
-                        Owner:
-                      </label>
-
-                      <div class="col-md-10 col-lg-10 col-sm-10">
-                        <input type="text"  class="form-control" ng-model="form.basic.owner" ng-init="form.basic.owner=ntAccount" disabled>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="col-md-12 col-lg-12 col-sm-12">
-                    <div class="form-group " >
-                      <label class="col-md-2 col-lg-2 col-sm-2 control-label">
-                        Publish URL:
-                      </label>
-
-                      <div class="col-md-10 col-lg-10 col-sm-10 has-error">
-                        <input type="text"  class="form-control" ng-model="form.publishUrl" ng-init="form.publishUrl='https://bark.vip.ebay.com/api/v1/metrics/&lt;name&gt;'" disabled>
-                        <span class="error text-small block" >Please remember this URL which is used to publish your metrics</span>
-                      </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">
-                        Publish data format:
-                      </label>
-
-                      <div class="col-md-10 col-lg-10 col-sm-10 ">
-                        <pre style="background-color:transparent;color:inherit;border:none">Method: POST
-  Endpoint: {{form.publishUrl}}
-  Body:
-  {
-    "metricName": "{{form.basic.name}}",
-    "timestamp": 1463373496583,
-    "value": 99.9
-  }</pre>
-
-                      </div>
-                    </div>
-                  </div>
-
-
-                </div>
-
-                <div class="createrule-hint">
-                  <p>
-                    <i class="fa fa-info-circle"></i> After submitted, please go to "<a class="bark-link" href='#/measures
-
-'>Models</a>" to check the model status
-                  </p>
-                </div>
-
-
-              </fieldset>
-
-            </div>
-
-            <div class="form-group btn-container" >
-              <button class="btn btn-primary btn-o next-step btn-wide pull-right" ng-click="form.submit(Form)">
-                  Submit
-              </button>
-            </div>
-          </div>
-        </div>
-
-        <div class="modal fade" id="confirm-pu" role="dialog">
-          <div class="modal-dialog modal-xg modal-lg">
-            <div class="modal-content">
-              <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-                <h4 class="modal-title">Save the model with the below information?</h4>
-              </div>
-              <div class="modal-body">
-                <ng-include src="'/pages/measures/confirmation-pu.html'"/>
-              </div>
-              <div class="modal-footer">
-                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
-                <button type="button" class="btn btn-primary" ng-click="form.save()">Save</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </form>
-  </div><!--//row-->
-</div>

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/pages/measures/createrule-va.html
----------------------------------------------------------------------
diff --git a/ui/pages/measures/createrule-va.html b/ui/pages/measures/createrule-va.html
deleted file mode 100644
index caed0c2..0000000
--- a/ui/pages/measures/createrule-va.html
+++ /dev/null
@@ -1,407 +0,0 @@
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
--->
-<div class="container-fluid">
-  <div class="row">
-    <h5 class="over-title margin-bottom-15">Create DQ Model</h5>
-  </div><!--//row-->
-  <div class="row">
-    <form name="Form" id="form" novalidate>
-      <div id="wizard" class="swMain" >
-        <ul>
-						<li ng-click="form.goTo(Form, 1)">
-							<a href="" ng-class="{'selected' : currentStep >= 1, 'done' : currentStep > 1}" class="selected" style="">
-								<div class="stepNumber">
-									1
-								</div>
-								<span class="stepDesc text-small"> Choose Target </span>
-							</a>
-						</li>
-						<li ng-click="form.goTo(Form, 2)">
-							<a href="" ng-class="{'selected' : currentStep >= 2, 'done' : currentStep > 2}" class="" style="">
-								<div class="stepNumber">
-									2
-								</div>
-								<span class="stepDesc text-small"> Select Models </span>
-							</a>
-						</li>
-						<li ng-click="form.goTo(Form, 3)">
-							<a href="" ng-class="{'selected' : currentStep >= 3, 'done' : currentStep > 3}" class="" style="">
-								<div class="stepNumber">
-									3
-								</div>
-								<span class="stepDesc text-small"> Configuration </span>
-							</a>
-						</li>
-
-					</ul>
-
-        <div id="step-1" ng-show="currentStep == 1" class="formStep" >
-          <label class="stepDesc">This step let you choose the target for data quality comparision with target, Apollo datasets are enabled, other platofrms are coming soon. Currently you can only select the attributes from one schema</label>
-					<div class="container-fluid">
-            <!-- select db tree -->
-						<div class="col-md-4 col-lg-4 col-sm-4">
-							<fieldset>
-							  <legend>Please select schema</legend>
-                <div class="add-dataset" style="color:#b2c831">
-                    <a class="bark-link" href="#/createdataasset">Cannot find your DataAsset? Click here to add</a>
-                </div>
-                <div angular-treeview="true"
-                      tree-model="dbList"
-                      node-id="id"
-                      node-label="name"
-                      node-children="children"
-                      l1-icon="fa fa-database"
-                      l2-icon="fa fa-table"
-                      l3-icon="fa fa-file-text-o"
-                      class="y-scrollable">
-                </div>
-
-              </fieldset>
-						</div>
-
-            <!-- schema definition list -->
-						<div class="col-md-8 col-lg-8 col-sm-8">
-							<fieldset>
-								<legend>
-									Select one attribute
-								</legend>
-
-								<div class="y-scrollable">
-                  <div>
-                   <label>View schema:</label> <i ng-show="currentNode.parent" style="color:#fff;font-weight: bold;">{{currentNode.parent.name}}.{{currentNode.name}}</i>
-                  </div>
-                  <div>
-                   <label>Selected Column:</label> <i style="color:#fff;font-weight: bold;">{{form.selection}}</i>
-                  </div>
-                 <div>
-                   <table st-table="schemaCollection" class="table table-striped">
-                   	<thead>
-                     	<tr style="background-color:#7D95CC">
-                        <th></th>
-                     		<th>Column Name</th>
-                     		<th>Description</th>
-                     		<th>Data Type</th>
-                     		<th>Sample Data</th>
-
-                     	</tr>
-                   	</thead>
-                   	<tbody>
-                       <tr ng-if="!schemaCollection || schemaCollection.length == 0">
-                         <td colspan="5" style="text-align:center" ><span class="highlight">Please select a schema from the left tree first</span></td>
-                       </tr>
-                     	<tr ng-repeat="row in schemaCollection">
-                        <td><input type="radio"
-                              name="selAttr"
-                              value="{{row.name}}"
-                              ng-model="form.selection"
-                            />
-                        </td>
-                        <td>{{row.name}}</td>
-                     		<td>{{row.desc}}</td>
-                        <td>{{row.type}}</td>
-                        <td class="highlight">{{row.sample}}</td>
-                     	</tr>
-                   	</tbody>
-                   </table>
-                 </div>
-                </div>
-              </fieldset>
-            </div>
-
-            <div class="form-group btn-container">
-							<button class="btn btn-primary btn-o next-step btn-wide pull-right" ng-click="form.next(Form)">
-								Next <i class="fa fa-arrow-circle-right"></i>
-							</button>
-						</div>
-
-          </div>
-
-      </div>
-
-
-
-
-      <div id="step-2" ng-show="currentStep == 2" class="formStep" >
-        <label class="stepDesc">Please choose one of the validity models provided below:</label>
-        <div class="container-fluid">
-          <div class="col-md-12 col-lg-12 col-sm-12">
-            <fieldset>
-              <div class="y-scrollable">
-                <div class="container col-md-12 col-lg-12 col-sm-12">
-                  <div class="row">
-                    <div class="col-md-3 col-lg-3 col-sm-3">
-                      <h5>Simple Statistics</h5>
-                      <div class="container-fluid">
-                        <div class="col-md-12 col-lg-12 col-sm-12">
-                          <input name="vaType" type="radio" ng-model="form.vaType" value="2" ng-init="form.vaType=2" /> <label>Null Count</label>
-                        </div>
-                      </div>
-                      <div class="container-fluid">
-                        <div class="col-md-12 col-lg-12 col-sm-12">
-                          <input name="vaType" type="radio" ng-model="form.vaType"   value="3"/> <label>Unique Count</label>
-                        </div>
-                      </div>
-                      <div class="container-fluid">
-                        <div class="col-md-12 col-lg-12 col-sm-12">
-                          <input name="vaType" type="radio" ng-model="form.vaType" value="4"/> <label>Duplicate Count</label>
-                        </div>
-                      </div>
-                      <h5>Summary Statistics</h5>
-                      <div class="container-fluid">
-                        <div class="col-md-12 col-lg-12 col-sm-12">
-                          <input name="vaType" type="radio" ng-model="form.vaType"  value="5"/> <label>Maximum</label>
-                        </div>
-                      </div>
-                      <div class="container-fluid">
-                        <div class="col-md-12 col-lg-12 col-sm-12">
-                          <input name="vaType" type="radio" ng-model="form.vaType" value="6"/> <label>Minimum</label>
-                        </div>
-                      </div>
-                      <div class="container-fluid">
-                        <div class="col-md-12 col-lg-12 col-sm-12">
-                          <input name="vaType" type="radio" ng-model="form.vaType" value="7"/> <label>Mean</label>
-                        </div>
-                      </div>
-                      <div class="container-fluid">
-                        <div class="col-md-12 col-lg-12 col-sm-12">
-                          <input name="vaType" type="radio" ng-model="form.vaType" value="8"/> <label>Median</label>
-                        </div>
-                      </div>
-                      <h5>Advanced Statistics</h5>
-                      <div class="container-fluid">
-                        <div class="col-md-12 col-lg-12 col-sm-12">
-                          <input name="vaType" type="radio" ng-model="form.vaType" value="9" disabled/> <label>Regular Expression Match</label>
-                        </div>
-                      </div>
-                    </div>
-                    <div class="col-md-9 col-lg-9 col-sm-9" ng-include="'/pages/measures/va-explaination.html'">
-                      <!-- <ng-include src="'/models.html'"/> -->
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </fieldset>
-          </div>
-
-          <div class="form-group btn-container" >
-            <button class="btn btn-primary btn-o back-step btn-wide pull-left" ng-click="form.prev(Form)">
-                <i class="fa fa-arrow-circle-left"></i> Back
-            </button>
-            <button class="btn btn-primary btn-o next-step btn-wide pull-right" ng-click="form.next(Form)">
-                Next <i class="fa fa-arrow-circle-right"></i>
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <div id="step-3" ng-show="currentStep == 3" class="formStep" >
-        <label class="stepDesc">Please setup the model required information</label>
-        <div class="container-fluid">
-
-          <!-- schema definition list -->
-          <div class="col-md-12 col-lg-12 col-sm-12">
-            <fieldset>
-              <legend>
-                Required Information
-              </legend>
-              <div class="y-scrollable">
-                <div class="col-md-12 col-lg-12 col-sm-12">
-                  <div class="form-group" ng-class="{'has-error':Form.ruleName.$dirty&&Form.ruleName.$invalid, 'has-success':Form.ruleName.$valid}">
-                    <label class="col-md-2 col-lg-2 col-sm-2 control-label">
-                      Model Name<span class="symbol required"></span>:
-                    </label>
-
-                    <div class="col-md-10 col-lg-10 col-sm-10 ">
-                      <input type="text" class="form-control" ng-model="form.basic.name" name="ruleName" placeholder="Please input the measure name" required ng-pattern="'([0-9a-zA-Z\\_\\-])+'">
-                      <span class="error text-small block " ng-if="Form.ruleName.$dirty && Form.ruleName.$error.required">Model Name is required</span>
-                      <span class="error text-small block " ng-if="Form.ruleName.$dirty && Form.ruleName.$error.pattern">Only letter, number, "-" and "_" are allowed</span>
-                    </div>
-
-                  </div>
-                </div>
-                <div class="col-md-12 col-lg-12 col-sm-12">
-                  <div class="form-group">
-                    <label class="col-md-2 col-lg-2 col-sm-2 control-label">
-                      Model Definition:
-                    </label>
-
-                    <div class="col-md-10 col-lg-10 col-sm-10 ">
-                      <input type="text" class="form-control" ng-model="form.basic.desc" placeholder="Please input detail description of your model">
-                    </div>
-                  </div>
-                </div>
-                <div class="col-md-12 col-lg-12 col-sm-12">
-                  <div class="form-group">
-                    <label for="typeSelector" class="col-md-2 col-lg-2 col-sm-2 control-label">
-                      Model Type:
-                    </label>
-
-                    <div class="col-md-10 col-lg-10 col-sm-10 ">
-                      <select id="typeSelector" class="form-control" ng-model="form.basic.type" ng-init="form.basic.type='1'" disabled required>
-                        <option ng-repeat="row in ruleTypes" value="{{$index}}" >{{row}}</option>
-                      </select>
-                    </div>
-                  </div>
-                </div>
-                <div class="col-md-12 col-lg-12 col-sm-12">
-                  <div class="form-group">
-                    <label for="systemSelector" class="col-md-2 col-lg-2 col-sm-2 control-label">
-                      Organization:
-                    </label>
-
-                    <div class="col-md-10 col-lg-10 col-sm-10 ">
-                      <select id="systemSelector" class="form-control" ng-model="form.basic.system" required disabled>
-                        <option ng-repeat="row in ruleSystems" value="{{$index}}" >{{row}}</option>
-                      </select>
-                    </div>
-                  </div>
-                </div>
-                <div class="col-md-12 col-lg-12 col-sm-12">
-                  <div class="form-group">
-                    <label class="col-md-2 col-lg-2 col-sm-2 control-label">
-                      DataAsset:
-                    </label>
-
-                    <div class="col-md-10 col-lg-10 col-sm-10">
-                      <input type="text" class="form-control" ng-model="currentNode.name" disabled>
-                    </div>
-                  </div>
-                </div>
-                <div ng-show="form.vaType==9" class="col-md-12 col-lg-12 col-sm-12" ng-class="{'has-error':Form.regex.$dirty && Form.regex.$invalid, 'has-success':Form.regex.$valid}">
-                  <div class="form-group">
-                    <label class="col-md-2 col-lg-2 col-sm-2 control-label">
-                      Regular Expression<span class="symbol required"></span>:
-                    </label>
-
-                    <div class="col-md-10 col-lg-10 col-sm-10">
-                      <div class="row">
-                        <div class="col-md-10 col-lg-10 col-sm-10">
-                          <input type="text"  class="form-control" ng-model="form.basic.regex" name="regex" placeholder="Some expression like ^[A-Za-z]+$" ng-required="form.vaType==9" ng-change="form.testRegex(Form)">
-                          <span class="error text-small block" ng-if="Form.regex.$dirty && Form.regex.$invalid">Please input valid regular expression.</span>
-                        </div>
-                        <div class="col-md-2 col-lg-2 col-sm-2">
-                          <button type="button" class="btn btn-primary btn-o next-step" style="width:100%;" ng-click="needTestRegex=!needTestRegex" ng-init="needTestRegex=false;"><i class="faChevron" ng-class="needTestRegex ?'fa fa-angle-down':'fa fa-angle-right'" style="width:10px"></i>&nbsp;Test Regex</button>
-                        </div>
-                      </div>
-                      <div class="row" ng-show="needTestRegex">
-                        <div class="col-md-10 col-lg-10 col-sm-10">
-                          <input type="text"  class="form-control" ng-model="form.basic.regexTestStr" name="regexTestStr" placeholder="Please input the test string here" ng-change="form.testRegex(Form)">
-                        </div>
-                        <div class="col-md-2 col-lg-2 col-sm-2" style="padding-top:8px;">
-                          <span class="test-result" ng-class="{'bg-success': regexTestResult=='Matched', 'bg-danger': regexTestResult=='Unmatched'}">{{regexTestResult}}</span>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div class="col-md-12 col-lg-12 col-sm-12">
-                  <div class="form-group" ng-class="{'has-error':Form.threshold.$invalid}">
-                    <label class="col-md-2 col-lg-2 col-sm-2 control-label">
-                      Threshold:
-                    </label>
-
-                    <div class="col-md-10 col-lg-10 col-sm-10">
-                        <input type="number" class="form-control" ng-model="form.basic.threshold" name="threshold">
-                        <span class="error text-small block" ng-if="Form.threshold.$error.number">Only number is allowed</span>
-                    </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">
-                      Schedule Type:
-                    </label>
-
-                    <div class="col-md-10 col-lg-10 col-sm-10 ">
-                      <select class="form-control" ng-init="form.basic.scheduleType='1'" ng-model="form.basic.scheduleType" ng-init="form.basic.scheduleType='0'">
-                        <option ng-repeat="row in scheduleTypes" value="{{$index}}" >{{row}}</option>
-                      </select>
-                    </div>
-                  </div>
-                </div>
-                <div class="col-md-12 col-lg-12 col-sm-12">
-                  <div class="form-group" ng-class="{'has-error':Form.email.$dirty&&Form.email.$invalid, 'has-success':Form.email.$valid}">
-                    <label class="col-md-2 col-lg-2 col-sm-2 control-label">
-                      Notification email<span class="symbol required"></span>:
-                    </label>
-
-                    <div class="col-md-10 col-lg-10 col-sm-10">
-                      <input type="email"  class="form-control" ng-model="form.basic.email" name="email" ng-required="currentStep==3" placeholder="Please input valid email address" ng-pattern="'^[_A-Za-z0-9-\\+]+(\\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\\.[A-Za-z0-9]+)*(\\.[A-Za-z]{2,})$'">
-                      <span class="error text-small block" ng-if="Form.email.$dirty&&Form.email.$invalid">Please, enter a valid email address.</span>
-                    </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">
-                      Owner:
-                    </label>
-
-                    <div class="col-md-10 col-lg-10 col-sm-10">
-                      <input type="text"  class="form-control" ng-model="form.basic.owner" ng-init="form.basic.owner=ntAccount" disabled>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <!-- <div style="color:#fff">
-                <label style="color:#b2c831">Tips: </label>After submitted, please go to "Rule Repository" to check the rule status
-              </div> -->
-
-              <div style="color:#b2c831">
-                <p>
-                  <i class="fa fa-info-circle"></i> After submitted, please go to "<a class="bark-link" href="#/measures">Models</a>" to check the model status
-                </p>
-              </div>
-
-            </fieldset>
-          </div>
-
-          <div class="form-group btn-container" >
-            <button class="btn btn-primary btn-o back-step btn-wide pull-left" ng-click="form.prev(Form)">
-                <i class="fa fa-arrow-circle-left"></i> Back
-            </button>
-            <button class="btn btn-primary btn-o next-step btn-wide pull-right" ng-click="form.submit(Form)">
-            <!-- <button class="btn btn-primary btn-o next-step btn-wide pull-right" data-toggle="modal" data-target="#confirm"> -->
-                Submit
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <div class="modal fade" id="confirm-va" role="dialog">
-        <div class="modal-dialog modal-xg modal-lg">
-          <div class="modal-content">
-            <div class="modal-header">
-              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-              <h4 class="modal-title">Save the model with the below information?</h4>
-            </div>
-            <div class="modal-body">
-              <ng-include src="'/pages/measures/confirmation-va.html'"/>
-            </div>
-            <div class="modal-footer">
-              <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
-              <button type="button" class="btn btn-primary" ng-click="form.save()">Save</button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </form>
-  </div><!--//row-->
-</div>

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/pages/measures/createrule0.html
----------------------------------------------------------------------
diff --git a/ui/pages/measures/createrule0.html b/ui/pages/measures/createrule0.html
deleted file mode 100644
index 4f520a7..0000000
--- a/ui/pages/measures/createrule0.html
+++ /dev/null
@@ -1,259 +0,0 @@
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
--->
-<div class="container-fluid" id="main" >
-  <div class="row">
-    <h5 class="over-title margin-bottom-15">Create DQ Model</h5>
-  </div><!--//row-->
-  <div class="row">
-
-    <div class="col-lg-6 col-md-6 col-sm-6 ruletypes">
-      <section id="panel-1" class="panel panel-red" style="cursor:pointer" ng-click="click('ac')">
-        <div class="panel-heading">
-          <span style="font-size:20px">Accuracy</span>
-          <span class="pull-right" style="font-size:20px">
-                <span class="fa fa-arrow-circle-right" ng-click="click()"></span>
-          </span>
-        </div>
-        <div class="swMain panel-body" >
-
-          <label class="label-definition">Definition: Measured by how the values agree with an identified source of truth</label>
-
-          <ul style="border-radius:0; background: none">
-            <li >
-              <a href="" class="selected" >
-                <div class="stepNumber">
-                  1
-                </div>
-                <span class="stepDesc text-small"> Choose Source </span>
-              </a>
-            </li>
-            <li>
-              <a href=""  >
-                <div class="stepNumber">
-                  2
-                </div>
-                <span class="stepDesc text-small"> Choose Target </span>
-              </a>
-            </li>
-            <li >
-              <a href=""  >
-                <div class="stepNumber">
-                  3
-                </div>
-                <span class="stepDesc text-small"> Mapping Source and Target </span>
-              </a>
-            </li>
-            <li>
-              <a href="" >
-                <div class="stepNumber">
-                  4
-                </div>
-                <span class="stepDesc text-small"> Configuration </span>
-              </a>
-            </li>
-
-          </ul>
-          <div>
-
-            <ol>
-              <li>Select the source dataset and fields which will be used for comparision</li>
-              <li>Select the target dataset and fields which will be used for comparision</li>
-              <li>Mapping the target fields with source</li>
-              <li>Set basic configuration for your model (name, system, threshold, etc.)</li>
-            </ol>
-          </div>
-
-
-        </div>
-        <div class="panel-footer stepDesc">
-          <label>Example:</label> suppose source table A has 1000 records and target table B only has 999 records pefectly matched with A for selected fields, then
-          Accuracy Rate(%) = 999/1000 * 100% = 99.9%
-        </div>
-      </section>
-    </div>
-    <div class="col-lg-6 col-md-6 col-sm-6 ruletypes" style="opacity:0.6">
-      <section id="panel-2"  class="panel panel-primary"  style="cursor:default;">
-        <!--ng-click="click('va')" -->
-        <div class="panel-heading">
-          <span style="font-size:20px">Data Profiling</span>
-          <span class="pull-right" style="font-size:20px">
-                  <span class="fa fa-arrow-circle-right"></span>
-            </span>
-        </div>
-        <div class="swMain panel-body" >
-
-          <label class="label-definition">Definition: Data profiling is the process of examining the data available in an existing data set and collecting statistics and information about that data</label>
-
-          <ul style="border-radius:0; background: none">
-            <li >
-              <a href="" class="done" style="cursor:default">
-                <div class="stepNumber">
-                  1
-                </div>
-                <span class="stepDesc text-small"> Choose Target </span>
-              </a>
-            </li>
-            <li>
-              <a href="" class="selected" style="cursor:default" >
-                <div class="stepNumber">
-                  2
-                </div>
-                <span class="stepDesc text-small">Define/Select Models </span>
-              </a>
-            </li>
-            <li >
-              <a href="" style="cursor:default" >
-                <div class="stepNumber">
-                  3
-                </div>
-                <span class="stepDesc text-small"> Configuration </span>
-              </a>
-            </li>
-
-
-          </ul>
-          <div>
-
-            <ol>
-              <li>Select the target dataset and fields which want to be checked</li>
-              <li>Define your syntax check logic which will be applied on the selected fields</li>
-              <li>Set basic configuration for your model(name, system, threshold, etc.)</li>
-            </ol>
-
-
-          </div>
-
-
-        </div>
-        <div class="panel-footer stepDesc">
-
-          <label>Example:</label> Check the data range(minimum, maximum) within a set of allowable values
-        </div>
-      </section>
-    </div>
-
-  </div><!--//row-->
-
-  <div class="row">
-    <div class="col-lg-6 col-md-6 col-sm-6 ruletypes" style="opacity:0.6;">
-      <section id="panel-3" class="panel panel-yellow"  style="cursor:default;">
-        <!--ng-click="click('an')"-->
-        <div class="panel-heading">
-          <span style="font-size:20px">Anomaly Detection</span>
-          <span class="pull-right" style="font-size:20px">
-                    <span class="fa fa-arrow-circle-right"></span>
-              </span>
-        </div>
-        <div class="swMain panel-body" >
-
-          <label class="label-definition">Definition: Identification of items, events or observations which do not conform to an expected pattern or other items in a dataset</label>
-
-          <ul style="border-radius:0; background: none">
-            <li >
-              <a href="" class="done" style="cursor:default">
-                <div class="stepNumber">
-                  1
-                </div>
-                <span class="stepDesc text-small"> Choose Target </span>
-              </a>
-            </li>
-            <li>
-              <a href="" class="selected" style="cursor:default" >
-                <div class="stepNumber">
-                  2
-                </div>
-                <span class="stepDesc text-small">Define/Select Models </span>
-              </a>
-            </li>
-            <li >
-              <a href="" style="cursor:default" >
-                <div class="stepNumber">
-                  3
-                </div>
-                <span class="stepDesc text-small"> Configuration </span>
-              </a>
-            </li>
-
-
-          </ul>
-          <div>
-
-            <ol>
-              <li>Select the target dataset and fields which want to be checked</li>
-              <li>Select the pre-defined anomaly detection methods which will be applied on the selected fields</li>
-              <li>Set basic configuration for your model(name, system, threshold, etc.)</li>
-            </ol>
-          </div>
-        </div>
-        <div class="panel-footer stepDesc">
-          <label>Example1:</label> Check the total row count changed day over day (or hour over hour) on one Dataset
-          <label>Example2:</label> Check the values of all records in Column A should be matched with one expression pattern (first 3 character is 'abc') in one Dataset
-        </div>
-      </section>
-    </div>
-
-    <div class="col-lg-6 col-md-6 col-sm-6 ruletypes" style="opacity:0.6;">
-      <section id="panel-4" class="panel panel-green" style="cursor:default;">
-        <!--ng-click="click('pu')"-->
-        <div class="panel-heading">
-          <span style="font-size:20px">Publish DQ Metrics Directly</span>
-          <span class="pull-right" style="font-size:20px">
-                    <span class="fa fa-arrow-circle-right"></span>
-              </span>
-        </div>
-        <div class="swMain panel-body" >
-
-          <label class="label-definition">Definition: This is used to publish DQ results which already calculated offline by customers</label>
-
-          <ul style="border-radius:0; background: none">
-            <li >
-              <a href="" style="cursor:default" class="onlyone selected">
-                <div class="stepNumber">
-                  1
-                </div>
-                <span class="stepDesc text-small"> Configuration </span>
-              </a>
-            </li>
-
-
-
-
-          </ul>
-          <div>
-
-            <ol>
-              <li>Set basic configuration for your model(name, system, threshold, etc.)</li>
-            </ol>
-          </div>
-        </div>
-        <div class="panel-footer stepDesc">
-          <label>Example:</label> This example shows how to publish viewitem accuracy result with RESTful service
-          <pre style="background-color:transparent;color:inherit;border:none;overflow:hidden;margin:0 0;padding:0 0">Method: POST
-Endpoint: {{publishURL}}
-Body:{"metricName": "viewitem_accuracy", "timestamp": 1463373496583, "value": "99.9"}</pre>
-        </div>
-      </section>
-    </div>
-
-  </div><!--//row-->
-
-
-
-</div>
-

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/pages/measures/delete-confirm.html
----------------------------------------------------------------------
diff --git a/ui/pages/measures/delete-confirm.html b/ui/pages/measures/delete-confirm.html
deleted file mode 100644
index 7b26df7..0000000
--- a/ui/pages/measures/delete-confirm.html
+++ /dev/null
@@ -1,95 +0,0 @@
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
--->
-<div class="container-fluid" id="deleteContent" style="overflow:auto;">
-  <div class="row">
-    <h5 class="over-title margin-bottom-15">Basic information</h5>
-  </div><!--//row-->
-  <div class="row">
-
-    <div  class="col-lg-12 col-md-12 col-sm-12">
-      <div id="viewrule-definition" class="viewrule-content">
-        <div class="row">
-          <label class="col-md-4 col-lg-4 col-sm-4">
-            Measure Name:
-          </label>
-
-          <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
-            {{deletedRow.name}}
-          </div>
-        </div>
-
-        <div class="row">
-          <label class="col-md-4 col-lg-4 col-sm-4">
-            Measure Definition:
-          </label>
-
-          <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
-            {{deletedRow.description}}
-          </div>
-        </div>
-
-        <div class="row">
-          <label class="col-md-4 col-lg-4 col-sm-4">
-            Measure Type:
-          </label>
-
-          <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
-            {{deletedRow.type|strmap:'modeltype'}}
-          </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|strmap:'modelsystem'}}
-          </div>
-        </div>
-
-        <div class="row">
-          <label class="col-md-4 col-lg-4 col-sm-4">
-            DataAsset:
-          </label>
-
-          <div class="col-md-8 col-lg-8 col-sm-8" style="color: #fff">
-            {{sourceTable}}&nbsp;&nbsp;{{targetTable}}
-          </div>
-        </div>
-
-        <div class="row">
-          <label class="col-md-4 col-lg-4 col-sm-4">
-            Owner:
-          </label>
-
-          <div class="col-md-8 col-lg-8 col-sm-8" style="color: #fff">
-            {{deletedRow.owner}}
-          </div>
-        </div>
-
-
-      </div>
-    </div>
-
-
-  </div><!--//row-->
-
-
-</div>

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/pages/measures/detail.html
----------------------------------------------------------------------
diff --git a/ui/pages/measures/detail.html b/ui/pages/measures/detail.html
deleted file mode 100644
index 37dbfa8..0000000
--- a/ui/pages/measures/detail.html
+++ /dev/null
@@ -1,80 +0,0 @@
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
--->
-
-<!DOCTYPE html>
-
-<html lang="en">
-
-<head>
-
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="description" content="">
-    <meta name="author" content="">
-    <link rel="icon" href="/img/favicon.ico">
-
-    <title>Griffin - Data Quality Service</title>
-
-    <!-- Bootstrap Core CSS -->
-    <link href="bower_components/bootswatch/cyborg/bootstrap.css" rel="stylesheet">
-    <!-- Custom Fonts -->
-    <link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
-
-    <link href="bower_components/AngularJS-Toaster/toaster.css" rel="stylesheet">
-
-    <link href="css/main.css" rel="stylesheet">
-    <link href="css/treeview.css" rel="stylesheet">
-    <link href="css/treeview-check.css" rel="stylesheet">
-    <link href="css/sidebar.css" rel="stylesheet">
-    <link href="pages/measures/measure.css" rel="stylesheet">
-    <link href="pages/metrics/metrics.css" rel="stylesheet">
-    <link href="pages/template/bigchart.css" rel="stylesheet">
-    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
-    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
-    <!--[if lt IE 9]>
-    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
-    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
-    <![endif]-->
-
-</head>
-
-
-<body>
-
-<div id="bigChartContainer"  class="big-chart-container" style="display:none;" ng-controller="BigChartCtrl">
-    <div id="bigChartShow" class="big-chart-content">
-        <div class="container-fluid">
-            <div class="pull-right" style="position:fixed;right:20px;top:10px;z-index:1050;">
-                <button type="button" id="bigChartClose" class="bark-close thick" aria-label="Close" ng-click="closeBigChart()">
-                </button>
-            </div>
-
-            <div class="pull-right" style="position:fixed;right:150px;top:10px;z-index:1050;">
-                <a href ng-click="downloadSample()" style="font-size:15px;color:#d48265;"><u>Download Sample</u></a>
-            </div>
-
-            <div class="row">
-                <div id="bigChartDiv"></div>
-            </div>
-        </div>
-    </div>
-</div>
-</body>
-</html>

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/pages/measures/measure.css
----------------------------------------------------------------------
diff --git a/ui/pages/measures/measure.css b/ui/pages/measures/measure.css
deleted file mode 100644
index 1c49004..0000000
--- a/ui/pages/measures/measure.css
+++ /dev/null
@@ -1,347 +0,0 @@
-/*
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-
-*/
-.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
-}
-
-.swMain>div.formStep{
-  background-color: #000000;
-  border-radius: 5px;
-  padding:10px;
-  /*height:800px;*/
-}
-
-.swMain>ul li {
-    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
-}
-
-.swMain>ul li:first-child>a:before {
-    left: 50%;
-    max-width: 51%
-}
-
-.swMain>ul li:last-child>a:before {
-    max-width: 50%;
-    width: 50%
-}
-
-.swMain li>a.done:before,.swMain>ul li>a.selected:before {
-    border-color: #007AFF
-}
-
-.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
-}
-
-.swMain>ul li>a.selected .stepNumber {
-    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: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
-}
-
-.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 .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
-}
-
-.swMain li>a.done .stepDesc,.swMain>ul li>a.selected .stepDesc {
-    /*color: #2B3D53*/
-    color: #007AFF
-}
-
-.swMain>ul li>a.disabled {
-    cursor: default
-}
-
-.swMain .progress {
-    margin-bottom: 30px
-}
-
-.swMain .stepContainer {
-    height: auto!important
-}
-
-/*.swMain .close,.swMain .loader,.swMain [class*=" button"],.swMain [class^=button] {
-    display: none
-}*/
-
-.swMain .y-scrollable{
-  overflow-y: auto;
-  overflow-x: hidden;
-  max-height: 600px;
-}
-
-fieldset{
-  border: 1px solid #e6e8e8;
-  border-radius: 5px;
-  margin:20px 0;
-  padding: 25px;
-  position:relative;
-  min-width:0;
-  display:block;
-
-}
-
-fieldset legend{
-  background-color: #1f1f1f;
-  /*font-family: Lato,sans-serif;*/
-  /*color: #007AFF;*/
-  /*font-size: 15px;*/
-  left: 10px;
-  padding: 0 10px;
-  position: absolute;
-  top: -12px;
-  font-weight: 400;
-  width: auto!important;
-  border: none!important;
-}
-
-.btn-o{
-  background:0 0!important;
-}
-
-.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;*/
-}
-
-.label-definition{
-  color:#fff;
-}
-.formStep>.stepDesc{
-  color: #b2c831;
-}
-
-.formStep>.container-fluid{
-  /*position:relative;*/
-}
-
-.btn-container{
-  height:50px;
-  /*position: absolute;
-  bottom: 10;*/
-}
-
-.panel-disabled {
-  border-color: #B9D3DF;
-}
-.panel-disabled > .panel-heading {
-  background-color: #B9D3DF;
-  border-color: #B9D3DF;
-}
-
-.panel-body>ul{
-  border-radius:0;
-  background: none;
-  margin:0;
-}
-
-
-.panel-green {
-    border-color: #5cb85c;
-}
-
-.panel-green .panel-heading {
-    border-color: #5cb85c;
-    color: #fff;
-    background-color: #5cb85c;
-}
-
-.panel-green a {
-    color: #5cb85c;
-}
-
-.panel-green a:hover {
-    color: #3d8b3d;
-}
-
-.panel-red {
-    border-color: #d9534f;
-}
-
-.panel-red .panel-heading {
-    border-color: #d9534f;
-    color: #fff;
-    background-color: #d9534f;
-}
-
-.panel-red a {
-    color: #d9534f;
-}
-
-.panel-red a:hover {
-    color: #b52b27;
-}
-
-.panel-yellow {
-    border-color: #f0ad4e;
-}
-
-.panel-yellow .panel-heading {
-    border-color: #f0ad4e;
-    color: #fff;
-    background-color: #f0ad4e;
-}
-
-.panel-yellow a {
-    color: #f0ad4e;
-}
-
-.panel-yellow a:hover {
-    color: #df8a13;
-}
-
-.viewrule-content{
-  border:1px solid #fff;
-  border-radius:4px;
-  padding:10px;
-}
-
-.ruletypes>.panel{
-  cursor:pointer
-}
-
-/*.ruletypes>.panel:hover{*/
-#panel-1: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;
-}
-
-
-::-webkit-scrollbar {
-    width: 6px;
-}
-::-webkit-scrollbar-track {
-    background-color: #eaeaea;
-    /*background-color: #0a0a0a;*/
-    border-left: 1px solid #ccc;
-}
-::-webkit-scrollbar-thumb {
-    background-color: #ccc;
-}
-::-webkit-scrollbar-thumb:hover {
-    background-color: #aaa;
-}
-
-.disabled {
-    pointer-events: none;
-    cursor: default;
-    opacity: 0.6;
-}
-
-.test-result {
-  border-radius: 5px;
-  padding: 1px 5px;
-}

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/pages/measures/measures.html
----------------------------------------------------------------------
diff --git a/ui/pages/measures/measures.html b/ui/pages/measures/measures.html
deleted file mode 100644
index faf7dbd..0000000
--- a/ui/pages/measures/measures.html
+++ /dev/null
@@ -1,106 +0,0 @@
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
--->
-<div >
-    <p>
-        <a class="btn btn-primary btn-o btn-wide" href="#!/createrule0"><i class="fa fa-plus"></i> Create Measure</a>
-    </p>
-
-    <div id="modelContainer">
-        <table st-table="displayed" st-pipe="paging" class="table table-striped">
-            <thead>
-            <!-- <tr>
-
-                    <th colspan="7">
-                        <input st-search placeholder="Search..." type="search" style="color:#000000"/>
-                    </th>
-                </tr> -->
-            <tr style="background-color:#7D95CC">
-                <th st-ratio="15">Measure Name</th>
-                <!--<th st-ratio="15">Organization</th>-->
-                <th st-ratio="15">Measure Type</th>
-                <th st-ratio="20">Description</th>
-                <!--<th st-ratio="15">Create Date</th>-->
-                <!--<th st-ratio="10">Model Stage</th>-->
-                <th st-ratio="5">Organization</th>
-                <th st-ratio="5">Action</th>
-            </tr>
-            </thead>
-            <tbody>
-            <tr ng-if="!rowCollection || rowCollection.length == 0">
-                <td colspan="7" style="text-align:center">No content!</td>
-            </tr>
-            <tr ng-repeat="row in displayed">
-                <td><a href="#!/viewrule/{{row.id}}">{{row.name}}</a></td>
-                <!--<td>{{row.system|strmap:'modelsystem'}}</td>-->
-                <td>{{row.type|strmap:'modeltype'}}</td>
-                <td>{{row.description}}</td>
-                <!--<td>{{row.createDate | date:'short'}}</td>-->
-                <!--<td><label class="label" ng-class="row.status==0?'label-default':row.status==1?'label-info':'label-success'" >{{row.status|strmap:'modelstatus'}}</label></td>-->
-                <td>{{row.organization}}</td>
-                <td>
-                    &nbsp;
-                    <a ng-class="(!adminAccess && ntAccount!=row.owner)?'disabled':''" href="" ng-click="remove(row)" title="delete" style="text-decoration:none">
-                        <i class="fa fa-trash-o"></i>
-                    </a>
-                    &nbsp;
-                    <a href="#!/viewrule/{{row.id}}" title="subscribe">
-                        <i class="fa fa-eye"></i>
-                    </a>
-                </td>
-                <!-- <td>
-                    <button class="btn btn-sm" popover-placement="top" popover="{{row.email}}" type="button">
-                        <i class="glyphicon glyphicon-eye-open"></i>
-                    </button>
-                    <a ng-href="mailto:{{row.email}}">email</a></td>
-                <td>
-                    <button type="button" ng-click="removeRow(row)" class="btn btn-sm btn-danger">
-                        <i class="glyphicon glyphicon-remove-circle">
-                        </i>
-                    </button>
-                </td> -->
-            </tr>
-            </tbody>
-            <tfoot>
-            <tr>
-                <td colspan="8" class="text-right">
-                    <div  st-items-by-page="10" st-pagination="" st-displayed-pages="10"></div>
-                </td>
-            </tr>
-            </tfoot>
-        </table>
-    </div>
-    <div class="modal fade" id="deleteConfirmation" role="dialog">
-        <div class="modal-dialog modal-xg modal-lg">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-                    <h4 class="modal-title">Delete the model with the below information?</h4>
-                </div>
-                <div class="modal-body">
-                    <ng-include src="'/pages/measures/delete-confirm.html'"/>
-                </div>
-                <div class="modal-footer">
-                    <p style="text-align: left;color: white;font-size: 150%;">If you delete this measure, your running jobs on this measure will also be deleted, please be careful!</p>
-                    <button type="button" class="btn btn-default" ng-click="confirmDelete()">Yes</button>
-                    <button type="button" class="btn btn-primary" data-dismiss="modal">No</button>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/pages/measures/va-explaination.html
----------------------------------------------------------------------
diff --git a/ui/pages/measures/va-explaination.html b/ui/pages/measures/va-explaination.html
deleted file mode 100644
index 18ccc9a..0000000
--- a/ui/pages/measures/va-explaination.html
+++ /dev/null
@@ -1,771 +0,0 @@
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
--->
-<!-- Simple Statistics -->
-	<!-- Null Count -->
-<div class="container-fluid" ng-show="form.vaType==2">
-	<div class="container-fluid">
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-				<h5 class="text-left" style="margin-left: 0px">What is Null Count ?</h5>
-			</div>
-		</div>
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-			  	<label class="text-left">
-			  		Null is a special marker used to indicate that a data value does not exist.
-			  	</label>
-			</div>
-		</div>
-	</div>
-	<div class="container-fluid">
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-				<h5 class="text-left" style="margin-left: 0px">Example</h5>
-			</div>
-		</div>
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-				<label class="text-left">
-						Suppose we have the below data table, then the Null Count of "FIRSTNAME" is <kbd style="font-size: 16px">3</kbd>
-			  	</label>
-			</div>
-		</div>
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-				<table class="table table-bordered text-center">
-					<thead>
-						<tr class="success">
-							<td>ID</td>
-							<td>FRISTNAME</td>
-							<td>LASTNAME</td>
-						</tr>
-					</thead>
-					<tbody>
-						<tr>
-							<td>1</td>
-							<td>lei</td>
-							<td>li</td>
-						</tr>
-						<tr>
-							<td>2</td>
-							<td>lei</td>
-							<td>li</td>
-						</tr>
-						<tr>
-							<td>3</td>
-							<td>lei</td>
-							<td>li</td>
-						</tr>
-						<tr>
-							<td>4</td>
-							<td>
-								<abbr title="the value isn't necessary " class="initialism"><mark>null</mark></abbr>
-							</td>
-							<td>stone</td>
-						</tr>
-						<tr>
-							<td>5</td>
-							<td>lei</td>
-							<td>li</td>
-						</tr>
-						<tr>
-							<td>6</td>
-							<td>lei</td>
-							<td>li</td>
-						</tr>
-						<tr>
-							<td>7</td>
-							<td>
-								<abbr title="the value isn't necessary " class="initialism"><mark>null</mark></abbr>
-							</td>
-							<td>stone</td>
-						</tr>
-						<tr>
-							<td>8</td>
-							<td>
-								<abbr title="the value isn't necessary " class="initialism"><mark>null</mark></abbr>
-							</td>
-							<td>zhang</td>
-						</tr>
-					</tbody>
-				</table>
-			</div>
-		</div>
-	</div>
-</div>
-	<!-- Unique Count -->
-<div class="container-fluid" ng-show="form.vaType==3">
-	<div class="container-fluid">
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-				<h5 class="text-left" style="margin-left: 0px">What is Unique Count ?</h5>
-			</div>
-		</div>
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-			  	<label class="text-left">
-			  		The UNIQUE Constraint prevents two records from having identical values in a particular column.
-			  	</label>
-			</div>
-		</div>
-	</div>
-	<div class="container-fluid">
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-				<h5 class="text-left" style="margin-left: 0px">Example</h5>
-			</div>
-		</div>
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-				<label class="text-left">
-			  		Suppose we have the below data table which has four attributes-ID, NAME, AGE and FAVOURITE FOOD. Then the Unique Count is <kbd style="font-size: 16px">2</kbd>
-			  	</label>
-			</div>
-		</div>
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-				<table class="table table-bordered text-center">
-					<colgroup>
-					    <col span="2" style="background-color:#064225">
-					 </colgroup>
-					<thead>
-						<tr class="success">
-							<td>ID</td>
-							<td>NAME</td>
-							<td>AGE</td>
-							<td>FAVOURITE FOOD</td>
-						</tr>
-					</thead>
-					<tbody>
-						<tr>
-							<td>1</td>
-							<td>Lily</td>
-							<td>20</td>
-							<td>APPLE</td>
-						</tr>
-						<tr>
-							<td>2</td>
-							<td>Lucy</td>
-							<td>20</td>
-							<td>APPLE</td>
-						</tr>
-						<tr>
-							<td>3</td>
-							<td>John</td>
-							<td>20</td>
-							<td>APPLE</td>
-						</tr>
-						<tr>
-							<td>4</td>
-							<td>David</td>
-							<td>20</td>
-							<td>APPLE</td>
-						</tr>
-						<tr>
-							<td>5</td>
-							<td>Sam</td>
-							<td>35</td>
-							<td>banana</td>
-						</tr>
-						<tr>
-							<td>6</td>
-							<td>Kaka</td>
-							<td>35</td>
-							<td>banana</td>
-						</tr>
-						<tr>
-							<td>7</td>
-							<td>stone</td>
-							<td>35</td>
-							<td>banana</td>
-						</tr>
-						<tr>
-							<td>8</td>
-							<td>Adison</td>
-							<td>35</td>
-							<td>banana</td>
-						</tr>
-					</tbody>
-				</table>
-			</div>
-		</div>
-	</div>
-</div>
-    <!--  Duplicate Count -->
-<div class="container-fluid" ng-show="form.vaType==4">
-	<div class="container-fluid">
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-				<h5 class="text-left" style="margin-left: 0px">What is Duplicate Count ?</h5>
-			</div>
-		</div>
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-			  	<label class="text-left">
-			  		Duplicate Count is the number of duplicate rows in a table and generate an output column that shows how many times each row occurs.
-			  	</label>
-			</div>
-		</div>
-	</div>
-	<div class="container-fluid">
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-				<h5 class="text-left" style="margin-left: 0px">Example</h5>
-			</div>
-		</div>
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-				<label class="text-left">
-			  		Suppose we have the below data table, and we only count the  the number of duplicate rows for age. Then the Duplicate Count is <kbd style="font-size: 16px">2</kbd>
-			  	</label>
-			</div>
-		</div>
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-				<table class="table table-bordered text-center">
-					<thead>
-						<tr class="success">
-							<td>ID</td>
-							<td>NAME</td>
-							<td>AGE</td>
-							<td>FAVOURITE FOOD</td>
-						</tr>
-					</thead>
-					<tbody>
-						<tr>
-							<td>1</td>
-							<td>Lily</td>
-							<td>21</td>
-							<td>APPLE</td>
-						</tr>
-						<tr>
-							<td>2</td>
-							<td>Lucy</td>
-							<td class="info">20</td>
-							<td>APPLE</td>
-						</tr>
-						<tr>
-							<td>3</td>
-							<td>John</td>
-							<td class="info">20</td>
-							<td>APPLE</td>
-						</tr>
-						<tr>
-							<td>4</td>
-							<td>David</td>
-							<td class="info">20</td>
-							<td>APPLE</td>
-						</tr>
-						<tr>
-							<td>5</td>
-							<td>Sam</td>
-							<td>37</td>
-							<td>banana</td>
-						</tr>
-						<tr>
-							<td>6</td>
-							<td>Kaka</td>
-							<td class="warning">35</td>
-							<td>banana</td>
-						</tr>
-						<tr>
-							<td>7</td>
-							<td>stone</td>
-							<td class="warning">35</td>
-							<td>banana</td>
-						</tr>
-						<tr>
-							<td>8</td>
-							<td>Adison</td>
-							<td>38</td>
-							<td>banana</td>
-						</tr>
-					</tbody>
-				</table>
-			</div>
-		</div>
-	</div>
-</div>
-<!-- Summary Statistics -->
-	<!-- Maximum -->
-<div class="container-fluid" ng-show="form.vaType==5">
-	<div class="container-fluid">
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-				<h5 class="text-left" style="margin-left: 0px">What is Maximum ?</h5>
-			</div>
-		</div>
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-			  	<label class="text-left">
-			  		Maximum is the biggest value of the selected column.
-			  	</label>
-			</div>
-		</div>
-	</div>
-	<div class="container-fluid">
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-					<h5 class="text-left" style="margin-left: 0px">Example</h5>
-			</div>
-		</div>
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-				Suppose we have the below data table, then the maximum is: 26 <kbd style="font-size: 16px">26</kbd>
-			</div>
-		</div>
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-				<table class="table table-bordered text-center">
-					<thead>
-						<tr class="success">
-							<td>ID</td>
-							<td>NAME</td>
-							<td>AGE</td>
-						</tr>
-					</thead>
-					<tbody>
-						<tr>
-							<td>1</td>
-							<td>lei</td>
-							<td>17</td>
-						</tr>
-						<tr>
-							<td>2</td>
-							<td>lei</td>
-							<td>18</td>
-						</tr>
-						<tr>
-							<td>3</td>
-							<td>lei</td>
-							<td>18</td>
-						</tr>
-						<tr>
-							<td>4</td>
-							<td>lei</td>
-							<td>21</td>
-						</tr>
-						<tr>
-							<td>5</td>
-							<td>lei</td>
-							<td>23</td>
-						</tr>
-						<tr>
-							<td>6</td>
-							<td>lei</td>
-							<td>23</td>
-						</tr>
-						<tr>
-							<td>7</td>
-							<td>lei</td>
-							<td>24</td>
-						</tr>
-						<tr>
-							<td>8</td>
-							<td>lei</td>
-							<td>
-								<abbr title="the value is the biggest number " class="initialism"><mark>26</mark></abbr>
-							</td>
-						</tr>
-					</tbody>
-				</table>
-			</div>
-		</div>
-	</div>
-</div>
-	<!-- Minimum -->
-<div class="container-fluid" ng-show="form.vaType==6">
-	<div class="container-fluid">
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-				<h5 class="text-left" style="margin-left: 0px">What is Minimum ?</h5>
-			</div>
-		</div>
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-			  	<label class="text-left">
-			  		Minimum is smallest value of the selected column.
-			  	</label>
-			</div>
-		</div>
-	</div>
-	<div class="container-fluid">
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-					<h5 class="text-left" style="margin-left: 0px">Example</h5>
-			</div>
-		</div>
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-				Suppose we have the below data table, then the minimum is: <kbd style="font-size: 16px">14</kbd>
-			</div>
-		</div>
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-				<table class="table table-bordered text-center">
-					<thead>
-						<tr class="success">
-							<td>ID</td>
-							<td>NAME</td>
-							<td>AGE</td>
-						</tr>
-					</thead>
-					<tbody>
-						<tr>
-							<td>1</td>
-							<td>lei</td>
-							<td>17</td>
-						</tr>
-						<tr>
-							<td>2</td>
-							<td>lei</td>
-							<td>18</td>
-						</tr>
-						<tr>
-							<td>3</td>
-							<td>lei</td>
-							<td>18</td>
-						</tr>
-						<tr>
-							<td>4</td>
-							<td>lei</td>
-							<td>
-								<abbr title="the value is the minimum number " class="initialism"><mark>14</mark></abbr>
-							</td>
-						</tr>
-						<tr>
-							<td>5</td>
-							<td>lei</td>
-							<td>23</td>
-						</tr>
-						<tr>
-							<td>6</td>
-							<td>lei</td>
-							<td>23</td>
-						</tr>
-						<tr>
-							<td>7</td>
-							<td>lei</td>
-							<td>24</td>
-						</tr>
-						<tr>
-							<td>8</td>
-							<td>lei</td>
-							<td>26</td>
-						</tr>
-					</tbody>
-				</table>
-			</div>
-		</div>
-	</div>
-</div>
-	<!-- Mean -->
-<div class="container-fluid" ng-show="form.vaType==7">
-	<div class="container-fluid">
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-				<h5 class="text-left" style="margin-left: 0px">What is Mean ?</h5>
-			</div>
-		</div>
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-			  	<label class="text-left">
-			  		Mean is the usual average.
-			  	</label>
-			</div>
-		</div>
-	</div>
-	<div class="container-fluid">
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-					<h5 class="text-left" style="margin-left: 0px">Example</h5>
-			</div>
-		</div>
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-				Suppose we have the below data table, then the mean of AGE is: <kbd style="font-size: 16px">20</kbd>
-			</div>
-		</div>
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-				<table class="table table-bordered text-center">
-					<thead>
-						<tr class="success">
-							<td>ID</td>
-							<td>NAME</td>
-							<td>AGE</td>
-						</tr>
-					</thead>
-					<tbody>
-						<tr>
-							<td>1</td>
-							<td>lei</td>
-							<td>18</td>
-						</tr>
-						<tr>
-							<td>2</td>
-							<td>lei</td>
-							<td>18</td>
-						</tr>
-						<tr>
-							<td>3</td>
-							<td>lei</td>
-							<td>19</td>
-						</tr>
-						<tr>
-							<td>4</td>
-							<td>lei</td>
-							<td>19</td>
-						</tr>
-						<tr>
-							<td>5</td>
-							<td>lei</td>
-							<td>21</td>
-						</tr>
-						<tr>
-							<td>6</td>
-							<td>lei</td>
-							<td>21</td>
-						</tr>
-						<tr>
-							<td>7</td>
-							<td>lei</td>
-							<td>22</td>
-						</tr>
-						<tr>
-							<td>8</td>
-							<td>lei</td>
-							<td>22</td>
-						</tr>
-					</tbody>
-				</table>
-			</div>
-		</div>
-	</div>
-</div>
-	<!-- Median -->
-<div class="container-fluid" ng-show="form.vaType==8">
-	<div class="container-fluid">
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-				<h5 class="text-left" style="margin-left: 0px">What is Median ?</h5>
-			</div>
-		</div>
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-			  	<label class="text-left">
-			  		Median is the middle value.
-			  	</label>
-			</div>
-		</div>
-	</div>
-	<div class="container-fluid">
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-					<h5 class="text-left" style="margin-left: 0px">Example</h5>
-			</div>
-		</div>
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-				Suppose we have the below data table, then the median of AGE is: <kbd style="font-size: 16px">21</kbd>
-			</div>
-		</div>
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-				<table class="table table-bordered text-center">
-					<thead>
-						<tr class="success">
-							<td>ID</td>
-							<td>NAME</td>
-							<td>AGE</td>
-						</tr>
-					</thead>
-					<tbody>
-						<tr>
-							<td>1</td>
-							<td>lei</td>
-							<td>17</td>
-						</tr>
-						<tr>
-							<td>2</td>
-							<td>lei</td>
-							<td>18</td>
-						</tr>
-						<tr>
-							<td>3</td>
-							<td>lei</td>
-							<td>19</td>
-						</tr>
-						<tr>
-							<td>4</td>
-							<td>lei</td>
-							<td>20</td>
-						</tr>
-						<tr>
-							<td>5</td>
-							<td>lei</td>
-							<td>21</td>
-						</tr>
-						<tr>
-							<td>6</td>
-							<td>lei</td>
-							<td>21</td>
-						</tr>
-						<tr>
-							<td>7</td>
-							<td>lei</td>
-							<td>22</td>
-						</tr>
-						<tr>
-							<td>8</td>
-							<td>lei</td>
-							<td>22</td>
-						</tr>
-						<tr>
-							<td>9</td>
-							<td>lei</td>
-							<td>23</td>
-						</tr>
-					</tbody>
-				</table>
-			</div>
-		</div>
-	</div>
-</div>
-<!-- Regular Expression Matching -->
-<div class="container-fluid" ng-show="form.vaType==9">
-	<div class="container-fluid">
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-				<h5 class="text-left" style="margin-left: 0px">What is the Regular Expression Match?</h5>
-			</div>
-		</div>
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-			  	<label class="text-left">
-			  		In theoretical computer science and formal language theory, a regular expression (sometimes called a rational expression) is a sequence of characters that define a search pattern, mainly for use in pattern matching with strings, or string matching, i.e. "find and replace"-like operations.
-			  	</label>
-			</div>
-		</div>
-	</div>
-	<div class="container-fluid">
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-				<h5 class="text-left" style="margin-left: 0px">Example</h5>
-			</div>
-		</div>
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-			  	<label class="text-left">
-			  		There is a series characters of in the column of IDENTIFIER in the following table, and we can use a kind of Regular Expression Matching to search it.
-			  	</label>
-			</div>
-		</div>
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-				<table class="table table-bordered text-center">
-					<thead>
-						<tr class="success">
-							<td>IDENTIFIER</td>
-							<td>NAME</td>
-							<td>AGE</td>
-						</tr>
-					</thead>
-					<tbody>
-						<tr>
-							<td>#1111</td>
-							<td>lei</td>
-							<td>17</td>
-						</tr>
-						<tr>
-							<td>#1245</td>
-							<td>lei</td>
-							<td>18</td>
-						</tr>
-						<tr>
-							<td>15245</td>
-							<td>lei</td>
-							<td>18</td>
-						</tr>
-						<tr>
-							<td>87956</td>
-							<td>lei</td>
-							<td>21</td>
-						</tr>
-						<tr>
-							<td>
-								<abbr title="the value is the biggest number " class="initialism">
-									<mark>monkey</mark>
-								</abbr>
-							</td>
-							<td>lei</td>
-							<td>23</td>
-						</tr>
-						<tr>
-							<td>
-								<abbr title="the value is the biggest number " class="initialism">
-									<mark>tiger</mark>
-								</abbr>
-							</td>
-							<td>lei</td>
-							<td>23</td>
-						</tr>
-						<tr>
-							<td>456</td>
-							<td>lei</td>
-							<td>24</td>
-						</tr>
-						<tr>
-							<td>324</td>
-							<td>lei</td>
-							<td>26</td>
-						</tr>
-					</tbody>
-				</table>
-			</div>
-		</div>
-	</div>
-	<div class="container-fluid">
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-			  	<p class="text-left">
-					<strong>Suppose Regular Expression is :</strong> ^[A-Za-z]+$
-				</p>
-			</div>
-		</div>
-	</div>
-	<div class="container-fluid">
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-			  	<p class="text-left">
-					<strong>The regular expression matching means :</strong> Matches a string consisting of 26 english letters
-				</p>
-			</div>
-		</div>
-	</div>
-	<div class="container-fluid">
-		<div class="row">
-			<div class="col-md-12 col-lg-12 col-sm-12">
-			  	<p class="text-left">
-			  		The result is: <kbd>2 (MONKEY AND TIGER)</kbd>
-				</p>
-			</div>
-		</div>
-	</div>
-</div>


[02/13] incubator-griffin git commit: refactor ui with angular2

Posted by gu...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/pages/measures/viewrule.html
----------------------------------------------------------------------
diff --git a/ui/pages/measures/viewrule.html b/ui/pages/measures/viewrule.html
deleted file mode 100644
index 6e14ffd..0000000
--- a/ui/pages/measures/viewrule.html
+++ /dev/null
@@ -1,214 +0,0 @@
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
--->
-<div class="container-fluid" id="viewruleContent">
-    <div class="row">
-        <h5 class="over-title margin-bottom-15">View Measure</h5>
-    </div><!--//row-->
-    <div class="row">
-
-        <div  class="col-sm-6 col-xs-12">
-            <div id="viewruleDefinition" class="viewrule-content">
-                <div class="row">
-                    <label class="col-xs-4">
-                        Measure Name:
-                    </label>
-
-                    <div class="col-xs-8 " style="color: #fff">
-                        {{ruleData.name}}
-                    </div>
-                </div>
-
-                <div class="row">
-                    <label class="col-xs-4">
-                        Measure Description:
-                    </label>
-
-                    <div class="col-xs-8 " style="color: #fff">
-                        {{ruleData.description}}
-                    </div>
-                </div>
-
-                <div class="row">
-                    <label class="col-xs-4">
-                        Measure Type:
-                    </label>
-
-                    <div class="col-xs-8 " style="color: #fff">
-                        {{ruleData.type|strmap:'modeltype'}}
-                    </div>
-                </div>
-
-                <div class="row">
-                    <label for="systemSelector" class="col-xs-4">
-                        Organization:
-                    </label>
-
-                    <div class="col-xs-8 " style="color: #fff">
-                        {{ruleData.organization|strmap:'modelsystem'}}
-                    </div>
-                </div>
-
-                <div class="row">
-                    <label class="col-xs-4">
-                        DataAsset:
-                    </label>
-
-                    <div class="col-xs-8" style="color: #fff">
-                        {{sourceTable}}&nbsp;&nbsp;{{targetTable}}
-                    </div>
-                </div>
-
-                <div class="row">
-                    <label class="col-xs-4">
-                        Owner:
-                    </label>
-
-                    <div class="col-xs-8" style="color: #fff">
-                        {{ruleData.owner}}
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div><!--//row-->
-    <div class="container-fluid" ng-show="ruleData.basic.status==1" >
-        <br/>
-        <label style="color:#B2C831">This measure is ready to deploy now, if you are the owner, please click the deploy button after you verify all the information.</label>
-        <button ng-click="confirmDeploy()" ng-disabled="(ntAccount!=ruleData.basic.owner && !adminAccess)" class="btn btn-primary pull-right"> Deploy</button>
-        </p>
-    </div>
-    <br/>
-    <div ng-if="ruleData.type=='accuracy'"><!--Accuracy-->
-        <h5 class="row">Mapping rules</h5>
-        <div class="">
-            <p>{{ruleData.evaluateRule.rules}}</p>
-            <p>
-                <label style="color:#B2C831">Accuracy Calculation Formula as Below:</label>
-            </p>
-
-            <div class="col-md-12 col-lg-12 col-sm-12" style="color:#fff;font-size:16px;display: flex;align-items: center">
-
-                <div class="" style="text-align:right;display:block;float:left;width:20%;">
-                    Accuracy Rate(%) =
-                </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
-                    </div>
-                    <div class="">
-                        Total Count of records in <span style="color:green;font-weight:bold;">{{targetDB}}&nbsp;&nbsp;{{targetTable}}</span>
-                    </div>
-                </div>
-                <div class="" style="text-align:left;display:block;float:left;width:10%;">
-                    x 100%
-                </div>
-
-            </div>
-
-
-        </div>
-    </div>
-
-    <div ng-if="ruleData.basic.type==1"><!--Validity-->
-        <h5 class="row">Validity metrics</h5>
-        <div  class="">
-            <div id="viewrule-definition" class="viewrule-content">
-                <div class="row">
-                    <label class="col-xs-4">
-                        Validity type:
-                    </label>
-
-                    <div class="col-xs-8 " style="color: #fff">
-                        {{ruleData.extra.vaType|strmap:'vatype'}}
-                    </div>
-                </div>
-
-                <div class="row">
-                    <label class="col-xs-4">
-                        Selected column:
-                    </label>
-
-                    <div class="col-xs-8 " style="color: #fff">
-                        {{ruleData.extra.column}}
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <div ng-if="ruleData.basic.type==2"><!--Anomaly Detection-->
-        <h5 class="row">Key information</h5>
-        <div class="row">
-            <div  class="col-lg-12 col-md-12 col-sm-12">
-                <div id="viewrule-definition" class="viewrule-content">
-                    <div class="row">
-                        <label class="col-xs-4">
-                            Detection type:
-                        </label>
-
-                        <div class="col-xs-8 " style="color: #fff">
-                            {{ruleData.extra.anType|strmap:'antype'}}
-                        </div>
-                    </div>
-                    <div class="row-fluid">
-                        <img ng-if="ruleData.extra.anType==1" src="/img/yoy.png" style="max-height: 300px;width:100%"/>
-                        <img ng-if="ruleData.extra.anType==2" src="/img/bollinger.png" style="max-height: 400px;width:100%"/>
-                        <img ng-if="ruleData.extra.anType==3" src="/img/mad.png" style="max-height: 300px;width:100%"/>
-                    </div>
-
-
-                </div>
-            </div>
-
-        </div>
-    </div>
-
-    <div ng-if="ruleData.basic.type==3"><!--Publish Metrics-->
-        <h5 class="row">Publish Metrics URL</h5>
-        <div id="viewrule-definition" class="viewrule-content">
-
-            <div class="row">
-                <label class="col-xs-4">
-                    Publish URL:
-                </label>
-
-                <div class="col-xs-8" style="color: #fff">
-                    {{ruleData.extra.publishUrl}}
-                </div>
-            </div>
-
-            <div class="row">
-                <label class="col-xs-4">
-                    Publish data format:
-                </label>
-
-                <div class="col-xs-8" style="color: #fff">
-              <pre style="background-color:transparent;color:inherit;border:none">Method: POST
-Endpoint: {{ruleData.extra.publishUrl}}
-Body:
-{
-"metricName": "{{ruleData.basic.name}}",
-"timestamp": 1463373496583,
-"value": 99.9
-}</pre>
-                </div>
-            </div>
-        </div>
-    </div>
-
-</div>

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/pages/metrics/dashboard.html
----------------------------------------------------------------------
diff --git a/ui/pages/metrics/dashboard.html b/ui/pages/metrics/dashboard.html
deleted file mode 100644
index b64608a..0000000
--- a/ui/pages/metrics/dashboard.html
+++ /dev/null
@@ -1,63 +0,0 @@
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
--->
-<div id="dashboard" class="bs-component" >
-	<div  class="container-fluid">
-		<div class="row col-lg-12" style="margin-top: 15px;">
-			<div class="form-group">
-	      	<span>
-	            <label>Organization: </label>
-	            <select ng-disabled="orgSelectDisabled" class="form-control" style="padding: 4px 6px;height: 30px;width: 230px;background-color: #d1d3d2;display: inline-block;margin-left: 10px;" ng-model="selectedOrgIndex" ng-change="changeOrg()">
-                   <option value="">-- All --</option>
-                   <option ng-repeat="opt in originalOrgs" value="{{$index}}" ng-selected="selectedOrgIndex==$index">{{opt.name}}</option>
-	            </select>
-	      	</span>
-				<span style="padding-left:30px;">
-	            <label>Data Asset: </label>
-	            <select class="form-control" style="padding: 4px 6px;height: 30px;width: 230px;background-color: #d1d3d2;display: inline-block;margin-left: 10px;"  ng-model="selectedAssetIndex" ng-change="changeAsset()">
-                   <option value="">-- All --</option>
-                   <option ng-repeat="opt in assetOptions" value="{{$index}}">{{opt}}</option>
-	            </select>
-	      	</span>
-			</div>
-		</div>
-		<div ng-repeat="outerItems in finalData">
-			<div class="row" >
-				<div class="col-sm-12 col-md-12 col-lg-12">
-					<h4>{{outerItems.name}}</h4>
-				</div>
-			</div>
-			<div class="row">
-
-				<div class="col-sm-6 col-md-4 col-xs-12 col-lg-3 chartItem"  ng-repeat="items in outerItems.metrics" style="margin-bottom:30px;">
-
-					<div class="row-fluid" style="cursor: pointer;">
-						<div id={{'thumbnail'+$parent.$index+'-'+$index}} ng-click="showBig(items)" class="thumb-chart" style="border: 2px solid;"></div>
-						<p class="text-right">
-							<a href ng-click="getSample(items)" style="font-size: 11px;">
-								<u>Download&nbsp;Sample</u>
-							</a>
-						</p>
-					</div>
-				</div>
-			</div>
-
-		</div>
-	</div>
-
-</div>

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/pages/metrics/download-sample.html
----------------------------------------------------------------------
diff --git a/ui/pages/metrics/download-sample.html b/ui/pages/metrics/download-sample.html
deleted file mode 100644
index c1a7440..0000000
--- a/ui/pages/metrics/download-sample.html
+++ /dev/null
@@ -1,52 +0,0 @@
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
--->
-<div class="container-fluid" id="viewsample-content" style="overflow:auto;">
-  <div class="row">
-    <h5 class="over-title margin-bottom-15">Download sample</h5>
-  </div><!--//row-->
-  <div class="row">
-    <div  class="col-lg-12 col-md-12 col-sm-12">
-        <div id="viewrule-definition" class="viewrule-content">
-          <div ng-if="sample.length==0">No data</div>
-          <div ng-if="sample.length>0" ng-repeat="item in sample">
-            <span style="color: #fff">
-              {{item.date | date: 'MM/dd/yy HH:mm'}}
-            </span>
-            &nbsp;&nbsp;
-            <span>
-              {{item.path}}
-            </span>
-            &nbsp;&nbsp;
-            <span>
-              <a target="_self" href="{{downloadUrl + '/' + item.path}}" download style="font-size: 11px">
-                <u>Download</u>
-              </a>
-            </span>
-          </div>
-
-      </div>
-      <p>
-        Click the "Download" link to download sample data. You can also find the complete data file from the path listed above, and then you can back-fill the missed data
-      </p>
-    </div>
-
-
-  </div><!--//row-->
-
-</div>

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/pages/metrics/metrics.css
----------------------------------------------------------------------
diff --git a/ui/pages/metrics/metrics.css b/ui/pages/metrics/metrics.css
deleted file mode 100644
index a5eb782..0000000
--- a/ui/pages/metrics/metrics.css
+++ /dev/null
@@ -1,28 +0,0 @@
-/*-
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-
-*/
-
-.thumb-chart:hover{
-    transform: scale(1.05, 1.05);
-    box-shadow:  0 1px 2px 2px #ccc;
-}
-
-.side-chart:hover {
-	box-shadow: 0 1px 2px 2px #ccc;
-}

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/pages/mydashboard/confirmation-subscribe.html
----------------------------------------------------------------------
diff --git a/ui/pages/mydashboard/confirmation-subscribe.html b/ui/pages/mydashboard/confirmation-subscribe.html
deleted file mode 100644
index 2711f81..0000000
--- a/ui/pages/mydashboard/confirmation-subscribe.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
--->
-<div class="container-fluid" id="viewruleContent" style="overflow:auto;">
-  <div class="row">
-    <h5 class="over-title margin-bottom-15">Basic information</h5>
-  </div><!--//row-->
-  <div class="row">
-
-    <div  class="col-lg-12 col-md-12 col-sm-12">
-        <div id="viewrule-definition" class="viewrule-content">
-          <div class="row">
-            <label class="col-md-4 col-lg-4 col-sm-4">
-              Subscribe info:
-            </label>
-
-            <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
-              <pre style="background-color: #202020; color: #fff; max-height: 500px;">{{form.data | json}}</pre>
-            </div>
-          </div>
-      </div>
-    </div>
-
-
-  </div><!--//row-->
-
-</div>

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/pages/mydashboard/mydashboard.html
----------------------------------------------------------------------
diff --git a/ui/pages/mydashboard/mydashboard.html b/ui/pages/mydashboard/mydashboard.html
deleted file mode 100644
index 11df9f0..0000000
--- a/ui/pages/mydashboard/mydashboard.html
+++ /dev/null
@@ -1,48 +0,0 @@
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
--->
-<div id="mydashboard" class="bs-component" >
-	<div  class="container-fluid">
-		<div class="row col-lg-12" style="margin-top: 15px;">
-	        <!--<a class="btn btn-primary btn-o btn-wide" href="#/subscribemodel"><i class="fa fa-plus"></i> Subscribe Models</a>-->
-	    </div>
-	  	<div ng-repeat="outerItems in dashboard">
-	  		<div class="row" >
-	  			<div class="col-sm-12 col-md-12 col-lg-12">
-	  				<h4>{{outerItems.name}}</h4>
-	  			</div>
-	  		</div>
-	  		<div class="row">
-
-	  			<div class="col-sm-6 col-md-4 col-xs-12 col-lg-3 chartItem"  ng-repeat="items in outerItems.metrics" style="margin-bottom:30px;">
-
-			  			<div class="row-fluid" style="cursor: pointer;">
-			  				<div id={{'thumbnail'+$parent.$index+'-'+$index}} ng-click="showBig(items)" class="thumb-chart" style="border: 2px solid;"></div>
-							  <p class="text-right">
-			  						<a href ng-click="getSample(items)" style="font-size: 11px;">
-				  						<u>Download&nbsp;Sample</u>
-				  					</a>
-			  					</p>
-			  			</div>
-		  		</div>
-				</div>
-
-			</div>
-	</div>
-
-</div>

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/pages/mydashboard/subscribemodel.html
----------------------------------------------------------------------
diff --git a/ui/pages/mydashboard/subscribemodel.html b/ui/pages/mydashboard/subscribemodel.html
deleted file mode 100644
index 8bcf521..0000000
--- a/ui/pages/mydashboard/subscribemodel.html
+++ /dev/null
@@ -1,118 +0,0 @@
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
--->
-<div class="container-fluid">
-  <div class="row">
-    <!--<h5 class="over-title margin-bottom-15">Subscribe Models</h5>-->
-  </div><!--//row-->
-  <div class="row">
-    <form name="Form" id="form" novalidate>
-      <div id="wizard" class="swMain" >
-        <div class="formStep" >
-
-					<div class="container-fluid">
-            <!-- select db tree -->
-						<div class="col-md-4 col-lg-4 col-sm-4">
-							<fieldset>
-							  <legend>Please select data asset</legend>
-                <!-- <div class="add-dataset" style="color:#b2c831">
-                    <a class="bark-link" href="#/createdataasset">Cannot find your DataAsset? Click here to add</a>
-                </div> -->
-                <div angular-treeviewcheck="true"
-                      tree-model-check="dbList"
-                      node-id="id"
-                      node-label="name"
-                      node-children="children"
-                      l1-icon="fa fa-database"
-                      l2-icon="fa fa-table"
-                      l3-icon="fa fa-file-text-o"
-                      class="y-scrollable">
-                </div>
-              </fieldset>
-						</div>
-
-            <!-- schema definition list -->
-						<div class="col-md-8 col-lg-8 col-sm-8">
-							<fieldset>
-								<legend>
-									Models
-								</legend>
-								<div class="y-scrollable">
-                  <div>
-                   <label>The below are the models defined under the selected Data Assets.</label>
-                 </div>
-                 <div>
-                   <table st-table="schemaCollection" class="table table-striped">
-                   	<thead>
-                     	<tr style="background-color:#7D95CC">
-                     		<th st-ratio="20">Model Name</th>
-                     		<th st-ratio="20">Model Type</th>
-                        <th st-ratio="20">Organization</th>
-                        <th st-ratio="20">Asset Name</th>
-                        <th st-ratio="20">Description</th>
-                     	</tr>
-                   	</thead>
-                   	<tbody>
-                       <tr ng-if="!schemaCollection || schemaCollection.length == 0">
-                         <td colspan="5" style="text-align:center" ><span class="highlight">Please select a data asset from the left tree first</span></td>
-                       </tr>
-                     	<tr ng-repeat="row in schemaCollection">
-                        <td>{{row.modelName}}</td>
-                        <td>{{row.modelType}}</td>
-                        <td>{{row.systemName}}</td>
-                        <td>{{row.assetName}}</td>
-                        <td>{{row.desc}}</td>
-                     	</tr>
-                   	</tbody>
-                   </table>
-                 </div>
-                </div>
-              </fieldset>
-            </div>
-
-            <div class="form-group btn-container">
-							<button class="btn btn-primary btn-o next-step btn-wide pull-right" ng-click="form.submit(Form)">
-								Submit
-							</button>
-						</div>
-
-          </div>
-
-      </div>
-
-
-      <div class="modal fade" id="confirm" role="dialog">
-        <div class="modal-dialog modal-xg modal-lg">
-          <div class="modal-content">
-            <div class="modal-header">
-              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-              <h4 class="modal-title">Subscribe data assets with the below information?</h4>
-            </div>
-            <div class="modal-body">
-              <ng-include src="'/pages/mydashboard/confirmation-subscribe.html'"/>
-            </div>
-            <div class="modal-footer">
-              <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
-              <button type="button" class="btn btn-primary" ng-click="form.save()">Save</button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </form>
-  </div><!--//row-->
-</div>

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/pages/template/bigchart.css
----------------------------------------------------------------------
diff --git a/ui/pages/template/bigchart.css b/ui/pages/template/bigchart.css
deleted file mode 100644
index e28c50b..0000000
--- a/ui/pages/template/bigchart.css
+++ /dev/null
@@ -1,95 +0,0 @@
-/*-
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-
-*/
-
-.big-chart-container{
-  z-index:1040;
-  display:block;
-  position:fixed;
-  top:0;
-  left:0;
-  bottom:0;
-  right:0;
-  background-color: rgba(0,0,0,0.4);
-}
-
-.big-chart-content{
-  position: fixed;
-  background-color:black;
-  /*animation-name: animatetop;
-  animation-duration: 0.8s*/
-}
-
-.bark-close {
-  position: relative;
-  display: inline-block;
-  width: 30px;
-  height: 30px;
-  overflow: hidden;
-  background: transparent;
-  border: 0;
-}
-.bark-close:hover::before, .bark-close:hover::after {
-  background: #ECED25;
-}
-.bark-close::before, .bark-close::after {
-  content: '';
-  position: absolute;
-  height: 2px;
-  width: 100%;
-  top: 50%;
-  left: 0;
-  margin-top: -1px;
-  background: #fff;
-}
-.bark-close::before {
-  -webkit-transform: rotate(45deg);
-  -moz-transform: rotate(45deg);
-  -ms-transform: rotate(45deg);
-  -o-transform: rotate(45deg);
-  transform: rotate(45deg);
-}
-.bark-close::after {
-  -webkit-transform: rotate(-45deg);
-  -moz-transform: rotate(-45deg);
-  -ms-transform: rotate(-45deg);
-  -o-transform: rotate(-45deg);
-  transform: rotate(-45deg);
-}
-.bark-close.big {
-  -webkit-transform: scale(3);
-  -moz-transform: scale(3);
-  -ms-transform: scale(3);
-  -o-transform: scale(3);
-  transform: scale(3);
-}
-
-.bark-close.black::before, .bark-close.black::after {
-  height: 8px;
-  margin-top: -4px;
-}
-.bark-close.thick::before, .bark-close.thick::after {
-  height: 4px;
-  margin-top: -2px;
-}
-
-@keyframes animatetop {
-    from {top:-100px; opacity:0}
-    to {top:60px; opacity:1}
-}

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/pages/template/bigchart.html
----------------------------------------------------------------------
diff --git a/ui/pages/template/bigchart.html b/ui/pages/template/bigchart.html
deleted file mode 100644
index c90803d..0000000
--- a/ui/pages/template/bigchart.html
+++ /dev/null
@@ -1,35 +0,0 @@
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
--->
-<!-- <div id="bigChartShow" style="display: none;"> -->
-	
-<div id="bigChartContainer"  class="big-chart-container" style="display:none;">
-	<div id="bigChartShow" class="big-chart-content">
-		<div class="container-fluid">
-			<div class="pull-right" style="position:fixed;right:40px;top:20px;z-index:1050;">
-				<button type="button" id="bigChartClose" class="bark-close thick" aria-label="Close" ng-click="closeBigChart()">
-				</button>
-			</div>
-			
-			<div class="row">
-				<div id="bigChartDiv"></div>
-
-			</div>
-		</div>
-	</div>
-</div>

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/pages/template/undercons.html
----------------------------------------------------------------------
diff --git a/ui/pages/template/undercons.html b/ui/pages/template/undercons.html
deleted file mode 100644
index 5fb5118..0000000
--- a/ui/pages/template/undercons.html
+++ /dev/null
@@ -1,22 +0,0 @@
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
--->
-<div style="height:400px;line-height:400px;text-align:center;width:100%;font-size:48px">
-	<img src="/img/construction.gif" style="max-height:120px;"/>
-	Under construction! Coming soon!
-</div>

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/pom.xml
----------------------------------------------------------------------
diff --git a/ui/pom.xml b/ui/pom.xml
index 6c337d2..6541986 100644
--- a/ui/pom.xml
+++ b/ui/pom.xml
@@ -35,6 +35,8 @@ under the License.
   <properties>
     <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
     <java.version>1.8</java.version>
+    <node.version>v6.11.3</node.version>
+    <npm.version>3.10.10</npm.version>
   </properties>
 
 
@@ -53,22 +55,46 @@ under the License.
   <build>
     <plugins>
       <plugin>
-        <groupId>org.codehaus.mojo</groupId>
-        <artifactId>exec-maven-plugin</artifactId>
-        <version>${exec-maven-plugin.version}</version>
+        <groupId>com.github.eirslett</groupId>
+        <artifactId>frontend-maven-plugin</artifactId>
+        <version>1.0</version>
+        <configuration>
+          <workingDirectory>angular</workingDirectory>
+          <installDirectory>tmp</installDirectory>
+        </configuration>
         <executions>
+          <!-- It will install nodejs and npm -->
+          <execution>
+            <id>install node and npm</id>
+            <goals>
+              <goal>install-node-and-npm</goal>
+            </goals>
+            <configuration>
+              <nodeVersion>${node.version}</nodeVersion>
+              <npmVersion>${npm.version}</npmVersion>
+            </configuration>
+          </execution>
+
+          <!-- It will execute command "npm install" inside "/angular" directory -->
           <execution>
-            <id>exec-bower-install</id>
-            <phase>generate-sources</phase>
+            <id>npm install</id>
+            <goals>
+              <goal>npm</goal>
+            </goals>
             <configuration>
-              <executable>bower</executable>
-              <arguments>
-                <argument>install</argument>
-              </arguments>
+              <arguments>install</arguments>
             </configuration>
+          </execution>
+
+          <!-- It will execute command "npm build" inside "/angular" directory to clean and create "/dist" directory-->
+          <execution>
+            <id>npm build</id>
             <goals>
-              <goal>exec</goal>
+              <goal>npm</goal>
             </goals>
+            <configuration>
+              <arguments>run build</arguments>
+            </configuration>
           </execution>
         </executions>
       </plugin>
@@ -96,7 +122,7 @@ under the License.
               </nonFilteredFileExtensions>
               <resources>
                 <resource>
-                  <directory>${basedir}</directory>
+                  <directory>${basedir}/angular/dist</directory>
                   <excludes>
                     <exclude>src/**</exclude>
                     <exclude>target/**</exclude>

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/sidebar.html
----------------------------------------------------------------------
diff --git a/ui/sidebar.html b/ui/sidebar.html
deleted file mode 100644
index 07c9253..0000000
--- a/ui/sidebar.html
+++ /dev/null
@@ -1,92 +0,0 @@
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
--->
-
-<div id="rightbar" ng-controller="SideBarCtrl" class="" style="background-color:#262626;">
-
-    <div id="side-bar-stats" class="row" style="border-bottom:5px solid #060606;margin-left:0;margin-right:0">
-
-        <!--<div class="row-container">-->
-        <div class="col-xs-15 col-md-15 col-lg-6 " id="sidebar-option">
-
-            <div >
-
-                <div class="sidebar-stat-center">
-                    <img src="/img/sidebar1.png" >
-                    <span><a class="bark-link" href="#!/dataassets">
-                    <!-- {{datasets}} -->
-                    &nbsp;DataAssets</a></span>
-                </div>
-
-                <div class="sidebar-stat-center">
-                    <img src="/img/sidebar2.png">
-                    <span><a class="bark-link" href="#!/metrics">
-
-                    &nbsp;DQ Metrics</a></span>
-                </div>
-
-            </div>
-
-        </div>
-        <div class="col-xs-12 col-md-12 col-lg-6">
-            <div id="data-asset-pie"></div>
-        </div>
-        <!--</div>-->
-    </div>
-
-
-    <div id="side-bar-metrics" class="row" style="margin-top:20px;overflow-y:auto;overflow-x:hidden;margin-left:0;margin-right:0;height:1px;">
-        <div ng-repeat="outerItems in finalData">
-            <div class="well" style="padding:0px;background:transparent;border:0px;position:relative; ">
-                <!-- <img class="bullseye" src="/img/bullseye.png" title="image1" > -->
-                <div class="col-sm-4 col-lg-4 col-md-4 "><h4 ><a href="#!/metrics/{{outerItems.name}}"> {{outerItems.name}}</a></h4></div>
-                <div class="col-sm-3 col-lg-3 col-md-3 " style="display: flex;justify-content: center;height:46px;"><div ng-class="outerItems.dq >=90 ? 'led-green':'led-yellow'" style="align-self: center;"></div></div>
-                <!-- <div class="col-sm-5 col-lg-5 col-md-5 " style="display: flex;justify-content: center;height:46px;"><a style="align-self: center;" class="btn btn-primary" href="https://github.com/eBay/DQSolution/issues" target="_blank">Report&nbsp;issue</a></div> -->
-            </div>
-            <br/>
-            <div class="well side-bar-scroll">
-                <div class="panel-group" ng-repeat="items in outerItems.metrics" style="margin-bottom:0px;background:transparent;">
-                    <div class="panel panel-default" style="position:relative;background:transparent;">
-                        <div class="panel-heading" style="background:transparent;">
-                            <h4 class="panel-title side-metrics">
-                                <a data-toggle="collapse" href={{"#"+outerItems.name+$index}} ng-init="items.tag=true" ng-click="items.tag=!items.tag;draw(items, $parent.$index, $index);" >
-                                    <i class="faChevron" ng-class="items.tag ? 'fa fa-caret-right':'fa fa-caret-down'" style="width:10px"></i>
-
-                                    <i class="fa fa-line-chart faArrows"></i>
-                                    <span class="side-date">{{items.timestamp | date:'MM/dd HH:mm'}}</span>
-                                    &nbsp;&nbsp;
-                                    <span class="side-name" title="{{items.name}}">{{items.name |strShorten}}</span>
-                                    <span ng-if="items.dq <= 100" class="pull-right" ng-class="items.dqfail?'side-percent-red':'side-percent'">{{items.dq | number:2}}%</span>
-                                    <span ng-if="items.dq > 100" class="pull-right" ng-class="items.dqfail?'side-percent-red':''">{{items.dq/1000 | number:0}}K</span>
-                                </a>
-                            </h4>
-                        </div>
-                        <div id={{outerItems.name+$index}} class="panel-collapse collapse">
-                            <!-- <div class="panel-body">
-                              <highchart config="items.chartId">
-                            </div> -->
-                            <div class="panel-body" style="cursor:pointer;padding:0px 15px;">
-                                <div id={{'chart'+$parent.$index+'-'+$index}} class="side-chart"></div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/src/main/java/jar/App.java
----------------------------------------------------------------------
diff --git a/ui/src/main/java/jar/App.java b/ui/src/main/java/jar/App.java
deleted file mode 100644
index 45f5ec7..0000000
--- a/ui/src/main/java/jar/App.java
+++ /dev/null
@@ -1,33 +0,0 @@
-/*
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-
-*/
-
-package jar;
-
-/**
- * Hello world!
- *
- */
-public class App 
-{
-    public static void main( String[] args )
-    {
-        System.out.println( "Hello World!" );
-    }
-}

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/src/test/java/jar/AppTest.java
----------------------------------------------------------------------
diff --git a/ui/src/test/java/jar/AppTest.java b/ui/src/test/java/jar/AppTest.java
deleted file mode 100644
index 4352fb0..0000000
--- a/ui/src/test/java/jar/AppTest.java
+++ /dev/null
@@ -1,58 +0,0 @@
-/*
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-
-*/
-
-package jar;
-
-import junit.framework.Test;
-import junit.framework.TestCase;
-import junit.framework.TestSuite;
-
-/**
- * Unit test for simple App.
- */
-public class AppTest 
-    extends TestCase
-{
-    /**
-     * Create the test case
-     *
-     * @param testName name of the test case
-     */
-    public AppTest( String testName )
-    {
-        super( testName );
-    }
-
-    /**
-     * @return the suite of tests being tested
-     */
-    public static Test suite()
-    {
-        return new TestSuite( AppTest.class );
-    }
-
-    /**
-     * Rigourous Test :-)
-     */
-    public void testApp()
-    {
-        assertTrue( true );
-    }
-}

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/tests/ut/karma.conf.js
----------------------------------------------------------------------
diff --git a/ui/tests/ut/karma.conf.js b/ui/tests/ut/karma.conf.js
deleted file mode 100644
index 9dcb2dc..0000000
--- a/ui/tests/ut/karma.conf.js
+++ /dev/null
@@ -1,107 +0,0 @@
-/*-
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-
-*/
-// Karma configuration
-// Generated on Thu Apr 07 2016 15:02:00 GMT+0800 (China Standard Time)
-//http://monicalent.com/blog/2015/02/11/karma-tests-angular-js-require-j/
-
-module.exports = function(config) {
-  config.set({
-
-    // base path that will be used to resolve all patterns (eg. files, exclude)
-    basePath: '../../',
-
-
-    // frameworks to use
-    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
-    frameworks: ['jasmine', 'requirejs'],
-
-
-    files: [
-      'tests/ut/test-main.js',
-      {pattern:'bower_components/**/*.js', included:false},
-      {pattern:'node_modules/angular-mocks/angular-mocks.js', included:false},
-      {pattern: 'js/**/*.js', included: false},
-      {pattern: 'tests/**/*spec.js', included: false}
-    ],
-
-
-    // list of files to exclude
-    exclude: [
-      'js/main.js',
-      'js/bs.js',
-      'js/routes.js',
-      'bower_components/**/*test*/**/*.js',
-      'bower_components/**/*spec.js',
-      // 'node_modules/**/*spec.js',
-      // 'node_modules/**/*spec*/**/*.js',
-      // 'node_modules/**/*test.js'
-    ],
-
-
-    // preprocess matching files before serving them to the browser
-    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
-    preprocessors: {
-      'js/**/*.js':['coverage']
-    },
-
-    coverageReporter: {
-        type:'lcov',
-        dir: 'tests/ut/test-coverage'
-    },
-
-
-    // test results reporter to use
-    // possible values: 'dots', 'progress'
-    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
-    // reporters: ['progress'],
-    reporters: ['mocha', 'coverage', 'progress'],
-
-
-    // web server port
-    port: 9876,
-
-
-    // enable / disable colors in the output (reporters and logs)
-    colors: true,
-
-
-    // level of logging
-    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
-    logLevel: config.LOG_DEBUG,
-
-
-    // enable / disable watching file and executing tests whenever any file changes
-    autoWatch: true,
-
-
-    // start these browsers
-    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
-    browsers: ['Chrome'],
-
-
-    // Continuous Integration mode
-    // if true, Karma captures browsers, runs the tests and exits
-    singleRun: false,
-
-    // Concurrency level
-    // how many browser should be started simultaneous
-    concurrency: Infinity
-  })
-}

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/tests/ut/specs/controllers/createjob-ac-ctrl.spec.js
----------------------------------------------------------------------
diff --git a/ui/tests/ut/specs/controllers/createjob-ac-ctrl.spec.js b/ui/tests/ut/specs/controllers/createjob-ac-ctrl.spec.js
deleted file mode 100644
index 39e7f6b..0000000
--- a/ui/tests/ut/specs/controllers/createjob-ac-ctrl.spec.js
+++ /dev/null
@@ -1,63 +0,0 @@
-/*-
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-
-*/
-
-define(['angular', 'angularMocks', 'js/controllers/createjob-ac-ctrl'],
-  function(angular, mocks, CreateJobACCtrl) {
-    describe('Test /js/controllers/createjob-ac-ctrl.js', function(){
-      	beforeEach(function(){
-	        module('app.controllers');
-	        module('app.services');
-      	});
-    	var $scope, $rootScope, $controller, $httpBackend, $config, $location, toaster, $timeout, $route;
-
-	    beforeEach(inject(function(_$rootScope_ , _$controller_, _$httpBackend_, _$config_, _$location_, _$timeout_){
-	    	$rootScope = _$rootScope_;
-	    	$controller = _$controller_;
-	        $httpBackend = _$httpBackend_;
-	        $config = _$config_;
-	        $location = _$location_;
-	        $timeout = _$timeout_;
-	        toaster = {};
-	        $route = {};
-	    }));
-
-        beforeEach(function(){
-          	$scope =  $rootScope.$new();
-	        controller = $controller('CreateJobACCtrl', {$scope: $scope, $route: $route, toaster: toaster });
-        });
-
-        describe("if the controller of CreateJobACCtrl exists",function(){
-        	it('controller exists', function(){
-	          	expect(controller).toBeDefined();
-	        });
-        })
-
-        describe("check if createRowCollection",function(){
-
-	        it('createRowCollection', function(){
-	          	expect($scope.rowCollection).not.toEqual([]);
-	        });
-
-      	})
-
-
-    });
-  }
-)
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/tests/ut/specs/controllers/createrule-ac-ctrl.spec.js
----------------------------------------------------------------------
diff --git a/ui/tests/ut/specs/controllers/createrule-ac-ctrl.spec.js b/ui/tests/ut/specs/controllers/createrule-ac-ctrl.spec.js
deleted file mode 100644
index 4f99a71..0000000
--- a/ui/tests/ut/specs/controllers/createrule-ac-ctrl.spec.js
+++ /dev/null
@@ -1,134 +0,0 @@
-/*-
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-
-*/
-define(['angular', 'angularMocks', 'js/controllers/createrule-ac-ctrl'],
-  function(angular, mocks, CreateRuleACCtrl) {
-    describe('Test /js/controllers/createrule-ac-ctrl.js', function(){
-      	beforeEach(function(){
-	        module('app.controllers');
-	        module('app.services');
-      	});
-    	var $scope, $rootScope, $controller, $httpBackend, $config, $location, toaster, $timeout, $route;
-	    beforeEach(inject(function(_$rootScope_ , _$controller_, _$httpBackend_, _$config_, _$location_, _$timeout_){
-	    	$rootScope = _$rootScope_;
-	    	$controller = _$controller_;
-	        $httpBackend = _$httpBackend_;
-	        $config = _$config_;
-	        $location = _$location_;
-	        $timeout = _$timeout_;
-	        $route = {};
-	        toaster = {};
-	    }));
-
-        beforeEach(function(){
-          	$scope =  $rootScope.$new();
-	        controller = $controller('CreateRuleACCtrl', {$scope: $scope, $route: $route, toaster: toaster });
-        });
-
-        describe("if the controller of CreateRuleACCtrl exists",function(){
-        	it('controller exists', function(){
-	          	expect(controller).toBeDefined();
-	        });
-        })
-
-        describe("check if parameters are available",function(){
-
-	        it('if the controller exists', function(){
-	          	expect(controller).toBeDefined();
-	        });
-
-	        it('$scope.value and $config.value should be right', function(){
-	          	expect($scope.currentStep).toBe(1);
-	          	expect(typeof $scope.selection).toEqual("object");
-	          	expect($config.uri.dbtree).toBeTruthy();
-	          	expect($config.uri.schemadefinition).toBeTruthy();
-	        });
-
-	        it('$scope.ruleTypes should be right', function(){
-	          	expect($scope.ruleTypes).toEqual(['Accuracy', 'Validity', 'Anomaly Detection', 'Publish Metrics']);
-	        });
-
-      	})
-
-      	describe("check if function are work",function(){
-
-	        it('$scope.selectNodeLabelTarget  works well', function(){
-	          expect($scope.selectNodeLabelTarget ).toBeDefined();
-	        });
-
-	        it('$scope.toggleSelection works well', function(){
-	          expect($scope.toggleSelection).toBeDefined();
-	        });
-
-	        it('$scope.toggleAll works well', function(){
-	          expect($scope.toggleAll).toBeDefined();
-	        });
-
-	        it('$scope.form is a object', function(){
-	          expect(typeof $scope.form).toBe("object");
-	        });
-
-      	})
-
-      	describe("$scope.form test",function(){
-
-        	it('the type of $scope.form', function(){
-	          	expect(typeof $scope.form).toBe("object");
-	        });
-
-	        it('the type of $scope.form.submit', function(){
-	          	expect(typeof $scope.form.submit).toBe('function');
-	        });
-
-	        it('the type of $scope.form.save', function(){
-	          	expect(typeof $scope.form.save).toBe('function');
-	        });
-
-        })
-
-        describe("httpGet $config.uri.dbtree test",function(){
-	        beforeEach(function(){
-	            $httpBackend.when('GET', $config.uri.dbtree).respond({"age": 16,"name": "li"});
-	            $httpBackend.when('GET', $config.uri.schemadefinition).respond({"age": 16,"name": "li"});
-	        });
-
-	        it('http response', function(){
-	          $httpBackend.flush();
-	          expect($scope.dbListTarget).toBeTruthy();
-	        });
-
-	   		it('test watch and http request', function(){
-	   			$scope.currentNode = {"name":"ha"};
-		      	$scope.$digest();
-
-		      	$httpBackend.flush();
-		      	expect($scope.selection.length).toBe(0);
-		      	expect($scope.selectedAll).toBe(false);
-
-		      	expect($scope.schemaCollection.age).toBe(16);
-	   		});
-
-	      	afterEach(function() {
-	        	$httpBackend.verifyNoOutstandingExpectation();
-	        	$httpBackend.verifyNoOutstandingRequest();
-	      	});
-	    })
-    });
-  }
-)

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/tests/ut/specs/controllers/createrule-pu-ctrl.spec.js
----------------------------------------------------------------------
diff --git a/ui/tests/ut/specs/controllers/createrule-pu-ctrl.spec.js b/ui/tests/ut/specs/controllers/createrule-pu-ctrl.spec.js
deleted file mode 100644
index 9933541..0000000
--- a/ui/tests/ut/specs/controllers/createrule-pu-ctrl.spec.js
+++ /dev/null
@@ -1,110 +0,0 @@
-/*-
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-
-*/
-define(['angular', 'angularMocks', 'js/controllers/createrule-pu-ctrl'],
-  function(angular, mocks, CreateRulePUCtrl) {
-    describe('Test /js/controllers/createrule-pu-ctrl.js', function(){
-      	beforeEach(function(){
-	        module('app.controllers');
-	        module('app.services');
-      	});
-    	var $scope, $rootScope, $controller, $httpBackend, $config, $location, toaster, $timeout, $route;
-	    beforeEach(inject(function(_$rootScope_ , _$controller_, _$httpBackend_, _$config_, _$location_, _$timeout_){
-	    	$rootScope = _$rootScope_;
-	    	$controller = _$controller_;
-	        $httpBackend = _$httpBackend_;
-	        $config = _$config_;
-	        $location = _$location_;
-	        $timeout = _$timeout_;
-	        $route = {};
-	        toaster = ['error', 'Error', "hello", "lisan"];/*test data*/
-	    }));
-
-        beforeEach(function(){
-          	$scope =  $rootScope.$new();
-	        controller = $controller('CreateRulePUCtrl', {$scope: $scope, $route: $route, toaster: toaster });
-        });
-
-        describe("if the controller of CreateRulePUCtrl exists",function(){
-        	it('controller exists', function(){
-	          	expect(controller).toBeDefined();
-	        });
-        })
-
-        describe("$scope.value",function(){
-
-        	it('$scope.currentStep == 1', function(){
-	          	expect($scope.currentStep).toBe(1);
-	        });
-
-	        it('$scope.scheduleTypes', function(){
-	          	expect($scope.scheduleTypes).toEqual(['Daily', 'Weekly', 'Monthly', 'Hourly']);
-	        });
-
-        })
-
-        describe("$scope.form test",function(){
-
-        	it('the type of $scope.form', function(){
-	          	expect(typeof $scope.form).toBe("object");
-	        });
-
-	        it('the type of $scope.form.submit', function(){
-	          	expect(typeof $scope.form.submit).toBe('function');
-	        });
-
-	        it('the type of $scope.form.save', function(){
-	          	expect(typeof $scope.form.save).toBe('function');
-	        });
-
-        })
-
-        /*describe("function errorMessage() test",function(){
-        	// test function
-        	it('errorMessage', function(){
-	          	var message = ["hello"];
-	          	var i = 2;
-	          	var msg = true;
-	          	$scope.errorMessage(i,msg);
-	          	expect(toaster).toEqual(['error', 'Error',"hello"]);
-	        });
-
-        })*/
-
-        describe('Testing $watch expressions', function() {
-		    it('test using $digest', function() {
-		    	var form = {};
-		    	form.basic = {"name": "li"};
-		    	form.publishUrl = "publishUrl";
-		    	$scope.form = form;
-		      	form.basic.name = "ha";
-		      	$scope.$digest();
-		      	form.basic.name = "la";
-		      	$scope.$digest();
-
-		      	expect($scope.form.publishUrl).toEqual('http://dq.vip.ebay.com/api/v1/publishmetric/la');
-
-		    });
-		});
-
-
-
-    });
-  }
-)

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/tests/ut/specs/controllers/createrule-va-ctrl.spec.js
----------------------------------------------------------------------
diff --git a/ui/tests/ut/specs/controllers/createrule-va-ctrl.spec.js b/ui/tests/ut/specs/controllers/createrule-va-ctrl.spec.js
deleted file mode 100644
index f0653b4..0000000
--- a/ui/tests/ut/specs/controllers/createrule-va-ctrl.spec.js
+++ /dev/null
@@ -1,115 +0,0 @@
-/*-
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-
-*/
-define(['angular', 'angularMocks', 'js/controllers/createrule-va-ctrl'],
-  function(angular, mocks, CreateRuleVACtrl) {
-    describe('Test /js/controllers/createrule-va-ctrl.js', function(){
-      	beforeEach(function(){
-	        module('app.controllers');
-	        module('app.services');
-      	});
-    	var $scope, $rootScope, $controller, $httpBackend, $config, $location, toaster, $timeout, $route;
-	    beforeEach(inject(function(_$rootScope_ , _$controller_, _$httpBackend_, _$config_, _$location_, _$timeout_){
-	    	$rootScope = _$rootScope_;
-	    	$controller = _$controller_;
-	        $httpBackend = _$httpBackend_;
-	        $config = _$config_;
-	        $location = _$location_;
-	        $timeout = _$timeout_;
-	        $route = {};
-	        toaster = {};
-	    }));
-
-        beforeEach(function(){
-          	$scope =  $rootScope.$new();
-	        controller = $controller('CreateRuleVACtrl', {$scope: $scope, $route: $route, toaster: toaster });
-        });
-
-        describe("if the controller of CreateRuleVACtrl exists",function(){
-        	it('controller exists', function(){
-	          	expect(controller).toBeDefined();
-	        });
-        })
-
-        describe("check if parameters are available",function(){
-
-	        it('$scope.value and $config.value should be right', function(){
-	          	expect($scope.currentStep).toBe(1);
-	          	expect($config.uri.dbtree).toBeTruthy();
-	          	expect($config.uri.schemadefinition).toBeTruthy();
-	        });
-
-	        it('$scope.ruleTypes should be right', function(){
-	          	expect($scope.ruleTypes).toEqual(['Accuracy', 'Validity', 'Anomaly Detection', 'Publish Metrics']);
-	        });
-
-      	})
-
-      	describe("check if form function are work",function(){
-
-	        it('$scope.form is a object', function(){
-	          expect(typeof $scope.form).toBe("object");
-	        });
-
-      	})
-
-      	describe("$scope.form test",function(){
-
-        	it('the type of $scope.form', function(){
-	          	expect(typeof $scope.form).toBe("object");
-	        });
-
-	        it('the type of $scope.form.submit', function(){
-	          	expect(typeof $scope.form.submit).toBe('function');
-	        });
-
-	        it('the type of $scope.form.save', function(){
-	          	expect(typeof $scope.form.save).toBe('function');
-	        });
-
-        })
-
-      	describe("httpGet $config.uri.dbtree test",function(){
-	        beforeEach(function(){
-	            $httpBackend.when('GET', $config.uri.dbtree).respond({"age": 16,"name": "li"});
-	            $httpBackend.when('GET', $config.uri.schemadefinition).respond({"age": 15,"name": "wei"});
-	        });
-
-	        it('http response', function(){
-	        	$httpBackend.flush();
-	          	expect($scope.dbList).toBeTruthy();
-	        });
-
-	        it('test watch and http request', function(){
-	   			$scope.currentNode = {"name":"ha"};
-		      	$scope.$digest();
-
-		      	$httpBackend.flush();
-		      	expect($scope.schemaCollection.age).toBe(15);
-	   		});
-
-	      	afterEach(function() {
-	        	$httpBackend.verifyNoOutstandingExpectation();
-	        	$httpBackend.verifyNoOutstandingRequest();
-	      	});
-	    })
-
-    });
-  }
-)

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/tests/ut/specs/controllers/createrule0-ctrl.spec.js
----------------------------------------------------------------------
diff --git a/ui/tests/ut/specs/controllers/createrule0-ctrl.spec.js b/ui/tests/ut/specs/controllers/createrule0-ctrl.spec.js
deleted file mode 100644
index aefe247..0000000
--- a/ui/tests/ut/specs/controllers/createrule0-ctrl.spec.js
+++ /dev/null
@@ -1,67 +0,0 @@
-/*-
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-
-*/
-define(['angular', 'angularMocks', 'js/controllers/createrule0-ctrl'],
-  function(angular, mocks, CreateRule0Ctrl) {
-    describe('Test /js/controllers/createrule0-ctrl.js', function(){
-      	beforeEach(function(){
-	        module('app.controllers');
-	        module('app.services');
-      	});
-    	var $scope, $rootScope, $controller, $httpBackend, $config, $location, toaster, $timeout;
-
-	    beforeEach(inject(function(_$rootScope_ , _$controller_, _$httpBackend_, _$config_, _$location_, _$timeout_){
-	    	$rootScope = _$rootScope_;
-	    	$controller = _$controller_;
-	        $httpBackend = _$httpBackend_;
-	        $config = _$config_;
-	        $location = _$location_;
-	        $timeout = _$timeout_;
-	        toaster = {};
-	    }));
-
-        beforeEach(function(){
-          	$scope =  $rootScope.$new();
-	        controller = $controller('CreateRule0Ctrl', {$scope: $scope, toaster: toaster });
-        });
-
-        describe("if the controller of CreateRule0Ctrl exists",function(){
-        	it('controller exists', function(){
-	          	expect(controller).toBeDefined();
-	        });
-        })
-
-        describe("if the $scope.click exists",function(){
-
-        	it('$scope.click', function(){
-	          	expect($scope.click).toBeDefined();
-	        });
-
-	        it('should change location when setting it via click function', inject(function() {
-		        var url = '/index';
-		        $scope.click(url);
-		        spyOn($location, 'path').and.returnValue(url);
-		    }));
-
-        })
-
-
-    });
-  }
-)

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/tests/ut/specs/controllers/health-ctrl.spec.js
----------------------------------------------------------------------
diff --git a/ui/tests/ut/specs/controllers/health-ctrl.spec.js b/ui/tests/ut/specs/controllers/health-ctrl.spec.js
deleted file mode 100644
index 053ff4b..0000000
--- a/ui/tests/ut/specs/controllers/health-ctrl.spec.js
+++ /dev/null
@@ -1,78 +0,0 @@
-/*-
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-
-*/
-define(['require', 'angular', 'angularMocks', 'js/controllers/health-ctrl', 'echarts'],
-  function(require, angular, mocks, HealthCtrl) {
-    describe('Test /js/controllers/health-ctrl.js', function(){
-      	beforeEach(function(){
-	        module('app.controllers');
-	        module('app.services');
-      	});
-    	var $scope, $rootScope, $controller, $httpBackend, $config, $location, toaster, $timeout, $route;
-
-	    beforeEach(inject(function(_$rootScope_ , _$controller_, _$httpBackend_, _$config_, _$location_, _$timeout_){
-	    	$rootScope = _$rootScope_;
-	    	$controller = _$controller_;
-	        $httpBackend = _$httpBackend_;
-	        $config = _$config_;
-	        $location = _$location_;
-	        $timeout = _$timeout_;
-	        toaster = {};
-	        $route = {};
-	    }));
-
-        beforeEach(function(){
-          	$scope =  $rootScope.$new();
-	        controller = $controller('HealthCtrl', {$scope: $scope, $route: $route, toaster: toaster });
-        });
-
-        describe("if the controller of HealthCtrl exists",function(){
-        	it('controller exists', function(){
-	          	expect(controller).toBeDefined();
-	        });
-        })
-
-        describe("check if parameters are available",function(){
-
-	        it('$scope.value and $config.value should be right', function(){
-	          	expect($config.uri.heatmap).toBeTruthy();
-	        });
-
-      	})
-
-      	describe("httpGet $config.uri.dbtree test",function(){
-	        beforeEach(function(){
-	            $httpBackend.when('GET', $config.uri.heatmap).respond([{"name":"unknown","dq":0.0,"metrics":[{"name":"mean","dq":4835.3,"dqfail":0,"timestamp":1470387389994,"metricType":"","assetName":null,"details":[]},{"name":"test1001","dq":1638.6,"dqfail":0,"timestamp":1470387312289,"metricType":"","assetName":null,"details":[]},{"name":"test_publish","dq":99.8,"dqfail":0,"timestamp":1463994766925,"metricType":"","assetName":null,"details":[]},{"name":"v","dq":99.8,"dqfail":0,"timestamp":1463994766925,"metricType":"","assetName":null,"details":[]}]},{"name":"Hadoop","dq":0.0,"metrics":[{"name":"movie_acc","dq":97.0,"dqfail":0,"timestamp":1470009600000,"metricType":"","assetName":null,"details":[]},{"name":"movie_acc_test2","dq":97.0,"dqfail":0,"timestamp":1470009600000,"metricType":"","assetName":null,"details":[]},{"name":"hadoop_accuracy_1","dq":99.053,"dqfail":0,"timestamp":1467356400000,"metricType":"","assetName":null,"details":[]}]},{"name":"Bullseye","dq":0.0,"metrics":[{"na
 me":"test_accuracy_1","dq":98.952,"dqfail":1,"timestamp":1467439200000,"metricType":"","assetName":null,"details":[]},{"name":"test_accuracy_2","dq":99.103,"dqfail":0,"timestamp":1467439200000,"metricType":"","assetName":null,"details":[]},{"name":"TotalCount_asset1","dq":5056215.0,"dqfail":0,"timestamp":1467439200000,"metricType":"","assetName":null,"details":[]},{"name":"TotalCount_asset2","dq":1.229703E7,"dqfail":0,"timestamp":1467356400000,"metricType":"","assetName":null,"details":[]},{"name":"aw","dq":5056215.0,"dqfail":0,"timestamp":1467439200000,"metricType":"Bollinger","assetName":null,"details":[]}]}]);
-	            $httpBackend.flush();
-	        });
-
-	        it('http response', function(){
-	          // expect($scope.dbList).toBeTruthy();
-	        });
-
-	      	afterEach(function() {
-	        	$httpBackend.verifyNoOutstandingExpectation();
-	        	$httpBackend.verifyNoOutstandingRequest();
-	      	});
-	    })
-
-
-    });
-  }
-)

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/tests/ut/specs/controllers/job-ctrl.spec.js
----------------------------------------------------------------------
diff --git a/ui/tests/ut/specs/controllers/job-ctrl.spec.js b/ui/tests/ut/specs/controllers/job-ctrl.spec.js
deleted file mode 100644
index 2d7bc4b..0000000
--- a/ui/tests/ut/specs/controllers/job-ctrl.spec.js
+++ /dev/null
@@ -1,62 +0,0 @@
-/*-
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-
-*/
-define(['angular', 'angularMocks', 'js/controllers/job-ctrl'],
-  function(angular, mocks, JobCtrl) {
-    describe('Test /js/controllers/job-ctrl.js', function(){
-      	beforeEach(function(){
-	        module('app.controllers');
-	        module('app.services');
-      	});
-    	var $scope, $rootScope, $controller, $httpBackend, $config, $location, toaster, $timeout, $route;
-
-	    beforeEach(inject(function(_$rootScope_ , _$controller_, _$httpBackend_, _$config_, _$location_, _$timeout_){
-	    	$rootScope = _$rootScope_;
-	    	$controller = _$controller_;
-	        $httpBackend = _$httpBackend_;
-	        $config = _$config_;
-	        $location = _$location_;
-	        $timeout = _$timeout_;
-	        toaster = {};
-	        $route = {};
-	    }));
-
-        beforeEach(function(){
-          	$scope =  $rootScope.$new();
-	        controller = $controller('JobCtrl', {$scope: $scope, $route: $route, toaster: toaster });
-        });
-
-        describe("if the controller of JobCtrl exists",function(){
-        	it('controller exists', function(){
-	          	expect(controller).toBeDefined();
-	        });
-        })
-
-        describe("check if createRowCollection",function(){
-
-	        it('createRowCollection', function(){
-	          	expect($scope.rowCollection).not.toEqual([]);
-	        });
-
-      	})
-
-
-    });
-  }
-)
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/tests/ut/specs/controllers/metrics-ctrl.spec.js
----------------------------------------------------------------------
diff --git a/ui/tests/ut/specs/controllers/metrics-ctrl.spec.js b/ui/tests/ut/specs/controllers/metrics-ctrl.spec.js
deleted file mode 100644
index ec89983..0000000
--- a/ui/tests/ut/specs/controllers/metrics-ctrl.spec.js
+++ /dev/null
@@ -1,81 +0,0 @@
-/*-
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-
-*/
-define(['angular', 'angularMocks', 'js/controllers/metrics-ctrl'],
-  function(angular, mocks, MetricsCtrl) {
-    describe('Test /js/controllers/metrics-ctrl.js', function(){
-      	beforeEach(function(){
-	        module('app.controllers');
-	        module('app.services');
-      	});
-    	var $rootScope, $controller, $httpBackend, $config, $filter, $routeParams, $timeout, $compile, $route;
-	    beforeEach(inject(function(_$rootScope_, _$controller_, _$httpBackend_, _$config_, _$filter_, _$timeout_, _$compile_){
-	        $rootScope = _$rootScope_;
-	        $controller = _$controller_;
-	        $httpBackend = _$httpBackend_;
-	        $config = _$config_;
-	        $filter = _$filter_;
-	        $routeParams = {};
-	        // $routeParams.siteId = 'abc';
-	        $timeout = _$timeout_;
-	        $compile = _$compile_;
-	        $route = {};
-	    }));
-
-    	describe("function test",function(){
-	        var $scope;
-
-	        beforeEach(function(){
-	          	$scope =  $rootScope.$new();
-		        controller = $controller('MetricsCtrl', {$scope: $scope, $route: $route, $routeParams: $routeParams});
-	        });
-
-	        it('controller exists', function(){
-	        	// var controller = $controller('MetricsCtrl', {$scope: $scope, $routeParams: $routeParams});
-	          	expect(controller).toBeDefined();
-	        });
-
-	        it('$config.uri.dashboard', function(){
-	          	expect($config.uri.dashboard).toBeTruthy();
-	        });
-
-	        it('$scope.showBig works well', function(){
-	          expect($scope.showBig).toBeDefined();
-	        });
-
-	        describe("http test",function(){
-		        beforeEach(function(){
-	                $httpBackend.when('GET', $config.uri.dashboard).respond({"age": 16,"name": "li"});
-		            $httpBackend.flush();
-		        });
-
-		        it('http response', function(){
-		          expect($scope.dashboard.age).toBe(16);
-		        });
-
-	          	afterEach(function() {
-	            	$httpBackend.verifyNoOutstandingExpectation();
-	            	$httpBackend.verifyNoOutstandingRequest();
-	          	});
-	        })
-
-      	})
-    });
-  }
-)

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/tests/ut/specs/controllers/nav-ctrl_spec.js
----------------------------------------------------------------------
diff --git a/ui/tests/ut/specs/controllers/nav-ctrl_spec.js b/ui/tests/ut/specs/controllers/nav-ctrl_spec.js
deleted file mode 100644
index 4b616ef..0000000
--- a/ui/tests/ut/specs/controllers/nav-ctrl_spec.js
+++ /dev/null
@@ -1,52 +0,0 @@
-/*-
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-
-*/
-define(['angular', 'angularMocks', 'js/controllers/nav-ctrl'],
-  function(angular, mocks, navCtrl) {
-    describe('Test /js/controllers/nav-ctrl.js', function(){
-      beforeEach(function(){
-        module('app.controllers');
-        module('app.services');
-      });
-    	var $controller, $config, $httpBackend, $location;
-
-    	beforeEach(inject(function(_$controller_, _$config_, _$httpBackend_, _$location_){
-    	    $controller = _$controller_;
-    	    $config = _$config_;
-    	    $httpBackend = _$httpBackend_;
-          $location = _$location_;
-    	}));
-
-      describe('$scope functions are set properly', function(){
-        var $scope;
-
-        beforeEach(function(){
-          $scope = {};
-          $controller('NavCtrl', {$scope:$scope});
-        })
-
-        it('$scope.isActive is defined correctly', function(){
-          $location.path('/home');
-          expect($scope.isActive('/home')).toBeTruthy();
-        });
-
-      });
-    });
-  }
-);

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/tests/ut/specs/controllers/rule-ctrl.spec.js
----------------------------------------------------------------------
diff --git a/ui/tests/ut/specs/controllers/rule-ctrl.spec.js b/ui/tests/ut/specs/controllers/rule-ctrl.spec.js
deleted file mode 100644
index b6c205e..0000000
--- a/ui/tests/ut/specs/controllers/rule-ctrl.spec.js
+++ /dev/null
@@ -1,62 +0,0 @@
-/*-
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-
-*/
-define(['angular', 'angularMocks', 'js/controllers/rule-ctrl'],
-  function(angular, mocks, RuleCtrl) {
-    describe('Test /js/controllers/rule-ctrl.js', function(){
-      	beforeEach(function(){
-	        module('app.controllers');
-	        module('app.services');
-      	});
-    	var $scope, $rootScope, $controller, $httpBackend, $config, $location, toaster, $timeout, $route;
-
-	    beforeEach(inject(function(_$rootScope_ , _$controller_, _$httpBackend_, _$config_, _$location_, _$timeout_){
-	    	$rootScope = _$rootScope_;
-	    	$controller = _$controller_;
-	        $httpBackend = _$httpBackend_;
-	        $config = _$config_;
-	        $location = _$location_;
-	        $timeout = _$timeout_;
-	        toaster = {};
-	        $route = {};
-	    }));
-
-        beforeEach(function(){
-          	$scope =  $rootScope.$new();
-	        controller = $controller('RuleCtrl', {$scope: $scope, $route: $route, toaster: toaster });
-        });
-
-        describe("if the controller of RuleCtrl exists",function(){
-        	it('controller exists', function(){
-	          	expect(controller).toBeDefined();
-	        });
-        })
-
-        describe("check if createRowCollection",function(){
-
-	        it('createRowCollection', function(){
-	          	expect($scope.rowCollection).not.toEqual([]);
-	        });
-
-      	})
-
-
-    });
-  }
-)

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/tests/ut/specs/controllers/sidebar-ctrl_spec.js
----------------------------------------------------------------------
diff --git a/ui/tests/ut/specs/controllers/sidebar-ctrl_spec.js b/ui/tests/ut/specs/controllers/sidebar-ctrl_spec.js
deleted file mode 100644
index aeadfca..0000000
--- a/ui/tests/ut/specs/controllers/sidebar-ctrl_spec.js
+++ /dev/null
@@ -1,94 +0,0 @@
-/*-
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-
-*/
-define(['angular', 'angularMocks', 'js/controllers/sidebar-ctrl'],
-  function(angular, mocks, sidebarCtrl) {
-    describe('Test /js/controllers/sidebar-ctrl.js', function(){
-      beforeEach(function(){
-        module('app.controllers');
-        module('app.services');
-      });
-    	var $controller, $httpBackend, $config, $filter, $timeout, $compile;
-      beforeEach(inject(function(_$controller_, _$httpBackend_, _$config_, _$filter_, _$timeout_, _$compile_){
-          $controller = _$controller_;
-          $httpBackend = _$httpBackend_;
-          $config = _$config_;
-          $filter = _$filter_;
-          $timeout = _$timeout_;
-          $compile = _$compile_;
-      }));
-
-    	describe("http unit test",function(){
-        var $scope;
-        beforeEach(function(){
-          $scope = {};
-          $controller('SideBarCtrl', {$scope:$scope});
-        })
-        it('$scope.str works well', function(){
-          // expect($scope.str).toEqual("hello");
-        });
-        it('url works well', function(){
-          expect($config.uri.statistics).toBeTruthy();
-        });
-        it('function resizeSidebar() works well', function(){
-          // expect($scope.resizeSidebar).toBeDefined();
-        });
-        describe("http get test",function(){
-          beforeEach(function(){
-                $httpBackend.when('GET', $config.uri.statistics).respond(
-                    {
-                      "assets": 16,
-                      "metrics": 20,
-                      "status":{
-                        "health": 16,
-                        "warn": 3,
-                        "invalid": 1
-                      }
-                    }
-                );
-
-                $httpBackend.when('GET', $config.uri.briefmetrics).respond(
-                    {
-                      "assets": 16,
-                      "metrics": 20,
-                      "status":{
-                        "health": 16,
-                        "warn": 3,
-                        "invalid": 1
-                      }
-                    }
-                );
-                $httpBackend.flush();
-          });
-
-          it("$scope.chartConfig is defined", function(){
-              expect($scope.chartConfig).toBeDefined();
-          });
-
-          afterEach(function() {
-            $httpBackend.verifyNoOutstandingExpectation();
-            $httpBackend.verifyNoOutstandingRequest();
-          });
-        })
-
-
-      })
-    });
-  }
-)

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/tests/ut/specs/controllers/viewrule-ctrl.spec.js
----------------------------------------------------------------------
diff --git a/ui/tests/ut/specs/controllers/viewrule-ctrl.spec.js b/ui/tests/ut/specs/controllers/viewrule-ctrl.spec.js
deleted file mode 100644
index 1de441b..0000000
--- a/ui/tests/ut/specs/controllers/viewrule-ctrl.spec.js
+++ /dev/null
@@ -1,77 +0,0 @@
-/*-
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-
-*/
-define(['angular', 'angularMocks', 'js/controllers/viewrule-ctrl'],
-  function(angular, mocks, ViewRuleCtrl) {
-    describe('Test /js/controllers/viewrule-ctrl.js', function(){
-      	beforeEach(function(){
-	        module('app.controllers');
-	        module('app.services');
-      	});
-    	var $scope, $rootScope, $controller, $filter, $httpBackend, $config, $location, toaster, $timeout, $compile;
-
-	    beforeEach(inject(function(_$rootScope_ , _$controller_, _$filter_, _$httpBackend_, _$config_, _$location_, _$timeout_, _$compile_){
-	    	$rootScope = _$rootScope_;
-	    	$controller = _$controller_;
-	    	$filter = _$filter_;
-	        $httpBackend = _$httpBackend_;
-	        $config = _$config_;
-	        $location = _$location_;
-	        $timeout = _$timeout_;
-	        toaster = {};
-	        $compile = _$compile_;
-	    }));
-
-        beforeEach(function(){
-          	$scope =  $rootScope.$new();
-	        controller = $controller('ViewRuleCtrl', {$scope: $scope, toaster: toaster});
-        });
-
-        describe("if the controller of ViewRuleCtrl exists",function(){
-        	it('controller exists', function(){
-	          	expect(controller).toBeDefined();
-	        });
-        })
-
-        describe("check if parameters are available",function(){
-	        it('$scope.value and $config.value should be right', function(){
-	          	expect($config.uri.rulemetric).toBeTruthy();
-	        });
-      	})
-
-      	describe("httpGet $config.uri.rulemetric test",function(){
-	        beforeEach(function(){
-	            $httpBackend.when('GET', $config.uri.rulemetric).respond({"age": 16,"name": "li"});
-	            $httpBackend.flush();
-	        });
-
-	        it('http response', function(){
-	          // expect($scope.dbList).toBeTruthy();
-	        });
-
-	      	afterEach(function() {
-	        	$httpBackend.verifyNoOutstandingExpectation();
-	        	$httpBackend.verifyNoOutstandingRequest();
-	      	});
-	    })
-
-
-    });
-  }
-)

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/tests/ut/specs/filters/strmap_spec.js
----------------------------------------------------------------------
diff --git a/ui/tests/ut/specs/filters/strmap_spec.js b/ui/tests/ut/specs/filters/strmap_spec.js
deleted file mode 100644
index a63d74b..0000000
--- a/ui/tests/ut/specs/filters/strmap_spec.js
+++ /dev/null
@@ -1,38 +0,0 @@
-/*-
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-
-*/
-define(['angular', 'angularMocks', 'js/filters/strmap'],
-  function(angular, mocks, filter) {
-
-    describe('Test /js/filters/strmap.js', function() {
-      beforeEach(module('app.filters'));
-
-      // Our first test!!!!
-      it('map correctly for index', mocks.inject(function($filter) {
-        // console.log($filter('strShorten')('1234567890123444444'));
-        var arr = ['Apple', 'Orange', 'Pale'];
-        expect($filter('strmap')(0, arr)).toEqual(arr[0]);
-        expect($filter('strmap')(3, arr)).toEqual(3);
-
-      }));
-
-
-    });
-  }
-);



[11/13] incubator-griffin git commit: refactor ui with angular2

Posted by gu...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/src/app/measure/create-measure/ac/ac.component.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/measure/create-measure/ac/ac.component.ts b/ui/angular/src/app/measure/create-measure/ac/ac.component.ts
new file mode 100644
index 0000000..122d7b7
--- /dev/null
+++ b/ui/angular/src/app/measure/create-measure/ac/ac.component.ts
@@ -0,0 +1,594 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+import { Component, OnInit } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { FormsModule, Validator} from '@angular/forms';
+import {ServiceService} from '../../../service/service.service';
+// import { PatternValidator } from '@angular/forms';
+
+
+import { TREE_ACTIONS, KEYS, IActionMapping, ITreeOptions } from 'angular-tree-component';
+import { BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import { ToasterModule, ToasterService} from 'angular2-toaster';
+import * as $ from 'jquery';
+import { HttpClient} from '@angular/common/http';
+import { Router} from "@angular/router";
+
+
+class node {
+  name: string;
+  id: number;
+  children:object[];
+  isExpanded:boolean;
+  cols:Col[];
+  parent:string;
+};
+class Col{
+  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;
+  }
+  getSelected(){
+    return this.selected;
+  }
+  setSelected(selected){
+    this.selected = selected;
+  }
+}
+
+@Component({
+  selector: 'app-ac',
+  templateUrl: './ac.component.html',
+  providers:[ServiceService],
+  styleUrls: ['./ac.component.css']
+})
+
+export class AcComponent implements OnInit {
+
+  currentStep = 1;
+  org:string;
+  desc:string;
+  selection = [];
+  selectedAll = false;
+  selectedAllTarget = false;
+  selectionTarget = [];
+  map = [];
+  mappings = [];
+  matches = [];
+  dataAsset = '';
+  rules = '';
+  currentDB = '';
+  currentTable = '';
+  currentDBTarget = '';
+  currentTableTarget = '';
+  schemaCollection:Col[];
+  schemaCollectionTarget:Col[];
+  matchFunctions = ['=', '!=', '>', '>=','<',"<="];
+  data:any;
+
+  measureTypes = ['accuracy','validity','anomaly detection','publish metrics'];
+  type = 'accuracy';
+  newMeasure = {
+    "name":'',
+    "process.type": "batch",
+    "owner":"",
+    "description":"",
+    "organization":"",
+    "data.sources": [
+    {
+      "name": "source",
+      "connectors": [
+        {
+          "type": "HIVE",
+          "version": "1.2",
+          "config":{
+            "database":'',
+            "table.name":'',
+          }
+        }
+      ]
+    }, {
+      "name": "target",
+      "connectors": [
+        {
+          "type": "HIVE",
+          "version": "1.2",
+          "config":{
+            "database":'',
+            "table.name":'',
+          }
+        }
+      ]
+    }
+    ],
+
+    "evaluateRule":{
+        "rules": [
+          {
+            "dsl.type": "griffin-dsl",
+            "dq.type": "accuracy",
+            "rule": ""
+            // "details": {
+            //   "source": "source",
+            //   "target": "target",
+            //   "miss.records": {
+            //     "name": "miss.records",
+            //     "persist.type": "record"
+            //   },
+            //   "accuracy": {
+            //     "name": "accu",
+            //     "persist.type": "metric"
+            //   },
+            //   "miss": "miss",
+            //   "total": "total",
+            //   "matched": "matched"
+            // }
+          }
+        ]
+    }
+  };
+  name:'';
+  evaluateRule:any;
+  // desc:'';
+  // org:'';
+  owner = 'test';
+  createResult :any;
+
+  private toasterService: ToasterService;
+  public visible = false;
+  public visibleAnimate = false;
+
+  public hide(): void {
+    this.visibleAnimate = false;
+    setTimeout(() => this.visible = false, 300);
+  }
+
+  public onContainerClicked(event: MouseEvent): void {
+    if ((<HTMLElement>event.target).classList.contains('modal')) {
+      this.hide();
+    }
+  }
+
+  addMapping(x,i){   
+    this.mappings[i] = x;
+  }
+
+  toggleSelection (row) {
+      row.selected = !row.selected;
+      var idx = this.selection.indexOf(row.name);
+      // is currently selected
+      if (idx > -1) {
+          this.selection.splice(idx, 1);
+          this.selectedAll = false;
+      }
+      // is newly selected
+      else {
+          this.selection.push(row.name);
+      }
+  };
+
+  toggleSelectionTarget (row) {
+      row.selected = !row.selected;
+      var idx = this.selectionTarget.indexOf(row.name);
+      // is currently selected
+      if (idx > -1) {
+          this.selectionTarget.splice(idx, 1);
+          this.selectedAllTarget = false;
+      }
+      // is newly selected
+      else {
+          this.selectionTarget.push(row.name);
+      }
+      let l = this.selectionTarget.length;
+      for(let i =0;i<l;i++)
+        this.matches[i] = "=";
+  };
+
+  toggleAll () {
+    this.selectedAll = !this.selectedAll;
+    this.selection = [];
+    for(var i =0; i < this.schemaCollection.length; i ++){
+      this.schemaCollection[i].selected = this.selectedAll;
+      if (this.selectedAll) {
+          this.selection.push(this.schemaCollection[i].name);
+          this.matches[i] = "=";
+      }
+    }
+  };
+
+  toggleAllTarget () {
+    this.selectedAllTarget = !this.selectedAllTarget;
+    this.selectionTarget = [];
+    for(var i =0; i < this.schemaCollectionTarget.length; i ++){
+      this.schemaCollectionTarget[i].selected = this.selectedAllTarget;
+      if (this.selectedAllTarget) {
+          this.selectionTarget.push(this.schemaCollectionTarget[i].name);
+      }
+    }
+  };
+
+  next (form) {
+    if(this.formValidation(this.currentStep)){
+      this.currentStep++;
+    }else{
+      this.toasterService.pop('error','Error!','Please select at least one attribute!');
+          return false;
+    }
+  }
+
+  formValidation = function(step) {
+       if (step == undefined) {
+           step = this.currentStep;
+       }
+       if (step == 1) {
+           return this.selection && this.selection.length > 0;
+       } else if (step == 2) {
+           return (this.selectionTarget && this.selectionTarget.length > 0)//at least one target is selected
+                   // && !((this.currentTable.name == this.currentTableTarget.name)&&(this.currentDB.name == this.currentDBTarget.name));//target and source should be different
+       } else if (step == 3) {
+           return this.selectionTarget && this.selectionTarget.length == this.mappings.length
+                   && this.mappings.indexOf('') == -1
+       } else if (step == 4) {
+       }
+       return false;
+   } 
+
+  prev (form) {
+      this.currentStep--;
+  }
+  goTo (i) {
+      this.currentStep = i;
+  }
+  submit (form) {                
+      // form.$setPristine();
+      if (!form.valid) {
+        this.toasterService.pop('error', 'Error!', 'please complete the form in this step before proceeding');
+        return false;
+      }
+      var rule = '';
+      this.newMeasure = {
+         "name":this.name,
+         "process.type": "batch",
+         "owner":this.owner,
+         "description":this.desc,
+         "organization":this.org,
+         "data.sources": [
+         {
+           "name": "source",
+           "connectors": [
+             {
+               "type": "HIVE",
+               "version": "1.2",
+               "config":{
+                 "database":this.currentDB,
+                 "table.name":this.currentTable,
+               }
+             }
+           ]
+         }, {
+           "name": "target",
+           "connectors": [
+             {
+               "type": "HIVE",
+               "version": "1.2",
+               "config":{
+                 "database":this.currentDBTarget,
+                 "table.name":this.currentTableTarget,
+               }
+             }
+           ]
+         }
+         ],
+     
+         "evaluateRule":{
+             "rules": [
+               {
+                 "dsl.type": "griffin-dsl",
+                 "dq.type": "accuracy",
+                 "rule": ""
+                 // "details": {
+                 //   "source": "source",
+                 //   "target": "target",
+                 //   "miss.records": {
+                 //     "name": "miss.records",
+                 //     "persist.type": "record"
+                 //   },
+                 //   "accuracy": {
+                 //     "name": "accu",
+                 //     "persist.type": "metric"
+                 //   },
+                 //   "miss": "miss",
+                 //   "total": "total",
+                 //   "matched": "matched"
+                 // }
+               }
+             ]
+         }
+      };
+      var mappingRule = function(src, tgt, matches) {
+          var rules;
+          rules = 'source.' + src  + matches + 'target.' + tgt
+          return rules;
+      }
+      var self = this;
+      var rules = this.selectionTarget.map(function(item, i) {
+          return mappingRule(self.selection[i], item, self.matches[i]);
+      });
+      rule = rules.join(" AND ");
+      this.rules = rule;
+      this.newMeasure.evaluateRule.rules[0].rule = rule;
+      // for(var i =0; i < this.selectionTarget.length; i ++){
+      //   this.newMeasure.mappings.push({target:this.selectionTarget[i],
+      //                   // src:this.mappings[i],
+      //                   matchMethod: this.matches[i]});
+      // }
+      this.visible = true;
+      setTimeout(() => this.visibleAnimate = true, 100);
+  }
+
+  save() {
+
+    var addModels = this.servicecService.config.uri.addModels;
+
+    this.http
+    .post(addModels, this.newMeasure)
+    .subscribe(data => {
+        this.createResult = data;
+        this.hide();
+        this.router.navigate(['/measures']);
+        // var self = this;
+        // setTimeout(function () {
+        //   self.hide();
+        //   self.router.navigate(['/measures']);
+        // },0)
+    },
+    err => {
+      console.log('Something went wrong!');
+    });
+    
+  }
+
+  // data: { [key: string]: Array<object>; } = {
+  //   "default": [
+  //       {
+  //           "tableName": "ext",
+  //           "dbName": "default",
+  //           "owner": "hadoop",
+  //           "createTime": 1488353464,
+  //           "lastAccessTime": 0,
+  //           "retention": 0,
+  //           "sd": {
+  //               "cols": [
+  //                   {
+  //                       "name": "id",
+  //                       "type": "int",
+  //                       "comment": null,
+  //                       "setName": true,
+  //                       "setComment": false,
+  //                       "setType": true
+  //                   },
+  //                   {
+  //                       "name": "name",
+  //                       "type": "string",
+  //                       "comment": null,
+  //                       "setName": true,
+  //                       "setComment": false,
+  //                       "setType": true
+  //                   },
+  //                   {
+  //                       "name": "age",
+  //                       "type": "int",
+  //                       "comment": null,
+  //                       "setName": true,
+  //                       "setComment": false,
+  //                       "setType": true
+  //                   }
+  //               ],
+  //               "location": "hdfs://10.9.246.187/user/hive/ext",
+  //           },
+  //       },
+  //       {
+  //           "tableName": "ext1",
+  //           "dbName": "default",
+  //           "owner": "hadoop",
+  //           "createTime": 1489382943,
+  //           "lastAccessTime": 0,
+  //           "retention": 0,
+  //           "sd": {
+  //               "cols": [
+  //                   {
+  //                       "name": "id",
+  //                       "type": "int",
+  //                       "comment": null,
+  //                       "setName": true,
+  //                       "setComment": false,
+  //                       "setType": true
+  //                   },
+  //                   {
+  //                       "name": "name",
+  //                       "type": "string",
+  //                       "comment": null,
+  //                       "setName": true,
+  //                       "setComment": false,
+  //                       "setType": true
+  //                   },
+  //                   {
+  //                       "name": "age",
+  //                       "type": "int",
+  //                       "comment": null,
+  //                       "setName": true,
+  //                       "setComment": false,
+  //                       "setType": true
+  //                   }
+  //               ],
+  //               "location": "hdfs://10.9.246.187/user/hive/ext1",
+  //           },
+  //       }
+  //   ],
+  //   "griffin": [
+  //       {
+  //           "tableName": "avr_out",
+  //           "dbName": "griffin",
+  //           "owner": "hadoop",
+  //           "createTime": 1493892603,
+  //           "lastAccessTime": 0,
+  //           "retention": 0,
+  //           "sd": {
+  //               "cols": [
+  //                   {
+  //                       "name": "id",
+  //                       "type": "bigint",
+  //                       "comment": null,
+  //                       "setName": true,
+  //                       "setComment": false,
+  //                       "setType": true
+  //                   },
+  //                   {
+  //                       "name": "age",
+  //                       "type": "int",
+  //                       "comment": null,
+  //                       "setName": true,
+  //                       "setComment": false,
+  //                       "setType": true
+  //                   },
+  //                   {
+  //                       "name": "desc",
+  //                       "type": "string",
+  //                       "comment": null,
+  //                       "setName": true,
+  //                       "setComment": false,
+  //                       "setType": true
+  //                   }
+  //               ],
+  //               "location": "hdfs://10.9.246.187/griffin/data/batch/avr_out",
+  //           },
+  //       }
+  //   ],
+  // };
+  
+  options: ITreeOptions = {
+    displayField: 'name',
+    isExpandedField: 'expanded',
+    idField: 'id',
+    actionMapping: {
+      mouse: {
+        click: (tree, node, $event) => {
+          if (node.hasChildren) {
+            this.currentDB = node.data.name;
+            this.currentTable = '';
+            TREE_ACTIONS.TOGGLE_EXPANDED(tree, node, $event);
+          }
+          else if(node.data.cols)
+          {
+            this.currentTable = node.data.name;
+            this.currentDB = node.data.parent;
+            this.schemaCollection = node.data.cols;
+          }
+        }
+      }
+    },
+    animateExpand: true,
+    animateSpeed: 30,
+    animateAcceleration: 1.2
+  };
+
+  targetOptions: ITreeOptions = {
+    displayField: 'name',
+    isExpandedField: 'expanded',
+    idField: 'id',
+    actionMapping: {
+      mouse: {
+        click: (tree, node, $event) => {
+          if (node.hasChildren) {
+            this.currentDBTarget = node.data.name;
+            this.currentTableTarget = '';
+            TREE_ACTIONS.TOGGLE_EXPANDED(tree, node, $event);
+          }
+          else if(node.data.cols)
+          {
+            this.currentTableTarget = node.data.name;
+            this.currentDBTarget = node.data.parent;
+            this.schemaCollectionTarget = node.data.cols;
+          }
+        }
+      }
+    },
+    animateExpand: true,
+    animateSpeed: 30,
+    animateAcceleration: 1.2
+  };
+
+  nodeList:object[];
+  nodeListTarget:object[];
+  constructor(toasterService: ToasterService,private http: HttpClient,private router:Router,public servicecService:ServiceService) {
+    this.toasterService = toasterService;
+  };
+  
+  onResize(event){
+    console.log("Width: " + event.target.innerWidth);
+   this.resizeWindow();
+  }
+
+  resizeWindow(){
+      var stepSelection = '.formStep[id=step-' + this.currentStep + ']';
+                    $(stepSelection).css({
+                        height: window.innerHeight - $(stepSelection).offset().top
+                    });
+  }
+
+  ngOnInit() {
+    var allDataassets = this.servicecService.config.uri.dataassetlist;
+    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.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.nodeListTarget = JSON.parse(JSON.stringify(this.nodeList));
+    });
+    
+  };
+}

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/src/app/measure/create-measure/create-measure.component.css
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/measure/create-measure/create-measure.component.css b/ui/angular/src/app/measure/create-measure/create-measure.component.css
new file mode 100644
index 0000000..4e3c6f7
--- /dev/null
+++ b/ui/angular/src/app/measure/create-measure/create-measure.component.css
@@ -0,0 +1,123 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+@import url('../../../../node_modules/angular2-toaster/toaster.css');
+@import url('../measure.component.css');
+
+div.tree div.tree-children::before,
+div.tree::before {
+    content: "";
+    position: absolute;
+    border-left: 1px dotted #23527c;
+    height: 100%;
+    top: -14px;
+    left: 12px
+}
+
+div.tree {
+    padding-left: 0;
+    margin-left: -5px
+}
+
+div.tree div.tree-children {
+    position: relative;
+    padding-left: 0;
+    margin-left: 16px
+}
+
+div.tree div.tree-children::before {
+    left: 5px
+}
+
+div.tree treenode>div>.node-wrapper {
+    margin-left: 24px
+}
+
+div.tree treenode>div>.node-wrapper>.node-content-wrapper {
+    margin-left: 4px
+}
+
+div.tree treenode>div.tree-node-leaf>.node-wrapper {
+    margin-left: 0
+}
+
+div.tree treenode>div::before {
+    content: "";
+    position: absolute;
+    border-bottom: 1px dotted #23527c;
+    width: 7px;
+    margin-top: 12px;
+    left: 7px
+}
+
+div.tree treenode>div .toggle-children-wrapper {
+    width: 13px;
+    height: 13px;
+    border: 1px solid #23527c;
+    position: absolute;
+    left: 15px;
+    margin-top: 5px;
+    margin-left: 0;
+    display: inline-block;
+    background-color: #fff;
+    z-index: 1
+}
+
+div.tree treenode>div .toggle-children-wrapper::before {
+    content: "";
+    display: inline-block;
+    width: 7px;
+    border-top: 1px solid #23527c;
+    position: absolute;
+    top: 5px;
+    left: 2px
+}
+
+div.tree treenode>div .toggle-children-wrapper.toggle-children-wrapper-collapsed::after {
+    content: "";
+    display: inline-block;
+    height: 7px;
+    border-left: 1px solid #23527c;
+    position: absolute;
+    top: 2px;
+    left: 5px
+}
+
+div.tree treenode>div .toggle-children-wrapper .toggle-children {
+    display: none
+}
+
+div.tree treenode>div .node-content-wrapper {
+    margin-left: 4px
+}
+
+div.tree>treenode>div::before {
+    left: 14px
+}
+
+div.tree>treenode>div>.node-wrapper>treenodeexpander>.toggle-children-wrapper {
+    left: 22px
+}
+
+.panel{
+    background-color: #222222;
+}
+
+.panel-footer{
+    background-color: #3c3c3c;
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/src/app/measure/create-measure/create-measure.component.html
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/measure/create-measure/create-measure.component.html b/ui/angular/src/app/measure/create-measure/create-measure.component.html
new file mode 100644
index 0000000..fd8bdcb
--- /dev/null
+++ b/ui/angular/src/app/measure/create-measure/create-measure.component.html
@@ -0,0 +1,134 @@
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+<div class="container-fluid" id="main" >
+  <div class="row">
+    <h5 class="over-title margin-bottom-15">Create DQ Model</h5>
+  </div>
+  <div class="row">
+    <div class="col-lg-6 col-md-6 col-sm-6 ruletypes">
+      <section id="panel-1" class="panel panel-red" style="cursor:pointer" (click)="click('ac')">
+        <div class="panel-heading">
+          <span style="font-size:20px">Accuracy</span>
+          <span class="pull-right" style="font-size:20px">
+                <span class="fa fa-arrow-circle-right" (click)="click('ac')"></span>
+          </span>
+        </div>
+        <div class="swMain panel-body" >
+          <label class="label-definition">Definition: Measured by how the values agree with an identified source of truth</label>
+          <ul style="border-radius:0; background: none">
+              <li >
+                <a class="selected" >
+                  <div class="stepNumber">
+                    1
+                  </div>
+                  <span class="stepDesc text-small"> Choose Source </span>
+                </a>
+              </li>
+              <li>
+                <a>
+                  <div class="stepNumber">
+                    2
+                  </div>
+                  <span class="stepDesc text-small"> Choose Target </span>
+                </a>
+              </li>
+              <li >
+                <a>
+                  <div class="stepNumber">
+                    3
+                  </div>
+                  <span class="stepDesc text-small"> Mapping Source and Target </span>
+                </a>
+              </li>
+              <li>
+                <a>
+                  <div class="stepNumber">
+                    4
+                  </div>
+                  <span class="stepDesc text-small"> Configuration </span>
+                </a>
+              </li>
+            </ul>
+            <div>
+              <ol>
+                <li>Select the source dataset and fields which will be used for comparision</li>
+                <li>Select the target dataset and fields which will be used for comparision</li>
+                <li>Mapping the target fields with source</li>
+                <li>Set basic configuration for your model (name, system, threshold, etc.)</li>
+              </ol>
+            </div>
+          </div>
+          <div class="panel-footer stepDesc">
+            <label>Example:</label> suppose source table A has 1000 records and target table B only has 999 records pefectly matched with A for selected fields, then
+            Accuracy Rate(%) = 999/1000 * 100% = 99.9%
+          </div>
+        </section>
+      </div>
+      <div class="col-lg-6 col-md-6 col-sm-6 ruletypes">
+        <section id="panel-2"  class="panel panel-primary"  (click)="click('pr')">
+          <div class="panel-heading">
+            <span style="font-size:20px">Data Profiling</span>
+            <span class="pull-right" style="font-size:20px">
+                  <span class="fa fa-arrow-circle-right"></span>
+            </span>
+          </div>
+          <div class="swMain panel-body" >
+            <label class="label-definition">Definition: Data profiling is the process of examining the data available in an existing data set and collecting statistics and information about that data</label>
+            <ul style="border-radius:0; background: none">
+                <li >
+                  <a class="selected" style="cursor:default">
+                    <div class="stepNumber">
+                      1
+                    </div>
+                    <span class="stepDesc text-small"> Choose Target </span>
+                  </a>
+                </li>
+                <li>
+                  <a  style="cursor:default" >
+                    <div class="stepNumber">
+                      2
+                    </div>
+                    <span class="stepDesc text-small">Define/Select Models </span>
+                  </a>
+                </li>
+                <li >
+                  <a style="cursor:default" >
+                    <div class="stepNumber">
+                      3
+                    </div>
+                    <span class="stepDesc text-small"> Configuration </span>
+                  </a>
+                </li>
+              </ul>
+              <div>
+                <ol>
+                  <li>Select the target dataset and fields which want to be checked</li>
+                  <li>Define your syntax check logic which will be applied on the selected fields</li>
+                  <li>Set basic configuration for your model(name, system, threshold, etc.)</li>
+                </ol>
+              </div>
+            </div>
+            <div class="panel-footer stepDesc">
+              <label>Example:</label> Check the data range(minimum, maximum) within a set of allowable values
+            </div>
+          </section>
+      </div>
+    </div><!--//row-->
+</div>

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

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/src/app/measure/create-measure/create-measure.component.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/measure/create-measure/create-measure.component.ts b/ui/angular/src/app/measure/create-measure/create-measure.component.ts
new file mode 100644
index 0000000..ea89cf2
--- /dev/null
+++ b/ui/angular/src/app/measure/create-measure/create-measure.component.ts
@@ -0,0 +1,52 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+import { Component, OnInit } from '@angular/core';
+import { FormControl} from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+
+import { TREE_ACTIONS, KEYS, IActionMapping, ITreeOptions } from 'angular-tree-component';
+import { BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import { ToasterModule, ToasterService, ToasterConfig} from 'angular2-toaster';
+import * as $ from 'jquery';
+import { HttpClient} from '@angular/common/http';
+import { Router} from "@angular/router";
+
+@Component({
+  selector: 'app-create-measure',
+  templateUrl: './create-measure.component.html',
+  styleUrls: ['./create-measure.component.css']
+})
+export class CreateMeasureComponent implements OnInit {
+
+  constructor(private router:Router) { }
+
+
+  ngOnInit() {
+  	$('#panel-2 >.panel-body').css({height: $('#panel-1 >.panel-body').outerHeight() + $('#panel-1 >.panel-footer').outerHeight() - $('#panel-2 >.panel-footer').outerHeight()});
+    $('#panel-4 >.panel-body').css({height: $('#panel-3 >.panel-body').outerHeight() + $('#panel-3 >.panel-footer').outerHeight() - $('#panel-4 >.panel-footer').outerHeight()});
+
+  }
+  click(type){
+  	this.router.navigate(['/createmeasure'+type]);
+  }
+
+
+}
+
+

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/src/app/measure/create-measure/pr/pr.component.css
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/measure/create-measure/pr/pr.component.css b/ui/angular/src/app/measure/create-measure/pr/pr.component.css
new file mode 100644
index 0000000..d7c4eb6
--- /dev/null
+++ b/ui/angular/src/app/measure/create-measure/pr/pr.component.css
@@ -0,0 +1,156 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+@import url('../../../../../node_modules/angular2-toaster/toaster.css');
+@import url('../../measure.component.css');
+
+div.tree div.tree-children::before,
+div.tree::before {
+    content: "";
+    position: absolute;
+    border-left: 1px dotted #23527c;
+    height: 100%;
+    top: -14px;
+    left: 12px
+}
+
+tree-root{
+    color: #999; 
+}
+
+div.tree {
+    padding-left: 0;
+    margin-left: -5px
+}
+
+div.tree div.tree-children {
+    position: relative;
+    padding-left: 0;
+    margin-left: 16px
+}
+
+div.tree div.tree-children::before {
+    left: 5px
+}
+
+div.tree treenode>div>.node-wrapper {
+    margin-left: 24px
+}
+
+div.tree treenode>div>.node-wrapper>.node-content-wrapper {
+    margin-left: 4px
+}
+
+div.tree treenode>div.tree-node-leaf>.node-wrapper {
+    margin-left: 0
+}
+
+div.tree treenode>div::before {
+    content: "";
+    position: absolute;
+    border-bottom: 1px dotted #23527c;
+    width: 7px;
+    margin-top: 12px;
+    left: 7px
+}
+
+div.tree treenode>div .toggle-children-wrapper {
+    width: 13px;
+    height: 13px;
+    border: 1px solid #23527c;
+    position: absolute;
+    left: 15px;
+    margin-top: 5px;
+    margin-left: 0;
+    display: inline-block;
+    background-color: #fff;
+    z-index: 1
+}
+
+div.tree treenode>div .toggle-children-wrapper::before {
+    content: "";
+    display: inline-block;
+    width: 7px;
+    border-top: 1px solid #23527c;
+    position: absolute;
+    top: 5px;
+    left: 2px
+}
+
+div.tree treenode>div .toggle-children-wrapper.toggle-children-wrapper-collapsed::after {
+    content: "";
+    display: inline-block;
+    height: 7px;
+    border-left: 1px solid #23527c;
+    position: absolute;
+    top: 2px;
+    left: 5px
+}
+
+div.tree treenode>div .toggle-children-wrapper .toggle-children {
+    display: none
+}
+
+div.tree treenode>div .node-content-wrapper {
+    margin-left: 4px
+}
+
+div.tree>treenode>div::before {
+    left: 14px
+}
+
+div.tree>treenode>div>.node-wrapper>treenodeexpander>.toggle-children-wrapper {
+    left: 22px
+}
+
+label{
+    font-weight: normal;
+}
+.container{
+    max-height: 40vh;
+    overflow-y:scroll;
+}
+
+.badgebox
+{
+    opacity: 0;
+}
+
+.badgebox + .badge
+{
+    /* Move the check mark away when unchecked */
+    text-indent: -999999px;
+    /* Makes the badge's width stay the same checked and unchecked */
+    width: 27px;
+}
+
+.badgebox:focus + .badge
+{
+    /* Set something to make the badge looks focused */
+    /* This really depends on the application, in my case it was: */
+    
+    /* Adding a light border */
+    box-shadow: inset 0px 0px 5px;
+    /* Taking the difference out of the padding */
+}
+
+.badgebox:checked + .badge
+{
+    /* Move the check mark back when checked */
+    text-indent: 0;
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/src/app/measure/create-measure/pr/pr.component.html
----------------------------------------------------------------------
diff --git a/ui/angular/src/app/measure/create-measure/pr/pr.component.html b/ui/angular/src/app/measure/create-measure/pr/pr.component.html
new file mode 100644
index 0000000..d667a80
--- /dev/null
+++ b/ui/angular/src/app/measure/create-measure/pr/pr.component.html
@@ -0,0 +1,392 @@
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+<div class="container-fluid">
+  <div class="row">
+    <h5 class="over-title margin-bottom-15">Create Measure</h5>
+  </div>
+  <div class="row">
+    <form name="Form" id="form" (ngSubmit)="submit(prForm)" #prForm="ngForm" novalidate>
+      <div id="wizard" class="swMain" >
+        <ul>
+          <li (click)="goTo(1)" >
+            <a [ngClass]="{'selected' : currentStep >= 1, 'done' : currentStep > 1}" class="selected">
+              <div class="stepNumber">
+                1
+              </div>
+              <span class="stepDesc text-small"> Choose Source </span>
+            </a>
+          </li>
+          <li (click)="goTo(2)">
+            <a [ngClass]="{'selected' : currentStep >= 2, 'done' : currentStep > 2}" class="" style="">
+              <div class="stepNumber">
+                2
+              </div>
+              <span class="stepDesc text-small"> Select Models </span>
+            </a>
+          </li>
+          <li (click)="goTo(3)">
+            <a [ngClass]="{'selected' : currentStep >= 3, 'done' : currentStep > 3}">
+              <div class="stepNumber">
+                3
+              </div>
+              <span class="stepDesc text-small"> Configuration </span>
+            </a>
+          </li>
+        </ul>
+      </div>
+
+        <div id="step-1" *ngIf="currentStep == 1" class="formStep" >
+          <label class="stepDesc">This step let you choose the single source of truth for data quality comparision with target. Currently you can only select the attributes from one schema</label>
+          <div class="container-fluid">
+           
+            <div class="col-md-4 col-lg-4 col-sm-4">
+              <fieldset>
+                <legend>Please select schema</legend>
+                <tree-root [nodes]="nodeList" [options]="options"></tree-root>
+              </fieldset>
+            </div>
+            <div class="col-md-8 col-lg-8 col-sm-8">
+              <fieldset>
+                <legend>
+                  Select attributes
+                </legend>
+                <div class="y-scrollable">
+                  <div>
+                    <label>View schema:</label> 
+                    <i
+                    style="color:#fff;font-weight: bold;">{{currentDB}}.{{currentTable}}
+                    </i>
+                  </div>
+                  <div>
+                    <table class="table table-striped">
+                      <thead>
+                      <tr style="background-color:#7D95CC">
+                        <th><input type="checkbox" (click)="toggleAll()" [checked]="selectedAll"
+                        /></th>
+                        <th>Column Name</th>
+                        <th>Type</th>
+                        <th>Comment</th>
+                      </tr>
+                      </thead>
+                      <tbody>
+                      <tr *ngIf="!schemaCollection || schemaCollection.length == 0">
+                        <td colspan="5" style="text-align:center" ><span class="highlight">Please select a schema from the left tree first</span></td>
+                      </tr>
+                      <tr *ngFor="let row of schemaCollection">
+                        <td>
+                        <input type="checkbox" (click)='toggleSelection(row)' [checked]="row.selected" value={{row.name}}
+                        />
+                        </td>
+                        <td>{{row.name}}</td>
+                        <td>{{row.type}}</td>
+                        <td>{{row.comment}}</td>
+                      </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+              </fieldset>
+            </div>
+            <div class="form-group btn-container">
+              <toaster-container></toaster-container>
+              <button class="btn btn-primary btn-o next-step btn-wide pull-right" (click)="next(Form)">
+                Next <i class="fa fa-arrow-circle-right"></i>
+              </button>
+            </div>
+          </div>
+        </div>
+        
+        <div id="step-2" *ngIf="currentStep == 2" class="formStep" >
+        <label class="stepDesc">Please choose one of the profiling models provided below:</label>
+        <div class="container-fluid">
+          <div class="col-md-12 col-lg-12 col-sm-12">
+            <fieldset>
+              <div class="y-scrollable">
+                <div class="container col-md-12 col-lg-12 col-sm-12">
+                  <div class="row">
+                    <div class="col-md-12 col-lg-12 col-sm-12" *ngFor="let item of selection;let itemIndex = index" >
+                      <p style="font-weight: bold;font-size: 120%;cursor:pointer" 
+                      (click)="item.isExpanded = !item.isExpanded">
+                      <i *ngIf="!item.isExpanded" class="fa fa-chevron-circle-right blue"></i>
+                      <i *ngIf="item.isExpanded" class="fa fa-chevron-circle-down blue"></i>&nbsp;{{currentDB}}.{{currentTable}}.{{item.name}}
+                      <i>:{{item.ruleLength}}&nbsp;rules</i>
+                      </p>
+                      <div *ngIf="item.isExpanded">
+                        <div id="simple{{itemIndex}}">
+                          <h5>Simple Statistics</h5>
+                          <div *ngFor="let rule of item.newRules;let ruleIndex = index" >
+                            <div *ngIf="rule!=null">
+                              <a class="btn btn-primary btn-o" style="background-color: #337ab7;" 
+                          (click)="removeRule(item,ruleIndex)">
+                                <i class="fa fa-times"></i>
+                              </a>
+                              <label style="width: 7%;text-align:center;">Rule:</label>
+                              <select class="form-control" style="width: 25%;display: inline-block;" 
+                              id="simpleRule" name='simpleRule-{{itemIndex}}{{ruleIndex}}' [(ngModel)]='rule.type'>
+                                <option>Total Count</option>
+                                <option>Distinct Count</option>
+                                <option>Null Detection Count</option>
+                                <option *ngIf="item.type=='string'||item.type=='varchar'||item.type=='char'">Regular Expression Detection Count</option>
+                                <option>Rule Detection Count</option>
+                                <option *ngIf='item.isNum'>Maximum</option>
+                                <option *ngIf='item.isNum'>Minimum</option>
+                                <option *ngIf='item.isNum'>Median</option>
+                                <option *ngIf='item.isNum'>Average</option>
+                                <option>Enum Detection Count</option>
+                              </select>
+                              <!-- <a class="btn btn-primary btn-o" style="background-color: #337ab7;"
+                              (click)="addCond(item,ruleIndex)">
+                                <i class="fa fa-plus"></i>
+                              </a> -->
+                              <div style="display: inline-block;font-size: 130%;vertical-align: middle;" *ngFor="let cond of rule.conditionGroup;let condIndex=index">
+                                <input type="checkbox" 
+                                name="condition-{{itemIndex}}{{ruleIndex}}{{condIndex}}" 
+                                value="cond.type" 
+                                (click)='toggleSelectionCond(cond,condIndex,ruleIndex,item)'  
+                                [disabled]="!cond.avaliable" [(ngModel)]="cond.chosen" style="width:18px;height: 18px;">
+                                <!-- <span class="badge">&check;</span> -->
+                                <label>{{cond.type}}</label>
+                                <br>
+                              </div>
+                              <div *ngFor="let cond of rule.conditionGroup;let condIndex=index" style="margin-left:12%;">
+                                <label style="width: 7%;" *ngIf="cond.chosen">{{cond.type}}</label>
+                                <input *ngIf="cond.chosen" 
+                                name="conditionDetail-{{itemIndex}}{{ruleIndex}}{{condIndex}}" type="text" class="form-control" style="width: 40%;display: inline-block;" [(ngModel)]="cond.content"/>
+                              </div>
+                        
+                            </div> 
+
+                          </div>
+                         
+                           <a class="btn btn-primary btn-o" style="background-color: #337ab7;" 
+                          (click)="addRule(item)">
+                              <i class="fa fa-plus"></i>
+                            </a>
+                        <br>
+                      </div>
+                      </div>
+                    </div>
+                    <!-- <div class="col-md-9 col-lg-9 col-sm-9" ng-include="'/pages/rules/va-explaination.html'">
+                    </div> -->
+                  </div>
+                </div>
+              </div>
+            </fieldset>
+          </div>
+          <div class="form-group btn-container" >
+            <button class="btn btn-primary btn-o back-step btn-wide pull-left" (click)="prev(Form)">
+                <i class="fa fa-arrow-circle-left"></i> Back
+            </button>
+            <toaster-container></toaster-container>
+            <button class="btn btn-primary btn-o next-step btn-wide pull-right" (click)="next(Form)">
+                Next <i class="fa fa-arrow-circle-right"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div id="step-3" *ngIf="currentStep == 3" 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">
+              <fieldset>
+                <legend>
+                  Required Information
+                </legend>
+                <div class="y-scrollable">
+                  <div class="col-md-12 col-lg-12 col-sm-12">
+                    <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)]="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">
+                      <label for="typeSelector" class="col-md-2 col-lg-2 col-sm-2 control-label">
+                        Measure Type:
+                      </label>
+                      <div class="col-md-10 col-lg-10 col-sm-10 ">
+                        <select id="typeSelector" class="form-control" [(ngModel)]="type"  disabled required name="type">
+                          <option>{{type}}</option>
+                        </select>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-md-12 col-lg-12 col-sm-12">
+                    <div class="form-group">
+                      <label for="systemSelector" class="col-md-2 col-lg-2 col-sm-2 control-label">
+                        Organization:
+                      </label>
+                      <div class="col-md-10 col-lg-10 col-sm-10 ">
+                        <input type="text" id="systemSelector" class="form-control"  required ng-pattern="'([0-9a-zA-Z\\_\\-])+'" name="org" value="{{currentDB}}" disabled>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-md-12 col-lg-12 col-sm-12">
+                    <div class="form-group">
+                      <label class="col-md-2 col-lg-2 col-sm-2 control-label">
+                        DataAsset:
+                      </label>
+                      <div class="col-md-10 col-lg-10 col-sm-10">
+                        <input type="text" class="form-control" name="DataAsset"
+                        value="{{currentTable}}" disabled>
+                      </div>
+                    </div>
+                  </div>
+                  <!-- <div class="col-md-12 col-lg-12 col-sm-12">
+                    <div class="form-group">
+                      <label class="col-md-2 col-lg-2 col-sm-2 control-label">
+                        Owner:
+                      </label>
+                      <div class="col-md-10 col-lg-10 col-sm-10">
+                        <input type="text"  class="form-control" name="owner" disabled
+                        [(ngModel)]="owner" >
+                      </div>
+                    </div>
+                  </div> -->
+                </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
+                  </p>
+                </div>
+              </fieldset>
+            </div>
+
+            <div class="form-group btn-container" >
+              <button class="btn btn-primary btn-o back-step btn-wide pull-left" (click)="prev(Form)">
+                <i class="fa fa-arrow-circle-left"></i> Back
+              </button>
+              <toaster-container></toaster-container>
+              <button type="submit" class="btn btn-primary btn-o next-step btn-wide pull-right">
+                Submit
+              </button>
+            </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-dialog modal-xg modal-lg">
+            <div class="modal-content">
+              <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+                <h4 class="modal-title">Save the measure with the below information?</h4>
+              </div>
+              <div class="modal-body">
+                <div class="container-fluid" id="viewruleContent" style="overflow:auto;">
+                  <div class="row">
+                    <h5 class="over-title margin-bottom-15">Basic information</h5>
+                  </div>
+                  <div class="row">
+                    <div  class="col-lg-12 col-md-12 col-sm-12">
+                      <div id="viewrule-definition" class="viewrule-content">
+                        <div class="row">
+                          <label class="col-md-4 col-lg-4 col-sm-4">
+                            Measure Name:
+                          </label>
+                          <div class="col-md-8 col-lg-8 col-sm-8 ">
+                            {{name}}
+                          </div>
+                        </div>
+                        <div class="row">
+                          <label class="col-md-4 col-lg-4 col-sm-4">
+                            Measure Type:
+                          </label>
+                          <div class="col-md-8 col-lg-8 col-sm-8 ">
+                            {{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 ">
+                            {{currentDB}}
+                          </div>
+                        </div>
+                        <div class="row">
+                          <label class="col-md-4 col-lg-4 col-sm-4">
+                            DataAsset:
+                          </label>
+                          <div class="col-md-8 col-lg-8 col-sm-8">
+                          {{currentTable}}
+                          </div>
+                        </div>
+<!--                         <div class="row">
+                          <label class="col-md-4 col-lg-4 col-sm-4">
+                            Owner:
+                          </label>
+                          <div class="col-md-8 col-lg-8 col-sm-8" >
+                            {{owner}}
+                          </div>
+                        </div> -->
+                        
+                      </div>
+                    </div>
+                  </div>
+                  <h5 class="row">Rules</h5>
+                    <div class="row" *ngFor = "let newRule of newMeasure.evaluateRule.rules">
+                      {{newRule.rule}}
+                    </div>
+                  <br/>
+                  <!-- <h5 class="row">Mapping rules</h5> -->
+                  <!-- <div class="row">
+                    <p>{{rules}}</p>
+                    <p>
+                      <label style="color:#B2C831">Accuracy Calculation Formula as Below:</label>
+                    </p>
+                    <div class="col-md-12 col-lg-12 col-sm-12" style="color:#fff;font-size:16px;display: flex;                align-items: center">
+                      <div class="" style="text-align:right;display:block;float:left;width:20%;">
+                        Accuracy Rate(%) =
+                      </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">{{selectionTarget.length}}</span> <span style="color:green;">{{currentTableTarget}}</span>  and <span class="badge">{{mappings.length}}
+                          </span> <span style="color:green;">{{currentTable}}</span>  fields
+                        </div>
+                        <div>
+                          Total Count of records in <span style="color:green;font-weight:bold;">{{currentDB}}.{{currentTable}}</span>
+                        </div>
+                      </div>
+                      <div class="" style="text-align:left;display:block;float:left;width:10%;">
+                        x 100%
+                      </div>
+                    </div>
+                  </div> -->
+                </div>
+              </div>
+              <div class="modal-footer">
+                <button type="button" class="btn btn-default" (click)="hide()">Cancel</button>
+                <button type="button" class="btn btn-primary" (click)="save()">Save</button>
+              </div>
+            </div>
+          </div>
+        </div>
+    </form>
+  </div>
+</div>

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

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/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
new file mode 100644
index 0000000..4e80080
--- /dev/null
+++ b/ui/angular/src/app/measure/create-measure/pr/pr.component.ts
@@ -0,0 +1,580 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+import { Component, OnInit } 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";
+
+
+class node {
+  name: string;
+  id: number;
+  children:object[];
+  isExpanded:boolean;
+  cols:Col[];
+  parent:string;
+};
+
+class Rule{
+  type:string;
+  conditionGroup = [
+    {
+      'type':'where',
+      'content':'',
+      'chosen':false,
+      'avaliable':true
+    },
+    {
+      'type':'groupby',
+      'content':'',
+      'chosen':false,
+      'avaliable':true
+    },
+    {
+      'type':'having',
+      'content':'',
+      'chosen':false,
+      'avaliable':false
+    },
+    {
+      'type':'orderby',
+      'content':'',
+      'chosen':false,
+      'avaliable':true
+    },
+    {
+      'type':'limit',
+      'content':'',
+      'chosen':false,
+      'avaliable':true
+    }
+  ];
+}
+
+class Col{
+  name:string;
+  type:string;
+  comment:string;
+  selected :boolean;
+  isNum:boolean;
+  isExpanded:boolean;
+  // rules:string[];
+  groupby:string;
+  RE:string;
+  newRules:Rule[];
+  ruleLength = 0;
+  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.RE = '';
+    this.newRules = [
+    ];
+    
+    var patt = new RegExp('int|double|float/i');
+    if(patt.test(this.type)){
+      this.isNum = true;
+    }
+    // this.rules = [];
+  }
+}
+
+@Component({
+  selector: 'app-pr',
+  templateUrl: './pr.component.html',
+  providers:[ServiceService],
+  styleUrls: ['./pr.component.css']
+})
+export class PrComponent implements OnInit {
+
+  currentStep = 1;
+  firstCond = false;
+  selection : Col[];
+  selectedAll = false;
+  rules = '';
+  currentDB = '';
+  currentTable = '';
+  schemaCollection:Col[];
+  totallen = 0;
+  type = 'profiling';
+  data:any;
+  newMeasure = {
+    "name": "",
+    "process.type": "batch",
+    "data.sources": [
+      {
+        "name": "source",
+        "connectors": [
+          {
+            "type": "hive",
+            "version": "1.2",
+            "config": {
+              "database": "",
+              "table.name":""
+            }
+          }
+        ]
+      }
+    ],
+    "evaluateRule": {
+      "rules": [
+        {
+          "dsl.type": "griffin-dsl",
+          "dq.type": "profiling",
+          "rule": ""
+          // "details": {}
+        }
+      ]
+    }
+  };
+  name:'';
+  createResult :any;
+  newCond:any;
+
+  private toasterService: ToasterService;
+  public visible = false;
+  public visibleAnimate = false;
+
+  public hide(): void {
+    this.visibleAnimate = false;
+    setTimeout(() => this.visible = false, 300);
+  }
+
+  public onContainerClicked(event: MouseEvent): void {
+    if ((<HTMLElement>event.target).classList.contains('modal')) {
+      this.hide();
+    }
+  }
+
+  toggleSelectionCond(cond,condIndex,ruleIndex,item){
+    cond.chosen = !cond.chosen;
+    if(condIndex==1&&cond.chosen)
+      item.newRules[ruleIndex].conditionGroup[2].avaliable = true;
+    if(condIndex==1&&!cond.chosen){
+      item.newRules[ruleIndex].conditionGroup[2].avaliable = false;
+      item.newRules[ruleIndex].conditionGroup[2].chosen = false;
+    }
+  }
+
+  toggleSelection (row) {
+      row.selected = !row.selected;
+      console.log(row);
+      var idx = this.selection.indexOf(row);
+      // is currently selected
+      if (idx > -1) {
+          this.selection.splice(idx, 1);
+          this.selectedAll = false;
+      }
+      // is newly selected
+      else {
+          this.selection.push(row);
+      }
+  };
+
+  toggleAll () {
+    this.selectedAll = !this.selectedAll;
+    this.selection = [];
+    for(var i =0; i < this.schemaCollection.length; i ++){
+      this.schemaCollection[i].selected = this.selectedAll;
+      if (this.selectedAll) {
+          this.selection.push(this.schemaCollection[i]);
+      }
+    }
+  };
+
+  transferRule(rule,col){
+    switch(rule){
+      case 'Total Count':
+        return 'count(source.'+col.name+') ';
+      case 'Distinct Count':
+        return 'distinct count(source.'+col.name+') ';
+      case 'Null Detection Count':
+        return 'count(source.'+col.name+') 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 'Maxium':
+        return 'max(source.'+col.name+') ';
+      case 'Minimum':
+        return 'min(source.'+col.name+') ';
+      case 'Median':
+        return 'median(source.'+col.name+') ';
+      case 'Average':
+        return 'average(source.'+col.name+') ';
+      case 'Enum Detection Count':
+        return 'source.'+col.name+' group by source.'+col.name+'';
+      // case 'Groupby Count':
+      //   return 'source.'+col.name+' group by source.'+col.name+'';
+      // case 'total count':
+      //   return 'SELECT COUNT(*) FROM source';
+      // case 'distinct count':
+      //   return 'SELECT DISTINCT COUNT(source.'+col.name+') FROM source';
+      // case 'null detection count':
+      //   return 'SELECT COUNT(source.'+col.name+') FROM source WHERE source.'+col.name+' is null';
+      // case 'regular expression detection count':
+      //   return 'SELECT COUNT(source.'+col.name+') FROM source WHERE source.'+col.name+' like '+col.RE;
+      // case 'rule detection count':
+      //   return 'SELECT COUNT(source.'+col.name+') FROM source WHERE source.'+col.name+' like ';
+      // case 'max':
+      //   return 'SELECT max(source.'+col.name+') FROM source';
+      // case 'min':
+      //   return 'SELECT min(source.'+col.name+') FROM source';
+      // case 'median':
+      //   return 'SELECT median(source.'+col.name+') FROM source';
+      // case 'avg':
+      //   return 'SELECT average(source.'+col.name+') FROM source';
+      // case 'enum detection group count':
+      //   return 'source.'+col.name+' group by source.'+col.name+'';
+      // case 'groupby count':
+      //   return 'source.'+col.name+' group by source.'+col.name+' '+col.groupby;
+    }
+  }
+
+  addCond(item,ruleIndex){  }
+
+  addRule(item){
+    item.ruleLength++;
+    let newRule = new Rule();
+    item.newRules.push(newRule);
+  }
+
+  removeRule(item,ruleIndex){
+    item.ruleLength--;
+    item.newRules[ruleIndex] = null;
+  }
+
+  next (form) {
+    if(this.formValidation(this.currentStep)){
+      this.currentStep++;
+    }else{
+      this.toasterService.pop('error','Error!','Please select at least one attribute!');
+          return false;
+    }
+  }
+
+  formValidation = function(step) {
+    if (step == undefined) {
+        step = this.currentStep;
+    }
+    if (step == 1) {
+        return this.selection && this.selection.length > 0;
+    } else if (step == 2) {
+        for(let item of this.selection){
+          this.totallen = this.totallen + item.newRules.length;
+        }
+        return (this.totallen > 0)
+    } else if (step == 3) {
+    }
+    return false;
+  } 
+
+  prev (form) {
+      this.currentStep--;
+  }
+  goTo (i) {
+      this.currentStep = i;
+  }
+  submit (form) {                
+      // form.$setPristine();
+      // if (!form.valid) {
+      //   this.toasterService.pop('error', 'Error!', 'please complete the form in this step before proceeding');
+      //   return false;
+      // }
+      this.newMeasure = {
+        "name": this.name,
+        "process.type": "batch",
+        "data.sources": [
+          {
+            "name": "source",
+            "connectors": [
+              {
+                "type": "hive",
+                "version": "1.2",
+                "config": {
+                  "database": this.currentDB,
+                  "table.name":this.currentTable
+                }
+              }
+            ]
+          }
+        ],
+        "evaluateRule": {
+          "rules": [
+            {
+              "dsl.type": "griffin-dsl",
+              "dq.type": "profiling",
+              "rule": ""
+              // "details": {}
+            }
+          ]
+        }
+      };
+     
+      var self = this;
+      var rule = '';
+      for(let item of this.selection){
+          for(let itemRule of item.newRules){
+            console.log(self.transferRule(itemRule.type,item));
+            if(itemRule.conditionGroup[0].chosen==true){
+              let whereRule = self.transferRule(itemRule.type,item);
+              for(let condition of itemRule.conditionGroup){
+                if(condition.content!='')
+                  whereRule = whereRule + condition.type + ' ' + condition.content + ',';
+              }
+              self.newMeasure.evaluateRule.rules.push({
+                "dsl.type": "griffin-dsl",
+                "dq.type": "profiling",
+                "rule": whereRule,
+                // "details": {}
+              });
+            }
+            else {
+              let normalRule = self.transferRule(itemRule.type,item);
+              for(let condition of itemRule.conditionGroup){
+                if(condition.content!='')
+                  normalRule = normalRule + ' '+ condition.type + ' ' + condition.content + ',';
+              }
+              rule = rule + normalRule;
+            }
+          }
+      }
+      // this.newMeasure.evaluateRule.rules[0].rule = rule;
+      self.newMeasure.evaluateRule.rules.push({
+        "dsl.type": "griffin-dsl",
+        "dq.type": "profiling",
+        "rule": rule,
+        // "details": {}
+      });
+      this.visible = true;
+      setTimeout(() => this.visibleAnimate = true, 100);
+  }
+
+  save() {
+    console.log(this.newMeasure);
+    var addModels = this.servicecService.config.uri.addModels;
+    this.http
+    .post(addModels, this.newMeasure)
+    .subscribe(data => {
+        this.createResult = data;
+        this.hide();
+        this.router.navigate(['/measures']);
+    },
+    err => {
+      console.log('Something went wrong!');
+    });
+  }
+
+  // data: { [key: string]: Array<object>; } = {
+  //   "default": [
+  //       {
+  //           "tableName": "ext",
+  //           "dbName": "default",
+  //           "owner": "hadoop",
+  //           "createTime": 1488353464,
+  //           "lastAccessTime": 0,
+  //           "retention": 0,
+  //           "sd": {
+  //               "cols": [
+  //                   {
+  //                       "name": "id",
+  //                       "type": "int",
+  //                       "comment": null,
+  //                       "setName": true,
+  //                       "setComment": false,
+  //                       "setType": true
+  //                   },
+  //                   {
+  //                       "name": "name",
+  //                       "type": "string",
+  //                       "comment": null,
+  //                       "setName": true,
+  //                       "setComment": false,
+  //                       "setType": true
+  //                   },
+  //                   {
+  //                       "name": "age",
+  //                       "type": "int",
+  //                       "comment": null,
+  //                       "setName": true,
+  //                       "setComment": false,
+  //                       "setType": true
+  //                   }
+  //               ],
+  //               "location": "hdfs://10.9.246.187/user/hive/ext",
+  //           },
+  //       },
+  //       {
+  //           "tableName": "ext1",
+  //           "dbName": "default",
+  //           "owner": "hadoop",
+  //           "createTime": 1489382943,
+  //           "lastAccessTime": 0,
+  //           "retention": 0,
+  //           "sd": {
+  //               "cols": [
+  //                   {
+  //                       "name": "id",
+  //                       "type": "int",
+  //                       "comment": null,
+  //                       "setName": true,
+  //                       "setComment": false,
+  //                       "setType": true
+  //                   },
+  //                   {
+  //                       "name": "name",
+  //                       "type": "string",
+  //                       "comment": null,
+  //                       "setName": true,
+  //                       "setComment": false,
+  //                       "setType": true
+  //                   },
+  //                   {
+  //                       "name": "age",
+  //                       "type": "int",
+  //                       "comment": null,
+  //                       "setName": true,
+  //                       "setComment": false,
+  //                       "setType": true
+  //                   }
+  //               ],
+  //               "location": "hdfs://10.9.246.187/user/hive/ext1",
+  //           },
+  //       }
+  //   ],
+  //   "griffin": [
+  //       {
+  //           "tableName": "avr_out",
+  //           "dbName": "griffin",
+  //           "owner": "hadoop",
+  //           "createTime": 1493892603,
+  //           "lastAccessTime": 0,
+  //           "retention": 0,
+  //           "sd": {
+  //               "cols": [
+  //                   {
+  //                       "name": "id",
+  //                       "type": "bigint",
+  //                       "comment": null,
+  //                       "setName": true,
+  //                       "setComment": false,
+  //                       "setType": true
+  //                   },
+  //                   {
+  //                       "name": "age",
+  //                       "type": "int",
+  //                       "comment": null,
+  //                       "setName": true,
+  //                       "setComment": false,
+  //                       "setType": true
+  //                   },
+  //                   {
+  //                       "name": "desc",
+  //                       "type": "string",
+  //                       "comment": null,
+  //                       "setName": true,
+  //                       "setComment": false,
+  //                       "setType": true
+  //                   }
+  //               ],
+  //               "location": "hdfs://10.9.246.187/griffin/data/batch/avr_out",
+  //           },
+  //       }
+  //   ],
+  // };
+  
+  options: ITreeOptions = {
+    displayField: 'name',
+    isExpandedField: 'expanded',
+    idField: 'id',
+    actionMapping: {
+      mouse: {
+        click: (tree, node, $event) => {
+          if (node.hasChildren) {
+            this.currentDB = node.data.name;
+            this.currentTable = '';
+            TREE_ACTIONS.TOGGLE_EXPANDED(tree, node, $event);
+          }
+          else if(node.data.cols)
+          {
+            this.currentTable = node.data.name;
+            this.currentDB = node.data.parent;
+            this.schemaCollection = node.data.cols;
+          }
+        }
+      }
+    },
+    animateExpand: true,
+    animateSpeed: 30,
+    animateAcceleration: 1.2
+  };
+
+  nodeList:object[];
+  nodeListTarget:object[];
+
+  constructor(toasterService: ToasterService,private http: HttpClient,private router:Router,public servicecService:ServiceService) {
+    this.toasterService = toasterService;
+    this.selection = [];
+  };
+
+
+  ngOnInit() {
+    var allDataassets = this.servicecService.config.uri.dataassetlist;
+    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.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.nodeListTarget = JSON.parse(JSON.stringify(this.nodeList));
+
+    });
+    
+  };
+}

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

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/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
new file mode 100644
index 0000000..4552627
--- /dev/null
+++ b/ui/angular/src/app/measure/measure-detail/measure-detail.component.html
@@ -0,0 +1,105 @@
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+<div class="container-fluid" id="viewruleContent">
+    <div class="row">
+        <h5 class="over-title margin-bottom-15">View Measure</h5>
+    </div><!--//row-->
+    <div class="row">
+        <div  class="col-sm-6 col-xs-12">
+            <div id="viewruleDefinition" class="viewrule-content">
+                <div class="row">
+                    <label class="col-xs-4">
+                        Measure Name:
+                    </label>
+                    <div class="col-xs-8 " style="color: #fff">
+                        {{ruleData.name}}
+                    </div>
+                </div>
+                <div class="row">
+                    <label class="col-xs-4">
+                        Measure Description:
+                    </label>
+                    <div class="col-xs-8 " style="color: #fff">
+                        {{ruleData.description}}
+                    </div>
+                </div>
+                <div class="row">
+                    <label class="col-xs-4">
+                        Measure Type:
+                    </label>
+                    <div class="col-xs-8 " style="color: #fff">
+                        {{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">
+                    <label class="col-xs-4">
+                        DataAsset:
+                    </label>
+                    <div class="col-xs-8" style="color: #fff">
+                        {{sourceTable}}&nbsp;&nbsp;{{targetTable}}
+                    </div>
+                </div>
+                <div class="row">
+                    <label class="col-xs-4">
+                        Owner:
+                    </label>
+                    <div class="col-xs-8" style="color: #fff">
+                        {{ruleData.owner}}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div><!--//row-->
+    <br/>
+    <div ng-if="ruleData.type=='accuracy'"><!--Accuracy-->
+        <h5 class="row">Mapping rules</h5>
+        <div class="">
+            <p>{{ruleData.evaluateRule.rules}}</p>
+            <p>
+                <label style="color:#B2C831">Accuracy Calculation Formula as Below:</label>
+            </p>
+            <div class="col-md-12 col-lg-12 col-sm-12" style="color:#fff;font-size:16px;display: flex;align-items: center">
+                <div class="" style="text-align:right;display:block;float:left;width:20%;">
+                    Accuracy Rate(%) =
+                </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
+                    </div>
+                    <div class="">
+                        Total Count of records in <span style="color:green;font-weight:bold;">{{targetDB}}&nbsp;&nbsp;{{targetTable}}</span>
+                    </div>
+                </div>
+                <div class="" style="text-align:left;display:block;float:left;width:10%;">
+                    x 100%
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+ 
\ No newline at end of file

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


[09/13] incubator-griffin git commit: refactor ui with angular2

Posted by gu...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/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
new file mode 100644
index 0000000..5c74f3a
--- /dev/null
+++ b/ui/angular/src/app/sidebar/sidebar.component.css
@@ -0,0 +1,219 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+.sidebar-stat-center{
+	padding:10px 0;
+	display: flex;
+	align-items: center
+}
+
+.sidebar-stat-center>img{
+	max-width:24px;
+	margin-right:5px;
+}
+
+.sidebar-stat-center>span{
+	font-size:18px;
+	color:#fff
+}
+
+.well{
+	padding:0px;
+	background:transparent;
+	border:0px;
+	position:relative;
+}
+
+.well .faChevron{
+	color: white;
+}
+
+.panel-group{
+	margin-bottom:0px;
+	background:transparent;
+}
+
+.panel-default{
+	position:relative;
+	background:transparent;
+	border-color: #262626;
+}
+
+.side-bar-scroll{
+	padding:0px;
+	background:transparent;
+	border:0px;
+}
+
+.sideBar{
+	overflow:scroll;
+	height:650px;
+	overflow-x: hidden;
+}
+
+.sideBar::-webkit-scrollbar-track
+{
+	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+	border-radius: 10px;
+	background-color: #F5F5F5;
+}
+
+.sideBar::-webkit-scrollbar
+{
+	width: 12px;
+	border-radius: 10px;
+	background-color: #F5F5F5;
+}
+
+.sideBar::-webkit-scrollbar-thumb
+{
+	border-radius: 10px;
+	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
+	background-color: #D62929;
+}
+
+.well .side-metrics{
+  font-size: 14px;
+}
+.well .faArrows{
+	background:#ff5c33;
+	color:black;
+}
+
+.well .side-date{
+	color: white;
+	/*position: absolute;*/
+	/*left: 80px;*/
+	/*margin-left: 10px;*/
+}
+
+.well .side-name{
+	color: #999966;
+	/*position: absolute;*/
+	/*left: 210px;*/
+	/*margin-left: 20px;*/
+}
+
+a>.side-name:hover{
+	color: #b2c831;
+	/*position: absolute;*/
+	/*left: 210px;*/
+	/*margin-left: 20px;*/
+}
+
+.well .side-percent{
+	color: #40bf80;
+	/*position: absolute;*/
+	/*left: 390px;*/
+}
+
+.well .side-percent-red{
+	color: #f00;
+}
+
+#gprs{
+  position: absolute;
+  top:5px;
+  clip: rect(0, 50px, 50px, 0);
+  top: -8px;
+  /* clip: shape(top, right, bottom, left); NB 'rect' is the only available option */
+}
+
+.well-next{
+	padding:0px;
+	background:#262626;
+	border:0px;
+	position:relative;
+}
+
+.vcenter {
+    display: inline-block;
+    vertical-align: middle;
+    float: none;
+}
+
+/*side-bar end*/
+
+/* led start */
+.led-red {
+    /*margin: 20px auto;*/
+    margin-top: -26px;
+    margin-left: 180px;
+    width: 12px;
+    height: 12px;
+    background-color: #940;
+    border-radius: 50%;
+    box-shadow: #000 0 -1px 7px 1px, inset #600 0 -1px 9px, #F00 0 2px 12px;
+}
+
+.led-yellow {
+    /*margin: 20px auto;*/
+    /*margin-top: -26px;
+    margin-left: 180px;*/
+    width: 12px;
+    height: 12px;
+    background-color: #A90;
+    border-radius: 50%;
+    box-shadow: #000 0 -1px 7px 1px, inset #660 0 -1px 9px, #DD0 0 2px 12px;
+}
+
+.led-green {
+    /*margin: 20px auto;*/
+    /*margin-top: -26px;
+    margin-left: 180px;*/
+    width: 12px;
+    height: 12px;
+    background-color: #690;
+    border-radius: 50%;
+    box-shadow: #000 0 -1px 7px 1px, inset #460 0 -1px 9px, #7D0 0 2px 12px;
+}
+/* led end   */
+
+@media (max-width: 1200px) {
+	#sidebar-option {
+		height: auto;
+		display: block;
+	}
+}
+
+@media (min-width: 1200px) {
+	#sidebar-option {
+		height: 180px;
+		display: flex;
+		align-items: center;
+	}
+}
+
+.bark-link{
+	cursor: pointer;
+	text-decoration: none;
+	color:white;
+}
+
+.bark-link:hover{
+	color:white;
+}
+
+#side-bar-metrics{
+	margin-top:20px;
+	overflow-y:auto;
+	overflow-x:hidden;
+	margin-left:0;
+	margin-right:0;
+	height:auto;
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/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
new file mode 100644
index 0000000..deeb94f
--- /dev/null
+++ b/ui/angular/src/app/sidebar/sidebar.component.html
@@ -0,0 +1,84 @@
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+<div id="rightbar" (window:resize)="onResize($event)" class="" style="background-color:#262626;">
+    <div id="side-bar-stats" class="row" style="border-bottom:5px solid #060606;margin-left:0;margin-right:0">
+        <div class="col-xs-15 col-md-15 col-lg-6 " id="sidebar-option">
+            <div>
+                <div class="sidebar-stat-center">
+                    <i class="fa fa-table" aria-hidden="true"></i>
+                    <span><a class="bark-link" routerLink="/dataassets">
+                    &nbsp;DataAssets</a></span>
+                </div>
+                <div class="sidebar-stat-center">
+                	<i class="fa fa-line-chart" aria-hidden="true"></i>
+                    <span><a class="bark-link" routerLink="/metrics" >
+                    &nbsp;DQ Metrics</a></span>
+                </div>
+            </div>
+        </div>
+        <div class="col-xs-12 col-md-12 col-lg-6">
+            <div id="data-asset-pie"></div>
+        </div>
+    </div>
+    <div id="side-bar-metrics" class="row">
+        <div *ngFor="let outerItems of finalData;let parent=index">
+            <div class="well">
+                <div class="col-sm-4 col-lg-4 col-md-4 ">
+                <h4 >
+                <a routerLink="/metrics/{{outerItems.name}}"> {{outerItems.name}}</a>
+                </h4>
+                </div>
+                <div class="col-sm-3 col-lg-3 col-md-3 " style="display: flex;justify-content: center;height:46px;">
+                <!-- <div [ngClass]="outerItems.dq >=90 ? 'led-green':'led-yellow'" style="align-self: center;"></div> -->
+                </div>
+                <!-- <div class="col-sm-5 col-lg-5 col-md-5 " style="display: flex;justify-content: center;height:46px;"><a style="align-self: center;" class="btn btn-primary" href="https://github.com/eBay/DQSolution/issues" target="_blank">Report&nbsp;issue</a></div> -->
+            </div>
+            <br/>
+            <div class="well side-bar-scroll">
+                <div class="panel-group" *ngFor="let items of outerItems.metrics;let i=index;">
+                    <div class="panel panel-default" style="margin-right: 10px;">
+                        <div class="panel-heading" style="background:transparent;">
+                            <h4 class="panel-title side-metrics">
+                                <a style="cursor: pointer;" 
+                                 (click)="draw(items,parent, i);" 
+                                >
+                                    <!-- <i class="faChevron" 
+                                    [ngClass]="items.tag ? 'fa fa-caret-right':'fa fa-caret-down'" style="width:10px"></i> -->
+                                    <i class="fa fa-line-chart faArrows"></i>
+                                    <span class="side-date">{{items.timestamp | date:'short' }}</span>
+                                    &nbsp;&nbsp;
+                                    <span class="side-name" title="{{items.name}}">{{items.name }}</span>
+                                    <!-- <span ng-if="items.dq <= 100" class="pull-right" [ngClass]="items.dqfail?'side-percent-red':'side-percent'">{{items.dq}}%</span> -->
+                                    <!-- <span ng-if="items.dq > 100" class="pull-right" [ngClass]="items.dqfail?'side-percent-red':''">{{items.dq/1000}}K</span> -->
+                                </a>
+                            </h4>
+                        </div>
+                        <div id={{outerItems.name+i}} class="panel-collapse collapse" >
+                            <div class="panel-body" style="cursor:pointer;padding:0px 15px;border-top-width: 0;">
+                                <div id="chart{{parent}}-{{i}}" class="side-chart" echarts [options]="getOption(parent,i)" 
+                                ></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

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

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/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
new file mode 100644
index 0000000..b0c2211
--- /dev/null
+++ b/ui/angular/src/app/sidebar/sidebar.component.ts
@@ -0,0 +1,178 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+import { Component, OnInit } 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 {GetMetricService} from '../service/get-metric.service';
+import * as $ from 'jquery';
+
+@Component({
+  selector: 'app-sidebar',
+  templateUrl: './sidebar.component.html',
+  styleUrls: ['./sidebar.component.css'],
+  providers:[ChartService,ServiceService]
+})
+export class SidebarComponent implements OnInit {
+
+  constructor(private http: HttpClient,
+  	private router:Router,
+    public servicecService:ServiceService,
+  	public chartService:ChartService) {
+  }
+
+  orgs = [];
+  finalData = [];
+  originalOrgs = [];
+  status:{
+  	'health':number,
+  	'invalid':number
+  };
+  metricData = [];
+  originalData :any;
+  metricName = [];
+  metricNameUnique = [];
+  myData = [];
+  chartOption = new Map();
+  // var formatUtil = echarts.format;
+
+  pageInit() {
+    // var allDataassets = this.servicecService.config.uri.dataassetlist;
+    var health_url = this.servicecService.config.uri.statistics;
+        this.http.get(health_url).subscribe(data => {
+          // this.status.health = data.healthyJobCount;
+          // this.status.invalid = data.jobCount - data.healthyJobCount;
+          // renderDataAssetPie(this.status);
+          this.sideBarList(null);
+        },err => {});
+  }
+  
+  onResize(event){
+    console.log('sidebar resize');
+    if(window.innerWidth < 992) {
+      $('#rightbar').css('display', 'none');
+    } else {
+      $('#rightbar').css('display', 'block');
+      this.resizeSideChart();
+    }
+  }
+
+  resizeSideChart(){
+    $('#side-bar-metrics').css({
+           height: $('#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++){
+        if (!this.finalData[i].metrics[j].tag) {
+          this.draw(this.finalData[i].metrics[j], i, j);
+        }
+      }
+    }
+  }
+
+   draw (metric, parentIndex, index) {
+   		$('#'+this.finalData[parentIndex].name+index).toggleClass('collapse');
+       var chartId = 'chart' + parentIndex + '-' + index;
+       document.getElementById(chartId).style.width = ($('.panel-heading').innerWidth()-40)+'px';
+       document.getElementById(chartId).style.height = '200px';
+       this.chartOption.set(chartId,this.chartService.getOptionSide(metric));
+       var self = this;
+       $('#'+chartId).unbind('click');
+       $('#'+chartId).click(function(e) {
+         self.router.navigate(['/detailed/'+self.finalData[parentIndex].metrics[index].name]) ;
+       });
+   };
+
+   getOption(parent,i){
+   	return this.chartOption.get('chart'+parent+'-'+i);
+   }
+
+    sideBarList(sysName){
+    	// this.finalData = this.getMetricService.renderData();
+      var url_organization = this.servicecService.config.uri.organization;
+    this.http.get(url_organization).subscribe(data => {
+      let orgWithMeasure = data;
+      var orgNode = null;
+      for(let orgName in orgWithMeasure){
+        orgNode = new Object();
+        orgNode.name = orgName;
+        orgNode.measureMap = orgWithMeasure[orgName];
+        this.orgs.push(orgNode);
+      }
+      this.originalOrgs = this.orgs;
+      let url_dashboard = this.servicecService.config.uri.dashboard;
+      this.http.post(url_dashboard, {"query": {"match_all":{}},  "sort": [{"tmst": {"order": "asc"}}],"size":1000}).subscribe(data => {
+            // this.originalData = JSON.parse(JSON.stringify(data));
+            this.originalData = data;
+            this.myData = JSON.parse(JSON.stringify(this.originalData.hits.hits));
+            this.metricName = [];
+            for(var i = 0;i<this.myData.length;i++){
+                this.metricName.push(this.myData[i]._source.name);
+            }
+            this.metricNameUnique = [];
+            for(let name of this.metricName){
+                if(this.metricNameUnique.indexOf(name) === -1){
+                    this.metricData[this.metricNameUnique.length] = new Array();
+                    this.metricNameUnique.push(name);
+                }
+            };
+            for(var i = 0;i<this.myData.length;i++){
+                for(var j = 0 ;j<this.metricNameUnique.length;j++){
+                    if(this.myData[i]._source.name==this.metricNameUnique[j]){
+                        this.metricData[j].push(this.myData[i]);
+                    }
+                }
+            }
+            for(let sys of this.originalOrgs){
+                var node = null;
+                node = new Object();
+                node.name = sys.name;
+                node.dq = 0;
+                node.metrics = new Array();
+                for (let metric of this.metricData){
+                    if(sys.measureMap.indexOf(metric[metric.length-1]._source.name)!= -1){
+                        var metricNode = {
+                            'name':'',
+                            'timestamp':'',
+                            'dq':0,
+                            'details':[]
+                        }
+                        metricNode.name = metric[metric.length-1]._source.name;
+                        metricNode.timestamp = metric[metric.length-1]._source.tmst;
+                        metricNode.dq = metric[metric.length-1]._source.matched/metric[metric.length-1]._source.total*100;
+                        metricNode.details = metric;
+                        node.metrics.push(metricNode);
+                    }
+                }
+                this.finalData.push(node);
+            }
+            console.log(this.finalData);
+            // return JSON.parse(JSON.stringify(this.finalData));
+            return this.finalData;
+      });
+    });
+    }
+
+  ngOnInit() {
+  	this.sideBarList(null);
+  }
+
+}

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/src/assets/.gitkeep
----------------------------------------------------------------------
diff --git a/ui/angular/src/assets/.gitkeep b/ui/angular/src/assets/.gitkeep
new file mode 100644
index 0000000..e69de29

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/src/assets/img/1.PNG
----------------------------------------------------------------------
diff --git a/ui/angular/src/assets/img/1.PNG b/ui/angular/src/assets/img/1.PNG
new file mode 100644
index 0000000..e9a3063
Binary files /dev/null and b/ui/angular/src/assets/img/1.PNG differ

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/src/assets/img/2.PNG
----------------------------------------------------------------------
diff --git a/ui/angular/src/assets/img/2.PNG b/ui/angular/src/assets/img/2.PNG
new file mode 100644
index 0000000..af12dc4
Binary files /dev/null and b/ui/angular/src/assets/img/2.PNG differ

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/src/assets/img/b3vHigh.jpg
----------------------------------------------------------------------
diff --git a/ui/angular/src/assets/img/b3vHigh.jpg b/ui/angular/src/assets/img/b3vHigh.jpg
new file mode 100644
index 0000000..0d6949d
Binary files /dev/null and b/ui/angular/src/assets/img/b3vHigh.jpg differ

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/src/assets/img/bollinger.png
----------------------------------------------------------------------
diff --git a/ui/angular/src/assets/img/bollinger.png b/ui/angular/src/assets/img/bollinger.png
new file mode 100644
index 0000000..efb1f49
Binary files /dev/null and b/ui/angular/src/assets/img/bollinger.png differ

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/src/assets/img/construction.gif
----------------------------------------------------------------------
diff --git a/ui/angular/src/assets/img/construction.gif b/ui/angular/src/assets/img/construction.gif
new file mode 100644
index 0000000..7d03450
Binary files /dev/null and b/ui/angular/src/assets/img/construction.gif differ

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/src/assets/img/favicon.ico
----------------------------------------------------------------------
diff --git a/ui/angular/src/assets/img/favicon.ico b/ui/angular/src/assets/img/favicon.ico
new file mode 100644
index 0000000..c5ccacf
Binary files /dev/null and b/ui/angular/src/assets/img/favicon.ico differ

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/src/assets/img/logo.gif
----------------------------------------------------------------------
diff --git a/ui/angular/src/assets/img/logo.gif b/ui/angular/src/assets/img/logo.gif
new file mode 100644
index 0000000..bf26825
Binary files /dev/null and b/ui/angular/src/assets/img/logo.gif differ

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/src/assets/img/logo.png
----------------------------------------------------------------------
diff --git a/ui/angular/src/assets/img/logo.png b/ui/angular/src/assets/img/logo.png
new file mode 100644
index 0000000..ee1a9e6
Binary files /dev/null and b/ui/angular/src/assets/img/logo.png differ

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/src/assets/img/mad.png
----------------------------------------------------------------------
diff --git a/ui/angular/src/assets/img/mad.png b/ui/angular/src/assets/img/mad.png
new file mode 100644
index 0000000..aa85a76
Binary files /dev/null and b/ui/angular/src/assets/img/mad.png differ

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/src/assets/img/sidebar1.png
----------------------------------------------------------------------
diff --git a/ui/angular/src/assets/img/sidebar1.png b/ui/angular/src/assets/img/sidebar1.png
new file mode 100644
index 0000000..6a64412
Binary files /dev/null and b/ui/angular/src/assets/img/sidebar1.png differ

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/src/assets/img/sidebar2.png
----------------------------------------------------------------------
diff --git a/ui/angular/src/assets/img/sidebar2.png b/ui/angular/src/assets/img/sidebar2.png
new file mode 100644
index 0000000..425b863
Binary files /dev/null and b/ui/angular/src/assets/img/sidebar2.png differ

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/src/assets/img/yoy.png
----------------------------------------------------------------------
diff --git a/ui/angular/src/assets/img/yoy.png b/ui/angular/src/assets/img/yoy.png
new file mode 100644
index 0000000..2f071ac
Binary files /dev/null and b/ui/angular/src/assets/img/yoy.png differ

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/src/environments/environment.js
----------------------------------------------------------------------
diff --git a/ui/angular/src/environments/environment.js b/ui/angular/src/environments/environment.js
new file mode 100644
index 0000000..d107811
--- /dev/null
+++ b/ui/angular/src/environments/environment.js
@@ -0,0 +1,27 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+"use strict";
+// The file contents for the current environment will overwrite these during build.
+// The build system defaults to the dev environment which uses `environment.ts`, but if you do
+// `ng build --env=prod` then `environment.prod.ts` will be used instead.
+// The list of which env maps to which file can be found in `.angular-cli.json`.
+exports.__esModule = true;
+exports.environment = {
+    production: false
+};

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/src/environments/environment.prod.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/environments/environment.prod.ts b/ui/angular/src/environments/environment.prod.ts
new file mode 100644
index 0000000..c14cbe9
--- /dev/null
+++ b/ui/angular/src/environments/environment.prod.ts
@@ -0,0 +1,21 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+export const environment = {
+  production: true
+};

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/src/environments/environment.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/environments/environment.ts b/ui/angular/src/environments/environment.ts
new file mode 100644
index 0000000..0fd1aad
--- /dev/null
+++ b/ui/angular/src/environments/environment.ts
@@ -0,0 +1,26 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+// The file contents for the current environment will overwrite these during build.
+// The build system defaults to the dev environment which uses `environment.ts`, but if you do
+// `ng build --env=prod` then `environment.prod.ts` will be used instead.
+// The list of which env maps to which file can be found in `.angular-cli.json`.
+
+export const environment = {
+  production: false
+};

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/src/favicon.ico
----------------------------------------------------------------------
diff --git a/ui/angular/src/favicon.ico b/ui/angular/src/favicon.ico
new file mode 100644
index 0000000..c5ccacf
Binary files /dev/null and b/ui/angular/src/favicon.ico differ

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/src/index.html
----------------------------------------------------------------------
diff --git a/ui/angular/src/index.html b/ui/angular/src/index.html
new file mode 100644
index 0000000..0cd5c79
--- /dev/null
+++ b/ui/angular/src/index.html
@@ -0,0 +1,41 @@
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="description" content="">
+  <meta name="author" content="">
+  <link rel="icon" href="/favicon.ico">
+  <title>Griffin - Data Quality Service</title>
+  <base href="/">
+  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
+  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+  <!--[if lt IE 9]>
+  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+  <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
+  <![endif]-->
+</head>
+<body>
+
+<app-root></app-root>
+</body>
+</html>

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/src/main.js
----------------------------------------------------------------------
diff --git a/ui/angular/src/main.js b/ui/angular/src/main.js
new file mode 100644
index 0000000..7000f8e
--- /dev/null
+++ b/ui/angular/src/main.js
@@ -0,0 +1,32 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+"use strict";
+exports.__esModule = true;
+var core_1 = require("@angular/core");
+var platform_browser_dynamic_1 = require("@angular/platform-browser-dynamic");
+var app_module_1 = require("./app/app.module");
+var environment_1 = require("./environments/environment");
+require("jquery");
+// import  'bootstrap';
+// import 'bootstrap/dist/css/bootstrap.css';
+require("bootstrap/dist/css/bootstrap.css");
+if (environment_1.environment.production) {
+    core_1.enableProdMode();
+}
+platform_browser_dynamic_1.platformBrowserDynamic().bootstrapModule(app_module_1.AppModule);

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/src/main.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/main.ts b/ui/angular/src/main.ts
new file mode 100644
index 0000000..a1450f6
--- /dev/null
+++ b/ui/angular/src/main.ts
@@ -0,0 +1,35 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+import { RouterModule, Routes } from '@angular/router';
+import {HttpClientModule} from '@angular/common/http';
+import { Ng2SmartTableModule } from 'ng2-smart-table';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+
+import 'bootstrap/dist/css/bootstrap.css';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/src/polyfills.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/polyfills.ts b/ui/angular/src/polyfills.ts
new file mode 100644
index 0000000..3ab322a
--- /dev/null
+++ b/ui/angular/src/polyfills.ts
@@ -0,0 +1,90 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE9, IE10 and IE11 requires all of the following polyfills. **/
+// import 'core-js/es6/symbol';
+// import 'core-js/es6/object';
+// import 'core-js/es6/function';
+// import 'core-js/es6/parse-int';
+// import 'core-js/es6/parse-float';
+// import 'core-js/es6/number';
+// import 'core-js/es6/math';
+// import 'core-js/es6/string';
+// import 'core-js/es6/date';
+// import 'core-js/es6/array';
+// import 'core-js/es6/regexp';
+// import 'core-js/es6/map';
+// import 'core-js/es6/weak-map';
+// import 'core-js/es6/set';
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js';  // Run `npm install --save classlist.js`.
+
+/** Evergreen browsers require these. **/
+import 'core-js/es6/reflect';
+import 'core-js/es7/reflect';
+
+
+/**
+ * Required to support Web Animations `@angular/animation`.
+ * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
+ **/
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+
+
+/***************************************************************************************************
+ * Zone JS is required by Angular itself.
+ */
+import 'zone.js/dist/zone';  // Included with Angular CLI.
+
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
+
+/**
+ * Date, currency, decimal and percent pipes.
+ * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
+ */
+// import 'intl';  // Run `npm install --save intl`.
+/**
+ * Need to import at least one locale-data with intl.
+ */
+// import 'intl/locale-data/jsonp/en';

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/src/styles.css
----------------------------------------------------------------------
diff --git a/ui/angular/src/styles.css b/ui/angular/src/styles.css
new file mode 100644
index 0000000..6e85b67
--- /dev/null
+++ b/ui/angular/src/styles.css
@@ -0,0 +1,1134 @@
+/* You can add global styles to this file, and also import other style files */
+/*
+ Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+
+@import url('../node_modules/bootstrap/dist/css/bootstrap.css');
+@import url('../node_modules/font-awesome/css/font-awesome.css');
+@import "~@angular/material/prebuilt-themes/indigo-pink.css";
+@import url('../node_modules/angular2-toaster/toaster.css');
+
+
+/*@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');*/
+/**********BASE CONFIGURATIONS**********/
+body {
+  background:#1f1f1f;
+    font-family: 'Open Sans', sans-serif;
+    height: 100%;
+}
+
+html{
+  height: 100%;
+}
+
+h1 {
+font-family: 'Raleway', sans-serif;}
+
+h3,h4 , h5 {
+  font-family: 'Open Sans', sans-serif;
+  font-weight:lighter;
+}
+
+h2{
+  font-size:22px;
+}
+
+h3 {
+  font-size:46px;
+  color:#b2c831
+}
+
+h5 {
+  color:#b2c831;
+  margin-left:5px;
+}
+
+/***********BLOCKS & WRAPS***********/
+
+/*--- Dash Unit / Used in Dashboard page ---*/
+.dash-unit {
+  margin-bottom: 30px;
+  padding-bottom:10px;
+  border: 1px solid #383737;
+  /*background-image:url('../img/sep-half.png');*/
+  background-color: #3d3d3d;
+  color:white;
+  height:290px;
+}
+
+.dash-unit:hover {
+  background-color: #4f4f4f;
+  -moz-box-shadow:    3px 3px 2px 0px #151515;
+    -webkit-box-shadow: 3px 3px 2px 0px #151515;
+    box-shadow:         3px 3px 2px 0px #151515;
+
+}
+
+.dash-unit dtitle {
+  font-size:11px;
+  text-transform:uppercase;
+  color:#ffffff;
+  margin:8px;
+  padding:0px;
+  height:inherit
+  }
+
+.dash-unit hr {
+    border: 0;
+    border-top: 1px solid #151515;
+    border-top-style: dashed;
+  margin-top:3px;
+}
+
+.dash-unit h1 {
+  font-family: 'Raleway', sans-serif;
+  font-weight:300;
+  font-size: 20px;
+  line-height: 2px;
+  letter-spacing: 0px;
+  color: #ffffff;
+  padding-top:10px;
+  padding-left:5px;
+  margin-top:2px;
+  text-align:center;
+}
+
+.dash-unit h2 {
+  font-family: 'Open Sans', sans-serif;
+  font-weight: bold;
+  font-size: 30px;
+  line-height: 26px;
+  letter-spacing: 0px;
+  color: #ffffff;
+  padding-top:10px;
+  padding-left:5px;
+  margin-top:2px;
+  text-align:center;
+}
+
+
+.dash-unit h3 {
+  font-weight:300;
+  font-size: 15px;
+  line-height: 2px;
+  letter-spacing: 0px;
+  color: #b2c831;
+  padding-top:10px;
+  padding-left:5px;
+  margin-top:2px;
+  text-align:center;
+}
+
+
+.dash-unit p {
+  font-size: 14px;
+  font-weight: 200;
+  line-height: 16px;
+  color: inherit;
+  margin: 0 0 10px;
+  padding:5px;
+ }
+
+.dash-unit h4 {
+  padding-left:5px;
+  margin-top:2px;
+  font-size: 13px;
+  font-weight:lighter;
+  line-height: 1;
+  letter-spacing: 0px;
+  color: #fff;
+}
+
+.dash-unit bold{
+  font-family: 'Open Sans', sans-serif;
+  font-size:26px;
+  font-weight:bold;
+  color:#fff;
+  vertical-align:middle;
+}
+
+
+/**********Half-Unit / Used in index.html**********/
+.half-unit {
+  margin-bottom: 30px;
+  padding-bottom: 4px;
+  border: 1px solid #383737;
+  /*background-image:url('../img/sep-half.png');*/
+  background-color: #3d3d3d;
+  color:white;
+  height:130px;
+}
+
+.half-unit:hover {
+  background-color: #4f4f4f;
+  -moz-box-shadow:    3px 3px 2px 0px #151515;
+    -webkit-box-shadow: 3px 3px 2px 0px #151515;
+    box-shadow:         3px 3px 2px 0px #151515;
+
+}
+
+.half-unit dtitle {
+  font-size:10px;
+  text-transform:uppercase;
+  color:#ffffff;
+  margin:8px;
+  padding:0px;
+  height:inherit
+  }
+
+.half-unit hr {
+    border: 0;
+    border-top: 1px solid #151515;
+    border-top-style: dashed;
+  margin-top:3px;
+}
+
+.half-unit h1 {
+  font-family: 'Raleway', sans-serif;
+  font-weight:300;
+  font-size: 20px;
+  line-height: 1;
+  letter-spacing: 0px;
+  color: #ffffff;
+  padding-top:10px;
+  padding-left:5px;
+  margin-top:2px;
+  text-align:center;
+}
+
+.half-unit h4 {
+  padding-left:5px;
+  margin-top:2px;
+  font-size: 13px;
+  font-weight:lighter;
+  line-height: 1;
+  letter-spacing: 0px;
+  color: #fff;
+}
+
+
+.half-unit bold{
+  font-family: 'Open Sans', sans-serif;
+  font-size:26px;
+  font-weight:bold;
+  color:#fff;
+  vertical-align:middle;
+}
+
+/**********Styling Elements**********/
+.cont {
+  text-align:center;
+  margin-top:30px;
+}
+
+.cont ok {
+  color:#b2c831;
+}
+
+.cont bad {
+  color:#fa1d2d;
+}
+
+.cont2 {
+  text-align:center;
+  margin-top:-15px;
+  font-size:12px;
+  line-height:7px;
+}
+
+.cont2 bold{
+  font-size:10px;
+  font-weight:bold;
+  color:#b2c831
+}
+
+.text p {
+  font-family: 'Open Sans', sans-serif;
+  margin-left:8px;
+  font-size:14px;
+  line-height:18px;
+}
+
+.text grey {
+  font-size:11px;
+  color:silver
+}
+
+
+/***********Bootstrap Default Modifications***********/
+
+.thumbnail {
+  border:0px;
+  text-align:center;
+  -webkit-box-shadow: 0px;
+     -moz-box-shadow: 0px;
+          box-shadow: 0px;
+    background: none;
+    text-align: center;
+
+}
+.modal {
+  background: rgba(0,0,0,0.6);
+}
+
+.modal-header {
+  /*background-image:url('../img/sep-half.png');*/
+  background-color: #4f4f4f;
+  color:#fff;
+}
+.modal-body{
+  background-color: #1f1f1f;
+}
+.modal-footer{
+  background-color: #1f1f1f;
+
+}
+
+.btn-circle {
+  width: 60px;
+  height: 30px;
+  padding: 4px 8px;
+  font-size: 16px;
+  line-height: 1.33;
+  border-radius: 15px 15px 15px 15px;
+
+  border-width:2px;
+  border-color:#2A9FD6;
+  cursor:pointer;
+}
+
+.btn-circle:hover{
+    /*background: #b2c831;
+    color:#000;*/
+}
+
+/*input[type=submit] {
+  font-family: 'Open Sans', sans-serif;
+  font-size: 15px;
+  background: #b2c831;
+  color: #fff;
+  border: none;
+  padding: 8px 28px 10px 26px;
+    *-webkit-border-radius: 4px;
+     -moz-border-radius: 4px;
+          border-radius: 4px;
+}
+input[type=text], textarea {
+  background: #cdcbcc;
+  font-size: 13px;
+  display: block;
+  width: 100%;
+  border: none;
+  box-shadow: none;
+  height: 30px;
+  line-height: 18px;
+  padding: 0;
+  text-indent: 18px;
+  margin: 0 0 18px;
+}*/
+textarea {
+  line-height: 18px;
+  padding: 18px;
+  width: 100%;
+  text-indent: 0;
+}
+.textarea-container { margin: 0 18px; }
+.textarea-container textarea { margin-left: -18px; }
+#contact textarea { width: 100%; height: 45px; }
+
+
+.progress-bar {
+  background-color: #b2c831;
+}
+
+
+
+
+/***********LineIcons Styles***********/
+
+
+.info-user {
+  text-align:center;
+  font-size: 24px;
+  color: #b2c831;
+  }
+
+.fs1 {
+  padding:5px 5px 5px 5px;
+  position:relative;
+}
+
+.fs1:hover {
+  position:relative;
+  color: #fff;
+  cursor:pointer
+}
+
+.fs2 {
+  padding:5px 5px 5px 5px;
+  position:relative;
+  font-size:35px;
+  vertical-align: text-bottom
+}
+
+/**********Clock Configuration**********/
+
+digiclock {
+  font-size: 30px;
+  color: #fff;
+  text-align: center;
+  line-height: 60px;
+  margin-left: auto
+}
+
+.clockcenter {
+  text-align:center;
+}
+
+
+/**********Mail Style Configuration**********/
+
+.framemail {
+    cursor: default;
+}
+.framemail .window {
+    font-size: 0;
+    margin-top: -1px;
+    overflow: hidden;
+    margin-left: -18px;
+}
+.framemail .window .mail li {
+    background-color:#3d3d3d;
+    background-image: -webkit-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
+    background-image:    -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
+    background-image:     -ms-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
+    background-image:      -o-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
+    background-image:         linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
+    border-top: 1px solid #888;
+    position: relative;
+    margin-left:-18px;
+}
+.framemail .window .mail li:first-child {
+    border-top: none;
+}
+.framemail .window .mail li:hover {
+    background-color: #5d5b5b;
+}
+.framemail .window .mail li:after,
+.framemail .window .mail li:before {
+    border-left: 8px solid transparent;
+    border-top: 8px solid #df6;
+    content: '';
+    height: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 0;
+}
+.framemail .window .mail li:before {
+    border-top-color: #bbb;
+    border-width: 9px;
+}
+.framemail .window .mail li:nth-child(1):after,
+.framemail .window .mail li:nth-child(1):before {
+    border: none;
+}
+.framemail .window .mail li:nth-child(2):after {
+    border-top-color: #fa1d2d;
+}
+.framemail .window .mail li i {
+    display: inline-block;
+    height: 48px;
+    width: 6px;
+}
+.framemail .window .mail li .read {
+    background-color: #ddd;
+}
+.framemail .window .mail li .unread {
+    background: #b2c831;
+}
+.framemail .window .mail li img {
+    background: #819da2;
+    border-radius: 2px;
+    height: 36px;
+    left: 12px;
+    position: absolute;
+    top: 6px;
+    width: 36px;
+}
+.framemail .window .mail li p {
+    font: 13px/24px sans-serif;
+    left: 56px;
+    position: absolute;
+    top: 3px;
+}
+.framemail .window .mail li .sender {
+    color: #e9e8e8;
+    font-weight: bold;
+    text-shadow: 0 1px 1px hsla(0,0%,100%,.5);
+}
+.framemail .window .mail li .message {
+    color: #999;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    top: 21px;
+    white-space: nowrap;
+}
+.framemail .window .mail li .message strong {
+    color: #999;
+}
+.framemail .window .mail li .actions {
+    height: 16px;
+    position: absolute;
+    right: 19px;
+    text-align: right;
+    top: 0;
+    width: 96px;
+}
+.framemail .window .mail li .actions img {
+    background: none;
+    display: inline-block;
+    height: 16px;
+    margin-left: 6px;
+    opacity: .1;
+    position: relative;
+    width: 16px;
+}
+.framemail .window .mail li:hover .actions img {
+    opacity: .25;
+}
+.framemail .window .mail li .actions img:hover {
+    opacity: .75;
+}
+
+
+/**********DONUT CHARTS STYLES**********/
+#load {
+  width: 11.313em;
+  height: 11.313em;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+  margin-bottom: 1.063em;
+  background-position: center center;
+  margin:auto;
+}
+
+#space {
+  width: 11.313em;
+  height: 11.313em;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+  margin-bottom: 1.063em;
+  background-position: center center;
+  margin:auto;
+}
+
+
+/**********LINE AND BARS**********/
+
+.section-graph {
+  position: relative;
+  height: 130px;
+  color: #fff;
+  background-image: linear-gradient(color-stops(#b2c831, #b2c831 50%, #b2c831 50%));
+  margin-bottom:20px;
+}
+.section-graph .graph-info {
+  z-index: 99;
+  position: absolute;
+  font-weight: bold;
+  margin-top: 12px;
+  margin-left: 21px;
+  width: 100px;
+}
+.section-graph .graph-info .graph-arrow {
+  width: 0;
+  height: 0;
+  margin-top: 18px;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-bottom: 4px solid white;
+  float: left;
+}
+.section-graph .graph-info .graph-info-big {
+  font-size: 24px;
+  float: left;
+  margin-left: 3px;
+}
+.section-graph .graph-info .graph-info-small {
+  margin-left: 3px;
+  font-size: 12px;
+  font-weight: normal;
+  color: rgba(255, 255, 255, 0.5);
+  clear: left;
+  margin-left: 8px;
+}
+/*
+ * Info Section
+ */
+.info-aapl {
+  text-align: center;
+
+}
+.info-aapl ul {
+  margin-left:30%;
+
+}
+.info-aapl li {
+  margin: 0;
+  display: block;
+  width: 9px;
+  height: 40px;
+  margin-right: 6px;
+  background-color: #f5f0ec;
+  float:left;
+  position: relative;
+}
+.info-aapl li span {
+  display: block;
+  width: 9px;
+  height: 40px;
+  position: absolute;
+  bottom: 0;
+}
+.info-aapl li span.orange {
+  background-color: #fa1d2d;
+}
+.info-aapl li span.green {
+  background-color: #b2c831;
+}
+
+/**********TWITTER WIDGET **********/
+#jstwitter ul li{
+  color:#bdbdbd;
+  padding:.5em .75em;
+}
+
+#jstwitter ul{
+  margin-left:0;
+  list-style:none
+}
+
+#jstwitter:first-child{
+  border-top:0
+}
+
+ul#jstwitter li a{
+  font-size:10px;
+  font-style:italic;
+  color:#666;
+  text-decoration:none
+}
+
+/********** CUSTOMIZED BUTTON **********/
+.btnnew {
+  display: inline-block;
+  *border-left: 0 none #707070;
+  border-right: 0 none #707070;
+  border-top: 0 none #707070;
+  border-bottom: 0 none #707070;
+  display: inline;
+    padding: 4px 12px;
+    margin-bottom: 0;
+  *margin-left: .3em;
+    font-size: 14px;
+    line-height: 20px;
+    color: #b2c831;
+    text-align: center;
+    vertical-align: middle;
+    cursor: pointer;
+  background-color: #5a5a5a;
+  *background-color: #5a5a5a;
+    background-repeat: repeat-x;
+  *-webkit-border-radius: 4px;
+     -moz-border-radius: 4px;
+          border-radius: 4px;
+    zoom: 1;
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+  background-image: linear-gradient(to bottom, #707070, #707070);
+}
+
+/********** SWITCH BUTTON **********/
+.switch {
+  position: relative;
+  margin: 20px auto;
+  height: 26px;
+  width: 120px;
+  background: rgba(0, 0, 0, 0.25);
+  border-radius: 3px;
+  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
+}
+
+.switch-label {
+  position: relative;
+  z-index: 2;
+  float: left;
+  width: 58px;
+  line-height: 26px;
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.35);
+  text-align: center;
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
+  cursor: pointer;
+}
+.switch-label:active {
+  font-weight: bold;
+}
+
+.switch-label-off {
+  padding-left: 2px;
+}
+
+.switch-label-on {
+  padding-right: 2px;
+}
+
+/*
+ * Note: using adjacent or general sibling selectors combined with
+ *       pseudo classes doesn't work in Safari 5.0 and Chrome 12.
+ *       See this article for more info and a potential fix:
+ *       http://css-tricks.com/webkit-sibling-bug/
+ */
+.switch-input {
+  display: none;
+}
+.switch-input:checked + .switch-label {
+  font-weight: bold;
+  color: rgba(0, 0, 0, 0.65);
+  text-shadow: 0 1px rgba(255, 255, 255, 0.25);
+  -webkit-transition: 0.15s ease-out;
+  -moz-transition: 0.15s ease-out;
+  -o-transition: 0.15s ease-out;
+  transition: 0.15s ease-out;
+}
+.switch-input:checked + .switch-label-on ~ .switch-selection {
+  left: 60px;
+  /* Note: left: 50% doesn't transition in WebKit */
+}
+
+.switch-selection {
+  display: block;
+  position: absolute;
+  z-index: 1;
+  top: 2px;
+  left: 2px;
+  width: 58px;
+  height: 22px;
+  background: #b2c831;
+  border-radius: 3px;
+  background-image: -webkit-linear-gradient(top, #b6c753, #b2c831);
+  background-image: -moz-linear-gradient(top, #b6c753, #b2c831);
+  background-image: -o-linear-gradient(top, #b6c753, #b2c831);
+  background-image: linear-gradient(to bottom, #b6c753, #b2c831);
+  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
+  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
+  -webkit-transition: left 0.15s ease-out;
+  -moz-transition: left 0.15s ease-out;
+  -o-transition: left 0.15s ease-out;
+  transition: left 0.15s ease-out;
+}
+.switch-blue .switch-selection {
+  background: #3aa2d0;
+  background-image: -webkit-linear-gradient(top, #4fc9ee, #3aa2d0);
+  background-image: -moz-linear-gradient(top, #4fc9ee, #3aa2d0);
+  background-image: -o-linear-gradient(top, #4fc9ee, #3aa2d0);
+  background-image: linear-gradient(to bottom, #4fc9ee, #3aa2d0);
+}
+.switch-yellow .switch-selection {
+  background: #fa1d2d;
+  background-image: -webkit-linear-gradient(top, #f93e4b, #fa1d2d);
+  background-image: -moz-linear-gradient(top, #f93e4b, #fa1d2d);
+  background-image: -o-linear-gradient(top, #f93e4b, #fa1d2d);
+  background-image: linear-gradient(to bottom, #f93e4b, #fa1d2d);
+}
+
+
+/**********Gauge Chart**********/
+#canvas {
+  display: block;
+  width: 150px;
+  margin: 30px auto;
+}
+
+/**********Accordion Styling**********/
+
+.accordion-group {
+  border: 1px solid #222;
+}
+.accordion-heading {
+  background-color: #5a5a5a;
+  *background-color: #5a5a5a;
+    background-repeat: repeat-x;
+  *-webkit-border-radius: 4px;
+     -moz-border-radius: 4px;
+          border-radius: 4px;
+    zoom: 1;
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+  background-image: linear-gradient(to bottom, #707070, #707070);
+}
+
+/**********Link Styling**********/
+a {
+  color: #b2c831;
+  text-decoration: none;
+}
+
+a:hover {
+  color: #dff948;
+  text-decoration: none;
+}
+
+.bark-link {
+  color: #b2c831;
+  text-decoration: underline;
+}
+
+.bark-link:hover {
+  color: #dff948;
+  text-decoration: none;
+}
+
+/**navigation bar**/
+.docs-search{
+  margin:10px 0;
+  border-radius:20px;
+  background:#626262;
+  vertical-align:middle;
+  padding:4px 0 4px 10px;
+}
+
+.docs-search input{
+  background:#626262;
+  border:0
+}
+
+.docs-search input:focus{
+  outline:none;
+  color:#fff;
+}
+
+.navbar-search {
+    position: relative;
+    float: left;
+    margin-top: 14px;
+    margin-bottom: 0;
+}
+
+.navbar-search .search-query {
+    padding: 4px 9px;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+    font-size: 13px;
+    font-weight: normal;
+    line-height: 1;
+    color: #ffffff;
+    background-color: #848484;
+    border: 1px solid #151515;
+    border-radius:14px;
+    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);
+    -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);
+    -webkit-transition: none;
+    -moz-transition: none;
+    -ms-transition: none;
+    -o-transition: none;
+    transition: none;
+}
+
+.navbar-search .search-query:disabled{
+    background-color: #626262;
+    cursor: not-allowed;
+}
+
+.navbar-search .search-query:-moz-placeholder {
+    color: #cccccc;
+}
+.navbar-search .search-query::-webkit-input-placeholder {
+    color: #cccccc;
+}
+.navbar-search .search-query:focus,.navbar-search .search-query.focused {
+    padding: 5px 10px;
+    color: #333333;
+    text-shadow: 0 1px 0 #ffffff;
+    background-color: #ffffff;
+    border: 0;
+    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
+    -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
+    outline: 0;
+}
+
+
+
+/**********FooterWrap Section**********/
+@media (min-width: 992px) {
+    #footerwrap {
+      width: 75%;
+    }
+}
+
+@media (max-width: 991px) { 
+    #footerwrap {
+      width: 100%
+    }
+}
+
+#footerwrap {
+    padding-left: 30px;
+    height: 90px;
+    background:#1f1f1f;
+    padding-top:10px;
+    padding-bottom: 10px;
+    border-top-style: solid;
+    border-top-width:8px;
+    border-top-color:#1d1d1d;
+    /*overflow-y:auto;*/
+    z-index:200;
+
+}
+
+#footerwrap p {
+  color:white;
+  font-size:12px;
+  margin:0;
+}
+
+/*#footerwrap>.container-fluid{
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  transform:translateY(100%);
+  animation: scrolling 2s linear infinite;
+}
+
+@keyframes scrolling {
+ 0%   {
+ transform: translateY(0%);
+ }
+ 100% {
+ transform: translateY(-100%);
+ }
+}*/
+
+
+/***********FULLCALENDAR STYLE***********/
+
+#external-events {
+  padding: 0 10px;
+  border: 1px solid #8b8b8a;
+    background-color: #8b8b8a;
+    -webkit-border-radius: 4px;
+       -moz-border-radius: 4px;
+            border-radius: 4px;
+  text-align: left;
+  }
+
+#external-events h4 {
+  font-size: 16px;
+  margin-top: 0;
+  padding-top: 1em;
+  }
+
+.external-event { /* try to mimick the look of a real event */
+  margin: 10px 0;
+  padding: 2px 4px;
+  background: #b2c831;
+  color: #fff;
+  font-size: .85em;
+  cursor: pointer;
+  }
+
+#external-events p {
+  margin: 1.5em 0;
+  font-size: 11px;
+  color: #b2c831;
+  }
+
+#external-events p input {
+  margin: 0;
+  vertical-align: middle;
+  }
+
+#calendar {
+  width:100%;
+  }
+
+.symbol.required:before {
+    content: "*";
+    display: inline;
+    color: #E6674A;
+}
+
+.has-success .symbol:before {
+    content: "\f00c";
+    display: inline;
+    font-family: FontAwesome;
+    color: #468847
+}
+
+.has-error .symbol:before {
+    content: "\f00d";
+    display: inline;
+    font-family: FontAwesome;
+    color: #C82E29
+}
+
+.text-small {
+    font-size: 12px!important
+}
+
+.has-error .error {
+    color: #a94442;
+}
+
+/**********Media Styles**********/
+
+@media (max-width: 360px){
+/*Calendar Adsjustments*/
+.fc-header {margin-top:15px;}
+.fc-header-title h2{font-size:10px; }
+.fc-header-right {display:none}
+}
+/* portrait tablet */
+@media (min-width: 767px) and (max-width: 768px) {
+  .info-aapl ul {
+      margin-left:10px;
+      float:left;
+}
+
+#load {
+  margin-left:5px;
+  margin-right:10px;
+}
+
+#space {
+  margin-left:5px;
+  margin-right:10px;
+}
+
+}
+
+/* Landscape iphone 5 and samsung galaxy */
+@media (min-width: 560px) and (max-width: 685px) {
+  .info-aapl ul {
+      margin-left:40%;
+  }
+
+}
+
+@media (min-width: 1024px) {
+  .modal-xg {
+    width: 1024px;
+  }
+}
+
+.form-control {
+  color: #000000;
+}
+
+tbody {
+  word-break:break-all;
+}
+
+
+/*style of job*/
+.page{
+  cursor: pointer;
+  float: left;
+  border-bottom-left-radius: 4px;
+  border-top-left-radius: 4px;
+  color: #fff;
+  text-decoration: underline;
+}
+
+.page-active{
+  background-color: #2a9fd6;
+  border-color: transparent;
+  cursor: default;
+}
+
+.normal{
+  background-color: #00C853;
+  border-radius: 5px; 
+  padding:3px 4px;
+}
+
+.unnormal{
+  background-color: #EF5350;
+  border-radius: 5px; 
+  padding:3px 4px;
+}
+
+#timePopup{
+  position: absolute;
+  z-index:1;
+  height:100px;
+  background-color:white; 
+  /*width:80%;*/
+  text-align: center;
+  border: 5px solid #c5c5c5;
+  border-radius: 3px;
+}
+
+#hourSelector{
+  width: 20%;
+  height: 100%;
+  display: inline-block;
+}
+
+#minuteSelector{
+  width:20%;
+  height:100%;
+  display: inline-block;
+  
+}
+
+
+#secondSelector{
+  width:20%;
+  height:100%;
+  display: inline-block;
+  
+}
+
+#pmam{
+  width:30%;
+  height:100%;
+  display: inline-block;
+}
+
+.division{
+  display: inline-block;
+  width:10%;
+  height:100%;
+  position:relative;
+  top: -30px;
+}
+
+.mask{
+  width:100%;
+  height:100%;
+  position:fixed;
+  top:0;
+  left:0;
+  z-index:1;
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/src/test.html
----------------------------------------------------------------------
diff --git a/ui/angular/src/test.html b/ui/angular/src/test.html
new file mode 100644
index 0000000..201b5c0
--- /dev/null
+++ b/ui/angular/src/test.html
@@ -0,0 +1,41 @@
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="description" content="">
+  <meta name="author" content="">
+  <link rel="icon" href="/favicon.ico">
+  <title>Griffin - Data Quality Service</title>
+  <base href="/">
+  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
+  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+  <!--[if lt IE 9]>
+  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+  <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
+  <![endif]-->
+</head>
+<body>
+This is for test
+</body>
+</body>
+</html>

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/src/test.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/test.ts b/ui/angular/src/test.ts
new file mode 100644
index 0000000..da41e46
--- /dev/null
+++ b/ui/angular/src/test.ts
@@ -0,0 +1,50 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/long-stack-trace-zone';
+import 'zone.js/dist/proxy.js';
+import 'zone.js/dist/sync-test';
+import 'zone.js/dist/jasmine-patch';
+import 'zone.js/dist/async-test';
+import 'zone.js/dist/fake-async-test';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
+declare const __karma__: any;
+declare const require: any;
+
+// Prevent Karma from running prematurely.
+__karma__.loaded = function () {};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
+// Finally, start Karma to run the tests.
+__karma__.start();

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/src/tsconfig.app.json
----------------------------------------------------------------------
diff --git a/ui/angular/src/tsconfig.app.json b/ui/angular/src/tsconfig.app.json
new file mode 100644
index 0000000..39ba8db
--- /dev/null
+++ b/ui/angular/src/tsconfig.app.json
@@ -0,0 +1,13 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/app",
+    "baseUrl": "./",
+    "module": "es2015",
+    "types": []
+  },
+  "exclude": [
+    "test.ts",
+    "**/*.spec.ts"
+  ]
+}

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/src/tsconfig.spec.json
----------------------------------------------------------------------
diff --git a/ui/angular/src/tsconfig.spec.json b/ui/angular/src/tsconfig.spec.json
new file mode 100644
index 0000000..63d89ff
--- /dev/null
+++ b/ui/angular/src/tsconfig.spec.json
@@ -0,0 +1,20 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/spec",
+    "baseUrl": "./",
+    "module": "commonjs",
+    "target": "es5",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/src/typings.d.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/typings.d.ts b/ui/angular/src/typings.d.ts
new file mode 100644
index 0000000..b0f9eed
--- /dev/null
+++ b/ui/angular/src/typings.d.ts
@@ -0,0 +1,23 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+/* SystemJS module definition */
+declare var module: NodeModule;
+interface NodeModule {
+  id: string;
+}

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/src/vendor.ts
----------------------------------------------------------------------
diff --git a/ui/angular/src/vendor.ts b/ui/angular/src/vendor.ts
new file mode 100644
index 0000000..c777916
--- /dev/null
+++ b/ui/angular/src/vendor.ts
@@ -0,0 +1,33 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+import '@angular/platform-browser';
+import '@angular/platform-browser-dynamic';
+import '@angular/core';
+import '@angular/common';
+import '@angular/http';
+import '@angular/router';
+
+
+
+// RxJS
+import 'rxjs';
+
+import 'jquery';
+import 'bootstrap/dist/js/bootstrap';
+import 'bootstrap-loader';
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/tsconfig.json
----------------------------------------------------------------------
diff --git a/ui/angular/tsconfig.json b/ui/angular/tsconfig.json
new file mode 100644
index 0000000..a6c016b
--- /dev/null
+++ b/ui/angular/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "outDir": "./dist/out-tsc",
+    "sourceMap": true,
+    "declaration": false,
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "target": "es5",
+    "typeRoots": [
+      "node_modules/@types"
+    ],
+    "lib": [
+      "es2017",
+      "dom"
+    ]
+  }
+}

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/tslint.json
----------------------------------------------------------------------
diff --git a/ui/angular/tslint.json b/ui/angular/tslint.json
new file mode 100644
index 0000000..0db5751
--- /dev/null
+++ b/ui/angular/tslint.json
@@ -0,0 +1,142 @@
+{
+  "rulesDirectory": [
+    "node_modules/codelyzer"
+  ],
+  "rules": {
+    "arrow-return-shorthand": true,
+    "callable-types": true,
+    "class-name": true,
+    "comment-format": [
+      true,
+      "check-space"
+    ],
+    "curly": true,
+    "eofline": true,
+    "forin": true,
+    "import-blacklist": [
+      true,
+      "rxjs"
+    ],
+    "import-spacing": true,
+    "indent": [
+      true,
+      "spaces"
+    ],
+    "interface-over-type-literal": true,
+    "label-position": true,
+    "max-line-length": [
+      true,
+      140
+    ],
+    "member-access": false,
+    "member-ordering": [
+      true,
+      {
+        "order": [
+          "static-field",
+          "instance-field",
+          "static-method",
+          "instance-method"
+        ]
+      }
+    ],
+    "no-arg": true,
+    "no-bitwise": true,
+    "no-console": [
+      true,
+      "debug",
+      "info",
+      "time",
+      "timeEnd",
+      "trace"
+    ],
+    "no-construct": true,
+    "no-debugger": true,
+    "no-duplicate-super": true,
+    "no-empty": false,
+    "no-empty-interface": true,
+    "no-eval": true,
+    "no-inferrable-types": [
+      true,
+      "ignore-params"
+    ],
+    "no-misused-new": true,
+    "no-non-null-assertion": true,
+    "no-shadowed-variable": true,
+    "no-string-literal": false,
+    "no-string-throw": true,
+    "no-switch-case-fall-through": true,
+    "no-trailing-whitespace": true,
+    "no-unnecessary-initializer": true,
+    "no-unused-expression": true,
+    "no-use-before-declare": true,
+    "no-var-keyword": true,
+    "object-literal-sort-keys": false,
+    "one-line": [
+      true,
+      "check-open-brace",
+      "check-catch",
+      "check-else",
+      "check-whitespace"
+    ],
+    "prefer-const": true,
+    "quotemark": [
+      true,
+      "single"
+    ],
+    "radix": true,
+    "semicolon": [
+      true,
+      "always"
+    ],
+    "triple-equals": [
+      true,
+      "allow-null-check"
+    ],
+    "typedef-whitespace": [
+      true,
+      {
+        "call-signature": "nospace",
+        "index-signature": "nospace",
+        "parameter": "nospace",
+        "property-declaration": "nospace",
+        "variable-declaration": "nospace"
+      }
+    ],
+    "typeof-compare": true,
+    "unified-signatures": true,
+    "variable-name": false,
+    "whitespace": [
+      true,
+      "check-branch",
+      "check-decl",
+      "check-operator",
+      "check-separator",
+      "check-type"
+    ],
+    "directive-selector": [
+      true,
+      "attribute",
+      "app",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "app",
+      "kebab-case"
+    ],
+    "use-input-property-decorator": true,
+    "use-output-property-decorator": true,
+    "use-host-property-decorator": true,
+    "no-input-rename": true,
+    "no-output-rename": true,
+    "use-life-cycle-interface": true,
+    "use-pipe-transform-interface": true,
+    "component-class-suffix": true,
+    "directive-class-suffix": true,
+    "no-access-missing-member": true,
+    "templates-use-public": true,
+    "invoke-injectable": true
+  }
+}

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/angular/webpack.config.js
----------------------------------------------------------------------
diff --git a/ui/angular/webpack.config.js b/ui/angular/webpack.config.js
new file mode 100644
index 0000000..ad230c1
--- /dev/null
+++ b/ui/angular/webpack.config.js
@@ -0,0 +1,82 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+var webpack = require('webpack');
+var HtmlWebpackPlugin = require('html-webpack-plugin');
+module.exports = {
+
+    entry: {
+        'app':'./src/main.ts',
+        'vendor':'./src/vendor.ts',
+        'polyfills':'./src/polyfills.ts'
+    },
+    output: {
+        // path: '/dist',
+        filename: '[name].js'
+    },
+    module: {
+        rules: [
+          {
+            test: /\.ts$/,
+            loader: 'ts-loader'
+          },
+          {
+            test: /\.html$/,
+            loader: 'html-loader'
+          },
+          {
+            test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
+            loader: 'file-loader?name=assets/[name].[hash].[ext]'
+          },
+          {
+            test: /\.css$/,
+            loaders: 'style-loader!css-loader' 
+          },
+          {
+            test: /\.css$/,
+            loader: 'raw-loader'
+          }
+        ]
+    },
+
+    resolve: {
+        extensions: ['.js', '.ts']
+    },
+    plugins: [
+        new webpack.optimize.CommonsChunkPlugin({
+          name: ['app', 'vendor', 'polyfills','vendor.js']
+        }),
+    
+        new HtmlWebpackPlugin({
+          template: 'src/index.html'
+        }),
+
+        new webpack.ProvidePlugin({
+        $: 'jquery',
+        jQuery: 'jquery',
+        'window.jQuery': 'jquery',
+        jquery :'jquery',
+        Popper: ['popper.js', 'default'],
+        // In case you imported plugins individually, you must also require them here:
+        Util: "exports-loader?Util!bootstrap/js/dist/util",
+        Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",
+        echarts: "echarts"
+      })
+    ],
+    
+};

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/bower.json
----------------------------------------------------------------------
diff --git a/ui/bower.json b/ui/bower.json
deleted file mode 100644
index 1b77945..0000000
--- a/ui/bower.json
+++ /dev/null
@@ -1,24 +0,0 @@
-{
-  "name": "griffin",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "jquery": "2.1.4",
-    "jquery-ui":"1.12.1",
-    "bootswatch": "3.3.6",
-    "font-awesome": "4.7.0",
-    "angular": "1.6.4",
-    "angular-route": "1.6.4",
-    "angular-smart-table": "2.1.7",
-    "angular-cookies": "1.6.4",
-    "AngularJS-Toaster": "1.2.0",
-    "requirejs": "2.1.22",
-    "domReady": "2.0.1",
-    "angular-spinner": "0.8.0",
-    "echarts": "3.2.2",
-    "angular-animate": "1.6.4"
-  },
-  "resolutions": {
-    "angular": "1.6.4"
-  }
-}

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/build.xml
----------------------------------------------------------------------
diff --git a/ui/build.xml b/ui/build.xml
deleted file mode 100644
index 6e50575..0000000
--- a/ui/build.xml
+++ /dev/null
@@ -1,48 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
--->
-
-<assembly xmlns="http://maven.apache.org/plugins/maven-assembly-plugin/assembly/1.1.2" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/plugins/maven-assembly-plugin/assembly/1.1.2 http://maven.apache.org/xsd/assembly-1.1.2.xsd">
-	<id>resources</id>
-	<formats>
-		<format>zip</format>
-	</formats>
-	<fileSets>
-		<fileSet>
-			<directory>${project.basedir}</directory><!--
-			<includes>
-
-				<include>apidocs/**</include>
-				<include>bower_components/**</include>
-			
-				<include>**/**</include>
-			</includes>
-			-->	
-			<excludes>
-				<exclude>**/node_modules/**</exclude>
-				<exclude>**/tests/**</exclude>
-				<exclude>target/**</exclude>
-				<exclude>pom.xml</exclude>
-				<exclude>build.xml</exclude>
-			</excludes>
-			<useDefaultExcludes>true</useDefaultExcludes>
-		</fileSet>
-
-	</fileSets>
-</assembly>
\ No newline at end of file


[05/13] incubator-griffin git commit: refactor ui with angular2

Posted by gu...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/js/filters/strshorten.js
----------------------------------------------------------------------
diff --git a/ui/js/filters/strshorten.js b/ui/js/filters/strshorten.js
deleted file mode 100644
index ba671c9..0000000
--- a/ui/js/filters/strshorten.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/*
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-*/
-
-define(['./module'], function (filters) {
-    'use strict';
-
-    // return filters.filter('strings', ['version', function (version) {
-    return filters.filter('strShorten', function () {
-        return function (text) {
-            var str = String(text);
-            var strLength = str.length;
-            var windowWidth = 2000;
-            try{
-              windowWidth = window.innerWidth;
-              console.log('Window Size: ' + windowWidth);
-            }catch(e){
-              console.error(e);
-            }
-
-            if(windowWidth < 1400 && strLength > 10){
-              return str.substring(0, 10) + '...';
-            }else if(windowWidth < 1600 && strLength > 20){
-              return str.substring(0, 20) + '...';
-            }else if(windowWidth < 1800 && strLength > 26){
-              return str.substring(0, 26) + '...';
-            }else if(windowWidth < 2000 && strLength > 30){
-              return str.substring(0, 30) + '...';
-            }else{
-              return str;
-            }
-        }
-      });
-    // }]);
-});

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/js/main.js
----------------------------------------------------------------------
diff --git a/ui/js/main.js b/ui/js/main.js
deleted file mode 100644
index c271fd4..0000000
--- a/ui/js/main.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/*
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-*/
-
-//Reference: https://www.startersquad.com/blog/angularjs-requirejs/
-
-/*global require*/
-'use strict';
-
-require.config({
-	paths: {
-	    'domReady': '../bower_components/domReady/domReady',
-	    'angular': '../bower_components/angular/angular',
-			'angularRoute': '../bower_components/angular-route/angular-route',
-
-			'ngSmartTable': '../bower_components/angular-smart-table/dist/smart-table',
-			'ngAnimate': '../bower_components/angular-animate/angular-animate',
-			'ngToaster': '../bower_components/AngularJS-Toaster/toaster',
-			'ngCookies': '../bower_components/angular-cookies/angular-cookies',
-
-	    'jquery': '../bower_components/jquery/dist/jquery',
-	    'jquery-ui':'../bower_components/jquery-ui/jquery-ui',
-	    'bootstrap': '../bower_components/bootstrap/dist/js/bootstrap',
-	    'spin': '../bower_components/spin.js/spin',
-	    'angularSpinner': '../bower_components/angular-spinner/angular-spinner',
-		'echarts': '../bower_components/echarts/dist/echarts',
-		'echarts-dark': '../bower_components/echarts/theme/dark'
-	},
-	shim: {
-		'angular': {
-			deps: ['jquery'],
-			exports: 'angular'
-		},
-		'angularRoute': {
-	        deps: ['angular'],
-	        exports: 'angularRoute'
-	    },
-		'ngSmartTable': {
-			deps: ['angular'],
-			exports: 'ngSmartTable'
-		},
-		'ngAnimate': {
-	        deps: ['angular'],
-	        exports: 'ngAnimate'
-	    },
-		'ngToaster': {
-			deps: ['angular', 'ngAnimate'],
-			exports: 'ngToaster'
-		},
-		'ngCookies': {
-			deps: ['angular'],
-			exports: 'ngCookies'
-		},
-	
-	    'jquery': {
-				exports: 'jquery'
-			},
-		'jquery-ui':{
-			exports:'jquery-ui',
-			deps:['jquery']
-		},
-	    'bootstrap': {
-	      exports: 'bootstrap',
-	      deps: ['jquery']
-	    },
-	    'spin':{
-	    	exports: 'spin'
-	    },
-	    'angularSpinner':{
-	    	exports: 'angularSpinner',
-	    	deps: ['angular', 'spin']
-	    },
-		'echarts': {
-			exports: 'echarts'
-		},
-		'echarts-dark': {
-			deps: ['echarts'],
-			exports: 'echarts-dark'
-		}
-	},
-	deps: ['bs']
-});

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/js/routes.js
----------------------------------------------------------------------
diff --git a/ui/js/routes.js b/ui/js/routes.js
deleted file mode 100644
index 44f1151..0000000
--- a/ui/js/routes.js
+++ /dev/null
@@ -1,245 +0,0 @@
-/*
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-*/
-
-define(['./app'], function(app) {
-    'use strict';
-
-    return app.config(['$routeProvider', '$httpProvider', function($routeProvider, $httpProvider) {
-
-        $routeProvider.when('/', {
-            redirectTo: '/health'
-        });
-
-        $routeProvider.when('/health', {
-            templateUrl: '/pages/health/health.html',
-            controller: 'HealthCtrl'
-        });
-
-        $routeProvider.when('/measures', {
-            templateUrl: '/pages/measures/measures.html',
-            controller: 'RuleCtrl'
-        });
-
-        $routeProvider.when('/createrule0', {
-            templateUrl: '/pages/measures/createrule0.html',
-            controller: 'CreateRule0Ctrl'
-        });
-
-        $routeProvider.when('/createrule-ac', {
-            templateUrl: '/pages/measures/createrule-ac.html',
-            controller: 'CreateRuleACCtrl'
-        });
-
-        $routeProvider.when('/createrule-va', {
-            templateUrl: '/pages/measures/createrule-va.html',
-            controller: 'CreateRuleVACtrl'
-        });
-
-        $routeProvider.when('/createrule-an', {
-            templateUrl: '/pages/measures/createrule-an.html',
-            controller: 'CreateRuleANCtrl'
-        });
-
-        $routeProvider.when('/createrule-pu', {
-            templateUrl: '/pages/measures/createrule-pu.html',
-            controller: 'CreateRulePUCtrl'
-        });
-
-        $routeProvider.when('/viewrule/:modelname/:modeltype', {
-            templateUrl: '/pages/measures/viewrule.html',
-            controller: 'ViewRuleCtrl'
-        });
-
-        $routeProvider.when('/viewrule/:modelname', {
-            templateUrl: '/pages/measures/viewrule.html',
-            controller: 'ViewRuleCtrl'
-        });
-
-        $routeProvider.when('/detailed/:modelname',{
-            templateUrl:'/pages/measures/detail.html',
-            controller:'DetailCtrl'
-        })
-
-        $routeProvider.when('/jobs',{
-            templateUrl:'pages/jobs/jobs.html',
-            controller:'JobCtrl'
-        });
-
-        $routeProvider.when('/createjob-ac', {
-            templateUrl: '/pages/jobs/createjob-ac.html',
-            controller: 'CreateJobACCtrl'
-        });
-
-        $routeProvider.when('/metrics', {
-            templateUrl: '/pages/metrics/dashboard.html',
-            controller: 'MetricsCtrl'
-        });
-
-        $routeProvider.when('/metrics/:sysName', {
-            templateUrl: '/pages/metrics/dashboard.html',
-            controller: 'MetricsCtrl'
-        });
-
-        $routeProvider.when('/dataassets', {
-            templateUrl: '/pages/dataassets/dataassets.html',
-            controller: 'DataAssetsCtrl'
-        });
-
-        $routeProvider.when('/dataassets/:assetId', {
-            templateUrl: '/pages/dataassets/editdataasset.html',
-            controller: 'EditDataAssetCtrl'
-        });
-
-        $routeProvider.when('/createdataasset', {
-            templateUrl: '/pages/dataassets/createdataasset.html',
-            controller: 'CreateDataAssetCtrl'
-        });
-
-        $routeProvider.when('/mydashboard', {
-
-            // templateUrl: '/pages/mydashboard/mydashboard.html',
-            // controller: 'MyDashboardCtrl'
-            templateUrl: '/pages/metrics/dashboard.html',
-            controller: 'MetricsCtrl'
-
-        });
-
-        $routeProvider.when('/subscribemodel', {
-            templateUrl: '/pages/mydashboard/subscribemodel.html',
-            controller: 'SubscribeModelCtrl'
-        });
-
-        $routeProvider.when('/undercons', {
-            templateUrl: '/pages/template/undercons.html',
-            controller: null
-        });
-
-        $routeProvider.otherwise({
-            redirectTo: '/'
-        });
-
-        // $routeProvider.otherwise(function(){
-        //     console.log("otherwise");
-        // });
-
-
-        // $locationProvider.html5Mode({
-        //   enabled: true,
-        //   requireBase: false
-        // });
-
-        $httpProvider.interceptors.push(function($q, $location, $rootScope, $timeout, $window, $config) {
-            var requestArray = {};
-
-            return {
-                "request": function(config) {
-                    if (isSpinnerRequired($config, config.url)) {
-                        //There's a bug in angular-spinner, the event was sent to the component too early while the directive hasn't been compiled completely so that the spinner object hasn't be created
-                        //So let's delay 200 ms to browadcast the event
-                        $timeout(function() {
-                            if (!requestArray[config.url])
-                                requestArray[config.url] = 0;
-
-                            if (requestArray[config.url] >= 0) {
-                                $rootScope.$broadcast('us-spinner:spin', false);
-                                requestArray[config.url]++;
-                            } else {
-                                requestArray[config.url] = 0;
-                            }
-
-                            console.log(config.url + ": " + requestArray[config.url]);
-                        }, 200);
-
-                    }
-                    return config || $q.when(config);
-                },
-                "response": function(response) {
-                    if (isSpinnerRequired($config, response.config.url)) {
-                        $timeout(function() {
-                            if (!requestArray[response.config.url])
-                                requestArray[response.config.url] = 0;
-
-                            $rootScope.$broadcast('us-spinner:stop', false);
-                            requestArray[response.config.url]--;
-
-                            console.log(response.config.url + ": " + requestArray[response.config.url]);
-                        }, 0);
-                    }
-                    return response || $q.when(response);
-                },
-
-                "responseError": function(response) {
-
-                    if (isSpinnerRequired($config, response.config.url)) {
-                        $timeout(function() {
-                            if (!requestArray[response.config.url])
-                                requestArray[response.config.url] = 0;
-
-                            $rootScope.$broadcast('us-spinner:stop', false);
-                            requestArray[response.config.url]--;
-
-                            console.log(response.config.url + ": " + requestArray[response.config.url]);
-                        }, 0);
-
-                    }
-                    //if(isApiCall(Config, response.config.url)){
-                    if (isSpinnerRequired($config, response.config.url)) {
-                        $rootScope.error = response.status + " " + response.statusText;
-                        $rootScope.errorMsg = response.data;
-                        console.error(response.data);
-                        if (response.status == 0 && !response.data) {
-                            $window.alert("The connection to server failed, please ensure you've configured proxy to https://c2sproxy.vip.ebay.com/wpad.dat. If still fails, please contact DL-eBay-lshao-All@ebay.com");
-                            // console.error("status: " + response.status);
-                            // console.error("data: " + response.data);
-                        }
-                        //Disable error handling temporarily
-                        //$location.path("error");
-                    }
-
-                    return $q.reject(response);
-
-                }
-            }
-
-        });
-
-    }]);
-});
-
-function isSpinnerRequired(Config, url){
-    var names = [
-        // "dbtree",
-        // "getdataasset",
-        "allModels",
-        "getModel",
-        //"heatmap",
-        //"metricdetail",
-        //"dashboard",
-        "getmydashboard",
-        "getsubscribe"
-    ];
-
-    var uriArray = Config.uri;
-    for(var i = 0; i < names.length; i ++){
-        if(url.indexOf(uriArray[names[i]])>=0)
-            return true;
-    }
-
-    return false;
-}

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/js/services/bark-chart.js
----------------------------------------------------------------------
diff --git a/ui/js/services/bark-chart.js b/ui/js/services/bark-chart.js
deleted file mode 100644
index 7d76841..0000000
--- a/ui/js/services/bark-chart.js
+++ /dev/null
@@ -1,302 +0,0 @@
-/*
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-*/
-
-define(['./module'], function (services) {
-  services.factory('$barkChart', function(){
-
-    return {
-      getOptionPie: getOptionPie,
-      getOptionBig: getOptionBig,
-      getOptionSide: getOptionSide,
-      getOptionThum: getOptionThum
-    };
-  });
-
-  function getOptionPie(status) {
-    var data = [];
-    for (var key in status) {
-        var item = {};
-        item.name = key;
-        item.value = status[key];
-        if (key === 'health') {
-            item.selected = true;
-        }
-        data.push(item);
-    }
-
-    var option = {
-        title: {
-            show: false
-        },
-        backgroundColor: 'transparent',
-        tooltip: {
-            trigger: 'item',
-            formatter: "{b} <br> <b>{c}</b> ({d}%)"
-        },
-        series: [{
-            type: 'pie',
-            selectedMode: 'single',
-            label:{
-            normal: {
-                position: 'inner',
-                formatter: function(params) {
-                    if (params.name === 'health') {
-                    return params.percent+'%';
-                    } else {
-                    return '';
-                    }
-                }
-            }
-            },
-            data: data
-        }],
-        color: ['#005732','#ff3333','#c23531']
-    };
-
-    return option;
-  }
-
-  function getOptionThum(metric) {
-    var data = getMetricData(metric);
-    var option = {
-      title: {
-        text:  metric.name,
-        left: 'center',
-        textStyle: {
-            fontWeight: 'normal',
-            fontSize: 15
-        }
-      },
-      backgroundColor: 'transparent',
-      grid:{
-        right: '7%',
-        left: '5%',
-        bottom: '5%',
-        containLabel: true
-      },
-      tooltip : {
-          trigger: 'axis',
-          formatter : function(params) {
-            return getTooltip(params);
-          },
-          position: function(point, params, dom) {
-              return getTooltipPosition(point, params, dom);
-          }
-      },
-      xAxis : {
-              type : 'time',
-              splitLine: {
-                  show: false
-              },
-              splitNumber: 2
-      },
-      yAxis : {
-              type : 'value',
-              scale : true,
-              name: formatter_yaxis_name(metric),
-              axisLabel: {
-                  formatter: formatter_value
-              },
-              splitNumber: 2
-      }
-    };
-    option.series = getSeries(metric);
-    return option;
-  }
-
-  function getTooltipPosition(point, params, dom) {
-      return [point[0]/2, point[1]/2];
-  }
-
-  function formatter_value(value, index) {
-      if (value < 1000) {
-          return value;
-      } else {
-          return value/1000;
-      }
-  }
-
-  function formatter_yaxis_name(metric) {
-//      if (metric.hits.hits <= 100) {
-          return 'accuracy (%)';
-//      } else {
-//          return 'dq (k)';
-//      }
-  }
-
-  function getTooltip(params) {
-    var result = '';
-    if (params.length > 0) {
-          result = new Date(getUTCTimeStamp(params[0].data[0])).toUTCString().replace('GMT', '')+
-                      '<br /> Value : ' + params[0].data[1];
-    }
-    return result;
-  }
-
-  function getUTCTimeStamp(timestamp) {
-    var TzOffset = new Date(timestamp).getTimezoneOffset()/60;
-    return timestamp-TzOffset*60*60*1000;
-  }
-
-  function getOptionSide(metric) {
-    var data = getMetricData(metric);
-    var option = {
-      title: {
-        show: false
-      },
-      backgroundColor: 'transparent',
-      grid:{
-        right: '5%',
-        left: '5%',
-        bottom: '5%',
-        top: 30,
-        containLabel: true
-
-      },
-      tooltip : {
-          trigger: 'axis',
-          formatter : function(params) {
-            return getTooltip(params);
-          }
-      },
-      xAxis : {
-              type : 'time',
-              splitLine: {
-                  show: false
-              },
-              splitNumber: 2
-      },
-      yAxis : {
-              type : 'value',
-              scale : true,
-              name: formatter_yaxis_name(metric),
-              axisLabel: {
-                  formatter: formatter_value
-              },
-              splitNumber: 2
-      }
-    };
-    option.series = getSeries(metric);
-    return option;
-  }
-
-  function getSeries(metric) {
-    var series = {};
-    series = getSeriesCount(metric);
-    return series;
-  }
-
-  function getOptionBig(metric) {
-    var data = getMetricData(metric);
-    var option = {
-      title: {
-        text:  metric.name,
-        link: '/#!/viewrule/' + metric.name,
-        target: 'self',
-        left: 'center',
-        textStyle: {
-            fontSize: 25
-        }
-      },
-      grid: {
-        right: '2%',
-        left: '2%',
-        containLabel: true
-      },
-      dataZoom: [{
-        type: 'inside',
-        start: 0,
-        throttle: 50
-      },{
-        show: true,
-        start: 0
-      }],
-      tooltip : {
-          trigger: 'axis',
-          formatter : function(params) {
-            return getTooltip(params);
-          }
-      },
-      xAxis : {
-              type : 'time',
-              splitLine: {
-                  show: false
-              }
-      },
-      yAxis : {
-              type : 'value',
-              scale : true,
-              name: formatter_yaxis_name(metric),
-              axisLabel: {
-                  formatter: formatter_value
-              }
-      },
-      animation: true
-    };
-    option.series = getSeries(metric);
-    return option;
-  }
-
-  function getMetricData(metric) {
-    var data = [];
-    var chartData = metric.details;
-    for(var i = 0; i < chartData.length; i++){
-
-          if(chartData[i]._source.total!=0)
-            data.push([formatTimeStamp(chartData[i]._source.tmst), parseFloat((chartData[i]._source.matched/chartData[i]._source.total*100).toFixed(2))]);
-          else
-            data.push([formatTimeStamp(chartData[i]._source.tmst), parseFloat((0).toFixed(2))]);
-
-    }
-
-    data.sort(function(a, b){
-      return a[0] - b[0];
-    });
-
-    return data;
-  }
-
-  function formatTimeStamp(timestamp) {
-      var TzOffset = new Date(timestamp).getTimezoneOffset()/60-7;
-      return timestamp+TzOffset*60*60*1000;
-  }
-
-  function getSeriesCount(metric) {
-    var series = [];
-    var data = getMetricData(metric);
-    series.push({
-          type: 'line',
-          data: data,
-          smooth:true,
-          lineStyle: {
-            normal: {
-                color: '#d48265'
-            }
-          },
-          itemStyle: {
-              normal: {
-                  color: '#d48265'
-              }
-          }
-      });
-      return series;
-  }
-
-
-});

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/js/services/index.js
----------------------------------------------------------------------
diff --git a/ui/js/services/index.js b/ui/js/services/index.js
deleted file mode 100644
index 55535f4..0000000
--- a/ui/js/services/index.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/*
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-*/
-define(['./services', './bark-chart'], function () {});

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/js/services/module.js
----------------------------------------------------------------------
diff --git a/ui/js/services/module.js b/ui/js/services/module.js
deleted file mode 100644
index 32ae912..0000000
--- a/ui/js/services/module.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/*
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-*/
-
-define(['angular'], function (ng) {
-    'use strict';
-    return ng.module('app.services', []);
-});

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/js/services/services.js
----------------------------------------------------------------------
diff --git a/ui/js/services/services.js b/ui/js/services/services.js
deleted file mode 100644
index 2975121..0000000
--- a/ui/js/services/services.js
+++ /dev/null
@@ -1,110 +0,0 @@
-/*
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-*/
-
-define(['./module'], function (services) {
-    'use strict';
-    //version
-    services.value('version', '0.1');
-
-    services.factory('$config', function(){
-
-
-//    var BACKEND_SERVER = 'http://10.149.247.156:38080';
-//      var BACKEND_SERVER = 'http://localhost:8080';
-        var BACKEND_SERVER = '';
-      var API_ROOT_PATH = '/api/v1';
-
-//      var ES_SERVER = 'http://10.149.247.156:39200';
-//      var ES_SERVER = "http://" + location.host + ":59200"
-       var ES_SERVER = "http://" + location.host.replace("8080", "9200");
-
-      var config = {
-          // URI paths, always have a trailing /
-          uri: {
-              base: BACKEND_SERVER + API_ROOT_PATH,
-
-              dbtree:BACKEND_SERVER + '/metadata/hive/allTables',
-              schemadefinition: BACKEND_SERVER + '/metadata/hive/table',
-              dataassetlist: BACKEND_SERVER + '/metadata/hive/allTables',
-
-              adddataasset: BACKEND_SERVER + API_ROOT_PATH + '/dataassets',
-              updatedataasset: BACKEND_SERVER + API_ROOT_PATH + '/dataassets',
-              getdataasset: BACKEND_SERVER + API_ROOT_PATH + '/dataassets',
-              deletedataasset: BACKEND_SERVER + API_ROOT_PATH + '/dataassets',
-
-              //mydashboard
-              getmydashboard: BACKEND_SERVER + API_ROOT_PATH + '/metrics/mydashboard/',
-              getsubscribe: BACKEND_SERVER + API_ROOT_PATH + '/subscribe/',
-              newsubscribe: BACKEND_SERVER + API_ROOT_PATH + '/subscribe',
-
-              //metrics
-              statistics: BACKEND_SERVER + '/jobs/health',
-              briefmetrics: BACKEND_SERVER + API_ROOT_PATH + '/metrics/briefmetrics',
-              heatmap: BACKEND_SERVER + API_ROOT_PATH + '/metrics/heatmap' ,
-              metricdetail: BACKEND_SERVER + API_ROOT_PATH + '/metrics/complete',
-              rulemetric: BACKEND_SERVER + API_ROOT_PATH + '/metrics/brief',
-//              organization:BACKEND_SERVER+'/org',
-              orgmap: BACKEND_SERVER+'/metrics/org',
-
-
-              metricsByOrg:'',
-//              organization:'/org.json',
-//              dashboard:'/dashboard.json',
-
-              organization:BACKEND_SERVER + '/orgWithMetricsName',
-              dashboard:ES_SERVER+'/griffin/accuracy/_search?pretty&filter_path=hits.hits._source',
-              metricsample: BACKEND_SERVER + API_ROOT_PATH + '/metrics/sample',
-              metricdownload: BACKEND_SERVER + API_ROOT_PATH + '/metrics/download',
-
-              //Models
-              allModels: BACKEND_SERVER + '/measures',
-              addModels: BACKEND_SERVER + '/measure',
-              deleteModel:BACKEND_SERVER + '/measure',
-              getModel: BACKEND_SERVER + '/measure',
-              enableModel: BACKEND_SERVER + API_ROOT_PATH + '/models/enableModel',
-
-              //Jobs
-              allJobs:BACKEND_SERVER + '/jobs/',
-              addJobs:BACKEND_SERVER+'/jobs',
-              getMeasuresByOwner:BACKEND_SERVER+'/measures/owner/',
-              deleteJob:BACKEND_SERVER + '/jobs',
-              getInstances:BACKEND_SERVER + '/jobs/instances',
-//              allJobs:'/jobs.json',
-              newAccuracyModel: BACKEND_SERVER + API_ROOT_PATH + '/models' ,
-              newValidityModel: BACKEND_SERVER + API_ROOT_PATH + '/models' ,
-              newAnomalyModel: BACKEND_SERVER + API_ROOT_PATH + '/models' ,
-              newPublishModel: BACKEND_SERVER + API_ROOT_PATH + '/models' ,
-              // newAccuracyModel: BACKEND_SERVER + API_ROOT_PATH + '/models/newAccuracyModel' ,
-              // newValidityModel: BACKEND_SERVER + API_ROOT_PATH + '/model/newValidityModel' ,
-              // newAnomalyModel: BACKEND_SERVER + API_ROOT_PATH + '/model/newAnomalyModel' ,
-              // newPublishModel: BACKEND_SERVER + API_ROOT_PATH + '/model/newPublishModel' ,
-              // getAccuracyModel: BACKEND_SERVER + API_ROOT_PATH + '/model/getAccuracyModel',
-              // getValidityModel: BACKEND_SERVER + API_ROOT_PATH + '/model/getValidityModel',
-              // getPublishModel: BACKEND_SERVER + API_ROOT_PATH + '/model/getPublishModel',
-              // getAnomalyModel: BACKEND_SERVER + API_ROOT_PATH + '/model/getAnomalyModel',
-
-              //Notification
-              getnotifications: BACKEND_SERVER + API_ROOT_PATH + '/notifications',
-          }
-
-      };
-
-      return config;
-    });
-});

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/login/b3vHigh.jpg
----------------------------------------------------------------------
diff --git a/ui/login/b3vHigh.jpg b/ui/login/b3vHigh.jpg
deleted file mode 100644
index 0d6949d..0000000
Binary files a/ui/login/b3vHigh.jpg and /dev/null differ

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/login/login.css
----------------------------------------------------------------------
diff --git a/ui/login/login.css b/ui/login/login.css
deleted file mode 100644
index 755bc77..0000000
--- a/ui/login/login.css
+++ /dev/null
@@ -1,90 +0,0 @@
-/*
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-*/
-html, body {
-    height: 100%;
-}
-
-body {
-    background-color: #1A237E;
-    background-position: center center;
-    background-repeat: no-repeat;
-    background-attachment: fixed;
-    background-size: cover;
-}
-
-#content {
-    background-color: transparent;
-}
-
-hr {
-    margin-bottom: 30px;
-}
-
-@media (min-width: 992px) {
-
-    #content-row {
-        margin-top:12em;
-        margin-bottom:7em;
-    }
-
-    #bark-description {
-        display: block;
-    }
-
-    #bark-description-2 {
-        display: none;
-    }
-}
-
-@media (max-width:991px) {
-
-    #content-row {
-        margin-top:0em;
-        margin-bottom:0em;
-    }
-
-    #bark-description {
-        display: none;
-    }
-
-    #bark-description-2 {
-        margin-top: 3em;
-        display: block;
-    }
-}
-
-#bark-description p, #bark-description-2 p {
-    margin-left: 100px;
-    color: #ffffff;
-    font-size: 20px;
-}
-
-#content-row {
-    padding: 3em 0;
-    background-color: rgba(255, 255, 255, 0.2);
-}
-
-#loginMsg {
-    display: none;
-    background-color: #F1D7D7;
-    color: #A95252;
-    padding: 8px 12px;
-    border-radius: 4px;
-    text-align:center;
-}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/login/login.html
----------------------------------------------------------------------
diff --git a/ui/login/login.html b/ui/login/login.html
deleted file mode 100644
index 3dc2a78..0000000
--- a/ui/login/login.html
+++ /dev/null
@@ -1,120 +0,0 @@
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
--->
-
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="description" content="">
-    <meta name="author" content="">
-    <!-- <link rel="icon" href="/img/favicon.ico"> -->
-
-    <title>Griffin - Data Quality Service</title>
-    <link rel="icon" href="../img/favicon.ico">
-    <!-- Bootstrap Core CSS -->
-    <link href="../bower_components/bootswatch/cyborg/bootstrap.css" rel="stylesheet">
-    <link href="login.css" rel="stylesheet">
-    <!-- Custom Fonts -->
-    <!-- <link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> -->
-    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
-    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
-    <!--[if lt IE 9]>
-        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
-        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
-    <![endif]-->
-</head>
-<body>
-
-    <div id="content" class="container-fluid">
-        <div class="row" id="content-row">
-
-            <div class="col-md-6 col-md-offset-1 col-xs-12">
-                <div id="bark-description">
-                    <h3>
-                        Data Quality Service Platform on eBay Cloud.
-                    </h3><br>
-                    <p>
-                        Automates your data quality validation
-                    </p><br>
-                    <p>
-                        Health monitoring, Profiling and detection
-                    </p><br>
-                    <p>
-                        Unified Visualization
-                    </p><br>
-                    <p>
-                        One set of tools to build data quality pipelines
-                    </p>
-                </div>
-            </div>
-
-            <div class="col-md-3 col-md-offset-1 col-xs-12">
-                <div id="login-form">
-                    <div style="text-align:center;margin-bottom:30px;">
-                        <img src="../img/logo.png" class="img-rounded" style="width:80%;">
-                    </div>
-
-                    <input type="input" class="form-control" placeholder="username" autocomplete="on" style="margin-bottom:20px;">
-
-                    <input type="password" class="form-control" placeholder="password" autocomplete="on">
-
-                    <div class="checkbox">
-                    <label style="color:white;">
-                        <input type="checkbox" value="remember-me" checked>Remember me
-                    </label>
-                    </div>
-
-                    <button class="btn btn-default btn-large btn-block" id="login-btn" style="margin-bottom: 20px;">Log in</button>
-
-                    <div id="loginMsg">Login failed. Try again.</div>
-                </div>
-            </div>
-
-            <div class="col-xs-12">
-                <div id="bark-description-2">
-                    <h3>
-                        Data Quality Service Platform on the eBay Cloud.
-                    </h3><br>
-                    <p>
-                        Automates your data quality validation
-                    </p><br>
-                    <p>
-                        Health monitoring, Profiling and detection
-                    </p><br>
-                    <p>
-                        Unified Visualization
-                    </p><br>
-                    <p>
-                        One set of tools to build data quality pipelines
-                    </p>
-                </div>
-            </div>
-        </div>
-
-    </div>
-
-    <script src="../bower_components/jquery/dist/jquery.js"></script>
-    <script src="../bower_components/bootstrap/dist/js/bootstrap.js"></script>
-    <script src="login.js"></script>
-</body>
-</html>

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/login/login.js
----------------------------------------------------------------------
diff --git a/ui/login/login.js b/ui/login/login.js
deleted file mode 100644
index 6db26e2..0000000
--- a/ui/login/login.js
+++ /dev/null
@@ -1,111 +0,0 @@
-/*
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
-
-*/
-
-
-$(document).ready(function() {
-    $('input:eq(1)').keyup(function(evt){
-      if(evt.which == 13){//enter
-        evt.preventDefault();
-        $('#login-btn').click();
-        $('#login-btn').focus();
-      }
-    });
-
-    $('input:eq(0)').focus(function(evt){
-      $('#loginMsg').hide();
-    });
-
-    $('input:eq(1)').focus(function(evt){
-      $('#loginMsg').hide();
-    });
-
-    $('#login-btn').click(function() {
-        var name = $('input:eq(0)').val();
-        var password = $('input:eq(1)').val();
-       var loginUrl = '/api/v1/login/authenticate';
-        loginBtnWait();
-        $.ajax({
-            type: 'POST',
-            url: loginUrl,
-            data: JSON.stringify({username:name, password:password}),
-            contentType: 'application/json',
-            dataType: 'json',
-            success: function(data){
-                console.log(data);
-                if(data.status == 0){//logon success
-                    //console.log($('input:eq(3)').val());
-                    if($('input:eq(2)').prop('checked')){
-                        setCookie('ntAccount', data.ntAccount, 30);
-                        setCookie('fullName', data.fullName, 30);
-                    }else{
-                        setCookie('ntAccount', data.ntAccount);
-                        setCookie('fullName', data.fullName);
-                    }
-
-                    loginBtnActive()
-                    window.location.replace('/');
-                }else{
-                    showLoginFailed();
-                    loginBtnActive();
-                };
-            },
-            error: function(jqXHR, textStatus, errorThrown){
-//                showLoginFailed();
-//                loginBtnActive();
-                //::TODO ignore login for test purpose
-                setCookie('ntAccount', 'test', 30);
-                setCookie('fullName', 'test', 30);
-                window.location.replace('/');
-                //::TODO ignore login for test purpose done
-            }
-        });
-    });
-
-    function setCookie(name, value, days){
-        if (days) {
-            var date = new Date();
-            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
-            expires = "; expires=" + date.toGMTString();
-	    } else {
-	        expires = "";
-	    }
-	    document.cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value) + expires + "; path=/";
-	}
-
-	function getCookie(key) {
-        var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
-        return keyValue ? keyValue[2] : null;
-    }
-
-    function loginBtnWait() {
-      $('#login-btn').addClass('disabled')
-        .text('Logging in......');
-    }
-
-    function loginBtnActive() {
-        $('#login-btn').removeClass('disabled')
-        .text('Log in');
-    }
-
-    function showLoginFailed() {
-      $('#loginMsg').show()
-        .text('Login failed. Try again.');
-    }
-});

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/login/logo.gif
----------------------------------------------------------------------
diff --git a/ui/login/logo.gif b/ui/login/logo.gif
deleted file mode 100644
index 689ef16..0000000
Binary files a/ui/login/logo.gif and /dev/null differ

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/login/pad.png
----------------------------------------------------------------------
diff --git a/ui/login/pad.png b/ui/login/pad.png
deleted file mode 100644
index c5c532b..0000000
Binary files a/ui/login/pad.png and /dev/null differ

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/package.json
----------------------------------------------------------------------
diff --git a/ui/package.json b/ui/package.json
deleted file mode 100644
index 7d3427f..0000000
--- a/ui/package.json
+++ /dev/null
@@ -1,27 +0,0 @@
-{
-  "name": "Griffin",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "start": "npm run lite",
-    "lite": "lite-server",
-    "test": "karma start tests/ut/karma.conf.js"
-  },
-  "dependencies": {},
-  "devDependencies": {
-    "bower": "^1.7.7",
-    "angular-mocks": "^1.5.3",
-    "frisby": "^0.8.5",
-    "jasmine-core": "^2.4.1",
-    "karma": "^0.13.22",
-    "karma-chrome-launcher": "^0.2.2",
-    "karma-coverage": "^0.5.3",
-    "karma-jasmine": "^0.3.8",
-    "karma-mocha-reporter": "^1.1.6",
-    "karma-phantomjs-launcher": "^1.0.0",
-    "karma-requirejs": "^0.2.6",
-    "lite-server": "^2.1.0",
-    "phantomjs-prebuilt": "^2.1.7",
-    "requirejs": "^2.2.0"
-  }
-}

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/pages/dataassets/confirmation-dataasset.html
----------------------------------------------------------------------
diff --git a/ui/pages/dataassets/confirmation-dataasset.html b/ui/pages/dataassets/confirmation-dataasset.html
deleted file mode 100644
index 3598dfd..0000000
--- a/ui/pages/dataassets/confirmation-dataasset.html
+++ /dev/null
@@ -1,125 +0,0 @@
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
--->
-
-<div class="container-fluid" id="viewruleContent" style="overflow:auto;">
-  <div class="row">
-    <h5 class="over-title margin-bottom-15">Basic information</h5>
-  </div><!--//row-->
-  <div class="row">
-
-    <div  class="col-lg-12 col-md-12 col-sm-12">
-        <div id="viewrule-definition" class="viewrule-content">
-          <div class="row">
-            <label class="col-md-4 col-lg-4 col-sm-4">
-              Asset Name:
-            </label>
-
-            <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
-              {{form.data.basic.assetName}}
-            </div>
-          </div>
-
-          <div class="row">
-            <label class="col-md-4 col-lg-4 col-sm-4">
-              Asset Type:
-            </label>
-
-            <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
-              {{form.data.basic.type|strmap:assetTypeOptions}}
-            </div>
-          </div>
-
-          <div class="row">
-            <label class="col-md-4 col-lg-4 col-sm-4">
-              HDFS Path:
-            </label>
-
-            <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
-              {{form.data.basic.path || 'N/A'}}
-            </div>
-          </div>
-
-          <div class="row">
-            <label class="col-md-4 col-lg-4 col-sm-4">
-              Data folder pattern:
-            </label>
-
-            <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
-              {{form.data.basic.folderFormat || 'N/A'}}
-            </div>
-          </div>
-
-          <div class="row">
-            <label for="systemSelector" class="col-md-4 col-lg-4 col-sm-4">
-              Platform:
-            </label>
-
-            <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
-              {{form.data.basic.platform}}
-            </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">
-              {{form.data.basic.system|strmap:systemOptions}}
-            </div>
-          </div>
-
-          <div class="row">
-            <label class="col-md-4 col-lg-4 col-sm-4">
-              Schema:
-            </label>
-
-            <div class="col-md-8 col-lg-8 col-sm-8" style="color: #fff">
-              {{form.data.basic.schema}}
-            </div>
-          </div>
-
-          <div class="row">
-            <label class="col-md-4 col-lg-4 col-sm-4">
-              Owner:
-            </label>
-
-            <div class="col-md-8 col-lg-8 col-sm-8" style="color: #fff">
-              {{form.data.basic.owner}}
-            </div>
-          </div>
-
-          <div class="row">
-            <label class="col-md-4 col-lg-4 col-sm-4">
-              Hive partition columns:
-            </label>
-
-            <div class="col-md-8 col-lg-8 col-sm-8" style="color: #fff">
-              {{form.data.basic.partitions}}
-            </div>
-          </div>
-
-
-      </div>
-    </div>
-
-
-  </div><!--//row-->
-
-</div>

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/pages/dataassets/confirmation-delete-dataasset.html
----------------------------------------------------------------------
diff --git a/ui/pages/dataassets/confirmation-delete-dataasset.html b/ui/pages/dataassets/confirmation-delete-dataasset.html
deleted file mode 100644
index ca709c6..0000000
--- a/ui/pages/dataassets/confirmation-delete-dataasset.html
+++ /dev/null
@@ -1,104 +0,0 @@
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
--->
-<div class="container-fluid" id="viewruleContent" style="overflow:auto;">
-  <div class="row">
-    <h5 class="over-title margin-bottom-15">Basic information</h5>
-  </div><!--//row-->
-  <div class="row">
-
-    <div  class="col-lg-12 col-md-12 col-sm-12">
-        <div id="viewrule-definition" class="viewrule-content">
-          <div class="row">
-            <label class="col-md-4 col-lg-4 col-sm-4">
-              Asset Name:
-            </label>
-
-            <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
-              {{selectedRow.assetName}}
-            </div>
-          </div>
-
-          <div class="row">
-            <label class="col-md-4 col-lg-4 col-sm-4">
-              Asset Type:
-            </label>
-
-            <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
-              {{selectedRow.assetType}}
-            </div>
-          </div>
-
-          <div class="row">
-            <label class="col-md-4 col-lg-4 col-sm-4">
-              HDFS Path:
-            </label>
-
-            <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
-              {{selectedRow.assetHDFSPath || 'N/A'}}
-            </div>
-          </div>
-
-          <div class="row">
-            <label for="systemSelector" class="col-md-4 col-lg-4 col-sm-4">
-              Platform:
-            </label>
-
-            <div class="col-md-8 col-lg-8 col-sm-8 " style="color: #fff">
-              {{selectedRow.platform}}
-            </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">
-              {{selectedRow.system}}
-            </div>
-          </div>
-
-          <div class="row">
-            <label class="col-md-4 col-lg-4 col-sm-4">
-              Schema:
-            </label>
-
-            <div class="col-md-8 col-lg-8 col-sm-8" style="color: #fff">
-              {{selectedRow.schema}}
-            </div>
-          </div>
-
-          <div class="row">
-            <label class="col-md-4 col-lg-4 col-sm-4">
-              Owner:
-            </label>
-
-            <div class="col-md-8 col-lg-8 col-sm-8" style="color: #fff">
-              {{selectedRow.owner}}
-            </div>
-          </div>
-
-
-      </div>
-    </div>
-
-
-  </div><!--//row-->
-
-</div>

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/pages/dataassets/createdataasset.html
----------------------------------------------------------------------
diff --git a/ui/pages/dataassets/createdataasset.html b/ui/pages/dataassets/createdataasset.html
deleted file mode 100644
index 85bfcf0..0000000
--- a/ui/pages/dataassets/createdataasset.html
+++ /dev/null
@@ -1,241 +0,0 @@
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
--->
-<div class="container-fluid">
-  <div class="row pageTitle">
-    <h5 class="over-title margin-bottom-15">Register Data Asset</h5>
-  </div><!--//row-->
-  <div class="row">
-    <form name="Form" id="form" novalidate>
-      <div id="wizard" class="swMain" >
-        <!-- <ul>
-						<li>
-							<a href="" class="onlyone selected" >
-								<div class="stepNumber">
-									1
-								</div>
-								<span class="stepDesc text-small"> Configuration </span>
-							</a>
-        </ul> -->
-
-        <div id="step-1" ng-show="currentStep == 1" class="formStep" >
-          <label class="stepDesc">Please setup the data asset required information.</label>
-          <div class="container-fluid">
-
-            <!-- schema definition list -->
-            <div class="col-md-12 col-lg-12 col-sm-12">
-              <fieldset>
-                <legend>
-                  Required Information
-                </legend>
-                <div class="y-scrollable">
-                  <div class="col-md-12 col-lg-12 col-sm-12">
-                    <div class="form-group" ng-class="{'has-error':Form.assetName.$dirty&&Form.assetName.$invalid, 'has-success':Form.assetName.$valid}">
-                      <label for="assetName" class="col-md-2 col-lg-2 col-sm-2 control-label">
-                        Asset Name<span class="symbol required"></span>:
-                      </label>
-
-                      <div class="col-md-10 col-lg-10 col-sm-10 ">
-                        <input type="text" class="form-control" ng-model="form.basic.assetName" id="assetName" name="assetName" placeholder="Please input the asset name, which should be your Hive table name" required ng-pattern="'([0-9a-zA-Z\\_\\-\\.])+'">
-                        <span class="error text-small block " ng-if="Form.assetName.$dirty && Form.assetName.$error.required">Asset Name is required.</span>
-                        <span class="error text-small block " ng-if="Form.assetName.$dirty && Form.assetName.$error.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" ng-class="{'has-error':Form.typeSelector.$dirty&&Form.typeSelector.$invalid, 'has-success':Form.typeSelector.$valid}">
-                      <label for="typeSelector" class="col-md-2 col-lg-2 col-sm-2 control-label">
-                        Asset Type<span class="symbol required"></span>:
-                      </label>
-
-                      <div class="col-md-10 col-lg-10 col-sm-10 ">
-                        <select id="typeSelector" name="typeSelector" class="form-control" ng-model="form.basic.type" ng-change="updateHdfsPath(form.basic.type)" required>
-                          <option value="">Please select...</option>
-                          <option ng-repeat="row in assetTypeOptions" value="{{$index}}" >{{row}}</option>
-                        </select>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="col-md-12 col-lg-12 col-sm-12">
-                    <div class="form-group" ng-class="{'has-error':Form.path.$dirty&&Form.path.$invalid, 'has-success':Form.path.$valid}">
-                      <label for="path" class="col-md-2 col-lg-2 col-sm-2 control-label">
-                        HDFS Path<span class="symbol required"></span>:
-                      </label>
-
-                      <div class="col-md-10 col-lg-10 col-sm-10 ">
-                        <input type="text" class="form-control" ng-model="form.basic.path" id="path" name="path" placeholder="Please input the HDFS path(example: /user/b_des/yosha/dmg_complete)." required ng-pattern="regex">
-                        <span class="error text-small block " ng-if="Form.path.$dirty && Form.path.$error.required">Asset HDFS path is required.</span>
-                        <span class="error text-small block" ng-if="Form.path.$error.pattern">Valid path pattern is "^\/\S(?:[0-9a-zA-Z\_\-]+\/?)+"</span>
-                      </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">
-                        Data folder pattern:
-                      </label>
-
-                      <div class="col-md-10 col-lg-10 col-sm-10">
-                        <input type="text"  class="form-control" ng-focus="showFormatInfo=true" ng-blur="showFormatInfo=false" ng-model="form.basic.folderFormat" placeholder="please input the sub folder name format where your data will be stored, such as 'dt=[YY][MM][DD]'" >
-                        <span ng-show="showFormatInfo" class="bark-tooltiptext" >You can use [YY], [MM], [DD] and [HH], some examples here: <br/>
-                                                        <b style="color:#77b300">[YYYY]/[MM]/[DD]/[HH]</b> means the hourly data could be located in the folder of "{{form.basic.path}}2016/02/03/16"<br/>
-                                                        <b style="color:#77b300">[YY]-[MM]-[DD]</b> means the daily data could be located in the folder of "{{form.basic.path}}16-02-03"
-                        </span>
-                      </div>
-                    </div>
-                  </div> -->
-                  <div class="col-md-12 col-lg-12 col-sm-12">
-                    <div class="form-group" ng-class="{'has-error':Form.platformSelector.$dirty&&Form.platformSelector.$invalid, 'has-success':Form.platformSelector.$valid}">
-                      <label for="platformSelector" class="col-md-2 col-lg-2 col-sm-2 control-label">
-                        Platform<span class="symbol required"></span>:
-                      </label>
-
-                      <div class="col-md-10 col-lg-10 col-sm-10 ">
-                        <input type="text"  class="form-control" ng-model="form.basic.platform" disabled>
-                        <!-- <select id="platformSelector" name="platformSelector" class="form-control" ng-model="form.basic.platform"  ng-change="getSystemOptions(form.basic.platform)" required>
-                          <option value="">Please select...</option>
-                          <option ng-repeat="row in platformOptions" value="{{$index}}" >{{row.platform}}</option>
-                        </select> -->
-                      </div>
-                    </div>
-                  </div>
-                  <div class="col-md-12 col-lg-12 col-sm-12">
-                    <div class="form-group" ng-class="{'has-error':Form.systemSelector.$dirty&&Form.systemSelector.$invalid, 'has-success':Form.systemSelector.$valid}">
-                      <label for="systemSelector" class="col-md-2 col-lg-2 col-sm-2 control-label">
-                        Organization<span class="symbol required"></span>:
-                      </label>
-
-                      <div class="col-md-10 col-lg-10 col-sm-10 ">
-                        <select id="systemSelector" name="systemSelector" class="form-control" ng-model="form.basic.system" required>
-                          <option value="">Please select...</option>
-                          <option ng-repeat="row in systemOptions" value="{{$index}}" >{{row}}</option>
-                        </select>
-                      </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">
-                        Schema<span class="symbol required"></span>:
-                      </label>
-
-                      <div class="col-md-10 col-lg-10 col-sm-10 ">
-                        <div class="row">
-                          <label class="col-md-2 col-lg-2 col-sm-2 text-info">Name<span class="symbol required"></span></label>
-                          <label class="col-md-2 col-lg-2 col-sm-2 text-info">Type<span class="symbol required"></span></label>
-                          <label class="col-md-2 col-lg-2 col-sm-2 text-info">Description</label>
-                          <label class="col-md-4 col-lg-4 col-sm-4 text-info">Sample</label>
-                          <span class="col-md-2 col-lg-2 col-sm-2" style="cursor:pointer;" title="Add" ng-click="addSchema()"><i class="glyphicon glyphicon-plus"></i></span>
-                        </div>
-                        <div class="row" ng-repeat="item in form.basic.schema">
-                          <p>
-                            <span class="col-md-2 col-lg-2 col-sm-2">
-                                <input type="text" name="{{'sname'+$index}}" class="form-control" placeholder="name" ng-model="item.name" required/>
-                            </span>
-                            <span class="col-md-2 col-lg-2 col-sm-2">
-                                <input  type="text" name="{{'stype'+$index}}" class="form-control" placeholder="type" ng-model="item.type" required/>
-                            </span>
-                            <span class="col-md-2 col-lg-2 col-sm-2">
-                                <input type="text" class="form-control" placeholder="desc" ng-model="item.desc" />
-                            </span>
-                            <span class="col-md-4 col-lg-4 col-sm-4">
-                                <input  type="text" class="form-control" placeholder="sample" ng-model="item.sample" />
-                            </span>
-                            <span class="col-md-2 col-lg-2 col-sm-2 mt5" style="cursor:pointer;" title="Remove" ng-click="form.basic.schema.length==1 || deleteSchema($index)"><i class="glyphicon glyphicon-remove" style="vertical-align: -webkit-baseline-middle;"></i></span>
-                          </p>
-                        </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">
-                        Owner:
-                      </label>
-
-                      <div class="col-md-10 col-lg-10 col-sm-10">
-                        <input type="text"  class="form-control" ng-model="form.basic.owner" ng-init="form.basic.owner=ntAccount" disabled>
-                      </div>
-                    </div>
-                  </div>
-<!-- 
-                  <div class="col-md-12 col-lg-12 col-sm-12">
-                    <div class="form-group">
-                      <label class="col-md-2 col-lg-2 col-sm-2 control-label">
-                        Hive partition columns</span>:
-                      </label>
-
-                      <div class="col-md-10 col-lg-10 col-sm-10 ">
-                        <div class="row">
-                          <label class="col-md-2 col-lg-2 col-sm-2 text-info">Name</label>
-                          <label class="col-md-2 col-lg-2 col-sm-2 text-info">format</label>
-                          <span class="col-md-2 col-lg-2 col-sm-2" style="cursor:pointer;" title="Add" ng-click="addPatitionColumn()"><i class="glyphicon glyphicon-plus"></i></span>
-                        </div>
-                        <div class="row" ng-repeat="item in form.basic.partitions">
-                          <p>
-                            <span class="col-md-2 col-lg-2 col-sm-2">
-                                <input type="text" name="{{'sname'+$index}}" class="form-control" placeholder="name" ng-model="item.name" required/>
-                            </span>
-
-                            <span class="col-md-2 col-lg-3 col-sm-2">
-                              <select  id="formatSelector" name="formatSelector+$index" class="form-control" ng-model="item.format" required>
-                                <option ng-repeat="row in formatTypeOptions" value="{{row}}" >{{row}}</option>
-                              </select>
-                            </span>
-                            <span class="col-md-2 col-lg-2 col-sm-2 mt5" style="cursor:pointer;" title="Remove" ng-click="form.basic.partitions.length==0 || deletePartition($index)"><i class="glyphicon glyphicon-remove" style="vertical-align: -webkit-baseline-middle;"></i></span>
-                          </p>
-                        </div>
-                      </div>
-                    </div>
-                  </div> -->
-
-                </div>
-
-              </fieldset>
-
-            </div>
-
-            <div class="form-group btn-container" >
-              <button class="btn btn-primary btn-o next-step btn-wide pull-right" ng-click="form.submit(Form)">
-                  Submit
-              </button>
-            </div>
-          </div>
-        </div>
-
-        <div class="modal fade" id="confirm-pu" role="dialog">
-          <div class="modal-dialog modal-xg modal-lg">
-            <div class="modal-content">
-              <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-                <h4 class="modal-title">Save the data asset with the below information?</h4>
-              </div>
-              <div class="modal-body">
-                <ng-include src="'/pages/dataassets/confirmation-dataasset.html'"/>
-              </div>
-              <div class="modal-footer">
-                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
-                <button type="button" class="btn btn-primary" ng-click="form.save()">Save</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </form>
-  </div><!--//row-->
-</div>

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/pages/dataassets/dataassets.html
----------------------------------------------------------------------
diff --git a/ui/pages/dataassets/dataassets.html b/ui/pages/dataassets/dataassets.html
deleted file mode 100644
index c276e14..0000000
--- a/ui/pages/dataassets/dataassets.html
+++ /dev/null
@@ -1,108 +0,0 @@
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
--->
-<div  class="bs-component" >
-	<p>
-		<!--<a class="btn btn-primary btn-o btn-wide" href="#/createdataasset"><i class="fa fa-plus"></i> Register Data Asset</a>-->
-	</p>
-	<div id="assetContainer" style="margin-top:40px">
-    <table st-table="displayed" st-pipe="paging" class="table table-striped">
-	  	<thead>
-	    	<tr style="background-color:#7D95CC">
-				<th st-ratio="10">Table Name</th>
-				<th st-ratio="10">DB Name</th>
-				<th st-ratio="20">Owner</th>
-				<th st-ratio="10">Creation Time</th>
-				<th st-ratio="20">Last Access Time</th>
-				<th st-ratio="20">Location</th>
-
-			</tr>
-	  	</thead>
-	  	<tbody>
-		    <tr ng-if="!displayed || displayed.length == 0">
-		     <td ng-if="displayed.length == 0" colspan="7" style="text-align:center">
-		     No content.
-		     </td>
-		     <td class="icon">
-				 <span class="fa fa-spinner fa-spin fa-3x fa-fw"></span>
-			 </td>
-		    </tr>
-		</tbody>
-	  	<tbody ng-repeat="row in displayed" style="word-break:break-all;">
-	    	<tr>
-	    		<td ng-class="{accordion:true}" ng-click="row.showDetail=!(row.showDetail)" style="cursor: pointer;">
-                    <i ng-show="!row.showDetail" class="fa fa-chevron-circle-right blue"></i>
-                    <i ng-show="row.showDetail" class="fa fa-chevron-circle-down blue"></i>
-                    {{row.tableName}}</td>
-	    		<td>{{row.dbName || 'N/A'}}</td>
-	        	<td>{{row.owner || 'N/A'}}</td>
-	    		<td>{{(row.createTime * 1000 | date: 'short') ||  'N/A'}}</td>
-	    		<td>{{(row.lastAccessTime * 1000 | date: 'short') || 'N/A' }}</td>
-	    		<td>{{row.sd.location || 'N/A'}}</td>
-	    	</tr>
-	    	<tr ng-show="row.showDetail">
-	    		<td colspan="7" style="padding:20px 30px 10px 30px;">
-				    <table st-table="rowCollection" class="table table-striped" style="word-wrap: break-word;">
-					  	<thead>
-					    	<tr style="background-color:#7D95CC">
-								<th st-ratio="15">Name</th>
-								<th st-ratio="15">Type</th>
-								<th st-ratio="15">Comment</th>
-					    	</tr>
-					  	</thead>
-					  	<tbody>
-					      <tr ng-if="!row.sd.cols || row.sd.cols.length == 0">
-					        <td colspan="7" style="text-align:center">No content.</td>
-					      </tr>
-					    	<tr ng-repeat="item in row.sd.cols">
-					    		<td>{{item.name}}</td>
-					    		<td>{{item.type}}</td>
-						        <td>{{item.comment || 'N/A'}}</td>
-					    	</tr>
-					  	</tbody>
-				    </table>
-				</td>
-	    	</tr>
-	  	</tbody>
-	    <tfoot>
-	      <tr>
-	        <td colspan="8" class="text-right">
-	          <div  st-items-by-page="10" st-pagination="" st-displayed-pages="10"></div>
-	        </td>
-	      </tr>
-	    </tfoot>
-    </table>
-	</div>
-    <div class="modal fade" id="confirm-delete" role="dialog">
-      <div class="modal-dialog modal-xg modal-lg">
-        <div class="modal-content">
-          <div class="modal-header">
-            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-            <h4 class="modal-title">Delete the data asset with the below information?</h4>
-          </div>
-          <div class="modal-body">
-            <ng-include src="'/pages/dataassets/confirmation-delete-dataasset.html'"/>
-          </div>
-          <div class="modal-footer">
-						<button type="button" class="btn btn-primary" ng-click="sendDeleteRequest()">Yes</button>
-            <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
-          </div>
-        </div>
-      </div>
-    </div>
-</div>

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/pages/dataassets/editdataasset.html
----------------------------------------------------------------------
diff --git a/ui/pages/dataassets/editdataasset.html b/ui/pages/dataassets/editdataasset.html
deleted file mode 100644
index ca86df1..0000000
--- a/ui/pages/dataassets/editdataasset.html
+++ /dev/null
@@ -1,223 +0,0 @@
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
--->
-<div class="container-fluid">
-  <div class="row">
-    <h5 class="over-title margin-bottom-15">Edit Data Asset</h5>
-  </div><!--//row-->
-  <div class="row">
-    <form name="Form" id="form" novalidate>
-      <div id="wizard" class="swMain" >
-        <!-- <ul>
-						<li>
-							<a href="" class="onlyone selected" >
-								<div class="stepNumber">
-									1
-								</div>
-								<span class="stepDesc text-small"> Configuration </span>
-							</a>
-        </ul> -->
-
-        <div id="step-1" ng-show="currentStep == 1" class="formStep" >
-          <label class="stepDesc">Please setup the data asset required information.</label>
-          <div class="container-fluid">
-
-            <!-- schema definition list -->
-            <div class="col-md-12 col-lg-12 col-sm-12">
-              <fieldset>
-                <legend>
-                  Required Information
-                </legend>
-                <div class="y-scrollable">
-                  <div class="col-md-12 col-lg-12 col-sm-12">
-                    <div class="form-group">
-                      <label for="assetName" class="col-md-2 col-lg-2 col-sm-2 control-label">
-                        Asset Name<span class="symbol required">:
-                      </label>
-
-                      <div class="col-md-10 col-lg-10 col-sm-10 ">
-                        <input type="text" class="form-control" ng-model="form.basic.assetName" id="assetName" name="assetName" placeholder="Please input the asset name." disabled>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="col-md-12 col-lg-12 col-sm-12">
-                    <div class="form-group">
-                      <label for="typeSelector" class="col-md-2 col-lg-2 col-sm-2 control-label">
-                        Asset Type<span class="symbol required"></span>:
-                      </label>
-
-                      <div class="col-md-10 col-lg-10 col-sm-10 ">
-                        <select id="typeSelector" name="typeSelector" class="form-control" ng-model="form.basic.type" ng-change="updateHdfsPath(form.basic.type)" disabled>
-                          <option value="">Please select...</option>
-                          <option ng-repeat="row in assetTypeOptions" value="{{$index}}" >{{row}}</option>
-                        </select>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="col-md-12 col-lg-12 col-sm-12">
-                    <div class="form-group">
-                      <label for="path" class="col-md-2 col-lg-2 col-sm-2 control-label">
-                        HDFS Path<span class="symbol required"></span>:
-                      </label>
-
-                      <div class="col-md-10 col-lg-10 col-sm-10 ">
-                        <input type="text" class="form-control" ng-model="form.basic.path" id="path" name="path" placeholder="Please input the HDFS path.">
-                        <span class="error text-small block " ng-if="Form.path.$dirty && Form.path.$invalid">Asset HDFS path is required.</span>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="col-md-12 col-lg-12 col-sm-12">
-                    <div class="form-group">
-                      <label for="platformSelector" class="col-md-2 col-lg-2 col-sm-2 control-label">
-                        Platform<span class="symbol required"></span>:
-                      </label>
-
-                      <div class="col-md-10 col-lg-10 col-sm-10 ">
-                        <input type="text"  class="form-control" ng-model="form.basic.platform" disabled>
-                        <!-- <select id="platformSelector" name="platformSelector" class="form-control" ng-model="form.basic.platform"  ng-change="getSystemOptions(form.basic.platform)" required disabled>
-                          <option value="">Please select...</option>
-                          <option ng-repeat="row in platformOptions" value="{{$index}}" >{{row.platform}}</option>
-                        </select> -->
-                      </div>
-                    </div>
-                  </div>
-                  <div class="col-md-12 col-lg-12 col-sm-12">
-                    <div class="form-group">
-                      <label for="systemSelector" class="col-md-2 col-lg-2 col-sm-2 control-label">
-                        Organization<span class="symbol required"></span>:
-                      </label>
-
-                      <div class="col-md-10 col-lg-10 col-sm-10 ">
-                        <select id="systemSelector" name="systemSelector" class="form-control" ng-model="form.basic.system" required disabled>
-                          <option value="">Please select...</option>
-                          <option ng-repeat="row in systemOptions" value="{{$index}}" >{{row}}</option>
-                        </select>
-                      </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">
-                        Schema<span class="symbol required"></span>:
-                      </label>
-
-                      <div class="col-md-10 col-lg-10 col-sm-10 ">
-                        <div class="row">
-                          <label class="col-md-2 col-lg-2 col-sm-2 text-info">Name<span class="symbol required"></span></label>
-                          <label class="col-md-2 col-lg-2 col-sm-2 text-info">Type<span class="symbol required"></span></label>
-                          <label class="col-md-2 col-lg-2 col-sm-2 text-info">Description</label>
-                          <label class="col-md-4 col-lg-4 col-sm-4 text-info">Sample</label>
-                          <!-- <span class="col-md-2 col-lg-2 col-sm-2" ng-click="addSchema()"><i class="glyphicon glyphicon-plus"></i></span> -->
-                        </div>
-                        <div class="row" ng-repeat="item in form.basic.schema">
-                          <p>
-                            <span class="col-md-2 col-lg-2 col-sm-2">
-                                <input type="text" name="{{'sname'+$index}}" class="form-control" placeholder="name" ng-model="item.name" required disabled/>
-                            </span>
-                            <span class="col-md-2 col-lg-2 col-sm-2">
-                                <input  type="text" name="{{'stype'+$index}}" class="form-control" placeholder="type" ng-model="item.type" required disabled/>
-                            </span>
-                            <span class="col-md-2 col-lg-2 col-sm-2">
-                                <input type="text" class="form-control" placeholder="desc" ng-model="item.desc" />
-                            </span>
-                            <span class="col-md-4 col-lg-4 col-sm-4">
-                                <input  type="text" class="form-control" placeholder="sample" ng-model="item.sample" />
-                            </span>
-                            <!-- <span class="col-md-2 col-lg-2 col-sm-2 mt5" ng-click="form.basic.schema.length==1 || deleteSchema($index)"><i class="glyphicon glyphicon-remove" style="vertical-align: -webkit-baseline-middle;"></i></span> -->
-                          </p>
-                        </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">
-                        Owner:
-                      </label>
-
-                      <div class="col-md-10 col-lg-10 col-sm-10">
-                        <input type="text"  class="form-control" ng-model="form.basic.owner" ng-init="form.basic.owner=ntAccount" disabled>
-                      </div>
-                    </div>
-                  </div>
-
-                  <div class="col-md-12 col-lg-12 col-sm-12">
-                    <div class="form-group">
-                      <label class="col-md-2 col-lg-2 col-sm-2 control-label">
-                        time partition columns</span>:
-                      </label>
-
-                      <div class="col-md-10 col-lg-10 col-sm-10 ">
-                        <div class="row">
-                          <label class="col-md-2 col-lg-2 col-sm-2 text-info">Name</label>
-                          <label class="col-md-2 col-lg-2 col-sm-2 text-info">format</label>
-                          <span class="col-md-2 col-lg-2 col-sm-2" style="cursor:pointer;" title="Add" ng-click="addPatitionColumn()"><i class="glyphicon glyphicon-plus"></i></span>
-                        </div>
-                        <div class="row" ng-repeat="item in form.basic.partitions">
-                          <p>
-                            <span class="col-md-2 col-lg-2 col-sm-2">
-                                <input type="text" name="{{'sname'+$index}}" class="form-control" placeholder="name" ng-model="item.name" required/>
-                            </span>
-
-                            <span class="col-md-2 col-lg-3 col-sm-2">
-                              <select  id="formatSelector" name="formatSelector+$index" class="form-control" ng-model="item.format" required>
-                                <option ng-repeat="row in formatTypeOptions" value="{{row}}" >{{row}}</option>
-                              </select>
-                            </span>
-                            <span class="col-md-2 col-lg-2 col-sm-2 mt5" style="cursor:pointer;" title="Remove" ng-click="form.basic.partitions.length==0 || deletePartition($index)"><i class="glyphicon glyphicon-remove" style="vertical-align: -webkit-baseline-middle;"></i></span>
-                          </p>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-
-
-                </div>
-              </fieldset>
-
-            </div>
-
-            <div class="form-group btn-container" >
-              <button class="btn btn-primary btn-o next-step btn-wide pull-right" ng-click="form.submit(Form)">
-                  Submit
-              </button>
-            </div>
-          </div>
-        </div>
-
-        <div class="modal fade" id="confirm-pu" role="dialog">
-          <div class="modal-dialog modal-xg modal-lg">
-            <div class="modal-content">
-              <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-                <h4 class="modal-title">Save the data asset with the below information?</h4>
-              </div>
-              <div class="modal-body">
-                <ng-include src="'/pages/dataassets/confirmation-dataasset.html'"/>
-              </div>
-              <div class="modal-footer">
-                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
-                <button type="button" class="btn btn-primary" ng-click="form.save()">Save</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </form>
-  </div><!--//row-->
-</div>

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/42ee8863/ui/pages/health/health.html
----------------------------------------------------------------------
diff --git a/ui/pages/health/health.html b/ui/pages/health/health.html
deleted file mode 100644
index ce0bb4b..0000000
--- a/ui/pages/health/health.html
+++ /dev/null
@@ -1,49 +0,0 @@
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
--->
-<div class="bs-component">
-  <ul class="nav nav-tabs ">
-    <li class="active">
-      <a href="#heatmap" data-toggle="tab">Heatmap</a>
-    </li>
-    <li>
-      <a href="#topology" data-toggle="tab">Topology</a>
-    </li>
-
-  </ul>
-</div>
-
-<div class="tab-content">
-  <div class="tab-pane fade active in" id="heatmap" >
-    <div ng-if="!finalData || finalData.length == 0">
-      <span ng-if="finalData.length == 0" colspan="7" style="text-align:center">No content.</span>
-      <div class="icon">
-        <span class="fa fa-spinner fa-spin fa-3x fa-fw"></span>
-      </div>
-    </div>      
-    <div id="chart1"></div>
-  </div>
-  <div class="tab-pane fade " id="topology">
-    <!--under construction-->
-    <div style="height:400px;line-height:400px;text-align:center;width:100%;font-size:48px">
-      <img src="/img/construction.gif" style="max-height:120px;"/>
-      Under construction! Coming soon!
-    </div>
-  </div>
-
-</div>