ambari-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From jonathanhur...@apache.org
Subject [06/31] ambari git commit: AMBARI-18921. Remove redundant css (part 3) (onechiporenko)
Date Mon, 21 Nov 2016 16:08:37 GMT
AMBARI-18921. Remove redundant css (part 3) (onechiporenko)


Project: http://git-wip-us.apache.org/repos/asf/ambari/repo
Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/945e5d4d
Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/945e5d4d
Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/945e5d4d

Branch: refs/heads/branch-feature-AMBARI-18456
Commit: 945e5d4dd8fa4b9ee3ed473a69d46695253e6285
Parents: b23623a
Author: Oleg Nechiporenko <onechiporenko@apache.org>
Authored: Thu Nov 17 17:27:34 2016 +0200
Committer: Oleg Nechiporenko <onechiporenko@apache.org>
Committed: Fri Nov 18 10:12:59 2016 +0200

----------------------------------------------------------------------
 .../main/admin/service_auto_start.js            |    6 +-
 ambari-web/app/styles/alerts.less               |   55 +-
 ambari-web/app/styles/application.less          | 2531 ++----------------
 ambari-web/app/styles/bootstrap_overrides.less  |  294 ++
 ambari-web/app/styles/common.less               |   17 -
 ambari-web/app/styles/dashboard.less            |  350 +++
 ambari-web/app/styles/hosts.less                |  494 ++++
 ambari-web/app/styles/modal_popups.less         |  190 +-
 ambari-web/app/styles/timepicker-overrides.less |   59 +
 ambari-web/app/styles/top-nav.less              |  212 ++
 ambari-web/app/styles/wizard.less               |  611 +++++
 ambari-web/app/templates/application.hbs        |    6 +-
 .../templates/common/host_progress_popup.hbs    |    1 +
 .../common/modal_popups/select_groups_popup.hbs |    6 +-
 ambari-web/app/templates/installer.hbs          |    2 +-
 ambari-web/app/templates/main.hbs               |    4 +-
 ambari-web/app/templates/main/admin.hbs         |    8 +-
 .../app/templates/main/admin/kerberos.hbs       |    3 +-
 .../templates/main/admin/serviceAccounts.hbs    |    6 +-
 .../templates/main/admin/service_auto_start.hbs |  102 +-
 .../stack_upgrade/stack_upgrade_wizard.hbs      |    2 +-
 .../main/alerts/definition_details.hbs          |    2 +-
 ambari-web/app/templates/main/dashboard.hbs     |    2 +-
 .../main/dashboard/edit_widget_popup.hbs        |   30 +-
 .../edit_widget_popup_single_threshold.hbs      |   27 +-
 ambari-web/app/templates/main/host/configs.hbs  |    4 +-
 .../app/templates/main/host/host_alerts.hbs     |   10 +-
 ambari-web/app/templates/main/service.hbs       |    2 +-
 .../main/service/all_services_actions.hbs       |   18 +-
 .../public_option_disabled_window_body.hbs      |    4 +-
 .../wizard/step9/step9HostTasksLogPopup.hbs     |    1 +
 ambari-web/app/utils/host_progress_popup.js     |    6 +-
 .../views/common/helpers/status_icon_view.js    |    2 +-
 .../views/main/admin/stack_and_upgrade_view.js  |    4 +-
 .../views/wizard/step9/hostLogPopupBody_view.js |    2 +-
 .../wizard/step9/hostLogPopupBody_view_test.js  |    2 +-
 ambari-web/vendor/styles/bootstrap.css          |   34 +-
 37 files changed, 2552 insertions(+), 2557 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/ambari/blob/945e5d4d/ambari-web/app/controllers/main/admin/service_auto_start.js
----------------------------------------------------------------------
diff --git a/ambari-web/app/controllers/main/admin/service_auto_start.js b/ambari-web/app/controllers/main/admin/service_auto_start.js
index 8f40f25..b425c78 100644
--- a/ambari-web/app/controllers/main/admin/service_auto_start.js
+++ b/ambari-web/app/controllers/main/admin/service_auto_start.js
@@ -89,11 +89,11 @@ App.MainAdminServiceAutoStartController = Em.Controller.extend({
               totalComponents: 1,
               indicator: function () {
                 var percentage = this.get('enabledComponents') / this.get('totalComponents');
-                var indicator = "glyphicon glyphicon-adjust";
+                var indicator = "icon-adjust";
                 if (percentage === 1) {
-                  indicator = "glyphicon glyphicon-circle";
+                  indicator = "icon-circle";
                 } else if (percentage === 0) {
-                  indicator = "glyphicon glyphicon-circle-blank";
+                  indicator = "icon-circle-blank";
                 }
                 return indicator;
               }.property('enabledComponents', 'totalComponents')

http://git-wip-us.apache.org/repos/asf/ambari/blob/945e5d4d/ambari-web/app/styles/alerts.less
----------------------------------------------------------------------
diff --git a/ambari-web/app/styles/alerts.less b/ambari-web/app/styles/alerts.less
index 4569e25..f12393d 100644
--- a/ambari-web/app/styles/alerts.less
+++ b/ambari-web/app/styles/alerts.less
@@ -343,7 +343,6 @@
 
 }
 
-
 .service-block .summary-box-header {
   .alerts-crit-count, .alerts-warn-count, .no-alerts-label {
     padding: 4px 5px;
@@ -528,3 +527,57 @@
   max-height: 200px;
   overflow-y: scroll;
 }
+
+.alert-groups-dropdown {
+  overflow: auto;
+  max-height: 416px;
+}
+
+#alert-actions-button {
+  margin-right: 10px;
+}
+
+.alerts {
+  margin: 0;
+  overflow-y: auto;
+  li {
+    border-bottom: 1px solid #eee;
+    list-style: none;
+    padding: 5px;
+    background-position: 14px 9px;
+    background-repeat: no-repeat;
+    .date-time {
+      float: right;
+    }
+    p {
+      margin-bottom: 2px;
+    }
+    .container {
+      padding-left: 10px;
+      padding-right: 10px;
+    }
+    .title {
+      font-weight: normal;
+      font-size: 13px;
+    }
+    .status-icon {
+      padding-top: 7px;
+    }
+    .date-time {
+      color: #999;
+      font-style: italic;
+      font-size: small;
+      text-align: right;
+    }
+    .message {
+      font-size: 12px;
+      color: #777;
+    }
+    .serviceLink {
+      padding-left: 7px;
+    }
+  }
+  .alert {
+    margin: 7px;
+  }
+}

http://git-wip-us.apache.org/repos/asf/ambari/blob/945e5d4d/ambari-web/app/styles/application.less
----------------------------------------------------------------------
diff --git a/ambari-web/app/styles/application.less b/ambari-web/app/styles/application.less
index 5312ee2..024679e 100644
--- a/ambari-web/app/styles/application.less
+++ b/ambari-web/app/styles/application.less
@@ -57,10 +57,6 @@ ul.typeahead.dropdown-menu {
   z-index: 3000000 !important;
 }
 
-select.form-control {
-  display: inline-block;
-}
-
 #wrapper {
   min-height: 100%;
 }
@@ -91,7 +87,6 @@ footer {
   height: @footer-height - 60px;
 }
 
