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 3680ab428969bcc23606537d1dab49171bcc37ab Author: kevalbhatt <[email protected]> AuthorDate: Thu Feb 20 15:33:51 2020 +0530 ATLAS-3626 : Beta UI : No option to overwrite Saved Search --- dashboardv3/public/css/scss/theme.scss | 15 +++ .../search/save/SaveModalLayoutView_tmpl.html | 9 +- .../js/views/search/save/SaveModalLayoutView.js | 109 +++++++++++++++++---- .../search/tree/CustomFilterTreeLayoutView.js | 37 ++++--- 4 files changed, 129 insertions(+), 41 deletions(-) diff --git a/dashboardv3/public/css/scss/theme.scss b/dashboardv3/public/css/scss/theme.scss index 56e998c..2b0c45d 100644 --- a/dashboardv3/public/css/scss/theme.scss +++ b/dashboardv3/public/css/scss/theme.scss @@ -829,4 +829,19 @@ td.searchTableName:hover { } } +} + +.select2-results__option { + &.select2-results__option--highlighted { + .option-title-light { + color: #eaeaea; + } + } + + .option-title-light { + font-size: 12px; + color: #a4a4a4; + } + + } \ No newline at end of file diff --git a/dashboardv3/public/js/templates/search/save/SaveModalLayoutView_tmpl.html b/dashboardv3/public/js/templates/search/save/SaveModalLayoutView_tmpl.html index 7b199bd..23f4beb 100644 --- a/dashboardv3/public/js/templates/search/save/SaveModalLayoutView_tmpl.html +++ b/dashboardv3/public/js/templates/search/save/SaveModalLayoutView_tmpl.html @@ -14,11 +14,16 @@ * See the License for the specific language governing permissions and * limitations under the License. --> -<form name="saveAsform" class="form-horizontal" data-id=""> +<div class='fontLoader show'><i class='fa fa-refresh fa-spin-custom'></i></div> +<form name="saveAsform" class="form-horizontal hide" data-id=""> <div class="form-group"> <label class="control-label col-sm-2 required" for="name">Name</label> - <div class="col-sm-10"> + <div class="col-sm-9"> + {{#if rename}} <input class="form-control" data-id="saveAsName" placeholder="Name(required)" value="{{selectedModel.name}}" autofocus /> + {{else}} + <select data-id="saveAsName"></select> + {{/if}} </div> </div> </form> \ No newline at end of file diff --git a/dashboardv3/public/js/views/search/save/SaveModalLayoutView.js b/dashboardv3/public/js/views/search/save/SaveModalLayoutView.js index bfc1d9f..9d8c8c1 100644 --- a/dashboardv3/public/js/views/search/save/SaveModalLayoutView.js +++ b/dashboardv3/public/js/views/search/save/SaveModalLayoutView.js @@ -24,9 +24,10 @@ define(['require', 'utils/UrlLinks', 'platform', 'models/VSearch', + "collection/VSearchList", 'utils/CommonViewFunction', 'utils/Messages' -], function(require, Backbone, SaveModalLayoutViewTmpl, Utils, Modal, UrlLinks, platform, VSearch, CommonViewFunction, Messages) { +], function(require, Backbone, SaveModalLayoutViewTmpl, Utils, Modal, UrlLinks, platform, VSearch, VSearchList, CommonViewFunction, Messages) { var SaveModalLayoutView = Backbone.Marionette.LayoutView.extend({ @@ -38,7 +39,8 @@ define(['require', }, templateHelpers: function() { return { - selectedModel: this.selectedModel ? this.selectedModel.toJSON() : null + selectedModel: this.selectedModel ? this.selectedModel.toJSON() : null, + rename: this.rename }; }, events: function() { @@ -47,20 +49,32 @@ define(['require', }, initialize: function(options) { var that = this; - _.extend(this, _.pick(options, 'selectedModel', 'collection', 'getValue', 'isBasic', 'saveObj')); + _.extend(this, _.pick(options, 'rename', 'selectedModel', 'collection', 'getValue', 'isBasic', 'saveObj')); this.model = new VSearch(); + this.saveSearchCollection = new VSearchList(); + this.saveSearchCollection.url = UrlLinks.saveSearchApiUrl(); + this.saveSearchCollection.fullCollection.comparator = function(model) { + return getModelName(model); + } + + function getModelName(model) { + if (model.get('name')) { + return model.get('name').toLowerCase(); + } + }; if (this.saveObj) { this.onCreateButton(); } else { - var modal = new Modal({ + this.modal = modal = new Modal({ titleHtml: true, - title: '<span>' + (this.selectedModel ? 'Rename' : 'Save') + (this.isBasic ? " Basic" : " Advanced") + ' Custom Filter</span>', + title: '<span>' + (this.selectedModel && this.rename ? 'Rename' : 'Save/Save As..') + (this.isBasic ? " Basic" : " Advanced") + ' Custom Filter</span>', content: this, cancelText: "Cancel", okCloses: false, okText: this.selectedModel ? 'Update' : 'Save', allowCancel: true - }).open(); + }); + this.modal.open(); modal.$el.find('button.ok').attr("disabled", "true"); this.ui.saveAsName.on('keyup', function(e) { modal.$el.find('button.ok').removeAttr("disabled"); @@ -72,27 +86,84 @@ define(['require', }); modal.on('ok', function() { modal.$el.find('button.ok').attr("disabled", "true"); - that.onCreateButton(modal); + that.onCreateButton(); }); modal.on('closeModal', function() { modal.trigger('cancel'); }); } }, - onCreateButton: function(modal) { + hideLoader: function() { + this.$el.find("form").removeClass("hide"); + this.$el.find(".fontLoader").removeClass("show"); + }, + onRender: function() { + if (this.rename == true) { + this.hideLoader(); + } else { + var that = this; + this.saveSearchCollection.fetch({ + success: function(collection, data) { + that.saveSearchCollection.fullCollection.reset(_.where(data, { searchType: that.isBasic ? "BASIC" : "ADVANCED" })); + var options = ""; + that.saveSearchCollection.fullCollection.each(function(model) { + options += '<option value="' + model.get("name") + '">' + model.get("name") + '</option>'; + }) + that.ui.saveAsName.append(options); + that.ui.saveAsName.val(""); + that.ui.saveAsName.select2({ + placeholder: "Save/Save As.. filter", + allowClear: false, + tags: true, + multiple: false, + templateResult: function(state) { + if (!state.id) { + return state.text; + } + if (!state.element) { + return $("<span><span class='option-title-light'>Save:</span> <strong> " + _.escape(state.text) + "</strong></span>"); + } else { + return $("<span><span class='option-title-light'>Save As:</span> <strong>" + _.escape(state.text) + "</strong></span>"); + } + } + }).on("change", function() { + var val = that.ui.saveAsName.val(); + if (val.length) { + that.selectedModel = that.saveSearchCollection.fullCollection.find({ name: val }); + if (that.selectedModel) { + that.modal.$el.find('button.ok').text("Save As"); + } else { + that.modal.$el.find('button.ok').text("Save"); + } + that.modal.$el.find('button.ok').removeAttr("disabled"); + } else { + that.modal.$el.find('button.ok').attr("disabled", "true"); + that.selectedModel = null; + } + }); + }, + silent: true + }); + this.hideLoader(); + } + }, + onCreateButton: function() { var that = this, - obj = { name: this.ui.saveAsName.val ? this.ui.saveAsName.val() : null }; + obj = { name: this.ui.saveAsName.val() || null, value: this.getValue() }; + if (this.saveObj) { + // Save search Filter + _.extend(obj, this.saveObj); + } + var saveObj = CommonViewFunction.generateObjectForSaveSearchApi(obj); if (this.selectedModel) { // Update Name only. - var saveObj = this.selectedModel.toJSON(); - saveObj.name = obj.name; - } else { - obj.value = this.getValue(); - if (this.saveObj) { - // Save search Filter - _.extend(obj, this.saveObj); + var selectedModel = this.selectedModel.toJSON(); + if (this.rename !== true) { + _.extend(selectedModel.searchParameters, saveObj.searchParameters); } - var saveObj = CommonViewFunction.generateObjectForSaveSearchApi(obj); + selectedModel.name = obj.name; + saveObj = selectedModel; + } else { if (this.isBasic) { saveObj['searchType'] = "BASIC"; } else { @@ -125,8 +196,8 @@ define(['require', } }); - if (modal) { - modal.trigger('cancel'); + if (this.modal) { + this.modal.trigger('cancel'); } } }); diff --git a/dashboardv3/public/js/views/search/tree/CustomFilterTreeLayoutView.js b/dashboardv3/public/js/views/search/tree/CustomFilterTreeLayoutView.js index 9766b32..3031ced 100644 --- a/dashboardv3/public/js/views/search/tree/CustomFilterTreeLayoutView.js +++ b/dashboardv3/public/js/views/search/tree/CustomFilterTreeLayoutView.js @@ -74,7 +74,7 @@ define([ this.ui.groupOrFlatTree.find("i").toggleClass("group-tree-deactivate"); this.ui.groupOrFlatTree.find("span").html(this.isGroupView ? "Show flat tree" : "Show group tree"); that.ui[type + "SearchTree"].jstree(true).destroy(); - that.renderCustomFilter(); + that.fetchCustomFilter(); }; return events; @@ -133,6 +133,18 @@ define([ this.saveSearchCollection = new VSearchList(); this.saveSearchAdvanceCollection = new VSearchList(); this.saveSearchCollection.url = UrlLinks.saveSearchApiUrl(); + this.saveSearchBaiscCollection.fullCollection.comparator = function(model) { + return getModelName(model); + } + this.saveSearchAdvanceCollection.fullCollection.comparator = function(model) { + return getModelName(model); + } + + function getModelName(model) { + if (model.get('name')) { + return model.get('name').toLowerCase(); + } + }; this.bindEvents(); this.customFilterData = null; this.isBasic = true; @@ -140,7 +152,7 @@ define([ this.isGroupView = true; }, onRender: function() { - this.renderCustomFilter(); + this.fetchCustomFilter(); }, manualRender: function(options) { _.extend(this.options, options); @@ -160,21 +172,8 @@ define([ }); this.createCustomFilterAction(); }, - renderCustomFilter: function() { + fetchCustomFilter: function() { var that = this; - this.saveSearchBaiscCollection.fullCollection.comparator = function(model) { - return getModelName(model); - } - this.saveSearchAdvanceCollection.fullCollection.comparator = function(model) { - return getModelName(model); - } - - function getModelName(model) { - if (model.get('name')) { - return model.get('name').toLowerCase(); - } - }; - this.saveSearchCollection.fetch({ success: function(collection, data) { that.saveSearchBaiscCollection.fullCollection.reset(_.where(data, { searchType: "BASIC" })); @@ -403,9 +402,7 @@ define([ require([ 'views/search/save/SaveModalLayoutView' ], function(SaveModalLayoutView) { - - new SaveModalLayoutView({ 'selectedModel': options.model.clone(), 'collection': that.isBasic ? that.saveSearchBaiscCollection.fullCollection : that.saveSearchAdvanceCollection.fullCollection, 'getValue': that.getValue, 'isBasic': that.isBasic }); - + new SaveModalLayoutView({ 'rename': true, 'selectedModel': options.model.clone(), 'collection': that.isBasic ? that.saveSearchBaiscCollection.fullCollection : that.saveSearchAdvanceCollection.fullCollection, 'getValue': that.getValue, 'isBasic': that.isBasic }); }); } }, @@ -474,7 +471,7 @@ define([ } }, refreshCustomFilterTree: function() { - this.ui.customFilterSearchTree.jstree(true).refresh(); + this.fetchCustomFilter(); } });
