ATLAS-1810 : UI : Audit details of any tag event (Added,Updated) has only tag name and event.

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 52a0919..fc8e6cc 100644
--- a/dashboardv2/public/js/templates/audit/CreateAuditTableLayoutView_tmpl.html
+++ b/dashboardv2/public/js/templates/audit/CreateAuditTableLayoutView_tmpl.html
@@ -14,6 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 -->
+<h4>Name: <span data-id="tagHeader"></span></h4>
 <table class="table table-bordered table-striped" data-id="tableAudit">
     <thead>
         <tr data-id="auditHeaderValue">
diff --git a/dashboardv2/public/js/utils/CommonViewFunction.js b/dashboardv2/public/js/utils/CommonViewFunction.js
index e49d2b7..de46667 100644
--- a/dashboardv2/public/js/utils/CommonViewFunction.js
+++ b/dashboardv2/public/js/utils/CommonViewFunction.js
@@ -88,7 +88,12 @@
             }
         });
     }
-    CommonViewFunction.propertyTable = function(scope, valueObject, entityDef) {
+    CommonViewFunction.propertyTable = function(options) {
+        var scope = options.scope,
+            valueObject = options.valueObject,
+            extractJSON = options.extractJSON,
+            entityDef = options.entityDef;
+
         var table = "",
             fetchInputOutputValue = function(id) {
                 var that = this;
@@ -117,92 +122,110 @@
                     },
                     complete: function() {}
                 });
