ATLAS-4214 : UI expand/collapse Technical properies of entity audits' tab not working properly.
Signed-off-by: nixonrodrigues <nixon@apache.org>
diff --git a/dashboardv2/public/js/templates/audit/CreateAuditTableLayoutView_tmpl.html b/dashboardv2/public/js/templates/audit/CreateAuditTableLayoutView_tmpl.html
index 3cdbc7f..11814d3 100644
--- a/dashboardv2/public/js/templates/audit/CreateAuditTableLayoutView_tmpl.html
+++ b/dashboardv2/public/js/templates/audit/CreateAuditTableLayoutView_tmpl.html
@@ -38,7 +38,7 @@
</div>
</div>
<div class="panel panel-default custom-panel expand_collapse_panel-icon hide col-sm-5" data-id="attributeDetails">
- <div class="panel-heading" data-toggle="collapse" href="#attributeTableCollapse" aria-expanded="true">
+ <div class="panel-heading" data-toggle="collapse" href={{technicalPropPanelId.anchor}} aria-expanded="true">
<h4 class="panel-title">
<a data-id="panel-attr-heading">Technical properties </a>
</h4>
@@ -46,7 +46,7 @@
<button type="button" title="Collapse"><i class="ec-icon fa"></i></button>
</div>
</div>
- <div id="attributeTableCollapse" class="panel-collapse collapse in">
+ <div id={{technicalPropPanelId.id}} class="panel-collapse collapse in">
<div class="panel-body">
<table class="table stat-table">
<tbody data-id="attribute-card">
@@ -59,7 +59,7 @@
</div>
</div>
<div class="panel panel-default custom-panel expand_collapse_panel-icon hide col-sm-5" data-id="relationShipAttributeDetails">
- <div class="panel-heading" data-toggle="collapse" href="#relationShipAttributeTableCollapse" aria-expanded="true">
+ <div class="panel-heading" data-toggle="collapse" href={{relationshipPropPanelId.anchor}} aria-expanded="true">
<h4 class="panel-title">
<a>Relationship properties </a>
</h4>
@@ -67,7 +67,7 @@
<button type="button" title="Collapse"><i class="ec-icon fa"></i></button>
</div>
</div>
- <div id="relationShipAttributeTableCollapse" class="panel-collapse collapse in">
+ <div id={{relationshipPropPanelId.id}} class="panel-collapse collapse in">
<div class="panel-body">
<table class="table stat-table">
<tbody data-id="relationship-attr-card">
@@ -80,7 +80,7 @@
</div>
</div>
<div class="panel panel-default custom-panel expand_collapse_panel-icon hide col-sm-5" data-id="customAttributeDetails">
- <div class="panel-heading" data-toggle="collapse" href="#customAttributeCollapse" aria-expanded="true">
+ <div class="panel-heading" data-toggle="collapse" href={{userdefinedPropPanelId.anchor}} aria-expanded="true">
<h4 class="panel-title">
<a>User-defined properties </a>
</h4>
@@ -88,7 +88,7 @@
<button type="button" title="Collapse"><i class="ec-icon fa"></i></button>
</div>
</div>
- <div id="customAttributeCollapse" class="panel-collapse collapse in">
+ <div id={{userdefinedPropPanelId.id}} class="panel-collapse collapse in">
<div class="panel-body">
<table class="table stat-table">
<tbody data-id="custom-attr-card">
diff --git a/dashboardv2/public/js/views/audit/CreateAuditTableLayoutView.js b/dashboardv2/public/js/views/audit/CreateAuditTableLayoutView.js
index 3733195..e107a2d 100644
--- a/dashboardv2/public/js/views/audit/CreateAuditTableLayoutView.js
+++ b/dashboardv2/public/js/views/audit/CreateAuditTableLayoutView.js
@@ -32,6 +32,13 @@
template: CreateAuditTableLayoutViewTmpl,
+ templateHelpers: function() {
+ return {
+ technicalPropPanelId: this.technicalPropId,
+ relationshipPropPanelId: this.relationshipPropId,
+ userdefinedPropPanelId: this.userDefinedPropId
+ };
+ },
/** Layout sub regions */
regions: {},
@@ -67,11 +74,21 @@
*/
initialize: function(options) {
_.extend(this, _.pick(options, 'guid', 'entityModel', 'action', 'entity', 'entityName', 'attributeDefs'));
+ var modelID = this.entityModel.cid || parseInt((Math.random() * 100));
+ this.technicalPropId = this.getRandomID(modelID);
+ this.relationshipPropId = this.getRandomID(modelID, this.technicalPropId);
+ this.userDefinedPropId = this.getRandomID(modelID, this.technicalPropId, this.userDefinedPropId);
},
bindEvents: function() {},
onRender: function() {
this.auditTableGenerate();
},
+ getRandomID: function(modelID, technicalPropId, relationshipPropId) {
+ var randomIdObj = CommonViewFunction.getRandomIdAndAnchor();
+ randomIdObj.id = randomIdObj.id + modelID;
+ randomIdObj.anchor = randomIdObj.anchor + modelID;
+ return (randomIdObj === technicalPropId || randomIdObj === relationshipPropId) ? this.getRandomID(technicalPropId, relationshipPropId) : randomIdObj;
+ },
createTableWithValues: function(tableDetails) {
var attrTable = CommonViewFunction.propertyTable({
scope: this,
diff --git a/dashboardv3/public/js/templates/audit/CreateAuditTableLayoutView_tmpl.html b/dashboardv3/public/js/templates/audit/CreateAuditTableLayoutView_tmpl.html
index 3cdbc7f..11814d3 100644
--- a/dashboardv3/public/js/templates/audit/CreateAuditTableLayoutView_tmpl.html
+++ b/dashboardv3/public/js/templates/audit/CreateAuditTableLayoutView_tmpl.html
@@ -38,7 +38,7 @@
</div>
</div>
<div class="panel panel-default custom-panel expand_collapse_panel-icon hide col-sm-5" data-id="attributeDetails">
- <div class="panel-heading" data-toggle="collapse" href="#attributeTableCollapse" aria-expanded="true">
+ <div class="panel-heading" data-toggle="collapse" href={{technicalPropPanelId.anchor}} aria-expanded="true">
<h4 class="panel-title">
<a data-id="panel-attr-heading">Technical properties </a>
</h4>
@@ -46,7 +46,7 @@
<button type="button" title="Collapse"><i class="ec-icon fa"></i></button>
</div>
</div>
- <div id="attributeTableCollapse" class="panel-collapse collapse in">
+ <div id={{technicalPropPanelId.id}} class="panel-collapse collapse in">
<div class="panel-body">
<table class="table stat-table">
<tbody data-id="attribute-card">
@@ -59,7 +59,7 @@
</div>
</div>
<div class="panel panel-default custom-panel expand_collapse_panel-icon hide col-sm-5" data-id="relationShipAttributeDetails">
- <div class="panel-heading" data-toggle="collapse" href="#relationShipAttributeTableCollapse" aria-expanded="true">
+ <div class="panel-heading" data-toggle="collapse" href={{relationshipPropPanelId.anchor}} aria-expanded="true">
<h4 class="panel-title">
<a>Relationship properties </a>
</h4>
@@ -67,7 +67,7 @@
<button type="button" title="Collapse"><i class="ec-icon fa"></i></button>
</div>
</div>
- <div id="relationShipAttributeTableCollapse" class="panel-collapse collapse in">
+ <div id={{relationshipPropPanelId.id}} class="panel-collapse collapse in">
<div class="panel-body">
<table class="table stat-table">
<tbody data-id="relationship-attr-card">
@@ -80,7 +80,7 @@
</div>
</div>
<div class="panel panel-default custom-panel expand_collapse_panel-icon hide col-sm-5" data-id="customAttributeDetails">
- <div class="panel-heading" data-toggle="collapse" href="#customAttributeCollapse" aria-expanded="true">
+ <div class="panel-heading" data-toggle="collapse" href={{userdefinedPropPanelId.anchor}} aria-expanded="true">
<h4 class="panel-title">
<a>User-defined properties </a>
</h4>
@@ -88,7 +88,7 @@
<button type="button" title="Collapse"><i class="ec-icon fa"></i></button>
</div>
</div>
- <div id="customAttributeCollapse" class="panel-collapse collapse in">
+ <div id={{userdefinedPropPanelId.id}} class="panel-collapse collapse in">
<div class="panel-body">
<table class="table stat-table">
<tbody data-id="custom-attr-card">
diff --git a/dashboardv3/public/js/views/audit/CreateAuditTableLayoutView.js b/dashboardv3/public/js/views/audit/CreateAuditTableLayoutView.js
index 3733195..7758821 100644
--- a/dashboardv3/public/js/views/audit/CreateAuditTableLayoutView.js
+++ b/dashboardv3/public/js/views/audit/CreateAuditTableLayoutView.js
@@ -32,6 +32,14 @@
template: CreateAuditTableLayoutViewTmpl,
+ templateHelpers: function(){
+ return {
+ technicalPropPanelId: this.technicalPropId,
+ relationshipPropPanelId: this.relationshipPropId,
+ userdefinedPropPanelId: this.userDefinedPropId
+ };
+ },
+
/** Layout sub regions */
regions: {},
@@ -67,11 +75,21 @@
*/
initialize: function(options) {
_.extend(this, _.pick(options, 'guid', 'entityModel', 'action', 'entity', 'entityName', 'attributeDefs'));
+ var modelID = this.entityModel.cid || parseInt((Math.random() * 100));
+ this.technicalPropId = this.getRandomID(modelID);
+ this.relationshipPropId = this.getRandomID(modelID, this.technicalPropId);
+ this.userDefinedPropId = this.getRandomID(modelID, this.technicalPropId, this.userDefinedPropId);
},
bindEvents: function() {},
onRender: function() {
this.auditTableGenerate();
},
+ getRandomID: function(modelID, technicalPropId, relationshipPropId) {
+ var randomIdObj = CommonViewFunction.getRandomIdAndAnchor();
+ randomIdObj.id = randomIdObj.id + modelID;
+ randomIdObj.anchor = randomIdObj.anchor + modelID;
+ return (randomIdObj === technicalPropId || randomIdObj === relationshipPropId) ? this.getRandomID(technicalPropId, relationshipPropId) : randomIdObj;
+ },
createTableWithValues: function(tableDetails) {
var attrTable = CommonViewFunction.propertyTable({
scope: this,
