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(" (" + _.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(" (" + _.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(" (" + _.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(" (" + _.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