feat(cache): add average transaction duration to sample sidebar (#70445)

New metric readout for avg transaction duration in sample sidebar <img width="746" alt="image" src="https://github.com/getsentry/sentry/assets/44422760/35146610-5c41-4e12-917e-e58310da84a9">
getsentry · May 8, 2024 · 11a80a3 · 11a80a3
1 parent eb4de59
commit 11a80a3
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 1 deletion.
diff --git a/static/app/views/performance/cache/samplePanel/samplePanel.tsx b/static/app/views/performance/cache/samplePanel/samplePanel.tsx
@@ -25,10 +25,12 @@ import {MetricReadout} from 'sentry/views/performance/metricReadout';
 import * as ModuleLayout from 'sentry/views/performance/moduleLayout';
 import DetailPanel from 'sentry/views/starfish/components/detailPanel';
 import {getTimeSpentExplanation} from 'sentry/views/starfish/components/tableCells/timeSpentCell';
-import {useSpanMetrics} from 'sentry/views/starfish/queries/useDiscover';
+import {useMetrics, useSpanMetrics} from 'sentry/views/starfish/queries/useDiscover';
 import {useIndexedSpans} from 'sentry/views/starfish/queries/useIndexedSpans';
 import {useTransactions} from 'sentry/views/starfish/queries/useTransactions';
 import {
+  MetricsFields,
+  type MetricsQueryFilters,
   SpanFunction,
   SpanIndexedField,
   type SpanIndexedQueryFilters,
@@ -76,6 +78,15 @@ export function CacheSamplePanel() {
       referrer: Referrer.SAMPLES_CACHE_METRICS_RIBBON,
     });
 
+  const {data: transactionDurationData, isLoading: isTransactionDurationLoading} =
+    useMetrics({
+      search: MutableSearch.fromQueryObject({
+        transaction: query.transaction,
+      } satisfies MetricsQueryFilters),
+      fields: [`avg(${MetricsFields.TRANSACTION_DURATION})`],
+      enabled: isPanelOpen && Boolean(query.transaction),
+    });
+
   const sampleFilters: SpanIndexedQueryFilters = {
     ...BASE_FILTERS,
     transaction: query.transaction,
@@ -192,6 +203,18 @@ export function CacheSamplePanel() {
                 isLoading={areCacheTransactionMetricsFetching}
               />
 
+              <MetricReadout
+                align="left"
+                title={DataTitles[`avg(${MetricsFields.TRANSACTION_DURATION})`]}
+                value={
+                  transactionDurationData?.[0]?.[
+                    `avg(${MetricsFields.TRANSACTION_DURATION})`
+                  ]
+                }
+                unit={DurationUnit.MILLISECOND}
+                isLoading={isTransactionDurationLoading}
+              />
+
               <MetricReadout
                 align="left"
                 title={DataTitles.cacheMissRate}

diff --git a/static/app/views/starfish/views/spans/types.tsx b/static/app/views/starfish/views/spans/types.tsx
@@ -18,6 +18,7 @@ export type DataKey =
   | 'count'
   | 'avg(http.response_content_length)'
   | 'avg(http.decoded_response_content_length)'
+  | 'avg(transaction.duration)'
   | 'avg(http.response_transfer_size)'
   | 'bundleSize'
   | 'unsuccessfulHTTPCodes'
@@ -44,6 +45,7 @@ export const DataTitles: Record<DataKey, string> = {
   'avg(http.response_content_length)': t('Avg Encoded Size'),
   'avg(http.decoded_response_content_length)': t('Avg Decoded Size'),
   'avg(http.response_transfer_size)': t('Avg Transfer Size'),
+  'avg(transaction.duration)': t('Avg Txn Duration'),
   'avg(cache.item_size)': t('Avg Value Size'),
   unsuccessfulHTTPCodes: t('Response Codes (3XX, 4XX, 5XX)'),
   httpCodeBreakdown: t('Response Code Breakdown'),