Repository: incubator-griffin Updated Branches: refs/heads/master 83e911ab3 -> bc6eab942
update ui of metric Author: Yang <[email protected]> Closes #28 from RachelYang2/metric1. Project: http://git-wip-us.apache.org/repos/asf/incubator-griffin/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-griffin/commit/bc6eab94 Tree: http://git-wip-us.apache.org/repos/asf/incubator-griffin/tree/bc6eab94 Diff: http://git-wip-us.apache.org/repos/asf/incubator-griffin/diff/bc6eab94 Branch: refs/heads/master Commit: bc6eab9425fd8334ba87cb023b6e78d1fe816b60 Parents: 83e911a Author: Yang <[email protected]> Authored: Wed May 17 10:59:57 2017 +0800 Committer: William Guo <[email protected]> Committed: Wed May 17 10:59:57 2017 +0800 ---------------------------------------------------------------------- ui/js/controllers/metrics-ctrl.js | 285 ++++++++++++++++----------------- ui/js/controllers/sidebar-ctrl.js | 152 +++++++++++------- ui/js/services/bark-chart.js | 28 ++-- ui/js/services/services.js | 45 +++--- ui/pages/metrics/dashboard.html | 16 +- ui/sidebar.html | 26 +-- 6 files changed, 289 insertions(+), 263 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/bc6eab94/ui/js/controllers/metrics-ctrl.js ---------------------------------------------------------------------- diff --git a/ui/js/controllers/metrics-ctrl.js b/ui/js/controllers/metrics-ctrl.js index 18d07b7..6a0ed73 100644 --- a/ui/js/controllers/metrics-ctrl.js +++ b/ui/js/controllers/metrics-ctrl.js @@ -1,180 +1,173 @@ /* - Copyright (c) 2016 eBay Software Foundation. - Licensed 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. + Copyright (c) 2016 eBay Software Foundation. + Licensed 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) { + 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'); - - var url_dashboard = $config.uri.dashboard + ($routeParams.sysName?('/'+$routeParams.sysName):''); + $scope.orgs = []; + var url_dashboard = $config.uri.dashboard ; var url_organization = $config.uri.organization; - $http.get(url_organization).success(function(res){ - $scope.orgs = []; - var orgNode = null; - angular.forEach(res, function(sys) { - orgNode = new Object(); - $scope.orgs.push(orgNode); - orgNode.name = sys; - orgNode.assetMap = {}; - }); - }); - - $http.get(url_dashboard, { "query": { - "bool":{ - "filter":[ - {"term" : {"name": "test" }} - ] - } - },cache:true}).success(function(res) { - $scope.dashboard = res; - angular.forEach(res.hits.hits, function(sys) { - var chartData = sys._source; - chartData.sortData = function(a,b){ - return a.tmst - b.tmst; - } - }); - $scope.originalData = angular.copy(res); - $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 = []; - $scope.dataData = []; - angular.forEach($scope.metricName,function(name){ - if($scope.metricNameUnique.indexOf(name) === -1){ - $scope.dataData[$scope.metricNameUnique.length] = new Array(); - $scope.metricNameUnique.push(name); - } - }); - $scope.numberOfName = $scope.metricNameUnique.length; - 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]); + $http.get(url_organization).success(function(res){ + var orgNode = null; + 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); + var url_briefmetrics = $config.uri.dashboard; + $http.post(url_dashboard, {"query": {"match_all":{}}, "sort": [{"tmst": {"order": "asc"}}]}).success(function(data) { + $scope.briefmetrics = 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.original = angular.copy($scope.dataData); -// angular.forEach($scope.dataData,function(data){ -// -// }) -// 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; -// } -// -// } + $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[0]._source.name)!= -1){ + var metricNode = new Object(); + metricNode.name = metric[0]._source.name; + metricNode.timestamp = metric[0]._source.tmst; + metricNode.dq = metric[0]._source.matched/metric[0]._source.total*100; + metricNode.details = angular.copy(metric); + node.metrics.push(metricNode); + } + }) + $scope.finalData.push(node); + }) +// if(!sysName){ +// $scope.backup_metrics = angular.copy(res); // } - - $timeout(function() { - redraw($scope.dataData); + $timeout(function() { + redraw($scope.finalData); + }); + $scope.originalData = angular.copy($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 tmp = document.getElementById('thumbnail'+parentIndex); - tmp.style.width = $('#thumbnail'+parentIndex).parent().width()+'px'; - tmp.style.height = $scope.chartHeight; - var abcChart = echarts.init(tmp, 'dark'); - abcChart.setOption($barkChart.getOptionThum(sys)); - });} - + 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(data) { - $scope.selectedOrgIndex = data; - var url_organization = $config.uri.organization; - $scope.selectedAssetIndex = undefined; - $scope.assetOptions = []; - $scope.dataData = []; - if($scope.selectedOrgIndex === ""){ - $scope.dataData = angular.copy($scope.original); + $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.dataData); + redraw($scope.finalData); }, 0); - } else { - $http.get(url_organization+'/'+$scope.orgs[data].name).success(function(res){ - $scope.assetOptions = res; - angular.forEach($scope.original,function(data){ - if(res.indexOf(data[0]._source.name)!= -1){ -// $scope.dataData[$scope.dataData.length-1] = new Array(); - $scope.dataData.push(data); - } - }); - $timeout(function() { - redraw($scope.dataData); - }, 0); - }); - - } - console.log($scope.dataData); - console.log(typeof($scope.dataData)); }; $scope.changeAsset = function() { - var url_organization = $config.uri.organization; - $scope.dataData = []; - if($scope.selectedOrgIndex == ""){ - $scope.dataData = angular.copy($scope.original); + $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.dataData); + redraw($scope.finalData); }, 0); - } else { - $http.get(url_organization+'/'+$scope.orgs[$scope.selectedOrgIndex].name).success(function(res){ - angular.forEach($scope.original,function(data){ - if(res[$scope.selectedAssetIndex].indexOf(data[0]._source.name)!= -1){ - $scope.dataData.push(data); - } - }); -// if($scope.selectedAssetIndex != undefined && $scope.selectedAssetIndex != ''){ -// var asset = $scope.assetOptions[$scope.selectedAssetIndex]; -// var oldMetrics = angular.copy($scope.dataData); -// angular.forEach(oldMetrics, function(sys,index) { -//// $scope.dataData[index]=[]; -// if(sys[0]._source.name == asset) { -// $scope.dataData.push(sys); -// } -// }); -// } - console.log($scope.dataData); - $timeout(function() { - redraw($scope.dataData); - }, 0); - }); - } + } + function resizePieChart() { + $('#data-asset-pie').css({ + height: $('#data-asset-pie').parent().width(), + width: $('#data-asset-pie').parent().width() + }); } $scope.$on('resizeHandler', function() { @@ -192,8 +185,6 @@ define(['./module'], function(controllers) { $scope.getSample = function(item) { $rootScope.$broadcast('downloadSample', item.name); }; - - - } - ]); + } + ]); }); http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/bc6eab94/ui/js/controllers/sidebar-ctrl.js ---------------------------------------------------------------------- diff --git a/ui/js/controllers/sidebar-ctrl.js b/ui/js/controllers/sidebar-ctrl.js index 65a7cbd..9d0f65d 100644 --- a/ui/js/controllers/sidebar-ctrl.js +++ b/ui/js/controllers/sidebar-ctrl.js @@ -1,16 +1,16 @@ /* - Copyright (c) 2016 eBay Software Foundation. - Licensed 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. + Copyright (c) 2016 eBay Software Foundation. + Licensed 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'; @@ -20,30 +20,23 @@ define(['./module'], function(controllers) { pageInit(); - function renderDataAssetPie(status){ + $scope.orgs = []; + $scope.finalData = []; + $scope.dataData = []; + + var renderDataAssetPie = function(status) { resizePieChart(); $scope.dataAssetPieChart = echarts.init($('#data-asset-pie')[0], 'dark'); $scope.dataAssetPieChart.setOption($barkChart.getOptionPie(status)); } - function pageInit() { -// var url = $config.uri.statistics; - -// $http.get(url).success(function(res) { -// $scope.datasets = res.assets; -// $scope.metrics = res.metrics; $scope.status = new Object(); $scope.status.health = '100'; $scope.status.invalid = '6'; - - renderDataAssetPie($scope.status); +// renderDataAssetPie($scope.status); sideBarList(); -// }); - - } - $scope.$watch(function(){return $routeParams.sysName;}, function(value){ console.log('Watched value: ' + value); if(value){ @@ -54,7 +47,6 @@ define(['./module'], function(controllers) { }); $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'; @@ -64,43 +56,83 @@ define(['./module'], function(controllers) { $('#'+chartId).unbind('click'); $('#'+chartId).click(function() { - showBig($scope.briefmetrics[parentIndex].metrics[index]); + showBig($scope.finalData[parentIndex].metrics[index]); }); }; var showBig = function(metric){ - var metricDetailUrl = $config.uri.metricdetail + '/' + metric.name; - $http.get(metricDetailUrl).success(function (data){ - $rootScope.showBigChart($barkChart.getOptionBig(data)); - }); + $rootScope.showBigChart($barkChart.getOptionBig(metric)); } function sideBarList(sysName){ - var url_briefmetrics = $config.uri.briefmetrics + (sysName?('/'+ sysName):''); - $http.get(url_briefmetrics, {cache:true}).success(function(res) { - $scope.briefmetrics = res; - - angular.forEach(res, function(sys) { - if(sys.metrics && sys.metrics.length > 0){ - sys.metrics.sort(function(a, b){ - if(a.dqfail == b.dqfail){ //If it's green, sort by timestamp - return b.timestamp - a.timestamp; - }else{ //sort by dq - return -(a.dqfail - b.dqfail); + var url_organization = $config.uri.organization; + $http.get(url_organization).success(function(res){ + var orgNode = null; + angular.forEach(res, 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.get(url_briefmetrics, {cache:true}).success(function(data) { + $scope.briefmetrics = 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]); + } } - }); } - }); - - if(!sysName){ - $scope.backup_metrics = angular.copy(res); - } - - $timeout(function() { - resizeSideChart(); - }, 0); - }); + 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.dataData,function(metric,index){ + if(sys.assetMap.indexOf(metric[0]._source.name)!= -1){ + var metricNode = new Object(); + metricNode.name = metric[0]._source.name; + metricNode.timestamp = metric[0]._source.tmst; + metricNode.dq = metric[0]._source.matched/metric[0]._source.total*100; + metricNode.details = angular.copy(metric); + node.metrics.push(metricNode); + } + }); + $scope.finalData.push(node); + }) +// if(!sysName){ +// $scope.backup_metrics = angular.copy(res); +// } + $timeout(function() { + resizeSideChart(); + }, 0); + }); + }); } $(window).resize(function() { @@ -119,16 +151,14 @@ define(['./module'], function(controllers) { $('#side-bar-metrics').css({ height: $('#mainContent').height()-$('#side-bar-stats').outerHeight()+70 }); - - console.log($scope.briefmetrics); - angular.forEach($scope.briefmetrics, function(sys, sysIndex) { - var sysIndex = sysIndex; - angular.forEach(sys.metrics, function(metric, index) { + 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() { @@ -137,6 +167,6 @@ define(['./module'], function(controllers) { width: $('#data-asset-pie').parent().width() }); } - } + } ]); }); http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/bc6eab94/ui/js/services/bark-chart.js ---------------------------------------------------------------------- diff --git a/ui/js/services/bark-chart.js b/ui/js/services/bark-chart.js index b67a4bb..2df8748 100644 --- a/ui/js/services/bark-chart.js +++ b/ui/js/services/bark-chart.js @@ -1,16 +1,16 @@ /* - Copyright (c) 2016 eBay Software Foundation. - Licensed 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 + Copyright (c) 2016 eBay Software Foundation. + Licensed 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 + 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. + 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(){ @@ -71,7 +71,7 @@ define(['./module'], function (services) { var data = getMetricData(metric); var option = { title: { - text: metric[0]._source.name, + text: metric.name, left: 'center', textStyle: { fontWeight: 'normal', @@ -201,7 +201,7 @@ define(['./module'], function (services) { var data = getMetricData(metric); var option = { title: { - text: metric[0]._source.name, + text: metric.name, // link: '/#/viewrule/' + metric.name, // target: 'self', left: 'center', @@ -250,9 +250,9 @@ define(['./module'], function (services) { function getMetricData(metric) { var data = []; - var chartData = metric; + var chartData = metric.details; for(var i = 0; i < chartData.length; i++){ - data.push([formatTimeStamp(chartData[i]._source.tmst), parseFloat((chartData[i]._source.matched/chartData[i]._source.total).toFixed(2))]); + data.push([formatTimeStamp(chartData[i]._source.tmst), parseFloat((chartData[i]._source.matched/chartData[i]._source.total*100).toFixed(2))]); } data.sort(function(a, b){ http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/bc6eab94/ui/js/services/services.js ---------------------------------------------------------------------- diff --git a/ui/js/services/services.js b/ui/js/services/services.js index 7b273b0..bed9f3e 100644 --- a/ui/js/services/services.js +++ b/ui/js/services/services.js @@ -1,16 +1,16 @@ /* - Copyright (c) 2016 eBay Software Foundation. - Licensed 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. + Copyright (c) 2016 eBay Software Foundation. + Licensed 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'; @@ -20,15 +20,11 @@ define(['./module'], function (services) { services.factory('$config', function(){ - var BACKEND_SERVER = ''; +// var BACKEND_SERVER = 'http://10.149.247.156:38080'; // var BACKEND_SERVER = 'http://localhost:8080'; - // var BACKEND_SERVER = 'http://localhost:8080'; //dev env - - -// var BACKEND_SERVER = 'http://10.249.74.51'; - - + var BACKEND_SERVER = ''; var API_ROOT_PATH = '/api/v1'; + var ES_SERVER = 'http://10.149.247.156:39200'; var config = { // URI paths, always have a trailing / @@ -55,10 +51,15 @@ define(['./module'], function (services) { heatmap: BACKEND_SERVER + API_ROOT_PATH + '/metrics/heatmap' , metricdetail: BACKEND_SERVER + API_ROOT_PATH + '/metrics/complete', rulemetric: BACKEND_SERVER + API_ROOT_PATH + '/metrics/brief', -// dashboard: BACKEND_SERVER + API_ROOT_PATH + '/metrics/dashboard' , - organization:'http://10.249.75.250:8080/org', +// organization:BACKEND_SERVER+'/org', + orgmap: BACKEND_SERVER+'/metrics/org', + - dashboard:'http://10.64.199.198:9200/griffin/accuracy/_search?pretty', + metricsByOrg:'', +// organization:'/org.json', +// dashboard:'/dashboard.json', + organization:'/orgWithMetrics', + 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', http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/bc6eab94/ui/pages/metrics/dashboard.html ---------------------------------------------------------------------- diff --git a/ui/pages/metrics/dashboard.html b/ui/pages/metrics/dashboard.html index b63bfcf..ad58627 100644 --- a/ui/pages/metrics/dashboard.html +++ b/ui/pages/metrics/dashboard.html @@ -18,9 +18,9 @@ <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(selectedOrgIndex)"> + <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 orgs" value="{{$index}}" ng-selected="selectedOrgIndex==$index">{{opt.name}}</option> + <option ng-repeat="opt in originalOrgs" value="{{$index}}" ng-selected="selectedOrgIndex==$index">{{opt.name}}</option> </select> </span> <span style="padding-left:30px;"> @@ -32,16 +32,18 @@ </span> </div> </div> - <div ng-repeat="opt in orgs" value="{{$index}}"> + <div ng-repeat="outerItems in finalData"> <div class="row" > <div class="col-sm-12 col-md-12 col-lg-12"> - <h4>{{opt.name}}</h4> + <h4>{{outerItems.name}}</h4> </div> </div> <div class="row"> - <div class="col-sm-6 col-md-4 col-xs-12 col-lg-3 chartItem" style="margin-bottom:30px;" ng-repeat="outerItems in dataData " > + + <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'+$index}} ng-click="showBig(outerItems)" class="thumb-chart" style="border: 2px solid;"></div> + <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 Sample</u> @@ -50,6 +52,8 @@ </div> </div> </div> + </div> </div> + </div> http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/bc6eab94/ui/sidebar.html ---------------------------------------------------------------------- diff --git a/ui/sidebar.html b/ui/sidebar.html index 13dfd6a..189a81c 100644 --- a/ui/sidebar.html +++ b/ui/sidebar.html @@ -1,16 +1,16 @@ <!-- - Copyright (c) 2016 eBay Software Foundation. - Licensed 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 + Copyright (c) 2016 eBay Software Foundation. + Licensed 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 + 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. + 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;"> @@ -24,12 +24,12 @@ <div class="sidebar-stat-center"> <img src="/img/sidebar1.png" > - <span><a class="bark-link" href="#/dataassets"> Data Assets</a></span> + <span><a class="bark-link" href="#/dataassets">{{datasets}} Data Assets</a></span> </div> <div class="sidebar-stat-center"> <img src="/img/sidebar2.png"> - <span><a class="bark-link" href="#/metrics"> DQ Metrics</a></span> + <span><a class="bark-link" href="#/metrics">{{metrics}} DQ Metrics</a></span> </div> </div> @@ -43,7 +43,7 @@ <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 briefmetrics"> + <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>
