feat(ui): Add release bubbles to issue details #86950
Conversation
github-actions
bot
added
the
Scope: Frontend
billyvg
changed the title
useReleaseMarkLineSeries to use useReleaseStats hook
Codecov ReportAll modified and coverable lines are covered by tests ✅ ✅ All tests successful. No failed tests found. Additional details and impacted files@@ Coverage Diff @@
## master #86950 +/- ##
=======================================
Coverage 87.73% 87.73%
=======================================
Files 9892 9892
Lines 561300 561220 -80
Branches 22129 22110 -19
=======================================
- Hits 492475 492408 -67
+ Misses 68423 68410 -13
Partials 402 402 |
static/app/views/dashboards/widgets/timeSeriesWidget/releaseBubbles/useReleaseBubbles.tsx
Outdated
Show resolved
Hide resolved
| const releaseSeries = useReleaseMarkLineSeries({ | ||
| group, | ||
| releases: hasReleaseBubblesSeries ? [] : releases, | ||
| }); |
There was a problem hiding this comment.
I changed this to pass in releases and only do so if bubbles is turned off
billyvg
force-pushed
the
feat-ui-issue-details-release-mark-lines-use-release-stats
branch
from
05b175f to
fb1d633
Compare
billyvg
force-pushed
the
feat-ui-issue-details-release-mark-lines-use-release-stats
branch
from
fb1d633 to
a321c2d
Compare
billyvg
force-pushed
the
feat-ui-issue-details-release-mark-lines-use-release-stats
branch
from
a321c2d to
3e08f31
Compare
billyvg
force-pushed
the
feat-ui-issue-details-release-mark-lines-use-release-stats
branch
from
3e08f31 to
91d201a
Compare
billyvg
force-pushed
the
feat-ui-issue-details-release-mark-lines-use-release-stats
branch
from
91d201a to
5ce604e
Compare
| )} | ||
| showReleaseAs="line" | ||
| /> | ||
| <div style={{height: '220px'}}> |
There was a problem hiding this comment.
I had to remove the height from the drawer to support the issue details chart which uses the default 100px height.
| }, | ||
| }, | ||
| { | ||
| staleTime: 0, |
There was a problem hiding this comment.
| staleTime: 0, | |
| staleTime: Infinity, |
| const releaseSeries = useReleaseMarkLineSeries({ | ||
| group, | ||
| releases: hasReleaseBubblesSeries && showReleasesAs !== 'line' ? [] : releases, | ||
| }); |
There was a problem hiding this comment.
I moved the useReleaseStats hook up into <EventGraph> so that 1) releases data is shared between the two release series (line/bubble) and 2) so that we can better control which display type to show (alternatively I could have introduced an enabled option to both hooks?).
| showSummary={false} | ||
| showReleasesAs="line" | ||
| disableZoomNavigation |
There was a problem hiding this comment.
This is the chart that gets rendered in the drawer, these are the custom options that differentiate it from the main chart.
| {...(disableZoomNavigation | ||
| ? { | ||
| isGroupedByDate: true, | ||
| dataZoom: chartZoomProps.dataZoom, | ||
| } | ||
| : chartZoomProps)} |
There was a problem hiding this comment.
For the chart inside of the drawer -- we dispatch a "zoom" action to it so that it sets the proper time boundaries based on the release bucket timestamps.
| e.getEchartsInstance().dispatchAction({ | ||
| type: 'dataZoom', | ||
| batch: [ | ||
| { | ||
| // data value at starting location | ||
| startValue: startTs, | ||
| // data value at ending location | ||
| endValue: endTs, | ||
| }, | ||
| ], | ||
| }); |
There was a problem hiding this comment.
Sooo in TimeSeriesWidgetsViz we trim the series that the chart renders to be within the release bucket timeframe, but this could be an alternative where we have the chart just "zoom" into the proper timeframe.
|
Putting this back in draft, going to do some design reviews with Vu + Vasudha first. |
billyvg
force-pushed
the
feat-ui-issue-details-release-mark-lines-use-release-stats
branch
from
a50a741 to
13663aa
Compare
billyvg
force-pushed
the
feat-ui-issue-details-release-mark-lines-use-release-stats
branch
from
13663aa to
4d055f7
Compare
Adds new release bubbles to the issue details graph
ref #86946
depends on
<BarChart>#86840