[ui] Polish runs feed UI #25712

bengotow · 2024-11-03T15:13:45Z

Summary & Motivation

Related: https://linear.app/dagster-labs/issue/FE-515/backfills-and-runs-consolidation-ui-frontend

This is a collection of small tweaks to improve the UI/UX of the runs feed pulled from this doc of dogfooding feedback: https://www.notion.so/dagster/new-Runs-page-1-9-dogfooding-12918b92e462807688fee0e644a34641

UI does not reset to page 1 when you change filters
“Target” column occupies more space than necessary
When paginating, should reset scroll to top
Might be good to use middle-truncate or end-truncate on single assets/jobs in the Target column
Column cuts off “Launched by” content
“Automation condition” tag tooltip is applied to the entire width of the cell instead of just the tag, probably need a wrapper div on the
During Loading, the header of the table is shown, then it disappears if there are no results
26 runs per page?
Run page header vertical padding is lost on narrow viewport
Run timeline: use monospace font for run ID

How I Tested These Changes

I tested all of these manually using the runs feed page and other impacted pages (for the middle truncate items)

github-actions · 2024-11-03T15:16:56Z

Deploy preview for dagit-storybook ready!

✅ Preview
https://dagit-storybook-5vut9borj-elementl.vercel.app
https://bengotow-2024-11-runs-feed-polish.components-storybook.dagster-docs.io

Built with commit d81f5a3.
This pull request is being automatically deployed with vercel-action

github-actions · 2024-11-03T15:17:22Z

Deploy preview for dagit-core-storybook ready!

✅ Preview
https://dagit-core-storybook-7d95yclnf-elementl.vercel.app
https://bengotow-2024-11-runs-feed-polish.core-storybook.dagster-docs.io

Built with commit d81f5a3.
This pull request is being automatically deployed with vercel-action

bengotow · 2024-11-03T15:15:58Z

js_modules/dagster-ui/packages/ui-components/src/components/PageHeader.tsx

