Skip to content
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

(ui) Improve UI when using long values in params #596

Merged
merged 2 commits into from
Jun 28, 2024

Conversation

zph
Copy link
Contributor

@zph zph commented Jun 28, 2024

Fixes: #594

Screenshots of before and after when using the same dag
image

image

In the case of long params, the dialogue box is unusable and this is part of a fix to improve their usability.

This change limits each arg to one line and the params remain scrollable to allow for user editing.

For discussion:

  1. Does this harm other use cases?
  2. Is there a simpler way to accomplish the same ends?

I'm not stuck on this solution but I do see it re-enabling usability of the Start dialogue for cases where the params's value is long.

zph added 2 commits June 28, 2024 05:38
Fixes: dagu-org#594

In the case of long params, the dialogue box is unusable.

This change limits each arg to one line.
Using uninterpolated args on the show page will improve rendering
when long arguments are used.

Users remain able to understand their commands by seeing the params
attached to each execution.
@zph
Copy link
Contributor Author

zph commented Jun 28, 2024

A similar experience exists on the dags view page: (http://localhost:8080/dags/issue-594) if using those args in the command:

params: "ARG1=VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY ARG2=VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER_VERY_VERY_LONG_PARAMETER"
steps:
  - name: step1
    command: echo something-before-args ${ARG1} ${ARG2}
image

My thought there is:

  • Since the user knows the args already from being displayed above, can the args portion of table render the original value from yaml?

Here's what it would look like instead:
image

If there's a simpler way to get access to the original and uninterpolated command inside NodeStatusTableRow, please instruct me or feel free to directly edit the PR 🙏.

Thank you for taking the time to consider and review these contributions @yohamta. I'm not attached to the implementation I coded beyond wishing to improve the UX for this case, without negatively affecting the UX for other cases. I'm open to other solutions that may be clearer to you because of your experience building this project.

  • Zander

@zph zph changed the title (ui) Remove multiline from start dialogue due to long params (ui) Improve UI when using long values in params Jun 28, 2024
Copy link
Collaborator

@yohamta yohamta left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you very much, @zph ! It looks like a nice approach. ✨✨✨LGTM✨✨✨

@yohamta yohamta merged commit ba57bc9 into dagu-org:main Jun 28, 2024
3 checks passed
@yohamta
Copy link
Collaborator

yohamta commented Jun 28, 2024

One question, what is Zander by the way? 🙂

  • Zander

@zph
Copy link
Contributor Author

zph commented Jun 28, 2024 via email

@yohamta
Copy link
Collaborator

yohamta commented Jun 29, 2024

Oh, I see! sorry for the strange question 😅

@zph
Copy link
Contributor Author

zph commented Jun 29, 2024 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

(ux) Long params in yaml template lead to being unable to Start and click Confirm
2 participants