AMBARI-7457. Slider View: Multiple Slider App summary page changes (alexantonenko)

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

@@ -114,6 +114,13 @@ App.SliderApp = DS.Model.extend({
   // Config categories, that should be hidden on app page
   hiddenCategories: ['yarn-site', 'global'],
 
+  /**
+   * @type {boolean}
+   */
+  doNotShowComponentsAndAlerts: function(){
+    return this.get('status') == "FROZEN" || this.get('status') == "FAILED";
+  }.property('status', 'components', 'alerts'),
+
   /**
    * Display metrics only for running apps
    * @type {boolean}

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

@@ -624,6 +624,10 @@ select {
     .icon-warning-sign {
       color: #ff0000;
     }
+    .panel-body{
+      max-height: 400px;
+      overflow-x: auto;
+    }
   }
   .panel-link {
     margin-top: -5px;
@@ -771,9 +775,6 @@ select {
     .row-fluid [class*="span"] {
       min-height: 0px;
     }
-    .status-icon {
-      padding-top: 7px;
-    }
     .date-time {
       color: #999;
       font-style: italic;
@@ -783,6 +784,8 @@ select {
     .message {
       font-size: 12px;
       color: #777;
+      word-break: break-all;
+      padding-right: 15px;
     }
     .serviceLink {
       padding-left: 7px;

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

@@ -30,6 +30,10 @@
           <td>{{t common.type}}</td>
           <td>{{controller.appType}}</td>
         </tr>
+        <tr>
+          <td>{{t common.yarn.app.id}}</td>
+          <td>{{controller.model.yarnId}}</td>
+        </tr>
         <tr>
           <td>{{t common.started}}</td>
           <td>{{formatWordBreak controller.model.started}}</td>
@@ -53,27 +57,9 @@
     {{/bs-panel}}
   </div>
   <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><span {{bind-attr class="isRunning:icon-ok-sign:icon-warning-sign :status"}}></span> {{componentName}}</td>
-            <td>
-              {{#if url}}
-                <a {{bind-attr href="url"}} target="_blank">{{host}}</a>
-              {{else}}
-                {{host}}
-              {{/if}}
-            </td>
-          </tr>
-          {{/each}}
-        </tbody>
-      </table>
-    {{/bs-panel}}
     <div class="panel panel-default panel-alerts">
       <div class="panel-heading">
-        {{t common.alerts}}
+        {{t common.status}}
         <div class="btn-group pull-right panel-link">
           {{#if App.nagiosHost}}
             <a class="btn btn-default btn-sm" target="_blank" rel="tooltip"
@@ -86,27 +72,57 @@
       </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}} class="col-md-5 date-time">{{timeSinceAlert}}</div>
+          {{#if controller.model.doNotShowComponentsAndAlerts}}
+            <li>
+              <div class="container-fluid">{{t sliderApp.alerts.no.status}}</div>
+            </li>
+          {{else}}
+            {{#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-small"}}></i>
+                    </div>
+                    <div class="col-md-11">
+                      <div class="row">
+                        <div class="col-md-7 title">{{title}}</div>
+                        <div class="message">{{message}}</div>
+                      </div>
+
                     </div>
-                    <div class="message">{{message}}</div>
                   </div>
                 </div>
-              </div>
-            {{/view}}
-          {{/each}}
+              {{/view}}
+            {{/each}}
+          {{/if}}
         </ul>
       </div>
     </div>
+    {{#bs-panel heading="Components" class="panel-components"}}
+      <table class="table no-borders table-condensed">
+        <tbody>
+          {{#if controller.model.doNotShowComponentsAndAlerts}}
+            <tr>
+              <td>{{t sliderApp.summary.no.components}}</td>
+            </tr>
+          {{else}}
+            {{#each controller.model.components}}
+              <tr>
+                <td><span {{bind-attr class="isRunning:icon-ok-sign:icon-warning-sign :status"}}></span> {{componentName}}</td>
+                <td>
+                  {{#if url}}
+                    <a {{bind-attr href="url"}} target="_blank">{{host}}</a>
+                  {{else}}
+                    {{host}}
+                  {{/if}}
+                </td>
+              </tr>
+            {{/each}}
+          {{/if}}
+        </tbody>
+      </table>
+    {{/bs-panel}}
   </div>
 </div>
 {{#if controller.model.showMetrics}}

contrib/views/slider/src/main/resources/ui/app/translations.js

@@ -48,11 +48,12 @@ Em.I18n.translations = {
     'finished': 'Finished',
     'diagnostics': 'Diagnostics',
     'description': 'Description',
-    'alerts': 'Alerts',
+    'status': 'Status',
     'key': 'Key',
     'remove': 'Remove',
     'send': 'Send',
-    'error': 'Error'
+    'error': 'Error',
+    'yarn.app.id': 'YARN Application ID'
   },
 
   'error.config_is_empty': 'Config <strong>{0}</strong> should not be empty',
@@ -83,7 +84,9 @@ Em.I18n.translations = {
 
   'sliderApp.summary.go_to_nagios': 'Go to Nagios',
   'sliderApp.summary.go_to_ganglia': 'Go to Ganglia',
+  'sliderApp.summary.no.components': 'No components are currently running',
 
+  'sliderApp.alerts.no.status': 'No component statuses are currently available',
   'sliderApp.alerts.OK.timePrefixShort': 'OK',
   'sliderApp.alerts.WARN.timePrefixShort': 'WARN',
   'sliderApp.alerts.CRIT.timePrefixShort': 'CRIT',