You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@atlas.apache.org by yh...@apache.org on 2016/05/19 17:45:58 UTC

[1/5] incubator-atlas git commit: ATLAS-802 New look UI to show Business Catalog functionalities (kevalbhatt18 via yhemanth)

Repository: incubator-atlas
Updated Branches:
  refs/heads/master a05107a07 -> 440bd2ae4


http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/js/views/tag/TagLayoutView.js
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/views/tag/TagLayoutView.js b/dashboardv2/public/js/views/tag/TagLayoutView.js
index 4a40f4a..a89c692 100644
--- a/dashboardv2/public/js/views/tag/TagLayoutView.js
+++ b/dashboardv2/public/js/views/tag/TagLayoutView.js
@@ -20,8 +20,9 @@ define(['require',
     'backbone',
     'hbs!tmpl/tag/TagLayoutView_tmpl',
     'collection/VTagList',
+    'collection/VEntityList',
     'utils/Utils',
-], function(require, Backbone, TagLayoutViewTmpl, VTagList, Utils) {
+], function(require, Backbone, TagLayoutViewTmpl, VTagList, VEntityList, Utils) {
     'use strict';
 
     var TagLayoutView = Backbone.Marionette.LayoutView.extend(
@@ -36,18 +37,24 @@ define(['require',
 
             /** ui selector cache */
             ui: {
-                listTag: "[data-id='listTag']",
-                listType: "[data-id='listType']",
-                tagElement: "[data-id='tags']",
-                referesh: "[data-id='referesh']",
-                searchTag: "[data-id='searchTag']"
+                tagsParent: "[data-id='tagsParent']",
+                createTag: "[data-id='createTag']",
+                tags: "[data-id='tags']",
+                offLineSearchTag: "[data-id='offlineSearchTag']",
+                deleteTerm: "[data-id='deleteTerm']",
+
             },
             /** 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';
+                events["click " + this.ui.createTag] = 'onClickCreateTag';
+                /* events["dblclick " + this.ui.tags] = function(e) {
+                     this.onTagList(e, true);
+                 }*/
+                events["click " + this.ui.tags] = 'onTagList';
+                    // events["click " + this.ui.referesh] = 'refereshClick';
+                events["keyup " + this.ui.offLineSearchTag] = 'offlineSearchTag';
+                events["click " + this.ui.deleteTerm] = 'onDeleteTerm';
                 return events;
             },
             /**
@@ -55,72 +62,218 @@ define(['require',
              * @constructs
              */
             initialize: function(options) {
-                _.extend(this, _.pick(options, 'globalVent', 'vent'));
+                _.extend(this, _.pick(options, 'globalVent', 'tag'));
                 this.tagCollection = new VTagList();
-                $.extend(this.tagCollection.queryParams, { type: 'TRAIT' });
-                this.typeCollection = new VTagList();
-                $.extend(this.typeCollection.queryParams, { type: 'CLASS' });
-                this.bindEvents();
+                this.collection = new Backbone.Collection();
 
+                this.json = {
+                    "enumTypes": [],
+                    "traitTypes": [],
+                    "structTypes": [],
+                    "classTypes": []
+                };
             },
             bindEvents: function() {
-                this.listenTo(this.tagCollection, 'reset', function() {
-                    this.tagsAndTypeGenerator('tagCollection', 'listTag');
-                }, this);
-                this.listenTo(this.typeCollection, 'reset', function() {
-                    this.tagsAndTypeGenerator('typeCollection', 'listType');
+                var that = this;
+                this.listenTo(this.tagCollection, "reset", function() {
+                    this.tagsAndTypeGenerator('tagCollection');
+                    this.createTagAction();
                 }, this);
+                this.ui.tagsParent.on('click', 'li.parent-node a', function() {
+                    that.setUrl(this.getAttribute("href"));
+                });
             },
             onRender: function() {
+                var that = this;
+                this.bindEvents();
                 this.fetchCollections();
+                $('body').on("click", '.tagPopoverList li', function(e) {
+                    that[$(this).find("a").data('fn')](e);
+                });
+                $('body').click(function(e) {
+                    if ($('.tagPopoverList').length) {
+                        if ($(e.target).hasClass('tagPopover')) {
+                            return;
+                        }
+                        that.$('.tagPopover').popover('hide');
+                    }
+                });
             },
             fetchCollections: function() {
+                $.extend(this.tagCollection.queryParams, { type: 'TRAIT', });
                 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";
+            manualRender: function(tagName) {
+                this.setValues(tagName);
+            },
+            setValues: function(tagName) {
+                if (Utils.getUrlState.isTagTab() || Utils.getUrlState.isInitial()) {
+                    if (!this.tag && !tagName) {
+                        this.selectFirst = false;
+                        this.ui.tagsParent.find('li').first().addClass('active');
+                        Utils.setUrl({
+                            url: this.ui.tagsParent.find('li a').first().attr("href"),
+                            mergeBrowserUrl: false,
+                            trigger: true
+                        });
+                    } else {
+                        var tag = Utils.getUrlState.getLastValue();
+                        if (tagName) {
+                            tag = tagName;
+                        } else if (this.tag) {
+                            tag = this.tag;
+                        }
+                        this.ui.tagsParent.find('li').removeClass('active');
+                        this.ui.tagsParent.find('li').filter(function() {
+                            return $(this).text() === tag;
+                        }).addClass('active');
+                    }
                 }
-                var str = '';
+            },
+            tagsAndTypeGenerator: function(collection, searchString) {
+                var that = this,
+                    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>';
+                            str = '<li class="parent-node" data-id="tags"><div class="tools"><i class="fa fa-trash-o" data-id="deleteTerm"></i></div><a href="#!/tag/tagAttribute/' + tagName + '">' + tagName + '</a></li>' + str;
                         } 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>';
+                        //str = '<li class="parent-node" data-id="tags"><div class="tools"><i class="fa fa-trash-o" data-id="deleteTerm"></i></div><a href="#!/tag/tagAttribute/' + tagName + '">' + tagName + '</a></li>' + str;
+                        str = '<li class="parent-node" data-id="tags"><div class="tools"><i class="fa fa-ellipsis-h tagPopover"></i></div><a href="#!/tag/tagAttribute/' + tagName + '">' + tagName + '</a></li>' + str;
                     }
                 });
-                this.ui[element].empty().append(str);
+                this.ui.tagsParent.empty().html(str);
+                this.setValues();
+
             },
-            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
+
+            onClickCreateTag: function(e) {
+                var that = this;
+                $(e.currentTarget).blur();
+                require([
+                    'views/tag/CreateTagLayoutView',
+                    'modules/Modal'
+                ], function(CreateTagLayoutView, Modal) {
+                    var view = new CreateTagLayoutView({ 'tagCollection': that.tagCollection });
+                    var modal = new Modal({
+                        title: 'Create a new tag',
+                        content: view,
+                        cancelText: "Cancel",
+                        okText: 'Create',
+                        allowCancel: true,
+                    }).open();
+                    modal.$el.find('button.ok').attr("disabled", "true");
+                    view.ui.tagName.on('keyup', function(e) {
+                        modal.$el.find('button.ok').removeAttr("disabled");
+                    });
+                    view.ui.tagName.on('keyup', function(e) {
+                        if (e.keyCode == 8 && e.currentTarget.value == "") {
+                            modal.$el.find('button.ok').attr("disabled", "true");
+                        }
+                    });
+                    modal.on('ok', function() {
+                        that.onCreateButton(view);
+                    });
+                    modal.on('closeModal', function() {
+                        modal.trigger('cancel');
+                    });
+                });
+            },
+            onCreateButton: function(ref) {
+                var that = this;
+                this.name = ref.ui.tagName.val();
+
+                if (ref.ui.parentTag.val().length <= 1 && ref.ui.parentTag.val()[0] == "") {
+                    var superTypes = [];
+                } else {
+                    var superTypes = ref.ui.parentTag.val();
+                }
+                this.json.traitTypes[0] = {
+                    attributeDefinitions: this.collection.toJSON(),
+                    typeName: this.name,
+                    typeDescription: null,
+                    superTypes: superTypes,
+                    hierarchicalMetaTypeName: "org.apache.atlas.typesystem.types.TraitType"
+                };
+                new this.tagCollection.model().set(this.json).save(null, {
+                    success: function(model, response) {
+                        that.fetchCollections();
+                        that.setUrl('#!/tag/tagAttribute/' + ref.ui.tagName.val());
+                        Utils.notifySuccess({
+                            content: that.name + "  has been created"
+                        });
+                        that.collection.reset([]);
                     },
-                    mergeBrowserUrl: true,
-                    trigger: false
+                    error: function(model, response) {
+                        if (response.responseJSON && response.responseJSON.error) {
+                            Utils.notifyError({
+                                content: response.responseJSON.error
+                            });
+                        }
+                    }
                 });
             },
-            refereshClick: function() {
-                this.fetchCollections();
+
+            setUrl: function(url) {
+                Utils.setUrl({
+                    url: url,
+                    mergeBrowserUrl: false,
+                    trigger: true,
+                    updateTabState: function() {
+                        return { tagUrl: this.url, stateChanged: true };
+                    }
+                });
+            },
+            onTagList: function(e, toggle) {
+                /*if (toggle) {
+                    var assetUl = $(e.currentTarget).siblings('.tagAsset')
+                    assetUl.slideToggle("slow");
+                }*/
+                this.ui.tagsParent.find('li').removeClass("active");
+                $(e.currentTarget).addClass("active");
             },
             offlineSearchTag: function(e) {
                 var type = $(e.currentTarget).data('type');
-                var collectionType = type == "listTag" ? "tagCollection" : "typeCollection";
-                this.tagsAndTypeGenerator(collectionType, type, $(e.currentTarget).val());
+                this.tagsAndTypeGenerator('tagCollection', $(e.currentTarget).val());
+            },
+            createTagAction: function() {
+                var that = this;
+                this.$('.tagPopover').popover({
+                    placement: 'bottom',
+                    html: true,
+                    trigger: 'manual',
+                    container: 'body',
+                    content: function() {
+                        return "<ul class='tagPopoverList'>" +
+                            "<li class='listTerm' ><i class='fa fa-search'></i> <a href='javascript:void(0)' data-fn='onSearchTerm'>Search Tag</a></li>" +
+                            "</ul>";
+                    }
+                });
+                this.$('.tagPopover').off('click').on('click', function(e) {
+                    // if any other popovers are visible, hide them
+                    e.preventDefault();
+                    that.$('.tagPopover').not(this).popover('hide');
+                    $(this).popover('toggle');
+                });
+            },
+            onSearchTerm: function() {
+                Utils.setUrl({
+                    url: '#!/search/searchResult',
+                    urlParams: {
+                        query:  this.ui.tagsParent.find('li.active').find("a").text(),
+                        searchType: "fulltext",
+                        dslChecked: false
+                    },
+                    updateTabState: function() {
+                        return { searchUrl: this.url, stateChanged: true };
+                    },
+                    mergeBrowserUrl: false,
+                    trigger: true
+                });
             }
         });
     return TagLayoutView;

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/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
deleted file mode 100644
index c588ba8..0000000
--- a/dashboardv2/public/js/views/tag/addTagAttributeItemView.js
+++ /dev/null
@@ -1,69 +0,0 @@
-/**
- * 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/440bd2ae/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
index 546df22..2591a3f 100644
--- a/dashboardv2/public/js/views/tag/addTagModalView.js
+++ b/dashboardv2/public/js/views/tag/addTagModalView.js
@@ -23,11 +23,11 @@ define(['require',
     'modules/Modal',
     'models/VEntity',
     'utils/Utils'
-], function(require, addTagModalViewTmpl, VTagList, VCommonList, Modal, VEntity, Utils) {
+], function(require, AddTagModalViewTmpl, VTagList, VCommonList, Modal, VEntity, Utils) {
     'use strict';
 
     var AddTagModel = Marionette.LayoutView.extend({
-        template: addTagModalViewTmpl,
+        template: AddTagModalViewTmpl,
 
         regions: {},
         ui: {
@@ -55,8 +55,8 @@ define(['require',
                 cancelText: "Cancel",
                 allowCancel: true,
             }).open();
-            var saveBtn = this.modal.$el.find('.btn-success');
-            saveBtn[0].setAttribute('disabled', true);
+            // var saveBtn = this.modal.$el.find('.btn-atlas');
+            // saveBtn[0].setAttribute('disabled', true);
             this.on('ok', function() {
                 that.saveTagData();
             });
@@ -107,11 +107,11 @@ define(['require',
                         '<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);
-                        }
+                }
+                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);
                     }
                 }
             }
@@ -137,18 +137,16 @@ define(['require',
                 success: function(data) {
                     that.modalCollection.fetch({ reset: true });
                     Utils.notifySuccess({
-                        content: "Tag " + tagName + " has been added successfully"
+                        content: "Tag " + tagName + " has been added to entity"
                     });
                 },
                 error: function(error, data, status) {
-                    var message = "Tag " + tagName + " could not be added";
                     if (error && error.responseText) {
                         var data = JSON.parse(error.responseText);
-                        message = data.error;
+                        Utils.notifyError({
+                            content: data.error
+                        });
                     }
-                    Utils.notifyError({
-                        content: message
-                    });
                 },
                 complete: function() {}
             });

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/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
deleted file mode 100644
index 95ac2b1..0000000
--- a/dashboardv2/public/js/views/tag/createTagsLayoutView.js
+++ /dev/null
@@ -1,153 +0,0 @@
-/**
- * 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/440bd2ae/pom.xml
----------------------------------------------------------------------
diff --git a/pom.xml b/pom.xml
index 30fb95a..685eb7d 100755
--- a/pom.xml
+++ b/pom.xml
@@ -1670,6 +1670,7 @@
                         <exclude>**/public/css/font-awesome.min.css</exclude>
                         <exclude>**/public/js/require-handlebars-plugin/**</exclude>
                         <exclude>**/node_modules/**</exclude>
+                        <exclude>**/public/css/scss/**</exclude>
                         <!-- All the npm plugins are copied here, so exclude it -->
                         <exclude>**/public/js/libs/**</exclude>
 

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/release-log.txt
----------------------------------------------------------------------
diff --git a/release-log.txt b/release-log.txt
index 6e73a39..c44ad0b 100644
--- a/release-log.txt
+++ b/release-log.txt
@@ -21,6 +21,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-802 New look UI to show Business Catalog functionalities (kevalbhatt18 via yhemanth)
 ATLAS-658 Improve Lineage with Backbone porting (kevalbhatt18 via yhemanth)
 ATLAS-491 Business Catalog / Taxonomy (jspeidel via yhemanth)
 ATLAS-713 Entity lineage based on entity id (shwethags)


[4/5] incubator-atlas git commit: ATLAS-802 New look UI to show Business Catalog functionalities (kevalbhatt18 via yhemanth)

Posted by yh...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/css/style.css
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/style.css b/dashboardv2/public/css/style.css
deleted file mode 100644
index 40255ad..0000000
--- a/dashboardv2/public/css/style.css
+++ /dev/null
@@ -1,773 +0,0 @@
-/*
- * 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.
- */
-
-html {
-    min-height: 100%;
-    position: relative;
-}
-
-body {
-    font-family: 'PT Sans', sans-serif;
-    background-color: #e8ebf1;
-    -webkit-font-smoothing: antialiased;
-}
-
-.initialLoading {
-    display: block;
-    margin: auto;
-    margin-top: 18%;
-    height: 60px;
-}
-
-
-/* Bootstrap Extended */
-
-.row-margin-bottom {
-    margin-bottom: 15px;
-}
-
-.navbar-brand {
-    /* font-family: 'Yeseva One', cursive;*/
-    font-size: 30px;
-    height: auto;
-}
-
-.navbar-toggle .icon-bar {
-    background-color: #fff;
-}
-
-.navbar-fixed-top + .wrapper {
-    margin-top: 90px;
-    padding-bottom: 90px;
-}
-
-.navbar-form {
-    width: 30%;
-    padding: 0;
-}
-
-.navbar-form .form-control {
-    width: 100%;
-    padding: 6px 0px;
-    background-color: transparent;
-    color: #fff;
-    border: none;
-    box-shadow: 0px 2px #fff;
-}
-
-.form-control {
-    border-radius: 0px;
-}
-
-.form-control:focus {
-    border-color: #8FA5B1;
-    outline: 0;
-    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 2px rgb(143, 165, 177);
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 2px rgb(143, 165, 177);
-}
-
-.input-group-btn .glyphicon {
-    top: 2px;
-}
-
-.panel {
-    border-radius: 0px;
-}
-
-.panel-primary {
-    border-color: #698797;
-}
-
-.panel-primary>.panel-heading {
-    color: #fff;
-    background-color: #698797;
-    border-color: #698797;
-    border-radius: 0px;
-}
-
-.list-group-item:first-child,
-.list-group-item:last-child {
-    border-radius: 0px;
-}
-
-.pagination>.active>a,
-.pagination>.active>a:focus,
-.pagination>.active>a:hover,
-.pagination>.active>span,
-.pagination>.active>span:focus,
-.pagination>.active>span:hover {
-    background-color: #1BA9E2;
-    border-color: #1BA9E2;
-}
-
-
-/* Bootstrap Buttons */
-
-.btn {
-    border-radius: 0px;
-}
-
-.btn-primary {
-    color: #fff;
-    background-color: #44697d;
-    border-color: #44697d
-}
-
-.btn-primary:hover {
-    color: #fff;
-    background-color: #334f5e;
-    border-color: #334f5e;
-}
-
-.btn-success {
-    color: #fff;
-    background-color: #359F89;
-    border-color: #359F89;
-}
-
-.btn-success:hover {
-    color: #fff;
-    background-color: #359F89;
-    border-color: #359F89
-}
-
-.btn-info {
-    color: #fff;
-    background-color: #3cb5e6;
-    border-color: #3cb5e6
-}
-
-.btn-info:hover {
-    color: #fff;
-    background-color: #339cc7;
-    border-color: #339cc7
-}
-
-.btn-warning {
-    color: #fff;
-    background-color: #f5a700;
-    border-color: #f5a700
-}
-
-.btn-warning:hover {
-    color: #fff;
-    background-color: #de9800;
-    border-color: #de9800
-}
-
-.btn-danger {
-    color: #fff;
-    background-color: #e14f00;
-    border-color: #e14f00
-}
-
-.btn-danger:hover {
-    color: #fff;
-    background-color: #c74600;
-    border-color: #c74600
-}
-
-.tabs {
-    position: relative;
-    height: 42px;
-    background-color: #FFF;
-    width: 100%;
-    white-space: nowrap;
-    padding: 0px;
-    border-bottom: 1px solid #e9ecf2;
-}
-
-.tabs li.tab {
-    display: block;
-    float: left;
-    text-align: center;
-    background-color: #fff;
-    line-height: 42px;
-    height: 42px;
-    padding: 0 20px;
-    margin: 0;
-    text-transform: uppercase;
-    letter-spacing: 0.8px;
-    border-bottom: 1px solid #e9ecf2;
-}
-
-.tabs li.tab a {
-    color: #ee6e73;
-    display: block;
-    text-decoration: none;
-    width: 100%;
-    height: 100%;
-    -webkit-transition: color 0.28s ease;
-    -moz-transition: color 0.28s ease;
-    -o-transition: color 0.28s ease;
-    -ms-transition: color 0.28s ease;
-    transition: color 0.28s ease;
-    color: #9398a0;
-}
-
-.tabs li.tab a:hover {
-    color: #26530c;
-}
-
-.tabs li.tab a.active {
-    color: #1BA9E2;
-}
-
-.tabs .indicator {
-    position: absolute;
-    bottom: 0;
-    height: 2px;
-    background-color: #1BA9E2;
-    will-change: left, right;
-}
-
-ul.tabs li.tab {
-    padding: 0;
-}
-
-
-/* Atlas Specific */
-
-.navbar-atlas {
-    background-color: #323544;
-    box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
-    -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
-    -moz-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
-}
-
-.navbar-atlas .navbar-brand {
-    color: #fff;
-}
-
-.navbar-atlas .nav>li>a {
-    color: #fff;
-    padding-top: 18px;
-    padding-bottom: 18px;
-    font-size: 100%;
-}
-
-.navbar-atlas .nav>li>a:focus,
-.navbar-atlas .nav>li>a:hover {
-    background-color: transparent;
-}
-
-.graph-bg svg {
-    background-image: linear-gradient(to right, #000 -10px, rgba(0, 0, 0, 0) 1px), linear-gradient(#000 -10px, #ECECEC 1px);
-    background-size: 10px 10px;
-    position: relative;
-}
-
-.card {
-    background: #FFF none repeat scroll 0% 0%;
-    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
-    margin-bottom: 30px;
-}
-
-
-/*create tags*/
-
-.h160 {
-    height: 160px !important;
-}
-
-.inputs button.addAttr {
-    background-color: #ff8e00;
-}
-
-.inputs button.addAttr,
-.inputs button.saveAttr {
-    height: 40px;
-    border-radius: 4px;
-    border: 1px solid #FFFFFF;
-    color: #fff;
-    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
-    font-weight: bold;
-}
-
-.inputs input {
-    height: 50px;
-    border-radius: 0px;
-    border: 1px solid #e3e3e3;
-    color: #414141;
-    box-shadow: none;
-}
-
-.inputs button.remove {
-    position: absolute;
-    right: 28px;
-    bottom: 12px;
-    color: #FFFFFF;
-    border: 0;
-    border-radius: 4px;
-    background-color: #a94442;
-}
-
-.inputs .control-label {
-    padding: 15px;
-    padding-top: 15px !important;
-    color: #333;
-}
-
-
-/*About Atlas*/
-
-.subContent {
-    width: 580px;
-}
-
-
-/*add tag model*/
-
-.input-spacing {
-    padding-bottom: 10px!important;
-}
-
-.modalHeight {
-    height: 50px;
-}
-
-.fa-spin-custom,
-.glyphicon-spin {
-    -webkit-animation: spin 1000ms infinite linear;
-    animation: spin 1000ms infinite linear;
-}
-
-@-webkit-keyframes spin {
-    0% {
-        -webkit-transform: rotate(0deg);
-        transform: rotate(0deg);
-    }
-    100% {
-        -webkit-transform: rotate(359deg);
-        transform: rotate(359deg);
-    }
-}
-
-@keyframes spin {
-    0% {
-        -webkit-transform: rotate(0deg);
-        transform: rotate(0deg);
-    }
-    100% {
-        -webkit-transform: rotate(359deg);
-        transform: rotate(359deg);
-    }
-}
-
-.loader {
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    text-align: center;
-    z-index: 9;
-    background: rgba(255, 255, 255, 0.8) url('../img/loading.gif') no-repeat center center;
-}
-
-.fontLoader {
-    text-align: center;
-    display: none;
-}
-
-.headerDroupDown {
-    border-left: 1px solid #FFF;
-    font-size: 11px;
-    padding-left: 15px;
-    margin-left: 15px;
-}
-
-.circle {
-    position: absolute;
-    top: -3px;
-    right: -2px;
-    width: 12px;
-    height: 12px;
-    background: #4A90E2;
-    border: 2px solid #323544;
-    border-radius: 16px;
-}
-
-.switch {
-    float: left;
-    margin-top: 4px;
-    position: absolute;
-    z-index: 99;
-    top: 0;
-    left: 20px;
-    height: 26px;
-    width: 120px;
-    background: #DADADA;
-    border-radius: 3px;
-    -webkit-box-shadow: inset 0 1px 3px #545454, 0 1px #FFF;
-    box-shadow: inset 0 1px 3px #545454, 0 1px #FFF;
-    /* -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
-    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);*/
-}
-
-.switch-label {
-    position: relative;
-    z-index: 2;
-    float: left;
-    width: 58px;
-    line-height: 26px;
-    font-size: 11px;
-    /*color: rgba(255, 255, 255, 0.35);*/
-    text-align: center;
-    /*text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);*/
-    cursor: pointer;
-}
-
-.switch-label:active {
-    font-weight: bold;
-}
-
-.switch-label-off {
-    padding-left: 2px;
-}
-
-.switch-label-on {
-    padding-right: 2px;
-}
-
-.switch-input {
-    display: none;
-}
-
-.switch-input:checked + .switch-label {
-    font-weight: bold;
-    color: rgba(0, 0, 0, 0.65);
-    text-shadow: 0 1px rgba(255, 255, 255, 0.25);
-    -webkit-transition: 0.15s ease-out;
-    -moz-transition: 0.15s ease-out;
-    -o-transition: 0.15s ease-out;
-    transition: 0.15s ease-out;
-}
-
-.switch-input:checked + .switch-label-on ~ .switch-selection {
-    /* Note: left: 50% doesn't transition in WebKit */
-    left: 60px;
-}
-
-.switch-selection {
-    display: block;
-    position: absolute;
-    z-index: 1;
-    top: 2px;
-    left: 2px;
-    width: 58px;
-    height: 22px;
-    background: #65bd63;
-    border-radius: 3px;
-    background-image: linear-gradient(to bottom, #A7CEC6, #359F89);
-    background-image: -moz-linear-gradient(top, #A7CEC6, #359F89);
-    background-image: -o-linear-gradient(top, #A7CEC6, #359F89);
-    background-image: linear-gradient(to bottom, #A7CEC6, #359F89);
-    /*   background-image: -webkit-linear-gradient(top, #9dd993, #65bd63);
-    background-image: -moz-linear-gradient(top, #9dd993, #65bd63);
-    background-image: -o-linear-gradient(top, #9dd993, #65bd63);
-    background-image: linear-gradient(to bottom, #9dd993, #65bd63);*/
-    -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
-    box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
-    -webkit-transition: left 0.15s ease-out;
-    -moz-transition: left 0.15s ease-out;
-    -o-transition: left 0.15s ease-out;
-    transition: left 0.15s ease-out;
-}
-
-.switch-blue .switch-selection {
-    background: #3aa2d0;
-    background-image: -webkit-linear-gradient(top, #4fc9ee, #3aa2d0);
-    background-image: -moz-linear-gradient(top, #4fc9ee, #3aa2d0);
-    background-image: -o-linear-gradient(top, #4fc9ee, #3aa2d0);
-    background-image: linear-gradient(to bottom, #4fc9ee, #3aa2d0);
-}
-
-.switch-yellow .switch-selection {
-    background: #c4bb61;
-    background-image: -webkit-linear-gradient(top, #e0dd94, #c4bb61);
-    background-image: -moz-linear-gradient(top, #e0dd94, #c4bb61);
-    background-image: -o-linear-gradient(top, #e0dd94, #c4bb61);
-    background-image: linear-gradient(to bottom, #e0dd94, #c4bb61);
-}
-
-.scrollTagList {
-    height: 330px;
-    overflow-y: auto;
-    margin-bottom: 0px;
-}
-
-.scrollTagList i.fa {
-    margin-right: 5px;
-}
-
-.tagsList .atlast-tabbable {
-    margin: 0px 0px;
-}
-
-.tagsList .atlast-tabbable .tab-content {
-    padding: 10px 22px;
-}
-
-.tagsList .atlast-tabbable .nav-tabs>li>a {
-    padding: 10px 20px;
-}
-
-.appForm .panel-body {
-    padding-bottom: 0;
-}
-
-.appForm .panel-footer {
-    margin-bottom: 0;
-}
-
-#new > * {
-    color: #686868;
-}
-
-.branchListParent .parentActive {
-    background: none;
-}
-
-ul[data-id=branchList] .fa,
-.branchListParent .fa {
-    line-height: 40px;
-}
-
-ul[data-id=branchList] li {
-    padding-left: 50px;
-}
-
-.node {
-    cursor: pointer;
-}
-
-.overlay {
-    /* background-color: #EEE;*/
-}
-
-.node circle {
-    fill: #fff;
-    stroke: steelblue;
-    stroke-width: 1.5px;
-}
-
-.node text {
-    font-size: 10px;
-    font-family: sans-serif;
-}
-
-.link {
-    fill: none;
-    stroke: #ccc;
-    stroke-width: 1.5px;
-}
-
-.templink {
-    fill: none;
-    stroke: red;
-    stroke-width: 3px;
-}
-
-.ghostCircle.show {
-    display: block;
-}
-
-.ghostCircle,
-.activeDrag .ghostCircle {
-    display: none;
-}
-
-.d3-tip {
-    line-height: 1;
-    font-weight: bold;
-    padding: 12px;
-    background: rgba(0, 0, 0, 0.8);
-    color: #fff;
-    border-radius: 2px;
-}
-
-
-/* Creates a small triangle extender for the tooltip */
-
-.d3-tip:after {
-    box-sizing: border-box;
-    display: inline;
-    font-size: 10px;
-    width: 100%;
-    line-height: 1;
-    color: rgba(0, 0, 0, 0.8);
-    content: "\25BC";
-    position: absolute;
-    text-align: center;
-}
-
-
-/* Style northward tooltips differently */
-
-.d3-tip.n:after {
-    margin: -1px 0 0 0;
-    top: 100%;
-    left: 0;
-}
-
-.noTags {
-    font-size: 24px;
-    font-weight: bold;
-    text-align: center;
-}
-
-.addTag-dropdown {
-    display: inline-block;
-}
-
-.addTagBase {
-    border-radius: 4px;
-    padding: 4px 8px;
-    border: solid 1px #4a90e2;
-    cursor: pointer
-}
-
-.addTagText {
-    font-size: 12px;
-    font-weight: 600;
-    color: #4a90e2;
-}
-
-.addTagPlus {
-    font-size: 12px;
-    font-weight: 600;
-    color: #4a90e2;
-}
-
-.menuItem {
-    padding: 10px;
-    color: #4a90e2;
-    cursor: pointer;
-}
-
-.input-tag {
-    display: inline-block;
-    padding: 6px 12px;
-    background-color: #4a90e2;
-    color: #fff;
-    font-size: 12px;
-    text-transform: uppercase;
-    border-radius: 4px;
-    margin-right: 3px;
-    margin-bottom: 3px;
-}
-
-.tagging {
-    display: inline-block;
-}
-
-.input-tag i.fa {
-    position: relative;
-    right: -5px;
-    cursor: pointer;
-}
-
-.crossClearText {
-    line-height: 20px !important;
-}
-
-.inputSearchTag {
-    max-width: 140px;
-}
-
-.appendList {
-    max-height: 200px;
-    overflow: auto;
-    max-width: 140px;
-    overflow-x: hidden;
-}
-
-.dropdown .fa-ellipsis-h {
-    position: relative;
-    top: 4px;
-}
-
-g.type-TK > rect {
-    fill: #00ffd0;
-}
-
-text {
-    font-weight: 300;
-    font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
-    font-size: 14px;
-}
-
-.node rect {
-    stroke: #999;
-    fill: #fff;
-    stroke-width: 1.5px;
-}
-
-.edgePath path {
-    stroke: #000;
-    /* stroke-width: 1.5px;*/
-}
-
-.node .label {
-    fill: #868686;
-}
-
-.branchChildDiv {
-    padding-left: 15px;
-}
-
-.branchListParentInput .form-control {
-    border-right: none;
-    box-shadow: none;
-    border-radius: 4px;
-}
-
-.branchListParentInput .input-group-addon {
-    background-color: #fff;
-}
-
-.branchListParentInput {
-    padding-bottom: 18px;
-    display: list-item;
-}
-
-.backButton {
-    display: block;
-    width: 35px;
-    height: 35px;
-    line-height: 46px;
-    text-align: center;
-    background-color: #323544;
-    color: #fff;
-    position: fixed;
-    left: 5px;
-    top: 90px;
-    font-size: 11px;
-}
-
-.backButton:hover,
-.backButton:active {
-    color: #fff;
-}
-
-.zoomButtonGroup {
-    position: absolute;
-    top: 4px;
-    right: 5px;
-}

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/index.html
----------------------------------------------------------------------
diff --git a/dashboardv2/public/index.html b/dashboardv2/public/index.html
index fc7cfd0..31e177f 100644
--- a/dashboardv2/public/index.html
+++ b/dashboardv2/public/index.html
@@ -37,41 +37,28 @@
     <link rel="stylesheet" href="js/libs/backgrid-paginator/css/backgrid-paginator.css">
     <link rel="stylesheet" href="js/libs/backgrid-orderable-columns/css/backgrid-orderable-columns.css">
     <link rel="stylesheet" href="js/libs/backgrid-sizeable-columns/css/backgrid-sizeable-columns.css">
+    <link rel="stylesheet" href="js/libs/select2/css/select2.min.css">
     <link rel="stylesheet" href="js/libs/bootstrap/css/bootstrap.min.css">
     <link rel="stylesheet" href="js/libs/jquery-asBreadcrumbs/css/asBreadcrumbs.css">
+    <link href='https://fonts.googleapis.com/css?family=Raleway:400,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>
     <link href="css/bootstrap-sidebar.css" rel="stylesheet">
     <link href="css/font-awesome.min.css" rel="stylesheet">
     <link href="css/style.css" rel="stylesheet">
-    <link href="css/business-catlog.css" rel="stylesheet">
-    <link href="css/override.css" rel="stylesheet">
 </head>
 
 <body>
-    <div id="new">
-        <div id="wrapper">
-            <div id="sidebar-wrapper">
-                <div id="sideNav-wrapper"></div>
-            </div>
-            <div id="page-content-wrapper">
-                <header id="new-header" class="clearfix"></header>
-                <div id="new-page-wrapper"> </div>
-            </div>
+    <div id="wrapper">
+        <div id="sidebar-wrapper" class="sidebar-wrapper">
+            <div id="sideNav-wrapper"></div>
         </div>
-    </div>
-    <div id='old'>
-        <!--Header Begin-->
-        <header id="header" class="navbar-fixed-top navbar-top  navbar-atlas"> </header>
-        <!--Header End-->
-        <div class="container wrapper">
-            <div class="">
-                <div id="page-wrapper">
-                    <div>
-                        <img class="initialLoading" src="../img/ring.gif">
-                    </div>
+        <div id="page-content-wrapper" class="page-content-wrapper">
+            <header id="new-header" class="clearfix"></header>
+            <div id="new-page-wrapper">
+                <div>
+                    <img class="initialLoading" src="../img/ring.gif">
                 </div>
             </div>
         </div>
-        <div id="footer"></div>
     </div>
     <!-- build:js scripts/main.js -->
     <script data-main="js/main" src="js/libs/requirejs/require.js"></script>

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/js/collection/BaseCollection.js
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/collection/BaseCollection.js b/dashboardv2/public/js/collection/BaseCollection.js
index 909288c..0c148ac 100644
--- a/dashboardv2/public/js/collection/BaseCollection.js
+++ b/dashboardv2/public/js/collection/BaseCollection.js
@@ -35,6 +35,26 @@ define(['require',
             initialize: function() {},
             bindErrorEvents: function() {
                 this.bind("error", Utils.defaultErrorHandler);
+
+            },
+            bindLoader: function(element) {
+                this.bind('request', function(model, ajaxObj, collectionObj) {
+                    this.ajaxStart(collectionObj.$el);
+                }, this);
+                this.bind('sync', function(model, ajaxObj, collectionObj) {
+                    this.ajaxComplete(collectionObj.$el);
+                }, this);
+            },
+            ajaxStart: function(element) {
+                //start spinner
+                if (element) {
+                    element.prepend("<div class='loading'></div>");
+                }
+            },
+            ajaxComplete: function(element) {
+                if (element) {
+                    element.find('loading').remove();
+                }
             },
             /**
              * state required for the PageableCollection

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/js/collection/VCatalogList.js
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/collection/VCatalogList.js b/dashboardv2/public/js/collection/VCatalogList.js
new file mode 100644
index 0000000..410a35a
--- /dev/null
+++ b/dashboardv2/public/js/collection/VCatalogList.js
@@ -0,0 +1,65 @@
+/**
+ * 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',
+    'utils/Globals',
+    'collection/BaseCollection',
+    'models/VCatalog',
+], function(require, Globals, BaseCollection, VCatalog) {
+    'use strict';
+    var VCatalogList = BaseCollection.extend(
+        //Prototypal attributes
+        {
+            url: Globals.baseURL + '/api/atlas/v1/taxonomies',
+
+            model: VCatalog,
+
+            initialize: function() {
+                this.modelName = 'VCatalog';
+                this.modelAttrName = '';
+                this.bindErrorEvents();
+                this.bindLoader();
+            },
+            fetch: function(options) {
+                //Call Backbone's fetch
+                return Backbone.Collection.prototype.fetch.call(this, options);
+            },
+            parseRecords: function(resp, options) {
+                try {
+                    /* var arr = [];
+                     arr.push({
+                         taxonomies: resp
+                     });*/
+                    return resp;
+                } catch (e) {
+                    console.log(e);
+                }
+            },
+        },
+        //Static Class Members
+        {
+            /**
+             * Table Cols to be passed to Backgrid
+             * UI has to use this as base and extend this.
+             *
+             */
+            tableCols: {}
+        }
+    );
+    return VCatalogList;
+});

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/js/collection/VLineageList.js
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/collection/VLineageList.js b/dashboardv2/public/js/collection/VLineageList.js
index 4f37f87..5383b6d 100644
--- a/dashboardv2/public/js/collection/VLineageList.js
+++ b/dashboardv2/public/js/collection/VLineageList.js
@@ -25,7 +25,7 @@ define(['require',
     var VLineageList = BaseCollection.extend(
         //Prototypal attributes
         {
-            url: Globals.baseURL + 'api/atlas/lineage/hive/table/assetName/outputs/graph',
+            url: Globals.baseURL + 'api/atlas/lineage/assetName/outputs/graph',
 
             model: VLineage,
 

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/js/collection/VSchemaList.js
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/collection/VSchemaList.js b/dashboardv2/public/js/collection/VSchemaList.js
index a5bf30c..cf22375 100644
--- a/dashboardv2/public/js/collection/VSchemaList.js
+++ b/dashboardv2/public/js/collection/VSchemaList.js
@@ -25,7 +25,7 @@ define(['require',
     var VSchemaList = BaseCollection.extend(
         //Prototypal attributes
         {
-            url: Globals.baseURL + '/api/atlas/lineage/hive/table/log_fact_daily_mv/schema',
+            url: Globals.baseURL,
             model: VSchema,
             initialize: function() {
                 this.modelName = 'VSchema';

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/js/main.js
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/main.js b/dashboardv2/public/js/main.js
index 94d49b7..c615ce9 100644
--- a/dashboardv2/public/js/main.js
+++ b/dashboardv2/public/js/main.js
@@ -94,6 +94,9 @@ require.config({
         dagreD3: {
             deps: ['d3'],
             exports: 'dagreD3'
+        },
+        tree: {
+            deps: ['jquery']
         }
     },
 
@@ -121,7 +124,9 @@ require.config({
         'json2': 'require-handlebars-plugin/js/json2',
         'hbs': 'require-handlebars-plugin/js/hbs',
         'i18nprecompile': 'require-handlebars-plugin/js/i18nprecompile',
-        'dagreD3': 'libs/dagre-d3/dagre-d3.min'
+        'dagreD3': 'libs/dagre-d3/dagre-d3.min',
+        'tree': 'libs/jstree/jstree.min',
+        'select2': 'libs/select2/select2.min',
     },
 
     /**
@@ -137,7 +142,8 @@ require(['App',
     'router/Router',
     'utils/Overrides',
     'bootstrap',
-    'd3'
+    'd3',
+    'select2'
 ], function(App, Router) {
     App.appRouter = new Router();
     App.start();

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/js/models/VCatalog.js
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/models/VCatalog.js b/dashboardv2/public/js/models/VCatalog.js
new file mode 100644
index 0000000..10ed835
--- /dev/null
+++ b/dashboardv2/public/js/models/VCatalog.js
@@ -0,0 +1,42 @@
+/**
+ * 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',
+    'utils/Globals',
+    'models/BaseModel'
+], function(require, Globals, VBaseModel) {
+    'use strict';
+    var VCatalog = VBaseModel.extend({
+        urlRoot: Globals.baseURL + '/api/atlas/v1/taxonomies/taxonomy1',
+
+        defaults: {},
+
+        serverSchema: {},
+
+        idAttribute: 'id',
+
+        initialize: function() {
+            this.modelName = 'VCatalog';
+            this.bindErrorEvents();
+        },
+        toString: function() {
+            return this.get('name');
+        },
+    }, {});
+    return VCatalog;
+});

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/js/models/VSchema.js
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/models/VSchema.js b/dashboardv2/public/js/models/VSchema.js
index 24462e6..9d781d7 100644
--- a/dashboardv2/public/js/models/VSchema.js
+++ b/dashboardv2/public/js/models/VSchema.js
@@ -22,7 +22,7 @@ define(['require',
 ], function(require, Globals, VBaseModel) {
     'use strict';
     var VSchema = VBaseModel.extend({
-        urlRoot: Globals.baseURL + '/api/atlas/lineage/log_fact_daily_mv/schema',
+        urlRoot: Globals.baseURL,
 
         defaults: {},
 

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/js/modules/atlasLogin.js
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/modules/atlasLogin.js b/dashboardv2/public/js/modules/atlasLogin.js
new file mode 100644
index 0000000..5ed2fb7
--- /dev/null
+++ b/dashboardv2/public/js/modules/atlasLogin.js
@@ -0,0 +1,129 @@
+/*
+ * 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 indexOf for IE
+if (!Array.indexOf) {
+	Array.prototype.indexOf = function(obj, start) {
+		for ( var i = (start || 0); i < this.length; i++) {
+			if (this[i] == obj) {
+				return i;
+			}
+		}
+		return -1;
+	};
+}
+
+
+function doLogin() {
+
+	var userName = $('#username').val().trim();
+	var passwd = $('#password').val().trim();
+
+	if (userName === '' || passwd === '') {
+		$('#errorBox').show();
+		$('#signInLoading').hide();
+		$('#signIn').removeAttr('disabled');
+		$('#errorBox .errorMsg').text("The username or password you entered is blank..");
+		return false;
+	}
+
+	var baseUrl = getBaseUrl();
+	if (baseUrl.lastIndexOf('/') != (baseUrl.length - 1)) {
+		if (baseUrl) {
+			baseUrl = baseUrl + '/';
+		} else {
+			baseUrl = '/';
+		}
+	}
+	var url = baseUrl + 'j_spring_security_check';
+
+	$.ajax({
+		data : {
+			j_username : userName,
+			j_password : passwd
+		},
+		url : url,
+		type : 'POST',
+		headers : {
+			"cache-control" : "no-cache"
+		},
+		success : function() {
+			if(location.hash.length > 2)
+				window.location.replace('index.html'+location.hash);
+			else
+				window.location.replace('index.html');
+		},
+		error : function(jqXHR, textStatus, err ) {
+			$('#signIn').removeAttr('disabled');
+			$('#signInLoading').css("visibility", "hidden");
+
+			if(jqXHR.status && jqXHR.status == 412){
+				$('#errorBox').hide();
+				$('#errorBoxUnsynced').show();
+			} else {
+				var resp = JSON.parse(jqXHR.responseText);
+
+                if(resp.msgDesc.startsWith("Username not found") || resp.msgDesc.startsWith("Wrong password")){
+                    $('#errorBox .errorMsg').text("Invalid User credentials. Please try again.");
+                }else if(resp.msgDesc.startsWith("User role credentials is not set properly")){
+                    $('#errorBox .errorMsg').text("User role or credentials is not set properly");
+                }else{
+                    $('#errorBox .errorMsg').text("Error while authentication");
+                }
+
+				$('#errorBox').show();
+				$('#errorBoxUnsynced').hide();
+			}
+		}
+	});
+}
+function getBaseUrl(){
+	if(!window.location.origin){
+		window.location.origin = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port: '');
+	}
+	return window.location.origin
+	+ window.location.pathname.substring(window.location.pathname
+			.indexOf('/', 2) + 1, 0);
+}
+$(function() {
+// register handlers
+	$('#signIn').on('click', function() {
+		$('#signIn').attr('disabled',true);
+		$('#signInLoading').css("visibility", "visible");
+		doLogin();
+		return false;
+	});
+	$('#loginForm').each(function() {
+		$('input').keypress(function(e) {
+			// Enter pressed?
+			if (e.which == 10 || e.which == 13) {
+				doLogin();
+			}
+		});
+	});
+	
+	$('#loginForm  li[class^=control-group] > input').on('change',function(e){
+		if(e.target.value === ''){
+			$(e.target).parent().addClass('error');
+		}else{
+			$(e.target).parent().removeClass('error');
+		}
+	});
+});

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/js/router/Router.js
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/router/Router.js b/dashboardv2/public/js/router/Router.js
index d5a2709..b6a2edf 100644
--- a/dashboardv2/public/js/router/Router.js
+++ b/dashboardv2/public/js/router/Router.js
@@ -27,11 +27,18 @@ define([
     var AppRouter = Backbone.Router.extend({
         routes: {
             // Define some URL routes
-            '': 'assetPageLoad',
-            '!/': 'assetPageLoad',
-            "!/dashboard/assetPage": 'assetPageLoad',
-            '!/dashboard/detailPage/:id': 'detailPageLoad',
-            '!/dashboard/createTags': 'tagPageLoad',
+            '': 'commonAction',
+            '!/': 'tagAttributePageLoad',
+            '!/tag/tagAttribute/(*name)': 'tagAttributePageLoad',
+            '!/taxonomy/detailCatalog/(*url)': 'detailCatalog',
+            '!/search/searchResult': 'searchResult',
+            '!/detailPage/:id': 'detailPage',
+            '!/detailPage/:id': 'detailPage',
+            '!/detailPage/:id': 'detailPage',
+
+            '!/tag': 'commonAction',
+            '!/taxonomy': 'commonAction',
+            '!/search': 'commonAction',
             // Default
             '*actions': 'defaultAction'
         },
@@ -62,10 +69,11 @@ define([
                 });
                 var view = new aboutAtlas();
                 var modal = new Modal({
-                    title: 'About',
+                    title: 'Apache Atlas',
                     content: view,
                     okCloses: true,
                     showFooter: true,
+                    allowCancel: false,
                 }).open();
 
                 view.on('closeModal', function() {
@@ -95,75 +103,148 @@ define([
             // console.log("Post-Route Change Operations can be performed here !!");
             // console.log("Route changed: ", name);
         },
-        /**
-         * Define route handlers here
-         */
-        assetPageLoad: function() {
+        detailCatalog: function(url) {
             var that = this;
-            $('#old').show();
-            $('#new').hide();
             require([
-                'views/asset/AssetPageLayoutView',
-                'collection/VSearchList',
-                'views/site/Header',
-                /*'views/site/footer',*/
-            ], function(AssetPageLayoutView, VSearchList, HeaderView /*, FooterView*/ ) {
-                that.searchCollection = new VSearchList([], {
-                    state: {
-                        firstPage: 0,
-                        pageSize: 10
+                'views/business_catalog/BusinessCatalogHeader',
+                'views/business_catalog/BusinessCatalogDetailLayoutView',
+                'views/business_catalog/SideNavLayoutView',
+                'collection/VCatalogList'
+            ], function(BusinessCatalogHeader, BusinessCatalogDetailLayoutView, SideNavLayoutView, VCatalogList) {
+                this.collection = new VCatalogList();
+                this.collection.url = url;
+                App.rNHeader.show(new BusinessCatalogHeader({ 'globalVent': that.globalVent, 'url': url, 'collection': this.collection }));
+                // App.rSideNav.show(new SideNavLayoutView({ 'globalVent': that.globalVent, 'url': url }));
+                if (!App.rSideNav.currentView) {
+                    App.rSideNav.show(new SideNavLayoutView({ 'globalVent': that.globalVent, 'url': url }));
+                } else {
+                    var view = App.rSideNav.currentView.RBusinessCatalogLayoutView.currentView;
+                    if (view.dblClick == false && view.singleClick == false && !Globals.saveApplicationState.tabState.stateChanged) {
+                        App.rSideNav.currentView.RBusinessCatalogLayoutView.currentView.manualRender(url,true);
+                        view.dblClick == false;
+
+                    }/* else if (view.firstManualClick) {
+                        view.firstManualClick = false;
+                        App.rSideNav.currentView.RBusinessCatalogLayoutView.currentView.manualRender(url);
+                    }*/ else if (view.singleClick) {
+                        view.singleClick = false;
                     }
-                });
-                App.rHeader.show(new HeaderView({ 'globalVent': that.globalVent }));
-                App.rContent.show(new AssetPageLayoutView({
+                    App.rSideNav.currentView.selectTab();
+                }
+                if (Globals.saveApplicationState.tabState.stateChanged) {
+                    Globals.saveApplicationState.tabState.stateChanged = false;
+                }
+                App.rNContent.show(new BusinessCatalogDetailLayoutView({
                     'globalVent': that.globalVent,
-                    'collection': that.searchCollection,
-                    'vent': that.tagVent
+                    'url': url,
+                    'collection': this.collection
                 }));
+                this.collection.fetch({ reset: true });
             });
         },
-        detailPageLoad: function(id) {
+        detailPage: function(id) {
             var that = this;
-            $('#old').show();
-            $('#new').hide();
             if (id) {
                 require([
-                    'views/detail_page/DetailPageLayoutView',
-                    'collection/VEntityList',
                     'views/site/Header',
-                ], function(DetailPageLayoutView, VEntityList, HeaderView) {
+                    'views/detail_page/DetailPageLayoutView',
+                    'views/business_catalog/SideNavLayoutView',
+                    'collection/VEntityList'
+                ], function(Header, DetailPageLayoutView, SideNavLayoutView, VEntityList) {
                     this.entityCollection = new VEntityList([], {});
-                    App.rHeader.show(new HeaderView({ 'globalVent': that.globalVent }));
-                    App.rContent.show(new DetailPageLayoutView({
+                    App.rNHeader.show(new Header({ 'globalVent': that.globalVent }));
+                    if (!App.rSideNav.currentView) {
+                        App.rSideNav.show(new SideNavLayoutView({ 'globalVent': that.globalVent }));
+                    } else {
+                        App.rSideNav.currentView.selectTab();
+                    }
+
+                    App.rNContent.show(new DetailPageLayoutView({
                         'globalVent': that.globalVent,
-                        'collection': entityCollection,
+                        'collection': this.entityCollection,
                         'id': id,
-                        'vent': that.tagVent
                     }));
-                    entityCollection.url = "/api/atlas/entities/" + id;
-                    entityCollection.fetch({ reset: true });
+                    this.entityCollection.url = "/api/atlas/entities/" + id;
+                    this.entityCollection.fetch({ reset: true });
                 });
             }
         },
-        tagPageLoad: function() {
+        tagAttributePageLoad: function(tagName) {
             var that = this;
-            $('#old').show();
-            $('#new').hide();
             require([
-                'views/tag/createTagsLayoutView',
-                'collection/VTagList',
                 'views/site/Header',
-            ], function(CreateTagsLayoutView, VTagList, HeaderView) {
-                this.tagsCollection = new VTagList([], {});
-                App.rHeader.show(new HeaderView({ 'globalVent': that.globalVent }));
-                App.rContent.show(new CreateTagsLayoutView({
+                'views/business_catalog/BusinessCatalogLayoutView',
+                'views/business_catalog/SideNavLayoutView',
+                'views/tag/TagDetailLayoutView',
+            ], function(Header, BusinessCatalogLayoutView, SideNavLayoutView, TagDetailLayoutView) {
+                App.rNHeader.show(new Header({ 'globalVent': that.globalVent, 'vent': that.catalogVent }));
+                if (!App.rSideNav.currentView) {
+                    App.rSideNav.show(new SideNavLayoutView({
+                        'globalVent': that.globalVent,
+                        'tag': tagName
+                    }));
+                } else {
+                    App.rSideNav.currentView.RTagLayoutView.currentView.manualRender(tagName);
+                    App.rSideNav.currentView.selectTab();
+                }
+
+                if (tagName) {
+                    App.rNContent.show(new TagDetailLayoutView({
+                        'globalVent': that.globalVent,
+                        'tag': tagName
+                    }));
+                }
+            });
+        },
+        commonAction: function() {
+            var that = this;
+            require([
+                'views/site/Header',
+                'views/business_catalog/BusinessCatalogLayoutView',
+                'views/business_catalog/SideNavLayoutView',
+            ], function(Header, BusinessCatalogLayoutView, SideNavLayoutView) {
+                App.rNHeader.show(new Header({ 'globalVent': that.globalVent }));
+                if (!App.rSideNav.currentView) {
+                    App.rSideNav.show(new SideNavLayoutView({
+                        'globalVent': that.globalVent
+                    }));
+                } else {
+                    App.rSideNav.currentView.selectTab();
+                    if (Utils.getUrlState.isTagTab()) {
+                        App.rSideNav.currentView.RTagLayoutView.currentView.manualRender();
+                    } else if (Utils.getUrlState.isTaxonomyTab()) {
+                        App.rSideNav.currentView.RBusinessCatalogLayoutView.currentView.manualRender(undefined,true);
+                    }
+                }
+                App.rNContent.$el.html('');
+                App.rNContent.destroy();
+            });
+        },
+        searchResult: function() {
+            var that = this;
+            require([
+                'views/site/Header',
+                'views/business_catalog/BusinessCatalogLayoutView',
+                'views/business_catalog/SideNavLayoutView',
+                'views/search/SearchDetailLayoutView'
+            ], function(Header, BusinessCatalogLayoutView, SideNavLayoutView, SearchDetailLayoutView) {
+                var paramObj = Utils.getUrlState.getQueryParams();
+                App.rNHeader.show(new Header({ 'globalVent': that.globalVent, 'vent': that.catalogVent }));
+                if (!App.rSideNav.currentView) {
+                    App.rSideNav.show(new SideNavLayoutView({
+                        'globalVent': that.globalVent,
+                        'value': paramObj
+                    }));
+                } else {
+                    App.rSideNav.currentView.RSearchLayoutView.currentView.manualRender(paramObj);
+                }
+                App.rSideNav.currentView.selectTab();
+                App.rNContent.show(new SearchDetailLayoutView({
                     'globalVent': that.globalVent,
-                    'tagsCollection': tagsCollection,
+                    'value': paramObj
                 }));
-
             });
         },
-
         defaultAction: function(actions) {
             // We have no matching route, lets just log what the URL was
             console.log('No route:', actions);

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/js/templates/asset/AssetPageLayoutView_tmpl.html
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/templates/asset/AssetPageLayoutView_tmpl.html b/dashboardv2/public/js/templates/asset/AssetPageLayoutView_tmpl.html
deleted file mode 100644
index 7a290d9..0000000
--- a/dashboardv2/public/js/templates/asset/AssetPageLayoutView_tmpl.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<!--
- * 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.
--->
-<div class="row">
-    <div class="col-sm-3">
-        <div id="r_tagLayoutView"></div>
-    </div>
-    <div class="col-sm-9">
-        <div class="panel panel-default">
-            <div class="panel-body">
-                <div id="r_searchLayoutView"></div>
-                <div class="fontLoader">
-                    <i class="fa fa-refresh fa-spin-custom"></i>
-                </div>
-                <div id="r_entityTableLayoutView" class="entityTable"></div>
-            </div>
-        </div>
-    </div>
-</div>

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/js/templates/audit/AuditTableLayoutView_tmpl.html
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/templates/audit/AuditTableLayoutView_tmpl.html b/dashboardv2/public/js/templates/audit/AuditTableLayoutView_tmpl.html
new file mode 100644
index 0000000..fca11a5
--- /dev/null
+++ b/dashboardv2/public/js/templates/audit/AuditTableLayoutView_tmpl.html
@@ -0,0 +1,17 @@
+<!--
+ * 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.
+-->
+<div id="r_auditTableLayoutView"></div>

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/js/templates/audit/CreateAuditTableLayoutView_tmpl.html
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/templates/audit/CreateAuditTableLayoutView_tmpl.html b/dashboardv2/public/js/templates/audit/CreateAuditTableLayoutView_tmpl.html
new file mode 100644
index 0000000..e193435
--- /dev/null
+++ b/dashboardv2/public/js/templates/audit/CreateAuditTableLayoutView_tmpl.html
@@ -0,0 +1,26 @@
+<!--
+ * 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.
+-->
+<table class="table table-bordered table-striped">
+    <thead>
+        <tr>
+            <th>Key</th>
+            <th>Value</th>
+        </tr>
+    </thead>
+    <tbody data-id="auditValue">
+    </tbody>
+</table>

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/js/templates/business_catalog/AddTermView_tmpl.html
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/templates/business_catalog/AddTermView_tmpl.html b/dashboardv2/public/js/templates/business_catalog/AddTermView_tmpl.html
new file mode 100644
index 0000000..ddb7eac
--- /dev/null
+++ b/dashboardv2/public/js/templates/business_catalog/AddTermView_tmpl.html
@@ -0,0 +1,25 @@
+<!--
+ * 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.
+-->
+<form name="tagDefinitionform" class="css-form">
+    <!-- <h4 style="margin-bottom:30px">Add Term</h4> -->
+    <div class="form-group">
+        <input class="form-control" data-id="termName" placeholder="Add subterm">
+    </div>
+    <div class="form-group">
+        <textarea class="form-control" data-id="termDetail" placeholder="Description"></textarea>
+    </div>
+</form>

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/js/templates/business_catalog/BusinessCatalogDetailLayoutView_tmpl.html
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/templates/business_catalog/BusinessCatalogDetailLayoutView_tmpl.html b/dashboardv2/public/js/templates/business_catalog/BusinessCatalogDetailLayoutView_tmpl.html
new file mode 100644
index 0000000..50addf6
--- /dev/null
+++ b/dashboardv2/public/js/templates/business_catalog/BusinessCatalogDetailLayoutView_tmpl.html
@@ -0,0 +1,75 @@
+<!--
+ * 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.
+-->
+<div class="fontLoader">
+    <i class="fa fa-refresh fa-spin-custom"></i>
+</div>
+<div class="hide">
+    <div class="page-title clearfix">
+        <h1><span data-id="title"></span><!-- <button style="display:none" data-id="editButton" class="btn btn-default pull-right editbutton" id="editText"><i class="fa fa-pencil"></i></button> --></h1>
+        <p class="sub-title" data-id="description">Description</p>
+        <div data-id="editBox" style="margin-bottom:10px;">
+            <textarea class="well well-sm col-sm-12" data-id="descriptionTextArea"></textarea>
+            <div class="clearfix" align="right">
+                <button class="btn-atlas" data-id="cancelButton">Cancel</button>
+                <button class="btn-atlas" data-id="publishButton">Publish</button>
+            </div>
+        </div>
+    </div>
+    <div class="container-fluid gray-bg">
+        <div class="row">
+            <div class="col-sm-10 col-sm-offset-1">
+                <div class="atlast-tabbable">
+                    <ul class="nav nav-tabs" role="tablist">
+                        <li role="presentation" class="tab active"><a href="#tab-details" aria-controls="tab-details" role="tab" data-toggle="tab">Properties</a></li>
+                        <!--  <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Acceptable Use</a></li> -->
+                    </ul>
+                    <div class="tab-content">
+                        <div id="tab-details" role="tabpanel" class="tab-pane active">
+                            <p data-id="createDate"></p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-sm-10 col-sm-offset-1">
+                <div class="atlast-tabbable">
+                    <div class="panel panel-default lineageLayout" style="display:none">
+                        <div id="r_lineageLayoutView"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- <div class="row">
+    <div class="col-sm-10 col-sm-offset-1">
+        <h2>Comments</h2>
+        <textarea class="form-control comment-input" rows="5" placeholder="Add a Comment"></textarea>
+        <button class="btn-atlas">Comment</button>
+        <div class="comment-box">
+            <p class="comment">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
+            <p class="author">Micheal Surmac</p>
+            <p class="date">December 16, 2016 11:03:23 AM</p>
+        </div>
+        <div class="comment-box">
+            <p class="comment">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
+            <p class="author">Paula Schmidt</p>
+            <p class="date">May 3, 2015 9:16:12 AM</p>
+        </div>
+    </div>
+</div> -->
+</div>

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/js/templates/business_catalog/BusinessCatalogHeader.html
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/templates/business_catalog/BusinessCatalogHeader.html b/dashboardv2/public/js/templates/business_catalog/BusinessCatalogHeader.html
new file mode 100644
index 0000000..4184e8d
--- /dev/null
+++ b/dashboardv2/public/js/templates/business_catalog/BusinessCatalogHeader.html
@@ -0,0 +1,32 @@
+<!--
+ * 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.
+-->
+
+<ol class="breadcrumb col-md-6">
+</ol>
+<header class="clearfix">
+    <div class="btn-group pull-right">
+        <a href="javascript:void(0);" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="user-dropdown">Hello Micheal <i class="fa fa-user user-circle"></i></a>
+        <ul class="dropdown-menu">
+            <!--    <li><a href="#">Edit Profile</a></li>
+            <li><a href="#">Change Password</a></li> -->
+            <li class="aboutAtlas"><a href="javascript:void(0)">About</a></li>
+            <li><a target="_blank" href="https://cwiki.apache.org/confluence/display/ATLAS/Atlas+Home">Help</a></li>
+            <li role="separator" class="divider"></li>
+            <li><a href="logout.html">Logout</a></li>
+        </ul>
+    </div>
+</header>

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/js/templates/business_catalog/BusinessCatalogLayoutView_tmpl.html
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/templates/business_catalog/BusinessCatalogLayoutView_tmpl.html b/dashboardv2/public/js/templates/business_catalog/BusinessCatalogLayoutView_tmpl.html
new file mode 100644
index 0000000..ab6e234
--- /dev/null
+++ b/dashboardv2/public/js/templates/business_catalog/BusinessCatalogLayoutView_tmpl.html
@@ -0,0 +1,29 @@
+<!--
+ * 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.
+-->
+<div class="row">
+    <button class="btn btn-taxanomyBack btn-atlas" data-id="backTaxanomy"><i class="fa fa-chevron-left"></i> Back</button>
+</div>
+<div class="">
+    <ul class="taxonomyTree">
+        <div class="contentLoading"></div>
+        <li class="children parent" data-id="Parent"></li>
+        <li class="chileds parentChiled">
+            <ul data-id="chiledList">
+            </ul>
+        </li>
+    </ul>
+</div>

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/js/templates/business_catalog/MoveTermLayoutView_tmpl.html
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/templates/business_catalog/MoveTermLayoutView_tmpl.html b/dashboardv2/public/js/templates/business_catalog/MoveTermLayoutView_tmpl.html
new file mode 100644
index 0000000..0f9a066
--- /dev/null
+++ b/dashboardv2/public/js/templates/business_catalog/MoveTermLayoutView_tmpl.html
@@ -0,0 +1,19 @@
+<!--
+ * 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.
+-->
+<div class="form-control termMoveDiv">
+    <div id="tree"></div>
+</div>

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/js/templates/business_catalog/SideNavLayoutView_tmpl.html
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/templates/business_catalog/SideNavLayoutView_tmpl.html b/dashboardv2/public/js/templates/business_catalog/SideNavLayoutView_tmpl.html
new file mode 100644
index 0000000..a59fb58
--- /dev/null
+++ b/dashboardv2/public/js/templates/business_catalog/SideNavLayoutView_tmpl.html
@@ -0,0 +1,37 @@
+<!--
+ * 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.
+-->
+<ul class="sidebar-nav">
+    <li class="sidebar-brand">
+        <a href="index.html"><i class="fa fa-globe"></i> Apache Atlas</a>
+    </li>
+    <ul class="tabs" style="width: 100%;" role="tablist">
+        <li role="presentation" class="tab col-sm-4 active"><a href="#tab-tag" aria-controls="tab-tag" data-name="tab-tag" role="tab" data-toggle="tab">Tags</a></li>
+        <li role="presentation" class="tab col-sm-4"><a href="#tab-taxonomy" aria-controls="tab-taxonomy" data-name="tab-taxonomy" role="tab" data-toggle="tab" class="">Taxonomy</a></li>
+        <li role="presentation" class="tab col-sm-4"><a href="#tab-search" aria-controls="tab-search" data-name="tab-search" role="tab" data-toggle="tab" class=""><i class="fa fa-search"></i> Search</a></li>
+    </ul>
+</ul>
+<div class="tab-content">
+    <div role="tabpanel" class="tab-pane active" id="tab-tag">
+        <div id="r_tagLayoutView"></div>
+    </div>
+    <div role="tabpanel" class="tab-pane" id="tab-taxonomy">
+        <div id="r_businessCatalogLayoutView"></div>
+    </div>
+    <div role="tabpanel" class="tab-pane" id="tab-search">
+        <div id="r_searchLayoutView"></div>
+    </div>
+</div>

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/js/templates/common/aboutAtlas_tmpl.html
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/templates/common/aboutAtlas_tmpl.html b/dashboardv2/public/js/templates/common/aboutAtlas_tmpl.html
index 9839458..08089b1 100644
--- a/dashboardv2/public/js/templates/common/aboutAtlas_tmpl.html
+++ b/dashboardv2/public/js/templates/common/aboutAtlas_tmpl.html
@@ -18,10 +18,10 @@
     <div class="col-md-4">
         <img src="img/ApacheAtlasLogo.png" class="img-responsive">
         <div class="col-md-8 subContent">
-            <h2 class="title-bold">Apache Atlas</h2>
             <p class="ng-binding"><b>Version : </b> 0.7-incubating-SNAPSHOT-ra2cc01c4342ace7f7a3e3e254d7ede781f990318</p>
             <br>
             <p class="text-info">Get involved!</p>
             <p class="text-info"><a href="http://apache.org/licenses/LICENSE-2.0" target="_blank">Licensed under the Apache License Version 2.0</a></p>
         </div>
     </div>
+</div>

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/js/templates/common/modal.html
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/templates/common/modal.html b/dashboardv2/public/js/templates/common/modal.html
index c9c545f..806e3dd 100644
--- a/dashboardv2/public/js/templates/common/modal.html
+++ b/dashboardv2/public/js/templates/common/modal.html
@@ -20,21 +20,21 @@
         <div class="modal-header">
             <a class="close">&times;</a>
             <h4 class="modal-title">
-					{{#if titleHtml}}
-					    {{{tt title}}}
-					  {{else}}
-					    {{tt title}}
-					  {{/if}}
-				</h4>
+                    {{#if titleHtml}}
+                        {{{tt title}}}
+                      {{else}}
+                        {{tt title}}
+                      {{/if}}
+                </h4>
         </div>
         {{/if}} {{#if contentWithFooter}} {{else}}
         <div class="modal-body">{{content}}</div>
         {{#if showFooter}}
         <div class="modal-footer">
-            <button class="btn ok btn-success">{{tt okText}}</button>
             {{#if allowCancel}} {{#if cancelText}}
-            <button class="btn btn-default cancel">{{tt cancelText}}</button>
+            <button class="btn btn-atlas cancel">{{tt cancelText}}</button>
             {{/if}} {{/if}}
+            <button class="btn btn-atlas ok">{{tt okText}}</button>
         </div>
         {{/if}} {{/if}}
     </div>

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html b/dashboardv2/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html
index 383bc3e..633d497 100644
--- a/dashboardv2/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html
+++ b/dashboardv2/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html
@@ -14,32 +14,81 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 -->
-<div class="col-sm-12">
-    <a href="javascript:void(0);" class="backButton" data-id="backButton" title="Back To Result"><i class="fa fa-chevron-left fa-2x"></i></a>
-    <div class="panel panel-default lineageLayout" style="display:none">
-        <div id="r_lineageLayoutView"></div>
+<div class="page-title clearfix">
+    <div class="row">
+        <a href="javascript:void(0);" class="backButton" data-id="backButton"><i class="fa fa-chevron-left"> Back To Result</i></a>
     </div>
-    <div class="panel panel-default">
-        <div class="panel-body">
-            <p class="name"></p>
-            <p class="description"></p>
-            <hr>
-            <ul class="nav nav-tabs" role="tablist">
-                <li role="presentation" class="tab active"><a href="#tab-details" aria-controls="tab-details" role="tab" data-toggle="tab">Details</a></li>
-                <li role="presentation" class="tab schemaTable" style="display:none"><a href="#tab-schema" aria-controls="tab-schema" role="tab" data-toggle="tab">Schema</a></li>
-                <li role="presentation" class="tab "><a href="#tab-tags" aria-controls="tab-tags" role="tab" data-toggle="tab">Tags</a></li>
-            </ul>
-            <div class="tab-content">
-                <div id="tab-details" role="tabpanel" class="tab-pane active">
-                    <div id="r_entityDetailTableLayoutView"></div>
+    <h1><span  data-id="title"></span><!-- <small>Bookmark</small> <button data-id="editButton" class="btn btn-default pull-right editbutton" id="editText"><i class="fa fa-pencil"></i></button> --></h1>
+    <div data-id="editBox" style="margin-bottom:10px;">
+        <textarea class="well well-sm col-sm-12" data-id="descriptionTextArea"></textarea>
+        <div class="clearfix" align="right">
+            <button class="btn-atlas" data-id="cancelButton">Cancel</button>
+            <button class="btn-atlas" data-id="publishButton">Publish</button>
+        </div>
+    </div>
+    <div data-id="inputTagging">
+        <div class="dropdown addTag-dropdown" data-id="addTagListBtn">
+            <div class=" addTagBase dropdown-toggle" data-id="addTagBtn" data-toggle="dropdown">
+                <div class="addTagText" data-id="addTagtext" style="display: block">ADD TAG &nbsp; <i class="fa fa-plus"></i></div>
+                <div class="addTagPlus" data-id="addTagPlus" style="display: none"><i class="fa fa-plus"></i></div>
+            </div>
+            <!-- <div class="dropdown-menu menuItem" data-id="addTagCollection">
+                <div data-id="searchTag" class="searchTag row-margin-bottom">
+                    <input placeholder="Search" type=search class="inputSearchTag form-control"></input>
                 </div>
-                <div id="tab-schema" class="tab-pane">
-                    <div id="r_schemaTableLayoutView"></div>
+                <div class="appendList" data-id="appendList"></div>
+            </div> -->
+        </div>
+    </div>
+</div>
+<div class="container-fluid gray-bg">
+    <div class="row">
+        <div class="col-sm-10 col-sm-offset-1">
+            <div class="atlast-tabbable">
+                <div class="panel panel-default lineageLayout" style="display:none">
+                    <div id="r_lineageLayoutView"></div>
                 </div>
-                <div id="tab-tags" class="tab-pane">
-                    <div id="r_tagTableLayoutView"></div>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-sm-10 col-sm-offset-1">
+            <div class="atlast-tabbable">
+                <ul class="nav nav-tabs" role="tablist">
+                    <li role="presentation" class="tab active"><a href="#tab-details" aria-controls="tab-details" role="tab" data-toggle="tab">Properties</a></li>
+                    <!--  <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Acceptable Use</a></li> -->
+                    <li role="presentation"><a href="#tab-tagTable" aria-controls="tab-tagTable" role="tab" data-toggle="tab">Tag Attribute</a></li>
+                    <li role="presentation" class="tab schemaTable" style="display:none"><a href="#tab-schema" aria-controls="tab-schema" role="tab" data-toggle="tab">Schema</a></li>
+                </ul>
+                <div class="tab-content">
+                    <div id="tab-details" role="tabpanel" class="tab-pane active">
+                        <div id="r_entityDetailTableLayoutView"></div>
+                    </div>
+                    <div id="tab-tagTable" role="tabpanel" class="tab-pane">
+                        <div id="r_tagTableLayoutView"></div>
+                    </div>
+                    <div id="tab-schema" role="tabpanel" class="tab-pane">
+                        <div id="r_schemaTableLayoutView"></div>
+                    </div>
                 </div>
             </div>
         </div>
     </div>
 </div>
+<div>
+    <!-- div class="col-sm-10 col-sm-offset-1">
+        <h2>Comments</h2>
+        <textarea class="form-control comment-input" rows="5" placeholder="Add a Comment"></textarea>
+        <button class="btn-atlas">Comment</button>
+        <div class="comment-box">
+            <p class="comment">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
+            <p class="author">Micheal Surmac</p>
+            <p class="date">December 16, 2016 11:03:23 AM</p>
+        </div>
+        <div class="comment-box">
+            <p class="comment">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
+            <p class="author">Paula Schmidt</p>
+            <p class="date">May 3, 2015 9:16:12 AM</p>
+        </div>
+</div> -->
+</div>

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html b/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html
index f67c77d..bb16651 100644
--- a/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html
+++ b/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html
@@ -14,9 +14,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 -->
-<div class="panel-heading">
+<!-- <div class="panel-heading">
     <h3 class="panel-title">Lineage</h3>
-</div>
+</div> -->
 <div class="fontLoader">
     <i class="fa fa-refresh fa-spin-custom"></i>
 </div>

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/js/templates/search/SearchDetailLayoutView_tmpl.html
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/templates/search/SearchDetailLayoutView_tmpl.html b/dashboardv2/public/js/templates/search/SearchDetailLayoutView_tmpl.html
new file mode 100644
index 0000000..49d4fc6
--- /dev/null
+++ b/dashboardv2/public/js/templates/search/SearchDetailLayoutView_tmpl.html
@@ -0,0 +1,25 @@
+<!--
+ * 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.
+-->
+<div class="container-fluid">
+    <div class="row">
+        <div class="col-sm-10 col-sm-offset-1">
+            <div class="atlast-tabbable">
+                <div id="r_searchResultLayoutView"></div>
+            </div>
+        </div>
+    </div>
+</div>

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/js/templates/search/SearchLayoutView_tmpl.html
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/templates/search/SearchLayoutView_tmpl.html b/dashboardv2/public/js/templates/search/SearchLayoutView_tmpl.html
index 70cbf37..c6de3ae 100644
--- a/dashboardv2/public/js/templates/search/SearchLayoutView_tmpl.html
+++ b/dashboardv2/public/js/templates/search/SearchLayoutView_tmpl.html
@@ -15,19 +15,32 @@
  * limitations under the License.
 -->
 <div class="row row-margin-bottom">
-    <div class="col-sm-12">
-        <div class="switch" style="float: left;">
-            <input type="radio" class="switch-input" name="queryType" value="fulltext" id="fulltext_toggle" checked="">
-            <label for="fulltext_toggle" class="switch-label switch-label-off">Text</label>
-            <input type="radio" class="switch-input" name="queryType" value="dsl" id="dsl_toggle">
-            <label for="dsl_toggle" class="switch-label switch-label-on">DSL</label>
-            <span class="switch-selection"></span>
+    <div class="col-sm-12" style="margin:15px 0px;">
+        <div class="row">
+            <div class="col-md-12">
+                <span class="pull-left">Text</span>
+                <label class="switch pull-left">
+                    <input type="checkbox" name="queryType" value="text">
+                    <div class="slider round"></div>
+                </label>
+                <span class="pull-left">DSL</span>
+            </div>
         </div>
-        <div class="input-group">
-            <input style="padding-left: 132px;" type="text" class="form-control" data-id="searchInput" placeholder="Search using a query string: e.g. sales_fact">
-            <span class="input-group-btn">
-                <button class="btn btn-success" data-id="searchButton" type="button"><i class="fa fa-search"></i></button>
-            </span>
+    </div>
+    <div class="col-sm-12">
+        <div class="form-group">
+            <input type="text" class="form-control" data-id="searchInput" placeholder="Search using a query string: e.g. sales_fact">
         </div>
+        <!--  <div data-id="advanceSearchContainer">
+            <div class="form-group">
+                <select type="text" class="col-md-12 form-control tagListSelect" data-id="tagListInput" multiple></select>
+            </div>
+          <div class="form-group">
+                <select type="text" class="col-md-12 form-control" data-id="termListInput" multiple></select>
+            </div>
+        </div> -->
+        <div class="clearAdvanceSearch" data-id="clearSearch">Clear</div>
+        <button class="btn btn-atlas advanceSearchBtn" data-id="searchBtn">Search</button>
     </div>
 </div>
+<div id="searchResult"></div>

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/js/templates/search/SearchResultLayoutView_tmpl.html
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/templates/search/SearchResultLayoutView_tmpl.html b/dashboardv2/public/js/templates/search/SearchResultLayoutView_tmpl.html
new file mode 100644
index 0000000..db827a3
--- /dev/null
+++ b/dashboardv2/public/js/templates/search/SearchResultLayoutView_tmpl.html
@@ -0,0 +1,22 @@
+<!--
+ * 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.
+-->
+<div class="row">
+    <div class="fontLoader">
+        <i class="fa fa-refresh fa-spin-custom"></i>
+    </div>
+    <div id="r_entityTableLayoutView" class=""></div>
+</div>

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/js/templates/site/header.html
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/templates/site/header.html b/dashboardv2/public/js/templates/site/header.html
index fe3803d..8c22e5a 100644
--- a/dashboardv2/public/js/templates/site/header.html
+++ b/dashboardv2/public/js/templates/site/header.html
@@ -14,40 +14,16 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 -->
-<div class="container">
-    <div class="row">
-        <div class="navbar-header">
-            <ul class="sidebar-nav">
-                <li class="sidebar-brand clearfix">
-                    <a class="pull-left" href="#!/"><i class="fa fa-globe"></i><strong> Atlas</strong></a>
-                    <div class="dropdown headerDroupDown pull-left">
-                        <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">
-                            {{#ifCond urlType  "==" "assetPage"}}
-                                Assets
-                            {{else}}
-                                {{#ifCond urlType  "==" "createTags"}}
-                                    Tag Definition
-                                {{else}}
-                                    Asset Details
-                                {{/ifCond}}
-                            {{/ifCond}}
-                <span class="caret"></span></a>
-                        <ul class="dropdown-menu">
-                            {{#ifCond urlType "==" "assetPage"}}
-                            <li><a href="#!/dashboard/createTags">Tag Definition</a></li>
-                            {{else}} {{#ifCond urlType "==" "createTags"}}
-                            <li><a href="#!/dashboard/assetPage">Assets</a></li>
-                            {{else}}
-                            <li><a href="#!/dashboard/assetPage">Assets</a></li>
-                            <li><a href="#!/dashboard/createTags">Tag Definition</a></li>
-                            {{/ifCond}} {{/ifCond}}
-                            <li><a target="_blank" href="https://cwiki.apache.org/confluence/display/ATLAS/Atlas+Home">Help</a></li>
-                            <li class="aboutAtlas"><a href="javascript:void(0)">About</a></li>
-                            <li><a href="logout.html">Logout</a></li>
-                        </ul>
-                    </div>
-                </li>
-            </ul>
-        </div>
+<header class="clearfix">
+    <div class="btn-group pull-right">
+        <a href="javascript:void(0);" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="user-dropdown"><i class="fa fa-user user-circle "></i></a>
+        <ul class="dropdown-menu">
+            <!--    <li><a href="#">Edit Profile</a></li>
+            <li><a href="#">Change Password</a></li> -->
+            <li class="aboutAtlas"><a href="javascript:void(0)">About</a></li>
+            <li><a target="_blank" href="https://cwiki.apache.org/confluence/display/ATLAS/Atlas+Home">Help</a></li>
+            <li role="separator" class="divider"></li>
+            <li><a href="logout.html"> <i class="fa fa-sign-out"></i> Logout</a></li>
+        </ul>
     </div>
-</div>
+</header>

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/js/templates/tag/AddTagAttributeView_tmpl.html
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/templates/tag/AddTagAttributeView_tmpl.html b/dashboardv2/public/js/templates/tag/AddTagAttributeView_tmpl.html
new file mode 100644
index 0000000..9bb10b8
--- /dev/null
+++ b/dashboardv2/public/js/templates/tag/AddTagAttributeView_tmpl.html
@@ -0,0 +1,23 @@
+<!--
+ * 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.
+-->
+<div class="row row-margin-bottom">
+    <div class="col-sm-12">
+        <div class="form-group">
+            <input type="text" class="form-control" name="name" data-id="attributeId" placeholder="Attribute name" required="" value={{name}}>
+        </div>
+    </div>
+</div>

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/js/templates/tag/TagAttributeDetailLayoutView_tmpl.html
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/templates/tag/TagAttributeDetailLayoutView_tmpl.html b/dashboardv2/public/js/templates/tag/TagAttributeDetailLayoutView_tmpl.html
new file mode 100644
index 0000000..b444bf6
--- /dev/null
+++ b/dashboardv2/public/js/templates/tag/TagAttributeDetailLayoutView_tmpl.html
@@ -0,0 +1,30 @@
+<!--
+ * 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.
+-->
+<div class="page-title clearfix">
+    <h1><span  data-id="title"></span>
+    <!--  <small>8 Asset</small><button data-id="editButton" class="hide btn btn-default pull-right editbutton" data-id="editText"><i class="fa fa-pencil"></i></button>--></h1>
+    <div data-id="showAttribute">
+    </div>
+    <div class="dropdown addTag-dropdown" data-id="addTagListBtn">
+        <div class=" addTagBase dropdown-toggle" data-id="addTagBtn" data-toggle="dropdown">
+            <div class="addTagText" data-id="addTagtext" style="display: block">ADD Attribute &nbsp; <i class="fa fa-plus"></i></div>
+            <div class="addTagPlus" data-id="addTagPlus" style="display: none"><i class="fa fa-plus"></i></div>
+        </div>
+    </div>
+    <div data-id="editBox" style="margin-bottom:10px; display:none">
+    </div>
+</div>

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/js/templates/tag/TagDetailLayoutView_tmpl.html
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/templates/tag/TagDetailLayoutView_tmpl.html b/dashboardv2/public/js/templates/tag/TagDetailLayoutView_tmpl.html
new file mode 100644
index 0000000..363ce4c
--- /dev/null
+++ b/dashboardv2/public/js/templates/tag/TagDetailLayoutView_tmpl.html
@@ -0,0 +1,27 @@
+<!--
+ * 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.
+-->
+<div id="r_TagAttributeDetailLayoutView">
+</div>
+<div class="container-fluid gray-bg">
+    <div class="row">
+        <div class="col-sm-10 col-sm-offset-1">
+            <div class="atlast-tabbable">
+                <div id="r_searchResultLayoutView"></div>
+            </div>
+        </div>
+    </div>
+</div>

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/js/templates/tag/TagDetailTableLayoutView_tmpl.html
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/templates/tag/TagDetailTableLayoutView_tmpl.html b/dashboardv2/public/js/templates/tag/TagDetailTableLayoutView_tmpl.html
index cbfbeff..a4a0928 100644
--- a/dashboardv2/public/js/templates/tag/TagDetailTableLayoutView_tmpl.html
+++ b/dashboardv2/public/js/templates/tag/TagDetailTableLayoutView_tmpl.html
@@ -15,7 +15,7 @@
  * limitations under the License.
 -->
 <div>
-    <button class="add-tag btn btn-success pull-right" data-id="addTag" style="margin-bottom:10px">Add Tag</button>
+<!--     <button class="add-tag btn btn-success pull-right" data-id="addTag" style="margin-bottom:10px">Add Tag</button> -->
 </div>
 <table class="table table-bordered table-striped">
     <thead>



[2/5] incubator-atlas git commit: ATLAS-802 New look UI to show Business Catalog functionalities (kevalbhatt18 via yhemanth)

Posted by yh...@apache.org.
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) {



[5/5] incubator-atlas git commit: ATLAS-802 New look UI to show Business Catalog functionalities (kevalbhatt18 via yhemanth)

Posted by yh...@apache.org.
ATLAS-802 New look UI to show Business Catalog functionalities (kevalbhatt18 via yhemanth)


Project: http://git-wip-us.apache.org/repos/asf/incubator-atlas/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-atlas/commit/440bd2ae
Tree: http://git-wip-us.apache.org/repos/asf/incubator-atlas/tree/440bd2ae
Diff: http://git-wip-us.apache.org/repos/asf/incubator-atlas/diff/440bd2ae

Branch: refs/heads/master
Commit: 440bd2ae42c4f2ef02df7387392a1a29d98f3bc9
Parents: a05107a
Author: Hemanth Yamijala <hy...@hortonworks.com>
Authored: Thu May 19 23:15:39 2016 +0530
Committer: Hemanth Yamijala <hy...@hortonworks.com>
Committed: Thu May 19 23:15:39 2016 +0530

----------------------------------------------------------------------
 dashboardv2/gruntfile.js                        |  94 +--
 dashboardv2/package.json                        |   3 +
 dashboardv2/public/css/bootstrap-sidebar.css    |  64 +-
 dashboardv2/public/css/business-catlog.css      | 206 -----
 .../public/css/fonts/fontawesome-webfont.svg    |   2 +-
 .../css/fonts/glyphicons-halflings-regular.svg  |   2 +-
 dashboardv2/public/css/override.css             | 204 -----
 dashboardv2/public/css/scss/breadcrumb.scss     |  43 ++
 .../public/css/scss/business-catlog.scss        |  97 +++
 dashboardv2/public/css/scss/form.scss           | 186 +++++
 dashboardv2/public/css/scss/graph.scss          |  76 ++
 dashboardv2/public/css/scss/loader.scss         |  57 ++
 dashboardv2/public/css/scss/login.scss          |  71 ++
 dashboardv2/public/css/scss/main.scss           | 147 ++++
 dashboardv2/public/css/scss/nav.scss            |  50 ++
 dashboardv2/public/css/scss/old-style.scss      | 161 ++++
 dashboardv2/public/css/scss/override.scss       |  72 ++
 dashboardv2/public/css/scss/panel.scss          |  25 +
 dashboardv2/public/css/scss/search.scss         |  75 ++
 dashboardv2/public/css/scss/style.scss          |  34 +
 dashboardv2/public/css/scss/tab.scss            | 133 ++++
 dashboardv2/public/css/scss/tag.scss            | 205 +++++
 dashboardv2/public/css/scss/theme.scss          | 114 +++
 dashboardv2/public/css/scss/tree.scss           | 286 +++++++
 dashboardv2/public/css/style.css                | 773 -------------------
 dashboardv2/public/index.html                   |  33 +-
 .../public/js/collection/BaseCollection.js      |  20 +
 .../public/js/collection/VCatalogList.js        |  65 ++
 .../public/js/collection/VLineageList.js        |   2 +-
 dashboardv2/public/js/collection/VSchemaList.js |   2 +-
 dashboardv2/public/js/main.js                   |  10 +-
 dashboardv2/public/js/models/VCatalog.js        |  42 +
 dashboardv2/public/js/models/VSchema.js         |   2 +-
 dashboardv2/public/js/modules/atlasLogin.js     | 129 ++++
 dashboardv2/public/js/router/Router.js          | 181 +++--
 .../asset/AssetPageLayoutView_tmpl.html         |  32 -
 .../audit/AuditTableLayoutView_tmpl.html        |  17 +
 .../audit/CreateAuditTableLayoutView_tmpl.html  |  26 +
 .../business_catalog/AddTermView_tmpl.html      |  25 +
 .../BusinessCatalogDetailLayoutView_tmpl.html   |  75 ++
 .../business_catalog/BusinessCatalogHeader.html |  32 +
 .../BusinessCatalogLayoutView_tmpl.html         |  29 +
 .../MoveTermLayoutView_tmpl.html                |  19 +
 .../SideNavLayoutView_tmpl.html                 |  37 +
 .../js/templates/common/aboutAtlas_tmpl.html    |   2 +-
 .../public/js/templates/common/modal.html       |  16 +-
 .../detail_page/DetailPageLayoutView_tmpl.html  |  91 ++-
 .../templates/graph/LineageLayoutView_tmpl.html |   4 +-
 .../search/SearchDetailLayoutView_tmpl.html     |  25 +
 .../templates/search/SearchLayoutView_tmpl.html |  37 +-
 .../search/SearchResultLayoutView_tmpl.html     |  22 +
 .../public/js/templates/site/header.html        |  48 +-
 .../templates/tag/AddTagAttributeView_tmpl.html |  23 +
 .../tag/TagAttributeDetailLayoutView_tmpl.html  |  30 +
 .../templates/tag/TagDetailLayoutView_tmpl.html |  27 +
 .../tag/TagDetailTableLayoutView_tmpl.html      |   2 +-
 .../js/templates/tag/TagLayoutView_tmpl.html    |  29 +-
 .../tag/addTagAttributeItemView_tmpl.html       |  23 -
 .../js/templates/tag/addTagModalView_tmpl.html  |   8 +-
 .../templates/tag/createTagLayoutView_tmpl.html |  55 +-
 .../public/js/utils/CommonViewFunction.js       |   5 +-
 dashboardv2/public/js/utils/Globals.js          |   6 +
 dashboardv2/public/js/utils/Overrides.js        |   1 -
 dashboardv2/public/js/utils/Utils.js            |  95 ++-
 .../js/views/asset/AssetPageLayoutView.js       | 381 ---------
 .../js/views/audit/AuditTableLayoutView.js      | 156 ++++
 .../views/audit/CreateAuditTableLayoutView.js   | 131 ++++
 .../views/business_catalog/AddTermLayoutView.js |  58 ++
 .../BusinessCatalogDetailLayoutView.js          | 197 +++++
 .../business_catalog/BusinessCatalogHeader.js   | 100 +++
 .../BusinessCatalogLayoutView.js                | 362 +++++++++
 .../business_catalog/MoveTermLayoutView.js      |  75 ++
 .../views/business_catalog/SideNavLayoutView.js | 117 +++
 .../views/detail_page/DetailPageLayoutView.js   | 223 ++++--
 .../views/entity/EntityDetailTableLayoutView.js |   3 +-
 .../public/js/views/graph/LineageLayoutView.js  |  21 +-
 .../public/js/views/schema/SchemaLayoutView.js  |  45 +-
 .../js/views/search/SearchDetailLayoutView.js   |  67 ++
 .../public/js/views/search/SearchLayoutView.js  | 221 +++++-
 .../js/views/search/SearchResultLayoutView.js   | 382 +++++++++
 dashboardv2/public/js/views/site/Header.js      |  25 +-
 .../public/js/views/tag/AddTagAttributeView.js  |  55 ++
 .../public/js/views/tag/CreateTagLayoutView.js  |  79 ++
 .../views/tag/TagAttributeDetailLayoutView.js   | 144 ++++
 .../public/js/views/tag/TagDetailLayoutView.js  |  79 ++
 .../js/views/tag/TagDetailTableLayoutView.js    |  10 +-
 .../public/js/views/tag/TagLayoutView.js        | 243 ++++--
 .../js/views/tag/addTagAttributeItemView.js     |  69 --
 .../public/js/views/tag/addTagModalView.js      |  28 +-
 .../public/js/views/tag/createTagsLayoutView.js | 153 ----
 pom.xml                                         |   1 +
 release-log.txt                                 |   1 +
 92 files changed, 5484 insertions(+), 2449 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/gruntfile.js
----------------------------------------------------------------------
diff --git a/dashboardv2/gruntfile.js b/dashboardv2/gruntfile.js
index e5bcc2f..08000a4 100644
--- a/dashboardv2/gruntfile.js
+++ b/dashboardv2/gruntfile.js
@@ -19,18 +19,13 @@
 'use strict';
 
 var git = require('git-rev');
-var LIVERELOAD_PORT = 3010;
-var lrSnippet = require('connect-livereload')({ port: LIVERELOAD_PORT });
-var mountFolder = function(connect, dir) {
-    return connect.static(require('path').resolve(dir));
-};
 module.exports = function(grunt) {
     var classPathSep = (process.platform === "win32") ? ';' : ':',
         gitHash = '',
         pkg = grunt.file.readJSON('package.json'),
         distPath = 'dist',
         publicPath = 'public',
-        libPath =  distPath + '/js/libs',
+        libPath = distPath + '/js/libs',
         isDashboardDirectory = grunt.file.isDir('public'),
         modulesPath = 'public/';
     if (!isDashboardDirectory) {
@@ -42,20 +37,17 @@ module.exports = function(grunt) {
 
     grunt.initConfig({
         watch: {
-            options: {
-                livereload: 35729
-            },
             js: {
                 files: ['public/**/*.js'],
-                tasks: ['shell']
+                tasks: ['copy:dist']
             },
             html: {
                 files: ['public/**/*.html'],
                 tasks: ['copy:dist']
             },
             css: {
-                files: ['public/**/*.css'],
-                tasks: ['copy:dist']
+                files: ['public/**/*.scss', 'public/**/*.css'],
+                tasks: ['sass', 'copy:dist']
             },
             image: {
                 files: ['public/**/*.{ico,gif,png}'],
@@ -66,10 +58,7 @@ module.exports = function(grunt) {
             server: {
                 options: {
                     port: 9999,
-                    base: 'public',
-                    keepalive: true,
-                    //logger: 'dev',
-                    //debug: true,
+                    base: distPath,
                     // change this to '0.0.0.0' to access the server from outside
                     hostname: '0.0.0.0',
                     middleware: function(connect, options, defaultMiddleware) {
@@ -93,55 +82,6 @@ module.exports = function(grunt) {
                     //xforward: false
                 }],
             },
-            livereload: {
-                options: {
-                    middleware: function(connect) {
-                        return [
-                            require('grunt-connect-proxy/lib/utils').proxyRequest,
-                            mountFolder(connect, 'public')
-                        ];
-                    }
-                }
-            },
-            dist: {
-                options: {
-                    middleware: function(connect) {
-                        return [
-                            mountFolder(connect, publicPath)
-                        ];
-                    }
-                }
-            }
-        },
-        concurrent: {
-            tasks: ['watch', 'connect'],
-            options: {
-                logConcurrentOutput: true
-            }
-        },
-        dist: distPath + '/js/app.min.js',
-        modules: grunt.file.expand(
-            modulesPath + 'js/app.js',
-            modulesPath + 'js/config.js',
-            modulesPath + 'js/routes.js',
-            modulesPath + 'js/init.js'
-        ).join(' '),
-        shell: {
-            min: {
-                command: ''
-                    /*command: 'java ' +
-                    '-cp ' + distPath + '/lib/closure-compiler/compiler.jar' + classPathSep +
-                    '' + distPath + '/lib/ng-closure-runner/ngcompiler.jar ' +
-                    'org.angularjs.closurerunner.NgClosureRunner ' +
-                    '--compilation_level SIMPLE_OPTIMIZATIONS ' +
-                    //'--formatting PRETTY_PRINT ' +
-                    '--language_in ECMASCRIPT5_STRICT ' +
-                    '--angular_pass ' +
-                    '--manage_closure_dependencies ' +
-                    '--js <%= modules %> ' +
-                    '--js_output_file <%= dist %>'
-        */
-            }
         },
         devUpdate: {
             main: {
@@ -186,7 +126,9 @@ module.exports = function(grunt) {
                     'd3': 'd3/d3.min.js',
                     'd3/': 'd3-tip/index.js',
                     'noty/js': 'noty/js/noty/packaged/jquery.noty.packaged.min.js',
-                    'dagre-d3': 'dagre-d3/dist/dagre-d3.min.js'
+                    'dagre-d3': 'dagre-d3/dist/dagre-d3.min.js',
+                    'jstree': 'jstree/dist/jstree.min.js',
+                    'select2': 'select2/dist/js/select2.min.js'
                 }
             },
             css: {
@@ -202,16 +144,23 @@ module.exports = function(grunt) {
                     'backgrid-paginator/css': 'backgrid-paginator/backgrid-paginator.css',
                     'backgrid-sizeable-columns/css': 'backgrid-sizeable-columns/backgrid-sizeable-columns.css',
                     'jquery-asBreadcrumbs/css': 'jquery-asBreadcrumbs/css/asBreadcrumbs.css',
-                    'noty/css': 'noty/js/noty/packaged/jquery.noty.packaged.min.js'
+                    'select2/css': 'select2/dist/css/select2.min.css'
                 }
 
             }
         },
+        sass: {
+            dist: {
+                files: {
+                    'dist/css/style.css': 'dist/css/scss/style.scss'
+                }
+            }
+        },
         copy: {
             dist: {
                 expand: true,
                 cwd: modulesPath,
-                src: ['**', 'js/**/*.js', '!modules/**/*.js'],
+                src: ['**', '!**/*.sass'],
                 dest: distPath
             }
         },
@@ -225,6 +174,7 @@ module.exports = function(grunt) {
 
     grunt.loadNpmTasks('grunt-connect-proxy');
     grunt.loadNpmTasks('grunt-contrib-connect');
+    grunt.loadNpmTasks('grunt-contrib-watch');
     grunt.loadNpmTasks('grunt-npmcopy');
 
 
@@ -243,17 +193,19 @@ module.exports = function(grunt) {
         'npmcopy:js',
         'npmcopy:css',
         'copy:dist',
+        'sass',
         'configureProxies:server',
         'connect:server',
-        'concurrent',
+        /* 'concurrent',*/
         'watch',
-        'connect:livereload'
+        /*'connect:livereload'*/
     ]);
 
     grunt.registerTask('build', [
         'npmcopy:js',
         'npmcopy:css',
-        'copy:dist'
+        'copy:dist',
+        'sass'
     ]);
 
     grunt.registerTask('minify', 'Minify the all js', function() {

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/package.json
----------------------------------------------------------------------
diff --git a/dashboardv2/package.json b/dashboardv2/package.json
index 9564566..dc92d3d 100644
--- a/dashboardv2/package.json
+++ b/dashboardv2/package.json
@@ -34,9 +34,11 @@
     "jquery": "^2.2.2",
     "jquery-asBreadcrumbs": "git+https://github.com/amazingSurge/jquery-asBreadcrumbs.git",
     "jquery-ui": "^1.10.4",
+    "jstree": "^3.3.0",
     "noty": "^2.3.8",
     "requirejs": "^2.1.16",
     "requirejs-text": "^2.0.12",
+    "select2": "^4.0.2",
     "underscore": "^1.8.3"
   },
   "devDependencies": {
@@ -57,6 +59,7 @@
     "grunt-nginx": "~0.2.2",
     "grunt-nodemon": "^0.4.0",
     "grunt-npmcopy": "^0.1.0",
+    "grunt-sass": "^1.1.0",
     "grunt-shell": "^1.1.1",
     "load-grunt-tasks": "^3.1.0",
     "proxit": "~0.6.4"

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/css/bootstrap-sidebar.css
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/bootstrap-sidebar.css b/dashboardv2/public/css/bootstrap-sidebar.css
index 788466b..5f9d5c3 100644
--- a/dashboardv2/public/css/bootstrap-sidebar.css
+++ b/dashboardv2/public/css/bootstrap-sidebar.css
@@ -21,10 +21,10 @@
 #sidebar-wrapper {
     z-index: 1000;
     position: fixed;
-    left: 300px;
+    left: 350px;
     width: 0;
     height: 100%;
-    margin-left: -300px;
+    margin-left: -350px;
     overflow-y: auto;
     background: #323544;
     -webkit-transition: all 0.5s ease;
@@ -34,7 +34,7 @@
 }
 
 #wrapper.toggled #sidebar-wrapper {
-    width: 300px;}
+    width: 350px;}
 
 #page-content-wrapper {
     width: 100%;
@@ -43,51 +43,40 @@
 
 #wrapper.toggled #page-content-wrapper {
     position: absolute;
-    margin-right: -300px;
+    margin-right: -350px;
 }
 
 /* Sidebar Styles */
-
-.sidebar-nav, .sidebar-components {
+.sidebar-nav {
     margin: 0;
     padding: 0;
     list-style: none;
 }
 
-.sidebar-nav li {
+.sidebar-nav > li {
     line-height: 50px;
     padding: 0 20px;
     border-bottom: 1px #1c1e2a solid;
 }
-.sidebar-components li {
-    line-height: 40px;
-    padding: 0 20px;
-}
-.sidebar-components li:hover {
-    background-color: #1d1f2b;
-}
-
-.sidebar-nav li a ,
-.sidebar-components li a {
+.sidebar-nav > li a {
     display: block;
     text-decoration: none;
     color: #fff;
 }
 
-.sidebar-nav li a:hover {
+.sidebar-nav > li a:hover {
     text-decoration: none;
     color: #fff;
 }
 
-.sidebar-nav li a:active,
-.sidebar-nav li a:focus {
+.sidebar-nav > li a:active,
+.sidebar-nav > li a:focus {
     text-decoration: none;
 }
 
 .sidebar-nav > .sidebar-brand {
     font-size: 18px;
-    line-height: 35px;
-    padding: 10px;
+    line-height: 60px;
 }
 
 .sidebar-nav > .sidebar-brand a {
@@ -100,18 +89,7 @@
     background: none;
 }
 
-/* Extended Eleemnts */
-.sidebar-actions a {
-    display: inline-block !important;
-    margin-right: 20px;
-    color: #359f89 !important;
-}
-.sidebar-actions a i {
-    color: #fff;
-}
-.sidebar-actions a:hover {
-    background-color: transparent;
-}
+/* Extended Elements */
 .sidebar-input .input-group {
     margin: 10px 0px;
 }
@@ -131,24 +109,10 @@
 .sidebar-input .form-control:focus + .input-group-addon {
     border-color: #66afe9;
 }
-.sidebar-item:hover,
-.sidebar-item.active {
-    background-color: #1d1f2b;
-}
-.component-badge {
-    float: right;
-    margin-top: 8px;
-    padding: 0px 10px 2px 10px;
-    background-color: #4990e2;
-    color: #fff;
-    font-size: 12px;
-    line-height: 22px;
-    border-radius: 12px;
-}
 
 @media(min-width:768px) {
     #wrapper {
-        padding-left: 300px;
+        padding-left: 350px;
     }
 
     #wrapper.toggled {
@@ -156,7 +120,7 @@
     }
 
     #sidebar-wrapper {
-        width: 300px;    }
+        width: 350px;    }
 
     #wrapper.toggled #sidebar-wrapper {
         width: 0;

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/css/business-catlog.css
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/business-catlog.css b/dashboardv2/public/css/business-catlog.css
deleted file mode 100644
index 780fa1a..0000000
--- a/dashboardv2/public/css/business-catlog.css
+++ /dev/null
@@ -1,206 +0,0 @@
-/*
- * 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.
- */
-
-body {
-    font-family: 'Raleway', sans-serif;
-    background-color: #E6E6E6;
-    /* color: #686868;*/
-}
-
-a {
-    color: #359f89;
-}
-
-header {
-    background-color: #fff;
-    border-bottom: 1px #e7e8ed solid;
-}
-
-textarea:focus,
-button:focus {
-    outline: none !important;
-}
-
-textarea {
-    resize: none;
-}
-
-
-/* Bootstrap Extended */
-
-.form-control:focus {
-    box-shadow: none;
-}
-
-.breadcrumb {
-    padding: 8px 25px;
-    background-color: transparent;
-    margin-bottom: 0px;
-    font-weight: 600;
-    line-height: 44px;
-}
-
-.breadcrumb>li+li:before {
-    padding: 0 10px;
-    font-family: FontAwesome;
-    color: #686868;
-    content: "\f105";
-}
-
-.well {
-    background-color: #f6f7fa;
-    border: 1px solid #e8e9ef;
-}
-
-
-/* Header */
-
-.main-search .form-control {
-    border: none;
-    border-left: 1px #e7e8ed solid;
-    border-radius: 0px;
-    box-shadow: none;
-    height: 60px;
-    font-size: 18px;
-    font-style: italic;
-    -webkit-font-smoothing: antialiased;
-}
-
-.main-search .input-group-addon {
-    font-size: 20px;
-    color: #b5b9bc;
-    background: none;
-    border: none;
-}
-
-.page-title {
-    background-color: #fff;
-    padding: 50px;
-}
-
-.page-title h1 {
-    margin-top: 0px;
-    margin-bottom: 20px;
-    font-weight: 600;
-    -webkit-font-smoothing: antialiased;
-}
-
-.page-title h1 small {
-    position: relative;
-    bottom: 5px;
-    margin-left: 15px;
-    padding-left: 15px;
-    border-left: 1px #e8e9ef solid;
-    color: #b4b7bc;
-    font-size: 40%;
-    font-weight: 600;
-    text-transform: uppercase;
-}
-
-.page-title .sub-title {
-    margin-bottom: 40px;
-}
-
-
-/* Atlas Specific */
-
-.atlast-tabbable {
-    margin: 50px 0px;
-}
-
-.atlast-tabbable .nav-tabs {
-    border-bottom: 1px solid #e8e9ee;
-}
-
-.atlast-tabbable .nav-tabs>li>a {
-    padding: 15px 30px;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    border-radius: 2px 2px 0 0;
-}
-
-.atlast-tabbable .nav-tabs>li.active>a,
-.atlast-tabbable .nav-tabs>li.active>a:focus,
-.atlast-tabbable .nav-tabs>li.active>a:hover {
-    border: 1px solid #e8e9ee;
-    border-bottom-color: transparent;
-}
-
-.atlast-tabbable .tab-content {
-    background-color: #fff;
-    padding: 35px;
-    border: 1px solid #e8e9ee;
-    border-top: none;
-}
-
-.btn-atlas {
-    padding: 10px 20px;
-    background-color: #fff;
-    color: #37bb9b;
-    border: 1px #37bb9b solid;
-    border-radius: 4px;
-    -webkit-transition: all .3s ease;
-    -moz-transition: all .3s ease;
-    transition: all .3s ease;
-}
-
-.btn-atlas:hover {
-    background-color: #37bb9b;
-    color: #fff;
-}
-
-.btn-tag {
-    color: #4a90e2;
-    border: 1px #4a90e2 solid;
-    background-color: #fff;
-    border-radius: 4px;
-    -webkit-transition: all .3s ease;
-    -moz-transition: all .3s ease;
-    transition: all .3s ease;
-}
-
-.btn-tag:hover {
-    color: #fff;
-    background-color: #4a90e2;
-}
-
-.breadcrumb > li {
-    display: inline-block;
-}
-
-.breadcrumb-dropdown + li:before,
-.breadcrumb-ellipsis + li:before {
-    display: none;
-}
-
-.breadcrumb-menu {
-    display: none
-}
-
-.sidebar-item.active i {
-    display: block !important;
-}
-
-.arrowPosition {
-    left: -75px;
-}
-
-.dropdown-menu>li>a {
-    color: #359f89;
-    padding: 6px 20px;
-}

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/css/fonts/fontawesome-webfont.svg
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/fonts/fontawesome-webfont.svg b/dashboardv2/public/css/fonts/fontawesome-webfont.svg
index 5603c72..d05688e 100644
--- a/dashboardv2/public/css/fonts/fontawesome-webfont.svg
+++ b/dashboardv2/public/css/fonts/fontawesome-webfont.svg
@@ -652,4 +652,4 @@
 <glyph unicode="&#xf29e;" horiz-adv-x="1792" />
 <glyph unicode="&#xf500;" horiz-adv-x="1792" />
 </font>
-</defs></svg>
\ No newline at end of file
+</defs></svg> 
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/css/fonts/glyphicons-halflings-regular.svg
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/fonts/glyphicons-halflings-regular.svg b/dashboardv2/public/css/fonts/glyphicons-halflings-regular.svg
index f155876..94fb549 100644
--- a/dashboardv2/public/css/fonts/glyphicons-halflings-regular.svg
+++ b/dashboardv2/public/css/fonts/glyphicons-halflings-regular.svg
@@ -285,4 +285,4 @@
 <glyph unicode="&#x1f511;" d="M250 1200h600q21 0 35.5 -14.5t14.5 -35.5v-400q0 -21 -14.5 -35.5t-35.5 -14.5h-150v-500l-255 -178q-19 -9 -32 -1t-13 29v650h-150q-21 0 -35.5 14.5t-14.5 35.5v400q0 21 14.5 35.5t35.5 14.5zM400 1100v-100h300v100h-300z" />
 <glyph unicode="&#x1f6aa;" d="M250 1200h750q39 0 69.5 -40.5t30.5 -84.5v-933l-700 -117v950l600 125h-700v-1000h-100v1025q0 23 15.5 49t34.5 26zM500 525v-100l100 20v100z" />
 </font>
-</defs></svg>
\ No newline at end of file
+</defs></svg> 
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/css/override.css
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/override.css b/dashboardv2/public/css/override.css
deleted file mode 100644
index e3ebb10..0000000
--- a/dashboardv2/public/css/override.css
+++ /dev/null
@@ -1,204 +0,0 @@
-/**
- * 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.
- */
-
-#old header a.mainLogo {
-    color: #FFF;
-    font-size: 16px;
-    line-height: 40px;
-    padding: 2px 5px 0 15px;
-    text-shadow: 0 1px 0 #555;
-}
-
-#old footer.navbar-bottom {
-    background-color: #fafafa;
-    border-top: solid 4px #444;
-    position: absolute;
-    bottom: 0px;
-    width: 100%;
-    height: 60px;
-}
-
-#old .footer {
-    padding: 7px;
-}
-
-#old .tab a {
-    color: #000;
-}
-
-#old .backgrid th {
-    text-align: left;
-}
-
-#old .backgrid a,
-#old table a {
-    color: #428bca;
-}
-
-.backgrid th {
-    text-transform: capitalize;
-}
-
-#old .fa-refresh {
-    color: #333;
-}
-
-#old .tagList a {
-    display: inline-block;
-    text-transform: capitalize;
-    background: #ADD8E6 !important;
-    color: #333 !important;
-    padding: 3px 6px;
-    margin: 0px 3px 3px 0px;
-    cursor: pointer;
-    float: left;
-}
-
-#old .tagList a i.fa[data-id="delete"] {
-    margin-left: 5px;
-}
-
-#old .scrollTagList .list-group-item {
-    word-break: break-all;
-}
-
-
-/*
-#old .tagList a {
-    max-width: 100px;
-    display: list-item;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    -o-text-overflow: ellipsis;
-    white-space: nowrap;
-    text-transform: capitalize;
-    float: left;
-    background: #ADD8E6 !important;
-    color: #000 !important;
-    margin: 4px !important;
-    padding-left: 7px !important;
-    padding-right: 7px !important;
-    cursor: pointer;
-}*/
-
-#new footer {
-    display: none;
-}
-
-.nav-tabs > li.active > a,
-.nav-tabs > li.active > a:focus,
-.nav-tabs > li.active > a:hover {
-    border-width: 0;
-}
-
-.nav-tabs > li > a {
-    border: none;
-    color: #666;
-}
-
-.nav-tabs > li.active > a,
-.nav-tabs > li > a:hover {
-    border: none;
-    color: #359f89 !important;
-}
-
-.nav-tabs > li > a:after {
-    content: "";
-    background: #359f89;
-    height: 2px;
-    position: absolute;
-    width: 100%;
-    left: 0px;
-    top: -1px;
-    transition: all 250ms ease 0s;
-    transform: scale(0);
-}
-
-.nav-tabs > li > a:hover:after {
-    background: #359f89;
-}
-
-.nav-tabs > li.active > a:after,
-.nav-tabs > li:hover > a:after {
-    transform: scale(1);
-}
-
-.tab-nav > li > a:after {
-    background: #21527d none repeat scroll 0% 0%;
-    color: #fff;
-}
-
-.tab-pane {
-    padding: 15px 0;
-}
-
-.sidebar-nav .dropdown-menu li {
-    border-bottom: none;
-    color: #323544;
-}
-
-.sidebar-nav .dropdown-menu li a:hover,
-.sidebar-nav .dropdown-menu li a {
-    color: #323544;
-}
-
-.sidebar-nav .dropdown-menu li:hover {
-    background: #E4E4E4;
-}
-
-.sidebar-nav .dropdown-menu:after {
-    position: absolute;
-    top: -6px;
-    left: 10px;
-    display: inline-block;
-    border-right: 6px solid transparent;
-    border-bottom: 6px solid #ffffff;
-    border-left: 6px solid transparent;
-    content: '';
-}
-
-.breadcrumb-ellipsis {
-    color: #359f89;
-    cursor: pointer;
-    display: none !important;
-}
-
-.breadcrumb>li:last-child a {
-    color: #b4b7bc;
-}
-
-.atlas-tag .select2-selection__choice {
-    padding: 3px 6px !important;
-    background-color: #4a90e2 !important;
-    color: #fff !important;
-    font-size: 12px;
-    text-transform: uppercase;
-    border-radius: 4px;
-}
-
-.atlas-tag .select2-selection__choice__remove {
-    font-size: 17px;
-    line-height: 14px;
-    margin: 0px 6px !important;
-    color: #fff !important;
-    float: right;
-}
-
-.breadcrumb-dropdown .popover.bottom {
-    margin-top: 35px;
-}

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/css/scss/breadcrumb.scss
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/scss/breadcrumb.scss b/dashboardv2/public/css/scss/breadcrumb.scss
new file mode 100644
index 0000000..eaa89e7
--- /dev/null
+++ b/dashboardv2/public/css/scss/breadcrumb.scss
@@ -0,0 +1,43 @@
+/*  breadcrumb.scss */
+
+.breadcrumb {
+    padding: 8px 25px;
+    background-color: transparent;
+    margin-bottom: 0;
+    font-weight: 600;
+    line-height: 44px;
+    > li {
+        display: inline-block;
+        + li:before {
+            padding: 0 10px;
+            font-family: $font_2;
+            color: $color_ironside_gray_approx;
+            content: "\f105";
+        }
+    }
+}
+
+.breadcrumb-menu,
+.breadcrumb-dropdown + li:before,
+.breadcrumb-ellipsis + li:before {
+    display: none;
+}
+
+.dropdown .fa-ellipsis-h {
+    position: relative;
+    top: 4px;
+}
+
+.breadcrumb-ellipsis {
+    color: #359f89;
+    cursor: pointer;
+    display: none !important;
+}
+
+.breadcrumb-dropdown .popover.bottom {
+    margin-top: 45px;
+}
+
+.breadcrumb>li:last-child a {
+    color: #b4b7bc;
+}

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/css/scss/business-catlog.scss
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/scss/business-catlog.scss b/dashboardv2/public/css/scss/business-catlog.scss
new file mode 100644
index 0000000..d00a32b
--- /dev/null
+++ b/dashboardv2/public/css/scss/business-catlog.scss
@@ -0,0 +1,97 @@
+/* business-catlog.scss */
+.main-search {
+    .form-control {
+        border: none;
+        border-left: 1px $color_mystic_approx solid;
+        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+        border-radius: 0;
+        //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
+        box-shadow: none;
+        height: 60px;
+        font-size: 18px;
+        font-style: italic;
+    }
+    .input-group-addon {
+        font-size: 20px;
+        color: $color_bombay_approx;
+        background: none;
+        border: none;
+    }
+}
+
+.page-title {
+    background-color: $white;
+    padding: 50px;
+    h1 {
+        margin-top: 0;
+        margin-bottom: 20px;
+        font-weight: 600;
+        small {
+            position: relative;
+            bottom: 5px;
+            margin-left: 15px;
+            padding-left: 15px;
+            border-left: 1px $color_mystic_approx solid;
+            color: $color_bombay_approx;
+            font-size: 40%;
+            font-weight: 600;
+            text-transform: uppercase;
+        }
+    }
+    .sub-title {
+        margin-bottom: 40px;
+    }
+}
+
+.arrowPosition {
+    left: -75px;
+}
+
+.sidebar-item.active i {
+    display: block !important;
+}
+
+.dropdown-menu > li > a {
+    color: $color_jungle_green_approx;
+    padding: 6px 20px;
+}
+
+.branchListParent {
+    .parentActive {
+        background: none;
+    }
+    .fa {
+        line-height: 40px;
+    }
+}
+
+ul[data-id=branchList] {
+    .fa {
+        line-height: 40px;
+    }
+    li {
+        padding-left: 50px;
+    }
+}
+
+.branchChildDiv {
+    padding-left: 15px;
+}
+
+.branchListParentInput {
+    padding-bottom: 18px;
+    display: list-item;
+    .form-control {
+        border-right: none;
+        //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
+        box-shadow: none;
+        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+        border-radius: 4px;
+    }
+    .input-group-addon {
+        background-color: $white;
+    }
+}
+.listTerm{
+    padding-bottom:5px;
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/css/scss/form.scss
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/scss/form.scss b/dashboardv2/public/css/scss/form.scss
new file mode 100644
index 0000000..f5f9672
--- /dev/null
+++ b/dashboardv2/public/css/scss/form.scss
@@ -0,0 +1,186 @@
+/* form.scss */
+
+.form-control {
+    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+    background-color: $color_white_lilac_approx;
+    border: 1px $color_mystic_approx solid;
+    &:focus {
+        border-color: $color_bali_hai_approx;
+        outline: 0;
+        //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
+        box-shadow: inset 0 1px 1px $black_7_5, 0 0 2px $color_bali_hai_approx;
+    }
+}
+
+.sidebar-wrapper .form-control {
+    background-color: $white;
+    border: 1px $white solid;
+}
+
+.well {
+    background-color: $color_whisper_approx;
+    border: 1px solid $color_mystic_approx;
+}
+
+textarea {
+    resize: none;
+    &:focus {
+        outline: none !important;
+    }
+}
+
+button:focus {
+    outline: none !important;
+}
+
+.btn {
+    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+    border-radius: 0;
+}
+
+.btn-primary {
+    color: $white;
+    background-color: $color_blue_bayoux_approx;
+    border-color: $color_blue_bayoux_approx;
+    &:hover {
+        color: $white;
+        background-color: $color_pickled_bluewood_approx;
+        border-color: $color_pickled_bluewood_approx;
+    }
+}
+
+.btn-success {
+    color: $white;
+    background-color: $color_jungle_green_approx;
+    border-color: $color_jungle_green_approx;
+    &:hover {
+        color: $white;
+        background-color: $color_jungle_green_approx;
+        border-color: $color_jungle_green_approx;
+    }
+}
+
+.btn-info {
+    color: $white;
+    background-color: $color_picton_blue_approx;
+    border-color: $color_picton_blue_approx;
+    &:hover {
+        color: $white;
+        background-color: $color_curious_blue_approx;
+        border-color: $color_curious_blue_approx;
+    }
+}
+
+.btn-warning {
+    color: $white;
+    background-color: $color_yellow_sea_approx;
+    border-color: $color_yellow_sea_approx;
+    &:hover {
+        color: $white;
+        background-color: $color_gamboge_approx;
+        border-color: $color_gamboge_approx;
+    }
+}
+
+.btn-danger {
+    color: $white;
+    background-color: $color_trinidad_approx;
+    border-color: $color_trinidad_approx;
+    &:hover {
+        color: $white;
+        background-color: $color_grenadier_approx;
+        border-color: $color_grenadier_approx;
+    }
+}
+
+.btn-atlas {
+    padding: 10px 20px;
+    background-color: $color_keppel_approx;
+    color: $white;
+    border: 1px $color_keppel_approx solid;
+    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+    border-radius: 4px;
+    //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
+    transition: all .3s ease;
+    margin:2px;
+    &.cancel {
+        background-color: $transparent;
+        color: $color_keppel_approx;
+        &:hover {
+            color: $color_keppel_approx;
+            background-color: $transparent;
+        }
+        &:focus {
+            background-color: $transparent;
+            color: $color_keppel_approx;
+        }
+    }
+    &:focus {
+        background-color: $color_keppel_approx;
+        color: $white;
+    }
+    &:hover {
+        color: $white;
+    }
+}
+
+.btn-tag {
+    color: $color_havelock_blue_approx;
+    border: 1px $color_havelock_blue_approx solid;
+    background-color: $white;
+    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+    border-radius: 4px;
+    //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
+    transition: all .3s ease;
+    &:hover {
+        color: $white;
+        background-color: $color_havelock_blue_approx;
+    }
+}
+
+.btn-taxanomyBack {
+    background-color: $transparent;
+    color: $color_keppel_approx;
+    margin-bottom: 10px;
+    &:hover {
+        color: $color_keppel_approx;
+    }
+    &:focus {
+        background-color: $transparent;
+        color: $color_keppel_approx;
+    }
+}
+
+.input-spacing {
+    padding-bottom: 10px!important;
+}
+.input-group-btn .glyphicon {
+    top: 2px;
+}
+.pagination > .active {
+    > a {
+        background-color: $color_curious_blue_approx;
+        border-color: $color_curious_blue_approx;
+        &:focus {
+            background-color: $color_curious_blue_approx;
+            border-color: $color_curious_blue_approx;
+        }
+        &:hover {
+            background-color: $color_curious_blue_approx;
+            border-color: $color_curious_blue_approx;
+        }
+    }
+    
+    > span {
+        background-color: $color_curious_blue_approx;
+        border-color: $color_curious_blue_approx;
+        &:focus {
+            background-color: $color_curious_blue_approx;
+            border-color: $color_curious_blue_approx;
+        }
+        &:hover {
+            background-color: $color_curious_blue_approx;
+            border-color: $color_curious_blue_approx;
+        }
+    }
+}

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/css/scss/graph.scss
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/scss/graph.scss b/dashboardv2/public/css/scss/graph.scss
new file mode 100644
index 0000000..ec6df2d
--- /dev/null
+++ b/dashboardv2/public/css/scss/graph.scss
@@ -0,0 +1,76 @@
+/* graph.scss */
+/* .graph-bg svg {
+    background-image: linear-gradient(to right, $black -10px, rgba(0, 0, 0, 0) 1px), linear-gradient($black -10px, $color_cararra_approx 1px);
+    background-size: 10px 10px;
+    position: relative;
+} */
+
+.node {
+    cursor: pointer;
+    circle {
+        fill: $white;
+        stroke: $steel_blue;
+        stroke-width: 1.5px;
+    }
+    text {
+        font-size: 10px;
+        font-family: $font_1;
+    }
+    rect {
+        stroke: $color_mountain_mist_approx;
+        fill: $white;
+        stroke-width: 1.5px;
+    }
+    .label {
+        fill: $color_suva_gray_approx;
+    }
+}
+
+.overlay {}
+
+.link {
+    fill: none;
+    stroke: $color_celeste_approx;
+    stroke-width: 1.5px;
+}
+
+.d3-tip {
+    line-height: 1;
+    font-weight: bold;
+    padding: 12px;
+    background: $black_80;
+    color: $white;
+    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+    border-radius: 2px;
+    &:after {
+        //Instead of the line below you could use @include box-sizing($bs)
+        box-sizing: border-box;
+        display: inline;
+        font-size: 10px;
+        width: 100%;
+        line-height: 1;
+        color: $black_80;
+        content: "\25BC";
+        position: absolute;
+        text-align: center;
+    }
+    &.n:after {
+        margin: -1px 0 0;
+        top: 100%;
+        left: 0;
+    }
+}
+
+g.type-TK > rect {
+    fill: $color_bright_turquoise_approx;
+}
+
+.edgePath path {
+    stroke: $black;
+}
+
+.zoomButtonGroup {
+    position: absolute;
+    top: 4px;
+    right: 5px;
+}

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/css/scss/loader.scss
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/scss/loader.scss b/dashboardv2/public/css/scss/loader.scss
new file mode 100644
index 0000000..6c255c6
--- /dev/null
+++ b/dashboardv2/public/css/scss/loader.scss
@@ -0,0 +1,57 @@
+/* loader.scss */
+
+.fa-spin-custom {
+    animation: spin 1000ms infinite linear;
+}
+
+.glyphicon-spin {
+    animation: spin 1000ms infinite linear;
+}
+
+@-webkit-keyframes spin {
+    0% {
+        //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
+        transform: rotate(0deg);
+    }
+    100% {
+        //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
+        transform: rotate(359deg);
+    }
+}
+
+@keyframes spin {
+    0% {
+        //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
+        transform: rotate(0deg);
+    }
+    100% {
+        //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
+        transform: rotate(359deg);
+    }
+}
+
+.loader {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    text-align: center;
+    z-index: 9;
+    background: $white_80 $url_0 no-repeat center center;
+}
+
+.fontLoader {
+    top: 50%;
+    left: 50%;
+    position: absolute;
+    display: none;
+}
+
+.initialLoading {
+    display: block;
+    position: absolute;
+    margin-top: 30%;
+    right: 50%;
+    height: 60px;
+}

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/css/scss/login.scss
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/scss/login.scss b/dashboardv2/public/css/scss/login.scss
new file mode 100644
index 0000000..c7237cc
--- /dev/null
+++ b/dashboardv2/public/css/scss/login.scss
@@ -0,0 +1,71 @@
+/* login.scss */
+
+//colors
+.errorBox {
+    position: absolute;
+    right: 36px;
+    display: none;
+    top: 26px;
+    width: 251px;
+    .alert {
+        //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
+        box-shadow: 4px 3px 8px -2px $gray;
+    }
+}
+.close {
+    padding: 6px;
+    font-size: 15px;
+}
+.login-pane {
+    margin-top: 50px;
+    margin-top: 35%;
+    background: $color_tuna_approx;
+    color: $color_gallery_approx;
+    padding: 15px;
+    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+    border-radius: 5px;
+    h2 {
+        margin-bottom: 40px;
+    }
+    .input-group {
+        margin: 20px 0;
+    }
+    .form-control {
+        background-color: transparent;
+        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+        border-radius: 0;
+        border-left: none;
+        color: $color_gallery_approx;
+        &:focus {
+            border-color: $color_celeste_approx;
+            + .input-group-addon {
+                border-color: $color_cornflower_blue_approx;
+            }
+        }
+    }
+    .input-group-addon {
+        background-color: transparent;
+        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+        border-radius: 0;
+        border-right: none;
+        color: $color_celeste_approx;
+    }
+    .btn-atlas {
+        padding: 10px 20px;
+        background-color: $color_keppel_approx;
+        color: $white;
+        border: 1px $color_keppel_approx solid;
+        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+        border-radius: 4px;
+        //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
+        transition: all .3s ease;
+    }
+}
+button:focus {
+    outline: none !important;
+}
+.form-control:focus {
+    //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
+    box-shadow: none;
+}
+ 

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/css/scss/main.scss
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/scss/main.scss b/dashboardv2/public/css/scss/main.scss
new file mode 100644
index 0000000..9ee1640
--- /dev/null
+++ b/dashboardv2/public/css/scss/main.scss
@@ -0,0 +1,147 @@
+/* main.scss */
+
+//common color 
+$white: #fff;
+$action_gray:#ccc;
+$color_keppel_approx: #37bb9b;
+$color_gallery_approx: #eee;
+$gray: #808080;
+$color_tuna_approx: #323544;
+$color_celeste_approx: #ccc;
+$color_cornflower_blue_approx: #66afe9;
+$color_mystic_approx: #e8e9ee;
+$color_jungle_green_approx: #38BB9B;
+$color_froly_approx: #ee6e73;
+$color_manatee_approx: #9398a0;
+$black: #000;
+$color_havelock_blue_approx: #4a90e2;
+$color_ironside_gray_approx: #686868;
+$color_mercury_approx: #e6e6e6;
+$color_whisper_approx: #f6f7fa;
+$color_bombay_approx: #b5b9bc;
+$red: red;
+//theme color
+//colors
+$color_white_lilac_approx: #f6f7fb;
+$color_puerto_rico_approx: #3dd4af;
+$color_star_dust_approx: #9a9a9a;
+$color_mirage_approx: #1c1e2a;
+$concrete: #f2f2f2;
+//fonts
+$font_0: Raleway;
+$font_1: sans-serif;
+$font_2: FontAwesome;
+//fonts
+
+/* $font_0: PT Sans;
+$font_1: sans-serif;
+$font_2: Helvetica Neue; */
+
+$font_3: Helvetica;
+$font_4: Arial;
+$font_5: sans-serf;
+//old - style color
+$color_bali_hai_approx: #8fa5b1;
+$transparent:transparent;
+$black_7_5: rgba(0, 0, 0, .075);
+$color_hoki_approx: #698797;
+$color_curious_blue_approx: #1ba9e2;
+$color_blue_bayoux_approx: #44697d;
+$color_pickled_bluewood_approx: #334f5e;
+$color_picton_blue_approx: #3cb5e6;
+$color_yellow_sea_approx: #f5a700;
+$color_gamboge_approx: #de9800;
+$color_trinidad_approx: #e14f00;
+$color_grenadier_approx: #c74600;
+$color_athens_gray_approx: #e9ecf2;
+$color_green_house_approx: #26530c;
+$color_dark_grey_approx:#333;
+$black_10: rgba(0, 0, 0, 0.1);
+$color_cararra_approx: #ececec;
+$black_30: rgba(0, 0, 0, 0.3);
+$color_pizazz_approx: #ff8e00;
+$black_25: rgba(0, 0, 0, 0.25);
+$color_cape_cod_approx: #414141;
+$color_apple_blossom_approx: #a94442;
+$color_mine_shaft_approx: #333;
+$white_80: rgba(255, 255, 255, 0.8);
+$color_alto_approx: #dadada;
+$color_fuscous_gray_approx: #545454;
+$black_65: rgba(0, 0, 0, 0.65);
+$white_25: rgba(255, 255, 255, 0.25);
+$color_fern_approx: #65bd63;
+$color_opal_approx: #a7cec6;
+$white_50: rgba(255, 255, 255, 0.5);
+$black_20: rgba(0, 0, 0, 0.2);
+$color_pelorous_approx: #3aa2d0;
+$color_laser_approx: #c4bb61;
+$color_zombie_approx: #e0dd94;
+$steel_blue: steelblue;
+$black_80: rgba(0, 0, 0, 0.8);
+$color_bright_turquoise_approx: #00ffd0;
+$color_mountain_mist_approx: #999;
+$color_suva_gray_approx: #868686;
+// $tag_color:#9599a0;
+$tag_color:#4A90E2;
+//urls
+$url_0: url(../img/loading.gif);
+.card {
+    background: $white none repeat scroll 0 0;
+    //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
+    box-shadow: 0 1px 3px $black_30;
+    margin-bottom: 30px;
+}
+
+body {
+    font-family: $font_0, $font_1;
+    color: $color_ironside_gray_approx;
+}
+
+.gray-bg {
+    background-color: $color_white_lilac_approx;
+}
+
+header {
+    background-color: $white;
+    border-bottom: 1px $color_mystic_approx solid;
+}
+
+a {
+    color: $color_jungle_green_approx;
+    &:focus {
+        color: $color_puerto_rico_approx;
+        text-decoration: none;
+        outline: none;
+    }
+    &:hover {
+        color: $color_puerto_rico_approx;
+        text-decoration: none;
+    }
+}
+
+hr {
+    border-top: 1px solid #1c1e2a
+}
+
+ul {
+    list-style: none;
+}
+
+.close {
+    font-size: 2em;
+}
+
+#sideNav-wrapper {
+    color: $white;
+}
+
+.contentLoading {
+    position: absolute;
+    background: rgba(247, 247, 247, 0.24);
+    top: 0;
+    right: 0;
+    left: 0;
+    z-index: 99;
+    bottom: 0;
+    display: none;
+}

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/css/scss/nav.scss
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/scss/nav.scss b/dashboardv2/public/css/scss/nav.scss
new file mode 100644
index 0000000..7277ae1
--- /dev/null
+++ b/dashboardv2/public/css/scss/nav.scss
@@ -0,0 +1,50 @@
+/* nav.scss */
+
+.navbar-atlas {
+    background-color: $color_tuna_approx;
+    //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
+    box-shadow: inset 0 0 0 $black_10, 0 1px 10px $black_10;
+    .navbar-brand {
+        color: $white;
+    }
+    .nav > li > a {
+        color: $white;
+        padding-top: 18px;
+        padding-bottom: 18px;
+        font-size: 100%;
+        &:focus {
+            background-color: transparent;
+        }
+        &:hover {
+            background-color: transparent;
+        }
+    }
+}
+
+.navbar-toggle .icon-bar {
+    background-color: $white;
+}
+
+.navbar-fixed-top + .wrapper {
+    margin-top: 90px;
+    padding-bottom: 90px;
+}
+
+.navbar-brand {
+    font-size: 30px;
+    height: auto;
+}
+
+.navbar-form {
+    width: 30%;
+    padding: 0;
+    .form-control {
+        width: 100%;
+        padding: 6px 0;
+        background-color: transparent;
+        color: $white;
+        border: none;
+        //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
+        box-shadow: 0 2px $white;
+    }
+}

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/css/scss/old-style.scss
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/scss/old-style.scss b/dashboardv2/public/css/scss/old-style.scss
new file mode 100644
index 0000000..f62c494
--- /dev/null
+++ b/dashboardv2/public/css/scss/old-style.scss
@@ -0,0 +1,161 @@
+/* old-style.scss */
+
+//@extend-elements
+//original selectors
+//.inputs button.addAttr, .inputs button.saveAttr
+%extend_1 {
+    height: 40px;
+    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+    border-radius: 4px;
+    border: 1px solid $white;
+    color: $white;
+    //Instead of the line below you could use @include text-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
+    text-shadow: 0 -1px 0 $black_25;
+    font-weight: bold;
+}
+
+.row-margin-bottom {
+    margin-bottom: 15px;
+}
+
+.list-group-item {
+    &:first-child {
+        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+        border-radius: 0;
+    }
+    &:last-child {
+        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+        border-radius: 0;
+    }
+}
+
+.h160 {
+    height: 160px !important;
+}
+
+.subContent {
+    width: 500px;
+    margin: 30px;
+}
+
+.headerDroupDown {
+    border-left: 1px solid $white;
+    font-size: 11px;
+    padding-left: 15px;
+    margin-left: 15px;
+}
+
+
+/* .switch {
+    float: left;
+    margin-top: 4px;
+    position: absolute;
+    z-index: 99;
+    top: 0;
+    left: 20px;
+    height: 26px;
+    width: 120px;
+    background: $color_alto_approx;
+    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+    border-radius: 3px;
+    //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
+    box-shadow: inset 0 1px 3px $color_fuscous_gray_approx, 0 1px $white;
+} */
+
+
+/* .switch-label {
+    position: relative;
+    z-index: 2;
+    float: left;
+    width: 58px;
+    line-height: 26px;
+    font-size: 11px;
+    text-align: center;
+    cursor: pointer;
+    &:active {
+        font-weight: bold;
+    }
+}
+
+.switch-label-off {
+    padding-left: 2px;
+}
+
+.switch-label-on {
+    padding-right: 2px;
+}
+
+.switch-input {
+    display: none;
+    &:checked + {
+        &.switch-label {
+            font-weight: bold;
+            color: $black_65;
+            //Instead of the line below you could use @include text-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
+            text-shadow: 0 1px $white_25;
+            //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
+            transition: 0.15s ease-out;
+        }
+        &.switch-label-on ~ .switch-selection {
+            left: 60px;
+        }
+    }
+}
+
+.switch-selection {
+    display: block;
+    position: absolute;
+    z-index: 1;
+    top: 2px;
+    left: 2px;
+    width: 58px;
+    height: 22px;
+    background: $color_fern_approx;
+    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+    border-radius: 3px;
+    background-image: linear-gradient(to bottom, $color_opal_approx, $color_jungle_green_approx);
+    background-image: linear-gradient(to bottom, $color_opal_approx, $color_jungle_green_approx);
+    //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
+    box-shadow: inset 0 1px $white_50, 0 0 2px $black_20;
+    //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
+    transition: left 0.15s ease-out;
+} */
+
+.scrollTagList {
+    height: 330px;
+    overflow-y: auto;
+    margin-bottom: 0;
+    i.fa {
+        margin-right: 5px;
+    }
+}
+
+.menuItem {
+    padding: 10px;
+    color: $color_havelock_blue_approx;
+    cursor: pointer;
+}
+
+.tagging {
+    display: inline-block;
+}
+
+.crossClearText {
+    line-height: 20px !important;
+}
+
+text {
+    font-weight: 300;
+    font-family: $font_2, $font_3, $font_4, $font_5;
+    font-size: 14px;
+}
+
+.switch-blue .switch-selection {
+    background: $color_pelorous_approx;
+    background-image: linear-gradient(to bottom, $color_picton_blue_approx, $color_pelorous_approx);
+}
+
+.switch-yellow .switch-selection {
+    background: $color_laser_approx;
+    background-image: linear-gradient(to bottom, $color_zombie_approx, $color_laser_approx);
+}

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/css/scss/override.scss
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/scss/override.scss b/dashboardv2/public/css/scss/override.scss
new file mode 100644
index 0000000..49f0810
--- /dev/null
+++ b/dashboardv2/public/css/scss/override.scss
@@ -0,0 +1,72 @@
+/* override.scss */
+
+.tabs li.tab.active {
+    border-bottom: 2px solid $color_keppel_approx;
+    a {
+        color: $color_keppel_approx;
+    }
+}
+
+.modal-header {
+    padding: 8px 15px;
+    border-bottom: 1px solid #DEDEDE;
+}
+
+.modal-title {
+    font-weight: 600;
+    -webkit-font-smoothing: antialiased;
+}
+
+.modal-footer {
+    padding: 15px;
+    text-align: right;
+    border: none;
+}
+
+.modal-body {
+    position: relative;
+    padding: 15px;
+}
+
+.cancel {
+    float: left;
+}
+
+.switch.pull-left {
+    margin-right: 8px;
+}
+
+.modal-content {
+    border-radius: 10px;
+}
+
+.table-quickMenu {
+    border: 1px #ddd solid;
+    overflow: visible !important;
+}
+
+.table-quickMenu>thead>tr>th {
+    border-bottom-width: 0px;
+    padding: 24px 8px;
+    background-color: transparent;
+    text-align: left;
+}
+
+.backgrid-paginator ul > li > a:hover,
+.backgrid-paginator ul > .active > a,
+.backgrid-paginator ul > .active > span {
+    background-color: #2EBC9A !important;
+    color: #fff !important;
+    &:hover {
+        background-color: none;
+    }
+}
+
+.backgrid-paginator ul {
+    display: inline-block;
+    padding-left: 0;
+    margin: 20px 0;
+    border-radius: 4px;
+    border: 1px #DDDDDD solid;
+}
+

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/css/scss/panel.scss
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/scss/panel.scss b/dashboardv2/public/css/scss/panel.scss
new file mode 100644
index 0000000..ee85715
--- /dev/null
+++ b/dashboardv2/public/css/scss/panel.scss
@@ -0,0 +1,25 @@
+/* panel.scss */
+.panel {
+    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+    border-radius: 0;
+}
+
+.panel-primary {
+    border-color: $color_hoki_approx;
+    > .panel-heading {
+        color: $white;
+        background-color: $color_hoki_approx;
+        border-color: $color_hoki_approx;
+        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+        border-radius: 0;
+    }
+}
+
+.appForm {
+    .panel-body {
+        padding-bottom: 0;
+    }
+    .panel-footer {
+        margin-bottom: 0;
+    }
+}

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/css/scss/search.scss
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/scss/search.scss b/dashboardv2/public/css/scss/search.scss
new file mode 100644
index 0000000..858b974
--- /dev/null
+++ b/dashboardv2/public/css/scss/search.scss
@@ -0,0 +1,75 @@
+//colors
+$color_celeste_approx: #1D1F2B;
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 50px;
+    height: 22px;
+    margin-left: 8px;
+    input {
+        display: none;
+    }
+}
+
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: $color_celeste_approx;
+    //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
+    transition: .4s;
+    &:before {
+        position: absolute;
+        content: "";
+        height: 16px;
+        width: 16px;
+        left: 4px;
+        bottom: 3px;
+        background-color: $color_jungle_green_approx;
+        //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
+        transition: .4s;
+    }
+    &.round {
+        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+        border-radius: 34px;
+        &:before {
+            //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+            border-radius: 50%;
+        }
+    }
+}
+
+input {
+    &:checked + .slider {
+        background-color: $color_celeste_approx;
+        &:before {
+            //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
+            transform: translateX(26px);
+        }
+    }
+    &:focus + .slider {
+        //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
+        box-shadow: 0 0 1px $color_celeste_approx;
+    }
+}
+
+.advanceSearchBtn {
+    float: right;
+}
+
+.advanceSearchTagInput {
+    margin-bottom: 20px;
+}
+
+.advanceSearchTermInput {
+    margin-bottom: 20px;
+}
+.clearAdvanceSearch {
+    display: inline-block;
+    float: left;
+    margin-top: 10px;
+    cursor: pointer
+}

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/css/scss/style.scss
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/scss/style.scss b/dashboardv2/public/css/scss/style.scss
new file mode 100644
index 0000000..c7085cc
--- /dev/null
+++ b/dashboardv2/public/css/scss/style.scss
@@ -0,0 +1,34 @@
+/*
+ * 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.
+ */
+
+@import "main.scss";
+@import "tab.scss";
+@import "form.scss";
+@import "nav.scss";
+@import "panel.scss";
+@import "loader.scss";
+@import "graph.scss";
+@import "breadcrumb.scss";
+//@import "login.scss";
+@import "business-catlog.scss";
+@import "old-style.scss";
+@import "theme.scss";
+@import "tree.scss";
+@import "tag.scss";
+@import "search.scss";
+@import "override.scss";

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/css/scss/tab.scss
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/scss/tab.scss b/dashboardv2/public/css/scss/tab.scss
new file mode 100644
index 0000000..648e38d
--- /dev/null
+++ b/dashboardv2/public/css/scss/tab.scss
@@ -0,0 +1,133 @@
+/* tab.scss */
+.atlast-tabbable {
+    margin: 50px 0;
+    .nav-tabs {
+        border-bottom: 1px solid $color_mystic_approx;
+        > li {
+            > a {
+                padding: 15px 30px;
+                text-transform: uppercase;
+                letter-spacing: 1px;
+                //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+                border-radius: 2px 2px 0 0;
+            }
+            &.active > a {
+                border: 1px solid $color_mystic_approx;
+                border-bottom-color: transparent;
+                &:focus {
+                    border: 1px solid $color_mystic_approx;
+                    border-bottom-color: transparent;
+                }
+                &:hover {
+                    border: 1px solid $color_mystic_approx;
+                    border-bottom-color: transparent;
+                }
+            }
+        }
+    }
+    .tab-content {
+        background-color: $white;
+        padding: 35px;
+        border: 1px solid $color_mystic_approx;
+        border-top: none;
+    }
+}
+
+ul.tabs li.tab {
+    padding: 0;
+}
+
+.tagsList .atlast-tabbable {
+    margin: 0;
+    .tab-content {
+        padding: 10px 22px;
+    }
+    .nav-tabs > li > a {
+        padding: 10px 20px;
+    }
+}
+
+// NEW theme style
+.tabs {
+    position: relative;
+    height: 42px;
+    width: 100%;
+    white-space: nowrap;
+    padding: 0;
+    transition: color 0.28s ease;
+    .indicator {
+        position: absolute;
+        bottom: 0;
+        height: 2px;
+        background-color: $color_keppel_approx;
+        will-change: left, right;
+    }
+    li.tab {
+        display: block;
+        float: left;
+        text-align: center;
+        line-height: 42px;
+        height: 42px;
+        padding: 0 20px;
+        margin: 0;
+        text-transform: uppercase;
+        letter-spacing: 0.8px;
+        border-bottom: 1px solid $color_mirage_approx;
+        a {
+            font-size: 12px;
+            font-weight: 600;
+            color: $white;
+            display: block;
+            text-decoration: none;
+            width: 100%;
+            height: 100%;
+            //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
+            transition: color 0.28s ease;
+           /*  color: $color_manatee_approx; */
+         /*    &:hover {
+                color: $color_keppel_approx;
+            }
+            &.active {
+                color: $color_keppel_approx;
+            } */
+        }
+    }
+}
+
+.tab-pane {
+    padding: 25px;
+}
+
+.atlast-tabbable {
+    margin: 50px 0;
+    .nav-tabs {
+        border-bottom: 1px solid $color_mystic_approx;
+        > li {
+            > a {
+                padding: 15px 30px;
+                text-transform: uppercase;
+                letter-spacing: 1px;
+                //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+                border-radius: 2px 2px 0 0;
+            }
+            &.active > a {
+                border: 1px solid $color_mystic_approx;
+                border-bottom-color: transparent;
+                &:focus {
+                    border: 1px solid $color_mystic_approx;
+                    border-bottom-color: transparent;
+                }
+                &:hover {
+                    border: 1px solid $color_mystic_approx;
+                    border-bottom-color: transparent;
+                }
+            }
+        }
+    }
+    .tab-content {
+        background-color: $white;
+        padding: 35px;
+        border: 1px solid $color_mystic_approx;
+        border-top: none;
+    }
+}

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/css/scss/tag.scss
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/scss/tag.scss b/dashboardv2/public/css/scss/tag.scss
new file mode 100644
index 0000000..74f768a
--- /dev/null
+++ b/dashboardv2/public/css/scss/tag.scss
@@ -0,0 +1,205 @@
+//tag.scss
+
+/* Tree View */
+
+.tag-tree {
+    padding: 0;
+    overflow: auto;
+    li {
+        list-style: none;
+        cursor: pointer;
+        &.parent-node {
+            position: relative;
+            margin-top: 10px;
+            /* margin-bottom: 5px; */
+            border-radius: 4px;
+            &:hover {
+                background-color: $color_star_dust_approx;
+            }
+            &.active {
+                background-color: $color_jungle_green_approx;
+                border: none;
+                .tools {
+                    display: block
+                }
+            }
+            > ul > li {
+                line-height: 30px;
+                margin-left: -20px;
+                text-indent: 20px;
+                &:hover {
+                    background-color: $color_keppel_approx;
+                }
+                &.selected {
+                    background-color: $color_keppel_approx;
+                }
+            }
+            .tools {
+                display: none;
+                position: absolute;
+                right: 0;
+                padding: 5px 10px;
+            }
+        }
+        a {
+            display: block;
+            color: #f2f2f2;
+            white-space: nowrap;
+            padding: 5px 10px;
+            text-overflow: ellipsis;
+            max-width: 91%;
+            overflow: hidden;
+        }
+    }
+    ul {
+        padding-left: 20px;
+        li {}
+    }
+    .tagAsset {
+        display: none;
+    }
+}
+
+.input-group.attributes .form-control {
+    height: 40px;
+    box-shadow: none;
+    border-right: none;
+}
+
+.input-group.attributes .input-group-addon {
+    background-color: $color_white_lilac_approx;
+    border: 1px $color_mystic_approx solid;
+    border-radius: 0px;
+    border-left: none;
+}
+
+.input-group.attributes .input-group-addon i.fa {
+    cursor: pointer;
+}
+
+.input-group.attributes .form-control:focus + .input-group-addon {
+    border-color: $color_bali_hai_approx;
+}
+
+.tagList {
+    margin-top: 10px;
+}
+
+.select2-container {
+    width: 100% !important;
+    /*margin:15px 0px;*/
+}
+
+.tagListSelect {
+    margin: 15px 0px;
+}
+
+.select2-container--default .select2-selection--multiple .select2-selection__choice {
+    background-color: #fff;
+    color: #9599a0;
+}
+
+.select2-container--default .select2-search--inline .select2-search__field {
+    color: #555;
+}
+
+.inputTag {
+    display: inline-block;
+    padding: 5px 10px;
+    border: 1px $tag_color solid;
+    color: $tag_color;
+    font-size: 12px;
+    text-transform: uppercase;
+    border-radius: 4px;
+    margin-right: 3px;
+    margin-bottom: 3px;
+    float: left;
+    cursor: pointer;
+    background-color: $white;
+    i.fa {
+        position: relative;
+        right: -5px;
+        cursor: pointer;
+    }
+    &:hover {
+        color: $white;
+        background-color: $tag_color;
+    }
+}
+
+.addTagBase {
+    padding: 4px 8px;
+    border: 1px solid $action_gray;
+    color: $action_gray;
+    border-radius: 4px;
+    cursor: pointer;
+    &:hover {
+        color: $color_dark_grey_approx;
+        background-color: $color_mercury_approx;
+    }
+}
+
+.noTags {
+    font-size: 24px;
+    font-weight: bold;
+    text-align: center;
+}
+
+.addTag-dropdown {
+    display: inline-block;
+    float: left;
+}
+
+.addTagText {
+    font-size: 12px;
+    font-weight: 600;
+}
+
+.addTagPlus {
+    font-size: 12px;
+    font-weight: 600;
+}
+
+.inputSearchTag {
+    max-width: 200px;
+}
+
+.appendList {
+    max-height: 200px;
+    overflow: auto;
+    max-width: 200px;
+    overflow-x: hidden;
+    div {
+        padding: 3px;
+    }
+}
+
+.editbutton {
+    padding: 4px 8px;
+    border: 1px solid $color_celeste_approx;
+    color: $action_gray;
+    border-radius: 4px;
+}
+.inputAttribute {
+    display: inline-block;
+    padding: 5px 10px;
+    border: 1px $action_gray solid;
+    color: $action_gray;
+    font-size: 12px;
+    text-transform: uppercase;
+    border-radius: 4px;
+    margin-right: 3px;
+    margin-bottom: 3px;
+    float: left;
+    cursor: pointer;
+    background-color: $white;
+    i.fa {
+        position: relative;
+        right: -5px;
+        cursor: pointer;
+    }
+    &:hover {
+        color: $white;
+        background-color: $action_gray;
+    }
+}

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/css/scss/theme.scss
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/scss/theme.scss b/dashboardv2/public/css/scss/theme.scss
new file mode 100644
index 0000000..4d5b2d6
--- /dev/null
+++ b/dashboardv2/public/css/scss/theme.scss
@@ -0,0 +1,114 @@
+/* theme.scss */
+
+.user-dropdown {
+    display: inline-block;
+    padding: 20px;
+    color: $color_ironside_gray_approx;
+    .user-circle {
+        padding: 8px 10px;
+        border: 1px solid $color_ironside_gray_approx;
+        border-radius: 20px;
+        margin: 0px 4px;
+    }
+}
+
+.main-search {
+    .form-control {
+        border: none;
+        border-left: 1px $color_mystic_approx solid;
+        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+        border-radius: 0;
+        //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
+        box-shadow: none;
+        height: 60px;
+        font-size: 18px;
+        font-style: italic;
+    }
+    .input-group-addon {
+        font-size: 20px;
+        color: $color_bombay_approx;
+        background: none;
+        border: none;
+    }
+}
+
+.page-title {
+    background-color: $white;
+    padding: 50px;
+    h1 {
+        margin-top: 0;
+        margin-bottom: 20px;
+        font-weight: 600;
+        text-overflow: ellipsis;
+        max-width: 91%;
+        overflow: hidden;
+        small {
+            position: relative;
+            bottom: 5px;
+            margin-left: 15px;
+            padding-left: 15px;
+            border-left: 1px $color_mystic_approx solid;
+            color: $color_bombay_approx;
+            font-size: 40%;
+            font-weight: 600;
+            text-transform: uppercase;
+        }
+    }
+    .sub-title {
+        margin-bottom: 40px;
+    }
+}
+
+.atlas-tag {
+    padding: 6px 12px;
+    background-color: $color_havelock_blue_approx;
+    color: $white;
+    font-size: 12px;
+    text-transform: uppercase;
+    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+    border-radius: 4px;
+    i.fa {
+        position: relative;
+        right: -5px;
+        cursor: pointer;
+    }
+}
+
+.white-bg {
+    background-color: $white;
+    padding: 30px 0;
+}
+
+.comment-input {
+    background-color: $color_white_lilac_approx;
+    padding: 20px;
+    font-size: 16px;
+    margin-bottom: 20px;
+}
+
+.comment-box {
+    padding: 25px 0;
+    margin-top: 25px;
+    border-top: 1px $color_mystic_approx solid;
+    .comment {
+        margin-bottom: 25px;
+    }
+    .author {
+        color: $color_keppel_approx;
+        margin-bottom: 0;
+    }
+    .date {
+        color: $color_star_dust_approx;
+    }
+}
+
+.backButton {
+    display: block;
+    margin: 13px 13px;
+    &:hover {
+        color: $color_jungle_green_approx;
+    }
+    &:active {
+        color: $color_jungle_green_approx;
+    }
+}

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/css/scss/tree.scss
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/scss/tree.scss b/dashboardv2/public/css/scss/tree.scss
new file mode 100644
index 0000000..b98bd45
--- /dev/null
+++ b/dashboardv2/public/css/scss/tree.scss
@@ -0,0 +1,286 @@
+    /* tree.scss */
+    /* .fuelux {
+    margin-top: 10px;
+    .tree {
+        padding-left: 0;
+        position: relative;
+        list-style: none;
+        ul {
+            padding-left: 0;
+            margin-top: 0;
+            margin-bottom: 0;
+            list-style: none;
+        }
+        li {
+            margin: 0;
+            margin-top: 5px;
+            margin-bottom: 5px;
+        }
+        .tree-loader {
+            margin-left: 45px;
+        }
+        .tree-branch {
+            .tree-branch-header {
+                color: $white;
+                position: relative;
+                white-space: nowrap;
+                padding: 4px 0;
+                .tree-branch-name {
+                    white-space: nowrap;
+                    background-color: transparent;
+                    border: 0;
+                    &:hover {
+                        color: $white;
+                    }
+                }
+                .glyphicon-menu-right {
+                    font-size: 10px;
+                    padding-right: 5px;
+                    padding-left: 7px;
+                    &:before {
+                        position: relative;
+                        top: -2px;
+                    }
+                }
+                label {
+                    font-weight: normal;
+                    padding-left: 3px;
+                    margin-bottom: 0;
+                    cursor: pointer;
+                }
+            }
+            .tree-branch-children {
+                margin-left: 25px;
+            }
+        }
+        .tree-item {
+            white-space: nowrap;
+            position: relative;
+            cursor: pointer;
+            padding: 4px 0;
+            .tree-item-name {
+                color: $white;
+                white-space: nowrap;
+                background-color: transparent;
+                border: 0;
+                &:hover {
+                    color: $white;
+                }
+            }
+            &.tree-selected {
+                background-color: $color_keppel_approx;
+                &:before {
+                    content: "";
+                    position: absolute;
+                    background-color: $color_keppel_approx;
+                    height: 33px;
+                    top: 0;
+                    left: -100%;
+                    right: -100%;
+                    z-index: -1;
+                }
+            }
+            label {
+                font-weight: normal;
+                padding-left: 7px;
+                margin-bottom: 0;
+                cursor: pointer;
+            }
+        }
+        *:focus {
+            outline: none;
+        }
+        button:focus {
+            color: $white;
+        }
+        .tree-open > .tree-branch-header .glyphicon-menu-right {
+            //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
+            transform: rotate(90deg);
+            position: relative;
+        }
+        [data-children=false] > .tree-branch-header .icon-caret:before {
+            content: '\00a0';
+        }
+        .tree-branch[haschildren='false'] .icon-caret {
+            visibility: hidden;
+        }
+        .tree-branch[data-has-children='false'] .icon-caret {
+            visibility: hidden;
+        }
+        .icon-caret:hover + .tree-branch-name {
+            color: $white;
+        }
+        &.tree-folder-select .tree-branch {
+            .icon-folder {
+                visibility: hidden;
+            }
+            .icon-caret {
+                background-color: transparent;
+                border: 0;
+                &:hover {
+                    cursor: pointer;
+                    color: $white;
+                }
+            }
+            > .tree-branch-name {
+                padding: 1px 5px 0;
+                &.tree-selected {
+                    background-color: $color_gallery_approx;
+                }
+            }
+            &.tree-selected > .tree-branch-header {
+                background-color: $color_keppel_approx;
+                &:before {
+                    content: "";
+                    position: absolute;
+                    background-color: $color_keppel_approx;
+                    height: 33px;
+                    top: 0;
+                    left: -100%;
+                    right: -100%;
+                    z-index: -1;
+                }
+                .tree-branch-name:hover {
+                    background-color: $color_keppel_approx;
+                }
+                > .action-icons {
+                    visibility: visible;
+                }
+            }
+        }
+    }
+    .action-icons {
+        visibility: hidden;
+        float: right;
+        a {
+            display: inline-block;
+            margin-left: 4px;
+            color: $white;
+        }
+    }
+} */
+    
+    .jstree-container-ul {
+        padding-left: 0px;
+        position: relative;
+        list-style: none;
+        .jstree-node {
+            white-space: nowrap;
+            position: relative;
+            cursor: pointer;
+            padding: 4px 0;
+            margin: 0;
+            margin-top: 5px;
+            margin-bottom: 5px;
+        }
+        ul {
+            list-style: none;
+            padding: 0;
+            text-indent: 30px;
+        }
+        li a {
+            // color: $white;
+            display: block;
+        }
+        // .jstree-node[aria-selected="true"]:before {
+        //     content: "";
+        //     position: absolute;
+        //     height: 33px;
+        //     background: $color_jungle_green_approx;
+        //     top: 0px;
+        //     left: -100%;
+        //     right: -100%;
+        //     z-index: -1;
+        // }
+    }
+    
+    .taxonomyTree {
+        padding: 0;
+        position: relative;
+        li {
+            position: relative;
+            border-radius: 4px;
+            margin-top: 5px;
+            &.parent {
+                width: 100%;
+                a {
+                    max-width: 93%;
+                }
+            }
+            &.parentChiled {
+                ul {
+                    padding-left: 9%;
+                }
+                li {
+                    &.children {
+                        width: 91%;
+                    }
+                    a {
+                        max-width: 92%;
+                    }
+                }
+            }
+            &.children {
+                &:hover {
+                    background-color: $color_star_dust_approx;
+                }
+            }
+            &.active {
+                background-color: $color_jungle_green_approx !important;
+                border: none;
+                .tools {
+                    display: block;
+                    .fa {
+                        cursor: pointer;
+                        padding: 0px 3px;
+                    }
+                }
+            }
+            a {
+                display: block;
+                color: $concrete;
+                white-space: nowrap;
+                padding: 5px 18px;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                cursor: pointer;
+            }
+            .tools {
+                background: $color_jungle_green_approx;
+                display: none;
+                position: absolute;
+                right: 3px;
+                padding: 5px 10px;
+            }
+        }
+    }
+    
+    .termPopoverList {
+        color: #666;
+        padding: 0px 5px;
+        margin-bottom: 0px;
+        a {
+            color: #666;
+            padding: 5px;
+        }
+    }
+    
+    .termPopover {
+        cursor: pointer;
+    }
+    
+    .termMoveDiv {
+        width: 550px;
+        height: 200px;
+        margin: 10px;
+    }
+    
+    .tagPopoverList {
+        color: #666;
+        padding: 0px 5px;
+        margin-bottom: 0px;
+        a {
+            color: #666;
+            padding: 5px;
+        }
+    }


[3/5] incubator-atlas git commit: ATLAS-802 New look UI to show Business Catalog functionalities (kevalbhatt18 via yhemanth)

Posted by yh...@apache.org.
http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/js/templates/tag/TagLayoutView_tmpl.html
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/templates/tag/TagLayoutView_tmpl.html b/dashboardv2/public/js/templates/tag/TagLayoutView_tmpl.html
index 160af27..b402e0f 100644
--- a/dashboardv2/public/js/templates/tag/TagLayoutView_tmpl.html
+++ b/dashboardv2/public/js/templates/tag/TagLayoutView_tmpl.html
@@ -14,27 +14,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 -->
-<div class="tagsList">
-    <div class="atlast-tabbable">
-        <ul class="nav nav-tabs" role="tablist">
-            <li role="presentation" class="tab active"><a href="#tab-tags" role="tab" data-toggle="tab">Tags</a></li>
-            <li role="presentation" class="tab"><a href="#tab-types" role="tab" data-toggle="tab">Type</a></li>
-            <div class="pull-right" data-id="referesh"><a href="javascript:void(0)"><i class="fa fa-refresh"></i></a></div>
-            <div class="indicator" style="right: 116px; left: 0px;"></div>
-        </ul>
-        <div class="tab-content">
-            <div id="tab-tags" role="tabpanel" class="tab-pane active">
-                <div class="row-margin-bottom">
-                    <input data-id="searchTag" data-type="listTag" placeholder="Search for Tags\u2026" class="form-control">
-                </div>
-                <div class="list-group scrollTagList" data-id="listTag"> </div>
-            </div>
-            <div id="tab-types" role="tabpanel" class="tab-pane">
-                <div class="row-margin-bottom ">
-                    <input data-id="searchTag" data-type="listType" placeholder="Search for Types\u2026" class="form-control">
-                </div>
-                <div class="list-group scrollTagList" data-id="listType"> </div>
-            </div>
-        </div>
-    </div>
-</div>
+<div class="clearfix"><a href="javascript:void(0)" data-id="createTag"><i class="fa fa-plus"></i> Create Tag</a></div>
+<hr>
+<input type="text" class="form-control" data-id="offlineSearchTag" placeholder="Search Tags...">
+<ul class="tag-tree" data-id="tagsParent">
+</ul>

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/js/templates/tag/addTagAttributeItemView_tmpl.html
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/templates/tag/addTagAttributeItemView_tmpl.html b/dashboardv2/public/js/templates/tag/addTagAttributeItemView_tmpl.html
deleted file mode 100644
index 9dd62ca..0000000
--- a/dashboardv2/public/js/templates/tag/addTagAttributeItemView_tmpl.html
+++ /dev/null
@@ -1,23 +0,0 @@
-<!--
- * 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.
--->
-<div class="form-group">
-    <label class="col-sm-2 control-label">Attribute name</label>
-    <div class="col-sm-10">
-        <input type="text" class="form-control" name="name" id="attributeId" placeholder="Attribute name" required="">
-        <button class="remove" id="close"><i class="fa fa-times"></i></button>
-    </div>
-</div>

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/js/templates/tag/addTagModalView_tmpl.html
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/templates/tag/addTagModalView_tmpl.html b/dashboardv2/public/js/templates/tag/addTagModalView_tmpl.html
index 574921a..2aa82f6 100644
--- a/dashboardv2/public/js/templates/tag/addTagModalView_tmpl.html
+++ b/dashboardv2/public/js/templates/tag/addTagModalView_tmpl.html
@@ -14,8 +14,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 -->
-<div class="modalHeight">
-    <form name="tagDefinitionform" class="css-form">
+<div class="row">
+    <div name="tagDefinitionform" class="css-form">
         <div class="form-group">
             <label class="control-label col-sm-4">Tag definition</label>
             <div class="col-sm-8 input-spacing">
@@ -23,7 +23,7 @@
                 </select>
             </div>
         </div>
-    </form>
+    </div>
 </div>
-<div class="form-group modalHeight" data-id="tagAttribute" style="display:none">
+<div class="row form-group modalHeight" data-id="tagAttribute" style="display:none">
 </div>

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/js/templates/tag/createTagLayoutView_tmpl.html
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/templates/tag/createTagLayoutView_tmpl.html b/dashboardv2/public/js/templates/tag/createTagLayoutView_tmpl.html
index 4682aca..39b6cec 100644
--- a/dashboardv2/public/js/templates/tag/createTagLayoutView_tmpl.html
+++ b/dashboardv2/public/js/templates/tag/createTagLayoutView_tmpl.html
@@ -14,52 +14,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 -->
-<div class="row">
-    <div class="appForm col-lg-12">
-        <div class="panel panel-default">
-            <div class="panel-heading">
-                <h4>Tag Definition</h4></div>
-            <div class="panel-body inputs">
-                <form data-name="tagForm" class="form-horizontal" novalidate="" role="form">
-                    <fieldset>
-                        <div class="form-group hide">
-                            <label for="category" class="col-sm-2 control-label">Category</label>
-                            <div class="col-sm-10">
-                                <select class="form-control" data-id="category" name="category" required="">
-                                </select>
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <label for="typeName" class="col-sm-2 control-label">Tag Name</label>
-                            <div class="col-sm-10">
-                                <input type="text" class="form-control" name="typeName" data-id="typeName" placeholder="Tag Name" required="">
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <label class="control-label col-sm-2">Parent Tag</label>
-                            <div class="col-sm-5 mrt-8">
-                                <select class="form-control h160" data-id="parentTag" name="ParentTag" multiple>
-                                </select>
-                            </div>
-                            <div class="mtop3">
-                                <a href="javascript:void(0)" class="pull-left fa fa-refresh" title="Refreh parent tag list" data-id="refreshBtn">
-                                </a>
-                            </div>
-                        </div>
-                        <div data-id="addAttributeDiv"></div>
-                        <div class="form-group text-right">
-                            <div class="col-sm-offset-2 col-sm-10">
-                                <button type="default" class="btn btn-default addAttr" disabled="true" data-id="addAttrBtn"><i class="fa fa-plus"></i> Add Attribute</button>
-                            </div>
-                        </div>
-                        <div class="form-group panel-footer">
-                            <div class="col-sm-12 text-right padding0">
-                                <button class="btn btn-primary saveAttr" type="button" disabled="true" data-id="saveButton">Save</button>
-                            </div>
-                        </div>
-                    </fieldset>
-                </form>
-            </div>
-        </div>
+<form name="tagDefinitionform" class="css-form">
+    <!-- <h4 style="margin-bottom:30px"></h4> -->
+    <div class="form-group">
+        <input class="form-control" data-id="tagName" placeholder="Create tag">
+        </input>
+        <select class="form-control tagList" data-id="parentTag" multiple></select>
     </div>
-</div>
+</form>

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/js/utils/CommonViewFunction.js
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/utils/CommonViewFunction.js b/dashboardv2/public/js/utils/CommonViewFunction.js
index 0ad8504..76941a6 100644
--- a/dashboardv2/public/js/utils/CommonViewFunction.js
+++ b/dashboardv2/public/js/utils/CommonViewFunction.js
@@ -21,7 +21,7 @@ define(['require', 'utils/Utils', 'modules/Modal'], function(require, Utils, Mod
 
     var CommonViewFunction = {};
     CommonViewFunction.deleteTagModel = function(tagName) {
-        var msg = "<b>Tag: - </b>";
+        var msg = "<b>Tag:</b>";
         if (tagName) {
             msg = "<b>Tag: " + tagName + "</b>";
         }
@@ -50,8 +50,7 @@ define(['require', 'utils/Utils', 'modules/Modal'], function(require, Utils, Mod
                     },
                     error: function(error, data, status) {
                         var message = "Tag " + options.tagName + " could not be deleted";
-                        if (error && error.responseText) {
-                            var data = JSON.parse(error.responseText);
+                        if (data.error) {
                             message = data.error;
                         }
                         Utils.notifyError({

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/js/utils/Globals.js
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/utils/Globals.js b/dashboardv2/public/js/utils/Globals.js
index d4f25a2..14a41e5 100644
--- a/dashboardv2/public/js/utils/Globals.js
+++ b/dashboardv2/public/js/utils/Globals.js
@@ -26,6 +26,12 @@ define(['require'], function(require) {
     Globals.settings.PAGE_SIZE = 25;
     Globals.saveApplicationState = {
         mainPageState: {},
+        tabState: {
+            stateChanged: false,
+            tagUrl: "#!/tag",
+            taxonomyUrl: "#!/taxonomy",
+            searchUrl: "#!/search"
+        },
         detailPageState: {}
     };
 

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/js/utils/Overrides.js
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/utils/Overrides.js b/dashboardv2/public/js/utils/Overrides.js
index 4b96b86..d46a94f 100644
--- a/dashboardv2/public/js/utils/Overrides.js
+++ b/dashboardv2/public/js/utils/Overrides.js
@@ -18,7 +18,6 @@
 
 define(['require', 'backgrid', 'asBreadcrumbs'], function(require) {
     'use strict';
-
     $.asBreadcrumbs.prototype.generateChildrenInfo = function() {
         var self = this;
         this.$children.each(function() {

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/js/utils/Utils.js
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/utils/Utils.js b/dashboardv2/public/js/utils/Utils.js
index e942fe3..74cfb03 100644
--- a/dashboardv2/public/js/utils/Utils.js
+++ b/dashboardv2/public/js/utils/Utils.js
@@ -16,10 +16,11 @@
  * limitations under the License.
  */
 
- define(['require', 'utils/Globals'], function(require, Globals) {
+define(['require', 'utils/Globals'], function(require, Globals) {
     'use strict';
 
     var Utils = {};
+    var prevNetworkErrorTime = 0;
     require(['noty'], function() {
         $.extend($.noty.defaults, {
             timeout: 5000,
@@ -74,11 +75,22 @@
         });
     };
     Utils.defaultErrorHandler = function(model, error) {
+        /*require(['views/common/ErrorView', 'App'], function(vError, App) {*/
         if (error.status == 401) {
-             window.location = '/login.jsp'
+            window.location = 'login.jsp'
         } else if (error.status == 419) {
-             window.location = '/login.jsp'
+            window.location = 'login.jsp'
+        } else if (error.status == "0") {
+            var diffTime = (new Date().getTime() - prevNetworkErrorTime);
+            if (diffTime > 3000) {
+                prevNetworkErrorTime = new Date().getTime();
+                Utils.notifyError({
+                    content: "Network Connection Failure : " +
+                        "It seems you are not connected to the internet. Please check your internet connection and try again"
+                });
+            }
         }
+        /*});*/
 
     };
 
@@ -133,23 +145,12 @@
             }
         }
     };
-    Utils.getQueryParams = function(qs) {
-        qs = qs.split('+').join(' ');
-        var params = {},
-            tokens,
-            re = /[?&]?([^=]+)=([^&]*)/g;
-        while (tokens = re.exec(qs)) {
-            params[decodeURIComponent(tokens[1])] = decodeURIComponent(tokens[2]);
-        }
-        return params;
-    };
 
     Utils.setUrl = function(options) {
         if (options) {
             if (options.mergeBrowserUrl) {
-                var hashUrl = window.location.hash.split("?");
-                if (hashUrl.length > 1) {
-                    var param = Utils.getQueryParams(hashUrl[1]);
+                var param = Utils.getUrlState.getQueryParams();
+                if (param) {
                     options.urlParams = _.extend(param, options.urlParams);
                 }
             }
@@ -161,8 +162,68 @@
                 urlParams = urlParams.slice(0, -1);
                 options.url += urlParams;
             }
+            if (options.updateTabState) {
+                _.extend(Globals.saveApplicationState.tabState, options.updateTabState());
+            }
             Backbone.history.navigate(options.url, { trigger: options.trigger != undefined ? options.trigger : true });
         }
     };
+
+    Utils.getUrlState = {
+        getQueryUrl: function() {
+            var hashValue = window.location.hash;
+            return {
+                firstValue: hashValue.split('/')[1],
+                hash: hashValue,
+                queyParams: hashValue.split("?"),
+                lastValue: hashValue.split('/')[hashValue.split('/').length - 1]
+            }
+        },
+        isInitial: function() {
+            return this.getQueryUrl().firstValue == undefined ? true : false;
+        },
+        isTagTab: function() {
+            return this.getQueryUrl().firstValue == "tag" ? true : false;
+        },
+        isTaxonomyTab: function() {
+            return this.getQueryUrl().firstValue == "taxonomy" ? true : false;
+        },
+        isSearchTab: function() {
+            return this.getQueryUrl().firstValue == "search" ? true : false;
+        },
+        getLastValue: function() {
+            return this.getQueryUrl().lastValue;
+        },
+        getFirstValue: function() {
+            return this.getQueryUrl().firstValue;
+        },
+        getQueryParams: function() {
+            var qs = this.getQueryUrl().queyParams[1];
+            if (typeof qs == "string") {
+                qs = qs.split('+').join(' ');
+                var params = {},
+                    tokens,
+                    re = /[?&]?([^=]+)=([^&]*)/g;
+                while (tokens = re.exec(qs)) {
+                    params[decodeURIComponent(tokens[1])] = decodeURIComponent(tokens[2]);
+                }
+                return params;
+            }
+        },
+        getKeyValue: function(key) {
+            var paramsObj = this.getQueryParams();
+            if (key.length) {
+                var values = [];
+                _.each(key, function(objKey) {
+                    var obj = {};
+                    obj[objKey] = paramsObj[objKey]
+                    values.push(obj);
+                    return values;
+                })
+            } else {
+                return paramsObj[key];
+            }
+        }
+    }
     return Utils;
-});
\ No newline at end of file
+});

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/js/views/asset/AssetPageLayoutView.js
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/views/asset/AssetPageLayoutView.js b/dashboardv2/public/js/views/asset/AssetPageLayoutView.js
deleted file mode 100644
index ae0ef89..0000000
--- a/dashboardv2/public/js/views/asset/AssetPageLayoutView.js
+++ /dev/null
@@ -1,381 +0,0 @@
-/**
- * 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/asset/AssetPageLayoutView_tmpl',
-    'modules/Modal',
-    'models/VEntity',
-    'utils/Utils',
-    'utils/Globals',
-    'utils/CommonViewFunction'
-], function(require, Backbone, AssetPageLayoutViewTmpl, Modal, VEntity, Utils, Globals, CommonViewFunction) {
-    'use strict';
-
-    var AssetPageLayoutView = Backbone.Marionette.LayoutView.extend(
-        /** @lends AssetPageLayoutView */
-        {
-            _viewName: 'AssetPageLayoutView',
-
-            template: AssetPageLayoutViewTmpl,
-
-            /** 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: '#!/dashboard/assetPage',
-                            urlParams: {
-                                query: e.currentTarget.text
-                            },
-                            mergeBrowserUrl: true,
-                            trigger: false
-                        });
-                        this.vent.trigger("tag:click", { 'query': e.currentTarget.text });
-                    }
-                };
-                events["click " + this.ui.addTag] = function(e) {
-                    this.addModalView(e);
-                };
-                events["click " + this.ui.tagCrossIcon] = function(e) {};
-                return events;
-            },
-            /**
-             * intialize a new AssetPageLayoutView Layout
-             * @constructs
-             */
-            initialize: function(options) {
-                _.extend(this, _.pick(options, 'globalVent', 'collection', 'vent'));
-                this.entityModel = new VEntity();
-                this.searchCollection = this.collection;
-                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-bordered table-hover table-condensed backgrid table-quickMenu'
-                    },
-                    filterOpts: {},
-                    paginatorOpts: {}
-                };
-
-            },
-            bindEvents: function() {
-                this.listenTo(this.vent, "search:click", function(value) {
-                    this.fetchCollection(value);
-                    this.REntityTableLayoutView.reset();
-                }, this);
-                this.listenTo(this.searchCollection, "reset", function(value) {
-                    this.renderTableLayoutView();
-                }, this);
-                this.listenTo(this.searchCollection, "error", function(value) {
-                    this.$('.fontLoader').hide();
-                    this.$('.entityTable').show();
-                    Utils.notifyError({
-                        content: "Invalid expression"
-                    });
-                }, this);
-            },
-            onRender: function() {
-                this.renderTagLayoutView();
-                this.renderSearchLayoutView();
-                this.renderTableLayoutView();
-                this.bindEvents();
-            },
-            fetchCollection: function(value) {
-                this.$('.fontLoader').show();
-                this.$('.entityTable').hide();
-                if (value) {
-                    if (value.type) {
-                        this.searchCollection.url = "/api/atlas/discovery/search/" + value.type;
-                    }
-                    $.extend(this.searchCollection.queryParams, { 'query': value.query });
-                }
-                this.searchCollection.fetch({ reset: true });
-            },
-            renderTagLayoutView: function() {
-                var that = this;
-                require(['views/tag/TagLayoutView'], function(TagLayoutView) {
-                    that.RTagLayoutView.show(new TagLayoutView({
-                        globalVent: that.globalVent,
-                        vent: that.vent
-                    }));
-                });
-            },
-            renderSearchLayoutView: function() {
-                var that = this;
-                require(['views/search/SearchLayoutView'], function(SearchLayoutView) {
-                    that.RSearchLayoutView.show(new SearchLayoutView({
-                        globalVent: that.globalVent,
-                        vent: that.vent
-                    }));
-                    var hashUrl = window.location.hash.split("?");
-                    if (hashUrl.length > 1) {
-                        var param = Utils.getQueryParams(hashUrl[1]);
-                        if (param) {
-                            var type = param.searchType;
-                            var query = param.query;
-                            that.vent.trigger("tag:click", { 'query': query, 'searchType': type });
-                        }
-                    }
-                });
-            },
-            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 });
-                                } else if (model.get('name') == "description") {
-                                    model.set("position", 2, { silent: true });
-                                } else if (model.get('name') == "owner") {
-                                    model.set("position", 3, { silent: true });
-                                } else if (model.get('name') == "createTime") {
-                                    model.set("position", 4, { silent: true });
-                                } 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" || modelJSON[key] === null)) {
-                                    if (typeof modelJSON[key] == "string" || typeof modelJSON[key] == "number" || modelJSON[key] === null) {
-                                        if (typeof modelJSON[key] == "number" && key != "createTime") {
-                                            return;
-                                        }
-                                        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="#!/dashboard/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 = "";
-                                        _.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 + '<a data-id="addTag" data-guid="' + model.get('$id$').id + '"><i class="fa fa-plus"></i></a></div>';
-                                    }
-                                })
-                            };
-                            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="#!/dashboard/detailPage/' + modelObject.instanceInfo.guid + '">' + modelObject.instanceInfo.typeName + '</a>';
-                                } else if (!modelObject.$typeName$) {
-                                    return '<a href="#!/dashboard/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) {
-                                            --that.fetchList;
-                                            that.checkTableFetch();
-                                            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) {
-                                            that.$('.fontLoader').hide();
-                                            that.$('.entityTable').show();
-                                        },
-                                        complete: function() {}
-                                    });
-                                    return '<a href="#!/dashboard/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) {
-                                            --that.fetchList;
-                                            that.checkTableFetch();
-                                            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) {
-                                            that.$('.fontLoader').hide();
-                                            that.$('.entityTable').show();
-                                        },
-                                        complete: function() {}
-                                    });
-                                    return '<a href="#!/dashboard/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
-                    });
-                });
-            },
-            onClickTagCross: function(e) {
-                var tagName = $(e.target).data("name"),
-                    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");
-                require(['utils/CommonViewFunction'], function(CommonViewFunction) {
-                    CommonViewFunction.deleteTag({
-                        'tagName': tagName,
-                        'guid': guid,
-                        'collection': that.searchCollection
-                    });
-                });
-            }
-        });
-    return AssetPageLayoutView;
-});

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/js/views/audit/AuditTableLayoutView.js
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/views/audit/AuditTableLayoutView.js b/dashboardv2/public/js/views/audit/AuditTableLayoutView.js
new file mode 100644
index 0000000..e7754af
--- /dev/null
+++ b/dashboardv2/public/js/views/audit/AuditTableLayoutView.js
@@ -0,0 +1,156 @@
+/**
+ * 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/audit/AuditTableLayoutView_tmpl',
+    'collection/VEntityList',
+    'moment'
+], function(require, Backbone, AuditTableLayoutView_tmpl, VEntityList, moment) {
+    'use strict';
+
+    var AuditTableLayoutView = Backbone.Marionette.LayoutView.extend(
+        /** @lends AuditTableLayoutView */
+        {
+            _viewName: 'AuditTableLayoutView',
+
+            template: AuditTableLayoutView_tmpl,
+
+            /** Layout sub regions */
+            regions: {
+                RAuditTableLayoutView: "#r_auditTableLayoutView",
+            },
+
+            /** ui selector cache */
+            ui: {
+                auditValue: "[data-id='auditValue']",
+                auditCreate: "[data-id='auditCreate']",
+            },
+            /** ui events hash */
+            events: function() {
+                var events = {};
+                events["click " + this.ui.auditCreate] = "onClickAuditCreate";
+                return events;
+            },
+            /**
+             * intialize a new AuditTableLayoutView Layout
+             * @constructs
+             */
+            initialize: function(options) {
+                _.extend(this, _.pick(options, 'globalVent', 'guid'));
+                this.entityCollection = new VEntityList();
+                this.entityCollection.url = "/api/atlas/entities/" + this.guid + "/audit";
+                this.entityCollection.modelAttrName = "events";
+                //this.collectionObject = entityCollection;
+                this.entityModel = new this.entityCollection.model();
+                this.commonTableOptions = {
+                    collection: this.entityCollection,
+                    includeFilter: false,
+                    includePagination: false,
+                    includePageSize: false,
+                    includeFooterRecords: true,
+                    gridOpts: {
+                        className: "table table-striped table-condensed backgrid table-quickMenu",
+                        emptyText: 'No records found!'
+                    },
+                    filterOpts: {},
+                    paginatorOpts: {}
+                };
+            },
+            bindEvents: function() {
+                this.listenTo(this.entityCollection, "reset", function(value) {
+                    this.renderTableLayoutView();
+                }, this);
+            },
+            onRender: function() {
+                this.entityCollection.fetch({ reset: true });
+                this.bindEvents();
+                this.renderTableLayoutView();
+            },
+            renderTableLayoutView: function() {
+                var that = this;
+                require(['utils/TableLayout'], function(TableLayout) {
+                    var cols = new Backgrid.Columns(that.getAuditTableColumns());
+                    that.RAuditTableLayoutView.show(new TableLayout(_.extend({}, that.commonTableOptions, {
+                        globalVent: that.globalVent,
+                        columns: cols,
+                        gridOpts: {
+                            className: "table table-bordered table-hover table-condensed backgrid table-quickMenu",
+                        },
+                    })));
+                });
+            },
+            getAuditTableColumns: function() {
+                var that = this;
+                return this.entityCollection.constructor.getTableCols({
+                    user: {
+                        label: "User",
+                        cell: "html",
+                        editable: false,
+                        sortable: false,
+                    },
+                    timestamp: {
+                        label: "Timestamp",
+                        cell: "time",
+                        editable: false,
+                        sortable: false,
+                        formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
+                            fromRaw: function(rawValue, model) {
+                                return moment(rawValue).format("YYYY-MM-DD HH:mm:ss,SSS");
+                            }
+                        })
+                    },
+                    action: {
+                        label: "Action",
+                        cell: "html",
+                        editable: false,
+                        sortable: false
+                    },
+                    tool: {
+                        label: "Tool",
+                        cell: "html",
+                        editable: false,
+                        sortable: false,
+                        formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
+                            fromRaw: function(rawValue, model) {
+                                return '<div class="label label-success auditCreateBtn" data-id="auditCreate">Create</div>';
+                            }
+                        })
+                    },
+
+                }, this.entityCollection);
+            },
+            onClickAuditCreate: function(e) {
+                var that = this;
+                require([
+                    'modules/Modal',
+                    'views/audit/CreateAuditTableLayoutView',
+                ], function(Modal, CreateAuditTableLayoutView) {
+
+                    var view = new CreateAuditTableLayoutView({ guid: that.guid });
+                    var modal = new Modal({
+                        title: 'Create',
+                        content: view,
+                        okCloses: true,
+                        showFooter: true,
+                    }).open();
+                });
+            }
+        });
+    return AuditTableLayoutView;
+});

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/js/views/audit/CreateAuditTableLayoutView.js
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/views/audit/CreateAuditTableLayoutView.js b/dashboardv2/public/js/views/audit/CreateAuditTableLayoutView.js
new file mode 100644
index 0000000..4c19b74
--- /dev/null
+++ b/dashboardv2/public/js/views/audit/CreateAuditTableLayoutView.js
@@ -0,0 +1,131 @@
+/**
+ * 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/audit/CreateAuditTableLayoutView_tmpl',
+    'collection/VEntityList'
+], function(require, Backbone, CreateAuditTableLayoutViewTmpl, VEntityList) {
+    'use strict';
+
+    var CreateAuditTableLayoutView = Backbone.Marionette.LayoutView.extend(
+        /** @lends CreateAuditTableLayoutView */
+        {
+            _viewName: 'CreateAuditTableLayoutView',
+
+            template: CreateAuditTableLayoutViewTmpl,
+
+            /** Layout sub regions */
+            regions: {},
+
+            /** ui selector cache */
+            ui: {
+                auditValue: "[data-id='auditValue']",
+                auditCreate: "[data-id='auditCreate']",
+            },
+            /** ui events hash */
+            events: function() {
+                var events = {};
+                events["click " + this.ui.auditCreate] = "onClickAuditCreate";
+                return events;
+            },
+            /**
+             * intialize a new AuditTableLayoutView Layout
+             * @constructs
+             */
+            initialize: function(options) {
+                _.extend(this, _.pick(options, 'globalVent', 'guid'));
+                this.entityCollection = new VEntityList();
+                this.entityCollection.url = "/api/atlas/entities/" + this.guid + "/audit";
+                this.entityCollection.modelAttrName = "events";
+                this.entityModel = new this.entityCollection.model();
+            },
+            bindEvents: function() {
+                this.listenTo(this.entityCollection, "reset", function(value) {
+                    this.auditTableGenerate();
+                }, this);
+            },
+            onRender: function() {
+                this.entityCollection.fetch({ reset: true });
+                this.bindEvents();
+            },
+            auditTableGenerate: function() {
+                var that = this,
+                    table = "";
+                var collectionObject = this.entityCollection.models[0].toJSON();
+                var appendedString = "{" + collectionObject.details + "}";
+                var auditData = appendedString.split('"')[0].split(':')[0].split("{")[1];
+                var detailsObject = JSON.parse(appendedString.replace("{" + auditData + ":", '{"' + auditData + '":'))[auditData];
+                //Append string for JSON parse
+                var valueObject = detailsObject.values;
+                _.keys(valueObject).map(function(key) {
+                    var keyValue = valueObject[key];
+                    if (_.isArray(keyValue)) {
+                        var subLink = "";
+                        for (var i = 0; i < keyValue.length; i++) {
+                            var inputOutputField = keyValue[i];
+                            if (_.isObject(inputOutputField.id)) {
+                                id = inputOutputField.id.id;
+                            } else {
+                                id = inputOutputField.id;
+                            }
+                            that.fetchInputOutputValue(id);
+                            //var coma = (i = 0) ? ('') : (',');
+                            subLink += '<div data-id="' + id + '"></div>';
+                        }
+                        table += '<tr><td>' + key + '</td><td>' + subLink + '</td></tr>';
+                    } else if (_.isObject(keyValue)) {
+                        var id = "";
+                        if (_.isObject(keyValue.id)) {
+                            id = keyValue.id.id;
+                        } else {
+                            id = keyValue.id;
+                        }
+                        that.fetchInputOutputValue(id);
+                        table += '<tr><td>' + key + '</td><td><div data-id="' + id + '"></div></td></tr>';
+                    } else {
+                        if (key == "createTime" || key == "lastAccessTime" || key == "retention") {
+                            table += '<tr><td>' + key + '</td><td>' + new Date(valueObject[key]) + '</td></tr>';
+                        } else {
+                            table += '<tr><td>' + key + '</td><td>' + valueObject[key] + '</td></tr>';
+                        }
+
+                    }
+                });
+                that.ui.auditValue.append(table);
+            },
+            fetchInputOutputValue: function(id) {
+                var that = this;
+                this.entityModel.getEntity(id, {
+                    beforeSend: function() {},
+                    success: function(data) {
+                        var value = "";
+                        if (data.definition.values.name) {
+                            value = data.definition.values.name;
+                        } else {
+                            value = data.GUID;
+                        }
+                        that.$('td div[data-id="' + data.GUID + '"]').html('<a href="#!/detailPage/' + data.GUID + '">' + value + '</a>');
+                    },
+                    error: function(error, data, status) {},
+                    complete: function() {}
+                });
+            }
+        });
+    return CreateAuditTableLayoutView;
+});

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/js/views/business_catalog/AddTermLayoutView.js
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/views/business_catalog/AddTermLayoutView.js b/dashboardv2/public/js/views/business_catalog/AddTermLayoutView.js
new file mode 100644
index 0000000..4a0ea1a
--- /dev/null
+++ b/dashboardv2/public/js/views/business_catalog/AddTermLayoutView.js
@@ -0,0 +1,58 @@
+/**
+ * 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/business_catalog/AddTermView_tmpl',
+    'utils/Utils',
+    'collection/VCatalogList'
+], function(require, Backbone, AddTermViewTmpl, Utils, VCatalogList) {
+    'use strict';
+
+    var AddTermLayoutView = Backbone.Marionette.LayoutView.extend(
+        /** @lends AddTermView */
+        {
+            _viewName: 'AddTermLayoutView',
+
+            template: AddTermViewTmpl,
+
+            /** Layout sub regions */
+            regions: {},
+            /** ui selector cache */
+            ui: {
+                termName: '[data-id="termName"]',
+                termDetail: '[data-id="termDetail"]'
+            },
+            /** ui events hash */
+            events: function() {
+                var events = {};
+                return events;
+            },
+            /**
+             * intialize a new BusinessCatalogLayoutView Layout
+             * @constructs
+             */
+            initialize: function(options) {
+                _.extend(this, _.pick(options, 'url', 'model'));
+            },
+            bindEvents: function() {},
+            onRender: function() {}
+        });
+    return AddTermLayoutView;
+
+});

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/js/views/business_catalog/BusinessCatalogDetailLayoutView.js
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/views/business_catalog/BusinessCatalogDetailLayoutView.js b/dashboardv2/public/js/views/business_catalog/BusinessCatalogDetailLayoutView.js
new file mode 100644
index 0000000..665d5c6
--- /dev/null
+++ b/dashboardv2/public/js/views/business_catalog/BusinessCatalogDetailLayoutView.js
@@ -0,0 +1,197 @@
+/**
+ * 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/business_catalog/BusinessCatalogDetailLayoutView_tmpl',
+    'utils/Utils',
+    'collection/VCatalogList',
+    'models/VEntity',
+], function(require, Backbone, BusinessCatalogDetailLayoutViewTmpl, Utils, VCatalogList, VEntity) {
+    'use strict';
+
+    var BusinessCatalogDetailLayoutView = Backbone.Marionette.LayoutView.extend(
+        /** @lends BusinessCatalogDetailLayoutView */
+        {
+            _viewName: 'BusinessCatalogDetailLayoutView',
+
+            template: BusinessCatalogDetailLayoutViewTmpl,
+
+            /** Layout sub regions */
+            regions: {
+                REntityDetailTableLayoutView: "#r_entityDetailTableLayoutView",
+                RSchemaTableLayoutView: "#r_schemaTableLayoutView",
+                RTagTableLayoutView: "#r_tagTableLayoutView",
+                RLineageLayoutView: "#r_lineageLayoutView",
+            },
+            /** ui selector cache */
+            ui: {
+                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"]'
+            },
+            /** 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.ui.description.text().length) {
+                        this.ui.descriptionTextArea.val(this.ui.description.text());
+                    }
+                };
+                events["click " + this.ui.cancelButton] = 'onCancelButtonClick';
+                return events;
+            },
+            /**
+             * intialize a new BusinessCatalogDetailLayoutView Layout
+             * @constructs
+             */
+            initialize: function(options) {
+                _.extend(this, _.pick(options, 'globalVent', 'url', 'collection'));
+                this.bindEvents();
+            },
+            bindEvents: function() {
+                var that = this;
+                this.listenTo(this.collection, 'error', function(model, response) {
+                    this.$('.fontLoader').hide();
+                    if (response && response.responseJSON && response.responseJSON.message) {
+                        Utils.notifyError({
+                            content: response.responseJSON.message
+                        });
+                    }
+
+                }, this);
+                this.listenTo(this.collection, 'reset', function() {
+                    this.$('.fontLoader').hide();
+                    this.$('.hide').removeClass('hide');
+                    this.model = this.collection.first();
+                    var name = this.model.get('name'),
+                        description = this.model.get('description'),
+                        createdDate = this.model.get('creation_time');
+                    if (name) {
+                        this.ui.title.show();
+                        this.ui.title.html('<span>' + name + '</span>');
+                    } else {
+                        this.ui.title.hide();
+                    }
+                    if (description) {
+                        this.ui.description.show();
+                        this.ui.description.html('<span>' + description + '</span>');
+                    } else {
+                        this.ui.description.hide();
+                    }
+                    if (createdDate) {
+                        this.ui.createDate.html('<strong> Date Created: </strong> ' + new Date(createdDate));
+                    }
+                }, this);
+            },
+            onRender: function() {
+                var that = this;
+                this.$('.fontLoader').show();
+                this.ui.editBox.hide();
+            },
+            fetchCollection: function() {
+                this.$('.fontLoader').show();
+                this.collection.fetch({ reset: true });
+            },
+
+            onCancelButtonClick: function() {
+                this.ui.description.show();
+                this.ui.editButton.show();
+                this.ui.editBox.hide();
+            },
+            addTagCollectionList: function(obj, searchString) {
+                var list = "",
+                    that = this;
+                _.each(obj, function(model) {
+                    var tags = model.get("tags");
+                    if (!_.contains(that.tagElement, tags)) {
+                        if (searchString) {
+                            if (tags.search(new RegExp(searchString, "i")) != -1) {
+                                list += '<div><span>' + tags + '</span></div>';
+                                return;
+                            }
+                        } else {
+                            list += '<div><span>' + tags + '</span></div>';
+                        }
+                    }
+                });
+                if (list.length <= 0) {
+                    list += '<div><span>' + "No more tags" + '</span></div>';
+                }
+                this.ui.appendList.html(list);
+            },
+            addTagToTerms: function(tagObject) {
+                var tagData = "";
+                _.each(tagObject, function(val) {
+                    tagData += '<span class="inputTag">' + 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.collection.fetch({ reset: true });
+                    },
+                    error: function(error, data, status) {
+                        if (error && error.responseText) {
+                            var data = JSON.parse(error.responseText);
+                        }
+                    },
+                    complete: function() {}
+                });
+            },
+            offlineSearchTag: function(e) {
+                this.addTagCollectionList(this.tagCollection.fullCollection.models, $(e.currentTarget).val());
+            },
+            onClickAddTagBtn: function() {
+                this.ui.searchTag.val("");
+                this.offlineSearchTag(this.ui.searchTag[0]);
+            }
+        });
+    return BusinessCatalogDetailLayoutView;
+
+});

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/js/views/business_catalog/BusinessCatalogHeader.js
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/views/business_catalog/BusinessCatalogHeader.js b/dashboardv2/public/js/views/business_catalog/BusinessCatalogHeader.js
new file mode 100644
index 0000000..7fb48f8
--- /dev/null
+++ b/dashboardv2/public/js/views/business_catalog/BusinessCatalogHeader.js
@@ -0,0 +1,100 @@
+/**
+ * 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/BusinessCatalogHeader'
+], function(require, tmpl) {
+    'use strict';
+
+    var BusinessCatalogHeader = Marionette.LayoutView.extend({
+        template: tmpl,
+        templateHelpers: function() {},
+        regions: {},
+        events: {},
+        initialize: function(options) {
+            _.extend(this, _.pick(options, 'globalVent', 'url', 'collection'));
+            this.value = [];
+
+        },
+        /**
+         * After Page Render createBrudCrum called.
+         * @return {[type]} [description]
+         */
+        render: function() {
+            $(this.el).html(this.template());
+            var that = this;
+            if (this.url) {
+                var t = [];
+                var splitURL = this.url.split("api/atlas/v1/taxonomies/");
+                if (splitURL.length > 1) {
+                    var x = splitURL[1].split("/terms/");
+                }
+
+                var href = "";
+                for (var v in x) {
+                    if (v == 0) {
+                        href = x[v];
+                        t.push({
+                            value: x[v],
+                            href: href
+                        });
+                    } else {
+                        href += "/terms/" + x[v];
+                        t.push({
+                            value: x[v],
+                            href: href
+                        })
+                    };
+                }
+                this.value = t;
+            }
+            this.listenTo(this.collection, 'reset', function() {
+                setTimeout(function() {
+                    that.createBrudCrum();
+                }, 0);
+
+            }, this);
+            return this;
+        },
+        createBrudCrum: function() {
+            var li = "",
+                value = this.value,
+                that = this;
+            _.each(value, function(object) {
+                li += '<li><a href="/#!/taxonomy/detailCatalog/api/atlas/v1/taxonomies/' + object.href + '">' + object.value + '</a></li>';
+            });
+            this.$('.breadcrumb').html(li);
+            //this.$(".breadcrumb").asBreadcrumbs("destroy");
+            this.$('.breadcrumb').asBreadcrumbs({
+                namespace: 'breadcrumb',
+                overflow: "left",
+                dropicon: "fa fa-ellipsis-h",
+                dropdown: function() {
+                    return '<div class=\"dropdown\">' +
+                        '<a href=\"javascript:void(0);\" class=\"' + this.namespace + '-toggle\" data-toggle=\"dropdown\"><i class=\"' + this.dropicon + '\"</i></a>' +
+                        '<ul class=\"' + this.namespace + '-menu dropdown-menu popover bottom arrowPosition \" ><div class="arrow"></div></ul>' +
+                        '</div>';
+                },
+                dropdownContent: function(a) {
+                    return '<li><a href="' + a.find('a').attr('href') + '" class="dropdown-item">' + a.text() + "</a></li>";
+                }
+            });
+        }
+    });
+    return BusinessCatalogHeader;
+});

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/js/views/business_catalog/BusinessCatalogLayoutView.js
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/views/business_catalog/BusinessCatalogLayoutView.js b/dashboardv2/public/js/views/business_catalog/BusinessCatalogLayoutView.js
new file mode 100644
index 0000000..3136488
--- /dev/null
+++ b/dashboardv2/public/js/views/business_catalog/BusinessCatalogLayoutView.js
@@ -0,0 +1,362 @@
+/**
+ * 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/business_catalog/BusinessCatalogLayoutView_tmpl',
+    'utils/Utils',
+    'collection/VCatalogList',
+    'utils/CommonViewFunction'
+], function(require, Backbone, BusinessCatalogLayoutViewTmpl, Utils, VCatalogList, CommonViewFunction) {
+    'use strict';
+
+    var BusinessCatalogLayoutView = Backbone.Marionette.LayoutView.extend(
+        /** @lends BusinessCatalogLayoutView */
+        {
+            _viewName: 'BusinessCatalogLayoutView',
+
+            template: BusinessCatalogLayoutViewTmpl,
+
+            /** Layout sub regions */
+            regions: {},
+            /** ui selector cache */
+            ui: {
+                Parent: '[data-id="Parent"]',
+                chiledList: '[data-id="chiledList"]',
+                liClick: 'li a[data-href]',
+                backTaxanomy: '[data-id="backTaxanomy"]',
+            },
+            /** ui events hash */
+            events: function() {
+                var events = {};
+                events['dblclick ' + this.ui.liClick] = function(e) {
+                    $(e.currentTarget).parent('li').find('.tools .taxanomyloader').show();
+                    this.singleClick = false;
+                    this.forwardClick(e, true);
+                };
+                events['click ' + this.ui.liClick] = function(e) {
+                    this.dblClick = false;
+                    this.forwardClick(e);
+                };
+                events['click ' + this.ui.backTaxanomy] = function(e) {
+                    this.backButtonTaxanomy();
+                };
+                return events;
+            },
+            /**
+             * intialize a new BusinessCatalogLayoutView Layout
+             * @constructs
+             */
+            initialize: function(options) {
+                _.extend(this, _.pick(options, 'globalVent', 'url'));
+                this.parentCollection = new VCatalogList();
+                this.chiledCollection = new VCatalogList();
+                this.dblClick = false;
+                this.singleClick = false;
+            },
+            bindEvents: function() {
+                var that = this;
+                this.listenTo(this.parentCollection, 'reset', function() {
+                    this.dblClick = false;
+                    this.generateTree(true);
+                }, this);
+                this.listenTo(this.chiledCollection, 'reset', function() {
+                    this.dblClick = false;
+                    this.generateTree();
+                }, this);
+                this.listenTo(this.chiledCollection, 'error', function(model, response) {
+                    if (response && response.responseJSON && response.responseJSON.message) {
+                        Utils.notifyError({
+                            content: response.responseJSON.message
+                        });
+                    }
+                    this.$('.taxanomyloader').hide();
+                    this.$('.contentLoading').hide();
+                }, this);
+                this.listenTo(this.parentCollection, 'error', function(model, response) {
+                    if (response && response.responseJSON && response.responseJSON.message) {
+                        Utils.notifyError({
+                            content: response.responseJSON.message
+                        });
+                    }
+                    this.$('.taxanomyloader').hide();
+                    this.$('.contentLoading').hide();
+                }, this);
+            },
+            onRender: function() {
+                var that = this;
+                this.bindEvents();
+                that.ui.backTaxanomy.hide();
+                this.fetchCollection(this.url, true);
+                $('body').on("click", '.termPopoverList li', function(e) {
+                    that[$(this).find("a").data('fn')](e);
+                });
+                $('body').click(function(e) {
+                    if ($('.termPopoverList').length) {
+                        if ($(e.target).hasClass('termPopover')) {
+                            return;
+                        }
+                        that.$('.termPopover').popover('hide');
+                    }
+                });
+            },
+            manualRender: function(url, isParent) {
+                this.fetchCollection(url, isParent);
+            },
+            fetchCollection: function(url, isParent) {
+                if (url) {
+                    this.url = url;
+                } else {
+                    var parentURL = this.ui.Parent.find('a').data('href');
+                    if (parentURL) {
+                        this.url = parentURL;
+                    } else {
+                        this.url = "api/atlas/v1/taxonomies";
+                    }
+
+                }
+                this.$('.taxanomyloader').show();
+                this.$('.contentLoading').show();
+                if (isParent) {
+                    this.parentCollection.url = this.url;
+                    this.parentCollection.fullCollection.reset(undefined, { silent: true });
+                    this.parentCollection.fetch({ reset: true });
+                } else {
+                    this.chiledCollection.url = this.url + "?hierarchy/path:.";
+                    this.chiledCollection.fullCollection.reset(undefined, { silent: true });
+                    this.chiledCollection.fetch({ reset: true });
+                }
+            },
+            forwardClick: function(e, forward) {
+                var hrefUrl = $(e.currentTarget).data('href');
+                if (forward) {
+                    this.dblClick = true;
+                    this.fetchCollection(hrefUrl, true);
+                } else {
+                    this.singleClick = true;
+                }
+                Utils.setUrl({
+                    url: '#!/taxonomy/detailCatalog' + hrefUrl,
+                    mergeBrowserUrl: false,
+                    updateTabState: function() {
+                        return { taxonomyUrl: this.url, stateChanged: false };
+                    },
+                    trigger: true
+                });
+                this.addActiveClass(e);
+            },
+            addActiveClass: function(e) {
+                $(e.currentTarget).parents('ul.taxonomyTree').find('li').removeClass('active');
+                $(e.currentTarget).parent('li').addClass('active');
+            },
+            generateTree: function(isParent) {
+                var parentLi = "",
+                    chiledLi = "",
+                    that = this;
+
+                function createTaxonomy(url) {
+                    var href = false;
+                    _.each(that.parentCollection.fullCollection.models, function(model, key) {
+
+                        if (model.get('terms')) {
+                            href = model.get('terms').href;
+                        }
+                        var hrefUrl = "/api" + model.get('href').split("/api")[1];
+                        if (hrefUrl) {
+                            var backUrlCheck = hrefUrl.split("taxonomies/");
+                            if (backUrlCheck.length > 1) {
+                                if (backUrlCheck[1].split("/terms").length <= 1) {
+                                    that.ui.backTaxanomy.hide();
+                                } else {
+                                    that.ui.backTaxanomy.show();
+                                }
+                            }
+                        }
+                        parentLi = '<div class="tools"><i class="fa fa-refresh fa-spin-custom taxanomyloader"></i><i class="fa fa-ellipsis-h termPopover"></i></div><a href="javascript:void(0)" data-href=' + hrefUrl + '>' + model.get('name') + '</a>';
+                    });
+                    if (href) {
+                        that.fetchCollection(href);
+                    }
+                    that.ui.chiledList.html('');
+                    that.ui.Parent.addClass('active');
+                    that.ui.Parent.html(parentLi);
+                }
+
+                function createTerm() {
+                    _.each(that.chiledCollection.fullCollection.models, function(model, key) {
+                        chiledLi += '<li class="children"><div class="tools"><i class="fa fa-refresh fa-spin-custom taxanomyloader"></i><i class="fa fa-ellipsis-h termPopover" ></i></div><a href="javascript:void(0)" data-href=/api' + model.get('href').split("/api")[1] + '>' + model.get('name') + '</a></li>';
+                    });
+                    that.ui.chiledList.html(chiledLi);
+                }
+
+                if (isParent) {
+                    createTaxonomy();
+                } else {
+                    createTerm();
+
+                }
+                this.$('.taxanomyloader').hide();
+                this.$('.contentLoading').hide();
+                this.$('.termPopover').popover({
+                    placement: 'bottom',
+                    html: true,
+                    trigger: 'manual',
+                    container: 'body',
+                    content: function() {
+                        return "<ul class='termPopoverList'>" +
+                            "<li class='listTerm' ><i class='fa fa-search'></i> <a href='javascript:void(0)' data-fn='onSearchTerm'>Search Asset</a></li>" +
+                            "<li class='listTerm'><i class='fa fa-plus'></i> <a href='javascript:void(0)' data-fn='onAddTerm'>Add Subterm</a></li>" +
+                            /* "<li class='listTerm' ><i class='fa fa-arrow-right'></i> <a href='javascript:void(0)' data-fn='moveTerm'>Move Term</a></li>" +
+                             "<li class='listTerm' ><i class='fa fa-edit'></i> <a href='javascript:void(0)' data-fn='onEditTerm'>Edit Term</a></li>" +
+                             "<li class='listTerm'><i class='fa fa-trash'></i> <a href='javascript:void(0)' data-fn='deleteTerm'>Delete Term</a></li>" +*/
+                            "</ul>";
+                    }
+                });
+                this.$('.termPopover').off('click').on('click', function(e) {
+                    // if any other popovers are visible, hide them
+                    e.preventDefault();
+                    that.$('.termPopover').not(this).popover('hide');
+                    $(this).popover('toggle');
+                });
+            },
+            onAddTerm: function(e) {
+                var that = this;
+                require([
+                    'views/business_catalog/AddTermLayoutView',
+                    'modules/Modal'
+                ], function(AddTermLayoutView, Modal) {
+                    var view = new AddTermLayoutView({
+                        url: that.$('.taxonomyTree').find('li.active').find("a").data("href"),
+                        model: new that.parentCollection.model()
+                    });
+                    var modal = new Modal({
+                        title: 'Add Term',
+                        content: view,
+                        okCloses: true,
+                        showFooter: true,
+                        allowCancel: true,
+                        okText: 'Create',
+                    }).open();
+                    modal.on('ok', function() {
+                        that.saveAddTerm(view);
+                    });
+                    view.on('closeModal', function() {
+                        modal.trigger('cancel');
+                    });
+
+                });
+            },
+            saveAddTerm: function(view) {
+                var that = this;
+                view.model.url = view.url + "/terms/" + view.ui.termName.val();
+                view.model.set({ description: view.ui.termDetail.val() }).save(null, {
+                    success: function(model, response) {
+                        that.fetchCollection(that.url);
+                        Utils.notifySuccess({
+                            content: "Term Created successfully"
+                        });
+                    },
+                    error: function(model, response) {
+                        Utils.notifyError({
+                            content: response.responseJSON.message
+                        });
+                    }
+                });
+            },
+            deleteTerm: function(e) {
+                var tagName = this.$('.taxonomyTree').find('li.active').find("a").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 = this.$('.taxonomyTree').find('li.active').find("a").text(),
+                    guid = $(e.target).data("guid");
+                CommonViewFunction.deleteTag({
+                    'tagName': tagName,
+                    'guid': guid,
+                    'collection': that.parentCollection
+                });
+            },
+            moveTerm: function() {
+                var that = this;
+                require([
+                    'views/business_catalog/MoveTermLayoutView',
+                    'modules/Modal'
+                ], function(MoveTermLayoutView, Modal) {
+                    var view = new MoveTermLayoutView({
+                        taxanomyCollection: that.collection
+                    });
+                    var modal = new Modal({
+                        title: 'Move Term',
+                        content: view,
+                        okCloses: true,
+                        showFooter: true,
+                        allowCancel: true,
+                        okText: 'Move',
+                    }).open();
+                    // modal.on('ok', function() {
+                    //     that.saveAddTerm(view);
+                    // });
+                    view.on('closeModal', function() {
+                        modal.trigger('cancel');
+                    });
+                });
+            },
+            onSearchTerm: function() {
+                Utils.setUrl({
+                    url: '#!/search/searchResult',
+                    urlParams: {
+                        query: this.$('.taxonomyTree').find('li.active').find("a").text(),
+                        searchType: "fulltext",
+                        dslChecked: false
+                    },
+                    updateTabState: function() {
+                        return { searchUrl: this.url, stateChanged: true };
+                    },
+                    mergeBrowserUrl: false,
+                    trigger: true
+                });
+            },
+            backButtonTaxanomy: function(e) {
+                var that = this;
+                this.dblClick = false;
+                var dataURL = this.$('.taxonomyTree').find('li[data-id="Parent"]').find("a").data('href').split("/terms");
+                var backUrl = dataURL.pop();
+                if (dataURL.join("/terms").length) {
+                    this.ui.backTaxanomy.show();
+                    var currentURL = "!/taxonomy/detailCatalog" + dataURL.join("/terms");
+                    Utils.setUrl({
+                        url: currentURL,
+                        mergeBrowserUrl: false,
+                        trigger: true,
+                        updateTabState: function() {
+                            return { taxonomyUrl: currentURL, stateChanged: false };
+                        }
+                    });
+                }
+            }
+        });
+    return BusinessCatalogLayoutView;
+});

http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/440bd2ae/dashboardv2/public/js/views/business_catalog/MoveTermLayoutView.js
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/views/business_catalog/MoveTermLayoutView.js b/dashboardv2/public/js/views/business_catalog/MoveTermLayoutView.js
new file mode 100644
index 0000000..3add56a
--- /dev/null
+++ b/dashboardv2/public/js/views/business_catalog/MoveTermLayoutView.js
@@ -0,0 +1,75 @@
+/**
+ * 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/business_catalog/MoveTermLayoutView_tmpl',
+    'utils/Utils',
+    'tree'
+], function(require, Backbone, MoveTermLayoutViewTmpl, Utils) {
+    'use strict';
+
+    var MoveTermLayoutView = Backbone.Marionette.LayoutView.extend(
+        /** @lends BusinessCatalogLayoutView */
+        {
+            _viewName: 'MoveTermLayoutView',
+
+            template: MoveTermLayoutViewTmpl,
+            /** Layout sub regions */
+            regions: {},
+            /** ui selector cache */
+            ui: {
+                moveTree: '[data-id="moveTree"]'
+            },
+            /** ui events hash */
+            events: function() {
+                var events = {};
+                return events;
+            },
+            /**
+             * intialize a new BusinessCatalogLayoutView Layout
+             * @constructs
+             */
+            initialize: function(options) {
+                _.extend(this, _.pick(options, 'taxanomyCollection'));
+                // $('#using_json_2').jstree({
+
+                // });
+            },
+            bindEvents: function() {},
+            onRender: function() {
+                this.taxanomyCollectionList();
+            },
+            taxanomyCollectionList: function() {
+                //     var data = [];
+                //     _.each(this.taxanomyCollection.models, function(val, obj) {
+                //         var obj = {};
+                //         obj['text'] = val.get('name');
+                //         //obj['a_attr'] = { 'href': '#!/detailPage/' + val.get('$id$').id }
+                //         obj['children'] = [];
+                //         data.push(obj)
+                //     });
+                //     this.$('#tree').jstree({
+                //         'core': {
+                //             'data': data
+                //         }
+                //     });
+            }
+        });
+    return MoveTermLayoutView;
+});