Skip to content

A
atlas
Commit 45bf48e6 by pratik24mac Committed by Sarath Subramanian
Options

ATLAS-2594: UI, Tag propagation : Add dialog box for blocked Propagated classifications list on UI

Signed-off-by: 's avatarSarath Subramanian <ssubramanian@hortonworks.com>
parent 7b14cfac
Showing with 260 additions and 48 deletions
dashboardv2/public/css/scss/override.scss
...@@ -429,4 +429,7 @@ div.columnmanager-dropdown-container { ...@@ -429,4 +429,7 @@ div.columnmanager-dropdown-container {
.fa-color { .fa-color {
color: $color_keppel_approx color: $color_keppel_approx
}
.w30{
width: 30% !important;
} }
\ No newline at end of file
dashboardv2/public/css/scss/theme.scss
...@@ -137,14 +137,17 @@ header { ...@@ -137,14 +137,17 @@ header {
a { a {
color: $color_jungle_green_approx; color: $color_jungle_green_approx;
cursor: pointer;
&:focus { &:focus {
color: $color_puerto_rico_approx; color: $color_puerto_rico_approx;
text-decoration: none; text-decoration: none;
outline: none; outline: none;
cursor: pointer;
} }
&:hover { &:hover {
color: $color_puerto_rico_approx; color: $color_puerto_rico_approx;
text-decoration: none; text-decoration: none;
cursor: pointer;
} }
} }
......
dashboardv2/public/js/templates/graph/PropagationPropertyModalView_tmpl.html
...@@ -15,38 +15,54 @@ ...@@ -15,38 +15,54 @@
* limitations under the License. * limitations under the License.
--> -->
<div class="lineage-edge-details" data-id="PropagationToolTip"> <div class="lineage-edge-details" data-id="PropagationToolTip">
<h4 class="title"><span data-id="edgeDetailName"></span></h4> <div class="col-sm-12">
<div class="overlay show"> <div class="row">
<div class="fontLoader show"> <div class="col-sm-9" style="margin-top: 5px;">
<i class="fa fa-refresh fa-spin-custom"></i> <span class="pull-left">Propagation flow</span>
<label class="switch pull-left">
<input type="checkbox" class="switch-input" name="editPropagationType" value="text">
<span class="switch-slider"></span>
</label>
<span class="pull-left">Block propagation</span>
</div>
</div> </div>
<hr style="margin-top: 0px;">
</div> </div>
<div class="col-md-12"> <div class="editPropagation col-sm-12">
<ul data-id="propagationOptions" class="propagation-list"> <h4 class="title"><span data-id="edgeDetailName"></span></h4>
<li> <div class="overlay show">
<div class="radio"> <div class="fontLoader show">
<input type="radio" name="propagateRelation" value="ONE_TO_TWO" id="ONE_TO_TWO"> <i class="fa fa-refresh fa-spin-custom"></i>
<label class="padding-left-0" for="ONE_TO_TWO">ONE TO TWO</label> </div>
</div> </div>
</li> <div class="col-md-12">
<li> <ul data-id="propagationOptions" class="propagation-list">
<div class="radio"> <li>
<input type="radio" name="propagateRelation" value="TWO_TO_ONE" id="TWO_TO_ONE"> <div class="radio">
<label class="padding-left-0" for="TWO_TO_ONE">TWO TO ONE</label> <input type="radio" name="propagateRelation" value="ONE_TO_TWO" id="ONE_TO_TWO">
</div> <label class="padding-left-0" for="ONE_TO_TWO">ONE TO TWO</label>
</li> </div>
<li> </li>
<div class="radio"> <li>
<input type="radio" name="propagateRelation" value="BOTH" id="BOTH"> <div class="radio">
<label class="padding-left-0" for="BOTH">BOTH</label> <input type="radio" name="propagateRelation" value="TWO_TO_ONE" id="TWO_TO_ONE">
</div> <label class="padding-left-0" for="TWO_TO_ONE">TWO TO ONE</label>
</li> </div>
<li> </li>
<div class="radio"> <li>
<input type="radio" name="propagateRelation" value="NONE" id="NONE"> <div class="radio">
<label class="padding-left-0" for="NONE">None</label> <input type="radio" name="propagateRelation" value="BOTH" id="BOTH">
</div> <label class="padding-left-0" for="BOTH">BOTH</label>
</li> </div>
</ul> </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> </div>
<div data-id="PropagatedClassificationTable" class="propagatedClassificationTable col-sm-12" style="display: none"></div>
</div> </div>
\ No newline at end of file
dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js
...@@ -242,6 +242,7 @@ define(['require', ...@@ -242,6 +242,7 @@ define(['require',
this.renderLineageLayoutView({ this.renderLineageLayoutView({
guid: this.id, guid: this.id,
entityDefCollection: this.entityDefCollection, entityDefCollection: this.entityDefCollection,
fetchCollection: this.fetchCollection.bind(this),
actionCallBack: function() { actionCallBack: function() {
that.$('#expand_collapse_panel').click(); that.$('#expand_collapse_panel').click();
} }
......
dashboardv2/public/js/views/graph/LineageLayoutView.js
...@@ -56,7 +56,7 @@ define(['require', ...@@ -56,7 +56,7 @@ define(['require',
* @constructs * @constructs
*/ */
initialize: function(options) { initialize: function(options) {
_.extend(this, _.pick(options, 'guid', 'entityDefCollection', 'actionCallBack')); _.extend(this, _.pick(options, 'guid', 'entityDefCollection', 'actionCallBack', 'fetchCollection'));
this.collection = new VLineageList(); this.collection = new VLineageList();
this.lineageData = null; this.lineageData = null;
this.typeMap = {}; this.typeMap = {};
...@@ -68,6 +68,9 @@ define(['require', ...@@ -68,6 +68,9 @@ define(['require',
var that = this; var that = this;
this.$('.fontLoader').show(); this.$('.fontLoader').show();
this.fetchGraphData(); this.fetchGraphData();
if (platform.name === "IE") {
this.$('svg').css('opacity', '0');
}
if (this.layoutRendered) { if (this.layoutRendered) {
this.layoutRendered(); this.layoutRendered();
} }
...@@ -180,6 +183,14 @@ define(['require', ...@@ -180,6 +183,14 @@ 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');
}
},
setGraphZoomPositionCal: function(argument) { setGraphZoomPositionCal: function(argument) {
var initialScale = 1.2, var initialScale = 1.2,
svgEl = this.$('svg'), svgEl = this.$('svg'),
...@@ -371,6 +382,9 @@ define(['require', ...@@ -371,6 +382,9 @@ define(['require',
svg.call(zoom) svg.call(zoom)
.call(tooltip); .call(tooltip);
if (platform.name !== "IE") {
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);
...@@ -429,7 +443,8 @@ define(['require', ...@@ -429,7 +443,8 @@ define(['require',
edgeInfo: data, edgeInfo: data,
relationshipId: relationshipId, relationshipId: relationshipId,
lineageData: that.lineageData, lineageData: that.lineageData,
apiGuid: that.apiGuid apiGuid: that.apiGuid,
detailPageFetchCollection: that.fetchCollection
}); });
}); });
}) })
...@@ -446,6 +461,23 @@ define(['require', ...@@ -446,6 +461,23 @@ 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);
if (platform.name === "IE") {
this.IEGraphRenderDone = 0;
this.$('svg .edgePath').each(function(argument) {
var childNode = $(this).find('marker');
$(this).find('marker').remove();
var eleRef = this;
++that.IEGraphRenderDone;
setTimeout(function(argument) {
$(eleRef).find('defs').append(childNode);
--that.IEGraphRenderDone;
if (that.IEGraphRenderDone === 0) {
this.$('.fontLoader').hide();
this.$('svg').fadeTo(1000, 1)
}
}, 1000);
});
}
} }
}); });
return LineageLayoutView; return LineageLayoutView;
......
dashboardv2/public/js/views/graph/PropagationPropertyModal.js
...@@ -19,11 +19,12 @@ ...@@ -19,11 +19,12 @@
define(['require', define(['require',
'hbs!tmpl/graph/PropagationPropertyModalView_tmpl', 'hbs!tmpl/graph/PropagationPropertyModalView_tmpl',
'models/VRelationship', 'models/VRelationship',
'models/VEntity',
'modules/Modal', 'modules/Modal',
'utils/Utils', 'utils/Utils',
'utils/UrlLinks', 'utils/UrlLinks',
'utils/Messages' 'utils/Messages'
], function(require, PropagationPropertyModalViewTmpl, VRelationship, Modal, Utils, UrlLinks, Messages) { ], function(require, PropagationPropertyModalViewTmpl, VRelationship, VEntity, Modal, Utils, UrlLinks, Messages) {
'use strict'; 'use strict';
var PropogationPropertyModal = Backbone.Marionette.CompositeView.extend({ var PropogationPropertyModal = Backbone.Marionette.CompositeView.extend({
...@@ -32,12 +33,78 @@ define(['require', ...@@ -32,12 +33,78 @@ define(['require',
regions: {}, regions: {},
ui: { ui: {
propagationOptions: '[data-id="propagationOptions"]', propagationOptions: '[data-id="propagationOptions"]',
edgeDetailName: '[data-id="edgeDetailName"]' edgeDetailName: '[data-id="edgeDetailName"]',
propagationState: "[data-id='propagationState']",
classificationClick: "[data-id='classificationClick']",
editPropagationType: 'input[name="editPropagationType"]',
PropagatedClassificationTable: "[data-id='PropagatedClassificationTable']"
}, },
events: function() { events: function() {
var events = {}; var events = {},
that = this;
events["change " + this.ui.propagationOptions] = function() { events["change " + this.ui.propagationOptions] = function() {
this.modalEdited = true;
this.modal.$el.find('button.ok').attr("disabled", false);
};
events["click " + this.ui.editPropagationType] = function(e) {
if (this.modalEdited === true) {
e.preventDefault();
that.notifyModal();
}
};
events["change " + this.ui.editPropagationType] = function(e) {
if (e.target.checked) {
this.showPropagatedClassificationTable();
this.viewType = "table";
} else {
this.showEditPropagation();
this.viewType = "flow";
}
};
events["click " + this.ui.classificationClick] = function(e) {
var that = this,
url = "",
notifyObj = {
modal: true,
text: "Are you sure you want to navigate away from this page ?",
ok: function(argument) {
that.modal.trigger('cancel');
Utils.setUrl({
url: url,
mergeBrowserUrl: false,
trigger: true
});
},
cancel: function(argument) {}
};
if (e.currentTarget.dataset.entityguid) {
url = '#!/tag/tagAttribute/' + e.currentTarget.dataset.entityguid;
} else {
url = '#!/detailPage/' + e.currentTarget.dataset.guid + '?tabActive=lineage';
}
Utils.notifyConfirm(notifyObj);
};
events["change " + this.ui.propagationState] = function(e) {
this.modalEdited = true;
this.modal.$el.find('button.ok').attr("disabled", false); this.modal.$el.find('button.ok').attr("disabled", false);
var entityguid = e.currentTarget.dataset.entityguid;
if (e.target.checked) {
this.propagatedClassifications = _.reject(this.propagatedClassifications, function(val, key) {
if (val.entityGuid == entityguid) {
that.blockedPropagatedClassifications.push(val);
return true;
}
});
} else {
this.blockedPropagatedClassifications = _.reject(this.blockedPropagatedClassifications, function(val, key) {
if (val.entityGuid == entityguid) {
that.propagatedClassifications.push(val);
return true;
}
});
}
}; };
return events; return events;
}, },
...@@ -46,8 +113,11 @@ define(['require', ...@@ -46,8 +113,11 @@ define(['require',
* @constructs * @constructs
*/ */
initialize: function(options) { initialize: function(options) {
_.extend(this, _.pick(options, 'edgeInfo', 'relationshipId', 'lineageData', 'apiGuid')); _.extend(this, _.pick(options, 'edgeInfo', 'relationshipId', 'lineageData', 'apiGuid', 'detailPageFetchCollection'));
this.entityModel = new VRelationship(); this.entityModel = new VRelationship();
this.VEntityModel = new VEntity();
this.modalEdited = false;
this.viewType = 'flow';
var that = this, var that = this,
modalObj = { modalObj = {
title: 'Edit Propagation Flow', title: 'Edit Propagation Flow',
...@@ -55,7 +125,7 @@ define(['require', ...@@ -55,7 +125,7 @@ define(['require',
okText: 'Update', okText: 'Update',
okCloses: false, okCloses: false,
cancelText: "Cancel", cancelText: "Cancel",
mainClass: 'modal-md', mainClass: 'modal-lg',
allowCancel: true, allowCancel: true,
}; };
...@@ -71,9 +141,7 @@ define(['require', ...@@ -71,9 +141,7 @@ define(['require',
this.updateEdgeView(this.edgeInfo); this.updateEdgeView(this.edgeInfo);
}, },
onRender: function() { onRender: function() {},
},
updateEdgeView: function(options) { updateEdgeView: function(options) {
var obj = options.obj, var obj = options.obj,
fromEntity = this.lineageData.guidEntityMap[obj.fromEntityId], fromEntity = this.lineageData.guidEntityMap[obj.fromEntityId],
...@@ -124,6 +192,8 @@ define(['require', ...@@ -124,6 +192,8 @@ define(['require',
"relationshipData": this.apiGuid[id], "relationshipData": this.apiGuid[id],
"graphData": options "graphData": options
}) + "]").prop('checked', true); }) + "]").prop('checked', true);
this.showBlockedClassificationTable(this.apiGuid[id]);
this.getEntityNameForClassification(this.apiGuid[id]);
} else { } else {
if (this.edgeCall && this.edgeCall.readyState != 4) { if (this.edgeCall && this.edgeCall.readyState != 4) {
this.edgeCall.abort(); this.edgeCall.abort();
...@@ -137,6 +207,8 @@ define(['require', ...@@ -137,6 +207,8 @@ define(['require',
"relationshipData": relationshipData, "relationshipData": relationshipData,
"graphData": options "graphData": options
}) + "]").prop('checked', true); }) + "]").prop('checked', true);
that.showBlockedClassificationTable(relationshipData);
that.getEntityNameForClassification(relationshipData);
that.hideLoader({ buttonDisabled: true }); that.hideLoader({ buttonDisabled: true });
} }
}, },
...@@ -149,17 +221,29 @@ define(['require', ...@@ -149,17 +221,29 @@ define(['require',
updateRelation: function() { updateRelation: function() {
var that = this, var that = this,
entityId = that.ui.propagationOptions.attr('entity-id'), entityId = that.ui.propagationOptions.attr('entity-id'),
PropagationValue = this.$("input[name='propagateRelation']:checked").val(); PropagationValue = this.$("input[name='propagateRelation']:checked").val(),
relationshipProp = {};
if (PropagationValue === this.ui.propagationOptions.attr("propagation")) { if (PropagationValue === this.ui.propagationOptions.attr("propagation")) {
return; return;
} }
this.ui.propagationOptions.attr("propagation", PropagationValue); this.ui.propagationOptions.attr("propagation", PropagationValue);
var relationshipProp = { if (this.viewType == "flow") {
"propagateTags": that.getPropagationFlow({ relationshipProp = {
"relationshipData": _.extend(that.apiGuid[entityId], { 'propagateTags': PropagationValue }), "propagateTags": that.getPropagationFlow({
"graphData": { from: { guid: this.edgeInfo.obj.fromEntityId } } "relationshipData": _.extend(that.apiGuid[entityId], { 'propagateTags': PropagationValue }),
}) "graphData": { from: { guid: this.edgeInfo.obj.fromEntityId } }
}; })
}
} else {
relationshipProp = {
"blockedPropagatedClassifications": _.uniq(that.blockedPropagatedClassifications, function(val, key) {
return val.entityGuid;
}),
"propagatedClassifications": _.uniq(that.propagatedClassifications, function(val, key) {
return val.entityGuid;
})
};
}
this.showLoader(); this.showLoader();
this.entityModel.saveRelationship({ this.entityModel.saveRelationship({
data: JSON.stringify(_.extend(that.apiGuid[entityId], relationshipProp)), data: JSON.stringify(_.extend(that.apiGuid[entityId], relationshipProp)),
...@@ -168,6 +252,7 @@ define(['require', ...@@ -168,6 +252,7 @@ define(['require',
that.hideLoader({ buttonDisabled: true }); that.hideLoader({ buttonDisabled: true });
that.modal.trigger('cancel'); that.modal.trigger('cancel');
that.apiGuid[relationshipData.guid] = relationshipData; that.apiGuid[relationshipData.guid] = relationshipData;
that.detailPageFetchCollection();
Utils.notifySuccess({ Utils.notifySuccess({
content: "Propagation flow updated succesfully." content: "Propagation flow updated succesfully."
}); });
...@@ -178,6 +263,48 @@ define(['require', ...@@ -178,6 +263,48 @@ define(['require',
} }
}); });
}, },
showBlockedClassificationTable: function(options) {
var that = this,
propagationStringValue = "",
classificationTableValue = "";
this.blockedPropagatedClassifications = _.isUndefined(options.blockedPropagatedClassifications) ? [] : options.blockedPropagatedClassifications;
this.propagatedClassifications = _.isUndefined(options.propagatedClassifications) ? [] : options.propagatedClassifications;
_.each(this.blockedPropagatedClassifications, function(val, key) {
propagationStringValue += "<tr><td class='html-cell string-cell renderable text-center w30'><a data-id='classificationClick' title='' data-entityGuid=" + val.entityGuid + ">" + val.typeName + "</a></td><td class='html-cell string-cell renderable text-center' data-tr-entityGuid=" + val.entityGuid + "></td><td class='html-cell string-cell renderable text-center w30'><input type='checkbox' checked data-id='propagationState' data-entityGuid=" + val.entityGuid + " class='input'></td></tr>";
});
_.each(this.propagatedClassifications, function(val, key) {
propagationStringValue += "<tr><td class='html-cell string-cell renderable text-center w30'><a data-id='classificationClick' title='' data-entityGuid=" + val.entityGuid + ">" + val.typeName + "</a></td><td class='html-cell string-cell renderable text-center' data-tr-entityGuid=" + val.entityGuid + "></td><td class='html-cell string-cell renderable text-center w30'><input type='checkbox' data-id='propagationState' data-entityGuid=" + val.entityGuid + " class='input'></td></tr>";
});
classificationTableValue = "<table class='attriTable'><caption>Block Propagatation Table</caption><tr><th class='html-cell string-cell renderable w30'>Classification</th><th class='html-cell string-cell renderable'>Entity Name</th><th class='html-cell string-cell renderable w30'>Block Propagatation</th>" + propagationStringValue + "</table>";
this.ui.PropagatedClassificationTable.append(_.isEmpty(propagationStringValue) ? "No Records Found." : classificationTableValue);
},
getEntityNameForClassification: function(options) {
var that = this,
allEntityGuid = _.pluck(_.union(options.blockedPropagatedClassifications, options.propagatedClassifications, function(val, key) {
return val.entityGuid;
}), 'entityGuid'),
apiCall = allEntityGuid.length;
_.map(allEntityGuid, function(entityGuid, key) {
that.VEntityModel.getEntity(entityGuid, {
success: function(data) {
var entityNameWithType = Utils.getName(data['entity']) + ' ( ' + data['entity'].typeName + ' )',
link = "<a data-id='classificationClick' title='' data-guid=" + data['entity'].guid + ">" + entityNameWithType + "</a>";
that.ui.PropagatedClassificationTable.find('[data-tr-entityGuid=' + entityGuid + ']').html(link);
},
complete: function() {
apiCall -= 1;
if (apiCall == 0) {
that.hideLoader({ buttonDisabled: true });
}
},
cust_error: function() {
that.hideLoader({ buttonDisabled: true });
}
});
});
},
showLoader: function() { showLoader: function() {
this.modal.$el.find('button.ok').attr("disabled", true); this.modal.$el.find('button.ok').attr("disabled", true);
this.$('.overlay').removeClass('hide').addClass('show'); this.$('.overlay').removeClass('hide').addClass('show');
...@@ -186,7 +313,34 @@ define(['require', ...@@ -186,7 +313,34 @@ define(['require',
var buttonDisabled = options && options.buttonDisabled; var buttonDisabled = options && options.buttonDisabled;
this.modal.$el.find('button.ok').attr("disabled", buttonDisabled ? buttonDisabled : false); this.modal.$el.find('button.ok').attr("disabled", buttonDisabled ? buttonDisabled : false);
this.$('.overlay').removeClass('show').addClass('hide'); this.$('.overlay').removeClass('show').addClass('hide');
},
notifyModal: function(options) {
var that = this,
notifyObj = {
modal: true,
text: "It looks like you have been edited something. If you leave before saving, your changes will be lost.",
ok: function(argument) {
that.viewType = that.ui.editPropagationType.is(":checked") ? "flow" : "table";
that.ui.editPropagationType.prop("checked", that.viewType === "flow" ? false : true).trigger("change");
that.modal.$el.find('button.ok').attr("disabled", true);
},
cancel: function(argument) {
that.viewType = that.ui.editPropagationType.is(":checked") ? "table" : "flow";
}
};
Utils.notifyConfirm(notifyObj);
},
showEditPropagation: function() {
this.$('.editPropagation').show();
this.$('.propagatedClassificationTable').hide();
this.modal.$el.find('.modal-title').text("Edit Propagation Flow");
},
showPropagatedClassificationTable: function() {
this.$('.editPropagation').hide();
this.$('.propagatedClassificationTable').show();
this.modal.$el.find('.modal-title').text("Block Propagation Table");
} }
}); });
return PropogationPropertyModal; 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