ATLAS-2724 : UI enhancement for Avro schemas and other JSON-valued attributes

dashboardv2/public/css/scss/common.scss

@@ -78,4 +78,81 @@
     .details-backbutton {
         display: block !important;
     }
+}
+
+pre {
+    background-color: ghostwhite;
+    border: 1px solid silver;
+    padding: 10px;
+    white-space: -moz-pre-wrap;
+    /* Mozilla, supported since 1999 */
+    white-space: -pre-wrap;
+    /* Opera */
+    white-space: -o-pre-wrap;
+    /* Opera */
+    white-space: pre-wrap;
+    /* CSS3 - Text module (Candidate Recommendation) http://www.w3.org/TR/css3-text/#white-space */
+    word-wrap: break-word;
+    /* IE 5.5+ */
+    &.code-block {
+        code {
+            position: relative;
+            max-height: 400px;
+            display: block;
+            overflow: auto;
+        }
+        position: relative;
+        overflow: hidden;
+        &.shrink {
+            height: 40px;
+            white-space: -moz-pre-wrap;
+            /* Mozilla, supported since 1999 */
+            white-space: -pre-wrap;
+            /* Opera */
+            white-space: -o-pre-wrap;
+            /* Opera */
+            white-space: pre-wrap;
+            /* CSS3 - Text module (Candidate Recommendation) http://www.w3.org/TR/css3-text/#white-space */
+            word-wrap: break-word;
+            /* IE 5.5+ */
+            code {
+                height: 40px;
+            }
+            &.fixed-height {
+                height: 75px;
+                code {
+                    height: 54px;
+                }
+            }
+            &.medium-height {
+                height: 100px;
+            }
+            .expand-collapse-button {
+                i:before {
+                    content: "\f107";
+                }
+            }
+        }
+        .expand-collapse-button {
+            position: absolute;
+            right: 3px;
+            top: 4px;
+            z-index: 1;
+            i:before {
+                content: "\f106";
+            }
+        }
+        .json-key {
+            color: brown;
+        }
+        .json-value {
+            color: navy;
+        }
+        .json-string {
+            color: olive;
+        }
+    }
+    code {
+        font-family: monospace;
+    }
 }
\ No newline at end of file

dashboardv2/public/css/scss/override.scss

