atlas-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From shweth...@apache.org
Subject [01/10] incubator-atlas git commit: ATLAS-582 Move Atlas UI to use backboneJS (kevalbhatt18 via shwethags)
Date Mon, 11 Apr 2016 11:34:35 GMT
Repository: incubator-atlas
Updated Branches:
  refs/heads/master c2356f8ef -> a5f8c5aa0


http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/a5f8c5aa/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
new file mode 100644
index 0000000..35487a5
--- /dev/null
+++ b/dashboardv2/public/js/views/schema/SchemaLayoutView.js
@@ -0,0 +1,226 @@
+/**
+ * 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/schema/SchemaTableLayoutView_tmpl',
+    'collection/VSchemaList',
+    'utils/Utils',
+], function(require, Backbone, SchemaTableLayoutViewTmpl, VSchemaList, Utils) {
+    'use strict';
+
+    var SchemaTableLayoutView = Backbone.Marionette.LayoutView.extend(
+        /** @lends SchemaTableLayoutView */
+        {
+            _viewName: 'SchemaTableLayoutView',
+
+            template: SchemaTableLayoutViewTmpl,
+
+            /** Layout sub regions */
+            regions: {
+                RTagLayoutView: "#r_tagLayoutView",
+            },
+            /** ui selector cache */
+            ui: {
+                tagClick: '[data-id="tagClick"]',
+                DetailValue: "[data-id='detailValue']",
+                addTag: "[data-id='addTag']",
+            },
+            /** ui events hash */
+            events: function() {
+                var events = {};
+
+                events["click " + this.ui.addTag] = function(e) {
+                        this.onClickSchemaTag(e);
+                    },
+                    events["click " + this.ui.tagClick] = function(e) {
+                        if (e.target.nodeName.toLocaleLowerCase() == "i") {
+                            this.onClickTagCross(e);
+                        } else {
+                            var value = e.currentTarget.text;
+                            Utils.setUrl({
+                                url: '#!/dashboard/assetPage',
+                                urlParams: {
+                                    query: value
+                                },
+                                mergeBrowserUrl: false,
+                                trigger: true
+                            });
+                        }
+                    };
+                return events;
+            },
+            /**
+             * intialize a new SchemaTableLayoutView Layout
+             * @constructs
+             */
+            initialize: function(options) {
+                _.extend(this, _.pick(options, 'globalVent', 'name', 'vent'));
+                this.schemaCollection = new VSchemaList([], {});
+                this.schemaCollection.url = "/api/atlas/lineage/hive/table/" + this.name + "/schema";
+                this.commonTableOptions = {
+                    collection: this.schemaCollection,
+                    includeFilter: false,
+                    includePagination: false,
+                    includePageSize: false,
+                    includeFooterRecords: true,
+                    gridOpts: {
+                        className: "table table-striped table-condensed backgrid table-quickMenu",
+                        emptyText: 'No records found!'
+                    },
+                    filterOpts: {},
+                    paginatorOpts: {}
+                };
+                this.bindEvents();
+            },
+            bindEvents: function() {
+                this.listenTo(this.schemaCollection, "reset", function(value) {
+                    this.renderTableLayoutView();
+                    $('.schemaTable').show();
+                }, this);
+                this.listenTo(this.schemaCollection, "error", function(value) {
+                    $('.schemaTable').hide();
+                }, this);
+            },
+            onRender: function() {
+                this.schemaCollection.fetch({ reset: true });
+                this.renderTableLayoutView();
+            },
+            renderTableLayoutView: function() {
+                var that = this;
+                require(['utils/TableLayout'], function(TableLayout) {
+                    var cols = new Backgrid.Columns(that.getSchemaTableColumns());
+                    that.RTagLayoutView.show(new TableLayout(_.extend({}, that.commonTableOptions, {
+                        globalVent: that.globalVent,
+                        columns: cols,
+                        gridOpts: {
+                            className: "table table-bordered table-hover table-condensed backgrid table-quickMenu",
+                        },
+                    })));
+                });
+            },
+            getSchemaTableColumns: function() {
+                var that = this;
+                return this.schemaCollection.constructor.getTableCols({
+                    name: {
+                        label: "Name",
+                        cell: "Html",
+                        editable: false,
+                        sortable: false,
+                        formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
+                            fromRaw: function(rawValue, model) {
+                                return '<div><a href="#!/dashboard/detailPage/' + model.get('$id$').id + '">' + rawValue + '</a></div>';
+                            }
+                        })
+                    },
+                    comment: {
+                        label: "Comment",
+                        cell: "html",
+                        editable: false,
+                        sortable: false
+                    },
+                    dataType: {
+                        label: "DataType",
+                        cell: "html",
+                        editable: false,
+                        sortable: false
+                    },
+                    tag: {
+                        label: "Tags",
+                        cell: "Html",
+                        editable: false,
+                        sortable: false,
+                        formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
+                            fromRaw: function(rawValue, model) {
+                                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>';
+                                });
+                                return '<div class="tagList">' + atags + '</div>';
+                            }
+                        })
+                    },
+                    addTag: {
+                        label: "Tools",
+                        cell: "Html",
+                        editable: false,
+                        sortable: false,
+                        formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
+                            fromRaw: function(rawValue, model) {
+                                return '<a href="javascript:void(0);" data-id="addTag" data-guid="' + model.get('$id$').id + '"><i class="fa fa-tag"></i></a>';
+                            }
+                        })
+                    }
+                }, this.schemaCollection);
+            },
+            onClickSchemaTag: 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.schemaCollection
+                    });
+                    // view.saveTagData = function() {
+                    //override saveTagData function 
+                    // }
+                });
+            },
+            onClickTagCross: function(e) {
+                var tagName = $(e.target).data("name");
+                var that = this;
+                require([
+                    'modules/Modal'
+                ], function(Modal) {
+                    var modal = new Modal({
+                        title: 'Are you sure you want to delete ?',
+                        okText: 'Delete',
+                        htmlContent: "<b>Tag: " + tagName + "</b>",
+                        cancelText: "Cancel",
+                        allowCancel: true,
+                        okCloses: true,
+                        showFooter: true,
+                    }).open();
+                    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");
+                var guid = $(e.target).data("guid");
+                require(['models/VTag'], function(VTag) {
+                    var tagModel = new VTag();
+                    tagModel.deleteTag(guid, tagName, {
+                        beforeSend: function() {},
+                        success: function(data) {
+                            that.schemaCollection.fetch({ reset: true });
+                        },
+                        error: function(error, data, status) {},
+                        complete: function() {}
+                    });
+                });
+            }
+        });
+    return SchemaTableLayoutView;
+});

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/a5f8c5aa/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
new file mode 100644
index 0000000..6ada4c7
--- /dev/null
+++ b/dashboardv2/public/js/views/search/SearchLayoutView.js
@@ -0,0 +1,110 @@
+/**
+ * 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/SearchLayoutView_tmpl',
+    'utils/Utils',
+], function(require, Backbone, SearchLayoutViewTmpl, Utils) {
+    'use strict';
+
+    var SearchLayoutView = Backbone.Marionette.LayoutView.extend(
+        /** @lends SearchLayoutView */
+        {
+            _viewName: 'SearchLayoutView',
+
+            template: SearchLayoutViewTmpl,
+
+            /** Layout sub regions */
+            regions: {},
+
+            /** ui selector cache */
+            ui: {
+                searchButton: '[data-id="searchButton"]',
+                searchInput: '[data-id="searchInput"]',
+                searchType: 'input[name="queryType"]'
+            },
+            /** ui events hash */
+            events: function() {
+                var events = {},
+                    that = this;
+                events["click " + this.ui.searchButton] = 'onSearchButtonClick';
+                events["keyup " + this.ui.searchInput] = function(e) {
+                    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);
+                    }
+                };
+                events["change " + this.ui.searchType] = function(e) {
+                    this.type = e.currentTarget.value;
+                    if (this.ui.searchInput.val() !== "") {
+                        this.onSearchButtonClick();
+                    }
+                    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
+                    });
+                };
+                return events;
+            },
+            /**
+             * intialize a new SearchLayoutView Layout
+             * @constructs
+             */
+            initialize: function(options) {
+                _.extend(this, _.pick(options, 'globalVent', 'vent'));
+                this.bindEvents();
+                this.type = "fulltext";
+            },
+            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);
+                    }
+                    if (tagvalues.query) {
+                        this.ui.searchInput.val(tagvalues.query);
+                        this.triggerSearch(tagvalues.query);
+                    }
+                }, this);
+            },
+            onRender: function() {},
+            onSearchButtonClick: function(e) {
+                this.triggerSearch(this.ui.searchInput.val());
+            },
+            triggerSearch: function(value) {
+                this.vent.trigger("search:click", { 'query': value, type: this.type });
+            }
+        });
+    return SearchLayoutView;
+});

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/a5f8c5aa/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
new file mode 100644
index 0000000..500bd91
--- /dev/null
+++ b/dashboardv2/public/js/views/site/Header.js
@@ -0,0 +1,52 @@
+/**
+ * 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/site/header',
+], function(require, tmpl) {
+    'use strict';
+
+    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];
+            /*if we us only old ui then uncomment this condition*/
+            if (this.urlType == "") {
+                this.urlType = "assetPage";
+            }
+        },
+        onRender: function() {},
+        addTagsFileds: function() {
+            var that = this;
+            require(['views/tag/createTagsLayoutView'], function(createTagsLayoutView) {
+                var view = new createTagsLayoutView({
+                    vent: that.vent
+                });
+            });
+        }
+    });
+    return Header;
+});

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/a5f8c5aa/dashboardv2/public/js/views/site/footer.js
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/views/site/footer.js b/dashboardv2/public/js/views/site/footer.js
new file mode 100644
index 0000000..5d8e856
--- /dev/null
+++ b/dashboardv2/public/js/views/site/footer.js
@@ -0,0 +1,33 @@
+/**
+ * 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/site/footer'
+], function(require, tmpl) {
+    'use strict';
+
+    var Footer = Marionette.LayoutView.extend({
+        template: tmpl,
+        templateHelpers: function() {},
+        regions: {},
+        events: {},
+        initialize: function(options) {},
+        onRender: function() {}
+    });
+    return Footer;
+});

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/a5f8c5aa/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
new file mode 100644
index 0000000..c5e1ace
--- /dev/null
+++ b/dashboardv2/public/js/views/tag/TagDetailTableLayoutView.js
@@ -0,0 +1,147 @@
+/**
+ * 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/TagDetailTableLayoutView_tmpl'
+], function(require, Backbone, TagDetailTableLayoutView_tmpl) {
+    'use strict';
+
+    var TagDetailTableLayoutView = Backbone.Marionette.LayoutView.extend(
+        /** @lends TagDetailTableLayoutView */
+        {
+            _viewName: 'TagDetailTableLayoutView',
+
+            template: TagDetailTableLayoutView_tmpl,
+
+            /** Layout sub regions */
+            regions: {},
+
+            /** ui selector cache */
+            ui: {
+                detailValue: "[data-id='detailValue']",
+                addTag: "[data-id='addTag']",
+                deleteTag: "[data-id='delete']",
+            },
+            /** ui events hash */
+            events: function() {
+                var events = {};
+                events["click " + this.ui.addTag] = function(e) {
+                    this.addModalView(e);
+                };
+                events["click " + this.ui.deleteTag] = function(e) {
+                    this.deleteTagDataModal(e);
+                };
+                return events;
+            },
+            /**
+             * intialize a new EntityDetailTableLayoutView Layout
+             * @constructs
+             */
+            initialize: function(options) {
+                _.extend(this, _.pick(options, 'globalVent', 'collection', 'guid'));
+                this.collectionObject = this.collection.toJSON();
+
+            },
+            bindEvents: function() {},
+            onRender: function() {
+                this.tagTableGenerate();
+            },
+            tagTableGenerate: function() {
+                var that = this,
+                    table = "",
+                    valueObject = this.collectionObject[0].traits;
+                if (_.isEmpty(valueObject)) {
+                    this.$(".noTags").show();
+                } else {
+                    this.$(".noTags").hide();
+                    _.keys(valueObject).map(function(key) {
+                        var keyValue = valueObject[key];
+                        var tagValue = 'NA';
+                        if (_.isObject(keyValue)) {
+                            //tagValue = "";
+                            if (!_.isEmpty(keyValue.values)) {
+                                var stringArr = [];
+                                tagValue = "";
+                                _.each(keyValue.values, function(val, key) {
+
+                                    var attrName = "<span>" + key + ":" + val + "</span>";
+                                    stringArr.push(attrName);
+                                });
+                                tagValue += stringArr.join(", ");
+                            }
+                            table += '<tr><td>' + keyValue.typeName + '</td><td>' + tagValue + '</td><td>' + '<a href="javascript:void(0)"><i class="fa fa-trash" data-id="delete" data-name="' + keyValue.typeName + '"></i></a></tr>';
+                        } else {}
+                    });
+                    that.ui.detailValue.append(table);
+                }
+            },
+            addModalView: function(e) {
+                var that = this;
+                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) {
+                var tagName = $(e.currentTarget).data("name");
+                var that = this;
+                require([
+                    'modules/Modal'
+                ], function(Modal) {
+                    var modal = new Modal({
+                        title: 'Are you sure you want to delete ?',
+                        okText: 'Delete',
+                        htmlContent: "<b>Tag: " + tagName + "</b>",
+                        cancelText: "Cancel",
+                        allowCancel: true,
+                        okCloses: true,
+                        showFooter: true,
+                    }).open();
+                    modal.on('ok', function() {
+                        that.deleteTagData(e);
+                    });
+                    modal.on('closeModal', function() {
+                        modal.trigger('cancel');
+                    });
+                });
+            },
+            deleteTagData: function(e) {
+                var that = this,
+                    tagName = $(e.currentTarget).data("name");
+                require(['models/VTag'], function(VTag) {
+                    var tagModel = new VTag();
+                    tagModel.deleteTag(that.guid, tagName, {
+                        beforeSend: function() {},
+                        success: function(data) {
+                            that.collection.fetch({ reset: true });
+                        },
+                        error: function(error, data, status) {},
+                        complete: function() {}
+                    });
+                });
+            }
+        });
+    return TagDetailTableLayoutView;
+});

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/a5f8c5aa/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
new file mode 100644
index 0000000..42791b9
--- /dev/null
+++ b/dashboardv2/public/js/views/tag/TagLayoutView.js
@@ -0,0 +1,127 @@
+/**
+ * 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/TagLayoutView_tmpl',
+    'collection/VTagList',
+    'utils/Utils',
+], function(require, Backbone, TagLayoutViewTmpl, VTagList, Utils) {
+    'use strict';
+
+    var TagLayoutView = Backbone.Marionette.LayoutView.extend(
+        /** @lends TagLayoutView */
+        {
+            _viewName: 'TagLayoutView',
+
+            template: TagLayoutViewTmpl,
+
+            /** Layout sub regions */
+            regions: {},
+
+            /** ui selector cache */
+            ui: {
+                listTag: "[data-id='listTag']",
+                listType: "[data-id='listType']",
+                tagElement: "[data-id='tags']",
+                referesh: "[data-id='referesh']",
+                searchTag: "[data-id='searchTag']"
+            },
+            /** ui events hash */
+            events: function() {
+                var events = {};
+                events["click " + this.ui.tagElement] = 'onTagClick';
+                events["click " + this.ui.referesh] = 'refereshClick';
+                events["keyup " + this.ui.searchTag] = 'offlineSearchTag';
+                return events;
+            },
+            /**
+             * intialize a new TagLayoutView Layout
+             * @constructs
+             */
+            initialize: function(options) {
+                _.extend(this, _.pick(options, 'globalVent', 'vent'));
+                this.tagCollection = new VTagList();
+                $.extend(this.tagCollection.queryParams, { type: 'TRAIT' });
+                this.typeCollection = new VTagList();
+                $.extend(this.typeCollection.queryParams, { type: 'CLASS' });
+                this.bindEvents();
+
+            },
+            bindEvents: function() {
+                this.listenTo(this.tagCollection, 'reset', function() {
+                    this.tagsAndTypeGenerator('tagCollection', 'listTag');
+                }, this);
+                this.listenTo(this.typeCollection, 'reset', function() {
+                    this.tagsAndTypeGenerator('typeCollection', 'listType');
+                }, this);
+            },
+            onRender: function() {
+                this.fetchCollections();
+            },
+            fetchCollections: function() {
+                this.tagCollection.fetch({ reset: true });
+                this.typeCollection.fetch({ reset: true });
+            },
+            tagsAndTypeGenerator: function(collection, element, searchString) {
+                if (element == "listType") {
+                    var searchType = "dsl";
+                    var icon = "fa fa-cogs"
+                } else {
+                    var searchType = "fulltext";
+                    var icon = "fa fa-tags"
+                }
+                var str = '';
+                _.each(this[collection].fullCollection.models, function(model) {
+                    var tagName = model.get("tags");
+                    if (searchString) {
+                        if (tagName.search(new RegExp(searchString, "i")) != -1) {
+                            str += '<a href="javascript:void(0)" data-id="tags" data-type="' + searchType + '" class="list-group-item"><i class="' + icon + '"></i>' + tagName + '</a>';
+                        } else {
+                            return;
+                        }
+                    } else {
+                        str += '<a href="javascript:void(0)" data-id="tags" data-type="' + searchType + '" class="list-group-item"><i class="' + icon + '"></i>' + tagName + '</a>';
+                    }
+                });
+                this.ui[element].empty().append(str);
+            },
+            onTagClick: function(e) {
+                var data = $(e.currentTarget).data();
+                this.vent.trigger("tag:click", { 'query': e.currentTarget.text, 'searchType': data.type });
+                Utils.setUrl({
+                    url: '#!/dashboard/assetPage',
+                    urlParams: {
+                        query: e.currentTarget.text,
+                        searchType: data.type
+                    },
+                    mergeBrowserUrl: true,
+                    trigger: false
+                });
+            },
+            refereshClick: function() {
+                this.fetchCollections();
+            },
+            offlineSearchTag: function(e) {
+                var type = $(e.currentTarget).data('type');
+                var collectionType = type == "listTag" ? "tagCollection" : "typeCollection";
+                this.tagsAndTypeGenerator(collectionType, type, $(e.currentTarget).val());
+            }
+        });
+    return TagLayoutView;
+});

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/a5f8c5aa/dashboardv2/public/js/views/tag/addTagAttributeItemView.js
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/views/tag/addTagAttributeItemView.js b/dashboardv2/public/js/views/tag/addTagAttributeItemView.js
new file mode 100644
index 0000000..c588ba8
--- /dev/null
+++ b/dashboardv2/public/js/views/tag/addTagAttributeItemView.js
@@ -0,0 +1,69 @@
+/**
+ * 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/addTagAttributeItemView_tmpl',
+
+], function(require, Backbone, addTagAttributeItemViewTmpl) {
+    'use strict';
+
+    return Backbone.Marionette.ItemView.extend(
+        /** @lends GlobalExclusionListView */
+        {
+
+            template: addTagAttributeItemViewTmpl,
+
+            /** Layout sub regions */
+            regions: {},
+
+            /** ui selector cache */
+            ui: {},
+            /** ui events hash */
+            events: {
+                'click #close': 'onCloseButton',
+                'change input': function(e) {
+                    this.saveBtn.removeAttr("disabled");
+                    this.model.set({ name: e.currentTarget.value });
+                },
+                'keypress #attributeId': function(e) {
+                    if (this.$(e.currentTarget).val() == "") {
+                        this.saveBtn.removeAttr("disabled");
+                    }
+                },
+                'keyup #attributeId': function(e) {
+                    if (e.keyCode == 8 && this.$(e.currentTarget).val() == "") {
+                        this.saveBtn.attr("disabled", "true");
+                    }
+                },
+            },
+            /**
+             * intialize a new GlobalExclusionComponentView Layout
+             * @constructs
+             */
+            initialize: function(options) {
+                this.saveBtn = options.saveBtn;
+            },
+            onRender: function() {},
+            bindEvents: function() {},
+            onCloseButton: function() {
+                this.model.destroy();
+                this.saveBtn.removeAttr("disabled");
+            }
+        });
+});

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/a5f8c5aa/dashboardv2/public/js/views/tag/addTagModalView.js
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/views/tag/addTagModalView.js b/dashboardv2/public/js/views/tag/addTagModalView.js
new file mode 100644
index 0000000..d663ae2
--- /dev/null
+++ b/dashboardv2/public/js/views/tag/addTagModalView.js
@@ -0,0 +1,151 @@
+/**
+ * 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/tag/addTagModalView_tmpl',
+    'collection/VTagList',
+    'collection/VCommonList',
+    'modules/Modal',
+    'models/VEntity',
+    'utils/Utils'
+], function(require, addTagModalViewTmpl, VTagList, VCommonList, Modal, VEntity, Utils) {
+    'use strict';
+
+    var AddTagModel = Marionette.LayoutView.extend({
+        template: addTagModalViewTmpl,
+
+        regions: {},
+        ui: {
+            addTagOptions: "[data-id='addTagOptions']",
+            tagAttribute: "[data-id='tagAttribute']"
+        },
+        events: {
+            'change #addTagID': 'onChangeTagDefination'
+
+        },
+        /**
+         * intialize a new AddTagModel Layout
+         * @constructs
+         */
+        initialize: function(options) {
+            var that = this;
+            _.extend(this, _.pick(options, 'vent', 'modalCollection', 'guid'));
+            this.collection = new VTagList();
+            this.commonCollection = new VCommonList();
+            var modal = new Modal({
+                title: 'Add Tag',
+                content: this,
+                okText: 'Save',
+                cancelText: "Cancel",
+                allowCancel: true,
+            }).open();
+
+            this.on('ok', function() {
+                that.saveTagData();
+            });
+            this.on('closeModal', function() {
+                modal.trigger('cancel');
+            });
+            this.bindEvents();
+        },
+
+        onRender: function() {
+            $.extend(this.collection.queryParams, { type: 'TRAIT' });
+            this.collection.fetch({ reset: true });
+        },
+        bindEvents: function() {
+            this.listenTo(this.collection, 'reset', function() {
+                this.tagsCollection();
+            }, this);
+            this.listenTo(this.commonCollection, 'reset', function() {
+                this.subAttributeData();
+            }, this);
+        },
+        tagsCollection: function() {
+            for (var i = 0; i < this.collection.fullCollection.models.length; i++) {
+                var tags = this.collection.fullCollection.models[i].get("tags");
+                var str = '<option>' + tags + '</option>';
+                this.ui.addTagOptions.append(str);
+            }
+        },
+        onChangeTagDefination: function() {
+            this.ui.tagAttribute.empty();
+            var tagname = this.ui.addTagOptions.val();
+            this.fetchTagSubData(tagname);
+        },
+        fetchTagSubData: function(tagname) {
+            this.commonCollection.url = "/api/atlas/types/" + tagname;
+            this.commonCollection.modelAttrName = 'definition';
+            this.commonCollection.fetch({ reset: true });
+        },
+        subAttributeData: function() {
+            if (this.commonCollection.models[0] && this.commonCollection.models[0].attributes && this.commonCollection.models[0].attributes.traitTypes[0].attributeDefinitions) {
+                for (var i = 0; i < this.commonCollection.models[0].attributes.traitTypes[0].attributeDefinitions.length; i++) {
+                    var attribute = this.commonCollection.models[0].attributes.traitTypes[0].attributeDefinitions;
+                    this.ui.tagAttribute.show();
+                    this.strAttribute = '<label class="control-label col-sm-4 ng-binding">' + attribute[i].name + '</label>' +
+                        '<div class="col-sm-8 input-spacing">' +
+                        '<input type="text" class="form-control attributeInputVal attrName" data-key="' + attribute[i].name + '" ></input></div>';
+                    this.ui.tagAttribute.append(this.strAttribute);
+                    if (this.commonCollection.models[0].attributes.traitTypes[0].superTypes.length > 0) {
+                        for (var j = 0; j < this.commonCollection.models[0].attributes.traitTypes[0].superTypes.length; j++) {
+                            var superTypeAttr = this.commonCollection.models[0].attributes.traitTypes[0].superTypes[j];
+                            this.fetchTagSubData(superTypeAttr);
+                        }
+                    }
+                }
+            }
+        },
+        saveTagData: function() {
+            var that = this,
+                values = {};
+            this.entityModel = new VEntity();
+            var names = this.$(".attrName");
+            names.each(function(i, item) {
+                var selection = $(item).data("key");
+                values[selection] = $(item).val();
+            });
+            var tagName = this.ui.addTagOptions.val();
+            var json = {
+                "jsonClass": "org.apache.atlas.typesystem.json.InstanceSerialization$_Struct",
+                "typeName": tagName,
+                "values": values
+            };
+            that.entityModel.saveEntity(that.guid, {
+                data: JSON.stringify(json),
+                beforeSend: function() {},
+                success: function(data) {
+                    that.modalCollection.fetch({ reset: true });
+                    Utils.notifySuccess({
+                        content: "Tag " + tagName + " has been added to entity"
+                    });
+                },
+                error: function(error, data, status) {
+                    if (error && error.responseText) {
+                        var data = JSON.parse(error.responseText);
+                        Utils.notifyError({
+                            content: data.error
+                        });
+                    }
+                },
+                complete: function() {}
+            });
+        },
+    });
+    return AddTagModel;
+});

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/a5f8c5aa/dashboardv2/public/js/views/tag/createTagsLayoutView.js
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/views/tag/createTagsLayoutView.js b/dashboardv2/public/js/views/tag/createTagsLayoutView.js
new file mode 100644
index 0000000..5d93eee
--- /dev/null
+++ b/dashboardv2/public/js/views/tag/createTagsLayoutView.js
@@ -0,0 +1,154 @@
+/**
+ * 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',
+    'views/tag/addTagAttributeItemView',
+    'utils/Utils'
+], function(require, Backbone, createTagLayoutViewTmpl, addTagAttributeItemView, Utils) {
+    'use strict';
+
+    var CreateTagView = Marionette.CompositeView.extend({
+        template: createTagLayoutViewTmpl,
+        regions: {},
+
+        childView: addTagAttributeItemView,
+
+        childViewContainer: "div[data-id='addAttributeDiv']",
+
+        childViewOptions: function() {
+            return {
+                saveBtn: this.ui.saveButton
+            };
+        },
+        /** ui selector cache */
+        ui: {
+            parentTag: "[data-id='parentTag']",
+            addAttrBtn: "[data-id='addAttrBtn']",
+            refreshBtn: "[data-id='refreshBtn']",
+            typeName: "[data-id='typeName']",
+            saveButton: "[data-id='saveButton']"
+        },
+        events: function() {
+            var events = {},
+                that = this;
+            events["click " + this.ui.refreshBtn] = 'onRefreshClick';
+            events["click " + this.ui.addAttrBtn] = 'onAddAttribute';
+            events["keypress " + this.ui.typeName] = 'onTypeName';
+            events["keyup " + this.ui.typeName] = 'onBackSpceName';
+            events["click " + this.ui.saveButton] = 'onSaveButton';
+            return events;
+        },
+        /**
+         * intialize a new createTagLayoutView_tmpl Layout
+         * @constructs
+         */
+        initialize: function(options) {
+            _.extend(this, _.pick(options, 'globalVent', 'tagsCollection'));
+            this.collection = new Backbone.Collection();
+            this.bindEvents();
+            this.json = {
+                "enumTypes": [],
+                "traitTypes": [],
+                "structTypes": [],
+                "classTypes": []
+            };
+        },
+        bindEvents: function() {
+            this.listenTo(this.tagsCollection, 'reset', function() {
+                this.tagsCollectionList();
+            }, this);
+        },
+        onRender: function() {
+            this.fetchCollection();
+        },
+        tagsCollectionList: function() {
+            this.ui.parentTag.empty();
+            for (var i = 0; i < this.tagsCollection.fullCollection.models.length; i++) {
+                var tags = this.tagsCollection.fullCollection.models[i].get("tags");
+                var str = '<option>' + tags + '</option>';
+                this.ui.parentTag.append(str);
+            }
+        },
+        fetchCollection: function() {
+            $.extend(this.tagsCollection.queryParams, { type: 'TRAIT' });
+            this.tagsCollection.fetch({ reset: true });
+        },
+        onRefreshClick: function() {
+            this.fetchCollection();
+        },
+        onAddAttribute: function(e) {
+            e.preventDefault();
+            this.collection.add(new Backbone.Model({
+                "dataTypeName": "string",
+                "multiplicity": "optional",
+                "isComposite": false,
+                "isUnique": false,
+                "isIndexable": true,
+                "reverseAttributeName": null
+            }));
+            if (this.ui.addAttrBtn.val() == "") {
+                this.ui.saveButton.attr("disabled", "true");
+            }
+        },
+        onTypeName: function() {
+            if (this.ui.typeName.val() == "") {
+                this.ui.saveButton.removeAttr("disabled");
+                this.ui.addAttrBtn.removeAttr("disabled");
+            }
+        },
+        onBackSpceName: function(e) {
+            if (e.keyCode == 8 && this.ui.typeName.val() == "") {
+                this.ui.saveButton.attr("disabled", "true");
+                this.ui.addAttrBtn.attr("disabled", "true");
+            }
+        },
+        onSaveButton: function() {
+            var that = this;
+            this.name = this.ui.typeName.val();
+            this.json.traitTypes[0] = {
+                attributeDefinitions: this.collection.toJSON(),
+                typeName: this.name,
+                typeDescription: null,
+                superTypes: this.ui.parentTag.val(),
+                hierarchicalMetaTypeName: "org.apache.atlas.typesystem.types.TraitType"
+            };
+            new this.tagsCollection.model().set(this.json).save(null, {
+                success: function(model, response) {
+                    that.fetchCollection();
+                    that.ui.typeName.val("");
+                    that.ui.saveButton.attr("disabled", "true");
+                    Utils.notifySuccess({
+                        content: that.name + "  has been created"
+                    });
+                    that.collection.reset();
+
+                },
+                error: function(model, response) {
+                    if (response.responseJSON && response.responseJSON.error) {
+                        Utils.notifyError({
+                            content: response.responseJSON.error
+                        });
+                    }
+                }
+            });
+        }
+    });
+    return CreateTagView;
+});

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/a5f8c5aa/pom.xml
----------------------------------------------------------------------
diff --git a/pom.xml b/pom.xml
index 03828e9..35ec380 100755
--- a/pom.xml
+++ b/pom.xml
@@ -334,6 +334,7 @@
         <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
         <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
         <node.version>v0.10.30</node.version>
