feat(trends): Handle new trends in UI (#49195)

- remove `has` filters when querying metrics 
- remove duration filters from the widget
- use new dev only flag to display old trends
- use bigger interval to help with query latency

static/app/views/performance/data.tsx

@@ -474,7 +474,10 @@ function generateGenericPerformanceEventView(
     // projects and projectIds are not necessary here since trendParameter will always
     // be present in location and will not be determined based on the project type
     const trendParameter = getCurrentTrendParameter(location, [], []);
-    if (WEB_VITAL_DETAILS[trendParameter.column]) {
+    if (
+      WEB_VITAL_DETAILS[trendParameter.column] &&
+      !organization.features.includes('performance-new-trends')
+    ) {
       eventView.additionalConditions.addFilterValues('has', [trendParameter.column]);
     }
   }

static/app/views/performance/trends/changedTransactions.tsx

@@ -298,7 +298,7 @@ function ChangedTransactions(props: Props) {
           <TransactionsListContainer data-test-id="changed-transactions">
             <TrendsTransactionPanel>
               <StyledHeaderTitleLegend>
-                {chartTitle}
+                {chartTitle} {!withBreakpoint && 'Indexed'}
                 <QuestionTooltip size="sm" position="top" title={titleTooltipContent} />
               </StyledHeaderTitleLegend>
               {isLoading ? (
@@ -489,36 +489,40 @@ function TrendsListItem(props: TrendsListItemProps) {
           />
         }
       >
-        <MenuItem
-          onClick={() =>
-            handleFilterDuration(
-              location,
-              organization,
-              longestPeriodValue,
-              FilterSymbols.LESS_THAN_EQUALS,
-              trendChangeType,
-              projects,
-              trendView.project
-            )
-          }
-        >
-          <MenuAction>{t('Show \u2264 %s', longestDuration)}</MenuAction>
-        </MenuItem>
-        <MenuItem
-          onClick={() =>
-            handleFilterDuration(
-              location,
-              organization,
-              longestPeriodValue,
-              FilterSymbols.GREATER_THAN_EQUALS,
-              trendChangeType,
-              projects,
-              trendView.project
-            )
-          }
-        >
-          <MenuAction>{t('Show \u2265 %s', longestDuration)}</MenuAction>
-        </MenuItem>
+        {!organization.features.includes('performance-new-trends') && (
+          <Fragment>
+            <MenuItem
+              onClick={() =>
+                handleFilterDuration(
+                  location,
+                  organization,
+                  longestPeriodValue,
+                  FilterSymbols.LESS_THAN_EQUALS,
+                  trendChangeType,
+                  projects,
+                  trendView.project
+                )
+              }
+            >
+              <MenuAction>{t('Show \u2264 %s', longestDuration)}</MenuAction>
+            </MenuItem>
+            <MenuItem
+              onClick={() =>
+                handleFilterDuration(
+                  location,
+                  organization,
+                  longestPeriodValue,
+                  FilterSymbols.GREATER_THAN_EQUALS,
+                  trendChangeType,
+                  projects,
+                  trendView.project
+                )
+              }
+            >
+              <MenuAction>{t('Show \u2265 %s', longestDuration)}</MenuAction>
+            </MenuItem>
+          </Fragment>
+        )}
         <MenuItem
           onClick={() => handleFilterTransaction(location, transaction.transaction)}
         >

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

@@ -3,6 +3,7 @@ import {browserHistory} from 'react-router';
 import styled from '@emotion/styled';
 import {Location} from 'history';
 
+import Feature from 'sentry/components/acl/feature';
 import {Alert} from 'sentry/components/alert';
 import Breadcrumbs from 'sentry/components/breadcrumbs';
 import {CompactSelect} from 'sentry/components/compactSelect';
@@ -316,6 +317,24 @@ class TrendsContent extends Component<Props, State> {
                   )}
                 />
               </ListContainer>
+              <Feature features={['organizations:performance-trendsv2-dev-only']}>
+                <ListContainer>
+                  <ChangedTransactions
+                    trendChangeType={TrendChangeType.IMPROVED}
+                    previousTrendFunction={previousTrendFunction}
+                    trendView={trendView}
+                    location={location}
+                    setError={this.setError}
+                  />
+                  <ChangedTransactions
+                    trendChangeType={TrendChangeType.REGRESSION}
+                    previousTrendFunction={previousTrendFunction}
+                    trendView={trendView}
+                    location={location}
+                    setError={this.setError}
+                  />
+                </ListContainer>
+              </Feature>
             </DefaultTrends>
           </Layout.Main>
         </Layout.Body>

static/app/views/performance/trends/index.spec.tsx

@@ -635,7 +635,7 @@ describe('Performance > Trends', function () {
             trendFunction: `${trendFunction.field}(transaction.duration)`,
             sort,
             query: expect.stringContaining('trend_percentage():>0%'),
-            interval: '30m',
+            interval: '1h',
             field: transactionFields,
             statsPeriod: '14d',
           }),
@@ -651,7 +651,7 @@ describe('Performance > Trends', function () {
             trendFunction: `${trendFunction.field}(transaction.duration)`,
             sort: '-' + sort,
             query: expect.stringContaining('trend_percentage():>0%'),
-            interval: '30m',
+            interval: '1h',
             field: transactionFields,
             statsPeriod: '14d',
           }),

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

@@ -301,7 +301,7 @@ function getQueryInterval(location: Location, eventView: TrendView) {
     period: statsPeriod,
   };
 
-  const intervalFromSmoothing = getInterval(datetimeSelection, 'high');
+  const intervalFromSmoothing = getInterval(datetimeSelection, 'medium');
 
   return intervalFromQueryParam || intervalFromSmoothing;
 }

static/app/views/performance/utils.tsx

@@ -232,16 +232,19 @@ export function trendsTargetRoute({
   } else {
     modifiedConditions.setFilterValues('tpm()', ['>0.01']);
   }
-  if (conditions.hasFilter('transaction.duration')) {
-    modifiedConditions.setFilterValues(
-      'transaction.duration',
-      conditions.getFilterValues('transaction.duration')
-    );
-  } else {
-    modifiedConditions.setFilterValues('transaction.duration', [
-      '>0',
-      `<${DEFAULT_MAX_DURATION}`,
-    ]);
+  // Metrics don't support duration filters
+  if (!organization.features.includes('performance-new-trends')) {
+    if (conditions.hasFilter('transaction.duration')) {
+      modifiedConditions.setFilterValues(
+        'transaction.duration',
+        conditions.getFilterValues('transaction.duration')
+      );
+    } else {
+      modifiedConditions.setFilterValues('transaction.duration', [
+        '>0',
+        `<${DEFAULT_MAX_DURATION}`,
+      ]);
+    }
   }
   newQuery.query = modifiedConditions.formatString();