-            }
-        _.sortBy(_.keys(valueObject)).map(function(key) {
-            key = _.escape(key)
-            var keyValue = valueObject[key],
-                valueOfArray = [];
-            var defEntity = _.find(entityDef, { name: key });
-            if (defEntity) {
-                var defEntityType = defEntity.typeName.toLocaleLowerCase();
-                if (defEntityType === 'date' || defEntityType === 'time') {
-                    table += '<tr><td>' + _.escape(key) + '</td><td>' + new Date(keyValue) + '</td></tr>';
-                } else if (_.isObject(keyValue)) {
-                    if (!_.isArray(keyValue) && _.isObject(keyValue)) {
-                        keyValue = [keyValue];
+            },
+            extractObject = function(keyValue) {
+                var valueOfArray = [];
+                if (!_.isArray(keyValue) && _.isObject(keyValue)) {
+                    keyValue = [keyValue];
+                }
+                var subLink = "";
+                for (var i = 0; i < keyValue.length; i++) {
+                    var inputOutputField = keyValue[i],
+                        id = inputOutputField.guid || (_.isObject(inputOutputField.id) ? inputOutputField.id.id : inputOutputField.id),
+                        tempLink = "",
+                        status = inputOutputField.status || (_.isObject(inputOutputField.id) ? inputOutputField.id.state : inputOutputField.state),
+                        readOnly = Enums.entityStateReadOnly[status];
+                    if (!inputOutputField.attributes && inputOutputField.values) {
+                        inputOutputField['attributes'] = inputOutputField.values;
                     }
-                    var subLink = "";
-                    for (var i = 0; i < keyValue.length; i++) {
-                        var inputOutputField = keyValue[i],
-                            id = inputOutputField.guid || (_.isObject(inputOutputField.id) ? inputOutputField.id.id : inputOutputField.id),
-                            tempLink = "",
-                            status = inputOutputField.status || (_.isObject(inputOutputField.id) ? inputOutputField.id.state : inputOutputField.state),
-                            readOnly = Enums.entityStateReadOnly[status];
-                        if (!inputOutputField.attributes && inputOutputField.values) {
-                            inputOutputField['attributes'] = inputOutputField.values;
+                    if (_.isString(inputOutputField) || _.isBoolean(inputOutputField) || _.isNumber(inputOutputField)) {
+                        var tempVarfor$check = inputOutputField.toString();
+                        if (tempVarfor$check.indexOf("$") == -1) {
+                            valueOfArray.push('<span>' + _.escape(inputOutputField) + '</span>');
                         }
-                        if (_.isString(inputOutputField) || _.isBoolean(inputOutputField) || _.isNumber(inputOutputField)) {
-                            var tempVarfor$check = inputOutputField.toString();
+                    } else if (_.isObject(inputOutputField) && !id) {
+                        var attributesList = inputOutputField;
+                        if (scope.typeHeaders && inputOutputField.typeName) {
+                            var typeNameCategory = scope.typeHeaders.fullCollection.findWhere({ name: inputOutputField.typeName });
+                            if (attributesList.attributes && typeNameCategory && typeNameCategory.get('category') === 'STRUCT') {
+                                attributesList = attributesList.attributes;
+                            }
+                        }
+                        _.each(attributesList, function(objValue, objKey) {
+                            var value = objValue,
+                                tempVarfor$check = objKey.toString();
                             if (tempVarfor$check.indexOf("$") == -1) {
-                                valueOfArray.push('<span>' + _.escape(inputOutputField) + '</span>');
-                            }
-                        } else if (_.isObject(inputOutputField) && !id) {
-                            var attributesList = inputOutputField;
-                            if (scope.typeHeaders && inputOutputField.typeName) {
-                                var typeNameCategory = scope.typeHeaders.fullCollection.findWhere({ name: inputOutputField.typeName });
-                                if (attributesList.attributes && typeNameCategory && typeNameCategory.get('category') === 'STRUCT') {
-                                    attributesList = attributesList.attributes;
+                                if (_.isObject(value)) {
+                                    value = JSON.stringify(value);
                                 }
-                            }
-                            _.each(attributesList, function(objValue, objKey) {
-                                var value = objValue,
-                                    tempVarfor$check = objKey.toString();
-                                if (tempVarfor$check.indexOf("$") == -1) {
-                                    if (_.isObject(value)) {
-                                        value = JSON.stringify(value);
+                                if (extractJSON) {
+                                    if (extractJSON && extractJSON.extractKey) {
+                                        if (_.isObject(extractJSON.extractKey)) {
+                                            _.each(extractJSON.extractKey, function(extractKey) {
+                                                if (objKey === extractKey) {
+                                                    valueOfArray.push('<span>' + _.escape(objKey) + ':' + _.escape(value) + '</span>');
+                                                }
+                                            });
+                                        } else if (_.isString(extractJSON.extractKey) && extractJSON.extractKey === objKey) {
+                                            valueOfArray.push(_.escape(value));
+                                        }
                                     }
+                                } else {
                                     valueOfArray.push('<span>' + _.escape(objKey) + ':' + _.escape(value) + '</span>');
                                 }
-                            });
-                        }
-
-                        if (id && inputOutputField) {
-                            var name = Utils.getName(inputOutputField);
-                            if (name === "-" || name === id) {
-                                var fetch = true;
-                                var fetchId = (_.isObject(id) ? id.id : id);
-                                fetchInputOutputValue(fetchId);
-                                tempLink += '<div data-id="' + fetchId + '"></div>';
-                            } else {
-                                tempLink += '<a href="#!/detailPage/' + id + '">' + name + '</a>'
                             }
-                        }
-                        if (readOnly) {
-                            if (!fetch) {
-                                tempLink += '<button title="Deleted" class="btn btn-atlasAction btn-atlas deleteBtn"><i class="fa fa-trash"></i></button>';
-                                subLink += '<div class="block readOnlyLink">' + tempLink + '</div>';
-                            } else {
-                                fetch = false;
-                                subLink += tempLink;
-                            }
-
+                        });
+                    }
+                    if (id && inputOutputField) {
+                        var name = Utils.getName(inputOutputField);
+                        if (name === "-" || name === id) {
+                            var fetch = true;
+                            var fetchId = (_.isObject(id) ? id.id : id);
+                            fetchInputOutputValue(fetchId);
+                            tempLink += '<div data-id="' + fetchId + '"></div>';
                         } else {
-                            if (tempLink.search('href') != -1) {
-                                subLink += '<div>' + tempLink + '</div>'
-                            } else if (tempLink.length) {
-                                subLink += tempLink
-                            }
+                            tempLink += '<a href="#!/detailPage/' + id + '">' + name + '</a>'
                         }
                     }
-                    if (valueOfArray.length) {
-                        subLink = valueOfArray.join(', ');
-                    }
-                    table += '<tr><td>' + _.escape(key) + '</td><td>' + subLink + '</td></tr>';
+                    if (readOnly) {
+                        if (!fetch) {
+                            tempLink += '<button title="Deleted" class="btn btn-atlasAction btn-atlas deleteBtn"><i class="fa fa-trash"></i></button>';
+                            subLink += '<div class="block readOnlyLink">' + tempLink + '</div>';
+                        } else {
+                            fetch = false;
+                            subLink += tempLink;
+                        }
 
-                } else {
-                    table += '<tr><td>' + _.escape(key) + '</td><td>' + _.escape(valueObject[key]) + '</td></tr>';
+                    } else {
+                        if (tempLink.search('href') != -1) {
+                            subLink += '<div>' + tempLink + '</div>'
+                        } else if (tempLink.length) {
+                            subLink += tempLink
+                        }
+                    }
+                }
+                if (valueOfArray.length) {
+                    subLink = valueOfArray.join(', ');
+                }
+                return subLink;
+            }
+        _.sortBy(_.keys(valueObject)).map(function(key) {
+            key = _.escape(key);
+            var keyValue = valueObject[key];
+            var defEntity = _.find(entityDef, { name: key });
+            if (defEntity && defEntity.typeName) {
+                var defEntityType = defEntity.typeName.toLocaleLowerCase();
+                if (defEntityType === 'date' || defEntityType === 'time') {
+                    keyValue = new Date(keyValue);
+                } else if (_.isObject(keyValue)) {
+                    keyValue = extractObject(keyValue);
+                }
+            } else {
+                if (_.isObject(keyValue)) {
+                    keyValue = extractObject(keyValue)
                 }
             }
+            table += '<tr><td>' + _.escape(key) + '</td><td>' + (_.isObject(valueObject[key]) ? keyValue : _.escape(keyValue)) + '</td></tr>';
         });
         return table;
     }
diff --git a/dashboardv2/public/js/utils/Utils.js b/dashboardv2/public/js/utils/Utils.js
index e09220c..1d614a8 100644
--- a/dashboardv2/public/js/utils/Utils.js
+++ b/dashboardv2/public/js/utils/Utils.js
@@ -401,7 +401,13 @@
                     return returnObj;
                 }
                 if (collectionJSON.attributes.id) {
-                    returnObj.name = _.escape(collectionJSON.attributes.id);
+                    if (_.isObject(collectionJSON.attributes.id)) {
+                        if (collectionJSON.id.id) {
+                            returnObj.name = _.escape(collectionJSON.attributes.id.id);
+                        }
+                    } else {
+                        returnObj.name = _.escape(collectionJSON.attributes.id);
+                    }
                     returnObj.key = 'id';
                     return returnObj;
                 }
@@ -427,7 +433,13 @@
                 return returnObj;
             }
             if (collectionJSON.id) {
-                returnObj.name = _.escape(collectionJSON.id);
+                if (_.isObject(collectionJSON.id)) {
+                    if (collectionJSON.id.id) {
+                        returnObj.name = _.escape(collectionJSON.id.id);
+                    }
+                } else {
+                    returnObj.name = _.escape(collectionJSON.id);
+                }
                 returnObj.key = 'id';
                 return returnObj;
             }
diff --git a/dashboardv2/public/js/views/audit/CreateAuditTableLayoutView.js b/dashboardv2/public/js/views/audit/CreateAuditTableLayoutView.js
index 3f6be02..34c56cb 100644
--- a/dashboardv2/public/js/views/audit/CreateAuditTableLayoutView.js
+++ b/dashboardv2/public/js/views/audit/CreateAuditTableLayoutView.js
@@ -41,7 +41,8 @@
                 auditCreate: "[data-id='auditCreate']",
                 noData: "[data-id='noData']",
                 tableAudit: "[data-id='tableAudit']",
-                auditHeaderValue: "[data-id='auditHeaderValue']"
+                auditHeaderValue: "[data-id='auditHeaderValue']",
+                tagHeader: "[data-id='tagHeader']"
             },
             /** ui events hash */
             events: function() {
@@ -79,13 +80,11 @@
                         }
                     }
                     var values = parseDetailsObject.values;
-                    if (this.action && (Enums.auditAction.ENTITY_CREATE !== this.action && Enums.auditAction.ENTITY_UPDATE !== this.action) && name) {
-                        this.ui.auditHeaderValue.html('<th>' + this.action + '</th>');
-                        this.ui.auditValue.html("<tr><td>" + (name ? name : this.entityName) + "</td></tr>");
-                    } else if (parseDetailsObject && parseDetailsObject.values) {
+                    if (parseDetailsObject && parseDetailsObject.values) {
+                        var tagHeader = ((name ? name : this.entityName));
+                        this.ui.tagHeader.append(tagHeader);
                         this.ui.auditHeaderValue.html('<th>Key</th><th>New Value</th>');
-                        //CommonViewFunction.findAndmergeRefEntity(attributeObject, that.referredEntities);
-                        table = CommonViewFunction.propertyTable(this, values, this.entityDef);
+                        table = CommonViewFunction.propertyTable({ scope: this, valueObject: values, entityDef: this.entityDef, extractJSON: { extractKey: 'value' } });
                         if (table.length) {
                             this.ui.noData.hide();
                             this.ui.tableAudit.show();
@@ -94,9 +93,7 @@
                             this.ui.noData.show();
                             this.ui.tableAudit.hide();
                         }
-                    }
-                } else {
-                    if (Enums.auditAction.ENTITY_DELETE === this.action) {
+                    } else {
                         this.ui.auditHeaderValue.html('<th>' + this.action + '</th>');
                         this.ui.auditValue.html("<tr><td>" + (name ? name : this.entityName) + "</td></tr>");
                     }
diff --git a/dashboardv2/public/js/views/entity/EntityDetailTableLayoutView.js b/dashboardv2/public/js/views/entity/EntityDetailTableLayoutView.js
index 480305e..79f7807 100644
--- a/dashboardv2/public/js/views/entity/EntityDetailTableLayoutView.js
+++ b/dashboardv2/public/js/views/entity/EntityDetailTableLayoutView.js
@@ -65,7 +65,7 @@
                     });
                     attributeObject.columns = valueSorted;
                 }
-                var table = CommonViewFunction.propertyTable(this, attributeObject, this.entityDef);
+                var table = CommonViewFunction.propertyTable({ scope: this, valueObject: attributeObject, entityDef: this.entityDef });
                 that.ui.detailValue.append(table);
             }
         });