feat(insights): Introduce sort by selector for releases #82302

priscilawebdev · 2024-12-18T13:40:44Z

Before

Screen.Recording.2024-12-18.at.14.38.29.mov

After

Screen.Recording.2024-12-18.at.14.39.09.mov

closes #82004

priscilawebdev · 2024-12-18T13:43:25Z

static/app/constants/releases.tsx

@@ -0,0 +1,11 @@
+export enum ReleasesSortOption {


this enum was just moved from

sentry/static/app/views/releases/list/releasesSortOptions.tsx

Lines 8 to 18 in 5078825

export enum ReleasesSortOption {

CRASH_FREE_USERS = 'crash_free_users',

CRASH_FREE_SESSIONS = 'crash_free_sessions',

USERS_24_HOURS = 'users_24h',

SESSIONS_24_HOURS = 'sessions_24h',

SESSIONS = 'sessions',

DATE = 'date',

BUILD = 'build',

SEMVER = 'semver',

ADOPTION = 'adoption',

}

priscilawebdev · 2024-12-18T13:44:00Z

static/app/constants/releases.tsx

+  CRASH_FREE_USERS = 'crash_free_users',
+  CRASH_FREE_SESSIONS = 'crash_free_sessions',
+  USERS_24_HOURS = 'users_24h',
+  SESSIONS_24_HOURS = 'sessions_24h',
+  SESSIONS = 'sessions',
+  DATE = 'date',
+  BUILD = 'build',
+  SEMVER = 'semver',
+  ADOPTION = 'adoption',


@philipphofmann can you confirm that we would like to provide all these sort by options?

I would remove crash-free-users and crash-free-session, as we are filtering releases for performance data, and I don't think that is relevant. I would keep the rest.

priscilawebdev · 2024-12-18T13:45:17Z

static/app/views/insights/common/components/releaseSelector.tsx

+function getSortRealesesBy(
+  sort: ReleasesSortByOption,
+  environments: string[]
+): ReleasesSortByOption {
+  // Require 1 environment for date adopted
+  if (sort === ReleasesSortOption.ADOPTION && environments.length !== 1) {
+    return ReleasesSortOption.DATE;
+  }
+
+  const sortExists = Object.keys(SORT_BY_OPTIONS).includes(sort ?? '');
+
+  if (sortExists) {
+    return sort;
+  }
+
+  return ReleasesSortOption.DATE;
+}


you can find the same logic here

static/app/views/insights/common/queries/useReleases.tsx

…tor/introduce-sort-by-selector

codecov · 2024-12-18T13:56:31Z

Codecov Report

All modified and coverable lines are covered by tests ✅

✅ All tests successful. No failed tests found.

Additional details and impacted files

@@             Coverage Diff             @@
##           master   #82302       +/-   ##
===========================================
- Coverage   87.56%   80.41%    -7.15%     
===========================================
  Files        9410     7289     -2121     
  Lines      536906   319467   -217439     
  Branches    21118    20862      -256     
===========================================
- Hits       470131   256914   -213217     
+ Misses      66409    62148     -4261     
- Partials      366      405       +39

matejminar

@priscilawebdev @philipphofmann How about we save the sorting preference in the local storage so that it's remembered?

…-sort-by-selector' of github.com:getsentry/sentry into priscila/feat/screen-summary/releses-selector/introduce-sort-by-selector

priscilawebdev · 2024-12-18T14:05:15Z

@matejminar we can, but it won't be consistent with what we do on the releases page for example. We perform the queries based on the URLs parameters

priscilawebdev · 2024-12-18T14:11:42Z

Thinking about it...since users should navigate these pages more, it seems like a good idea...will just wait for @philipphofmann thumbs up

philipphofmann · 2024-12-18T15:55:00Z

@priscilawebdev @philipphofmann How about we save the sorting preference in the local storage so that it's remembered?

I think that would make sense unless it's a lot of work.

codecov · 2024-12-19T08:03:36Z

Bundle Report

Changes will increase total bundle size by 5.24kB (0.02%) ⬆️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
app-webpack-bundle-array-push	32.21MB	5.24kB (0.02%) ⬆️

priscilawebdev · 2024-12-19T09:09:59Z

@matejminar we always get only 50 releases and the selected time range only affects the second request /events/ where we grab the event count.

matejminar · 2024-12-19T16:10:17Z

Yeah, that's what I was afraid of. In that case I'd completely remove sort by Number of Events.
It is not a true sort and it might be confusing or straight up wrong for some customers.
The main motivation behind sorting by number of events anyway is to get to the releases that are used the most and for that we have already other sorting options (like sort by sessions, etc.)

priscilawebdev · 2024-12-20T09:11:32Z

hey @matejminar yes it makes sense as it is not a true sorting. I have removed the option in the commit

JonasBa · 2024-12-20T12:06:26Z

@priscilawebdev I just did a quick drive-by review, none of my comments are blocking, so feel free to merge this once someone approves it :)

