[ui] FIx backfill partition range coloring, clarify meaning of progress bars #26123
Conversation
bengotow
force-pushed
the
bengotow-2024-11/FE-689
branch
from
9bd2a6c
to
456ee08
Compare
|
Deploy preview for dagit-core-storybook ready! ✅ Preview Built with commit 307de04. |
bengotow
force-pushed
the
bengotow-2024-11/FE-689
branch
from
456ee08
to
4afe744
Compare
| const pctSucceeded = (100 * succeeded) / targeted; | ||
| const pctFailed = (100 * failed) / targeted; | ||
| const pctInProgress = (100 * inProgress) / targeted; |
There was a problem hiding this comment.
Worth truncating the decimal value so you don't end up with super long decimal values?
There was a problem hiding this comment.
Ahh good call, I'll throw a .toFixed(2) on these when they're passed to the template grid CSS below just to keep it sane
bengotow
force-pushed
the
bengotow-2024-11/FE-689
branch
2 times, most recently
from
1381288
to
6bf5582
Compare
![graphite-app[bot]](https://avatars.githubusercontent.com/in/158384?s=60&v=4){kind=small}
| <div style={{background: Colors.accentRed()}} /> | ||
| <div style={{background: Colors.accentBlue()}} /> | ||
| </div> | ||
| <Caption color={Colors.textLight()}>{`${pctFinal}% completed`}</Caption> |
There was a problem hiding this comment.
Earlier in this PR, the terminology was standardized from "completed" to "succeeded". To maintain this consistency, consider updating the caption text to:
<Caption color={Colors.textLight()}>{`${pctFinal}% succeeded`}</Caption>Spotted by Graphite Reviewer
Is this helpful? React 👍 or 👎 to let us know.
There was a problem hiding this comment.
This is subtle but this is actually the place we want to disambiguate apart from succeeded
bengotow
force-pushed
the
bengotow-2024-11/FE-689
branch
from
6bf5582
to
307de04
Compare
Summary & Motivation
Related: https://linear.app/dagster-labs/issue/FE-689/backfill-ui-partition-range-display-issue
This is a handful of small fixes for the backfill partitions pages:
These tags were rendering full-width, and the terminology (succeeded vs completed) was inconsistent. Clicking it takes you to a view of Succeeded runs, so I changed both to succeeded:
On this page, the two gray colors used in the bars were very similar, which was confusing - now using
backgroundDisabled():How I Tested These Changes
I tested these changes manually using both op and asset backfills!