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 @@
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 {
......
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
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>
......
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>
......
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
})
);
......
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 {
......
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
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>
......
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>
......
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
})
);
......
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