Repository: incubator-atlas Updated Branches: refs/heads/0.7-incubating 0615dcc9f -> f4b5ad6ea
ATLAS-725 : UI : Filter out or highlight deleted entities in search result outputs(dsl, text) , schema view, and lineage graph Project: http://git-wip-us.apache.org/repos/asf/incubator-atlas/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-atlas/commit/f4b5ad6e Tree: http://git-wip-us.apache.org/repos/asf/incubator-atlas/tree/f4b5ad6e Diff: http://git-wip-us.apache.org/repos/asf/incubator-atlas/diff/f4b5ad6e Branch: refs/heads/0.7-incubating Commit: f4b5ad6ea05d43b2645d0e17a894eb2c2b78c33e Parents: 0615dcc Author: Keval Bhatt <[email protected]> Authored: Fri Jun 17 20:52:33 2016 +0530 Committer: Suma Shivaprasad <[email protected]> Committed: Fri Jun 17 18:22:55 2016 -0700 ---------------------------------------------------------------------- dashboardv2/public/css/scss/form.scss | 17 ++++++ dashboardv2/public/css/scss/main.scss | 44 ++++++++++++++ dashboardv2/public/img/icon-gear-delete.png | Bin 0 -> 17677 bytes dashboardv2/public/img/icon-table-delete.png | Bin 0 -> 14117 bytes dashboardv2/public/js/utils/Globals.js | 4 ++ dashboardv2/public/js/utils/Overrides.js | 2 + .../views/detail_page/DetailPageLayoutView.js | 13 +++- .../public/js/views/graph/LineageLayoutView.js | 43 ++++++++----- .../js/views/search/SearchResultLayoutView.js | 60 ++++++++++++++----- 9 files changed, 154 insertions(+), 29 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/f4b5ad6e/dashboardv2/public/css/scss/form.scss ---------------------------------------------------------------------- diff --git a/dashboardv2/public/css/scss/form.scss b/dashboardv2/public/css/scss/form.scss index 29c96ed..470dbf7 100644 --- a/dashboardv2/public/css/scss/form.scss +++ b/dashboardv2/public/css/scss/form.scss @@ -188,3 +188,20 @@ button:focus { } } } + +.deleteBtn { + border-color: $color_mountain_mist_approx; + color: $color_mountain_mist_approx; + cursor: default; + margin: 10px; + &:hover { + border-color: $color_mountain_mist_approx; + color: $color_mountain_mist_approx; + background-color: $transparent; + } + &:focus { + border-color: $color_mountain_mist_approx; + color: $color_mountain_mist_approx; + background-color: $transparent; + } +} http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/f4b5ad6e/dashboardv2/public/css/scss/main.scss ---------------------------------------------------------------------- diff --git a/dashboardv2/public/css/scss/main.scss b/dashboardv2/public/css/scss/main.scss index c810596..85a68b1 100644 --- a/dashboardv2/public/css/scss/main.scss +++ b/dashboardv2/public/css/scss/main.scss @@ -83,6 +83,7 @@ $color_mountain_mist_approx: #999; $color_suva_gray_approx: #868686; // $tag_color:#9599a0; $tag_color:#4A90E2; +$delete_link:#BB5838; //urls $url_0: url(../img/loading.gif); .card { @@ -238,3 +239,46 @@ ul { word-wrap: break-word; } } + +.readOnly { + .addTag-dropdown { + display: none; + } + span { + &.inputTag[data-id="tagClick"] { + i.fa-close[data-id="deleteTag"] { + display: none; + } + } + } + &.readOnlyLink { + display: inline-block; + .deleteBtn { + padding: 0px 5px; + } + a { + color: $delete_link; + } + } + a { + &.inputTag[data-id="addTag"] { + display: none; + } + &.inputTag[data-id="tagClick"] { + i.fa-times[data-id="delete"] { + display: none; + } + } + i { + &.fa-trash[data-guid] { + display: none; + } + &.fa-trash[data-id="delete"] { + display: none; + } + } + &.inputAssignTag[data-id="addTerm"] { + display: none; + } + } +} http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/f4b5ad6e/dashboardv2/public/img/icon-gear-delete.png ---------------------------------------------------------------------- diff --git a/dashboardv2/public/img/icon-gear-delete.png b/dashboardv2/public/img/icon-gear-delete.png new file mode 100644 index 0000000..90590fc Binary files /dev/null and b/dashboardv2/public/img/icon-gear-delete.png differ http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/f4b5ad6e/dashboardv2/public/img/icon-table-delete.png ---------------------------------------------------------------------- diff --git a/dashboardv2/public/img/icon-table-delete.png b/dashboardv2/public/img/icon-table-delete.png new file mode 100644 index 0000000..67a6c8f Binary files /dev/null and b/dashboardv2/public/img/icon-table-delete.png differ http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/f4b5ad6e/dashboardv2/public/js/utils/Globals.js ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/utils/Globals.js b/dashboardv2/public/js/utils/Globals.js index 4b3cbbc..344e0f1 100644 --- a/dashboardv2/public/js/utils/Globals.js +++ b/dashboardv2/public/js/utils/Globals.js @@ -41,6 +41,10 @@ define(['require'], function(require) { TAG_ADD: "Tag Added", TAG_DELETE: "Tag Deleted" } + Globals.entityStateReadOnly = { + ACTIVE: false, + DELETED: true + } Globals.userLogedIn = { status: false, response: {} http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/f4b5ad6e/dashboardv2/public/js/utils/Overrides.js ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/utils/Overrides.js b/dashboardv2/public/js/utils/Overrides.js index 3f9dd0c..b2af8e1 100644 --- a/dashboardv2/public/js/utils/Overrides.js +++ b/dashboardv2/public/js/utils/Overrides.js @@ -45,6 +45,8 @@ define(['require', 'backgrid', 'asBreadcrumbs'], function(require) { Backgrid.Cell.prototype.initialize = function() { cellInit.apply(this, arguments); var className = this.column.get('className'); + var rowClassName = this.column.get('rowClassName'); + if (rowClassName) this.$el.addClass(rowClassName); if (className) this.$el.addClass(className); } /* http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/f4b5ad6e/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 f2838b1..cb96c79 100644 --- a/dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js +++ b/dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js @@ -117,9 +117,16 @@ 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) { var tagGuid = collectionJSON[0].id.id; + this.readOnly = Globals.entityStateReadOnly[collectionJSON[0].id.state]; + } + if (this.readOnly) { + this.$el.addClass('readOnly'); + } else { + this.$el.removeClass('readOnly'); } if (collectionJSON && collectionJSON.length) { if (collectionJSON[0].values) { @@ -127,7 +134,11 @@ define(['require', this.description = collectionJSON[0].values.description; if (this.name) { this.ui.title.show(); - this.ui.title.html('<span>' + this.name + '</span>'); + var titleName = '<span>' + this.name + '</span>'; + if (this.readOnly) { + titleName += '<button title="Deleted" class="btn btn-atlasAction btn-atlas deleteBtn"><i class="fa fa-trash"></i> Deleted</button>' + } + this.ui.title.html(titleName); } else { this.ui.title.hide(); } http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/f4b5ad6e/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 ebdeec6..c4796d9 100644 --- a/dashboardv2/public/js/views/graph/LineageLayoutView.js +++ b/dashboardv2/public/js/views/graph/LineageLayoutView.js @@ -23,8 +23,9 @@ define(['require', 'models/VEntity', 'utils/Utils', 'dagreD3', - 'd3-tip' -], function(require, Backbone, LineageLayoutViewtmpl, VLineageList, VEntity, Utils, dagreD3, d3Tip) { + 'd3-tip', + 'utils/Globals' +], function(require, Backbone, LineageLayoutViewtmpl, VLineageList, VEntity, Utils, dagreD3, d3Tip, Globals) { 'use strict'; var LineageLayoutView = Backbone.Marionette.LayoutView.extend( @@ -110,19 +111,24 @@ define(['require', function addValueInObject(data) { var obj = {}; - if (data && data.definition && data.definition.values) { - var values = data.definition.values; - obj['label'] = values.name.trunc(20); - obj['toolTiplabel'] = values.name; - obj['id'] = data.GUID; - if (values.queryText) { - obj['queryText'] = values.queryText; + if (data && data.definition) { + if (data.definition.values) { + var values = data.definition.values; + obj['label'] = values.name.trunc(20); + obj['toolTiplabel'] = values.name; + obj['id'] = data.GUID; + if (values.queryText) { + obj['queryText'] = values.queryText; + } + if (data.definition.id && data.definition.id.state) { + obj['state'] = data.definition.id.state; + } } - obj['shape'] = "img"; } else { - obj['label'] = vertices[val].values.name; - obj['toolTiplabel'] = values.name; + obj['label'] = "" + obj['toolTiplabel'] = ""; } + obj['shape'] = "img"; obj['class'] = "type-TOP"; if (data.GUID) { that.g.setNode(data.GUID, obj); @@ -177,6 +183,11 @@ define(['require', obj['class'] = "type-TOP"; obj['shape'] = "img"; obj['typeName'] = vertices[val].values.vertexId.values.typeName; + if (vertices[val].values.state) { + obj['state'] = vertices[val].values.state; + } else if (vertices[val].values.vertexId.values.state) { + obj['state'] = vertices[val].values.vertexId.values.state; + } if (val && obj) { that.g.setNode(val, obj); } @@ -283,13 +294,17 @@ define(['require', .attr("xlink:href", function(d) { if (node) { if (node.typeName) { - if (node.id == that.guid) { + if (Globals.entityStateReadOnly[node.state]) { + return '../img/icon-table-delete.png'; + } else if (node.id == that.guid) { return '../img/icon-table-active.png'; } else { return '../img/icon-table.png'; } } else { - if (node.id == that.guid) { + if (Globals.entityStateReadOnly[node.state]) { + return '../img/icon-gear-delete.png'; + } else if (node.id == that.guid) { return '../img/icon-gear-active.png'; } else { return '../img/icon-gear.png'; http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/f4b5ad6e/dashboardv2/public/js/views/search/SearchResultLayoutView.js ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/views/search/SearchResultLayoutView.js b/dashboardv2/public/js/views/search/SearchResultLayoutView.js index f792baa..75bf6ef 100644 --- a/dashboardv2/public/js/views/search/SearchResultLayoutView.js +++ b/dashboardv2/public/js/views/search/SearchResultLayoutView.js @@ -289,10 +289,17 @@ define(['require', return new Date(rawValue); } if (model.get('name') == rawValue) { + var nameHtml = ""; if (model.get('$id$')) { - return '<a href="#!/detailPage/' + model.get('$id$').id + '">' + rawValue + '</a>'; + nameHtml = '<a href="#!/detailPage/' + model.get('$id$').id + '">' + rawValue + '</a>'; } else { - return '<a>' + rawValue + '</a>'; + nameHtml = '<a>' + rawValue + '</a>'; + } + if (Globals.entityStateReadOnly[model.get('$id$').state]) { + nameHtml += '<button title="Deleted" class="btn btn-atlasAction btn-atlas deleteBtn"><i class="fa fa-trash"></i></button>'; + return '<div class="readOnly readOnlyLink">' + nameHtml + '</div>'; + } else { + return nameHtml; } } else { return rawValue; @@ -313,7 +320,12 @@ define(['require', className: 'searchTag', formatter: _.extend({}, Backgrid.CellFormatter.prototype, { fromRaw: function(rawValue, model) { - return CommonViewFunction.tagForTable(model); + if (Globals.entityStateReadOnly[model.get('$id$').state]) { + return '<div class="readOnly">' + CommonViewFunction.tagForTable(model); + '</div>'; + } else { + return CommonViewFunction.tagForTable(model); + } + } }) }; @@ -330,7 +342,11 @@ define(['require', if (returnObject.object) { that.bradCrumbList.push(returnObject.object); } - return returnObject.html; + if (Globals.entityStateReadOnly[model.get('$id$').state]) { + return '<div class="readOnly">' + returnObject.html + '</div>'; + } else { + return returnObject.html; + } } }) }; @@ -375,10 +391,18 @@ define(['require', 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); + if (data.definition) { + if (data.definition.id && data.definition.id.state) { + if (Globals.entityStateReadOnly[data.definition.id.state]) { + that.$('td a[data-id="' + guid + '"]').parent().addClass('readOnly readOnlyLink'); + that.$('td a[data-id="' + guid + '"]').parent().append('<button title="Deleted" class="btn btn-atlasAction btn-atlas deleteBtn"><i class="fa fa-trash"></i></button>'); + } + } + if (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) {}, @@ -387,17 +411,25 @@ define(['require', that.checkTableFetch(); } }); - return '<a href="#!/detailPage/' + guid + '" data-id="' + guid + '"></a>'; + return '<div><a href="#!/detailPage/' + guid + '" data-id="' + guid + '"></a></div>'; } 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); + if (data.definition) { + if (data.definition.id && data.definition.id.state) { + if (Globals.entityStateReadOnly[data.definition.id.state]) { + that.$('td a[data-id="' + guid + '"]').parent().addClass('readOnly readOnlyLink'); + that.$('td a[data-id="' + guid + '"]').parent().append('<button title="Deleted" class="btn btn-atlasAction btn-atlas deleteBtn"><i class="fa fa-trash"></i></button>'); + } + } + if (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) {}, @@ -406,7 +438,7 @@ define(['require', that.checkTableFetch(); } }); - return '<a href="#!/detailPage/' + guid + '" data-id="' + guid + '"></a>'; + return '<div><a href="#!/detailPage/' + guid + '" data-id="' + guid + '"></a></div>'; } } })
