AMBARI-11711. Dashboard: graph descriptions are not very visible on service dashboard page.(xiwang)

ambari-web/app/styles/enhanced_service_dashboard.less

@@ -237,6 +237,28 @@
       background: rgba(255,255,255, 0.7);
     }
   }
+  .thumbnail .chart-legend ul {
+    max-width: 300px;
+    .description-line {
+      padding: 3px 3px 8px 8px;
+      line-height: 16px;
+      max-height: 43px;
+      font-weight: bold;
+      word-wrap: break-word;
+      white-space: pre-wrap;
+      overflow: scroll;
+    }
+  }
+}
+
+.chart-legend .description-line {
+  padding: 0px 3px 8px 8px;
+  line-height: 16px;
+  max-height: 45px;
+  font-weight: bold;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  overflow: scroll;
 }
 
 #edit-widget-wizard,

ambari-web/app/templates/main/charts/linear_time.hbs

@@ -30,9 +30,3 @@
   {{/unless}}
 </div>
 
-{{#if view.description}}
-  <div class="hidden-description" {{action showGraphInPopup target="view"}}>
-    {{view.description}}
-  </div>
-{{/if}}
-

ambari-web/app/views/common/chart/linear_time.js

@@ -593,7 +593,8 @@ App.ChartLinearTimeView = Ember.View.extend({
 
     var legend = new Rickshaw.Graph.Legend({
       graph: _graph,
-      element: legendElement
+      element: legendElement,
+      description: self.get('description')
     });
 
     new Rickshaw.Graph.Behavior.Series.Toggle({

ambari-web/vendor/scripts/rickshaw.js

@@ -1445,6 +1445,7 @@ Rickshaw.Graph.Behavior.Series.Toggle = function(args) {
 	var self = this;
 
 	this.addAnchor = function(line) {
+    if (line.noAnchor) return;
 		var anchor = document.createElement('a');
 		anchor.innerHTML = '✔';
 		anchor.classList.add('action');
@@ -1830,6 +1831,23 @@ Rickshaw.Graph.Legend = function(args) {
 		self.lines.push(_line);
 	};
 
+  this.addDescription = function (description) {
+    if (!description) return;
+    var line = document.createElement('div');
+    line.className = 'description-line';
+
+    var label = document.createElement('span');
+    label.innerHTML = description;
+
+    line.appendChild(label);
+    list.appendChild(line);
+
+    var _line = { element: line, noAnchor: true};
+    self.lines.push(_line);
+  };
+
+  self.addDescription(args.description);
+
 	series.forEach( function(s) {
 		self.addLine(s);
 	} );