ui: display numbers in a human readable form

NethServer/dev#6206
andre8244 · Jun 16, 2020 · 732ce43 · 732ce43
1 parent c297604
commit 732ce43
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 17 deletions.
diff --git a/ui/src/components/system/DHCP.vue b/ui/src/components/system/DHCP.vue
@@ -5,15 +5,19 @@
     <div v-if="!view.isLoaded" class="spinner spinner-lg"></div>
     <div v-if="view.isLoaded">
       <div class="stats-container card-pf-utilization-details">
-        <span class="card-pf-utilization-card-details-count">{{stats.reservations}}</span>
+        <span class="card-pf-utilization-card-details-count" :title="stats.reservations">
+          {{stats.reservations | humanFormat}}
+        </span>
         <span class="card-pf-utilization-card-details-description">
           <span
             class="card-pf-utilization-card-details-line-2 stats-text"
           >{{$t('dhcp.reservations')}}</span>
         </span>
       </div>
       <div class="stats-container card-pf-utilization-details">
-        <span class="card-pf-utilization-card-details-count">{{stats.leases}}</span>
+        <span class="card-pf-utilization-card-details-count" :title="stats.leases">
+          {{stats.leases | humanFormat}}
+        </span>
         <span class="card-pf-utilization-card-details-description">
           <span class="card-pf-utilization-card-details-line-2 stats-text">{{$t('dhcp.leases')}}</span>
         </span>

diff --git a/ui/src/components/system/Dashboard.vue b/ui/src/components/system/Dashboard.vue
@@ -1618,12 +1618,12 @@ export default {
         order: null
       };
       ramConfig.size = {
-        width: 180,
-        height: 180
+        width: 220,
+        height: 220
       };
       swapConfig.size = {
-        width: 180,
-        height: 180
+        width: 220,
+        height: 220
       };
 
       ramConfig.tooltip = {
@@ -1666,8 +1666,8 @@ export default {
         order: null
       };
       rootConfig.size = {
-        width: 180,
-        height: 180
+        width: 220,
+        height: 220
       };
       
       rootConfig.tooltip = {

diff --git a/ui/src/components/system/SSH.vue b/ui/src/components/system/SSH.vue
@@ -5,14 +5,18 @@
     <div v-if="view.isLoaded">
       <h3>{{$t('stats')}}</h3>
       <div class="stats-container card-pf-utilization-details">
-        <span class="card-pf-utilization-card-details-count">{{stats.connections}}</span>
+        <span class="card-pf-utilization-card-details-count" :title="stats.connections">
+          {{stats.connections | humanFormat}}
+        </span>
         <span class="card-pf-utilization-card-details-description">
           <span class="card-pf-utilization-card-details-line-2 stats-text">{{stats.connections == 1 ?
             $t('ssh.connection') : $t('ssh.connections')}}</span>
         </span>
       </div>
       <div class="stats-container card-pf-utilization-details">
-        <span class="card-pf-utilization-card-details-count">{{stats.peers}}</span>
+        <span class="card-pf-utilization-card-details-count" :title="stats.peers">
+          {{stats.peers | humanFormat}}
+        </span>
         <span class="card-pf-utilization-card-details-description">
           <span class="card-pf-utilization-card-details-line-2 stats-text">{{stats.peers == 1 ? $t('ssh.peer') :
             $t('ssh.peers')}}</span>

diff --git a/ui/src/components/system/Services.vue b/ui/src/components/system/Services.vue
@@ -5,23 +5,29 @@
     <div v-if="!view.isLoaded" class="spinner spinner-lg"></div>
     <div v-if="view.isLoaded">
       <div class="stats-container card-pf-utilization-details">
-        <span class="card-pf-utilization-card-details-count">{{stats.servicesCount}}</span>
+        <span class="card-pf-utilization-card-details-count" :title="stats.servicesCount">
+          {{stats.servicesCount | humanFormat}}
+        </span>
         <span class="card-pf-utilization-card-details-description">
           <span
             class="card-pf-utilization-card-details-line-2 stats-text"
           >{{$t('services.configured')}}</span>
         </span>
       </div>
       <div class="stats-container card-pf-utilization-details">
-        <span class="card-pf-utilization-card-details-count">{{stats.servicesEnabledCount}}</span>
+        <span class="card-pf-utilization-card-details-count" :title="stats.servicesEnabledCount">
+          {{stats.servicesEnabledCount | humanFormat}}
+        </span>
         <span class="card-pf-utilization-card-details-description">
           <span
             class="card-pf-utilization-card-details-line-2 stats-text"
           >{{$t('services.enabled')}}</span>
         </span>
       </div>
       <div class="stats-container card-pf-utilization-details">
-        <span class="card-pf-utilization-card-details-count">{{stats.servicesRunningCount}}</span>
+        <span class="card-pf-utilization-card-details-count" :title="stats.servicesRunningCount">
+          {{stats.servicesRunningCount | humanFormat}}
+        </span>
         <span class="card-pf-utilization-card-details-description">
           <span
             class="card-pf-utilization-card-details-line-2 stats-text"

diff --git a/ui/src/filters/filters.js b/ui/src/filters/filters.js
@@ -15,23 +15,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 + " G";
+        } else {
+          result = Math.round(number / Math.pow(1000, 3)) + " G";
+        }
+        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) {
     let hours = parseInt(Math.floor(value / 3600));
     let minutes = parseInt(Math.floor((value - hours * 3600) / 60));