From 6cb931c3de3b24121173dd5e19c3f5b7218a9d1d Mon Sep 17 00:00:00 2001 From: r7raul1984 Date: Tue, 24 Jan 2017 10:39:36 +0800 Subject: [PATCH 1/4] [EAGKE-868] Refactor metric chart render process to improve user experience - show "data loading icon" for each chart one by one - load metric data query for each chart - reader metric data into metric chart when response returned and remove "data loading icon" one by one https://issues.apache.org/jira/browse/EAGLE-868 --- .../hadoop_metric/ctrls/regionDetailCtrl.js | 84 ++++++++++--------- .../partials/region/regionDetail.html | 14 ++-- 2 files changed, 52 insertions(+), 46 deletions(-) diff --git a/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/ctrls/regionDetailCtrl.js b/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/ctrls/regionDetailCtrl.js index 00f2c9957c..d6b9fb0ac5 100644 --- a/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/ctrls/regionDetailCtrl.js +++ b/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/ctrls/regionDetailCtrl.js @@ -26,7 +26,6 @@ $scope.site = $wrapState.param.siteId; $scope.hostname = $wrapState.param.hostname; PageConfig.title = 'RegionServer ' + "(" + $scope.hostname + ")"; - $scope.metricList = []; Time.autoRefresh = false; var sizeoption = { @@ -67,47 +66,52 @@ }] }; + $scope.chatnameList = ["Memory Usage", "Direct Memory Usage", "GC count", "GC TimeMillis", "QueueSize", "NumCallsInGeneralQueue", + "NumActiveHandler", "IPC Queue Time (99th)", "IPC Process Time (99th)", "QueueCallTime_num_ops", "ProcessCallTime_num_ops", + "RegionCount", "StoreCount", "MemStoreSize", "StoreFileSize", "TotalRequestCount", "ReadRequestCount", "WriteRequestCount", + "SlitQueueLength", "CompactionQueueLength", "FlushQueueLength", "BlockCacheSize", "BlockCacheHitCount", "BlockCacheCountHitPercent"]; + $scope.chatmetricList = [["nonheap", "heap"], ["directmemory"], ["GCCount"], ["GCTimeMillis"], ["QueueSize"], ["NumCallsInGeneralQueue"], + ["NumActiveHandler"], ["IPCQueueTime99th"], ["IPCProcessTime99th"], ["QueueCallTime_num_ops"], ["ProcessCallTime_num_ops"], + ["RegionCount"], ["StoreCount"], ["MemStoreSize"], ["StoreFileSize"], ["TotalRequestCount"], ["ReadRequestCount"], ["WriteRequestCount"], + ["SlitQueueLength"], ["CompactionQueueLength"], ["FlushQueueLength"], ["BlockCacheSize"], ["BlockCacheHitCount"], ["BlockCacheCountHitPercent"]]; + $scope.chatoptionList = [sizeoption, sizeoption, {}, gctimeoption, {}, {}, {}, {}, {}, {}, {}, {}, {}, sizeoption, sizeoption, {}, {}, {}, {}, {}, {}, sizeoption, {}, {}]; + + $scope.metricList = []; + $.each($scope.chatnameList, function (i) { + var charname = $scope.chatnameList[i]; + $scope.metricList[charname] = { + title: $scope.chatnameList[i], + series: {}, + option: {}, + loading: true, + promises: [] + }; + }); $scope.refresh = function () { var startTime = Time.startTime(); var endTime = Time.endTime(); - var metricspromies = []; + METRIC.getMetricObj().then(function (res) { var masterMetricList = res.regionserver; - for (var metricKey in masterMetricList) { - metricspromies.push(generateHbaseMetric(masterMetricList[metricKey], startTime, endTime, metricKey)); - } - $q.all(metricspromies).then(function (resp) { - var metricObj = {}; - for(var i=0; i < resp.length; i+=1) { - metricObj[resp[i][0]] = resp[i][1]; - } - return metricObj; - }).then(function (seriesObj) { - $scope.metricList = []; - $scope.metricList.push(mergeSeries("Memory Usage", [seriesObj["nonheap"], seriesObj["heap"]], ["nonheap", "heap"], sizeoption)); - $scope.metricList.push(mergeSeries("Direct Memory Usage", [seriesObj["directmemory"]], ["directmemory"], sizeoption)); - $scope.metricList.push(mergeSeries("GC count", [seriesObj["GCCount"]], ["GC count"], {})); - $scope.metricList.push(mergeSeries("GC TimeMillis", [seriesObj["GCTimeMillis"]], ["GC TimeMillis"], gctimeoption)); - $scope.metricList.push(mergeSeries("QueueSize", [seriesObj["QueueSize"]], ["QueueSize"], {})); - $scope.metricList.push(mergeSeries("NumCallsInGeneralQueue", [seriesObj["NumCallsInGeneralQueue"]], ["NumCallsInGeneralQueue"], {})); - $scope.metricList.push(mergeSeries("NumActiveHandler", [seriesObj["NumActiveHandler"]], ["NumActiveHandler"], {})); - $scope.metricList.push(mergeSeries("IPC Queue Time (99th)", [seriesObj["IPCQueueTime99th"]], ["IPC Queue Time (99th)"], {})); - $scope.metricList.push(mergeSeries("IPC Process Time (99th)", [seriesObj["IPCProcessTime99th"]], ["IPC Process Time (99th)"], {})); - $scope.metricList.push(mergeSeries("QueueCallTime_num_ops", [seriesObj["QueueCallTime_num_ops"]], ["QueueCallTime_num_ops"], {})); - $scope.metricList.push(mergeSeries("ProcessCallTime_num_ops", [seriesObj["ProcessCallTime_num_ops"]], ["ProcessCallTime_num_ops"], {})); - $scope.metricList.push(mergeSeries("RegionCount", [seriesObj["RegionCount"]], ["RegionCount"], {})); - $scope.metricList.push(mergeSeries("StoreCount", [seriesObj["StoreCount"]], ["StoreCount"], {})); - $scope.metricList.push(mergeSeries("MemStoreSize", [seriesObj["MemStoreSize"]], ["MemStoreSize"], sizeoption)); - $scope.metricList.push(mergeSeries("StoreFileSize", [seriesObj["StoreFileSize"]], ["StoreFileSize"], sizeoption)); - $scope.metricList.push(mergeSeries("TotalRequestCount", [seriesObj["TotalRequestCount"]], ["TotalRequestCount"], {})); - $scope.metricList.push(mergeSeries("ReadRequestCount", [seriesObj["ReadRequestCount"]], ["ReadRequestCount"], {})); - $scope.metricList.push(mergeSeries("WriteRequestCount", [seriesObj["WriteRequestCount"]], ["WriteRequestCount"], {})); - $scope.metricList.push(mergeSeries("SlitQueueLength", [seriesObj["SlitQueueLength"]], ["SlitQueueLength"], {})); - $scope.metricList.push(mergeSeries("CompactionQueueLength", [seriesObj["CompactionQueueLength"]], ["CompactionQueueLength"], {})); - $scope.metricList.push(mergeSeries("FlushQueueLength", [seriesObj["FlushQueueLength"]], ["FlushQueueLength"], {})); - $scope.metricList.push(mergeSeries("BlockCacheSize", [seriesObj["BlockCacheSize"]], ["BlockCacheSize"], sizeoption)); - $scope.metricList.push(mergeSeries("BlockCacheHitCount", [seriesObj["BlockCacheHitCount"]], ["BlockCacheHitCount"], {})); - $scope.metricList.push(mergeSeries("BlockCacheCountHitPercent", [seriesObj["BlockCacheCountHitPercent"]], ["BlockCacheCountHitPercent"], {})); + $.each($scope.chatmetricList, function (i) { + var metricList = $scope.chatmetricList[i]; + $.each(metricList, function (j) { + var metricKey = metricList[j]; + var metricspromies = generateHbaseMetric(masterMetricList[metricKey], startTime, endTime, metricKey); + var charname = $scope.chatnameList[i]; + $scope.metricList[charname].promises.push(metricspromies); + }); + }); + + $.each($scope.chatmetricList, function (k) { + var charname = $scope.chatnameList[k]; + $q.all($scope.metricList[charname].promises).then(function (resp) { + var series = []; + for (var r = 0; r < resp.length; r += 1) { + series.push(resp[r][1]); + } + $scope.metricList[charname] = mergeSeries(charname, series, $scope.chatmetricList[k], sizeoption[k]); + }); }); }); @@ -146,7 +150,7 @@ var series = []; $.each(metrics, function (i, metricMap) { $.map(metricMap, function (metric) { - if(typeof metric !== 'undefined') { + if (typeof metric !== 'undefined') { series.push(METRIC.metricsToSeries(linename[i], metric, option)); } }); @@ -154,10 +158,12 @@ return { title: title, series: series, - option: option || {} + option: option || {}, + loading: false }; } }); }); }) (); +//# sourceURL=regionDetailCtrl.js diff --git a/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/partials/region/regionDetail.html b/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/partials/region/regionDetail.html index 441d0b83bf..50fad91519 100644 --- a/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/partials/region/regionDetail.html +++ b/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/partials/region/regionDetail.html @@ -93,13 +93,14 @@

