Add total time to key metrics

parsecph · Dec 1, 2023 · 3dfb288 · 3dfb288
1 parent bba2bca
commit 3dfb288
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 11 deletions.
diff --git a/packages/ui/src/results/ResultHistory/ResultHistoryStats/ResultHistoryStats.tsx b/packages/ui/src/results/ResultHistory/ResultHistoryStats/ResultHistoryStats.tsx
@@ -87,11 +87,11 @@ export const ResultHistoryStats = ({
           <ul
             className="grid gap-3"
             style={{
-              gridTemplateColumns: `repeat(${numberOfStats + 1}, 90px)`
+              gridTemplateColumns: `repeat(${numberOfStats + 1}, 80px)`
             }}
           >
             <li key="successPct" className="inline-flex items-center">
-              <Typography variant="caption">Successful %</Typography>
+              <Typography variant="caption">Success (%)</Typography>
             </li>
 
             {Object.keys(RESULT_STAT_TYPES).map((key) => (
@@ -145,7 +145,7 @@ export const ResultHistoryStats = ({
             <ul
               className="grid gap-3"
               style={{
-                gridTemplateColumns: `repeat(${numberOfStats + 1}, 90px)`
+                gridTemplateColumns: `repeat(${numberOfStats + 1}, 80px)`
               }}
             >
               <li key="success" className="inline-flex items-center">

diff --git a/packages/ui/src/results/ResultStats/ResultStats.tsx b/packages/ui/src/results/ResultStats/ResultStats.tsx
@@ -45,13 +45,18 @@ export const ResultStats = ({
       key={'stats-list'}
       className="grid grid-cols-3 md:flex items-center justify-center gap-4"
     >
-      {stats.map(({ label, value }, index) => (
+      {stats.map(({ label, value, unit }, index) => (
         <li
           key={index}
           className="flex flex-col items-center border-l border-gray-500 border-opacity-20 first:border-0 p-2"
         >
-          <Typography variant="body2">{value} ms</Typography>
-          <Typography variant="caption" className="opacity-50">
+          <Typography variant="body2">
+            {value} {unit}
+          </Typography>
+          <Typography
+            variant="caption"
+            className="!text-[0.7rem] lg:!text-xs opacity-50"
+          >
             {label}
           </Typography>
         </li>

diff --git a/packages/ui/src/shared/util/getLogStats.ts b/packages/ui/src/shared/util/getLogStats.ts
@@ -10,11 +10,12 @@ const { mean, q5, q95, q99, stdDev } = mathUtils;
 export const RESULT_STAT_TYPES: {
   [key: string]: string;
 } = {
-  MEAN: 'Average (Mean)',
-  STD_DEV: 'Std. Deviation',
-  FIFTH_PERCENTILE: '5th percentile',
-  NINETY_FIFTH_PERCENTILE: '95th percentile',
-  NINETY_NINTH_PERCENTILE: '99th percentile'
+  MEAN: 'Average (ms)',
+  STD_DEV: 'Std. dev (ms)',
+  FIFTH_PERCENTILE: 'p5 (ms)',
+  NINETY_FIFTH_PERCENTILE: 'p95 (ms)',
+  NINETY_NINTH_PERCENTILE: 'p99 (ms)',
+  TOTAL_TIME: 'Total time (s)'
 };
 
 export const getLogStats = (logs: Array<ClobbrLogItem>) => {
@@ -23,6 +24,8 @@ export const getLogStats = (logs: Array<ClobbrLogItem>) => {
     .filter((log) => isNumber(log.metas.duration))
     .map((log) => log.metas.duration as number);
 
+  const totalDuration = qualifiedDurations.reduce((acc, curr) => acc + curr, 0);
+  const totalDurationInSeconds = totalDuration / 1000;
   const meanValue = mean(qualifiedDurations);
   const stdDevValue = stdDev(qualifiedDurations);
   const q5Value = q5(qualifiedDurations);
@@ -32,28 +35,39 @@ export const getLogStats = (logs: Array<ClobbrLogItem>) => {
   return [
     {
       value: formatNumber(meanValue),
+      unit: 'ms',
       label: RESULT_STAT_TYPES.MEAN,
       colorClass: getDurationColorClass(meanValue)
     },
     {
       value: formatNumber(stdDevValue),
+      unit: 'ms',
       label: RESULT_STAT_TYPES.STD_DEV,
       colorClass: getDurationColorClass(stdDevValue)
     },
     {
       value: formatNumber(q5Value),
+      unit: 'ms',
       label: RESULT_STAT_TYPES.FIFTH_PERCENTILE,
       colorClass: getDurationColorClass(q5Value)
     },
     {
       value: formatNumber(q95Value),
+      unit: 'ms',
       label: RESULT_STAT_TYPES.NINETY_FIFTH_PERCENTILE,
       colorClass: getDurationColorClass(q95Value)
     },
     {
       value: formatNumber(q99Value),
+      unit: 'ms',
       label: RESULT_STAT_TYPES.NINETY_NINTH_PERCENTILE,
       colorClass: getDurationColorClass(q99Value)
+    },
+    {
+      value: formatNumber(totalDurationInSeconds),
+      unit: 's',
+      label: 'Total time',
+      colorClass: getDurationColorClass(0) // Always green
     }
   ];
 };