Repository: incubator-atlas Updated Branches: refs/heads/master 220213dba -> 1aa38090a
ATLAS-1682: UI update to add new overlay loader to tables; fix incorrect state while switching between basic and Advance search Signed-off-by: Madhan Neethiraj <[email protected]> Project: http://git-wip-us.apache.org/repos/asf/incubator-atlas/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-atlas/commit/1aa38090 Tree: http://git-wip-us.apache.org/repos/asf/incubator-atlas/tree/1aa38090 Diff: http://git-wip-us.apache.org/repos/asf/incubator-atlas/diff/1aa38090 Branch: refs/heads/master Commit: 1aa38090ac8f667c2d357c005370cad214591e3b Parents: 220213d Author: kevalbhatt <[email protected]> Authored: Fri Mar 24 20:36:56 2017 +0530 Committer: Madhan Neethiraj <[email protected]> Committed: Fri Mar 24 08:49:11 2017 -0700 ---------------------------------------------------------------------- dashboardv2/public/css/scss/graph.scss | 1 + dashboardv2/public/css/scss/loader.scss | 10 ++ dashboardv2/public/css/scss/main.scss | 1 + dashboardv2/public/js/models/VCatalog.js | 2 +- dashboardv2/public/js/router/Router.js | 5 +- .../audit/AuditTableLayoutView_tmpl.html | 26 ++-- .../js/templates/common/TableLayout_tmpl.html | 3 + .../detail_page/DetailPageLayoutView_tmpl.html | 2 +- .../schema/SchemaTableLayoutView_tmpl.html | 11 +- .../search/SearchResultLayoutView_tmpl.html | 8 +- .../templates/tag/TagDetailLayoutView_tmpl.html | 2 +- .../tag/TagDetailTableLayoutView_tmpl.html | 6 +- dashboardv2/public/js/utils/TableLayout.js | 10 +- dashboardv2/public/js/utils/Utils.js | 8 +- .../js/views/audit/AuditTableLayoutView.js | 13 +- .../AddTermToEntityLayoutView.js | 7 +- .../views/business_catalog/SideNavLayoutView.js | 3 +- .../public/js/views/graph/LineageLayoutView.js | 2 +- .../public/js/views/schema/SchemaLayoutView.js | 6 +- .../js/views/search/SearchDetailLayoutView.js | 5 +- .../public/js/views/search/SearchLayoutView.js | 80 +++++++----- .../js/views/search/SearchResultLayoutView.js | 124 ++++++++++--------- .../views/tag/TagAttributeDetailLayoutView.js | 26 ++-- .../public/js/views/tag/TagDetailLayoutView.js | 4 +- .../js/views/tag/TagDetailTableLayoutView.js | 10 +- .../public/js/views/tag/TagLayoutView.js | 11 +- 26 files changed, 236 insertions(+), 150 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/1aa38090/dashboardv2/public/css/scss/graph.scss ---------------------------------------------------------------------- diff --git a/dashboardv2/public/css/scss/graph.scss b/dashboardv2/public/css/scss/graph.scss index 38ddb47..3ff38b8 100644 --- a/dashboardv2/public/css/scss/graph.scss +++ b/dashboardv2/public/css/scss/graph.scss @@ -73,6 +73,7 @@ padding: 12px; background: $black_80; color: $white; + z-index: 999; //Instead of the line below you could use @include border-radius($radius, $vertical-radius) border-radius: 2px; &:after { http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/1aa38090/dashboardv2/public/css/scss/loader.scss ---------------------------------------------------------------------- diff --git a/dashboardv2/public/css/scss/loader.scss b/dashboardv2/public/css/scss/loader.scss index ad9bb6f..7d461c8 100644 --- a/dashboardv2/public/css/scss/loader.scss +++ b/dashboardv2/public/css/scss/loader.scss @@ -59,3 +59,13 @@ right: 50%; height: 60px; } + +.tableOverlay { + position: absolute; + width: 100%; + height: 100%; + background: $gray; + z-index: 99; + display: none; + opacity: 0.2; +} http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/1aa38090/dashboardv2/public/css/scss/main.scss ---------------------------------------------------------------------- diff --git a/dashboardv2/public/css/scss/main.scss b/dashboardv2/public/css/scss/main.scss index 6f79bcf..47a2c72 100644 --- a/dashboardv2/public/css/scss/main.scss +++ b/dashboardv2/public/css/scss/main.scss @@ -322,5 +322,6 @@ ul { .col-sm-custom { width: 92%; margin: 36px 36px 0px; + position: relative; } } http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/1aa38090/dashboardv2/public/js/models/VCatalog.js ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/models/VCatalog.js b/dashboardv2/public/js/models/VCatalog.js index eb52e9a..ea5ae2c 100644 --- a/dashboardv2/public/js/models/VCatalog.js +++ b/dashboardv2/public/js/models/VCatalog.js @@ -38,7 +38,7 @@ define(['require', return this.get('name'); }, deleteTerm: function(termURL, options) { - var url = UrlLinks.baseURL + termURL; + var url = termURL; options = _.extend({ contentType: 'application/json', dataType: 'json' http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/1aa38090/dashboardv2/public/js/router/Router.js ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/router/Router.js b/dashboardv2/public/js/router/Router.js index f68927e..db5bc1f 100644 --- a/dashboardv2/public/js/router/Router.js +++ b/dashboardv2/public/js/router/Router.js @@ -47,6 +47,7 @@ define([ this.bindCommonEvents(); this.listenTo(this, 'route', this.postRouteExecute, this); this.tagCollection = new VTagList(); + this.searchVent = new Backbone.Wreqr.EventAggregator(); }, bindCommonEvents: function() { var that = this; @@ -233,6 +234,7 @@ define([ App.rSideNav.show(new SideNavLayoutView({ 'value': paramObj, 'collection': that.tagCollection, + 'searchVent': that.searchVent, 'typeHeaders': that.typeHeaders })); } else { @@ -243,7 +245,8 @@ define([ 'value': paramObj, 'entityDefCollection': that.entityDefCollection, 'typeHeaders': that.typeHeaders, - 'initialView': (paramObj.query.trim() || paramObj.type || (paramObj.dslChecked == "true" ? "" : paramObj.tag)).length === 0 + 'searchVent': that.searchVent, + 'initialView': (paramObj.type || (paramObj.dslChecked == "true" ? "" : paramObj.tag) || (paramObj.query ? paramObj.query.trim() : "")).length === 0 })); }); }, http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/1aa38090/dashboardv2/public/js/templates/audit/AuditTableLayoutView_tmpl.html ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/templates/audit/AuditTableLayoutView_tmpl.html b/dashboardv2/public/js/templates/audit/AuditTableLayoutView_tmpl.html index f7a3a48..ca9421d 100644 --- a/dashboardv2/public/js/templates/audit/AuditTableLayoutView_tmpl.html +++ b/dashboardv2/public/js/templates/audit/AuditTableLayoutView_tmpl.html @@ -15,19 +15,21 @@ * limitations under the License. --> <div class="position-relative"> + <div class="tableOverlay"></div> + <!-- Not for table Loader its only for initial loading --> <div class="fontLoader"> <i class="fa fa-refresh fa-spin-custom"></i> </div> -</div> -<div class="auditTable"> - <span class="labelShowRecord pull-left" data-id="pageRecordText"></span> - <ul class="pager pull-right"> - <li> - <button type="button" class="btn" data-id="previousAuditData">Previous</button> - </li> - <li> - <button type="button" class="btn" data-id="nextAuditData">Next</button> - </li> - </ul> - <div id="r_auditTableLayoutView"></div> + <div class="auditTable" style="display: none"> + <span class="labelShowRecord pull-left" data-id="pageRecordText"></span> + <ul class="pager pull-right"> + <li> + <button type="button" class="btn" data-id="previousAuditData">Previous</button> + </li> + <li> + <button type="button" class="btn" data-id="nextAuditData">Next</button> + </li> + </ul> + <div id="r_auditTableLayoutView"></div> + </div> </div> http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/1aa38090/dashboardv2/public/js/templates/common/TableLayout_tmpl.html ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/templates/common/TableLayout_tmpl.html b/dashboardv2/public/js/templates/common/TableLayout_tmpl.html index e1ae64f..e2b8a86 100644 --- a/dashboardv2/public/js/templates/common/TableLayout_tmpl.html +++ b/dashboardv2/public/js/templates/common/TableLayout_tmpl.html @@ -14,6 +14,8 @@ * See the License for the specific language governing permissions and * limitations under the License. --> +<div> +<div class="t_tableOverlay"></div> <div class="row banded"> <div data-id="r_footerRecords" class="col-sm-6 margin-top-10"></div> <div data-id="r_pagination" class="col-sm-6 text-right"></div> @@ -37,3 +39,4 @@ <i class="fa fa-refresh fa-spin-custom"></i> </div> </div> +</div> http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/1aa38090/dashboardv2/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html b/dashboardv2/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html index 3c04cb0..710404d 100644 --- a/dashboardv2/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html +++ b/dashboardv2/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html @@ -47,7 +47,7 @@ <div class="row"> <div class="col-sm-custom"> <div class="atlast-tabbable"> - <h4 class="lineageLabel">LINEAGE</h4> + <h4 class="lineageLabel">LINEAGE & IMPACT</h4> <div class="panel panel-default lineageLayout"> <div id="r_lineageLayoutView" style="height:405px"> <div class="fontLoader"> http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/1aa38090/dashboardv2/public/js/templates/schema/SchemaTableLayoutView_tmpl.html ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/templates/schema/SchemaTableLayoutView_tmpl.html b/dashboardv2/public/js/templates/schema/SchemaTableLayoutView_tmpl.html index 7422a97..c133d1f 100644 --- a/dashboardv2/public/js/templates/schema/SchemaTableLayoutView_tmpl.html +++ b/dashboardv2/public/js/templates/schema/SchemaTableLayoutView_tmpl.html @@ -14,8 +14,11 @@ * See the License for the specific language governing permissions and * limitations under the License. --> -<div class="clearfix"> - <a href="javascript:void(0)" class="inputAssignTag multiSelectTerm btnAssign" style="display:none" data-id="addTerm"><i class="fa fa-folder-o"></i> Assign Term</a> - <a href="javascript:void(0)" class="inputAssignTag multiSelectTag assignTag btnAssign" style="display:none" data-id="addAssignTag"><i class="fa fa-plus"></i> Assign Tag</a> +<div> + <div class="tableOverlay"></div> + <div class="clearfix"> + <a href="javascript:void(0)" class="inputAssignTag multiSelectTerm btnAssign" style="display:none" data-id="addTerm"><i class="fa fa-folder-o"></i> Assign Term</a> + <a href="javascript:void(0)" class="inputAssignTag multiSelectTag assignTag btnAssign" style="display:none" data-id="addAssignTag"><i class="fa fa-plus"></i> Assign Tag</a> + </div> + <div id="r_schemaTableLayoutView"></div> </div> -<div id="r_tagLayoutView"></div> http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/1aa38090/dashboardv2/public/js/templates/search/SearchResultLayoutView_tmpl.html ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/templates/search/SearchResultLayoutView_tmpl.html b/dashboardv2/public/js/templates/search/SearchResultLayoutView_tmpl.html index 27d6976..af984f5 100644 --- a/dashboardv2/public/js/templates/search/SearchResultLayoutView_tmpl.html +++ b/dashboardv2/public/js/templates/search/SearchResultLayoutView_tmpl.html @@ -14,16 +14,18 @@ * See the License for the specific language governing permissions and * limitations under the License. --> -<div class="row"> +<div class=""> + <div class="tableOverlay"></div> + <!-- Not for table Loader its only for initial loading --> <div class="fontLoader"> <i class="fa fa-refresh fa-spin-custom"></i> </div> - <div class="ellipsis"><span class="searchResult" style=" font-size: 16px;"></span> + <div class="ellipsis" style="display: none;"><span class="searchResult" style=" font-size: 16px;"></span> <a href="javascript:void(0)" class="inputAssignTag multiSelectTerm btnAssign" style="display:none" data-id="addTerm"><i class="fa fa-folder-o"></i> Assign Term</a> <a href="javascript:void(0)" class="inputAssignTag multiSelectTag assignTag btnAssign" style="display:none" data-id="addAssignTag"><i class="fa fa-plus"></i> Assign Tag</a> </div> <div class="searchTable"> - <span class="labelShowRecord pull-left" data-id="pageRecordText"></span> + <span style="display: none;" class="labelShowRecord pull-left" data-id="pageRecordText"></span> <div data-id="paginationDiv" style="display:none"> <ul class="pager pull-right"> <li> http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/1aa38090/dashboardv2/public/js/templates/tag/TagDetailLayoutView_tmpl.html ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/templates/tag/TagDetailLayoutView_tmpl.html b/dashboardv2/public/js/templates/tag/TagDetailLayoutView_tmpl.html index 363ce4c..a5173a5 100644 --- a/dashboardv2/public/js/templates/tag/TagDetailLayoutView_tmpl.html +++ b/dashboardv2/public/js/templates/tag/TagDetailLayoutView_tmpl.html @@ -18,7 +18,7 @@ </div> <div class="container-fluid gray-bg"> <div class="row"> - <div class="col-sm-10 col-sm-offset-1"> + <div class="col-sm-custom"> <div class="atlast-tabbable"> <div id="r_searchResultLayoutView"></div> </div> http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/1aa38090/dashboardv2/public/js/templates/tag/TagDetailTableLayoutView_tmpl.html ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/templates/tag/TagDetailTableLayoutView_tmpl.html b/dashboardv2/public/js/templates/tag/TagDetailTableLayoutView_tmpl.html index c215128..291f230 100644 --- a/dashboardv2/public/js/templates/tag/TagDetailTableLayoutView_tmpl.html +++ b/dashboardv2/public/js/templates/tag/TagDetailTableLayoutView_tmpl.html @@ -15,8 +15,6 @@ * limitations under the License. --> <div> + <div class="tableOverlay"></div> + <div id="r_tagTermTableLayoutView"></div> </div> -<div class="fontLoader"> - <i class="fa fa-refresh fa-spin-custom"></i> -</div> -<div id="r_tagTermTableLayoutView"></div> http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/1aa38090/dashboardv2/public/js/utils/TableLayout.js ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/utils/TableLayout.js b/dashboardv2/public/js/utils/TableLayout.js index 7a2a155..f6183a9 100644 --- a/dashboardv2/public/js/utils/TableLayout.js +++ b/dashboardv2/public/js/utils/TableLayout.js @@ -125,6 +125,8 @@ define(['require', includeOrderAbleColumns: false, + includeOverlayLoader: false, + /** ui events hash */ events: function() { @@ -140,7 +142,7 @@ define(['require', initialize: function(options) { _.extend(this, _.pick(options, 'collection', 'columns', 'includePagination', 'includeHeaderSearch', 'includeFilter', 'includePageSize', - 'includeFooterRecords', 'includeColumnManager', 'includeSizeAbleColumns', 'includeOrderAbleColumns')); + 'includeFooterRecords', 'includeColumnManager', 'includeSizeAbleColumns', 'includeOrderAbleColumns', 'includeOverlayLoader')); _.extend(this.gridOpts, options.gridOpts, { collection: this.collection, columns: this.columns }); _.extend(this.filterOpts, options.filterOpts); @@ -155,9 +157,15 @@ define(['require', bindEvents: function() { this.listenTo(this.collection, 'request', function() { this.$('div[data-id="r_tableSpinner"]').addClass('show'); + if (this.includeOverlayLoader) { + this.$('.t_tableOverlay').show(); + } }, this); this.listenTo(this.collection, 'sync error', function() { this.$('div[data-id="r_tableSpinner"]').removeClass('show'); + if (this.includeOverlayLoader) { + this.$('.t_tableOverlay').hide(); + } }, this); this.listenTo(this.collection, 'reset', function(collection, response) { http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/1aa38090/dashboardv2/public/js/utils/Utils.js ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/utils/Utils.js b/dashboardv2/public/js/utils/Utils.js index b96bc9b..da304f5 100644 --- a/dashboardv2/public/js/utils/Utils.js +++ b/dashboardv2/public/js/utils/Utils.js @@ -210,7 +210,13 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'pnotify.button if (options.urlParams) { var urlParams = "?"; _.each(options.urlParams, function(value, key, obj) { - urlParams += key + "=" + value + "&"; + if (value != undefined || value != null) { + value = String(value); + } + value = value || null; + if (value) { + urlParams += key + "=" + value + "&"; + } }); urlParams = urlParams.slice(0, -1); options.url += urlParams; http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/1aa38090/dashboardv2/public/js/views/audit/AuditTableLayoutView.js ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/views/audit/AuditTableLayoutView.js b/dashboardv2/public/js/views/audit/AuditTableLayoutView.js index b98e512..82206cb 100644 --- a/dashboardv2/public/js/views/audit/AuditTableLayoutView.js +++ b/dashboardv2/public/js/views/audit/AuditTableLayoutView.js @@ -86,7 +86,6 @@ define(['require', nextClick: false, previous: this.ui.previousAuditData }); - this.renderTableLayoutView(); }, bindEvents: function() {}, getToOffset: function() { @@ -124,7 +123,7 @@ define(['require', fetchCollection: function(options) { var that = this; this.$('.fontLoader').show(); - this.$('.auditTable').hide(); + this.$('.tableOverlay').show(); if (that.entityCollection.models.length > 1) { if (options.nextClick) { this.pervOld.push(that.entityCollection.first().get('eventKey')); @@ -132,12 +131,13 @@ define(['require', } this.entityCollection.fetch({ success: function() { + if (!(that.ui.pageRecordText instanceof jQuery)) { + return; + } if (that.entityCollection.models.length < that.count) { options.previous.attr('disabled', true); options.next.attr('disabled', true); } - that.$('.fontLoader').hide(); - that.$('.auditTable').show(); that.renderOffset(options); if (that.entityCollection.models.length) { if (that.entityCollection && (that.entityCollection.models.length < that.count && that.currPage == 1) && that.next == that.entityCollection.last().get('eventKey')) { @@ -148,9 +148,12 @@ define(['require', if (that.pervOld.length === 0) { options.previous.attr('disabled', true); } + that.renderTableLayoutView(); } } - that.renderTableLayoutView(); + that.$('.fontLoader').hide(); + that.$('.tableOverlay').hide(); + that.$('.auditTable').show(); // Only for first time table show because we never hide after first render. }, silent: true }); http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/1aa38090/dashboardv2/public/js/views/business_catalog/AddTermToEntityLayoutView.js ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/views/business_catalog/AddTermToEntityLayoutView.js b/dashboardv2/public/js/views/business_catalog/AddTermToEntityLayoutView.js index 0212efe..307b244 100644 --- a/dashboardv2/public/js/views/business_catalog/AddTermToEntityLayoutView.js +++ b/dashboardv2/public/js/views/business_catalog/AddTermToEntityLayoutView.js @@ -70,7 +70,9 @@ define(['require', if (that.multiple) { for (var i = 0; i < that.multiple.length; i++) { if (i == 0) { - that.showLoader(); + if (that.showLoader) { + that.showLoader(); + } } var obj = { termName: termName, @@ -92,6 +94,9 @@ define(['require', } } else { that.asyncFetchCounter = 0; + if (that.showLoader) { + that.showLoader(); + } CommonViewFunction.saveTermToAsset({ termName: termName, guid: this.guid http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/1aa38090/dashboardv2/public/js/views/business_catalog/SideNavLayoutView.js ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/views/business_catalog/SideNavLayoutView.js b/dashboardv2/public/js/views/business_catalog/SideNavLayoutView.js index b2c144c..9bd1bbf 100644 --- a/dashboardv2/public/js/views/business_catalog/SideNavLayoutView.js +++ b/dashboardv2/public/js/views/business_catalog/SideNavLayoutView.js @@ -66,7 +66,7 @@ define(['require', return events; }, initialize: function(options) { - _.extend(this, _.pick(options, 'url', 'value', 'tag', 'selectFirst', 'collection', 'typeHeaders')); + _.extend(this, _.pick(options, 'url', 'value', 'tag', 'selectFirst', 'collection', 'typeHeaders', 'searchVent')); if (Globals.taxonomy) { this.tabClass = "tab col-sm-4"; } else { @@ -106,6 +106,7 @@ define(['require', require(['views/search/SearchLayoutView'], function(SearchLayoutView) { that.RSearchLayoutView.show(new SearchLayoutView({ value: that.value, + searchVent: that.searchVent, typeHeaders: that.typeHeaders })); }); http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/1aa38090/dashboardv2/public/js/views/graph/LineageLayoutView.js ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/views/graph/LineageLayoutView.js b/dashboardv2/public/js/views/graph/LineageLayoutView.js index 3049eb1..059c689 100644 --- a/dashboardv2/public/js/views/graph/LineageLayoutView.js +++ b/dashboardv2/public/js/views/graph/LineageLayoutView.js @@ -298,7 +298,7 @@ define(['require', d3.selectAll('button.zoomButton').on('click', zoomClick); var tooltip = d3Tip() .attr('class', 'd3-tip') - .offset([-13, 0]) + .offset([-18, 0]) .html(function(d) { var value = that.g.node(d); var htmlStr = ""; http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/1aa38090/dashboardv2/public/js/views/schema/SchemaLayoutView.js ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/views/schema/SchemaLayoutView.js b/dashboardv2/public/js/views/schema/SchemaLayoutView.js index 747e671..309c362 100644 --- a/dashboardv2/public/js/views/schema/SchemaLayoutView.js +++ b/dashboardv2/public/js/views/schema/SchemaLayoutView.js @@ -38,7 +38,7 @@ define(['require', /** Layout sub regions */ regions: { - RTagLayoutView: "#r_tagLayoutView", + RSchemaTableLayoutView: "#r_schemaTableLayoutView", }, /** ui selector cache */ ui: { @@ -171,9 +171,11 @@ define(['require', }, showLoader: function() { this.$('.fontLoader').show(); + this.$('.tableOverlay').show() }, hideLoader: function(argument) { this.$('.fontLoader').hide(); + this.$('.tableOverlay').hide(); }, renderTableLayoutView: function() { var that = this; @@ -201,7 +203,7 @@ define(['require', }); var columns = new columnCollection(that.getSchemaTableColumns()); //columns.setPositions().sort(); - that.RTagLayoutView.show(new TableLayout(_.extend({}, that.commonTableOptions, { + that.RSchemaTableLayoutView.show(new TableLayout(_.extend({}, that.commonTableOptions, { columns: columns, includeOrderAbleColumns: true }))); http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/1aa38090/dashboardv2/public/js/views/search/SearchDetailLayoutView.js ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/views/search/SearchDetailLayoutView.js b/dashboardv2/public/js/views/search/SearchDetailLayoutView.js index c24f7a4..d44eb78 100644 --- a/dashboardv2/public/js/views/search/SearchDetailLayoutView.js +++ b/dashboardv2/public/js/views/search/SearchDetailLayoutView.js @@ -43,7 +43,7 @@ define(['require', * @constructs */ initialize: function(options) { - _.extend(this, _.pick(options, 'value', 'initialView', 'entityDefCollection', 'typeHeaders')); + _.extend(this, _.pick(options, 'value', 'initialView', 'entityDefCollection', 'typeHeaders', 'searchVent')); }, bindEvents: function() {}, onRender: function() { @@ -60,7 +60,8 @@ define(['require', tag: that.tag, initialView: that.initialView, entityDefCollection: that.entityDefCollection, - typeHeaders: that.typeHeaders + typeHeaders: that.typeHeaders, + searchVent: that.searchVent })); } }); http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/1aa38090/dashboardv2/public/js/views/search/SearchLayoutView.js ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/views/search/SearchLayoutView.js b/dashboardv2/public/js/views/search/SearchLayoutView.js index e68f8c0..32b82d7 100644 --- a/dashboardv2/public/js/views/search/SearchLayoutView.js +++ b/dashboardv2/public/js/views/search/SearchLayoutView.js @@ -72,24 +72,26 @@ define(['require', * @constructs */ initialize: function(options) { - _.extend(this, _.pick(options, 'value', 'typeHeaders')); + _.extend(this, _.pick(options, 'value', 'typeHeaders', 'searchVent')); this.type = "basic"; var param = Utils.getUrlState.getQueryParams(); this.query = { dsl: { - query: "", - type: "" + query: null, + type: null }, basic: { - query: "", - type: "", - tag: "" + query: null, + type: null, + tag: null } }; this.dsl = false; if (param && param.searchType) { - _.extend(this.query[param.searchType], _.pick(param, 'query', 'type', 'tag')); + this.type = param.searchType; + this.updateQueryObject(param); } + this.bindEvents(); }, bindEvents: function(param) { this.listenTo(this.typeHeaders, "reset", function(value) { @@ -109,7 +111,7 @@ define(['require', checkForButtonVisiblity: function() { var that = this, value = this.ui.searchInput.val() || this.ui.typeLov.val(); - if (!this.dsl && !value.length) { + if (!this.dsl && !value) { value = this.ui.tagLov.val(); } if (value && value.length) { @@ -136,11 +138,25 @@ define(['require', this.bindEvents(); this.checkForButtonVisiblity(); }, + updateQueryObject: function(param) { + if (param && param.searchType) { + this.type = param.searchType; + } + _.extend(this.query[this.type], { + query: null, + type: null, + tag: null + }, + param); + }, fetchCollection: function(value) { this.typeHeaders.fetch({ reset: true }); }, onRefreshButton: function() { this.fetchCollection(); + if (this.searchVent) { + this.searchVent.trigger('search:refresh'); + } }, advancedInfo: function(e) { require([ @@ -161,6 +177,7 @@ define(['require', }); }, manualRender: function(paramObj) { + this.updateQueryObject(paramObj); this.setValues(paramObj); }, renderTypeTagList: function() { @@ -198,36 +215,33 @@ define(['require', } else if (this.value.dslChecked == "false" && this.dsl == true) { this.ui.searchType.prop("checked", false).trigger("change"); } - if (this.value.query !== undefined) { - // get only search value and append it to input box + if (this.ui.typeLov.data('select2')) { + this.ui.typeLov.val(this.value.type).trigger('change'); + } else { + this.ui.typeLov.val(this.value.type); + } - if (this.ui.typeLov.data('select2')) { - this.ui.typeLov.val(this.value.type).trigger('change'); + if (!this.dsl) { + if (this.ui.tagLov.data('select2')) { + this.ui.tagLov.val(this.value.tag).trigger('change'); } else { - this.ui.typeLov.val(this.value.type); - } - if (!this.dsl) { - if (this.ui.tagLov.data('select2')) { - this.ui.tagLov.val(this.value.tag).trigger('change'); - } else { - this.ui.tagLov.val(this.value.tag); - } + this.ui.typeLov.val(this.value.tag); } - this.ui.searchInput.val(this.value.query); - setTimeout(function() { - that.ui.searchInput.focus(); - }, 0); } + this.ui.searchInput.val(this.value.query || ""); + setTimeout(function() { + that.ui.searchInput.focus(); + }, 0); } }, findSearchResult: function() { this.triggerSearch(this.ui.searchInput.val()); }, triggerSearch: function(value) { - this.query[this.type].query = value; - this.query[this.type].type = this.ui.typeLov.select2('val'); + this.query[this.type].query = value || null; + this.query[this.type].type = this.ui.typeLov.select2('val') || null; if (!this.dsl) { - this.query[this.type].tag = this.ui.tagLov.select2('val'); + this.query[this.type].tag = this.ui.tagLov.select2('val') || null; } Utils.setUrl({ @@ -254,8 +268,8 @@ define(['require', this.dsl = false; this.type = "basic"; } - if (Utils.getUrlState.getQueryParams() && this.query[this.type].query !== Utils.getUrlState.getQueryParams().query && this.type == Utils.getUrlState.getQueryParams().searchType) { - this.query[this.type].query = Utils.getUrlState.getQueryParams().query; + if (Utils.getUrlState.getQueryParams() && this.type == Utils.getUrlState.getQueryParams().searchType) { + this.updateQueryObject(Utils.getUrlState.getQueryParams()); } Utils.setUrl({ url: '#!/search/searchResult', @@ -271,13 +285,17 @@ define(['require', }); }, clearSearchData: function() { - this.query[this.type].query = ""; + this.updateQueryObject(); this.ui.typeLov.val("").trigger("change"); this.ui.tagLov.val("").trigger("change"); this.ui.searchInput.val(""); this.checkForButtonVisiblity() Utils.setUrl({ - url: '#!/search', + url: '#!/search/searchResult', + urlParams: { + searchType: this.type, + dslChecked: this.ui.searchType.is(':checked') + }, mergeBrowserUrl: false, trigger: true }); http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/1aa38090/dashboardv2/public/js/views/search/SearchResultLayoutView.js ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/views/search/SearchResultLayoutView.js b/dashboardv2/public/js/views/search/SearchResultLayoutView.js index a092cb4..cad4bec 100644 --- a/dashboardv2/public/js/views/search/SearchResultLayoutView.js +++ b/dashboardv2/public/js/views/search/SearchResultLayoutView.js @@ -123,7 +123,7 @@ define(['require', * @constructs */ initialize: function(options) { - _.extend(this, _.pick(options, 'value', 'initialView', 'entityDefCollection', 'typeHeaders')); + _.extend(this, _.pick(options, 'value', 'initialView', 'entityDefCollection', 'typeHeaders', 'searchVent')); var pagination = ""; this.entityModel = new VEntity(); this.searchCollection = new VSearchList(); @@ -187,6 +187,7 @@ define(['require', }); this.listenTo(this.searchCollection, "error", function(model, response) { this.$('.fontLoader').hide(); + this.$('.tableOverlay').hide(); var responseJSON = response ? response.responseJSON : response; if (response && responseJSON && (responseJSON.errorMessage || responseJSON.message || responseJSON.error)) { Utils.notifyError({ @@ -198,6 +199,9 @@ define(['require', }); } }, this); + this.listenTo(this.searchVent, "search:refresh", function(model, response) { + this.fetchCollection(); + }, this); }, onRender: function() { if (!this.initialView) { @@ -207,7 +211,7 @@ define(['require', value = this.value; } else { value = { - 'query': '', + 'query': null, 'searchType': 'basic' }; } @@ -233,76 +237,82 @@ define(['require', if (Globals.searchApiCallRef && Globals.searchApiCallRef.readyState === 1) { Globals.searchApiCallRef.abort(); } - $.extend(this.searchCollection.queryParams, { limit: this.limit }); - if (value) { + + if (value && !value.paginationChange) { + $.extend(this.searchCollection.queryParams, { limit: this.limit }); if (value.searchType) { this.searchCollection.url = UrlLinks.searchApiUrl(value.searchType); $.extend(this.searchCollection.queryParams, { limit: this.limit }); this.offset = 0; } - if (Utils.getUrlState.isTagTab()) { - this.searchCollection.url = UrlLinks.searchApiUrl(Enums.searchUrlType.DSL); - } - _.extend(this.searchCollection.queryParams, { 'query': value.query.trim() || null, 'typeName': value.type || null, 'classification': value.tag || null }); + _.extend(this.searchCollection.queryParams, { 'query': (value.query ? value.query.trim() : null), 'typeName': value.type || null, 'classification': value.tag || null }); } Globals.searchApiCallRef = this.searchCollection.fetch({ skipDefaultError: true, success: function() { - if (that.searchCollection.models.length < that.limit) { - that.ui.nextData.attr('disabled', true); - } Globals.searchApiCallRef = undefined; - if (that.offset === 0) { - that.pageFrom = 1; - that.pageTo = that.limit; - if (that.searchCollection.length > 0) { - that.ui.pageRecordText.html("Showing " + that.pageFrom + " - " + that.searchCollection.length); + if (!(that.ui.pageRecordText instanceof jQuery)) { + return; + } + if (value) { + if (that.searchCollection.models.length < that.limit) { + that.ui.nextData.attr('disabled', true); } - } else if (that.searchCollection.models.length && !that.previousClick) { - //on next click, adding "1" for showing the another records.. - that.pageFrom = that.pageTo + 1; - that.pageTo = that.pageTo + that.searchCollection.models.length; - if (that.pageFrom && that.pageTo) { + if (that.offset === 0) { + that.pageFrom = 1; + that.pageTo = that.limit; + if (that.searchCollection.length > 0) { + that.ui.pageRecordText.html("Showing " + that.pageFrom + " - " + that.searchCollection.length); + } + } else if (that.searchCollection.models.length && !that.previousClick) { + //on next click, adding "1" for showing the another records.. + that.pageFrom = that.pageTo + 1; + that.pageTo = that.pageTo + that.searchCollection.models.length; + if (that.pageFrom && that.pageTo) { + that.ui.pageRecordText.html("Showing " + that.pageFrom + " - " + that.pageTo); + } + } else if (that.previousClick) { + that.pageTo = (that.pageTo - (that.pageTo - that.pageFrom)) - 1; + //if limit is 0 then result is change to 1 because page count is showing from 1 + that.pageFrom = (that.pageFrom - that.limit === 0 ? 1 : that.pageFrom - that.limit); that.ui.pageRecordText.html("Showing " + that.pageFrom + " - " + that.pageTo); } - } else if (that.previousClick) { - that.pageTo = (that.pageTo - (that.pageTo - that.pageFrom)) - 1; - //if limit is 0 then result is change to 1 because page count is showing from 1 - that.pageFrom = (that.pageFrom - that.limit === 0 ? 1 : that.pageFrom - that.limit); - that.ui.pageRecordText.html("Showing " + that.pageFrom + " - " + that.pageTo); - } - if (that.searchCollection.models.length === 0) { - that.checkTableFetch(); - that.offset = that.offset - that.limit; - if (that.firstFetch) { - that.renderTableLayoutView(); + if (that.offset < that.limit) { + that.ui.previousData.attr('disabled', true); + } + if (that.searchCollection.models.length === 0) { + that.checkTableFetch(); + that.offset = that.offset - that.limit; + if (that.firstFetch) { + that.renderTableLayoutView(); + } } } if (that.firstFetch) { that.firstFetch = false; } - if (that.offset < that.limit) { - that.ui.previousData.attr('disabled', true); - } + // checking length for not rendering the table if (that.searchCollection.models.length) { that.renderTableLayoutView(); } - var resultArr = []; - if (that.searchCollection.queryParams.typeName) { - resultArr.push(that.searchCollection.queryParams.typeName) - } - if (that.searchCollection.queryParams.classification) { - resultArr.push(that.searchCollection.queryParams.classification) - } - if (that.searchCollection.queryParams.query) { - resultArr.push(that.searchCollection.queryParams.query) - } - var searchString = 'Results for <b>' + _.escape(resultArr.join(that.searchType == 'Advanced Search' ? " " : " & ")) + '</b>'; - if (Globals.entityCreate && Globals.entityTypeConfList && Utils.getUrlState.isSearchTab()) { - searchString += "<p>If you do not find the entity in search result below then you can" + '<a href="javascript:void(0)" data-id="createEntity"> create new entity</a></p>'; + if (value) { + var resultArr = []; + if (that.searchCollection.queryParams.typeName) { + resultArr.push(that.searchCollection.queryParams.typeName) + } + if (that.searchCollection.queryParams.classification) { + resultArr.push(that.searchCollection.queryParams.classification) + } + if (that.searchCollection.queryParams.query) { + resultArr.push(that.searchCollection.queryParams.query) + } + var searchString = 'Results for <b>' + _.escape(resultArr.join(that.searchType == 'Advanced Search' ? " " : " & ")) + '</b>'; + if (Globals.entityCreate && Globals.entityTypeConfList && Utils.getUrlState.isSearchTab()) { + searchString += "<p>If you do not find the entity in search result below then you can" + '<a href="javascript:void(0)" data-id="createEntity"> create new entity</a></p>'; + } + that.$('.searchResult').html(searchString); } - that.$('.searchResult').html(searchString); }, silent: true, reset: true @@ -319,6 +329,7 @@ define(['require', that.ui.paginationDiv.show(); that.$(".ellipsis .inputAssignTag").hide(); that.renderBreadcrumb(); + that.checkTableFetch(); }); }, renderBreadcrumb: function() { @@ -332,7 +343,6 @@ define(['require', }, checkTableFetch: function() { if (this.asyncFetchCounter <= 0) { - this.$('div[data-id="r_tableSpinner"]').removeClass('show'); this.hideLoader(); } }, @@ -467,7 +477,6 @@ define(['require', }) }; } - that.checkTableFetch(); return this.searchCollection.constructor.getTableCols(col, this.searchCollection); }, addTagModalView: function(guid, multiple) { @@ -508,13 +517,12 @@ define(['require', }, showLoader: function() { this.$('.fontLoader').show(); - this.$('.searchTable').hide(); - this.$('.ellipsis').hide(); + this.$('.tableOverlay').show(); }, hideLoader: function() { this.$('.fontLoader').hide(); - this.$('.searchTable').show(); - this.$('.ellipsis').show(); + this.$('.ellipsis,.labelShowRecord').show(); // only for first time + this.$('.tableOverlay').hide(); }, checkedValue: function(e) { var guid = "", @@ -589,6 +597,8 @@ define(['require', 'tagName': tagName, 'guid': guid, 'tagOrTerm': tagOrTerm, + showLoader: that.showLoader.bind(that), + hideLoader: that.hideLoader.bind(that), callback: function() { that.fetchCollection(); } @@ -602,7 +612,7 @@ define(['require', offset: that.offset }); this.previousClick = false; - this.fetchCollection(); + this.fetchCollection({ paginationChange: true }); }, onClickpreviousData: function() { var that = this; @@ -612,7 +622,7 @@ define(['require', offset: that.offset }); this.previousClick = true; - this.fetchCollection(); + this.fetchCollection({ paginationChange: true }); }, onClickEditEntity: function(e) { http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/1aa38090/dashboardv2/public/js/views/tag/TagAttributeDetailLayoutView.js ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/views/tag/TagAttributeDetailLayoutView.js b/dashboardv2/public/js/views/tag/TagAttributeDetailLayoutView.js index 2b65733..ecf32f2 100644 --- a/dashboardv2/public/js/views/tag/TagAttributeDetailLayoutView.js +++ b/dashboardv2/public/js/views/tag/TagAttributeDetailLayoutView.js @@ -118,17 +118,16 @@ define(['require', Utils.hideTitleLoader(this.$('.fontLoader'), this.$('.tagDetail')); }, onSaveButton: function(saveObject, message) { - Utils.showTitleLoader(this.$('.page-title .fontLoader'), this.$('.tagDetail')); var that = this; var validate = true; - if (this.modal.$el.find(".attributeInput").length > 1) { - this.modal.$el.find(".attributeInput").each(function() { - if ($(this).val() === "") { - $(this).css('borderColor', "red") - validate = false; - } - }); - } + + this.modal.$el.find(".attributeInput").each(function() { + if ($(this).val() === "") { + $(this).css('borderColor', "red") + validate = false; + } + }); + this.modal.$el.find(".attributeInput").keyup(function() { $(this).css('borderColor', "#e8e9ee"); }); @@ -138,7 +137,7 @@ define(['require', }); return; } - + Utils.showTitleLoader(this.$('.page-title .fontLoader'), this.$('.tagDetail')); this.model.saveTagAttribute(this.model.get('guid'), { data: JSON.stringify({ classificationDefs: [saveObject], @@ -155,9 +154,9 @@ define(['require', Utils.notifySuccess({ content: message }); - that.modal.close(); } }); + that.modal.close(); }, onClickAddTagAttributeBtn: function(e) { var that = this; @@ -172,10 +171,11 @@ define(['require', cancelText: "Cancel", okText: 'Add', allowCancel: true, + okCloses: false }).open(); that.modal.$el.find('button.ok').attr("disabled", "true"); - $(view.ui.addAttributeDiv).on('keyup', that.modal.$el.find('attributeInput'), function(e) { - if ((e.keyCode == 8 || e.keyCode == 46 || e.keyCode == 32) && e.target.value.trim() == "") { + view.ui.addAttributeDiv.on('keyup', '.attributeInput', function(e) { + if (e.target.value.trim() == "") { that.modal.$el.find('button.ok').attr("disabled", "disabled"); } else { that.modal.$el.find('button.ok').removeAttr("disabled"); http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/1aa38090/dashboardv2/public/js/views/tag/TagDetailLayoutView.js ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/views/tag/TagDetailLayoutView.js b/dashboardv2/public/js/views/tag/TagDetailLayoutView.js index 20da1be..5007427 100644 --- a/dashboardv2/public/js/views/tag/TagDetailLayoutView.js +++ b/dashboardv2/public/js/views/tag/TagDetailLayoutView.js @@ -55,12 +55,12 @@ define(['require', var that = this; require(['views/search/SearchResultLayoutView'], function(SearchResultLayoutView) { var value = { - 'query': "`" + that.tag + "`" + 'tag': that.tag, + 'searchType': 'basic' }; that.RSearchResultLayoutView.show(new SearchResultLayoutView({ value: value, entityDefCollection: that.entityDefCollection, - tag: that.tag, typeHeaders: that.typeHeaders })); }); http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/1aa38090/dashboardv2/public/js/views/tag/TagDetailTableLayoutView.js ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/views/tag/TagDetailTableLayoutView.js b/dashboardv2/public/js/views/tag/TagDetailTableLayoutView.js index 4073310..677058b 100644 --- a/dashboardv2/public/js/views/tag/TagDetailTableLayoutView.js +++ b/dashboardv2/public/js/views/tag/TagDetailTableLayoutView.js @@ -202,8 +202,16 @@ define(['require', 'tagName': tagName, 'guid': that.guid, 'tagOrTerm': (that.term ? "term" : "tag"), - callback: function() { + showLoader: function() { that.$('.fontLoader').show(); + that.$('.tableOverlay').show(); + }, + hideLoader: function() { + that.$('.fontLoader').hide(); + that.$('.tableOverlay').hide(); + }, + callback: function() { + this.hideLoader(); if (that.fetchCollection) { that.fetchCollection(); } http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/1aa38090/dashboardv2/public/js/views/tag/TagLayoutView.js ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/views/tag/TagLayoutView.js b/dashboardv2/public/js/views/tag/TagLayoutView.js index 5311ad1..8591100 100644 --- a/dashboardv2/public/js/views/tag/TagLayoutView.js +++ b/dashboardv2/public/js/views/tag/TagLayoutView.js @@ -148,12 +148,12 @@ define(['require', if (checkTagOrTerm.tag) { if (searchString) { if (name.search(new RegExp(searchString, "i")) != -1) { - str += '<li class="parent-node" data-id="tags"><div class="tools"><i class="fa fa-ellipsis-h tagPopover"></i></div><a href="#!/tag/tagAttribute/' + name + '" data-name="`' + name + '`" >' + name + '</a></li>'; + str += '<li class="parent-node" data-id="tags"><div class="tools"><i class="fa fa-ellipsis-h tagPopover"></i></div><a href="#!/tag/tagAttribute/' + name + '" data-name="' + name + '" >' + name + '</a></li>'; } else { return; } } else { - str += '<li class="parent-node" data-id="tags"><div class="tools"><i class="fa fa-ellipsis-h tagPopover"></i></div><a href="#!/tag/tagAttribute/' + name + '" data-name="`' + name + '`">' + name + '</a></li>'; + str += '<li class="parent-node" data-id="tags"><div class="tools"><i class="fa fa-ellipsis-h tagPopover"></i></div><a href="#!/tag/tagAttribute/' + name + '" data-name="' + name + '">' + name + '</a></li>'; } } }); @@ -220,6 +220,7 @@ define(['require', } modal.$el.find(".attributeInput").keyup(function() { $(this).css('borderColor', "#e8e9ee"); + modal.$el.find('button.ok').removeAttr("disabled"); }); if (!validate) { Utils.notifyInfo({ @@ -304,9 +305,9 @@ define(['require', Utils.setUrl({ url: '#!/search/searchResult', urlParams: { - query: this.ui.tagsParent.find('li.active').find("a").data('name'), - searchType: "dsl", - dslChecked: true + tag: this.ui.tagsParent.find('li.active').find("a").data('name'), + searchType: "basic", + dslChecked: false }, updateTabState: function() { return { searchUrl: this.url, stateChanged: true };
