-
Notifications
You must be signed in to change notification settings - Fork 948
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(ui): enhance empty state handling for executions and selection in components #5557
Conversation
…ection header - Added an <el-empty> component to display when data is not available - Updated bulk select header to render only if there is selection and data
- Added <el-empty> component to display when total executions are 0 - Updated conditional rendering for info container and chart display based on total executions
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is great work so far @sikehish.
I have one small cleanup comment on this so far, but i'd like to ask you to add the same logic you've added to executions/Bar.vue
component to the executions/Doughnut.vue
and to logs/Bar.vue
, to cover all of the new charts.
Also, in kestra/ui/src/components/executions/Executions.vue
I would prefer to add <template #table v-if="executions.length">
this to line 143, and in kestra/ui/src/components/flows/Flows.vue
something similar, <template #table v-if="flows.length">
to line 89, as it would look nicer if we don't ave two empty states on the same page, one below the other.
Thank you, will get this done ASAP :) |
Sure, its something straightforward, first here is how you use it, with the
And all you have to do, is to put the english translation here : kestra/ui/src/translations/en.json Line 893 in 51b78a9
Our CI will handle translation in every other language 👍 |
- Added conditional rendering for the executions table in Executions.vue to avoid displaying two empty states on the same page. - Implemented similar changes for the flows table in Flows.vue.
…n logic - Added a new `total` prop to the Doughnut.vue component with type Number. - Implemented similar logic from executions/Bar.vue into executions/Doughnut.vue for consistency in handling total executions.
- Added an `<el-empty>` component to display when `hasStatsData` is false. - Enhanced validation logic in `<template #table>` on line 58 for improved data handling.
- Added translation for "no data" corresponding to "No data available" in `kestra/ui/src/translations/en.json`.
Hi @Skraye. I've added the translation. Let me know if anything else needs to be added/modified. |
- Wrapped the existing Bar component in a div that checks if `props.data.length > 0`. - Added an <el-empty> component.
Hi @MilosPaunovic |
Just a note here, you've done a great job, I've just pushed small tweaks to have everything properly aligned. |
What changes are being made and why?
This PR introduces two main features to improve user experience when interacting with data tables and charts in the application:
Empty State Handling: Added an
<el-empty>
component to both the Bar and SelectTable components. This component is displayed when there are zero executions or no data available, enhancing the user interface by providing clear feedback to users.Conditional Rendering: Updated the rendering logic for the bulk select header in the SelectTable component to only show when there is data selected, ensuring a cleaner interface and preventing confusion when no data is available.
These changes enhance usability by clearly communicating to users when there is no data to display, thereby improving the overall experience.
How the changes have been QAed?
To QA the changes, the following flow demonstrates the user experience when there are zero executions or no data:
<el-empty>
component is correctly displayed in both the Bar and SelectTable components.