ref(perf sidebar): removed extra apdex, added settings btn and moved status breakdown up (#24607)

* removed extra apdex, moved status breakdown up, added settings btn

* move misery back under vitals

* added to apdex tooltip

* moved status breakdown below misery

Co-authored-by: Dora Chan <dora.lchan@gmail.com>

src/sentry/static/sentry/app/views/performance/data.tsx

@@ -216,7 +216,7 @@ type TermFormatter = (organization: LightWeightOrganization) => string;
 const PERFORMANCE_TERMS: Record<PERFORMANCE_TERM, TermFormatter> = {
   apdex: () =>
     t(
-      'Apdex is the ratio of both satisfactory and tolerable response times to all response times.'
+      'Apdex is the ratio of both satisfactory and tolerable response times to all response times. To adjust the tolerable threshold, go to performance settings.'
     ),
   tpm: () => t('TPM is the number of recorded transaction events per minute.'),
   throughput: () =>

src/sentry/static/sentry/app/views/performance/transactionSummary/content.tsx

@@ -250,6 +250,11 @@ class SummaryContent extends React.Component<Props, State> {
               transactionName={transactionName}
               eventView={eventView}
             />
+            <StatusBreakdown
+              eventView={eventView}
+              organization={organization}
+              location={location}
+            />
             <SidebarSpacer />
             <SidebarCharts
               organization={organization}
@@ -259,12 +264,6 @@ class SummaryContent extends React.Component<Props, State> {
               eventView={eventView}
             />
             <SidebarSpacer />
-            <StatusBreakdown
-              eventView={eventView}
-              organization={organization}
-              location={location}
-            />
-            <SidebarSpacer />
             <Tags
               generateUrl={this.generateTagUrl}
               totalValues={totalCount}

src/sentry/static/sentry/app/views/performance/transactionSummary/header.tsx

@@ -3,11 +3,13 @@ import styled from '@emotion/styled';
 import {Location} from 'history';
 
 import Feature from 'app/components/acl/feature';
+import Button from 'app/components/button';
 import ButtonBar from 'app/components/buttonBar';
 import {CreateAlertFromViewButton} from 'app/components/createAlertButton';
 import * as Layout from 'app/components/layouts/thirds';
 import ListLink from 'app/components/links/listLink';
 import NavTabs from 'app/components/navTabs';
+import {IconSettings} from 'app/icons';
 import {t} from 'app/locale';
 import {Organization, Project} from 'app/types';
 import {trackAnalyticsEvent} from 'app/utils/analytics';
@@ -138,6 +140,11 @@ class TransactionHeader extends React.Component<Props> {
               {({hasFeature}) => hasFeature && this.renderCreateAlertButton()}
             </Feature>
             {this.renderKeyTransactionButton()}
+            <Button
+              href={`/settings/${organization.slug}/performance/`}
+              icon={<IconSettings />}
+              aria-label="Settings"
+            />
           </ButtonBar>
         </Layout.HeaderActions>
         <React.Fragment>

src/sentry/static/sentry/app/views/performance/transactionSummary/userStats.tsx

@@ -13,7 +13,6 @@ import {t} from 'app/locale';
 import space from 'app/styles/space';
 import {Organization} from 'app/types';
 import EventView from 'app/utils/discover/eventView';
-import {getFieldRenderer} from 'app/utils/discover/fieldRenderers';
 import {getAggregateAlias, WebVital} from 'app/utils/discover/fields';
 import {WEB_VITAL_DETAILS} from 'app/utils/performance/vitals/constants';
 import {decodeScalar} from 'app/utils/queryString';
@@ -48,8 +47,6 @@ function UserStats({
 }: Props) {
   let userMisery = error !== null ? <div>{'\u2014'}</div> : <Placeholder height="34px" />;
   const threshold = organization.apdexThreshold;
-  let apdex: React.ReactNode =
-    error !== null ? <div>{'\u2014'}</div> : <Placeholder height="24px" />;
   let vitalsPassRate: React.ReactNode = null;
 
   if (!isLoading && error === null && totals) {
@@ -67,10 +64,6 @@ function UserStats({
       );
     }
 
-    const apdexKey = `apdex_${threshold}`;
-    const formatter = getFieldRenderer(apdexKey, {[apdexKey]: 'number'});
-    apdex = formatter(totals, {organization, location});
-
     const [vitalsPassed, vitalsTotal] = VITAL_GROUPS.map(({vitals: vs}) => vs).reduce(
       ([passed, total], vs) => {
         vs.forEach(vital => {
@@ -100,25 +93,6 @@ function UserStats({
 
   return (
     <React.Fragment>
-      <SectionHeading>
-        {t('Apdex Score')}
-        <QuestionTooltip
-          position="top"
-          title={t(
-            'Apdex is the ratio of both satisfactory and tolerable response time to all response times.'
-          )}
-          size="sm"
-        />
-      </SectionHeading>
-      <StatNumber>{apdex}</StatNumber>
-      <Link to={`/settings/${organization.slug}/performance/`}>
-        <SectionValue>
-          {threshold}ms {t('threshold')}
-        </SectionValue>
-      </Link>
-
-      <SidebarSpacer />
-
       <Feature features={['organizations:performance-vitals-overview']}>
         {({hasFeature}) => {
           if (vitalsPassRate !== null && hasFeature) {
@@ -177,7 +151,6 @@ function UserStats({
           }
         }}
       </Feature>
-
       <SectionHeading>
         {t('User Misery')}
         <QuestionTooltip
@@ -187,6 +160,7 @@ function UserStats({
         />
       </SectionHeading>
       {userMisery}
+      <SidebarSpacer />
     </React.Fragment>
   );
 }