chore: improve duration display

Author: webfansplz

packages/devtools-vite/src/app/components/data/PluginDetailsLoader.vue

@@ -5,6 +5,7 @@ import { useRpc } from '#imports'
 import { useAsyncState } from '@vueuse/core'
 import { computed } from 'vue'
 import { settings } from '~~/app/state/settings'
+import { formatDuration } from '~/utils/format'
 
 const props = defineProps<{
   session: SessionContext
@@ -37,37 +38,13 @@ const processedModules = computed(() => {
   }) ?? []
 })
 
-const hookLoadDuration = computed(() => {
-  const loadMetrics = state.value?.loadMetrics
-  if (!loadMetrics?.length) {
-    return
-  }
-  return loadMetrics.reduce((arc, item) => arc + item.duration, 0)
-})
+const hookLoadDuration = computed(() => state.value?.loadMetrics.reduce((arc, item) => arc + item.duration, 0))
 
-const hookTransformDuration = computed(() => {
-  const transformMetrics = state.value?.transformMetrics
-  if (!transformMetrics?.length) {
-    return
-  }
-  return transformMetrics.reduce((arc, item) => arc + item.duration, 0)
-})
+const hookTransformDuration = computed(() => state.value?.transformMetrics.reduce((arc, item) => arc + item.duration, 0))
 
-const hookResolveIdDuration = computed(() => {
-  const resolveIdMetrics = state.value?.resolveIdMetrics
-  if (!resolveIdMetrics?.length) {
-    return
-  }
-  return resolveIdMetrics.reduce((arc, item) => arc + item.duration, 0)
-})
+const hookResolveIdDuration = computed(() => state.value?.resolveIdMetrics.reduce((arc, item) => arc + item.duration, 0))
 
-const totalDuration = computed(() => {
-  const calls = state.value?.calls
-  if (!calls?.length) {
-    return
-  }
-  return calls.reduce((arc, item) => arc + item.duration, 0)
-})
+const totalDuration = computed(() => state.value?.calls?.reduce((arc, item) => arc + item.duration, 0))
 </script>
 
 <template>
