Revert "feat(performance-starfish-db-widget) Added widget functionality. (#55473)"

This reverts commit 349ff4619b0d77ad6d52a7037d3c6268b717208d.

Co-authored-by: Abdkhan14 <60121741+Abdkhan14@users.noreply.github.com>

static/app/views/performance/data.tsx

@@ -69,7 +69,6 @@ export enum PerformanceTerm {
   SLOW_HTTP_SPANS = 'slowHTTPSpans',
   TIME_TO_FULL_DISPLAY = 'timeToFullDisplay',
   TIME_TO_INITIAL_DISPLAY = 'timeToInitialDisplay',
-  MOST_TIME_SPENT_DB_QUERIES = 'mostTimeSpentDbQueries',
 }
 
 export type TooltipOption = SelectValue<string> & {
@@ -378,8 +377,6 @@ export const PERFORMANCE_TERMS: Record<PerformanceTerm, 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.'),
-  mostTimeSpentDbQueries: () =>
-    t('Database spans on which the application spent most of its total time.'),
   slowHTTPSpans: () => t('The transactions with the slowest spans of a certain type.'),
   stallPercentage: () =>
     t(

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

@@ -16,14 +16,8 @@ export function AllTransactionsView(props: BasePerformanceViewProps) {
     props.organization.features.includes('performance-new-trends') &&
     canUseMetricsData(props.organization)
   ) {
-    if (props.organization.features.includes('starfish-view')) {
-      doubleChartRowCharts.unshift(PerformanceWidgetSetting.MOST_RELATED_ISSUES);
-      doubleChartRowCharts.unshift(PerformanceWidgetSetting.MOST_CHANGED);
-      doubleChartRowCharts.unshift(PerformanceWidgetSetting.MOST_TIME_SPENT_DB_QUERIES);
-    } else {
-      doubleChartRowCharts.unshift(PerformanceWidgetSetting.MOST_CHANGED);
-      doubleChartRowCharts.unshift(PerformanceWidgetSetting.MOST_RELATED_ISSUES);
-    }
+    doubleChartRowCharts.unshift(PerformanceWidgetSetting.MOST_CHANGED);
+    doubleChartRowCharts.unshift(PerformanceWidgetSetting.MOST_RELATED_ISSUES);
   } else {
     doubleChartRowCharts.unshift(PerformanceWidgetSetting.MOST_REGRESSED);
     doubleChartRowCharts.push(PerformanceWidgetSetting.MOST_IMPROVED);

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

@@ -42,14 +42,11 @@ export function BackendView(props: BasePerformanceViewProps) {
     PerformanceWidgetSetting.SLOW_DB_OPS,
   ];
 
-  if (canUseMetricsData(props.organization)) {
-    if (props.organization.features.includes('performance-new-trends')) {
-      doubleChartRowCharts.push(PerformanceWidgetSetting.MOST_CHANGED);
-    }
-
-    if (props.organization.features.includes('starfish-view')) {
-      doubleChartRowCharts.unshift(PerformanceWidgetSetting.MOST_TIME_SPENT_DB_QUERIES);
-    }
+  if (
+    props.organization.features.includes('performance-new-trends') &&
+    canUseMetricsData(props.organization)
+  ) {
+    doubleChartRowCharts.push(PerformanceWidgetSetting.MOST_CHANGED);
   } else {
     doubleChartRowCharts.push(
       ...[PerformanceWidgetSetting.MOST_REGRESSED, PerformanceWidgetSetting.MOST_IMPROVED]

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

@@ -131,19 +131,18 @@ const _WidgetContainer = (props: Props) => {
     ...chartDefinition,
     chartSetting,
     chartDefinition,
-    InteractiveTitle:
-      showNewWidgetDesign && allowedCharts.length > 2
-        ? containerProps => (
-            <WidgetInteractiveTitle
-              {...containerProps}
-              eventView={widgetEventView}
-              allowedCharts={allowedCharts}
-              chartSetting={chartSetting}
-              setChartSetting={setChartSetting}
-              rowChartSettings={rowChartSettings}
-            />
-          )
-        : null,
+    InteractiveTitle: showNewWidgetDesign
+      ? containerProps => (
+          <WidgetInteractiveTitle
+            {...containerProps}
+            eventView={widgetEventView}
+            allowedCharts={allowedCharts}
+            chartSetting={chartSetting}
+            setChartSetting={setChartSetting}
+            rowChartSettings={rowChartSettings}
+          />
+        )
+      : null,
     ContainerActions: !showNewWidgetDesign
       ? containerProps => (
           <WidgetContainerActions

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

@@ -37,12 +37,11 @@ export type PerformanceWidgetProps = {
   organization: Organization;
   title: string;
   titleTooltip: string;
+
   InteractiveTitle?: React.ComponentType<{isLoading: boolean}> | null;
 
   chartColor?: string;
 
-  subTitle?: string;
-
   withStaticFilters?: boolean;
 };
 
@@ -141,11 +140,10 @@ export type GenericPerformanceWidgetProps<T extends WidgetDataConstraint> = {
   title: string;
   titleTooltip: string;
   EmptyComponent?: React.ComponentType<{height?: number}>;
-  HeaderActions?: HeaderActions<T>;
 
+  HeaderActions?: HeaderActions<T>;
   InteractiveTitle?: InteractiveTitle<T> | null;
   Subtitle?: Subtitle<T>;
-  subTitle?: string;
 };
 
 export type GenericPerformanceWithData<T extends WidgetDataConstraint> =

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

@@ -49,7 +49,6 @@ export enum PerformanceWidgetSetting {
   MOST_REGRESSED = 'most_regressed',
   MOST_RELATED_ERRORS = 'most_related_errors',
   MOST_RELATED_ISSUES = 'most_related_issues',
-  MOST_TIME_SPENT_DB_QUERIES = 'most_time_spent_db_queries',
   SLOW_HTTP_OPS = 'slow_http_ops',
   SLOW_DB_OPS = 'slow_db_ops',
   SLOW_RESOURCE_OPS = 'slow_resource_ops',
@@ -261,14 +260,6 @@ export const WIDGET_DEFINITIONS: ({
     dataType: GenericPerformanceWidgetDataType.LINE_LIST,
     chartColor: WIDGET_PALETTE[0],
   },
-  [PerformanceWidgetSetting.MOST_TIME_SPENT_DB_QUERIES]: {
-    title: t('Most Time Spent in DB Queries'),
-    subTitle: t('Suggested Queries'),
-    titleTooltip: getTermHelp(organization, PerformanceTerm.MOST_TIME_SPENT_DB_QUERIES),
-    fields: [`time_spent_percentage()`],
-    dataType: GenericPerformanceWidgetDataType.LINE_LIST,
-    chartColor: WIDGET_PALETTE[0],
-  },
   [PerformanceWidgetSetting.SLOW_HTTP_OPS]: {
     title: t('Slow HTTP Ops'),
     titleTooltip: getTermHelp(organization, PerformanceTerm.SLOW_HTTP_SPANS),

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

@@ -1,8 +1,6 @@
 import {Fragment, useMemo, useState} from 'react';
 import pick from 'lodash/pick';
-import qs from 'qs';
 
-import {LinkButton} from 'sentry/components/button';
 import _EventsRequest from 'sentry/components/charts/eventsRequest';
 import {getInterval} from 'sentry/components/charts/utils';
 import Count from 'sentry/components/count';
@@ -11,7 +9,6 @@ import {Tooltip} from 'sentry/components/tooltip';
 import Truncate from 'sentry/components/truncate';
 import {t, tct} from 'sentry/locale';
 import DiscoverQuery from 'sentry/utils/discover/discoverQuery';
-import {DiscoverDatasets} from 'sentry/utils/discover/types';
 import {
   canUseMetricsData,
   useMEPSettingContext,
@@ -27,10 +24,6 @@ import {
   getPerformanceDuration,
   UNPARAMETERIZED_TRANSACTION,
 } from 'sentry/views/performance/utils';
-import {TimeSpentCell} from 'sentry/views/starfish/components/tableCells/timeSpentCell';
-import {SpanMetricsField} from 'sentry/views/starfish/types';
-import {STARFISH_CHART_INTERVAL_FIDELITY} from 'sentry/views/starfish/utils/constants';
-import {extractRoute} from 'sentry/views/starfish/utils/extractRoute';
 
 import {excludeTransaction} from '../../utils';
 import Accordion from '../components/accordion';
@@ -107,7 +100,7 @@ export function LineChartListWidget(props: PerformanceWidgetProps) {
       fields: field,
       component: provided => {
         const eventView = provided.eventView.clone();
-        let extraQueryParams = getMEPParamsIfApplicable(mepSetting, props.chartSetting);
+
         eventView.sorts = [{kind: 'desc', field}];
         if (props.chartSetting === PerformanceWidgetSetting.MOST_RELATED_ISSUES) {
           eventView.fields = [
@@ -129,37 +122,6 @@ export function LineChartListWidget(props: PerformanceWidgetProps) {
           eventView.additionalConditions.removeFilter('transaction.op'); // Remove transaction op incase it's applied from the performance view.
           eventView.additionalConditions.removeFilter('!transaction.op'); // Remove transaction op incase it's applied from the performance view.
           eventView.query = mutableSearch.formatString();
-        } else if (
-          props.chartSetting === PerformanceWidgetSetting.MOST_TIME_SPENT_DB_QUERIES
-        ) {
-          // Set fields
-          eventView.fields = [
-            {field: SpanMetricsField.SPAN_OP},
-            {field: SpanMetricsField.SPAN_GROUP},
-            {field: 'project.id'},
-            {field: SpanMetricsField.SPAN_DESCRIPTION},
-            {field: `sum(${SpanMetricsField.SPAN_SELF_TIME})`},
-            {field: `avg(${SpanMetricsField.SPAN_SELF_TIME})`},
-            {field},
-          ];
-
-          // Change data set to spansMetrics
-          eventView.dataset = DiscoverDatasets.SPANS_METRICS;
-          extraQueryParams = {
-            ...extraQueryParams,
-            dataset: DiscoverDatasets.SPANS_METRICS,
-          };
-
-          // Update query
-          const mutableSearch = new MutableSearch(eventView.query);
-          mutableSearch.removeFilter('event.type');
-          eventView.additionalConditions.removeFilter('event.type');
-          eventView.additionalConditions.removeFilter('time_spent_percentage()');
-          mutableSearch.addFilterValue('has', 'span.description');
-          mutableSearch.addFilterValue('span.module', 'db');
-          mutableSearch.addFilterValue('!span.op', 'db.redis');
-          mutableSearch.addFilterValue('transaction.op', 'http.server');
-          eventView.query = mutableSearch.formatString();
         } else if (isSlowestType || isFramesType) {
           eventView.additionalConditions.setFilterValues('epm()', ['>0.01']);
           eventView.fields = [
@@ -173,10 +135,7 @@ export function LineChartListWidget(props: PerformanceWidgetProps) {
           eventView.fields = [{field: 'transaction'}, {field: 'project.id'}, {field}];
         }
         // Don't retrieve list items with 0 in the field.
-        if (props.chartSetting !== PerformanceWidgetSetting.MOST_TIME_SPENT_DB_QUERIES) {
-          eventView.additionalConditions.setFilterValues(field, ['>0']);
-        }
-
+        eventView.additionalConditions.setFilterValues(field, ['>0']);
         return (
           <DiscoverQuery
             {...provided}
@@ -185,7 +144,7 @@ export function LineChartListWidget(props: PerformanceWidgetProps) {
             limit={3}
             cursor="0:0:1"
             noPagination
-            queryExtras={extraQueryParams}
+            queryExtras={getMEPParamsIfApplicable(mepSetting, props.chartSetting)}
           />
         );
       },
@@ -204,25 +163,7 @@ export function LineChartListWidget(props: PerformanceWidgetProps) {
         fields: field,
         component: provided => {
           const eventView = props.eventView.clone();
-          let extraQueryParams = getMEPParamsIfApplicable(mepSetting, props.chartSetting);
-          const pageFilterDatetime = {
-            start: provided.start,
-            end: provided.end,
-            period: provided.period,
-          };
-
-          // Chart options
-          let currentSeriesNames = [field];
-          let includePreviousParam = true;
-          let yAxis = provided.yAxis;
-          let interval = getInterval(pageFilterDatetime, 'medium');
-          let partialDataParam = true;
-          if (
-            !provided.widgetData.list.data[selectedListIndex]?.transaction &&
-            !provided.widgetData.list.data[selectedListIndex][
-              SpanMetricsField.SPAN_DESCRIPTION
-            ]
-          ) {
+          if (!provided.widgetData.list.data[selectedListIndex]?.transaction) {
             return null;
           }
           eventView.additionalConditions.setFilterValues('transaction', [
@@ -254,59 +195,29 @@ export function LineChartListWidget(props: PerformanceWidgetProps) {
             const mutableSearch = new MutableSearch(eventView.query);
             mutableSearch.removeFilter('transaction.duration');
             eventView.query = mutableSearch.formatString();
-          } else if (
-            props.chartSetting === PerformanceWidgetSetting.MOST_TIME_SPENT_DB_QUERIES
-          ) {
-            // Update request params
-            eventView.dataset = DiscoverDatasets.SPANS_METRICS;
-            extraQueryParams = {
-              ...extraQueryParams,
-              dataset: DiscoverDatasets.SPANS_METRICS,
-              excludeOther: false,
-              per_page: 50,
-            };
-            eventView.fields = [];
-
-            // Update chart options
-            partialDataParam = false;
-            yAxis = `avg(${SpanMetricsField.SPAN_SELF_TIME})`;
-            interval = getInterval(pageFilterDatetime, STARFISH_CHART_INTERVAL_FIDELITY);
-            includePreviousParam = false;
-            currentSeriesNames = [`avg(${SpanMetricsField.SPAN_SELF_TIME})`];
-
-            // Update search query
-            eventView.additionalConditions.removeFilter('event.type');
-            eventView.additionalConditions.removeFilter('transaction');
-            eventView.additionalConditions.addFilterValue(
-              'transaction.op',
-              'http.server'
-            );
-            eventView.additionalConditions.addFilterValue(
-              SpanMetricsField.SPAN_GROUP,
-              provided.widgetData.list.data[selectedListIndex][
-                SpanMetricsField.SPAN_GROUP
-              ].toString()
-            );
-            const mutableSearch = new MutableSearch(eventView.query);
-            mutableSearch.removeFilter('transaction');
-            eventView.query = mutableSearch.formatString();
           } else {
             eventView.fields = [{field: 'transaction'}, {field}];
           }
           return (
             <EventsRequest
               {...pick(provided, eventsRequestQueryProps)}
-              yAxis={yAxis}
               limit={1}
-              includePrevious={includePreviousParam}
+              includePrevious
               includeTransformedData
-              partial={partialDataParam}
-              currentSeriesNames={currentSeriesNames}
+              partial
+              currentSeriesNames={[field]}
               query={eventView.getQueryWithAdditionalConditions()}
-              interval={interval}
+              interval={getInterval(
+                {
+                  start: provided.start,
+                  end: provided.end,
+                  period: provided.period,
+                },
+                'medium'
+              )}
               hideError
               onError={pageError.setPageError}
-              queryExtras={extraQueryParams}
+              queryExtras={getMEPParamsIfApplicable(mepSetting, props.chartSetting)}
             />
           );
         },
@@ -439,37 +350,6 @@ export function LineChartListWidget(props: PerformanceWidgetProps) {
                   )}
                 </Fragment>
               );
-            case PerformanceWidgetSetting.MOST_TIME_SPENT_DB_QUERIES:
-              const description: string = listItem[SpanMetricsField.SPAN_DESCRIPTION];
-              const group: string = listItem[SpanMetricsField.SPAN_GROUP];
-              const timeSpentPercentage: number = listItem[fieldString];
-              const totalTime: number =
-                listItem[`sum(${SpanMetricsField.SPAN_SELF_TIME})`];
-              return (
-                <Fragment>
-                  <GrowLink
-                    to={`/performance/database/${
-                      extractRoute(location) ?? 'spans'
-                    }/span/${group}?${qs.stringify({...location.query})}`}
-                  >
-                    <Truncate value={description} maxLength={40} />
-                  </GrowLink>
-                  <RightAlignedCell>
-                    <TimeSpentCell percentage={timeSpentPercentage} total={totalTime} />
-                  </RightAlignedCell>
-                  {!props.withStaticFilters && (
-                    <ListClose
-                      setSelectListIndex={setSelectListIndex}
-                      onClick={() =>
-                        excludeTransaction(listItem.transaction, {
-                          eventView: props.eventView,
-                          location,
-                        })
-                      }
-                    />
-                  )}
-                </Fragment>
-              );
             default:
               if (typeof rightValue === 'number') {
                 return (
@@ -559,36 +439,16 @@ export function LineChartListWidget(props: PerformanceWidgetProps) {
         },
       ];
 
-  const getContainerActions = provided => {
-    return props.chartSetting === PerformanceWidgetSetting.MOST_TIME_SPENT_DB_QUERIES ? (
-      <Fragment>
-        <div>
-          <LinkButton
-            to={`/organizations/${organization.slug}/performance/database/`}
-            size="sm"
-          >
-            {t('View All')}
-          </LinkButton>
-        </div>
-        {ContainerActions && (
-          <ContainerActions isLoading={provided.widgetData.list?.isLoading} />
-        )}
-      </Fragment>
-    ) : (
-      ContainerActions && (
-        <ContainerActions isLoading={provided.widgetData.list?.isLoading} />
-      )
-    );
-  };
-
   return (
     <GenericPerformanceWidget<DataType>
       {...props}
       location={location}
-      Subtitle={() => (
-        <Subtitle>{props.subTitle ?? t('Suggested transactions')}</Subtitle>
-      )}
-      HeaderActions={provided => getContainerActions(provided)}
+      Subtitle={() => <Subtitle>{t('Suggested transactions')}</Subtitle>}
+      HeaderActions={provided =>
+        ContainerActions && (
+          <ContainerActions isLoading={provided.widgetData.list?.isLoading} />
+        )
+      }
       InteractiveTitle={
         InteractiveTitle
           ? provided => <InteractiveTitle {...provided.widgetData.chart} />