-
+
-

{{metric.title}}

-
-
+

{{metricList[chatname].title}}

+
+
+
NO DATA
@@ -109,4 +110,3 @@

{{metric.title}}

-
From 84486997854043fd75f4d41d9e402515372e80d4 Mon Sep 17 00:00:00 2001 From: r7raul1984 Date: Tue, 24 Jan 2017 10:44:10 +0800 Subject: [PATCH 2/4] Fix option choose error bug. --- .../webapp/app/apps/hadoop_metric/ctrls/regionDetailCtrl.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/ctrls/regionDetailCtrl.js b/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/ctrls/regionDetailCtrl.js index d6b9fb0ac5..e86c4c402d 100644 --- a/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/ctrls/regionDetailCtrl.js +++ b/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/ctrls/regionDetailCtrl.js @@ -110,7 +110,7 @@ for (var r = 0; r < resp.length; r += 1) { series.push(resp[r][1]); } - $scope.metricList[charname] = mergeSeries(charname, series, $scope.chatmetricList[k], sizeoption[k]); + $scope.metricList[charname] = mergeSeries(charname, series, $scope.chatmetricList[k], $scope.chatoptionList[k]); }); }); }); From dea101623b2191db41c0e28b4fcd8034443fed04 Mon Sep 17 00:00:00 2001 From: r7raul1984 Date: Tue, 24 Jan 2017 10:57:14 +0800 Subject: [PATCH 3/4] Remove sourceURL. --- .../webapp/app/apps/hadoop_metric/ctrls/regionDetailCtrl.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/ctrls/regionDetailCtrl.js b/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/ctrls/regionDetailCtrl.js index e86c4c402d..fef447fbbc 100644 --- a/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/ctrls/regionDetailCtrl.js +++ b/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/ctrls/regionDetailCtrl.js @@ -166,4 +166,4 @@ }); }) (); -//# sourceURL=regionDetailCtrl.js + From 80660164d0a13980908f2603dc5fa8afe9015412 Mon Sep 17 00:00:00 2001 From: r7raul1984 Date: Tue, 24 Jan 2017 14:55:15 +0800 Subject: [PATCH 4/4] Complete hbase master(active and standby) overview page and fix some JSLint problem. --- .../app/apps/hadoop_metric/ctrls/overview.js | 88 +++++++++++-------- .../apps/hadoop_metric/partials/overview.html | 14 +-- .../widgets/availabilityChart.js | 8 +- 3 files changed, 64 insertions(+), 46 deletions(-) diff --git a/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/ctrls/overview.js b/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/ctrls/overview.js index 406adf2dd1..9071574ad1 100644 --- a/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/ctrls/overview.js +++ b/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/ctrls/overview.js @@ -47,7 +47,7 @@ } }] }; - $scope.metricList = {}; + function generateHbaseMetric(name, flag) { var startTime = Time.startTime(); @@ -58,8 +58,7 @@ var trendEndTime = Time.align(endTime, interval); $scope.site = $wrapState.param.siteId; - - return cache[name] = cache[name] || activeMasterInfo._promise.then(function (res) { + var result = cache[name] || activeMasterInfo._promise.then(function (res) { var hostname = cache[hostname] = cache[hostname] || res[0].tags.hostname; $scope.defaultHostname = $wrapState.param.hostname || hostname; @@ -76,6 +75,7 @@ return [metricFlag, list]; }); }); + return result; } function mergeMetricToOneSeries(metricTitle, metrics, legendName, dataOption, option) { @@ -89,7 +89,8 @@ return { title: metricTitle, series: series, - option: dataOption || {} + option: dataOption || {}, + loading: false }; } @@ -112,39 +113,56 @@ // TODO: Optimize the chart count // TODO: ECharts dynamic refresh series bug: https://github.com/ecomfe/echarts/issues/4033 - - + $scope.chatnameList = ["MemoryUsage", "Master Averageload", "Ritcount", "AssignOpsNum", "Assign", "BulkAssignOpsNum", + "BulkAssign", "BalancerClusterOpsNum", "BalancerCluster", "HlogSplitTime", "HlogSplitTime Percentile", + "HlogSplitSize", "MetaHlogSplitTime", "MetaHlogSplitTime Percentile", "MetaHlogSplitSize"]; + $scope.chatmetricList = [["nonheap", "heap"], ["averageload"], ["ritcount", "ritcountoverthreshold"], ["AssignNumOps"], ["AssignMin", "AssignMax", "AssignPercentile75th", "AssignPercentile95th", "AssignPercentile99th"], + ["BulkAssignNum_ops"], ["BulkAssignMin", "BulkAssignMax", "BulkAssignPercentile75th", "BulkAssignPercentile95th", "BulkAssignPercentile99th"], ["BalancerClusterNum_ops"], + ["BalancerClusterMin", "BalancerClusterMax", "BalancerClusterPercentile75th", "BalancerClusterPercentile95th", "BalancerClusterPercentile99th"], + ["HlogSplitTimeMin", "HlogSplitTimeMax"], ["HlogSplitTimePercentile75th", "HlogSplitTimePercentile95th", "HlogSplitTimePercentile99th"], + ["MetaHlogSplitTimeMin", "MetaHlogSplitTimeMax"], ["MetaHlogSplitTimeMin", "MetaHlogSplitTimeMax"], + ["MetaHlogSplitTimePercentile75th", "MetaHlogSplitTimePercentile95th", "MetaHlogSplitTimePercentile99th"], ["MetaHlogSplitSizeMin", "MetaHlogSplitSizeMax"] + ]; + $scope.chatdataoptionList = [storageOption, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}]; + $scope.chatlineNameList = [["nonheap", "heap"], ["averageload"], ["ritcount", "ritcountoverthreshold"], ["numOps"], ["min", "max", "75th", "95th", "99th"], ["num_ops"], + ["min", "max", "75th", "95th", "99th"], ["num_ops"], ["min", "max", "75th", "95th", "99th"], ["HlogSplitTime_min", "HlogSplitTime_max"], ["75th", "95th", "99th"], ["Min", "Max"], ["Min", "Max"], ["75th", "95th", "99th"], ["Min", "Max"]]; + $scope.metricList = []; + $.each($scope.chatnameList, function (i) { + var charname = $scope.chatnameList[i]; + $scope.metricList[charname] = { + title: $scope.chatnameList[i], + series: {}, + option: {}, + loading: true, + promises: [] + }; + }); $scope.refresh = function () { - var metricspromies = []; + METRIC.getMetricObj().then(function (res) { var masterMetricList = res.master; - for (var metricKey in masterMetricList) { - metricspromies.push(generateHbaseMetric(masterMetricList[metricKey], metricKey)); - } - $q.all(metricspromies).then(function (resp) { - var metricObj = {}; - for (var i = 0; i < resp.length; i += 1) { - metricObj[resp[i][0]] = resp[i][1]; - } - return metricObj; - }).then(function (seriesObj) { - $scope.metricList = [ - mergeMetricToOneSeries("MemoryUsage", [seriesObj["nonheap"], seriesObj["heap"]], ["nonheap", "heap"], storageOption, {areaStyle: {normal: {}}}), - mergeMetricToOneSeries("Master Averageload", [seriesObj["averageload"]], ["averageload"]), - mergeMetricToOneSeries("Ritcount", [seriesObj["ritcount"], seriesObj["ritcountoverthreshold"]], ["ritcount", "ritcountoverthreshold"]), - mergeMetricToOneSeries("AssignOpsNum", [seriesObj["AssignNumOps"]], ["numOps"]), - mergeMetricToOneSeries("Assign", [seriesObj["AssignMin"], seriesObj["AssignMax"], seriesObj["AssignPercentile75th"], seriesObj["AssignPercentile95th"], seriesObj["AssignPercentile99th"]], ["min", "max", "75th", "95th", "99th"]), - mergeMetricToOneSeries("BulkAssignOpsNum", [seriesObj["BulkAssignNum_ops"]], ["num_ops"]), - mergeMetricToOneSeries("BulkAssign", [seriesObj["BulkAssignMin"], seriesObj["BulkAssignMax"], seriesObj["BulkAssignPercentile75th"], seriesObj["BulkAssignPercentile95th"], seriesObj["BulkAssignPercentile99th"]], ["min", "max", "75th", "95th", "99th"]), - mergeMetricToOneSeries("BalancerClusterOpsNum", [seriesObj["BalancerClusterNum_ops"]], ["num_ops"]), - mergeMetricToOneSeries("BalancerCluster", [seriesObj["BalancerClusterMin"], seriesObj["BalancerClusterMax"], seriesObj["BalancerClusterPercentile75th"], seriesObj["BalancerClusterPercentile95th"], seriesObj["BalancerClusterPercentile99th"]], ["min", "max", "75th", "95th", "99th"]), - mergeMetricToOneSeries("HlogSplitTime", [seriesObj["HlogSplitTimeMin"], seriesObj["HlogSplitTimeMax"]], ["HlogSplitTime_min", "HlogSplitTime_max"]), - mergeMetricToOneSeries("HlogSplitTime Percentile", [seriesObj["HlogSplitTimePercentile75th"], seriesObj["HlogSplitTimePercentile95th"], seriesObj["HlogSplitTimePercentile99th"]], ["75th", "95th", "99th"]), - mergeMetricToOneSeries("HlogSplitSize", [seriesObj["HlogSplitSizeMin"], seriesObj["HlogSplitSizeMax"]], ["Min", "Max"]), - mergeMetricToOneSeries("MetaHlogSplitTime", [seriesObj["MetaHlogSplitTimeMin"], seriesObj["MetaHlogSplitTimeMax"]], ["Min", "Max"]), - mergeMetricToOneSeries("MetaHlogSplitTime Percentile", [seriesObj["MetaHlogSplitTimePercentile75th"], seriesObj["MetaHlogSplitTimePercentile95th"], seriesObj["MetaHlogSplitTimePercentile99th"]], ["75th", "95th", "99th"]), - mergeMetricToOneSeries("MetaHlogSplitSize", [seriesObj["MetaHlogSplitSizeMin"], seriesObj["MetaHlogSplitSizeMax"]], ["Min", "Max"]) - ]; + $.each($scope.chatmetricList, function (i) { + var metricList = $scope.chatmetricList[i]; + $.each(metricList, function (j) { + var metricKey = metricList[j]; + var metricspromies = generateHbaseMetric(masterMetricList[metricKey], metricKey); + var charname = $scope.chatnameList[i]; + $scope.metricList[charname].promises.push(metricspromies); + }); + }); + + $.each($scope.chatmetricList, function (k) { + var charname = $scope.chatnameList[k]; + $q.all($scope.metricList[charname].promises).then(function (resp) { + var series = []; + for (var r = 0; r < resp.length; r += 1) { + var rs = resp[r][1]; + if (rs.length > 0) { + series.push(rs); + } + } + $scope.metricList[charname] = mergeMetricToOneSeries(charname, series, $scope.chatlineNameList[k], $scope.chatdataoptionList[k]); + }); }); }); @@ -155,7 +173,7 @@ }); countHBaseRole($scope.site, "standby", "hmaster", ["site"], "count")._promise.then(function (res) { $.map(res, function (data) { - $scope.hmasterstandbynum = data.value[0] + $scope.hmasterstandbynum = data.value[0]; }); }); diff --git a/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/partials/overview.html b/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/partials/overview.html index 5e3d00caa0..82804230b9 100644 --- a/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/partials/overview.html +++ b/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/partials/overview.html @@ -85,13 +85,14 @@

