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
commit 2228d752714b8edeea2ccf0aba660f69e765e6fa Author: kevalbhatt <[email protected]> AuthorDate: Thu May 21 20:48:39 2020 +0530 ATLAS-3728:- UI: Show uploaded data details (status) --- dashboardv2/public/css/scss/theme.scss | 34 +++++++++++++++++ .../BusinessMetadataAttributeItemView_tmpl.html | 5 ++- .../js/templates/import/ImportLayoutView_tmpl.html | 5 ++- .../public/js/views/import/ImportLayoutView.js | 44 ++++++++++++++++++++-- dashboardv3/public/css/scss/theme.scss | 19 ++++++++++ .../BusinessMetadataAttributeItemView_tmpl.html | 5 ++- .../js/templates/import/ImportLayoutView_tmpl.html | 5 ++- .../public/js/views/import/ImportLayoutView.js | 44 ++++++++++++++++++++-- 8 files changed, 151 insertions(+), 10 deletions(-) diff --git a/dashboardv2/public/css/scss/theme.scss b/dashboardv2/public/css/scss/theme.scss index da4c370..6646a45 100644 --- a/dashboardv2/public/css/scss/theme.scss +++ b/dashboardv2/public/css/scss/theme.scss @@ -709,4 +709,38 @@ td.searchTableName:hover { .modal-body { background: $color_white_lilac_approx; } +} + +.help-btn { + cursor: pointer; + font-size: 20px; +} + +.back-button { + display: inline-block; + float: left; + position: absolute; + left: 4px; + top: 9px; + font-size: 38px; + color: #bfbfbf; + cursor: pointer; + + &:hover { + color: $gray; + } +} + +.modal-header { + .back-button { + margin-left: 10px; + top: 9px; + font-size: 38px; + } + + .modal-name { + font-size: 22px; + margin-top: 5px; + margin-left: 20px; + } } \ No newline at end of file diff --git a/dashboardv2/public/js/templates/business_metadata/BusinessMetadataAttributeItemView_tmpl.html b/dashboardv2/public/js/templates/business_metadata/BusinessMetadataAttributeItemView_tmpl.html index 4b2437d..55b4969 100644 --- a/dashboardv2/public/js/templates/business_metadata/BusinessMetadataAttributeItemView_tmpl.html +++ b/dashboardv2/public/js/templates/business_metadata/BusinessMetadataAttributeItemView_tmpl.html @@ -46,7 +46,7 @@ </div> <div class="form-group"> <label class="control-label col-sm-3 required" for="type">Search Weight</label> - <div class="col-sm-8"> + <div class="col-sm-6"> <select class="form-control searchWeightSelector" data-id="searchWeightSelector"> <option>0</option> <option>1</option> @@ -61,6 +61,9 @@ <option>10</option> </select> </div> + <label class="control-label"> + <i class="fa fa-question-circle help-btn" title="<span><i class='fa fa-arrow-up'></i> the search weight for the attribute,<i class='fa fa-arrow-up'></i> the entity in the topmost search results when searched for by that attribute</span><h6>Applicable Ranges</h6><ul style='padding:0px'><li>Quick search: <b>0 - 10</b></li><li>Suggestion: <b>8 - 10</b></li></ul>" data-html="true"></i> + </label> </div> <div class="form-group" data-id="multiValueSelect"> <label class="control-label col-sm-3" for="multiValSelect">Enable Multivalues</label> diff --git a/dashboardv2/public/js/templates/import/ImportLayoutView_tmpl.html b/dashboardv2/public/js/templates/import/ImportLayoutView_tmpl.html index 5bb9ab5..2199d28 100644 --- a/dashboardv2/public/js/templates/import/ImportLayoutView_tmpl.html +++ b/dashboardv2/public/js/templates/import/ImportLayoutView_tmpl.html @@ -14,4 +14,7 @@ * See the License for the specific language governing permissions and * limitations under the License. --> -<form id="importGlossary" class="dropzone single-file-center"></form> \ No newline at end of file +<form data-id="importGlossary" class="dropzone single-file-center"></form> +<div data-id="errorContainer" class="hide"> + <ol data-id="errorDetails"></ol> +</div> \ No newline at end of file diff --git a/dashboardv2/public/js/views/import/ImportLayoutView.js b/dashboardv2/public/js/views/import/ImportLayoutView.js index 81e4d33..b1b7aab 100644 --- a/dashboardv2/public/js/views/import/ImportLayoutView.js +++ b/dashboardv2/public/js/views/import/ImportLayoutView.js @@ -37,7 +37,11 @@ define([ regions: {}, /** ui selector cache */ - ui: {}, + ui: { + errorContainer: "[data-id='errorContainer']", + importGlossary: "[data-id='importGlossary']", + errorDetails: "[data-id='errorDetails']" + }, /** ui events hash */ events: function() { var events = {}; @@ -66,8 +70,15 @@ define([ this.modal.on("closeModal", function() { that.modal.trigger("cancel"); }); + this.bindEvents(); + }, + bindEvents: function() { + var that = this; + $('body').on('click', '.importBackBtn', function() { + var modalTitle = that.isGlossary ? "Import Glossary" : "Import Business Metadata"; + that.toggleErrorAndDropZoneView({ title: modalTitle, isErrorView: false }); + }); }, - bindEvents: function() {}, onRender: function() { var that = this; this.dropzone = null; @@ -81,7 +92,7 @@ define([ } var headers = {}; headers[CommonViewFunction.restCsrfCustomHeader] = '""'; - this.$("#importGlossary").dropzone({ + this.ui.importGlossary.dropzone({ url: that.isGlossary ? UrlLinks.glossaryImportUrl() : UrlLinks.businessMetadataImportUrl(), clickable: true, acceptedFiles: ".csv,.xls,.xlsx", @@ -104,8 +115,19 @@ define([ success: function(file, response, responseObj) { var success = true; if (response.failedImportInfoList && response.failedImportInfoList.length) { + var errorStr = '', + notificationMsg = ''; success = false; + that.ui.errorDetails.empty(); Utils.defaultErrorHandler(null, file.xhr, { defaultErrorMessage: response.failedImportInfoList[0].remarks }); + if (response.failedImportInfoList.length > 1) { + var modalTitle = '<div class="back-button importBackBtn" title="Back to import file"><i class="fa fa-angle-left "></i> </div> <div class="modal-name">Error Details</div>'; + _.each(response.failedImportInfoList, function(err_obj) { + errorStr += '<li>' + err_obj.remarks + '</li>'; + }); + that.ui.errorDetails.append(errorStr); + that.toggleErrorAndDropZoneView({ title: modalTitle, isErrorView: true }); + } } if (success) { that.modal.trigger("cancel"); @@ -124,6 +146,22 @@ define([ dictDefaultMessage: "Drop files here or click to upload.", headers: headers }); + }, + toggleErrorAndDropZoneView: function(options) { + var that = this; + if (options) { + that.modal.$el.find('.modal-title').html(options.title); + if (options.isErrorView) { + that.ui.importGlossary.addClass("hide"); + that.ui.errorContainer.removeClass("hide"); + that.modal.$el.find("button.ok").addClass('hide'); + } else { + that.ui.importGlossary.removeClass("hide"); + that.ui.errorContainer.addClass("hide"); + that.modal.$el.find("button.ok").removeClass('hide'); + that.ui.errorDetails.empty(); + } + } } } ); diff --git a/dashboardv3/public/css/scss/theme.scss b/dashboardv3/public/css/scss/theme.scss index 22b63ae..dbb225b 100644 --- a/dashboardv3/public/css/scss/theme.scss +++ b/dashboardv3/public/css/scss/theme.scss @@ -62,6 +62,20 @@ body { } } +.modal-header { + .back-button { + margin-left: 10px; + top: 9px; + font-size: 38px; + } + + .modal-name { + font-size: 22px; + margin-top: 5px; + margin-left: 20px; + } +} + .atlas-page-header { height: 70px; @@ -829,4 +843,9 @@ td.searchTableName:hover { .modal-body { background: $color_white_lilac_approx; } +} + +.help-btn { + cursor: pointer; + font-size: 20px; } \ No newline at end of file diff --git a/dashboardv3/public/js/templates/business_metadata/BusinessMetadataAttributeItemView_tmpl.html b/dashboardv3/public/js/templates/business_metadata/BusinessMetadataAttributeItemView_tmpl.html index 4b2437d..55b4969 100644 --- a/dashboardv3/public/js/templates/business_metadata/BusinessMetadataAttributeItemView_tmpl.html +++ b/dashboardv3/public/js/templates/business_metadata/BusinessMetadataAttributeItemView_tmpl.html @@ -46,7 +46,7 @@ </div> <div class="form-group"> <label class="control-label col-sm-3 required" for="type">Search Weight</label> - <div class="col-sm-8"> + <div class="col-sm-6"> <select class="form-control searchWeightSelector" data-id="searchWeightSelector"> <option>0</option> <option>1</option> @@ -61,6 +61,9 @@ <option>10</option> </select> </div> + <label class="control-label"> + <i class="fa fa-question-circle help-btn" title="<span><i class='fa fa-arrow-up'></i> the search weight for the attribute,<i class='fa fa-arrow-up'></i> the entity in the topmost search results when searched for by that attribute</span><h6>Applicable Ranges</h6><ul style='padding:0px'><li>Quick search: <b>0 - 10</b></li><li>Suggestion: <b>8 - 10</b></li></ul>" data-html="true"></i> + </label> </div> <div class="form-group" data-id="multiValueSelect"> <label class="control-label col-sm-3" for="multiValSelect">Enable Multivalues</label> diff --git a/dashboardv3/public/js/templates/import/ImportLayoutView_tmpl.html b/dashboardv3/public/js/templates/import/ImportLayoutView_tmpl.html index 5bb9ab5..2199d28 100644 --- a/dashboardv3/public/js/templates/import/ImportLayoutView_tmpl.html +++ b/dashboardv3/public/js/templates/import/ImportLayoutView_tmpl.html @@ -14,4 +14,7 @@ * See the License for the specific language governing permissions and * limitations under the License. --> -<form id="importGlossary" class="dropzone single-file-center"></form> \ No newline at end of file +<form data-id="importGlossary" class="dropzone single-file-center"></form> +<div data-id="errorContainer" class="hide"> + <ol data-id="errorDetails"></ol> +</div> \ No newline at end of file diff --git a/dashboardv3/public/js/views/import/ImportLayoutView.js b/dashboardv3/public/js/views/import/ImportLayoutView.js index 81e4d33..b1b7aab 100644 --- a/dashboardv3/public/js/views/import/ImportLayoutView.js +++ b/dashboardv3/public/js/views/import/ImportLayoutView.js @@ -37,7 +37,11 @@ define([ regions: {}, /** ui selector cache */ - ui: {}, + ui: { + errorContainer: "[data-id='errorContainer']", + importGlossary: "[data-id='importGlossary']", + errorDetails: "[data-id='errorDetails']" + }, /** ui events hash */ events: function() { var events = {}; @@ -66,8 +70,15 @@ define([ this.modal.on("closeModal", function() { that.modal.trigger("cancel"); }); + this.bindEvents(); + }, + bindEvents: function() { + var that = this; + $('body').on('click', '.importBackBtn', function() { + var modalTitle = that.isGlossary ? "Import Glossary" : "Import Business Metadata"; + that.toggleErrorAndDropZoneView({ title: modalTitle, isErrorView: false }); + }); }, - bindEvents: function() {}, onRender: function() { var that = this; this.dropzone = null; @@ -81,7 +92,7 @@ define([ } var headers = {}; headers[CommonViewFunction.restCsrfCustomHeader] = '""'; - this.$("#importGlossary").dropzone({ + this.ui.importGlossary.dropzone({ url: that.isGlossary ? UrlLinks.glossaryImportUrl() : UrlLinks.businessMetadataImportUrl(), clickable: true, acceptedFiles: ".csv,.xls,.xlsx", @@ -104,8 +115,19 @@ define([ success: function(file, response, responseObj) { var success = true; if (response.failedImportInfoList && response.failedImportInfoList.length) { + var errorStr = '', + notificationMsg = ''; success = false; + that.ui.errorDetails.empty(); Utils.defaultErrorHandler(null, file.xhr, { defaultErrorMessage: response.failedImportInfoList[0].remarks }); + if (response.failedImportInfoList.length > 1) { + var modalTitle = '<div class="back-button importBackBtn" title="Back to import file"><i class="fa fa-angle-left "></i> </div> <div class="modal-name">Error Details</div>'; + _.each(response.failedImportInfoList, function(err_obj) { + errorStr += '<li>' + err_obj.remarks + '</li>'; + }); + that.ui.errorDetails.append(errorStr); + that.toggleErrorAndDropZoneView({ title: modalTitle, isErrorView: true }); + } } if (success) { that.modal.trigger("cancel"); @@ -124,6 +146,22 @@ define([ dictDefaultMessage: "Drop files here or click to upload.", headers: headers }); + }, + toggleErrorAndDropZoneView: function(options) { + var that = this; + if (options) { + that.modal.$el.find('.modal-title').html(options.title); + if (options.isErrorView) { + that.ui.importGlossary.addClass("hide"); + that.ui.errorContainer.removeClass("hide"); + that.modal.$el.find("button.ok").addClass('hide'); + } else { + that.ui.importGlossary.removeClass("hide"); + that.ui.errorContainer.addClass("hide"); + that.modal.$el.find("button.ok").removeClass('hide'); + that.ui.errorDetails.empty(); + } + } } } );
