AMBARI-369. Improve Service Management page and general popup styling (Contributed by Yusaku)

git-svn-id: https://svn.apache.org/repos/asf/incubator/ambari/branches/ambari-186@1347124 13f79535-47bb-0310-9956-ffa450edef68

CHANGES.txt

@@ -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)

hmc/css/bootstrap.css

@@ -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-"] {

hmc/css/common.css

@@ -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;
-}
+}

hmc/css/common3.css

@@ -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 {

hmc/css/manageServices.css

@@ -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;
-}
+}

hmc/js/clustersList.js

@@ -37,21 +37,14 @@ function generateClusterClientsHostRoleMappingMarkup( clusterServices ) {
       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);
             }
           }

hmc/js/manageServices.js

@@ -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(action, serviceName) {
 
   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(serviceName) {
   fetchClusterServicesPoller.stop();
 
   reconfigLevelOneYesButton = {
-    value: 'Submit',
+    value: 'Apply Changes',
     action: function (e) {
       e.preventDefault();
 
@@ -227,7 +223,7 @@ function setupReconfigureScreens(serviceName) {
         showPanel();
       });
     },
-    classNames: 'yo',
+    classNames: 'okButton',
     section: 'footer'
   };
 
@@ -279,10 +275,9 @@ function setupReconfigureScreens(serviceName) {
      * 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 serviceManagementActionClickHandler( action, serviceName ) {
       e.preventDefault();
       performServiceManagement( action, serviceName, confirmationDataPanel );
     },
-    classNames: 'yo',
+    classNames: 'okButton',
     section: 'footer'
   };
 
@@ -610,7 +605,7 @@ function generateServiceManagementEntryMarkup( serviceName, serviceInfo ) {
       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 fetchClusterServicesPollerResponseHandler = {
       }
     }
     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) {

hmc/js/utils.js

@@ -40,10 +40,6 @@ function createInformationalPanel( containerNodeId, headerContentString ) {
   }
 
   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( containerNodeId, headerContentString ) {
      * 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( containerNodeId, headerContentString ) {
         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( containerNodeId, headerContentString ) {
       background: 'none',
       border: '0px'
     });
+    */
 
     customizedYuiPanelCss = true;
   }