fix(ui): Inconsistent time values in UI (#1452)

* fix(ui): Truncate displayed time values

* refactor(ui): Use util function

* chore(ui): Regenerate static assets

---------

Co-authored-by: TwiN <twin@linux.com>

web/app/src/components/EndpointCard.vue

@@ -141,8 +141,8 @@ const formattedResponseTime = computed(() => {
     return `~${avgMs}ms`
   } else {
     // Show min-max range
-    const minMs = Math.round(min)
-    const maxMs = Math.round(max)
+    const minMs = Math.trunc(min)
+    const maxMs = Math.trunc(max)
     // If min and max are the same, show single value
     if (minMs === maxMs) {
       return `${minMs}ms`

web/app/src/components/SuiteCard.vue

@@ -31,7 +31,7 @@
         <div>
           <div class="flex items-center justify-between mb-1">
             <p class="text-xs text-muted-foreground">Success Rate: {{ successRate }}%</p>
-            <p class="text-xs text-muted-foreground" v-if="averageDuration">{{ averageDuration }}ms avg</p>
+            <p class="text-xs text-muted-foreground" v-if="averageDuration !== null">{{ averageDuration }}ms avg</p>
           </div>
           <div class="flex gap-0.5">
             <div
@@ -126,7 +126,7 @@ const averageDuration = computed(() => {
   
   const total = props.suite.results.reduce((sum, r) => sum + (r.duration || 0), 0)
   // Convert nanoseconds to milliseconds
-  return Math.round((total / props.suite.results.length) / 1000000)
+  return Math.trunc((total / props.suite.results.length) / 1000000)
 })
 
 const oldestResultTime = computed(() => {

web/app/src/components/Tooltip.vue

@@ -46,7 +46,7 @@
               {{ endpoint.success ? '✓' : '✗' }}
             </span>
             <span class="truncate">{{ endpoint.name }}</span>
-            <span class="text-muted-foreground">({{ (endpoint.duration / 1000000).toFixed(0) }}ms)</span>
+            <span class="text-muted-foreground">({{ Math.trunc(endpoint.duration / 1000000) }}ms)</span>
           </div>
           <div v-if="result.endpointResults.length > 5" class="text-xs text-muted-foreground">
             ... and {{ result.endpointResults.length - 5 }} more
@@ -60,7 +60,7 @@
           {{ isSuiteResult ? 'Total Duration' : 'Response Time' }}
         </div>
         <div class="font-mono text-xs">
-          {{ isSuiteResult ? (result.duration / 1000000).toFixed(0) : (result.duration / 1000000).toFixed(0) }}ms
+          {{ Math.trunc(result.duration / 1000000) }}ms
         </div>
       </div>
       

web/app/src/utils/format.js

@@ -10,7 +10,7 @@ export const formatDuration = (duration) => {
   const durationMs = duration / 1000000
   
   if (durationMs < 1000) {
-    return `${durationMs.toFixed(0)}ms`
+    return `${Math.trunc(durationMs)}ms`
   } else {
     return `${(durationMs / 1000).toFixed(2)}s`
   }

web/app/src/views/EndpointDetails.vue

@@ -281,8 +281,8 @@ const pageResponseTimeRange = computed(() => {
   }
   
   if (!hasData) return 'N/A'
-  const minMs = Math.round(min / 1000000)
-  const maxMs = Math.round(max / 1000000) 
+  const minMs = Math.trunc(min / 1000000)
+  const maxMs = Math.trunc(max / 1000000)
   // If min and max are the same, show single value
   if (minMs === maxMs) {
     return `${minMs}ms`

web/app/src/views/SuiteDetails.vue

@@ -153,6 +153,7 @@ import StepDetailsModal from '@/components/StepDetailsModal.vue'
 import Settings from '@/components/Settings.vue'
 import Loading from '@/components/Loading.vue'
 import { generatePrettyTimeAgo } from '@/utils/time'
+import { formatDuration } from '@/utils/format'
 
 const router = useRouter()
 const route = useRoute()
@@ -238,19 +239,6 @@ const formatTimestamp = (timestamp) => {
   return date.toLocaleString()
 }
 
-const formatDuration = (duration) => {
-  if (!duration && duration !== 0) return 'N/A'
-  
-  // Convert nanoseconds to milliseconds
-  const durationMs = duration / 1000000
-  
-  if (durationMs < 1000) {
-    return `${durationMs.toFixed(0)}ms`
-  } else {
-    return `${(durationMs / 1000).toFixed(2)}s`
-  }
-}
-
 const calculateSuccessRate = (result) => {
   if (!result || !result.endpointResults || result.endpointResults.length === 0) {
     return 0

web/static/js/chunk-vendors.js

@@ -248,7 +248,7 @@ function X(){}const G=(()=>{let t=0;return()=>t++})();function Z(t){return null=
  * (c) 2022 chartjs-adapter-date-fns Contributors
  * Released under the MIT license
  */
-const Kn={datetime:"MMM d, yyyy, h:mm:ss aaaa",millisecond:"h:mm:ss.SSS aaaa",second:"h:mm:ss aaaa",minute:"h:mm aaaa",hour:"ha",day:"MMM d",week:"PP",month:"MMM yyyy",quarter:"qqq - yyyy",year:"yyyy"};i.IQ._date.override({_id:"date-fns",formats:function(){return Kn},parse:function(t,e){if(null===t||"undefined"===typeof t)return null;const n=typeof t;return"number"===n||t instanceof Date?t=h(t):"string"===n&&(t="string"===typeof e?De(t,e,new Date,this.options):Ae(t,this.options)),Ze(t)?t.getTime():null},format:function(t,e){return gn(t,e,this.options)},add:function(t,e,n){switch(n){case"millisecond":return bn(t,e);case"second":return xn(t,e);case"minute":return yn(t,e);case"hour":return vn(t,e);case"day":return Qt(t,e);case"week":return wn(t,e);case"month":return kn(t,e);case"quarter":return _n(t,e);case"year":return Mn(t,e);default:return t}},diff:function(t,e,n){switch(n){case"millisecond":return Sn(t,e);case"second":return Dn(t,e);case"minute":return Cn(t,e);case"hour":return An(t,e);case"day":return On(t,e);case"week":return En(t,e);case"month":return Fn(t,e);case"quarter":return jn(t,e);case"year":return Wn(t,e);default:return 0}},startOf:function(t,e,n){switch(e){case"second":return $n(t);case"minute":return Bn(t);case"hour":return Yn(t);case"day":return Je(t);case"week":return Ct(t);case"isoWeek":return Ct(t,{weekStartsOn:+n});case"month":return Vn(t);case"quarter":return Un(t);case"year":return tn(t);default:return t}},endOf:function(t,e){switch(e){case"second":return qn(t);case"minute":return Xn(t);case"hour":return Gn(t);case"day":return Ln(t);case"week":return Zn(t);case"month":return zn(t);case"quarter":return Qn(t);case"year":return Jn(t);default:return t}}})},107:function(t,e,n){n.d(e,{Z:function(){return an}});var i=n(148),r=n(411);
+const Kn={datetime:"MMM d, yyyy, h:mm:ss aaaa",millisecond:"h:mm:ss.SSS aaaa",second:"h:mm:ss aaaa",minute:"h:mm aaaa",hour:"ha",day:"MMM d",week:"PP",month:"MMM yyyy",quarter:"qqq - yyyy",year:"yyyy"};i.IQ._date.override({_id:"date-fns",formats:function(){return Kn},parse:function(t,e){if(null===t||"undefined"===typeof t)return null;const n=typeof t;return"number"===n||t instanceof Date?t=h(t):"string"===n&&(t="string"===typeof e?De(t,e,new Date,this.options):Ae(t,this.options)),Ze(t)?t.getTime():null},format:function(t,e){return gn(t,e,this.options)},add:function(t,e,n){switch(n){case"millisecond":return bn(t,e);case"second":return xn(t,e);case"minute":return yn(t,e);case"hour":return vn(t,e);case"day":return Qt(t,e);case"week":return wn(t,e);case"month":return kn(t,e);case"quarter":return _n(t,e);case"year":return Mn(t,e);default:return t}},diff:function(t,e,n){switch(n){case"millisecond":return Sn(t,e);case"second":return Dn(t,e);case"minute":return Cn(t,e);case"hour":return An(t,e);case"day":return On(t,e);case"week":return En(t,e);case"month":return Fn(t,e);case"quarter":return jn(t,e);case"year":return Wn(t,e);default:return 0}},startOf:function(t,e,n){switch(e){case"second":return $n(t);case"minute":return Bn(t);case"hour":return Yn(t);case"day":return Je(t);case"week":return Ct(t);case"isoWeek":return Ct(t,{weekStartsOn:+n});case"month":return Vn(t);case"quarter":return Un(t);case"year":return tn(t);default:return t}},endOf:function(t,e){switch(e){case"second":return qn(t);case"minute":return Xn(t);case"hour":return Gn(t);case"day":return Ln(t);case"week":return Zn(t);case"month":return zn(t);case"quarter":return Qn(t);case"year":return Jn(t);default:return t}}})},282:function(t,e,n){n.d(e,{Z:function(){return an}});var i=n(148),r=n(411);
 /*!
 * chartjs-plugin-annotation v3.1.0
 * https://www.chartjs.org/chartjs-plugin-annotation/index