atlas-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From yhema...@apache.org
Subject [3/5] incubator-atlas git commit: ATLAS-802 New look UI to show Business Catalog functionalities (kevalbhatt18 via yhemanth)
Date Thu, 19 May 2016 17:46:00 GMT
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…" 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…" 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;
+});


Mime
View raw message