ATLAS-3146 UI : Toggle N/A values in relationship and property tables.

dashboardv2/public/css/scss/relationship.scss

@@ -22,6 +22,7 @@
     height: 100%;
     width: 100%;
     overflow: hidden;
+    z-index: 1;
 
     .relatioship-link {
         fill: none;

dashboardv2/public/css/scss/table.scss

@@ -41,4 +41,30 @@ tr.empty {
 .table-action-btn {
     position: absolute;
     right: 0px;
+}
+
+.entity-detail-table,
+.relationship-detail-table {
+    position: relative;
+
+    .hide-empty-value {
+        .hide-row {
+            display: none;
+        }
+    }
+
+    .entity-relationship-table-toggle,
+    .entity-detail-table-toggle {
+        position: absolute;
+        right: 0;
+        top: 18px;
+    }
+
+    table {
+
+        th:nth-child(1),
+        td:nth-child(1) {
+            width: 20%;
+        }
+    }
 }
\ No newline at end of file

dashboardv2/public/js/templates/entity/EntityDetailTableLayoutView_tmpl.html

@@ -14,13 +14,23 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 -->
-<table class="table table-quickMenu">
-    <thead>
-        <tr>
-            <th>Key</th>
-            <th>Value</th>
-        </tr>
-    </thead>
-    <tbody data-id="detailValue">
-    </tbody>
-</table>
+<div class="entity-detail-table">
+    <div class="entity-detail-table-toggle">
+        <div class="pretty p-switch p-fill">
+            <input type="checkbox" data-id="noValueToggle" />
+            <div class="state p-primary">
+                <label>Show Empty Values</label>
+            </div>
+        </div>
+    </div>
+    <table class="table table-quickMenu">
+        <thead>
+            <tr>
+                <th>Key</th>
+                <th>Value</th>
+            </tr>
+        </thead>
+        <tbody data-id="detailValue" class="hide-empty-value">
+        </tbody>
+    </table>
+</div>
\ No newline at end of file

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

@@ -46,7 +46,15 @@
         </div>
     </div>
 </div>
-<div>
+<div class="relationship-detail-table">
+    <div class="entity-relationship-table-toggle">
+        <div class="pretty p-switch p-fill">
+            <input type="checkbox" data-id="noValueToggle" />
+            <div class="state p-primary">
+                <label>Show Empty Values</label>
+            </div>
+        </div>
+    </div>
     <table class="table table-quickMenu" data-id="relationshipDetailTable">
         <thead>
             <tr>

dashboardv2/public/js/utils/CommonViewFunction.js

@@ -254,7 +254,9 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum
                 val = _.escape(keyValue);
             }
             if (isTable) {
-                var htmlTag = '<div class="scroll-y">' + getValue(val) + '</div>';
+                var value = getValue(val),
+                    appendClass = (value == "N/A" ? "hide-row" : ""),
+                    htmlTag = '<div class="scroll-y">' + value + '</div>';
                 if (_.isObject(valueObject[key]) && !_.isEmpty(valueObject[key])) {
                     var matchedLinkString = val.match(/href|value-loader\w*/g),
                         matchedJson = val.match(/json-value|json-string\w*/g),
@@ -266,7 +268,7 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum
                         htmlTag = '<pre class="shrink code-block ' + (isMatchJSONStringIsSingle ? 'fixed-height' : '') + '">' + expandCollapseButton + '<code>' + val + '</code></pre>';
                     }
                 }
-                table += '<tr><td>' + (_.escape(key) + listCount) + '</td><td>' + htmlTag + '</td></tr>';
+                table += '<tr class="' + appendClass + '"><td>' + (_.escape(key) + listCount) + '</td><td>' + htmlTag + '</td></tr>';
             } else {
                 table += '<div>' + val + '</div>';
             }

dashboardv2/public/js/utils/Utils.js

