http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/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 new file mode 100644 index 0000000..5837006 --- /dev/null +++ b/dashboardv2/public/js/views/business_catalog/SideNavLayoutView.js @@ -0,0 +1,117 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +define(['require', + 'hbs!tmpl/business_catalog/SideNavLayoutView_tmpl', + 'utils/Utils', + 'utils/Globals', +], function(require, tmpl, Utils, Globals) { + 'use strict'; + + var SideNavLayoutView = Marionette.LayoutView.extend({ + template: tmpl, + + regions: { + RBusinessCatalogLayoutView: "#r_businessCatalogLayoutView", + RTagLayoutView: "#r_tagLayoutView", + RSearchLayoutView: "#r_searchLayoutView", + }, + ui: { + tabs: '.tabs li a', + }, + events: function() { + var events = {}, + that = this; + events["click " + this.ui.tabs] = function(e) { + var urlString = "", + elementName = $(e.currentTarget).data(); + var tabStateUrls = Globals.saveApplicationState.tabState; + if (elementName.name == "tab-tag") { + urlString = tabStateUrls.tagUrl; //'#!/tag'; + } else if (elementName.name == "tab-taxonomy") { + urlString = tabStateUrls.taxonomyUrl; // '#!/taxonomy'; + } else if (elementName.name == "tab-search") { + urlString = tabStateUrls.searchUrl; // '#!/search'; + } + Utils.setUrl({ + url: urlString, + mergeBrowserUrl: false, + trigger: true, + updateTabState: function() { + return { stateChanged: true }; + }, + }); + }; + return events; + }, + initialize: function(options) { + _.extend(this, _.pick(options, 'globalVent', 'url', 'value', 'tag', 'selectFirst')); + }, + onRender: function() { + this.bindEvent(); + this.renderTagLayoutView(); + this.renderSearchLayoutView(); + this.rendeBusinessCatalogLayoutView(); + this.selectTab(); + + }, + bindEvent: function() {}, + rendeBusinessCatalogLayoutView: function() { + var that = this; + require(['views/business_catalog/BusinessCatalogLayoutView'], function(BusinessCatalogLayoutView) { + that.RBusinessCatalogLayoutView.show(new BusinessCatalogLayoutView({ + globalVent: that.globalVent, + url: that.url + })); + }); + }, + renderTagLayoutView: function() { + var that = this; + require(['views/tag/TagLayoutView'], function(TagLayoutView) { + that.RTagLayoutView.show(new TagLayoutView({ + globalVent: that.globalVent, + searchCollection: that.searchCollection, + tag: that.tag + })); + }); + }, + renderSearchLayoutView: function() { + var that = this; + require(['views/search/SearchLayoutView'], function(SearchLayoutView) { + that.RSearchLayoutView.show(new SearchLayoutView({ + globalVent: that.globalVent, + vent: that.vent, + value: that.value + })); + }); + }, + selectTab: function() { + if (Utils.getUrlState.isTagTab()) { + this.$('.tabs').find('li a[aria-controls="tab-tag"]').parents('li').addClass('active').siblings().removeClass('active'); + this.$('.tab-content').find('div#tab-tag').addClass('active').siblings().removeClass('active'); + } else if (Utils.getUrlState.isTaxonomyTab()) { + this.$('.tabs').find('li a[aria-controls="tab-taxonomy"]').parents('li').addClass('active').siblings().removeClass('active'); + this.$('.tab-content').find('div#tab-taxonomy').addClass('active').siblings().removeClass('active'); + } else if (Utils.getUrlState.isSearchTab()) { + this.$('.tabs').find('li a[aria-controls="tab-search"]').parents('li').addClass('active').siblings().removeClass('active'); + this.$('.tab-content').find('div#tab-search').addClass('active').siblings().removeClass('active'); + } + }, + }); + return SideNavLayoutView; +});
http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js b/dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js index dfa29bb..c35cfcf 100644 --- a/dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js +++ b/dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js @@ -18,8 +18,12 @@ define(['require', 'backbone', - 'hbs!tmpl/detail_page/DetailPageLayoutView_tmpl' -], function(require, Backbone, DetailPageLayoutViewTmpl) { + 'hbs!tmpl/detail_page/DetailPageLayoutView_tmpl', + 'utils/Utils', + 'collection/VTagList', + 'models/VEntity', + 'utils/CommonViewFunction' +], function(require, Backbone, DetailPageLayoutViewTmpl, Utils, VTagList, VEntity, CommonViewFunction) { 'use strict'; var DetailPageLayoutView = Backbone.Marionette.LayoutView.extend( @@ -38,11 +42,55 @@ define(['require', }, /** ui selector cache */ ui: { + tagClick: '[data-id="tagClick"]', + title: '[data-id="title"]', + editButton: '[data-id="editButton"]', + cancelButton: '[data-id="cancelButton"]', + publishButton: '[data-id="publishButton"]', + description: '[data-id="description"]', + descriptionTextArea: '[data-id="descriptionTextArea"]', + editBox: '[data-id="editBox"]', + createDate: '[data-id="createDate"]', + updateDate: '[data-id="updateDate"]', + createdUser: '[data-id="createdUser"]', + addTagBtn: '[data-id="addTagBtn"]', + appendList: '[data-id="appendList"]', + inputTagging: '[data-id="inputTagging"]', + deleteTag: '[data-id="deleteTag"]', + addTagtext: '[data-id="addTagtext"]', + addTagPlus: '[data-id="addTagPlus"]', + searchTag: '[data-id="searchTag"] input', + addTagListBtn: '[data-id="addTagListBtn"]', backButton: "[data-id='backButton']" }, /** ui events hash */ events: function() { var events = {}; + events["click " + this.ui.editButton] = function() { + this.ui.editButton.hide(); + this.ui.description.hide(); + this.ui.editBox.show(); + this.ui.descriptionTextArea.focus(); + if (this.descriptionPresent) { + this.ui.descriptionTextArea.val(this.ui.description.text()); + } + }; + events["click " + this.ui.tagClick] = function(e) { + if (!e.target.nodeName.toLocaleLowerCase() == "i") { + Utils.setUrl({ + url: '#!/tag/tagAttribute/' + e.currentTarget.textContent, + mergeBrowserUrl: false, + trigger: true + }); + } + }; + // events["click " + this.ui.publishButton] = 'onPublishButtonClick'; + events["click " + this.ui.cancelButton] = 'onCancelButtonClick'; + events["click " + this.ui.deleteTag] = 'onClickTagCross'; + // events["keyup " + this.ui.searchTag] = function(e) { + // // this.offlineSearchTag(e); + // }; + events["click " + this.ui.addTagListBtn] = 'onClickAddTagBtn'; events['click ' + this.ui.backButton] = function() { Backbone.history.history.back(); }; @@ -53,7 +101,9 @@ define(['require', * @constructs */ initialize: function(options) { - _.extend(this, _.pick(options, 'globalVent', 'collection', 'vent')); + _.extend(this, _.pick(options, 'globalVent', 'collection', 'vent', 'id')); + this.key = 'branchDetail'; + //this.updateValue(); this.bindEvents(); this.commonTableOptions = { collection: this.collection, @@ -70,6 +120,7 @@ define(['require', }; }, bindEvents: function() { + var that = this; this.listenTo(this.collection, 'reset', function() { var collectionJSON = this.collection.toJSON(); if (collectionJSON[0].id && collectionJSON[0].id.id) { @@ -80,27 +131,118 @@ define(['require', this.name = collectionJSON[0].values.name; this.description = collectionJSON[0].values.description; if (this.name) { - this.$('.breadcrumbName').text(this.name); - this.$('.name').show(); - this.$('.name').html('<strong>Name: </strong><span>' + this.name + '</span>'); + this.ui.title.show(); + this.ui.title.html('<span>' + this.name + '</span>'); } else { - this.$('.name').hide(); + this.ui.title.hide(); } if (this.description) { - this.$('.description').show(); - this.$('.description').html('<strong>Description: </strong><span>' + this.description + '</span>'); + this.ui.description.show(); + this.ui.description.html('<span>' + this.description + '</span>'); } else { - this.$('.description').hide(); + this.ui.description.hide(); } } + if (collectionJSON[0].traits) { + this.tagElement = _.keys(collectionJSON[0].traits); + this.ui.addTagtext.hide(); + this.ui.addTagPlus.show(); + this.ui.inputTagging.find('.inputTag').remove(); + this.addTagToTerms(this.tagElement); + } } + this.renderEntityDetailTableLayoutView(); this.renderTagTableLayoutView(tagGuid); this.renderLineageLayoutView(tagGuid); this.renderSchemaLayoutView(tagGuid); }, this); }, - onRender: function() {}, + onRender: function() { + var that = this; + this.ui.editBox.hide(); + this.fetchCollection(); + this.ui.appendList.on('click', 'div', function(e) { + if (e.target.nodeName == "INPUT") { + return false; + } + that.ui.addTagtext.hide(); + that.ui.addTagPlus.show(); + // that.addTagToTerms([$(this).text()]); + that.saveTagFromList($(this)); + }); + }, + fetchCollection: function() { + this.collection.fetch({ reset: true }); + }, + onCancelButtonClick: function() { + this.ui.description.show(); + this.ui.editButton.show(); + this.ui.editBox.hide(); + }, + onClickTagCross: function(e) { + var tagName = $(e.currentTarget).parent().text(), + that = this, + modal = CommonViewFunction.deleteTagModel(tagName); + modal.on('ok', function() { + that.deleteTagData(e); + }); + modal.on('closeModal', function() { + modal.trigger('cancel'); + }); + }, + deleteTagData: function(e) { + var that = this, + tagName = $(e.currentTarget).text(); + CommonViewFunction.deleteTag({ + 'tagName': tagName, + 'guid': that.id, + 'collection': that.collection + }); + }, + addTagToTerms: function(tagObject) { + var tagData = ""; + _.each(tagObject, function(val) { + tagData += '<span class="inputTag" data-id="tagClick">' + val + '<i class="fa fa-close" data-id="deleteTag"></i></span>'; + }); + this.$('.addTag-dropdown').before(tagData); + }, + saveTagFromList: function(ref) { + var that = this; + this.entityModel = new VEntity(); + var tagName = ref.text(); + var json = { + "jsonClass": "org.apache.atlas.typesystem.json.InstanceSerialization$_Struct", + "typeName": tagName, + "values": {} + }; + this.entityModel.saveEntity(this.id, { + data: JSON.stringify(json), + beforeSend: function() {}, + success: function(data) { + that.fetchCollection(); + }, + error: function(error, data, status) { + if (error && error.responseText) { + var data = JSON.parse(error.responseText); + } + }, + complete: function() {} + }); + }, + onClickAddTagBtn: function(e) { + var that = this; + require(['views/tag/addTagModalView'], function(AddTagModalView) { + var view = new AddTagModalView({ + vent: that.vent, + guid: that.id, + modalCollection: that.collection + }); + /*view.saveTagData = function() { + override saveTagData function + }*/ + }); + }, renderEntityDetailTableLayoutView: function() { var that = this; require(['views/entity/EntityDetailTableLayoutView'], function(EntityDetailTableLayoutView) { @@ -125,7 +267,6 @@ define(['require', require(['views/graph/LineageLayoutView'], function(LineageLayoutView) { that.RLineageLayoutView.show(new LineageLayoutView({ globalVent: that.globalVent, - assetName: tagGuid, guid: tagGuid })); }); @@ -135,65 +276,9 @@ define(['require', require(['views/schema/SchemaLayoutView'], function(SchemaLayoutView) { that.RSchemaTableLayoutView.show(new SchemaLayoutView({ globalVent: that.globalVent, - name: tagGuid, - vent: that.vent + guid: tagGuid })); }); - }, - getTagTableColumns: function() { - var that = this; - return this.collection.constructor.getTableCols({ - tag: { - label: "Tag", - cell: "html", - editable: false, - sortable: false, - formatter: _.extend({}, Backgrid.CellFormatter.prototype, { - fromRaw: function(rawValue, model) { - var modelObject = model.toJSON(); - if (modelObject.$typeName$ && modelObject.instanceInfo) { - return '<a href="#!/dashboard/detailPage/' + modelObject.instanceInfo.guid + '">' + modelObject.instanceInfo.typeName + '</a>'; - } else if (!modelObject.$typeName$) { - return '<a href="#!/dashboard/detailPage/' + modelObject.guid + '">' + modelObject.typeName + '</a>'; - } - } - }) - }, - attributes: { - label: "Attributes", - cell: "html", - editable: false, - sortable: false, - formatter: _.extend({}, Backgrid.CellFormatter.prototype, { - fromRaw: function(rawValue, model) { - var modelObject = model.toJSON(); - if (modelObject.$typeName$ && modelObject.instanceInfo) { - var guid = model.toJSON().instanceInfo.guid; - model.getEntity(guid, { - beforeSend: function() {}, - success: function(data) { - return that.$('td a[data-id="' + guid + '"]').html(data.definition.values.name); - }, - error: function(error, data, status) {}, - complete: function() {} - }); - return '<a href="#!/dashboard/detailPage/' + guid + '" data-id="' + guid + '"></a>'; - } else if (!modelObject.$typeName$) { - var guid = model.toJSON().guid; - model.getEntity(guid, { - beforeSend: function() {}, - success: function(data) { - return that.$('td a[data-id="' + guid + '"]').html(data.definition.values.name); - }, - error: function(error, data, status) {}, - complete: function() {} - }); - return '<a href="#!/dashboard/detailPage/' + guid + '" data-id="' + guid + '"></a>'; - } - } - }) - } - }, this.collection); } }); return DetailPageLayoutView; http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/js/views/entity/EntityDetailTableLayoutView.js ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/views/entity/EntityDetailTableLayoutView.js b/dashboardv2/public/js/views/entity/EntityDetailTableLayoutView.js index 80cd0ef..c0ae185 100644 --- a/dashboardv2/public/js/views/entity/EntityDetailTableLayoutView.js +++ b/dashboardv2/public/js/views/entity/EntityDetailTableLayoutView.js @@ -109,7 +109,6 @@ define(['require', table += '<tr><td>' + key + '</td><td></td></tr>'; } } - } else { if (key == "createTime" || key == "lastAccessTime" || key == "retention") { table += '<tr><td>' + key + '</td><td>' + new Date(valueObject[key]) + '</td></tr>'; @@ -133,7 +132,7 @@ define(['require', value = data.GUID; } - that.$('td div[data-id="' + data.GUID + '"]').html('<a href="#!/dashboard/detailPage/' + data.GUID + '">' + value + '</a>'); + that.$('td div[data-id="' + data.GUID + '"]').html('<a href="#!/detailPage/' + data.GUID + '">' + value + '</a>'); }, error: function(error, data, status) {}, complete: function() {} http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/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 8751fbe..de10370 100644 --- a/dashboardv2/public/js/views/graph/LineageLayoutView.js +++ b/dashboardv2/public/js/views/graph/LineageLayoutView.js @@ -21,9 +21,10 @@ define(['require', 'hbs!tmpl/graph/LineageLayoutView_tmpl', 'collection/VLineageList', 'models/VEntity', + 'utils/Utils', 'dagreD3', 'd3-tip' -], function(require, Backbone, LineageLayoutViewtmpl, VLineageList, VEntity, dagreD3, d3Tip) { +], function(require, Backbone, LineageLayoutViewtmpl, VLineageList, VEntity, Utils, dagreD3, d3Tip) { 'use strict'; var LineageLayoutView = Backbone.Marionette.LayoutView.extend( @@ -52,12 +53,12 @@ define(['require', * @constructs */ initialize: function(options) { - _.extend(this, _.pick(options, 'globalVent', 'assetName', 'guid')); + _.extend(this, _.pick(options, 'globalVent', 'guid')); this.inputCollection = new VLineageList(); this.outputCollection = new VLineageList(); this.entityModel = new VEntity(); - this.inputCollection.url = "/api/atlas/lineage/" + this.assetName + "/inputs/graph"; - this.outputCollection.url = "/api/atlas/lineage/" + this.assetName + "/outputs/graph"; + this.inputCollection.url = "/api/atlas/lineage/" + this.guid + "/inputs/graph"; + this.outputCollection.url = "/api/atlas/lineage/" + this.guid + "/outputs/graph"; this.bindEvents(); this.fetchGraphData(); this.data = {}; @@ -280,7 +281,7 @@ define(['require', svgGroup = svg.append("g"); var zoom = d3.behavior.zoom() .scaleExtent([0.5, 6]) - .on("zoom", zoomed) + .on("zoom", zoomed); function zoomed() { svgGroup.attr("transform", @@ -359,13 +360,19 @@ define(['require', }) .on('dblclick', function(d) { tooltip.hide(d); - Backbone.history.navigate("#!/dashboard/detailPage/" + d, { trigger: true }); + //var urlForTab = window.location.hash.split('/')[1]; + + Utils.setUrl({ + url: '#!/detailPage/' + d, + mergeBrowserUrl: false, + trigger: true + }); }) .on('mouseout', function(d) { tooltip.hide(d); }); // Center the graph - var initialScale = 1.5; + var initialScale = 1.2; zoom.translate([(this.$('svg').width() - this.g.graph().width * initialScale) / 2, (this.$('svg').height() - this.g.graph().height * initialScale) / 2]) .scale(initialScale) .event(svg); http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/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 05850ad..7574367 100644 --- a/dashboardv2/public/js/views/schema/SchemaLayoutView.js +++ b/dashboardv2/public/js/views/schema/SchemaLayoutView.js @@ -54,10 +54,7 @@ define(['require', } else { var value = e.currentTarget.text; Utils.setUrl({ - url: '#!/dashboard/assetPage', - urlParams: { - query: value - }, + url: '#!/tag/tagAttribute/' + value, mergeBrowserUrl: false, trigger: true }); @@ -70,9 +67,9 @@ define(['require', * @constructs */ initialize: function(options) { - _.extend(this, _.pick(options, 'globalVent', 'name', 'vent')); + _.extend(this, _.pick(options, 'globalVent', 'guid', 'vent')); this.schemaCollection = new VSchemaList([], {}); - this.schemaCollection.url = "/api/atlas/lineage/" + this.name + "/schema"; + this.schemaCollection.url = "/api/atlas/lineage/" + this.guid + "/schema"; this.commonTableOptions = { collection: this.schemaCollection, includeFilter: false, @@ -115,6 +112,7 @@ define(['require', }); }, getSchemaTableColumns: function() { + var that = this; return this.schemaCollection.constructor.getTableCols({ name: { label: "Name", @@ -123,7 +121,7 @@ define(['require', sortable: false, formatter: _.extend({}, Backgrid.CellFormatter.prototype, { fromRaw: function(rawValue, model) { - return '<div><a href="#!/dashboard/detailPage/' + model.get('$id$').id + '">' + rawValue + '</a></div>'; + return '<div><a href="#!/detailPage/' + model.get('$id$').id + '">' + rawValue + '</a></div>'; } }) }, @@ -133,7 +131,7 @@ define(['require', editable: false, sortable: false }, - dataType: { + type: { label: "DataType", cell: "html", editable: false, @@ -149,9 +147,9 @@ define(['require', var traits = model.get('$traits$'); var atags = ""; _.keys(model.get('$traits$')).map(function(key) { - atags += '<a data-id="tagClick">' + traits[key].$typeName$ + '<i class="fa fa-times" data-id="delete" data-name="' + traits[key].$typeName$ + '" data-guid="' + model.get('$id$').id + '" ></i></a>'; + atags += '<a class="inputTag" data-id="tagClick">' + traits[key].$typeName$ + '<i class="fa fa-times" data-id="delete" data-name="' + traits[key].$typeName$ + '" data-guid="' + model.get('$id$').id + '" ></i></a>'; }); - return '<div class="tagList">' + atags + '<a data-id="addTag" data-guid="' + model.get('$id$').id + '"><i class="fa fa-plus"></i></a></div>'; + return '<div class="tagList">' + atags + '<a href="javascript:void(0);" class="inputTag" data-id="addTag" data-guid="' + model.get('$id$').id + '"><i style="right:0" class="fa fa-plus"></i></a></div>'; } }) } @@ -159,18 +157,21 @@ define(['require', }, onClickSchemaTag: function(e) { var that = this; - require(['views/tag/addTagModalView'], function(addTagModalView) { - var view = new addTagModalView({ + require(['views/tag/addTagModalView'], function(AddTagModalView) { + var view = new AddTagModalView({ vent: that.vent, guid: that.$(e.currentTarget).data("guid"), modalCollection: that.schemaCollection }); + // view.saveTagData = function() { + //override saveTagData function + // } }); }, onClickTagCross: function(e) { - var tagName = $(e.target).data("name"); - var that = this; - var modal = CommonViewFunction.deleteTagModel(tagName); + var tagName = $(e.target).data("name"), + that = this, + modal = CommonViewFunction.deleteTagModel(tagName); modal.on('ok', function() { that.deleteTagData(e); }); @@ -180,14 +181,12 @@ define(['require', }, deleteTagData: function(e) { var that = this, - tagName = $(e.target).data("name"); - var guid = $(e.target).data("guid"); - require(['utils/CommonViewFunction'], function(CommonViewFunction) { - CommonViewFunction.deleteTag({ - 'tagName': tagName, - 'guid': guid, - 'collection': that.schemaCollection - }); + tagName = $(e.target).data("name"), + guid = $(e.target).data("guid"); + CommonViewFunction.deleteTag({ + 'tagName': tagName, + 'guid': guid, + 'collection': that.tagCollection }); } }); http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/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 new file mode 100644 index 0000000..d32c01e --- /dev/null +++ b/dashboardv2/public/js/views/search/SearchDetailLayoutView.js @@ -0,0 +1,67 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +define(['require', + 'backbone', + 'hbs!tmpl/search/SearchDetailLayoutView_tmpl', +], function(require, Backbone, SearchDetailLayoutViewTmpl) { + 'use strict'; + + var SearchDetailLayoutView = Backbone.Marionette.LayoutView.extend( + /** @lends SearchDetailLayoutView */ + { + _viewName: 'SearchDetailLayoutView', + + template: SearchDetailLayoutViewTmpl, + + /** Layout sub regions */ + regions: { + RSearchResultLayoutView: "#r_searchResultLayoutView" + }, + + /** ui selector cache */ + ui: {}, + /** ui events hash */ + events: function() {}, + /** + * intialize a new SearchDetailLayoutView Layout + * @constructs + */ + initialize: function(options) { + _.extend(this, _.pick(options, 'globalVent', 'value')); + }, + bindEvents: function() {}, + onRender: function() { + this.renderSearchResultLayoutView(); + }, + renderSearchResultLayoutView: function() { + var that = this; + require(['views/search/SearchResultLayoutView'], function(SearchResultLayoutView) { + var value = { + 'query': that.value.query, + 'searchType': that.value.searchType + }; + that.RSearchResultLayoutView.show(new SearchResultLayoutView({ + value: value, + tag: that.tag + })); + }); + } + }); + return SearchDetailLayoutView; +}); http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/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 6ada4c7..f63c863 100644 --- a/dashboardv2/public/js/views/search/SearchLayoutView.js +++ b/dashboardv2/public/js/views/search/SearchLayoutView.js @@ -19,8 +19,11 @@ define(['require', 'backbone', 'hbs!tmpl/search/SearchLayoutView_tmpl', + 'collection/VSearchList', 'utils/Utils', -], function(require, Backbone, SearchLayoutViewTmpl, Utils) { + 'collection/VTagList', + 'tree', +], function(require, Backbone, SearchLayoutViewTmpl, VSearchList, Utils, VTagList) { 'use strict'; var SearchLayoutView = Backbone.Marionette.LayoutView.extend( @@ -37,44 +40,32 @@ define(['require', ui: { searchButton: '[data-id="searchButton"]', searchInput: '[data-id="searchInput"]', - searchType: 'input[name="queryType"]' + searchType: 'input[name="queryType"]', + advanceSearch: '[data-id="advanceSearch"]', + //advanceSearchContainer: '[data-id="advanceSearchContainer"]', + tagList: '[data-id="tagList"]', + tagListInput: '[data-id="tagListInput"]', + termListInput: '[data-id="termListInput"]', + searchBtn: '[data-id="searchBtn"]', + clearSearch: '[data-id="clearSearch"]' }, /** ui events hash */ events: function() { var events = {}, that = this; - events["click " + this.ui.searchButton] = 'onSearchButtonClick'; events["keyup " + this.ui.searchInput] = function(e) { + this.ui.searchBtn.removeAttr("disabled"); var code = e.which; if (code == 13) { - Utils.setUrl({ - url: '#!/dashboard/assetPage', - urlParams: { - query: this.ui.searchInput.val(), - searchType: this.type - }, - mergeBrowserUrl: false, - trigger: false - }); - that.onSearchButtonClick(e.currentTarget.value); + that.findSearchResult(); } - }; - events["change " + this.ui.searchType] = function(e) { - this.type = e.currentTarget.value; - if (this.ui.searchInput.val() !== "") { - this.onSearchButtonClick(); + if (code == 8 && this.ui.searchInput.val() == "") { + this.ui.searchBtn.attr("disabled", "true"); } - this.ui.searchInput.attr("placeholder", this.type == "dsl" ? 'Search using a DSL query: e.g. DataSet where name="sales_fact "' : 'Search using a query string: e.g. sales_fact'); - Utils.setUrl({ - url: '#!/dashboard/assetPage', - urlParams: { - query: this.ui.searchInput.val(), - searchType: this.type - }, - mergeBrowserUrl: false, - trigger: false - }); }; + events["change " + this.ui.searchType] = 'dslFulltextToggle'; + events["click " + this.ui.searchBtn] = 'findSearchResult'; + events["click " + this.ui.clearSearch] = 'clearSearchData'; return events; }, /** @@ -82,28 +73,174 @@ define(['require', * @constructs */ initialize: function(options) { - _.extend(this, _.pick(options, 'globalVent', 'vent')); - this.bindEvents(); + _.extend(this, _.pick(options, 'globalVent', 'value')); + this.searchCollection = new VSearchList([], { + state: { + firstPage: 0, + pageSize: 10 + } + }); this.type = "fulltext"; + this.tagCollection = new VTagList(); + $.extend(this.tagCollection.queryParams, { type: 'TRAIT' }); + this.typeCollection = new VTagList(); + $.extend(this.typeCollection.queryParams, { type: 'CLASS' }); + this.bindEvents(); + }, + bindEvents: function(param) { + this.listenTo(this.searchCollection, "reset", function(value) { + this.renderTree(); + }, this); + // this.listenTo(this.tagCollection, 'reset', function() { + // this.tagsAndTypeGenerator('tagCollection', this.ui.tagListInput, 'listTag', param); + // }, this); + // this.listenTo(this.typeCollection, 'reset', function() { + // this.tagsAndTypeGenerator('typeCollection', this.ui.termListInput, 'listType', param); + // }, this); + }, + onRender: function() { + // array of tags which is coming from url + this.ui.searchBtn.attr("disabled", "true"); + this.setValues(); + this.fetchCollections(); + }, + manualRender: function(paramObj) { + this.setValues(paramObj); }, - bindEvents: function() { - this.listenTo(this.vent, "tag:click", function(tagvalues) { - if (tagvalues.searchType) { - this.type = tagvalues.searchType; - this.$('input[name="queryType"][value=' + this.type + ']').prop('checked', true); + setValues: function(paramObj) { + var arr = []; + if (paramObj) { + this.value = paramObj; + } + if (this.value) { + if (this.value.query.length) { + // get only search value and append it to input box + this.ui.searchInput.val(this.value.query); + this.ui.searchBtn.removeAttr("disabled"); + /* if (this.value.query.split(" where ").length > 1) { + this.ui.searchInput.val(this.value.query.split(" where ")[0]); + } else if (this.value.query.split(" isa ").length > 1) { + this.ui.searchInput.val(this.value.query.split(" isa ")[0]); + } else { + this.ui.searchInput.val(this.value.query); + } + _.each(this.value.query.split(' isa '), function(val, key) { + if (key > 0) { + arr.push(val.split(" ")[0]) + } + });*/ } - if (tagvalues.query) { - this.ui.searchInput.val(tagvalues.query); - this.triggerSearch(tagvalues.query); + if (this.value.dslChecked == "true") { + this.ui.searchType.prop("checked", this.value.dslChecked).trigger("change") } - }, this); + } + this.bindEvents(arr); + }, + fetchCollections: function() { + // this.tagCollection.fetch({ reset: true }); + // this.typeCollection.fetch({ reset: true }); }, - onRender: function() {}, - onSearchButtonClick: function(e) { + findSearchResult: function() { this.triggerSearch(this.ui.searchInput.val()); }, triggerSearch: function(value) { - this.vent.trigger("search:click", { 'query': value, type: this.type }); + // this.ui.searchType.is(':checked') == true; + // var advancedSearchValue = value; + if (!this.ui.searchType.is(':checked')) { + // if (this.ui.tagListInput.select2('data').length > 1) { + // advancedSearchValue = value + " where " + value + " isa " + this.ui.tagListInput.val().join(" and " + value + " isa "); + // } else { + // advancedSearchValue = value + " isa " + this.ui.tagListInput.val(); + // advancedSearchValue = value; + // } + this.type = "dsl"; + } else if (!this.ui.searchType.is(':checked')) { + this.type = "fulltext"; + } + + var advancedSearchValue = value; + this.type = "fulltext"; + Utils.setUrl({ + url: '#!/search/searchResult', + urlParams: { + query: advancedSearchValue, + searchType: this.type, + dslChecked: this.ui.searchType.is(':checked') + }, + updateTabState: function() { + return { searchUrl: this.url, stateChanged: true }; + }, + mergeBrowserUrl: false, + trigger: true + }); + }, + fetchCollection: function(value) { + if (value) { + this.searchCollection.url = "/api/atlas/discovery/search/" + this.type; + $.extend(this.searchCollection.queryParams, { 'query': value }); + } + this.searchCollection.fetch({ reset: true }); + }, + // tagsAndTypeGenerator: function(collection, element, searchString, params) { + // var str = ''; + // _.each(this[collection].fullCollection.models, function(model) { + // var tagName = model.get("tags"); + // if (searchString) { + // str += '<option data-id="tags">' + tagName + '</option>'; + // } + // }); + // element.html(str); + // if (searchString == 'listTag') { + // var placeholderText = "Containing tag(S)"; + // if (params) { + // element.val(params); + // } + // } else { + // var placeholderText = "Select type"; + // } + // element.select2({ + // placeholder: placeholderText, + // allowClear: true + // }); + // }, + dslFulltextToggle: function(e) { + if (e.currentTarget.checked) { + this.type = "dsl"; + //this.dslSearch = true; + //this.ui.advanceSearchContainer.hide(); + } else { + this.type = "fulltext"; + // this.dslSearch = false; + //this.ui.advanceSearchContainer.show(); + } + if (this.ui.searchInput.val() !== "") { + Utils.setUrl({ + url: '#!/search/searchResult', + urlParams: { + query: this.ui.searchInput.val(), + searchType: this.type, + dslChecked: this.ui.searchType.is(':checked') + }, + updateTabState: function() { + return { searchUrl: this.url, stateChanged: true }; + }, + mergeBrowserUrl: false, + trigger: true + }); + //this.findSearchResult(); + } + this.ui.searchInput.attr("placeholder", this.type == "dsl" ? 'Search using a DSL query: e.g. DataSet where name="sales_fact "' : 'Search using a query string: e.g. sales_fact'); + }, + clearSearchData: function() { + this.ui.searchInput.val(""); + //this.ui.tagListInput.select2('val', ''); + //this.ui.termListInput.select2('val', ''); + this.ui.searchBtn.attr("disabled", "true"); + Utils.setUrl({ + url: '#!/search', + mergeBrowserUrl: false, + trigger: true + }); } }); return SearchLayoutView; http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/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 new file mode 100644 index 0000000..e2981d1 --- /dev/null +++ b/dashboardv2/public/js/views/search/SearchResultLayoutView.js @@ -0,0 +1,382 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +define(['require', + 'backbone', + 'hbs!tmpl/search/SearchResultLayoutView_tmpl', + 'modules/Modal', + 'models/VEntity', + 'utils/Utils', + 'utils/Globals', + 'collection/VSearchList', + 'utils/CommonViewFunction' +], function(require, Backbone, SearchResultLayoutViewTmpl, Modal, VEntity, Utils, Globals, VSearchList, CommonViewFunction) { + 'use strict'; + + var SearchResultLayoutView = Backbone.Marionette.LayoutView.extend( + /** @lends SearchResultLayoutView */ + { + _viewName: 'SearchResultLayoutView', + + template: SearchResultLayoutViewTmpl, + + /** Layout sub regions */ + regions: { + RTagLayoutView: "#r_tagLayoutView", + RSearchLayoutView: "#r_searchLayoutView", + REntityTableLayoutView: "#r_entityTableLayoutView", + }, + + /** ui selector cache */ + ui: { + tagClick: '[data-id="tagClick"]', + addTag: '[data-id="addTag"]', + }, + + /** ui events hash */ + events: function() { + var events = {}; + events["click " + this.ui.tagClick] = function(e) { + if (e.target.nodeName.toLocaleLowerCase() == "i") { + this.onClickTagCross(e); + } else { + Utils.setUrl({ + url: '#!/tag/tagAttribute/' + e.currentTarget.text, + mergeBrowserUrl: false, + trigger: true + }); + } + }; + events["click " + this.ui.addTag] = function(e) { + this.addModalView(e); + }; + events["click " + this.ui.tagCrossIcon] = function(e) {}; + return events; + }, + /** + * intialize a new SearchResultLayoutView Layout + * @constructs + */ + initialize: function(options) { + _.extend(this, _.pick(options, 'globalVent', 'vent', 'value')); + this.entityModel = new VEntity(); + this.searchCollection = new VSearchList(); + this.fetchList = 0; + this.commonTableOptions = { + collection: this.searchCollection, + includeFilter: false, + includePagination: true, + includePageSize: false, + includeFooterRecords: true, + includeSizeAbleColumns: false, + gridOpts: { + emptyText: 'No Record found!', + className: 'table table-hover backgrid table-quickMenu' + }, + filterOpts: {}, + paginatorOpts: {} + }; + this.bindEvents(); + + }, + bindEvents: function() { + this.listenTo(this.vent, "show:searchResult", function(value) { + this.fetchCollection(value); + this.REntityTableLayoutView.reset(); + }, this); + this.listenTo(this.searchCollection, "reset", function(value) { + if (this.searchCollection.toJSON().length == 0) { + this.checkTableFetch(); + } + this.renderTableLayoutView(); + }, this); + this.listenTo(this.searchCollection, "error", function(value, responseData) { + this.$('.fontLoader').hide(); + var message = "Invalid expression"; + if (this.value && this.value.query) { + message += " : " + this.value.query; + } + if (responseData.responseText) { + message = JSON.parse(responseData.responseText).error; + } + Utils.notifyError({ + content: message + }); + }, this); + }, + onRender: function() { + //this.renderTableLayoutView(); + var value = {}; + if (this.value) { + value = this.value; + } else { + value = { + 'query': '', + 'searchType': 'fulltext' + + }; + } + this.fetchCollection(value); + }, + fetchCollection: function(value) { + this.$('.fontLoader').show(); + this.$('.entityTable').hide(); + if (value) { + if (value.searchType) { + this.searchCollection.url = "/api/atlas/discovery/search/" + value.searchType; + } + _.extend(this.searchCollection.queryParams, { 'query': value.query }); + } + this.searchCollection.fetch({ reset: true }); + }, + renderTableLayoutView: function() { + var that = this, + count = 4; + require(['utils/TableLayout'], function(TableLayout) { + var columnCollection = Backgrid.Columns.extend({ + sortKey: "position", + comparator: function(item) { + return item.get(this.sortKey) || 999; + }, + setPositions: function() { + _.each(this.models, function(model, index) { + if (model.get('name') == "name") { + model.set("position", 1, { silent: true }); + model.set("label", "Name"); + } else if (model.get('name') == "description") { + model.set("position", 2, { silent: true }); + model.set("label", "Description"); + } else if (model.get('name') == "owner") { + model.set("position", 3, { silent: true }); + model.set("label", "Owner"); + } else { + model.set("position", ++count, { silent: true }); + } + }); + return this; + } + }); + var columns = new columnCollection(that.getEntityTableColumns()); + columns.setPositions().sort(); + that.REntityTableLayoutView.show(new TableLayout(_.extend({}, that.commonTableOptions, { + globalVent: that.globalVent, + columns: columns, + includeOrderAbleColumns: true + }))); + }); + }, + checkTableFetch: function() { + if (this.fetchList <= 0) { + this.$('.fontLoader').hide(); + this.$('.entityTable').show(); + } + }, + getEntityTableColumns: function() { + var that = this, + col = {}; + var responseData = this.searchCollection.responseData; + if (this.searchCollection.responseData) { + if (responseData.dataType) { + if (responseData.dataType.attributeDefinitions.length == 2 && responseData.dataType.attributeDefinitions[1].name == "instanceInfo") { + return this.getFixedColumn(); + } else { + var modelJSON = this.searchCollection.toJSON()[0]; + _.keys(modelJSON).map(function(key) { + if (key.indexOf("$") == -1 && typeof modelJSON[key] != "object") { + if (typeof modelJSON[key] == "string" || typeof modelJSON[key] == "number") { + if (typeof modelJSON[key] == "number" && key != "createTime") { + return; + } + if (key == "name" || key == "owner" || key == "description") { + col[key] = { + cell: (key == "name") ? ("Html") : ("String"), + editable: false, + sortable: false, + orderable: true, + formatter: _.extend({}, Backgrid.CellFormatter.prototype, { + fromRaw: function(rawValue, model) { + if (rawValue == null) { + return null; + } + if (model.get('createTime') == rawValue) { + return new Date(rawValue); + } + if (model.get('name') == rawValue) { + if (model.get('$id$')) { + return '<a href="#!/detailPage/' + model.get('$id$').id + '">' + rawValue + '</a>'; + } else { + return '<a>' + rawValue + '</a>'; + } + } else { + return rawValue; + } + } + }) + }; + } + } + } + }); + col['tag'] = { + label: "Tags", + cell: "Html", + editable: false, + sortable: false, + orderable: true, + formatter: _.extend({}, Backgrid.CellFormatter.prototype, { + fromRaw: function(rawValue, model) { + var traits = model.get('$traits$'); + var atags = "", + addTag = ""; + _.keys(model.get('$traits$')).map(function(key) { + atags += '<a class="inputTag" data-id="tagClick">' + traits[key].$typeName$ + '<i class="fa fa-times" data-id="delete" data-name="' + traits[key].$typeName$ + '" data-guid="' + model.get('$id$').id + '" ></i></a>'; + }); + if (model.get('$id$')) { + addTag += '<a href="javascript:void(0)" data-id="addTag" class="inputTag" data-guid="' + model.get('$id$').id + '" ><i style="right:0" class="fa fa-plus"></i></a>'; + } else { + addTag += '<a href="javascript:void(0)" data-id="addTag" class="inputTag"><i style="right:0" class="fa fa-plus"></i></a>'; + + } + return '<div class="tagList">' + atags + addTag + '</div>'; + } + }) + }; + col['taxonomy'] = { + label: "Taxonomy", + cell: "Html", + editable: false, + sortable: false, + orderable: true, + }; + that.checkTableFetch(); + return this.searchCollection.constructor.getTableCols(col, this.searchCollection); + } + } else { + return this.getFixedColumn(); + } + } + }, + getFixedColumn: function() { + var that = this; + return this.searchCollection.constructor.getTableCols({ + instanceInfo: { + label: "Type Name", + cell: "html", + editable: false, + sortable: false, + formatter: _.extend({}, Backgrid.CellFormatter.prototype, { + fromRaw: function(rawValue, model) { + var modelObject = model.toJSON(); + if (modelObject.$typeName$ && modelObject.instanceInfo) { + return '<a href="#!/detailPage/' + modelObject.instanceInfo.guid + '">' + modelObject.instanceInfo.typeName + '</a>'; + } else if (!modelObject.$typeName$) { + return '<a href="#!/detailPage/' + modelObject.guid + '">' + modelObject.typeName + '</a>'; + } + } + }) + }, + name: { + label: "Name", + cell: "html", + editable: false, + sortable: false, + formatter: _.extend({}, Backgrid.CellFormatter.prototype, { + fromRaw: function(rawValue, model) { + var modelObject = model.toJSON(); + if (modelObject.$typeName$ && modelObject.instanceInfo) { + var guid = model.toJSON().instanceInfo.guid; + ++that.fetchList; + model.getEntity(guid, { + beforeSend: function() {}, + success: function(data) { + if (data.definition && data.definition.values && data.definition.values.name) { + return that.$('td a[data-id="' + guid + '"]').html(data.definition.values.name); + } else { + return that.$('td a[data-id="' + guid + '"]').html(data.definition.id.id); + } + }, + error: function(error, data, status) {}, + complete: function() { + --that.fetchList; + that.checkTableFetch(); + } + }); + return '<a href="#!/detailPage/' + guid + '" data-id="' + guid + '"></a>'; + } else if (!modelObject.$typeName$) { + var guid = model.toJSON().guid; + ++that.fetchList; + model.getEntity(guid, { + beforeSend: function() {}, + success: function(data) { + if (data.definition && data.definition.values && data.definition.values.name) { + return that.$('td a[data-id="' + guid + '"]').html(data.definition.values.name); + } else { + return that.$('td a[data-id="' + guid + '"]').html(data.definition.id.id); + } + }, + error: function(error, data, status) {}, + complete: function() { + --that.fetchList; + that.checkTableFetch(); + } + }); + return '<a href="#!/detailPage/' + guid + '" data-id="' + guid + '"></a>'; + } + } + }) + } + }, this.searchCollection); + }, + addModalView: function(e) { + var that = this; + require(['views/tag/addTagModalView'], function(AddTagModalView) { + var view = new AddTagModalView({ + vent: that.vent, + guid: that.$(e.currentTarget).data("guid"), + modalCollection: that.searchCollection + }); + // view.saveTagData = function() { + //override saveTagData function + // } + }); + }, + onClickTagCross: function(e) { + var tagName = $(e.target).data("name"), + guid = $(e.target).data("guid"), + that = this, + modal = CommonViewFunction.deleteTagModel(tagName); + modal.on('ok', function() { + that.deleteTagData(e); + }); + modal.on('closeModal', function() { + modal.trigger('cancel'); + }); + }, + deleteTagData: function(e) { + var that = this, + tagName = $(e.target).data("name"), + guid = $(e.target).data("guid"); + CommonViewFunction.deleteTag({ + 'tagName': tagName, + 'guid': guid, + 'collection': that.searchCollection + }); + } + }); + return SearchResultLayoutView; +}); http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/js/views/site/Header.js ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/views/site/Header.js b/dashboardv2/public/js/views/site/Header.js index dffdf79..cf97a75 100644 --- a/dashboardv2/public/js/views/site/Header.js +++ b/dashboardv2/public/js/views/site/Header.js @@ -23,31 +23,10 @@ define(['require', var Header = Marionette.LayoutView.extend({ template: tmpl, - templateHelpers: function() { - return { - urlType: this.urlType - }; - }, regions: {}, events: {}, - initialize: function(options) { - var url = window.location.href.split("/"); - this.urlType = url[url.length - 1]; - var urlText = this.urlType.split("?")[0]; - /*if we us only old ui then uncomment this condition*/ - if (urlText == "" || urlText == "index.html" || urlText == "assetPage") { - this.urlType = "assetPage"; - } - }, - onRender: function() {}, - addTagsFileds: function() { - var that = this; - require(['views/tag/createTagsLayoutView'], function(createTagsLayoutView) { - var view = new createTagsLayoutView({ - vent: that.vent - }); - }); - } + initialize: function(options) {}, + onRender: function() {} }); return Header; }); http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/js/views/tag/AddTagAttributeView.js ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/views/tag/AddTagAttributeView.js b/dashboardv2/public/js/views/tag/AddTagAttributeView.js new file mode 100644 index 0000000..6d38162 --- /dev/null +++ b/dashboardv2/public/js/views/tag/AddTagAttributeView.js @@ -0,0 +1,55 @@ + +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +define(['require', + 'backbone', + 'hbs!tmpl/tag/AddTagAttributeView_tmpl', + +], function(require, Backbone, AddTagAttributeView_tmpl) { + 'use strict'; + + return Backbone.Marionette.LayoutView.extend( + /** @lends GlobalExclusionListView */ + { + + template: AddTagAttributeView_tmpl, + + /** Layout sub regions */ + regions: {}, + + /** ui selector cache */ + ui: { + close: "[data-id='close']", + attributeId: "[data-id='attributeId']" + }, + events: function() { + var events = {}; + return events; + }, + /** + * intialize a new GlobalExclusionComponentView Layout + * @constructs + */ + initialize: function(options) { + this.parentView = options.parentView; + }, + onRender: function() {}, + bindEvents: function() {} + }); +}); http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/js/views/tag/CreateTagLayoutView.js ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/views/tag/CreateTagLayoutView.js b/dashboardv2/public/js/views/tag/CreateTagLayoutView.js new file mode 100644 index 0000000..186f26e --- /dev/null +++ b/dashboardv2/public/js/views/tag/CreateTagLayoutView.js @@ -0,0 +1,79 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +define(['require', + 'backbone', + 'hbs!tmpl/tag/createTagLayoutView_tmpl', + 'utils/Utils' +], function(require, Backbone, CreateTagLayoutViewTmpl, Utils) { + + var CreateTagLayoutView = Backbone.Marionette.LayoutView.extend( + /** @lends CreateTagLayoutView */ + { + _viewName: 'CreateTagLayoutView', + + template: CreateTagLayoutViewTmpl, + + /** Layout sub regions */ + regions: {}, + + /** ui selector cache */ + ui: { + + tagName: "[data-id='tagName']", + parentTag: "[data-id='parentTag']" + }, + /** ui events hash */ + events: function() { + var events = {}; + return events; + }, + /** + * intialize a new CreateTagLayoutView Layout + * @constructs + */ + initialize: function(options) { + _.extend(this, _.pick(options, 'tagCollection')); + this.bindEvents(); + }, + bindEvents: function() { + // this.listenTo(this.tagCollection, 'reset', function() { + // this.tagCollectionList(); + // }, this); + }, + onRender: function() { + //this.fetchCollection(); + this.tagCollectionList(); + }, + + tagCollectionList: function() { + this.ui.parentTag.empty(); + var str = '<option selected="true" style="display:none;"></option>'; + for (var i = 0; i < this.tagCollection.fullCollection.models.length; i++) { + var tags = this.tagCollection.fullCollection.models[i].get("tags"); + str += '<option>' + tags + '</option>'; + this.ui.parentTag.html(str); + } + }, + fetchCollection: function() { + $.extend(this.tagCollection.queryParams, { type: 'TRAIT' }); + this.tagCollection.fetch({ reset: true }); + }, + }); + return CreateTagLayoutView; +}); http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/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 new file mode 100644 index 0000000..421d5ad --- /dev/null +++ b/dashboardv2/public/js/views/tag/TagAttributeDetailLayoutView.js @@ -0,0 +1,144 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +define(['require', + 'backbone', + 'hbs!tmpl/tag/TagAttributeDetailLayoutView_tmpl', + 'utils/Utils', + 'views/tag/AddTagAttributeView', + 'collection/VCommonList', + 'models/VTag' +], function(require, Backbone, TagAttributeDetailLayoutViewTmpl, Utils, AddTagAttributeView, VCommonList, VTag) { + 'use strict'; + + var TagAttributeDetailLayoutView = Backbone.Marionette.LayoutView.extend( + /** @lends TagAttributeDetailLayoutView */ + { + template: TagAttributeDetailLayoutViewTmpl, + /** Layout sub regions */ + regions: {}, + /** ui selector cache */ + ui: { + title: '[data-id="title"]', + editButton: '[data-id="editButton"]', + editBox: '[data-id="editBox"]', + addAttrBtn: '[data-id="addAttrBtn"]', + saveButton: "[data-id='saveButton']", + showAttribute: "[data-id='showAttribute']", + cancelButton: "[data-id='cancelButton']", + addTagListBtn: '[data-id="addTagListBtn"]', + addTagtext: '[data-id="addTagtext"]', + addTagPlus: '[data-id="addTagPlus"]', + }, + /** ui events hash */ + events: function() { + var events = {}; + events["click " + this.ui.addAttrBtn] = 'onClickAddAttribute'; + events["click " + this.ui.addTagListBtn] = 'onClickAddTagBtn'; + return events; + }, + /** + * intialize a new TagAttributeDetailLayoutView Layout + * @constructs + */ + initialize: function(options) { + _.extend(this, _.pick(options, 'globalVent', 'tag', 'vent')); + this.tagCollection = new VCommonList(); + this.tagCollection.url = "/api/atlas/types/" + this.tag; + this.tagCollection.modelAttrName = "definition"; + this.tagCollection.fetch({ reset: true }); + this.bindEvents(); + }, + bindEvents: function() { + this.listenTo(this.tagCollection, 'reset', function() { + var that = this, + attributeData = ""; + _.each(this.tagCollection.models, function(attr) { + var traitTypes = attr.get("traitTypes"); + _.each(traitTypes[0].attributeDefinitions, function(value, key) { + attributeData += '<span class="inputAttribute">' + value.name + '</span>'; + }); + }); + if (attributeData.length) { + that.ui.addTagtext.hide(); + that.ui.addTagPlus.show(); + } + that.ui.showAttribute.html(attributeData); + + }, this); + }, + onRender: function() { + this.ui.title.html('<span>' + this.tag + '</span>'); + this.ui.saveButton.attr("disabled", "true"); + }, + onSaveButton: function(ref) { + var that = this, + tagModel = new VTag(), + attributeName = $(ref.el).find("input").val(); + this.tagCollection.first().get('traitTypes')[0].attributeDefinitions.push({ + "name": attributeName, + "dataTypeName": "string", + "multiplicity": "optional", + "isComposite": false, + "isUnique": false, + "isIndexable": true, + "reverseAttributeName": null + }); + tagModel.set(this.tagCollection.first().toJSON()).save(null, { + type: "PUT", + success: function(model, response) { + that.tagCollection.fetch({ reset: true }); + Utils.notifySuccess({ + content: " Attribute has been Updated" + }); + }, + error: function(model, response) { + if (response.responseJSON && response.responseJSON.error) { + that.tagCollection.fetch({ reset: true }); + Utils.notifyError({ + content: response.responseJSON.error + }); + } + } + }); + }, + onClickAddTagBtn: function(e) { + var that = this; + require(['views/tag/AddTagAttributeView', + 'modules/Modal' + ], + function(AddTagAttributeView, Modal) { + var view = new AddTagAttributeView(), + modal = new Modal({ + title: 'Add Attribute', + content: view, + cancelText: "Cancel", + okText: 'Add', + allowCancel: true, + }).open(); + modal.on('ok', function() { + that.onSaveButton(view); + }); + modal.on('closeModal', function() { + modal.trigger('cancel'); + }); + }); + } + }); + return TagAttributeDetailLayoutView; +}); http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/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 new file mode 100644 index 0000000..7e0f7ed --- /dev/null +++ b/dashboardv2/public/js/views/tag/TagDetailLayoutView.js @@ -0,0 +1,79 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +define(['require', + 'backbone', + 'hbs!tmpl/tag/TagDetailLayoutView_tmpl', +], function(require, Backbone, TagDetailLayoutView_tmpl) { + 'use strict'; + + var TagDetailLayoutView = Backbone.Marionette.LayoutView.extend( + /** @lends TagDetailLayoutView */ + { + _viewName: 'TagDetailLayoutView', + + template: TagDetailLayoutView_tmpl, + + /** Layout sub regions */ + regions: { + RSearchResultLayoutView: "#r_searchResultLayoutView", + RTagAttributeDetailLayoutView: "#r_TagAttributeDetailLayoutView" + }, + + /** ui selector cache */ + ui: {}, + /** ui events hash */ + events: function() {}, + /** + * intialize a new TagDetailLayoutView Layout + * @constructs + */ + initialize: function(options) { + _.extend(this, _.pick(options, 'globalVent', 'guid', 'tag')); + }, + bindEvents: function() {}, + onRender: function() { + this.renderSearchResultLayoutView(); + this.renderTagAttributeCompositeView(); + }, + renderSearchResultLayoutView: function() { + var that = this; + require(['views/search/SearchResultLayoutView'], function(SearchResultLayoutView) { + var value = { + 'query': that.tag, + 'type': 'fulltext' + }; + that.RSearchResultLayoutView.show(new SearchResultLayoutView({ + value: value, + tag: that.tag + })); + }); + }, + renderTagAttributeCompositeView: function() { + var that = this; + require(['views/tag/TagAttributeDetailLayoutView'], function(TagAttributeDetailLayoutView) { + that.RTagAttributeDetailLayoutView.show(new TagAttributeDetailLayoutView({ + tag: that.tag + })); + }); + }, + + + }); + return TagDetailLayoutView; +}); http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/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 76bf842..791d70b 100644 --- a/dashboardv2/public/js/views/tag/TagDetailTableLayoutView.js +++ b/dashboardv2/public/js/views/tag/TagDetailTableLayoutView.js @@ -80,7 +80,8 @@ define(['require', var stringArr = []; tagValue = ""; _.each(keyValue.values, function(val, key) { - var attrName = "<span>" + key + " : " + val + "</span>"; + + var attrName = "<span>" + key + ":" + val + "</span>"; stringArr.push(attrName); }); tagValue += stringArr.join(", "); @@ -93,12 +94,15 @@ define(['require', }, addModalView: function(e) { var that = this; - require(['views/tag/addTagModalView'], function(addTagModalView) { - var view = new addTagModalView({ + require(['views/tag/addTagModalView'], function(AddTagModalView) { + var view = new AddTagModalView({ vent: that.vent, guid: that.guid, modalCollection: that.collection }); + // view.saveTagData = function() { + //override saveTagData function + // } }); }, deleteTagDataModal: function(e) {
