Repository: incubator-atlas Updated Branches: refs/heads/master d7ce0a535 -> 71f9c0652
ATLAS-1927: UI updates in rendering of tag attributes Signed-off-by: Madhan Neethiraj <mad...@apache.org> Project: http://git-wip-us.apache.org/repos/asf/incubator-atlas/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-atlas/commit/71f9c065 Tree: http://git-wip-us.apache.org/repos/asf/incubator-atlas/tree/71f9c065 Diff: http://git-wip-us.apache.org/repos/asf/incubator-atlas/diff/71f9c065 Branch: refs/heads/master Commit: 71f9c065225405d188c622a6898686ee5a73817f Parents: d7ce0a5 Author: Kalyani <kalyani.kashi...@freestoneinfotech.com> Authored: Fri Jul 14 15:14:14 2017 +0530 Committer: Madhan Neethiraj <mad...@apache.org> Committed: Tue Jul 18 08:01:20 2017 -0700 ---------------------------------------------------------------------- dashboardv2/public/css/scss/tag.scss | 40 +++++++++++++++++--- .../views/detail_page/DetailPageLayoutView.js | 5 ++- .../js/views/tag/TagDetailTableLayoutView.js | 31 +++++++++------ .../public/js/views/tag/addTagModalView.js | 13 +++++-- 4 files changed, 67 insertions(+), 22 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/71f9c065/dashboardv2/public/css/scss/tag.scss ---------------------------------------------------------------------- diff --git a/dashboardv2/public/css/scss/tag.scss b/dashboardv2/public/css/scss/tag.scss index fc0652b..39bc995 100644 --- a/dashboardv2/public/css/scss/tag.scss +++ b/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 http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/71f9c065/dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js b/dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js index c45755f..56379a4 100644 --- a/dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js +++ b/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); http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/71f9c065/dashboardv2/public/js/views/tag/TagDetailTableLayoutView.js ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/views/tag/TagDetailTableLayoutView.js b/dashboardv2/public/js/views/tag/TagDetailTableLayoutView.js index 45cdd6b..bac8b4b 100644 --- a/dashboardv2/public/js/views/tag/TagDetailTableLayoutView.js +++ b/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; } @@ -248,4 +257,4 @@ define(['require', } }); return TagDetailTableLayoutView; -}); +}); \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/71f9c065/dashboardv2/public/js/views/tag/addTagModalView.js ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/views/tag/addTagModalView.js b/dashboardv2/public/js/views/tag/addTagModalView.js index 97d80bd..e240974 100644 --- a/dashboardv2/public/js/views/tag/addTagModalView.js +++ b/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);
