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 6c17137 commit 5a07417
Show file tree
Hide file tree
Showing 2 changed files with 61 additions and 16 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: 12 additions & 12 deletions ui/src/views/Dashboard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,8 +118,8 @@
class="stats-container col-xs-12 col-sm-6 col-md-2 col-lg-2"
>
<span
class="card-pf-utilization-card-details-count stats-count"
>{{counters.accepted}}</span>
class="card-pf-utilization-card-details-count stats-count" :title="counters.accepted"
>{{counters.accepted | 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 @@ -131,8 +131,8 @@
class="stats-container col-xs-12 col-sm-6 col-md-2 col-lg-2"
>
<span
class="card-pf-utilization-card-details-count stats-count"
>{{counters.blocked}}</span>
class="card-pf-utilization-card-details-count stats-count" :title="counters.blocked"
>{{counters.blocked | 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 @@ -144,8 +144,8 @@
class="stats-container col-xs-12 col-sm-6 col-md-2 col-lg-2"
>
<span
class="card-pf-utilization-card-details-count stats-count"
>{{counters.replaced}}</span>
class="card-pf-utilization-card-details-count stats-count" :title="counters.replaced"
>{{counters.replaced | 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 @@ -157,8 +157,8 @@
class="stats-container col-xs-12 col-sm-6 col-md-2 col-lg-2"
>
<span
class="card-pf-utilization-card-details-count stats-count"
>{{counters.rejected}}</span>
class="card-pf-utilization-card-details-count stats-count" :title="counters.rejected"
>{{counters.rejected | 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 @@ -170,8 +170,8 @@
class="stats-container col-xs-12 col-sm-6 col-md-2 col-lg-2"
>
<span
class="card-pf-utilization-card-details-count stats-count"
>{{counters.rules_loaded}}</span>
class="card-pf-utilization-card-details-count stats-count" :title="counters.rules_loaded"
>{{counters.rules_loaded | 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 @@ -183,8 +183,8 @@
class="stats-container col-xs-12 col-sm-6 col-md-2 col-lg-2"
>
<span
class="card-pf-utilization-card-details-count stats-count"
>{{counters.rules_failed}}</span>
class="card-pf-utilization-card-details-count stats-count" :title="counters.rules_failed"
>{{counters.rules_failed | 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 5a07417

Please sign in to comment.