ATLAS-878 UI: Not showing details of SD, DB and COLUMNS (saqeeb.s via shwethags)

dashboardv2/public/css/scss/main.scss

@@ -120,7 +120,7 @@ a {
 }
 
 hr {
-    border-top: 1px solid #1c1e2a
+    border-top: 1px solid $color_mirage_approx
 }
 
 th {
@@ -172,3 +172,7 @@ ul {
     border: 1px solid $color_jungle_green_approx;
     cursor: pointer;
 }
+.add-seperator {
+    margin-bottom: 10px;
+    border-bottom: 1px solid $color_mirage_approx
+}
\ No newline at end of file

dashboardv2/public/css/scss/override.scss

@@ -87,17 +87,34 @@
     border: 1px #DDDDDD solid;
 }
 
-.select2-container--default .select2-selection--multiple {
-    background-color: $color_white_lilac_approx !important;
-    border: 1px #e8e9ee solid !important;
+.backgrid {
+    td {
+        white-space: normal;
+    }
 }
 
-.select2-container--default.select2-container--focus .select2-selection--multiple {
-    border-color: #8fa5b1 !important;
+.select2-container--default {
+    .select2-selection--multiple {
+        background-color: $color_white_lilac_approx !important;
+        border: 1px $color_mystic_approx solid !important;
+    }
+    .select2-selection--single {
+        .select2-selection__arrow {
+            height: 34px;
+        }
+        .select2-selection__rendered {
+            line-height: 32px;
+            font-size: 14px;
+        }
+    }
+    &.select2-container--focus .select2-selection--multiple {
+        border-color: $color_bali_hai_approx !important;
+    }
 }
 
-.backgrid {
-    td {
-        white-space: normal;
+.select2-container .select2-selection--single {
+    height: 34px;
+    .select2-selection__rendered {
+        padding-left: 12px;
     }
 }

dashboardv2/public/js/templates/tag/TagAttributeDetailLayoutView_tmpl.html

@@ -17,14 +17,7 @@
 <div class="page-title clearfix">
     <h1><span data-id="title"></span></h1>
     <button data-id="editButton" class="btn btn-default pull-right editbutton" id="editText"><i class="fa fa-pencil"></i></button>
-    <p class="sub-title" data-id="description">Description</p>
-    <div data-id="editBox" style="margin-bottom:10px;  display:none">
-        <textarea class="well well-sm col-sm-12" data-id="descriptionTextArea"></textarea>
-        <div class="clearfix" align="right">
-            <button class="btn btn-atlas cancel" data-id="cancelButton">Cancel</button>
-            <button class="btn btn-atlas ok" data-id="publishButton">Publish</button>
-        </div>
-    </div>
+    <p class="sub-title" data-id="description"></p>
     <div data-id="showAttribute">
     </div>
     <div class="dropdown addTag-dropdown" data-id="addTagListBtn">

dashboardv2/public/js/templates/tag/TagLayoutView_tmpl.html

@@ -14,12 +14,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 -->
-<div class="clearfix">
+<div class="clearfix add-seperator">
     <button class="btn btn-atlasAction btn-atlas pull-left" data-id="createTag"><i class="fa fa-plus"></i> Create Tag</button>
-    <button class="btn btn-atlasAction btn-atlas pull-right" data-id="refreshTag" onclick="this.blur();"><i class="fa fa-refresh"></i> Refresh</button>
+    <button class="btn btn-atlasAction btn-atlas pull-right" title="Refresh" data-id="refreshTag" onclick="this.blur();"><i class="fa fa-refresh"></i></button>
 </div>
-<!--     <a href="javascript:void(0)" data-id="createTag"><i class="fa fa-plus"></i> Create Tag</a></div> -->
-<hr>
-<input type="text" class="form-control" data-id="offlineSearchTag" placeholder="Search Tags...">
+<input type="text" class="form-control" data-id="offlineSearchTag" placeholder="Search Tags">
 <ul class="tag-tree" data-id="tagsParent">
 </ul>

dashboardv2/public/js/templates/tag/createTagLayoutView_tmpl.html

@@ -17,12 +17,19 @@
 <form name="tagDefinitionform" class="css-form">
     <!-- <h4 style="margin-bottom:30px"></h4> -->
     <div class="form-group">
+        {{#if create}}
         <input class="form-control row-margin-bottom" data-id="tagName" placeholder="Name(required)" autofocus>
         </input>
-        <input class="form-control row-margin-bottom" data-id="description" placeholder="Description">
+        {{else}}
+        <h4><span data-id="title"></span></h4>
         </input>
+        {{/if}}
+        <input class="form-control row-margin-bottom" data-id="description" value="{{description}}" placeholder="Description">
+        </input>
+        {{#if create}}
         <span class="row-margin-bottom">Select tags to inherit attributes(optional)</span>
         <p class="attributeText">Attributes define additional properties for the tag</p>
         <select class="form-control tagList" data-id="parentTag" multiple="multiple"></select>
+        {{/if}}
     </div>
 </form>

dashboardv2/public/js/utils/CommonViewFunction.js

@@ -100,11 +100,21 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages'], function(r
                         var value = "";
                         if (data.definition.values.name) {
                             value = data.definition.values.name;
+                        }
+                        var id = "";
+                        if (data.definition.id) {
+                            if (_.isObject(data.definition.id) && data.definition.id.id) {
+                                id = data.definition.id.id;
+                            } else {
+                                id = data.definition.id;
+                            }
+                        }
+                        if (value.length > 1) {
+                            scope.$('td div[data-id="' + id + '"]').html('<a href="#!/detailPage/' + id + '">' + value + '</a>');
                         } else {
-                            value = data.GUID;
+                            scope.$('td div[data-id="' + id + '"]').html('<a href="#!/detailPage/' + id + '">' + id + '</a>');
                         }
 
-                        scope.$('td div[data-id="' + data.GUID + '"]').html('<a href="#!/detailPage/' + data.GUID + '">' + value + '</a>');
                     },
                     error: function(error, data, status) {},
                     complete: function() {}
@@ -123,8 +133,17 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages'], function(r
                         id = inputOutputField.id;
                     }
                     if (id) {
-                        fetchInputOutputValue(id);
-                        subLink += '<div data-id="' + id + '"></div>';
+                        if (inputOutputField.values) {
+                            if (inputOutputField.values.name) {
+                                subLink += '<div><a href="#!/detailPage/' + id + '">' + inputOutputField.values.name + '</a><div>'
+                            } else {
+                                subLink += '<a href="#!/detailPage/' + id + '">' + id + '</a>'
+                            }
+                        } else {
+                            fetchInputOutputValue(id);
+                            subLink += '<div data-id="' + id + '"></div>';
+                        }
+
                     } else {
                         subLink += '<div></div>';
                     }
@@ -138,8 +157,16 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages'], function(r
                     id = keyValue.id;
                 }
                 if (id) {
-                    fetchInputOutputValue(id);
-                    table += '<tr><td>' + key + '</td><td><div data-id="' + id + '"></div></td></tr>';
+                    if (keyValue.values) {
+                        if (keyValue.values.name) {
+                            table += '<tr><td>' + key + '</td><td><div><a href="#!/detailPage/' + id + '">' + keyValue.values.name + '</a><div></td></tr>';
+                        } else {
+                            table += '<tr><td>' + key + '</td><td><div><a href="#!/detailPage/' + id + '">' + id + '</a><div></td></tr>';
+                        }
+                    } else {
+                        fetchInputOutputValue(id);
+                        table += '<tr><td>' + key + '</td><td><div data-id="' + id + '"></div></td></tr>';
+                    }
                 } else {
                     var stringArr = [];
                     _.each(keyValue, function(val, key) {

dashboardv2/public/js/views/audit/AuditTableLayoutView.js

@@ -121,9 +121,9 @@ define(['require',
                             fromRaw: function(rawValue, model) {
                                 that.detailBtnDisable = false;
                                 if (Globals.auditAction[rawValue]) {
-                                    return Globals.auditAction[rawValue]
+                                    return Globals.auditAction[rawValue];
                                 } else {
-                                    return rawValue
+                                    return rawValue;
                                 }
                             }
                         })

dashboardv2/public/js/views/business_catalog/BusinessCatalogHeader.js

@@ -73,7 +73,7 @@ define(['require',
                         t.push({
                             value: x[v],
                             href: href
-                        })
+                        });
                     };
                 }
                 this.value = t;

dashboardv2/public/js/views/search/SearchLayoutView.js

@@ -131,9 +131,9 @@ define(['require',
                          });*/
                     }
                     if (this.value.dslChecked == "true") {
-                        this.ui.searchType.prop("checked", true).trigger("change")
+                        this.ui.searchType.prop("checked", true).trigger("change");
                     } else {
-                        this.ui.searchType.prop("checked", false).trigger("change")
+                        this.ui.searchType.prop("checked", false).trigger("change");
                     }
                 }
                 this.bindEvents(arr);

dashboardv2/public/js/views/tag/CreateTagLayoutView.js

@@ -29,15 +29,22 @@ define(['require',
 
             template: CreateTagLayoutViewTmpl,
 
+            templateHelpers: function() {
+                return {
+                    create: this.create,
+                    description: this.description
+                };
+            },
+
             /** Layout sub regions */
             regions: {},
 
             /** ui selector cache */
             ui: {
-
                 tagName: "[data-id='tagName']",
                 parentTag: "[data-id='parentTag']",
-                description: "[data-id='description']"
+                description: "[data-id='description']",
+                title: "[data-id='title']"
             },
             /** ui events hash */
             events: function() {
@@ -49,19 +56,21 @@ define(['require',
              * @constructs
              */
             initialize: function(options) {
-                _.extend(this, _.pick(options, 'tagCollection'));
-                this.bindEvents();
-            },
-            bindEvents: function() {
-                // this.listenTo(this.tagCollection, 'reset', function() {
-                //     this.tagCollectionList();
-                // }, this);
+                _.extend(this, _.pick(options, 'tagCollection', 'tag'));
+                if (this.tagCollection.first().get('traitTypes')) {
+                    this.description = this.tagCollection.first().get('traitTypes')[0].typeDescription;
+                } else {
+                    this.create = true;
+                }
             },
+            bindEvents: function() {},
             onRender: function() {
-                //this.fetchCollection();
-                this.tagCollectionList();
+                if (this.create) {
+                    this.tagCollectionList();
+                } else {
+                    this.ui.title.html('<span>' + this.tag + '</span>');
+                }
             },
-
             tagCollectionList: function() {
                 this.ui.parentTag.empty();
                 var str = '';

dashboardv2/public/js/views/tag/TagAttributeDetailLayoutView.js

@@ -52,21 +52,10 @@ define(['require',
             /** ui events hash */
             events: function() {
                 var events = {};
-                events["click " + this.ui.editButton] = function() {
-                    this.ui.editButton.hide();
-                    this.ui.description.hide();
-                    this.ui.editBox.show();
-                    this.ui.descriptionTextArea.focus();
-                    this.ui.publishButton.prop('disabled', true);
-                    if (this.ui.description.text().length) {
-                        this.ui.descriptionTextArea.val(this.ui.description.text());
-                    }
-                };
-                events["keyup " + this.ui.descriptionTextArea] = 'textAreaChangeEvent';
                 events["click " + this.ui.cancelButton] = 'onCancelButtonClick';
                 events["click " + this.ui.addAttrBtn] = 'onClickAddAttribute';
                 events["click " + this.ui.addTagListBtn] = 'onClickAddTagBtn';
-                events["click " + this.ui.publishButton] = 'onPublishClick';
+                events["click " + this.ui.editButton] = 'onEditButton';
                 return events;
             },
             /**
@@ -173,19 +162,44 @@ define(['require',
                 this.ui.editButton.show();
                 this.ui.editBox.hide();
             },
-            textAreaChangeEvent: function() {
-                if (this.tagCollection.first().get('traitTypes')[0].typeDescription == this.ui.descriptionTextArea.val()) {
-                    this.ui.publishButton.prop('disabled', true);
+            textAreaChangeEvent: function(view, modal) {
+                if (view.tagCollection.first().get('traitTypes')[0].typeDescription == view.ui.description.val()) {
+                    modal.$el.find('button.ok').prop('disabled', true);
                 } else {
-                    this.ui.publishButton.prop('disabled', false);
+                    modal.$el.find('button.ok').prop('disabled', false);
                 }
             },
-            onPublishClick: function() {
-                this.tagCollection.first().get('traitTypes')[0].typeDescription = this.ui.descriptionTextArea.val();
+            onPublishClick: function(view) {
+                view.tagCollection.first().get('traitTypes')[0].typeDescription = view.ui.description.val();
                 this.onSaveButton(this.tagCollection.first().toJSON(), Messages.updateTagDescriptionMessage);
                 this.ui.description.show();
-                this.ui.editButton.show();
-                this.ui.editBox.hide();
+            },
+            onEditButton: function(e) {
+                var that = this;
+                $(e.currentTarget).blur();
+                require([
+                    'views/tag/CreateTagLayoutView',
+                    'modules/Modal'
+                ], function(CreateTagLayoutView, Modal) {
+                    var view = new CreateTagLayoutView({ 'tagCollection': that.tagCollection, 'tag': that.tag });
+                    var modal = new Modal({
+                        title: 'Edit Tag',
+                        content: view,
+                        cancelText: "Cancel",
+                        okText: 'Save',
+                        allowCancel: true,
+                    }).open();
+                    view.ui.description.on('keyup', function(e) {
+                        that.textAreaChangeEvent(view, modal);
+                    });
+                    modal.$el.find('button.ok').prop('disabled', true);
+                    modal.on('ok', function() {
+                        that.onPublishClick(view);
+                    });
+                    modal.on('closeModal', function() {
+                        modal.trigger('cancel');
+                    });
+                });
             }
         });
     return TagAttributeDetailLayoutView;

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

@@ -152,7 +152,7 @@ define(['require',
                             sortable: false,
                             formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
                                 fromRaw: function(rawValue, model) {
-                                    return '<a href="javascript:void(0)"><i class="fa fa-trash" data-id="delete" data-name="' + model.get('typeName') + '"></i></a>'
+                                    return '<a href="javascript:void(0)"><i class="fa fa-trash" data-id="delete" data-name="' + model.get('typeName') + '"></i></a>';
                                 }
                             })
                         },

release-log.txt

@@ -22,6 +22,7 @@ ATLAS-409 Atlas will not import avro tables with schema read from a file (dosset
 ATLAS-379 Create sqoop and falcon metadata addons (venkatnrangan,bvellanki,sowmyaramesh via shwethags)
 
 ALL CHANGES:
+ATLAS-878 UI: Not showing details of SD, DB and COLUMNS (saqeeb.s via shwethags)
 ATLAS-853 User's name to be mentioned in the top user drop down (saqeeb.s via shwethags)
 ATLAS-867 Excessive logs: default log level should be set to 'info'; currently it is 'debug' (svimal2106 via sumasai )
 ATLAS-870 Add search feature while associating Tags / Terms with entity. (Kalyanikashikar via yhemanth)