AMBARI-7087. Slider app's summary tab has multiple section layout changes (alexantonenko)

contrib/views/slider/src/main/resources/ui/app/assets/data/resource/cluster_name.json

@@ -0,0 +1,12 @@
+{
+  "href" : "http://162.216.151.215:8080/api/v1/clusters?_=1409232826826",
+  "items" : [
+    {
+      "href" : "http://162.216.151.215:8080/api/v1/clusters/mycluster",
+      "Clusters" : {
+        "cluster_name" : "mycluster",
+        "version" : "HDP-2.1"
+      }
+    }
+  ]
+}

contrib/views/slider/src/main/resources/ui/app/assets/data/resource/components_hosts.json

@@ -0,0 +1,16 @@
+{
+  "items" : [
+    {
+      "Hosts" : {
+        "host_name" : "myHost"
+      },
+      "host_components" : [
+        {
+          "HostRoles" : {
+            "component_name" : ""
+          }
+        }
+      ]
+    }
+  ]
+}

contrib/views/slider/src/main/resources/ui/app/controllers/slider_apps_controller.js

@@ -17,4 +17,54 @@
  */
 
 App.SliderAppsController = Ember.ArrayController.extend({
+
+  /**
+   *  Load resources on controller initialization
+   * @method initResources
+   */
+  initResources:function () {
+    this.loadComponentHost({componentName:"GANGLIA_SERVER",callback:"loadGangliaHostSuccessCallback"});
+    this.loadComponentHost({componentName:"NAGIOS_SERVER",callback:"loadNagiosHostSuccessCallback"});
+  }.on('init'),
+
+  /**
+   * Load ganglia server host
+   * @method loadGangliaHost
+   */
+  loadComponentHost: function (params) {
+    return App.ajax.send({
+      name: 'components_hosts',
+      sender: this,
+      data: {
+        componentName: params.componentName,
+        urlPrefix: '/api/v1/'
+      },
+      success: params.callback
+    });
+
+  },
+
+  /**
+   * Success callback for hosts-request
+   * Save host name to gangliaHost
+   * @param {Object} data
+   * @method loadGangliaHostSuccessCallback
+   */
+  loadGangliaHostSuccessCallback: function (data) {
+    if(data.items[0]){
+      App.set('gangliaHost', Em.get(data.items[0], 'Hosts.host_name'));
+    }
+  },
+
+  /**
+   * Success callback for hosts-request
+   * Save host name to nagiosHost
+   * @param {Object} data
+   * @method loadGangliaHostSuccessCallback
+   */
+  loadNagiosHostSuccessCallback: function (data) {
+    if(data.items[0]){
+      App.set('nagiosHost', Em.get(data.items[0], 'Hosts.host_name'));
+    }
+  },
 });

contrib/views/slider/src/main/resources/ui/app/helpers/ajax.js

@@ -106,6 +106,7 @@ var urls = {
 
   'components_hosts': {
     real: 'clusters/{clusterName}/hosts?host_components/HostRoles/component_name={componentName}&minimal_response=true',
+    mock:'/data/resource/components_hosts.json',
     headers: {
       Accept : "text/plain; charset=utf-8",
       "Content-Type": "text/plain; charset=utf-8"
@@ -114,6 +115,7 @@ var urls = {
 
   'cluster_name': {
     real: 'clusters',
+    mock:'/data/resource/cluster_name.json',
     headers: {
       Accept : "text/plain; charset=utf-8",
       "Content-Type": "text/plain; charset=utf-8"

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

@@ -515,6 +515,16 @@ a {
 .app_summary {
   .container {
     padding-left: 0;
+    .panel-summury {
+      min-height: 400px;
+      table  tr td:last-child {
+        word-break: break-word;
+      }
+    }
+    .panel-link {
+      margin-top: -5px;
+      margin-right: -7px;
+    }
   }
 }
 

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

@@ -19,7 +19,7 @@
 <div class="container">
   <div class="row">
     <div class="col-md-6">
-      {{#bs-panel heading="Summary"}}
+      {{#bs-panel heading="Summary" class="panel-summury"}}
         <table class="table table-striped table-bordered table-condensed">
           <tbody>
             <tr>
@@ -53,7 +53,7 @@
       {{/bs-panel}}
     </div>
     <div class="col-md-6">
-      {{#bs-panel heading="Components"}}
+      {{#bs-panel heading="Components" class="panel-components"}}
           <table class="table table-striped table-bordered table-condensed">
               <tbody>
               {{#each controller.model.components}}
@@ -65,17 +65,43 @@
               </tbody>
           </table>
       {{/bs-panel}}
+      <div class="panel panel-default panel-alerts">
+        <div class="panel-heading">
+          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"}}
+              {{bindAttr href="view.nagiosUrl"}}>
+                <i class="icon-link"></i>
+            </a>
+          </div>
+        </div>
+        <div class="panel-body">
+        </div>
+      </div>
     </div>
   </div>
   {{#if controller.model.showMetrics}}
-    {{#bs-panel heading="Metrics"}}
-      {{#each graphs in view.parentView.graphs}}
-        <div class="row">
-          {{#each graph in graphs}}
-            <div class="col-md-3">{{view graph}}</div>
-          {{/each}}
+    <div class="panel panel-default">
+      <div class="panel-heading">
+        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"}}
+            {{bindAttr href="view.gangliaUrl"}}>
+              <i class="icon-link"></i>
+          </a>
         </div>
-      {{/each}}
-    {{/bs-panel}}
+      </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}}
-</div>
+</div>

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

@@ -69,6 +69,9 @@ Em.I18n.translations = {
   'slider.apps.create': 'Create App',
   'sliderApps.filters.info': '{0} of {1} sliders showing',
 
+  'sliderApp.summary.go_to_nagios': 'Go to Nagios',
+  'sliderApp.summary.go_to_ganglia': 'Go to Ganglia',
+
   'wizard.name': 'Create Slider App',
   'wizard.step1.name': 'Select Type',
   'wizard.step1.header': 'Available Types',
@@ -88,4 +91,4 @@ Em.I18n.translations = {
   'wizard.step4.name': 'Deploy',
   'wizard.step4.appName': 'App Name',
   'wizard.step4.appType': 'App Type'
-};
+};

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

@@ -22,6 +22,25 @@ App.SliderAppSummaryView = Ember.View.extend({
 
   graphs: [
     [App.MetricView, App.Metric2View, App.Metric3View, App.Metric4View]
-  ]
+  ],
+
+  /**
+   * @type {string}
+   */
+  gangliaUrl: function () {
+    return 'http://' + App.get('gangliaHost') + '/ganglia';
+  }.property(),
+
+  /**
+   * @type {string}
+   */
+  nagiosUrl: function () {
+    return 'http://' + App.get('nagiosHost') + '/nagios';
+  }.property(),
+
+  fitPanels:function () {
+    var heightLeft = parseInt(this.$('.panel-summury').css('height'));
+    this.$('.panel-components, .panel-alerts').css('height',((heightLeft<200)?200:heightLeft-20)/2);
+  }.on('didInsertElement')
 
 });