AMBARI-22230 Hosts and Alerts tables UI tweaks. (atkach)
Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/8f53bc45 Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/8f53bc45 Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/8f53bc45 Branch: refs/heads/feature-branch-AMBARI-21307 Commit: 8f53bc453c47a4f95d5e58825feb77d69e6a6a22 Parents: a8ba5e6 Author: Andrii Tkach <atk...@apache.org> Authored: Fri Oct 13 13:45:06 2017 +0300 Committer: Andrii Tkach <atk...@apache.org> Committed: Fri Oct 13 13:45:06 2017 +0300 ---------------------------------------------------------------------- ambari-web/app/models/alerts/alert_group.js | 2 +- ambari-web/app/styles/application.less | 5 + ambari-web/app/styles/dashboard.less | 6 +- .../app/styles/theme/bootstrap-ambari.css | 3 +- ambari-web/app/templates/main/alerts.hbs | 3 +- .../main/alerts/alert_definitions_actions.hbs | 2 +- ambari-web/app/templates/main/dashboard.hbs | 2 +- .../templates/main/dashboard/config_history.hbs | 2 +- ambari-web/app/templates/main/host.hbs | 2 +- .../templates/main/host/bulk_operation_menu.hbs | 132 ++++++++++--------- .../views/main/host/hosts_table_menu_view.js | 4 +- .../app/views/main/host/stack_versions_view.js | 2 +- .../test/models/alerts/alert_group_test.js | 5 +- 13 files changed, 93 insertions(+), 77 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/8f53bc45/ambari-web/app/models/alerts/alert_group.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/models/alerts/alert_group.js b/ambari-web/app/models/alerts/alert_group.js index 49a850f..3277fc8 100644 --- a/ambari-web/app/models/alerts/alert_group.js +++ b/ambari-web/app/models/alerts/alert_group.js @@ -55,7 +55,7 @@ App.AlertGroup = DS.Model.extend({ * @type {string} */ displayName: function () { - var name = App.config.truncateGroupName(this.get('name')); + var name = App.config.truncateGroupName(App.format.role(this.get('name'), true)); return this.get('default') ? name + ' Default' : name; }.property('name', 'default'), http://git-wip-us.apache.org/repos/asf/ambari/blob/8f53bc45/ambari-web/app/styles/application.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/application.less b/ambari-web/app/styles/application.less index 7c9cc8e..099f3cf 100644 --- a/ambari-web/app/styles/application.less +++ b/ambari-web/app/styles/application.less @@ -2802,4 +2802,9 @@ a.abort-icon:hover { .breadcrumbs-forward-slash { display: inline; color: #D2D3D5; +} + +.container-wrap-table { + padding: 0 10px; + background-color: @diff-background-equal; } \ No newline at end of file http://git-wip-us.apache.org/repos/asf/ambari/blob/8f53bc45/ambari-web/app/styles/dashboard.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/dashboard.less b/ambari-web/app/styles/dashboard.less index 02835bd..6deb30c 100644 --- a/ambari-web/app/styles/dashboard.less +++ b/ambari-web/app/styles/dashboard.less @@ -18,14 +18,12 @@ @import 'common.less'; -#dashboard-widgets-container{ - .tabs-left { - float: left; - } +#dashboard-widgets-container { .btn-toolbar { float: right; padding-top: 5px; margin-bottom: 20px; + margin-top: -60px; } .dashboard-widgets-box { clear: both; http://git-wip-us.apache.org/repos/asf/ambari/blob/8f53bc45/ambari-web/app/styles/theme/bootstrap-ambari.css ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/theme/bootstrap-ambari.css b/ambari-web/app/styles/theme/bootstrap-ambari.css index 70579e7..cff73ad 100644 --- a/ambari-web/app/styles/theme/bootstrap-ambari.css +++ b/ambari-web/app/styles/theme/bootstrap-ambari.css @@ -479,11 +479,12 @@ h2.table-title { } .nav.nav-tabs li a .badge.badge-important { display: inline; + vertical-align: baseline; } .nav.nav-tabs li.active a { color: #333; border-bottom: 3px solid #3FAE2A; - padding-bottom: 1px; + padding-bottom: 2px; } .nav-tabs-left li, .nav-tabs-right li { http://git-wip-us.apache.org/repos/asf/ambari/blob/8f53bc45/ambari-web/app/templates/main/alerts.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/alerts.hbs b/ambari-web/app/templates/main/alerts.hbs index 40469d3..0f85e27 100644 --- a/ambari-web/app/templates/main/alerts.hbs +++ b/ambari-web/app/templates/main/alerts.hbs @@ -16,7 +16,7 @@ * limitations under the License. }} -<div id="alerts"> +<div id="alerts" class="container-wrap-table"> <div class="row"> <h2 class="table-title col-sm-1">{{t menu.item.alerts}}</h2> <div class="table-controls row col-sm-11 pull-right"> @@ -56,7 +56,6 @@ {{view App.AlertDefinitionSummary contentBinding="alertDefinition"}} </td> <td class="alert-name"> - <span {{bindAttr title="alertDefinition.type"}} {{bindAttr class=":type-icon alertDefinition.typeIconClass"}}></span> <a href="#" {{action "gotoAlertDetails" alertDefinition}}>{{alertDefinition.label}}</a> </td> <td class="alert-service">{{alertDefinition.serviceDisplayName}}</td> http://git-wip-us.apache.org/repos/asf/ambari/blob/8f53bc45/ambari-web/app/templates/main/alerts/alert_definitions_actions.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/alerts/alert_definitions_actions.hbs b/ambari-web/app/templates/main/alerts/alert_definitions_actions.hbs index 0604ac2..f65b000 100644 --- a/ambari-web/app/templates/main/alerts/alert_definitions_actions.hbs +++ b/ambari-web/app/templates/main/alerts/alert_definitions_actions.hbs @@ -16,7 +16,7 @@ * limitations under the License. }} -<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">{{t common.actions}} <span class="caret"></span></button> +<button class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="#">{{t common.actions}} <span class="caret"></span></button> <ul class="dropdown-menu pull-left"> {{#each action in controller}} <li> http://git-wip-us.apache.org/repos/asf/ambari/blob/8f53bc45/ambari-web/app/templates/main/dashboard.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/dashboard.hbs b/ambari-web/app/templates/main/dashboard.hbs index 0226626..4b174cc 100644 --- a/ambari-web/app/templates/main/dashboard.hbs +++ b/ambari-web/app/templates/main/dashboard.hbs @@ -18,7 +18,7 @@ <div class="row"> <div class="summary-width col-md-12" id="dashboard-widgets-container"> - <ul class="nav nav-tabs background-text tabs-left"> + <ul class="nav nav-tabs background-text"> {{#each category in view.categories}} {{#view view.NavItemView itemBinding="category.name" }} <a href="#" {{action "goToDashboardView" category.url}} >{{category.label}}</a> http://git-wip-us.apache.org/repos/asf/ambari/blob/8f53bc45/ambari-web/app/templates/main/dashboard/config_history.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/dashboard/config_history.hbs b/ambari-web/app/templates/main/dashboard/config_history.hbs index 00f9c38..bc6ef7c 100644 --- a/ambari-web/app/templates/main/dashboard/config_history.hbs +++ b/ambari-web/app/templates/main/dashboard/config_history.hbs @@ -16,7 +16,7 @@ * limitations under the License. }} -<div id="config_history"> +<div id="config_history" class="container-wrap-table"> <div class="row"> <h2 class="table-title col-md-12">{{t dashboard.configHistory.title}}</h2> </div> http://git-wip-us.apache.org/repos/asf/ambari/blob/8f53bc45/ambari-web/app/templates/main/host.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/host.hbs b/ambari-web/app/templates/main/host.hbs index ae37a0f..b373c40 100644 --- a/ambari-web/app/templates/main/host.hbs +++ b/ambari-web/app/templates/main/host.hbs @@ -16,7 +16,7 @@ * limitations under the License. }} -<div id="hosts"> +<div id="hosts" class="container-wrap-table"> <div class="row"> <h2 class="table-title col-sm-1">{{t common.hosts}}</h2> http://git-wip-us.apache.org/repos/asf/ambari/blob/8f53bc45/ambari-web/app/templates/main/host/bulk_operation_menu.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/host/bulk_operation_menu.hbs b/ambari-web/app/templates/main/host/bulk_operation_menu.hbs index 64ab4e9..89551ca 100644 --- a/ambari-web/app/templates/main/host/bulk_operation_menu.hbs +++ b/ambari-web/app/templates/main/host/bulk_operation_menu.hbs @@ -16,7 +16,7 @@ * limitations under the License. }} -<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">{{t common.actions}} <span class="caret"></span></button> +<button class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="#">{{t common.actions}} <span class="caret"></span></button> <ul class="dropdown-menu"> {{#isAuthorized "HOST.ADD_DELETE_HOSTS"}} <li><a href="#" {{action addHost}}><i class="glyphicon glyphicon-plus glyphicon-white"></i> {{t hosts.host.add}}</a></li> @@ -29,32 +29,36 @@ <ul {{bindAttr class="view.parentView.showSelectedFilter::hidden :dropdown-menu"}}> {{#view view.hostItemView}} <a href="javascript:void(null);">{{view.label}}</a> - <ul class="dropdown-menu"> - {{#each operation in view.operationsInfo}} - {{#if operation.label.length}} - {{#view view.operationView contentBinding="operation.operationData" selection="s"}} - <a href="javascript:void(null);">{{operation.label}}</a> - {{/view}} - {{/if}} - {{/each}} - </ul> - {{/view}} - {{#each component in view.components}} - {{#view view.slaveItemView contentBinding="component"}} - <a href="javascript:void(null);">{{component.componentNameFormatted}}</a> + <div class="dropdown-menu-wrap"> <ul class="dropdown-menu"> {{#each operation in view.operationsInfo}} - {{#if operation.decommission}} - {{#view view.advancedOperationView contentBinding="operation.operationData" selection="s"}} - <a href="javascript:void(null);">{{operation.label}}</a> - {{/view}} - {{else}} - {{#view view.commonOperationView contentBinding="operation.operationData" selection="s"}} + {{#if operation.label.length}} + {{#view view.operationView contentBinding="operation.operationData" selection="s"}} <a href="javascript:void(null);">{{operation.label}}</a> {{/view}} {{/if}} {{/each}} </ul> + </div> + {{/view}} + {{#each component in view.components}} + {{#view view.slaveItemView contentBinding="component"}} + <a href="javascript:void(null);">{{component.componentNameFormatted}}</a> + <div class="dropdown-menu-wrap"> + <ul class="dropdown-menu"> + {{#each operation in view.operationsInfo}} + {{#if operation.decommission}} + {{#view view.advancedOperationView contentBinding="operation.operationData" selection="s"}} + <a href="javascript:void(null);">{{operation.label}}</a> + {{/view}} + {{else}} + {{#view view.commonOperationView contentBinding="operation.operationData" selection="s"}} + <a href="javascript:void(null);">{{operation.label}}</a> + {{/view}} + {{/if}} + {{/each}} + </ul> + </div> {{/view}} {{/each}} </ul> @@ -67,32 +71,36 @@ <ul {{bindAttr class="view.parentView.hasFilteredItems::hidden :dropdown-menu"}}> {{#view view.hostItemView}} <a href="javascript:void(null);">{{view.label}}</a> - <ul class="dropdown-menu"> - {{#each operation in view.operationsInfo}} - {{#if operation.label.length}} - {{#view view.operationView contentBinding="operation.operationData" selection="f"}} - <a href="javascript:void(null);">{{operation.label}}</a> - {{/view}} - {{/if}} - {{/each}} - </ul> - {{/view}} - {{#each component in view.components}} - {{#view view.slaveItemView contentBinding="component"}} - <a href="javascript:void(null);">{{component.componentNameFormatted}}</a> + <div class="dropdown-menu-wrap"> <ul class="dropdown-menu"> {{#each operation in view.operationsInfo}} - {{#if operation.decommission}} - {{#view view.advancedOperationView contentBinding="operation.operationData" selection="f"}} - <a href="javascript:void(null);">{{operation.label}}</a> - {{/view}} - {{else}} - {{#view view.commonOperationView contentBinding="operation.operationData" selection="f"}} + {{#if operation.label.length}} + {{#view view.operationView contentBinding="operation.operationData" selection="f"}} <a href="javascript:void(null);">{{operation.label}}</a> {{/view}} {{/if}} {{/each}} </ul> + </div> + {{/view}} + {{#each component in view.components}} + {{#view view.slaveItemView contentBinding="component"}} + <a href="javascript:void(null);">{{component.componentNameFormatted}}</a> + <div class="dropdown-menu-wrap"> + <ul class="dropdown-menu"> + {{#each operation in view.operationsInfo}} + {{#if operation.decommission}} + {{#view view.advancedOperationView contentBinding="operation.operationData" selection="f"}} + <a href="javascript:void(null);">{{operation.label}}</a> + {{/view}} + {{else}} + {{#view view.commonOperationView contentBinding="operation.operationData" selection="f"}} + <a href="javascript:void(null);">{{operation.label}}</a> + {{/view}} + {{/if}} + {{/each}} + </ul> + </div> {{/view}} {{/each}} </ul> @@ -105,34 +113,38 @@ <ul class="dropdown-menu"> {{#view view.hostItemView}} <a href="javascript:void(null);">{{view.label}}</a> - <ul class="dropdown-menu"> - {{#each operation in view.operationsInfo}} - {{#if operation.label.length}} - {{#view view.operationView contentBinding="operation.operationData" selection="a"}} - <a href="javascript:void(null);">{{operation.label}}</a> - {{/view}} - {{/if}} - {{/each}} - </ul> - {{/view}} - {{#each component in view.components}} - {{#view view.slaveItemView contentBinding="component"}} - <a href="javascript:void(null);">{{component.componentNameFormatted}}</a> + <div class="dropdown-menu-wrap"> <ul class="dropdown-menu"> {{#each operation in view.operationsInfo}} - {{#if operation.decommission}} - {{#view view.advancedOperationView contentBinding="operation.operationData" selection="a"}} + {{#if operation.label.length}} + {{#view view.operationView contentBinding="operation.operationData" selection="a"}} <a href="javascript:void(null);">{{operation.label}}</a> {{/view}} - {{else}} - {{#unless operation.delete}} - {{#view view.commonOperationView contentBinding="operation.operationData" selection="a"}} - <a href="javascript:void(null);">{{operation.label}}</a> - {{/view}} - {{/unless}} {{/if}} {{/each}} </ul> + </div> + {{/view}} + {{#each component in view.components}} + {{#view view.slaveItemView contentBinding="component"}} + <a href="javascript:void(null);">{{component.componentNameFormatted}}</a> + <div class="dropdown-menu-wrap"> + <ul class="dropdown-menu"> + {{#each operation in view.operationsInfo}} + {{#if operation.decommission}} + {{#view view.advancedOperationView contentBinding="operation.operationData" selection="a"}} + <a href="javascript:void(null);">{{operation.label}}</a> + {{/view}} + {{else}} + {{#unless operation.delete}} + {{#view view.commonOperationView contentBinding="operation.operationData" selection="a"}} + <a href="javascript:void(null);">{{operation.label}}</a> + {{/view}} + {{/unless}} + {{/if}} + {{/each}} + </ul> + </div> {{/view}} {{/each}} </ul> http://git-wip-us.apache.org/repos/asf/ambari/blob/8f53bc45/ambari-web/app/views/main/host/hosts_table_menu_view.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/main/host/hosts_table_menu_view.js b/ambari-web/app/views/main/host/hosts_table_menu_view.js index 25b4052..08fd0d4 100644 --- a/ambari-web/app/views/main/host/hosts_table_menu_view.js +++ b/ambari-web/app/views/main/host/hosts_table_menu_view.js @@ -70,7 +70,7 @@ App.HostTableMenuView = Em.View.extend({ slaveItemView: Em.View.extend({ tagName: 'li', - classNames: ['dropdown-submenu'], + classNames: ['dropdown-submenu', 'submenu-left'], /** * Get third-level menu items ingo for slave components @@ -240,7 +240,7 @@ App.HostTableMenuView = Em.View.extend({ hostItemView: Em.View.extend({ tagName: 'li', - classNames: ['dropdown-submenu'], + classNames: ['dropdown-submenu', 'submenu-left'], label: Em.I18n.t('common.hosts'), http://git-wip-us.apache.org/repos/asf/ambari/blob/8f53bc45/ambari-web/app/views/main/host/stack_versions_view.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/main/host/stack_versions_view.js b/ambari-web/app/views/main/host/stack_versions_view.js index cebe8c7..62a88b4 100644 --- a/ambari-web/app/views/main/host/stack_versions_view.js +++ b/ambari-web/app/views/main/host/stack_versions_view.js @@ -22,7 +22,7 @@ var sort = require('views/common/sort_view'); App.MainHostStackVersionsView = App.TableView.extend({ templateName: require('templates/main/host/stack_versions'), - classNames: ['host-tab-content'], + classNames: ['host-tab-content', 'container-wrap-table'], /** * @type {Ember.Object} http://git-wip-us.apache.org/repos/asf/ambari/blob/8f53bc45/ambari-web/test/models/alerts/alert_group_test.js ---------------------------------------------------------------------- diff --git a/ambari-web/test/models/alerts/alert_group_test.js b/ambari-web/test/models/alerts/alert_group_test.js index 6f64b7a..34237d2 100644 --- a/ambari-web/test/models/alerts/alert_group_test.js +++ b/ambari-web/test/models/alerts/alert_group_test.js @@ -35,8 +35,9 @@ describe('App.AlertGroup', function() { describe('#displayName', function () { [ - {name: 'abc', default: true, e: 'abc Default'}, - {name: 'abc', default: false, e: 'abc'}, + {name: 'abc', default: true, e: 'Abc Default'}, + {name: 'abc', default: false, e: 'Abc'}, + {name: 'ABC', default: false, e: 'Abc'}, {name: '12345678901234567890', default: true, e: '123456789...234567890 Default'}, {name: '12345678901234567890', default: false, e: '123456789...234567890'}, ].forEach(function (test) {