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 168 deletions
dashboardv2/public/css/scss/panel.scss
...@@ -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,6 +77,7 @@ ...@@ -72,6 +77,7 @@
&>div { &>div {
position: relative; position: relative;
} }
&.active { &.active {
padding: 20px 10px 0px 10px; padding: 20px 10px 0px 10px;
min-height: 50px; min-height: 50px;
...@@ -79,3 +85,39 @@ ...@@ -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 @@ ...@@ -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
dashboardv2/public/css/scss/table.scss
...@@ -37,3 +37,8 @@ tr.empty { ...@@ -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"] { ...@@ -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;
...@@ -453,88 +411,3 @@ hr[size="10"] { ...@@ -453,88 +411,3 @@ hr[size="10"] {
height: 50px; 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 @@ ...@@ -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}}
......
dashboardv2/public/js/templates/site/Statistics_tmpl.html
...@@ -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">
......
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) { ...@@ -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",
......
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