This is an automated email from the ASF dual-hosted git repository. kbhatt pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/atlas.git
The following commit(s) were added to refs/heads/master by this push: new 786a0ea ATLAS-3062 : UI : Add relationship table inside relationships tab 786a0ea is described below commit 786a0eaab8053693d16f731d09e7667de5d697df Author: kevalbhatt <kbh...@apache.org> AuthorDate: Thu Feb 28 18:51:08 2019 +0530 ATLAS-3062 : UI : Add relationship table inside relationships tab --- dashboardv2/public/css/scss/common.scss | 31 ++- dashboardv2/public/css/scss/graph.scss | 244 ++++++--------------- dashboardv2/public/css/scss/relationship.scss | 62 +----- .../js/templates/graph/LineageLayoutView_tmpl.html | 30 ++- .../graph/RelationshipLayoutView_tmpl.html | 49 ++++- .../js/views/detail_page/DetailPageLayoutView.js | 1 - .../public/js/views/graph/LineageLayoutView.js | 108 +++------ .../js/views/graph/RelationshipLayoutView.js | 64 ++++-- 8 files changed, 233 insertions(+), 356 deletions(-) diff --git a/dashboardv2/public/css/scss/common.scss b/dashboardv2/public/css/scss/common.scss index 65bafc3..35acc43 100644 --- a/dashboardv2/public/css/scss/common.scss +++ b/dashboardv2/public/css/scss/common.scss @@ -20,6 +20,7 @@ /* common.scss */ .readOnly { + span, button, a { @@ -27,31 +28,39 @@ &.fa-trash[data-guid] { display: none; } + &.fa-trash[data-id="delete"] { display: none; } } + &.btn[data-id="addTag"] { display: none; } + &.btn[data-id="addTerm"] { display: none; } + &.btn[data-id="editButton"] { display: none; } + &.editbutton[data-id="editButton"] { display: none !important; } + &[data-id="delete"], &[data-id="edit"] { display: none; } + &.btn[data-id="tagClick"] { span { display: block; padding: 3px 5px 3px 5px; } + i.fa-close[data-id="deleteTag"], i.fa-times[data-id="deleteTag"], i.fa-times[data-id="delete"] { @@ -69,6 +78,7 @@ #sidebar-wrapper { left: 0; } + #wrapper { padding-left: 0px; } @@ -93,6 +103,7 @@ pre { white-space: pre-wrap; /* CSS3 - Text module (Candidate Recommendation) http://www.w3.org/TR/css3-text/#white-space */ word-wrap: break-word; + /* IE 5.5+ */ &.code-block { code { @@ -100,11 +111,14 @@ pre { max-height: 400px; display: block; overflow: auto; + text-align: left; } + position: relative; overflow: hidden; + &.shrink { - height: 40px; + height: 100px; white-space: -moz-pre-wrap; /* Mozilla, supported since 1999 */ white-space: -pre-wrap; @@ -114,51 +128,62 @@ pre { white-space: pre-wrap; /* CSS3 - Text module (Candidate Recommendation) http://www.w3.org/TR/css3-text/#white-space */ word-wrap: break-word; + /* IE 5.5+ */ code { - height: 40px; + height: 100px; } + &.fixed-height { height: 75px; + code { height: 54px; } } + &.medium-height { height: 100px; } + .expand-collapse-button { i:before { content: "\f107"; } } } + .expand-collapse-button { position: absolute; right: 3px; top: 4px; z-index: 1; + i:before { content: "\f106"; } } + .json-key { color: brown; } + .json-value { color: navy; } + .json-string { color: olive; } } + code { font-family: monospace; } } #accordion { - .panel-default > .panel-heading{ + .panel-default>.panel-heading { cursor: pointer; } } \ No newline at end of file diff --git a/dashboardv2/public/css/scss/graph.scss b/dashboardv2/public/css/scss/graph.scss index 3c4be1e..fd2867e 100644 --- a/dashboardv2/public/css/scss/graph.scss +++ b/dashboardv2/public/css/scss/graph.scss @@ -58,6 +58,12 @@ transition: all 0.3s; stroke-width: 1.5px; + &.node-detail-highlight { + stroke: $color_havelock_blue_approx; + stroke-width: 2px; + opacity: 0.8; + } + &.nodeImage { &.green:hover { stroke: #ffb203; @@ -197,80 +203,6 @@ g.type-TK>rect { height: 100%; width: 100%; overflow: hidden; - - .lineage-edge-details { - position: absolute; - left: 0; - overflow: auto; - top: 0px; - max-height: 100%; - box-shadow: 4px 13px 14px -12px; - background: #e7e7e7; - transform: scaleX(0); - width: 200px; - transition: transform 0.3s ease-in; - - &.open { - transform: scaleX(1); - } - - .title { - background: black; - color: white; - padding: 10px; - padding-left: 17px; - margin-top: 0; - font-size: 14px; - - .navigation-font { - font-family: sans-serif; - padding: 0px 5px; - color: #fb4200; - } - } - - .close-details { - position: absolute; - top: 0; - color: white; - left: 0; - height: 21px; - width: 21px; - cursor: pointer; - font-size: 16px; - } - - .propagation-list { - overflow: auto; - list-style-type: none; - list-style-position: outside; - padding-left: 30px; - } - - .overlay { - position: absolute; - left: 0; - top: 0; - right: 0; - bottom: 0; - background: #d2d2d2b8; - z-index: 99; - } - - ul>li { - word-wrap: break-word; - margin-bottom: 5px; - text-align: left; - } - } -} - -.lineage-filter-box { - background-color: #e6e6e6; - padding: 4px; - border-radius: 5px; - width: 100%; - box-shadow: 1px 3px 3px 2px #bfbfbf; } .graph-button-group { @@ -283,113 +215,38 @@ g.type-TK>rect { .box-panel { position: absolute; - top: 45px; + top: 37px; border: 1px solid #ccc; width: 250px; max-height: 99%; overflow: auto; transition: all 0.3s ease; right: -273px; - box-shadow: 7px 1px 28px -3px; - background-color: #f5f5f5; + background-color: $white; z-index: 999; + box-shadow: 1px 19px 22px -17px; + border-radius: 10px; + max-height: 88%; - .header { - background: black; - color: white; - text-align: center; - margin-bottom: 15px; - position: absolute; - width: 100%; - - >h4 { - padding: 0px 36px 0px 10px; - word-break: break-all; - } + &.slide-from-left { + left: -273px; + right: 0px; - .fltr-togler, - .search-togler { - position: absolute; - right: 0px; - top: 0px; + &.size-lg { + left: -373px; } } - .body { - padding: 10px; - margin-top: 39px; - width: 100%; - position: relative; - height: 150px; - overflow: auto; - } -} - -.lineage-details.node-details.open { - overflow: hidden !important; - min-height: 300px; - - & span[data-id='close'] { - margin: 7px; - position: absolute; - right: 0; - z-index: 99; - } - - & div[data-id="entityList"] { - position: relative; - overflow: auto; - max-height: 250px; - top: 40px; + &.size-lg { + width: 350px; } - & h4.title { - position: fixed; - width: 100%; - } + &.show-box-panel { + right: 0px !important; - & table { - & tbody td { - word-wrap: break-word + &.slide-from-left { + left: 0; } - - table-layout: fixed; - } -} - -.lineage-details { - position: absolute; - left: 0; - overflow: auto; - top: 0px; - max-height: 100%; - box-shadow: 4px 13px 14px -12px; - background: #e7e7e7; - transform: scaleX(0); - width: 35%; - transition: transform 0.3s ease-in; - - &.open { - transform: scaleX(1); - } - - .title { - background: black; - color: white; - padding: 10px 38px 10px 10px; - word-break: break-all; - margin-top: 0; - } - - .close-details { - position: absolute; - top: 0; - color: white; - left: 0; - height: 21px; - width: 21px; - cursor: pointer; - font-size: 16px; } .entity-list { @@ -415,28 +272,59 @@ g.type-TK>rect { } } } -} -.show-filter-panel, -.show-search-panel, -.show-box-panel { - right: 0px !important; -} + .header { + background: $color_havelock_blue_approx; + color: white; + position: relative; + text-align: center; + width: 100%; + position: sticky; + height: 37px; + top: 0; + z-index: 999; + + >h4 { + padding: 0px 36px 0px 10px; + word-break: break-all; + } + + .btn-close { + position: absolute; + right: 0px; + top: 0px; + font-size: 18px; + + &:hover { + color: $white; + } + } + } + + .body { + padding: 10px; + width: 100%; + position: relative; + height: calc(100% - 37px); + overflow: hidden; + } +} .btn-gray { border: 1px solid #686868; color: $dark_gray; background: white; -} -.btn-gray:hover { - border: 1px solid #686868; - color: $dark_gray !important; - background-color: white !important; + &:hover { + border: 1px solid #686868; + color: $dark_gray !important; + background-color: white !important; + } } + span#zoom_in { border-bottom: 1px solid #625555; } @@ -485,6 +373,10 @@ span#zoom_in { .lineage-box { padding: 10px !important; } + + .box-panel { + margin: 10px !important; + } } @keyframes zoominoutsinglefeatured { diff --git a/dashboardv2/public/css/scss/relationship.scss b/dashboardv2/public/css/scss/relationship.scss index c1112c5..a51f83c 100644 --- a/dashboardv2/public/css/scss/relationship.scss +++ b/dashboardv2/public/css/scss/relationship.scss @@ -27,64 +27,10 @@ fill: none; stroke-width: 1.5px; } +} - .relationship-details { - position: absolute; - left: 0; - overflow: auto; - top: 0px; - max-height: 100%; - box-shadow: 4px 13px 14px -12px; - background: #e7e7e7; - transform: scaleX(0); - width: 240px; - transition: transform 0.3s ease-in; - - &.open { - transform: scaleX(1); - } - - .title { - background: black; - color: white; - padding: 10px 38px 10px 10px; - word-break: break-all; - margin-top: 0; - } - - .close-details { - position: absolute; - top: 0; - color: white; - left: 0; - height: 21px; - width: 21px; - cursor: pointer; - font-size: 16px; - } - - .entity-list { - overflow: auto; - list-style-type: decimal; - list-style-position: outside; - padding-left: 15px; - } - - ul>li { - word-wrap: break-word; - margin-bottom: 5px; - text-align: left; - - &.deleted-relation { - a { - color: #BB5838 !important; - } - - .deleteBtn { - padding: 2px 8px !important; - margin: 5px 5px !important; - } - } - } +.relationship-node-details { + &.box-panel { + top: 0; } } \ No newline at end of file diff --git a/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html b/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html index c27ff8c..8e10e7f 100644 --- a/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html +++ b/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html @@ -19,7 +19,7 @@ <div class="box-panel filter-box"> <div class="header clearfix"> <h4>Filters</h4> - <span data-id="box-close" style="margin: 7px" class="btn btn-action btn-sm fltr-togler"><i class="fa fa-close"></i></span> + <span data-id="box-close" class="btn btn-sm btn-close"><i class="fa fa-close"></i></span> </div> <div class="body"> <div class="hideProcessContainer form-group text-left col-sm-12"> @@ -49,7 +49,7 @@ <div class="box-panel search-box"> <div class="header clearfix"> <h4>Search</h4> - <span data-id="box-close" style="margin: 7px" class="btn btn-action btn-sm fltr-togler"><i class="fa fa-close"></i></span> + <span data-id="box-close" class="btn btn-sm btn-close"><i class="fa fa-close"></i></span> </div> <div class="body"> <div class="col-sm-12 no-padding"> @@ -67,7 +67,7 @@ <div class="box-panel setting-box"> <div class="header clearfix"> <h4>Settings</h4> - <span data-id="box-close" style="margin: 7px" class="btn btn-action btn-sm fltr-togler"><i class="fa fa-close"></i></span> + <span data-id="box-close" class="btn btn-sm btn-close"><i class="fa fa-close"></i></span> </div> <div class="body"> <div class="showOnlyHoverPath form-group text-left col-sm-12"> @@ -106,6 +106,24 @@ <button type="button" id="zoom_out" class="btn btn-action btn-gray btn-sm lineageZoomButton" title="Zoom Out" data-id="refreshBtn"> <i class="fa fa-search-minus"></i></button> </div> </div> + <div class="box-panel size-lg node-details slide-from-left lineage-node-detail"> + <div class="header clearfix"> + <h4><span data-id="typeName"></span></h4> + <span data-id="box-close" class="btn btn-sm btn-close lineage-node-detail-close"><i class="fa fa-close"></i></span> + <span data-id="box-close" class="btn btn-sm btn-close lineage-node-detail-close"><i class="fa fa-close"></i></span> + </div> + <div class="body"> + <table class='table table-quickMenu'> + <thead> + <tr> + <th>Key</th> + <th>Value</th> + </tr> + </thead> + <tbody data-id="nodeDetailTable"></tbody> + </table> + </div> + </div> <div class="fontLoader"> <i class="fa fa-refresh fa-spin-custom"></i> </div> @@ -117,10 +135,4 @@ </div> <!-- <svg width="100%" height="calc(100% - 28px)" preserveAspectRatio="xMidYMid meet" viewBox="0 0 854 330" enable-background="new 0 0 854 330" xml:space="preserve"></svg> --> <svg width="{{width}}" height="{{height}}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"></svg> - <div class="lineage-details node-details"> - <span data-id="close" style="margin: 7px;position: absolute;right: 0" class="btn btn-action btn-sm fltr-togler"><i class="fa fa-close"></i></span> - <h4 class="title"><span data-id="typeName"></span></h4> - <div class="col-md-12" data-id="entityList"> - </div> - </div> </div> \ No newline at end of file diff --git a/dashboardv2/public/js/templates/graph/RelationshipLayoutView_tmpl.html b/dashboardv2/public/js/templates/graph/RelationshipLayoutView_tmpl.html index 3d130ec..ff43907 100644 --- a/dashboardv2/public/js/templates/graph/RelationshipLayoutView_tmpl.html +++ b/dashboardv2/public/js/templates/graph/RelationshipLayoutView_tmpl.html @@ -15,24 +15,55 @@ * limitations under the License. --> <!-- <div class="graph-toolbar clearfix"></div> --> -<div class="white-bg no-padding relationship-box"> +<div class="graph-button-group form-group clearfix"> + <div class="btn-group pull-left"> + <span class="pull-left">Graph</span> + <label class="switch pull-left"> + <input type="checkbox" class="switch-input" name="relationshipViewToggle" value="text"> + <span class="switch-slider"></span> + </label> + <span class="pull-left">Table</span> + </div> + <div class="btn-group pull-right" data-id="zoomControl"> + <button type="button" id="zoom_in" class="btn btn-action btn-gray btn-sm lineageZoomButton" title="Zoom In" data-id="refreshBtn"> <i class="fa fa-search-plus"></i></button> + <button type="button" id="zoom_out" class="btn btn-action btn-gray btn-sm lineageZoomButton" title="Zoom Out" data-id="refreshBtn"> <i class="fa fa-search-minus"></i></button> + </div> +</div> +<div class="white-bg no-padding relationship-box" data-id='relationshipSVG'> <div class="fontLoader"> <i class="fa fa-refresh fa-spin-custom"></i> </div> - <div class="graph-button-group pull-right"> - <div class="btn-group"> - <button type="button" id="zoom_in" class="btn btn-action btn-gray btn-sm lineageZoomButton" title="Zoom In" data-id="refreshBtn"> <i class="fa fa-search-plus"></i></button> - <button type="button" id="zoom_out" class="btn btn-action btn-gray btn-sm lineageZoomButton" title="Zoom Out" data-id="refreshBtn"> <i class="fa fa-search-minus"></i></button> + <svg width="100%" height="100%" viewBox="0 0 854 330" enable-background="new 0 0 854 330" xml:space="preserve"></svg> + <div class="box-panel size-lg slide-from-left relationship-node-details"> + <div class="header clearfix"> + <h4><span data-id="typeName"></span></h4> + <span data-id="box-close" class="btn btn-sm btn-close"><i class="fa fa-close"></i></span> + </div> + <div class="body"> + <div class="col-md-12"> + <input data-id="searchNode" class="form-control form-group" placeholder="Search Entities" /> + <ul data-id="entityList" class="entity-list"></ul> + </div> </div> </div> - <svg width="100%" height="100%" viewBox="0 0 854 330" enable-background="new 0 0 854 330" xml:space="preserve"></svg> - <div class="relationship-details"> + <!-- <div class="relationship-details"> <span data-id="close" style="margin: 7px;position: absolute;right: 0" class="btn btn-action btn-sm fltr-togler"><i class="fa fa-close"></i></span> - <!-- <div data-id="close" class="close-details"><i class="fa fa-times"></i></div> --> <h4 class="title"><span data-id="typeName"></span></h4> <div class="col-md-12"> <input data-id="searchNode" class="form-control form-group" placeholder="Search Entities" /> <ul data-id="entityList" class="entity-list"></ul> </div> - </div> + </div> --> +</div> +<div> + <table class="table table-quickMenu" data-id="relationshipDetailTable" style="display: none;"> + <thead> + <tr> + <th>Key</th> + <th>Value</th> + </tr> + </thead> + <tbody data-id="relationshipDetailValue"> + </tbody> + </table> </div> \ No newline at end of file diff --git a/dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js b/dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js index 53c484b..4bfdbf4 100644 --- a/dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js +++ b/dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js @@ -419,7 +419,6 @@ define(['require', Globals.termMeanings.push(newD); } _.each(data, function(val) { - console.log(val.guid) if (val.relationshipStatus == "ACTIVE") { termData += '<span class="btn btn-action btn-sm btn-icon btn-blue" title=' + val.displayText + ' data-id="termClick"><span>' + val.displayText + '</span><i class="fa fa-close" data-id="deleteTerm" data-guid="' + val.guid + '" data-type="term" title="Remove Term"></i></span>'; } diff --git a/dashboardv2/public/js/views/graph/LineageLayoutView.js b/dashboardv2/public/js/views/graph/LineageLayoutView.js index d252b65..c26928a 100644 --- a/dashboardv2/public/js/views/graph/LineageLayoutView.js +++ b/dashboardv2/public/js/views/graph/LineageLayoutView.js @@ -28,9 +28,10 @@ define(['require', 'utils/Enums', 'utils/UrlLinks', 'utils/Globals', + 'utils/CommonViewFunction', 'platform', 'jquery-ui' -], function(require, Backbone, LineageLayoutViewtmpl, VLineageList, VEntity, Utils, LineageUtils, dagreD3, d3Tip, Enums, UrlLinks, Globals, platform) { +], function(require, Backbone, LineageLayoutViewtmpl, VLineageList, VEntity, Utils, LineageUtils, dagreD3, d3Tip, Enums, UrlLinks, Globals, CommonViewFunction, platform) { 'use strict'; var LineageLayoutView = Backbone.Marionette.LayoutView.extend( @@ -59,9 +60,8 @@ define(['require', searchBox: '.search-box', settingBox: '.setting-box', lineageTypeSearch: '[data-id="typeSearch"]', - lineageDetailClose: '[data-id="close"]', searchNode: '[data-id="searchNode"]', - nodeEntityList: '[data-id="entityList"]', + nodeDetailTable: '[data-id="nodeDetailTable"]', showOnlyHoverPath: '[data-id="showOnlyHoverPath"]', showTooltip: '[data-id="showTooltip"]' }, @@ -82,9 +82,6 @@ define(['require', events["click " + this.ui.settingToggler] = 'onClickSettingToggler'; events["click " + this.ui.lineageFullscreenToggler] = 'onClickLineageFullscreenToggler'; events["click " + this.ui.searchToggler] = 'onClickSearchToggler'; - events["click " + this.ui.lineageDetailClose] = function() { - this.toggleLineageInfomationSlider({ close: true }); - }; return events; }, @@ -93,7 +90,7 @@ define(['require', * @constructs */ initialize: function(options) { - _.extend(this, _.pick(options, 'processCheck', 'guid', 'entityDefCollection', 'actionCallBack', 'fetchCollection')); + _.extend(this, _.pick(options, 'processCheck', 'guid', 'entityDefCollection', 'actionCallBack', 'fetchCollection', 'attributeDefs')); this.collection = new VLineageList(); this.lineageData = null; this.typeMap = {}; @@ -174,20 +171,27 @@ define(['require', } this.generateData({ "relationshipMap": this.relationshipMap, "guidEntityMap": this.guidEntityMap }); }, - toggleBoxPanel: function(el) { + toggleBoxPanel: function(options) { + var el = options && options.el, + nodeDetailToggler = options && options.nodeDetailToggler, + currentTarget = options.currentTarget; this.$el.find('.show-box-panel').removeClass('show-box-panel'); if (el && el.addClass) { el.addClass('show-box-panel'); } + this.$('circle.node-detail-highlight').removeClass("node-detail-highlight"); + }, + onClickNodeToggler: function(options) { + this.toggleBoxPanel({ el: this.$('.lineage-node-detail'), nodeDetailToggler: true }); }, onClickFilterToggler: function() { - this.toggleBoxPanel(this.ui.filterBox); + this.toggleBoxPanel({ el: this.ui.filterBox }); }, onClickSettingToggler: function() { - this.toggleBoxPanel(this.ui.settingBox); + this.toggleBoxPanel({ el: this.ui.settingBox }); }, onClickSearchToggler: function() { - this.toggleBoxPanel(this.ui.searchBox); + this.toggleBoxPanel({ el: this.ui.searchBox }); }, onSelectDepthChange: function(e, options) { this.initializeGraph(); @@ -462,15 +466,6 @@ define(['require', } } }, - toggleInformationSlider: function(options) { - if (options.open && !this.$('.lineage-edge-details').hasClass("open")) { - this.$('.lineage-edge-details').addClass('open'); - } else if (options.close && this.$('.lineage-edge-details').hasClass("open")) { - d3.selectAll('circle').attr("stroke", "none"); - this.$('.lineage-edge-details').removeClass('open'); - } - }, - zoomed: function(that) { this.$('svg').find('>g').attr("transform", "translate(" + this.zoom.translate() + ")" + @@ -544,7 +539,7 @@ define(['require', return Utils.getEntityIconPath({ entityData: node }); } }) - .attr("x", currentNode ? "3" : "6") + .attr("x", "4") .attr("y", currentNode ? "3" : "4") .attr("width", "40") .attr("height", "40") @@ -691,6 +686,7 @@ define(['require', }).init(); }) .on('click', function(d) { + var el = this; if (d3.event.defaultPrevented) return; // ignore drag d3.event.preventDefault(); @@ -707,16 +703,9 @@ define(['require', var currentEvent = d3.event waitForDoubleClick = setTimeout(function() { tooltip.hide(d); - that.toggleLineageInfomationSlider({ open: true, obj: d }); - svgGroup.selectAll('[data-stroke]').attr('stroke', 'none'); - svgGroup.selectAll('[data-stroke]').attr('stroke', function(c) { - if (c == d) { - return "#316132"; - } else { - return 'none'; - } - }) - that.updateRelationshipDetails({ obj: d }); + that.onClickNodeToggler({ obj: d }); + $(el).find('circle').addClass('node-detail-highlight'); + that.updateRelationshipDetails({ guid: d }); waitForDoubleClick = null; }, 150) } @@ -845,60 +834,13 @@ define(['require', that.ui.lineageTypeSearch.trigger("change.select2"); } }, - toggleLineageInfomationSlider: function(options) { - if (options.open && !this.$('.lineage-details').hasClass("open")) { - this.$('.lineage-details').addClass('open'); - } else if (options.close && this.$('.lineage-details').hasClass("open")) { - d3.selectAll('circle').attr("stroke", "none"); - this.$('.lineage-details').removeClass('open'); - } - }, updateRelationshipDetails: function(options) { - var that = this; - var lineageData; - for (var x in that.lineageData.guidEntityMap) { - if (x == options.obj) { - lineageData = that.lineageData.guidEntityMap[x] - } - } - var data = lineageData, - typeName = data.typeName || options.obj.name, - searchString = options.searchString, - listString = ""; + var that = this, + data = that.guidEntityMap[options.guid], + typeName = data.typeName || options.guid; this.$("[data-id='typeName']").text(typeName); - var getElement = function(options) { - var showCofig = [ - "meaningNames", - "meanings", - "classificationNames", - { - "attributes": [ - "description", - "name", - "qualifiedName" - ] - } - ]; - var tbody = ''; - for (var x = 0; x < showCofig.length; x++) { - if (typeof showCofig[x] === "object") { - _.each(showCofig[x].attributes, function(element, index, list) { - var dataToShow = data.attributes[element] ? data.attributes[element] : "N/A"; - tbody += '<tr><td class="html-cell renderable">' + element + '</td><td class="html-cell renderable">' + dataToShow + '</td></tr>'; - }) - } else { - var dataToShow = data[showCofig[x]] ? data[showCofig[x]] : "N/A"; - dataToShow = dataToShow && dataToShow.length > 0 ? dataToShow : "N/A"; - tbody += '<tr><td class="html-cell renderable">' + showCofig[x] + '</td><td class="html-cell renderable">' + dataToShow + '</td></tr>'; - } - } - var thead = '<thead><tr><th class="renderable">Type</th><th class="renderable">Details</th></thead>'; - var table = '<table style="word-wrap: break-word;" class="table table-hover ">' + thead + '<tbody>' + tbody + '</body></table>'; - return table; - - } - listString += getElement(data); - this.ui.nodeEntityList.html(listString); + this.entityModel = new VEntity({}); + this.ui.nodeDetailTable.html(CommonViewFunction.propertyTable({ scope: this, valueObject: data, attributeDefs: that.attributeDefs })); } }); return LineageLayoutView; diff --git a/dashboardv2/public/js/views/graph/RelationshipLayoutView.js b/dashboardv2/public/js/views/graph/RelationshipLayoutView.js index ba0ea62..aba3a41 100644 --- a/dashboardv2/public/js/views/graph/RelationshipLayoutView.js +++ b/dashboardv2/public/js/views/graph/RelationshipLayoutView.js @@ -22,11 +22,12 @@ define(['require', 'collection/VLineageList', 'models/VEntity', 'utils/Utils', + 'utils/CommonViewFunction', 'd3-tip', 'utils/Enums', 'utils/UrlLinks', 'platform' -], function(require, Backbone, RelationshipLayoutViewtmpl, VLineageList, VEntity, Utils, d3Tip, Enums, UrlLinks, platform) { +], function(require, Backbone, RelationshipLayoutViewtmpl, VLineageList, VEntity, Utils, CommonViewFunction, d3Tip, Enums, UrlLinks, platform) { 'use strict'; var RelationshipLayoutView = Backbone.Marionette.LayoutView.extend( @@ -36,14 +37,19 @@ define(['require', template: RelationshipLayoutViewtmpl, className: "resizeGraph", - /** Layout sub regions */ regions: {}, /** ui selector cache */ ui: { relationshipDetailClose: '[data-id="close"]', - searchNode: '[data-id="searchNode"]' + searchNode: '[data-id="searchNode"]', + relationshipViewToggle: 'input[name="relationshipViewToggle"]', + relationshipDetailTable: "[data-id='relationshipDetailTable']", + relationshipSVG: "[data-id='relationshipSVG']", + relationshipDetailValue: "[data-id='relationshipDetailValue']", + zoomControl: "[data-id='zoomControl']", + boxClose: '[data-id="box-close"]' }, /** ui events hash */ @@ -53,6 +59,10 @@ define(['require', this.toggleInformationSlider({ close: true }); }; events["keyup " + this.ui.searchNode] = 'searchNode'; + events["click " + this.ui.boxClose] = 'toggleBoxPanel'; + events["change " + this.ui.relationshipViewToggle] = function(e) { + this.relationshipViewToggle(e.currentTarget.checked) + }; return events; }, @@ -61,7 +71,7 @@ define(['require', * @constructs */ initialize: function(options) { - _.extend(this, _.pick(options, 'entity', 'entityName', 'guid', 'actionCallBack')); + _.extend(this, _.pick(options, 'entity', 'entityName', 'guid', 'actionCallBack', 'attributeDefs')); this.graphData = this.createData(this.entity); }, createData: function(entity) { @@ -85,14 +95,13 @@ define(['require', } return { nodes: nodes, links: links }; }, - onRender: function() { - - }, + onRender: function() {}, onShow: function(argument) { if (this.graphData && _.isEmpty(this.graphData.links)) { this.noRelationship(); } else { this.createGraph(this.graphData); + this.createTable(); } }, noRelationship: function() { @@ -106,6 +115,16 @@ define(['require', this.$('.relationship-details').removeClass('open'); } }, + toggleBoxPanel: function(options) { + var el = options && options.el, + nodeDetailToggler = options && options.nodeDetailToggler, + currentTarget = options.currentTarget; + this.$el.find('.show-box-panel').removeClass('show-box-panel'); + if (el && el.addClass) { + el.addClass('show-box-panel'); + } + this.$('circle.node-detail-highlight').removeClass("node-detail-highlight"); + }, searchNode: function(e) { var $el = $(e.currentTarget); this.updateRelationshipDetails(_.extend({}, $el.data(), { searchString: $el.val() })) @@ -307,16 +326,9 @@ define(['require', }) .on('click', function(d) { if (d3.event.defaultPrevented) return; // ignore drag - that.toggleInformationSlider({ open: true, obj: d }); + that.toggleBoxPanel({ el: that.$('.relationship-node-details') }); that.ui.searchNode.data({ obj: d }); - d3.selectAll('circle').attr("stroke", "none"); - d3.select('circle[typename="' + d.name + '"]').attr("stroke", function(d) { - if (d && d.value && d.value.guid == that.guid) { - return "#316132"; - } else { - return activeEntityColor; - } - }); + $(this).find('circle').addClass("node-detail-highlight"); that.updateRelationshipDetails({ obj: d }); }).call(force.drag); @@ -443,8 +455,26 @@ define(['require', function dragstart(d) { d3.select(this).classed("fixed", d.fixed = true); } - } + }, + createTable: function() { + this.entityModel = new VEntity({}); + var table = CommonViewFunction.propertyTable({ scope: this, valueObject: this.entity.relationshipAttributes, attributeDefs: this.attributeDefs }); + this.ui.relationshipDetailValue.html(table); + }, + relationshipViewToggle: function(checked) { + if (checked) { + this.ui.relationshipDetailTable.show(); + this.ui.relationshipSVG.hide(); + this.ui.zoomControl.hide(); + this.$el.addClass('auto-height'); + } else { + this.ui.relationshipDetailTable.hide(); + this.ui.relationshipSVG.show(); + this.ui.zoomControl.show(); + this.$el.removeClass('auto-height'); + } + } }); return RelationshipLayoutView; }); \ No newline at end of file