feat(browser-starfish): add resource summary charts, remove image tabs (#59628)

DominikB2014 · web-flow · commit bf6f5101ca83 · 2023-11-08T17:54:24.000-05:00
1. add resource module charts (@gggritso this required some minor changes that touches db module, so i'm requested a review from you) <img width="1254" alt="image" src="https://github.com/getsentry/sentry/assets/44422760/d204b867-1d1b-4105-a287-f6bbd2056577"> 2. Remove image tab for GA 3. Move domain filter up, and apply it to the resource charts
diff --git a/static/app/utils/discover/fields.tsx b/static/app/utils/discover/fields.tsx
@@ -137,6 +137,12 @@ export const RATE_UNIT_LABELS = {
   [RateUnits.PER_HOUR]: '/hr',
 };
 
+export const RATE_UNIT_TITLE = {
+  [RateUnits.PER_SECOND]: 'Per Second',
+  [RateUnits.PER_MINUTE]: 'Per Minute',
+  [RateUnits.PER_HOUR]: 'Per Hour',
+};
+
 const CONDITIONS_ARGUMENTS: SelectValue<string>[] = [
   {
     label: 'is equal to',
diff --git a/static/app/views/performance/browser/resources/index.tsx b/static/app/views/performance/browser/resources/index.tsx
@@ -1,4 +1,3 @@
-import {browserHistory} from 'react-router';
 import styled from '@emotion/styled';
 
 import Breadcrumbs from 'sentry/components/breadcrumbs';
@@ -7,25 +6,29 @@ import * as Layout from 'sentry/components/layouts/thirds';
 import {DatePageFilter} from 'sentry/components/organizations/datePageFilter';
 import PageFilterBar from 'sentry/components/organizations/pageFilterBar';
 import {ProjectPageFilter} from 'sentry/components/organizations/projectPageFilter';
-import {TabList, Tabs} from 'sentry/components/tabs';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
-import {useLocation} from 'sentry/utils/useLocation';
+import {RateUnits} from 'sentry/utils/discover/fields';
 import useOrganization from 'sentry/utils/useOrganization';
 import {normalizeUrl} from 'sentry/utils/withDomainRequired';
 import ImageView from 'sentry/views/performance/browser/resources/imageView';
-import JSCSSView from 'sentry/views/performance/browser/resources/jsCssView';
+import JSCSSView, {
+  DEFAULT_RESOURCE_TYPES,
+  FilterOptionsContainer,
+} from 'sentry/views/performance/browser/resources/jsCssView';
+import DomainSelector from 'sentry/views/performance/browser/resources/shared/domainSelector';
 import {
   BrowserStarfishFields,
   useResourceModuleFilters,
 } from 'sentry/views/performance/browser/resources/utils/useResourceFilters';
 import {ModulePageProviders} from 'sentry/views/performance/database/modulePageProviders';
 
-const {SPAN_OP} = BrowserStarfishFields;
+const {SPAN_OP, SPAN_DOMAIN} = BrowserStarfishFields;
+
+export const RESOURCE_THROUGHPUT_UNIT = RateUnits.PER_MINUTE;
 
 function ResourcesLandingPage() {
   const organization = useOrganization();
-  const location = useLocation();
   const filters = useResourceModuleFilters();
 
   return (
@@ -53,33 +56,20 @@ function ResourcesLandingPage() {
             <FeatureBadge type="alpha" />
           </Layout.Title>
         </Layout.HeaderContent>
-        <StyledTabs>
-          <TabList
-            hideBorder
-            onSelectionChange={key => {
-              browserHistory.push({
-                ...location,
-                query: {
-                  ...location.query,
-                  [SPAN_OP]: key,
-                },
-              });
-            }}
-          >
-            <TabList.Item key="">{t('JS/CSS/Fonts')}</TabList.Item>
-            <TabList.Item key="resource.img">{t('Images')}</TabList.Item>
-          </TabList>
-        </StyledTabs>
       </Layout.Header>
 
       <Layout.Body>
         <Layout.Main fullWidth>
-          <PaddedContainer>
+          <FilterOptionsContainer>
             <PageFilterBar condensed>
               <ProjectPageFilter />
               <DatePageFilter />
             </PageFilterBar>
-          </PaddedContainer>
+            <DomainSelector
+              value={filters[SPAN_DOMAIN] || ''}
+              defaultResourceTypes={DEFAULT_RESOURCE_TYPES}
+            />
+          </FilterOptionsContainer>
 
           {(!filters[SPAN_OP] ||
             filters[SPAN_OP] === 'resource.script' ||
@@ -96,8 +86,4 @@ export const PaddedContainer = styled('div')`
   margin-bottom: ${space(2)};
 `;
 
-const StyledTabs = styled(Tabs)`
-  grid-column: 1/-1;
-`;
-
 export default ResourcesLandingPage;
diff --git a/static/app/views/performance/browser/resources/jsCssView/index.tsx b/static/app/views/performance/browser/resources/jsCssView/index.tsx
@@ -6,15 +6,18 @@ import SwitchButton from 'sentry/components/switchButton';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {useLocation} from 'sentry/utils/useLocation';
+import {RESOURCE_THROUGHPUT_UNIT} from 'sentry/views/performance/browser/resources';
 import ResourceTable from 'sentry/views/performance/browser/resources/jsCssView/resourceTable';
-import DomainSelector from 'sentry/views/performance/browser/resources/shared/domainSelector';
 import SelectControlWithProps from 'sentry/views/performance/browser/resources/shared/selectControlWithProps';
 import {
   BrowserStarfishFields,
   useResourceModuleFilters,
 } from 'sentry/views/performance/browser/resources/utils/useResourceFilters';
 import {useResourcePagesQuery} from 'sentry/views/performance/browser/resources/utils/useResourcePagesQuery';
 import {useResourceSort} from 'sentry/views/performance/browser/resources/utils/useResourceSort';
+import {ModuleName} from 'sentry/views/starfish/types';
+import {SpanTimeCharts} from 'sentry/views/starfish/views/spans/spanTimeCharts';
+import {ModuleFilters} from 'sentry/views/starfish/views/spans/useModuleFilters';
 
 const {
   SPAN_OP: RESOURCE_TYPE,
@@ -23,7 +26,7 @@ const {
   RESOURCE_RENDER_BLOCKING_STATUS,
 } = BrowserStarfishFields;
 
-const DEFAULT_RESOURCE_TYPES = ['resource.script', 'resource.css'];
+export const DEFAULT_RESOURCE_TYPES = ['resource.script', 'resource.css'];
 
 type Option = {
   label: string;
@@ -35,6 +38,11 @@ function JSCSSView() {
   const sort = useResourceSort();
   const location = useLocation();
 
+  const spanTimeChartsFilters: ModuleFilters = {
+    'span.op': `[${DEFAULT_RESOURCE_TYPES.join(',')}]`,
+    ...(filters[SPAN_DOMAIN] ? {[SPAN_DOMAIN]: filters[SPAN_DOMAIN]} : {}),
+  };
+
   const handleBlockingToggle: MouseEventHandler = () => {
     const hasBlocking = filters[RESOURCE_RENDER_BLOCKING_STATUS] === 'blocking';
     const newBlocking = hasBlocking ? undefined : 'blocking';
@@ -49,11 +57,13 @@ function JSCSSView() {
 
   return (
     <Fragment>
+      <SpanTimeCharts
+        moduleName={ModuleName.OTHER}
+        appliedFilters={spanTimeChartsFilters}
+        throughputUnit={RESOURCE_THROUGHPUT_UNIT}
+      />
+
       <FilterOptionsContainer>
-        <DomainSelector
-          value={filters[SPAN_DOMAIN] || ''}
-          defaultResourceTypes={DEFAULT_RESOURCE_TYPES}
-        />
         <ResourceTypeSelector value={filters[RESOURCE_TYPE] || ''} />
         <PageSelector
           value={filters[TRANSACTION] || ''}
diff --git a/static/app/views/starfish/views/spans/spanTimeCharts.tsx b/static/app/views/starfish/views/spans/spanTimeCharts.tsx
@@ -16,6 +16,7 @@ import {ModuleName, SpanMetricsField} from 'sentry/views/starfish/types';
 import {STARFISH_CHART_INTERVAL_FIDELITY} from 'sentry/views/starfish/utils/constants';
 import {useSpansQuery} from 'sentry/views/starfish/utils/useSpansQuery';
 import {useErrorRateQuery as useErrorCountQuery} from 'sentry/views/starfish/views/spans/queries';
+import {EMPTY_OPTION_VALUE} from 'sentry/views/starfish/views/spans/selectors/emptyOption';
 import {
   DataTitles,
   getDurationChartTitle,
@@ -24,26 +25,33 @@ import {
 import {ModuleFilters} from 'sentry/views/starfish/views/spans/useModuleFilters';
 import {NULL_SPAN_CATEGORY} from 'sentry/views/starfish/views/webServiceView/spanGroupBreakdownContainer';
 
-const {SPAN_SELF_TIME, SPAN_MODULE, SPAN_DESCRIPTION} = SpanMetricsField;
+const {SPAN_SELF_TIME, SPAN_MODULE, SPAN_DESCRIPTION, SPAN_DOMAIN} = SpanMetricsField;
 
 const CHART_HEIGHT = 140;
 
 type Props = {
   appliedFilters: ModuleFilters;
   moduleName: ModuleName;
   spanCategory?: string;
+  throughputUnit?: RateUnits;
 };
 
 type ChartProps = {
   filters: ModuleFilters;
   moduleName: ModuleName;
+  throughtputUnit: RateUnits;
 };
 
 function getSegmentLabel(moduleName: ModuleName) {
   return moduleName === ModuleName.DB ? 'Queries' : 'Requests';
 }
 
-export function SpanTimeCharts({moduleName, appliedFilters, spanCategory}: Props) {
+export function SpanTimeCharts({
+  moduleName,
+  appliedFilters,
+  spanCategory,
+  throughputUnit = RateUnits.PER_MINUTE,
+}: Props) {
   const {selection} = usePageFilters();
 
   const eventView = getEventView(moduleName, selection, appliedFilters, spanCategory);
@@ -61,7 +69,7 @@ export function SpanTimeCharts({moduleName, appliedFilters, spanCategory}: Props
     {Comp: (props: ChartProps) => JSX.Element; title: string}[]
   > = {
     [ModuleName.ALL]: [
-      {title: getThroughputChartTitle(moduleName), Comp: ThroughputChart},
+      {title: getThroughputChartTitle(moduleName, throughputUnit), Comp: ThroughputChart},
       {title: getDurationChartTitle(moduleName), Comp: DurationChart},
     ],
     [ModuleName.DB]: [],
@@ -79,15 +87,23 @@ export function SpanTimeCharts({moduleName, appliedFilters, spanCategory}: Props
       {charts.map(({title, Comp}) => (
         <ChartsContainerItem key={title}>
           <ChartPanel title={title}>
-            <Comp moduleName={moduleName} filters={appliedFilters} />
+            <Comp
+              moduleName={moduleName}
+              filters={appliedFilters}
+              throughtputUnit={throughputUnit}
+            />
           </ChartPanel>
         </ChartsContainerItem>
       ))}
     </ChartsContainer>
   );
 }
 
-function ThroughputChart({moduleName, filters}: ChartProps): JSX.Element {
+function ThroughputChart({
+  moduleName,
+  filters,
+  throughtputUnit,
+}: ChartProps): JSX.Element {
   const pageFilters = usePageFilters();
   const eventView = getEventView(moduleName, pageFilters.selection, filters);
 
@@ -108,10 +124,17 @@ function ThroughputChart({moduleName, filters}: ChartProps): JSX.Element {
   const throughputTimeSeries = Object.keys(dataByGroup).map(groupName => {
     const groupData = dataByGroup[groupName];
 
+    let throughputMultiplier = 1; // We're fetching per minute, so default is 1
+    if (throughtputUnit === RateUnits.PER_SECOND) {
+      throughputMultiplier = 1 / 60;
+    } else if (throughtputUnit === RateUnits.PER_HOUR) {
+      throughputMultiplier = 60;
+    }
+
     return {
       seriesName: label ?? 'Throughput',
       data: (groupData ?? []).map(datum => ({
-        value: datum['spm()'],
+        value: datum['spm()'] * throughputMultiplier,
         name: datum.interval,
       })),
     };
@@ -131,12 +154,12 @@ function ThroughputChart({moduleName, filters}: ChartProps): JSX.Element {
       }}
       definedAxisTicks={4}
       aggregateOutputFormat="rate"
-      rateUnit={RateUnits.PER_MINUTE}
+      rateUnit={throughtputUnit}
       stacked
       isLineChart
       chartColors={[THROUGHPUT_COLOR]}
       tooltipFormatterOptions={{
-        valueFormatter: value => formatRate(value, RateUnits.PER_MINUTE),
+        valueFormatter: value => formatRate(value, throughtputUnit),
       }}
     />
   );
@@ -227,7 +250,7 @@ function ErrorChart({moduleName, filters}: ChartProps): JSX.Element {
   );
 }
 
-const SPAN_FILTER_KEYS = ['span_operation', 'domain', 'action'];
+const SPAN_FILTER_KEYS = ['span_operation', SPAN_DOMAIN, 'action'];
 
 const getEventView = (
   moduleName: ModuleName,
@@ -260,7 +283,11 @@ const buildDiscoverQueryConditions = (
     .filter(key => SPAN_FILTER_KEYS.includes(key))
     .filter(key => Boolean(appliedFilters[key]))
     .map(key => {
-      return `${key}:${appliedFilters[key]}`;
+      const value = appliedFilters[key];
+      if (key === SPAN_DOMAIN && value === EMPTY_OPTION_VALUE) {
+        return [`!has:${SPAN_DOMAIN}`];
+      }
+      return `${key}:${value}`;
     });
 
   result.push(`has:${SPAN_DESCRIPTION}`);
diff --git a/static/app/views/starfish/views/spans/types.tsx b/static/app/views/starfish/views/spans/types.tsx
@@ -1,5 +1,6 @@
 import {t} from 'sentry/locale';
 import {defined} from 'sentry/utils';
+import {RATE_UNIT_TITLE, RateUnits} from 'sentry/utils/discover/fields';
 
 export type DataKey =
   | 'change'
@@ -38,12 +39,15 @@ export const DataTitles: Record<DataKey, string> = {
   'avg(http.response_transfer_size)': t('Avg Transfer Size'),
 };
 
-export const getThroughputTitle = (spanOp?: string) => {
+export const getThroughputTitle = (
+  spanOp?: string,
+  throughputUnit = RateUnits.PER_MINUTE
+) => {
   if (spanOp?.startsWith('db')) {
-    return t('Queries Per Min');
+    return `${t('Queries')} ${RATE_UNIT_TITLE[throughputUnit]}`;
   }
   if (defined(spanOp)) {
-    return t('Requests Per Sec');
+    return `${t('Requests')} ${RATE_UNIT_TITLE[throughputUnit]}`;
   }
   return '--';
 };
@@ -56,12 +60,15 @@ export const getDurationChartTitle = (spanOp?: string) => {
   return '--';
 };
 
-export const getThroughputChartTitle = (spanOp?: string) => {
+export const getThroughputChartTitle = (
+  spanOp?: string,
+  throughputUnit = RateUnits.PER_MINUTE
+) => {
   if (spanOp?.startsWith('db')) {
-    return t('Queries Per Minute');
+    return `${t('Queries')} ${RATE_UNIT_TITLE[throughputUnit]}`;
   }
   if (spanOp) {
-    return t('Requests Per Minute');
+    return `${t('Requests')} ${RATE_UNIT_TITLE[throughputUnit]}`;
   }
   return '--';
 };
