Repository: atlas Updated Branches: refs/heads/branch-0.8 250d93217 -> df4f87d09
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/df4f87d0 Tree: http://git-wip-us.apache.org/repos/asf/atlas/tree/df4f87d0 Diff: http://git-wip-us.apache.org/repos/asf/atlas/diff/df4f87d0 Branch: refs/heads/branch-0.8 Commit: df4f87d0956fa5ae3c0097b1abb8ab4dc30df82c Parents: 250d932 Author: kevalbhatt <[email protected]> Authored: Fri Aug 17 18:17:34 2018 +0530 Committer: kevalbhatt <[email protected]> Committed: Mon Aug 27 14:21:30 2018 +0530 ---------------------------------------------------------------------- dashboardv2/public/css/scss/common.scss | 77 ++++++++++++++++++++ dashboardv2/public/css/scss/override.scss | 3 +- .../public/js/utils/CommonViewFunction.js | 56 ++++++++------ dashboardv2/public/js/utils/Utils.js | 35 ++++++++- 4 files changed, 144 insertions(+), 27 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/atlas/blob/df4f87d0/dashboardv2/public/css/scss/common.scss ---------------------------------------------------------------------- diff --git a/dashboardv2/public/css/scss/common.scss b/dashboardv2/public/css/scss/common.scss index fd6c0f0..d4973bb 100644 --- a/dashboardv2/public/css/scss/common.scss +++ b/dashboardv2/public/css/scss/common.scss @@ -56,4 +56,81 @@ } } } +} + +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/df4f87d0/dashboardv2/public/css/scss/override.scss ---------------------------------------------------------------------- diff --git a/dashboardv2/public/css/scss/override.scss b/dashboardv2/public/css/scss/override.scss index f1e2c6b..089393e 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/df4f87d0/dashboardv2/public/js/utils/CommonViewFunction.js ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/utils/CommonViewFunction.js b/dashboardv2/public/js/utils/CommonViewFunction.js index 5f7e024..11c2334 100644 --- a/dashboardv2/public/js/utils/CommonViewFunction.js +++ b/dashboardv2/public/js/utils/CommonViewFunction.js @@ -129,7 +129,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; @@ -139,30 +139,26 @@ 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); + if (_.isObject(extractJSON.extractKey)) { + _.each(extractJSON.extractKey, function(extractKey) { + if (objKey === extractKey) { + newAttributesList[_.escape(objKey)] = value; } - } - } else { - valueOfArray.push('<span>' + _.escape(objKey) + ':' + _.escape(value) + '</span>'); + }); + } else if (_.isString(extractJSON.extractKey) && extractJSON.extractKey === objKey) { + newAttributesList[_.escape(objKey)] = value; } - } - }); + }); + valueOfArray.push(Utils.JSONPrettyPrint(newAttributesList)); + } else { + valueOfArray.push(Utils.JSONPrettyPrint(attributesList)); + } + } if (id && inputOutputField) { var name = Utils.getName(inputOutputField); @@ -229,7 +225,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/df4f87d0/dashboardv2/public/js/utils/Utils.js ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/utils/Utils.js b/dashboardv2/public/js/utils/Utils.js index a43e740..18895c7 100644 --- a/dashboardv2/public/js/utils/Utils.js +++ b/dashboardv2/public/js/utils/Utils.js @@ -664,6 +664,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); @@ -707,8 +731,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
