ambari-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From onechipore...@apache.org
Subject [1/2] ambari git commit: AMBARI-18820. Fix markup on the host summary page (onechiporenko)
Date Wed, 09 Nov 2016 10:58:29 GMT
Repository: ambari
Updated Branches:
  refs/heads/trunk dbeb78d5d -> ac7ff8bab


AMBARI-18820. Fix markup on the host summary page (onechiporenko)


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

Branch: refs/heads/trunk
Commit: a2d53ef06f07d680f3db9f3b0b8e86a8cbc71eae
Parents: dbeb78d
Author: Oleg Nechiporenko <onechiporenko@apache.org>
Authored: Tue Nov 8 12:47:21 2016 +0200
Committer: Oleg Nechiporenko <onechiporenko@apache.org>
Committed: Wed Nov 9 10:10:19 2016 +0200

----------------------------------------------------------------------
 ambari-web/app/styles/application.less          | 98 +++++++++++---------
 .../main/host/details/host_component.hbs        | 61 ++++++------
 ambari-web/app/templates/main/host/metrics.hbs  | 52 +++++------
 ambari-web/app/templates/main/host/summary.hbs  | 37 ++++----
 4 files changed, 135 insertions(+), 113 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/ambari/blob/a2d53ef0/ambari-web/app/styles/application.less
----------------------------------------------------------------------
diff --git a/ambari-web/app/styles/application.less b/ambari-web/app/styles/application.less
index aa5069d..b57ebb8 100644
--- a/ambari-web/app/styles/application.less
+++ b/ambari-web/app/styles/application.less
@@ -144,6 +144,20 @@ table.diff {
   padding: 10px;
 }
 
