Skip to content

Commit

Permalink
ui: display numbers in a human readable form
Browse files Browse the repository at this point in the history 
NethServer/dev#6206
  • Loading branch information
@andre8244
andre8244 committed Jun 17, 2020
1 parent 0cac0e5 commit b4d78c1
Show file tree
Hide file tree
Showing 2 changed files with 62 additions and 15 deletions.
53 changes: 49 additions & 4 deletions ui/src/filters.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,23 +14,68 @@ var Filters = {
break;

case size >= 1024 && size < Math.pow(1024, 2):
result = Math.round((size / 1024) * 100) / 100 + " K";
result = Math.round((size / 1024) * 100) / 100 + " KB";
break;

case size >= Math.pow(1024, 2) && size < Math.pow(1024, 3):
result = Math.round((size / Math.pow(1024, 2)) * 100) / 100 + " M";
result = Math.round((size / Math.pow(1024, 2)) * 100) / 100 + " MB";
break;

case size >= Math.pow(1024, 3) && size < Math.pow(1024, 4):
result = Math.round((size / Math.pow(1024, 3)) * 100) / 100 + " G";
result = Math.round((size / Math.pow(1024, 3)) * 100) / 100 + " GB";
break;

default:
result = Math.round((size / Math.pow(1024, 4)) * 100) / 100 + " T";
result = Math.round((size / Math.pow(1024, 4)) * 100) / 100 + " TB";
}

return result;
},
humanFormat: function (number, decimals = false) {
var result;

switch (true) {
case number === null || number === "" || isNaN(number):
result = "-";
break;

case number >= 0 && number < 1000:
result = number;
break;

case number >= 1000 && number < Math.pow(1000, 2):
if (decimals) {
result = Math.round(number / 1000 * 10) / 10 + " K";
} else {
result = Math.round(number / 1000) + " K";
}
break;

case number >= Math.pow(1000, 2) && number < Math.pow(1000, 3):
if (decimals) {
result = Math.round(number / Math.pow(1000, 2) * 10) / 10 + " M";
} else {
result = Math.round(number / Math.pow(1000, 2)) + " M";
}
break;

case number >= Math.pow(1000, 3) && number < Math.pow(1000, 4):
if (decimals) {
result = Math.round(number / Math.pow(1000, 3) * 10) / 10 + " B";
} else {
result = Math.round(number / Math.pow(1000, 3)) + " B";
}
break;

default:
if (decimals) {
result = Math.round(number / Math.pow(1000, 4) * 10) / 10 + " T";
} else {
result = Math.round(number / Math.pow(1000, 4)) + " T";
}
}
return result;
},
secondsInHour: function(value) {
if (!value || value.length == 0) {
return "-";
Expand Down
24 changes: 13 additions & 11 deletions ui/src/views/Dashboard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,16 +30,18 @@
<h3>{{ $t('dashboard.ipsec_stats') }}</h3>
<div class="stats-container col-xs-6 col-sm-6 col-md-6 col-lg-6">
<span
class="card-pf-utilization-card-details-count stats-count"
>{{status.ipsec.connected}}</span>
class="card-pf-utilization-card-details-count stats-count" :title="status.ipsec.connected"
>{{status.ipsec.connected | humanFormat}}</span>
<span class="card-pf-utilization-card-details-description stats-description">
<span
class="card-pf-utilization-card-details-line-2 stats-text"
>{{ $t('dashboard.ipsec_connected') }}</span>
</span>
</div>
<div class="stats-container col-xs-6 col-sm-6 col-md-6 col-lg-6">
<span class="card-pf-utilization-card-details-count stats-count">{{status.ipsec.total}}</span>
<span class="card-pf-utilization-card-details-count stats-count" :title="status.ipsec.total">
{{status.ipsec.total | humanFormat}}
</span>
<span class="card-pf-utilization-card-details-description stats-description">
<span
class="card-pf-utilization-card-details-line-2 stats-text"
Expand All @@ -54,8 +56,8 @@
<h3>{{ $t('dashboard.openvpn_tun_stats') }}</h3>
<div class="stats-container col-xs-6 col-sm-6 col-md-6 col-lg-6">
<span
class="card-pf-utilization-card-details-count stats-count"
>{{status.openvpn.tunnels.connected}}</span>
class="card-pf-utilization-card-details-count stats-count" :title="status.openvpn.tunnels.connected"
>{{status.openvpn.tunnels.connected | humanFormat}}</span>
<span class="card-pf-utilization-card-details-description stats-description">
<span
class="card-pf-utilization-card-details-line-2 stats-text"
Expand All @@ -64,8 +66,8 @@
</div>
<div class="stats-container col-xs-6 col-sm-6 col-md-6 col-lg-6">
<span
class="card-pf-utilization-card-details-count stats-count"
>{{status.openvpn.tunnels.total}}</span>
class="card-pf-utilization-card-details-count stats-count" :title="status.openvpn.tunnels.total"
>{{status.openvpn.tunnels.total | humanFormat}}</span>
<span class="card-pf-utilization-card-details-description stats-description">
<span
class="card-pf-utilization-card-details-line-2 stats-text"
Expand Down Expand Up @@ -117,8 +119,8 @@
</div>
<div class="stats-container col-xs-12 col-sm-4 col-md-4 col-lg-4">
<span
class="card-pf-utilization-card-details-count stats-count"
>{{status.openvpn.roadwarrior.connected}}</span>
class="card-pf-utilization-card-details-count stats-count" :title="status.openvpn.roadwarrior.connected"
>{{status.openvpn.roadwarrior.connected | humanFormat}}</span>
<span class="card-pf-utilization-card-details-description stats-description">
<span
class="card-pf-utilization-card-details-line-2 stats-text"
Expand All @@ -127,8 +129,8 @@
</div>
<div class="stats-container col-xs-12 col-sm-4 col-md-4 col-lg-4">
<span
class="card-pf-utilization-card-details-count stats-count"
>{{status.openvpn.roadwarrior.total}}</span>
class="card-pf-utilization-card-details-count stats-count" :title="status.openvpn.roadwarrior.total"
>{{status.openvpn.roadwarrior.total | humanFormat}}</span>
<span class="card-pf-utilization-card-details-description stats-description">
<span
class="card-pf-utilization-card-details-line-2 stats-text"
Expand Down

0 comments on commit b4d78c1

Please sign in to comment.