AMBARI-7281. Slider View: App summary details shown differently than Ambari service summary. (onechiporenko)

contrib/views/slider/src/main/resources/ui/app/styles/application.less

@@ -529,19 +529,27 @@ a {
  * App Summary Page
  */
 .app_summary {
-  .container {
-    padding-left: 0;
-    .panel-summury {
-      min-height: 400px;
-      table  tr td:last-child {
-        word-break: break-word;
+  padding-left: 0;
+  table {
+    &.no-borders {
+      td {
+        border-width: 0;
       }
     }
-    .panel-link {
-      margin-top: -5px;
-      margin-right: -7px;
+  }
+  .panel-heading {
+    font-weight: 700;
+  }
+  .panel-summary {
+    min-height: 400px;
+    td:first-child {
+      text-align: right;
     }
   }
+  .panel-link {
+    margin-top: -5px;
+    margin-right: -7px;
+  }
 }
 
 .chart-container {

contrib/views/slider/src/main/resources/ui/app/templates/slider_app/summary.hbs

@@ -16,113 +16,113 @@
 * limitations under the License.
 }}
 
-<div class="container">
-  <div class="row">
-    <div class="col-md-6">
-      {{#bs-panel heading="Summary" class="panel-summury"}}
-        <table class="table table-striped table-bordered table-condensed">
-          <tbody>
-            <tr>
-              <td>{{t common.status}}</td>
-              <td>{{controller.model.status}}</td>
-            </tr>
-            <tr>
-              <td>{{t common.type}}</td>
-              <td>{{controller.appType}}</td>
-            </tr>
-            <tr>
-              <td>{{t common.started}}</td>
-              <td>{{formatWordBreak controller.model.started}}</td>
-            </tr>
-            <tr>
-              <td>{{t common.finished}}</td>
-              <td>{{formatWordBreak controller.model.ended}}</td>
-            </tr>
-            <tr>
-              <td>{{t common.diagnostics}}</td>
-              <td>{{formatWordBreak controller.model.diagnostics devider="."}}</td>
-            </tr>
-            {{#each controller.model.jmx}}
-              <tr>
-                <td>{{humanize key}}</td>
-                <td>{{formatWordBreak value}}</td>
-              </tr>
-            {{/each}}
-          </tbody>
-        </table>
-      {{/bs-panel}}
-    </div>
-    <div class="col-md-6">
-      {{#bs-panel heading="Components" class="panel-components"}}
-          <table class="table table-striped table-bordered table-condensed">
-              <tbody>
-              {{#each controller.model.components}}
-                <tr>
-                  <td>{{componentName}}</td>
-                  <td>{{host}}</td>
-                </tr>
-              {{/each}}
-              </tbody>
-          </table>
-      {{/bs-panel}}
-      <div class="panel panel-default panel-alerts">
-        <div class="panel-heading">
-          {{t common.alerts}}
-          <div class="btn-group pull-right panel-link">
-{{!--            <a class="btn btn-default btn-sm" target="_blank" rel="tooltip"
-              {{translateAttr title="sliderApp.summary.go_to_nagios"}}
-              {{bind-attr href="view.nagiosUrl"}}>
-                <i class="icon-link"></i>
-            </a>--}}
-          </div>
-        </div>
-        <div class="app-alerts">
-            <ul>
-              {{#each controller.model.alerts}}
-                {{#view view.AlertView contentBinding="this"}}
-                      <div class="container-fluid">
-                          <div class="row">
-                              <div class="col-md-1 status-icon">
-                                  <i {{bind-attr class="iconClass :icon-large"}}></i>
-                              </div>
-                              <div class="col-md-11">
-                                  <div class="row">
-                                      <div class="col-md-7 title">{{title}}</div>
 
-                                      <div {{bs-bind-tooltip view.tooltip}} data-placement="right" class="col-md-5 date-time">{{timeSinceAlert}}</div>
-                                  </div>
-                                  <div class="message">{{message}}</div>
-                              </div>
-                          </div>
-                      </div>
-                  {{/view}}
-              {{/each}}
-            </ul>
-        </div>
-      </div>
-    </div>
+<div class="row">
+  <div class="col-md-6">
+    {{#bs-panel heading="Summary" class="panel-summary"}}
+      <table class="table no-borders table-condensed">
+        <tbody>
+        <tr>
+          <td>{{t common.status}}</td>
+          <td>{{controller.model.status}}</td>
+        </tr>
+        <tr>
+          <td>{{t common.type}}</td>
+          <td>{{controller.appType}}</td>
+        </tr>
+        <tr>
+          <td>{{t common.started}}</td>
+          <td>{{formatWordBreak controller.model.started}}</td>
+        </tr>
+        <tr>
+          <td>{{t common.finished}}</td>
+          <td>{{formatWordBreak controller.model.ended}}</td>
+        </tr>
+        <tr>
+          <td>{{t common.diagnostics}}</td>
+          <td>{{formatWordBreak controller.model.diagnostics devider="."}}</td>
+        </tr>
+          {{#each controller.model.jmx}}
+          <tr>
+            <td>{{humanize key}}</td>
+            <td>{{formatWordBreak value}}</td>
+          </tr>
+          {{/each}}
+        </tbody>
+      </table>
+    {{/bs-panel}}
   </div>
-  {{#if controller.model.showMetrics}}
-    <div class="panel panel-default">
+  <div class="col-md-6">
+    {{#bs-panel heading="Components" class="panel-components"}}
+      <table class="table no-borders table-condensed">
+        <tbody>
+          {{#each controller.model.components}}
+          <tr>
+            <td>{{componentName}}</td>
+            <td>{{host}}</td>
+          </tr>
+          {{/each}}
+        </tbody>
+      </table>
+    {{/bs-panel}}
+    <div class="panel panel-default panel-alerts">
       <div class="panel-heading">
-        {{t common.metrics}}
+        {{t common.alerts}}
         <div class="btn-group pull-right panel-link">
-          <a class="btn btn-default btn-sm" target="_blank" rel="tooltip"
-            {{translateAttr title="sliderApp.summary.go_to_ganglia"}}
-            {{bind-attr href="view.gangliaUrl"}}>
+          {{#if App.nagiosHost}}
+            <a class="btn btn-default btn-sm" target="_blank" rel="tooltip"
+              {{translateAttr title="sliderApp.summary.go_to_nagios"}}
+              {{bind-attr href="view.nagiosUrl"}}>
               <i class="icon-link"></i>
-          </a>
+            </a>
+          {{/if}}
         </div>
       </div>
-      <div class="panel-body">
-        {{#each graphs in view.graphs}}
-       <div class="row">
-         {{#each graph in graphs}}
-           <div class="col-md-3">{{view graph}}</div>
-         {{/each}}
-       </div>
-     {{/each}}
+      <div class="app-alerts">
+        <ul>
+          {{#each controller.model.alerts}}
+            {{#view view.AlertView contentBinding="this"}}
+              <div class="container-fluid">
+                <div class="row">
+                  <div class="col-md-1 status-icon">
+                    <i {{bind-attr class="iconClass :icon-large"}}></i>
+                  </div>
+                  <div class="col-md-11">
+                    <div class="row">
+                      <div class="col-md-7 title">{{title}}</div>
+                      <div {{bs-bind-tooltip view.tooltip}} data-placement="right" class="col-md-5 date-time">{{timeSinceAlert}}</div>
+                    </div>
+                    <div class="message">{{message}}</div>
+                  </div>
+                </div>
+              </div>
+            {{/view}}
+          {{/each}}
+        </ul>
       </div>
     </div>
-  {{/if}}
+  </div>
 </div>
+{{#if controller.model.showMetrics}}
+  <div class="panel panel-default">
+    <div class="panel-heading">
+      {{t common.metrics}}
+      <div class="btn-group pull-right panel-link">
+        <a class="btn btn-default btn-sm" target="_blank" rel="tooltip"
+          {{translateAttr title="sliderApp.summary.go_to_ganglia"}}
+          {{bind-attr href="view.gangliaUrl"}}>
+          <i class="icon-link"></i>
+        </a>
+      </div>
+    </div>
+    <div class="panel-body">
+      {{#each graphs in view.graphs}}
+        <div class="row">
+          {{#each graph in graphs}}
+            <div class="col-md-3">{{view graph}}</div>
+          {{/each}}
+        </div>
+      {{/each}}
+    </div>
+  </div>
+{{/if}}

contrib/views/slider/src/main/resources/ui/app/views/slider_app/summary_view.js

@@ -29,14 +29,14 @@ App.SliderAppSummaryView = Ember.View.extend({
    */
   gangliaUrl: function () {
     return 'http://' + App.get('gangliaHost') + '/ganglia';
-  }.property(),
+  }.property('App.gangliaHost'),
 
   /**
    * @type {string}
    */
   nagiosUrl: function () {
     return 'http://' + App.get('nagiosHost') + '/nagios';
-  }.property(),
+  }.property('App.nagiosHost'),
 
   fitPanels: function () {
     var heightLeft = parseInt(this.$('.panel-summury').css('height'));