@@ -828,5 +828,15 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'utils/Enums',
 
         return hours + ":" + minutes + ":" + seconds + "." + milliseconds;
     }
+    Utils.togglePropertyRelationshipTableEmptyValues = function(object) {
+        var inputSelector = object.inputType,
+            tableEl = object.tableEl;
+        if (inputSelector.prop('checked') == true) {
+            tableEl.removeClass('hide-empty-value');
+        } else {
+            tableEl.addClass('hide-empty-value');
+        }
+
+    }
     return Utils;
 });
\ No newline at end of file

dashboardv2/public/js/views/entity/EntityDetailTableLayoutView.js

@@ -20,8 +20,9 @@ define(['require',
     'backbone',
     'hbs!tmpl/entity/EntityDetailTableLayoutView_tmpl',
     'utils/CommonViewFunction',
-    'models/VEntity'
-], function(require, Backbone, EntityDetailTableLayoutView_tmpl, CommonViewFunction, VEntity) {
+    'models/VEntity',
+    'utils/Utils'
+], function(require, Backbone, EntityDetailTableLayoutView_tmpl, CommonViewFunction, VEntity, Utils) {
     'use strict';
 
     var EntityDetailTableLayoutView = Backbone.Marionette.LayoutView.extend(
@@ -37,10 +38,17 @@ define(['require',
             /** ui selector cache */
             ui: {
                 detailValue: "[data-id='detailValue']",
+                noValueToggle: "[data-id='noValueToggle']"
             },
             /** ui events hash */
             events: function() {
                 var events = {};
+                events["click " + this.ui.noValueToggle] = function() {
+                    Utils.togglePropertyRelationshipTableEmptyValues({
+                        "inputType": this.ui.noValueToggle,
+                        "tableEl": this.ui.detailValue
+                    });
+                };
                 return events;
             },
             /**
@@ -58,6 +66,10 @@ define(['require',
             entityTableGenerate: function() {
                 var table = CommonViewFunction.propertyTable({ scope: this, valueObject: this.entity.attributes, attributeDefs: this.attributeDefs });
                 this.ui.detailValue.append(table);
+                Utils.togglePropertyRelationshipTableEmptyValues({
+                    "inputType": this.ui.noValueToggle,
+                    "tableEl": this.ui.detailValue
+                });
             }
         });
     return EntityDetailTableLayoutView;

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

@@ -49,7 +49,8 @@ define(['require',
                 relationshipSVG: "[data-id='relationshipSVG']",
                 relationshipDetailValue: "[data-id='relationshipDetailValue']",
                 zoomControl: "[data-id='zoomControl']",
-                boxClose: '[data-id="box-close"]'
+                boxClose: '[data-id="box-close"]',
+                noValueToggle: "[data-id='noValueToggle']"
             },
 
             /** ui events hash */
@@ -63,6 +64,12 @@ define(['require',
                 events["change " + this.ui.relationshipViewToggle] = function(e) {
                     this.relationshipViewToggle(e.currentTarget.checked)
                 };
+                events["click " + this.ui.noValueToggle] = function(e) {
+                    Utils.togglePropertyRelationshipTableEmptyValues({
+                        "inputType": this.ui.noValueToggle,
+                        "tableEl": this.ui.relationshipDetailValue
+                    });
+                };
                 return events;
             },
 
@@ -463,6 +470,10 @@ define(['require',
                 this.entityModel = new VEntity({});
                 var table = CommonViewFunction.propertyTable({ scope: this, valueObject: this.entity.relationshipAttributes, attributeDefs: this.attributeDefs });
                 this.ui.relationshipDetailValue.html(table);
+                Utils.togglePropertyRelationshipTableEmptyValues({
+                    "inputType": this.ui.noValueToggle,
+                    "tableEl": this.ui.relationshipDetailValue
+                });
             },
             relationshipViewToggle: function(checked) {
                 this.ui.relationshipDetailTable.toggleClass('visible invisible');