AMBARI-13359. Export formats dropdown menu on graph thumbnail is open after downloading data from detailed view popup

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

@@ -18,22 +18,27 @@
 
 var App = require('app');
 
+require('views/common/export_metrics_menu_view');
 var stringUtils = require('utils/string_utils');
 var fileUtils = require('utils/file_utils');
 
 App.ExportMetricsMixin = Em.Mixin.create({
 
   /**
-   * Used as argument passed from template to indicate that resulting format is CSV, not JSON
+   * Used as argument passed from template to indicate that resulting format is CSV instead of JSON
    */
   exportToCSVArgument: true,
 
+  isMenuHidden: true,
+
+  exportMetricsMenuView: App.ExportMetricsMenuView.extend(),
+
   toggleFormatsList: function () {
-    this.$('.export-graph-list').toggle();
+    this.toggleProperty('isMenuHidden');
   },
 
   exportGraphData: function () {
-    this.toggleFormatsList();
+    this.set('isMenuHidden', true);
   },
 
   exportGraphDataSuccessCallback: function (response, request, params) {

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

@@ -23,10 +23,7 @@
     <a class="corner-icon pull-right" href="#" {{action toggleFormatsList target="view"}}>
       <i class="icon-save"></i>
     </a>
-    <ul class="export-graph-list pull-right dropdown-menu">
-      <li><a {{action exportGraphData view.parentView.graph.exportToCSVArgument target="view"}}>{{t common.csv}}</a></li>
-      <li><a {{action exportGraphData target="view"}}>{{t common.json}}</a></li>
-    </ul>
+    {{view view.exportMetricsMenuView}}
   {{/if}}
 </div>
 {{#if view.isTimePagingEnable}}

ambari-web/app/templates/common/export_metrics_menu.hbs

@@ -0,0 +1,22 @@
+{{!
+* 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.
+}}
+
+<ul class="export-graph-list pull-right dropdown-menu">
+  <li><a {{action exportGraphData view.parentView.exportToCSVArgument target="view.parentView"}}>{{t common.csv}}</a></li>
+  <li><a {{action exportGraphData target="view.parentView"}}>{{t common.json}}</a></li>
+</ul>

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

@@ -32,10 +32,7 @@
       <a class="corner-icon pull-right" href="#" {{action toggleFormatsList target="view"}}>
         <i class="icon-save"></i>
       </a>
-      <ul class="export-graph-list pull-right dropdown-menu">
-        <li><a {{action exportGraphData view.exportToCSVArgument target="view"}}>{{t common.csv}}</a></li>
-        <li><a {{action exportGraphData target="view"}}>{{t common.json}}</a></li>
-      </ul>
+      {{view view.exportMetricsMenuView}}
     {{/isAccessible}}
     <div class="content"> {{view view.graphView}}</div>
 

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

@@ -34,10 +34,7 @@
         <i class="icon-save"></i>
       </a>
       <div class="export-graph-list-top"></div>
-      <ul class="export-graph-list pull-right dropdown-menu">
-        <li><a {{action exportGraphData view.exportToCSVArgument target="view"}}>{{t common.csv}}</a></li>
-        <li><a {{action exportGraphData target="view"}}>{{t common.json}}</a></li>
-      </ul>
+      {{view view.exportMetricsMenuView}}
     {{/if}}
   {{/unless}}
 </div>

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

@@ -28,10 +28,7 @@
           <a class="corner-icon span1" href="#" {{action toggleFormatsList target="view"}}>
             <i class="icon-save"></i>
           </a>
-          <ul class="export-graph-list pull-right dropdown-menu">
-            <li><a {{action exportGraphData view.exportToCSVArgument target="view"}}>{{t common.csv}}</a></li>
-            <li><a {{action exportGraphData target="view"}}>{{t common.json}}</a></li>
-          </ul>
+          {{view view.exportMetricsMenuView}}
         {{/if}}
       {{/if}}
 

ambari-web/app/utils/file_utils.js

@@ -16,8 +16,6 @@
  * limitations under the License.
  */
 
-var stringUtils = require('utils/string_utils');
-
 module.exports = {
 
   fileTypeMap: {

ambari-web/app/views.js

@@ -85,6 +85,7 @@ require('views/common/widget/number_widget_view');
 require('views/common/widget/heatmap_widget_view');
 require('views/common/assign_master_components_view');
 require('views/common/chosen_plugin');
+require('views/common/export_metrics_menu_view');
 require('views/login');
 require('views/main');
 require('views/main/menu');

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

@@ -161,10 +161,11 @@ App.ChartLinearTimeView = Ember.View.extend(App.ExportMetricsMixin, {
   }.property('_containerSelector', 'popupSuffix'),
 
   didInsertElement: function () {
+    var self = this;
     this.loadData();
     this.registerGraph();
     this.$().parent().on('mouseleave', function () {
-      $(this).find('.export-graph-list').hide();
+      self.set('isMenuHidden', true);
     });
     App.tooltip(this.$("[rel='ZoomInTooltip']"), {
       placement: 'left',
@@ -407,7 +408,7 @@ App.ChartLinearTimeView = Ember.View.extend(App.ExportMetricsMixin, {
     }
     else {
       graph_container.children().each(function () {
-        if (!($(this).is('.export-graph-list, .corner-icon'))) {
+        if (!($(this).is('.export-graph-list-container, .corner-icon'))) {
           $(this).children().remove();
         }
       });
@@ -751,12 +752,13 @@ App.ChartLinearTimeView = Ember.View.extend(App.ExportMetricsMixin, {
         }.property('parentView.graph.isPopupReady'),
 
         didInsertElement: function () {
+          var popupBody = this;
           App.tooltip(this.$('.corner-icon > .icon-save'), {
             title: Em.I18n.t('common.export')
           });
           this.$().closest('.modal').on('click', function (event) {
-            if (!($(event.target).is('.corner-icon, .icon-save, .export-graph-list, .export-graph-list *'))) {
-              $(this).find('.export-graph-list').hide();
+            if (!($(event.target).is('.corner-icon, .icon-save, .export-graph-list-container, .export-graph-list-container *'))) {
+              popupBody.set('isMenuHidden', true);
             }
           });
           $('#modal').addClass('modal-graph-line');

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

@@ -0,0 +1,27 @@
+/**
+ * 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');
+
+App.ExportMetricsMenuView = Em.View.extend({
+
+  classNameBindings: ['parentView.isMenuHidden::open', ':export-graph-list-container'],
+
+  templateName: require('templates/common/export_metrics_menu')
+
+});

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

@@ -288,8 +288,9 @@ App.GraphWidgetView = Em.View.extend(App.WidgetMixin, App.ExportMetricsMixin, {
     },
 
     didInsertElement: function () {
+      var self = this;
       this.$().closest('.graph-widget').on('mouseleave', function () {
-        $(this).find('.export-graph-list').hide();
+        self.set('parentView.isMenuHidden', true);
       });
       this.setYAxisFormatter();
       this.loadData();
@@ -307,10 +308,6 @@ App.GraphWidgetView = Em.View.extend(App.WidgetMixin, App.ExportMetricsMixin, {
     }.observes('parentView.data')
   }),
 
-  toggleFormatsList: function () {
-    this.get('childViews.firstObject').$().closest('.graph-widget').find('.export-graph-list').toggle();
-  },
-
   exportGraphData: function (event) {
     this._super();
     var data,

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

@@ -23,8 +23,9 @@ App.ClusterMetricsDashboardWidgetView = App.DashboardWidgetView.extend(App.Expor
   templateName: require('templates/main/dashboard/widgets/cluster_metrics'),
 
   didInsertElement: function () {
+    var self = this;
     this.$().on('mouseleave', function () {
-      $(this).find('.export-graph-list').hide();
+      self.set('isMenuHidden', 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

@@ -29,19 +29,48 @@ describe('App.ExportMetricsMixin', function () {
     obj = Em.Object.create(App.ExportMetricsMixin);
   });
 
-  describe('#exportGraphData', function () {
+  describe('#toggleFormatsList', function () {
 
-    beforeEach(function () {
-      sinon.stub(obj, 'toggleFormatsList', Em.K);
-    });
+    var cases = [
+      {
+        isMenuHidden: true,
+        title: 'menu should be visible'
+      },
+      {
+        isMenuHidden: false,
+        title: 'menu should be hidden'
+      }
+    ];
 
-    afterEach(function () {
-      obj.toggleFormatsList.restore();
+    cases.forEach(function (item) {
+      it(item.title, function () {
+        obj.set('isMenuHidden', !item.isMenuHidden);
+        obj.toggleFormatsList();
+        expect(obj.get('isMenuHidden')).to.equal(item.isMenuHidden);
+      });
     });
 
-    it('should toggle formats menu', function () {
-      obj.exportGraphData();
-      expect(obj.toggleFormatsList.calledOnce).to.be.true;
+  });
+
+  describe('#exportGraphData', function () {
+
+    var cases = [
+      {
+        isMenuHidden: true,
+        title: 'menu should remain hidden'
+      },
+      {
+        isMenuHidden: false,
+        title: 'menu should become hidden'
+      }
+    ];
+
+    cases.forEach(function (item) {
+      it(item.title, function () {
+        obj.set('isMenuHidden', item.isMenuHidden);
+        obj.exportGraphData();
+        expect(obj.get('isMenuHidden')).to.be.true;
+      });
     });
 
   });