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.

Sign up for GitHub

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

Jump to bottom

Change the Debug Outputs section to be resizable #5843

Open
anna-geller opened this issue Nov 7, 2024 · 8 comments
Open

Change the Debug Outputs section to be resizable #5843

anna-geller opened this issue Nov 7, 2024 · 8 comments
Assignees
@osmaneTKT
Labels
area/frontend Needs frontend code changes enhancement New feature or request good first issue Great issue for new contributors

Comments

@anna-geller
Copy link
Member

anna-geller commented Nov 7, 2024 •
edited
Loading

Feature description

Some expressions or outputs are large. It would be great to make this Debug Outputs section as a resizable component:

image

Extra info for first-time contributors

You can reproduce it by adding this flow, running it and navigating to Outputs:

id: hello-world
namespace: dev
description: Hello World
inputs:
  - id: user
    type: STRING
    defaults: Rick Astley
tasks:
  - id: first_task
    type: io.kestra.plugin.core.debug.Return
    format: thrilled
  - id: second_task
    type: io.kestra.plugin.scripts.shell.Commands
    commands:
      - sleep 0.42
      - echo '::{"outputs":{"returned_data":"mydata"}}::'
  - id: hello_world
    type: io.kestra.plugin.core.log.Log
    message: |
      Welcome to Kestra, {{ inputs.user }}! 
      We are {{ outputs.first_task.value}} to have You here!
@anna-geller anna-geller added enhancement New feature or request area/frontend Needs frontend code changes good first issue Great issue for new contributors labels Nov 7, 2024
@github-project-automation github-project-automation bot moved this to Backlog in Issues Nov 7, 2024
@osmaneTKT
Copy link

Hello @anna-geller some time ago I came across this project and I would like to contribute to it as part of a course requirement for my computer science degree.

@MilosPaunovic
Copy link
Member

That's awesome, go for it @osmaneTKT! 🚀

@satvik2131
Copy link

can i use vue-resizable
https://www.npmjs.com/package/vue-resizable
or if we have any better suggestions , I would like to implement .

@anna-geller
Copy link
Member Author

I don't know how it's technically implemented, but you could try using the same component that we use within the editor, see https://share.descript.com/view/p5vqgmD53pw

@osmaneTKT
Copy link

@satvik2131 I'm working on it.

osmaneTKT added a commit to osmaneTKT/kestra that referenced this issue Nov 11, 2024
@osmaneTKT
Change the Debug Outputs section to be resizable kestra-io#5843
59d5a4b 
Added Resizable Section to Vue Template
New Resizable Wrapper Component:

A resizable wrapper was added in the second <el-col> of the right column, allowing users to dynamically adjust its width with a draggable resizer.
The resizer element is positioned to the left of the wrapper and controls the section's width on drag.
Resize Event Handling:

Three functions (startResize, resize, and stopResize) were implemented to manage the resizing interactions with the mouse.
startResize is triggered on mousedown on the resizer, resize adjusts the wrapper width according to mouse movement, and stopResize stops the resizing on mouseup.
SCSS Styling for Resizing:

New styles were added for wrapper and resizer to define their position and set the cursor to ew-resize for a better user experience.
CSS properties like overflow and position were adjusted to handle the section’s dynamic sizing and layout.
@osmaneTKT osmaneTKT mentioned this issue Nov 11, 2024
Merged
osmaneTKT added a commit to osmaneTKT/kestra that referenced this issue Nov 11, 2024
@osmaneTKT
feat(ui): add resizable section in output section
171158f 
Change the Debug Outputs section to be resizable kestra-io#5843

Added Resizable Section to Vue Template

New Resizable Wrapper Component:

A resizable wrapper was added in the second of the right column, allowing users to dynamically adjust its width with
a draggable resizer.
The resizer element is positioned to the left of the wrapper and controls the section's width on drag.
Resize Event Handling:

Three functions (startResize, resize, and stopResize) were implemented to manage the resizing interactions with the mouse.
startResize is triggered on mousedown on the resizer, resize adjusts the wrapper width according to mouse movement, and
stopResize stops the resizing on mouseup.
SCSS Styling for Resizing:

New styles were added for wrapper and resizer to define their position and set the cursor to ew-resize for a better user
experience.
CSS properties like overflow and position were adjusted to handle the section’s dynamic sizing and layout.
@osmaneTKT osmaneTKT mentioned this issue Nov 11, 2024
Closed
@osmaneTKT
Copy link

Hello @anna-geller , I think I managed to solve the problem.

osmaneTKT added a commit to osmaneTKT/kestra that referenced this issue Nov 11, 2024
@osmaneTKT
Change the Debug Outputs section to be resizable kestra-io#5843
0a5fc2c
@osmaneTKT osmaneTKT mentioned this issue Nov 11, 2024
Open
@MilosPaunovic
Copy link
Member

@osmaneTKT You've opened two PRs about this, could you check which one is the right one and close the other one?

@osmaneTKT
Copy link

Sorry, I hadn't noticed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@osmaneTKT osmaneTKT

Labels
area/frontend Needs frontend code changes enhancement New feature or request good first issue Great issue for new contributors
Projects
Issues
Status: Backlog
Milestone
No milestone
Development

No branches or pull requests
4 participants
@satvik2131 @MilosPaunovic @osmaneTKT @anna-geller