feat(ui): enhance empty state handling for executions and selection in components

[sikehish]

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:

1. 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.

2. 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:

1. Navigate to Executions, or Flows.
2. Ensure that there are no executions(or flows).
3. Observe that the <el-empty> component is correctly displayed in both the Bar and SelectTable components.

- Navigate to Executions, or Flows.
- If any executions/flows are present, you may delete them.
- Confirm that the empty state message is displayed correctly.

[MilosPaunovic]

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.

[Skraye]

Also, can you share a screen of what it looks like ?
Is this displayed?

If yes, it needs to use the translation

[sikehish]

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 :)

[sikehish]

Also, can you share a screen of what it looks like ? Is this displayed?

If yes, it needs to use the translation

Could you guide me with the translation part? I'll share the image in a while.

[Skraye]

Sure, its something straightforward, first here is how you use it, with the $t() methods :

kestra/ui/src/components/flows/FlowConcurrency.vue

Line 39 in 51b78a9

{{ $t('behavior') }}: <status class="mx-2" :status="flow.concurrency.behavior" />

And all you have to do, is to put the english translation here :

kestra/ui/src/translations/en.json

Line 893 in 51b78a9

"files": "Files"

Our CI will handle translation in every other language 👍

[sikehish]

Sure, its something straightforward, first here is how you use it, with the $t() methods :

kestra/ui/src/components/flows/FlowConcurrency.vue

Line 39 in 51b78a9

{{ $t('behavior') }}: <status class="mx-2" :status="flow.concurrency.behavior" />

And all you have to do, is to put the english translation here :

kestra/ui/src/translations/en.json

Line 893 in 51b78a9

"files": "Files"

Our CI will handle translation in every other language 👍

Hi @Skraye. I've added the translation. Let me know if anything else needs to be added/modified.

[sikehish]

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.

Hi @MilosPaunovic
Ive implemented all of this.
However, I've made some changes in LogsWrapper.vue , as the logic and validation was already in place at the LogsWrapper level. I've also made changes in the logs/Bar.vue component( basically added an additional check, as it's being rendered in Dashboard). I realised that Bar.vue was being conditionally rendered in LogsWrapper so I modified the else condition in LogsWrapper.

[MilosPaunovic]

Just a note here, you've done a great job, I've just pushed small tweaks to have everything properly aligned.