You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ambari.apache.org by vi...@apache.org on 2012/06/06 23:04:37 UTC
svn commit: r1347124 - in /incubator/ambari/branches/ambari-186: CHANGES.txt
hmc/css/bootstrap.css hmc/css/common.css hmc/css/common3.css
hmc/css/manageServices.css hmc/js/clustersList.js hmc/js/manageServices.js
hmc/js/utils.js
Author: vikram
Date: Wed Jun 6 21:04:36 2012
New Revision: 1347124
URL: http://svn.apache.org/viewvc?rev=1347124&view=rev
Log:
AMBARI-369. Improve Service Management page and general popup styling (Contributed by Yusaku)
Modified:
incubator/ambari/branches/ambari-186/CHANGES.txt
incubator/ambari/branches/ambari-186/hmc/css/bootstrap.css
incubator/ambari/branches/ambari-186/hmc/css/common.css
incubator/ambari/branches/ambari-186/hmc/css/common3.css
incubator/ambari/branches/ambari-186/hmc/css/manageServices.css
incubator/ambari/branches/ambari-186/hmc/js/clustersList.js
incubator/ambari/branches/ambari-186/hmc/js/manageServices.js
incubator/ambari/branches/ambari-186/hmc/js/utils.js
Modified: incubator/ambari/branches/ambari-186/CHANGES.txt
URL: http://svn.apache.org/viewvc/incubator/ambari/branches/ambari-186/CHANGES.txt?rev=1347124&r1=1347123&r2=1347124&view=diff
==============================================================================
--- incubator/ambari/branches/ambari-186/CHANGES.txt (original)
+++ incubator/ambari/branches/ambari-186/CHANGES.txt Wed Jun 6 21:04:36 2012
@@ -6,6 +6,8 @@ characters wide.
Release 0.1.x - unreleased
+ AMBARI-369. Improve Service Management page and general popup styling (Yusaku via Vikram)
+
AMBARI-367. Make users enter hive configs instead of using defaults (Hitesh via Vikram)
AMBARI-364. Retry puppet kick --ping on bootstrap to handle intermittent failures (Hitesh via Vikram)
Modified: incubator/ambari/branches/ambari-186/hmc/css/bootstrap.css
URL: http://svn.apache.org/viewvc/incubator/ambari/branches/ambari-186/hmc/css/bootstrap.css?rev=1347124&r1=1347123&r2=1347124&view=diff
==============================================================================
--- incubator/ambari/branches/ambari-186/hmc/css/bootstrap.css (original)
+++ incubator/ambari/branches/ambari-186/hmc/css/bootstrap.css Wed Jun 6 21:04:36 2012
@@ -4885,13 +4885,13 @@ button.close {
font-family: IconicStroke;
font-weight: normal;
src: url('../fonts/iconic_stroke.eot');
- src: local('IconicStroke'), url('iconic_stroke.eot?#iefix') format('../fonts/embedded-opentype'), url('../fonts/iconic_stroke.woff') format('woff'), url('../fonts/iconic_stroke.ttf') format('truetype'), url('iconic_stroke.svg#iconic') format('svg'), url('../fonts/iconic_stroke.otf') format('opentype');
+ src: local('IconicStroke'), url('iconic_stroke.eot?#iefix') format('../fonts/embedded-opentype'), url('../fonts/iconic_stroke.ttf') format('truetype'), url('iconic_stroke.svg#iconic') format('svg'), url('../fonts/iconic_stroke.otf') format('opentype');
}
@font-face {
font-family: IconicFill;
font-weight: normal;
src: url('../fonts/iconic_fill.eot');
- src: local('IconicFill'), url('../fonts/iconic_fill.eot?#iefix') format('embedded-opentype'), url('../fonts/iconic_fill.woff') format('woff'), url('../fonts/iconic_fill.ttf') format('truetype'), url('iconic_fill.svg#iconic') format('svg'), url('../fonts/iconic_fill.otf') format('opentype');
+ src: local('IconicFill'), url('../fonts/iconic_fill.eot?#iefix') format('embedded-opentype'), url('../fonts/iconic_fill.ttf') format('truetype'), url('iconic_fill.svg#iconic') format('svg'), url('../fonts/iconic_fill.otf') format('opentype');
}
@media screen, print {
[class*="iconic-"] {
Modified: incubator/ambari/branches/ambari-186/hmc/css/common.css
URL: http://svn.apache.org/viewvc/incubator/ambari/branches/ambari-186/hmc/css/common.css?rev=1347124&r1=1347123&r2=1347124&view=diff
==============================================================================
--- incubator/ambari/branches/ambari-186/hmc/css/common.css (original)
+++ incubator/ambari/branches/ambari-186/hmc/css/common.css Wed Jun 6 21:04:36 2012
@@ -215,6 +215,7 @@ td {
margin-left:10px;
width:300px;
display:inline-block;
+ font-size:12px;
visibility:hidden;
}
@@ -277,6 +278,7 @@ td {
div.formElement {
clear:both;
+ font-size:12px;
}
#configureClusterAdvancedCoreDivId label,
@@ -533,4 +535,4 @@ div.separator {
.navbar #logo {
float:left;
padding-top:7px;
-}
+}
\ No newline at end of file
Modified: incubator/ambari/branches/ambari-186/hmc/css/common3.css
URL: http://svn.apache.org/viewvc/incubator/ambari/branches/ambari-186/hmc/css/common3.css?rev=1347124&r1=1347123&r2=1347124&view=diff
==============================================================================
--- incubator/ambari/branches/ambari-186/hmc/css/common3.css (original)
+++ incubator/ambari/branches/ambari-186/hmc/css/common3.css Wed Jun 6 21:04:36 2012
@@ -231,26 +231,140 @@ span.installationWizardStageNumber {
* the Header and Footer fixed (and always visible).
*/
#informationalPanelContainerDivId .yui3-widget-bd {
- overflow: auto;
- background-color:#F0F0E8;
+ max-height:400px;
+ min-height:100px;
+ padding:15px;
+ overflow-x:hidden;
+ overflow-y:auto;
}
#informationalPanelContainerDivId .yui3-widget-hd {
- /* background-color:#B2B299; */
- background-color:#33CCFF;
+ background: #f0f0f0;
+ border-bottom: 1px solid #DDDDDD;
+ box-shadow: 0 1px 0 #FFFFFF inset;
+ border-radius:6px 6px 0 0;
+ padding: 9px 15px;
+ font-size: 18px;
+ line-height: 27px;
+ color:#333333;
+ font-weight:bold;
}
#informationalPanelContainerDivId .yui3-widget-ft {
- background-color:#F0F0E8;
+ background-color: #F5F5F5;
+ border-radius: 0 0 6px 6px;
+ border-top: 1px solid #DDDDDD;
+ box-shadow: 0 1px 0 #FFFFFF inset;
+ margin-bottom: 0;
+ padding: 14px 15px 15px;
+ text-align: right;
}
#informationalPanelContainerDivId .yui3-widget-ft .yui3-button {
- color:blue;
- font-weight:normal;
+ -moz-border-bottom-colors: none;
+ -moz-border-image: none;
+ -moz-border-left-colors: none;
+ -moz-border-right-colors: none;
+ -moz-border-top-colors: none;
+ background-color: #F5F5F5;
+ background-image: -ms-linear-gradient(top, white, #E6E6E6);
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(white),
+ to(#E6E6E6) );
+ background-image: -webkit-linear-gradient(top, white, #E6E6E6);
+ background-image: -o-linear-gradient(top, white, #E6E6E6);
+ background-image: linear-gradient(top, white, #E6E6E6);
+ background-image: -moz-linear-gradient(top, white, #E6E6E6);
+ background-repeat: repeat-x;
+ border-color: #CCCCCC #CCCCCC #B3B3B3;
+ border-radius: 4px 4px 4px 4px;
+ border-style: solid;
+ border-width: 1px;
+ box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
+ color: #333333;
+ cursor: pointer;
+ display: inline-block;
+ font-size: 13px;
+ line-height: 18px;
+ margin-bottom: 0;
+ padding: 4px 10px;
+ text-align: center;
+ text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
+ vertical-align: middle;
+}
+
+#informationalPanelContainerDivId .yui3-widget-ft .yui3-button:hover {
+ color: #333333;
+ text-decoration: none;
+ background-color: #e6e6e6;
+ *background-color: #d9d9d9;
+ /* Buttons in IE7 don't get borders, so darken on hover */
+
+ background-position: 0 -15px;
+ -webkit-transition: background-position 0.1s linear;
+ -moz-transition: background-position 0.1s linear;
+ -ms-transition: background-position 0.1s linear;
+ -o-transition: background-position 0.1s linear;
+ transition: background-position 0.1s linear;
+}
+
+#informationalPanelContainerDivId .yui3-widget-ft .yui3-button:active {
+ background-color: #e6e6e6;
+ background-color: #d9d9d9 \9;
+ background-image: none;
+ outline: 0;
+ -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
+ -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
+ box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
+}
+
+#informationalPanelContainerDivId .yui3-widget-ft .okButton {
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+ background-color: #5bb75b;
+ background-image: -moz-linear-gradient(top, #62c462, #51a351);
+ background-image: -ms-linear-gradient(top, #62c462, #51a351);
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351));
+ background-image: -webkit-linear-gradient(top, #62c462, #51a351);
+ background-image: -o-linear-gradient(top, #62c462, #51a351);
+ background-image: linear-gradient(top, #62c462, #51a351);
+ background-repeat: repeat-x;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#51a351', GradientType=0);
+ border-color: #51a351 #51a351 #387038;
+ border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+ *background-color: #51a351;
+ /* Darken IE7 buttons by default so they stand out more given they won't have borders */
+
+ filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+}
+
+#informationalPanelContainerDivId .yui3-widget-ft .okButton:hover,
+#informationalPanelContainerDivId .yui3-widget-ft .okButton:active {
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+ background-color: #51a351;
+ *background-color: #499249;
+}
+
+#informationalPanelContainerDivId .yui3-panel-content {
+ box-shadow:none;
+ border:none;
+ border-radius:6px;
+}
+
+#informationalPanelContainerDivId .yui3-widget-content-expanded {
+ height:auto;
+}
+
+#informationalPanelContainerDivId .yui3-widget-mask {
+ opacity:0.7;
+}
+
+.yui3-panel:focus {
+ outline:0 none;
}
#confirmationDataPanelBodyContent {
- font-size:larger;
+ font-size:13px;
}
#manageServicesDisplayDepsOnAction {
Modified: incubator/ambari/branches/ambari-186/hmc/css/manageServices.css
URL: http://svn.apache.org/viewvc/incubator/ambari/branches/ambari-186/hmc/css/manageServices.css?rev=1347124&r1=1347123&r2=1347124&view=diff
==============================================================================
--- incubator/ambari/branches/ambari-186/hmc/css/manageServices.css (original)
+++ incubator/ambari/branches/ambari-186/hmc/css/manageServices.css Wed Jun 6 21:04:36 2012
@@ -1,41 +1,62 @@
#serviceManagementCoreDivId {
- width: 500px;
+ width: 400px;
margin-left: auto;
margin-right: auto;
}
.serviceManagementGroup {
- font-size:20px;
- margin:50px;
+ margin-bottom:20px;
}
+.serviceManagementGroup h2 {
+ font-size:16px;
+}
+/*
.serviceManagementEntry {
- /* Reznor's
- margin-top: 8px;
- margin-bottom: 8px;
- */
+
margin-top: 10px;
margin-bottom: 10px;
padding: 10px;
border-style: solid;
border-width: 2px;
- /* Reznor's background-color: #c5c5c5; */
- background-color: white;
+ background-color:#F0F0E8;
border:color:#B2B299;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
+*/
+
+.serviceManagementEntry {
+padding: 14px 14px;
+margin: 0 0 10px;
+list-style: none;
+background-color: #FBFBFB;
+background-image: -moz-linear-gradient(top, white, whiteSmoke);
+background-image: -ms-linear-gradient(top, white, whiteSmoke);
+background-image: -webkit-gradient(linear, 0 0, 0 100%, from(white), to(whiteSmoke));
+background-image: -webkit-linear-gradient(top, white, whiteSmoke);
+background-image: -o-linear-gradient(top, white, whiteSmoke);
+background-image: linear-gradient(top, white, whiteSmoke);
+background-repeat: repeat-x;
+border: 1px solid #DDD;
+-webkit-border-radius: 3px;
+-moz-border-radius: 3px;
+border-radius: 3px;
+filter: progid:dximagetransform.microsoft.gradient(startColorstr='white', endColorstr='whiteSmoke', GradientType=0);
+-webkit-box-shadow: inset 0 1px 0 white;
+-moz-box-shadow: inset 0 1px 0 white;
+box-shadow: inset 0 1px 0 white;
+}
.serviceManagementEntry:hover {
- background-color: rgb(240,240,232);
}
.serviceManagementEntry:hover a {
}
.serviceManagementEntryStarted {
- color: rgb(50,205,50);
+ color: green;
}
.serviceManagementEntryStopped {
@@ -43,7 +64,7 @@
}
.serviceManagementEntryInstalled {
- color: rgb(50,205,50);
+ color: green;
}
.serviceManagementEntryUninstalled {
@@ -55,10 +76,6 @@
cursor: text;
}
-.serviceManagementEntry a {
- color: black;
-}
-
.serviceManagementEntryNameContainer {
/* Reznor's
font-weight: bold;
@@ -67,10 +84,11 @@
font-size: 15px;
}
-.serviceManagementEntryName {
+a.serviceManagementEntryName {
display:inline-block;
border:0px solid black;
width:180px;
+ color:#333333;
/* Temporarily make links within .serviceManagementEntryName not look like links. */
pointer-events: none;
@@ -91,23 +109,29 @@
margin-top:-4px;
}
+
+
.serviceManagementEntryActionStart {
+ width:20px;
margin-right:4px;
}
.serviceManagementEntryActionStop {
+ width:20px;
margin-right:4px;
}
.serviceManagementEntryActionReconfigure {
+ width:20px;
}
#serviceManagementGlobalActionsDivId {
- margin-left:140px;
+ margin-top:40px;
+ margin-left:90px;
}
ul#serviceManagementListId,
.serviceManagementGroup ul {
list-style:none outside none;
margin:0;
-}
+}
\ No newline at end of file
Modified: incubator/ambari/branches/ambari-186/hmc/js/clustersList.js
URL: http://svn.apache.org/viewvc/incubator/ambari/branches/ambari-186/hmc/js/clustersList.js?rev=1347124&r1=1347123&r2=1347124&view=diff
==============================================================================
--- incubator/ambari/branches/ambari-186/hmc/js/clustersList.js (original)
+++ incubator/ambari/branches/ambari-186/hmc/js/clustersList.js Wed Jun 6 21:04:36 2012
@@ -37,21 +37,14 @@ function generateClusterClientsHostRoleM
if (clusterServices[serviceName].isEnabled == "1" &&
!clusterServices[serviceName].attributes.noDisplay) {
- globalYui.Array.each( clusterServices[serviceName].components, function (serviceComponent) {
-
- globalYui.log("AAA is " + serviceComponent.hostname);
- globalYui.log("BBB is " + globalYui.Lang.dump(serviceComponent));
+ globalYui.Array.each( clusterServices[serviceName].components, function (serviceComponent) {
if (serviceComponent.isClient) {
globalYui.log("Final host array is " + globalYui.Lang.dump(finalHostMap));
// just add the client to the hostname object
if ( !( serviceComponent.hostName in finalHostMap ) ) {
finalHostMap[serviceComponent.hostName] = new Array();
finalHostMap[serviceComponent.hostName].push(serviceComponent.displayName);
- globalYui.log("XXX is " + globalYui.Lang.dump(finalHostMap));
} else {
- // FIXME fails to push display name to this array
- globalYui.log("Service component array has " + globalYui.Lang.dump(finalHostMap[serviceComponent.hostName]) + " YYY: " + serviceComponent.hostname);
- globalYui.log("ZZZ is " + globalYui.Lang.dump(finalHostMap));
finalHostMap[serviceComponent.hostName].push(serviceComponent.displayName);
}
}
Modified: incubator/ambari/branches/ambari-186/hmc/js/manageServices.js
URL: http://svn.apache.org/viewvc/incubator/ambari/branches/ambari-186/hmc/js/manageServices.js?rev=1347124&r1=1347123&r2=1347124&view=diff
==============================================================================
--- incubator/ambari/branches/ambari-186/hmc/js/manageServices.js (original)
+++ incubator/ambari/branches/ambari-186/hmc/js/manageServices.js Wed Jun 6 21:04:36 2012
@@ -29,22 +29,18 @@ function showPanel() {
}
function showPanel(postShowFn) {
- confirmationDataPanel.set('y', -400);
+ confirmationDataPanel.set('y', 200);
confirmationDataPanel.set('x', (globalYui.one('body').get('region').width - confirmationDataPanel.get('width'))/2);
confirmationDataPanel.show();
- var bb = confirmationDataPanel.get('boundingBox');
- bb.transition({
- duration: 0.5,
- top : '0px'
- }, postShowFn);
+ if (postShowFn != null) {
+ postShowFn.call();
+ }
}
function hidePanel(postHideFn) {
- var bb = confirmationDataPanel.get('boundingBox');
- bb.transition({
- duration: 0.8,
- top : '-' + confirmationDataPanel.get('height') + 'px'
- }, postHideFn);
+ if (postHideFn != null) {
+ postHideFn.call();
+ }
}
function hideAndDestroyPanel() {
@@ -136,11 +132,11 @@ function setupStartStopServiceScreen(act
if ( action == 'start') {
confirmationDataPanelTitle = 'Starting ' + serviceDisplayName;
- confirmationDataPanelBodyContent = "We are now going to start " + serviceDisplayName + "..<br/><br/>";
+ confirmationDataPanelBodyContent = "We are now going to start " + serviceDisplayName + "...<br/><br/>";
affectedServices = clusterServices[serviceName].dependencies;
} else if (action == 'stop') {
confirmationDataPanelTitle = 'Stopping ' + serviceDisplayName;
- confirmationDataPanelBodyContent = "We are now going to stop " + serviceDisplayName + "..<br/><br/>";
+ confirmationDataPanelBodyContent = "We are now going to stop " + serviceDisplayName + "...<br/><br/>";
affectedServices = clusterServices[serviceName].dependents;
}
@@ -200,7 +196,7 @@ function setupReconfigureScreens(service
fetchClusterServicesPoller.stop();
reconfigLevelOneYesButton = {
- value: 'Submit',
+ value: 'Apply Changes',
action: function (e) {
e.preventDefault();
@@ -227,7 +223,7 @@ function setupReconfigureScreens(service
showPanel();
});
},
- classNames: 'yo',
+ classNames: 'okButton',
section: 'footer'
};
@@ -279,10 +275,9 @@ function setupReconfigureScreens(service
* on the InstallationWizard page.
*/
confirmationDataPanelBodyContent =
- '<div id=formStatusDivId class=formStatusBar style="visibility:hidden">'+
+ '<div id=formStatusDivId class=formStatusBar style="display:none">'+
'Placeholder' +
'</div>' +
- '<br/>' +
'<div id=configureClusterAdvancedCoreDivId>' +
'<form id=configureClusterAdvancedFormId>' +
'<fieldset id=configureClusterAdvancedFieldSetId>' +
@@ -531,7 +526,7 @@ function serviceManagementActionClickHan
e.preventDefault();
performServiceManagement( action, serviceName, confirmationDataPanel );
},
- classNames: 'yo',
+ classNames: 'okButton',
section: 'footer'
};
@@ -610,7 +605,7 @@ function generateServiceManagementEntryM
var serviceManagementEntryIconCssClass = '';
/* Already-started/stopped services shouldn't allow a start/stop operation on them. */
- if( serviceInfo.state == 'STOPPED' ) {
+ if( serviceInfo.state == 'STOPPED' || serviceInfo.state == 'FAILED') {
serviceManagementEntryAnchorName = 'start';
serviceManagementEntryAnchorTitle = 'Start';
serviceManagementEntryAnchorCssClasses += 'serviceManagementEntryActionStart';
@@ -699,13 +694,13 @@ var fetchClusterServicesPollerResponseHa
}
}
if (clientOnlySoftwareMarkup != '') {
- serviceManagementMarkup += '<div class="serviceManagementGroup"> Client-only software: <br/>';
+ serviceManagementMarkup += '<div class="serviceManagementGroup"><h2>Client-only software</h2><ul>';
serviceManagementMarkup += clientOnlySoftwareMarkup;
serviceManagementMarkup += '</div>';
}
// Real services with server side components
- serviceManagementMarkup += '<div class="serviceManagementGroup"> Long running services: <br/><ul>';
+ serviceManagementMarkup += '<div class="serviceManagementGroup"><h2>Long-running services</h2><ul>';
for (var serviceName in clusterServices) {
var serviceInfo = clusterServices[serviceName];
if (clusterServices.hasOwnProperty(serviceName) && serviceInfo.attributes.runnable) {
Modified: incubator/ambari/branches/ambari-186/hmc/js/utils.js
URL: http://svn.apache.org/viewvc/incubator/ambari/branches/ambari-186/hmc/js/utils.js?rev=1347124&r1=1347123&r2=1347124&view=diff
==============================================================================
--- incubator/ambari/branches/ambari-186/hmc/js/utils.js (original)
+++ incubator/ambari/branches/ambari-186/hmc/js/utils.js Wed Jun 6 21:04:36 2012
@@ -40,10 +40,6 @@ function createInformationalPanel( conta
}
globalYui.one( containerNodeId ).append('<div id="informationalPanelInnerContainerDivId"></div>');
-
- globalYui.one( '#informationalPanelInnerContainerDivId' ).append( '<div class="yui3-widget-hd"></div>' );
- globalYui.one( '#informationalPanelInnerContainerDivId' ).append( '<div class="yui3-widget-bd"></div>' );
- globalYui.one( '#informationalPanelInnerContainerDivId' ).append( '<div class="yui3-widget-ft"></div>' );
var newPanel = new globalYui.Panel({
srcNode: '#informationalPanelInnerContainerDivId',
@@ -66,6 +62,7 @@ function createInformationalPanel( conta
* overrides any static CSS we might have had, so adding our overrides
* at runtime (*after* globalYui.Panel) is the only way out.
*/
+ /*
globalYui.StyleSheet('KewlApp').set( '.yui3-skin-sam .yui3-panel-content .yui3-widget-hd', {
background: 'rgb(50,185,50)',
textAlign: 'center',
@@ -79,13 +76,14 @@ function createInformationalPanel( conta
height: '17px',
width: '20px',
});
-
+ */
+
// Temporary fix to a yui bug
globalYui.StyleSheet('KewlApp').set( '.yui3-skin-sam .yui3-panel .yui3-widget-hd .yui3-button-close:before', {
content: 'url(../yui-3.5.1/build/assets/skins/sam/sprite_icons.png)',
backgroundImage: 'url(../yui-3.5.1/build/assets/skins/sam/sprite_icons.png)',
});
-
+ /*
globalYui.StyleSheet('KewlApp').set( '.yui3-skin-sam .yui3-panel-content .yui3-widget-ft', {
background: 'rgb(50,185,50)',
});
@@ -100,6 +98,7 @@ function createInformationalPanel( conta
background: 'none',
border: '0px'
});
+ */
customizedYuiPanelCss = true;
}