AMBARI-300. Change the status message (success/error) location so that it shows below the page summary box, rather than above, more better visibility. Contributed by Yusaku

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

CHANGES.txt

@@ -2,6 +2,10 @@ Ambari Change log
 
 Release 0.x.x - unreleased
 
+  AMBARI-300. Change the status message (success/error) location so that it 
+  shows below the page summary box, rather than above, more better visibility 
+  (Yusaku Sako via ramya)
+
   AMBARI-255. Rename/Relocate files as appropriate (Varun Kapoor via ramya)
 
   AMBARI-252. Remove Playground files from HMC (Varun Kapoor via ramya)

hmc/css/bootstrap.css

@@ -5222,7 +5222,6 @@ button.close {
     content: '\e04a';
     color:red;
     font-size:10px;
-    margin-top:2px;
   }
   .iconic-eject:before {
     content: '\e04b';

hmc/css/common.css

@@ -226,7 +226,7 @@ td {
 .pageSummary {
   min-height: 20px;
   padding: 19px;
-  margin-bottom: 20px;
+  margin: 30px 0 20px 0;
   background-color: #f5f5f5;
   border: 1px solid #eee;
   border: 1px solid rgba(0, 0, 0, 0.05);
@@ -290,6 +290,10 @@ td {
 	display:block!important;
 }
 
+#labelForSelectAllId {
+	font-size:12px!important;
+}
+
 input.unit-MB,
 input.unit-B,
 input.unit-hours,
@@ -378,4 +382,8 @@ a.btn {
   -webkit-border-radius: 0 0 4px 4px;
      -moz-border-radius: 0 0 4px 4px;
           border-radius: 0 0 4px 4px;
+}
+
+.btn-large .iconic-stop:before {
+    margin-top: -1px;
 }

hmc/css/common2.css

@@ -29,7 +29,7 @@ legend {
 /*  border:1px solid #DBDBDB ;*/
   color:green;
   font-size:120%;
-  text-align:right;
+  text-align:left;
 /*  background-color:#FFFFFF; 
   border:1px solid #00CC00 ;
 */

hmc/css/common3.css

@@ -150,9 +150,9 @@ span.installationWizardStageNumber {
   padding:5px;
 }
 
-.formStatusBar {
+#txnProgressStatusDivId {
   width: auto;
-  /*height: 2em;*/
+  /-*height: 2em;*-/
   border-style: solid;
   border-width: 2px;
   border-radius:2px;
@@ -162,6 +162,18 @@ span.installationWizardStageNumber {
   padding-bottom: 4px;
   font-size: larger;
   text-align: center;
+  margin-bottom:0;
+}
+
+.formStatusBar {
+    background-color: #FCF8E3;
+    border: 1px solid #FBEED5;
+    border-radius: 4px 4px 4px 4px;
+    color: #C09853;
+    font-size:14px;
+    margin-bottom: 18px;
+    padding: 8px 35px 8px 14px;
+    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
 }
 
 .formStatusBarZeroOpacity {
@@ -197,15 +209,15 @@ span.installationWizardStageNumber {
 }
 
 .statusOk {
-  border-color: rgb(50,205,50);
-/*  color: rgb(50,205,50); */
-  background-color: #85EEA8;
+  background-color: #dff0d8;
+  border-color: #d6e9c6;
+  color: #468847;
 }
 
 .statusError {
-  border-color: #F53907;
-/*  color: #F53907; */
-  background-color: #F17879;
+    background-color: #F2DEDE;
+    border-color: #EED3D7;
+    color: #B94A48;
 }
 
 /* Add a scrollbar only to the body of the YUI Panel, keeping the locations of

hmc/html/addNodesWizard.php

@@ -55,6 +55,8 @@
               We'll use the SSH private key and public key files to perform installation on your nodes.
               <span>The public key that is paired with the private key must already be installed on all the nodes.</span>
             </div>
+            <div id="formStatusDivId" class="formStatusBar" style="display:none">
+            </div>
             <div class="pageContent">
               <div id="addNodesCoreDivId" style="display:block">
                 <fieldset>
@@ -84,6 +86,8 @@
             </div>
 
               <div name="selectServicesCoreDiv" id="selectServicesCoreDivId" style="display:none">
+                <div id="formStatusDivId" class="formStatusBar" style="display:none">
+                </div>
                 <fieldset>
                   <!--<legend>Select Services</legend>-->
                   <form id="addNodesDataFormId">

hmc/html/initializeCluster.php

@@ -93,6 +93,8 @@
                 <div class="pageSummary">
                   <h2>Let's create a new Hadoop cluster</h2>    
                 </div>
+                <div id="formStatusDivId" class="formStatusBar" style="display:none">
+                </div>
                 <div class="pageContent">       
                   <form id="createClusterFormId">
                     <label for="clusterNameId">Name of your new cluster</label>
@@ -102,13 +104,14 @@
                 </div>
               </div>
           
-              <div id="addNodesCoreDivId" style="display:none">
-                  
+              <div id="addNodesCoreDivId" style="display:none"> 
                   <div class="pageSummary">
                     <h2>Which nodes are you installing Hadoop on?</h2>
                     We'll use the SSH private key and public key files to perform installation on your nodes.
                     <span>The public key that is paired with the private key must already be installed on all the nodes.</span>
                   </div>
+                  <div id="formStatusDivId" class="alert alert-error" style="display:none">
+                  </div>
                   <div class="pageContent">
                   <form id="addNodesFilesFormId" enctype="multipart/form-data" method="post">
                     <p>
@@ -140,7 +143,11 @@
                   <h2>Which services do you want to install?</h2>
                   <p>We'll automatically take care of dependencies (e.g., HBase requires ZooKeeper, etc.)</p>
                	</div>
-               	<div class="pageContent">
+                       <div style="width:100%;height:40px">
+                  <div id="formStatusDivId" class="formStatusBar" style="display:none">
+                  </div>
+                </div>
+                       <div class="pageContent" style="margin-top:14px">
                   <div id="selectCoreServicesListId">
                    <ul id="selectCoreServicesListUlId">
                       <div id="selectCoreServicesDynamicRenderDivId">
@@ -169,11 +176,12 @@
               <div name="assignHostsCoreDiv" id="assignHostsCoreDivId" style="display:none">
                 <div id="statusDivId">
                 </div>
-
                 <div class="pageSummary">
                 	<h2>Assign Services to Nodes</h2>
                 	<p>We have categorized the given nodes into Node-groups and also suggested the locations of various service-masters. Drag and drop service-masters that you wish to change. Click on the given links if you wish to change the node assignments.</p>
                 </div>
+                <div id="formStatusDivId" class="formStatusBar" style="display:none">
+                </div>
                 <div id="serviceMastersLinksDivId">
                 </div>
                 <div id="nodeGroupsCoreDivId">
@@ -187,7 +195,8 @@
                 	<h2>Specify Mount Points</h2>
                 	<p>We found the following mount points on your nodes. Please confirm/modify the mount points to use for your nodes.
                 </div>
-                
+                <div id="formStatusDivId" class="formStatusBar" style="display:none">
+                </div>
                 <div id="configureClusterInputContainerDivId">
                   <form id="configureClusterFormId">
                     <div name="configureClusterInputDiv" id="configureClusterInputDivId">
@@ -221,6 +230,8 @@
                   	<h2>Customize Settings</h2>
                   	<p>We have come up with reasonable default settings.  Customize as you see fit.</p>
                   </div>
+                  <div id="formStatusDivId" class="formStatusBar" style="display:none">
+                  </div>
                   <form id="configureClusterAdvancedFormId">
                     <fieldset id="configureClusterAdvancedFieldSetId">
                       <!--<legend>Advanced configuration</legend>-->
@@ -237,6 +248,8 @@
                   	<p>We are ready to deploy!  Please review your settings below.</p>
                   	<p>If you wish to make any changes, you can click on any of the installation stages above.  Note that if you do go back to a stage, you will have to go through all the subsequent stages again.</p>               
                   </div>
+                  <div id="formStatusDivId" class="formStatusBar" style="display:none">
+                  </div>
                   <form id="deployFormId">
                     <fieldset id="deployFieldSetId">
                       <!--<legend>Review your settings</legend>-->

hmc/html/utils.htmli

@@ -1,9 +1,3 @@
-<!-- Used to render informational/status messages 
-     (error, success reports and such like) -->
-<div id="formStatusDivId" class="formStatusBar" style="visibility:hidden">
-  DummyPlaceholder
-</div>
-
 <!-- The mechanism by which we black out the screen and affix the
      the spotlight on a smaller portion of it. -->
 <div id="blackScreenDivId" style="display:none"></div>

hmc/js/selectServices.js

@@ -59,8 +59,8 @@ function renderServiceList(responseJson) {
 
   //            divContent += coreContent + optionalContent + nonSelectableContent;
    coreContent = '<div>' +
-                  '<label class="checkbox" for="selectAllCheckBoxId" id="labelForSelectAllId">Select all</label>' +
-                  '<input type="checkbox" name="selectAll" id="selectAllCheckBoxId"/>' +
+                  '<label class="checkbox" for="selectAllCheckBoxId"><span id="labelForSelectAllId">Select all</span>' +
+                  '<input type="checkbox" name="selectAll" id="selectAllCheckBoxId"/></label>' +
                 '</div>' +
                 coreContent;
   globalYui.one("#selectCoreServicesDynamicRenderDivId").setContent(coreContent);     

hmc/js/utils.js

@@ -175,9 +175,10 @@ function transitionToNextStage( currentStageDivSelector, currentStageData, newSt
 }
 
 function clearFormStatus() {
-  var formStatusDiv = globalYui.one("#formStatusDivId");
+  var formStatusDiv = globalYui.all("#formStatusDivId");
   // formStatusDiv.setContent("");
   formStatusDiv.setStyle("visibility", "hidden");
+  formStatusDiv.setStyle("display", "none");
   formStatusDiv.set('className','');
   formStatusDiv.addClass("formStatusBar");
 }
@@ -189,14 +190,15 @@ function setFormStatus(statusString, isError, noFade) {
   } else {
     formStatusDivCssClass = 'statusOk';
   }
-  var formStatusDiv = globalYui.one("#formStatusDivId");
+  var formStatusDiv = globalYui.all("#formStatusDivId");
   formStatusDiv.setStyle("visibility", "visible");
+  formStatusDiv.setStyle("display", "block");
   formStatusDiv.set('className','');
   formStatusDiv.addClass("formStatusBar");
   formStatusDiv.addClass(formStatusDivCssClass);
   formStatusDiv.setContent(statusString);
   if (!isError && !noFade) {
-    setTimeout(fadeFormStatus, 1000);
+    //setTimeout(fadeFormStatus, 1000);
   }
 }