feat(perf): Finish remaining landing v3 views

static/app/views/performance/charts/chart.tsx

@@ -5,6 +5,7 @@ import min from 'lodash/min';
 
 import AreaChart from 'app/components/charts/areaChart';
 import ChartZoom from 'app/components/charts/chartZoom';
+import LineChart from 'app/components/charts/lineChart';
 import {DateString} from 'app/types';
 import {Series} from 'app/types/echarts';
 import {axisLabelFormatter, tooltipFormatter} from 'app/utils/discover/charts';
@@ -24,6 +25,7 @@ type Props = {
   disableXAxis?: boolean;
   chartColors?: string[];
   loading: boolean;
+  isLineChart?: boolean;
 };
 
 // adapted from https://stackoverflow.com/questions/11397239/rounding-up-for-a-graph-maximum
@@ -68,6 +70,7 @@ function Chart({
   disableMultiAxis,
   disableXAxis,
   chartColors,
+  isLineChart,
 }: Props) {
   const theme = useTheme();
 
@@ -176,6 +179,9 @@ function Chart({
   };
 
   if (loading) {
+    if (isLineChart) {
+      return <LineChart height={height} series={[]} {...areaChartProps} />;
+    }
     return <AreaChart height={height} series={[]} {...areaChartProps} />;
   }
   const series = data.map((values, i: number) => ({
@@ -193,16 +199,31 @@ function Chart({
       utc={utc}
       xAxisIndex={disableMultiAxis ? undefined : [0, 1]}
     >
-      {zoomRenderProps => (
-        <AreaChart
-          height={height}
-          {...zoomRenderProps}
-          series={series}
-          previousPeriod={previousData}
-          xAxis={disableXAxis ? {show: false} : undefined}
-          {...areaChartProps}
-        />
-      )}
+      {zoomRenderProps => {
+        if (isLineChart) {
+          return (
+            <LineChart
+              height={height}
+              {...zoomRenderProps}
+              series={series}
+              previousPeriod={previousData}
+              xAxis={disableXAxis ? {show: false} : undefined}
+              {...areaChartProps}
+            />
+          );
+        }
+
+        return (
+          <AreaChart
+            height={height}
+            {...zoomRenderProps}
+            series={series}
+            previousPeriod={previousData}
+            xAxis={disableXAxis ? {show: false} : undefined}
+            {...areaChartProps}
+          />
+        );
+      }}
     </ChartZoom>
   );
 }

static/app/views/performance/data.tsx

@@ -52,6 +52,7 @@ export enum PERFORMANCE_TERM {
   STALL_PERCENTAGE = 'stallPercentage',
   MOST_ISSUES = 'mostIssues',
   MOST_ERRORS = 'mostErrors',
+  SLOW_HTTP_SPANS = 'slowHTTPSpans',
 }
 
 export type TooltipOption = SelectValue<string> & {
@@ -361,6 +362,7 @@ export const PERFORMANCE_TERMS: Record<PERFORMANCE_TERM, TermFormatter> = {
   frozenFrames: () => t('The count of the number of frozen frames in the transaction.'),
   mostErrors: () => t('Transactions with the most associated errors.'),
   mostIssues: () => t('The most instances of an issue for a related transaction.'),
+  slowHTTPSpans: () => t('The transactions with the slowest spans of a certain type.'),
   stallPercentage: () =>
     t(
       'The percentage of the transaction duration in which the application is in a stalled state.'

static/app/views/performance/landing/content.tsx

@@ -5,7 +5,6 @@ import {Location} from 'history';
 
 import DropdownControl, {DropdownItem} from 'app/components/dropdownControl';
 import SearchBar from 'app/components/events/searchBar';
-import FeatureBadge from 'app/components/featureBadge';
 import * as TeamKeyTransactionManager from 'app/components/performance/teamKeyTransactionsManager';
 import {MAX_QUERY_LENGTH} from 'app/constants';
 import {t} from 'app/locale';
@@ -296,7 +295,7 @@ class LandingContent extends Component<Props, State> {
           >
             {LANDING_DISPLAYS.filter(
               ({isShown}) => !isShown || isShown(organization)
-            ).map(({badge, label, field}) => (
+            ).map(({label, field}) => (
               <DropdownItem
                 key={field}
                 onSelect={this.handleLandingDisplayChange}
@@ -305,7 +304,6 @@ class LandingContent extends Component<Props, State> {
                 isActive={field === currentLandingDisplay.field}
               >
                 {label}
-                {badge && <FeatureBadge type={badge} noTooltip />}
               </DropdownItem>
             ))}
           </DropdownControl>

static/app/views/performance/landing/index.tsx

@@ -4,7 +4,6 @@ import {Location} from 'history';
 
 import Button from 'app/components/button';
 import SearchBar from 'app/components/events/searchBar';
-import FeatureBadge from 'app/components/featureBadge';
 import GlobalSdkUpdateAlert from 'app/components/globalSdkUpdateAlert';
 import * as Layout from 'app/components/layouts/thirds';
 import NavTabs from 'app/components/navTabs';
@@ -101,14 +100,13 @@ function _PerformanceLanding(props: Props) {
         </Layout.HeaderActions>
 
         <StyledNavTabs>
-          {shownLandingDisplays.map(({badge, label, field}) => (
+          {shownLandingDisplays.map(({label, field}) => (
             <li
               key={label}
               className={currentLandingDisplay.field === field ? 'active' : ''}
             >
               <a href="#" onClick={() => handleLandingDisplayChange(field, location)}>
                 {t(label)}
-                {badge && <FeatureBadge type={badge} />}
               </a>
             </li>
           ))}

static/app/views/performance/landing/utils.tsx

@@ -57,7 +57,6 @@ export const LANDING_DISPLAYS = [
     field: LandingDisplayField.MOBILE,
     isShown: (organization: Organization) =>
       organization.features.includes('performance-mobile-vitals'),
-    badge: 'new' as const,
   },
 ];
 

static/app/views/performance/landing/views/backendView.tsx

@@ -1,18 +1,47 @@
 import {usePageError} from 'app/utils/performance/contexts/pageError';
+import {PerformanceDisplayProvider} from 'app/utils/performance/contexts/performanceDisplayContext';
 
 import Table from '../../table';
+import {PROJECT_PERFORMANCE_TYPE} from '../../utils';
 import {BACKEND_COLUMN_TITLES} from '../data';
+import {DoubleChartRow, TripleChartRow} from '../widgets/components/widgetChartRow';
+import {PerformanceWidgetSetting} from '../widgets/widgetDefinitions';
 
 import {BasePerformanceViewProps} from './types';
 
 export function BackendView(props: BasePerformanceViewProps) {
   return (
-    <div>
-      <Table
-        {...props}
-        columnTitles={BACKEND_COLUMN_TITLES}
-        setError={usePageError().setPageError}
-      />
-    </div>
+    <PerformanceDisplayProvider value={{performanceType: PROJECT_PERFORMANCE_TYPE.ANY}}>
+      <div>
+        <TripleChartRow
+          {...props}
+          allowedCharts={[
+            PerformanceWidgetSetting.APDEX_AREA,
+            PerformanceWidgetSetting.TPM_AREA,
+            PerformanceWidgetSetting.FAILURE_RATE_AREA,
+            PerformanceWidgetSetting.USER_MISERY_AREA,
+            PerformanceWidgetSetting.P50_DURATION_AREA,
+            PerformanceWidgetSetting.P75_DURATION_AREA,
+            PerformanceWidgetSetting.P95_DURATION_AREA,
+            PerformanceWidgetSetting.P99_DURATION_AREA,
+            PerformanceWidgetSetting.DURATION_HISTOGRAM,
+          ]}
+        />
+        <DoubleChartRow
+          {...props}
+          allowedCharts={[
+            PerformanceWidgetSetting.SLOW_HTTP_OPS,
+            PerformanceWidgetSetting.SLOW_DB_OPS,
+            PerformanceWidgetSetting.MOST_IMPROVED,
+            PerformanceWidgetSetting.MOST_REGRESSED,
+          ]}
+        />
+        <Table
+          {...props}
+          columnTitles={BACKEND_COLUMN_TITLES}
+          setError={usePageError().setPageError}
+        />
+      </div>
+    </PerformanceDisplayProvider>
   );
 }

static/app/views/performance/landing/views/frontendOtherView.tsx

@@ -14,7 +14,7 @@ export function FrontendOtherView(props: BasePerformanceViewProps) {
     <PerformanceDisplayProvider
       value={{performanceType: PROJECT_PERFORMANCE_TYPE.FRONTEND_OTHER}}
     >
-      <div data-test-id="frontend-pageload-view">
+      <div>
         <TripleChartRow
           {...props}
           allowedCharts={[

static/app/views/performance/landing/views/mobileView.tsx

@@ -1,18 +1,43 @@
 import {usePageError} from 'app/utils/performance/contexts/pageError';
+import {PerformanceDisplayProvider} from 'app/utils/performance/contexts/performanceDisplayContext';
 
 import Table from '../../table';
+import {PROJECT_PERFORMANCE_TYPE} from '../../utils';
 import {MOBILE_COLUMN_TITLES} from '../data';
+import {DoubleChartRow, TripleChartRow} from '../widgets/components/widgetChartRow';
+import {PerformanceWidgetSetting} from '../widgets/widgetDefinitions';
 
 import {BasePerformanceViewProps} from './types';
 
 export function MobileView(props: BasePerformanceViewProps) {
   return (
-    <div>
-      <Table
-        {...props}
-        columnTitles={MOBILE_COLUMN_TITLES} // TODO(k-fish): Add react native column titles
-        setError={usePageError().setPageError}
-      />
-    </div>
+    <PerformanceDisplayProvider value={{performanceType: PROJECT_PERFORMANCE_TYPE.ANY}}>
+      <div>
+        <TripleChartRow
+          {...props}
+          allowedCharts={[
+            PerformanceWidgetSetting.TPM_AREA,
+            PerformanceWidgetSetting.COLD_STARTUP_AREA,
+            PerformanceWidgetSetting.WARM_STARTUP_AREA,
+            PerformanceWidgetSetting.SLOW_FRAMES_AREA,
+            PerformanceWidgetSetting.FROZEN_FRAMES_AREA,
+          ]}
+        />
+        <DoubleChartRow
+          {...props}
+          allowedCharts={[
+            PerformanceWidgetSetting.MOST_SLOW_FRAMES,
+            PerformanceWidgetSetting.MOST_FROZEN_FRAMES,
+            PerformanceWidgetSetting.MOST_IMPROVED,
+            PerformanceWidgetSetting.MOST_REGRESSED,
+          ]}
+        />
+        <Table
+          {...props}
+          columnTitles={MOBILE_COLUMN_TITLES} // TODO(k-fish): Add react native column titles
+          setError={usePageError().setPageError}
+        />
+      </div>
+    </PerformanceDisplayProvider>
   );
 }

static/app/views/performance/landing/widgets/components/queryHandler.tsx

@@ -41,8 +41,6 @@ export function QueryHandler<T extends WidgetDataConstraint>(
             organization={props.queryProps.organization}
             orgSlug={props.queryProps.organization.slug}
             query={props.queryProps.eventView.getQueryWithAdditionalConditions()}
-            eventView={props.queryProps.eventView}
-            location={props.queryProps.location}
             widgetData={props.widgetData}
           >
             {results => {

static/app/views/performance/landing/widgets/components/widgetHeader.tsx

@@ -17,10 +17,12 @@ export function WidgetHeader<T extends WidgetDataConstraint>(
   return (
     <WidgetHeaderContainer>
       <TitleContainer>
-        <StyledHeaderTitleLegend data-test-id="performance-widget-title">
-          {title}
-          <QuestionTooltip position="top" size="sm" title={titleTooltip} />
-        </StyledHeaderTitleLegend>
+        <div>
+          <StyledHeaderTitleLegend data-test-id="performance-widget-title">
+            <div className="truncate">{title}</div>
+            <QuestionTooltip position="top" size="sm" title={titleTooltip} />
+          </StyledHeaderTitleLegend>
+        </div>
         <div>{Subtitle ? <Subtitle {...props} /> : null}</div>
       </TitleContainer>
 

static/app/views/performance/landing/widgets/types.tsx

@@ -48,9 +48,7 @@ export type QueryFC<T extends WidgetDataConstraint> = FunctionComponent<
     team?: Readonly<string | string[]>;
     query?: string;
     orgSlug: string;
-    location: Location;
     organization: OrganizationSummary;
-    eventView: EventView;
     widgetData: T;
   }
 >;