From 15d5b34305eb5b048316f1c658b8b910e2a0a188 Mon Sep 17 00:00:00 2001
From: kevalbhatt <kbhatt@apache.org>
Date: Fri, 1 Nov 2019 18:19:57 +0530
Subject: [PATCH] ATLAS-3503 : UI: Add classification count table in statistics popup

---
 dashboardv2/public/css/scss/loader.scss                   |  3 ++-
 dashboardv2/public/css/scss/table.scss                    |  2 --
 dashboardv2/public/js/templates/site/Statistics_tmpl.html | 27 +++++++++++++++++++++++++++
 dashboardv2/public/js/templates/site/entity_tmpl.html     |  2 +-
 dashboardv2/public/js/views/site/Statistics.js            | 62 +++++++++++++++++++++++++++++++++++++++++++++++---------------
 dashboardv3/public/css/scss/loader.scss                   |  3 ++-
 dashboardv3/public/css/scss/table.scss                    |  2 --
 dashboardv3/public/js/templates/site/Statistics_tmpl.html | 27 +++++++++++++++++++++++++++
 dashboardv3/public/js/templates/site/entity_tmpl.html     |  2 +-
 dashboardv3/public/js/views/site/Statistics.js            | 62 +++++++++++++++++++++++++++++++++++++++++++++++---------------
 10 files changed, 154 insertions(+), 38 deletions(-)

diff --git a/dashboardv2/public/css/scss/loader.scss b/dashboardv2/public/css/scss/loader.scss
index cf137fb..1adf9d6 100644
--- a/dashboardv2/public/css/scss/loader.scss
+++ b/dashboardv2/public/css/scss/loader.scss
@@ -156,7 +156,8 @@
     background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
     background-size: 700px 10px;
     border-radius: 8px;
-
+    outline: 1px #fff solid;
+    outline-offset: -1px;
 }
 
 @keyframes placeHolderLoader {
diff --git a/dashboardv2/public/css/scss/table.scss b/dashboardv2/public/css/scss/table.scss
index 4ed47ff..0d32351 100644
--- a/dashboardv2/public/css/scss/table.scss
+++ b/dashboardv2/public/css/scss/table.scss
@@ -244,8 +244,6 @@ td {
             height: 20px;
             margin: 0px 5px;
             float: left;
-            outline: 1px #fff solid;
-            outline-offset: -1px;
         }
     }
 }
\ No newline at end of file
diff --git a/dashboardv2/public/js/templates/site/Statistics_tmpl.html b/dashboardv2/public/js/templates/site/Statistics_tmpl.html
index 62c1846..1b8f49c 100644
--- a/dashboardv2/public/js/templates/site/Statistics_tmpl.html
+++ b/dashboardv2/public/js/templates/site/Statistics_tmpl.html
@@ -143,6 +143,33 @@
             </div>
         </div>
     </div>
+    <div class="panel panel-default custom-panel expand_collapse_panel-icon" data-id="classification">
+        <div class="panel-heading" data-toggle="collapse" href="#classificationCountCollapse" aria-expanded="false">
+            <h4 class="panel-title">
+                <a>Classifications <span class="count">(0)</span></a>
+            </h4>
+            <div class="btn-group pull-left">
+                <button type="button" title="Collapse"><i class="ec-icon fa"></i></button>
+            </div>
+        </div>
+        <div id="classificationCountCollapse" class="panel-collapse collapse">
+            <div class="panel-body">
+                <table class="table stat-table classificationTable">
+                    <thead>
+                        <tr>
+                            <th class="">Name</th>
+                            <th class="">Count <span class="count">(0)</span></th>
+                        </tr>
+                    </thead>
+                    <tbody data-id="classification-card">
+                        <tr class="empty text-center">
+                            <td colspan="3"><span>No records found!</span></td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
 </div>
 <div class="fontLoader-relative statsLoader show">
     <i class="fa fa-refresh fa-spin-custom"></i>
diff --git a/dashboardv2/public/js/templates/site/entity_tmpl.html b/dashboardv2/public/js/templates/site/entity_tmpl.html
index 40bf436..2c7aef5 100644
--- a/dashboardv2/public/js/templates/site/entity_tmpl.html
+++ b/dashboardv2/public/js/templates/site/entity_tmpl.html
@@ -16,7 +16,7 @@
 -->
 <thead>
     <tr>