-
 .editable-list-container {
   &:hover {
     .pencil-box {
@@ -260,7 +255,6 @@ footer {
   }
 }
 
-
 .table-overlay {
   position: absolute;
   opacity: 0.9;
@@ -328,31 +322,6 @@ footer {
   display: inline-block;
 }
 
-.popover {
-  small {
-    font-size: 1.3rem;
-  }
-}
-
-.form-group {
-  .help-block {
-    &.help-inline {
-      margin-bottom: 0;
-    }
-  }
-}
-
-.alert {
-  & > ul, ol {
-    padding-left: inherit;
-  }
-}
-
-.dropdown-toggle.btn-icon {
-  padding-left: 8px;
-  padding-right: 8px;
-}
-
 ::-webkit-scrollbar {
   -webkit-appearance: none;
 }
@@ -379,10 +348,6 @@ footer {
   background-color: #b94a48!important;
 }
 
-.form-control {
-  height: 30px;
-  float: none;
-}
 table.diff {
   white-space: normal;
   width: 100%;
@@ -436,6 +401,7 @@ table.diff {
     }
   }
 }
+
 .alerts-crit-count {
   margin-left: 0;
   background: @health-status-red;
@@ -464,199 +430,6 @@ table.diff {
   color:@health-status-blue;
 }
 
-#top-nav {
-
-  .navbar.navbar-static-top {
-    background-image: -moz-linear-gradient(top, @top-nav-bg-color-from, @top-nav-bg-color-to);
-    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@top-nav-bg-color-from), to(@top-nav-bg-color-to));
-    background-image: -webkit-linear-gradient(top, @top-nav-bg-color-from, @top-nav-bg-color-to);
-    background-image: -o-linear-gradient(top, @top-nav-bg-color-from, @top-nav-bg-color-to);
-    background-image: linear-gradient(to bottom, @top-nav-bg-color-from, @top-nav-bg-color-to);
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr= @top-nav-bg-color-from, endColorstr=@top-nav-bg-color-to); //for IE9-
-    box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
-
-    .navbar-text.brand-wrapper {
-      color: @top-nav-brand-color;
-      font-size: 16px;
-      font-weight: normal;
-      text-shadow: 0 1px 0 #555;
-
-      a, a:hover, a:active, a:visited {
-        color: @top-nav-brand-color;
-        text-decoration: none;
-      }
-      .ambari-link {
-        margin-left: 25px;
-      }
-      .label {
-        color: @top-nav-ops-count-color;
-        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
-        background-color: @top-nav-ops-count-bg-color;
-        &.operations-count {
-          .infoPulse();
-        }
-        &.alert-crit-count {
-          background-color: @health-status-red;
-        }
-        &.alert-warn-count {
-          background-color: @health-status-orange;
-        }
-        &.alerts-none-count {
-          cursor: default;
-        }
-      }
-      .icon-caret-left {
-        color: @top-nav-ops-count-bg-color;
-        margin-right: -1px;
-        text-shadow: none;
-      }
-      .ops-count {
-        margin-right: -1px;
-        color: #006DCC;
-        .infoPulseInner();
-      }
-    }
-    a:hover {
-      text-decoration: none;
-    }
-
-    .logo {
-      img {
-        height: 32px;
-        width: 32px;
-        position: absolute;
-        top: 8px;
-      }
-    }
-
-    .alerts-label {
-      margin-left: 5px;
-      display: inline-block;
-    }
-
-    .icon-caret-left {
-      color: @top-nav-ops-count-bg-color;
-      margin-right: -1px;
-      text-shadow: none;
-    }
-
-    .cluster-name {
-      margin-left: 20px;
-    }
-
-    .top-nav-menu.nav {
-      padding-right: 20px;
-      li > a {
-        text-shadow: none;
-        color: @top-nav-menu-text-color;
-        text-align: center;
-        white-space: nowrap;
-      }
-      .active > a, .active > a:hover, .active > a:focus {
-        color: @top-nav-menu-active-text-color;
-        background-color: @top-nav-menu-active-bg-color;
-        box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
-      }
-      li > a:focus, li > a:hover {
-        color: @top-nav-menu-text-hover-color;
-        text-decoration: none;
-        background-color: transparent;
-      }
-      .glyphicon-th {
-        font-size: 1.1em;
-      }
-
-      li.top-nav-dropdown {
-        position: relative;
-      }
-      .top-nav-dropdown:hover .top-nav-dropdown-menu {
-        display: block;
-      }
-      .top-nav-dropdown-menu {
-        display: none;
-        position: absolute;
-        top: 95%;
-        left: 0;
-        z-index: 1000;
-        float: left;
-        min-width: 220px;
-        width: 220px;
-        padding: 5px 0;
-        margin: 2px 0 0;
-        list-style: none;
-        background-color: @top-nav-menu-dropdown-bg-color;
-        border: 3px solid @top-nav-menu-dropdown-border-color;
-        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-        -webkit-background-clip: padding-box;
-        -moz-background-clip: padding;
-        background-clip: padding-box;
-        .alerts-count {
-          margin-right: 5px;
-        }
-      }
-      .top-nav-dropdown-menu > li{
-        position: relative;
-      }
-      .top-nav-dropdown-menu > li > a {
-        text-decoration: none;
-        text-align: left;
-        display: block;
-        padding: 3px 0 3px 5px;
-        color: @top-nav-menu-dropdown-text-color;
-        white-space: nowrap;
-        .glyphicon-health-block > span:before {
-          line-height: 20px;
-        }
-      }
-      .top-nav-dropdown-menu > li.active > a{
-        background-color: #e5e5e5;
-      }
-      .top-nav-dropdown-menu > li > a:hover {
-        color: #fff;
-        background-color: #666;
-        background-image: linear-gradient(to bottom, #666, #555);
-        background-repeat: repeat-x;
-      }
-      .top-nav-dropdown-menu > li.disabled > a {
-        color: #a9a9a9;
-        cursor: default;
-      }
-      .top-nav-dropdown-menu > li.disabled > a:hover {
-        color: #a9a9a9;
-        background-color: @top-nav-menu-dropdown-bg-color;
-        background-image: none;
-      }
-    }
-  }
-
-  .navbar .nav .top-nav-user .active > a,
-  .navbar .nav .top-nav-user .active > a:hover {
-    color: #fff;
-    text-decoration: none;
-  }
-
-  .navbar .nav .top-nav-user > li > a {
-    border-radius: 8px;
-    font-size: 13px;
-    font-weight: bold;
-    margin: 1px 10px 2px 0;
-    padding: 7px 14px;
-    text-decoration: none;
-    text-shadow: none;
-  }
-
-  .navbar .nav .top-nav-user > li > a:hover {
-    background-color: transparent;
-    color: #999;
-    text-decoration: none;
-  }
-
-  .navbar .nav .top-nav-user > li.right {
-    float: right;
-  }
-
-}
-
 .nav.top-nav-menu,
 .nav-list.nav-services {
   .service-caption {
@@ -688,10 +461,10 @@ table.diff {
   }
 }
 
-
 .row .tinyoffset {
   margin-left: 3%!important;
 }
+
 .row .tinyspan {
   width: 2%!important;
   *width: 1.95%!important;
@@ -702,12 +475,6 @@ table.diff {
   overflow-y: hidden;
 }
 
-#version-mismatch-title {
-  font-size: 18px;
-  font-weight: bold;
-  margin: 10px 0;
-}
-
 .pre-scrollable {
   overflow-y: auto;
 }
@@ -738,6 +505,10 @@ h1 {
   color: @health-status-green;
 }
 
+.glyphicon-refresh {
+  color: #fdb82f;
+}
+
 .glyphicon-warning-sign {
   color: @restart-indicator-color;
 }
@@ -765,37 +536,19 @@ h1 {
   color:#B94A48;
 }
 
-.tooltip {
-  z-index: 10000;
-}
-
-.tooltip-inner {
-  text-align: left;
-  max-width: 400px;
-  overflow-wrap: break-word;
-  white-space:pre-wrap;
-  &.alert-def-detail-tooltip {
-    max-height: 300px;
-    max-width: 650px;
-    overflow: scroll;
-  }
-  &.graph-tooltip {
-    max-width: 200px;
-  }
+.glyphicon-play.enabled {
+  color: @green;
 }
 
-.popover {
-  z-index: 10000;
-  width: 350px;
-  .popover-inner {
-    word-wrap: break-word;
-  }
+.glyphicon-stop.enabled{
+  color: red;
 }
 
 .arrow() {
   cursor: pointer;
   display: inline-block;
 }
+
 .arrow-right {
   .arrow();
   margin: 0 0 20px 70px;
@@ -812,7 +565,6 @@ h1 {
   border-right: 20px solid transparent;
 }
 
-
 .arrow-up {
   .arrow();
   border-left: 70px solid #dedede;
@@ -836,480 +588,127 @@ h1 {
   border-left-color: #dedede;
 }
 
-.text-tooltip {
-  border-bottom: 1px silver dotted;
-  cursor: pointer;
-}
-
-.wizard {
-
-  .btn-extra-info{
-    padding-top: 6px;
-    padding-right: 15px;
-  }
-  .btn-area {
-    margin-top: 20px;
-    .btn.btn-info {
-      margin-right: 10px;
-    }
+.spinner {
+  width: @spinner-default-width;
+  height: @spinner-default-height;
+  margin: 0 auto;
+  i {
+    color: #555;
+    font-size: 2.5em;
   }
-  .wizard-content {
-    .panel.panel-default.panel-internal {
-      border: 1px solid #ddd;
-    }
-    padding: 25px;
-    background-color: #fff;
 
-    #get-started label{
-      font-weight: normal;
+  &.service-button-spinner {
+    width: @spinner-small-width;
+    height: @spinner-small-height;
+    background-size: cover;
+    i {
+      font-size: 1em;
     }
   }
+}
 
-  .mbm {
-    margin-top: 0;
-  }
-
-  #installOptions {
-    .ssh-user, .ssh-port {
-      padding-top: 5px;
-    }
+#serviceConfig {
 
-    #sshKey {
-      color: #000;
-      font-family: "Courier New","courier";
-      font-size: 0.9em;
+  .alert{
+    .glyphicon-refresh{
+      margin-left:10px;
     }
-    input[type="radio"]:focus {
-      outline: none;
+    .glyphicon-warning-sign {
+      color: @health-status-yellow;
     }
   }
-  #confirm-hosts {
+  .collapsable {
+    cursor: pointer;
+  }
+  .directories {
+    min-width: 280px;
+  }
+  .panel-heading {
+    cursor: pointer;
+  }
+  .panel-group {
 
-    .page-bar {
-      border: none;
+    .control-label {
+      text-align: left;
+      word-wrap: break-word;
+      font-weight: 500;
     }
-
-    table {
-      margin-bottom: 0;
-      th {
-        input[type="checkbox"] {
-          //fixes height discrepencies in IE
-          margin-bottom: -1px;
-          margin-top: -1px;
-        }
-      }
-      .tinyspan {
-        width: 2%;
-        float: none;
+    .service-config-section{
+      .overridden-property{
+        background-color: rgba(211, 237, 247, 0.39);
+        padding: 5px;
+        margin-left: -5px;
       }
-    }
-
-    #host-filter {
-
-      ul {
-        margin: 3px;
-        font-size: 12px;
-        li.filter-status.active a {
-          text-decoration: none;
-          color: #fff;
-        }
-        li.filter-status.active,
-        li.filter-status.active:hover {
-          background-color: #666;
-          box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-          border-radius: 5px;
-        }
-        li.filter-status:hover {
-          background-color: #d8d8d8;
-          border-radius: 5px;
-        }
-        li.divider {
-          color: #666;
-          padding: 4px 2px;
-        }
-        li {
-          list-style: none;
-          display: block;
-          float: left;
-          padding: 4px;
-          a {
-            text-decoration: underline;
+      .checkbox {
+        line-height: 0.8em;
+        &.list-inline {
+          vertical-align: baseline;
+          &>.ember-checkbox{
+            margin-left: -14px;
           }
         }
-        li.first {
-          font-weight: bold;
-        }
       }
     }
-    .progress {
-      margin-bottom: 0;
+    .entry-row.indent-1 {
+      margin-left: 2em;
+    }
+    .entry-row.indent-2 {
+      margin-left: 4em;
     }
-    #confirm-hosts-table {
-      td.host {
-        max-width: 290px;
+    .entry-row {
+      margin: 0;
+      .glyphicon-lock {
+        color: #008000;
       }
-      td.host .trim_hostname {
-        max-width: 97% !important;
-        display: block;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        float:left;
+      .action{
+        margin-left: 3px;
+        margin-right: 1px;
+        font-size: 13px;
         white-space: nowrap;
       }
-    }
-  }
-  #step4, #step5, #step6 {
-    a.selected {
-      color: #333;
-      cursor: default;
-      text-decoration: none !important;
-    }
-    .checkbox {
-      margin-top: 0;
-      margin-bottom: 5px;
-    }
-    .glyphicon-asterisks {
-      color: #00688B;
-    }
-  }
-  #step6 {
-    .pre-scrollable {
-      max-height: 440px;
-      position: relative;
-      #component_assign_table {
-        tbody td, th {
-          white-space: nowrap;
-        }
-        .trim_hostname {
-          max-width: 180px;
-          float:left;
-          white-space: nowrap;
+      input[type="radio"] {
+        margin-right: 5px;
+        margin-left: -20px;
+      }
+      .control-group {
+        margin: 0;
+        .overrideField {
           display: block;
-          overflow: hidden;
-          text-overflow: ellipsis;
+          margin-top: 5px;
+          margin-bottom: 5px;
         }
-        .checkbox {
-          margin: 0;
+        .overridden-hosts-view {
+          display: inline-block;
+        }
+        &>.ember-checkbox{
+          margin-bottom: 5px;
         }
       }
     }
-    .spinner-overlay {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      background-color: #808080;
-      opacity: 0.2;
+    form {
+      margin-bottom: 0;
     }
   }
-  #deploy {
+  .badge {
+    margin-left: 4px;
+  }
 
-    .page-bar {
-      border: none;
+  .master-host, .master-hosts, .slave-hosts {
+    padding-top: 5px;
+    line-height: 20px;
+  }
+
+  .enhanced-config-tab-content {
+    .action {
+      display: inline-block;
     }
-    .pre-scrollable {
-      max-height: 750px;
+  }
+  .common-config-category, .enhanced-config-tab-content  {
+    .panel-title {
+      line-height: 16px;
     }
-    table {
-      margin-bottom: 0;
-    }
-    #host-filter {
-      margin-top: 1px;
-      ul {
-        margin: 3px;
-        font-size: 12px;
-        li.filter-status.active a {
-          text-decoration: none;
-          color: #fff;
-        }
-        li.filter-status.active,
-        li.filter-status.active:hover {
-          background-color: #666;
-          box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-          border-radius: 5px;
-        }
-        li.filter-status:hover {
-          background-color: #d8d8d8;
-          border-radius: 5px;
-        }
-        li.divider {
-          color: #666;
-          padding: 4px 2px;
-        }
-        li {
-          list-style: none;
-          display: block;
-          float: left;
-          padding: 4px;
-          a {
-            text-decoration: underline;
-          }
-        }
-        li.first {
-          font-weight: bold;
-        }
-      }
-    }
-
-    #deploy-status-by-host {
-      margin-bottom: 0;
-      th.host {
-        width: 40%;
-      }
-      th.status {
-        width: 22%;
-      }
-      th.messgage {
-        width: 35%;
-      }
-      td.host {
-        max-width: 290px;
-      }
-      td.host .trim_hostname {
-        max-width: 97% !important;
-        display: block;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        float:left;
-        white-space: nowrap;
-      }
-      .progress-wrapper {
-        width: 73%;
-        .progress {
-          margin-bottom: 0;
-        }
-      }
-      .progress-percentage {
-        margin-left: 5px;
-        width: 20% - 10px;
-      }
-    }
-  }
-  #step14 {
-    .item {
-      line-height: 30px;
-      i {
-        font-size: 20px;
-      }
-    }
-    .row {
-      margin-left: 0;
-    }
-  }
-  #common-progress-page {
-    .item {
-      line-height: 40px;
-      width:100%;
-      float:left;
-
-      i {
-        font-size: 20px;
-      }
-      .active-link{
-        a{
-          pointer-events: auto;
-          color: #0088cc;
-          cursor: pointer;
-        }
-      }
-      .active-text{
-        a{
-          pointer-events: none;
-          text-decoration: none;
-          color: #0088cc;
-          cursor: auto;
-        }
-      }
-      .retry {
-        cursor: pointer;
-        margin-left: 15px;
-        i {
-          font-size: 14px;
-        }
-      }
-      .pull-left{
-        float: left;
-      }
-      .progress-wrapper{
-        margin-top: 10px;
-
-        .progress{
-          margin-bottom: 0;
-        }
-      }
-
-    }
-    .row {
-      margin-left: 0;
-    }
-  }
-  #ha-step1, #ha-step4, #ha-step8, #mjn-step7 {
-    .alert.alert-warn {
-      margin-top: 10px;
-      margin-bottom: 10px;
-    }
-    .nameserviceid-input {
-      display: inline-block;
-    }
-  }
-
-  #ha-step4 li, #ha-step6 li, #ha-step8 li, #mjn-step7 li {
-    margin-top: 8px;
-  }
-
-  #ha-step3-review-table, #manage-journal-node-step2-review-table {
-    td {
-      text-align: left;
-      vertical-align: top;
-      padding: 5px;
-      ul {
-        margin: 0;
-      }
-      li {
-        list-style-type: none;
-      }
-    }
-    .to-be-disabled-red {
-      color: #ff0000;
-    }
-    .to-be-installed-green {
-      color: #008000;
-    }
-  }
-}
-
-.spinner {
-  width: @spinner-default-width;
-  height: @spinner-default-height;
-  margin: 0 auto;
-  i {
-    color: #555;
-    font-size: 2.5em;
-  }
-
-  &.service-button-spinner {
-    width: @spinner-small-width;
-    height: @spinner-small-height;
-    background-size: cover;
-    i {
-      font-size: 1em;
-    }
-  }
-}
-
-.services-host-menu {
-  margin-top: 20px;
-  padding: 8px 0;
-}
-
-#summary-restart-bar {
-  margin-top: 20px;
-}
-
-#serviceConfig {
-  .nav-tabs {
-    margin-bottom: 20px;
-  }
-  margin-top: 20px;
-  .alert{
-    .glyphicon-refresh{
-      margin-left:10px;
-    }
-    .glyphicon-warning-sign {
-      color: @health-status-yellow;
-    }
-  }
-  .collapsable {
-    cursor: pointer;
-  }
-  .directories {
-    min-width: 280px;
-  }
-  .panel-heading {
-    cursor: pointer;
-  }
-  .panel-group {
-
-    .control-label {
-      text-align: left;
-      word-wrap: break-word;
-      font-weight: 500;
-    }
-    .service-config-section{
-      .overridden-property{
-        background-color: rgba(211, 237, 247, 0.39);
-        padding: 5px;
-        margin-left: -5px;
-      }
-      .checkbox {
-        line-height: 0.8em;
-        &.list-inline {
-          vertical-align: baseline;
-          &>.ember-checkbox{
-            margin-left: -14px;
-          }
-        }
-      }
-    }
-    .entry-row.indent-1 {
-      margin-left: 2em;
-    }
-    .entry-row.indent-2 {
-      margin-left: 4em;
-    }
-    .entry-row {
-      margin: 0;
-      .glyphicon-lock {
-        color: #008000;
-      }
-      .action{
-        margin-left: 3px;
-        margin-right: 1px;
-        font-size: 13px;
-        white-space: nowrap;
-      }
-      input[type="radio"] {
-        margin-right: 5px;
-        margin-left: -20px;
-      }
-      .control-group {
-        margin: 0;
-        .overrideField {
-          display: block;
-          margin-top: 5px;
-          margin-bottom: 5px;
-        }
-        .overridden-hosts-view {
-          display: inline-block;
-        }
-        &>.ember-checkbox{
-          margin-bottom: 5px;
-        }
-      }
-    }
-    form {
-      margin-bottom: 0;
-    }
-  }
-  .badge {
-    margin-left: 4px;
-  }
-
-  .master-host, .master-hosts, .slave-hosts {
-    padding-top: 5px;
-    line-height: 20px;
-  }
-
-  .enhanced-config-tab-content {
-    .action {
-      display: inline-block;
-    }
-  }
-  .common-config-category, .enhanced-config-tab-content  {
-    .panel-title {
-      line-height: 16px;
-    }
-    .action {
-      cursor: pointer;
+    .action {
+      cursor: pointer;
     }
     .a-icon(@color) {
       color: @color;
@@ -1471,271 +870,41 @@ a:focus {
 @rack-state-plus: url("/img/rack-state-plus.png");
 @rack-state-minus: url("/img/rack-state-minus.png");
 
-/*****start styles for well *****/
-.well {
-  border-radius: 0;
-  -webkit-border-radius: 0;
-  -moz-border-radius: 0;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-}
-/*****end styles for well *****/
-
-
-/*****start styles for table*****/
-.table-bordered {
-  border-radius: 0;
-  -webkit-border-radius: 0;
-  -moz-border-radius: 0;
-  thead:first-child tr:first-child th:first-child,
-  tbody:first-child tr:first-child td:first-child,
-  thead:first-child tr:first-child th:last-child,
-  tbody:first-child tr:first-child td:last-child {
-    -webkit-border-top-left-radius: 0;
-    border-top-left-radius: 0;
-    -moz-border-radius-topleft: 0;
-    -webkit-border-top-right-radius: 0;
-    border-top-right-radius: 0;
-    -moz-border-radius-topright: 0;
-  }
-}
-/*****end styles for table*****/
-
-/**********start styles for img-thumbnail ****************/
-.img-thumbnail {
-  border-radius: 0;
-  -webkit-border-radius: 0;
-  -moz-border-radius: 0;
-  line-height: 20px;
-}
-/**********end styles for img-thumbnail ****************/
-
-/**********start styles for dropdown-menu, panel-group ****************/
-.dropdown-menu,
-.dropdown-submenu > .dropdown-menu,
-.dropdown-menu-wrap > .dropdown-menu,
-.nav-pills .dropdown-menu,
-.nav-pills > li > a,
-.nav-tabs > li > a,
-.panel-group {
-  border-radius: 0;
-  -webkit-border-radius: 0;
-  -moz-border-radius: 0;
-}
-.submenu-left {
-  > .dropdown-menu-wrap {
-    position: relative;
-    width: 100%;
-    left: -100%;
-    > .dropdown-menu {
-      position: absolute;
-      top: 0;
-      right: -10px;
-      margin-top: -32px;
-    }
-  }
-  &:hover {
-    > .dropdown-menu-wrap {
-      > .dropdown-menu {
-        display: inline-block;
-      }
-    }
+.sort-wrapper {
+  .column-name {
+    cursor: pointer;
+    padding-right: 18px;
   }
 }
 
-.dropdown-submenu {
-  position: relative;
+/*****start styles for install tasks logs*****/
+.task-list-main-warp, .task-detail-info {
+  i {
+    font-size: 20px;
+    vertical-align: middle;
+  }
+  .pending, .queued {
+    color: #999;
+  }
+  .in_progress {
+    color: #367FE6;
+  }
+  .completed {
+    color: #0EA31C;
+  }
+  .failed {
+    color: #DF5F5F;
+  }
+  .aborted, .timedout {
+    color: #FF9C09;
+  }
 }
 
-.dropdown-submenu > .dropdown-menu {
-  top: 0;
-  left: 100%;
-  margin-top: -6px;
-  margin-left: -1px;
-}
+.task-list-main-warp {
 
-.dropdown-submenu:hover > .dropdown-menu {
-  display: block;
-}
-
-.dropdown-submenu > a:after {
-  display: block;
-  content: " ";
-  float: right;
-  width: 0;
-  height: 0;
-  border-color: transparent;
-  border-style: solid;
-  border-width: 5px 0 5px 5px;
-  border-left-color: #333;
-  margin-top: 5px;
-  margin-right: -10px;
-}
-
-.dropdown-submenu:hover > a:after {
-  border-left-color: #333;
-}
-
-.dropdown-submenu.pull-left {
-  float: none;
-}
-
-.dropdown-submenu.pull-left > .dropdown-menu {
-  left: -100%;
-  margin-left: 10px;
-}
-
-.dropdown-submenu > a.disabled:after {
-  border-left-color: #ccc;
-}
-
-/*****start styles for host component popup*****/
-#modal {
-  outline: none;
-}
-.host-progress-popup {
-  .modal-body, .modal-footer, .modal-header {
-    min-width: 600px;
-  }
-  #service-info, #host-info, #host-log {
-    .log-list-wrap:hover {
-      background-color: #e6e6e6;
-    }
-  }
-}
-.host-component-popup-wrap {
-  .task-top-wrap {
-    .operation-name-top {
-      width: 36%;
-      padding-left: 20px;
-      float: left;
-      text-align: left;
-    }
-  }
-  #service-info{
-    .show-more {
-      width: 98.8%;
-      min-height: 20px;
-      cursor: pointer;
-      border-top: 1px solid #CCC;
-      text-align: center;
-      padding: 10px 10px 10px 0;
-      font-size: 16px;
-    }
-  }
-
-  #host-info, #service-info{
-    overflow: auto;
-    width: 100%;
-    max-height: 340px;
-    &.scheduled{
-      max-height: 255px;
-    }
-    .col-md-2{
-      width:20%;
-      float: left;
-    }
-    .host-progress-num{
-      float: left;
-      padding-left: 8px;
-    }
-    .host-name-icon-wrap{
-      float: left;
-      width: 50%;
-      white-space: nowrap;
-    }
-  }
-  #host-info, #service-info, #host-log {
-    .log-list-wrap {
-      cursor: pointer;
-      padding: 10px 10px 10px 20px;
-      border-top: 1px solid #CCC;
-      border-bottom: 1px solid #CCC;
-    }
-    .task-list-line-cursor{
-      width: 100%;
-      min-height: 20px;
-      .progress-wrapper{
-        .progress{
-          margin-bottom: 0;
-        }
-      }
-      .show-details {
-        float: right;
-        cursor: pointer;
-        font-size: 16px;
-        i {
-          color: #333;
-        }
-      }
-      .operation-name-icon-wrap {
-        float: left;
-        width: 35%;
-      }
-      .start-time-text {
-        margin-left: 5px;
-        width: 20%;
-        float: left;
-      }
-      .duration-text {
-        margin-left: 5px;
-        width: 10%;
-        float: left;
-      }
-      .time-summary {
-        padding-left: 0;
-        color: #808080;
-        font-size: 12px;
-      }
-    }
-    .task-list-line-cursor:before,.task-list-line-cursor:after {
-      display: table;
-      line-height: 0;
-      content: "";
-    }
-    .task-list-line-cursor:after {
-      clear: both;
-    }
-  }
-}
-/*****end styles for host component popup*****/
-
-.sort-wrapper {
-  .column-name {
-    cursor: pointer;
-    padding-right: 18px;
-  }
-}
-
-/*****start styles for install tasks logs*****/
-.task-list-main-warp, .task-detail-info {
-  i {
-    font-size: 20px;
-    vertical-align: middle;
-  }
-  .pending, .queued {
-    color: #999;
-  }
-  .in_progress {
-    color: #367FE6;
-  }
-  .completed {
-    color: #0EA31C;
-  }
-  .failed {
-    color: #DF5F5F;
-  }
-  .aborted, .timedout {
-    color: #FF9C09;
-  }
-}
-
-.task-list-main-warp {
-
-  .task-list-line-cursor {
-    cursor: pointer;
-  }
+  .task-list-line-cursor {
+    cursor: pointer;
+  }
 
   .request-schedule-abort {
     margin-top: 7px;
@@ -1904,6 +1073,7 @@ a:focus {
     }
   }
 }
+
 .task-detail-log-info {
   .stderr, .stdout {
     line-height: 14px;
@@ -2045,10 +1215,6 @@ a:focus {
   }
 }
 
-.edit-link {
-  cursor: pointer;
-}
-
 #security-stages {
   tr {
     height: 50px;
@@ -2073,16 +1239,6 @@ a:focus {
   }
 }
 
-#enable_security {
-  .step3 {
-    overflow: auto;
-    max-height: 500px;
-    table td {
-      word-break: break-all;
-    }
-  }
-}
-
 .faintText {
   color: #999;
 }
@@ -2102,85 +1258,6 @@ a:focus {
 
 /*end services summary*/
 
-/*start alerts summary*/
-
-.alert-groups-dropdown {
-  overflow: auto;
-  max-height: 416px;
-}
-
-#alert-actions-button {
-  margin-right: 10px;
-}
-.alerts {
-  margin: 0;
-  overflow-y: auto;
-  li {
-    border-bottom: 1px solid #eee;
-    list-style: none;
-    padding: 5px;
-    background-position: 14px 9px;
-    background-repeat: no-repeat;
-    .date-time {
-      float: right;
-    }
-    p {
-      margin-bottom: 2px;
-    }
-    .container {
-      padding-left: 10px;
-      padding-right: 10px;
-    }
-    .title {
-      font-weight: normal;
-      font-size: 13px;
-    }
-    .status-icon {
-      padding-top: 7px;
-    }
-    .date-time {
-      color: #999;
-      font-style: italic;
-      font-size: small;
-      text-align: right;
-    }
-    .message {
-      font-size: 12px;
-      color: #777;
-    }
-    .serviceLink {
-      padding-left: 7px;
-    }
-  }
-  .alert {
-    margin: 7px;
-  }
-}
-
-.modal-graph-line {
-  .modal-dialog {
-    width: 810px;
-  }
-  .modal-body {
-    min-height: 450px !important;
-    overflow: hidden;
-    .corner-icon {
-      position: absolute;
-      right: 15px;
-      text-decoration: none;
-      .glyphicon-save {
-        color: #555;
-      }
-    }
-    .export-graph-list {
-      top: auto;
-      right: 15px;
-    }
-  }
-}
-
-/*end alerts summary*/
-
 /*Alerts popup*/
 
 .align-center {
@@ -2210,6 +1287,7 @@ a:focus {
     margin-right: 0;
   }
 }
+
 .chart-container {
   cursor: pointer;
   cursor: -moz-zoom-in;
@@ -2399,6 +1477,7 @@ a:focus {
     padding-left:6px;
   }
 }
+
 a.services-menu-blocks{
   overflow:auto;
   .icon-health-block{
@@ -2411,12 +1490,12 @@ a.services-menu-blocks{
   }
 
   .glyphicon.glyphicon-refresh {
-    color: #fdb82f;
     margin-left: 4px;
     margin-right: 4px;
   }
 
 }
+
 .quick-links-wrapper {
   margin-top: -60px;
   position: relative;
@@ -2448,6 +1527,7 @@ a.services-menu-blocks{
   margin-top: -60px;
   margin-left: 10px;
   min-height: 30px;
+  float: right;
   .btn-group {
     vertical-align: inherit;
   }
@@ -2458,12 +1538,6 @@ a.services-menu-blocks{
     a {
       cursor: pointer;
     }
-    .glyphicon-play.enabled {
-      color: @green;
-    }
-    .glyphicon-stop.enabled{
-      color: red;
-    }
   }
 }
 
@@ -2512,891 +1586,60 @@ table.graphs {
   width: 100%;
 }
 
-/*Dashboard Widgets/heatmaps Start*/
-#dashboard-widgets-container{
-  #widgets-options-menu {
-    .add-widgets-text .dropdown-menu {
-      overflow: auto;
-      width: 210px;
-    }
+.dialog-delete-component {
+  border: 1px solid @restart-indicator-color;
+  border-radius: 4px;
+  padding: 4px;
+  background: #FFFDF6;
+  .warning-details {
+    padding-left: 16px;
+    padding-top: 5px;
   }
-  .dashboard-widgets-box {
-    margin-top: 4px;
-  }
-
-  #dashboard-widgets {
-    .caption {
-      height: 25px;
-    }
-    .spinner {
-      margin: 55px auto;
-    }
-    .chart-container {
-      .spinner {
-        margin: 15px auto 35px;
-      }
-    }
-    .span2p4 {
-      float: left;
-      width: 19.60%;
-      *width: 19.60%;
-    }
-    .thumbnails > div {
-      margin: 0 3px 3px 0;
-      height: 163px;
-    }
-    .thumbnails li {
-      height: 160px;
-      width: 100%;
-      margin: 3px 3px 0 0;
-    }
-
-    .img-thumbnail .corner-icon {
-      display: none;
-      position: relative;
-      padding: 7px 0;
-      .glyphicon-remove-sign{
-        color: #000;
-        text-shadow: #fff 0 0 15px;
-        position: absolute;
-        left: -10px;
-        top: -10px;
-      }
-      .glyphicon-edit, .glyphicon-save {
-        color: #555;
-      }
-    }
-    .export-graph-list {
-      top: 30px;
-      li {
-        margin: 0;
-        height: auto;
-      }
-    }
-    .img-thumbnail .hidden-info-general{
-      color: #555;
-      font-size: 12px;
-      font-weight: bold;
-      text-align: center;
-      text-decoration: none;
-      display: none;
-      position: relative;
-      z-index: 7;
-    }
-    .hidden-info-two-line{
-      padding-top: 60px;
-    }
-    .hidden-info-three-line{
-      padding-top: 50px;
-    }
-    .hidden-info-five-line{
-      padding-top: 40px;
-      tr > td {
-        line-height: 18px;
-      }
-    }
-    .hidden-info-six-line{
-      padding-top: 37px;
-      tr > td {
-        line-height: 16px;
-      }
-    }
-    .img-thumbnail .caption {
-      padding: 7px 0;
-      color: #555;
-      font-weight:bold;
-      font-size: 12px;
-      text-align: left;
-      position: relative;
-    }
-    .img-thumbnail .widget-content{
-      text-align: center;
-      font-size: 35px;
-      padding-top: 40px; //svg
-      position: relative;
-      .disabled-hdfs-link {
-        pointer-events: none;
-        color: grey;
-        cursor: default;
-      }
-      .screensaver{ // graph onload wait
-        width: 90%;
-        height: 105px;
-        border: 1px solid silver;
-        color: #fff;
-        i {
-          font-size: inherit;
-        }
-      }
-    }
-    .img-thumbnail .widget-content-isNA{ // for pie chart n\a
-      text-align: center;
-      font-size: 35px;
-      color: #D6DDDF;
-      padding-top: 70px;
-      font-weight: bold;
-      position: relative;
-    }
-    .img-thumbnail{
-      background-color: #fff;
-      z-index: 3;
-    }
-    .has-hidden-info {
-      ul {
-        margin: 0;
-      }
-    }
-    .has-hidden-info .img-thumbnail:hover {
-      cursor: move;
-      .corner-icon{
-        display:block;
-        text-decoration: none;
-        z-index: 9;
-      }
-      .hidden-info-general{
-        display: block;
-      }
-      .caption{
-        margin-left: -10px;
-        z-index: 7;
-      }
-      .slots-caption{
-        margin-left: -13px;
-        z-index: 7;
-      }
-      .content-mx(@top) {
-        top: @top;
-        opacity: 0.3;
-        z-index: 5;
-      }
-      .widget-content, .widget-content-isNA {
-        .content-mx(-104px);
-      }
-      .uptime-content{
-        top: -116px;
-      }
-      .uptime-content-isNA{
-        top: -95px;
-      }
-      .slots-content-isNA{
-        top: -82px;
-      }
-      .content-hidden-two-line{
-        .content-mx(-105px);
-      }
-      .content-hidden-three-line{
-        .content-mx(-116px);
-      }
-      .content-hidden-four-line{
-        .content-mx(-126px);
-      }
-      .content-hidden-five-line{
-        .content-mx(-140px);
-       }
-      .content-hidden-six-line{
-        .content-mx(-143px);
-      }
-    }
-
-    .cluster-metrics {
-      position: relative;
-      .chart-container{
-        margin: 0 10px;
-        .chart-y-axis{
-          margin-top: 10px;
-        }
-        .chart svg{
-          margin-right: 20px;
-        }
-        .rickshaw_legend{
-          padding-top: 3px;
-        }
-        .chart-legend {
-          top: 120px;
-          left:15px;
-          text-align: left;
-          z-index: 3;
-          ul >li{
-            max-height: 10px;
-          }
-        }
-      }
-      &> ul {
-        margin:0;
-      }
-      .alert {
-        padding: 0;
-        font-size: 12px;
-      }
-      .img-thumbnail:hover {
-        cursor: move;
-        .corner-icon {
-          display:block;
-          text-decoration: none;
-          z-index: 9;
-        }
-        .caption {
-          margin-left: -10px;
-        }
-      }
-    }
-
-    .links .img-thumbnail{
-      li{
-        height:20px;
-      }
-      .link-button{
-        float: right;
-        .disabled-hdfs-quick-link {
-          pointer-events: none;
-          color: #808080;
-          cursor: default;
-        }
-      }
-
-      .widget-content{
-        text-align: center;
-        font-size: 11px;
-        color: #555;
-        padding-top: 40px;
-        table{
-          vertical-position: center;
-          text-align: center;
-          margin-left:auto;
-          margin-right:auto;
-        }
-        td{
-          padding-top: 2px;
-        }
-      }
-    }
-    .links .img-thumbnail:hover{
-      cursor: move;
-      .corner-icon{
-        display:block;
-        text-decoration: none;
-        z-index: 9;
-      }
-      .caption{
-        margin-left: -10px;
-      }
-    }
-    .img-thumbnail .widget-content .svg {
-      position: relative;
-    }
-
-    .widget-cn(@color) {
-      color: @color;
-      padding-top: 70px;
-      font-weight: bold;
-    }
-    .is-red{
-      .widget-content {
-        .widget-cn(@health-status-red);
-      }
-    }
-    .is-orange{
-      .widget-content {
-        .widget-cn(@health-status-orange);
-      }
-    }
-    .is-green {
-      .widget-content {
-        .widget-cn(@health-status-green);
-      }
-    }
-    .is-na {
-      position: relative;
-      .widget-content {
-        .widget-cn(#D6DDDF);
-        text-shadow: none;
-      }
-    }
-  }
-}
-/*Dashboard Widgets END*/
-
-.dialog-delete-component {
-  border: 1px solid @restart-indicator-color;
-  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 {
-
-  .bulk-menu {
-    a {
-      &.disabled {
-        color: gray;
-      }
-    }
-  }
-
-  .filters-label {
-    display: block;
-    float: left;
-    padding-right: 10px;
-  }
-
-  #hosts-table {
-    margin-top: 10px;
-    margin-bottom: 10px;
-
-    .set-rack-id {
-      text-decoration: none;
-    }
-
-    .host-select-all {
-      margin-bottom: -1px ;
-    }
-  }
-
-  .health-status-HEALTHY,
-  .health-status-LIVE,
-  .health-status-DEAD-RED,
-  .health-status-DEAD-ORANGE,
-  .health-status-DEAD-YELLOW {
-    background-position: center;
-    background-repeat: no-repeat;
-    height: 20px;
-    width: 13px;
-    display: inline !important;
-    float: none !important;
-    margin-right: 1px;
-    margin-left: 1px;
-  }
-  .icon-exclamation-sign,
-  .glyphicon-refresh {
-    margin-right: 1px;
-    margin-left: 1px;
-  }
-
-  .passive-state {
-    color: #000;
-  }
-  .alerts-status {
-    padding: 1px 6px !important;
-    &:before {
-      content: "!";
-    }
-  }
-  .host-name-search {
-    position: relative;
-    top: 0;
-    left: 10px;
-  }
-  .host-name-pos {
-    position: relative;
-    top: 10px;
-  }
-  .progress {
-    margin-bottom: 0;
-  }
-  .filter-input-width{
-    width: ~"calc(100% - 20px)";
-
-    &.rack-input {
-      width: 85%;
-    }
-  }
-  .table {
-    input[type="checkbox"] {
-      margin: -2px 0 0 0;
-    }
-    th {
-      padding-left: 6px;
-    }
-    .col0,.col1,
-    td:first-child,
-    th:first-child,
-    td:last-child,
-    th:last-child {
-      padding-left: 4px!important;
-      padding-right: 1px!important;
-      padding-right: 10px\9!important;
-      width: 1.5%;
-      width: 13px\9!important;
-      input {
-        vertical-align: middle;
-      }
-    }
-    .col2,
-    td:first-child + td,
-    th:first-child + th{
-      width: 20%;
-      padding-right: 1px;
-    }
-    .col3, .col4,
-    td:first-child + td + td,
-    th:first-child + th + th,
-    td:first-child + td + td + td,
-    th:first-child + th + th + th{
-      padding-left: 1px!important;
-      padding-right: 1px!important;
-      width: 1.5%;
-      width: 13px\9!important;
-    }
-    .col5,
-    td:first-child + td + td + td + td,
-    th:first-child + th + th + th + th {
-      width: 10%!important;
-    }
-    .col6,
-    td:first-child + td + td + td + td + td,
-    th:first-child + th + th + th + th + th {
-      width: 13%!important;
-    }
-    .col7,
-    td:first-child + td + td + td + td + td + td,
-    th:first-child + th + th + th + th + th + th{
-      width: 5%!important;
-    }
-
-    .col8,
-    td:first-child + td + td + td + td + td + td + td,
-    th:first-child + th + th + th + th + th + th + th{
-      width: 6%!important;
-    }
-
-    .col9,
-    td:first-child + td + td + td + td + td + td + td + td,
-    th:first-child + th + th + th + th + th + th + th + th{
-      width: 9%!important;
-    }
-
-    .col10,
-    td:first-child + td + td + td + td + td + td + td + td + td,
-    th:first-child + th + th + th + th + th + th + th + th + th{
-      width: 9%!important;
-    }
-
-    .col11,
-    td:first-child + td + td + td + td + td + td + td + td + td + td,
-    th:first-child + th + th + th + th + th + th + th + th + th +th{
-      width: 11%!important;
-      a {
-        word-wrap: break-word;
-      }
-    }
-
-    .col12,
-    td:first-child + td + td + td + td + td + td + td + td + td + td + td,
-    th:first-child + th + th + th + th + th + th + th + th + th + th +th{
-      width: 11%!important;
-    }
-
-    td.name {
-      overflow: inherit;
-      overflow-wrap: break-word;
-      white-space: nowrap;
-    }
-    td.name .trim_hostname{
-      display: block;
-      float: left;
-      width: 86%!important;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    td.health label {
-      padding-top: 3px;
-    }
-    td.health .icon-medkit {
-      margin: 3px 0 0 0;
-    }
-    ul.filter-components {
-      padding: 5px 0;
-      background: #777;
-      color: #fff;
-      font-weight: normal;
-      font-size: 12px;
-      label {
-        font-size: 12px;
-      }
-      li.active-filter {
-        background-color: #777;
-      }
-      li {
-        display: block;
-        padding: 3px 0 3px 5px;
-        line-height: 20px;
-        label.checkbox {
-          padding-left: 3px;
-        }
-        input[type="checkbox"] {
-          margin: 4px 4px 2px 2px;
-        }
-      }
-      select {
-        width: 150px;
-      }
-      ul {
-        margin-left: 10px;
-      }
-      &>li {
-        &>ul {
-          height: 150px;
-          margin-left: 0;
-          overflow-y: scroll;
-        }
-      }
-    }
-
-    div.view-wrapper {
-      input[type="checkbox"], .btn-group {
-        margin-bottom: 9px;
-      }
-    }
-  }
-
-  .open-group > .dropdown-menu {
-    display: block;
-  }
-  .nav-pills li.disabled {
-    display: block;
-    margin: 2px 0;
-    padding: 8px 12px;
-    line-height: 14px;
-  }
-  .box-footer .footer-pagination {
-    float: right;
-    .nav {
-      margin-bottom: 0;
-    }
-    .dropdown {
-      margin-top: 3px;
-    }
-    .dropdown select {
-      width: 60px;
-    }
-  }
-  .collapsed-list {
-    padding-left: 10px;
-  }
-  .host-table-versions {
-    div.collapsed-list {
-      padding-left: 17px;
-    }
-  }
-}
-
-#host-warnings {
-  .notice {
-    padding-bottom: 20px;
-  }
-  .code-snippet {
-    margin: 10px 0;
-    white-space:normal;
-  }
-  .warnings-list {
-    .block {
-      table {
-        width: 100%;
-        td, th {
-          text-align: left;
-          padding-left: 15px;
-        }
-        thead tr:first-child th {
-          font-weight: normal;
-        }
-      }
-    margin-top: 10px;
-    }
-  }
-  .glyphicon-warning-sign {
-    color: @health-status-yellow;
-  }
-}
-
-.host-checks-update {
-  button {
-    margin-left: 5px;
-  }
-  .update-progress {
-    width: 230px;
-    .progress {
-      margin-bottom: 0;
-    }
-  }
-}
-
-#host-details {
-
-
-  .status-info {
-    .host-title {
-      font-size: 18px;
-      font-weight: 700;
-      background-position: 0 center;
-      padding-left: 17px;
-    }
-    .host-maintenance-notice {
-      background-color: #E4E4E4;
-      border: 1px solid #D4D4D4;
-      color: #333;
-      padding: 8px 35px 8px 14px;
-      border-radius: 4px;
-    }
-  }
-
-  .caret {
-    border-top-color: #000;
-    border-bottom-color: #000;
-  }
-
-  .components-health.glyphicon-arrow-up {
-    color:@health-status-red;
-  }
-
-  .health-status-started, .health-status-starting, .health-status-LIVE,
-  .health-status-installed, .health-status-stopping, .health-status-DEAD-RED,
-  .health-status-unknown, .health-status-DEAD-YELLOW,
-  .health-status-DEAD-ORANGE {
-    background-repeat: no-repeat;
-    height: 13px;
-    width: 13px;
-    display: inline !important;
-    float: none !important;
-  }
-
-  .host-details-summary-list {
-    .summary-label {
-      text-align: right;
-      font-weight: 700;
-    }
-  }
-
-  .host-metrics {
-    .chart-container {
-      .chart-x-axis {
-        left: 30%;
-        width: 40%;
-      }
-    }
-  }
-
-  .host-components {
-    padding: 10px;
-    border-radius: 4px;
-    background: #FFF;
-    .component-name-block-wrapper {
-      display: table;
-      height: 34px;
-      .component-name-block {
-        white-space: normal;
-        word-wrap: break-word;
-        display: table-cell;
-        vertical-align: middle;
-      }
-
-    }
-    .dropdown-menu {
-      .disabled {
-        pointer-events: none;
-        color: #808080;
-        cursor: default;
-      }
-      .allow-tooltip {
-        pointer-events: auto;
-      }
-    }
-    .status-icons {
-      line-height: 34px;
-    }
-    .client-list {
-      ul {
-        list-style: none;
-      }
-    }
-    &>.row {
-      padding-bottom: 10px;
-    }
-  }
-
-  .logs-tab-content {
-    a.external-link {
-      font-size: @smaller-font-size;
-    }
-  }
-  .host-stack-version-status {
-    .label {
-      font-size: 14px;
-    }
-  }
-
-  .logs-tab-content {
-    .table {
-      table-layout: auto;
-    }
-  }
-}
-
-.services-menu {
-  .glyphicon-refresh {
-    margin-left: 4px;
-  }
-}
-#hosts{
-  .alerts-crit-count, .alerts-warn-count {
-    float: right;
-  }
-}
-
-/*End Hosts*/
-
-/*Start Admin*/
-.header {
-  margin-bottom: 20px;
-}
-
- .btn-padding {
-   margin-left: 20px
- }
-
-.admin-auto-start {
-  .bootstrap-switch {
-    margin-left: 20px;
-  }
-  .nav i {
-    margin-top: 0;
-    color: @green;
+  .warning-list {
+    font-size: 0.95em;
+    font-style: italic;
   }
 }
 
-.admin-user-settings {
-  hr {
-    margin: 5px 0;
-  }
-  select {
-    width: 100%;
-  }
-  .setting-wrapper {
-    margin-bottom: 20px;
-  }
-}
-/*End Admin*/
-
-
-/*Start About*/
-.about {
-  .project {
-    font-weight: bold;
-    font-size: 2em;
-  }
-}
-/*End About*/
-
-/*assign masters*/
-
-.assign-masters {
-  .select-hosts {
-    white-space: nowrap;
-    .help-block {
-      white-space: normal;
-    }
-  }
-
-  label.host-name {
-    padding-top: 5px;
-  }
-
-  .remaining-hosts {
-    padding: 25px;
-    border-top: solid 1px #ccc;
-    border-left: solid 1px #ccc;
-    border-right: groove 5px #ccc;
-    border-bottom: groove 5px #ccc;
-    margin-top: 20px;
-    background-color: #FCF8E3;
-    color: #C09853;
-  }
-
-  .host-assignments .mapping-box {
-    border: solid 1px #ccc;
-    padding: 8px;
-    margin-bottom: 10px;
-    background-color: #fafafa;
-  }
-
-  .host-assignments {
-    .service-component {
-      white-space: nowrap;
-      font-size: 0.9em;
-      display: inline-block;
-      margin: 2px;
-    }
-    .new-service {
-      background-color: @green;
-    }
-  }
-
-  .host-assignments .grey {
-    background-color: #808080;
-    border: solid 1px #000;
+.services-menu {
+  .glyphicon-refresh {
+    margin-left: 4px;
   }
+}
 
-  .form-horizontal .control-label {
-    white-space: normal;
-    width: 120px;
-    padding-right: 10px;
-  }
+/*Start Admin*/
+ .btn-padding {
+   margin-left: 20px
+ }
 
-  .form-horizontal .control-group select {
-    width: 85%;
-    min-width: 100px;
-    max-width: 250px;
+.admin-auto-start {
+  .nav i {
+    margin-top: 0;
+    color: @green;
   }
+}
 
-  .hostName {
-    word-wrap: break-word!important;
-    white-space: normal;
-    width: 220px;
-    line-height: 30px;
-    display: inline-block;
-  }
-  .hostString {
-    margin-bottom: 5px;
-    word-wrap: break-word;
+.admin-user-settings {
+  hr {
+    margin: 5px 0;
   }
-
-  .badge {
-    background-color: @green;
-    color: #fff;
-    cursor: pointer;
-    font-weight: bold;
-    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+  select {
+    width: 100%;
   }
-
-  .badge:hover {
-    background-color: @green;
+  .setting-wrapper {
+    margin-bottom: 20px;
   }
+}
+/*End Admin*/
 
-  .alertFlag {
-    font-size: 1.3em;
-    color: #B94A48;
+/*Start About*/
+.about {
+  .project {
     font-weight: bold;
-    vertical-align: middle;
-  }
-
-  .additional-hosts-list {
-    margin-bottom: 15px;
-    .host-cell {
-      line-height: 30px;
-    }
+    font-size: 2em;
   }
 }
-
-/*end assign masters*/
+/*End About*/
 
 /*Dashboard*/
 .alerts-count {
@@ -3411,13 +1654,10 @@ ul.filter {
   padding: 10px;
 }
 
-#main-admin-menu {
-  padding: 8px 0;
-}
-
 .button-caret-margin {
   margin-top: 8px;
 }
+
 /*start charts rack*/
 .rack {
   vertical-align: top;
@@ -3559,8 +1799,6 @@ ul.filter {
 
 /*Start Heatmap*/
 .heatmap {
-  padding-top: 10px;
-
   li.heatmap-metrics-dropdown-links{
     cursor: pointer;
   }
@@ -3759,6 +1997,7 @@ ul.inline li {
 .lowercase {
   text-transform:lowercase;
 }
+
 .ellipsis:after {
   content: '...';
 }
@@ -3773,11 +2012,6 @@ ul.inline li {
   text-overflow: ellipsis;
 }
 
-.big-arrow-right {
-  background-repeat: no-repeat;
-  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFcAAAA2CAQAAAAYac0YAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAAFxIAABcSAWef0lIAAAC8SURBVGje7dfBDcIwDIXhv4h7uwmMkA1YjZGyQcMktBO0l6oEDhBQJMfoPZ9y8qcosmKonZ6RpaDunKr3FlhggQUWWGCBBRZYYOsI3Cy4Y7G2v81E4PY4Hqw9HzIQ8xtunfsCbp/7BPbAzcA+uDu49cmQZyJ44kL0xE0EL28XEoHZCzcRmL1Mhg3rg7tjPXAzLByJJoiB8/dYq5T+d0d6a6qwwgorrLDCCiussMIK+x/Yrjr3UriFXX/ZwVZCWg1F9uJ6aQAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxNC0wNy0yM1QxMzoxNzowNyswMjowMP0r3LUAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTQtMDctMjNUMTM6MTc6MDcrMDI6MDCMdmQJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAABJRU5ErkJggg==);
-}
-
 .advanced-header-table {
   table-layout: fixed;
 
@@ -3891,49 +2125,6 @@ ul.inline li {
 
 /* TIME RANGE WIDGET */
 
-/* start css for timepicker */
-.ui-timepicker-div .ui-widget-header {
-  margin-bottom: 8px;
-}
-
-.ui-timepicker-div dl {
-  text-align: left;
-}
-
-.ui-timepicker-div dl dt {
-  height: 25px;
-  margin-bottom: -25px;
-}
-
-.ui-timepicker-div dl dd {
-  margin: 0 10px 10px 65px;
-}
-
-.ui-timepicker-div td {
-  font-size: 90%;
-}
-
-.ui-tpicker-grid-label {
-  background: none;
-  border: none;
-  margin: 0;
-  padding: 0;
-}
-
-.ui-timepicker-rtl {
-  direction: rtl;
-}
-
-.ui-timepicker-rtl dl {
-  text-align: right;
-}
-
-.ui-timepicker-rtl dl dd {
-  margin: 0 65px 10px 10px;
-}
-
-/* end css for timepicker */
-
 #slider {
   margin: 10px 0 40px;
   width: 330px;
@@ -3980,46 +2171,6 @@ ul.inline li {
 
 /* End Carousel*/
 
-#add-host .back {
-  display: block;
-  width: 105px;
-  margin-bottom: 10px;
-}
-
-#add-service .back {
-  display: block;
-  width: 130px;
-  margin-bottom: 10px;
-}
-
-#step8-content {
-  ul {
-    li {
-      list-style: none;
-    }
-  }
-  max-height: 440px;
-}
-
-.log_popup {
-  .bar {
-    -webkit-transition: width 0.0s ease;
-    -moz-transition: width 0.0s ease;
-    -ms-transition: width 0.0s ease;
-    -o-transition: width 0.0s ease;
-    transition: width 0.0s ease;
-  }
-}
-
-#step10-content {
-  ul {
-    li {
-      list-style: none;
-    }
-  }
-  max-height: 440px;
-}
-
 .content-area {
   position: relative;
   .textTrigger {
@@ -4041,139 +2192,6 @@ ul.inline li {
   position: static;
 }
 
-// COMBOBOX FIXES END
-@media all and (max-width: 2560px) {
-  #hosts {
-    .table {
-      .col2,
-      td:first-child + td,
-      th:first-child + th {
-        width: 15%!important;
-
-        .filter-input-width{
-          width:75%;
-        }
-      }
-
-      .col4,
-      td:first-child + td + td + td,
-      th:first-child + th + th + th{
-        width: 1.4%;
-      }
-
-      .col5,
-      td:first-child + td + td + td + td,
-      th:first-child + th + th + th + th {
-        width: 11.7%!important;
-      }
-
-      .col6,
-      td:first-child + td + td + td + td + td,
-      th:first-child + th + th + th + th + th{
-        width: 9%!important;
-      }
-
-      .col7,
-      td:first-child + td + td + td + td + td + td,
-      th:first-child + th + th + th + th + th + th{
-        width: 9%!important;
-      }
-
-      .col8,
-      td:first-child + td + td + td + td + td + td + td,
-      th:first-child + th + th + th + th + th + th + th{
-        width: 9%!important;
-      }
-      .col9,
-      td:first-child + td + td + td + td + td + td + td + td,
-      th:first-child + th + th + th + th + th + th + th + th{
-        width: 9%!important;
-      }
-      .col11,
-      .col12,
-      td:first-child + td + td + td + td + td + td + td + td + td + td,
-      th:first-child + th + th + th + th + th + th + th + th + th +th,
-      td:first-child + td + td + td + td + td + td + td + td + td + td + td,
-      th:first-child + th + th + th + th + th + th + th + th + th + th +th{
-        width: 11.2%!important;
-      }
-      td.name .trim_hostname{
-        width: 82%!important;
-      }
-    }
-  }
-
-  .wizard-content {
-    #serviceConfig {
-      .nav-tabs {
-        margin-bottom: 20px;
-      }
-      .alert {
-        padding-right: 10px!important;
-      }
-    }
-    .filter-combobox {
-      > input {
-        width: 115px!important;
-      }
-    }
-  }
-}
-
-@media (max-width: 992px) {
-  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
-    float: left;
-  }
-  .col-md-12 {
-    width: 100%;
-  }
-  .col-md-11 {
-    width: 91.66666667%;
-  }
-  .col-md-10 {
-    width: 83.33333333%;
-  }
-  .col-md-9 {
-    width: 75%;
-  }
-  .col-md-8 {
-    width: 66.66666667%;
-  }
-  .col-md-7 {
-    width: 58.33333333%;
-  }
-  .col-md-6 {
-    width: 50%;
-  }
-  .col-md-5 {
-    width: 41.66666667%;
-  }
-  .col-md-4 {
-    width: 33.33333333%;
-  }
-  .col-md-3 {
-    width: 25%;
-  }
-  .col-md-2 {
-    width: 16.66666667%;
-  }
-  .col-md-1 {
-    width: 8.33333333%;
-  }
-}
-
-//
-// Gray palette
-//
-.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
-  background-color: #666;
-}
-
-.nav-list > li.active > a, .nav-list > li.active > a:hover {
-  background-color: #666;
-  color: #fff;
-}
-
 li.break {
   background: none repeat scroll 0 0 #e4e4e4;
   padding-top: 1px;
@@ -4196,14 +2214,6 @@ li.break {
   }
 }
 
-.modal-body {
-  .api-error {
-    max-height: 403px;
-    word-wrap:break-word;
-    overflow: auto;
-  }
-}
-
 i.glyphicon-asterisks {
   color: #00688B;
 }
@@ -4233,73 +2243,8 @@ i.glyphicon-asterisks {
   white-space: normal;
 }
 
-//styles for screen width more than 1200px
 @media (min-width: 1200px) {
 
-  .row {
-    *zoom: 1;
-  }
-
-  .row:before,
-  .row:after {
-    line-height: 0;
-  }
-
-  .row:after {
-    clear: both;
-  }
-
-  .navbar-fixed-top .container,
-  .navbar-fixed-bottom .container {
-    width: 1130px;
-  }
-
-  .main-container {
-    width: 1170px;
-  }
-
-  .thumbnails {
-    margin-left: -30px;
-  }
-
-  .thumbnails > li {
-    margin-left: 30px;
-  }
-
-  .row .thumbnails {
-    margin-left: 0;
-    margin-right: 0;
-  }
-
-
-  #dashboard-widgets-container{
-
-    #dashboard-widgets {
-      .span2p4 {
-        float: left;
-        width: 19.47%;
-        *width: 19.47%;
-      }
-      .thumbnails > div {
-        margin-right: 5px;
-      }
-      .img-thumbnail {
-        .caption, .hidden-info-two-line, .hidden-info-three-line {
-          font-size: 14px;
-        }
-        .hidden-info-five-line, .hidden-info-six-line {
-          font-size: 12px;
-        }
-      }
-      .links .img-thumbnail {
-        .widget-content {
-          font-weight: bold;
-          font-size: 12px;
-        }
-      }
-    }
-  }
-
   .summary-metric-graphs {
     .chart-container {
       .chart-x-axis {
@@ -4381,14 +2326,6 @@ input[type="radio"].align-checkbox, input[type="checkbox"].align-checkbox {
   .group-select {
     height: 250px;
   }
-
-  .manage-configuration-group-content {
-    .group-description {
-      height:40px;
-      overflow-y: auto;
-      white-space: pre;
-    }
-  }
 }
 
 .new-config-group-div {
@@ -4459,12 +2396,11 @@ input[type="radio"].align-checkbox, input[type="checkbox"].align-checkbox {
     opacity: .9;
   }
 }
+
 .margin-bottom-5 {
   margin-bottom: 5px;
 }
-.line-height-30 {
-  line-height: 30px;
-}
+
 .rolling-restart-view {
   table {
     td:first-of-type {
@@ -4524,6 +2460,7 @@ input[type="radio"].align-checkbox, input[type="checkbox"].align-checkbox {
     padding-left: 20px;
   }
 }
+
 .views_sizes {
   width:100%;
   min-height:100%;
@@ -4872,16 +2809,6 @@ input[type="radio"].align-checkbox, input[type="checkbox"].align-checkbox {
   }
 }
 
-[class^="glyphicon-"],
-[class*="glyphicon-"] {
-  &.glyphicon .glyphicon-blue {
-    color: @blue;
-  }
-  &:hover {
-    text-decoration: none;
-  }
-}
-
 .icon-undo {
   color: #F3B20B;
 }
@@ -4890,52 +2817,6 @@ input[type="radio"].align-checkbox, input[type="checkbox"].align-checkbox {
   padding-top: 40px;
 }
 
-.enable-all-link {
-  margin-left: -10px;
-}
-
-#select-stack .stack-version-selection{
-  .select-version-label {
-    padding: 5px 25px;
-  }
-  .right-stack-info {
-    margin-left: 0;
-    .available-repos-dropdown {
-      a, a.disbled{
-        cursor: pointer;
-      }
-      a.disabled{
-        color: #999;
-        background: none;
-      }
-    }
-  }
-}
-#select-stack .stack-version-selection.disabled{
-  .select-version-label {
-    color: #999;
-  }
-}
-
-.public-disabled-message {
-  padding: 5px;
-}
-.public-disabled-option {
-  padding: 5px;
-  padding-left: 15px;
-}
-#select-stack {
-  .big-radio {
-    &.disabled>span{
-      opacity: 0.7;
-    }
-  }
-  #public-disabled-link {
-    margin-left: 10px;
-    font-weight: normal;
-    cursor: pointer;
-  }
-}
 .register-version-options {
   input.disabled {
     background-color: #eee;
@@ -4944,55 +2825,7 @@ input[type="radio"].align-checkbox, input[type="checkbox"].align-checkbox {
     margin-bottom: 10px;
   }
 }
-#select-stack {
-  .panel-heading {
-    font-weight: bold;
-    p {
-      margin-bottom: 0;
-      display: block;
-    }
-  }
-  .details-panel .patch-icon {
-    color: #ff4500;
-  }
-  .details-panel .version-contents-section {
-    border: 1px solid #ddd;
-    max-height: 200px;
-    overflow: auto;
-    margin: 8px 0;
-    .table {
-      margin-bottom: 0;
-      tr:first-child td {
-        border-top: none;
-      }
-    }
-  }
-  .repos-panel {
-    .remove-icon {
-      color: red;
-      margin: 20px 0 0 0;
-      padding: 0;
-      text-align: center;
-      cursor: pointer;
-      &.disabled {
-        color: grey;
-      }
-    }
-    .repos-inner-table {
-      margin-bottom: 0;
-      background-color: transparent;
-    }
-    .repo-url input {
-      width: 90%;
-      height: 24px;
-    }
-    #skip-validation, #use-redhat {
-      span.disabled {
-        opacity: 0.7;
-      }
-    }
-  }
-}
+
 #combo_search_box {
   .VS-search {
     .VS-search-box {
@@ -5048,3 +2881,7 @@ input[type="radio"].align-checkbox, input[type="checkbox"].align-checkbox {
     }
   }
 }
+
+.side-menu-well {
+  padding: 8px 0;
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ambari/blob/945e5d4d/ambari-web/app/styles/bootstrap_overrides.less
----------------------------------------------------------------------
diff --git a/ambari-web/app/styles/bootstrap_overrides.less b/ambari-web/app/styles/bootstrap_overrides.less
index dd427cb..97c25ab 100644
--- a/ambari-web/app/styles/bootstrap_overrides.less
+++ b/ambari-web/app/styles/bootstrap_overrides.less
@@ -16,12 +16,59 @@
  * limitations under the License.
  */
 
+@import 'common.less';
+
 @bootstrap-success: #5cb85c;
 @bootstrap-info: #5bc0de;
 @bootstrap-warning: #f0ad4e;
 @bootstrap-danger: #d9534f;
 @bootstrap-primary: #337ab7;
 
+.@{health-status-red-icon} {
+  color: @health-status-red;
+}
+.@{health-status-green-icon} {
+  color: @health-status-green;
+}
+.@{health-status-yellow-icon} {
+  color: @health-status-yellow;
+}
+.@{health-status-orange-icon} {
+  color: @health-status-orange;
+}
+.@{maintenance-icon} {
+  color: @maintenance-black;
+}
+
+select.form-control {
+  display: inline-block;
+}
+
+.form-group {
+  .help-block {
+    &.help-inline {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.popover {
+  small {
+    font-size: 1.3rem;
+  }
+}
+
+.alert {
+  & > ul, ol {
+    padding-left: inherit;
+  }
+}
+
+.dropdown-toggle.btn-icon {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+
 .label {
   background: #999;
 
@@ -64,4 +111,251 @@
       line-height: 34px;
     }
   }
+}
+
+.form-control {
+  float: none;
+}
+
+[class^="glyphicon-"],
+[class*="glyphicon-"] {
+  &.glyphicon .glyphicon-blue {
+    color: @blue;
+  }
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+
+.tooltip {
+  z-index: 10000;
+}
+
+.tooltip-inner {
+  text-align: left;
+  max-width: 400px;
+  overflow-wrap: break-word;
+  white-space:pre-wrap;
+  &.alert-def-detail-tooltip {
+    max-height: 300px;
+    max-width: 650px;
+    overflow: scroll;
+  }
+  &.graph-tooltip {
+    max-width: 200px;
+  }
+}
+
+.popover {
+  z-index: 10000;
+  width: 350px;
+  .popover-inner {
+    word-wrap: break-word;
+  }
+}
+
+.text-tooltip {
+  border-bottom: 1px silver dotted;
+  cursor: pointer;
+}
+
+.well {
+  border-radius: 0;
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
+
+.table-bordered {
+  border-radius: 0;
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
+  thead:first-child tr:first-child th:first-child,
+  tbody:first-child tr:first-child td:first-child,
+  thead:first-child tr:first-child th:last-child,
+  tbody:first-child tr:first-child td:last-child {
+    -webkit-border-top-left-radius: 0;
+    border-top-left-radius: 0;
+    -moz-border-radius-topleft: 0;
+    -webkit-border-top-right-radius: 0;
+    border-top-right-radius: 0;
+    -moz-border-radius-topright: 0;
+  }
+}
+
+.img-thumbnail {
+  border-radius: 0;
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
+  line-height: 20px;
+}
+
+.dropdown-menu,
+.dropdown-submenu > .dropdown-menu,
+.dropdown-menu-wrap > .dropdown-menu,
+.nav-pills .dropdown-menu,
+.nav-pills > li > a,
+.nav-tabs > li > a,
+.panel-group {
+  border-radius: 0;
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
+}
+.submenu-left {
+  > .dropdown-menu-wrap {
+    position: relative;
+    width: 100%;
+    left: -100%;
+    > .dropdown-menu {
+      position: absolute;
+      top: 0;
+      right: -10px;
+      margin-top: -32px;
+    }
+  }
+  &:hover {
+    > .dropdown-menu-wrap {
+      > .dropdown-menu {
+        display: inline-block;
+      }
+    }
+  }
+}
+
+.dropdown-submenu {
+  position: relative;
+}
+
+.dropdown-submenu > .dropdown-menu {
+  top: 0;
+  left: 100%;
+  margin-top: -6px;
+  margin-left: -1px;
+}
+
+.dropdown-submenu:hover > .dropdown-menu {
+  display: block;
+}
+
+.dropdown-submenu > a:after {
+  display: block;
+  content: " ";
+  float: right;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+  border-width: 5px 0 5px 5px;
+  border-left-color: #333;
+  margin-top: 5px;
+  margin-right: -10px;
+}
+
+.dropdown-submenu:hover > a:after {
+  border-left-color: #333;
+}
+
+.dropdown-submenu.pull-left {
+  float: none;
+}
+
+.dropdown-submenu.pull-left > .dropdown-menu {
+  left: -100%;
+  margin-left: 10px;
+}
+
+.dropdown-submenu > a.disabled:after {
+  border-left-color: #ccc;
+}
+
+.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
+  background-color: #666;
+}
+
+.nav-list > li.active > a, .nav-list > li.active > a:hover {
+  background-color: #666;
+  color: #fff;
+}
+
+@media (max-width: 992px) {
+  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
+    float: left;
+  }
+  .col-md-12 {
+    width: 100%;
+  }
+  .col-md-11 {
+    width: 91.66666667%;
+  }
+  .col-md-10 {
+    width: 83.33333333%;
+  }
+  .col-md-9 {
+    width: 75%;
+  }
+  .col-md-8 {
+    width: 66.66666667%;
+  }
+  .col-md-7 {
+    width: 58.33333333%;
+  }
+  .col-md-6 {
+    width: 50%;
+  }
+  .col-md-5 {
+    width: 41.66666667%;
+  }
+  .col-md-4 {
+    width: 33.33333333%;
+  }
+  .col-md-3 {
+    width: 25%;
+  }
+  .col-md-2 {
+    width: 16.66666667%;
+  }
+  .col-md-1 {
+    width: 8.33333333%;
+  }
+}
+
+@media (min-width: 1200px) {
+
+  .row {
+    *zoom: 1;
+  }
+
+  .row:before,
+  .row:after {
+    line-height: 0;
+  }
+
+  .row:after {
+    clear: both;
+  }
+
+  .navbar-fixed-top .container,
+  .navbar-fixed-bottom .container {
+    width: 1130px;
+  }
+
+  .main-container {
+    width: 1170px;
+  }
+
+  .thumbnails {
+    margin-left: -30px;
+  }
+
+  .thumbnails > li {
+    margin-left: 30px;
+  }
+
+  .row .thumbnails {
+    margin-left: 0;
+    margin-right: 0;
+  }
 }
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ambari/blob/945e5d4d/ambari-web/app/styles/common.less
----------------------------------------------------------------------
diff --git a/ambari-web/app/styles/common.less b/ambari-web/app/styles/common.less
index 8099e8a..5541d7c 100644
--- a/ambari-web/app/styles/common.less
+++ b/ambari-web/app/styles/common.less
@@ -56,23 +56,6 @@
 @spinner-small-width: 30px;
 @spinner-small-height: 30px;
 
-.@{health-status-red-icon} {
-  color: @health-status-red;
-}
-.@{health-status-green-icon} {
-  color: @health-status-green;
-}
-.@{health-status-yellow-icon} {
-  color: @health-status-yellow;
-}
-.@{health-status-orange-icon} {
-  color: @health-status-orange;
-}
-.@{maintenance-icon} {
-  color: @maintenance-black;
-}
-
-
 @restart-indicator-color: #FDB82F;
 
 @top-nav-bg-color-from: #555;

http://git-wip-us.apache.org/repos/asf/ambari/blob/945e5d4d/ambari-web/app/styles/dashboard.less
----------------------------------------------------------------------
diff --git a/ambari-web/app/styles/dashboard.less b/ambari-web/app/styles/dashboard.less
new file mode 100644
index 0000000..c170894
--- /dev/null
+++ b/ambari-web/app/styles/dashboard.less
@@ -0,0 +1,350 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import 'common.less';
+
+#dashboard-widgets-container{
+  #widgets-options-menu {
+    .add-widgets-text .dropdown-menu {
+      overflow: auto;
+      width: 210px;
+    }
+  }
+
+  #dashboard-widgets {
+    .caption {
+      height: 25px;
+    }
+    .spinner {
+      margin: 55px auto;
+    }
+    .chart-container {
+      .spinner {
+        margin: 15px auto 35px;
+      }
+    }
+    .span2p4 {
+      float: left;
+      width: 19.60%;
+      *width: 19.60%;
+    }
+    .thumbnails > div {
+      margin: 0 3px 3px 0;
+      height: 163px;
+    }
+    .thumbnails li {
+      height: 160px;
+      width: 100%;
+      margin: 3px 3px 0 0;
+    }
+
+    .img-thumbnail .corner-icon {
+      display: none;
+      position: relative;
+      padding: 7px 0;
+      .glyphicon-remove-sign{
+        color: #000;
+        text-shadow: #fff 0 0 15px;
+        position: absolute;
+        left: -10px;
+        top: -10px;
+      }
+      .glyphicon-edit, .glyphicon-save {
+        color: #555;
+      }
+    }
+    .export-graph-list {
+      top: 30px;
+      li {
+        margin: 0;
+        height: auto;
+      }
+    }
+    .img-thumbnail .hidden-info-general{
+      color: #555;
+      font-size: 12px;
+      font-weight: bold;
+      text-align: center;
+      text-decoration: none;
+      display: none;
+      position: relative;
+      z-index: 7;
+    }
+    .hidden-info-two-line{
+      padding-top: 60px;
+    }
+    .hidden-info-three-line{
+      padding-top: 50px;
+    }
+    .hidden-info-five-line{
+      padding-top: 40px;
+      tr > td {
+        line-height: 18px;
+      }
+    }
+    .hidden-info-six-line{
+      padding-top: 37px;
+      tr > td {
+        line-height: 16px;
+      }
+    }
+    .img-thumbnail .caption {
+      padding: 7px 0;
+      color: #555;
+      font-weight:bold;
+      font-size: 12px;
+      text-align: left;
+      position: relative;
+    }
+    .img-thumbnail .widget-content{
+      text-align: center;
+      font-size: 35px;
+      padding-top: 40px; //svg
+      position: relative;
+      .disabled-hdfs-link {
+        pointer-events: none;
+        color: grey;
+        cursor: default;
+      }
+      .screensaver{ // graph onload wait
+        width: 90%;
+        height: 105px;
+        border: 1px solid silver;
+        color: #fff;
+        i {
+          font-size: inherit;
+        }
+      }
+    }
+    .img-thumbnail .widget-content-isNA{ // for pie chart n\a
+      text-align: center;
+      font-size: 35px;
+      color: #D6DDDF;
+      padding-top: 70px;
+      font-weight: bold;
+      position: relative;
+    }
+    .img-thumbnail{
+      background-color: #fff;
+      z-index: 3;
+    }
+    .has-hidden-info {
+      ul {
+        margin: 0;
+      }
+    }
+    .has-hidden-info .img-thumbnail:hover {
+      cursor: move;
+      .corner-icon{
+        display:block;
+        text-decoration: none;
+        z-index: 9;
+      }
+      .hidden-info-general{
+        display: block;
+      }
+      .caption{
+        margin-left: -10px;
+        z-index: 7;
+      }
+      .slots-caption{
+        margin-left: -13px;
+        z-index: 7;
+      }
+      .content-mx(@top) {
+        top: @top;
+        opacity: 0.3;
+        z-index: 5;
+      }
+      .widget-content, .widget-content-isNA {
+        .content-mx(-104px);
+      }
+      .uptime-content{
+        top: -116px;
+      }
+      .uptime-content-isNA{
+        top: -95px;
+      }
+      .slots-content-isNA{
+        top: -82px;
+      }
+      .content-hidden-two-line{
+        .content-mx(-105px);
+      }
+      .content-hidden-three-line{
+        .content-mx(-116px);
+      }
+      .content-hidden-four-line{
+        .content-mx(-126px);
+      }
+      .content-hidden-five-line{
+        .content-mx(-140px);
+      }
+      .content-hidden-six-line{
+        .content-mx(-143px);
+      }
+    }
+
+    .cluster-metrics {
+      position: relative;
+      .chart-container{
+        margin: 0 10px;
+        .chart-y-axis{
+          margin-top: 10px;
+        }
+        .chart svg{
+          margin-right: 20px;
+        }
+        .rickshaw_legend{
+          padding-top: 3px;
+        }
+        .chart-legend {
+          top: 120px;
+          left:15px;
+          text-align: left;
+          z-index: 3;
+          ul >li{
+            max-height: 10px;
+          }
+        }
+      }
+      &> ul {
+        margin:0;
+      }
+      .alert {
+        padding: 0;
+        font-size: 12px;
+      }
+      .img-thumbnail:hover {
+        cursor: move;
+        .corner-icon {
+          display:block;
+          text-decoration: none;
+          z-index: 9;
+        }
+        .caption {
+          margin-left: -10px;
+        }
+      }
+    }
+
+    .links .img-thumbnail{
+      li{
+        height:20px;
+      }
+      .link-button{
+        float: right;
+        .disabled-hdfs-quick-link {
+          pointer-events: none;
+          color: #808080;
+          cursor: default;
+        }
+      }
+
+      .widget-content{
+        text-align: center;
+        font-size: 11px;
+        color: #555;
+        padding-top: 40px;
+        table{
+          vertical-position: center;
+          text-align: center;
+          margin-left:auto;
+          margin-right:auto;
+        }
+        td{
+          padding-top: 2px;
+        }
+      }
+    }
+    .links .img-thumbnail:hover{
+      cursor: move;
+      .corner-icon{
+        display:block;
+        text-decoration: none;
+        z-index: 9;
+      }
+      .caption{
+        margin-left: -10px;
+      }
+    }
+    .img-thumbnail .widget-content .svg {
+      position: relative;
+    }
+
+    .widget-cn(@color) {
+      color: @color;
+      padding-top: 70px;
+      font-weight: bold;
+    }
+    .is-red{
+      .widget-content {
+        .widget-cn(@health-status-red);
+      }
+    }
+    .is-orange{
+      .widget-content {
+        .widget-cn(@health-status-orange);
+      }
+    }
+    .is-green {
+      .widget-content {
+        .widget-cn(@health-status-green);
+      }
+    }
+    .is-na {
+      position: relative;
+      .widget-content {
+        .widget-cn(#D6DDDF);
+        text-shadow: none;
+      }
+    }
+  }
+}
+
+@media (min-width: 1200px) {
+
+  #dashboard-widgets-container {
+
+    #dashboard-widgets {
+      .span2p4 {
+        float: left;
+        width: 19.47%;
+        *width: 19.47%;
+      }
+      .thumbnails > div {
+        margin-right: 5px;
+      }
+      .img-thumbnail {
+        .caption, .hidden-info-two-line, .hidden-info-three-line {
+          font-size: 14px;
+        }
+        .hidden-info-five-line, .hidden-info-six-line {
+          font-size: 12px;
+        }
+      }
+      .links .img-thumbnail {
+        .widget-content {
+          font-weight: bold;
+          font-size: 12px;
+        }
+      }
+    }
+  }
+
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ambari/blob/945e5d4d/ambari-web/app/styles/hosts.less
----------------------------------------------------------------------
diff --git a/ambari-web/app/styles/hosts.less b/ambari-web/app/styles/hosts.less
new file mode 100644
index 0000000..0dde61d
--- /dev/null
+++ b/ambari-web/app/styles/hosts.less
@@ -0,0 +1,494 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import 'common.less';
+
+#hosts {
+
+  .alerts-crit-count, .alerts-warn-count {
+    float: right;
+  }
+
+  .bulk-menu {
+    a {
+      &.disabled {
+        color: gray;
+      }
+    }
+  }
+
+  .filters-label {
+    display: block;
+    float: left;
+    padding-right: 10px;
+  }
+
+  #hosts-table {
+    margin-top: 10px;
+    margin-bottom: 10px;
+
+    .set-rack-id {
+      text-decoration: none;
+    }
+
+    .host-select-all {
+      margin-bottom: -1px ;
+    }
+  }
+
+  .health-status-HEALTHY,
+  .health-status-LIVE,
+  .health-status-DEAD-RED,
+  .health-status-DEAD-ORANGE,
+  .health-status-DEAD-YELLOW {
+    background-position: center;
+    background-repeat: no-repeat;
+    height: 20px;
+    width: 13px;
+    display: inline !important;
+    float: none !important;
+    margin-right: 1px;
+    margin-left: 1px;
+  }
+  .icon-exclamation-sign,
+  .glyphicon-refresh {
+    margin-right: 1px;
+    margin-left: 1px;
+  }
+
+  .passive-state {
+    color: #000;
+  }
+  .alerts-status {
+    padding: 1px 6px !important;
+    &:before {
+      content: "!";
+    }
+  }
+  .host-name-search {
+    position: relative;
+    top: 0;
+    left: 10px;
+  }
+  .host-name-pos {
+    position: relative;
+    top: 10px;
+  }
+  .progress {
+    margin-bottom: 0;
+  }
+  .filter-input-width{
+    width: ~"calc(100% - 20px)";
+
+    &.rack-input {
+      width: 85%;
+    }
+  }
+  .table {
+    input[type="checkbox"] {
+      margin: -2px 0 0 0;
+    }
+    th {
+      padding-left: 6px;
+    }
+    .col0,.col1,
+    td:first-child,
+    th:first-child,
+    td:last-child,
+    th:last-child {
+      padding-left: 4px!important;
+      padding-right: 1px!important;
+      padding-right: 10px\9!important;
+      width: 1.5%;
+      width: 13px\9!important;
+      input {
+        vertical-align: middle;
+      }
+    }
+    .col2,
+    td:first-child + td,
+    th:first-child + th{
+      width: 20%;
+      padding-right: 1px;
+    }
+    .col3, .col4,
+    td:first-child + td + td,
+    th:first-child + th + th,
+    td:first-child + td + td + td,
+    th:first-child + th + th + th{
+      padding-left: 1px!important;
+      padding-right: 1px!important;
+      width: 1.5%;
+      width: 13px\9!important;
+    }
+    .col5,
+    td:first-child + td + td + td + td,
+    th:first-child + th + th + th + th {
+      width: 10%!important;
+    }
+    .col6,
+    td:first-child + td + td + td + td + td,
+    th:first-child + th + th + th + th + th {
+      width: 13%!important;
+    }
+    .col7,
+    td:first-child + td + td + td + td + td + td,
+    th:first-child + th + th + th + th + th + th{
+      width: 5%!important;
+    }
+
+    .col8,
+    td:first-child + td + td + td + td + td + td + td,
+    th:first-child + th + th + th + th + th + th + th{
+      width: 6%!important;
+    }
+
+    .col9,
+    td:first-child + td + td + td + td + td + td + td + td,
+    th:first-child + th + th + th + th + th + th + th + th{
+      width: 9%!important;
+    }
+
+    .col10,
+    td:first-child + td + td + td + td + td + td + td + td + td,
+    th:first-child + th + th + th + th + th + th + th + th + th{
+      width: 9%!important;
+    }
+
+    .col11,
+    td:first-child + td + td + td + td + td + td + td + td + td + td,
+    th:first-child + th + th + th + th + th + th + th + th + th +th{
+      width: 11%!important;
+      a {
+        word-wrap: break-word;
+      }
+    }
+
+    .col12,
+    td:first-child + td + td + td + td + td + td + td + td + td + td + td,
+    th:first-child + th + th + th + th + th + th + th + th + th + th +th{
+      width: 11%!important;
+    }
+
+    td.name {
+      overflow: inherit;
+      overflow-wrap: break-word;
+      white-space: nowrap;
+    }
+    td.name .trim_hostname{
+      display: block;
+      float: left;
+      width: 86%!important;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    td.health label {
+      padding-top: 3px;
+    }
+    td.health .icon-medkit {
+      margin: 3px 0 0 0;
+    }
+    ul.filter-components {
+      padding: 5px 0;
+      background: #777;
+      color: #fff;
+      font-weight: normal;
+      font-size: 12px;
+      label {
+        font-size: 12px;
+      }
+      li.active-filter {
+        background-color: #777;
+      }
+      li {
+        display: block;
+        padding: 3px 0 3px 5px;
+        line-height: 20px;
+        label.checkbox {
+          padding-left: 3px;
+        }
+        input[type="checkbox"] {
+          margin: 4px 4px 2px 2px;
+        }
+      }
+      select {
+        width: 150px;
+      }
+      ul {
+        margin-left: 10px;
+      }
+      &>li {
+        &>ul {
+          height: 150px;
+          margin-left: 0;
+          overflow-y: scroll;
+        }
+      }
+    }
+
+    div.view-wrapper {
+      input[type="checkbox"], .btn-group {
+        margin-bottom: 9px;
+      }
+    }
+  }
+
+  .open-group > .dropdown-menu {
+    display: block;
+  }
+  .nav-pills li.disabled {
+    display: block;
+    margin: 2px 0;
+    padding: 8px 12px;
+    line-height: 14px;
+  }
+  .box-footer .footer-pagination {
+    float: right;
+    .nav {
+      margin-bottom: 0;
+    }
+    .dropdown {
+      margin-top: 3px;
+    }
+    .dropdown select {
+      width: 60px;
+    }
+  }
+  .collapsed-list {
+    padding-left: 10px;
+  }
+  .host-table-versions {
+    div.collapsed-list {
+      padding-left: 17px;
+    }
+  }
+}
+
+#host-warnings {
+  .notice {
+    padding-bottom: 20px;
+  }
+  .code-snippet {
+    margin: 10px 0;
+    white-space:normal;
+  }
+  .warnings-list {
+    .block {
+      table {
+        width: 100%;
+        td, th {
+          text-align: left;
+          padding-left: 15px;
+        }
+        thead tr:first-child th {
+          font-weight: normal;
+        }
+      }
+      margin-top: 10px;
+    }
+  }
+  .glyphicon-warning-sign {
+    color: @health-status-yellow;
+  }
+}
+
+.host-checks-update {
+  button {
+    margin-left: 5px;
+  }
+  .update-progress {
+    width: 230px;
+    .progress {
+      margin-bottom: 0;
+    }
+  }
+}
+
+#host-details {
+
+
+  .status-info {
+    .host-title {
+      font-size: 18px;
+      font-weight: 700;
+      background-position: 0 center;
+      padding-left: 17px;
+    }
+    .host-maintenance-notice {
+      background-color: #E4E4E4;
+      border: 1px solid #D4D4D4;
+      color: #333;
+      padding: 8px 35px 8px 14px;
+      border-radius: 4px;
+    }
+  }
+
+  .caret {
+    border-top-color: #000;
+    border-bottom-color: #000;
+  }
+
+  .components-health.glyphicon-arrow-up {
+    color:@health-status-red;
+  }
+
+  .health-status-started, .health-status-starting, .health-status-LIVE,
+  .health-status-installed, .health-status-stopping, .health-status-DEAD-RED,
+  .health-status-unknown, .health-status-DEAD-YELLOW,
+  .health-status-DEAD-ORANGE {
+    background-repeat: no-repeat;
+    height: 13px;
+    width: 13px;
+    display: inline !important;
+    float: none !important;
+  }
+
+  .host-details-summary-list {
+    .summary-label {
+      text-align: right;
+      font-weight: 700;
+    }
+  }
+
+  .host-metrics {
+    .chart-container {
+      .chart-x-axis {
+        left: 30%;
+        width: 40%;
+      }
+    }
+  }
+
+  .host-components {
+    padding: 10px;
+    border-radius: 4px;
+    background: #FFF;
+    .component-name-block-wrapper {
+      display: table;
+      height: 34px;
+      .component-name-block {
+        white-space: normal;
+        word-wrap: break-word;
+        display: table-cell;
+        vertical-align: middle;
+      }
+
+    }
+    .dropdown-menu {
+      .disabled {
+        pointer-events: none;
+        color: #808080;
+        cursor: default;
+      }
+      .allow-tooltip {
+        pointer-events: auto;
+      }
+    }
+    .status-icons {
+      line-height: 34px;
+    }
+    .client-list {
+      ul {
+        list-style: none;
+      }
+    }
+    &>.row {
+      padding-bottom: 10px;
+    }
+  }
+
+  .logs-tab-content {
+    a.external-link {
+      font-size: @smaller-font-size;
+    }
+  }
+  .host-stack-version-status {
+    .label {
+      font-size: 14px;
+    }
+  }
+
+  .logs-tab-content {
+    .table {
+      table-layout: auto;
+    }
+  }
+}
+
+@media all and (max-width: 2560px) {
+  #hosts {
+    .table {
+      .col2,
+      td:first-child + td,
+      th:first-child + th {
+        width: 15% !important;
+
+        .filter-input-width {
+          width: 75%;
+        }
+      }
+
+      .col4,
+      td:first-child + td + td + td,
+      th:first-child + th + th + th {
+        width: 1.4%;
+      }
+
+      .col5,
+      td:first-child + td + td + td + td,
+      th:first-child + th + th + th + th {
+        width: 11.7% !important;
+      }
+
+      .col6,
+      td:first-child + td + td + td + td + td,
+      th:first-child + th + th + th + th + th {
+        width: 9% !important;
+      }
+
+      .col7,
+      td:first-child + td + td + td + td + td + td,
+      th:first-child + th + th + th + th + th + th {
+        width: 9% !important;
+      }
+
+      .col8,
+      td:first-child + td + td + td + td + td + td + td,
+      th:first-child + th + th + th + th + th + th + th {
+        width: 9% !important;
+      }
+      .col9,
+      td:first-child + td + td + td + td + td + td + td + td,
+      th:first-child + th + th + th + th + th + th + th + th {
+        width: 9% !important;
+      }
+      .col11,
+      .col12,
+      td:first-child + td + td + td + td + td + td + td + td + td + td,
+      th:first-child + th + th + th + th + th + th + th + th + th + th,
+      td:first-child + td + td + td + td + td + td + td + td + td + td + td,
+      th:first-child + th + th + th + th + th + th + th + th + th + th + th {
+        width: 11.2% !important;
+      }
+      td.name .trim_hostname {
+        width: 82% !important;
+      }
+    }
+  }
+}


Mime
View raw message