You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ambari.apache.org by yu...@apache.org on 2012/09/27 06:59:29 UTC
svn commit: r1390840 - in /incubator/ambari/branches/AMBARI-666: ./
ambari-web/app/ ambari-web/app/styles/ ambari-web/app/templates/
ambari-web/app/templates/installer/ ambari-web/app/views/main/
Author: yusaku
Date: Thu Sep 27 04:59:28 2012
New Revision: 1390840
URL: http://svn.apache.org/viewvc?rev=1390840&view=rev
Log:
AMBARI-772. Stylize main nav. (yusaku)
Modified:
incubator/ambari/branches/AMBARI-666/AMBARI-666-CHANGES.txt
incubator/ambari/branches/AMBARI-666/ambari-web/app/messages.js
incubator/ambari/branches/AMBARI-666/ambari-web/app/styles/app.css
incubator/ambari/branches/AMBARI-666/ambari-web/app/styles/application.less
incubator/ambari/branches/AMBARI-666/ambari-web/app/templates/application.hbs
incubator/ambari/branches/AMBARI-666/ambari-web/app/templates/installer.hbs
incubator/ambari/branches/AMBARI-666/ambari-web/app/templates/installer/step1.hbs
incubator/ambari/branches/AMBARI-666/ambari-web/app/templates/main.hbs
incubator/ambari/branches/AMBARI-666/ambari-web/app/views/main/menu.js
Modified: incubator/ambari/branches/AMBARI-666/AMBARI-666-CHANGES.txt
URL: http://svn.apache.org/viewvc/incubator/ambari/branches/AMBARI-666/AMBARI-666-CHANGES.txt?rev=1390840&r1=1390839&r2=1390840&view=diff
==============================================================================
--- incubator/ambari/branches/AMBARI-666/AMBARI-666-CHANGES.txt (original)
+++ incubator/ambari/branches/AMBARI-666/AMBARI-666-CHANGES.txt Thu Sep 27 04:59:28 2012
@@ -12,6 +12,8 @@ AMBARI-666 branch (unreleased changes)
NEW FEATURES
+ AMBARI-772. Stylize main nav. (yusaku)
+
AMBARI-771. Add security between the server and agent and authentication for
the API. (mahadev)
Modified: incubator/ambari/branches/AMBARI-666/ambari-web/app/messages.js
URL: http://svn.apache.org/viewvc/incubator/ambari/branches/AMBARI-666/ambari-web/app/messages.js?rev=1390840&r1=1390839&r2=1390840&view=diff
==============================================================================
--- incubator/ambari/branches/AMBARI-666/ambari-web/app/messages.js (original)
+++ incubator/ambari/branches/AMBARI-666/ambari-web/app/messages.js Thu Sep 27 04:59:28 2012
@@ -39,8 +39,10 @@ Em.I18n.translations = {
'topnav.help.href': 'http://incubator.apache.org/ambari/install.html',
- 'installer.step1.header': 'Ambari Cluster Install Wizard',
- 'installer.step1.body': 'Welcome to Apache Ambari!<br>' +
+ 'installer.header': 'Cluster Install Wizard',
+ 'installer.step1.header': 'Welcome',
+ 'installer.step1.body.header': 'Welcome to Apache Ambari!',
+ 'installer.step1.body':
'Ambari makes it easy to install, manage, and monitor Hadoop clusters.<br>' +
'We will walk you through the cluster installation process with this step-by-step wizard.',
'installer.step1.clusterName': 'Name your cluster',
Modified: incubator/ambari/branches/AMBARI-666/ambari-web/app/styles/app.css
URL: http://svn.apache.org/viewvc/incubator/ambari/branches/AMBARI-666/ambari-web/app/styles/app.css?rev=1390840&r1=1390839&r2=1390840&view=diff
==============================================================================
--- incubator/ambari/branches/AMBARI-666/ambari-web/app/styles/app.css (original)
+++ incubator/ambari/branches/AMBARI-666/ambari-web/app/styles/app.css Thu Sep 27 04:59:28 2012
@@ -16,76 +16,6 @@
* limitations under the License.
*/
-
-.navbar {
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-}
-
-.navbar .brand {
- color: #666666;
- display: block;
- font-size: 16px;
- font-weight: normal;
- line-height: 1;
- margin-left: 0;
- margin-right: 40px;
- margin-top: 3px;
- padding: 14px 10px;
-}
-
-.navbar-inner {
- background: linear-gradient(#FAFAFA, #EAEAEA) repeat scroll 0 0 transparent;
- background: -moz-linear-gradient(#FAFAFA, #EAEAEA) repeat scroll 0 0 transparent;
- background: -webkit-linear-gradient(#FAFAFA, #EAEAEA) repeat scroll 0 0 transparent;
- border-radius: 0;
- border: 1px solid #bbb;
- border-width: 0 0 1px 0;
-}
-
-.navbar .nav {
- float: none;
- overflow: hidden;
-}
-
-.navbar .nav .active > a, .navbar .nav .active > a:hover {
- background-color: #999999;
- color: #FFFFFF;
- text-decoration: none;
-}
-
-.navbar .nav > li > a {
- border-radius: 8px;
- -webkit-border-radius: 8px;
- -moz-border-radius: 8px;
- font-size: 13px;
- font-weight: bold;
- line-height: 19px;
- margin: 6px 10px 6px 0;
- padding: 8px 14px;
- text-decoration: none;
- text-shadow: none;
-}
-
-.navbar .nav > li > a:hover {
- background-color: transparent;
- color: #999999;
- text-decoration: none;
-}
-
-.navbar .brand {
- margin-right: 40px;
-}
-
-.navbar #logo {
- float: left;
- padding-top: 7px;
- height: 36px;
-}
-
-.navbar .nav > li.right {
- float: right;
-}
-
/*Box styles*/
.box {
border: 1px solid #5fa3c3;
Modified: incubator/ambari/branches/AMBARI-666/ambari-web/app/styles/application.less
URL: http://svn.apache.org/viewvc/incubator/ambari/branches/AMBARI-666/ambari-web/app/styles/application.less?rev=1390840&r1=1390839&r2=1390840&view=diff
==============================================================================
--- incubator/ambari/branches/AMBARI-666/ambari-web/app/styles/application.less (original)
+++ incubator/ambari/branches/AMBARI-666/ambari-web/app/styles/application.less Thu Sep 27 04:59:28 2012
@@ -17,32 +17,122 @@
*/
html, body {
- height: 100%;
+ height: 100%;
}
#wrapper {
- min-height: 100%;
+ min-height: 100%;
}
@footer-height: 100px;
#main {
- overflow: auto;
- padding-bottom: @footer-height;
+ overflow: auto;
+ padding-bottom: @footer-height;
}
footer {
- position: relative;
- border-top: 1px solid #e5e5e5;
- padding: 30px 0;
- background-color: #fff;
- color: #666666;
- margin-top: -1 * @footer-height;
- height: @footer-height - 60px;
+ position: relative;
+ border-top: 1px solid #e5e5e5;
+ padding: 30px 0;
+ background-color: #fff;
+ color: #666666;
+ margin-top: -1 * @footer-height;
+ height: @footer-height - 60px;
}
#content {
- padding: 40px 0;
+ padding: 40px 0;
+}
+
+#top-nav {
+ .navbar {
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ }
+
+ .navbar .brand {
+ color: #666666;
+ display: block;
+ font-size: 16px;
+ font-weight: normal;
+ line-height: 1;
+ margin-left: 0;
+ margin-right: 40px;
+ margin-top: 3px;
+ padding: 14px 10px;
+ }
+/*
+ .navbar-inner {
+ background: linear-gradient(#FAFAFA, #EAEAEA) repeat scroll 0 0 transparent;
+ background: -moz-linear-gradient(#FAFAFA, #EAEAEA) repeat scroll 0 0 transparent;
+ background: -webkit-linear-gradient(#FAFAFA, #EAEAEA) repeat scroll 0 0 transparent;
+ border-radius: 0;
+ border: 1px solid #bbb;
+ border-width: 0 0 1px 0;
+ }
+*/
+ .navbar .nav {
+ float: none;
+ overflow: hidden;
+ }
+
+ .navbar .nav .active > a, .navbar .nav .active > a:hover {
+ /*background-color: #999999;*/
+ color: #FFFFFF;
+ text-decoration: none;
+ }
+
+ .navbar .nav > li > a {
+ border-radius: 8px;
+ -webkit-border-radius: 8px;
+ -moz-border-radius: 8px;
+ font-size: 13px;
+ font-weight: bold;
+ line-height: 19px;
+ margin: 6px 10px 6px 0;
+ padding: 8px 14px;
+ text-decoration: none;
+ text-shadow: none;
+ }
+
+ .navbar .nav > li > a:hover {
+ background-color: transparent;
+ color: #999999;
+ text-decoration: none;
+ }
+
+ .navbar .brand {
+ margin-right: 40px;
+ }
+
+ .navbar #logo {
+ float: left;
+ padding-top: 7px;
+ height: 36px;
+ }
+
+ .navbar .nav > li.right {
+ float: right;
+ }
+}
+
+#main-nav {
+ .brand {
+ font-size: 17px;
+ border-right: 1px solid rgba(0, 0, 0, 0.08);
+ }
+ li {
+ font-size: 15px;
+ border-left: 1px solid #fefefe;
+ border-right: 1px solid #f0f0f0;
+ text-align: center;
+ }
+ li.span2 {
+ padding: 0;
+ margin: 0;
+ }
+
+ margin-bottom:40px;
}
@green: #69BE28;
@@ -52,82 +142,86 @@ h1 {
}
.login.well.span4 {
- margin: 20px auto;
- padding: 25px;
- float: none;
+ margin: 20px auto;
+ padding: 25px;
+ float: none;
}
.login {
- h2 {
- margin-top: 0;
- margin-bottom: 20px;
- }
- .btn {
- margin-top: 15px;
- }
+ h2 {
+ margin-top: 0;
+ margin-bottom: 20px;
+ }
+ .btn {
+ margin-top: 15px;
+ }
}
#installer {
- h2 {
- margin-top: 0;
+ h2 {
+ margin-top: 0;
+ }
+ .btn.btn-success {
+ /* float: right; */
+ }
+ .btn-area {
+ margin-top: 20px;
+ }
+ #installer-content {
+ padding: 25px;
+ background-color: #fff;
+
+ }
+ .nav-header {
+ font-size: 13px;
+ padding-left: 0;
+ }
+ #step4, #step6 {
+ a.selected {
+ color: #333;
+ }
+ a.deselected {
}
- .btn.btn-success {
- /* float: right; */
+ }
+ #serviceConfig {
+ .accordion-heading {
+ background-color: #f0f0f0;
}
- .btn-area {
- margin-top: 20px;
+ .accordion-group {
+ margin-bottom: 20px;
+ .control-group {
+ margin: 10px 0;
+ }
+ form {
+ margin-bottom: 0;
+ }
}
- #installer-content {
- padding: 25px;
- background-color: #fff;
-
+ .badge {
+ margin-left: 4px;
+ }
+ .add-slave-component-group {
+ margin-bottom: 20px;
+ }
+ .master-host, .master-hosts, .slave-hosts {
+ padding-top: 5px;
+ line-height: 20px;
}
- #step4, #step6 {
- a.selected {
- color: #333;
- }
- a.deselected {
- }
+ #attention {
+ margin: 20px 0;
}
- #serviceConfig {
- .accordion-heading {
- background-color: #f0f0f0;
- }
- .accordion-group {
- margin-bottom: 20px;
- .control-group {
- margin: 10px 0;
- }
- form {
- margin-bottom: 0;
- }
- }
- .badge {
- margin-left: 4px;
- }
- .add-slave-component-group {
- margin-bottom: 20px;
- }
- .master-host, .master-hosts, .slave-hosts {
- padding-top: 5px;
- line-height: 20px;
- }
- #attention {
- margin: 20px 0;
- }
- .retyped-password {
- margin-left: 14px;
- }
- #slave-hosts-popup {
- ul {
- list-style-type: none;
- }
- }
+ .retyped-password {
+ margin-left: 14px;
}
+ #slave-hosts-popup {
+ ul {
+ list-style-type: none;
+ }
+ }
+ }
}
a:focus {
- outline: none;
+ outline: none;
}
@status-live-marker: url("../img/health-status-live.png");
@@ -153,7 +247,6 @@ a:focus {
}
}
-
/*Services*/
.nav-tabs {
.tab-marker-position {
@@ -171,10 +264,12 @@ a:focus {
background-image: @status-dead-marker;
}
}
+
.nav-pills.move {
float: right;
margin-top: -48px;
}
+
/*End Services*/
/*Hosts*/
@@ -186,64 +281,66 @@ a:focus {
background-image: @status-dead-marker;
}
}
+
#host-details {
.health-status-LIVE {
background-image: @status-live-marker;
- background-repeat:no-repeat;
+ background-repeat: no-repeat;
background-position: 0px 4px;
}
.health-status-DEAD {
background-image: @status-dead-marker;
- background-repeat:no-repeat;
+ background-repeat: no-repeat;
background-position: 0px 4px;
}
}
+
/*End Hosts*/
/*assign masters*/
.assign-masters {
- .select-hosts{
- width:50%;
- float:left;
- white-space:nowrap;
+ .select-hosts {
+ width: 50%;
+ float: left;
+ white-space: nowrap;
}
- .round-corners{
+ .round-corners {
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
}
- .host-assignments{
- float:right;
- width:45%;
+ .host-assignments {
+ float: right;
+ width: 45%;
}
- .remaining-hosts{
- padding:25px;
- border-top:solid 1px #cccccc;
- border-left:solid 1px #cccccc;
- border-right:groove 5px #cccccc;
- border-bottom:groove 5px #cccccc;
- margin-top:20px;
+ .remaining-hosts {
+ padding: 25px;
+ border-top: solid 1px #cccccc;
+ border-left: solid 1px #cccccc;
+ border-right: groove 5px #cccccc;
+ border-bottom: groove 5px #cccccc;
+ margin-top: 20px;
background-color: #FCF8E3;
color: #C09853;
}
- .host-assignments .mapping-box{
- border:solid 1px #cccccc;
+ .host-assignments .mapping-box {
+ border: solid 1px #cccccc;
padding: 8px;
- margin-bottom:10px;
+ margin-bottom: 10px;
background-color: #FFFAFA;
}
- .host-assignments .assignedService{
- padding:5px;
- border:solid 1px #cccccc;
- margin:2px;
+ .host-assignments .assignedService {
+ padding: 5px;
+ border: solid 1px #cccccc;
+ margin: 2px;
background-color: #69BE28;
- color:white;
+ color: white;
white-space: nowrap;
font-size: 0.9em;
}
@@ -253,20 +350,20 @@ a:focus {
}
.form-horizontal .control-label {
- width:100px;
+ width: 100px;
}
.form-horizontal .control-group select {
- width:75%;
- min-width:100px;
- max-width:250px;
+ width: 75%;
+ min-width: 100px;
+ max-width: 250px;
}
- .hostString{
+ .hostString {
margin-bottom: 5px;
}
- .controls .badge{
+ .controls .badge {
background-color: #ADC299;
color: #ffffff;
cursor: pointer;
@@ -274,11 +371,11 @@ a:focus {
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
- .assign-master .controls .badge:hover{
+ .assign-master .controls .badge:hover {
background-color: #99B280;
}
- .alertFlag{
+ .alertFlag {
font-size: 1.3em;
color: #B94A48;
font-weight: bold;
Modified: incubator/ambari/branches/AMBARI-666/ambari-web/app/templates/application.hbs
URL: http://svn.apache.org/viewvc/incubator/ambari/branches/AMBARI-666/ambari-web/app/templates/application.hbs?rev=1390840&r1=1390839&r2=1390840&view=diff
==============================================================================
--- incubator/ambari/branches/AMBARI-666/ambari-web/app/templates/application.hbs (original)
+++ incubator/ambari/branches/AMBARI-666/ambari-web/app/templates/application.hbs Thu Sep 27 04:59:28 2012
@@ -15,27 +15,30 @@
* See the License for the specific language governing permissions and
* limitations under the License.
-->
+
<div id="main">
+ <div id="top-nav">
<div class="navbar navbar-static-top">
- <div class="navbar-inner">
- <div class="container">
- <a {{action gotoStep1}}><img id="logo" src="/img/logo-small.gif"></a>
- <a class="brand" href="#">{{t app.name}}</a>
- <ul class="nav">
- <li class="right"><a class="help" {{translateAttr href="topnav.help.href"}} target="_blank">Help</a></li>
- {{#if App.router.loggedIn}}
- <li class="right"><a class="help" href="" {{action logoff}}>Sign out</a></li>
- {{/if}}
- <li class="right">{{loginName}}</li>
- </ul>
- </div>
+ <div class="navbar-inner">
+ <div class="container">
+ <a {{action gotoStep1}}><img id="logo" src="/img/logo-small.gif"></a>
+ <a class="brand" href="#">{{t app.name}}</a>
+ <ul class="nav">
+ <li class="right"><a class="help" {{translateAttr href="topnav.help.href"}} target="_blank">Help</a></li>
+ {{#if App.router.loggedIn}}
+ <li class="right"><a class="help" href="" {{action logoff}}>Sign out</a></li>
+ {{/if}}
+ <li class="right">{{loginName}}</li>
+ </ul>
</div>
+ </div>
</div>
- <div class="container">
- <div id="content">
- {{outlet}}
- </div>
+ </div>
+ <div class="container">
+ <div id="content">
+ {{outlet}}
</div>
+ </div>
</div>
Modified: incubator/ambari/branches/AMBARI-666/ambari-web/app/templates/installer.hbs
URL: http://svn.apache.org/viewvc/incubator/ambari/branches/AMBARI-666/ambari-web/app/templates/installer.hbs?rev=1390840&r1=1390839&r2=1390840&view=diff
==============================================================================
--- incubator/ambari/branches/AMBARI-666/ambari-web/app/templates/installer.hbs (original)
+++ incubator/ambari/branches/AMBARI-666/ambari-web/app/templates/installer.hbs Thu Sep 27 04:59:28 2012
@@ -24,6 +24,7 @@
<!--Sidebar content-->
<div class="well">
<ul class="nav nav-pills nav-stacked">
+ <li class="nav-header">{{t installer.header}}</li>
<li {{bindAttr class="isStep1:active"}}><a {{action gotoStep1}}>{{t installer.step1.header}}</a></li>
<li {{bindAttr class="isStep2:active"}}><a {{action gotoStep2}}>{{t installer.step2.header}}</a></li>
<li {{bindAttr class="isStep3:active"}}><a {{action gotoStep3}}>{{t installer.step3.header}}</a></li>
Modified: incubator/ambari/branches/AMBARI-666/ambari-web/app/templates/installer/step1.hbs
URL: http://svn.apache.org/viewvc/incubator/ambari/branches/AMBARI-666/ambari-web/app/templates/installer/step1.hbs?rev=1390840&r1=1390839&r2=1390840&view=diff
==============================================================================
--- incubator/ambari/branches/AMBARI-666/ambari-web/app/templates/installer/step1.hbs (original)
+++ incubator/ambari/branches/AMBARI-666/ambari-web/app/templates/installer/step1.hbs Thu Sep 27 04:59:28 2012
@@ -16,9 +16,10 @@
* limitations under the License.
-->
-
-<h2>{{t installer.step1.header}}</h2>
-<p class="alert alert-info">{{t installer.step1.body}}</p>
+<h2>{{t installer.step1.body.header}}</h2>
+<p class="alert alert-info">
+ {{t installer.step1.body}}
+</p>
<div {{bindAttr class="invalidClusterName:error :control-group"}}>
<label class="control-label" for="cluster-name">{{t installer.step1.clusterName}}
<a href="javascript:void(null)"
Modified: incubator/ambari/branches/AMBARI-666/ambari-web/app/templates/main.hbs
URL: http://svn.apache.org/viewvc/incubator/ambari/branches/AMBARI-666/ambari-web/app/templates/main.hbs?rev=1390840&r1=1390839&r2=1390840&view=diff
==============================================================================
--- incubator/ambari/branches/AMBARI-666/ambari-web/app/templates/main.hbs (original)
+++ incubator/ambari/branches/AMBARI-666/ambari-web/app/templates/main.hbs Thu Sep 27 04:59:28 2012
@@ -15,8 +15,12 @@
* See the License for the specific language governing permissions and
* limitations under the License.
-->
-
- <!--Monitoring and managing services -->
-<h2>Main Application</h2>
-{{view App.MainMenuView }}
+<div id="main-nav">
+ <div class="navbar">
+ <div class="navbar-inner">
+ <a class="brand" href="#">My Cluster</a>
+ {{view App.MainMenuView}}
+ </div>
+ </div>
+</div>
{{outlet}}
\ No newline at end of file
Modified: incubator/ambari/branches/AMBARI-666/ambari-web/app/views/main/menu.js
URL: http://svn.apache.org/viewvc/incubator/ambari/branches/AMBARI-666/ambari-web/app/views/main/menu.js?rev=1390840&r1=1390839&r2=1390840&view=diff
==============================================================================
--- incubator/ambari/branches/AMBARI-666/ambari-web/app/views/main/menu.js (original)
+++ incubator/ambari/branches/AMBARI-666/ambari-web/app/views/main/menu.js Thu Sep 27 04:59:28 2012
@@ -24,10 +24,9 @@ var App = require('app');
*/
App.MainMenuView = Em.CollectionView.extend({
tagName: 'ul',
- classNames: ["nav", "nav-tabs"],
+ classNames: ['nav'],
content:[
- { label:'My Cluster', routing:'cluster'},
- { label:'Dashboard', routing:'dashboard', active:"active"},
+ { label:'Dashboard', routing:'dashboard', active:'active'},
{ label:'Charts', routing:'charts'},
{ label:'Services', routing:'services'},
{ label:'Hosts', routing:'hosts'},
@@ -41,13 +40,16 @@ App.MainMenuView = Em.CollectionView.ext
},
itemViewClass: Em.View.extend({
- classNameBindings: ["active"],
- active: "",
+
+ classNameBindings: ['active', ':span2'],
+ active: '',
+
alertsCount: function() {
if(this.get('content').routing == 'dashboard'){
return App.router.get('mainDashboardController.alertsCount');
}
}.property(),
- template: Ember.Handlebars.compile('<a {{action navigate view.content}} href="#"> {{unbound view.content.label}}{{#if view.alertsCount}}<span class="label label-important alerts-count">{{view.alertsCount}}</span>{{/if}}</a>')
+
+ template: Ember.Handlebars.compile('<a {{action navigate view.content}} href="#">{{unbound view.content.label}}{{#if view.alertsCount}}<span class="label label-important alerts-count">{{view.alertsCount}}</span>{{/if}}</a>')
})
});
\ No newline at end of file