Skip to content

A
atlas
Commit 4ba39dca by pratik24mac Committed by Madhan Neethiraj
Options

ATLAS-2512: updated lineage UI to edit classification propagation

Signed-off-by: 's avatarMadhan Neethiraj <madhan@apache.org>
parent 7f20ffba
Showing with 592 additions and 68 deletions
dashboardv2/public/css/scss/graph.scss
...@@ -79,6 +79,12 @@ ...@@ -79,6 +79,12 @@
} }
} }
.edgePath {
.path {
cursor: pointer;
}
}
.overlay {} .overlay {}
.link { .link {
...@@ -100,10 +106,45 @@ ...@@ -100,10 +106,45 @@
overflow: auto; overflow: auto;
max-height: 300px; max-height: 300px;
} }
/* Creates a small triangle extender for the tooltip */
&:after {
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: rgba(0, 0, 0, 0.8);
position: absolute;
}
/* Nrthward tooltips */
&.n:after { &.n:after {
margin: -1px 0 0; content: "\25BC";
margin: -1px 0 0 0;
top: 100%; top: 100%;
left: 0; left: 0;
text-align: center;
}
/* Eastward tooltips */
&.e:after {
content: "\25C0";
margin: -4px 0 0 0;
top: 50%;
left: -8px;
}
/* Southward tooltips */
&.s:after {
content: "\25B2";
margin: 0 0 1px 0;
top: -8px;
left: 0;
text-align: center;
}
/* Westward tooltips */
&.w:after {
content: "\25B6";
margin: -4px 0 0 -1px;
top: 50%;
left: 100%;
} }
} }
...@@ -118,10 +159,77 @@ g.type-TK>rect { ...@@ -118,10 +159,77 @@ g.type-TK>rect {
right: 5px; right: 5px;
} }
.graph-toolbar {
background-color: $white;
margin-bottom: 10px;
padding: 10px;
}
.legends { .legends {
>i { >i {
>span { >span {
font-family: 'Source Sans Pro'; font-family: 'Source Sans Pro';
} }
} }
}
.lineage-box {
.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;
}
}
} }
\ No newline at end of file
dashboardv2/public/css/scss/override.scss
...@@ -414,9 +414,19 @@ div.columnmanager-dropdown-container { ...@@ -414,9 +414,19 @@ div.columnmanager-dropdown-container {
color: #626467; color: #626467;
border: 1px solid black; border: 1px solid black;
} }
.text-center { .text-center {
text-align: center !important; text-align: center !important;
} }
.margin-15{
.margin-15 {
margin: 15px 0px; margin: 15px 0px;
}
.padding-left-0 {
padding-left: 0px !important;
}
.fa-color {
color: $color_keppel_approx
} }
\ No newline at end of file
dashboardv2/public/js/collection/VRelationshipList.js 0 → 100644
/**
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
define(['require',
'utils/Globals',
'collection/BaseCollection',
'models/VRelationship',
'utils/UrlLinks'
], function(require, Globals, BaseCollection, VRelationship, UrlLinks) {
'use strict';
var VRelationshipList = BaseCollection.extend(
//Prototypal attributes
{
url: UrlLinks.baseURL,
model: VRelationship,
initialize: function() {
this.modelName = 'VRelationship';
this.modelAttrName = 'results';
},
getRelationship: function(id, options) {
var url = UrlLinks.relationshipApiUrl(id);
options = _.extend({
contentType: 'application/json',
dataType: 'json'
}, options);
return this.constructor.nonCrudOperation.call(this, url, 'GET', options);
}
},
//Static Class Members
{
/**
* Table Cols to be passed to Backgrid
* UI has to use this as base and extend this.
*
*/
tableCols: {}
}
);
return VRelationshipList;
});
dashboardv2/public/js/models/VRelationship.js 0 → 100644
/**
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
define(['require',
'utils/Globals',
'models/BaseModel',
'utils/UrlLinks'
], function(require, Globals, VBaseModel, UrlLinks) {
'use strict';
var VRelationship = VBaseModel.extend({
urlRoot: UrlLinks.relationshipApiUrl(),
defaults: {},
serverSchema: {},
idAttribute: 'id',
initialize: function() {
this.modelName = 'VRelationship';
},
toString: function() {
return this.get('name');
},
/*************************
* Non - CRUD operations
*************************/
getRelationship: function(token, options) {
var url = UrlLinks.relationshipApiUrl(token);
options = _.extend({
contentType: 'application/json',
dataType: 'json'
}, options);
return this.constructor.nonCrudOperation.call(this, url, 'GET', options);
},
saveRelationship: function(options) {
var url = UrlLinks.relationshipApiUrl();
options = _.extend({
contentType: 'application/json',
dataType: 'json'
}, options);
return this.constructor.nonCrudOperation.call(this, url, 'PUT', options);
},
}, {});
return VRelationship;
});
\ No newline at end of file
dashboardv2/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
</button> </button>
</div> </div>
</div> </div>
<div class="form-group" style="display: none;" data-id="propagatedTagDiv"> <div class="form-group" style="display: none;" data-id="propagatedTagDiv">
<span class="control-label-sm-pr pull-left">Propagated Classifications:</span> <span class="control-label-sm-pr pull-left">Propagated Classifications:</span>
<div class="pull-left" data-id="propagatedTagList"> <div class="pull-left" data-id="propagatedTagList">
</div> </div>
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
<div class="col-sm-12 default-tab"> <div class="col-sm-12 default-tab">
<ul class="nav nav-tabs" data-id="tab-list"> <ul class="nav nav-tabs" data-id="tab-list">
<li role="properties" class="tab active"><a href="#tab-details" aria-controls="tab-details" role="tab" data-toggle="tab">Properties</a></li> <li role="properties" class="tab active"><a href="#tab-details" aria-controls="tab-details" role="tab" data-toggle="tab">Properties</a></li>
<li role="lineage" class="tab"><a href="#tab-lineage" aria-controls="tab-lineage" role="tab" data-toggle="tab">Lineage</a></li> <li role="lineage" class="tab lineageGraph" style="display:none"><a href="#tab-lineage" aria-controls="tab-lineage" role="tab" data-toggle="tab">Lineage</a></li>
<li role="relationship" class="tab"><a href="#tab-relationship" aria-controls="tab-relationship" role="tab" data-toggle="tab">Relationships</a></li> <li role="relationship" class="tab"><a href="#tab-relationship" aria-controls="tab-relationship" role="tab" data-toggle="tab">Relationships</a></li>
<li role="classification"><a href="#tab-tagTable" aria-controls="tab-tagTable" role="tab" data-toggle="tab">Classifications</a></li> <li role="classification"><a href="#tab-tagTable" aria-controls="tab-tagTable" role="tab" data-toggle="tab">Classifications</a></li>
<li role="audit" class="tab"><a href="#tab-audit" aria-controls="tab-audit" role="tab" data-toggle="tab">Audits</a></li> <li role="audit" class="tab"><a href="#tab-audit" aria-controls="tab-audit" role="tab" data-toggle="tab">Audits</a></li>
...@@ -60,7 +60,7 @@ ...@@ -60,7 +60,7 @@
</div> </div>
</div> </div>
<div id="tab-lineage" role="lineage" class="tab-pane animated fadeIn"> <div id="tab-lineage" role="lineage" class="tab-pane animated fadeIn">
<div class="resize-graph animated" align="center" style="height:64vh;"> <div class="resizeGraph animated position-relative" align="center" style="height:64vh;">
<div id="r_lineageLayoutView"> <div id="r_lineageLayoutView">
<div class="fontLoader-relative"> <div class="fontLoader-relative">
<i class="fa fa-refresh fa-spin-custom"></i> <i class="fa fa-refresh fa-spin-custom"></i>
...@@ -69,7 +69,7 @@ ...@@ -69,7 +69,7 @@
</div> </div>
</div> </div>
<div id="tab-relationship" role="relationship" class="tab-pane animated fadeIn"> <div id="tab-relationship" role="relationship" class="tab-pane animated fadeIn">
<div class="resize-graph animated" align="center" style="height:64vh;"> <div class="resizeGraph animated position-relative" align="center" style="height:64vh;">
<div id="r_relationshipLayoutView"> <div id="r_relationshipLayoutView">
<div class="fontLoader-relative"> <div class="fontLoader-relative">
<i class="fa fa-refresh fa-spin-custom"></i> <i class="fa fa-refresh fa-spin-custom"></i>
......
dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
* limitations under the License. * limitations under the License.
--> -->
<!-- <div class="graph-toolbar clearfix"></div> --> <!-- <div class="graph-toolbar clearfix"></div> -->
<div style="position: absolute;height:100%;width:100%;" class="white-bg no-padding"> <div style="position: absolute;height:100%;width:100%;" class="white-bg no-padding lineage-box">
<div class="fontLoader"> <div class="fontLoader">
<i class="fa fa-refresh fa-spin-custom"></i> <i class="fa fa-refresh fa-spin-custom"></i>
</div> </div>
......
dashboardv2/public/js/templates/graph/PropagationPropertyModalView_tmpl.html 0 → 100644
<!--
* 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="lineage-edge-details" data-id="PropagationToolTip">
<h4 class="title"><span data-id="edgeDetailName"></span></h4>
<div class="overlay show">
<div class="fontLoader show">
<i class="fa fa-refresh fa-spin-custom"></i>
</div>
</div>
<div class="col-md-12">
<ul data-id="propagationOptions" class="propagation-list">
<li>
<div class="radio">
<input type="radio" name="propagateRelation" value="ONE_TO_TWO" id="ONE_TO_TWO">
<label class="padding-left-0" for="ONE_TO_TWO">ONE TO TWO</label>
</div>
</li>
<li>
<div class="radio">
<input type="radio" name="propagateRelation" value="TWO_TO_ONE" id="TWO_TO_ONE">
<label class="padding-left-0" for="TWO_TO_ONE">TWO TO ONE</label>
</div>
</li>
<li>
<div class="radio">
<input type="radio" name="propagateRelation" value="BOTH" id="BOTH">
<label class="padding-left-0" for="BOTH">BOTH</label>
</div>
</li>
<li>
<div class="radio">
<input type="radio" name="propagateRelation" value="NONE" id="NONE">
<label class="padding-left-0" for="NONE">None</label>
</div>
</li>
</ul>
</div>
</div>
\ No newline at end of file
dashboardv2/public/js/utils/UrlLinks.js
...@@ -88,6 +88,14 @@ define(['require', 'utils/Enums', 'utils/Utils', 'underscore'], function(require ...@@ -88,6 +88,14 @@ define(['require', 'utils/Enums', 'utils/Utils', 'underscore'], function(require
return lineageUrl return lineageUrl
} }
}, },
relationshipApiUrl: function(guid) {
var relationshipUrl = this.baseUrlV2 + '/relationship';
if (guid) {
return relationshipUrl + '/guid/' + guid;
} else {
return relationshipUrl
}
},
schemaApiUrl: function(guid) { schemaApiUrl: function(guid) {
var lineageUrl = this.baseUrl + '/lineage'; var lineageUrl = this.baseUrl + '/lineage';
if (guid) { if (guid) {
......
dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js
...@@ -171,6 +171,7 @@ define(['require', ...@@ -171,6 +171,7 @@ define(['require',
} }
} }
this.hideLoader(); this.hideLoader();
this.activeEntityDef = this.entityDefCollection.fullCollection.find({ name: collectionJSON.typeName });
var obj = { var obj = {
entity: collectionJSON, entity: collectionJSON,
guid: this.id, guid: this.id,
...@@ -202,13 +203,30 @@ define(['require', ...@@ -202,13 +203,30 @@ define(['require',
} }
// To render Schema check attribute "schemaElementsAttribute" // To render Schema check attribute "schemaElementsAttribute"
var schemaOptions = this.entityDefCollection.fullCollection.find({ name: collectionJSON.typeName }).get('options'); var schemaOptions = this.activeEntityDef.get('options');
if (schemaOptions && schemaOptions.hasOwnProperty('schemaElementsAttribute') && schemaOptions.schemaElementsAttribute !== "") { if (schemaOptions && schemaOptions.hasOwnProperty('schemaElementsAttribute') && schemaOptions.schemaElementsAttribute !== "") {
this.$('.schemaTable').show(); this.$('.schemaTable').show();
this.renderSchemaLayoutView(_.extend({}, obj, { this.renderSchemaLayoutView(_.extend({}, obj, {
attribute: collectionJSON.attributes[schemaOptions.schemaElementsAttribute] attribute: collectionJSON.attributes[schemaOptions.schemaElementsAttribute]
})); }));
} }
if (this.activeEntityDef && _.contains(this.activeEntityDef.get('superTypes'), "DataSet")) {
this.$('.lineageGraph').show();
this.renderLineageLayoutView({
guid: this.id,
entityDefCollection: this.entityDefCollection,
actionCallBack: function() {
that.$('#expand_collapse_panel').click();
}
});
this.$(".resizeGraph").resizable({
handles: ' s',
minHeight: 375,
stop: function(event, ui) {
ui.element.height(($(this).height()));
},
});
}
}, this); }, this);
this.listenTo(this.collection, 'error', function(model, response) { this.listenTo(this.collection, 'error', function(model, response) {
this.$('.fontLoader-relative').removeClass('show'); this.$('.fontLoader-relative').removeClass('show');
...@@ -223,43 +241,29 @@ define(['require', ...@@ -223,43 +241,29 @@ define(['require',
var that = this; var that = this;
Utils.showTitleLoader(this.$('.page-title .fontLoader'), this.$('.entityDetail')); Utils.showTitleLoader(this.$('.page-title .fontLoader'), this.$('.entityDetail'));
this.$('.fontLoader-relative').addClass('show'); // to show tab loader this.$('.fontLoader-relative').addClass('show'); // to show tab loader
this.renderLineageLayoutView({ // this.ui.fullscreenPanel.on('fullscreen_done', function(e, panel) {
guid: this.id, // var svgEl = panel.find('.panel-body svg'),
entityDefCollection: this.entityDefCollection, // scaleEl = svgEl.find('>g'),
actionCallBack: function() { // zoom = that.RLineageLayoutView.currentView.zoom,
that.$('#expand_collapse_panel').click(); // svg = that.RLineageLayoutView.currentView.svg,
} // viewThis = that.RLineageLayoutView.currentView,
}); // setGraphZoomPositionCal = that.RLineageLayoutView.currentView.setGraphZoomPositionCal,
this.$(".resize-graph").resizable({ // zoomed = that.RLineageLayoutView.currentView.zoomed;;
handles: ' s',
minHeight: 375,
stop: function(event, ui) {
that.$('.resize-graph').height(($(this).height()));
},
});
this.ui.fullscreenPanel.on('fullscreen_done', function(e, panel) {
var svgEl = panel.find('.panel-body svg'),
scaleEl = svgEl.find('>g'),
zoom = that.RLineageLayoutView.currentView.zoom,
svg = that.RLineageLayoutView.currentView.svg,
viewThis = that.RLineageLayoutView.currentView,
setGraphZoomPositionCal = that.RLineageLayoutView.currentView.setGraphZoomPositionCal,
zoomed = that.RLineageLayoutView.currentView.zoomed;;
if (zoom) { // if (zoom) {
setGraphZoomPositionCal.call(viewThis); // setGraphZoomPositionCal.call(viewThis);
zoomed.call(viewThis); // zoomed.call(viewThis);
if ($(e.currentTarget).find('i').hasClass('fa fa-compress')) { // if ($(e.currentTarget).find('i').hasClass('fa fa-compress')) {
svg.call(zoom) // svg.call(zoom)
.on("dblclick.zoom", null); // .on("dblclick.zoom", null);
} else { // } else {
svg.call(zoom) // svg.call(zoom)
.on("wheel.zoom", null) // .on("wheel.zoom", null)
.on("dblclick.zoom", null); // .on("dblclick.zoom", null);
} // }
} // }
}) // })
}, },
onShow: function() { onShow: function() {
var params = Utils.getUrlState.getQueryParams(); var params = Utils.getUrlState.getQueryParams();
...@@ -278,13 +282,17 @@ define(['require', ...@@ -278,13 +282,17 @@ define(['require',
this.collection.fetch({ reset: true }); this.collection.fetch({ reset: true });
}, },
getEntityDef: function(entityObj) { getEntityDef: function(entityObj) {
var data = this.entityDefCollection.fullCollection.findWhere({ name: entityObj.typeName }).toJSON(); if (this.activeEntityDef) {
var attributeDefs = Utils.getNestedSuperTypeObj({ var data = this.activeEntityDef.toJSON();
data: data, var attributeDefs = Utils.getNestedSuperTypeObj({
attrMerge: true, data: data,
collection: this.entityDefCollection attrMerge: true,
}); collection: this.entityDefCollection
return attributeDefs; });
return attributeDefs;
} else {
return [];
}
}, },
onClickTagCross: function(e) { onClickTagCross: function(e) {
var tagName = $(e.currentTarget).parent().text(), var tagName = $(e.currentTarget).parent().text(),
......
dashboardv2/public/js/views/graph/LineageLayoutView.js
...@@ -25,8 +25,9 @@ define(['require', ...@@ -25,8 +25,9 @@ define(['require',
'dagreD3', 'dagreD3',
'd3-tip', 'd3-tip',
'utils/Enums', 'utils/Enums',
'utils/UrlLinks' 'utils/UrlLinks',
], function(require, Backbone, LineageLayoutViewtmpl, VLineageList, VEntity, Utils, dagreD3, d3Tip, Enums, UrlLinks) { 'platform'
], function(require, Backbone, LineageLayoutViewtmpl, VLineageList, VEntity, Utils, dagreD3, d3Tip, Enums, UrlLinks, platform) {
'use strict'; 'use strict';
var LineageLayoutView = Backbone.Marionette.LayoutView.extend( var LineageLayoutView = Backbone.Marionette.LayoutView.extend(
...@@ -56,15 +57,17 @@ define(['require', ...@@ -56,15 +57,17 @@ define(['require',
*/ */
initialize: function(options) { initialize: function(options) {
_.extend(this, _.pick(options, 'guid', 'entityDefCollection', 'actionCallBack')); _.extend(this, _.pick(options, 'guid', 'entityDefCollection', 'actionCallBack'));
this.entityModel = new VEntity();
this.collection = new VLineageList(); this.collection = new VLineageList();
this.lineageData = null;
this.typeMap = {}; this.typeMap = {};
this.apiGuid = {};
this.asyncFetchCounter = 0; this.asyncFetchCounter = 0;
this.fetchGraphData(); this.edgeCall;
}, },
onRender: function() { onRender: function() {
var that = this; var that = this;
this.$('.fontLoader').show(); this.$('.fontLoader').show();
this.fetchGraphData();
if (this.layoutRendered) { if (this.layoutRendered) {
this.layoutRendered(); this.layoutRendered();
} }
...@@ -90,12 +93,14 @@ define(['require', ...@@ -90,12 +93,14 @@ define(['require',
skipDefaultError: true, skipDefaultError: true,
success: function(data) { success: function(data) {
if (data.relations.length) { if (data.relations.length) {
that.lineageData = data;
that.generateData(data.relations, data.guidEntityMap); that.generateData(data.relations, data.guidEntityMap);
} else { } else {
that.noLineage(); that.noLineage();
} }
}, },
cust_error: function(model, response) { cust_error: function(model, response) {
that.lineageData = [];
that.noLineage(); that.noLineage();
} }
}) })
...@@ -103,7 +108,7 @@ define(['require', ...@@ -103,7 +108,7 @@ define(['require',
noLineage: function() { noLineage: function() {
this.$('.fontLoader').hide(); this.$('.fontLoader').hide();
//this.$('svg').height('100'); //this.$('svg').height('100');
this.$('svg').html('<text x="' + (this.$('svg').width() - 150) / 2 + '" y="' + this.$('svg').height() / 2 + '" fill="black">No lineage data found</text>'); this.$('svg').html('<text x="50%" y="50%" alignment-baseline="middle" text-anchor="middle">No lineage data found</text>');
if (this.actionCallBack) { if (this.actionCallBack) {
this.actionCallBack(); this.actionCallBack();
} }
...@@ -142,9 +147,10 @@ define(['require', ...@@ -142,9 +147,10 @@ define(['require',
} }
var styleObj = { var styleObj = {
fill: 'none', fill: 'none',
stroke: '#8bc152' stroke: '#8bc152',
width: 2
} }
that.g.setEdge(obj.fromEntityId, obj.toEntityId, { 'arrowhead': "arrowPoint", lineInterpolate: 'basis', "style": "fill:" + styleObj.fill + ";stroke:" + styleObj.stroke + "", 'styleObj': styleObj }); that.g.setEdge(obj.fromEntityId, obj.toEntityId, { 'arrowhead': "arrowPoint", lineInterpolate: 'basis', "style": "fill:" + styleObj.fill + ";stroke:" + styleObj.stroke + ";stroke-width:" + styleObj.width + "", 'styleObj': styleObj });
}); });
if (this.fromToObj[this.guid]) { if (this.fromToObj[this.guid]) {
...@@ -180,17 +186,19 @@ define(['require', ...@@ -180,17 +186,19 @@ define(['require',
scaleEl = this.$('svg').find('>g'), scaleEl = this.$('svg').find('>g'),
translateValue = [(this.$('svg').width() - this.g.graph().width * initialScale) / 2, (this.$('svg').height() - this.g.graph().height * initialScale) / 2] translateValue = [(this.$('svg').width() - this.g.graph().width * initialScale) / 2, (this.$('svg').height() - this.g.graph().height * initialScale) / 2]
if (_.keys(this.g._nodes).length > 15) { if (_.keys(this.g._nodes).length > 15) {
translateValue = [((this.$('svg').width() / 2)) / 2, 20];
initialScale = 0; initialScale = 0;
this.$('svg').addClass('noScale'); this.$('svg').addClass('noScale');
} }
if (svgEl.parents('.panel.panel-fullscreen').length && svgEl.hasClass('noScale')) { if (svgEl.parents('.panel.panel-fullscreen').length) {
if (!scaleEl.hasClass('scaleLinage')) { translateValue = [20, 20];
scaleEl.addClass('scaleLinage'); if (svgEl.hasClass('noScale')) {
initialScale = 1.2; if (!scaleEl.hasClass('scaleLinage')) {
} else { scaleEl.addClass('scaleLinage');
scaleEl.removeClass('scaleLinage'); initialScale = 1.2;
initialScale = 0; } else {
scaleEl.removeClass('scaleLinage');
initialScale = 0;
}
} }
} else { } else {
scaleEl.removeClass('scaleLinage'); scaleEl.removeClass('scaleLinage');
...@@ -344,7 +352,7 @@ define(['require', ...@@ -344,7 +352,7 @@ define(['require',
d3.selectAll(this.$('span.lineageZoomButton')).on('click', zoomClick); d3.selectAll(this.$('span.lineageZoomButton')).on('click', zoomClick);
var tooltip = d3Tip() var tooltip = d3Tip()
.attr('class', 'd3-tip') .attr('class', 'd3-tip')
.offset([-18, 0]) .offset([10, 0])
.html(function(d) { .html(function(d) {
var value = that.g.node(d); var value = that.g.node(d);
var htmlStr = ""; var htmlStr = "";
...@@ -363,7 +371,6 @@ define(['require', ...@@ -363,7 +371,6 @@ define(['require',
svg.call(zoom) svg.call(zoom)
.call(tooltip); .call(tooltip);
this.$('.fontLoader').hide();
render(svgGroup, this.g); render(svgGroup, this.g);
svg.on("dblclick.zoom", null) svg.on("dblclick.zoom", null)
.on("wheel.zoom", null); .on("wheel.zoom", null);
...@@ -414,6 +421,18 @@ define(['require', ...@@ -414,6 +421,18 @@ define(['require',
} }
}, 400) }, 400)
}); });
svgGroup.selectAll("g.edgePath path.path").on('click', function(d) {
var data = { obj: _.find(that.lineageData.relations, { "fromEntityId": d.v, "toEntityId": d.w }) },
relationshipId = data.obj.relationshipId;
require(['views/graph/PropagationPropertyModal'], function(PropagationPropertyModal) {
var view = new PropagationPropertyModal({
edgeInfo: data,
relationshipId: relationshipId,
lineageData: that.lineageData,
apiGuid: that.apiGuid
});
});
})
$('body').on('mouseover', '.d3-tip', function(el) { $('body').on('mouseover', '.d3-tip', function(el) {
that.activeTip = true; that.activeTip = true;
}); });
...@@ -427,7 +446,6 @@ define(['require', ...@@ -427,7 +446,6 @@ define(['require',
this.setGraphZoomPositionCal(); this.setGraphZoomPositionCal();
zoom.event(svg); zoom.event(svg);
//svg.attr('height', this.g.graph().height * initialScale + 40); //svg.attr('height', this.g.graph().height * initialScale + 40);
} }
}); });
return LineageLayoutView; return LineageLayoutView;
......
dashboardv2/public/js/views/graph/PropagationPropertyModal.js 0 → 100644
/**
* 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/graph/PropagationPropertyModalView_tmpl',
'models/VRelationship',
'modules/Modal',
'utils/Utils',
'utils/UrlLinks',
'utils/Messages'
], function(require, PropagationPropertyModalViewTmpl, VRelationship, Modal, Utils, UrlLinks, Messages) {
'use strict';
var PropogationPropertyModal = Backbone.Marionette.CompositeView.extend({
template: PropagationPropertyModalViewTmpl,
templateHelpers: function() {},
regions: {},
ui: {
propagationOptions: '[data-id="propagationOptions"]',
edgeDetailName: '[data-id="edgeDetailName"]'
},
events: function() {
var events = {};
events["change " + this.ui.propagationOptions] = function() {
this.modal.$el.find('button.ok').attr("disabled", false);
};
return events;
},
/**
* intialize a new PropogationPropertyModal Layout
* @constructs
*/
initialize: function(options) {
_.extend(this, _.pick(options, 'edgeInfo', 'relationshipId', 'lineageData', 'apiGuid'));
this.entityModel = new VRelationship();
var that = this,
modalObj = {
title: 'Edit Propagation Flow',
content: this,
okText: 'Update',
okCloses: false,
cancelText: "Cancel",
mainClass: 'modal-md',
allowCancel: true,
};
this.modal = new Modal(modalObj)
this.modal.open();
this.modal.$el.find('button.ok').attr("disabled", true);
this.on('ok', function() {
that.updateRelation();
});
this.on('closeModal', function() {
this.modal.trigger('cancel');
});
this.updateEdgeView(this.edgeInfo);
},
onRender: function() {
},
updateEdgeView: function(options) {
var obj = options.obj,
fromEntity = this.lineageData.guidEntityMap[obj.fromEntityId],
toEntity = this.lineageData.guidEntityMap[obj.toEntityId];
if (fromEntity && toEntity) {
this.ui.edgeDetailName.html(fromEntity.displayText + " <span class='navigation-font'><i class='fa fa-long-arrow-right fa-color'></i></span> " + toEntity.displayText);
}
if (obj && obj.relationshipId) {
this.showLoader();
this.getEdgeEntity({ id: obj.relationshipId, from: fromEntity, to: toEntity });
}
},
getPropagationFlow: function(options) {
var relationshipData = options.relationshipData,
graphData = options.graphData,
propagateTags = relationshipData.propagateTags;
if (relationshipData.end1) {
if (relationshipData.end1.guid == graphData.from.guid || propagateTags == "BOTH" || propagateTags == "NONE") {
return propagateTags;
} else {
return propagateTags == "ONE_TO_TWO" ? "TWO_TO_ONE" : "ONE_TO_TWO";
}
} else {
return propagateTags;
}
},
getEdgeEntity: function(options) {
var that = this,
id = options.id,
from = options.from,
to = options.to,
icon = {
0: 'fa-long-arrow-right',
1: 'fa-long-arrow-left',
2: 'fa-arrows-h'
};
_.each(icon, function(value, key) {
that.ui.propagationOptions.find('li label')[key].innerHTML = from.typeName + ' <i class="fa-color fa ' + value + '"></i> ' + to.typeName;
});
if (id === this.ui.propagationOptions.attr("entity-id")) {
return;
}
this.ui.propagationOptions.attr("entity-id", id);
if (this.apiGuid[id]) {
this.hideLoader();
this.$("input[name='propagateRelation']").removeAttr('checked');
this.$("input[name='propagateRelation'][value=" + that.getPropagationFlow({
"relationshipData": this.apiGuid[id],
"graphData": options
}) + "]").prop('checked', true);
} else {
if (this.edgeCall && this.edgeCall.readyState != 4) {
this.edgeCall.abort();
}
this.edgeCall = this.entityModel.getRelationship(id, {
success: function(relationshipData) {
if (relationshipData) {
that.apiGuid[relationshipData.guid] = relationshipData;
that.$("input[name='propagateRelation']").removeAttr('checked');
that.$("input[name='propagateRelation'][value=" + that.getPropagationFlow({
"relationshipData": relationshipData,
"graphData": options
}) + "]").prop('checked', true);
that.hideLoader({ buttonDisabled: true });
}
},
cust_error: function() {
that.hideLoader();
}
});
}
},
updateRelation: function() {
var that = this,
entityId = that.ui.propagationOptions.attr('entity-id'),
PropagationValue = this.$("input[name='propagateRelation']:checked").val();
if (PropagationValue === this.ui.propagationOptions.attr("propagation")) {
return;
}
this.ui.propagationOptions.attr("propagation", PropagationValue);
var relationshipProp = {
"propagateTags": that.getPropagationFlow({
"relationshipData": that.apiGuid[entityId],
"graphData": { from: { guid: this.edgeInfo.obj.fromEntityId } }
})
};
this.showLoader();
this.entityModel.saveRelationship({
data: JSON.stringify(_.extend(that.apiGuid[entityId], relationshipProp)),
success: function(relationshipData) {
if (relationshipData) {
that.hideLoader({ buttonDisabled: true });
that.modal.trigger('cancel');
that.apiGuid[relationshipData.guid] = relationshipData;
Utils.notifySuccess({
content: "Propagation flow updated succesfully."
});
}
},
cust_error: function() {
that.hideLoader();
}
});
},
showLoader: function() {
this.modal.$el.find('button.ok').attr("disabled", true);
this.$('.overlay').removeClass('hide').addClass('show');
},
hideLoader: function(options) {
var buttonDisabled = options && options.buttonDisabled;
this.modal.$el.find('button.ok').attr("disabled", buttonDisabled ? buttonDisabled : false);
this.$('.overlay').removeClass('show').addClass('hide');
}
});
return PropogationPropertyModal;
});
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment