Repository: incubator-griffin Updated Branches: refs/heads/master 07ed8a267 -> 06ddc548c
Yxr update ui metric Author: Yang <[email protected]> Closes #18 from RachelYang2/yxr. Project: http://git-wip-us.apache.org/repos/asf/incubator-griffin/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-griffin/commit/06ddc548 Tree: http://git-wip-us.apache.org/repos/asf/incubator-griffin/tree/06ddc548 Diff: http://git-wip-us.apache.org/repos/asf/incubator-griffin/diff/06ddc548 Branch: refs/heads/master Commit: 06ddc548c9aa6e18e790460e610df84f4f75e21f Parents: 07ed8a2 Author: Yang <[email protected]> Authored: Thu May 11 07:45:21 2017 +0800 Committer: William Guo <[email protected]> Committed: Thu May 11 07:45:21 2017 +0800 ---------------------------------------------------------------------- .../src/main/resources/application.properties | 6 +- .../font-awesome/fonts/FontAwesome.otf | Bin 209181 -> 109688 bytes .../font-awesome/fonts/fontawesome-webfont.eot | Bin 126223 -> 70807 bytes .../font-awesome/fonts/fontawesome-webfont.ttf | Bin 182555 -> 142072 bytes .../font-awesome/fonts/fontawesome-webfont.woff | Bin 151593 -> 83588 bytes .../fonts/fontawesome-webfont.woff.bak | Bin 151593 -> 0 bytes .../fonts/fontawesome-webfont.woff2 | Bin 120891 -> 66624 bytes ui/js/controllers/metrics-ctrl.js | 209 ++++++----- ui/js/controllers/sidebar-ctrl.js | 25 +- ui/js/services/bark-chart.js | 357 +------------------ ui/js/services/services.js | 24 +- ui/pages/metrics/dashboard.html | 50 ++- ui/pages/rules/rules.html | 4 +- ui/sidebar.html | 104 +++--- 14 files changed, 230 insertions(+), 549 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/06ddc548/service/src/main/resources/application.properties ---------------------------------------------------------------------- diff --git a/service/src/main/resources/application.properties b/service/src/main/resources/application.properties index b836678..0244bec 100644 --- a/service/src/main/resources/application.properties +++ b/service/src/main/resources/application.properties @@ -1,6 +1,6 @@ -spring.datasource.url= jdbc:mysql://localhost:3306/metastore -spring.datasource.username =root -spring.datasource.password =cxr123 +spring.datasource.url= jdbc:mysql://10.249.75.250:3306/metastore +spring.datasource.username =griffin +spring.datasource.password =123456 spring.datasource.driver-class-name=com.mysql.jdbc.Driver http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/06ddc548/service/src/main/resources/public/bower_components/font-awesome/fonts/FontAwesome.otf ---------------------------------------------------------------------- diff --git a/service/src/main/resources/public/bower_components/font-awesome/fonts/FontAwesome.otf b/service/src/main/resources/public/bower_components/font-awesome/fonts/FontAwesome.otf index c397ec5..3ed7f8b 100644 Binary files a/service/src/main/resources/public/bower_components/font-awesome/fonts/FontAwesome.otf and b/service/src/main/resources/public/bower_components/font-awesome/fonts/FontAwesome.otf differ http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/06ddc548/service/src/main/resources/public/bower_components/font-awesome/fonts/fontawesome-webfont.eot ---------------------------------------------------------------------- diff --git a/service/src/main/resources/public/bower_components/font-awesome/fonts/fontawesome-webfont.eot b/service/src/main/resources/public/bower_components/font-awesome/fonts/fontawesome-webfont.eot index 228ea98..9b6afae 100644 Binary files a/service/src/main/resources/public/bower_components/font-awesome/fonts/fontawesome-webfont.eot and b/service/src/main/resources/public/bower_components/font-awesome/fonts/fontawesome-webfont.eot differ http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/06ddc548/service/src/main/resources/public/bower_components/font-awesome/fonts/fontawesome-webfont.ttf ---------------------------------------------------------------------- diff --git a/service/src/main/resources/public/bower_components/font-awesome/fonts/fontawesome-webfont.ttf b/service/src/main/resources/public/bower_components/font-awesome/fonts/fontawesome-webfont.ttf index 2af1798..26dea79 100644 Binary files a/service/src/main/resources/public/bower_components/font-awesome/fonts/fontawesome-webfont.ttf and b/service/src/main/resources/public/bower_components/font-awesome/fonts/fontawesome-webfont.ttf differ http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/06ddc548/service/src/main/resources/public/bower_components/font-awesome/fonts/fontawesome-webfont.woff ---------------------------------------------------------------------- diff --git a/service/src/main/resources/public/bower_components/font-awesome/fonts/fontawesome-webfont.woff b/service/src/main/resources/public/bower_components/font-awesome/fonts/fontawesome-webfont.woff index 07a162e..dc35ce3 100644 Binary files a/service/src/main/resources/public/bower_components/font-awesome/fonts/fontawesome-webfont.woff and b/service/src/main/resources/public/bower_components/font-awesome/fonts/fontawesome-webfont.woff differ http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/06ddc548/service/src/main/resources/public/bower_components/font-awesome/fonts/fontawesome-webfont.woff.bak ---------------------------------------------------------------------- diff --git a/service/src/main/resources/public/bower_components/font-awesome/fonts/fontawesome-webfont.woff.bak b/service/src/main/resources/public/bower_components/font-awesome/fonts/fontawesome-webfont.woff.bak deleted file mode 100644 index 07a162e..0000000 Binary files a/service/src/main/resources/public/bower_components/font-awesome/fonts/fontawesome-webfont.woff.bak and /dev/null differ http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/06ddc548/service/src/main/resources/public/bower_components/font-awesome/fonts/fontawesome-webfont.woff2 ---------------------------------------------------------------------- diff --git a/service/src/main/resources/public/bower_components/font-awesome/fonts/fontawesome-webfont.woff2 b/service/src/main/resources/public/bower_components/font-awesome/fonts/fontawesome-webfont.woff2 index b4a6b33..500e517 100644 Binary files a/service/src/main/resources/public/bower_components/font-awesome/fonts/fontawesome-webfont.woff2 and b/service/src/main/resources/public/bower_components/font-awesome/fonts/fontawesome-webfont.woff2 differ http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/06ddc548/ui/js/controllers/metrics-ctrl.js ---------------------------------------------------------------------- diff --git a/ui/js/controllers/metrics-ctrl.js b/ui/js/controllers/metrics-ctrl.js index 223cca4..18d07b7 100644 --- a/ui/js/controllers/metrics-ctrl.js +++ b/ui/js/controllers/metrics-ctrl.js @@ -25,149 +25,168 @@ define(['./module'], function(controllers) { $scope.$emit('initReq'); var url_dashboard = $config.uri.dashboard + ($routeParams.sysName?('/'+$routeParams.sysName):''); - - $http.get(url_dashboard, {cache:true}).success(function(res) { - $scope.dashboard = res; - // console.log(res); - $scope.orgs = []; - - var orgNode = null; - angular.forEach(res, function(sys) { + 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.name; - orgNode.dq = sys.dq; - + orgNode.name = sys; orgNode.assetMap = {}; - - angular.forEach(sys.metrics, function(metric) { - if(!metric.assetName){ - metric.assetName = 'unknown'; - } - if(Object.getOwnPropertyNames(orgNode.assetMap).indexOf(metric.assetName) == -1){//not existed - orgNode.assetMap[metric.assetName] = {}; - - } - var chartData = metric.details; - chartData.sort(function(a, b){ - return a.timestamp - b.timestamp; - }); - - orgNode.assetMap[metric.assetName].details = chartData; - - }); + }); - $scope.orgs.push(orgNode); + $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); - // console.log($scope.originalData); - 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.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]); + } + } } + $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; +// } +// +// } +// } + $timeout(function() { - redraw($scope.dashboard); + redraw($scope.dataData); }); }); } - - $scope.$watch('selectedOrgIndex', function(newValue){ console.log(newValue); }); var redraw = function(data) { - // console.log(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)); - - }); - }); - } + 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)); + });} $scope.assetOptions = []; - $scope.changeOrg = function() { + $scope.changeOrg = function(data) { + $scope.selectedOrgIndex = data; + var url_organization = $config.uri.organization; $scope.selectedAssetIndex = undefined; $scope.assetOptions = []; - $scope.dashboard = []; + $scope.dataData = []; if($scope.selectedOrgIndex === ""){ - $scope.dashboard = angular.copy($scope.originalData); + $scope.dataData = angular.copy($scope.original); + $timeout(function() { + redraw($scope.dataData); + }, 0); } else { - var org = angular.copy($scope.originalData[$scope.selectedOrgIndex]); - $scope.dashboard.push(org); - angular.forEach(org.metrics, function(metric, index) { - if($scope.assetOptions.indexOf(metric.assetName) == -1) { - $scope.assetOptions.push(metric.assetName); - } + $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); }); + } - // redraw($scope.dashboard); - $timeout(function() { - redraw($scope.dashboard); - }, 0); + console.log($scope.dataData); + console.log(typeof($scope.dataData)); }; $scope.changeAsset = function() { - $scope.dashboard = []; + var url_organization = $config.uri.organization; + $scope.dataData = []; if($scope.selectedOrgIndex == ""){ - $scope.dashboard = angular.copy($scope.originalData); + $scope.dataData = angular.copy($scope.original); + $timeout(function() { + redraw($scope.dataData); + }, 0); } else { - var org = angular.copy($scope.originalData[$scope.selectedOrgIndex]); - $scope.dashboard.push(org); + $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); + }); } - if($scope.selectedAssetIndex != undefined && $scope.selectedAssetIndex != ''){ - var asset = $scope.assetOptions[$scope.selectedAssetIndex]; - angular.forEach($scope.dashboard, function(sys) { - var oldMetrics = sys.metrics; - sys.metrics = []; - angular.forEach(oldMetrics, function(metric, index) { - if(metric.assetName == asset) { - sys.metrics.push(metric); - } - }); - }); - } - $timeout(function() { - redraw($scope.dashboard); - }, 0); + } $scope.$on('resizeHandler', function() { if($route.current.$$route.controller == 'MetricsCtrl') { console.log('metrics resize'); - redraw($scope.dashboard); + redraw($scope.dataData); } }); /*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)); - }); - + $rootScope.showBigChart($barkChart.getOptionBig(t)); } $scope.getSample = function(item) { http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/06ddc548/ui/js/controllers/sidebar-ctrl.js ---------------------------------------------------------------------- diff --git a/ui/js/controllers/sidebar-ctrl.js b/ui/js/controllers/sidebar-ctrl.js index b5b6d23..65a7cbd 100644 --- a/ui/js/controllers/sidebar-ctrl.js +++ b/ui/js/controllers/sidebar-ctrl.js @@ -20,26 +20,29 @@ define(['./module'], function(controllers) { pageInit(); + function renderDataAssetPie(status){ + resizePieChart(); + $scope.dataAssetPieChart = echarts.init($('#data-asset-pie')[0], 'dark'); + $scope.dataAssetPieChart.setOption($barkChart.getOptionPie(status)); + } function pageInit() { - var url = $config.uri.statistics; +// var url = $config.uri.statistics; - $http.get(url).success(function(res) { - $scope.datasets = res.assets; - $scope.metrics = res.metrics; - renderDataAssetPie(res.status); +// $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); sideBarList(); - }); +// }); } - var renderDataAssetPie = function(status) { - resizePieChart(); - $scope.dataAssetPieChart = echarts.init($('#data-asset-pie')[0], 'dark'); - $scope.dataAssetPieChart.setOption($barkChart.getOptionPie(status)); - } $scope.$watch(function(){return $routeParams.sysName;}, function(value){ console.log('Watched value: ' + value); http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/06ddc548/ui/js/services/bark-chart.js ---------------------------------------------------------------------- diff --git a/ui/js/services/bark-chart.js b/ui/js/services/bark-chart.js index 05a10c0..b67a4bb 100644 --- a/ui/js/services/bark-chart.js +++ b/ui/js/services/bark-chart.js @@ -71,7 +71,7 @@ define(['./module'], function (services) { var data = getMetricData(metric); var option = { title: { - text: metric.name, + text: metric[0]._source.name, left: 'center', textStyle: { fontWeight: 'normal', @@ -88,7 +88,7 @@ define(['./module'], function (services) { tooltip : { trigger: 'axis', formatter : function(params) { - return getTooltip(params, metric.metricType); + return getTooltip(params); }, position: function(point, params, dom) { return getTooltipPosition(point, params, dom); @@ -128,36 +128,19 @@ define(['./module'], function (services) { } function formatter_yaxis_name(metric) { - if (metric.dq <= 100) { - return 'dq (%)'; - } else { - return 'dq (k)'; - } +// if (metric.hits.hits <= 100) { + return 'accuracy (%)'; +// } else { +// return 'dq (k)'; +// } } - function getTooltip(params, metricType) { + function getTooltip(params) { var result = ''; if (params.length > 0) { - - if(metricType == 'Bollinger'){ - result = new Date(getUTCTimeStamp(params[0].data[0])).toUTCString().replace('GMT', '')+ - '<br /> Value : ' + params[2].data[1] + - '<br /> Average : ' + params[3].data[1] + - '<br /> Bands : ' + params[0].data[1] + '--' + params[1].data[1]; - }else if(metricType == 'Trend'){ - result = new Date(getUTCTimeStamp(params[0].data[0])).toUTCString().replace('GMT', '')+ - '<br /> Value : ' + params[0].data[1] + - '<br /> -7 days : ' + params[1].data[1]; - }else if(metricType == 'MAD'){ - result = new Date(getUTCTimeStamp(params[0].data[0])).toUTCString().replace('GMT', '')+ - '<br /> Value : ' + params[2].data[1] + - '<br /> Bands : ' + params[0].data[1] + '--' + params[1].data[1]; - }else if(metricType == 'Count' || metricType == ''){ result = new Date(getUTCTimeStamp(params[0].data[0])).toUTCString().replace('GMT', '')+ '<br /> Value : ' + params[0].data[1]; - } } - return result; } @@ -184,7 +167,7 @@ define(['./module'], function (services) { tooltip : { trigger: 'axis', formatter : function(params) { - return getTooltip(params, metric.metricType); + return getTooltip(params); } }, xAxis : { @@ -210,15 +193,7 @@ define(['./module'], function (services) { function getSeries(metric) { var series = {}; - if(metric.metricType == 'Bollinger'){ - series = getSeriesBollinger(metric); - }else if(metric.metricType == 'Trend'){ - series = getSeriesTrend(metric); - }else if(metric.metricType == 'MAD'){ - series = getSeriesMAD(metric); - }else if(metric.metricType == 'Count' || metric.metricType == ''){ - series = getSeriesCount(metric); - } + series = getSeriesCount(metric); return series; } @@ -226,9 +201,9 @@ define(['./module'], function (services) { var data = getMetricData(metric); var option = { title: { - text: metric.name, - link: '/#/viewrule/' + metric.name, - target: 'self', + text: metric[0]._source.name, +// link: '/#/viewrule/' + metric.name, +// target: 'self', left: 'center', textStyle: { fontSize: 25 @@ -241,16 +216,16 @@ define(['./module'], function (services) { }, dataZoom: [{ type: 'inside', - start: 75, + start: 0, throttle: 50 },{ show: true, - start: 75 + start: 0 }], tooltip : { trigger: 'axis', formatter : function(params) { - return getTooltip(params, metric.metricType); + return getTooltip(params); } }, xAxis : { @@ -270,152 +245,20 @@ define(['./module'], function (services) { animation: true }; option.series = getSeries(metric); - if (metric.metricType == 'MAD') { - option.series = getMADBigSeries(option.series); - } else if (metric.metricType == 'Bollinger') { - option.series = getBollingerBigSeries(option.series); - } return option; } - function getBollingerBigSeries(series) { - var dataLow = series[0].data; - var data = series[2].data; - var result = []; - for (var i = 0; i < data.length; i++) { - if (data[i][1] < dataLow[i][1]) { - var item = {}; - item.coord = data[i]; - var diff = Number(dataLow[i][1])-Number(data[i][1]); - item.label = { - normal: { - formatter: 'low '+diff - } - }; - item.itemStyle = { - normal: { - color: '#c23531' - } - }; - result.push(item); - } - } - series[2].markPoint = {}; - series[2].markPoint.data = result; - console.log(series); - return series; - } - - function getMADBigSeries(series) { - var dataLow = series[0].data; - var data = series[2].data; - var result = []; - for (var i = 0; i < data.length; i++) { - if (data[i][1] < dataLow[i][1]) { - var item = {}; - item.coord = data[i]; - var diff = Number(dataLow[i][1])-Number(data[i][1]); - item.label = { - normal: { - formatter: Math.round(diff/1000) + 'K below lower band' - } - }; - item.itemStyle = { - normal: { - color: '#c23531' - } - }; - result.push(item); - } - } - series[2].markPoint = {}; - series[2].markPoint.data = result; - console.log(series); - return series; - } - function getMetricData(metric) { var data = []; - var chartData = metric.details; + var chartData = metric; for(var i = 0; i < chartData.length; i++){ - data.push([formatTimeStamp(chartData[i].timestamp), parseFloat(chartData[i].value.toFixed(2))]); + data.push([formatTimeStamp(chartData[i]._source.tmst), parseFloat((chartData[i]._source.matched/chartData[i]._source.total).toFixed(2))]); } data.sort(function(a, b){ return a[0] - b[0]; }); - return data; - } - function getSeriesMADLow(metric) { - var data = []; - var chartData = metric.details; - for (var i = 0; i < chartData.length; i++) { - data.push([formatTimeStamp(chartData[i].timestamp), Number(chartData[i].mad.lower)]); - } - data.sort(function(a, b){ - return a[0] - b[0]; - }); - return data; - } - - function getSeriesMADUp(metric) { - var data = []; - var chartData = metric.details; - for (var i = 0; i < chartData.length; i++) { - data.push([formatTimeStamp(chartData[i].timestamp), Number(chartData[i].mad.upper-chartData[i].mad.lower)]); - } - data.sort(function(a, b){ - return a[0] - b[0]; - }); - return data; - } - - function getSeriesBollingerLow(metric) { - var data = []; - var chartData = metric.details; - for (var i = 0; i < chartData.length; i++) { - data.push([formatTimeStamp(chartData[i].timestamp), Number(chartData[i].bolling.lower)]); - } - data.sort(function(a, b){ - return a[0] - b[0]; - }); - return data; - } - - function getSeriesBollingerUp(metric) { - var data = []; - var chartData = metric.details; - for (var i = 0; i < chartData.length; i++) { - data.push([formatTimeStamp(chartData[i].timestamp), Number(chartData[i].bolling.upper-chartData[i].bolling.lower)]); - } - data.sort(function(a, b){ - return a[0] - b[0]; - }); - return data; - } - - function getSeriesBollingerMean(metric) { - var data = []; - var chartData = metric.details; - for (var i = 0; i < chartData.length; i++) { - data.push([formatTimeStamp(chartData[i].timestamp), Number(chartData[i].bolling.mean)]); - } - data.sort(function(a, b){ - return a[0] - b[0]; - }); - return data; - } - - function getSeriesTrendComparision(metric) { - var data = []; - var chartData = metric.details; - for (var i = 0; i < chartData.length; i++) { - data.push([formatTimeStamp(chartData[i].timestamp), Number(chartData[i].comparisionValue)]); - } - data.sort(function(a, b){ - return a[0] - b[0]; - }); return data; } @@ -445,169 +288,5 @@ define(['./module'], function (services) { return series; } - function getSeriesTrend(metric) { - var series = []; - var data = getMetricData(metric); - var dataComparision = getSeriesTrendComparision(metric); - series.push({ - type: 'line', - smooth:true, - data: data, - lineStyle: { - normal: { - color: '#d48265' - } - }, - itemStyle: { - normal: { - color: '#d48265' - } - } - }); - series.push({ - type: 'line', - smooth:true, - data: dataComparision, - lineStyle: { - normal: { - color: '#f15c80', - type: 'dashed' - } - }, - itemStyle: { - normal: { - color: '#f15c80' - } - } - }); - return series; - } - - function getSeriesBollinger(metric) { - var series = []; - var dataLow = getSeriesBollingerLow(metric); - var dataUp = getSeriesBollingerUp(metric); - var dataMean = getSeriesBollingerMean(metric); - var data = getMetricData(metric); - series.push({ - name: 'L', - type: 'line', - smooth:true, - data: dataLow, - lineStyle: { - normal: { - opacity: 0 - } - }, - stack: 'MAD-area', - symbol: 'none' - }); - series.push({ - name: 'U', - type: 'line', - smooth:true, - data: dataUp, - lineStyle: { - normal: { - opacity: 0 - } - }, - areaStyle: { - normal: { - color: '#eee', - opacity: 0.2 - } - }, - stack: 'MAD-area', - symbol: 'none' - }); - series.push({ - type: 'line', - smooth:true, - data: data, - lineStyle: { - normal: { - color: '#d48265' - } - }, - itemStyle: { - normal: { - color: '#d48265' - } - } - }); - series.push({ - type: 'line', - smooth:true, - data: dataMean, - lineStyle: { - normal: { - color: '#f15c80', - type: 'dashed' - } - }, - itemStyle: { - normal: { - color: '#f15c80' - } - } - }); - return series; - } - - function getSeriesMAD(metric) { - var series = []; - var dataLow = getSeriesMADLow(metric); - var dataUp = getSeriesMADUp(metric); - var data = getMetricData(metric); - series.push({ - name: 'L', - type: 'line', - smooth:true, - data: dataLow, - lineStyle: { - normal: { - opacity: 0 - } - }, - stack: 'MAD-area', - symbol: 'none' - }); - series.push({ - name: 'U', - type: 'line', - smooth:true, - data: dataUp, - lineStyle: { - normal: { - opacity: 0 - } - }, - areaStyle: { - normal: { - color: '#eee', - opacity: 0.2 - } - }, - stack: 'MAD-area', - symbol: 'none' - }); - series.push({ - type: 'line', - smooth:true, - data: data, - lineStyle: { - normal: { - color: '#d48265' - } - }, - itemStyle: { - normal: { - color: '#d48265' - } - } - }); - return series; - } }); http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/06ddc548/ui/js/services/services.js ---------------------------------------------------------------------- diff --git a/ui/js/services/services.js b/ui/js/services/services.js index da6311f..ccf2d7a 100644 --- a/ui/js/services/services.js +++ b/ui/js/services/services.js @@ -34,24 +34,8 @@ define(['./module'], function (services) { uri: { base: BACKEND_SERVER + API_ROOT_PATH, - //mock data - // statistics:'/js/mock_data/statistics.json', - //briefmetrics:'/js/mock_data/briefmetrics.json', - //heatmap: '/js/mock_data/briefmetrics.json', - // dbtree: '/js/mock_data/dbtree1.json', - // schemadefinition: '/js/mock_data/schemadefinition.json', - // rulemetric: '/js/mock_data/rulemetric.json', - // dashboard: '/js/mock_data/briefmetrics.json' , - // allModels: "http://localhost:8080/"; + API_ROOT_PATH + '/model/allModels', - // newModel: "http://localhost:8080/"; + API_ROOT_PATH + '/model/newModel' , - // deleteModel: "http://localhost:8080"; + API_ROOT_PATH + '/model/deleteModel' , - - //real data - //data asset -// dbtree: BACKEND_SERVER + API_ROOT_PATH + '/dataassets/metadata', dbtree:BACKEND_SERVER + '/metadata/hive/alltables', - schemadefinition: BACKEND_SERVER + '/metadata/hive', -// dataassetlist: BACKEND_SERVER + API_ROOT_PATH + '/dataassets', + schemadefinition: BACKEND_SERVER + '/metadata/hive', dataassetlist: BACKEND_SERVER + '/metadata/hive/default/alltables', adddataasset: BACKEND_SERVER + API_ROOT_PATH + '/dataassets', @@ -70,16 +54,16 @@ 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' , +// dashboard: BACKEND_SERVER + API_ROOT_PATH + '/metrics/dashboard' , + organization:'http://10.249.75.250:8080/org', + dashboard:'http://10.64.199.198:9200/griffin/accuracy/_search?pretty', metricsample: BACKEND_SERVER + API_ROOT_PATH + '/metrics/sample', metricdownload: BACKEND_SERVER + API_ROOT_PATH + '/metrics/download', //Models -// allModels: BACKEND_SERVER + API_ROOT_PATH + '/models' , allModels: BACKEND_SERVER + '/measures', deleteModel:BACKEND_SERVER + '/measures/deleteByName', -// deleteModel: BACKEND_SERVER + API_ROOT_PATH + '/models', getModel: BACKEND_SERVER + '/measures/findByName', enableModel: BACKEND_SERVER + API_ROOT_PATH + '/models/enableModel', http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/06ddc548/ui/pages/metrics/dashboard.html ---------------------------------------------------------------------- diff --git a/ui/pages/metrics/dashboard.html b/ui/pages/metrics/dashboard.html index b899fc0..b63bfcf 100644 --- a/ui/pages/metrics/dashboard.html +++ b/ui/pages/metrics/dashboard.html @@ -15,45 +15,41 @@ <div id="dashboard" class="bs-component" > <div class="container-fluid"> <div class="row col-lg-12" style="margin-top: 15px;"> - <div class="form-group"> + <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()"> + <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)"> <option value="">-- All --</option> - <option ng-repeat="opt in originalData" value="{{$index}}" ng-selected="selectedOrgIndex==$index">{{opt.name}}</option> + <option ng-repeat="opt in orgs" value="{{$index}}" ng-selected="selectedOrgIndex==$index">{{opt.name}}</option> </select> </span> - <span style="padding-left:30px;"> + <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 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 Sample</u> - </a> - </p> - </div> - </div> + </div> + </div> + <div ng-repeat="opt in orgs" value="{{$index}}"> + <div class="row" > + <div class="col-sm-12 col-md-12 col-lg-12"> + <h4>{{opt.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="row-fluid" style="cursor: pointer;"> + <div id={{'thumbnail'+$index}} ng-click="showBig(outerItems)" 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> + </a> + </p> + </div> + </div> + </div> + </div> </div> - </div> http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/06ddc548/ui/pages/rules/rules.html ---------------------------------------------------------------------- diff --git a/ui/pages/rules/rules.html b/ui/pages/rules/rules.html index 0fd5373..cd5a908 100644 --- a/ui/pages/rules/rules.html +++ b/ui/pages/rules/rules.html @@ -33,7 +33,7 @@ <th st-ratio="20">Description</th> <!--<th st-ratio="15">Create Date</th>--> <!--<th st-ratio="10">Model Stage</th>--> - <!--<th st-ratio="5">Owner</th>--> + <th st-ratio="5">Organization</th> <th st-ratio="5">Action</th> </tr> </thead> @@ -48,7 +48,7 @@ <td>{{row.description}}</td> <!--<td>{{row.createDate | date:'short':'-0700'}}</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.owner}}</td>--> + <td>{{row.organization}}</td> <td> <a ng-class="" href="" ng-click="remove(row)" title="delete"> http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/06ddc548/ui/sidebar.html ---------------------------------------------------------------------- diff --git a/ui/sidebar.html b/ui/sidebar.html index 1a9fdd9..13dfd6a 100644 --- a/ui/sidebar.html +++ b/ui/sidebar.html @@ -15,69 +15,69 @@ <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 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-12 col-md-12 col-lg-6 " id="sidebar-option"> + <!--<div class="row-container">--> + <div class="col-xs-12 col-md-12 col-lg-6 " id="sidebar-option"> - <div > + <div > - <div class="sidebar-stat-center"> - <img src="/img/sidebar1.png" > - <span><a class="bark-link" href="#/dataassets">{{datasets}} Data Assets</a></span> - </div> + <div class="sidebar-stat-center"> + <img src="/img/sidebar1.png" > + <span><a class="bark-link" href="#/dataassets"> Data Assets</a></span> + </div> - <div class="sidebar-stat-center"> - <img src="/img/sidebar2.png"> - <span><a class="bark-link" href="#/metrics">{{metrics}} DQ Metrics</a></span> - </div> + <div class="sidebar-stat-center"> + <img src="/img/sidebar2.png"> + <span><a class="bark-link" href="#/metrics"> DQ Metrics</a></span> + </div> - </div> + </div> - </div> - <div class="col-xs-12 col-md-12 col-lg-6"> - <div id="data-asset-pie"></div> - </div> - <!--</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 briefmetrics"> - <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 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> + <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 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 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':'-0700'}}</span> - - <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> + <i class="fa fa-line-chart faArrows"></i> + <span class="side-date">{{items.timestamp | date:'MM/dd HH:mm':'-0700'}}</span> + + <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> </div>