-
+
-

{{metric.title}}

-
-
+

{{metricList[chatname].title}}

+
+
+
NO DATA @@ -103,4 +104,3 @@

{{metric.title}}

-
diff --git a/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/widgets/availabilityChart.js b/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/widgets/availabilityChart.js index 9e73c9b718..69c39e6740 100644 --- a/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/widgets/availabilityChart.js +++ b/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/widgets/availabilityChart.js @@ -24,7 +24,7 @@ var COLOR_MAPPING = { HDFS: 'orange', HBase: 'yellow', - Yarn: 'green', + Yarn: 'green' }; hadoopMetricApp.directive("hadoopMetricWidget", function () { @@ -39,13 +39,13 @@ $scope.list = $.map(Application.find("HADOOP_METRIC_MONITOR"), function (app) { return { siteId: app.site.siteId, - siteName: app.site.siteName || app.site.siteId, + siteName: app.site.siteName || app.site.siteId }; }); } else { $scope.list = [{ siteId: site.siteId, - siteName: site.siteName || site.siteId, + siteName: site.siteName || site.siteId }]; } // Get type @@ -75,7 +75,7 @@ }); countHBaseRole(site.siteId, "standby", "hmaster", ["site"], "count")._promise.then(function (res) { $.map(res, function (data) { - $scope.hmasterstandbynum = data.value[0] + $scope.hmasterstandbynum = data.value[0]; }); }); countHBaseRole(site.siteId, "live", "regionserver", ["site"], "count")._promise.then(function (res) {