Merge pull request #645 from kaeltis/fixTimeConversion

Fix time conversion in overview and charts

frontend/src/components/Service/AdvancedChart.vue

@@ -130,10 +130,10 @@
                 let ts = w.globals.seriesX[seriesIndex][dataPointIndex];
                 const dt = new Date(ts).toLocaleDateString("en-us", timeoptions)
                 let val = series[seriesIndex][dataPointIndex];
-                if (val >= 1000) {
+                if (val >= 10000) {
-                  val = (val * 0.1).toFixed(0) + " milliseconds"
+                  val = Math.round(val / 1000) + " ms"
                 } else {
-                  val = (val * 0.01).toFixed(0) + " microseconds"
+                  val = val + " μs"
                 }
                 return `<div class="chartmarker"><span>Response Time: </span><span class="font-3">${val}</span><span>${dt}</span></div>`
               },

frontend/src/components/Service/MiniSparkLine.vue

@@ -55,7 +55,7 @@
             show: false,
           },
           y: {
-            formatter: (value) => { return value + "%" },
+            formatter: (value) => { return value + " %" },
           },
         },
         title: {

frontend/src/components/Service/ServiceChart.vue

@@ -113,12 +113,12 @@
                           let ts = w.globals.seriesX[seriesIndex][dataPointIndex];
                           const dt = new Date(ts).toLocaleDateString("en-us", timeoptions)
                           let val = series[seriesIndex][dataPointIndex];
-                          let humanVal = this.humanTime(val);
+                          if (val >= 10000) {
-                          return `<div class="chartmarker">
+                            val = Math.round(val / 1000) + " ms"
-                                        <span>Average Response Time: </span>
+                          } else {
-                                        <span class="font-3">${humanVal}</span>
+                            val = val + " μs"
-                                        <span>${dt}</span>
+                          }
-                                    </div>`
+                          return `<div class="chartmarker"><span>Average Response Time: </span><span class="font-3">${val}</span><span>${dt}</span></div>`
                       },
                       fixed: {
                           enabled: true,
@@ -130,7 +130,7 @@
                           show: false,
                       },
                     y: {
-                      formatter: (value) => { return value + "%" },
+                      formatter: (value) => { return value + " %" },
                     },
                   },
                   legend: {

frontend/src/components/Service/ServiceInfo.vue

@@ -23,7 +23,7 @@
 
                     <div v-if="service.online" class="col-3 text-left">
                         <span class="text-success font-5 font-weight-bold">
-                            {{service.online_24_hours.toString()}}%
+                            {{service.online_24_hours.toString()}} %
                         </span>
                         <span class="font-2 d-block">Total Uptime</span>
                     </div>
@@ -83,7 +83,7 @@
                     </router-link>
                 </div>
                 <div class="col-12 col-md-3 mb-2 mb-md-0 mt-0 mt-md-1">
-                    <span class="text-black-50 float-md-right">{{service.online_7_days}}% Uptime</span>
+                    <span class="text-black-50 float-md-right">{{service.online_7_days}} % Uptime</span>
                 </div>
 
             </div>
@@ -186,7 +186,7 @@
                       total += parseInt(f.y)
                   });
                   total = total / data.length
-                  return total.toFixed(0) + "ms"
+                  return Math.round(total) + " ms"
               } else {
                   return "Offline"
               }

frontend/src/components/Service/ServiceSparkLine.vue

@@ -55,11 +55,7 @@
             let ts = w.globals.seriesX[seriesIndex][dataPointIndex];
             const dt = new Date(ts).toLocaleDateString("en-us", timeoptions)
             let val = series[seriesIndex][dataPointIndex];
-            if (val >= 1000) {
+            val = val + " ms"
-              val = (val * 0.1).toFixed(0) + " milliseconds"
-            } else {
-              val = (val * 0.01).toFixed(0) + " microseconds"
-            }
             return `<div class="chartmarker"><span>Average Response Time: </span><span class="font-3">${val}</span><span>${dt}</span></div>`
           },
           fixed: {
@@ -72,7 +68,7 @@
             show: false,
           },
           y: {
-            formatter: (value) => { return value + "%" },
+            formatter: (value) => { return value + " %" },
           },
         },
         title: {

frontend/src/components/Service/ServiceTopStats.vue

@@ -5,11 +5,11 @@
             <span class="font-1 subtitle">Average Response</span>
         </div>
         <div class="col-4">
-            <span class="font-5 d-block font-weight-bold">{{service.online_24_hours}}%</span>
+            <span class="font-5 d-block font-weight-bold">{{service.online_24_hours}} %</span>
             <span class="font-1 subtitle">Uptime last 24 Hours</span>
         </div>
         <div class="col-4">
-            <span class="font-5 d-block font-weight-bold">{{service.online_7_days}}%</span>
+            <span class="font-5 d-block font-weight-bold">{{service.online_7_days}} %</span>
             <span class="font-1 subtitle">Uptime last 7 Days</span>
         </div>
     </div>

frontend/src/mixin.js

@@ -166,10 +166,10 @@ export default Vue.mixin({
       return {data: newSet}
     },
     humanTime(val) {
-      if (val >= 10000) {
+      if (val >= 1000) {
-          return Math.floor(val / 10000) + "ms"
+          return Math.round(val / 1000) + " ms"
       }
-        return Math.floor(val / 1000) + "μs"
+        return val + " μs"
     },
     firstDayOfMonth(date) {
       return startOfMonth(date)

frontend/src/pages/Service.vue

@@ -269,10 +269,10 @@ export default {
                         let ts = w.globals.seriesX[seriesIndex][dataPointIndex];
                         const dt = new Date(ts).toLocaleDateString("en-us", timeoptions)
                         let val = series[seriesIndex][dataPointIndex];
-                        if (val >= 1000) {
+                        if (val >= 10000) {
-                            val = (val * 0.1).toFixed(0) + " milliseconds"
+                            val = Math.round(val / 1000) + " ms"
                         } else {
-                            val = (val * 0.01).toFixed(0) + " microseconds"
+                            val = val + " μs"
                         }
                         return `<div class="chartmarker"><span>Response Time: </span><span class="font-3">${val}</span><span>${dt}</span></div>`
                     },