prefect-ui-library
prefect-ui-library copied to clipboard
Combine Flow list page components into new updated one
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
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
This is used in Nebula and has been around for a long time.
The new combined design ✨
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 aflat
variant (forwarding theflat
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.