AMBARI-4116. Cleanup delete host dialog UI. (Jeff Sposetti via yusaku)

ambari-web/app/messages.js

@@ -1397,10 +1397,10 @@ Em.I18n.translations = {
   'hosts.delete.popup.unknownComponents':'The following components have unknown status:',
   'hosts.cant.do.popup.title':'Unable to Delete Host',
   'hosts.cant.do.popup.masterList.body':'This host cannot be deleted since it has the following master components:',
-  'hosts.cant.do.popup.masterList.body.end':'<strong>Note:</strong> To delete this host, you must first move all the master components listed above to another host.',
+  'hosts.cant.do.popup.masterList.body.end':'To delete this host, you must first move all the master components listed above to another host.',
   'hosts.cant.do.popup.nonDeletableList.body':'Deletion of the following {0} components is not supported. ',
   'hosts.cant.do.popup.runningList.body':'This host cannot be deleted since the following components are still running:',
-  'hosts.cant.do.popup.runningList.body.end':'<strong>Note:</strong> To delete this host, you must first stop all the running components listed above. ' +
+  'hosts.cant.do.popup.runningList.body.end':'To delete this host, you must first stop all the running components listed above. ' +
     'If this host has a DataNode, it should be decommissioned first to prevent data loss.',
   'hosts.add.header':'Add Host Wizard',
   'hosts.assignRack':'Assign Rack',

ambari-web/app/styles/application.less

@@ -2546,6 +2546,21 @@ table.graphs {
 }
 /*Dashboard Widgets END*/
 
+.dialog-delete-component {
+  border: 1px solid #FDB82F;
+  border-radius: 4px;
+  padding: 4px;
+  background: #FFFDF6;
+  .warning-details {
+    padding-left: 16px;
+    padding-top: 5px;
+  }
+  .warning-list {
+    font-size: 0.95em;
+    font-style: italic;
+  }
+}
+
 /*Hosts*/
 #hosts {
   #hosts-table {

ambari-web/app/templates/main/host/details/raiseDeleteComponentErrorPopup.hbs

@@ -16,14 +16,17 @@
 * limitations under the License.
 }}
 
-<p><i class="icon-warning-sign"></i> {{componentsBody}}</p>
-<div class='row-fluid'>
-  <div class='tinyoffset span10'>
-    <i>{{componentsStr}}</i>
+<div class="dialog-delete-component">
+  <div class="warning">
+  <i class="icon-warning-sign"></i> <strong>{{componentsBody}}</strong>
+  </div>
+  <div class="row-fluid">
+    <div class="tinyoffset span10 warning-list">
+    {{componentsStr}}
+    </div>
   </div>
-</div>
 
 {{#if showBodyEnd}}
-    <br />
-    <div class='alert alert-warning'>{{{componentsBodyEnd}}}</div>
-{{/if}}
+  <div class="warning-details">{{{componentsBodyEnd}}}</div>
+{{/if}}
+</div>