prefect-ui-library icon indicating copy to clipboard operation
prefect-ui-library copied to clipboard

Combine Flow list page components into new updated one

Open brandonreid opened this issue 1 year ago • 0 comments

Currently we have 2 components for the Flows page. Nebula and OSS are using different ones, which we don't want.

The 2 old components

FlowList.vue component

image

This is used in OSS and includes the most recent and next flow run. It also has stuff we don't need since we returned the Deployments page.

FlowsTable.vue component

image

This is used in Nebula and has been around for a long time.

The new combined design ✨

image

See Figma for the most updated design

This version combines a couple elements into the table. A few things to note:

  • At the prefect-design level
    • [ ] The column header styling is updated here to have smaller, subdued text. Let's update this in prefect-design for all tables as part of this effort.
    • [ ] We're introducing an "inline" variant of a select menu for use in the "Activity" table column header where the user can select from 8h | 24h | 1w. This may well be a one-off pattern, so we can build this into this component or make it a part of prefect-design, dealers choice.
    • [ ] The PIconButtonMenu component needs a flat variant (forwarding the flat prop to the trigger) so it's less heavy in the table.
  • [ ] We're introducing a new "condensed" (prop name tbd) variant of the StateBadge, where only the icon is shown using the bg color of the badge as the icon color. This should have a tooltip on hover that reads out the state name.
  • [ ] We're swapping the older bar graph that's on the Nebula flows page today with the mini variant of the FlowRunsBarChart component.
  • [ ] The sort menu is getting 2 additional options, "Deployments asc" and "Deployments desc" so it's easier to audit flows and their deployment assignments.

brandonreid avatar Sep 21 '23 13:09 brandonreid