AMBARI-5498. Selecting agent in flume agents table should show 3 additional graph sections. (Denys Buzhor via akovalenko)

ambari-web/app/styles/application.less

@@ -2424,6 +2424,31 @@ width:100%;
   }
 }
 
+.metrics-collapsed-graphs {
+  margin-bottom: 10px;
+  .accordion {
+    .accordion-heading {
+      font-size: 15px;
+      color: #777;
+      font-weight: bold;
+      padding: 0;
+      .accordion-toggle {
+        .icon-caret-toggle:before {
+          content: "\f0d7";
+        }
+        &.collapsed {
+          .icon-caret-toggle:before {
+            content: "\f0da";
+          }
+        }
+      }
+      .btn {
+        margin: 3px;
+      }
+    }
+  }
+}
+
 /*End Services*/
 table.graphs {
   table-layout: fixed;

ambari-web/app/templates/main/service/info/summary.hbs

@@ -118,19 +118,50 @@
     {{/unless}}
   </div>
 </div>
+
+{{#if view.collapsedMetrics}}
+  <div class="row-fluid">
+    <div class="span12 metrics-collapsed-graphs">
+      {{#each collapsedMetric in view.collapsedMetrics}}
+        <div {{bindAttr class=":accordion collapsedMetric.toggleIndex"}}>
+          <div class="accordion-group box">
+            <div class="accordion-heading box-header">
+              <span class="pull-left accordion-toggle" data-toggle="collapse" {{bindAttr dataParent="collapsedMetric.toggleIndex" href="collapsedMetric.toggleIndex"}}>
+                <i class="pull-left icon-caret-toggle"></i>
+                <span>{{collapsedMetric.header}}</span>
+              </span>
+              <a class="btn pull-right" {{bindAttr href="collapsedMetric.url"}} target="_blank">
+                <i class="icon-link"></i>
+              </a>
+              <div class="clearfix"></div>
+            </div>
+            <div class="accordion-body collapse in" {{bindAttr id="collapsedMetric.id"}}>
+              <div class="accordion-inner">
+                {{#if collapsedMetric.metricView}}
+                  {{view collapsedMetric.metricView}}
+                {{/if}}
+              </div>
+            </div>
+          </div>
+        </div>
+      {{/each}}
+    </div>
+  </div>
+{{/if}}
+
 {{#if view.serviceMetricGraphs.length}}
 <div class="row-fluid">
   <div class="span12">
     <div class="box">
       <div class="box-header">
-      <h4>{{controller.content.label}} {{formatNull view.metricsHeader empty="t:common.metrics"}}</h4>
+      <h4>{{controller.content.label}} {{t common.metrics}}</h4>
         {{#if controller.isGangliaInstalled}}
           <div class="btn-group">
             <a class="btn" target="_blank" rel="tooltip" title="Go to Ganglia" {{bindAttr href="view.gangliaUrl"}}><i class="icon-link"></i></a>
           </div>
         {{/if}}
       </div>
-      
+
       <div class="">
         <table class="graphs">
           {{#each graphs in view.serviceMetricGraphs}}

ambari-web/app/views/main/service/info/summary.js

@@ -54,8 +54,8 @@ App.MainServiceInfoSummaryView = Em.View.extend({
     pig :false,
     sqoop: false
   },
-  /** @property metricsHeader {string} - custom metrics title **/
-  metricsHeader: null,
+  /** @property collapsedMetrics {array} - metrics list for collapsed view **/
+  collapsedMetrics: null,
 
   servicesHaveClients: ["OOZIE", "ZOOKEEPER", "HIVE", "MAPREDUCE2", "TEZ", "SQOOP", "PIG","FALCON"],
 
@@ -543,7 +543,33 @@ App.MainServiceInfoSummaryView = Em.View.extend({
    * @param {object} agent - DS.model of agent
    */
   setFlumeAgentMetric: function(agent) {
-    this.set('metricsHeader', Em.I18n.t('common.metrics') + " - " + agent.get('name'));
+    var getMetricTitle = function(metricTypeKey, hostName) {
+      var metricType = Em.I18n.t('services.service.info.metrics.flume.' + metricTypeKey).format(Em.I18n.t('common.metrics'));
+      return  metricType + ' - ' + hostName;
+    };
+    var gangliaUrlTpl = App.router.get('clusterController.gangliaUrl') + '/?r=hour&cs=&ce=&m=load_one&s=by+name&c=HDPFlumeServer&h={0}&host_regex=&max_graphs=0&tab=m&vn=&sh=1&z=small&hc=4';
+    var agentHostMock = 'localhost'; // @todo change to agent hostname
+    var mockMetricData = [
+      {
+        header: 'sinkName',
+        metricView: App.ChartServiceMetricsFlume_SinkDrainSuccessCount.extend()
+      },
+      {
+        header: 'sourceName',
+        metricView: App.ChartServiceMetricsFlume_SourceAcceptedCount.extend()
+      },
+      {
+        header: 'channelName',
+        metricView: App.ChartServiceMetricsFlume_ChannelSize.extend()
+      }
+    ];
+    mockMetricData.forEach(function(mockData, index) {
+      mockData.header = getMetricTitle(mockData.header, agentHostMock);
+      mockData.url = gangliaUrlTpl.format(agentHostMock);
+      mockData.id = 'metric' + index;
+      mockData.toggleIndex = '#' + mockData.id;
+    });
+    this.set('collapsedMetrics', mockMetricData);
   }
 
 });