ATLAS-3076 UI : Relationship Tab improvements.

dashboardv2/public/js/templates/graph/RelationshipLayoutView_tmpl.html

@@ -19,7 +19,7 @@
     <div class="btn-group pull-left">
         <span class="pull-left">Graph</span>
         <label class="switch pull-left">
-            <input type="checkbox" class="switch-input" name="relationshipViewToggle" value="text">
+            <input type="checkbox" checked class="switch-input" name="relationshipViewToggle" value="text">
             <span class="switch-slider"></span>
         </label>
         <span class="pull-left">Table</span>
@@ -29,7 +29,7 @@
         <button type="button" id="zoom_out" class="btn btn-action btn-gray btn-sm lineageZoomButton" title="Zoom Out" data-id="refreshBtn"> <i class="fa fa-search-minus"></i></button>
     </div>
 </div>
-<div class="white-bg no-padding relationship-box" data-id='relationshipSVG'>
+<div class="white-bg no-padding relationship-box invisible" data-id='relationshipSVG'>
     <div class="fontLoader">
         <i class="fa fa-refresh fa-spin-custom"></i>
     </div>
@@ -56,7 +56,7 @@
     </div> -->
 </div>
 <div>
-    <table class="table table-quickMenu" data-id="relationshipDetailTable" style="display: none;">
+    <table class="table table-quickMenu" data-id="relationshipDetailTable">
         <thead>
             <tr>
                 <th>Key</th>

dashboardv2/public/js/utils/CommonViewFunction.js

@@ -227,6 +227,7 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Glob
                 return;
             }
             var keyValue = valueObject[key];
+            var count = _.isArray(keyValue) ? (keyValue.length) : 0;
             var defEntity = _.find(attributeDefs, { name: key });
             if (defEntity && defEntity.typeName) {
                 var defEntityType = defEntity.typeName.toLocaleLowerCase();
@@ -263,7 +264,8 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Glob
                         htmlTag = '<pre class="shrink code-block ' + (isMatchJSONStringIsSingle ? 'fixed-height' : '') + '">' + expandCollapseButton + '<code>' + val + '</code></pre>';
                     }
                 }
-                table += '<tr><td>' + _.escape(key) + '</td><td>' + htmlTag + '</td></tr>';
+                var textToDisplay = count > 0 ? ' (' + getValue(count) + ')' : '';
+                table += '<tr><td>' + _.escape(key) + textToDisplay + '</td><td>' + htmlTag + '</td></tr>';
             } else {
                 table += '<div>' + val + '</div>';
             }

dashboardv2/public/js/views/graph/RelationshipLayoutView.js

@@ -95,7 +95,9 @@ define(['require',
                 }
                 return { nodes: nodes, links: links };
             },
-            onRender: function() {},
+            onRender: function() {
+                this.$el.addClass('auto-height');
+            },
             onShow: function(argument) {
                 if (this.graphData && _.isEmpty(this.graphData.links)) {
                     this.noRelationship();
@@ -458,18 +460,17 @@ define(['require',
             },
             createTable: function() {
                 this.entityModel = new VEntity({});
-                var table = CommonViewFunction.propertyTable({ scope: this, valueObject: this.entity.relationshipAttributes, attributeDefs: this.attributeDefs });
+                var table = CommonViewFunction.propertyTable({ scope: this, valueObject: this.entity.relationshipAttributes, attributeDefs: this.attributeDefs, numberFormat: _.numberFormatWithComa });
                 this.ui.relationshipDetailValue.html(table);
             },
             relationshipViewToggle: function(checked) {
+                this.ui.relationshipDetailTable.toggleClass('visible invisible');
+                this.ui.relationshipSVG.toggleClass('visible invisible');
+
                 if (checked) {
-                    this.ui.relationshipDetailTable.show();
-                    this.ui.relationshipSVG.hide();
                     this.ui.zoomControl.hide();
                     this.$el.addClass('auto-height');
                 } else {
-                    this.ui.relationshipDetailTable.hide();
-                    this.ui.relationshipSVG.show();
                     this.ui.zoomControl.show();
                     this.$el.removeClass('auto-height');
                 }