Skip to content

A
atlas
Commit dfc346d3 by kevalbhatt Committed by Sarath Subramanian
Options

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

Signed-off-by: 's avatarSarath Subramanian <ssubramanian@hortonworks.com>
parent bd7f5eec
Showing with 73 additions and 15 deletions
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,13 +19,20 @@
{{#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}}}
{{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}}
......
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
......@@ -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">
......
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 = {};
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment