Commit 2af5eede by kevalbhatt Committed by Madhan Neethiraj

ATLAS-3138 : UI : Stats popup table layout improve for better readability

parent 9c9eed27
...@@ -24,16 +24,19 @@ ...@@ -24,16 +24,19 @@
color: $color_jungle_green_approx; color: $color_jungle_green_approx;
background: $white; background: $white;
border-color: $color_jungle_green_approx; border-color: $color_jungle_green_approx;
button { button {
color: $color_jungle_green_approx; color: $color_jungle_green_approx;
background: $white; background: $white;
border: none; border: none;
} }
.panel-title { .panel-title {
font-weight: bold; font-weight: bold;
padding-top: 8px; padding-top: 8px;
} }
} }
.nav-tabs { .nav-tabs {
>li { >li {
&.active { &.active {
...@@ -41,6 +44,7 @@ ...@@ -41,6 +44,7 @@
color: $color_jungle_green_approx; color: $color_jungle_green_approx;
} }
} }
>a { >a {
color: $black; color: $black;
} }
...@@ -51,8 +55,9 @@ ...@@ -51,8 +55,9 @@
.panel-fullscreen { .panel-fullscreen {
.panel-body { .panel-body {
//overflow: hidden; //overflow: hidden;
height: calc(100% - 46px)!important; height: calc(100% - 46px) !important;
} }
.ui-resizable-handle { .ui-resizable-handle {
display: none !important; display: none !important;
} }
...@@ -72,10 +77,47 @@ ...@@ -72,10 +77,47 @@
&>div { &>div {
position: relative; position: relative;
} }
&.active { &.active {
padding: 20px 10px 0px 10px; padding: 20px 10px 0px 10px;
min-height: 50px; min-height: 50px;
} }
} }
} }
}
.panel-fullscreen {
position: fixed;
height: 100%;
top: 0px;
bottom: 0;
left: 0;
width: 100%;
right: 0;
z-index: 999;
}
.panel.expand_collapse_panel-icon {
.panel-heading {
.panel-title {
display: inline-block;
}
i.ec-icon:before {
content: "\f078"
}
&.collapsed,
&[aria-expanded="false"] {
i.ec-icon:before {
content: "\f078"
}
}
&[aria-expanded="true"] {
i.ec-icon:before {
content: "\f077"
}
}
}
} }
\ No newline at end of file
/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.server-stats-container {
.connection-status {
height: 10px;
width: 10px;
border-radius: 50%;
display: inline-block;
&.connected {
background-color: #4CAF50;
}
&.not-connected {
background-color: #f44336;
}
}
.notification-card {
padding-top: 5px;
}
.card-container {
&.panel {
&.panel-primary {
border: 1px solid #ddd;
padding: 5px;
}
}
&.panel-primary>.panel-heading {
color: #686868;
background-color: #fff;
font-size: 14px;
font-weight: bold;
}
}
.panel-group {
.panel {
padding: 5px;
}
}
.panel {
&.panel-default {
padding: 5px;
}
.panel-body {
.col-sm-6,
.col-sm-12 {
padding: 5px;
.panel-heading {
padding: 5px 0 0 15px;
}
}
}
}
.table {
&.stat-table {
&.notification-table {
&.table-striped>tbody>tr:nth-of-type(odd) {
background-color: $color_white_lilac_approx;
}
tr {
th:not(:first-child),
td:not(:first-child) {
text-align: right;
}
}
}
}
}
.entityTable {
&.table {
tr {
th:not(:first-child),
td:not(:first-child) {
width: 33%;
text-align: right;
}
}
}
}
}
\ No newline at end of file
...@@ -34,4 +34,5 @@ ...@@ -34,4 +34,5 @@
@import "profile-table.scss"; @import "profile-table.scss";
@import "glossary.scss"; @import "glossary.scss";
@import "wizard.scss"; @import "wizard.scss";
@import "stats.scss";
@import "override.scss"; @import "override.scss";
\ No newline at end of file
...@@ -36,4 +36,9 @@ tr.empty { ...@@ -36,4 +36,9 @@ tr.empty {
} }
} }
} }
}
.table-action-btn {
position: absolute;
right: 0px;
} }
\ No newline at end of file
...@@ -272,43 +272,6 @@ hr[size="10"] { ...@@ -272,43 +272,6 @@ hr[size="10"] {
} }
} }
.panel-fullscreen {
position: fixed;
height: 100%;
top: 0px;
bottom: 0;
left: 0;
width: 100%;
right: 0;
z-index: 999;
}
.panel.expand_collapse_panel-icon {
.panel-heading {
.panel-title {
display: inline-block;
}
i.ec-icon:before {
content: "\f078"
}
&.collapsed,
&[aria-expanded="false"] {
i.ec-icon:before {
content: "\f078"
}
}
&[aria-expanded="true"] {
i.ec-icon:before {
content: "\f077"
}
}
}
}
.no-padding { .no-padding {
padding: 0px !important; padding: 0px !important;
} }
...@@ -432,11 +395,6 @@ hr[size="10"] { ...@@ -432,11 +395,6 @@ hr[size="10"] {
} }
} }
.table-action-btn {
position: absolute;
right: 0px;
}
.entity-icon-box { .entity-icon-box {
display: inline-block; display: inline-block;
background: #cee0fa; background: #cee0fa;
...@@ -452,89 +410,4 @@ hr[size="10"] { ...@@ -452,89 +410,4 @@ hr[size="10"] {
img { img {
height: 50px; height: 50px;
} }
}
.server-stats-container {
.connection-status {
height: 10px;
width: 10px;
border-radius: 50%;
display: inline-block;
&.connected {
background-color: #4CAF50;
}
&.not-connected {
background-color: #f44336;
}
}
.notification-card {
padding-top: 5px;
}
.card-container {
&.panel {
&.panel-primary {
border: 1px solid #ddd;
padding: 5px;
}
}
&.panel-primary>.panel-heading {
color: #686868;
background-color: #fff;
font-size: 14px;
font-weight: bold;
}
}
.panel-group {
.panel {
padding: 5px;
}
}
.panel {
&.panel-default {
padding: 5px;
}
.panel-body {
.col-sm-6,
.col-sm-12 {
padding: 5px;
.panel-heading {
padding: 5px 0 0 15px;
}
}
}
}
.table {
&.stat-table {
&.notification-table {
&.table-striped>tbody>tr:nth-of-type(odd) {
background-color: $color_white_lilac_approx;
}
tr {
th:not(:first-child),
td:not(:first-child) {
text-align: right;
}
}
}
}
}
} }
\ No newline at end of file
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
<tr> <tr>
<td>{{{this.label}}}</td> <td>{{{this.label}}}</td>
{{#each ../tableHeader}} {{#each ../tableHeader}}
<td>{{callmyfunction ../../getValue ../this this}}</td> <td>{{callmyfunction ../../getTmplValue ../this this}}</td>
{{/each }} {{/each }}
</tr> </tr>
{{/each}} {{/each}}
......
...@@ -15,10 +15,10 @@ ...@@ -15,10 +15,10 @@
* limitations under the License. * limitations under the License.
--> -->
<div class="panel-group server-stats-container statsContainer hide" id="accordion"> <div class="panel-group server-stats-container statsContainer hide" id="accordion">
<div class="panel panel-default expand_collapse_panel-icon" data-id="entityActive"> <div class="panel panel-default expand_collapse_panel-icon" data-id="entity">
<div class="panel-heading" data-toggle="collapse" href="#collapse1" aria-expanded="true"> <div class="panel-heading" data-toggle="collapse" href="#collapse1" aria-expanded="true">
<h4 class="panel-title"> <h4 class="panel-title">
<a>Active Entities <span class="count">(0)</span></a> <a>Entities <span class="count">(0)</span></a>
</h4> </h4>
<div class="btn-group pull-right"> <div class="btn-group pull-right">
<button type="button" title="Collapse"><i class="ec-icon fa"></i></button> <button type="button" title="Collapse"><i class="ec-icon fa"></i></button>
...@@ -26,45 +26,18 @@ ...@@ -26,45 +26,18 @@
</div> </div>
<div id="collapse1" class="panel-collapse collapse in"> <div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body"> <div class="panel-body">
<table class="table stat-table"> <table class="table stat-table entityTable" data-id="entity-card">
<thead>
<tr>
<th>Entity</th>
<th>Count</th>
</tr>
</thead>
<tbody> <tbody>
</tbody> <tr class="empty text-center">
</table> <td colspan="3"><span>No records found!</span></td>
</div>
</div>
</div>
<div class="panel panel-default expand_collapse_panel-icon" data-id="entityDelete">
<div class="panel-heading" data-toggle="collapse" href="#collapse2">
<h4 class="panel-title">
<a>Deleted Entities <span class="count">(0)</span></a>
</h4>
<div class="btn-group pull-right">
<button type="button" title="Collapse"><i class="ec-icon fa"></i></button>
</div>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<table class="table stat-table">
<thead>
<tr>
<th>Entity</th>
<th>Count</th>
</tr> </tr>
</thead>
<tbody>
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
</div> </div>
<div class="panel panel-default expand_collapse_panel-icon" data-id="stats"> <div class="panel panel-default expand_collapse_panel-icon" data-id="stats">
<div class="panel-heading" data-toggle="collapse" href="#collapse3"> <div class="panel-heading" data-toggle="collapse" href="#collapse3" aria-expanded="true">
<h4 class="panel-title"> <h4 class="panel-title">
<a>Server Statistics </a> <a>Server Statistics </a>
</h4> </h4>
...@@ -72,7 +45,7 @@ ...@@ -72,7 +45,7 @@
<button type="button" title="Collapse"><i class="ec-icon fa"></i></button> <button type="button" title="Collapse"><i class="ec-icon fa"></i></button>
</div> </div>
</div> </div>
<div id="collapse3" class="panel-collapse collapse"> <div id="collapse3" class="panel-collapse collapse in">
<div class="panel-body"> <div class="panel-body">
<div class="col-sm-12"> <div class="col-sm-12">
<div class="card-container panel panel-primary"> <div class="card-container panel panel-primary">
...@@ -99,7 +72,8 @@ ...@@ -99,7 +72,8 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
<hr></hr> <hr>
</hr>
<table data-id="notification-card" class="table stat-table notification-table table-striped "> <table data-id="notification-card" class="table stat-table notification-table table-striped ">
<tbody> <tbody>
<tr class="empty text-center"> <tr class="empty text-center">
......
<!--
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
-->
<thead>
<tr>
<th>Entities</th>
<th>Active <span data-id="activeEntity"></span></th>
<th>Deleted <span data-id="deletedEntity"></span></th>
</tr>
</thead>
{{#if data}}
<tbody>
{{#each data}}
<tr>
<td>{{@key}}</td>
{{#if this.active}}
<td>{{this.active}}</td>
{{else}}
<td>0</td>
{{/if}}
{{#if this.deleted}}
<td>{{this.deleted}}</td>
{{else}}
<td>0</td>
{{/if}}
</tr>
{{/each}}
</tbody>
{{/if}}
\ No newline at end of file
...@@ -137,14 +137,17 @@ define(['require'], function(require) { ...@@ -137,14 +137,17 @@ define(['require'], function(require) {
Enums.addOnClassification = ["_CLASSIFIED", "_NOT_CLASSIFIED"]; Enums.addOnClassification = ["_CLASSIFIED", "_NOT_CLASSIFIED"];
Enums.stats = { Enums.stats = {
generalData: {
"collectionTime": "day"
},
Server: { Server: {
"startTimeStamp": "day", "startTimeStamp": "day",
"activeTimeStamp": "day", "activeTimeStamp": "day",
"upTime": "none" "upTime": "none"
}, },
ConnectionStatus: { ConnectionStatus: {
"backendStore": "none", "statusBackendStore": "status-html",
"indexStore": "none" "statusIndexStore": "status-html"
}, },
Notification: { Notification: {
"currentDay": "number", "currentDay": "number",
......
...@@ -20,6 +20,7 @@ define(['require', ...@@ -20,6 +20,7 @@ define(['require',
'backbone', 'backbone',
'hbs!tmpl/site/Statistics_tmpl', 'hbs!tmpl/site/Statistics_tmpl',
'hbs!tmpl/site/Statistics_Notification_table_tmpl', 'hbs!tmpl/site/Statistics_Notification_table_tmpl',
'hbs!tmpl/site/entity_tmpl',
'modules/Modal', 'modules/Modal',
'models/VCommon', 'models/VCommon',
'utils/UrlLinks', 'utils/UrlLinks',
...@@ -29,7 +30,7 @@ define(['require', ...@@ -29,7 +30,7 @@ define(['require',
'moment', 'moment',
'utils/Utils', 'utils/Utils',
'moment-timezone' 'moment-timezone'
], function(require, Backbone, StatTmpl, StatsNotiTable, Modal, VCommon, UrlLinks, VTagList, CommonViewFunction, Enums, moment, Utils) { ], function(require, Backbone, StatTmpl, StatsNotiTable, EntityTable, Modal, VCommon, UrlLinks, VTagList, CommonViewFunction, Enums, moment, Utils) {
'use strict'; 'use strict';
var StatisticsView = Backbone.Marionette.LayoutView.extend( var StatisticsView = Backbone.Marionette.LayoutView.extend(
...@@ -41,15 +42,13 @@ define(['require', ...@@ -41,15 +42,13 @@ define(['require',
regions: {}, regions: {},
/** ui selector cache */ /** ui selector cache */
ui: { ui: {
entityActive: "[data-id='entityActive'] tbody", entityHeader: "[data-id='entity'] .count",
entityDelete: "[data-id='entityDelete'] tbody",
entityActiveHeader: "[data-id='entityActive'] .count",
entityDeletedHeader: "[data-id='entityDelete'] .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']",
notificationSmallCard: "[data-id='notification-small-card']" notificationSmallCard: "[data-id='notification-small-card']",
entityCard: "[data-id='entity-card']"
}, },
/** ui events hash */ /** ui events hash */
events: function() {}, events: function() {},
...@@ -80,25 +79,9 @@ define(['require', ...@@ -80,25 +79,9 @@ define(['require',
entityCountCollection.modelAttrName = "data"; entityCountCollection.modelAttrName = "data";
entityCountCollection.fetch({ entityCountCollection.fetch({
success: function(data) { success: function(data) {
var data = _.first(data.toJSON()), var data = _.first(data.toJSON());
no_records = '<tr class="empty text-center"><td colspan="2"><span>No records found!</span></td></tr>', that.renderStats({ valueObject: data.general.stats, dataObject: data.general });
activeEntityTable = _.isEmpty(data.entity.entityActive) ? no_records : that.getTable({ valueObject: data.entity.entityActive }), that.renderEntities({ data: data });
deleteEntityTable = _.isEmpty(data.entity.entityDeleted) ? no_records : that.getTable({ valueObject: data.entity.entityDeleted });
that.renderStats({ valueObject: data.general.stats });
var totalActive = 0,
totalDeleted = 0;
if (data.entity && data.general.entityCount) {
totalActive = data.general.entityCount;
}
if (data.entity && data.entity.entityDeleted) {
_.each(data.entity.entityDeleted, function(val) {
totalDeleted += val;
});
}
that.ui.entityActive.html(activeEntityTable);
that.ui.entityDelete.html(deleteEntityTable);
that.ui.entityActiveHeader.html("&nbsp;(" + _.numberFormatWithComa((totalActive - totalDeleted)) + ")");
that.ui.entityDeletedHeader.html("&nbsp;(" + _.numberFormatWithComa(totalDeleted) + ")");
that.$('.statsContainer,.statsNotificationContainer').removeClass('hide'); that.$('.statsContainer,.statsNotificationContainer').removeClass('hide');
that.$('.statsLoader,.statsNotificationLoader').removeClass('show'); that.$('.statsLoader,.statsNotificationLoader').removeClass('show');
} }
...@@ -120,25 +103,78 @@ define(['require', ...@@ -120,25 +103,78 @@ define(['require',
}); });
return stats; return stats;
}, },
renderEntities: function(options) {
var that = this,
data = options.data,
entityData = data.entity,
activeEntities = entityData.entityActive || {},
deletedEntities = entityData.entityDeleted || {},
stats = {},
activeEntityCount = 0,
deletedEntityCount = 0,
createEntityData = function(opt) {
var entityData = opt.entityData,
type = opt.type;
_.each(entityData, function(val, key) {
var intVal = _.isUndefined(val) ? 0 : val;
if (stats[key]) {
stats[key][type] = intVal;
} else {
stats[key] = {};
stats[key][type] = intVal;
}
if (type == "active") {
activeEntityCount += intVal;
} else {
deletedEntityCount += intVal;
}
})
};
createEntityData({
"entityData": activeEntities,
"type": "active"
})
createEntityData({
"entityData": deletedEntities,
"type": "deleted"
});
if (!_.isEmpty(stats)) {
that.ui.entityCard.html(
EntityTable({
"data": _.pick(stats, (_.keys(stats).sort())),
})
);
that.$('[data-id="activeEntity"]').html("&nbsp;(" + _.numberFormatWithComa(activeEntityCount) + ")");
that.$('[data-id="deletedEntity"]').html("&nbsp;(" + _.numberFormatWithComa(deletedEntityCount) + ")");
that.ui.entityHeader.html("&nbsp;(" + _.numberFormatWithComa(data.general.entityCount) + ")");
}
},
renderStats: function(options) { renderStats: function(options) {
var that = this, var that = this,
data = this.genrateStatusData(options.valueObject), data = this.genrateStatusData(options.valueObject),
generalData = options.dataObject,
createTable = function(obj) { createTable = function(obj) {
var tableBody = '', var tableBody = '',
enums = obj.enums, enums = obj.enums,
data = obj.data, data = obj.data;
showConnectionStatus = obj.showConnectionStatus;
_.each(data, function(value, key, list) { _.each(data, function(value, key, list) {
tableBody += '<tr><td>' + key + '</td><td class="">' + that.getValue({ tableBody += '<tr><td>' + key + '</td><td class="">' + that.getValue({
"value": value, "value": value,
"type": enums[key], "type": enums[key]
"showConnectionStatus": showConnectionStatus
}) + '</td></tr>'; }) + '</td></tr>';
}); });
return tableBody; return tableBody;
}; };
if (data.Notification) { if (data.Notification) {
var tableCol = [{ label: "Total", key: "total" }, var tableCol = [
{
label: "Total <br> (from " + (that.getValue({
"value": data.Server["startTimeStamp"],
"type": Enums.stats.Server["startTimeStamp"],
})) + ")",
key: "total"
},
{ {
label: "Current Hour <br> (from " + (that.getValue({ label: "Current Hour <br> (from " + (that.getValue({
"value": data.Notification["currentHourStartTime"], "value": data.Notification["currentHourStartTime"],
...@@ -163,33 +199,45 @@ define(['require', ...@@ -163,33 +199,45 @@ define(['require',
"data": data.Notification, "data": data.Notification,
"tableHeader": tableHeader, "tableHeader": tableHeader,
"tableCol": tableCol, "tableCol": tableCol,
"getValue": function(argument, args) { "getTmplValue": function(argument, args) {
var returnVal = (args == 'count' ? data.Notification[argument.key] : data.Notification[argument.key.concat(args)]); var pickValueFrom = argument.key.concat(args);
if (argument.key == "total" && args == "EntityCreates") {
pickValueFrom = "totalCreates";
} else if (argument.key == "total" && args == "EntityUpdates") {
pickValueFrom = "totalUpdates";
} else if (argument.key == "total" && args == "EntityDeletes") {
pickValueFrom = "totalDeletes";
} else if (args == "count") {
pickValueFrom = argument.key;
}
var returnVal = data.Notification[pickValueFrom];
return returnVal ? _.numberFormatWithComa(returnVal) : 0; return returnVal ? _.numberFormatWithComa(returnVal) : 0;
} }
}) })
); );
that.ui.notificationSmallCard.html(createTable({ that.ui.notificationSmallCard.html(
"enums": Enums.stats.Notification, createTable({
"data": _.pick(data.Notification, 'lastMessageProcessedTime', 'offsetCurrent', 'offsetStart') "enums": Enums.stats.Notification,
})); "data": _.pick(data.Notification, 'lastMessageProcessedTime', 'offsetCurrent', 'offsetStart')
})
);
} }
if (data.Server) { if (data.Server) {
that.ui.serverCard.html( that.ui.serverCard.html(
createTable({ createTable({
"enums": _.extend(Enums.stats.Server, Enums.stats.ConnectionStatus), "enums": _.extend(Enums.stats.Server, Enums.stats.ConnectionStatus, Enums.stats.generalData),
"data": _.extend(_.pick(data.Server, 'startTimeStamp', 'activeTimeStamp', 'upTime'), data.ConnectionStatus), "data": _.extend(
"showConnectionStatus": true _.pick(data.Server, 'startTimeStamp', 'activeTimeStamp', 'upTime', 'statusBackendStore', 'statusIndexStore'),
_.pick(generalData, 'collectionTime'))
}) })
); );
} }
}, },
getValue: function(options) { getValue: function(options) {
var value = options.value, var value = options.value,
type = options.type, type = options.type;
showConnectionStatus = options.showConnectionStatus;
if (type == 'time') { if (type == 'time') {
return Utils.millisecondsToTime(value); return Utils.millisecondsToTime(value);
} else if (type == 'day') { } else if (type == 'day') {
...@@ -198,18 +246,12 @@ define(['require', ...@@ -198,18 +246,12 @@ define(['require',
return _.numberFormatWithComa(value); return _.numberFormatWithComa(value);
} else if (type == 'millisecond') { } else if (type == 'millisecond') {
return _.numberFormatWithComa(value) + " millisecond/s"; return _.numberFormatWithComa(value) + " millisecond/s";
} else if ((showConnectionStatus && (value.indexOf('connected') != -1))) { } else if (type == "status-html") {
return '<span class="connection-status ' + (showConnectionStatus && showConnectionStatus == true ? value : "") + '"></span>'; return '<span class="connection-status ' + value + '"></span>';
} else { } else {
return value; return value;
} }
},
getTable: function(obj) {
return CommonViewFunction.propertyTable(_.extend({
scope: this,
formatIntVal: true
}, obj))
} }
}); });
return StatisticsView; return StatisticsView;
}); });
\ No newline at end of file
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