Author: yusaku
Date: Mon Jun 17 18:55:40 2013
New Revision: 1493886
URL: http://svn.apache.org/r1493886
Log:
AMBARI-2402. Add support for "classic" dashboard. (Xi Wang via yusaku)
Modified:
incubator/ambari/trunk/ambari-web/app/messages.js
incubator/ambari/trunk/ambari-web/app/styles/application.less
incubator/ambari/trunk/ambari-web/app/templates/main/dashboard.hbs
incubator/ambari/trunk/ambari-web/app/templates/main/dashboard/plus_button_filter.hbs
incubator/ambari/trunk/ambari-web/app/views/common/chart/linear_time.js
incubator/ambari/trunk/ambari-web/app/views/main/dashboard.js
incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widget.js
incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/metrics_cpu.js
incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/metrics_load.js
incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/metrics_memory.js
incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/metrics_network.js
Modified: incubator/ambari/trunk/ambari-web/app/messages.js
URL:
http://svn.apache.org/viewvc/incubator/ambari/trunk/ambari-web/app/messages.js?rev=1493886&r1=1493885&r2=1493886&view=diff
==============================================================================
--- incubator/ambari/trunk/ambari-web/app/messages.js (original)
+++ incubator/ambari/trunk/ambari-web/app/messages.js Mon Jun 17 18:55:40 2013
@@ -992,6 +992,9 @@ Em.I18n.translations = {
'dashboard.clusterMetrics.network':'Network Usage',
'dashboard.widgets': 'Cluster Status and Metrics',
+ 'dashboard.button.switch': 'Switch to classic dashboard',
+ 'dashboard.button.switchShort': 'Switch',
+ 'dashboard.button.reset': 'Reset all widgets to default ',
'dashboard.widgets.NameNodeHeap': 'NameNode Heap',
'dashboard.widgets.NameNodeCpu': 'NameNode CPU WIO',
Modified: incubator/ambari/trunk/ambari-web/app/styles/application.less
URL:
http://svn.apache.org/viewvc/incubator/ambari/trunk/ambari-web/app/styles/application.less?rev=1493886&r1=1493885&r2=1493886&view=diff
==============================================================================
--- incubator/ambari/trunk/ambari-web/app/styles/application.less (original)
+++ incubator/ambari/trunk/ambari-web/app/styles/application.less Mon Jun 17
18:55:40 2013
@@ -1905,6 +1905,8 @@ table.graphs {
line-height: 30px;
}
.filter-components{
+ right: 0;
+ left: auto;
li {
ul{
margin-left: 0px;
@@ -1928,20 +1930,39 @@ table.graphs {
}
}
}
- .reset-widgets-button{
- color: #ffffff;
- margin-top: 5px;
- margin-left: -15px;
- width: 68px;
- padding-left: 0px;
- padding-right: 0px;
- }
.add-widget-button{
color: #000000;
margin-top: 5px;
- margin-left: 12px;
- width: 60px;
+ margin-left: -22px;
+ width: 70px;
+ }
+ .more-options-button{
+ margin-top: 5px;
+ margin-left: 0px;
+ margin-right: 6px;
+ padding: 1px;
+ width: 70px;
+ .icon-cog{
+ font-size: 18px;
+ position: relative;
+ left: 3px;
+ top: 2px;
+ }
+ .caret{
+ position: relative;
+ left: 5px;
+ top: 2px;
+ }
}
+ .right-align-dropdown{
+ right: 0;
+ left: auto;
+ padding-top: 9px;
+ padding-bottom: 9px;
+ margin-right: 4px;
+ }
+
+
#dashboard-widgets{
.thumbnails {
@@ -4220,17 +4241,9 @@ i.icon-asterisks {
#dashboard-widgets-container{
- .reset-widgets-button{
- margin-top: 5px;
- margin-left: 0px;
- width: 70px;
- padding-left: 1px;
- padding-right: 1px;
- }
+
.add-widget-button{
- margin-top: 5px;
- margin-left: 5px;
- width: 70px;
+ margin-left: 9px; //3px for 3 buttons view
}
#dashboard-widgets{
Modified: incubator/ambari/trunk/ambari-web/app/templates/main/dashboard.hbs
URL:
http://svn.apache.org/viewvc/incubator/ambari/trunk/ambari-web/app/templates/main/dashboard.hbs?rev=1493886&r1=1493885&r2=1493886&view=diff
==============================================================================
--- incubator/ambari/trunk/ambari-web/app/templates/main/dashboard.hbs
(original)
+++ incubator/ambari/trunk/ambari-web/app/templates/main/dashboard.hbs Mon Jun
17 18:55:40 2013
@@ -16,45 +16,115 @@
* limitations under the License.
}}
{{#if view.isDataLoaded}}
-<div class="row-fluid">
- <div class="services-menu well span2" style="padding: 8px 0">
- {{view App.MainServiceMenuView}}
- </div>
-
- <div class="span10" id="dashboard-widgets-container">
- <div class="box">
- <div class="box-header">
- <div class="row-fluid">
- <h4 class="span10">{{t dashboard.widgets}}</h4>
- <a href="javascript:void(null)" class="btn btn-warning span1
reset-widgets-button" data-toggle="modal" {{action "resetAllWidgets"
target="view"}}>
- <i class="icon-refresh"></i>
- {{t common.reset}}
- </a>
- <a class="add-widget-button span1">{{view
view.plusButtonFilterView}}</a>
+ {{#if view.isClassicDashboard}}
+ <div class="row">
+ <div class="span6">
+ <div class="row">
+ <div class="span6">
+ <div class="box">
+ <div class="box-header">
+ <h4>{{t dashboard.services}}</h4>
+ </div>
+ <dl class="dl-horizontal services">
+ {{#each item in view.content}}
+ {{view item.viewName serviceBinding="item.model"}}
+ {{/each}}
+ </dl>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="span6">
+ <div class="box">
+ <div class="box-header">
+ <h4>{{t dashboard.clusterMetrics}}</h4>
+ <div class="btn-group">
+ <a class="btn" target="_blank" rel="tooltip" title="Go to
Ganglia" {{bindAttr href="view.gangliaUrl"}}><i class="icon-link"></i></a>
+ <a href="javascript:void(null)" class="btn btn-success
switch-button" data-toggle="modal" {{action "switchToNew" target="view"}}>
+ {{t dashboard.button.switchShort}}
+ <i class="icon-forward"></i>
+ </a>
+ </div>
+ </div>
+ <div class="graphs-container">
+ <table class="graphs">
+ <tr>
+ <td>
+ {{view App.ChartClusterMetricsNetwork}}
+ </td>
+ <td>
+ {{view App.ChartClusterMetricsLoad}}
+ </td>
+ </tr>
+ <tr>
+ <td>
+ {{view App.ChartClusterMetricsMemory}}
+ </td>
+ <td>
+ {{view App.ChartClusterMetricsCPU}}
+ </td>
+ </tr>
+ </table>
+ </div>
</div>
- </div>
+ </div>
+ </div>
+ {{else}}
+ <div class="row-fluid">
+ <div class="services-menu well span2" style="padding: 8px 0">
+ {{view App.MainServiceMenuView}}
+ </div>
- <div id="dashboard-widgets" class="widgets-container">
- <div class="thumbnails row-fluid" id="sortable">
- {{#if view.visibleWidgets.length}}
- {{#each widgetClass in view.visibleWidgets}}
- {{#if widgetClass.isProgressBar}}
- <div class="span4p8">
- {{view widgetClass }}
- </div>
- {{else}}
- <div class="span2p4">
- {{view widgetClass }}
+ <div class="span10" id="dashboard-widgets-container">
+ <div class="box">
+ <div class="box-header">
+ <div class="row-fluid">
+ <h4 class="span10">{{t dashboard.widgets}}</h4>
+ <a class="add-widget-button span1">{{view
view.plusButtonFilterView}}</a>
+ <div class="btn-group">
+ <button class="btn dropdown-toggle span1
more-options-button" data-toggle="dropdown">
+ <i class="icon-cog"></i>
+ <span class= "caret"></span>
+ </button>
+ <ul class="dropdown-menu right-align-dropdown">
+ <li>
+ <a class="" {{action "resetAllWidgets" target="view"}}>
+ <i class="icon-refresh"></i>
+ {{t dashboard.button.reset}}
+ </a>
+ </li>
+ <li>
+ <a class="" {{action "switchToClassic" target="view"}}>
+ <i class="icon-backward"></i>
+ {{t dashboard.button.switch}}
+ </a>
+ </li>
+ </ul>
</div>
+ </div>
+ </div>
+
+ <div id="dashboard-widgets" class="widgets-container">
+ <div class="thumbnails row-fluid" id="sortable">
+ {{#if view.visibleWidgets.length}}
+ {{#each widgetClass in view.visibleWidgets}}
+ {{#if widgetClass.isProgressBar}}
+ <div class="span4p8">
+ {{view widgetClass }}
+ </div>
+ {{else}}
+ <div class="span2p4">
+ {{view widgetClass }}
+ </div>
+ {{/if}}
+ {{/each}}
{{/if}}
- {{/each}}
- {{/if}}
+ </div>
+ </div>
+
</div>
</div>
-
- </div>
- </div>
-</div>
-
+ </div>
+ {{/if}}
{{/if}}
Modified:
incubator/ambari/trunk/ambari-web/app/templates/main/dashboard/plus_button_filter.hbs
URL:
http://svn.apache.org/viewvc/incubator/ambari/trunk/ambari-web/app/templates/main/dashboard/plus_button_filter.hbs?rev=1493886&r1=1493885&r2=1493886&view=diff
==============================================================================
---
incubator/ambari/trunk/ambari-web/app/templates/main/dashboard/plus_button_filter.hbs
(original)
+++
incubator/ambari/trunk/ambari-web/app/templates/main/dashboard/plus_button_filter.hbs
Mon Jun 17 18:55:40 2013
@@ -16,8 +16,8 @@
* limitations under the License.
}}
-<button class="btn btn-info single-btn-group" {{action "clickFilterButton"
target="view"}} >
- <i class="icon-plus"></i> {{t common.add}}
+<button class="btn single-btn-group" {{action "clickFilterButton"
target="view"}} >
+ <i class="icon-plus"></i> <span style="font-weight: bold">{{t
common.add}}</span>
</button>
<ul class="dropdown-menu filter-components" >
{{#if view.hiddenWidgets.length}}
Modified:
incubator/ambari/trunk/ambari-web/app/views/common/chart/linear_time.js
URL:
http://svn.apache.org/viewvc/incubator/ambari/trunk/ambari-web/app/views/common/chart/linear_time.js?rev=1493886&r1=1493885&r2=1493886&view=diff
==============================================================================
--- incubator/ambari/trunk/ambari-web/app/views/common/chart/linear_time.js
(original)
+++ incubator/ambari/trunk/ambari-web/app/views/common/chart/linear_time.js Mon
Jun 17 18:55:40 2013
@@ -509,7 +509,7 @@ App.ChartLinearTimeView = Ember.View.ext
var height = 150;
var diff = 32;
- if(this.get('id').indexOf('cluster-metrics') != -1){
+ if(this.get('inWidget')){
height = 105; // for widgets view
diff = 22;
}
Modified: incubator/ambari/trunk/ambari-web/app/views/main/dashboard.js
URL:
http://svn.apache.org/viewvc/incubator/ambari/trunk/ambari-web/app/views/main/dashboard.js?rev=1493886&r1=1493885&r2=1493886&view=diff
==============================================================================
--- incubator/ambari/trunk/ambari-web/app/views/main/dashboard.js (original)
+++ incubator/ambari/trunk/ambari-web/app/views/main/dashboard.js Mon Jun 17
18:55:40 2013
@@ -30,8 +30,9 @@ App.MainDashboardView = Em.View.extend({
},
content:[],
isDataLoaded: false,
+ isClassicDashboard: false,
- makeSortable: function() {
+ makeSortable: function () {
var self = this;
$( "#sortable" ).sortable({
items: "> div",
@@ -45,6 +46,7 @@ App.MainDashboardView = Em.View.extend({
self.getUserPref(self.get('persistKey'));
var oldValue = self.get('currentPrefObject');
var newValue = Em.Object.create({
+ dashboardVersion: oldValue.dashboardVersion,
visible: [],
hidden: oldValue.hidden,
threshold: oldValue.threshold
@@ -58,7 +60,6 @@ App.MainDashboardView = Em.View.extend({
self.postUserPref(self.get('persistKey'), newValue);
// self.translateToReal(newValue);
}
-
}
});
$( "#sortable" ).disableSelection();
@@ -82,7 +83,7 @@ App.MainDashboardView = Em.View.extend({
}, this);
},
hdfs_model: null,
- mapreduce_model:null,
+ mapreduce_model: null,
hbase_model: null,
visibleWidgets: [],
hiddenWidgets: [], // widget child view will push object in this array if
deleted
@@ -119,6 +120,7 @@ App.MainDashboardView = Em.View.extend({
parent.getUserPref(parent.get('persistKey'));
var oldValue = parent.get('currentPrefObject');
var newValue = Em.Object.create({
+ dashboardVersion: oldValue.dashboardVersion,
visible: oldValue.visible,
hidden: [],
threshold: oldValue.threshold
@@ -130,6 +132,7 @@ App.MainDashboardView = Em.View.extend({
hiddenWidgets.forEach(function(item){
newValue.hidden.push([item.id, item.displayName]);
},this);
+
parent.postUserPref(parent.get('persistKey'), newValue);
parent.translateToReal(newValue);
}
@@ -142,39 +145,46 @@ App.MainDashboardView = Em.View.extend({
* translate from Json value got from persist to real widgets view
*/
translateToReal: function (value) {
+ var version = value.dashboardVersion;
var visible = value.visible;
var hidden = value.hidden;
var threshold = value.threshold;
- // clear current visible and hiddenWidgets
- var visibleWidgets = this.get('visibleWidgets');
- var size = visibleWidgets.length;
- for (var i = 1; i <= size; i++) {
- visibleWidgets.removeAt(0);
- }
- var hiddenWidgets = this.get('hiddenWidgets');
- var size = hiddenWidgets.length;
- for (var i = 1; i <= size; i++) {
- hiddenWidgets.removeAt(0);
- }
- // re-construct visibleWidgets and hiddenWidgets
- for (var j = 0; j <= visible.length -1; j++){
- var cur_id = visible[j];
- var widgetClass = this.widgetsMapper(cur_id);
- //override with new threshold
- if (threshold[cur_id].length > 0) {
- widgetClass.reopen({
- thresh1: threshold[cur_id][0],
- thresh2: threshold[cur_id][1]
- });
+ if(version == 'classic'){
+ this.set('isClassicDashboard', true);
+ }else if(version == 'new'){
+ this.set('isClassicDashboard', false);
+ // clear current visible and hiddenWidgets
+ var visibleWidgets = this.get('visibleWidgets');
+ var size = visibleWidgets.length;
+ for (var i = 1; i <= size; i++) {
+ visibleWidgets.removeAt(0);
+ }
+ var hiddenWidgets = this.get('hiddenWidgets');
+ var size = hiddenWidgets.length;
+ for (var i = 1; i <= size; i++) {
+ hiddenWidgets.removeAt(0);
+ }
+ // re-construct visibleWidgets and hiddenWidgets
+ for (var j = 0; j <= visible.length -1; j++){
+ var cur_id = visible[j];
+ var widgetClass = this.widgetsMapper(cur_id);
+ //override with new threshold
+ if (threshold[cur_id].length > 0) {
+ widgetClass.reopen({
+ thresh1: threshold[cur_id][0],
+ thresh2: threshold[cur_id][1]
+ });
+ }
+ visibleWidgets.pushObject(widgetClass);
+ }
+ for (var j = 0; j <= hidden.length -1; j++){
+ var cur_id = hidden[j][0];
+ var cur_title = hidden[j][1];
+ hiddenWidgets.pushObject(Em.Object.create({displayName:cur_title , id:
cur_id, checked: false}));
}
- visibleWidgets.pushObject(widgetClass);
- }
- for (var j = 0; j <= hidden.length -1; j++){
- var cur_id = hidden[j][0];
- var cur_title = hidden[j][1];
- hiddenWidgets.pushObject(Em.Object.create({displayName:cur_title , id:
cur_id, checked: false}));
}
+
},
setOnLoadVisibleWidgets: function () {
@@ -194,7 +204,7 @@ App.MainDashboardView = Em.View.extend({
}
},
- widgetsMapper: function(id){
+ widgetsMapper: function (id) {
switch(id){
case '1': return App.NameNodeHeapPieChartView;
case '2': return App.NameNodeCapacityPieChartView;
@@ -225,6 +235,7 @@ App.MainDashboardView = Em.View.extend({
currentPrefObject: null,
initPrefObject: Em.Object.create({
+ dashboardVersion: 'new',
visible: [
'11', '12', '13', '14', //cluster-metrics
'1', '2', '3', '4', '5', '15', '17', //hdfs
@@ -235,7 +246,7 @@ App.MainDashboardView = Em.View.extend({
threshold:{1: [40,70], 2: [40,70], 3: [40,70], 4: [40,70], 5: [0.5, 2], 6:
[40,70], 7: [40,70], 8: [40,70], 9: [0.5, 2],
10: [], 11: [], 12: [], 13: [], 14: [], 15: [], 16: [], 17: [], 18: [],
19: [], 20: [40,70], 21: [10,19.2], 22: [3, 10], 23: []} // id:[thresh1,
thresh2]
}),
- persistKey: function(){
+ persistKey: function () {
var loginName = App.router.get('loginName');
return 'user-pref-' + loginName + '-dashboard';
}.property(''),
@@ -243,7 +254,7 @@ App.MainDashboardView = Em.View.extend({
/**
* get persist value from server with persistKey
*/
- getUserPref: function(key){
+ getUserPref: function (key) {
var self = this;
var url = App.apiPrefix + '/persist/' + key;
jQuery.ajax(
@@ -274,7 +285,7 @@ App.MainDashboardView = Em.View.extend({
/**
* post persist key/value to server, value is object
*/
- postUserPref: function(key, value){
+ postUserPref: function (key, value) {
var url = App.apiPrefix + '/persist/';
var keyValuePair = {};
keyValuePair[key] = JSON.stringify(value);
@@ -301,6 +312,31 @@ App.MainDashboardView = Em.View.extend({
});
},
+ switchToClassic: function () {
+ if(!App.testMode){
+ this.getUserPref(this.get('persistKey'));
+ var oldValue = this.get('currentPrefObject');
+ oldValue.dashboardVersion = 'classic';
+ this.postUserPref(this.get('persistKey'), oldValue);
+ }else{
+ var oldValue = this.get('initPrefObject');
+ oldValue.dashboardVersion = 'classic';
+ }
+ this.translateToReal(oldValue);
+ },
+ switchToNew: function () {
+ if(!App.testMode){
+ this.getUserPref(this.get('persistKey'));
+ var oldValue = this.get('currentPrefObject');
+ oldValue.dashboardVersion = 'new';
+ this.postUserPref(this.get('persistKey'), oldValue);
+ }else{
+ var oldValue = this.get('initPrefObject');
+ oldValue.dashboardVersion = 'new';
+ }
+ this.translateToReal(oldValue);
+ },
+
updateServices: function(){
var services = App.Service.find();
services.forEach(function (item) {
Modified: incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widget.js
URL:
http://svn.apache.org/viewvc/incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widget.js?rev=1493886&r1=1493885&r2=1493886&view=diff
==============================================================================
--- incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widget.js
(original)
+++ incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widget.js Mon
Jun 17 18:55:40 2013
@@ -68,6 +68,7 @@ App.DashboardWidgetView = Em.View.extend
var oldValue = parent.get('currentPrefObject');
var deletedId = this.id;
var newValue = Em.Object.create({
+ dashboardVersion: oldValue.dashboardVersion,
visible: [],
hidden: oldValue.hidden,
threshold: oldValue.threshold
Modified:
incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/metrics_cpu.js
URL:
http://svn.apache.org/viewvc/incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/metrics_cpu.js?rev=1493886&r1=1493885&r2=1493886&view=diff
==============================================================================
---
incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/metrics_cpu.js
(original)
+++
incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/metrics_cpu.js
Mon Jun 17 18:55:40 2013
@@ -30,6 +30,7 @@ App.ChartClusterMetricsCPUWidgetView = A
isProgressBar: false,
content: App.ChartClusterMetricsCPU.extend({
- noTitleUnderGraph: true
+ noTitleUnderGraph: true,
+ inWidget: true
})
})
Modified:
incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/metrics_load.js
URL:
http://svn.apache.org/viewvc/incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/metrics_load.js?rev=1493886&r1=1493885&r2=1493886&view=diff
==============================================================================
---
incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/metrics_load.js
(original)
+++
incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/metrics_load.js
Mon Jun 17 18:55:40 2013
@@ -30,6 +30,7 @@ App.ChartClusterMetricsLoadWidgetView =
isProgressBar: false,
content: App.ChartClusterMetricsLoad.extend({
- noTitleUnderGraph: true
+ noTitleUnderGraph: true,
+ inWidget: true
})
})
Modified:
incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/metrics_memory.js
URL:
http://svn.apache.org/viewvc/incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/metrics_memory.js?rev=1493886&r1=1493885&r2=1493886&view=diff
==============================================================================
---
incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/metrics_memory.js
(original)
+++
incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/metrics_memory.js
Mon Jun 17 18:55:40 2013
@@ -30,6 +30,7 @@ App.ChartClusterMetricsMemoryWidgetView
isProgressBar: false,
content: App.ChartClusterMetricsMemory.extend({
- noTitleUnderGraph: true
+ noTitleUnderGraph: true,
+ inWidget: true
})
})
Modified:
incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/metrics_network.js
URL:
http://svn.apache.org/viewvc/incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/metrics_network.js?rev=1493886&r1=1493885&r2=1493886&view=diff
==============================================================================
---
incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/metrics_network.js
(original)
+++
incubator/ambari/trunk/ambari-web/app/views/main/dashboard/widgets/metrics_network.js
Mon Jun 17 18:55:40 2013
@@ -30,6 +30,7 @@ App.ChartClusterMetricsNetworkWidgetView
isProgressBar:false,
content: App.ChartClusterMetricsNetwork.extend({
- noTitleUnderGraph: true
+ noTitleUnderGraph: true,
+ inWidget: true
})
})
