Updated Branches: refs/heads/trunk a17127340 -> 7d2baddff
AMBARI-2772. YARN dashboard widgets needed. (xiwang via yusaku) Project: http://git-wip-us.apache.org/repos/asf/incubator-ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-ambari/commit/7d2baddf Tree: http://git-wip-us.apache.org/repos/asf/incubator-ambari/tree/7d2baddf Diff: http://git-wip-us.apache.org/repos/asf/incubator-ambari/diff/7d2baddf Branch: refs/heads/trunk Commit: 7d2baddfffeb1a2a60ce777f7740951eb80f9cc7 Parents: a171273 Author: Yusaku Sako <[email protected]> Authored: Wed Jul 31 11:33:42 2013 -0700 Committer: Yusaku Sako <[email protected]> Committed: Wed Jul 31 11:33:42 2013 -0700 ---------------------------------------------------------------------- ambari-web/app/messages.js | 3 + ambari-web/app/styles/application.less | 45 ++-- .../main/dashboard/widgets/mapreduce_slots.hbs | 2 +- .../main/dashboard/widgets/pie_chart.hbs | 2 +- .../main/dashboard/widgets/simple_text.hbs | 2 +- .../templates/main/dashboard/widgets/uptime.hbs | 2 +- ambari-web/app/views.js | 4 + ambari-web/app/views/main/dashboard.js | 20 +- ambari-web/app/views/main/dashboard/widget.js | 10 +- .../dashboard/widgets/hbase_average_load.js | 2 +- .../dashboard/widgets/node_managers_live.js | 217 +++++++++++++++++++ .../dashboard/widgets/resource_manager_heap.js | 111 ++++++++++ .../widgets/resource_manager_uptime.js | 122 +++++++++++ 13 files changed, 512 insertions(+), 30 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-ambari/blob/7d2baddf/ambari-web/app/messages.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/messages.js b/ambari-web/app/messages.js index 181d06b..79d92ce 100644 --- a/ambari-web/app/messages.js +++ b/ambari-web/app/messages.js @@ -1136,6 +1136,9 @@ Em.I18n.translations = { 'dashboard.widgets.HBaseMasterHeap': 'HBase Master Heap', 'dashboard.widgets.HBaseRegionsInTransition': 'Region In Transition', 'dashboard.widgets.HBaseMasterUptime': 'HBase Master Uptime', + 'dashboard.widgets.ResourceManagerHeap': 'ResourceManager Heap', + 'dashboard.widgets.ResourceManagerUptime': 'ResourceManager Uptime', + 'dashboard.widgets.NodeManagersLive': 'NodeManagers Live', 'dashboard.services':'Services', 'dashboard.services.hosts':'Hosts', http://git-wip-us.apache.org/repos/asf/incubator-ambari/blob/7d2baddf/ambari-web/app/styles/application.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/application.less b/ambari-web/app/styles/application.less index 592592c..fcc5475 100644 --- a/ambari-web/app/styles/application.less +++ b/ambari-web/app/styles/application.less @@ -2002,6 +2002,7 @@ table.graphs { .filter-components{ overflow: auto; max-height: 375px; + width: 210px; color: #333333; right: 0; left: auto; @@ -2098,28 +2099,23 @@ table.graphs { color: #555555; } } - .thumbnail .hidden-info{ + .thumbnail .hidden-info-general{ color: #555555; font-size: 12px; font-weight: bold; - padding-top: 60px; text-align: center; text-decoration: none; display: none; position: relative; } - .thumbnail .hidden-info-three-line{ - color: #555555; - font-size: 12px; - font-weight: bold; + .hidden-info-two-line{ + padding-top: 60px; + } + .hidden-info-three-line{ padding-top: 50px; - text-align: center; - text-decoration: none; - display: none; - position: relative; - table td{ - text-align: center ; - } + } + .hidden-info-five-line{ + padding-top: 40px; } .thumbnail .caption { padding-left: 0px; @@ -2165,11 +2161,7 @@ table.graphs { text-decoration: none; z-index: 9; } - .hidden-info{ - display: block; - z-index: 7; - } - .hidden-info-three-line{ + .hidden-info-general{ display: block; z-index: 7; } @@ -2210,6 +2202,16 @@ table.graphs { opacity: 0.3; z-index: 5; } + .simple-text-hidden-four-line{ + top: -126px; + opacity: 0.3; + z-index: 5; + } + .simple-text-hidden-five-line{ + top: -150px; + opacity: 0.3; + z-index: 5; + } } .cluster-metrics .chart-container{ @@ -2286,7 +2288,7 @@ table.graphs { } } .thumbnail .widget-content .svg { - position:relative; + position: relative; } #map-reduce-slots-text{ @@ -4398,12 +4400,15 @@ i.icon-asterisks { .thumbnail .caption { font-size: 14px; } - .thumbnail .hidden-info{ + .thumbnail .hidden-info-two-line { font-size: 14px; } .thumbnail .hidden-info-three-line{ font-size: 14px; } + .thumbnail .hidden-info-five-line{ + font-size: 12px; + } .links .thumbnail .widget-content{ font-weight: bold; font-size: 12px; http://git-wip-us.apache.org/repos/asf/incubator-ambari/blob/7d2baddf/ambari-web/app/templates/main/dashboard/widgets/mapreduce_slots.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/dashboard/widgets/mapreduce_slots.hbs b/ambari-web/app/templates/main/dashboard/widgets/mapreduce_slots.hbs index c372f2b..5b38cb0 100644 --- a/ambari-web/app/templates/main/dashboard/widgets/mapreduce_slots.hbs +++ b/ambari-web/app/templates/main/dashboard/widgets/mapreduce_slots.hbs @@ -21,7 +21,7 @@ <a class="corner-icon span1" href="#" {{action deleteWidget target="view"}}><i class="icon-remove-sign icon-large"></i></a> <div class="caption span10 slots-caption"> {{view.title}}</div> - <div class="hidden-info"> + <div {{bindAttr class=":hidden-info-general view.hiddenInfoClass"}}> <table align="center"> {{#each line in view.hiddenInfo}} <tr><td>{{line}}</td></tr>{{/each}} http://git-wip-us.apache.org/repos/asf/incubator-ambari/blob/7d2baddf/ambari-web/app/templates/main/dashboard/widgets/pie_chart.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/dashboard/widgets/pie_chart.hbs b/ambari-web/app/templates/main/dashboard/widgets/pie_chart.hbs index 8d68f81..41988c1 100644 --- a/ambari-web/app/templates/main/dashboard/widgets/pie_chart.hbs +++ b/ambari-web/app/templates/main/dashboard/widgets/pie_chart.hbs @@ -26,7 +26,7 @@ <i class="icon-edit"></i> </a> - <div class="hidden-info"> + <div {{bindAttr class=":hidden-info-general view.hiddenInfoClass" }}> <table align="center"> {{#each line in view.hiddenInfo}} <tr><td>{{line}}</td></tr> http://git-wip-us.apache.org/repos/asf/incubator-ambari/blob/7d2baddf/ambari-web/app/templates/main/dashboard/widgets/simple_text.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/dashboard/widgets/simple_text.hbs b/ambari-web/app/templates/main/dashboard/widgets/simple_text.hbs index 2908eba..f5a96ca 100644 --- a/ambari-web/app/templates/main/dashboard/widgets/simple_text.hbs +++ b/ambari-web/app/templates/main/dashboard/widgets/simple_text.hbs @@ -26,7 +26,7 @@ <i class="icon-edit"></i> </a> - <div {{bindAttr class="view.hiddenInfoClass" }}> + <div {{bindAttr class=":hidden-info-general view.hiddenInfoClass" }}> <table align="center"> {{#each line in view.hiddenInfo}} <tr><td>{{line}}</td></tr> http://git-wip-us.apache.org/repos/asf/incubator-ambari/blob/7d2baddf/ambari-web/app/templates/main/dashboard/widgets/uptime.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/dashboard/widgets/uptime.hbs b/ambari-web/app/templates/main/dashboard/widgets/uptime.hbs index bbc2eea..f5c8636 100644 --- a/ambari-web/app/templates/main/dashboard/widgets/uptime.hbs +++ b/ambari-web/app/templates/main/dashboard/widgets/uptime.hbs @@ -22,7 +22,7 @@ <i class="icon-remove-sign icon-large"></i> </a> <div class="caption span11"> {{view.title}} </div> - <div {{bindAttr class="view.hiddenInfoClass"}}> + <div {{bindAttr class=":hidden-info-general view.hiddenInfoClass"}}> <table align="center"> {{#each line in view.hiddenInfo}} <tr> http://git-wip-us.apache.org/repos/asf/incubator-ambari/blob/7d2baddf/ambari-web/app/views.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views.js b/ambari-web/app/views.js index 74af7a0..12b52f0 100644 --- a/ambari-web/app/views.js +++ b/ambari-web/app/views.js @@ -118,6 +118,10 @@ require('views/main/dashboard/widgets/hbase_master_heap'); require('views/main/dashboard/widgets/hbase_average_load'); require('views/main/dashboard/widgets/hbase_regions_in_transition'); require('views/main/dashboard/widgets/hbase_master_uptime'); +require('views/main/dashboard/widgets/resource_manager_heap'); +require('views/main/dashboard/widgets/resource_manager_uptime'); +require('views/main/dashboard/widgets/node_managers_live'); + require('views/main/service'); require('views/main/service/menu'); http://git-wip-us.apache.org/repos/asf/incubator-ambari/blob/7d2baddf/ambari-web/app/views/main/dashboard.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/main/dashboard.js b/ambari-web/app/views/main/dashboard.js index d0e5c58..42ccc01 100644 --- a/ambari-web/app/views/main/dashboard.js +++ b/ambari-web/app/views/main/dashboard.js @@ -73,6 +73,9 @@ App.MainDashboardView = Em.View.extend({ case "HDFS": self.set('hdfs_model', App.HDFSService.find(item.get('id')) || item); break; + case "YARN": + self.set('yarn_model', App.YARNService.find(item.get('id')) || item); + break; case "MAPREDUCE": self.set('mapreduce_model', App.MapReduceService.find(item.get('id')) || item); break; @@ -89,7 +92,8 @@ App.MainDashboardView = Em.View.extend({ '17', '11', '12', '13', '14', '18', '1', '6', '5', '9', '3', '7', '15', '16', '20', - '19', '21', '23' + '19', '21', '23', + '24', '25', '26' // all yarn ]; // all in order var hiddenFull = [['22','Region In Transition']]; if (this.get('hdfs_model') == null) { @@ -113,6 +117,12 @@ App.MainDashboardView = Em.View.extend({ visibleFull.splice(index, 1); }, this); hiddenFull = []; + }if (this.get('yarn_model') == null) { + var yarn = ['24', '25', '26']; + yarn.forEach ( function (item) { + var index = visibleFull.indexOf(item); + visibleFull.splice(index, 1); + }, this); } var obj = this.get('initPrefObject'); obj.visible = visibleFull; @@ -121,6 +131,8 @@ App.MainDashboardView = Em.View.extend({ hdfs_model: null, mapreduce_model: null, + mapreduce2_model: null, + yarn_model: null, hbase_model: null, visibleWidgets: [], hiddenWidgets: [], // widget child view will push object in this array if deleted @@ -260,6 +272,9 @@ App.MainDashboardView = Em.View.extend({ case '21': return App.HBaseAverageLoadView; case '22': return App.HBaseRegionsInTransitionView; case '23': return App.HBaseMasterUptimeView; + case '24': return App.ResourceManagerHeapPieChartView; + case '25': return App.ResourceManagerUptimeView; + case '26': return App.NodeManagersLiveView; } }, @@ -269,7 +284,8 @@ App.MainDashboardView = Em.View.extend({ visible: [], hidden: [], threshold: {1: [80, 90], 2: [85, 95], 3: [90, 95], 4: [80, 90], 5: [1000, 3000], 6: [70, 90], 7: [90, 95], 8: [50, 75], 9: [30000, 120000], - 10: [], 11: [], 12: [], 13: [], 14: [], 15: [], 16: [], 17: [], 18: [], 19: [], 20: [70, 90], 21: [10, 19.2], 22: [3, 10], 23: []} // id:[thresh1, thresh2] + 10: [], 11: [], 12: [], 13: [], 14: [], 15: [], 16: [], 17: [], 18: [], 19: [], 20: [70, 90], 21: [10, 19.2], 22: [3, 10], 23: [], + 24: [70, 90], 25: [], 26: [50, 75]} // id:[thresh1, thresh2] }), persistKey: function () { var loginName = App.router.get('loginName'); http://git-wip-us.apache.org/repos/asf/incubator-ambari/blob/7d2baddf/ambari-web/app/views/main/dashboard/widget.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/main/dashboard/widget.js b/ambari-web/app/views/main/dashboard/widget.js index 9fedb7e..06d8920 100644 --- a/ambari-web/app/views/main/dashboard/widget.js +++ b/ambari-web/app/views/main/dashboard/widget.js @@ -30,6 +30,8 @@ App.DashboardWidgetView = Em.View.extend({ return this.get('parentView').get('mapreduce_model'); } else if (this.get('model_type') == 'hbase') { return this.get('parentView').get('hbase_model'); + } else if (this.get('model_type') == 'yarn') { + return this.get('parentView').get('yarn_model'); } }.property(''), //data bind from parent view @@ -45,7 +47,7 @@ App.DashboardWidgetView = Em.View.extend({ isLinks: false, content: null, // widget content pieChart/ text/ progress bar/links/ metrics. etc hiddenInfo: null, // more info details - hiddenInfoClass: "hidden-info", + hiddenInfoClass: "hidden-info-two-line", thresh1: null, //num not string thresh2: null, @@ -248,8 +250,10 @@ App.DashboardWidgetView = Em.View.extend({ return "simple-text-hidden-two-line"; } else if (lineNum == 3) { return "simple-text-hidden-three-line"; - } else { - return ""; + } else if (lineNum == 4) { + return "simple-text-hidden-four-line"; + } else if (lineNum == 5) { + return "simple-text-hidden-five-line"; } }.property('this.hiddenInfo.length') http://git-wip-us.apache.org/repos/asf/incubator-ambari/blob/7d2baddf/ambari-web/app/views/main/dashboard/widgets/hbase_average_load.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/main/dashboard/widgets/hbase_average_load.js b/ambari-web/app/views/main/dashboard/widgets/hbase_average_load.js index 91e7100..795e417 100644 --- a/ambari-web/app/views/main/dashboard/widgets/hbase_average_load.js +++ b/ambari-web/app/views/main/dashboard/widgets/hbase_average_load.js @@ -55,7 +55,7 @@ App.HBaseAverageLoadView = App.DashboardWidgetView.extend({ return this.get('data') > thresh2? true: false; }.property('data','thresh1','thresh2'), isNA: function (){ - return this.get('data') === null; + return this.get('data') === null || isNaN(this.get('data')); }.property('data'), thresh1: 0.5, http://git-wip-us.apache.org/repos/asf/incubator-ambari/blob/7d2baddf/ambari-web/app/views/main/dashboard/widgets/node_managers_live.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/main/dashboard/widgets/node_managers_live.js b/ambari-web/app/views/main/dashboard/widgets/node_managers_live.js new file mode 100644 index 0000000..f94d28a --- /dev/null +++ b/ambari-web/app/views/main/dashboard/widgets/node_managers_live.js @@ -0,0 +1,217 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +var App = require('app'); + +App.NodeManagersLiveView = App.DashboardWidgetView.extend({ + + templateName: require('templates/main/dashboard/widgets/simple_text'), + title: Em.I18n.t('dashboard.widgets.NodeManagersLive'), + id: '26', + + isPieChart: false, + isText: true, + isProgressBar: false, + model_type: 'yarn', + + hiddenInfo: function () { + var nmActive = this.get('model.nodeManagersCountActive'); + var nmLost = this.get('model.nodeManagersCountLost'); + var nmUnhealthy = this.get('model.nodeManagersCountUnhealthy'); + var nmRebooted = this.get('model.nodeManagersCountRebooted'); + var nmDecom = this.get('model.nodeManagersCountDecommissioned'); + var result = []; + result.pushObject(nmActive + " active"); + result.pushObject(nmLost + " lost"); + result.pushObject(nmUnhealthy + " unhealthy"); + result.pushObject(nmRebooted + " rebooted"); + result.pushObject(nmDecom + " decommissioned"); + return result; + }.property('model.nodeManagersCountActive', 'model.nodeManagersCountLost', + 'model.nodeManagersCountUnhealthy', 'model.nodeManagersCountRebooted', 'model.nodeManagersCountDecommissioned'), + hiddenInfoClass: "hidden-info-five-line", + + classNameBindings: ['isRed', 'isOrange', 'isGreen'], + isRed: function () { + var thresh1 = this.get('thresh1'); + var thresh2 = this.get('thresh2'); + return this.get('data') <= thresh1? true: false; + }.property('data','thresh1','thresh2'), + isOrange: function () { + var thresh1 = this.get('thresh1'); + var thresh2 = this.get('thresh2'); + return (this.get('data') <= thresh2 && this.get('data') > thresh1 )? true: false; + }.property('data','thresh1','thresh2'), + isGreen: function () { + var thresh1 = this.get('thresh1'); + var thresh2 = this.get('thresh2'); + return this.get('data') > thresh2? true: false; + }.property('data','thresh1','thresh2'), + + thresh1: 40, + thresh2: 70, + maxValue: 100, + + data: function () { + var nodeManagers = this.get('model.nodeManagerNodes.length'); + var nodeManagersLive = this.get('model.nodeManagerLiveNodes.length'); + return (nodeManagersLive / nodeManagers).toFixed(2) * 100; + }.property('model.nodeManagerNodes', 'model.nodeManagerLiveNodes'), + + content: function () { + var nodeManagers = this.get('model.nodeManagerNodes.length'); + var nodeManagersLive = this.get('model.nodeManagerLiveNodes.length'); + return nodeManagersLive + '/' + nodeManagers; + }.property('model.nodeManagerNodes', 'model.nodeManagerLiveNodes'), + + editWidget: function (event) { + var parent = this; + var max_tmp = parseFloat(parent.get('maxValue')); + var configObj = Ember.Object.create({ + thresh1: parent.get('thresh1') + '', + thresh2: parent.get('thresh2') + '', + hintInfo: 'Edit the percentage of thresholds to change the color of current widget. ' + + ' Assume all task trackers UP is 100, and all DOWN is 0. '+ + ' So enter two numbers between 0 to ' + max_tmp, + isThresh1Error: false, + isThresh2Error: false, + errorMessage1: "", + errorMessage2: "", + maxValue: max_tmp, + observeNewThresholdValue: function () { + var thresh1 = this.get('thresh1'); + var thresh2 = this.get('thresh2'); + if (thresh1.trim() != "") { + if (isNaN(thresh1) || thresh1 > max_tmp || thresh1 < 0) { + this.set('isThresh1Error', true); + this.set('errorMessage1', 'Invalid! Enter a number between 0 - ' + max_tmp); + } else if (this.get('isThresh2Error') === false && parseFloat(thresh2)<= parseFloat(thresh1)){ + this.set('isThresh1Error', true); + this.set('errorMessage1', 'Threshold 1 should be smaller than threshold 2 !'); + } else { + this.set('isThresh1Error', false); + this.set('errorMessage1', ''); + } + } else { + this.set('isThresh1Error', true); + this.set('errorMessage1', 'This is required'); + } + + if (thresh2.trim() != "") { + if (isNaN(thresh2) || thresh2 > max_tmp || thresh2 < 0) { + this.set('isThresh2Error', true); + this.set('errorMessage2', 'Invalid! Enter a number between 0 - ' + max_tmp); + } else { + this.set('isThresh2Error', false); + this.set('errorMessage2', ''); + } + } else { + this.set('isThresh2Error', true); + this.set('errorMessage2', 'This is required'); + } + + // update the slider handles and color + if (this.get('isThresh1Error') === false && this.get('isThresh2Error') === false) { + $("#slider-range").slider('values', 0 , parseFloat(thresh1)); + $("#slider-range").slider('values', 1 , parseFloat(thresh2)); + } + }.observes('thresh1', 'thresh2') + }); + + var browserVerion = this.getInternetExplorerVersion(); + App.ModalPopup.show({ + header: 'Customize Widget', + classNames: [ 'sixty-percent-width-modal-edit-widget'], + bodyClass: Ember.View.extend({ + templateName: require('templates/main/dashboard/edit_widget_popup'), + configPropertyObj: configObj + }), + primary: Em.I18n.t('common.apply'), + onPrimary: function() { + configObj.observeNewThresholdValue(); + if (!configObj.isThresh1Error && !configObj.isThresh2Error) { + parent.set('thresh1', parseFloat(configObj.get('thresh1')) ); + parent.set('thresh2', parseFloat(configObj.get('thresh2')) ); + if (!App.testMode) { + //save to persit + var big_parent = parent.get('parentView'); + big_parent.getUserPref(big_parent.get('persistKey')); + var oldValue = big_parent.get('currentPrefObject'); + oldValue.threshold[parseInt(parent.id)] = [configObj.get('thresh1'), configObj.get('thresh2')]; + big_parent.postUserPref(big_parent.get('persistKey'),oldValue); + } + this.hide(); + } + }, + secondary : Em.I18n.t('common.cancel'), + onSecondary: function () { + this.hide(); + }, + + didInsertElement: function () { + var handlers = [configObj.get('thresh1'), configObj.get('thresh2')]; + var colors = ['#B80000', '#FF8E00', '#95A800']; //color red, orange, green + + if (browserVerion == -1 || browserVerion > 9) { + configObj.set('isIE9', false); + configObj.set('isGreenOrangeRed', false); + $("#slider-range").slider({ + range: true, + min: 0, + max: max_tmp, + values: handlers, + create: function (event, ui) { + updateColors(handlers); + }, + slide: function (event, ui) { + updateColors(ui.values); + configObj.set('thresh1', ui.values[0] + ''); + configObj.set('thresh2', ui.values[1] + ''); + }, + change: function (event, ui) { + updateColors(ui.values); + } + }); + + function updateColors(handlers) { + var colorstops = colors[0] + ", "; // start with the first color + for (var i = 0; i < handlers.length; i++) { + colorstops += colors[i] + " " + handlers[i] + "%,"; + colorstops += colors[i+1] + " " + handlers[i] + "%,"; + } + // end with the last color + colorstops += colors[colors.length - 1]; + var css1 = '-webkit-linear-gradient(left,' + colorstops + ')'; // chrome & safari + $('#slider-range').css('background-image', css1); + var css2 = '-ms-linear-gradient(left,' + colorstops + ')'; // IE 10+ + $('#slider-range').css('background-image', css2); + //$('#slider-range').css('filter', 'progid:DXImageTransform.Microsoft.gradient( startColorStr= ' + colors[0] + ', endColorStr= ' + colors[2] +', GradientType=1 )' ); // IE 10- + var css3 = '-moz-linear-gradient(left,' + colorstops + ')'; // Firefox + $('#slider-range').css('background-image', css3); + + $('#slider-range .ui-widget-header').css({'background-color': '#FF8E00', 'background-image': 'none'}); // change the original ranger color + } + } else { + configObj.set('isIE9', true); + configObj.set('isGreenOrangeRed', false); + } + } + }); + } + +}) http://git-wip-us.apache.org/repos/asf/incubator-ambari/blob/7d2baddf/ambari-web/app/views/main/dashboard/widgets/resource_manager_heap.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/main/dashboard/widgets/resource_manager_heap.js b/ambari-web/app/views/main/dashboard/widgets/resource_manager_heap.js new file mode 100644 index 0000000..f208bad --- /dev/null +++ b/ambari-web/app/views/main/dashboard/widgets/resource_manager_heap.js @@ -0,0 +1,111 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +var App = require('app'); + +App.ResourceManagerHeapPieChartView = App.DashboardWidgetView.extend({ + + templateName: require('templates/main/dashboard/widgets/pie_chart'), + title: Em.I18n.t('dashboard.widgets.ResourceManagerHeap'), + id: '24', + + isPieChart: true, + isText: false, + isProgressBar: false, + model_type: 'yarn', + + hiddenInfo: function () { + var memUsed = this.get('model').get('jvmMemoryHeapUsed') * 1000000; + var memCommitted = this.get('model').get('jvmMemoryHeapCommitted') * 1000000; + var percent = memCommitted > 0 ? ((100 * memUsed) / memCommitted) : 0; + var result = []; + result.pushObject(percent.toFixed(1) + '% used'); + result.pushObject(memUsed.bytesToSize(1, "parseFloat") + ' of ' + memCommitted.bytesToSize(1, "parseFloat")); + return result; + }.property('model.jvmMemoryHeapUsed', 'model.jvmMemoryHeapCommitted'), + + thresh1: 40,// can be customized + thresh2: 70, + maxValue: 100, + + isPieExist: function () { + var total = this.get('model.jvmMemoryHeapCommitted') * 1000000; + return total > 0 ; + }.property('model.jvmMemoryHeapCommitted'), + + content: App.ChartPieView.extend({ + + model: null, //data bind here + id: 'widget-rm-heap', // id in html + stroke: '#D6DDDF', //light grey + thresh1: null, + thresh2: null, + innerR: 25, + + existCenterText: true, + centerTextColor: function () { + return this.get('contentColor'); + }.property('contentColor'), + + palette: new Rickshaw.Color.Palette({ + scheme: [ '#FFFFFF', '#D6DDDF'].reverse() + }), + + data: function () { + var memUsed = this.get('model').get('jvmMemoryHeapUsed') * 1000000; + var memCommitted = this.get('model').get('jvmMemoryHeapCommitted') * 1000000; + var percent = memCommitted > 0 ? ((100 * memUsed) / memCommitted).toFixed() : 0; + return [ percent, 100 - percent]; + }.property('model.jvmMemoryHeapUsed', 'model.jvmMemoryHeapCommitted'), + + contentColor: function (){ + var used = parseFloat(this.get('data')[0]); + var thresh1 = parseFloat(this.get('thresh1')); + var thresh2 = parseFloat(this.get('thresh2')); + var color_green = '#95A800'; + var color_red = '#B80000'; + var color_orange = '#FF8E00'; + if (used <= thresh1) { + this.set('palette', new Rickshaw.Color.Palette({ + scheme: [ '#FFFFFF', color_green ].reverse() + })) + return color_green; + } else if (used <= thresh2) { + this.set('palette', new Rickshaw.Color.Palette({ + scheme: [ '#FFFFFF', color_orange ].reverse() + })) + return color_orange; + } else { + this.set('palette', new Rickshaw.Color.Palette({ + scheme: [ '#FFFFFF', color_red ].reverse() + })) + return color_red; + } + }.property('data', 'this.thresh1', 'this.thresh2'), + + refreshSvg: function () { + // remove old svg + var old_svg = $("#" + this.id); + old_svg.remove(); + + // draw new svg + this.appendSvg(); + }.observes('this.data', 'this.thresh1', 'this.thresh2') + }) + +}) \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-ambari/blob/7d2baddf/ambari-web/app/views/main/dashboard/widgets/resource_manager_uptime.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/main/dashboard/widgets/resource_manager_uptime.js b/ambari-web/app/views/main/dashboard/widgets/resource_manager_uptime.js new file mode 100644 index 0000000..d3b092d --- /dev/null +++ b/ambari-web/app/views/main/dashboard/widgets/resource_manager_uptime.js @@ -0,0 +1,122 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +var App = require('app'); +var date = require('utils/date'); + +App.ResourceManagerUptimeView = App.DashboardWidgetView.extend({ + + templateName: require('templates/main/dashboard/widgets/uptime'), + title: Em.I18n.t('dashboard.widgets.ResourceManagerUptime'), + id: '25', + + isPieChart: false, + isText: true, + isProgressBar: false, + model_type: 'yarn', + hiddenInfo: [], + hiddenInfoClass: "hidden-info-three-line", + + classNameBindings: ['isRed', 'isOrange', 'isGreen', 'isNA'], + isGreen: function () { + return this.get('data') != null; + }.property('data'), + isOrange: function () { + return false; + }.property('data'), + isRed: function () { + return false; + }.property('data'), + isNA: function () { + return this.get('data') == null; + }.property('data'), + + thresh1: 5, + thresh2: 10, + maxValue: 'infinity', + + data: function(){ + var uptime = this.get('model.resourceManagerStartTime'); + if (uptime && uptime > 0) { + var uptimeString = this.timeConverter(uptime); + var diff = (new Date()).getTime() - uptime; + if (diff < 0) { + diff = 0; + } + var formatted = date.timingFormat(diff); //17.67 days + var timeUnit = null; + switch (formatted.split(" ")[1]){ + case 'secs': + timeUnit = 's'; + break; + case 'hours': + timeUnit = 'hr'; + break; + case 'days': + timeUnit = 'd'; + break; + case 'mins': + timeUnit = 'min'; + break; + default: + timeUnit = formatted.split(" ")[1]; + } + this.set('timeUnit', timeUnit); + this.set('hiddenInfo', []); + this.get('hiddenInfo').pushObject(formatted); + this.get('hiddenInfo').pushObject(uptimeString[0]); + this.get('hiddenInfo').pushObject(uptimeString[1]); + return parseFloat(formatted.split(" ")[0]); + } + this.set('hiddenInfo', ['ResourceManager','Not Running']); + return null; + }.property('model.resourceManagerStartTime'), + + timeUnit: null, + + content: function () { + var data = this.get('data'); + if (data) { + return data.toFixed(1) + ' '+ this.get('timeUnit'); + } else { + return this.t('services.service.summary.notAvailable'); + } + }.property('model.jobTrackerStartTime'), + + timeConverter: function (timestamp) { + var origin = new Date(timestamp); + origin = origin.toString(); + var result = []; + var start = origin.indexOf('GMT'); + if(start == -1){ // ie + var arr = origin.split(" "); + result.pushObject(arr[0] + " " + arr[1] + " " + arr[2] + " " + arr[3]); + var second = ''; + for(var i = 4; i < arr.length; i++){ + second = second + " " + arr[i]; + } + result.pushObject(second); + }else{ // other browsers + var end = origin.indexOf(" ", start); + result.pushObject(origin.slice(0, start-10)); + result.pushObject(origin.slice(start-9)); + } + return result; + } + +})
