You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@atlas.apache.org by kb...@apache.org on 2020/03/26 12:56:59 UTC
[atlas] branch master updated: ATLAS-3156 : UI:No loading animation
while creating or deleting a Classification, Create Entity, View loading
This is an automated email from the ASF dual-hosted git repository.
kbhatt pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/atlas.git
The following commit(s) were added to refs/heads/master by this push:
new 60b7d2a ATLAS-3156 : UI:No loading animation while creating or deleting a Classification, Create Entity, View loading
60b7d2a is described below
commit 60b7d2ac75828a806b64322599e09fe3376ce7b6
Author: kevalbhatt <kb...@apache.org>
AuthorDate: Thu Mar 26 17:50:06 2020 +0530
ATLAS-3156 : UI:No loading animation while creating or deleting a Classification, Create Entity, View loading
---
dashboardv2/public/css/scss/common.scss | 34 +++++++++++++++++++
.../glossary/GlossaryLayoutView_tmpl.html | 25 ++++++++------
.../js/templates/tag/TagLayoutView_tmpl.html | 26 ++++++++-------
dashboardv2/public/js/utils/CommonViewFunction.js | 4 +--
dashboardv2/public/js/utils/Utils.js | 7 +++-
.../js/views/entity/CreateEntityLayoutView.js | 8 +++--
.../public/js/views/glossary/GlossaryLayoutView.js | 19 ++++++++++-
dashboardv2/public/js/views/tag/TagLayoutView.js | 30 +++++++++++++++--
dashboardv3/public/css/scss/common.scss | 34 +++++++++++++++++++
dashboardv3/public/css/scss/loader.scss | 39 +++++++++++++++++++++-
dashboardv3/public/index.html.tpl | 1 +
dashboardv3/public/js/main.js | 32 +++++++++++++++++-
.../detail_page/DetailPageLayoutView_tmpl.html | 14 ++++++--
.../tree/BusinessMetadataTreeLayoutView_tmpl.html | 3 ++
.../tree/ClassificationTreeLayoutView_tmpl.html | 3 ++
.../tree/CustomFilterTreeLayoutView_tmpl.html | 17 ++--------
.../search/tree/EntityTreeLayoutView_tmpl.html | 15 ++-------
.../search/tree/GlossaryTreeLayoutView_tmpl.html | 6 ++--
dashboardv3/public/js/utils/CommonViewFunction.js | 4 +--
dashboardv3/public/js/utils/Utils.js | 6 ++++
.../business_metadata/EnumCreateUpdateItemView.js | 10 +++---
.../js/views/entity/CreateEntityLayoutView.js | 9 +++--
.../search/tree/BusinessMetadataTreeLayoutView.js | 16 ++++++++-
.../search/tree/ClassificationTreeLayoutView.js | 39 ++++++++++++++++++----
.../search/tree/CustomFilterTreeLayoutView.js | 18 ++++++++--
.../js/views/search/tree/EntityTreeLayoutView.js | 21 ++++++++++--
.../js/views/search/tree/GlossaryTreeLayoutView.js | 17 ++++++++--
27 files changed, 366 insertions(+), 91 deletions(-)
diff --git a/dashboardv2/public/css/scss/common.scss b/dashboardv2/public/css/scss/common.scss
index 4fcfa90..c79a96c 100644
--- a/dashboardv2/public/css/scss/common.scss
+++ b/dashboardv2/public/css/scss/common.scss
@@ -272,4 +272,38 @@ pre {
margin-bottom: 5px;
margin-left: 5px;
float: left;
+}
+
+.button-loader:after {
+ content: "\f021";
+ position: absolute;
+ left: -6px;
+ bottom: 4px;
+ font-family: FontAwesome;
+ background: transparent;
+ height: 34px;
+ width: 38px;
+ line-height: 34px;
+ text-align: center;
+ animation: spin 1000ms infinite linear;
+}
+
+@-webkit-keyframes spin {
+ 0% {
+ transform: rotate(0deg);
+ }
+
+ 100% {
+ transform: rotate(359deg);
+ }
+}
+
+@keyframes spin {
+ 0% {
+ transform: rotate(0deg);
+ }
+
+ 100% {
+ transform: rotate(359deg);
+ }
}
\ No newline at end of file
diff --git a/dashboardv2/public/js/templates/glossary/GlossaryLayoutView_tmpl.html b/dashboardv2/public/js/templates/glossary/GlossaryLayoutView_tmpl.html
index dea4fcc..67488f8 100644
--- a/dashboardv2/public/js/templates/glossary/GlossaryLayoutView_tmpl.html
+++ b/dashboardv2/public/js/templates/glossary/GlossaryLayoutView_tmpl.html
@@ -42,18 +42,23 @@
</div>
<div class="row">
<div class="col-sm-12">
- <div class="no-padding col-sm-12 term-view">
- <div>
- <input type="text" class="form-control" data-id="searchTerm" placeholder="{{#if isAssignView}}Search Term{{else}}Search Glossary, Term{{/if}}">
- </div>
- <div data-id="termTree" style="margin-top: 5px;padding-bottom: 25px;overflow-x: auto;overflow-y:hidden;">
- </div>
+ <div class="col-sm-12 text-center" data-id='glossaryTreeLoader'>
+ <i class="fa fa-refresh fa-spin-custom"></i>
</div>
- <div class="col-sm-12 no-padding category-view" style="display: none;">
- <div>
- <input type="text" class="form-control" data-id="searchCategory" placeholder="{{#if isAssignView}}Search Catalog{{else}}Search Glossary, Category{{/if}}">
+ <div data-id='glossaryTreeView'>
+ <div class="no-padding col-sm-12 term-view">
+ <div>
+ <input type="text" class="form-control" data-id="searchTerm" placeholder="{{#if isAssignView}}Search Term{{else}}Search Glossary, Term{{/if}}">
+ </div>
+ <div data-id="termTree" style="margin-top: 5px;padding-bottom: 25px;overflow-x: auto;overflow-y:hidden;">
+ </div>
</div>
- <div data-id="categoryTree" style="margin-top: 5px;padding-bottom: 25px;overflow-x: auto;overflow-y: hidden;">
+ <div class="col-sm-12 no-padding category-view" style="display: none;">
+ <div>
+ <input type="text" class="form-control" data-id="searchCategory" placeholder="{{#if isAssignView}}Search Catalog{{else}}Search Glossary, Category{{/if}}">
+ </div>
+ <div data-id="categoryTree" style="margin-top: 5px;padding-bottom: 25px;overflow-x: auto;overflow-y: hidden;">
+ </div>
</div>
</div>
</div>
diff --git a/dashboardv2/public/js/templates/tag/TagLayoutView_tmpl.html b/dashboardv2/public/js/templates/tag/TagLayoutView_tmpl.html
index 185790e..598591a 100644
--- a/dashboardv2/public/js/templates/tag/TagLayoutView_tmpl.html
+++ b/dashboardv2/public/js/templates/tag/TagLayoutView_tmpl.html
@@ -30,20 +30,22 @@
</div>
</div>
</div>
-<!-- <div class="clearfix add-seperator">
- <button type="button" class="btn btn-action btn-md pull-left" data-id="createTag" type="button"><i class="fa fa-plus"></i> Create Tag</button>
-</div> -->
<div class="row">
- <div class="list-view col-sm-12">
- <input type="text" class="form-control" data-id="offlineSearchTag" placeholder="Search Classification">
- <ul class="tag-tree" data-id="tagsList">
- </ul>
+ <div class="col-sm-12 text-center" data-id="tagTreeLoader">
+ <i class="fa fa-refresh fa-spin-custom"></i>
</div>
- <div class="tree-view col-sm-12" style="display: none;">
- <div class="treeLov">
- <select class="form-control" data-id="treeLov"></select>
+ <div data-id="tagTreeView">
+ <div class="list-view col-sm-12">
+ <input type="text" class="form-control" data-id="offlineSearchTag" placeholder="Search Classification">
+ <ul class="tag-tree" data-id="tagsList">
+ </ul>
+ </div>
+ <div class="tree-view col-sm-12" style="display: none;">
+ <div class="treeLov">
+ <select class="form-control" data-id="treeLov"></select>
+ </div>
+ <ul class="tag-tree" data-id="tagsParent">
+ </ul>
</div>
- <ul class="tag-tree" data-id="tagsParent">
- </ul>
</div>
</div>
\ No newline at end of file
diff --git a/dashboardv2/public/js/utils/CommonViewFunction.js b/dashboardv2/public/js/utils/CommonViewFunction.js
index 6b2de3e..60d6527 100644
--- a/dashboardv2/public/js/utils/CommonViewFunction.js
+++ b/dashboardv2/public/js/utils/CommonViewFunction.js
@@ -696,7 +696,7 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum
}
});
modal.on('ok', function() {
- modal.$el.find('button.ok').attr("disabled", true);
+ modal.$el.find('button.ok').showButtonLoader();
CommonViewFunction.createEditGlossaryCategoryTermSubmit(_.extend({ "ref": view, "modal": modal }, options));
});
modal.on('closeModal', function() {
@@ -742,7 +742,7 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum
modal.trigger('closeModal');
},
cust_error: function() {
- modal.$el.find('button.ok').attr("disabled", false);
+ modal.$el.find('button.ok').hideButtonLoader();
}
}
if (model) {
diff --git a/dashboardv2/public/js/utils/Utils.js b/dashboardv2/public/js/utils/Utils.js
index 20035d6..f4c55da 100644
--- a/dashboardv2/public/js/utils/Utils.js
+++ b/dashboardv2/public/js/utils/Utils.js
@@ -870,7 +870,12 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'utils/Enums',
} else {
tableEl.addClass('hide-empty-value');
}
-
+ }
+ $.fn.showButtonLoader = function() {
+ $(this).css({ "position": "relative" }).attr("disabled", "true").addClass('button-loader');
+ }
+ $.fn.hideButtonLoader = function() {
+ $(this).removeClass('button-loader').removeAttr("disabled");
}
return Utils;
});
\ No newline at end of file
diff --git a/dashboardv2/public/js/views/entity/CreateEntityLayoutView.js b/dashboardv2/public/js/views/entity/CreateEntityLayoutView.js
index 9641c38..3b8b2b6 100644
--- a/dashboardv2/public/js/views/entity/CreateEntityLayoutView.js
+++ b/dashboardv2/public/js/views/entity/CreateEntityLayoutView.js
@@ -103,7 +103,8 @@ define(['require',
}).open();
this.modal.$el.find('button.ok').attr("disabled", true);
this.modal.on('ok', function(e) {
- that.modal.$el.find('button.ok, button.cancel').attr("disabled", true);
+ that.modal.$el.find('button.cancel').attr("disabled", true);
+ that.modal.$el.find('button.ok').showButtonLoader();
that.okButton();
});
this.modal.on('closeModal', function() {
@@ -688,6 +689,7 @@ define(['require',
$(this).addClass('errorClass');
}
that.hideLoader();
+ that.modal.$el.find('button.ok').hideButtonLoader();
throw new Error("Please fill the required fields");
return;
}
@@ -763,6 +765,7 @@ define(['require',
data: JSON.stringify(entityJson),
type: "POST",
success: function(model, response) {
+ that.modal.$el.find('button.ok').hideButtonLoader();
that.modal.close();
var msgType = that.guid ? 'editSuccessMessage' : 'addSuccessMessage';
Utils.notifySuccess({
@@ -784,7 +787,8 @@ define(['require',
that.hideLoader({
editVisiblityOfEntitySelectionBox: true
});
- that.modal.$el.find('button.ok, button.cancel').attr("disabled", false);
+ that.modal.$el.find('button.ok').hideButtonLoader();
+ that.modal.$el.find('button.cancel').attr("disabled", false);
}
});
diff --git a/dashboardv2/public/js/views/glossary/GlossaryLayoutView.js b/dashboardv2/public/js/views/glossary/GlossaryLayoutView.js
index 76e6476..8195a54 100644
--- a/dashboardv2/public/js/views/glossary/GlossaryLayoutView.js
+++ b/dashboardv2/public/js/views/glossary/GlossaryLayoutView.js
@@ -54,7 +54,9 @@ define(['require',
glossaryView: 'input[name="glossaryView"]',
termTree: "[data-id='termTree']",
categoryTree: "[data-id='categoryTree']",
- importGlossary: "[data-id='importGlossary']"
+ importGlossary: "[data-id='importGlossary']",
+ glossaryTreeLoader: "[data-id='glossaryTreeLoader']",
+ glossaryTreeView: "[data-id='glossaryTreeView']"
},
/** ui events hash */
events: function() {
@@ -110,6 +112,7 @@ define(['require',
this.listenTo(this.glossaryCollection.fullCollection, "reset add change", function(skip) {
this.generateTree();
this.setValues();
+ this.changeLoaderState(false);
}, this);
this.listenTo(this.glossaryCollection, "update:details", function(options) {
var isGlossaryUpdate = options.isGlossaryUpdate;
@@ -127,6 +130,7 @@ define(['require',
this.setValues({ trigger: false });
}
}
+ this.changeLoaderState(false);
}, this);
if (!this.isAssignView) {
$('body').on('click', '.termPopoverOptions li, .categoryPopoverOptions li', function(e) {
@@ -136,6 +140,7 @@ define(['require',
}
},
onRender: function() {
+ this.changeLoaderState(true);
if (this.isAssignCategoryView) {
this.$('.category-view').show();
this.$('.term-view').hide();
@@ -146,6 +151,15 @@ define(['require',
this.getGlossary();
}
},
+ changeLoaderState: function(showLoader) {
+ if (showLoader) {
+ this.ui.glossaryTreeLoader.show();
+ this.ui.glossaryTreeView.hide();
+ } else {
+ this.ui.glossaryTreeLoader.hide();
+ this.ui.glossaryTreeView.show();
+ }
+ },
setValues: function(options) {
if (this.viewType == "category") {
if (!this.ui.glossaryView.prop("checked")) {
@@ -213,6 +227,7 @@ define(['require',
}
},
getGlossary: function() {
+ this.changeLoaderState(true);
this.glossaryCollection.fetch({ reset: true });
},
generateCategoryData: function(options) {
@@ -685,6 +700,7 @@ define(['require',
notifyObj = {
modal: true,
ok: function(argument) {
+ that.changeLoaderState(true);
if (type == "Glossary") {
that.glossaryCollection.fullCollection.get(guid).destroy(options, { silent: true, reset: false });
} else if (type == "GlossaryCategory") {
@@ -692,6 +708,7 @@ define(['require',
} else if (type == "GlossaryTerm") {
new that.glossaryCollection.model().deleteTerm(guid, options);
}
+ that.changeLoaderState(false);
},
cancel: function(argument) {}
};
diff --git a/dashboardv2/public/js/views/tag/TagLayoutView.js b/dashboardv2/public/js/views/tag/TagLayoutView.js
index 5d5be18..6657ef2 100644
--- a/dashboardv2/public/js/views/tag/TagLayoutView.js
+++ b/dashboardv2/public/js/views/tag/TagLayoutView.js
@@ -47,7 +47,9 @@ define(['require',
treeLov: "[data-id='treeLov']",
refreshTag: '[data-id="refreshTag"]',
tagView: 'input[name="tagView"]',
- expandArrow: '[data-id="expandArrow"]'
+ expandArrow: '[data-id="expandArrow"]',
+ tagTreeLoader: '[data-id="tagTreeLoader"]',
+ tagTreeView: '[data-id="tagTreeView"]'
},
/** ui events hash */
events: function() {
@@ -96,10 +98,21 @@ define(['require',
},
onRender: function() {
var that = this;
+ this.changeLoaderState(true);
this.bindEvents();
this.tagsGenerator();
},
+ changeLoaderState: function(showLoader) {
+ if (showLoader) {
+ this.ui.tagTreeLoader.show();
+ this.ui.tagTreeView.hide();
+ } else {
+ this.ui.tagTreeLoader.hide();
+ this.ui.tagTreeView.show();
+ }
+ },
fetchCollections: function() {
+ this.changeLoaderState(true);
this.collection.fetch({ reset: true });
this.ui.offLineSearchTag.val("");
},
@@ -229,7 +242,9 @@ define(['require',
if (this.createTag) {
this.createTag = false;
}
+
}
+ this.changeLoaderState(false);
},
getTagTreeList: function(options) {
var that = this,
@@ -373,7 +388,8 @@ define(['require',
});
});
modal.on('ok', function() {
- modal.$el.find('button.ok').attr("disabled", "true");
+ // modal.$el.find('button.ok').attr("disabled", "true");
+ modal.$el.find('button.ok').showButtonLoader();
that.onCreateButton(view, modal);
});
modal.on('closeModal', function() {
@@ -401,9 +417,9 @@ define(['require',
Utils.notifyInfo({
content: "Please fill the attributes or delete the input box"
});
+ modal.$el.find('button.ok').hideButtonLoader();
return;
}
-
this.name = ref.ui.tagName.val();
this.description = ref.ui.description.val();
var superTypes = [];
@@ -459,6 +475,7 @@ define(['require',
}
notifyObj['text'] = text;
Utils.notifyConfirm(notifyObj);
+ modal.$el.find('button.ok').hideButtonLoader();
return false;
}
}
@@ -476,6 +493,7 @@ define(['require',
};
new this.collection.model().set(this.json).save(null, {
success: function(model, response) {
+ that.changeLoaderState(true);
var classificationDefs = model.get('classificationDefs');
that.ui.createTag.removeAttr("disabled");
that.createTag = true;
@@ -496,7 +514,12 @@ define(['require',
content: "Classification " + that.name + Messages.getAbbreviationMsg(false, 'addSuccessMessage')
});
modal.trigger('cancel');
+ modal.$el.find('button.ok').hideButtonLoader();
+ that.changeLoaderState(false);
that.typeHeaders.fetch({ reset: true });
+ },
+ complete: function() {
+ modal.$el.find("button.ok").hideButtonLoader();
}
});
},
@@ -570,6 +593,7 @@ define(['require',
onNotifyOk: function(data) {
var that = this,
deleteTagData = this.collection.fullCollection.findWhere({ name: this.tag });
+ that.changeLoaderState(true);
deleteTagData.deleteTag({
typeName: that.tag,
success: function() {
diff --git a/dashboardv3/public/css/scss/common.scss b/dashboardv3/public/css/scss/common.scss
index 14ee1ce..053c1cf 100644
--- a/dashboardv3/public/css/scss/common.scss
+++ b/dashboardv3/public/css/scss/common.scss
@@ -285,4 +285,38 @@ pre {
.errorValidate+span .select2-selection {
border-color: red !important;
+}
+
+.button-loader:after {
+ content: "\f021";
+ position: absolute;
+ left: -6px;
+ bottom: 4px;
+ font-family: FontAwesome;
+ background: transparent;
+ height: 34px;
+ width: 38px;
+ line-height: 34px;
+ text-align: center;
+ animation: spin 1000ms infinite linear;
+}
+
+@-webkit-keyframes spin {
+ 0% {
+ transform: rotate(0deg);
+ }
+
+ 100% {
+ transform: rotate(359deg);
+ }
+}
+
+@keyframes spin {
+ 0% {
+ transform: rotate(0deg);
+ }
+
+ 100% {
+ transform: rotate(359deg);
+ }
}
\ No newline at end of file
diff --git a/dashboardv3/public/css/scss/loader.scss b/dashboardv3/public/css/scss/loader.scss
index 6fa552f..1773324 100644
--- a/dashboardv3/public/css/scss/loader.scss
+++ b/dashboardv3/public/css/scss/loader.scss
@@ -14,7 +14,6 @@
// See the License for the specific language governing permissions and
// limitations under the License.
-
/* loader.scss */
.fa-spin-custom {
@@ -165,4 +164,42 @@
100% {
background-position: 468px 0;
}
+}
+
+.loader-row .fontLoader-relative {
+ margin-top: 43px;
+}
+
+.module-loader {
+ position: fixed;
+ top: 0;
+ height: 2px;
+ z-index: 9999;
+ background: repeating-linear-gradient(to right, $color_jungle_green_approx 0%, $color_havelock_blue_approx 50%, #38bb4e 100%);
+ width: 100%;
+ background-size: 200% auto;
+ background-position: 0 100%;
+ animation: moduleLoader 2s infinite;
+ animation-fill-mode: forwards;
+ animation-timing-function: linear;
+ transition: all 2s linear;
+ visibility: hidden;
+ opacity: 0;
+ transition: visibility 0s linear 0.33s, opacity 0.33s linear;
+
+ &.show-loader {
+ opacity: 1;
+ transition-delay: 0s;
+ visibility: visible;
+ }
+}
+
+@keyframes moduleLoader {
+ 0% {
+ background-position: 0 0;
+ }
+
+ 100% {
+ background-position: -200% 0;
+ }
}
\ No newline at end of file
diff --git a/dashboardv3/public/index.html.tpl b/dashboardv3/public/index.html.tpl
index 408f2b5..a272a8d 100644
--- a/dashboardv3/public/index.html.tpl
+++ b/dashboardv3/public/index.html.tpl
@@ -118,6 +118,7 @@
</div>
</div>
</div>
+ <div class="module-loader"></div>
<!-- build:js scripts/main.js -->
<script data-main="js/main.js?bust=<%- bust %>" src="js/libs/requirejs/require.js?bust=<%- bust %>"></script>
<!-- endbuild -->
diff --git a/dashboardv3/public/js/main.js b/dashboardv3/public/js/main.js
index b4e921a..aecebf7 100644
--- a/dashboardv3/public/js/main.js
+++ b/dashboardv3/public/js/main.js
@@ -15,7 +15,19 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-
+var modulesLoadCount = 0,
+ showModuleLoader = function() {
+ if (modulesLoadCount === 1) {
+ document.querySelector(".module-loader").classList.add("show-loader");
+ }
+ },
+ hideModuleLoader = function() {
+ setTimeout(function() {
+ if (modulesLoadCount === 0) {
+ document.querySelector(".module-loader").className = "module-loader";
+ }
+ }, 1000);
+ };
require.config({
/* starting point for application */
'hbs': {
@@ -27,6 +39,7 @@ require.config({
'templateExtension': 'html', // Set the extension automatically appended to templates
'compileOptions': {} // options object which is passed to Handlebars compiler
},
+
'urlArgs': "bust=" + getBustValue(),
/**
* Requested as soon as the loader has processed the configuration. It does
@@ -37,6 +50,23 @@ require.config({
*/
'deps': ['marionette'],
+ onNodeCreated: function(node, config, moduleName, url) {
+ console.log("module " + moduleName + " is about to be loaded");
+ ++modulesLoadCount;
+ showModuleLoader();
+ node.addEventListener("load", function() {
+ console.log("module " + moduleName + " has been loaded");
+ --modulesLoadCount;
+ hideModuleLoader();
+ });
+
+ node.addEventListener("error", function() {
+ console.log("module " + moduleName + " could not be loaded");
+ --modulesLoadCount;
+ hideModuleLoader();
+ });
+ },
+
/**
* The number of seconds to wait before giving up on loading a script.
* @default 7 seconds
diff --git a/dashboardv3/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html b/dashboardv3/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html
index b68ae9e..acdcbc5 100644
--- a/dashboardv3/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html
+++ b/dashboardv3/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html
@@ -76,14 +76,22 @@
</div>
</div>
</div>
- <div class="col-md-6">
+ <div class="col-md-6 loader-row">
<div id="r_entityUserDefineView">
<div class="fontLoader-relative">
<i class="fa fa-refresh fa-spin-custom"></i>
</div>
</div>
- <div id="r_entityLabelDefineView"></div>
- <div id="r_entityBusinessMetadataView"></div>
+ <div id="r_entityLabelDefineView">
+ <div class="fontLoader-relative">
+ <i class="fa fa-refresh fa-spin-custom"></i>
+ </div>
+ </div>
+ <div id="r_entityBusinessMetadataView">
+ <div class="fontLoader-relative">
+ <i class="fa fa-refresh fa-spin-custom"></i>
+ </div>
+ </div>
</div>
</div>
</div>
diff --git a/dashboardv3/public/js/templates/search/tree/BusinessMetadataTreeLayoutView_tmpl.html b/dashboardv3/public/js/templates/search/tree/BusinessMetadataTreeLayoutView_tmpl.html
index 9fb47b9..757a1ed 100644
--- a/dashboardv3/public/js/templates/search/tree/BusinessMetadataTreeLayoutView_tmpl.html
+++ b/dashboardv3/public/js/templates/search/tree/BusinessMetadataTreeLayoutView_tmpl.html
@@ -31,5 +31,8 @@
</div>
<div id="businessMetadataTree" class="panel-collapse collapse jstree-with-action in">
<div data-id="businessMetadataSearchTree"></div>
+ <div class="text-center" data-id="businessMetadataTreeLoader">
+ <i class="fa fa-refresh fa-spin-custom"></i>
+ </div>
</div>
</div>
\ No newline at end of file
diff --git a/dashboardv3/public/js/templates/search/tree/ClassificationTreeLayoutView_tmpl.html b/dashboardv3/public/js/templates/search/tree/ClassificationTreeLayoutView_tmpl.html
index b43a8c5..a801745 100644
--- a/dashboardv3/public/js/templates/search/tree/ClassificationTreeLayoutView_tmpl.html
+++ b/dashboardv3/public/js/templates/search/tree/ClassificationTreeLayoutView_tmpl.html
@@ -51,5 +51,8 @@
</div>
<div id="c_classfication" class="panel-collapse collapse jstree-with-action in">
<div data-id="classificationSearchTree"></div>
+ <div class="text-center" data-id="classificationTreeLoader">
+ <i class="fa fa-refresh fa-spin-custom"></i>
+ </div>
</div>
</div>
\ No newline at end of file
diff --git a/dashboardv3/public/js/templates/search/tree/CustomFilterTreeLayoutView_tmpl.html b/dashboardv3/public/js/templates/search/tree/CustomFilterTreeLayoutView_tmpl.html
index b6a2371..bce23f5 100644
--- a/dashboardv3/public/js/templates/search/tree/CustomFilterTreeLayoutView_tmpl.html
+++ b/dashboardv3/public/js/templates/search/tree/CustomFilterTreeLayoutView_tmpl.html
@@ -25,23 +25,12 @@
<button type="button" class="typeRefresh" data-id="refreshTree" data-type="CustomFilter" title="Refresh">
<i class="fa fa-refresh"></i>
</button>
- <!-- <button type="button" class="typeRefresh" data-id="showCustomFilter" title="Show Advanced search">
- <i class="fa fa-toggle-on switch-button"></i>
- </button> -->
- <!-- <button type="button" class="typeRefresh dropdown">
- <div class=" btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
- <i class="fa fa-ellipsis-v"></i>
- </div>
- <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
- <li data-id="groupOrFlatTreeView" data-type="customFilter"> <i class="fa fa-sitemap"></i><span>Show flat tree</span>
- </li>
- <li data-id="refreshTree" data-type="customFilter"><i class="fa fa-refresh"></i><span>Refresh</span>
- </li>
- </ul>
- </button> -->
</div>
</div>
<div id="c_customFilter" class="panel-collapse collapse jstree-with-action in">
<div class="custom-filter" data-id="customFilterSearchTree"></div>
+ <div class="text-center" data-id="customFilterTreeLoader">
+ <i class="fa fa-refresh fa-spin-custom"></i>
+ </div>
</div>
</div>
\ No newline at end of file
diff --git a/dashboardv3/public/js/templates/search/tree/EntityTreeLayoutView_tmpl.html b/dashboardv3/public/js/templates/search/tree/EntityTreeLayoutView_tmpl.html
index e77b612..4966a8c 100644
--- a/dashboardv3/public/js/templates/search/tree/EntityTreeLayoutView_tmpl.html
+++ b/dashboardv3/public/js/templates/search/tree/EntityTreeLayoutView_tmpl.html
@@ -19,17 +19,9 @@
<i class="ec-icon fa"></i>
<h4 class="panel-title">Entities</h4>
<div class="btn-group pull-right">
- <!-- <button type="button" class="typeRefresh" data-id="groupOrFlatTreeView" data-type="entity" title="Show flat tree">
- <i class="fa fa-sitemap"></i>
- </button> -->
<button type="button" class="typeRefresh" data-id="refreshTree" data-type="entity" title="Refresh">
<i class="fa fa-refresh"></i>
</button>
- <!-- <ul class="dropdown-menu right-align tree-menu">
- <li class="typeEmptyEntity" data-id="showEmptyServiceType">
- <i class="fa fa-check-circle"></i> <a>Show Empty</a>
- </li>
- </ul> -->
<button type="button" class="typeRefresh" data-id="showEmptyServiceType" data-type="entity" title="Show empty service types">
<i class="fa fa-toggle-off"></i>
</button>
@@ -40,15 +32,14 @@
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li data-id="groupOrFlatTreeView" data-type="entity"> <i class="fa fa-list-ul"></i><span>Show flat tree</span>
</li>
- <!-- <li data-id="showEmptyServiceType" data-type="entity"> <i class="fa fa-toggle-off"></i><span >Show empty service types</span>
- </li>
- <li data-id="refreshTree" data-type="entity"><i class="fa fa-refresh"></i><span >Refresh</span>
- </li> -->
</ul>
</button>
</div>
</div>
<div id="c_entity" class="panel-collapse collapse jstree-with-action in">
<div class="entityTree" data-id="entitySearchTree"></div>
+ <div class="text-center" data-id="entityTreeLoader">
+ <i class="fa fa-refresh fa-spin-custom"></i>
+ </div>
</div>
</div>
\ No newline at end of file
diff --git a/dashboardv3/public/js/templates/search/tree/GlossaryTreeLayoutView_tmpl.html b/dashboardv3/public/js/templates/search/tree/GlossaryTreeLayoutView_tmpl.html
index 9cedf96..ffafa60 100644
--- a/dashboardv3/public/js/templates/search/tree/GlossaryTreeLayoutView_tmpl.html
+++ b/dashboardv3/public/js/templates/search/tree/GlossaryTreeLayoutView_tmpl.html
@@ -23,9 +23,6 @@
<button type="button" class="typeRefresh" data-id="showGlossaryType" title="Show Category">
<i class="fa fa-toggle-on switch-button"></i>
</button>
- <!-- <button title="Create Glossary" type="button" data-id="createGlossary">
- <i class="fa fa-plus"></i>
- </button> -->
<button type="button" class="typeRefresh dropdown">
<div class=" btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-ellipsis-v"></i>
@@ -43,5 +40,8 @@
</div>
<div id="c_term" class="panel-collapse collapse jstree-with-action in">
<div data-id="termSearchTree"></div>
+ <div class="glossary-tree-loader text-center">
+ <i class="fa fa-refresh fa-spin-custom"></i>
+ </div>
</div>
</div>
\ No newline at end of file
diff --git a/dashboardv3/public/js/utils/CommonViewFunction.js b/dashboardv3/public/js/utils/CommonViewFunction.js
index 965753b..ea50aa6 100644
--- a/dashboardv3/public/js/utils/CommonViewFunction.js
+++ b/dashboardv3/public/js/utils/CommonViewFunction.js
@@ -716,7 +716,7 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum
}
});
modal.on('ok', function() {
- modal.$el.find('button.ok').attr("disabled", true);
+ modal.$el.find('button.ok').showButtonLoader();
CommonViewFunction.createEditGlossaryCategoryTermSubmit(_.extend({ "ref": view, "modal": modal }, options));
});
modal.on('closeModal', function() {
@@ -762,7 +762,7 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum
modal.trigger('closeModal');
},
cust_error: function() {
- modal.$el.find('button.ok').attr("disabled", false);
+ modal.$el.find('button.ok').hideButtonLoader();
}
}
if (model) {
diff --git a/dashboardv3/public/js/utils/Utils.js b/dashboardv3/public/js/utils/Utils.js
index 2d7d433..3b99446 100644
--- a/dashboardv3/public/js/utils/Utils.js
+++ b/dashboardv3/public/js/utils/Utils.js
@@ -919,5 +919,11 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'utils/Enums',
}
}
+ $.fn.showButtonLoader = function() {
+ $(this).css({ "position": "relative" }).attr("disabled", "true").addClass('button-loader');
+ }
+ $.fn.hideButtonLoader = function() {
+ $(this).removeClass('button-loader').removeAttr("disabled");
+ }
return Utils;
});
\ No newline at end of file
diff --git a/dashboardv3/public/js/views/business_metadata/EnumCreateUpdateItemView.js b/dashboardv3/public/js/views/business_metadata/EnumCreateUpdateItemView.js
index 867a56d..08960a6 100644
--- a/dashboardv3/public/js/views/business_metadata/EnumCreateUpdateItemView.js
+++ b/dashboardv3/public/js/views/business_metadata/EnumCreateUpdateItemView.js
@@ -150,14 +150,14 @@ define(["require", "backbone", "hbs!tmpl/business_metadata/EnumCreateUpdateItemV
selectedEnumValues = this.ui.valueSelector.val();
if (selectedEnumName == "" || selectedEnumName == null) {
- this.ui.enumOkBtn.removeAttr("disabled");
+ this.ui.enumOkBtn.hideButtonLoader();
Utils.notifyInfo({
content: "Please enter the Enumeration Name"
});
return true;
}
if (selectedEnumValues == "" || selectedEnumValues == null) {
- this.ui.enumOkBtn.removeAttr("disabled");
+ this.ui.enumOkBtn.hideButtonLoader();
Utils.notifyInfo({
content: "Please enter the Enum values"
});
@@ -175,7 +175,7 @@ define(["require", "backbone", "hbs!tmpl/business_metadata/EnumCreateUpdateItemV
if (this.validationEnum()) {
return;
}
- this.ui.enumOkBtn.attr("disabled", "true");
+ this.ui.enumOkBtn.showButtonLoader();
this.ui.enumSelector.attr("disabled", "true");
this.ui.valueSelector.attr("disabled", "true");
this.ui.enumCancleBtn.attr("disabled", "true");
@@ -237,7 +237,7 @@ define(["require", "backbone", "hbs!tmpl/business_metadata/EnumCreateUpdateItemV
reset: true,
complete: function(model, status) {
that.emumTypeSelectDisplay();
- that.ui.enumOkBtn.removeAttr("disabled");
+ that.ui.enumOkBtn.hideButtonLoader();
that.ui.enumSelector.removeAttr("disabled");
that.ui.valueSelector.removeAttr("disabled");
if (that.options.closeModal) {
@@ -254,7 +254,7 @@ define(["require", "backbone", "hbs!tmpl/business_metadata/EnumCreateUpdateItemV
Utils.notifySuccess({
content: "No updated values"
});
- that.ui.enumOkBtn.removeAttr("disabled");
+ that.ui.enumOkBtn.hideButtonLoader();
that.ui.enumSelector.removeAttr("disabled");
that.ui.valueSelector.removeAttr("disabled");
if (that.options.closeModal) {
diff --git a/dashboardv3/public/js/views/entity/CreateEntityLayoutView.js b/dashboardv3/public/js/views/entity/CreateEntityLayoutView.js
index a77f4ea..e74454b 100644
--- a/dashboardv3/public/js/views/entity/CreateEntityLayoutView.js
+++ b/dashboardv3/public/js/views/entity/CreateEntityLayoutView.js
@@ -103,7 +103,8 @@ define(['require',
}).open();
this.modal.$el.find('button.ok').attr("disabled", true);
this.modal.on('ok', function(e) {
- that.modal.$el.find('button.ok, button.cancel').attr("disabled", true);
+ that.modal.$el.find('button.cancel').attr("disabled", true);
+ that.modal.$el.find('button.ok').showButtonLoader();
that.okButton();
});
this.modal.on('closeModal', function() {
@@ -135,6 +136,7 @@ define(['require',
if (!value.length && $(this).hasClass('false')) {
$(this).removeClass('errorClass');
that.modal.$el.find('button.ok').prop("disabled", false);
+
} else {
try {
if (value && value.length) {
@@ -690,6 +692,7 @@ define(['require',
$(this).addClass('errorClass');
}
that.hideLoader();
+ that.modal.$el.find('button.ok').hideButtonLoader();
throw new Error("Please fill the required fields");
return;
}
@@ -765,6 +768,7 @@ define(['require',
data: JSON.stringify(entityJson),
type: "POST",
success: function(model, response) {
+ that.modal.$el.find('button.ok').hideButtonLoader();
that.modal.close();
var msgType = that.guid ? "editSuccessMessage" : "addSuccessMessage";
Utils.notifySuccess({
@@ -789,7 +793,8 @@ define(['require',
that.hideLoader({
editVisiblityOfEntitySelectionBox: true
});
- that.modal.$el.find('button.ok, button.cancel').attr("disabled", false);
+ that.modal.$el.find('button.ok').hideButtonLoader();
+ that.modal.$el.find('button.cancel').attr("disabled", false);
}
});
diff --git a/dashboardv3/public/js/views/search/tree/BusinessMetadataTreeLayoutView.js b/dashboardv3/public/js/views/search/tree/BusinessMetadataTreeLayoutView.js
index 32374a8..98d4985 100644
--- a/dashboardv3/public/js/views/search/tree/BusinessMetadataTreeLayoutView.js
+++ b/dashboardv3/public/js/views/search/tree/BusinessMetadataTreeLayoutView.js
@@ -42,7 +42,8 @@ define([
businessMetadataSearchTree: '[data-id="businessMetadataSearchTree"]',
// Create
- createBusinessMetadata: '[data-id="createBusinessMetadata"]'
+ createBusinessMetadata: '[data-id="createBusinessMetadata"]',
+ businessMetadataTreeLoader: '[data-id="businessMetadataTreeLoader"]'
},
templateHelpers: function() {
return {
@@ -54,6 +55,7 @@ define([
that = this;
// refresh individual tree
events["click " + this.ui.refreshTree] = function(e) {
+ that.changeLoaderState(true);
e.stopPropagation();
that.refresh();
};
@@ -85,7 +87,9 @@ define([
this.bindEvents();
},
onRender: function() {
+ this.changeLoaderState(true);
this.renderBusinessMetadataTree();
+ this.changeLoaderState(false);
//this.createBusinessMetadataAction();
},
bindEvents: function() {
@@ -107,6 +111,15 @@ define([
that[$(this).find("a").data("fn") + "BusinessMetadata"](e);
});
},
+ changeLoaderState: function(showLoader) {
+ if (showLoader) {
+ this.ui.businessMetadataSearchTree.hide();
+ this.ui.businessMetadataTreeLoader.show();
+ } else {
+ this.ui.businessMetadataSearchTree.show();
+ this.ui.businessMetadataTreeLoader.hide();
+ }
+ },
createBusinessMetadataAction: function() {
var that = this;
Utils.generatePopover({
@@ -186,6 +199,7 @@ define([
};
that.businessMetadataDefCollection.fullCollection.sort({ silent: true });
that.ui.businessMetadataSearchTree.jstree(true).refresh();
+ that.changeLoaderState(false);
}
});
},
diff --git a/dashboardv3/public/js/views/search/tree/ClassificationTreeLayoutView.js b/dashboardv3/public/js/views/search/tree/ClassificationTreeLayoutView.js
index b6fec97..37e1f4c 100644
--- a/dashboardv3/public/js/views/search/tree/ClassificationTreeLayoutView.js
+++ b/dashboardv3/public/js/views/search/tree/ClassificationTreeLayoutView.js
@@ -53,7 +53,8 @@ define([
wildCardSearch: '[data-id="wildCardSearch"]',
wildCardValue: '[data-id="wildCardValue"]',
wildCardContainer: '[data-id="wildCardContainer"]',
- clearWildCard: '[data-id="clearWildCard"]'
+ clearWildCard: '[data-id="clearWildCard"]',
+ classificationTreeLoader: '[data-id="classificationTreeLoader"]'
},
templateHelpers: function() {
return {
@@ -63,8 +64,8 @@ define([
events: function() {
var events = {},
that = this;
- // refresh individual tree
events["click " + this.ui.refreshTree] = function(e) {
+ that.changeLoaderState(true);
var type = $(e.currentTarget).data("type");
e.stopPropagation();
that.refresh({ type: type });
@@ -159,9 +160,21 @@ define([
this.isGroupView = true;
},
onRender: function() {
+ this.changeLoaderState(true);
this.renderClassificationTree();
this.createClassificationAction();
this.ui.clearWildCard.addClass('hide-icon');
+ this.changeLoaderState(false);
+ },
+ changeLoaderState: function(showLoader) {
+ if (showLoader) {
+ this.ui.classificationSearchTree.hide();
+ this.ui.classificationTreeLoader.show();
+ } else {
+ this.ui.classificationSearchTree.show();
+ this.ui.classificationTreeLoader.hide();
+ }
+
},
bindEvents: function() {
var that = this;
@@ -182,6 +195,7 @@ define([
that[$(this).find('a').data('fn') + "Classification"](e)
});
this.searchVent.on("Classification:Count:Update", function(options) {
+ that.changeLoaderState(true);
var opt = options || {};
if (opt && !opt.metricData) {
that.metricCollection.fetch({
@@ -189,12 +203,15 @@ define([
that.entityCountObj = _.first(that.metricCollection.toJSON());
that.classificationTreeUpdate = true;
that.ui.classificationSearchTree.jstree(true).refresh();
+ that.changeLoaderState(false);
}
});
} else {
that.entityCountObj = opt.metricData;
that.ui.classificationSearchTree.jstree(true).refresh();
+ that.changeLoaderState(false);
}
+
});
},
findSearchResult: function(tagValue) {
@@ -266,7 +283,10 @@ define([
this.tagId = Globals[that.options.value.tag].guid;
this.ui.classificationSearchTree.jstree(true).select_node(this.tagId);
} else if ((this.tagId !== "_ALL_CLASSIFICATION_TYPES" && that.options.value.tag !== this.tagId) || (this.tagId !== "_NOT_CLASSIFIED" && that.options.value.tag !== this.tagId) || (this.tagId !== "_CLASSIFIED" && that.options.value.tag !== this.tagId)) {
+ if ((that.options.value.tag.indexOf('*') != -1)) {
+ that.ui.classificationSearchTree.jstree(true).deselect_all();
that.ui.wildCardValue.val(that.options.value.tag);
+ }
var dataFound = this.classificationDefCollection.fullCollection.find(function(obj) {
return obj.get("name") === that.options.value.tag
});
@@ -359,6 +379,7 @@ define([
that.classificationDefCollection.fullCollection.sort({ silent: true });
that.classificationTreeUpdate = true
that.ui.classificationSearchTree.jstree(true).refresh();
+ that.changeLoaderState(false);
}
};
this.classificationDefCollection.fetch({
@@ -423,8 +444,8 @@ define([
that.tagId = isSelectedChild ? child.get("guid") : null;
}
}
- var modelJSON = child.toJSON();
if (child) {
+ var modelJSON = child.toJSON();
var nodeDetails = {
name: _.escape(name),
model: modelJSON,
@@ -639,7 +660,7 @@ define([
});
});
modal.on("ok", function() {
- modal.$el.find("button.ok").attr("disabled", "true");
+ modal.$el.find("button.ok").showButtonLoader();
that.onCreateTagButton(view, modal);
});
modal.on("closeModal", function() {
@@ -666,6 +687,7 @@ define([
Utils.notifyInfo({
content: "Please fill the attributes or delete the input box"
});
+ modal.$el.find("button.ok").hideButtonLoader();
return;
}
@@ -724,6 +746,7 @@ define([
}
notifyObj["text"] = text;
Utils.notifyConfirm(notifyObj);
+ modal.$el.find("button.ok").hideButtonLoader();
return false;
}
}
@@ -758,9 +781,11 @@ define([
content: "Classification " + name + Messages.getAbbreviationMsg(false, 'addSuccessMessage')
});
modal.trigger("cancel");
+ modal.$el.find("button.ok").showButtonLoader();
that.typeHeaders.fetch({ reset: true });
- var url = "#!/tag/tagAttribute/" + name;
- this.onClassificationUpdate(url);
+ },
+ complete: function() {
+ modal.$el.find("button.ok").hideButtonLoader();
}
});
},
@@ -832,4 +857,4 @@ define([
});
return ClassificationTreeLayoutView;
-});
+});
\ No newline at end of file
diff --git a/dashboardv3/public/js/views/search/tree/CustomFilterTreeLayoutView.js b/dashboardv3/public/js/views/search/tree/CustomFilterTreeLayoutView.js
index 3031ced..28d413f 100644
--- a/dashboardv3/public/js/views/search/tree/CustomFilterTreeLayoutView.js
+++ b/dashboardv3/public/js/views/search/tree/CustomFilterTreeLayoutView.js
@@ -44,8 +44,8 @@ define([
refreshTree: '[data-id="refreshTree"]',
groupOrFlatTree: '[data-id="groupOrFlatTreeView"]',
customFilterSearchTree: '[data-id="customFilterSearchTree"]',
- showCustomFilter: '[data-id="showCustomFilter"]'
-
+ showCustomFilter: '[data-id="showCustomFilter"]',
+ customFilterTreeLoader: '[data-id="customFilterTreeLoader"]'
},
templateHelpers: function() {
return {
@@ -55,8 +55,8 @@ define([
events: function() {
var events = {},
that = this;
- // refresh individual tree
events["click " + this.ui.refreshTree] = function(e) {
+ that.changeLoaderState(true);
var type = $(e.currentTarget).data("type");
e.stopPropagation();
that.refreshCustomFilterTree();
@@ -66,6 +66,7 @@ define([
this.customFilterSwitchBtnUpdate();
};
events["click " + this.ui.groupOrFlatTree] = function(e) {
+ that.changeLoaderState(true);
var type = $(e.currentTarget).data("type");
e.stopPropagation();
this.isGroupView = !this.isGroupView;
@@ -152,8 +153,18 @@ define([
this.isGroupView = true;
},
onRender: function() {
+ this.changeLoaderState(true);
this.fetchCustomFilter();
},
+ changeLoaderState: function(showLoader) {
+ if (showLoader) {
+ this.ui.customFilterSearchTree.hide();
+ this.ui.customFilterTreeLoader.show();
+ } else {
+ this.ui.customFilterSearchTree.show();
+ this.ui.customFilterTreeLoader.hide();
+ }
+ },
manualRender: function(options) {
_.extend(this.options, options);
@@ -178,6 +189,7 @@ define([
success: function(collection, data) {
that.saveSearchBaiscCollection.fullCollection.reset(_.where(data, { searchType: "BASIC" }));
that.saveSearchAdvanceCollection.fullCollection.reset(_.where(data, { searchType: "ADVANCED" }));
+ that.changeLoaderState(false);
},
silent: true
});
diff --git a/dashboardv3/public/js/views/search/tree/EntityTreeLayoutView.js b/dashboardv3/public/js/views/search/tree/EntityTreeLayoutView.js
index 5b96e8f..488284b 100644
--- a/dashboardv3/public/js/views/search/tree/EntityTreeLayoutView.js
+++ b/dashboardv3/public/js/views/search/tree/EntityTreeLayoutView.js
@@ -42,7 +42,8 @@ define([
entitySearchTree: '[data-id="entitySearchTree"]',
// Show/hide empty values in tree
- showEmptyServiceType: '[data-id="showEmptyServiceType"]'
+ showEmptyServiceType: '[data-id="showEmptyServiceType"]',
+ entityTreeLoader: '[data-id="entityTreeLoader"]'
},
templateHelpers: function() {
return {
@@ -52,8 +53,8 @@ define([
events: function() {
var events = {},
that = this;
- // refresh individual tree
events["click " + this.ui.refreshTree] = function(e) {
+ that.changeLoaderState(true);
var type = $(e.currentTarget).data("type");
e.stopPropagation();
that.ui[type + "SearchTree"].jstree(true).destroy();
@@ -74,7 +75,6 @@ define([
this.ui.groupOrFlatTree.tooltip('hide');
this.ui.groupOrFlatTree.find("i").toggleClass("fa-sitemap fa-list-ul");
this.ui.groupOrFlatTree.find("span").html(this.isGroupView ? "Show flat tree" : "Show group tree");
-
that.ui[type + "SearchTree"].jstree(true).destroy();
that.renderEntityTree();
};
@@ -88,17 +88,20 @@ define([
that[$(this).find('a').data('fn') + "Entity"](e)
});
this.searchVent.on("Entity:Count:Update", function(options) {
+ that.changeLoaderState(true);
var opt = options || {};
if (opt && !opt.metricData) {
that.metricCollection.fetch({
complete: function() {
that.entityCountObj = _.first(that.metricCollection.toJSON());
that.ui.entitySearchTree.jstree(true).refresh();
+ that.changeLoaderState(false);
}
});
} else {
that.entityCountObj = opt.metricData;
that.ui.entitySearchTree.jstree(true).refresh();
+ that.changeLoaderState(false);
}
});
},
@@ -126,8 +129,19 @@ define([
this.isGroupView = true;
},
onRender: function() {
+ this.changeLoaderState(true);
this.renderEntityTree();
this.createEntityAction();
+ this.changeLoaderState(false);
+ },
+ changeLoaderState: function(showLoader) {
+ if (showLoader) {
+ this.ui.entitySearchTree.hide();
+ this.ui.entityTreeLoader.show();
+ } else {
+ this.ui.entitySearchTree.show();
+ this.ui.entityTreeLoader.hide();
+ }
},
createEntityAction: function() {
var that = this;
@@ -510,6 +524,7 @@ define([
renderTree = function() {
if (apiCount === 0) {
that.renderEntityTree();
+ that.changeLoaderState(false);
}
};
this.entityDefCollection.fetch({
diff --git a/dashboardv3/public/js/views/search/tree/GlossaryTreeLayoutView.js b/dashboardv3/public/js/views/search/tree/GlossaryTreeLayoutView.js
index fda7647..c84dbba 100644
--- a/dashboardv3/public/js/views/search/tree/GlossaryTreeLayoutView.js
+++ b/dashboardv3/public/js/views/search/tree/GlossaryTreeLayoutView.js
@@ -39,8 +39,8 @@ define([
createGlossary: '[data-id="createGlossary"]',
showGlossaryType: '[data-id="showGlossaryType"]',
importGlossary: "[data-id='importGlossary']",
- downloadTemplate: "[data-id='downloadTemplate']"
-
+ downloadTemplate: "[data-id='downloadTemplate']",
+ glossaryTreeLoader: ".glossary-tree-loader"
},
templateHelpers: function() {
return {
@@ -52,6 +52,7 @@ define([
var events = {},
that = this;
events["click " + this.ui.refreshTree] = function(e) {
+ that.changeLoaderState(true);
var type = $(e.currentTarget).data("type");
e.stopPropagation();
that.refresh({ type: type });
@@ -96,6 +97,7 @@ define([
} else {
this.renderGlossaryTree();
}
+ that.changeLoaderState();
},
this
);
@@ -144,9 +146,18 @@ define([
this.bindEvents();
},
onRender: function() {
+ this.changeLoaderState(true);
this.fetchGlossary();
},
-
+ changeLoaderState: function(showLoader) {
+ if (showLoader) {
+ this.ui.termSearchTree.hide();
+ this.ui.glossaryTreeLoader.show();
+ } else {
+ this.ui.termSearchTree.show();
+ this.ui.glossaryTreeLoader.hide();
+ }
+ },
onBeforeDestroy: function() {
this.options.categoryEvent.off("Success:TermRename")
},