@@ -25,8 +25,9 @@ export const PageHeader = (props: Props) => {
    >
      {title && (
        <Box
+          padding={{vertical: 8}}


This is a global change but I verified it on a bunch of pages - the padding only takes effect when the height of the content in this box exceeds 36px, which is only the case when it is wrapping to two lines. It does need to be 8 or less pixels though -- otherwise our headers containing buttons get taller.

Is it worth making this its own PR? It might be annoying to have to do a revert if this breaks something unexpectedly.

Ahh I think you're right, I'll break this out into a separate PR

bengotow · 2024-11-03T15:16:23Z

js_modules/dagster-ui/packages/ui-core/src/assets/AssetNodeOverview.tsx

@@ -317,17 +317,19 @@ export const AssetNodeOverview = ({
      </AttributeAndValue>

      <AttributeAndValue label="Code location">
-        <Box flex={{direction: 'column'}}>
+        <Box flex={{direction: 'column', alignItems: 'flex-start', gap: 8}}>


This is a drive-by fix for this scenario:

after:

I feel like it would be nice to have a mini-alert component, these always feel too big for sidebars.

Yeah I agree, there's at least one that appears in the asset graph's sidebar and I think in that scenario we place it at the top with no whitespace around it all. Will see if Josh has thoughts about this in a follow-up

hellendag · 2024-11-04T16:03:07Z

js_modules/dagster-ui/packages/ui-components/src/components/PageHeader.tsx

@@ -25,8 +25,9 @@ export const PageHeader = (props: Props) => {
    >
      {title && (
        <Box
+          padding={{vertical: 8}}


Is it worth making this its own PR? It might be annoying to have to do a revert if this breaks something unexpectedly.

hellendag · 2024-11-04T16:03:39Z

js_modules/dagster-ui/packages/ui-core/src/assets/AssetNodeOverview.tsx

@@ -317,17 +317,19 @@ export const AssetNodeOverview = ({
      </AttributeAndValue>

      <AttributeAndValue label="Code location">
-        <Box flex={{direction: 'column'}}>
+        <Box flex={{direction: 'column', alignItems: 'flex-start', gap: 8}}>


I feel like it would be nice to have a mini-alert component, these always feel too big for sidebars.

hellendag · 2024-11-04T16:04:20Z

js_modules/dagster-ui/packages/ui-core/src/runs/RunsFeedRow.tsx

@@ -104,6 +104,12 @@ export const RunsFeedRow = ({
            flex={{direction: 'row', alignItems: 'center', wrap: 'wrap'}}
            style={{gap: '4px 8px', lineHeight: 0}}
          >
+            {entry.__typename === 'PartitionBackfill' ? (
+              <Tag intent="none">
+                <span>Backfill</span>


span wrapper necessary?

Looks like it's not! Will remove

hellendag · 2024-11-04T16:05:21Z

js_modules/dagster-ui/packages/ui-core/src/runs/useRunsFeedEntries.tsx

@@ -11,9 +11,9 @@ import {gql, useQuery} from '../apollo-client';
 import {PYTHON_ERROR_FRAGMENT} from '../app/PythonErrorFragment';
 import {RunsFilter} from '../graphql/types';

-const PAGE_SIZE = 25;
+const PAGE_SIZE = 29;


Ahh this is because of a bug on the graphql side that causes it to return 1 more row than requested. Let me see if i can find the root cause and fix it there so this is less janky

bengotow requested review from salazarm, braunjj and hellendag November 3, 2024 15:13

bengotow force-pushed the bengotow-2024-11/runs-feed-polish branch from 1bd28b8 to 89187bc Compare November 3, 2024 15:18

bengotow commented Nov 3, 2024

View reviewed changes

hellendag approved these changes Nov 4, 2024

View reviewed changes

bengotow force-pushed the bengotow-2024-11/runs-feed-polish branch 2 times, most recently from 07654fe to 456d431 Compare November 6, 2024 15:04

bengotow added 4 commits November 7, 2024 09:05

[ui] Polish runs feed UI

c1edaa2

PR feedback

e06149c

PR feedback, better fix than “page size= 29”

de7719f

fix circular import

d81f5a3

bengotow force-pushed the bengotow-2024-11/runs-feed-polish branch from 456d431 to d81f5a3 Compare November 7, 2024 15:08

bengotow merged commit b3d14fe into master Nov 7, 2024
3 checks passed

bengotow deleted the bengotow-2024-11/runs-feed-polish branch November 7, 2024 18:21

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ui] Polish runs feed UI #25712

[ui] Polish runs feed UI #25712

bengotow commented Nov 3, 2024 •

edited

Loading

github-actions bot commented Nov 3, 2024 •

edited

Loading

github-actions bot commented Nov 3, 2024 •

edited

Loading

bengotow Nov 3, 2024 •

edited

Loading

hellendag Nov 4, 2024

bengotow Nov 5, 2024

bengotow Nov 3, 2024

hellendag Nov 4, 2024

bengotow Nov 5, 2024

hellendag Nov 4, 2024

hellendag Nov 4, 2024

hellendag Nov 4, 2024

bengotow Nov 5, 2024

hellendag Nov 4, 2024

bengotow Nov 5, 2024

[ui] Polish runs feed UI #25712

[ui] Polish runs feed UI #25712

Conversation

bengotow commented Nov 3, 2024 • edited Loading

Summary & Motivation

How I Tested These Changes

github-actions bot commented Nov 3, 2024 • edited Loading

github-actions bot commented Nov 3, 2024 • edited Loading

bengotow Nov 3, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bengotow commented Nov 3, 2024 •

edited

Loading

github-actions bot commented Nov 3, 2024 •

edited

Loading

github-actions bot commented Nov 3, 2024 •

edited

Loading

bengotow Nov 3, 2024 •

edited

Loading