feat(starfish): add vcd measurements (#52233)

Adds a VCD measurement to the following components

- WSV service breakdown chart
- Endpoint view breakdown chart
- Span summary view transaction list
- Span summary panel sample list

---------

Co-authored-by: getsantry[bot] <66042841+getsantry[bot]@users.noreply.github.com>

static/app/views/starfish/views/spanSummaryPage/sampleList/sampleTable/sampleTable.tsx

@@ -4,6 +4,7 @@ import keyBy from 'lodash/keyBy';
 import {Button} from 'sentry/components/button';
 import {t} from 'sentry/locale';
 import {trackAnalytics} from 'sentry/utils/analytics';
+import {VisuallyCompleteWithData} from 'sentry/utils/performanceForSentry';
 import useOrganization from 'sentry/utils/useOrganization';
 import {SpanSamplesTable} from 'sentry/views/starfish/components/samplesTable/spanSamplesTable';
 import {useSpanMetrics} from 'sentry/views/starfish/queries/useSpanMetrics';
@@ -86,20 +87,25 @@ function SampleTable({
 
   return (
     <Fragment>
-      <SpanSamplesTable
-        onMouseLeaveSample={onMouseLeaveSample}
-        onMouseOverSample={onMouseOverSample}
-        highlightedSpanId={highlightedSpanId}
-        data={spans.map(sample => {
-          return {
-            ...sample,
-            op: spanMetrics['span.op'],
-            transaction: transactionsById[sample['transaction.id']],
-          };
-        })}
-        isLoading={isLoading}
-        p95={spanMetrics?.[`p95(${SPAN_SELF_TIME})`]}
-      />
+      <VisuallyCompleteWithData
+        id="SpanSummary.Samples.SampleTable"
+        hasData={spans.length > 0}
+      >
+        <SpanSamplesTable
+          onMouseLeaveSample={onMouseLeaveSample}
+          onMouseOverSample={onMouseOverSample}
+          highlightedSpanId={highlightedSpanId}
+          data={spans.map(sample => {
+            return {
+              ...sample,
+              op: spanMetrics['span.op'],
+              transaction: transactionsById[sample['transaction.id']],
+            };
+          })}
+          isLoading={isLoading}
+          p95={spanMetrics?.[`p95(${SPAN_SELF_TIME})`]}
+        />
+      </VisuallyCompleteWithData>
       <Button onClick={() => refetch()}>{t('Load More Samples')}</Button>
     </Fragment>
   );

static/app/views/starfish/views/spanSummaryPage/spanTransactionsTable.tsx

@@ -15,6 +15,7 @@ import Truncate from 'sentry/components/truncate';
 import {t} from 'sentry/locale';
 import {getFieldRenderer} from 'sentry/utils/discover/fieldRenderers';
 import {Sort} from 'sentry/utils/discover/fields';
+import {VisuallyCompleteWithData} from 'sentry/utils/performanceForSentry';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
 import {
@@ -112,17 +113,22 @@ export function SpanTransactionsTable({
 
   return (
     <Fragment>
-      <GridEditable
-        isLoading={isLoading}
-        data={spanTransactionsWithMetrics}
-        columnOrder={COLUMN_ORDER}
-        columnSortBy={[]}
-        grid={{
-          renderHeadCell: col => renderHeadCell({column: col, sort, location}),
-          renderBodyCell,
-        }}
-        location={location}
-      />
+      <VisuallyCompleteWithData
+        id="SpanSummary.SpanTransactionsTable"
+        hasData={spanTransactionMetrics.length > 0}
+      >
+        <GridEditable
+          isLoading={isLoading}
+          data={spanTransactionsWithMetrics}
+          columnOrder={COLUMN_ORDER}
+          columnSortBy={[]}
+          grid={{
+            renderHeadCell: col => renderHeadCell({column: col, sort, location}),
+            renderBodyCell,
+          }}
+          location={location}
+        />
+      </VisuallyCompleteWithData>
       <Footer>
         {endpoint && (
           <Button

static/app/views/starfish/views/spans/spansTable.tsx

@@ -97,12 +97,15 @@ export default function SpansTable({
     });
   };
 
+  const shouldTrackVCD = Boolean(endpoint);
+
   return (
     <Fragment>
       <VisuallyCompleteWithData
         id="SpansTable"
         hasData={data.length > 0}
         isLoading={isLoading}
+        disabled={shouldTrackVCD}
       >
         <GridEditable
           isLoading={isLoading}

static/app/views/starfish/views/webServiceView/spanGroupBreakdown.tsx

@@ -8,6 +8,7 @@ import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import {tooltipFormatterUsingAggregateOutputType} from 'sentry/utils/discover/charts';
+import {VisuallyCompleteWithData} from 'sentry/utils/performanceForSentry';
 import useOrganization from 'sentry/utils/useOrganization';
 import Chart from 'sentry/views/starfish/components/chart';
 import {
@@ -78,6 +79,8 @@ export function SpanGroupBreakdown({
     });
   };
 
+  const isEndpointBreakdownView = Boolean(transaction);
+
   const handleModuleAreaClick = event => {
     switch (event.seriesName) {
       case 'http':
@@ -100,7 +103,7 @@ export function SpanGroupBreakdown({
       <ChartPadding>
         <Header>
           <ChartLabel>
-            {transaction ? t('Endpoint Breakdown') : t('Service Breakdown')}
+            {isEndpointBreakdownView ? t('Endpoint Breakdown') : t('Service Breakdown')}
           </ChartLabel>
           {hasDropdownFeatureFlag && (
             <CompactSelect
@@ -110,42 +113,48 @@ export function SpanGroupBreakdown({
             />
           )}
         </Header>
-        <Chart
-          statsPeriod="24h"
-          height={340}
-          showLegend
-          data={dataDisplayType === DataDisplayType.PERCENTAGE ? dataAsPercentages : data}
-          dataMax={dataDisplayType === DataDisplayType.PERCENTAGE ? 1 : undefined}
-          durationUnit={dataDisplayType === DataDisplayType.PERCENTAGE ? 0.25 : undefined}
-          start=""
-          end=""
-          errored={errored}
-          loading={isTimeseriesLoading}
-          utc={false}
-          onClick={handleModuleAreaClick}
-          grid={{
-            left: '0',
-            right: '0',
-            top: '20px',
-            bottom: '0',
-          }}
-          definedAxisTicks={6}
-          stacked
-          aggregateOutputFormat={
-            dataDisplayType === DataDisplayType.PERCENTAGE ? 'percentage' : 'duration'
-          }
-          tooltipFormatterOptions={{
-            valueFormatter: value =>
-              tooltipFormatterUsingAggregateOutputType(value, 'percentage'),
-          }}
-          onLegendSelectChanged={event => {
-            trackAnalytics('starfish.web_service_view.breakdown.legend_change', {
-              organization,
-              selected: Object.keys(event.selected).filter(key => event.selected[key]),
-              toggled: event.name,
-            });
-          }}
-        />
+        <VisuallyCompleteWithData id="WSV.SpanGroupBreakdown" hasData={data.length > 0}>
+          <Chart
+            statsPeriod="24h"
+            height={340}
+            showLegend
+            data={
+              dataDisplayType === DataDisplayType.PERCENTAGE ? dataAsPercentages : data
+            }
+            dataMax={dataDisplayType === DataDisplayType.PERCENTAGE ? 1 : undefined}
+            durationUnit={
+              dataDisplayType === DataDisplayType.PERCENTAGE ? 0.25 : undefined
+            }
+            start=""
+            end=""
+            errored={errored}
+            loading={isTimeseriesLoading}
+            utc={false}
+            onClick={handleModuleAreaClick}
+            grid={{
+              left: '0',
+              right: '0',
+              top: '20px',
+              bottom: '0',
+            }}
+            definedAxisTicks={6}
+            stacked
+            aggregateOutputFormat={
+              dataDisplayType === DataDisplayType.PERCENTAGE ? 'percentage' : 'duration'
+            }
+            tooltipFormatterOptions={{
+              valueFormatter: value =>
+                tooltipFormatterUsingAggregateOutputType(value, 'percentage'),
+            }}
+            onLegendSelectChanged={event => {
+              trackAnalytics('starfish.web_service_view.breakdown.legend_change', {
+                organization,
+                selected: Object.keys(event.selected).filter(key => event.selected[key]),
+                toggled: event.name,
+              });
+            }}
+          />
+        </VisuallyCompleteWithData>
       </ChartPadding>
     </FlexRowContainer>
   );