fix(starfish): type more things to prevent undefined errors (#53009)

Adds some missing types in a bunch of places to help prevent reading
from undefined and give better intellisense.

static/app/views/starfish/queries/types.tsx

@@ -14,7 +14,7 @@ export type IndexedSpan = {
   domain: string;
   group: string;
   module: string;
-  op: string;
+  'span.op': string;
   'span.self_time': number;
   span_id: string;
   timestamp: string;

static/app/views/starfish/queries/useSpanTransactionMetrics.tsx

@@ -22,6 +22,7 @@ export type SpanTransactionMetrics = {
   'sum(span.self_time)': number;
   'time_spent_percentage(local)': number;
   transaction: string;
+  'transaction.method': string;
   transactionMethod: string;
 };
 

static/app/views/starfish/utils/useEventsStatsQuery.tsx

@@ -1,4 +1,4 @@
-import {EventsStats, MultiSeriesEventsStats} from 'sentry/types';
+import {MultiSeriesEventsStats} from 'sentry/types';
 import EventView, {encodeSort} from 'sentry/utils/discover/eventView';
 import {
   DiscoverQueryProps,
@@ -14,20 +14,17 @@ import {
 export function useEventsStatsQuery({
   eventView,
   enabled,
-  initialData,
   referrer,
+  initialData,
 }: {
   eventView: EventView;
   enabled?: boolean;
-  initialData?: any;
+  initialData?: MultiSeriesEventsStats;
   referrer?: string;
 }) {
   const location = useLocation();
   const organization = useOrganization();
-  const {isLoading, data, isError} = useGenericDiscoverQuery<
-    EventsStats | MultiSeriesEventsStats,
-    DiscoverQueryProps
-  >({
+  const result = useGenericDiscoverQuery<MultiSeriesEventsStats, DiscoverQueryProps>({
     route: 'events-stats',
     eventView,
     location,
@@ -50,9 +47,6 @@ export function useEventsStatsQuery({
     },
     referrer,
   });
-  return {
-    isLoading,
-    data: isLoading && initialData ? initialData : data,
-    isError,
-  };
+
+  return {...result, data: result.isLoading ? initialData : result.data};
 }

static/app/views/starfish/utils/useSpansQuery.tsx

@@ -1,6 +1,6 @@
 import moment from 'moment';
 
-import {useDiscoverQuery} from 'sentry/utils/discover/discoverQuery';
+import {TableData, useDiscoverQuery} from 'sentry/utils/discover/discoverQuery';
 import EventView, {
   encodeSort,
   EventsMetaType,
@@ -109,10 +109,12 @@ function useWrappedDiscoverTimeseriesQuery<T>({
     referrer,
   });
 
-  const data: T =
-    result.isLoading && initialData
-      ? initialData
-      : processDiscoverTimeseriesResult(result.data, eventView);
+  const isFetchingOrLoading = result.isLoading || result.isFetching;
+  const defaultData = initialData ?? undefined;
+
+  const data: T = isFetchingOrLoading
+    ? defaultData
+    : processDiscoverTimeseriesResult(result.data, eventView);
 
   return {
     ...result,
@@ -169,9 +171,15 @@ export function useWrappedDiscoverQuery<T>({
   };
 }
 
-type Interval = {[key: string]: any; interval: string; group?: string};
+type Interval = {interval: string; group?: string};
 
-function processDiscoverTimeseriesResult(result, eventView: EventView) {
+function processDiscoverTimeseriesResult(
+  result: TableData | undefined,
+  eventView: EventView
+) {
+  if (!result) {
+    return undefined;
+  }
   if (!eventView.yAxis) {
     return [];
   }

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

@@ -39,7 +39,7 @@ type Row = {
 
 type Props = {
   sort: ValidSort;
-  span: Pick<IndexedSpan, 'group'>;
+  span: Pick<IndexedSpan, 'group' | 'span.op'>;
   endpoint?: string;
   endpointMethod?: string;
   onClickTransaction?: (row: Row) => void;
@@ -180,7 +180,9 @@ function TransactionCell({span, row, endpoint, endpointMethod, location}: CellPr
   );
 }
 
-const getColumnOrder = (span: Pick<IndexedSpan, 'group'>): TableColumnHeader[] => [
+const getColumnOrder = (
+  span: Pick<IndexedSpan, 'group' | 'span.op'>
+): TableColumnHeader[] => [
   {
     key: 'transaction',
     name: 'Found In Endpoints',

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

@@ -8,6 +8,7 @@ import Duration from 'sentry/components/duration';
 import GridEditable, {
   COL_WIDTH_UNDEFINED,
   GridColumn,
+  GridColumnHeader,
 } from 'sentry/components/gridEditable';
 import SortLink, {Alignments} from 'sentry/components/gridEditable/sortLink';
 import Link from 'sentry/components/links/link';
@@ -50,6 +51,10 @@ type Props = {
   setError: (msg: string | undefined) => void;
 };
 
+export type TableColumnHeader = GridColumnHeader<keyof TableDataRow> & {
+  column?: TableColumn<keyof TableDataRow>['column']; // TODO - remove this once gridEditable is properly typed
+};
+
 function EndpointList({eventView, location, organization, setError}: Props) {
   const [widths, setWidths] = useState<number[]>([]);
   const [_eventView, setEventView] = useState<EventView>(eventView);
@@ -66,7 +71,7 @@ function EndpointList({eventView, location, organization, setError}: Props) {
 
   function renderBodyCell(
     tableData: TableData | null,
-    column: TableColumn<keyof TableDataRow>,
+    column: TableColumnHeader,
     dataRow: TableDataRow,
     _deltaColumnMap: Record<string, string>
   ): React.ReactNode {
@@ -170,15 +175,13 @@ function EndpointList({eventView, location, organization, setError}: Props) {
       });
     }
 
-    return (
-      column: TableColumn<keyof TableDataRow>,
-      dataRow: TableDataRow
-    ): React.ReactNode => renderBodyCell(tableData, column, dataRow, deltaColumnMap);
+    return (column: TableColumnHeader, dataRow: TableDataRow): React.ReactNode =>
+      renderBodyCell(tableData, column, dataRow, deltaColumnMap);
   }
 
   function renderHeadCell(
     tableMeta: TableData['meta'],
-    column: TableColumn<keyof TableDataRow>,
+    column: TableColumnHeader,
     title: React.ReactNode
   ): React.ReactNode {
     let align: Alignments = 'right';
@@ -186,7 +189,7 @@ function EndpointList({eventView, location, organization, setError}: Props) {
       align = 'left';
     }
     const field = {
-      field: column.column.kind === 'equation' ? (column.key as string) : column.name,
+      field: column.column?.kind === 'equation' ? (column.key as string) : column.name,
       width: column.width,
     };
 
@@ -237,7 +240,7 @@ function EndpointList({eventView, location, organization, setError}: Props) {
 
   function renderHeadCellWithMeta(tableMeta: TableData['meta']) {
     const newColumnTitles = COLUMN_TITLES;
-    return (column: TableColumn<keyof TableDataRow>, index: number): React.ReactNode =>
+    return (column: TableColumnHeader, index: number): React.ReactNode =>
       renderHeadCell(tableMeta, column, newColumnTitles[index]);
   }
 
@@ -300,8 +303,8 @@ function EndpointList({eventView, location, organization, setError}: Props) {
               columnSortBy={columnSortBy}
               grid={{
                 onResizeColumn: handleResizeColumn,
-                renderHeadCell: renderHeadCellWithMeta(tableData?.meta) as any,
-                renderBodyCell: renderBodyCellWithData(tableData) as any,
+                renderHeadCell: renderHeadCellWithMeta(tableData?.meta),
+                renderBodyCell: renderBodyCellWithData(tableData),
               }}
               location={location}
             />

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

@@ -7,6 +7,7 @@ import {LineChartSeries} from 'sentry/components/charts/lineChart';
 import {CompactSelect, SelectOption} from 'sentry/components/compactSelect';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
+import {EChartClickHandler} from 'sentry/types/echarts';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import {tooltipFormatterUsingAggregateOutputType} from 'sentry/utils/discover/charts';
 import {VisuallyCompleteWithData} from 'sentry/utils/performanceForSentry';
@@ -26,8 +27,8 @@ type Props = {
   isCumulativeTimeLoading: boolean;
   isTableLoading: boolean;
   isTimeseriesLoading: boolean;
+  onDisplayTypeChange: (value: SelectOption<DataDisplayType>['value']) => void;
   options: SelectOption<DataDisplayType>[];
-  setDataDisplayType: any;
   tableData: DataRow[];
   topSeriesData: LineChartSeries[];
   totalCumulativeTime: number;
@@ -42,7 +43,7 @@ export function SpanGroupBreakdown({
   errored,
   options,
   dataDisplayType,
-  setDataDisplayType,
+  onDisplayTypeChange,
 }: Props) {
   const organization = useOrganization();
   const hasDropdownFeatureFlag = organization.features.includes(
@@ -76,7 +77,7 @@ export function SpanGroupBreakdown({
   }
 
   const handleChange = (option: SelectOption<DataDisplayType>) => {
-    setDataDisplayType(option.value);
+    onDisplayTypeChange(option.value);
     trackAnalytics('starfish.web_service_view.breakdown.display_change', {
       organization,
       display: option.value,
@@ -85,9 +86,9 @@ export function SpanGroupBreakdown({
 
   const isEndpointBreakdownView = Boolean(transaction);
 
-  const handleModuleAreaClick = event => {
+  const handleModuleAreaClick: EChartClickHandler = event => {
     let spansLink;
-    const spansLinkQueryParams = {};
+    const spansLinkQueryParams: Record<string, string | string[]> = {};
     if (event.seriesName === 'db') {
       spansLink = `/starfish/database/`;
     } else if (event.seriesName === 'Other') {

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

@@ -7,7 +7,7 @@ import {SelectOption} from 'sentry/components/compactSelect';
 import Panel from 'sentry/components/panels/panel';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
-import {PageFilters} from 'sentry/types';
+import {EventsStats, PageFilters} from 'sentry/types';
 import {Series, SeriesDataUnit} from 'sentry/types/echarts';
 import {defined} from 'sentry/utils';
 import {useDiscoverQuery} from 'sentry/utils/discover/discoverQuery';
@@ -106,7 +106,7 @@ export function SpanGroupBreakdownContainer({transaction, transactionMethod}: Pr
     ),
     enabled: true,
     referrer: 'api.starfish-web-service.span-category-breakdown-timeseries',
-    initialData: [],
+    initialData: {},
   });
 
   const totalValues = cumulativeTime?.data[0]?.[`sum(${SPAN_SELF_TIME})`]
@@ -134,7 +134,7 @@ export function SpanGroupBreakdownContainer({transaction, transactionMethod}: Pr
       });
     }
 
-    if (otherValue > 0 && OTHER_SPAN_GROUP_MODULE in topData) {
+    if (otherValue > 0 && topData && OTHER_SPAN_GROUP_MODULE in topData) {
       transformedData.push({
         cumulativeTime: otherValue,
         group: {
@@ -160,7 +160,7 @@ export function SpanGroupBreakdownContainer({transaction, transactionMethod}: Pr
       });
 
       Object.keys(topData).forEach(key => {
-        const seriesData = topData?.[key];
+        const seriesData: EventsStats = topData?.[key];
         const label = key === '' ? NULL_SPAN_CATEGORY : key;
         seriesByDomain[label].data =
           seriesData?.data.map(datum => {
@@ -186,7 +186,7 @@ export function SpanGroupBreakdownContainer({transaction, transactionMethod}: Pr
         errored={isError}
         options={options}
         dataDisplayType={dataDisplayType}
-        setDataDisplayType={setDataDisplayType}
+        onDisplayTypeChange={setDataDisplayType}
       />
     </StyledPanel>
   );