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 227 additions and 167 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,10 +77,47 @@
&>div {
position: relative;
}
&.active {
padding: 20px 10px 0px 10px;
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
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
......@@ -36,4 +36,9 @@ 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;
......@@ -452,89 +410,4 @@ hr[size="10"] {
img {
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
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",
......
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