fix(workflow): Removing metric stat column from alert list (#19350)

Author: iProgramStuff

src/sentry/static/sentry/app/views/alerts/list/index.tsx

@@ -163,7 +163,6 @@ class IncidentsList extends AsyncComponent<Props, State & AsyncComponent['state'
                 <div>{t('Alert')}</div>
                 {status === 'open' && <div>{t('Graph')}</div>}
               </PaddedTitleAndSparkLine>
-              {status === 'open' && <div>{t('Current Status')}</div>}
               <div>{t('Project')}</div>
               <div>{t('Triggered')}</div>
               {status === 'closed' && <div>{t('Duration')}</div>}

src/sentry/static/sentry/app/views/alerts/list/row.tsx

@@ -7,13 +7,11 @@ import {IconWarning} from 'app/icons';
 import {PanelItem} from 'app/components/panels';
 import {t, tct} from 'app/locale';
 import AsyncComponent from 'app/components/asyncComponent';
-import Count from 'app/components/count';
 import DateTime from 'app/components/dateTime';
 import Duration from 'app/components/duration';
 import ErrorBoundary from 'app/components/errorBoundary';
 import IdBadge from 'app/components/idBadge';
 import Link from 'app/components/links/link';
-import Placeholder from 'app/components/placeholder';
 import Projects from 'app/utils/projects';
 import theme from 'app/utils/theme';
 import TimeSince from 'app/components/timeSince';
@@ -99,14 +97,12 @@ class AlertListRow extends AsyncComponent<Props, State> {
 
   renderBody() {
     const {incident, orgId, projectsLoaded, projects, filteredStatus} = this.props;
-    const {loading, error, stats} = this.state;
+    const {error, stats} = this.state;
     const started = moment(incident.dateStarted);
     const duration = moment
       .duration(moment(incident.dateClosed || new Date()).diff(started))
       .as('seconds');
     const slug = incident.projects[0];
-    const lastEventStatsValue =
-      stats?.eventStats.data[stats.eventStats.data.length - 1]?.[1]?.[0]?.count || 0;
 
     return (
       <ErrorBoundary>
@@ -131,22 +127,6 @@ class AlertListRow extends AsyncComponent<Props, State> {
               )}
             </TitleAndSparkLine>
 
-            {filteredStatus === 'open' && (
-              <NumericColumn>
-                {!loading && !error ? (
-                  <React.Fragment>
-                    <MetricName>
-                      {this.metricPreset?.name ?? t('Custom metric')}
-                      {':'}
-                    </MetricName>
-                    <Count value={lastEventStatsValue} />
-                  </React.Fragment>
-                ) : (
-                  <NumericPlaceholder error={error && <ErrorLoadingStatsIcon />} />
-                )}
-              </NumericColumn>
-            )}
-
             <ProjectBadge
               avatarSize={18}
               project={!projectsLoaded ? {slug} : this.getProject(slug, projects)}
@@ -204,10 +184,6 @@ const Title = styled('span')`
   ${overflowEllipsis}
 `;
 
-const MetricName = styled('span')`
-  margin-right: ${space(0.5)};
-`;
-
 const IncidentLink = styled(Link)`
   padding: 0 ${space(1)};
 `;
@@ -217,20 +193,4 @@ const IncidentPanelItem = styled(PanelItem)`
   padding: ${space(1.5)} ${space(2)} ${space(1.5)} 0;
 `;
 
-const NumericPlaceholder = styled(Placeholder)<{error?: React.ReactNode}>`
-  ${p =>
-    p.error &&
-    `
-    align-items: center;
-    line-height: 1;
-    `}
-  height: 100%;
-`;
-
-const NumericColumn = styled('div')`
-  height: 100%;
-  display: flex;
-  align-items: center;
-`;
-
 export default AlertListRow;

src/sentry/static/sentry/app/views/alerts/list/styles.tsx

@@ -5,7 +5,7 @@ import space from 'app/styles/space';
 const TableLayout = styled('div')<{status: 'open' | 'closed'}>`
   display: grid;
   grid-template-columns: ${p =>
-    p.status === 'open' ? '4fr 2fr 1fr 2fr' : '3fr 2fr 2fr 1fr 2fr'};
+    p.status === 'open' ? '4fr 1fr 2fr' : '3fr 2fr 2fr 1fr 2fr'};
   grid-column-gap: ${space(1.5)};
   width: 100%;
   align-items: center;

tests/js/spec/views/alerts/list/index.spec.jsx

@@ -115,22 +115,6 @@ describe('IncidentsList', function() {
     ).toMatchObject({
       slug: 'a',
     });
-
-    expect(
-      items
-        .at(0)
-        .find('Count')
-        .at(0)
-        .text()
-    ).toBe('0');
-
-    expect(
-      items
-        .at(1)
-        .find('Count')
-        .at(0)
-        .text()
-    ).toBe('42');
   });
 
   it('displays empty state', async function() {