+.row.row-no-pad {
+  .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,
+  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8,
.col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
+    padding-left: 1px;
+    padding-right: 1px;
+    &:first-child {
+      padding-left: 15px;
+    }
+    &:last-child {
+      padding-right: 15px;
+    }
+  }
+}
+
 .ru-badge {
   text-align: center;
   .upgrade-in-progress {
@@ -3591,12 +3605,6 @@ table.graphs {
     border-bottom-color: #000000;
   }
 
-  //hack to apply style only for firefox
-  .host-components .btn-group{
-   white-space: normal;
-  }
-
-
   .marker {
     background-repeat: no-repeat;
     height: 13px;
@@ -3664,8 +3672,7 @@ table.graphs {
   }
 
   .content {
-    padding: 10px;
-
+    padding: 10px 0;
   }
 
   .host-configuration .dl-horizontal {
@@ -3695,29 +3702,19 @@ table.graphs {
 
   .host-components {
     padding: 10px;
-    padding-bottom: 0;
     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;
+      }
 
-  }
-
-  .host-components .btn-group {
-    margin: 0 5px 10px 0;
-
-    .component-text-status{
-      cursor: default;
-      display: block;
-      padding: 3px 20px;
-      clear: both;
-      font-weight: normal;
-      line-height: 20px;
-      color: #333333;
-      white-space: nowrap;
-      font-style: italic;
     }
-  }
-
-  .host-components {
     .dropdown-menu {
       .disabled {
         pointer-events: none;
@@ -3728,7 +3725,38 @@ table.graphs {
         pointer-events: auto;
       }
     }
+    .status-icons {
+      line-height: 34px;
+    }
+    .client-list {
+      ul {
+        list-style: none;
+      }
+    }
+    &>.row {
+      padding-bottom: 10px;
+    }
+    .btn-group {
+      //hack to apply style only for firefox
+      white-space: normal;
+      margin: 0 5px 10px 0;
+      & > .btn {
+        width: 140px;
+      }
+      .component-text-status {
+        cursor: default;
+        display: block;
+        padding: 3px 20px;
+        clear: both;
+        font-weight: normal;
+        line-height: 20px;
+        color: #333;
+        white-space: nowrap;
+        font-style: italic;
+      }
+    }
   }
+
   .host-tab-content,
   .logs-tab-content {
     margin-top: 20px;
@@ -4705,10 +4733,6 @@ ul.list-inline li {
 
 /* TIME RANGE WIDGET END */
 
-#host-details .host-components .btn-group > .btn {
-  width: 140px;
-}
-
 /* fieldset begin */
 .fieldset {
   border: 2px solid black;
@@ -5140,11 +5164,6 @@ i.glyphicon-asterisks {
 }
 
 .row .host-component-block {
-  .health-icon-block {
-    width: 6%;
-    float: left;
-    padding-right: 5px;
-  }
 
   .refresh-icon-block {
     width: 6%;
@@ -5156,13 +5175,6 @@ i.glyphicon-asterisks {
     float: left;
     padding-left: 3px;
   }
-
-  .component-name-block {
-    width: 77%;
-    float: left;
-    white-space: normal;
-    word-wrap: break-word;
-  }
 }
 
 .filter-combobox{

http://git-wip-us.apache.org/repos/asf/ambari/blob/a2d53ef0/ambari-web/app/templates/main/host/details/host_component.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/host/details/host_component.hbs b/ambari-web/app/templates/main/host/details/host_component.hbs
index 9797a03..d94dd3b 100644
--- a/ambari-web/app/templates/main/host/details/host_component.hbs
+++ b/ambari-web/app/templates/main/host/details/host_component.hbs
@@ -16,42 +16,47 @@
 * limitations under the License.
 }}
 
-<div class="col-md-7 component-label host-component-block">
-  <div class="health-icon-block">
-    {{#if view.isUpgradeFailed}}
-      {{#isAuthorized "HOST.ADD_DELETE_COMPONENTS"}}
-        <a href="#" {{action "upgradeComponent" view.content target="controller"}} >
-          <i title="Component upgrade failed" class="components-health glyphicon glyphicon-arrow-up"></i>
-        </a>
-      {{/isAuthorized}}
-    {{else}}
-      <span rel='componentHealthTooltip' {{bindAttr class="view.statusClass view.statusIconClass
:components-health" data-original-title="view.componentTextStatus"}}></span>&nbsp;
-    {{/if}}
-  </div>
-  <div class="component-name-block">
-    {{#if component.displayNameAdvanced}}
-      <span {{bindAttr title="component.displayNameAdvanced"}}>{{component.getDisplayNameAdvanced}}</span>
-    {{else}}
-      <span {{bindAttr title="component.displayName"}}>{{component.getDisplayName}}</span>
-    {{/if}}
-    &nbsp;/&nbsp;
-    <a href="#" {{action routeToService component.service}} {{bindAttr title="component.service.displayName"}}>{{component.serviceDisplayName}}</a>
-  </div>
-  <div class="refresh-icon-block">
+    <div class="col-md-1 col-lg-1 align-left status-icons component-label host-component-block">
+      <span class="health-icon-block">
+        {{#if view.isUpgradeFailed}}
+          {{#isAuthorized "HOST.ADD_DELETE_COMPONENTS"}}
+            <a href="#" {{action "upgradeComponent" view.content target="controller"}}
>
+              <i title="Component upgrade failed" class="components-health glyphicon glyphicon-arrow-up"></i>
+            </a>
+          {{/isAuthorized}}
+        {{else}}
+          <span rel='componentHealthTooltip' {{bindAttr class="view.statusClass view.statusIconClass
:components-health" data-original-title="view.componentTextStatus"}}></span>
+        {{/if}}
+      </span>
+    </div>
+    <div class="col-md-4 col-lg-5 component-name-block-wrapper">
+      <span class="component-name-block">
+        {{#if component.displayNameAdvanced}}
+          <span {{bindAttr title="component.displayNameAdvanced"}}>{{component.getDisplayNameAdvanced}}&nbsp;/</span>
+        {{else}}
+          <span {{bindAttr title="component.displayName"}}>{{component.getDisplayName}}&nbsp;/</span>
+        {{/if}}
+        <span class="hidden-lg"><br /></span> <a href="#" {{action routeToService
component.service}} {{bindAttr title="component.service.displayName"}}>{{component.serviceDisplayName}}</a>
+      </span>
+    </div>
+<div class="col-md-1 col-lg-1 align-center status-icons">
+  <span class="refresh-icon-block">
     {{#if component.staleConfigs}}
       <span class="text-warning glyphicon glyphicon-refresh"></span>
     {{/if}}
-  </div>
-  <div class="medkit-icon-block">
+  </span>
+</div>
+<div class="col-md-1 col-lg-1 align-center status-icons">
+  <span class="medkit-icon-block">
     {{#unless component.isActive}}
       <span class="icon-medkit"></span>
     {{/unless}}
-  </div>
+  </span>
 </div>
-<div class="col-md-5 pull-right">
+<div class="col-md-5 col-lg-4">
   {{#isAuthorized "SERVICE.DECOMMISSION_RECOMMISSION"}}
-    <div class="btn-group pull-right">
-      <button {{ bindAttr class="view.disabled :btn :btn-default :dropdown-toggle"}} data-toggle="dropdown">
+    <div class="dropdown">
+      <button {{ bindAttr class="view.disabled :btn :btn-default :btn-block :dropdown-toggle"}}
data-toggle="dropdown">
         {{view.componentTextStatus}}
         <span class="caret pull-right button-caret-margin"></span>
       </button>

http://git-wip-us.apache.org/repos/asf/ambari/blob/a2d53ef0/ambari-web/app/templates/main/host/metrics.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/host/metrics.hbs b/ambari-web/app/templates/main/host/metrics.hbs
index 7c91783..eb5f08b 100644
--- a/ambari-web/app/templates/main/host/metrics.hbs
+++ b/ambari-web/app/templates/main/host/metrics.hbs
@@ -17,30 +17,30 @@
 }}
 
 <div class="host-metrics">
-    <table class="graphs">
-        <tr>
-            <td>
-              {{view App.ChartHostMetricsCPU contentBinding="view.content"}}
-            </td>
-            <td>
-              {{view App.ChartHostMetricsDisk contentBinding="view.content"}}
-            </td>
-        </tr>
-        <tr>
-            <td>
-              {{view App.ChartHostMetricsLoad contentBinding="view.content"}}
-            </td>
-            <td>
-              {{view App.ChartHostMetricsMemory contentBinding="view.content"}}
-            </td>
-        </tr>
-        <tr>
-            <td>
-              {{view App.ChartHostMetricsNetwork contentBinding="view.content"}}
-            </td>
-            <td>
-              {{view App.ChartHostMetricsProcesses contentBinding="view.content"}}
-            </td>
-        </tr>
-    </table>
+  <div class="graphs">
+    <div class="row">
+      <div class="col-md-6">
+        {{view App.ChartHostMetricsCPU contentBinding="view.content"}}
+      </div>
+      <div class="col-md-6">
+        {{view App.ChartHostMetricsDisk contentBinding="view.content"}}
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-md-6">
+        {{view App.ChartHostMetricsLoad contentBinding="view.content"}}
+      </div>
+      <div class="col-md-6">
+        {{view App.ChartHostMetricsMemory contentBinding="view.content"}}
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-md-6">
+        {{view App.ChartHostMetricsNetwork contentBinding="view.content"}}
+      </div>
+      <div class="col-md-6">
+        {{view App.ChartHostMetricsProcesses contentBinding="view.content"}}
+      </div>
+    </div>
+  </div>
 </div>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ambari/blob/a2d53ef0/ambari-web/app/templates/main/host/summary.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/host/summary.hbs b/ambari-web/app/templates/main/host/summary.hbs
index ce64bd4..cfc37bd 100644
--- a/ambari-web/app/templates/main/host/summary.hbs
+++ b/ambari-web/app/templates/main/host/summary.hbs
@@ -60,35 +60,40 @@
               {{/isAuthorized}}
 
               {{#each component in view.sortedComponents}}
-                <div class="row">
-                    {{view component.viewClass contentBinding="component"}}
-                </div>
+                {{view component.viewClass classNames="row row-no-pad" contentBinding="component"}}
               {{/each}}
           {{/if}}
           {{!clients and add component button}}
-        <div class="clients row">
-          <div class="col-md-7 row client-list">
+        <div class="clients row row-no-pad">
+          <div class="col-md-7 col-lg-8 row client-list component-name-block-wrapper">
               {{#if view.clients.length}}
                 <div class="col-md-3 align-right">{{t common.clients}}&nbsp;/</div>
-                <div class="col-md-7">
+                <div class="col-md-9 component-name-block-wrapper">
+                  <ul>
                     {{#each component in view.clients}}
-                      <span {{bindAttr class="component.staleConfigs:component-restart-required-name"}}>
{{component.displayName}} </span> {{#if component.isInstallFailed}}
-                      &nbsp;<span
-                      class="health-status-installed icon-warning-sign"></span>{{/if}}{{#if
component.staleConfigs}}
-                      &nbsp;<span
-                      class="text-warning glyphicon glyphicon-refresh"></span>{{/if}}{{#if
component.service.isInPassive}}
-                      &nbsp;<span class="icon-medkit"></span>{{/if}}{{#unless
component.isLast}}
-                      ,{{/unless}}
+                      <li>
+                        <span {{bindAttr class="component.staleConfigs:component-restart-required-name"}}>{{component.displayName}}</span>
+                        {{#if component.isInstallFailed}}
+                          &nbsp;<span class="health-status-installed icon-warning-sign"></span>
+                        {{/if}}
+                        {{#if component.staleConfigs}}
+                          &nbsp;<span class="text-warning glyphicon glyphicon-refresh"></span>
+                        {{/if}}
+                        {{#if component.service.isInPassive}}
+                          &nbsp;<span class="icon-medkit"></span>
+                        {{/if}}
+                      </li>
                     {{/each}}
+                  </ul>
                 </div>
               {{/if}}
           </div>
-          <div class="col-md-5 pull-right">
+          <div class="col-md-5 col-lg-4 pull-right">
               {{#isAuthorized "SERVICE.MODIFY_CONFIGS, SERVICE.START_STOP, HOST.ADD_DELETE_COMPONENTS,
HOST.TOGGLE_MAINTENANCE"}}
                   {{#if view.clients.length}}
-                    <div class="btn-group pull-right">
+                    <div class="dropdown">
                       <button id="add_component"
-                              data-toggle="dropdown" {{bindAttr class=":btn :btn-default
:dropdown-toggle controller.content.isNotHeartBeating:disabled"}}>
+                              data-toggle="dropdown" {{bindAttr class=":btn :btn-default
:btn-block :dropdown-toggle controller.content.isNotHeartBeating:disabled"}}>
                           {{t common.installed}}
                         <span class="caret pull-right button-caret-margin"></span>
                       </button>


Mime
View raw message