ATLAS-3190: UI : Allow user to refresh metric data inside popup

dashboardv2/public/css/scss/override.scss

@@ -30,6 +30,21 @@
 .modal-header {
     padding: 15px;
     border-bottom: 1px solid #DEDEDE;
+
+    .header-button {
+        float: right;
+        opacity: .2;
+        color: $black;
+        margin-top: -2px;
+
+        &:hover {
+            color: $black;
+            text-decoration: none;
+            cursor: pointer;
+            filter: alpha(opacity=50);
+            opacity: .5;
+        }
+    }
 }
 
 .modal-title {

dashboardv2/public/js/modules/Modal.js

@@ -138,6 +138,7 @@ define(['require', 'backbone', 'hbs!tmpl/common/Modal'], function(require, Backb
          */
         open: function(cb) {
             if (!this.isRendered) this.render();
+            $(".tooltip").tooltip("hide");
 
             var self = this,
                 $el = this.$el;
@@ -201,6 +202,14 @@ define(['require', 'backbone', 'hbs!tmpl/common/Modal'], function(require, Backb
             $el.one('shown.bs.modal', function() {
                 self.trigger('shownModal');
             });
+            $el.find('.header-button').on('click', 'button', function() {
+                var headerButtons = self.options.headerButtons,
+                    clickedButtonIndex = $(this).data("index"),
+                    clickedButtonObj = headerButtons && headerButtons[clickedButtonIndex];
+                if (clickedButtonObj && clickedButtonObj.onClick) {
+                    clickedButtonObj.onClick.apply(this, arguments);
+                }
+            });
             return this;
         },
 
@@ -216,6 +225,7 @@ define(['require', 'backbone', 'hbs!tmpl/common/Modal'], function(require, Backb
                 this._preventClose = false;
                 return;
             }
+            $(".tooltip").tooltip("hide");
 
             $el.one('hidden.bs.modal', function onHidden(e) {
                 // Ignore events propagated from interior objects, like bootstrap tooltips

dashboardv2/public/js/templates/common/Modal.html

@@ -19,6 +19,13 @@
         {{#if title}}
         <div class="modal-header">
             <a class="close">&times;</a>
+            {{#if headerButtons}}
+            <div class="header-button">
+                {{#each headerButtons}}
+                <button type="button" data-index={{@index}} {{#if this.title}} title="{{this.title}}" {{/if}} class="btn {{this.btnClass}}">{{this.text}}</button>
+                {{/each}}
+            </div>
+            {{/if}}
             <h4 class="modal-title">
                 {{#if titleHtml}}
                 {{{tt title}}}

dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html

@@ -108,13 +108,13 @@
         <div>
             <button type="button" data-id="search-toggler" title="Search" class="btn btn-action btn-gray btn-sm"><i class="fa fa-search"></i></button>
         </div>
-        <div>
-            <button type="button" data-id="fullScreen-toggler" title="Full screen" class="btn btn-action btn-gray btn-sm fullscreen_lineage"><i class="fa fa-expand"></i></button>
-        </div>
         <div class="btn-group">
             <button type="button" id="zoom_in" class="btn btn-action btn-gray btn-sm lineageZoomButton" title="Zoom In" data-id="refreshBtn"> <i class="fa fa-search-plus"></i></button>
             <button type="button" id="zoom_out" class="btn btn-action btn-gray btn-sm lineageZoomButton" title="Zoom Out" data-id="refreshBtn"> <i class="fa fa-search-minus"></i></button>
         </div>
+        <div>
+            <button type="button" data-id="fullScreen-toggler" title="Full screen" class="btn btn-action btn-gray btn-sm fullscreen_lineage"><i class="fa fa-expand"></i></button>
+        </div>
     </div>
     <div class="box-panel size-lg node-details slide-from-left lineage-node-detail">
         <div class="header clearfix">

dashboardv2/public/js/templates/site/Header.html

@@ -22,7 +22,7 @@
         <li class="details-backbutton"><a href="javascript:void(0);" data-id="backButton"><i class="fa fa-chevron-left"></i> Back To Results</a></li>
     </ul>
     <div class="btn-group pull-right header-menu ">
-        <a class="show-stat" href="javascript:void(0);"><i class="fa fa-bar-chart"></i></a>
+        <a class="show-stat" href="javascript:void(0);" title="Statistics"><i class="fa fa-bar-chart"></i></a>
         <a target="_blank" href="http://atlas.apache.org/"><i class="fa  fa-question-circle"></i></a>
         <a href="javascript:void(0);" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="user-dropdown"><i class="fa fa-user user-circle "></i><span class="userName"></span></a>
         <ul class="dropdown-menu">

dashboardv2/public/js/views/graph/LineageLayoutView.js

@@ -161,6 +161,11 @@ define(['require',
                 var icon = $(e.currentTarget).find('i'),
                     panel = $(e.target).parents('.tab-pane').first();
                 icon.toggleClass('fa-expand fa-compress');
+                if(icon.hasClass('fa-expand')){
+                    icon.parent('button').attr("data-original-title","Full Screen");
+                }else{
+                    icon.parent('button').attr("data-original-title","Default View");
+                }
                 panel.toggleClass('fullscreen-mode');
             },
             onCheckUnwantedEntity: function(e) {
@@ -991,6 +996,7 @@ define(['require',
                                     Utils.notifyError({
                                         content: "There was an error in downloading Lineage!"
                                     });
+                                    that.toggleLoader(loaderTargetDiv);
                                     return;
                                 }
                                 a.href = DOMURL.createObjectURL(blob);

dashboardv2/public/js/views/site/Statistics.js

@@ -58,23 +58,34 @@ define(['require',
              */
             initialize: function(options) {
                 _.extend(this, options);
+                var that = this;
                 var modal = new Modal({
                     title: 'Statistics',
                     content: this,
                     okCloses: true,
+                    okText: "Close",
                     showFooter: true,
                     allowCancel: false,
-                    width: "60%"
+                    width: "60%",
+                    headerButtons: [{
+                        title: "Refresh Data",
+                        btnClass: "fa fa-refresh",
+                        onClick: function() {
+                            modal.$el.find('.header-button .fa-refresh').tooltip('hide').prop('disabled', true).addClass('fa-spin');
+                            that.fetchMetricData({ update: true });
+                        }
+                    }]
                 }).open();
 
                 modal.on('closeModal', function() {
                     modal.trigger('cancel');
                 });
+                this.modal = modal;
             },
             bindEvents: function() {},
-            onRender: function() {
-                var that = this;
-                var entityCountCollection = new VTagList();
+            fetchMetricData: function(options) {
+                var that = this,
+                    entityCountCollection = new VTagList();
                 entityCountCollection.url = UrlLinks.entityCountApi();
                 entityCountCollection.modelAttrName = "data";
                 entityCountCollection.fetch({
@@ -84,9 +95,18 @@ define(['require',
                         that.renderEntities({ data: data });
                         that.$('.statsContainer,.statsNotificationContainer').removeClass('hide');
                         that.$('.statsLoader,.statsNotificationLoader').removeClass('show');
+                        if (options && options.update) {
+                            that.modal.$el.find('.header-button .fa-refresh').prop('disabled', false).removeClass('fa-spin');
+                            Utils.notifySuccess({
+                                content: "Metric data is refreshed"
+                            })
+                        }
                     }
                 });
             },
+            onRender: function() {
+                this.fetchMetricData();
+            },
             genrateStatusData: function(stateObject) {
                 var that = this,
                     stats = {};