chore(perf): Remove Web Service View (#69578)

These UI experiments had their time in the sun, but we are moving in
another direction!

static/app/routes.tsx

@@ -1713,20 +1713,6 @@ function buildRoutes() {
       component={make(() => import('sentry/views/starfish'))}
       withOrgPath
     >
-      <IndexRoute
-        component={make(() => import('sentry/views/starfish/views/webServiceView'))}
-      />
-      <Route path="endpoint-overview/">
-        <IndexRoute
-          component={make(
-            () => import('sentry/views/starfish/views/webServiceView/endpointOverview')
-          )}
-        />
-        <Route
-          path="span/:groupId/"
-          component={make(() => import('sentry/views/starfish/views/spanSummaryPage'))}
-        />
-      </Route>
       <Redirect from="database/" to="/performance/database" />
       <Route path="appStartup/">
         <IndexRoute

static/app/views/starfish/components/samplesTable/transactionSamplesTable.tsx

@@ -1,272 +0,0 @@
-import type {CSSProperties} from 'react';
-import {Fragment} from 'react';
-import styled from '@emotion/styled';
-
-import {DateTime} from 'sentry/components/dateTime';
-import type {GridColumnHeader} from 'sentry/components/gridEditable';
-import GridEditable, {COL_WIDTH_UNDEFINED} from 'sentry/components/gridEditable';
-import Link from 'sentry/components/links/link';
-import QuestionTooltip from 'sentry/components/questionTooltip';
-import {t} from 'sentry/locale';
-import type {NewQuery} from 'sentry/types/organization';
-import EventView from 'sentry/utils/discover/eventView';
-import {getFieldRenderer} from 'sentry/utils/discover/fieldRenderers';
-import {SPAN_OP_RELATIVE_BREAKDOWN_FIELD} from 'sentry/utils/discover/fields';
-import {DiscoverDatasets} from 'sentry/utils/discover/types';
-import {generateLinkToEventInTraceView} from 'sentry/utils/discover/urls';
-import {MutableSearch} from 'sentry/utils/tokenizeSearch';
-import {useLocation} from 'sentry/utils/useLocation';
-import useOrganization from 'sentry/utils/useOrganization';
-import {normalizeUrl} from 'sentry/utils/withDomainRequired';
-import {DurationComparisonCell} from 'sentry/views/starfish/components/samplesTable/common';
-import useErrorSamples from 'sentry/views/starfish/components/samplesTable/useErrorSamples';
-import {DurationCell} from 'sentry/views/starfish/components/tableCells/durationCell';
-import {
-  OverflowEllipsisTextContainer,
-  TextAlignLeft,
-  TextAlignRight,
-} from 'sentry/views/starfish/components/textAlign';
-import {DataTitles} from 'sentry/views/starfish/views/spans/types';
-import type {SampleFilter} from 'sentry/views/starfish/views/webServiceView/endpointOverview';
-
-type Keys =
-  | 'id'
-  | 'profile_id'
-  | 'timestamp'
-  | 'transaction.duration'
-  | 'avg_comparison'
-  | 'span_ops_breakdown.relative'
-  | 'http.status_code'
-  | 'transaction.status';
-type TableColumnHeader = GridColumnHeader<Keys>;
-
-type Props = {
-  data: DataRow[];
-  isLoading: boolean;
-  queryConditions: string[];
-  sampleFilter: SampleFilter;
-  setHighlightedId: (string) => void;
-  averageDuration?: number;
-  highlightedId?: string;
-};
-
-export type DataRow = {
-  'http.status_code': number;
-  id: string;
-  profile_id: string;
-  project: string;
-  'spans.browser': number;
-  'spans.db': number;
-  'spans.http': number;
-  'spans.resource': number;
-  'spans.ui': number;
-  timestamp: string;
-  trace: string;
-  'transaction.duration': number;
-  'transaction.status': string;
-};
-
-export function TransactionSamplesTable({
-  queryConditions,
-  sampleFilter,
-  data,
-  isLoading,
-  averageDuration,
-  setHighlightedId,
-  highlightedId,
-}: Props) {
-  const location = useLocation();
-  const organization = useOrganization();
-  const query = new MutableSearch(queryConditions);
-
-  const savedQuery: NewQuery = {
-    id: undefined,
-    name: 'Endpoint Overview Samples',
-    query: query.formatString(),
-    fields: [],
-    dataset: DiscoverDatasets.DISCOVER,
-    version: 2,
-  };
-
-  const columnOrder: TableColumnHeader[] = [
-    {
-      key: 'id',
-      name: 'Event ID',
-      width: 100,
-    },
-    ...(sampleFilter === 'ALL'
-      ? [
-          {
-            key: 'profile_id',
-            name: 'Profile ID',
-            width: 140,
-          } as TableColumnHeader,
-          {
-            key: SPAN_OP_RELATIVE_BREAKDOWN_FIELD,
-            name: 'Operation Duration',
-            width: 180,
-          } as TableColumnHeader,
-          {
-            key: 'timestamp',
-            name: 'Timestamp',
-            width: 230,
-          } as TableColumnHeader,
-          {
-            key: 'transaction.duration',
-            name: DataTitles.duration,
-            width: 100,
-          } as TableColumnHeader,
-          {
-            key: 'avg_comparison',
-            name: 'Compared to Average',
-            width: 100,
-          } as TableColumnHeader,
-        ]
-      : [
-          {
-            key: 'http.status_code',
-            name: 'Response Code',
-            width: COL_WIDTH_UNDEFINED,
-          } as TableColumnHeader,
-          {
-            key: 'transaction.status',
-            name: 'Status',
-            width: COL_WIDTH_UNDEFINED,
-          } as TableColumnHeader,
-          {
-            key: 'timestamp',
-            name: 'Timestamp',
-            width: 230,
-          } as TableColumnHeader,
-        ]),
-  ];
-
-  const eventView = EventView.fromNewQueryWithLocation(savedQuery, location);
-  const {isLoading: isErrorSamplesLoading, data: errorSamples} =
-    useErrorSamples(eventView);
-
-  function renderHeadCell(column: GridColumnHeader): React.ReactNode {
-    if (column.key === 'avg_comparison' || column.key === 'transaction.duration') {
-      return (
-        <TextAlignRight>
-          <OverflowEllipsisTextContainer>{column.name}</OverflowEllipsisTextContainer>
-        </TextAlignRight>
-      );
-    }
-
-    if (column.key === SPAN_OP_RELATIVE_BREAKDOWN_FIELD) {
-      return (
-        <Fragment>
-          {column.name}
-          <StyledIconQuestion
-            size="xs"
-            position="top"
-            title={t(
-              `Span durations are summed over the course of an entire transaction. Any overlapping spans are only counted once.`
-            )}
-          />
-        </Fragment>
-      );
-    }
-
-    return <OverflowEllipsisTextContainer>{column.name}</OverflowEllipsisTextContainer>;
-  }
-
-  function renderBodyCell(column: TableColumnHeader, row: DataRow): React.ReactNode {
-    const commonProps = {
-      style: (row.id === highlightedId
-        ? {fontWeight: 'bold'}
-        : {}) satisfies CSSProperties,
-      onMouseEnter: () => setHighlightedId(row.id),
-    };
-
-    if (column.key === 'id') {
-      return (
-        <Link
-          {...commonProps}
-          to={generateLinkToEventInTraceView({
-            organization,
-            location,
-            eventId: row.id,
-            timestamp: row.timestamp,
-            traceSlug: row.trace,
-            projectSlug: row.project || row['project.name'],
-          })}
-        >
-          {row.id.slice(0, 8)}
-        </Link>
-      );
-    }
-
-    if (column.key === 'profile_id') {
-      return row.profile_id ? (
-        <Link
-          {...commonProps}
-          to={normalizeUrl(
-            `/organizations/${organization.slug}/profiling/profile/${row['project.name']}/${row.profile_id}/flamegraph/`
-          )}
-        >
-          {row.profile_id.slice(0, 8)}
-        </Link>
-      ) : (
-        <div {...commonProps}>(no value)</div>
-      );
-    }
-
-    if (column.key === 'transaction.duration') {
-      return <DurationCell milliseconds={row['transaction.duration']} />;
-    }
-
-    if (column.key === 'timestamp') {
-      return <DateTime {...commonProps} date={row[column.key]} year timeZone seconds />;
-    }
-
-    if (column.key === 'avg_comparison') {
-      return (
-        <DurationComparisonContainer {...commonProps}>
-          <DurationComparisonCell
-            duration={row['transaction.duration']}
-            compareToDuration={averageDuration ?? 0}
-          />
-        </DurationComparisonContainer>
-      );
-    }
-
-    if (column.key === SPAN_OP_RELATIVE_BREAKDOWN_FIELD) {
-      return getFieldRenderer(column.key, {})(row, {
-        location,
-        organization,
-        eventView,
-      });
-    }
-
-    return <TextAlignLeft {...commonProps}>{row[column.key]}</TextAlignLeft>;
-  }
-
-  return (
-    <div onMouseLeave={() => setHighlightedId(undefined)}>
-      <GridEditable
-        isLoading={sampleFilter === 'ALL' ? isLoading : isErrorSamplesLoading}
-        data={sampleFilter === 'ALL' ? (data as DataRow[]) : (errorSamples as DataRow[])}
-        columnOrder={columnOrder}
-        columnSortBy={[]}
-        location={location}
-        grid={{
-          renderHeadCell,
-          renderBodyCell,
-        }}
-      />
-    </div>
-  );
-}
-
-const DurationComparisonContainer = styled('div')`
-  text-align: right;
-  width: 100%;
-  display: inline-block;
-`;
-
-const StyledIconQuestion = styled(QuestionTooltip)`
-  position: relative;
-  left: 4px;
-`;

static/app/views/starfish/components/samplesTable/useSlowMedianFastSamplesQuery.tsx

@@ -6,7 +6,22 @@ import type {QueryFieldValue} from 'sentry/utils/discover/fields';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
-import type {DataRow} from 'sentry/views/starfish/components/samplesTable/transactionSamplesTable';
+
+type DataRow = {
+  'http.status_code': number;
+  id: string;
+  profile_id: string;
+  project: string;
+  'spans.browser': number;
+  'spans.db': number;
+  'spans.http': number;
+  'spans.resource': number;
+  'spans.ui': number;
+  timestamp: string;
+  trace: string;
+  'transaction.duration': number;
+  'transaction.status': string;
+};
 
 const LIMIT_PER_POPULATION = 2;
 

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

@@ -1,9 +1,11 @@
 import type {Location} from 'history';
 
+import {t} from 'sentry/locale';
 import {defined} from 'sentry/utils';
 import {EMPTY_OPTION_VALUE} from 'sentry/utils/tokenizeSearch';
 import {ModuleName, SpanMetricsField} from 'sentry/views/starfish/types';
-import {NULL_SPAN_CATEGORY} from 'sentry/views/starfish/views/webServiceView/spanGroupBreakdownContainer';
+
+const NULL_SPAN_CATEGORY = t('custom');
 
 const {SPAN_DESCRIPTION, SPAN_OP, SPAN_DOMAIN, SPAN_ACTION, SPAN_MODULE} =
   SpanMetricsField;

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

@@ -7,8 +7,5 @@ export function extractRoute(location: Location) {
   if (location.pathname.match(/^\/starfish\/database\//)) {
     return 'database';
   }
-  if (location.pathname.match(/^\/starfish\/endpoint-overview\//)) {
-    return 'endpoint-overview';
-  }
   return null;
 }

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

@@ -3,9 +3,7 @@ import {t} from 'sentry/locale';
 export const ROUTE_NAMES = {
   api: t('API Calls'),
   database: t('Database'),
-  'endpoint-overview': t('Endpoint Overview'),
   'span-summary': t('Span Summary'),
-  'web-service': t('Web Service'),
   'app-startup': t('App Starts'),
   pageload: t('Screen Loads'),
   responsiveness: t('Responsiveness'),

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

@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
 
 import {getInterval} from 'sentry/components/charts/utils';
+import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {PageFilters} from 'sentry/types/core';
 import type {Series} from 'sentry/types/echarts';
@@ -27,7 +28,8 @@ import {
   getThroughputChartTitle,
 } from 'sentry/views/starfish/views/spans/types';
 import type {ModuleFilters} from 'sentry/views/starfish/views/spans/useModuleFilters';
-import {NULL_SPAN_CATEGORY} from 'sentry/views/starfish/views/webServiceView/spanGroupBreakdownContainer';
+
+const NULL_SPAN_CATEGORY = t('custom');
 
 const {SPAN_SELF_TIME, SPAN_MODULE, SPAN_DESCRIPTION, SPAN_DOMAIN} = SpanMetricsField;
 

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

@@ -1,512 +0,0 @@
-import {Fragment, useEffect, useState} from 'react';
-import styled from '@emotion/styled';
-import type {Location, LocationDescriptorObject} from 'history';
-import isEqual from 'lodash/isEqual';
-import omit from 'lodash/omit';
-import * as qs from 'query-string';
-
-import GuideAnchor from 'sentry/components/assistant/guideAnchor';
-import {Button} from 'sentry/components/button';
-import Checkbox from 'sentry/components/checkbox';
-import type {GridColumn, GridColumnHeader} from 'sentry/components/gridEditable';
-import GridEditable, {COL_WIDTH_UNDEFINED} from 'sentry/components/gridEditable';
-import type {Alignments} from 'sentry/components/gridEditable/sortLink';
-import SortLink from 'sentry/components/gridEditable/sortLink';
-import Link from 'sentry/components/links/link';
-import LoadingIndicator from 'sentry/components/loadingIndicator';
-import Pagination from 'sentry/components/pagination';
-import BaseSearchBar from 'sentry/components/searchBar';
-import {Tooltip} from 'sentry/components/tooltip';
-import {IconIssues} from 'sentry/icons';
-import {t} from 'sentry/locale';
-import {space} from 'sentry/styles/space';
-import type {Organization} from 'sentry/types/organization';
-import {trackAnalytics} from 'sentry/utils/analytics';
-import type {TableData, TableDataRow} from 'sentry/utils/discover/discoverQuery';
-import DiscoverQuery from 'sentry/utils/discover/discoverQuery';
-import type {MetaType} from 'sentry/utils/discover/eventView';
-import type EventView from 'sentry/utils/discover/eventView';
-import {isFieldSortable} from 'sentry/utils/discover/eventView';
-import {getFieldRenderer} from 'sentry/utils/discover/fieldRenderers';
-import {getAggregateAlias, RateUnit} from 'sentry/utils/discover/fields';
-import {normalizeUrl} from 'sentry/utils/withDomainRequired';
-import TopResultsIndicator from 'sentry/views/discover/table/topResultsIndicator';
-import type {TableColumn} from 'sentry/views/discover/table/types';
-import {ThroughputCell} from 'sentry/views/starfish/components/tableCells/throughputCell';
-import {TimeSpentCell} from 'sentry/views/starfish/components/tableCells/timeSpentCell';
-import type {IssueCounts} from 'sentry/views/starfish/queries/useIssueCounts';
-import {useIssueCounts} from 'sentry/views/starfish/queries/useIssueCounts';
-import {TIME_SPENT_IN_SERVICE} from 'sentry/views/starfish/utils/generatePerformanceEventView';
-import {DataTitles} from 'sentry/views/starfish/views/spans/types';
-
-const COLUMN_TITLES = [
-  t('Endpoint'),
-  DataTitles.throughput,
-  DataTitles.avg,
-  DataTitles.errorCount,
-  DataTitles.timeSpent,
-  t('Issues'),
-];
-
-type Props = {
-  eventView: EventView;
-  inactiveTransactions: string[];
-  location: Location;
-  organization: Organization;
-  setError: (msg: string | undefined) => void;
-  setInactiveTransactions: (endpoints: string[]) => void;
-  setTransactionsList: (endpoints: string[]) => void;
-  transactionsList: string[];
-};
-
-export type TableColumnHeader = GridColumnHeader<keyof TableDataRow> & {
-  column?: TableColumn<keyof TableDataRow>['column']; // TODO - remove this once gridEditable is properly typed
-};
-
-function QueryIssueCounts({
-  setTransactionsList,
-  transactionsList,
-  eventView,
-  tableData,
-  children,
-}) {
-  const transactions: Map<string, string> = new Map();
-  const newTransactionsList: string[] = [];
-  transactions.set('is:unresolved', '');
-  if (tableData) {
-    tableData.data.forEach(row => {
-      transactions.set(`transaction:${row.transaction} is:unresolved`, row.transaction);
-      newTransactionsList.push(row.transaction);
-    });
-  }
-  useEffect(() => {
-    if (!isEqual(transactionsList, newTransactionsList)) {
-      setTransactionsList(newTransactionsList);
-    }
-  });
-  const {data, isLoading} = useIssueCounts(eventView, Array.from(transactions.keys()));
-  const result: Map<string, IssueCounts> = new Map();
-  for (const [query, count] of data ? Object.entries(data) : []) {
-    if (transactions.has(query)) {
-      result.set(transactions.get(query)!, count);
-    }
-  }
-
-  return children({issueCounts: result, isIssueLoading: isLoading});
-}
-
-function EndpointList({
-  eventView,
-  location,
-  organization,
-  setError,
-  setTransactionsList,
-  transactionsList,
-  inactiveTransactions,
-  setInactiveTransactions,
-}: Props) {
-  const [widths, setWidths] = useState<number[]>([]);
-  const [_eventView, setEventView] = useState<EventView>(eventView);
-  const overallEventView = _eventView.clone();
-  overallEventView.query = '';
-  const overallFields = overallEventView.fields;
-  overallEventView.fields = overallFields.filter(
-    field => field.field !== 'transaction' && field.field !== 'http.method'
-  );
-
-  // Effect to keep the parent eventView in sync with the child, so that chart zoom and time period can be accounted for.
-  useEffect(() => {
-    setEventView(prevEventView => {
-      const cloned = eventView.clone();
-      cloned.query = prevEventView.query;
-      return cloned;
-    });
-  }, [eventView]);
-
-  function renderBodyCell(
-    tableData: TableData | null,
-    column: TableColumnHeader,
-    dataRow: TableDataRow,
-    _deltaColumnMap: Record<string, string>,
-    issueCounts: Map<string, null | number>
-  ): React.ReactNode {
-    if (!tableData || !tableData.meta) {
-      return dataRow[column.key];
-    }
-    const tableMeta = tableData.meta;
-
-    const field = String(column.key);
-    const fieldRenderer = getFieldRenderer(field, tableMeta, false);
-    const rendered = fieldRenderer(dataRow, {organization, location});
-    const index = tableData.data.indexOf(dataRow);
-
-    function toggleCheckbox(transaction: string) {
-      let newInactiveTransactions = inactiveTransactions.slice();
-      if (inactiveTransactions.indexOf(transaction) === -1) {
-        newInactiveTransactions.push(transaction);
-      } else {
-        newInactiveTransactions = inactiveTransactions.filter(
-          name => name !== transaction
-        );
-      }
-      setInactiveTransactions(newInactiveTransactions);
-    }
-
-    if (field === 'transaction') {
-      const method = dataRow['http.method'];
-      if (method === undefined && dataRow.transaction === 'Overall') {
-        return (
-          <span>
-            <TopResultsIndicator count={tableData.data.length + 2} index={6} />
-            <TransactionColumn>
-              <TransactionCheckbox
-                checked={
-                  inactiveTransactions.indexOf(dataRow.transaction as string) === -1
-                }
-                onChange={() => toggleCheckbox(dataRow.transaction as string)}
-              />
-              <TransactionText>{dataRow.transaction}</TransactionText>
-            </TransactionColumn>
-          </span>
-        );
-      }
-      const endpointName =
-        method && !dataRow.transaction.toString().startsWith(method.toString())
-          ? `${method} ${dataRow.transaction}`
-          : dataRow.transaction;
-
-      return (
-        <TransactionColumn>
-          <TransactionCheckbox
-            checked={inactiveTransactions.indexOf(dataRow.transaction as string) === -1}
-            onChange={() => toggleCheckbox(dataRow.transaction as string)}
-          />
-          <Link
-            to={normalizeUrl(
-              `/organizations/${
-                organization.slug
-              }/starfish/endpoint-overview/?${qs.stringify({
-                endpoint: dataRow.transaction,
-                'http.method': dataRow['http.method'],
-                statsPeriod: eventView.statsPeriod,
-                project: eventView.project,
-                start: eventView.start,
-                end: eventView.end,
-              })}`
-            )}
-            style={{display: `block`, width: `100%`}}
-            onClick={() => {
-              trackAnalytics('starfish.web_service_view.endpoint_list.endpoint.clicked', {
-                organization,
-                endpoint: dataRow.transaction,
-              });
-            }}
-          >
-            <TopResultsIndicator count={tableData.data.length + 2} index={index} />
-            <TransactionText>{endpointName}</TransactionText>
-          </Link>
-        </TransactionColumn>
-      );
-    }
-
-    if (field === TIME_SPENT_IN_SERVICE) {
-      const cumulativeTime = Number(dataRow['sum(transaction.duration)']);
-      const cumulativeTimePercentage = Number(dataRow[TIME_SPENT_IN_SERVICE]);
-      return (
-        <TimeSpentCell percentage={cumulativeTimePercentage} total={cumulativeTime} />
-      );
-    }
-
-    // TODO: This can be removed if/when the backend returns this field's type
-    // as `"rate"` and its unit as `"1/second"
-    if (field === 'tps()') {
-      return (
-        <ThroughputCell rate={dataRow[field] as number} unit={RateUnit.PER_SECOND} />
-      );
-    }
-
-    if (field === 'project') {
-      return null;
-    }
-
-    if (field === 'issues') {
-      const transactionName = dataRow.transaction as string;
-      const method = dataRow['http.method'];
-      let issueCount = issueCounts.has(transactionName)
-        ? issueCounts.get(transactionName)
-        : undefined;
-      if (issueCount === null) {
-        issueCount = 0;
-      }
-      if (method === undefined && transactionName === 'Overall') {
-        issueCount = issueCounts.get('');
-      }
-      return (
-        <IssueButton
-          to={`/issues/?${qs.stringify({
-            project: eventView.project,
-            query: `is:unresolved transaction:"${dataRow.transaction}"`,
-            statsPeriod: eventView.statsPeriod,
-            start: eventView.start,
-            end: eventView.end,
-          })}`}
-        >
-          <IconIssues size="sm" />
-          <IssueLabel>
-            {issueCount !== undefined ? issueCount : <LoadingIndicator size={20} mini />}
-            {issueCount === 100 && '+'}
-          </IssueLabel>
-        </IssueButton>
-      );
-    }
-
-    const fieldName = getAggregateAlias(field);
-    const value = dataRow[fieldName];
-    if (tableMeta[fieldName] === 'integer' && typeof value === 'number' && value > 999) {
-      return (
-        <Tooltip
-          title={value.toLocaleString()}
-          containerDisplayMode="block"
-          position="right"
-        >
-          {rendered}
-        </Tooltip>
-      );
-    }
-
-    return rendered;
-  }
-
-  function combineTableDataWithOverall(
-    tableData: TableData | null,
-    overallTableData: TableData | null
-  ): TableData {
-    const overallRow = overallTableData?.data?.[0];
-    const combinedData = Object.assign({}, tableData);
-    if (overallRow && tableData?.data) {
-      overallRow.transaction = 'Overall';
-      combinedData.data = [overallRow, ...tableData.data];
-    }
-    return combinedData;
-  }
-
-  function renderBodyCellWithData(
-    tableData: TableData | null,
-    issueCounts: Map<string, null | number>
-  ) {
-    const deltaColumnMap: Record<string, string> = {};
-    if (tableData?.data?.[0]) {
-      Object.keys(tableData.data[0]).forEach(col => {
-        if (
-          col.startsWith(
-            'equation|(percentile_range(transaction.duration,0.95,lessOrEquals'
-          )
-        ) {
-          deltaColumnMap['avg()'] = col;
-        }
-      });
-    }
-
-    return (column: TableColumnHeader, dataRow: TableDataRow): React.ReactNode =>
-      renderBodyCell(tableData, column, dataRow, deltaColumnMap, issueCounts);
-  }
-
-  function renderHeadCell(
-    tableMeta: TableData['meta'],
-    column: TableColumnHeader,
-    title: React.ReactNode
-  ): React.ReactNode {
-    let align: Alignments = 'right';
-    if (title === 'Endpoint') {
-      align = 'left';
-    }
-    const field = {
-      field: column.column?.kind === 'equation' ? (column.key as string) : column.name,
-      width: column.width,
-    };
-
-    const aggregateAliasTableMeta: MetaType = {};
-    if (tableMeta) {
-      Object.keys(tableMeta).forEach(key => {
-        aggregateAliasTableMeta[getAggregateAlias(key)] = tableMeta[key];
-      });
-    }
-
-    function generateSortLink(): LocationDescriptorObject | undefined {
-      if (!tableMeta) {
-        return undefined;
-      }
-
-      const nextEventView = eventView.sortOnField(field, aggregateAliasTableMeta);
-      const queryStringObject = nextEventView.generateQueryStringObject();
-
-      return {
-        ...location,
-        query: {...location.query, sort: queryStringObject.sort},
-      };
-    }
-    const currentSort = eventView.sortForField(field, aggregateAliasTableMeta);
-    const canSort = isFieldSortable(field, aggregateAliasTableMeta);
-
-    const currentSortKind = currentSort ? currentSort.kind : undefined;
-
-    const sortLink = (
-      <SortLink
-        align={align}
-        title={title || field.field}
-        direction={currentSortKind}
-        canSort={canSort}
-        generateSortLink={generateSortLink}
-        onClick={() => {
-          trackAnalytics('starfish.web_service_view.endpoint_list.header.clicked', {
-            organization,
-            direction: currentSortKind === 'desc' ? 'asc' : 'desc',
-            header: title || field.field,
-          });
-        }}
-      />
-    );
-
-    return sortLink;
-  }
-
-  function renderHeadCellWithMeta(tableMeta: TableData['meta']) {
-    const newColumnTitles = COLUMN_TITLES;
-    return (column: TableColumnHeader, index: number): React.ReactNode =>
-      renderHeadCell(tableMeta, column, newColumnTitles[index]);
-  }
-
-  function handleResizeColumn(columnIndex: number, nextColumn: GridColumn) {
-    setWidths(prevWidths =>
-      prevWidths.map((width, index) =>
-        index === columnIndex ? Number(nextColumn.width ?? COL_WIDTH_UNDEFINED) : width
-      )
-    );
-  }
-
-  function handleSearch(query: string) {
-    const clonedEventView = eventView.clone();
-
-    // Default to fuzzy finding for now
-    clonedEventView.query += `transaction:*${query}*`;
-    setEventView(clonedEventView);
-
-    trackAnalytics('starfish.web_service_view.endpoint_list.search', {
-      organization,
-      query,
-    });
-  }
-
-  const eventViewColumns = eventView.getColumns();
-  eventViewColumns.push({
-    key: 'issues',
-    name: 'Issues',
-    type: 'number',
-    width: -1,
-  } as TableColumn<React.ReactText>);
-  const columnOrder = eventViewColumns
-    .filter(
-      (col: TableColumn<React.ReactText>) =>
-        col.name !== 'project' &&
-        col.name !== 'http.method' &&
-        col.name !== 'total.transaction_duration' &&
-        col.name !== 'sum(transaction.duration)'
-    )
-    .map((col: TableColumn<React.ReactText>, i: number) => {
-      if (typeof widths[i] === 'number') {
-        return {...col, width: widths[i]};
-      }
-      return col;
-    });
-
-  const columnSortBy = eventView.getSorts();
-
-  return (
-    <GuideAnchor target="performance_table" position="top-start">
-      <StyledSearchBar placeholder={t('Search for endpoints')} onSearch={handleSearch} />
-      <DiscoverQuery
-        eventView={overallEventView}
-        orgSlug={organization.slug}
-        location={omit(location, 'cursor')}
-        setError={error => setError(error?.message)}
-        referrer="api.starfish.web-service-overall"
-        queryExtras={{dataset: 'metrics', cursor: ''}}
-        limit={1}
-      >
-        {({tableData: overallTableData}) => (
-          <DiscoverQuery
-            eventView={_eventView}
-            orgSlug={organization.slug}
-            location={location}
-            setError={error => setError(error?.message)}
-            referrer="api.starfish.endpoint-list"
-            queryExtras={{dataset: 'metrics'}}
-            limit={5}
-          >
-            {({pageLinks, isLoading, tableData}) => (
-              <Fragment>
-                <QueryIssueCounts
-                  setTransactionsList={setTransactionsList}
-                  transactionsList={transactionsList}
-                  eventView={eventView}
-                  tableData={tableData}
-                >
-                  {({issueCounts, isIssueLoading}) => (
-                    <GridEditable
-                      isLoading={isLoading && isIssueLoading}
-                      data={
-                        tableData && overallTableData
-                          ? combineTableDataWithOverall(tableData, overallTableData).data
-                          : []
-                      }
-                      columnOrder={columnOrder}
-                      columnSortBy={columnSortBy}
-                      grid={{
-                        onResizeColumn: handleResizeColumn,
-                        renderHeadCell: renderHeadCellWithMeta(tableData?.meta),
-                        renderBodyCell: renderBodyCellWithData(tableData, issueCounts),
-                      }}
-                      location={location}
-                    />
-                  )}
-                </QueryIssueCounts>
-
-                <Pagination pageLinks={pageLinks} />
-              </Fragment>
-            )}
-          </DiscoverQuery>
-        )}
-      </DiscoverQuery>
-    </GuideAnchor>
-  );
-}
-
-export default EndpointList;
-
-const StyledSearchBar = styled(BaseSearchBar)`
-  margin-bottom: ${space(2)};
-`;
-
-const TransactionColumn = styled('div')`
-  display: flex;
-`;
-
-const TransactionText = styled('div')`
-  margin-top: ${space(0.5)};
-`;
-
-const TransactionCheckbox = styled(Checkbox)`
-  top: ${space(0.5)};
-  margin-right: ${space(1)};
-`;
-
-const IssueButton = styled(Button)`
-  width: 100%;
-  margin-left: auto;
-`;
-
-const IssueLabel = styled('div')`
-  padding-left: ${space(1)};
-  margin-left: auto;
-  position: relative;
-`;

static/app/views/starfish/views/webServiceView/endpointOverview/index.tsx

@@ -1,578 +0,0 @@
-import {Fragment, useState} from 'react';
-import {browserHistory} from 'react-router';
-import {useTheme} from '@emotion/react';
-import styled from '@emotion/styled';
-import * as qs from 'query-string';
-
-import {Breadcrumbs} from 'sentry/components/breadcrumbs';
-import {Button} from 'sentry/components/button';
-import {getInterval} from 'sentry/components/charts/utils';
-import * as Layout from 'sentry/components/layouts/thirds';
-import PageFilterBar from 'sentry/components/organizations/pageFilterBar';
-import {PerformanceLayoutBodyRow} from 'sentry/components/performance/layouts';
-import Placeholder from 'sentry/components/placeholder';
-import QuestionTooltip from 'sentry/components/questionTooltip';
-import {SegmentedControl} from 'sentry/components/segmentedControl';
-import {t} from 'sentry/locale';
-import {space} from 'sentry/styles/space';
-import type {Series, SeriesDataUnit} from 'sentry/types/echarts';
-import {IssueCategory} from 'sentry/types/group';
-import type {NewQuery} from 'sentry/types/organization';
-import {defined} from 'sentry/utils';
-import {tooltipFormatterUsingAggregateOutputType} from 'sentry/utils/discover/charts';
-import {useDiscoverQuery} from 'sentry/utils/discover/discoverQuery';
-import EventView from 'sentry/utils/discover/eventView';
-import {RateUnit} from 'sentry/utils/discover/fields';
-import {DiscoverDatasets} from 'sentry/utils/discover/types';
-import {formatRate} from 'sentry/utils/formatters';
-import {MutableSearch} from 'sentry/utils/tokenizeSearch';
-import {useLocation} from 'sentry/utils/useLocation';
-import useOrganization from 'sentry/utils/useOrganization';
-import usePageFilters from 'sentry/utils/usePageFilters';
-import {normalizeUrl} from 'sentry/utils/withDomainRequired';
-import {SidebarSpacer} from 'sentry/views/performance/transactionSummary/utils';
-import {AVG_COLOR, ERRORS_COLOR, THROUGHPUT_COLOR} from 'sentry/views/starfish/colors';
-import Chart, {
-  ChartType,
-  computeAxisMax,
-  useSynchronizeCharts,
-} from 'sentry/views/starfish/components/chart';
-import StarfishDatePicker from 'sentry/views/starfish/components/datePicker';
-import {TransactionSamplesTable} from 'sentry/views/starfish/components/samplesTable/transactionSamplesTable';
-import useSlowMedianFastSamplesQuery from 'sentry/views/starfish/components/samplesTable/useSlowMedianFastSamplesQuery';
-import {StarfishPageFiltersContainer} from 'sentry/views/starfish/components/starfishPageFiltersContainer';
-import {ModuleName} from 'sentry/views/starfish/types';
-import {STARFISH_CHART_INTERVAL_FIDELITY} from 'sentry/views/starfish/utils/constants';
-import {getDateConditions} from 'sentry/views/starfish/utils/getDateConditions';
-import {useRoutingContext} from 'sentry/views/starfish/utils/routingContext';
-import {useEventsStatsQuery} from 'sentry/views/starfish/utils/useEventsStatsQuery';
-import SpansTable from 'sentry/views/starfish/views/spans/spansTable';
-import {DataTitles} from 'sentry/views/starfish/views/spans/types';
-import {getSampleChartSymbol} from 'sentry/views/starfish/views/spanSummaryPage/sampleList/durationChart/getSampleChartSymbol';
-import IssuesTable from 'sentry/views/starfish/views/webServiceView/endpointOverview/issuesTable';
-import {SpanGroupBreakdownContainer} from 'sentry/views/starfish/views/webServiceView/spanGroupBreakdownContainer';
-
-const SPANS_TABLE_LIMIT = 5;
-
-export type SampleFilter = 'ALL' | '500s';
-
-type State = {
-  samplesFilter: SampleFilter;
-  spansFilter: ModuleName;
-};
-
-function transformData(data) {
-  const transformedSeries: {[yAxisName: string]: Series} = {};
-  if (defined(data)) {
-    Object.keys(data).forEach(yAxis => {
-      transformedSeries[yAxis] = {
-        seriesName: yAxis,
-        data:
-          data[yAxis]?.data.map(datum => {
-            return {
-              name: datum[0] * 1000,
-              value: datum[1][0].count,
-            } as SeriesDataUnit;
-          }) ?? [],
-      };
-    });
-  }
-  return transformedSeries;
-}
-
-export default function EndpointOverview() {
-  const location = useLocation();
-  const routingContext = useRoutingContext();
-  const organization = useOrganization();
-  const [highlightedId, setHighlightedId] = useState<string | undefined>(undefined);
-
-  const {endpoint, 'http.method': httpMethod} = location.query;
-  const transaction = endpoint
-    ? Array.isArray(endpoint)
-      ? endpoint[0]
-      : endpoint
-    : undefined;
-  const method = httpMethod
-    ? Array.isArray(httpMethod)
-      ? httpMethod[0]
-      : httpMethod
-    : undefined;
-  const pageFilter = usePageFilters();
-
-  const [state, setState] = useState<State>({
-    spansFilter: ModuleName.ALL,
-    samplesFilter: 'ALL',
-  });
-  const [issueFilter, setIssueFilter] = useState<IssueCategory | 'ALL'>('ALL');
-
-  const queryConditions = [
-    'has:http.method',
-    'transaction.op:http.server',
-    `transaction:${transaction}`,
-    `http.method:${method}`,
-  ];
-
-  const query = new MutableSearch(queryConditions);
-
-  const savedQuery: NewQuery = {
-    id: undefined,
-    name: t('Endpoint Overview'),
-    query: query.formatString(),
-    fields: ['tps()', 'avg(transaction.duration)', 'http_error_count()'],
-    dataset: DiscoverDatasets.METRICS,
-    start: pageFilter.selection.datetime.start ?? undefined,
-    end: pageFilter.selection.datetime.end ?? undefined,
-    range: pageFilter.selection.datetime.period ?? undefined,
-    version: 2,
-  };
-
-  const eventView = EventView.fromNewQueryWithLocation(savedQuery, location);
-
-  const {data: totals, isLoading: isTotalsLoading} = useDiscoverQuery({
-    eventView,
-    orgSlug: organization.slug,
-    location,
-  });
-
-  function generateLine(average, name): Series {
-    return {
-      seriesName: name,
-      data: [],
-      markLine: {
-        data: [{valueDim: 'x', yAxis: average}],
-        symbol: ['none', 'none'],
-        lineStyle: {
-          color: theme.gray400,
-        },
-        emphasis: {disabled: true},
-        label: {
-          position: 'insideEndBottom',
-          formatter: () => name,
-          fontSize: 14,
-          color: theme.chartLabel,
-          backgroundColor: theme.chartOther,
-        },
-      },
-    };
-  }
-
-  function renderSidebarCharts(sampleData, loading, results) {
-    if (loading || !results) {
-      return null;
-    }
-    // Force label to be Requests
-    const throughputResults = {seriesName: 'Requests', data: results['tps()'].data};
-    const percentileData: Series = {
-      seriesName: t('Average'),
-      data: results['avg(transaction.duration)'].data,
-    };
-    const avgLine = generateLine(
-      defined(totals) && totals.data
-        ? totals.data[0]['avg(transaction.duration)']
-        : undefined,
-      'duration'
-    );
-    const tpsLine = generateLine(
-      defined(totals) && totals.data ? totals.data[0]['tps()'] : undefined,
-      'throughput'
-    );
-
-    return (
-      <StickySidebar>
-        <Fragment>
-          <Header>
-            <ChartLabel>{DataTitles.avg}</ChartLabel>
-            <QuestionTooltip
-              size="sm"
-              position="right"
-              title={t('The average duration of requests in the selected period')}
-            />
-          </Header>
-          <ChartSummaryValue
-            isLoading={isTotalsLoading}
-            value={
-              defined(totals)
-                ? t(
-                    '%sms',
-                    (totals.data[0]['avg(transaction.duration)'] as number).toFixed(2)
-                  )
-                : undefined
-            }
-          />
-          <Chart
-            height={80}
-            data={[percentileData, avgLine]}
-            loading={loading}
-            grid={{
-              left: '8px',
-              right: '0',
-              top: '8px',
-              bottom: '0',
-            }}
-            disableXAxis
-            definedAxisTicks={2}
-            type={ChartType.LINE}
-            chartColors={[AVG_COLOR]}
-            scatterPlot={sampleData}
-            tooltipFormatterOptions={{
-              valueFormatter: value =>
-                tooltipFormatterUsingAggregateOutputType(value, 'duration'),
-            }}
-          />
-          <Header>
-            <ChartLabel>{DataTitles.throughput}</ChartLabel>
-            <QuestionTooltip
-              size="sm"
-              position="right"
-              title={t(
-                'the number of requests made to this endpoint per second in the selected period'
-              )}
-            />
-          </Header>
-          <ChartSummaryValue
-            isLoading={isTotalsLoading}
-            value={
-              defined(totals)
-                ? t('%s/s', (totals.data[0]['tps()'] as number).toFixed(2))
-                : undefined
-            }
-          />
-          <Chart
-            height={80}
-            data={[throughputResults, tpsLine]}
-            loading={loading}
-            type={ChartType.LINE}
-            definedAxisTicks={2}
-            disableXAxis
-            chartColors={[THROUGHPUT_COLOR]}
-            aggregateOutputFormat="rate"
-            rateUnit={RateUnit.PER_SECOND}
-            grid={{
-              left: '8px',
-              right: '0',
-              top: '8px',
-              bottom: '0',
-            }}
-            tooltipFormatterOptions={{
-              valueFormatter: value => formatRate(value, RateUnit.PER_SECOND),
-            }}
-          />
-          <SidebarSpacer />
-          <Header>
-            <ChartLabel>{DataTitles.errorCount}</ChartLabel>
-            <QuestionTooltip
-              size="sm"
-              position="right"
-              title={t(
-                'the total number of requests that resulted in 5XX response codes over a given time range'
-              )}
-            />
-          </Header>
-          <ChartSummaryValue
-            isLoading={isTotalsLoading}
-            value={
-              defined(totals)
-                ? tooltipFormatterUsingAggregateOutputType(
-                    totals.data[0]['http_error_count()'] as number,
-                    'integer'
-                  )
-                : undefined
-            }
-          />
-          <Chart
-            height={80}
-            data={[results['http_error_count()']]}
-            loading={loading}
-            grid={{
-              left: '8px',
-              right: '0',
-              top: '8px',
-              bottom: '0',
-            }}
-            definedAxisTicks={2}
-            type={ChartType.LINE}
-            chartColors={[ERRORS_COLOR]}
-          />
-          <SidebarSpacer />
-        </Fragment>
-      </StickySidebar>
-    );
-  }
-
-  const handleViewAllEventsClick = () => {
-    const issuesQuery = new MutableSearch([
-      ...(issueFilter === 'ALL' ? [] : [`issue.category:${issueFilter}`]),
-      `transaction:${transaction}`,
-      `http.method:${method}`,
-    ]);
-    browserHistory.push({
-      pathname: `/issues/?${qs.stringify({
-        ...getDateConditions(pageFilter.selection),
-        query: issuesQuery.formatString(),
-      })}`,
-    });
-  };
-
-  const yAxis = ['tps()', 'http_error_count()', 'avg(transaction.duration)'];
-  const {isLoading: loading, data: results} = useEventsStatsQuery({
-    eventView: EventView.fromNewQueryWithPageFilters(
-      {
-        name: '',
-        fields: ['transaction', yAxis[0]],
-        yAxis,
-        query: query.formatString(),
-        dataset: DiscoverDatasets.METRICS,
-        version: 2,
-        interval: getInterval(
-          pageFilter.selection.datetime,
-          STARFISH_CHART_INTERVAL_FIDELITY
-        ),
-      },
-      pageFilter.selection
-    ),
-    excludeOther: true,
-    referrer: 'api.starfish-web-service.starfish-endpoint-overview',
-    initialData: {},
-  });
-  const transformedResults = transformData(results);
-
-  const axisMax =
-    !loading && results
-      ? computeAxisMax([transformedResults['avg(transaction.duration)']])
-      : undefined;
-  const theme = useTheme();
-  const {isLoading, data, aggregatesData} = useSlowMedianFastSamplesQuery(
-    EventView.fromNewQueryWithLocation(
-      {
-        id: undefined,
-        name: 'Endpoint Overview Samples',
-        query: query.formatString(),
-        fields: [],
-        dataset: DiscoverDatasets.DISCOVER,
-        version: 2,
-      },
-      location
-    ),
-    axisMax
-  );
-  const sampleData: Series[] = data.map(
-    ({timestamp, 'transaction.duration': duration, id}) => {
-      const {symbol, color} = getSampleChartSymbol(
-        duration,
-        aggregatesData?.['avg(transaction.duration)'],
-        theme
-      );
-      return {
-        data: [
-          {
-            name: timestamp,
-            value: duration,
-          },
-        ],
-        symbol,
-        color,
-        symbolSize: id === highlightedId ? 17 : 12,
-        seriesName: id.substring(0, 8),
-      };
-    }
-  );
-  useSynchronizeCharts();
-
-  return (
-    <StarfishPageFiltersContainer>
-      <Layout.Page>
-        <Layout.Header>
-          <Layout.HeaderContent>
-            <Breadcrumbs
-              crumbs={[
-                {
-                  label: t('Web Service'),
-                  to: normalizeUrl(
-                    `/organizations/${organization.slug}/${routingContext.baseURL}/`
-                  ),
-                },
-                {
-                  label: t('Endpoint Overview'),
-                },
-              ]}
-            />
-            <Layout.Title>{`${method} ${transaction}`}</Layout.Title>
-          </Layout.HeaderContent>
-        </Layout.Header>
-
-        <Layout.Body>
-          <SearchContainerWithFilterAndMetrics>
-            <PageFilterBar condensed>
-              <StarfishDatePicker />
-            </PageFilterBar>
-          </SearchContainerWithFilterAndMetrics>
-
-          <Layout.Main>
-            <StyledRow minSize={200}>
-              <SpanGroupBreakdownContainer
-                transaction={transaction as string}
-                // transactionMethod={method}
-              />
-            </StyledRow>
-            <SegmentedControlContainer>
-              <SegmentedControl
-                size="xs"
-                aria-label={t('Filter Spans')}
-                value={state.spansFilter}
-                onChange={key => setState({...state, spansFilter: key})}
-              >
-                <SegmentedControl.Item key="">{t('All Spans')}</SegmentedControl.Item>
-                <SegmentedControl.Item key="http">{t('http')}</SegmentedControl.Item>
-                <SegmentedControl.Item key="db">{t('db')}</SegmentedControl.Item>
-                <SegmentedControl.Item key="cache">{t('cache')}</SegmentedControl.Item>
-              </SegmentedControl>
-            </SegmentedControlContainer>
-            <SpanMetricsTable
-              filter={state.spansFilter}
-              transaction={transaction}
-              method={method}
-            />
-            <RowContainer>
-              <SegmentedControlContainer>
-                <SegmentedControl
-                  size="xs"
-                  aria-label={t('Filter events')}
-                  value={state.samplesFilter}
-                  onChange={key => setState({...state, samplesFilter: key})}
-                >
-                  <SegmentedControl.Item key="ALL">
-                    {t('Sample Events')}
-                  </SegmentedControl.Item>
-                  <SegmentedControl.Item key="500s">{t('5XXs')}</SegmentedControl.Item>
-                </SegmentedControl>
-              </SegmentedControlContainer>
-              <TransactionSamplesTable
-                queryConditions={queryConditions}
-                sampleFilter={state.samplesFilter}
-                data={data}
-                setHighlightedId={setHighlightedId}
-                highlightedId={highlightedId}
-                isLoading={isLoading}
-                averageDuration={aggregatesData?.['avg(transaction.duration)']}
-              />
-            </RowContainer>
-            <SegmentedControlContainer>
-              <SegmentedControl
-                size="xs"
-                aria-label={t('Filter issue types')}
-                value={issueFilter}
-                onChange={key => setIssueFilter(key)}
-              >
-                <SegmentedControl.Item key="ALL">{t('All Issues')}</SegmentedControl.Item>
-                <SegmentedControl.Item key={IssueCategory.ERROR}>
-                  {t('Errors Only')}
-                </SegmentedControl.Item>
-                <SegmentedControl.Item key={IssueCategory.PERFORMANCE}>
-                  {t('Performance Only')}
-                </SegmentedControl.Item>
-              </SegmentedControl>
-              <Button size="sm" onClick={handleViewAllEventsClick}>
-                {t('View All')}
-              </Button>
-            </SegmentedControlContainer>
-            <IssuesTable
-              issueCategory={issueFilter === 'ALL' ? undefined : issueFilter}
-              httpMethod={method as string}
-              transactionName={transaction}
-            />
-          </Layout.Main>
-          <Layout.Side>
-            {renderSidebarCharts(sampleData, loading, transformedResults)}
-            <SidebarSpacer />
-          </Layout.Side>
-        </Layout.Body>
-      </Layout.Page>
-    </StarfishPageFiltersContainer>
-  );
-}
-
-function SpanMetricsTable({
-  filter,
-  transaction,
-  method,
-}: {
-  filter: ModuleName;
-  transaction: string | undefined;
-  method?: string;
-}) {
-  return (
-    <SpansTable
-      moduleName={filter ?? ModuleName.ALL}
-      sort={{
-        field: 'time_spent_percentage()',
-        kind: 'desc',
-      }}
-      endpoint={transaction}
-      method={method}
-      limit={SPANS_TABLE_LIMIT}
-    />
-  );
-}
-
-type ChartValueProps = {
-  isLoading: boolean;
-  value: React.ReactNode;
-};
-
-function ChartSummaryValue({isLoading, value}: ChartValueProps) {
-  if (isLoading) {
-    return <Placeholder height="24px" />;
-  }
-
-  return <ChartValue>{value}</ChartValue>;
-}
-
-const ChartValue = styled('div')`
-  font-size: ${p => p.theme.fontSizeExtraLarge};
-`;
-
-const SearchContainerWithFilterAndMetrics = styled('div')`
-  display: grid;
-  grid-template-rows: auto auto auto;
-  gap: ${space(2)};
-  margin-bottom: ${space(2)};
-
-  @media (min-width: ${p => p.theme.breakpoints.small}) {
-    grid-template-rows: auto;
-    grid-template-columns: auto 1fr auto;
-  }
-`;
-
-const RowContainer = styled('div')`
-  padding-bottom: ${space(4)};
-`;
-
-const StyledRow = styled(PerformanceLayoutBodyRow)`
-  margin-bottom: ${space(4)};
-`;
-
-const StickySidebar = styled('div')`
-  position: sticky;
-  top: 200px;
-`;
-
-const SegmentedControlContainer = styled('div')`
-  margin-bottom: ${space(2)};
-  display: flex;
-  justify-content: space-between;
-  height: 32px;
-  align-items: center;
-`;
-
-const ChartLabel = styled('div')`
-  ${p => p.theme.text.cardTitle}
-`;
-
-const Header = styled('div')`
-  padding: 0 ${space(1)} 0 0;
-  min-height: 24px;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  gap: ${space(1)};
-`;

static/app/views/starfish/views/webServiceView/endpointOverview/issuesTable.tsx

@@ -1,57 +0,0 @@
-import {useMemo} from 'react';
-
-import GroupList from 'sentry/components/issues/groupList';
-import type {IssueCategory} from 'sentry/types/group';
-import useOrganization from 'sentry/utils/useOrganization';
-import usePageFilters from 'sentry/utils/usePageFilters';
-import {getDateConditions} from 'sentry/views/starfish/utils/getDateConditions';
-
-type Props = {
-  httpMethod?: string;
-  issueCategory?: IssueCategory;
-  transactionName?: string;
-};
-
-function IssuesTable(props: Props) {
-  const {transactionName, issueCategory, httpMethod} = props;
-  const organization = useOrganization();
-  const pageFilters = usePageFilters();
-  const {statsPeriod, start, end} = getDateConditions(pageFilters.selection);
-  const projects = pageFilters.selection.projects;
-
-  const queryConditions: string[] = [
-    'is:unresolved',
-    ...(issueCategory ? [`issue.category:${issueCategory}`] : ['']),
-    ...(transactionName ? [`transaction:${transactionName}`] : ['']),
-    ...(httpMethod ? [`http.method:${httpMethod}`] : ['']),
-  ];
-  const queryConditionString = queryConditions.join(' ');
-
-  const queryParams = useMemo(() => {
-    const dateConditions = statsPeriod ? {statsPeriod} : {start, end};
-    return {
-      project: projects[0],
-      query: queryConditionString,
-      limit: 5,
-      sort: 'new',
-      ...dateConditions,
-    };
-  }, [queryConditionString, statsPeriod, start, end, projects]);
-
-  return (
-    <GroupList
-      orgSlug={organization.slug}
-      withChart={false}
-      withColumns={[]}
-      narrowGroups
-      endpointPath={`/organizations/${organization.slug}/issues/`}
-      query={queryConditionString}
-      queryParams={queryParams}
-      withPagination={false}
-      useTintRow
-      source="starfish-endpoint-summary"
-    />
-  );
-}
-
-export default IssuesTable;