ATLAS-1927: UI updates in rendering of tag attributes

dashboardv2/public/css/scss/tag.scss

@@ -18,8 +18,7 @@
 
 //tag.scss
 .tag-tree {
-    padding: 0;
-    // overflow: auto;
+    padding: 0; // overflow: auto;
     li {
         list-style: none;
         cursor: pointer;
@@ -38,7 +37,7 @@
                     display: block
                 }
             }
-            > ul > li {
+            >ul>li {
                 line-height: 30px;
                 margin-left: -20px;
                 text-indent: 20px;
@@ -93,7 +92,7 @@
     cursor: pointer;
 }
 
-.input-group.attributes .form-control:focus + .input-group-addon {
+.input-group.attributes .form-control:focus+.input-group-addon {
     border-color: $color_bali_hai_approx;
 }
 
@@ -131,7 +130,7 @@
             background-color: $tag_color;
         }
     }
-    > .inputValue {
+    >.inputValue {
         padding: 5px;
         &:hover {
             color: $white;
@@ -345,7 +344,7 @@ form-control .tagInpput {
     margin-top: 10px;
 }
 
-.popoverContainer .inputTag > .inputValue {
+.popoverContainer .inputTag>.inputValue {
     padding: 2px 5px;
     display: inline-block;
     width: 100px;
@@ -410,3 +409,32 @@ legend.scheduler-border {
 .entityLink {
     font-size: 16px;
 }
+
+.mainAttrTable {
+    max-height: 180px;
+    overflow: auto;
+    overflow-x: hidden;
+}
+
+table.attriTable {
+    width: 100%;
+    td {
+        border: 1px solid #ddd;
+        padding: 5px 7px;
+        width: 50%;
+        &[data-type="int"],
+        &[data-type="long"],
+        &[data-type="float"],
+        &[data-type="byte"],
+        &[data-type="double"],
+        &[data-type="short"] {
+            text-align: right;
+        }
+    }
+    th {
+        text-align: center !important;
+        border: 1px solid #ddd;
+        padding: 5px 7px;
+        width: 50%;
+    }
+}
\ No newline at end of file

dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js

@@ -104,7 +104,7 @@ define(['require',
              * @constructs
              */
             initialize: function(options) {
-                _.extend(this, _.pick(options, 'collection', 'id', 'entityDefCollection', 'typeHeaders', 'enumDefCollection'));
+                _.extend(this, _.pick(options, 'collection', 'id', 'entityDefCollection', 'typeHeaders', 'enumDefCollection', 'classificationDefCollection'));
                 this.bindEvents();
             },
             bindEvents: function() {
@@ -172,7 +172,8 @@ define(['require',
                         typeHeaders: this.typeHeaders,
                         entityDefCollection: this.entityDefCollection,
                         fetchCollection: this.fetchCollection.bind(that),
-                        enumDefCollection: this.enumDefCollection
+                        enumDefCollection: this.enumDefCollection,
+                        classificationDefCollection: this.classificationDefCollection
                     }
                     this.getEntityDef(obj);
                     this.renderTagTableLayoutView(obj);

dashboardv2/public/js/views/tag/TagDetailTableLayoutView.js

@@ -64,7 +64,7 @@ define(['require',
              * @constructs
              */
             initialize: function(options) {
-                _.extend(this, _.pick(options, 'entity', 'guid', 'term', 'entityName', 'fetchCollection', 'enumDefCollection'));
+                _.extend(this, _.pick(options, 'entity', 'guid', 'term', 'entityName', 'fetchCollection', 'enumDefCollection', 'classificationDefCollection'));
                 this.collectionObject = this.entity;
                 this.tagTermCollection = new VTagList();
                 var tagorterm = _.toArray(this.collectionObject.classifications),
@@ -133,16 +133,25 @@ define(['require',
                             sortable: false,
                             formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
                                 fromRaw: function(rawValue, model) {
-                                    var values = model.get('attributes'),
-                                        tagValue = 'NA';
-                                    if (!_.isEmpty(values)) {
-                                        var stringArr = [];
-                                        tagValue = "";
-                                        _.each(values, function(val, key) {
-                                            var attrName = "<span>" + _.escape(key) + ":" + _.escape(val) + "</span>";
-                                            stringArr.push(attrName);
+                                    var values = model.get('attributes');
+                                    var data = that.classificationDefCollection.findWhere({ 'name': model.get('typeName') });
+                                    var attributeDefs = Utils.getNestedSuperTypeObj({ data: data.toJSON(), collection: that.classificationDefCollection, attrMerge: true });
+                                    var tagValue = 'NA',
+                                        dataType;
+                                    if (!_.isEmpty(attributeDefs)) {
+                                        var stringValue = "";
+                                        _.each(_.sortBy(_.map(attributeDefs, function(obj) {
+                                            obj['sortKey'] = obj.name && _.isString(obj.name) ? obj.name.toLowerCase() : "-";
+                                            return obj;
+                                        }), 'sortKey'), function(sortedObj) {
+                                            var val = _.isNull(values[sortedObj.name]) ? "-" : values[sortedObj.name],
+                                                key = sortedObj.name;
+                                            if (sortedObj.typeName === "date") {
+                                                val = new Date(val)
+                                            }
+                                            stringValue += "<tr><td class='html-cell string-cell renderable'>" + _.escape(key) + "</td><td class='html-cell string-cell renderable' data-type=" + sortedObj.typeName + ">" + _.escape(val) + "</td>";
                                         });
-                                        tagValue += stringArr.join(", ");
+                                        tagValue = "<div class='mainAttrTable'><table class='attriTable'><tr><th class='html-cell string-cell renderable'>Name</th><th class='html-cell string-cell renderable'>Value</th>" + stringValue + "</table></div>";
                                     }
                                     return tagValue;
                                 }

dashboardv2/public/js/views/tag/addTagModalView.js

@@ -272,10 +272,10 @@ define(['require',
                     var typeName = Utils.getName(obj, 'typeName');
                     var typeNameValue = that.enumDefCollection.fullCollection.findWhere({ 'name': typeName });
                     if (typeNameValue) {
-                        var str = "<option disabled='disabled'" + (!that.tagModel ? 'selected' : '') + ">-- Select " + typeName + " --</option>";
+                        var str = '<option value=""' + (!that.tagModel ? 'selected' : '') + '>-- Select ' + typeName + " --</option>";
                         var enumValue = typeNameValue.get('elementDefs');
                         _.each(enumValue, function(key, value) {
-                            str += '<option ' + (that.tagModel && key.value === that.tagModel.attributes[name] ? 'selected' : '') + '>' + key.value + '</option>';
+                            str += '<option ' + ((that.tagModel && key.value === that.tagModel.attributes[name]) ? 'selected' : '') + '>' + key.value + '</option>';
                         })
                         that.ui.tagAttribute.append('<div class="form-group"><label>' + name + '</label>' + ' (' + typeName + ')' +
                             '<select class="form-control attributeInputVal attrName" data-key="' + name + '">' + str + '</select></div>');
@@ -286,7 +286,14 @@ define(['require',
                 });
                 that.$('input[data-type="date"]').each(function() {
                     if (!$(this).data('daterangepicker')) {
-                        var dateObj = { "singleDatePicker": true, "showDropdowns": true };
+                        var dateObj = {
+                            "singleDatePicker": true,
+                            "showDropdowns": true,
+                            "timePicker": true,
+                            locale: {
+                                format: 'MM/DD/YYYY h:mm A'
+                            }
+                        };
                         if (that.tagModel) {
                             var formatDate = Number(this.value);
                             dateObj["startDate"] = new Date(formatDate);