@@ -102,7 +102,8 @@
 }
 
 td {
-    div.scroll-y {
+    div.scroll-y,
+    pre.scroll-y {
         max-height: 200px;
         overflow-y: auto;
     }

dashboardv2/public/js/utils/CommonViewFunction.js

@@ -134,7 +134,7 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum
                     if (_.isString(inputOutputField) || _.isBoolean(inputOutputField) || _.isNumber(inputOutputField)) {
                         var tempVarfor$check = inputOutputField.toString();
                         if (tempVarfor$check.indexOf("$") == -1) {
-                            valueOfArray.push('<span>' + _.escape(inputOutputField) + '</span>');
+                            valueOfArray.push('<span class="json-string">' + _.escape(inputOutputField) + '</span>');
                         }
                     } else if (_.isObject(inputOutputField) && !id) {
                         var attributesList = inputOutputField;
@@ -144,30 +144,28 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum
                                 attributesList = attributesList.attributes;
                             }
                         }
-                        _.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));
-                                        }
+
+                        if (extractJSON && extractJSON.extractKey) {
+                            var newAttributesList = {};
+                            _.each(attributesList, function(objValue, objKey) {
+                                var value = _.isObject(objValue) ? objValue : _.escape(objValue),
+                                    tempVarfor$check = objKey.toString();
+                                if (tempVarfor$check.indexOf("$") == -1) {
+                                    if (_.isObject(extractJSON.extractKey)) {
+                                        _.each(extractJSON.extractKey, function(extractKey) {
+                                            if (objKey === extractKey) {
+                                                newAttributesList[_.escape(objKey)] = value;
+                                            }
+                                        });
+                                    } else if (_.isString(extractJSON.extractKey) && extractJSON.extractKey === objKey) {
+                                        newAttributesList[_.escape(objKey)] = value;
                                     }
-                                } else {
-                                    valueOfArray.push('<span>' + _.escape(objKey) + ':' + _.escape(value) + '</span>');
                                 }
-                            }
-                        });
+                            });
+                            valueOfArray.push(Utils.JSONPrettyPrint(newAttributesList));
+                        } else {
+                            valueOfArray.push(Utils.JSONPrettyPrint(attributesList));
+                        }
                     }
                     if (id && inputOutputField) {
                         var name = Utils.getName(inputOutputField);
@@ -232,7 +230,19 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum
                 val = _.escape(keyValue);
             }
             if (isTable) {
-                table += '<tr><td>' + _.escape(key) + '</td><td><div ' + (_.isObject(valueObject[key]) ? 'class="scroll-y"' : '') + '>' + val + '</div></td></tr>';
+                var htmlTag = '<div class="scroll-y">' + val + '</div>';
+                if (_.isObject(valueObject[key])) {
+                    var matchedLinkString = val.match(/href|value-loader\w*/g),
+                        matchedJson = val.match(/json-value|json-string\w*/g),
+                        isMatchLinkStringIsSingle = matchedLinkString && matchedLinkString.length == 1,
+                        isMatchJSONStringIsSingle = matchedJson && matchedJson.length == 1,
+                        expandCollapseButton = "";
+                    if ((matchedJson && !isMatchJSONStringIsSingle) || (matchedLinkString && !isMatchLinkStringIsSingle)) {
+                        var expandCollapseButton = '<button class="expand-collapse-button"><i class="fa"></i></button>'
+                    }
+                    var htmlTag = '<pre class="shrink code-block ' + (isMatchJSONStringIsSingle ? 'fixed-height' : '') + '">' + expandCollapseButton + '<code>' + val + '</code></pre>';
+                }
+                table += '<tr><td>' + _.escape(key) + '</td><td>' + htmlTag + '</td></tr>';
             } else {
                 table += '<div>' + val + '</div>';
             }

dashboardv2/public/js/utils/Utils.js

@@ -682,6 +682,30 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'utils/Enums',
         var regexp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/
         return regexp.test(url);
     }
+
+    Utils.JSONPrettyPrint = function(obj) {
+        var replacer = function(match, pIndent, pKey, pVal, pEnd) {
+                var key = '<span class=json-key>';
+                var val = '<span class=json-value>';
+                var str = '<span class=json-string>';
+                var r = pIndent || '';
+                if (pKey)
+                    r = r + key + pKey.replace(/[": ]/g, '') + '</span>: ';
+                if (pVal)
+                    r = r + (pVal[0] == '"' ? str : val) + pVal + '</span>';
+                return r + (pEnd || '');
+            },
+            jsonLine = /^( *)("[\w]+": )?("[^"]*"|[\w.+-]*)?([,[{])?$/mg;
+        if (obj && _.isObject(obj)) {
+            return JSON.stringify(obj, null, 3)
+                .replace(/&/g, '&amp;').replace(/\\"/g, '&quot;')
+                .replace(/</g, '&lt;').replace(/>/g, '&gt;')
+                .replace(jsonLine, replacer);
+        } else {
+            return {};
+        }
+    };
+
     $.fn.toggleAttribute = function(attributeName, firstString, secondString) {
         if (this.attr(attributeName) == firstString) {
             this.attr(attributeName, secondString);
@@ -725,8 +749,15 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'utils/Enums',
             $('body').removeAttr("style");
             $(this).trigger('fullscreen_done', [$(this).parents('.panel')]);
         }
+    });
 
-
+    $('body').on('click', 'pre.code-block .expand-collapse-button', function(e) {
+        var $el = $(this).parents('.code-block');
+        if ($el.hasClass('shrink')) {
+            $el.removeClass('shrink');
+        } else {
+            $el.addClass('shrink');
+        }
     });
     return Utils;
 });
\ No newline at end of file