+        <node-for-v2.version>v4.4.2</node-for-v2.version>
         <slf4j.version>1.7.7</slf4j.version>
         <jetty.version>9.2.12.v20150709</jetty.version>
         <jersey.version>1.19</jersey.version>
@@ -432,6 +433,7 @@
         <module>titan</module>
         <module>repository</module>
         <module>dashboard</module>
+        <!-- <module>dashboardv2</module> -->
         <module>webapp</module>
         <module>docs</module>
         <module>addons/hdfs-model</module>
@@ -1018,6 +1020,13 @@
 
             <dependency>
                 <groupId>org.apache.atlas</groupId>
+                <artifactId>atlas-dashboardv2</artifactId>
+                <version>${project.version}</version>
+                <type>war</type>
+            </dependency>
+
+            <dependency>
+                <groupId>org.apache.atlas</groupId>
                 <artifactId>atlas-webapp</artifactId>
                 <version>${project.version}</version>
                 <type>war</type>
@@ -1617,6 +1626,15 @@
                         <exclude>*.json</exclude>
                         <exclude>**/overlays/**</exclude>
                         <exclude>dev-support/**</exclude>
+			<exclude>**/public/css/animate.min.css</exclude>
+			<exclude>**/public/css/fonts/**</exclude>
+			<exclude>**/public/css/font-awesome.min.css</exclude>
+			<exclude>**/public/js/require-handlebars-plugin/**</exclude>
+			<exclude>**/node_modules/**</exclude>
+			<!-- All the npm plugins are copied here, so exclude it -->
+			<exclude>**/public/js/libs/**</exclude>
+  
+
                     </excludes>
                 </configuration>
                 <executions>

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/a5f8c5aa/release-log.txt
----------------------------------------------------------------------
diff --git a/release-log.txt b/release-log.txt
index caa670e..4b02f34 100644
--- a/release-log.txt
+++ b/release-log.txt
@@ -14,6 +14,7 @@ ATLAS-409 Atlas will not import avro tables with schema read from a file (dosset
 ATLAS-379 Create sqoop and falcon metadata addons (venkatnrangan,bvellanki,sowmyaramesh via shwethags)
 
 ALL CHANGES:
+ATLAS-582 Move Atlas UI to use backboneJS (kevalbhatt18 via shwethags)
 ATLAS-540 API to retrieve entity version events (shwethags)
 ATLAS-529 support drop database (sumasai)
 ATLAS-528 Support drop table,view (sumasai)

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/a5f8c5aa/webapp/pom.xml
----------------------------------------------------------------------
diff --git a/webapp/pom.xml b/webapp/pom.xml
index 85c9471..45953e3 100755
--- a/webapp/pom.xml
+++ b/webapp/pom.xml
@@ -235,6 +235,12 @@
             <artifactId>atlas-dashboard</artifactId>
             <type>war</type>
         </dependency>
+
+       <!-- <dependency>
+            <groupId>org.apache.atlas</groupId>
+            <artifactId>atlas-dashboardv2</artifactId>
+            <type>war</type>
+        </dependency> -->
     </dependencies>
 
     <build>
@@ -249,6 +255,10 @@
                             <groupId>org.apache.atlas</groupId>
                             <artifactId>atlas-dashboard</artifactId>
                         </overlay>
+                        <!-- <overlay>
+                            <groupId>org.apache.atlas</groupId>
+                            <artifactId>atlas-dashboardv2</artifactId>
+                        </overlay> -->
 		        <overlay>
 		             <!-- empty groupId/artifactId represents the current build -->
             		</overlay>


Mime
View raw message