Repository: eagle Updated Branches: refs/heads/master 2534a34c5 -> 1550c8954
[EAGLE-863] Refactor Topology Monitoring Widgets [EAGLE-863] Refactor Topology Monitoring Widgets - Define master,regionservers information in HBase widget. https://issues.apache.org/jira/browse/EAGLE-845 [IMPROVEMENT] Refactor HBase summary information - Add backup master page - Add some metric. Author: chitin <[email protected]> Closes #780 from chitin/widgetandsummary. Project: http://git-wip-us.apache.org/repos/asf/eagle/repo Commit: http://git-wip-us.apache.org/repos/asf/eagle/commit/1550c895 Tree: http://git-wip-us.apache.org/repos/asf/eagle/tree/1550c895 Diff: http://git-wip-us.apache.org/repos/asf/eagle/diff/1550c895 Branch: refs/heads/master Commit: 1550c8954b23b443ac41f6d13a7caa02d2a6af6a Parents: 2534a34 Author: chitin <[email protected]> Authored: Tue Jan 17 16:09:59 2017 +0800 Committer: Hao Chen <[email protected]> Committed: Tue Jan 17 16:09:59 2017 +0800 ---------------------------------------------------------------------- .../hadoop_metric/ctrls/backupMasterListCtrl.js | 33 +++++ .../app/apps/hadoop_metric/ctrls/overview.js | 60 +++++++--- .../main/webapp/app/apps/hadoop_metric/index.js | 23 +++- .../partials/backupMasterList.html | 52 ++++++++ .../apps/hadoop_metric/partials/overview.html | 45 ++++--- .../app/apps/hadoop_metric/style/index.css | 14 +++ .../hadoop_metric/widgets/availabilityChart.js | 119 ++++++++++++------- 7 files changed, 264 insertions(+), 82 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/eagle/blob/1550c895/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/ctrls/backupMasterListCtrl.js ---------------------------------------------------------------------- diff --git a/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/ctrls/backupMasterListCtrl.js b/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/ctrls/backupMasterListCtrl.js new file mode 100644 index 0000000..d7cdc45 --- /dev/null +++ b/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/ctrls/backupMasterListCtrl.js @@ -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. + */ + +(function () { + /** + * `register` without params will load the module which using require + */ + register(function (hadoopMetricApp) { + + hadoopMetricApp.controller("backupMasterListCtrl", function ($wrapState, $scope, PageConfig, METRIC) { + + // Initialization + PageConfig.title = "HBASE BackupMasters"; + $scope.site = $wrapState.param.siteId; + $scope.backupMasterList = METRIC.hbaseMaster($scope.site, "standby", 1000); + }); + }); +})(); http://git-wip-us.apache.org/repos/asf/eagle/blob/1550c895/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/ctrls/overview.js ---------------------------------------------------------------------- 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 4cf3e97..1efd47b 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 @@ -24,7 +24,7 @@ hadoopMetricApp.controller("overviewCtrl", function ($q, $wrapState, $scope, PageConfig, METRIC, Time) { var cache = {}; $scope.site = $wrapState.param.siteId; - var activeMasterInfo = METRIC.hbaseActiveMaster($scope.site); + var activeMasterInfo = METRIC.hbaseMaster($scope.site, "active", 1); PageConfig.title = 'HBase'; var storageOption = { @@ -132,34 +132,66 @@ }); }); + METRIC.regionserverStatus($scope.hostname, $scope.site)._promise.then(function (res) { + $scope.regionstatus = res; + }); + hbaseservers._promise.then(function (res) { - var regionhealtynum = 0; - var regiontotal = 0; - var hmasteractive; - var hmasterstandby; + var regionserverhealtynum = 0; + var regionservertotal = 0; + var hmasterstandbynum = 0; + var hmasteractivenum = 0; + var regionsnum = 0; + var regionArray = []; $.each(res, function (i, server) { var role = server.tags.role; var status = server.status; if (role === "regionserver") { - regiontotal++; + regionservertotal++; if (status === "live") { - regionhealtynum++; + regionserverhealtynum++; } + regionArray.push(METRIC.regionserverStatus(server.tags.hostname, $scope.site)._promise.then(function (res) { + return res[0].numRegions; + })); } else if (role === "hmaster") { if (status === "active") { - hmasteractive = server; + hmasteractivenum++; } else { - hmasterstandby = server; + hmasterstandbynum++; } } }); - $scope.regionhealtynum = regionhealtynum; - $scope.regiontotal = regiontotal; - $scope.hmasteractive = hmasteractive; - $scope.hmasterstandby = hmasterstandby; - }) + + $q.all(regionArray).then(function (res) { + + for(var i=0; i<regionArray.length; i++) { + regionsnum+=res[i]; + } + $scope.regionsnum = regionsnum; + }); + + $scope.regionserverhealtynum = regionserverhealtynum; + $scope.regionservertotal = regionservertotal; + $scope.hmasterstandbynum = hmasterstandbynum; + $scope.hmasteractivenum = hmasteractivenum; + }); + + activeMasterInfo._promise.then(function (res) { + var hostname = cache[hostname] = cache[hostname] || res[0].tags.hostname; + $scope.defaultHostname = $wrapState.param.hostname || hostname; + var jobCond = { + site: $scope.site, + component: "hbasemaster", + host: $scope.defaultHostname + }; + METRIC.hbaseMomentMetric(jobCond,"hadoop.hbase.master.server.averageload", 1).then(function (res) { + $scope.hmasteraverageload = res.data.obj[0].value[0]; + }); + }); + }; http://git-wip-us.apache.org/repos/asf/eagle/blob/1550c895/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/index.js ---------------------------------------------------------------------- diff --git a/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/index.js b/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/index.js index d76428f..f0b6e13 100644 --- a/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/index.js +++ b/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/index.js @@ -45,6 +45,11 @@ site: true, templateUrl: "partials/region/regionList.html", controller: "regionListCtrl" + }).route("backupMasterList", { + url: "/hadoopMetric/backupMasterList", + site: true, + templateUrl: "partials/backupMasterList.html", + controller: "backupMasterListCtrl" }).route("masterDetail", { url: "/hadoopMetric/:hostname?startTime&endTime", site: true, @@ -168,6 +173,17 @@ return wrapList(METRIC.get(metrics_url)); }; + METRIC.hbaseMomentMetric = function (condition, metric, limit) { + var config = { + condition: METRIC.condition(condition), + metric: metric, + limit: limit || 10000 + }; + + var metrics_url = common.template(getQuery("HBASE_METRICS"), config); + return METRIC.get(metrics_url); + }; + METRIC.hbaseMetricsAggregation = function (condition, metric, groups, field, intervalMin, startTime, endTime, top, limit) { var fields = field.split(/\s*,\s*/); var orderId = -1; @@ -251,13 +267,13 @@ return wrapList(METRIC.get(metrics_url)); }; - METRIC.hbaseActiveMaster = function (siteId) { + METRIC.hbaseMaster = function (siteId, status, limit) { var condition = { site: siteId, role: "hmaster", - status: "active" + status: status }; - return METRIC.hbasehostStatus(condition, 1); + return METRIC.hbasehostStatus(condition, limit); }; METRIC.regionserverStatus = function (hostname, siteid) { @@ -297,4 +313,5 @@ hadoopMetricApp.require("ctrls/hdfs.js"); hadoopMetricApp.require("ctrls/regionDetailCtrl.js"); hadoopMetricApp.require("ctrls/regionListCtrl.js"); + hadoopMetricApp.require("ctrls/backupMasterListCtrl.js"); })(); http://git-wip-us.apache.org/repos/asf/eagle/blob/1550c895/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/partials/backupMasterList.html ---------------------------------------------------------------------- diff --git a/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/partials/backupMasterList.html b/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/partials/backupMasterList.html new file mode 100644 index 0000000..960a33c --- /dev/null +++ b/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/partials/backupMasterList.html @@ -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. + --> +<div class="box box-primary"> + <div class="box-header with-border"> + <h3 class="box-title"> + <span ng-show="!regionserverList._done || isSorting" class="fa fa-refresh fa-spin no-animate"></span> + </h3> + </div> + <div class="box-body"> + <div id="backupMasterList" sort-table="backupMasterList" is-sorting="isSorting" + search-path-list="searchPathList" + scope="tableScope"> + <table class="table table-bordered"> + <thead> + <tr> + <th sortpath="tags.hostname">Master</th> + <th sortpath="tags.rack">Rack</th> + <th sortpath="tags.site">SiteId</th> + <th sortpath="status">Status</th> + </tr> + </thead> + <tbody> + <tr ng-repeat="item in backupMasterList"> + <td> + <a ui-sref="masterDetail({siteId: site, hostname: item.tags.hostname})" target="_blank">{{item.tags.hostname}}</a> + </td> + <td>{{item.tags.rack}}</td> + <td>{{item.tags.site}}</td> + <td> + <span>{{item.status}}</span> + </td> + </tr> + </tbody> + </table> + </div> + </div> +</div> http://git-wip-us.apache.org/repos/asf/eagle/blob/1550c895/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/partials/overview.html ---------------------------------------------------------------------- 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 13caebf..f58ab21 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 @@ -20,36 +20,33 @@ <div class="box-header with-border"> <span class="fa fa-television"></span> <h3 class="box-title"> - Service Summary Information + HBase Service Summary Information </h3> </div> <div class="box-body"> - - <table class="table table-striped"> - <tbody> - <tr ng-if="regiontotal > 0"> - <th>RegionServer Status</th> - <td class="text-break"> - <a ui-sref="regionList({siteId: site})" target="_blank">{{regiontotal}} RegionServers</a> - <span class="label label-success">{{regionhealtynum}} Healthy</span> - <span class="label label-danger">{{regiontotal - regionhealtynum}} UnHealthy</span> - </td> + <table class="table table-striped hadoopMetric-table"> + <tr> + <td width="5%">{{hmasteractivenum}}</td> + <th width="45%">Active HBase Master</th> + <td width="5%">{{regionsnum}}</td> + <th width="45%">Regions + </th> </tr> - <tr ng-if="hmasteractive"> - <th>Active Hmaster Status</th> - <td class="text-break"> - <span ng-if="defaultHostname !== hmasteractive.tags.hostname" class="label label-success">(<a class="hadoopMetric-summary-a" ui-sref="masterDetail({siteId: site, hostname: hmasteractive.tags.hostname})">{{hmasteractive.tags.hostname}}</a>) Healthy</span> - <span ng-if="defaultHostname === hmasteractive.tags.hostname" class="label label-success">({{hmasteractive.tags.hostname}}) Healthy</span> - </td> + <tr> + <td><a ui-sref="backupMasterList({siteId: site})" target="_blank">{{hmasterstandbynum}}</a></td> + <th>Backup HBase Master</th> + <td>{{hmasteraverageload}}</td> + <th>Average Load</th> </tr> - <tr ng-if="hmasterstandby"> - <th>Standby Hmaster Status</th> - <td class="text-break"> - <span ng-if="defaultHostname !== hmasterstandby.tags.hostname" class="label label-success">(<a class="hadoopMetric-summary-a" ui-sref="masterDetail({siteId: site, hostname: hmasterstandby.tags.hostname})">{{hmasterstandby.tags.hostname}}</a>) Healthy</span> - <span ng-if="defaultHostname === hmasterstandby.tags.hostname" class="label label-success">({{hmasterstandby.tags.hostname}}) Healthy</span> - </td> + <tr> + <td><a ui-sref="regionList({siteId: site})">{{regionservertotal}}</a></td> + <th>RegionServers: <a ui-sref="regionList({siteId: site})">{{regionserverhealtynum}}</a> <span + class="label label-success">Good Health</span> / <a ui-sref="regionList({siteId: site})">{{regionservertotal-regionserverhealtynum}}</a> + <span class="label label-danger">Bad Health</span> + </th> + <td></td> + <th></th> </tr> - </tbody> </table> </div> </div> http://git-wip-us.apache.org/repos/asf/eagle/blob/1550c895/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/style/index.css ---------------------------------------------------------------------- diff --git a/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/style/index.css b/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/style/index.css index 6ae1ea1..4f2298c 100644 --- a/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/style/index.css +++ b/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/style/index.css @@ -64,3 +64,17 @@ color: #fff; } +.small-box.hadoopMetric-widget { + margin: 0; + height: 100%; + min-height: 110px; +} + +.hadoopMetric-widget-detail { + margin-left: 12px; + margin-top: 10px; +} + +.hadoopMetric-table { + text-align: right; +} http://git-wip-us.apache.org/repos/asf/eagle/blob/1550c895/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/widgets/availabilityChart.js ---------------------------------------------------------------------- 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 75e6835..48a139a 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 @@ -27,61 +27,100 @@ Yarn: 'green', }; - var widgetChartOption = { - color: ['#FFFFFF'], - grid: { - top: 0, - right: 0, - bottom: 0, - left: 0, - containLabel: false, - }, - xAxis: { - axisLine: {show: false}, - axisLabel: {show: false}, - }, - yAxis: [{ - axisLine: {show: false}, - axisLabel: {show: false}, - axisTick: {show: false}, - splitLine: {show: false}, - }], - }; - hadoopMetricApp.directive("hadoopMetricWidget", function () { return { restrict: 'AE', - controller: function($scope, $attrs) { + controller: function ($scope, $attrs, METRIC, Application, $interval, Site, $wrapState) { // Get site var site = $scope.site; + var refreshInterval; + if(!site) { + $scope.list = $.map(Application.find("HADOOP_METRIC_MONITOR"), function (app) { + return { + siteId: app.site.siteId, + siteName: app.site.siteName || app.site.siteId, + count: -1 + }; + }); + } else { + $scope.list = [{ + siteId: site.siteId, + siteName: site.siteName || site.siteId, + count: -1 + }]; + } // Get type $scope.type = $attrs.type; // Customize chart color $scope.bgColor = COLOR_MAPPING[$scope.type]; - $scope.chartOption = widgetChartOption; - // Mock fetch data - var now = +new Date(); - var data = []; - for(var j = 0 ; j < 30 ; j += 1) { - data.push({x: now + j * 1000 * 60, y: Math.random() * 100}); + // Ref: jpm widget if need keep refresh the widget + + function refresh() { + $.each($scope.list, function (i, site) { + var hbaseservers = METRIC.hbasehostStatus({site: site.siteName}); + hbaseservers._promise.then(function (res) { + var hmasternum = 0; + var hmasteractivenum = 0; + var regionserverHealthynum = 0; + var regionservertotal = 0; + $.each(res, function (i, server) { + var role = server.tags.role; + var status = server.status; + if (role === "hmaster") { + hmasternum++; + if (status === "active") { + hmasteractivenum++; + } + } else if (role === "regionserver") { + regionservertotal++; + if (status === "live") { + regionserverHealthynum++; + } + } + }); + $scope.hbaseinfo = { + hmasternum: hmasternum, + hmasteractivenum: hmasteractivenum, + regionserverHealthynum: regionserverHealthynum, + regionservertotal: regionservertotal + }; + }); + }); } - $scope.series = [{ - name: '', - type: 'line', - data: data, - showSymbol: false, - }]; - // Ref: jpm widget if need keep refresh the widget + refresh(); + refreshInterval = $interval(refresh, 30 * 1000); + + $scope.$on('$destroy', function () { + $interval.cancel(refreshInterval); + }); }, template: - '<div class="hadoopMetric-widget bg-{{bgColor}}">' + - '<h3>{{type}}</h3>' + - '<div chart class="hadoopMetric-chart-container" series="series" option="chartOption"></div>' + + '<div class="small-box hadoopMetric-widget bg-{{bgColor}}">' + + '<div class="inner">' + + '<h3>{{type}}</h3>' + + '<div class="hadoopMetric-widget-detail">' + + '<a ui-sref="HadoopMetric({siteId: site.siteName})">' + + '<span>{{hbaseinfo.hmasternum}}</span> Masters (' + + '<span>{{hbaseinfo.hmasteractivenum}}</span> Active / ' + + '<span>{{hbaseinfo.hmasternum - hbaseinfo.hmasteractivenum}}</span> Standby)' + + '</a>' + + '</div>' + + '<div class="hadoopMetric-widget-detail">' + + '<a ui-sref="regionList({siteId: site.siteName})">' + + '<span>{{hbaseinfo.regionservertotal}}</span> RegionServers (' + + '<span>{{hbaseinfo.regionserverHealthynum}}</span> Healthy / ' + + '<span>{{hbaseinfo.regionservertotal - hbaseinfo.regionserverHealthynum}}</span> Unhealthy)' + + '</a>' + + '</div>' + + '</div>' + + '<div class="icon">' + + '<i class="fa fa-taxi"></i>' + + '</div>' + '</div>', replace: true }; @@ -99,9 +138,7 @@ ); }; } - - hadoopMetricApp.widget("availabilityHDFSChart", withType('HDFS'), true); hadoopMetricApp.widget("availabilityHBaseChart", withType('HBase'), true); - hadoopMetricApp.widget("availabilityYarnChart", withType('Yarn'), true); }); })(); +//# sourceURL=availabilityChart.js
