Repository: atlas Updated Branches: refs/heads/branch-1.0 0f31b466a -> 27be0da52
ATLAS-2724 : UI enhancement for Avro schemas and other JSON-valued attributes Project: http://git-wip-us.apache.org/repos/asf/atlas/repo Commit: http://git-wip-us.apache.org/repos/asf/atlas/commit/27be0da5 Tree: http://git-wip-us.apache.org/repos/asf/atlas/tree/27be0da5 Diff: http://git-wip-us.apache.org/repos/asf/atlas/diff/27be0da5 Branch: refs/heads/branch-1.0 Commit: 27be0da52cef2ed268442d140527d3a00083c3e7 Parents: 0f31b46 Author: kevalbhatt <[email protected]> Authored: Mon Aug 20 16:16:49 2018 +0530 Committer: kevalbhatt <[email protected]> Committed: Fri Aug 31 19:39:13 2018 +0530 ---------------------------------------------------------------------- dashboardv2/public/css/scss/common.scss | 77 ++++++++++++++++++++ dashboardv2/public/css/scss/override.scss | 3 +- .../public/js/utils/CommonViewFunction.js | 58 +++++++++------ dashboardv2/public/js/utils/Utils.js | 33 ++++++++- 4 files changed, 145 insertions(+), 26 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/atlas/blob/27be0da5/dashboardv2/public/css/scss/common.scss ---------------------------------------------------------------------- diff --git a/dashboardv2/public/css/scss/common.scss b/dashboardv2/public/css/scss/common.scss index c6c369b..d137d39 100644 --- a/dashboardv2/public/css/scss/common.scss +++ b/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 http://git-wip-us.apache.org/repos/asf/atlas/blob/27be0da5/dashboardv2/public/css/scss/override.scss ---------------------------------------------------------------------- diff --git a/dashboardv2/public/css/scss/override.scss b/dashboardv2/public/css/scss/override.scss index c9b12bd..ca5d1e8 100644 --- a/dashboardv2/public/css/scss/override.scss +++ b/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; } http://git-wip-us.apache.org/repos/asf/atlas/blob/27be0da5/dashboardv2/public/js/utils/CommonViewFunction.js ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/utils/CommonViewFunction.js b/dashboardv2/public/js/utils/CommonViewFunction.js index 3d051f2..0439177 100644 --- a/dashboardv2/public/js/utils/CommonViewFunction.js +++ b/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>'; } http://git-wip-us.apache.org/repos/asf/atlas/blob/27be0da5/dashboardv2/public/js/utils/Utils.js ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/utils/Utils.js b/dashboardv2/public/js/utils/Utils.js index 75b2f67..f3bcb92 100644 --- a/dashboardv2/public/js/utils/Utils.js +++ b/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, '&').replace(/\\"/g, '"') + .replace(/</g, '<').replace(/>/g, '>') + .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
