AMBARI-13433. Issues with CSV download.

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

@@ -29,16 +29,24 @@ App.ExportMetricsMixin = Em.Mixin.create({
    */
   exportToCSVArgument: true,
 
-  isMenuHidden: true,
+  isExportMenuHidden: true,
+
+  isExportButtonHidden: false,
 
   exportMetricsMenuView: App.ExportMetricsMenuView.extend(),
 
+  hideMenuForNoData: function () {
+    if (this.get('isExportButtonHidden')) {
+      this.set('isExportMenuHidden', true);
+    }
+  }.observes('isExportButtonHidden'),
+
   toggleFormatsList: function () {
-    this.toggleProperty('isMenuHidden');
+    this.toggleProperty('isExportMenuHidden');
   },
 
   exportGraphData: function () {
-    this.set('isMenuHidden', true);
+    this.set('isExportMenuHidden', true);
   },
 
   exportGraphDataSuccessCallback: function (response, request, params) {

ambari-web/app/styles/application.less

@@ -2306,9 +2306,11 @@ a:focus {
     z-index: 5;
   }
   .chart-title {
-    padding-right: 15px;
     text-align: center;
     font-size: small;
+    &.has-data {
+      padding-right: 15px;
+    }
   }
   .corner-icon {
     position: absolute;

ambari-web/app/styles/enhanced_service_dashboard.less

@@ -27,9 +27,9 @@
     width: 98%;
     padding: 43px;
     border: 1px solid @border-color;
-    border-radius: 0px;
-    -webkit-border-radius: 0px;
-    -moz-border-radius: 0px;
+    border-radius: 0;
+    -webkit-border-radius: 0;
+    -moz-border-radius: 0;
     background-image: none;
     .icon-plus {
       font-size: 70px;
@@ -140,13 +140,13 @@
         background: url(/img/spinner.gif) no-repeat center center;
       }
       .chart-container{
-        margin: -4px 8px 0px 8px;
+        margin: -4px 8px 0 8px;
         .chart-y-axis{
           margin-top: 10px;
         }
         .chart-legend {
           top: 110px;
-          left: 0px;
+          left: 0;
           padding: 3px;
           min-width: 100%;
           text-align: left;
@@ -210,31 +210,33 @@
         display: none;
         .icon-remove-sign{
           color: #000000;
-          text-shadow: #fff 0px 0px 15px;
+          text-shadow: #fff 0 0 15px;
           position: absolute;
           left: -7px;
           top: -7px;
         }
-        .icon-edit, .icon-copy, .icon-save {
-          color: #555555;
-          font-weight: bold;
-          text-shadow: #ffffff -8px 8px 10px;
-          background-color: rgba(255,255,255,0.6);
-          position: absolute;
-          padding: 5px 5px;
-        }
-        .icon-copy {
-          right: 45px;
-        }
-        .icon-edit {
-          right: 25px;
-        }
-        .icon-save {
-          right: 5px;
+      }
+      .widget-icons {
+        position: absolute;
+        right: 5px;
+        top: 6px;
+        .corner-icon {
+          i {
+            position: relative;
+            color: #555555;
+            font-weight: bold;
+            text-shadow: #fff -8px 8px 8px, #fff 8px 8px 8px, #fff -8px -8px 8px, #fff 8px -8px 8px;
+            background-color: rgba(255,255,255,0.6);
+            padding: 5px 5px 5px 2px;
+          }
+          &.hidden i {
+            display: none;
+          }
         }
       }
       .export-graph-list {
-        right: -1px;
+        right: -6px;
+        margin-top: -2px;
       }
       &:hover {
         cursor: move;
@@ -281,7 +283,7 @@
 }
 
 .chart-legend .description-line {
-  padding: 0px 3px 8px 8px;
+  padding: 0 3px 8px 8px;
   line-height: 16px;
   max-height: 45px;
   font-weight: bold;
@@ -440,7 +442,7 @@
         a {
           position: absolute;
           right: 3px;
-          top: 0px;
+          top: 0;
           text-decoration: none;
           display: none;
           .icon-remove {
@@ -479,9 +481,9 @@
           -webkit-box-shadow: none;
           -moz-box-shadow: none;
           box-shadow: none;
-          border-radius: 0px;
-          -webkit-border-radius: 0px;
-          -moz-border-radius: 0px;
+          border-radius: 0;
+          -webkit-border-radius: 0;
+          -moz-border-radius: 0;
           -webkit-transition: none;
           -moz-transition: none;
           -o-transition: none;
@@ -528,7 +530,7 @@
         }
         label.checkbox {
           line-height: 20px;
-          margin-bottom: 0px;
+          margin-bottom: 0;
           margin-top: 5px;
         }
         .description-text-area {
@@ -556,7 +558,7 @@
   .select-options-dropdown {
     width: 240px;
     max-height: 123px;
-    padding: 0px;
+    padding: 0;
     border-bottom: 200px transparent solid;
     border-right: 150px transparent solid;
     border-left: none;
@@ -567,13 +569,13 @@
   }
   li.metric-select {
     padding: 5px;
-    padding-bottom: 0px;
+    padding-bottom: 0;
     border: 1px #ccc solid;
     border-bottom: none;
   }
   li.aggregator-select {
     padding: 5px;
-    padding-bottom: 0px;
+    padding-bottom: 0;
     border: 1px #ccc solid;
     border-bottom: none;
     border-top: none;
@@ -629,9 +631,9 @@
       min-width: 300px;
       width: 300px;
       border: 1px solid rgba(0, 0, 0, 0.2);
-      -webkit-border-radius: 0px;
-      -moz-border-radius: 0px;
-      border-radius: 0px;
+      -webkit-border-radius: 0;
+      -moz-border-radius: 0;
+      border-radius: 0;
       -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
       -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
       box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
@@ -645,7 +647,7 @@
     max-height: 600px;
     position: fixed;
     .modal-body {
-      padding-top: 0px;
+      padding-top: 0;
       min-height: 290px;
       max-height: 460px;
     }
@@ -717,7 +719,7 @@
           }
           .is-shared-icon {
             display: inline-block;
-            margin-bottom: 0px;
+            margin-bottom: 0;
             margin-right: 5px;
             color: #888;
           }
@@ -749,7 +751,7 @@
           }
           .dropdown-menu {
             min-width: 110px;
-            left: 0px;
+            left: 0;
           }
         }
       }

ambari-web/app/templates/common/chart/linear_time.hbs

@@ -19,12 +19,10 @@
 <div {{bindAttr class="view.isReady:hide:show :screensaver :no-borders :chart-container"}}></div>
 <div {{bindAttr class="view.isReady::hidden :time-label"}}>
   {{view.parentView.currentTimeState.name}}
-  {{#if view.parentView.graph.hasData}}
-    <a class="corner-icon pull-right" href="#" {{action toggleFormatsList target="view"}}>
-      <i class="icon-save"></i>
-    </a>
-    {{view view.exportMetricsMenuView}}
-  {{/if}}
+  <a {{bindAttr class="view.isExportButtonHidden:hidden :corner-icon :pull-right"}} href="#" {{action toggleFormatsList target="view"}}>
+    <i class="icon-save"></i>
+  </a>
+  {{view view.exportMetricsMenuView}}
 </div>
 {{#if view.isTimePagingEnable}}
   <div {{bindAttr class="view.leftArrowVisible:visibleArrow :arrow-left"}} {{action "switchTimeBack" target="view.parentView"}}></div>
@@ -34,7 +32,7 @@
   <div {{bindAttr id="view.xAxisId"}} {{bindAttr class="view.xAxisClass :chart-x-axis"}}></div>
   <div {{bindAttr id="view.legendId"}} {{bindAttr class="view.legendClass :chart-legend"}}></div>
   <div {{bindAttr id="view.chartId"}} {{bindAttr class="view.chartClass :chart"}}></div>
-  <div {{bindAttr id="view.titleId"}} {{bindAttr class="view.titleClass :chart-title"}}>{{view.title}}</div>
+  <div {{bindAttr id="view.titleId"}} {{bindAttr class="view.titleClass view.isExportButtonHidden::has-data :chart-title"}}>{{view.title}}</div>
 </div>
 {{#if view.isTimePagingEnable}}
   <div {{bindAttr class="view.rightArrowVisible:visibleArrow :arrow-right"}} {{action "switchTimeForward" "forward" target="view.parentView"}}></div>

ambari-web/app/templates/common/widget/gauge_widget.hbs

@@ -23,12 +23,14 @@
     </a>
     <div class="caption title span11">{{view.content.widgetName}}</div>
     {{#isAccessible ADMIN}}
-      <a class="corner-icon pull-right" href="#" {{action cloneWidget target="view"}}>
-        <i class="icon-copy"></i>
-      </a>
-      <a class="corner-icon pull-right" href="#" {{action editWidget target="view"}}>
-        <i class="icon-edit"></i>
-      </a>
+      <div class="widget-icons">
+        <a class="corner-icon pull-right" href="#" {{action editWidget target="view"}}>
+          <i class="icon-edit"></i>
+        </a>
+        <a class="corner-icon pull-right" href="#" {{action cloneWidget target="view"}}>
+          <i class="icon-copy"></i>
+        </a>
+      </div>
     {{/isAccessible}}
     <div class="content">
       {{#if view.isUnavailable}}

ambari-web/app/templates/common/widget/graph_widget.hbs

@@ -23,16 +23,18 @@
     </a>
     <div class="caption title span11">{{view.content.widgetName}}</div>
     {{#isAccessible ADMIN}}
-      <a class="corner-icon pull-right" href="#" {{action cloneWidget target="view"}}>
-        <i class="icon-copy"></i>
-      </a>
-      <a class="corner-icon pull-right" href="#" {{action editWidget target="view"}}>
-        <i class="icon-edit"></i>
-      </a>
-      <a class="corner-icon pull-right" href="#" {{action toggleFormatsList target="view"}}>
-        <i class="icon-save"></i>
-      </a>
-      {{view view.exportMetricsMenuView}}
+      <div class="widget-icons">
+        <a {{bindAttr class="view.isExportButtonHidden:hidden :corner-icon :pull-right"}} href="#" {{action toggleFormatsList target="view"}}>
+          <i class="icon-save"></i>
+        </a>
+        <a class="corner-icon pull-right" href="#" {{action editWidget target="view"}}>
+          <i class="icon-edit"></i>
+        </a>
+        <a class="corner-icon pull-right" href="#" {{action cloneWidget target="view"}}>
+          <i class="icon-copy"></i>
+        </a>
+        {{view view.exportMetricsMenuView}}
+      </div>
     {{/isAccessible}}
     <div class="content"> {{view view.graphView}}</div>
 

ambari-web/app/templates/common/widget/number_widget.hbs

@@ -23,12 +23,14 @@
     </a>
     <div class="caption title span11">{{view.content.widgetName}}</div>
     {{#isAccessible ADMIN}}
-      <a class="corner-icon pull-right" href="#" {{action cloneWidget target="view"}}>
-        <i class="icon-copy"></i>
-      </a>
+    <div class="widget-icons">
       <a class="corner-icon pull-right" href="#" {{action editWidget target="view"}}>
         <i class="icon-edit"></i>
       </a>
+      <a class="corner-icon pull-right" href="#" {{action cloneWidget target="view"}}>
+        <i class="icon-copy"></i>
+      </a>
+      </div>
     {{/isAccessible}}
     <div {{bindAttr class="view.contentColor :content"}}>{{view.displayValue}}</div>
     {{#if view.content.description}}

ambari-web/app/templates/common/widget/template_widget.hbs

@@ -23,12 +23,14 @@
     </a>
     <div class="caption title span11">{{view.content.widgetName}}</div>
     {{#isAccessible ADMIN}}
-      <a class="corner-icon pull-right" href="#" {{action cloneWidget target="view"}}>
-        <i class="icon-copy"></i>
-      </a>
-      <a class="corner-icon pull-right" href="#" {{action editWidget target="view"}}>
-        <i class="icon-edit"></i>
-      </a>
+      <div class="widget-icons">
+        <a class="corner-icon pull-right" href="#" {{action editWidget target="view"}}>
+          <i class="icon-edit"></i>
+        </a>
+        <a class="corner-icon pull-right" href="#" {{action cloneWidget target="view"}}>
+          <i class="icon-copy"></i>
+        </a>
+      </div>
     {{/isAccessible}}
     <div {{bindAttr class="view.contentColor :content"}}>{{{view.displayValue}}}</div>
     {{#if view.content.description}}

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

@@ -26,11 +26,11 @@
   <div id="{{unbound view.id}}-chart" class="chart"  {{action showGraphInPopup target="view"}}></div>
   <div id="{{unbound view.id}}-timeline" class="timeline" {{action showGraphInPopup target="view"}}></div>
   {{#unless view.noTitleUnderGraph}}
-    <div id="{{unbound view.id}}-title" class="chart-title">
+    <div id="{{unbound view.id}}-title" {{bindAttr class="view.isExportButtonHidden::has-data :chart-title"}}>
       {{view.title}}
     </div>
     {{#if view.isReady}}
-      <a class="corner-icon span1" href="#" {{action toggleFormatsList target="view"}}>
+      <a {{bindAttr class="view.isExportButtonHidden:hidden :corner-icon :span1"}} href="#" {{action toggleFormatsList target="view"}}>
         <i class="icon-save"></i>
       </a>
       <div class="export-graph-list-top"></div>

ambari-web/app/templates/main/dashboard/widgets/cluster_metrics.hbs

@@ -25,7 +25,7 @@
       <div class="caption span10">{{view.title}}</div>
       {{#if view.isDataLoaded}}
         {{#if view.childViews.lastObject.hasData}}
-          <a class="corner-icon span1" href="#" {{action toggleFormatsList target="view"}}>
+          <a {{bindAttr class="view.isExportButtonHidden:hidden :corner-icon :span1"}} href="#" {{action toggleFormatsList target="view"}}>
             <i class="icon-save"></i>
           </a>
           {{view view.exportMetricsMenuView}}

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

@@ -165,7 +165,7 @@ App.ChartLinearTimeView = Ember.View.extend(App.ExportMetricsMixin, {
     this.loadData();
     this.registerGraph();
     this.$().parent().on('mouseleave', function () {
-      self.set('isMenuHidden', true);
+      self.set('isExportMenuHidden', true);
     });
     App.tooltip(this.$("[rel='ZoomInTooltip']"), {
       placement: 'left',
@@ -209,7 +209,7 @@ App.ChartLinearTimeView = Ember.View.extend(App.ExportMetricsMixin, {
         name: this.get('ajaxIndex'),
         sender: this,
         data: this.getDataForAjaxRequest(),
-        success: '_refreshGraph',
+        success: 'loadDataSuccessCallback',
         error: 'loadDataErrorCallback'
       });
     }
@@ -237,13 +237,20 @@ App.ChartLinearTimeView = Ember.View.extend(App.ExportMetricsMixin, {
     };
   },
 
+  loadDataSuccessCallback: function (response) {
+    this._refreshGraph(response);
+  },
+
   loadDataErrorCallback: function (xhr, textStatus, errorThrown) {
     this.set('isReady', true);
     if (xhr.readyState == 4 && xhr.status) {
       textStatus = xhr.status + " " + textStatus;
     }
     this._showMessage('warn', this.t('graphs.error.title'), this.t('graphs.error.message').format(textStatus, errorThrown));
-    this.set('hasData', false);
+    this.setProperties({
+      hasData: false,
+      isExportButtonHidden: true
+    });
   },
 
   /**
@@ -390,7 +397,7 @@ App.ChartLinearTimeView = Ember.View.extend(App.ExportMetricsMixin, {
    *
    * @type Function
    */
-  _refreshGraph: function (jsonData) {
+  _refreshGraph: function (jsonData, graphView) {
     if (this.get('isDestroyed')) {
       return;
     }
@@ -414,7 +421,10 @@ App.ChartLinearTimeView = Ember.View.extend(App.ExportMetricsMixin, {
         }
       });
     }
-    if (this.checkSeries(seriesData)) {
+    var hasData = this.checkSeries(seriesData);
+    var view = graphView || this;
+    view.set('isExportButtonHidden', !hasData);
+    if (hasData) {
       // Check container exists (may be not, if we go to another page and wait while graphs loading)
       if (graph_container.length) {
         container = $(this.get('_containerSelector'));
@@ -760,7 +770,7 @@ App.ChartLinearTimeView = Ember.View.extend(App.ExportMetricsMixin, {
           });
           this.$().closest('.modal').on('click', function (event) {
             if (!($(event.target).is('.corner-icon, .icon-save, .export-graph-list-container, .export-graph-list-container *'))) {
-              popupBody.set('isMenuHidden', true);
+              popupBody.set('isExportMenuHidden', true);
             }
           });
           $('#modal').addClass('modal-graph-line');

ambari-web/app/views/common/export_metrics_menu_view.js

@@ -20,7 +20,7 @@ var App = require('app');
 
 App.ExportMetricsMenuView = Em.View.extend({
 
-  classNameBindings: ['parentView.isMenuHidden::open', ':export-graph-list-container'],
+  classNameBindings: ['parentView.isExportMenuHidden::open', ':export-graph-list-container'],
 
   templateName: require('templates/common/export_metrics_menu')
 

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

@@ -281,16 +281,15 @@ App.GraphWidgetView = Em.View.extend(App.WidgetMixin, App.ExportMetricsMixin, {
     },
 
     loadData: function () {
-      var self = this;
-      Em.run.next(function () {
-        self._refreshGraph(self.get('parentView.data'))
+      Em.run.next(this, function () {
+        this._refreshGraph(this.get('parentView.data'), this.get('parentView'));
       });
     },
 
     didInsertElement: function () {
       var self = this;
       this.$().closest('.graph-widget').on('mouseleave', function () {
-        self.set('parentView.isMenuHidden', true);
+        self.set('parentView.isExportMenuHidden', true);
       });
       this.setYAxisFormatter();
       this.loadData();
@@ -315,7 +314,14 @@ App.GraphWidgetView = Em.View.extend(App.WidgetMixin, App.ExportMetricsMixin, {
       fileType = isCSV ? 'csv' : 'json',
       fileName = 'data.' + fileType,
       metrics = this.get('content.metrics'),
+      hasData = Em.isArray(metrics) && metrics.some(function (item) {
+        return Em.isArray(item.data);
+      });
+    if (hasData) {
       data = isCSV ? this.prepareCSV(metrics) : this.prepareJSON(metrics);
-    fileUtils.downloadTextFile(data, fileType, fileName);
+      fileUtils.downloadTextFile(data, fileType, fileName);
+    } else {
+      App.showAlertPopup(Em.I18n.t('graphs.noData.title'), Em.I18n.t('graphs.noData.tooltip.title'));
+    }
   }
 });

ambari-web/app/views/main/dashboard/widgets/cluster_metrics_widget.js

@@ -25,7 +25,7 @@ App.ClusterMetricsDashboardWidgetView = App.DashboardWidgetView.extend(App.Expor
   didInsertElement: function () {
     var self = this;
     this.$().on('mouseleave', function () {
-      self.set('isMenuHidden', true);
+      self.set('isExportMenuHidden', true);
     });
     App.tooltip(this.$('.corner-icon > .icon-save'), {
       title: Em.I18n.t('common.export')

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

@@ -33,20 +33,20 @@ describe('App.ExportMetricsMixin', function () {
 
     var cases = [
       {
-        isMenuHidden: true,
+        isExportMenuHidden: true,
         title: 'menu should be visible'
       },
       {
-        isMenuHidden: false,
+        isExportMenuHidden: false,
         title: 'menu should be hidden'
       }
     ];
 
     cases.forEach(function (item) {
       it(item.title, function () {
-        obj.set('isMenuHidden', !item.isMenuHidden);
+        obj.set('isExportMenuHidden', !item.isExportMenuHidden);
         obj.toggleFormatsList();
-        expect(obj.get('isMenuHidden')).to.equal(item.isMenuHidden);
+        expect(obj.get('isExportMenuHidden')).to.equal(item.isExportMenuHidden);
       });
     });
 
@@ -56,20 +56,20 @@ describe('App.ExportMetricsMixin', function () {
 
     var cases = [
       {
-        isMenuHidden: true,
+        isExportMenuHidden: true,
         title: 'menu should remain hidden'
       },
       {
-        isMenuHidden: false,
+        isExportMenuHidden: false,
         title: 'menu should become hidden'
       }
     ];
 
     cases.forEach(function (item) {
       it(item.title, function () {
-        obj.set('isMenuHidden', item.isMenuHidden);
+        obj.set('isExportMenuHidden', item.isExportMenuHidden);
         obj.exportGraphData();
-        expect(obj.get('isMenuHidden')).to.be.true;
+        expect(obj.get('isExportMenuHidden')).to.be.true;
       });
     });
 
@@ -289,4 +289,31 @@ describe('App.ExportMetricsMixin', function () {
 
   });
 
+  describe('#hideMenuForNoData', function () {
+
+    var cases = [
+      {
+        isExportButtonHidden: true,
+        isExportMenuHidden: true,
+        title: 'menu should be hidden'
+      },
+      {
+        isExportButtonHidden: false,
+        isExportMenuHidden: false,
+        title: 'menu should be visible'
+      }
+    ];
+
+    cases.forEach(function (item) {
+      it(item.title, function () {
+        obj.setProperties({
+          isExportButtonHidden: item.isExportButtonHidden,
+          isExportMenuHidden: false
+        });
+        expect(obj.get('isExportMenuHidden')).to.equal(item.isExportMenuHidden);
+      });
+    });
+
+  });
+
 });

ambari-web/test/views/common/chart/linear_time_test.js

@@ -266,6 +266,26 @@ describe('App.ChartLinearTimeView', function () {
 
   });
 
+  describe('#loadDataSuccessCallback', function () {
+
+    beforeEach(function () {
+      sinon.stub(chartLinearTimeView, '_refreshGraph', Em.K);
+    });
+
+    afterEach(function () {
+      chartLinearTimeView._refreshGraph.restore();
+    });
+
+    it('should refresh graph', function () {
+      var response = {
+        key: 'value'
+      };
+      chartLinearTimeView.loadDataSuccessCallback(response);
+      expect(chartLinearTimeView._refreshGraph.calledOnce).to.be.true;
+      expect(chartLinearTimeView._refreshGraph.calledWith(response)).to.be.true;
+    });
+  });
+
 });