-        <th>Entities</th>
+        <th>Entity Type</th>
         <th>Active <span data-id="activeEntity"></span></th>
         <th>Deleted <span data-id="deletedEntity"></span></th>
         <th>Shell <span data-id="shellEntity"></span></th>
diff --git a/dashboardv2/public/js/views/site/Statistics.js b/dashboardv2/public/js/views/site/Statistics.js
index a0a66c5..03cec9f 100644
--- a/dashboardv2/public/js/views/site/Statistics.js
+++ b/dashboardv2/public/js/views/site/Statistics.js
@@ -44,11 +44,13 @@ define(['require',
             /** ui selector cache */
             ui: {
                 entityHeader: "[data-id='entity'] .count",
+                classificationHeader: "[data-id='classification'] .count",
                 serverCard: "[data-id='server-card']",
                 connectionCard: "[data-id='connection-card']",
                 notificationCard: "[data-id='notification-card']",
                 statsNotificationTable: "[data-id='stats-notification-table']",
                 entityCard: "[data-id='entity-card']",
+                classificationCard: "[data-id='classification-card']",
                 offsetCard: "[data-id='offset-card']",
                 osCard: "[data-id='os-card']",
                 runtimeCard: "[data-id='runtime-card']",
@@ -99,6 +101,7 @@ define(['require',
                         that.renderStats({ valueObject: data.general.stats, dataObject: data.general });
                         that.renderEntities({ data: data });
                         that.renderSystemDeatils({ data: data });
+                        that.renderClassifications({ data: data });
                         that.$('.statsContainer,.statsNotificationContainer').removeClass('hide');
                         that.$('.statsLoader,.statsNotificationLoader').removeClass('show');
                         if (options && options.update) {
@@ -129,6 +132,43 @@ define(['require',
                 });
                 return stats;
             },
+            createTable: function(obj) {
+                var that = this,
+                    tableBody = '',
+                    data = obj.data;
+                _.each(data, function(value, key, list) {
+                    tableBody += '<tr><td>' + key + '</td><td class="">' + that.getValue({
+                        "value": value
+                    }) + '</td></tr>';
+                });
+                return tableBody;
+
+            },
+            renderClassifications: function(options) {
+                var that = this,
+                    data = options.data,
+                    classificationData = data.tag || {},
+                    tagEntitiesData = classificationData ? classificationData.tagEntities || {} : {},
+                    tagsCount = 0,
+                    newTagEntitiesData = {};
+                _.each(_.sortBy(_.keys(tagEntitiesData), function(o) {
+                    return o.toLocaleLowerCase();
+                }), function(key) {
+                    var val = tagEntitiesData[key];
+                    newTagEntitiesData[key] = val;
+                    tagsCount += val;
+                });
+                tagEntitiesData = newTagEntitiesData;
+
+                if (!_.isEmpty(tagEntitiesData)) {
+                    this.ui.classificationCard.html(
+                        that.createTable({
+                            "data": tagEntitiesData
+                        })
+                    );
+                    this.ui.classificationHeader.html("&nbsp;(" + _.numberFormatWithComa(tagsCount) + ")");
+                }
+            },
             renderEntities: function(options) {
                 var that = this,
                     data = options.data,
@@ -163,6 +203,7 @@ define(['require',
                             }
                         })
                     };
+
                 createEntityData({
                     "entityData": activeEntities,
                     "type": "active"
@@ -178,7 +219,9 @@ define(['require',
                 if (!_.isEmpty(stats)) {
                     that.ui.entityCard.html(
                         EntityTable({
-                            "data": _.pick(stats, (_.keys(stats).sort())),
+                            "data": _.pick(stats, _.sortBy(_.keys(stats), function(o) {
+                                return o.toLocaleLowerCase();
+                            })),
                         })
                     );
                     that.$('[data-id="activeEntity"]').html("&nbsp;(" + _.numberFormatWithComa(activeEntityCount) + ")");
@@ -290,21 +333,10 @@ define(['require',
                     systemData = data.system,
                     systemOS = systemData.os || {},
                     systemRuntimeData = systemData.runtime || {},
-                    systemMemoryData = systemData.memory || {},
-                    createSystemTable = function(obj) {
-                        var tableBody = '',
-                            data = obj.data;
-                        _.each(data, function(value, key, list) {
-                            tableBody += '<tr><td>' + key + '</td><td class="">' + that.getValue({
-                                "value": value
-                            }) + '</td></tr>';
-                        });
-                        return tableBody;
-                    };
-
+                    systemMemoryData = systemData.memory || {};
                 if (!_.isEmpty(systemOS)) {
                     that.ui.osCard.html(
-                        createSystemTable({
+                        that.createTable({
                             "data": systemOS
                         })
                     );
@@ -314,7 +346,7 @@ define(['require',
                         var space
                     })
                     that.ui.runtimeCard.html(
-                        createSystemTable({
+                        that.createTable({
                             "data": systemRuntimeData
                         })
                     );
diff --git a/dashboardv3/public/css/scss/loader.scss b/dashboardv3/public/css/scss/loader.scss
index 09e1d10..6fa552f 100644
--- a/dashboardv3/public/css/scss/loader.scss
+++ b/dashboardv3/public/css/scss/loader.scss
@@ -153,7 +153,8 @@
     background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
     background-size: 700px 10px;
     border-radius: 8px;
-
+    outline: 1px #fff solid;
+    outline-offset: -1px;
 }
 
 @keyframes placeHolderLoader {
diff --git a/dashboardv3/public/css/scss/table.scss b/dashboardv3/public/css/scss/table.scss
index 4010599..73c998d 100644
--- a/dashboardv3/public/css/scss/table.scss
+++ b/dashboardv3/public/css/scss/table.scss
@@ -238,8 +238,6 @@ td {
             height: 20px;
             margin: 0px 5px;
             float: left;
-            outline: 1px #fff solid;
-            outline-offset: -1px;
         }
     }
 }
\ No newline at end of file
diff --git a/dashboardv3/public/js/templates/site/Statistics_tmpl.html b/dashboardv3/public/js/templates/site/Statistics_tmpl.html
index 4f0429d..5c4c372 100644
--- a/dashboardv3/public/js/templates/site/Statistics_tmpl.html
+++ b/dashboardv3/public/js/templates/site/Statistics_tmpl.html
@@ -144,6 +144,33 @@
             </div>
         </div>
     </div>
+    <div class="panel panel-default custom-panel expand_collapse_panel-icon" data-id="classification">
+        <div class="panel-heading" data-toggle="collapse" href="#classificationCountCollapse" aria-expanded="false">
+            <h4 class="panel-title">
+                <a>Classifications <span class="count">(0)</span></a>
+            </h4>
+            <div class="btn-group pull-left">
+                <button type="button" title="Collapse"><i class="ec-icon fa"></i></button>
+            </div>
+        </div>
+        <div id="classificationCountCollapse" class="panel-collapse collapse">
+            <div class="panel-body">
+                <table class="table stat-table classificationTable">
+                    <thead>
+                        <tr>
+                            <th class="">Name</th>
+                            <th class="">Count <span class="count">(0)</span></th>
+                        </tr>
+                    </thead>
+                    <tbody data-id="classification-card">
+                        <tr class="empty text-center">
+                            <td colspan="3"><span>No records found!</span></td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
 </div>
 <div class="fontLoader-relative statsLoader show">
     <i class="fa fa-refresh fa-spin-custom"></i>
diff --git a/dashboardv3/public/js/templates/site/entity_tmpl.html b/dashboardv3/public/js/templates/site/entity_tmpl.html
index 40bf436..2c7aef5 100644
--- a/dashboardv3/public/js/templates/site/entity_tmpl.html
+++ b/dashboardv3/public/js/templates/site/entity_tmpl.html
@@ -16,7 +16,7 @@
 -->
 <thead>
     <tr>
-        <th>Entities</th>
+        <th>Entity Type</th>
         <th>Active <span data-id="activeEntity"></span></th>
         <th>Deleted <span data-id="deletedEntity"></span></th>
         <th>Shell <span data-id="shellEntity"></span></th>
diff --git a/dashboardv3/public/js/views/site/Statistics.js b/dashboardv3/public/js/views/site/Statistics.js
index 379aa32..b3cf21f 100644
--- a/dashboardv3/public/js/views/site/Statistics.js
+++ b/dashboardv3/public/js/views/site/Statistics.js
@@ -44,11 +44,13 @@ define(['require',
             /** ui selector cache */
             ui: {
                 entityHeader: "[data-id='entity'] .count",
+                classificationHeader: "[data-id='classification'] .count",
                 serverCard: "[data-id='server-card']",
                 connectionCard: "[data-id='connection-card']",
                 notificationCard: "[data-id='notification-card']",
                 statsNotificationTable: "[data-id='stats-notification-table']",
                 entityCard: "[data-id='entity-card']",
+                classificationCard: "[data-id='classification-card']",
                 offsetCard: "[data-id='offset-card']",
                 osCard: "[data-id='os-card']",
                 runtimeCard: "[data-id='runtime-card']",
@@ -97,6 +99,7 @@ define(['require',
                         that.renderStats({ valueObject: data.general.stats, dataObject: data.general });
                         that.renderEntities({ data: data });
                         that.renderSystemDeatils({ data: data });
+                        that.renderClassifications({ data: data });
                         that.$('.statsContainer,.statsNotificationContainer').removeClass('hide');
                         that.$('.statsLoader,.statsNotificationLoader').removeClass('show');
                         if (options && options.update) {
@@ -127,6 +130,43 @@ define(['require',
                 });
                 return stats;
             },
+            createTable: function(obj) {
+                var that = this,
+                    tableBody = '',
+                    data = obj.data;
+                _.each(data, function(value, key, list) {
+                    tableBody += '<tr><td>' + key + '</td><td class="">' + that.getValue({
+                        "value": value
+                    }) + '</td></tr>';
+                });
+                return tableBody;
+
+            },
+            renderClassifications: function(options) {
+                var that = this,
+                    data = options.data,
+                    classificationData = data.tag || {},
+                    tagEntitiesData = classificationData ? classificationData.tagEntities || {} : {},
+                    tagsCount = 0,
+                    newTagEntitiesData = {};
+                _.each(_.sortBy(_.keys(tagEntitiesData), function(o) {
+                    return o.toLocaleLowerCase();
+                }), function(key) {
+                    var val = tagEntitiesData[key];
+                    newTagEntitiesData[key] = val;
+                    tagsCount += val;
+                });
+                tagEntitiesData = newTagEntitiesData;
+
+                if (!_.isEmpty(tagEntitiesData)) {
+                    this.ui.classificationCard.html(
+                        that.createTable({
+                            "data": tagEntitiesData
+                        })
+                    );
+                    this.ui.classificationHeader.html("&nbsp;(" + _.numberFormatWithComa(tagsCount) + ")");
+                }
+            },
             renderEntities: function(options) {
                 var that = this,
                     data = options.data,
@@ -161,6 +201,7 @@ define(['require',
                             }
                         })
                     };
+
                 createEntityData({
                     "entityData": activeEntities,
                     "type": "active"
@@ -176,7 +217,9 @@ define(['require',
                 if (!_.isEmpty(stats)) {
                     that.ui.entityCard.html(
                         EntityTable({
-                            "data": _.pick(stats, (_.keys(stats).sort())),
+                            "data": _.pick(stats, _.sortBy(_.keys(stats), function(o) {
+                                return o.toLocaleLowerCase();
+                            })),
                         })
                     );
                     that.$('[data-id="activeEntity"]').html("&nbsp;(" + _.numberFormatWithComa(activeEntityCount) + ")");
@@ -288,21 +331,10 @@ define(['require',
                     systemData = data.system,
                     systemOS = systemData.os || {},
                     systemRuntimeData = systemData.runtime || {},
-                    systemMemoryData = systemData.memory || {},
-                    createSystemTable = function(obj) {
-                        var tableBody = '',
-                            data = obj.data;
-                        _.each(data, function(value, key, list) {
-                            tableBody += '<tr><td>' + key + '</td><td class="">' + that.getValue({
-                                "value": value
-                            }) + '</td></tr>';
-                        });
-                        return tableBody;
-                    };
-
+                    systemMemoryData = systemData.memory || {};
                 if (!_.isEmpty(systemOS)) {
                     that.ui.osCard.html(
-                        createSystemTable({
+                        that.createTable({
                             "data": systemOS
                         })
                     );
@@ -312,7 +344,7 @@ define(['require',
                         var space
                     })
                     that.ui.runtimeCard.html(
-                        createSystemTable({
+                        that.createTable({
                             "data": systemRuntimeData
                         })
                     );
--
libgit2 0.27.1