Browse Source

feat(performance): Display duration and ops percentage in breakdown tooltip (#26362)

Hovering the ops breakdown in Transaction Summary in Performance shows the op name but does not display further information. This change is to increase the value of the tooltip by including duration info.
* Added to display duration value and ops percentage in breakdown tooltip
edwardgou-sentry 3 years ago
parent
commit
e99132a8dd
1 changed files with 15 additions and 1 deletions
  1. 15 1
      static/app/utils/discover/fieldRenderers.tsx

+ 15 - 1
static/app/utils/discover/fieldRenderers.tsx

@@ -552,7 +552,21 @@ const spanOperationRelativeBreakdownRenderer = (
         }
         return (
           <div key={operationName} style={{width: toPercent(widthPercentage || 0)}}>
-            <Tooltip title={<div>{operationName}</div>} containerDisplayMode="block">
+            <Tooltip
+              title={
+                <div>
+                  <div>{`${operationName} ${formatPercentage(widthPercentage, 0)}`}</div>
+                  <div>
+                    <Duration
+                      seconds={spanOpDuration / 1000}
+                      fixedDigits={2}
+                      abbreviation
+                    />
+                  </div>
+                </div>
+              }
+              containerDisplayMode="block"
+            >
               <RectangleRelativeOpsBreakdown
                 spanBarHatch={false}
                 style={{