@@ -86,26 +63,26 @@ const totalDuration = computed(() => {
       <div text-xs font-mono flex="~ items-center gap-3" ml2>
         <DisplayDuration
           :duration="hookResolveIdDuration" flex="~ gap-1 items-center"
-          :title="`Resolve Id hooks cost: ${hookResolveIdDuration ?? 0}ms`"
+          :title="`Resolve Id hooks cost: ${formatDuration(hookResolveIdDuration, true)}`"
         >
           <span i-ph-magnifying-glass-duotone inline-block />
         </DisplayDuration>
         <DisplayDuration
           :duration="hookLoadDuration" flex="~ gap-1 items-center"
-          :title="`Load hooks cost: ${hookLoadDuration ?? 0}ms`"
+          :title="`Load hooks cost: ${formatDuration(hookLoadDuration, true)}`"
         >
           <span i-ph-upload-simple-duotone inline-block />
         </DisplayDuration>
         <DisplayDuration
           :duration="hookTransformDuration" flex="~ gap-1 items-center"
-          :title="`Transform hooks cost: ${hookTransformDuration ?? 0}ms`"
+          :title="`Transform hooks cost: ${formatDuration(hookTransformDuration, true)}`"
         >
           <span i-ph-magic-wand-duotone inline-block />
         </DisplayDuration>
         <span op40>|</span>
         <DisplayDuration
           :duration="totalDuration" flex="~ gap-1 items-center"
-          :title="`Total build cost: ${totalDuration ?? 0}ms`"
+          :title="`Total build cost: ${formatDuration(totalDuration, true)}`"
         >
           <span i-ph-clock-duotone inline-block />
         </DisplayDuration>

packages/devtools-vite/src/app/components/display/Duration.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { formatDuration } from '~/utils/format'
 
 const props = withDefaults(
   defineProps<{
@@ -42,17 +43,7 @@ function getDurationColor(ms: number | undefined) {
   return 'color-scale-neutral'
 }
 
-const units = computed(() => {
-  if (ms.value == null)
-    return ['', '-']
-  if (ms.value < 1)
-    return ['<1', 'ms']
-  if (ms.value < 1000)
-    return [ms.value.toFixed(0), 'ms']
-  if (ms.value < 1000 * 60)
-    return [(ms.value / 1000).toFixed(1), 's']
-  return [(ms.value / 1000 / 60).toFixed(1), 'min']
-})
+const units = computed(() => formatDuration(ms.value))
 </script>
 
 <template>

packages/devtools-vite/src/app/components/flowmap/NodePluginInfo.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { formatDuration } from '~/utils/format'
+
 defineProps<{
   modules: number
   calls: number
@@ -22,7 +24,7 @@ defineProps<{
     <span op40>|</span>
     <DisplayDuration
       :duration="duration" flex="~ gap-1 items-center" px1
-      :title="`Total build cost: ${duration}ms`"
+      :title="`Total build cost: ${formatDuration(duration, true)}`"
     >
       <span i-ph-clock-duotone inline-block />
     </DisplayDuration>

packages/devtools-vite/src/app/components/flowmap/PluginFlowTimeline.vue

@@ -23,9 +23,6 @@ function normalizeMetrics(metrics: PluginBuildInfo[]) {
     }
     info.duration += metric.duration
   })
-  if (info.duration === 0) {
-    info.duration = null!
-  }
   return info
 }
 

packages/devtools-vite/src/app/components/modules/BuildMetrics.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { ModuleBuildMetrics } from '~~/shared/types'
 import { computed } from 'vue'
+import { formatDuration } from '~/utils/format'
 
 const props = defineProps<{
   metrics: ModuleBuildMetrics
@@ -11,15 +12,15 @@ const durations = computed(() => {
   const _resolveIds = data?.resolve_ids.reduce((t, node) => {
     t += node.duration
     return t
-  }, 0) ?? 0
+  }, 0)
   const _loads = data?.loads?.reduce((t, node) => {
     t += node.duration
     return t
-  }, 0) ?? 0
+  }, 0)
   const _transforms = data?.transforms.reduce((t, node) => {
     t += node.duration
     return t
-  }, 0) ?? 0
+  }, 0)
   const total = _resolveIds + _loads + _transforms
   return {
     resolveIds: _resolveIds,
@@ -44,26 +45,26 @@ const transformedCodeSize = computed(() => {
   <div text-xs font-mono flex="~ items-center gap-3" ml2>
     <DisplayDuration
       :duration="durations.resolveIds" flex="~ gap-1 items-center"
-      :title="`Resolve Id hooks cost: ${durations.resolveIds}ms`"
+      :title="`Resolve Id hooks cost: ${formatDuration(durations.resolveIds, true)}`"
     >
       <span i-ph-magnifying-glass-duotone inline-block />
     </DisplayDuration>
     <DisplayDuration
       :duration="durations.loads" flex="~ gap-1 items-center"
-      :title="`Load hooks cost: ${durations.loads}ms`"
+      :title="`Load hooks cost: ${formatDuration(durations.loads, true)}`"
     >
       <span i-ph-upload-simple-duotone inline-block />
     </DisplayDuration>
     <DisplayDuration
       :duration="durations.transforms" flex="~ gap-1 items-center"
-      :title="`Transform hooks cost: ${durations.transforms}ms`"
+      :title="`Transform hooks cost: ${formatDuration(durations.transforms, true)}`"
     >
       <span i-ph-magic-wand-duotone inline-block />
     </DisplayDuration>
     <span op40>|</span>
     <DisplayDuration
       :duration="durations.total" flex="~ gap-1 items-center"
-      :title="`Total build cost: ${durations.total}ms`"
+      :title="`Total build cost: ${formatDuration(durations.total, true)}`"
     >
       <span i-ph-clock-duotone inline-block />
     </DisplayDuration>

packages/devtools-vite/src/app/utils/format.ts

@@ -70,3 +70,20 @@ export function normalizeTimestamp(timestamp: number) {
     fractionalSecondDigits: 3,
   })
 }
+
+export function formatDuration(ms: number | null | undefined, stringify?: boolean) {
+  let duration = []
+
+  if (ms == null)
+    duration = ['', '-']
+  else if (ms < 1)
+    duration = ['<1', 'ms']
+  else if (ms < 1000)
+    duration = [ms.toFixed(0), 'ms']
+  else if (ms < 1000 * 60)
+    duration = [(ms / 1000).toFixed(1), 's']
+  else
+    duration = [(ms / 1000 / 60).toFixed(1), 'min']
+
+  return stringify ? duration.join(' ') : duration
+}