AMBARI-11622. Ambari UI: adjust Metrics area on Service pages (alexantonenko)

ambari-web/app/assets/test/tests.js

@@ -136,6 +136,7 @@ var files = ['test/init_model_test',
   'test/mixins/common/configs/enhanced_configs_test',
   'test/mixins/common/configs/configs_saver_test',
   'test/mixins/common/chart/storm_linear_time_test',
+  'test/mixins/common/widgets/widget_section_test',
   'test/mixins/common/localStorage_test',
   'test/mixins/common/reload_popup_test',
   'test/mixins/common/serverValidator_test',

ambari-web/app/messages.js

@@ -383,7 +383,8 @@ Em.I18n.translations = {
   'titlebar.alerts.noAlerts': 'No Alerts',
 
   'graphs.noData.title': 'No Data',
-  'graphs.noData.message': 'There was no data available. Possible reasons include inaccessible/unsupported metrics service.',
+  'graphs.noData.message': 'No Data Available',
+  'graphs.noData.tooltip.title': 'No Data Available. The Ambari Metrics service may be not installed or inaccessible',
   'graphs.noDataAtTime.message': 'No available data for the time period.',
   'graphs.error.title': 'Error',
   'graphs.error.message': 'There was a problem getting data for the chart ({0}: {1})',
@@ -395,6 +396,7 @@ Em.I18n.translations = {
   'graphs.timeRange.week': 'Last 1 week',
   'graphs.timeRange.month': 'Last 1 month',
   'graphs.timeRange.year': 'Last 1 year',
+  'graphs.tooltip.title': 'Click to zoom',
 
   'users.userName.validationFail': 'Only lowercase letters and numbers are recommended; must start with a letter',
   'host.spacesValidation': 'Cannot contain whitespace',

ambari-web/app/mixins/common/widgets/widget_section.js

@@ -96,6 +96,9 @@ App.WidgetSectionMixin = Ember.Mixin.create({
     return [];
   }.property('isWidgetsLoaded', 'activeWidgetLayout.widgets'),
 
+  isAmbariMetricsInstalled: function () {
+    return App.Service.find().someProperty('serviceName', 'AMBARI_METRICS');
+  }.property('App.router.mainServiceController.content.length'),
 
   /**
    * load widgets defined by user

ambari-web/app/styles/application.less

@@ -547,6 +547,9 @@ h1 {
   max-width: 400px;
   overflow-wrap: break-word;
   white-space:pre-wrap;
+  &.graph-tooltip {
+    max-width: 200px;
+  }
 }
 
 .popover {

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

@@ -19,7 +19,7 @@
 <div class="screensaver chart-container" {{bindAttr class="view.isReady:hide"}} >
   <div id="{{unbound view.id}}-title" class="chart-title">{{view.title}}</div>
 </div>
-<div  id="{{unbound view.id}}-container" class="chart-container hide" {{bindAttr class="view.isReady:show"}}  rel="ZoomInTooltip" title="Click to zoom">
+<div id="{{unbound view.id}}-container" class="chart-container hide" {{bindAttr class="view.isReady:show"}} rel="ZoomInTooltip">
   <div id="{{unbound view.id}}-yaxis" class="chart-y-axis" {{action showGraphInPopup target="view"}}></div>
   <div id="{{unbound view.id}}-xaxis" class="chart-x-axis" {{action showGraphInPopup target="view"}}></div>
   <div id="{{unbound view.id}}-legend" class="chart-legend"></div>

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

@@ -92,34 +92,36 @@
               </div>
             {{/if}}
             {{#if isServiceWithEnhancedWidgets}}
-              <div class="btn-group pull-right actions">
-                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
-                  {{t common.actions}} &nbsp;<span class="caret"></span>
-                </button>
-                <ul class="dropdown-menu">
-                  {{#each option in view.widgetActions}}
-                    <li {{bindAttr class="option.layouts:dropdown-submenu"}}>
-                      {{#if option.isAction}}
-                        <a href="#" {{action doWidgetAction option.action target="view"}}>
-                          <i {{bindAttr class="option.class"}}></i>
-                          {{option.label}}
-                        </a>
-                        {{#if option.layouts}}
-                          <ul class="dropdown-menu">
-                            {{#each layout in option.layouts}}
-                              <li>
-                                <a href="javascript:void(0);">
-                                  {{layout.layoutName}}
-                                </a>
-                              </li>
-                            {{/each}}
-                          </ul>
+              {{#if isAmbariMetricsInstalled}}
+                <div class="btn-group pull-right actions">
+                  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+                    {{t common.actions}} &nbsp;<span class="caret"></span>
+                  </button>
+                  <ul class="dropdown-menu">
+                    {{#each option in view.widgetActions}}
+                      <li {{bindAttr class="option.layouts:dropdown-submenu"}}>
+                        {{#if option.isAction}}
+                          <a href="#" {{action doWidgetAction option.action target="view"}}>
+                            <i {{bindAttr class="option.class"}}></i>
+                            {{option.label}}
+                          </a>
+                          {{#if option.layouts}}
+                            <ul class="dropdown-menu">
+                              {{#each layout in option.layouts}}
+                                <li>
+                                  <a href="javascript:void(0);">
+                                    {{layout.layoutName}}
+                                  </a>
+                                </li>
+                              {{/each}}
+                            </ul>
+                          {{/if}}
                         {{/if}}
-                      {{/if}}
-                    </li>
-                  {{/each}}
-                </ul>
-              </div>
+                      </li>
+                    {{/each}}
+                  </ul>
+                </div>
+              {{/if}}
             {{/if}}
           </div>
           <div>
@@ -130,11 +132,13 @@
                     {{view widget.viewClass contentBinding="widget" idBinding="widget.id"}}
                   </div>
                 {{/each}}
-                <div class="span2p4">
-                  <button id="add-widget-action-box" class="btn btn-default" {{action "goToWidgetsBrowser" controller.content target="controller"}}
-                          rel="add-widget-tooltip" {{translateAttr data-original-title="dashboard.widgets.addButton.tooltip"}}>
-                    <i class="icon-plus"></i></button>
-                </div>
+                {{#if isAmbariMetricsInstalled}}
+                  <div class="span2p4">
+                    <button id="add-widget-action-box" class="btn btn-default" {{action "goToWidgetsBrowser" controller.content target="controller"}}
+                            rel="add-widget-tooltip" {{translateAttr data-original-title="dashboard.widgets.addButton.tooltip"}}>
+                      <i class="icon-plus"></i></button>
+                  </div>
+                {{/if}}
               </div>
             {{/if}}
             <table class="graphs">

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

@@ -153,6 +153,10 @@ App.ChartLinearTimeView = Ember.View.extend({
   didInsertElement: function () {
     this.loadData();
     this.registerGraph();
+    App.tooltip(this.$("[rel='ZoomInTooltip']"), {
+      placement: 'left',
+      template: '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner graph-tooltip"></div></div>'
+    });
   },
 
   registerGraph: function() {
@@ -212,15 +216,18 @@ App.ChartLinearTimeView = Ember.View.extend({
    * @param type  Can be any of 'warn', 'error', 'info', 'success'
    * @param title Bolded title for the message
    * @param message String representing the message
+   * @param tooltip Tooltip content
    * @type: Function
    */
-  _showMessage: function(type, title, message) {
+  _showMessage: function(type, title, message, tooltip) {
     var chartOverlay = '#' + this.get('id');
     var chartOverlayId = chartOverlay + '-chart';
     var chartOverlayY = chartOverlay + '-yaxis';
     var chartOverlayX = chartOverlay + '-xaxis';
     var chartOverlayLegend = chartOverlay + '-legend';
     var chartOverlayTimeline = chartOverlay + '-timeline';
+    var tooltipTitle = tooltip ? tooltip : Em.I18n.t('graphs.tooltip.title');
+    var chartContent = '';
     if (this.get('isPopup')) {
       chartOverlayId += this.get('popupSuffix');
       chartOverlayY += this.get('popupSuffix');
@@ -244,7 +251,13 @@ App.ChartLinearTimeView = Ember.View.extend({
         break;
     }
     $(chartOverlayId+', '+chartOverlayY+', '+chartOverlayX+', '+chartOverlayLegend+', '+chartOverlayTimeline).html('');
-    $(chartOverlayId).append('<div class=\"alert '+typeClass+'\"><strong>'+title+'</strong> '+message+'</div>');
+    chartContent += '<div class=\"alert ' + typeClass + '\">';
+    if (title) {
+      chartContent += '<strong>' + title + '</strong> ';
+    }
+    chartContent += message + '</div>';
+    $(chartOverlayId).append(chartContent);
+    $(chartOverlayId).parent().attr('data-original-title', tooltipTitle);
   },
 
   /**
@@ -369,17 +382,19 @@ App.ChartLinearTimeView = Ember.View.extend({
     if (this.checkSeries(seriesData)) {
       // Check container exists (may be not, if we go to another page and wait while graphs loading)
       if (graph_container.length) {
+        var container = $("#" + this.get('id') + "-container");
         this.draw(seriesData);
         this.set('hasData', true);
           //move yAxis value lower to make them fully visible
-        $("#" + this.get('id') + "-container").find('.y_axis text').attr('y',8);
+        container.find('.y_axis text').attr('y', 8);
+        container.attr('data-original-title', Em.I18n.t('graphs.tooltip.title'));
       }
     }
     else {
       this.set('isReady', true);
       //if Axis X time interval is default(60 minutes)
       if(this.get('timeUnitSeconds') === 3600){
-        this._showMessage('info', this.t('graphs.noData.title'), this.t('graphs.noData.message'));
+        this._showMessage('info', null, this.t('graphs.noData.message'), this.t('graphs.noData.tooltip.title'));
         this.set('hasData', false);
       }
       else {

ambari-web/app/views/common/widget/graph_widget_view.js

@@ -284,7 +284,10 @@ App.GraphWidgetView = Em.View.extend(App.WidgetMixin, {
         if (self.get('isPreview')) {
           App.tooltip(this.$("[rel='ZoomInTooltip']"), 'disable');
         } else {
-          App.tooltip(this.$("[rel='ZoomInTooltip']"), {placement : 'left'});
+          App.tooltip(this.$("[rel='ZoomInTooltip']"), {
+            placement: 'left',
+            template: '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner graph-tooltip"></div></div>'
+          });
         }
       });
     }.observes('parentView.data')

ambari-web/app/views/main/dashboard/widget.js

@@ -172,7 +172,10 @@ App.DashboardWidgetView = Em.View.extend({
   }),
 
   didInsertElement: function () {
-    App.tooltip(this.$("[rel='ZoomInTooltip']"), {placement : 'left'});
+    App.tooltip(this.$("[rel='ZoomInTooltip']"), {
+      placement: 'left',
+      template: '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner graph-tooltip"></div></div>'
+    });
   },
 
   willDestroyElement : function() {

ambari-web/test/mixins/common/widgets/widget_section_test.js

@@ -0,0 +1,63 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+var App = require('app');
+
+require('mixins/common/widgets/widget_section');
+
+describe('App.WidgetSectionMixin', function () {
+
+  var obj;
+
+  beforeEach(function () {
+    obj = Em.Object.create(App.WidgetSectionMixin);
+  });
+
+  describe('#isAmbariMetricsInstalled', function () {
+
+    var cases = [
+      {
+        services: [],
+        isAmbariMetricsInstalled: false,
+        title: 'Ambari Metrics not installed'
+      },
+      {
+        services: [
+          {
+            serviceName: 'AMBARI_METRICS'
+          }
+        ],
+        isAmbariMetricsInstalled: true,
+        title: 'Ambari Metrics installed'
+      }
+    ];
+
+    afterEach(function () {
+      App.Service.find.restore();
+    });
+
+    cases.forEach(function (item) {
+      it(item.title, function () {
+        sinon.stub(App.Service, 'find').returns(item.services);
+        expect(obj.get('isAmbariMetricsInstalled')).to.equal(item.isAmbariMetricsInstalled);
+      });
+    });
+
+  });
+
+});