ATLAS-3190: UI : Allow user to refresh metric data inside popup
Signed-off-by: Sarath Subramanian <ssubramanian@hortonworks.com>
(cherry picked from commit dfc346d3b87d1dce2268904fec6c26a36be7f2f0)
diff --git a/dashboardv2/public/css/scss/override.scss b/dashboardv2/public/css/scss/override.scss
index ea5b6a7..a8627fb 100644
--- a/dashboardv2/public/css/scss/override.scss
+++ b/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 {
diff --git a/dashboardv2/public/js/modules/Modal.js b/dashboardv2/public/js/modules/Modal.js
index b49f657..f8b7edab 100644
--- a/dashboardv2/public/js/modules/Modal.js
+++ b/dashboardv2/public/js/modules/Modal.js
@@ -138,6 +138,7 @@
*/
open: function(cb) {
if (!this.isRendered) this.render();
+ $(".tooltip").tooltip("hide");
var self = this,
$el = this.$el;
@@ -201,6 +202,14 @@
$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 @@
this._preventClose = false;
return;
}
+ $(".tooltip").tooltip("hide");
$el.one('hidden.bs.modal', function onHidden(e) {
// Ignore events propagated from interior objects, like bootstrap tooltips
diff --git a/dashboardv2/public/js/templates/common/Modal.html b/dashboardv2/public/js/templates/common/Modal.html
index 6327241..cf409ef 100644
--- a/dashboardv2/public/js/templates/common/Modal.html
+++ b/dashboardv2/public/js/templates/common/Modal.html
@@ -19,13 +19,20 @@
{{#if title}}
<div class="modal-header">
<a class="close">×</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}}}
- {{else}}
- {{tt title}}
- {{/if}}
- </h4>
+ {{#if titleHtml}}
+ {{{tt title}}}
+ {{else}}
+ {{tt title}}
+ {{/if}}
+ </h4>
</div>
{{/if}} {{#if contentWithFooter}} {{else}}
<div class="modal-body">{{#if contentHtml}} {{{content}}} {{else}} {{content}} {{/if}}
diff --git a/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html b/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html
index 2bba8e5..8679c3b 100644
--- a/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html
+++ b/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">
diff --git a/dashboardv2/public/js/templates/site/Header.html b/dashboardv2/public/js/templates/site/Header.html
index fc612f5..93338db 100644
--- a/dashboardv2/public/js/templates/site/Header.html
+++ b/dashboardv2/public/js/templates/site/Header.html
@@ -19,10 +19,10 @@
<li>
<a href="javascript:void(0);" data-id="menuHamburger"><i class="fa fa-bars"></i></a>
</li>
- <li class="details-backbutton"><a href="javascript:void(0);" data-id="backButton"><i class="fa fa-chevron-left"></i> Back To Results</a></li>
+ <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">
diff --git a/dashboardv2/public/js/views/graph/LineageLayoutView.js b/dashboardv2/public/js/views/graph/LineageLayoutView.js
index bc846dd..6c71319 100644
--- a/dashboardv2/public/js/views/graph/LineageLayoutView.js
+++ b/dashboardv2/public/js/views/graph/LineageLayoutView.js
@@ -161,6 +161,11 @@
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 @@
Utils.notifyError({
content: "There was an error in downloading Lineage!"
});
+ that.toggleLoader(loaderTargetDiv);
return;
}
a.href = DOMURL.createObjectURL(blob);
diff --git a/dashboardv2/public/js/views/site/Statistics.js b/dashboardv2/public/js/views/site/Statistics.js
index 1bf4859..6b29b45 100644
--- a/dashboardv2/public/js/views/site/Statistics.js
+++ b/dashboardv2/public/js/views/site/Statistics.js
@@ -58,23 +58,34 @@
*/
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 @@
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 = {};
