Skip to content

A
atlas
Commit 15d5b343 by kevalbhatt
Options

ATLAS-3503 : UI: Add classification count table in statistics popup

parent 5ae7fbec
Showing with 154 additions and 40 deletions
dashboardv2/public/css/scss/loader.scss
...@@ -156,7 +156,8 @@ ...@@ -156,7 +156,8 @@
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%); background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background-size: 700px 10px; background-size: 700px 10px;
border-radius: 8px; border-radius: 8px;
outline: 1px #fff solid;
outline-offset: -1px;
} }
@keyframes placeHolderLoader { @keyframes placeHolderLoader {
......
dashboardv2/public/css/scss/table.scss
...@@ -244,8 +244,6 @@ td { ...@@ -244,8 +244,6 @@ td {
height: 20px; height: 20px;
margin: 0px 5px; margin: 0px 5px;
float: left; float: left;
outline: 1px #fff solid;
outline-offset: -1px;
} }
} }
} }
\ No newline at end of file
dashboardv2/public/js/templates/site/Statistics_tmpl.html
...@@ -143,6 +143,33 @@ ...@@ -143,6 +143,33 @@
</div> </div>
</div> </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>
<div class="fontLoader-relative statsLoader show"> <div class="fontLoader-relative statsLoader show">
<i class="fa fa-refresh fa-spin-custom"></i> <i class="fa fa-refresh fa-spin-custom"></i>
......
dashboardv2/public/js/templates/site/entity_tmpl.html
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
--> -->
<thead> <thead>
<tr> <tr>
<th>Entities</th> <th>Entity Type</th>
<th>Active <span data-id="activeEntity"></span></th> <th>Active <span data-id="activeEntity"></span></th>
<th>Deleted <span data-id="deletedEntity"></span></th> <th>Deleted <span data-id="deletedEntity"></span></th>
<th>Shell <span data-id="shellEntity"></span></th> <th>Shell <span data-id="shellEntity"></span></th>
......
dashboardv2/public/js/views/site/Statistics.js
...@@ -44,11 +44,13 @@ define(['require', ...@@ -44,11 +44,13 @@ define(['require',
/** ui selector cache */ /** ui selector cache */
ui: { ui: {
entityHeader: "[data-id='entity'] .count", entityHeader: "[data-id='entity'] .count",
classificationHeader: "[data-id='classification'] .count",
serverCard: "[data-id='server-card']", serverCard: "[data-id='server-card']",
connectionCard: "[data-id='connection-card']", connectionCard: "[data-id='connection-card']",
notificationCard: "[data-id='notification-card']", notificationCard: "[data-id='notification-card']",
statsNotificationTable: "[data-id='stats-notification-table']", statsNotificationTable: "[data-id='stats-notification-table']",
entityCard: "[data-id='entity-card']", entityCard: "[data-id='entity-card']",
classificationCard: "[data-id='classification-card']",
offsetCard: "[data-id='offset-card']", offsetCard: "[data-id='offset-card']",
osCard: "[data-id='os-card']", osCard: "[data-id='os-card']",
runtimeCard: "[data-id='runtime-card']", runtimeCard: "[data-id='runtime-card']",
...@@ -99,6 +101,7 @@ define(['require', ...@@ -99,6 +101,7 @@ define(['require',
that.renderStats({ valueObject: data.general.stats, dataObject: data.general }); that.renderStats({ valueObject: data.general.stats, dataObject: data.general });
that.renderEntities({ data: data }); that.renderEntities({ data: data });
that.renderSystemDeatils({ data: data }); that.renderSystemDeatils({ data: data });
that.renderClassifications({ data: data });
that.$('.statsContainer,.statsNotificationContainer').removeClass('hide'); that.$('.statsContainer,.statsNotificationContainer').removeClass('hide');
that.$('.statsLoader,.statsNotificationLoader').removeClass('show'); that.$('.statsLoader,.statsNotificationLoader').removeClass('show');
if (options && options.update) { if (options && options.update) {
...@@ -129,6 +132,43 @@ define(['require', ...@@ -129,6 +132,43 @@ define(['require',
}); });
return stats; 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) { renderEntities: function(options) {
var that = this, var that = this,
data = options.data, data = options.data,
...@@ -163,6 +203,7 @@ define(['require', ...@@ -163,6 +203,7 @@ define(['require',
} }
}) })
}; };
createEntityData({ createEntityData({
"entityData": activeEntities, "entityData": activeEntities,
"type": "active" "type": "active"
...@@ -178,7 +219,9 @@ define(['require', ...@@ -178,7 +219,9 @@ define(['require',
if (!_.isEmpty(stats)) { if (!_.isEmpty(stats)) {
that.ui.entityCard.html( that.ui.entityCard.html(
EntityTable({ 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) + ")"); that.$('[data-id="activeEntity"]').html("&nbsp;(" + _.numberFormatWithComa(activeEntityCount) + ")");
...@@ -290,21 +333,10 @@ define(['require', ...@@ -290,21 +333,10 @@ define(['require',
systemData = data.system, systemData = data.system,
systemOS = systemData.os || {}, systemOS = systemData.os || {},
systemRuntimeData = systemData.runtime || {}, systemRuntimeData = systemData.runtime || {},
systemMemoryData = systemData.memory || {}, 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;
};
if (!_.isEmpty(systemOS)) { if (!_.isEmpty(systemOS)) {
that.ui.osCard.html( that.ui.osCard.html(
createSystemTable({ that.createTable({
"data": systemOS "data": systemOS
}) })
); );
...@@ -314,7 +346,7 @@ define(['require', ...@@ -314,7 +346,7 @@ define(['require',
var space var space
}) })
that.ui.runtimeCard.html( that.ui.runtimeCard.html(
createSystemTable({ that.createTable({
"data": systemRuntimeData "data": systemRuntimeData
}) })
); );
......
dashboardv3/public/css/scss/loader.scss
...@@ -153,7 +153,8 @@ ...@@ -153,7 +153,8 @@
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%); background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background-size: 700px 10px; background-size: 700px 10px;
border-radius: 8px; border-radius: 8px;
outline: 1px #fff solid;
outline-offset: -1px;
} }
@keyframes placeHolderLoader { @keyframes placeHolderLoader {
......
dashboardv3/public/css/scss/table.scss
...@@ -238,8 +238,6 @@ td { ...@@ -238,8 +238,6 @@ td {
height: 20px; height: 20px;
margin: 0px 5px; margin: 0px 5px;
float: left; float: left;
outline: 1px #fff solid;
outline-offset: -1px;
} }
} }
} }
\ No newline at end of file
dashboardv3/public/js/templates/site/Statistics_tmpl.html
...@@ -144,6 +144,33 @@ ...@@ -144,6 +144,33 @@
</div> </div>
</div> </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>
<div class="fontLoader-relative statsLoader show"> <div class="fontLoader-relative statsLoader show">
<i class="fa fa-refresh fa-spin-custom"></i> <i class="fa fa-refresh fa-spin-custom"></i>
......
dashboardv3/public/js/templates/site/entity_tmpl.html
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
--> -->
<thead> <thead>
<tr> <tr>
<th>Entities</th> <th>Entity Type</th>
<th>Active <span data-id="activeEntity"></span></th> <th>Active <span data-id="activeEntity"></span></th>
<th>Deleted <span data-id="deletedEntity"></span></th> <th>Deleted <span data-id="deletedEntity"></span></th>
<th>Shell <span data-id="shellEntity"></span></th> <th>Shell <span data-id="shellEntity"></span></th>
......
dashboardv3/public/js/views/site/Statistics.js
...@@ -44,11 +44,13 @@ define(['require', ...@@ -44,11 +44,13 @@ define(['require',
/** ui selector cache */ /** ui selector cache */
ui: { ui: {
entityHeader: "[data-id='entity'] .count", entityHeader: "[data-id='entity'] .count",
classificationHeader: "[data-id='classification'] .count",
serverCard: "[data-id='server-card']", serverCard: "[data-id='server-card']",
connectionCard: "[data-id='connection-card']", connectionCard: "[data-id='connection-card']",
notificationCard: "[data-id='notification-card']", notificationCard: "[data-id='notification-card']",
statsNotificationTable: "[data-id='stats-notification-table']", statsNotificationTable: "[data-id='stats-notification-table']",
entityCard: "[data-id='entity-card']", entityCard: "[data-id='entity-card']",
classificationCard: "[data-id='classification-card']",
offsetCard: "[data-id='offset-card']", offsetCard: "[data-id='offset-card']",
osCard: "[data-id='os-card']", osCard: "[data-id='os-card']",
runtimeCard: "[data-id='runtime-card']", runtimeCard: "[data-id='runtime-card']",
...@@ -97,6 +99,7 @@ define(['require', ...@@ -97,6 +99,7 @@ define(['require',
that.renderStats({ valueObject: data.general.stats, dataObject: data.general }); that.renderStats({ valueObject: data.general.stats, dataObject: data.general });
that.renderEntities({ data: data }); that.renderEntities({ data: data });
that.renderSystemDeatils({ data: data }); that.renderSystemDeatils({ data: data });
that.renderClassifications({ data: data });
that.$('.statsContainer,.statsNotificationContainer').removeClass('hide'); that.$('.statsContainer,.statsNotificationContainer').removeClass('hide');
that.$('.statsLoader,.statsNotificationLoader').removeClass('show'); that.$('.statsLoader,.statsNotificationLoader').removeClass('show');
if (options && options.update) { if (options && options.update) {
...@@ -127,6 +130,43 @@ define(['require', ...@@ -127,6 +130,43 @@ define(['require',
}); });
return stats; 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) { renderEntities: function(options) {
var that = this, var that = this,
data = options.data, data = options.data,
...@@ -161,6 +201,7 @@ define(['require', ...@@ -161,6 +201,7 @@ define(['require',
} }
}) })
}; };
createEntityData({ createEntityData({
"entityData": activeEntities, "entityData": activeEntities,
"type": "active" "type": "active"
...@@ -176,7 +217,9 @@ define(['require', ...@@ -176,7 +217,9 @@ define(['require',
if (!_.isEmpty(stats)) { if (!_.isEmpty(stats)) {
that.ui.entityCard.html( that.ui.entityCard.html(
EntityTable({ 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) + ")"); that.$('[data-id="activeEntity"]').html("&nbsp;(" + _.numberFormatWithComa(activeEntityCount) + ")");
...@@ -288,21 +331,10 @@ define(['require', ...@@ -288,21 +331,10 @@ define(['require',
systemData = data.system, systemData = data.system,
systemOS = systemData.os || {}, systemOS = systemData.os || {},
systemRuntimeData = systemData.runtime || {}, systemRuntimeData = systemData.runtime || {},
systemMemoryData = systemData.memory || {}, 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;
};
if (!_.isEmpty(systemOS)) { if (!_.isEmpty(systemOS)) {
that.ui.osCard.html( that.ui.osCard.html(
createSystemTable({ that.createTable({
"data": systemOS "data": systemOS
}) })
); );
...@@ -312,7 +344,7 @@ define(['require', ...@@ -312,7 +344,7 @@ define(['require',
var space var space
}) })
that.ui.runtimeCard.html( that.ui.runtimeCard.html(
createSystemTable({ that.createTable({
"data": systemRuntimeData "data": systemRuntimeData
}) })
); );
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment