Skip to content

A
atlas
Commit 2af5eede by kevalbhatt Committed by Madhan Neethiraj
Options

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

Signed-off-by: 's avatarMadhan Neethiraj <madhan@apache.org>
parent 9c9eed27
Showing with 316 additions and 215 deletions
dashboardv2/public/css/scss/panel.scss
......@@ -24,16 +24,19 @@
color: $color_jungle_green_approx;
background: $white;
border-color: $color_jungle_green_approx;
button {
color: $color_jungle_green_approx;
background: $white;
border: none;
}
.panel-title {
font-weight: bold;
padding-top: 8px;
}
}
.nav-tabs {
>li {
&.active {
......@@ -41,6 +44,7 @@
color: $color_jungle_green_approx;
}
}
>a {
color: $black;
}
......@@ -51,8 +55,9 @@
.panel-fullscreen {
.panel-body {
//overflow: hidden;
height: calc(100% - 46px)!important;
height: calc(100% - 46px) !important;
}
.ui-resizable-handle {
display: none !important;
}
......@@ -72,6 +77,7 @@
&>div {
position: relative;
}
&.active {
padding: 20px 10px 0px 10px;
min-height: 50px;
......@@ -79,3 +85,39 @@
}
}
}
.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
dashboardv2/public/css/scss/stats.scss 0 → 100644
/*
* 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
dashboardv2/public/css/scss/style.scss
......@@ -34,4 +34,5 @@
@import "profile-table.scss";
@import "glossary.scss";
@import "wizard.scss";
@import "stats.scss";
@import "override.scss";
\ No newline at end of file
dashboardv2/public/css/scss/table.scss
......@@ -37,3 +37,8 @@ tr.empty {
}
}
}
.table-action-btn {
position: absolute;
right: 0px;
}
\ No newline at end of file
dashboardv2/public/css/scss/theme.scss
......@@ -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 {
padding: 0px !important;
}
......@@ -432,11 +395,6 @@ hr[size="10"] {
}
}
.table-action-btn {
position: absolute;
right: 0px;
}
.entity-icon-box {
display: inline-block;
background: #cee0fa;
......@@ -453,88 +411,3 @@ hr[size="10"] {
height: 50px;
}
}
\ No newline at end of file
.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
dashboardv2/public/js/templates/site/Statistics_Notification_table_tmpl.html
......@@ -31,7 +31,7 @@
<tr>
<td>{{{this.label}}}</td>
{{#each ../tableHeader}}
<td>{{callmyfunction ../../getValue ../this this}}</td>
<td>{{callmyfunction ../../getTmplValue ../this this}}</td>
{{/each }}
</tr>
{{/each}}
......
dashboardv2/public/js/templates/site/Statistics_tmpl.html
......@@ -15,10 +15,10 @@
* limitations under the License.
-->
<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">
<h4 class="panel-title">
<a>Active Entities <span class="count">(0)</span></a>
<a>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>
......@@ -26,45 +26,18 @@
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
<table class="table stat-table">
<thead>
<tr>
<th>Entity</th>
<th>Count</th>
</tr>
</thead>
<table class="table stat-table entityTable" data-id="entity-card">
<tbody>
</tbody>
</table>
</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 class="empty text-center">
<td colspan="3"><span>No records found!</span></td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
<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">
<a>Server Statistics </a>
</h4>
......@@ -72,7 +45,7 @@
<button type="button" title="Collapse"><i class="ec-icon fa"></i></button>
</div>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div id="collapse3" class="panel-collapse collapse in">
<div class="panel-body">
<div class="col-sm-12">
<div class="card-container panel panel-primary">
......@@ -99,7 +72,8 @@
</tr>
</tbody>
</table>
<hr></hr>
<hr>
</hr>
<table data-id="notification-card" class="table stat-table notification-table table-striped ">
<tbody>
<tr class="empty text-center">
......
dashboardv2/public/js/templates/site/entity_tmpl.html 0 → 100644
<!--
* 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
dashboardv2/public/js/utils/Enums.js
......@@ -137,14 +137,17 @@ define(['require'], function(require) {
Enums.addOnClassification = ["_CLASSIFIED", "_NOT_CLASSIFIED"];
Enums.stats = {
generalData: {
"collectionTime": "day"
},
Server: {
"startTimeStamp": "day",
"activeTimeStamp": "day",
"upTime": "none"
},
ConnectionStatus: {
"backendStore": "none",
"indexStore": "none"
"statusBackendStore": "status-html",
"statusIndexStore": "status-html"
},
Notification: {
"currentDay": "number",
......
dashboardv2/public/js/views/site/Statistics.js
......@@ -20,6 +20,7 @@ define(['require',
'backbone',
'hbs!tmpl/site/Statistics_tmpl',
'hbs!tmpl/site/Statistics_Notification_table_tmpl',
'hbs!tmpl/site/entity_tmpl',
'modules/Modal',
'models/VCommon',
'utils/UrlLinks',
......@@ -29,7 +30,7 @@ define(['require',
'moment',
'utils/Utils',
'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';
var StatisticsView = Backbone.Marionette.LayoutView.extend(
......@@ -41,15 +42,13 @@ define(['require',
regions: {},
/** ui selector cache */
ui: {
entityActive: "[data-id='entityActive'] tbody",
entityDelete: "[data-id='entityDelete'] tbody",
entityActiveHeader: "[data-id='entityActive'] .count",
entityDeletedHeader: "[data-id='entityDelete'] .count",
entityHeader: "[data-id='entity'] .count",
serverCard: "[data-id='server-card']",
connectionCard: "[data-id='connection-card']",
notificationCard: "[data-id='notification-card']",
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 */
events: function() {},
......@@ -80,25 +79,9 @@ define(['require',
entityCountCollection.modelAttrName = "data";
entityCountCollection.fetch({
success: function(data) {
var data = _.first(data.toJSON()),
no_records = '<tr class="empty text-center"><td colspan="2"><span>No records found!</span></td></tr>',
activeEntityTable = _.isEmpty(data.entity.entityActive) ? no_records : that.getTable({ valueObject: data.entity.entityActive }),
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) + ")");
var data = _.first(data.toJSON());
that.renderStats({ valueObject: data.general.stats, dataObject: data.general });
that.renderEntities({ data: data });
that.$('.statsContainer,.statsNotificationContainer').removeClass('hide');
that.$('.statsLoader,.statsNotificationLoader').removeClass('show');
}
......@@ -120,25 +103,78 @@ define(['require',
});
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) {
var that = this,
data = this.genrateStatusData(options.valueObject),
generalData = options.dataObject,
createTable = function(obj) {
var tableBody = '',
enums = obj.enums,
data = obj.data,
showConnectionStatus = obj.showConnectionStatus;
data = obj.data;
_.each(data, function(value, key, list) {
tableBody += '<tr><td>' + key + '</td><td class="">' + that.getValue({
"value": value,
"type": enums[key],
"showConnectionStatus": showConnectionStatus
"type": enums[key]
}) + '</td></tr>';
});
return tableBody;
};
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({
"value": data.Notification["currentHourStartTime"],
......@@ -163,33 +199,45 @@ define(['require',
"data": data.Notification,
"tableHeader": tableHeader,
"tableCol": tableCol,
"getValue": function(argument, args) {
var returnVal = (args == 'count' ? data.Notification[argument.key] : data.Notification[argument.key.concat(args)]);
"getTmplValue": function(argument, 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;
}
})
);
that.ui.notificationSmallCard.html(createTable({
that.ui.notificationSmallCard.html(
createTable({
"enums": Enums.stats.Notification,
"data": _.pick(data.Notification, 'lastMessageProcessedTime', 'offsetCurrent', 'offsetStart')
}));
})
);
}
if (data.Server) {
that.ui.serverCard.html(
createTable({
"enums": _.extend(Enums.stats.Server, Enums.stats.ConnectionStatus),
"data": _.extend(_.pick(data.Server, 'startTimeStamp', 'activeTimeStamp', 'upTime'), data.ConnectionStatus),
"showConnectionStatus": true
"enums": _.extend(Enums.stats.Server, Enums.stats.ConnectionStatus, Enums.stats.generalData),
"data": _.extend(
_.pick(data.Server, 'startTimeStamp', 'activeTimeStamp', 'upTime', 'statusBackendStore', 'statusIndexStore'),
_.pick(generalData, 'collectionTime'))
})
);
}
},
getValue: function(options) {
var value = options.value,
type = options.type,
showConnectionStatus = options.showConnectionStatus;
type = options.type;
if (type == 'time') {
return Utils.millisecondsToTime(value);
} else if (type == 'day') {
......@@ -198,17 +246,11 @@ define(['require',
return _.numberFormatWithComa(value);
} else if (type == 'millisecond') {
return _.numberFormatWithComa(value) + " millisecond/s";
} else if ((showConnectionStatus && (value.indexOf('connected') != -1))) {
return '<span class="connection-status ' + (showConnectionStatus && showConnectionStatus == true ? value : "") + '"></span>';
} else if (type == "status-html") {
return '<span class="connection-status ' + value + '"></span>';
} else {
return value;
}
},
getTable: function(obj) {
return CommonViewFunction.propertyTable(_.extend({
scope: this,
formatIntVal: true
}, obj))
}
});
return StatisticsView;
......
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