chore(starfish): Remove change column in screen load spans page (#57910)

This removes this change column on the spans page for screen loads, updates the table query filter to only include the primary filter and increases the limit on the number of spans returned. Also, small clean up on the sample list so description actually overflows properly. Different configurations shown below: with and without span description & small and large viewports. ![Screenshot 2023-10-11 at 12 09 13 PM](https://github.com/getsentry/sentry/assets/63818634/65fe5d94-e586-4ddc-ba38-1e242c3353bf) ![Screenshot 2023-10-11 at 12 07 56 PM](https://github.com/getsentry/sentry/assets/63818634/d6dc37dd-cf11-4bdc-8569-0856424e7ece) ![Screenshot 2023-10-11 at 12 07 49 PM](https://github.com/getsentry/sentry/assets/63818634/e79a642a-5547-4176-999a-ce0bd2abdc5a) ![Screenshot 2023-10-11 at 12 04 03 PM](https://github.com/getsentry/sentry/assets/63818634/8042243c-f7b5-403f-82b3-a94afa13b7c2) ![Screenshot 2023-10-11 at 12 03 56 PM](https://github.com/getsentry/sentry/assets/63818634/ca5c1643-366e-4ee4-a303-1c56d506fa53) --------- Co-authored-by: Shruthilaya Jaganathan <[email protected]>
getsentry · Oct 16, 2023 · 6bb97c7 · 6bb97c7
1 parent 088e7b4
commit 6bb97c7
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 21 deletions.
diff --git a/static/app/views/starfish/utils/releaseComparison.tsx b/static/app/views/starfish/utils/releaseComparison.tsx
@@ -4,7 +4,7 @@ import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 export function appendReleaseFilters(
   query: MutableSearch,
   primaryRelease: string | undefined,
-  secondaryRelease: string | undefined
+  secondaryRelease?: string
 ) {
   let queryString: string = query.formatString();
   if (

diff --git a/static/app/views/starfish/views/screens/screenLoadSpans/index.tsx b/static/app/views/starfish/views/screens/screenLoadSpans/index.tsx
@@ -63,7 +63,6 @@ function ScreenLoadSpans() {
   const {
     spanGroup,
     primaryRelease,
-    secondaryRelease,
     transaction: transactionName,
     spanDescription,
   } = location.query;
@@ -98,7 +97,6 @@ function ScreenLoadSpans() {
               <ScreenLoadSpansTable
                 transaction={transactionName}
                 primaryRelease={primaryRelease}
-                secondaryRelease={secondaryRelease}
               />
               {spanGroup && (
                 <SampleList

diff --git a/static/app/views/starfish/views/screens/screenLoadSpans/table.tsx b/static/app/views/starfish/views/screens/screenLoadSpans/table.tsx
@@ -34,15 +34,10 @@ const {SPAN_SELF_TIME, SPAN_DESCRIPTION, SPAN_GROUP, SPAN_OP, PROJECT_ID} =
 
 type Props = {
   primaryRelease?: string;
-  secondaryRelease?: string;
   transaction?: string;
 };
 
-export function ScreenLoadSpansTable({
-  transaction,
-  primaryRelease,
-  secondaryRelease,
-}: Props) {
+export function ScreenLoadSpansTable({transaction, primaryRelease}: Props) {
   const location = useLocation();
   const {selection} = usePageFilters();
   const organization = useOrganization();
@@ -54,11 +49,7 @@ export function ScreenLoadSpansTable({
     `transaction:${transaction}`,
     'span.op:[file.read,file.write,ui.load,http.client,db,db.sql.room,db.sql.query,db.sql.transaction]',
   ]);
-  const queryStringPrimary = appendReleaseFilters(
-    searchQuery,
-    primaryRelease,
-    secondaryRelease
-  );
+  const queryStringPrimary = appendReleaseFilters(searchQuery, primaryRelease);
 
   const sort = useModuleSort(QueryParameterNames.SPANS_SORT, {
     kind: 'desc',
@@ -73,7 +64,6 @@ export function ScreenLoadSpansTable({
       SPAN_GROUP,
       SPAN_DESCRIPTION,
       `avg(${SPAN_SELF_TIME})`, // TODO: Update these to avgIf with primary release when available
-      `avg_compare(${SPAN_SELF_TIME},release,${primaryRelease},${secondaryRelease})`,
       'count()',
       'time_spent_percentage(local)',
       `sum(${SPAN_SELF_TIME})`,
@@ -100,8 +90,6 @@ export function ScreenLoadSpansTable({
     [SPAN_DESCRIPTION]: t('Span Description'),
     'count()': DataTitles.count,
     [`avg(${SPAN_SELF_TIME})`]: DataTitles.avg,
-    [`avg_compare(${SPAN_SELF_TIME},release,${primaryRelease},${secondaryRelease})`]:
-      DataTitles.change,
     'time_spent_percentage(local)': DataTitles.timeSpent,
   };
 

diff --git a/static/app/views/starfish/views/screens/screensTable.tsx b/static/app/views/starfish/views/screens/screensTable.tsx
@@ -210,7 +210,7 @@ export function useTableQuery({
     eventView,
     location,
     orgSlug: organization.slug,
-    limit: 10,
+    limit: 25,
     referrer,
     options: {
       refetchOnWindowFocus: false,

diff --git a/static/app/views/starfish/views/spanSummaryPage/sampleList/index.tsx b/static/app/views/starfish/views/spanSummaryPage/sampleList/index.tsx
@@ -154,15 +154,22 @@ const SpanSummaryProjectAvatar = styled(ProjectAvatar)`
 
 const HeaderContainer = styled('div')`
   width: 100%;
-  display: flex;
-  flex-direction: row;
   padding-bottom: ${space(2)};
   padding-top: ${space(1)};
+
+  display: grid;
+  grid-template-rows: auto auto auto;
+
+  @media (min-width: ${p => p.theme.breakpoints.small}) {
+    grid-template-rows: auto;
+    grid-template-columns: auto 1fr auto;
+  }
 `;
 
 const TitleContainer = styled('div')`
   width: 100%;
   position: relative;
+  height: 40px;
 `;
 
 const Title = styled('h4')`
@@ -171,9 +178,10 @@ const Title = styled('h4')`
   margin-bottom: 0;
 `;
 
-const SpanDescription = styled('span')`
+const SpanDescription = styled('div')`
   display: inline-block;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  max-width: 35vw;
 `;