gggritso

Makes sense! All I have is nits. Out of curiosity, where did the designs come from?

static/app/views/insights/common/queries/useReleases.tsx

static/app/views/insights/common/components/releaseSelector.tsx

gggritso · 2024-12-27T19:32:24Z

static/app/views/insights/common/components/releaseSelector.tsx

+  useEffect(() => {
+    if (urlStoragedReleaseBy === localStoragedReleaseBy) {
+      return;
+    }
+
+    // this is useful in case the user shares the url with another user
+    // and the user has a different sort by in their local storage
+    if (!urlStoragedReleaseBy) {
+      navigate(
+        {
+          ...location,
+          query: {
+            ...location.query,
+            sortReleasesBy: localStoragedReleaseBy,
+          },
+        },
+        {replace: true}
+      );
+      return;
+    }
+
+    setLocalStoragedReleaseBy(urlStoragedReleaseBy);
+  }, [


I have a question about this! React documentation is very explicit that renders must be pure (though I guess in this case, it's not a huge deal). Maybe this is a good case for useLayoutEffect, since it block browser paint?

…tor/introduce-sort-by-selector

priscilawebdev · 2025-01-02T09:21:12Z

@gggritso Since there is a plan to refactor this page ~~completely~~, the sort selector was a quick solution from @Jesse-Box

priscilawebdev · 2025-01-02T14:06:51Z

The only UX issue with this change is that, if no primary or secondary release is selected, useReleaseSelection will automatically choose the first and second releases from a list, which is ordered by date. The selected value is then moved to the top of the list, and depending on the sort by selection, this can make it unclear to users that only elements after the first one are actually sorted.

I had a solution in mind that addresses this issue (see below), but when no releases are returned based on the selected sortBy option, we would need to always display the label "Sorted By ...." anyways. To implement this, we would have to refactor the compact selector core component, which we prefer not to do since this is intended to be a temporary solution.

Screen.Recording.2025-01-02.at.15.05.49.mov

@gggritso do you have any thoughts on this?

gggritso · 2025-01-02T17:54:38Z

@priscilawebdev 🤔 I have two questions!

useReleaseSelection will automatically choose the first and second releases from a list, which is ordered by date

Is it possible to update useReleaseSelection to pass the user-selected sort order to useReleases? If yes, does that eliminate the problem with the confusing sort order?

when no releases are returned based on the selected sortBy option

When does this happen? Is this caused by a server error, or is this a condition that might be caused by the user?

priscilawebdev · 2025-01-03T08:09:44Z

@gggritso here the first answer:

Is it possible to update useReleaseSelection to pass the user-selected sort order to useReleases? If yes, does that eliminate the problem with the confusing sort order?

I initially considered this approach and implemented exactly what you suggested, which resolves the issue in the release selector. However, we don’t want the entire page to change based on the selected sortBy option. While we could address the problem just for the release selector, it would look odd to have a mismatch between the selected releases and the displayed data

…tor/introduce-sort-by-selector

priscilawebdev · 2025-01-03T12:34:54Z

@gggritso

When does this happen? Is this caused by a server error, or is this a condition that might be caused by the user?

For example, when selecting the "Build Number" sort option, I always get a response with 50 data items. However, when performing the /events/ query, the response is empty, and as a result, no options are displayed in the release list. I suspect there may be an issue with the query, possibly related to the Metrics Dataset. Also, why aren't we including the time range in the /releases/ query? maybe you or @shruthilayaj know something?

gggritso · 2025-01-03T17:37:44Z

@priscilawebdev I took a quick look! A few things came up

When sorting by "Build Number", the releases that come back from /releases/ are Android debug builds that don't have any events. I don't think there's any problem with the /events/ query
The release dropdown omits any releases with 0 events, so the dropdown is empty
I'm not sure why the /releases/ query doesn't include the date range, sorry!

As for your original question, sorry, I don't have a good suggestions for how to resolve the weird UI if you don't think using the sort works. This would be better answered by someone from Design or someone who worked/works on the module, as you said.

If it were me, I might just leave it alone. The behaviour is weird, yes, but it's the same behaviour as when you chose a date range far in the past, or a short date range with no events, etc.

Otherwise, maybe talk to Vu about supporting empty sections in CompactDropdown so the "Sorted by Date" section could say "No releases found" or something similar?

priscilawebdev · 2025-01-07T07:19:26Z

@gggritso thanks so much for taking a look at this! 🙏 I always assumed that a release in Sentry always contained events, so this was really helpful to clarify.

As for the dropdown, I might just leave it as is for now, since these components are due for a refactor soon anyway. Hopefully, that’ll be happening sooner rather than later!

…tor/introduce-sort-by-selector

feat(insights): Introduce sort by selector for releases

5d2c93f

github-actions bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Dec 18, 2024

move code

1bb7e0e

priscilawebdev commented Dec 18, 2024

View reviewed changes

vercel bot deployed to Preview December 18, 2024 13:46 View deployment

priscilawebdev commented Dec 18, 2024

View reviewed changes

Merge branch 'master' into priscila/feat/screen-summary/releses-selec…

09200be

…tor/introduce-sort-by-selector

priscilawebdev requested a review from a team December 18, 2024 13:49

priscilawebdev marked this pull request as ready for review December 18, 2024 13:49

priscilawebdev requested review from a team as code owners December 18, 2024 13:49

vercel bot deployed to Preview December 18, 2024 13:51 View deployment

fix import

83010ca

matejminar reviewed Dec 18, 2024

View reviewed changes

Merge branch 'priscila/feat/screen-summary/releses-selector/introduce…

e759a34

…-sort-by-selector' of github.com:getsentry/sentry into priscila/feat/screen-summary/releses-selector/introduce-sort-by-selector

vercel bot deployed to Preview December 18, 2024 14:10 View deployment

remove sort by options

33db74b

vercel bot deployed to Preview December 19, 2024 08:00 View deployment

priscilawebdev added 2 commits December 19, 2024 09:38

store localStorage

1e23dc9

add a comment

3bd0add

priscilawebdev requested review from philipphofmann and matejminar December 19, 2024 08:43

vercel bot deployed to Preview December 19, 2024 08:46 View deployment

priscilawebdev added 2 commits December 20, 2024 09:40

feedback - 2

2cc8153

feedback - 3

e2ec015

vercel bot deployed to Preview December 20, 2024 09:01 View deployment

priscilawebdev requested a review from JonasBa December 20, 2024 09:10

gggritso approved these changes Dec 27, 2024

View reviewed changes

Merge branch 'master' into priscila/feat/screen-summary/releses-selec…

1e8b624

…tor/introduce-sort-by-selector

vercel bot deployed to Preview January 2, 2025 09:23 View deployment

feedback

7d54fb5

vercel bot deployed to Preview January 2, 2025 09:35 View deployment

add comment

c2d43bf

priscilawebdev force-pushed the priscila/feat/screen-summary/releses-selector/introduce-sort-by-selector branch from e32c3aa to c2d43bf Compare January 2, 2025 14:16

vercel bot deployed to Preview January 2, 2025 14:20 View deployment

Merge branch 'master' into priscila/feat/screen-summary/releses-selec…

795676d

…tor/introduce-sort-by-selector

vercel bot deployed to Preview January 3, 2025 08:21 View deployment

separate options

4f1c30c

vercel bot deployed to Preview January 3, 2025 12:43 View deployment

Merge branch 'master' into priscila/feat/screen-summary/releses-selec…

8ea04e8

…tor/introduce-sort-by-selector

priscilawebdev enabled auto-merge (squash) January 7, 2025 07:23

vercel bot deployed to Preview January 7, 2025 07:24 View deployment

priscilawebdev merged commit e7f0473 into master Jan 7, 2025
43 checks passed

priscilawebdev deleted the priscila/feat/screen-summary/releses-selector/introduce-sort-by-selector branch January 7, 2025 07:32

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(insights): Introduce sort by selector for releases #82302

feat(insights): Introduce sort by selector for releases #82302

priscilawebdev commented Dec 18, 2024

priscilawebdev Dec 18, 2024

priscilawebdev Dec 18, 2024

philipphofmann Dec 18, 2024

priscilawebdev Dec 18, 2024

codecov bot commented Dec 18, 2024 •

edited

Loading

matejminar left a comment

priscilawebdev commented Dec 18, 2024 •

edited

Loading

priscilawebdev commented Dec 18, 2024

philipphofmann commented Dec 18, 2024

codecov bot commented Dec 19, 2024 •

edited

Loading

priscilawebdev commented Dec 19, 2024

matejminar commented Dec 19, 2024

priscilawebdev commented Dec 20, 2024

JonasBa commented Dec 20, 2024

gggritso left a comment

gggritso Dec 27, 2024

priscilawebdev commented Jan 2, 2025 •

edited

Loading

priscilawebdev commented Jan 2, 2025 •

edited

Loading

gggritso commented Jan 2, 2025

priscilawebdev commented Jan 3, 2025

priscilawebdev commented Jan 3, 2025 •

edited

Loading

gggritso commented Jan 3, 2025

priscilawebdev commented Jan 7, 2025

	export enum ReleasesSortOption {
	CRASH_FREE_USERS = 'crash_free_users',
	CRASH_FREE_SESSIONS = 'crash_free_sessions',
	USERS_24_HOURS = 'users_24h',
	SESSIONS_24_HOURS = 'sessions_24h',
	SESSIONS = 'sessions',
	DATE = 'date',
	BUILD = 'build',
	SEMVER = 'semver',
	ADOPTION = 'adoption',
	}

feat(insights): Introduce sort by selector for releases #82302

feat(insights): Introduce sort by selector for releases #82302

Conversation

priscilawebdev commented Dec 18, 2024

priscilawebdev Dec 18, 2024

Choose a reason for hiding this comment

priscilawebdev Dec 18, 2024

Choose a reason for hiding this comment

philipphofmann Dec 18, 2024

Choose a reason for hiding this comment

priscilawebdev Dec 18, 2024

Choose a reason for hiding this comment

codecov bot commented Dec 18, 2024 • edited Loading

Codecov Report

matejminar left a comment

Choose a reason for hiding this comment

priscilawebdev commented Dec 18, 2024 • edited Loading

priscilawebdev commented Dec 18, 2024

philipphofmann commented Dec 18, 2024

codecov bot commented Dec 19, 2024 • edited Loading

Bundle Report

priscilawebdev commented Dec 19, 2024

matejminar commented Dec 19, 2024

priscilawebdev commented Dec 20, 2024

JonasBa commented Dec 20, 2024

gggritso left a comment

Choose a reason for hiding this comment

gggritso Dec 27, 2024

Choose a reason for hiding this comment

priscilawebdev commented Jan 2, 2025 • edited Loading

priscilawebdev commented Jan 2, 2025 • edited Loading

gggritso commented Jan 2, 2025

priscilawebdev commented Jan 3, 2025

priscilawebdev commented Jan 3, 2025 • edited Loading

gggritso commented Jan 3, 2025

priscilawebdev commented Jan 7, 2025

codecov bot commented Dec 18, 2024 •

edited

Loading

priscilawebdev commented Dec 18, 2024 •

edited

Loading

codecov bot commented Dec 19, 2024 •

edited

Loading

priscilawebdev commented Jan 2, 2025 •

edited

Loading

priscilawebdev commented Jan 2, 2025 •

edited

Loading

priscilawebdev commented Jan 3, 2025 •

edited

Loading