Dashboard - detailed view for workflow execution

[pedrosimao]

Is your feature request related to a problem? Please describe.
Debugging workflows steps is hard. Specially when we want to know what steps are taking long time or failing.

Describe the solution you'd like
Create a workflow run detailed view, where we could see what step started at what time, and how long it took to complete. Inngest.js example below:

Describe alternatives you've considered

Additional context
I can take care of this as a first contribution. I am not sure the cli / backend can provide the necessary information already. If it can't I will also need to implement this.

[jamescmartinez]

Looking forward to seeing what you build. You're probably right that Backend functions will need to be exposed. Let me know if you need any help with this one.

[tazsq]

hey guys Im new to open source, can i take this issue ? can anyone guide me for this repo?

[jamescmartinez]

hey guys Im new to open source, can i take this issue ? can anyone guide me for this repo?

hey, welcome to open source! 👋

Feel free!

I'd recommend skimming CONTRIBUTING.md and ARCHITECTURE.md first, the architecture doc will give you a feel for how OpenWorkflow fits together.

Also, our Discord is a great place to ask for help or get someone to pair with you. https://discord.openworkflow.dev

[tazsq]

hey @jamescmartinez as far as my understanding goes doing this will require us to expose a backend function that is able to log timestamp at each step in postgres. Then ill fetch those timestamps through another exposed function to show it on the dashboard.

am i right?

[Nic13Gamer]

Just an idea: I think we could take inspiration from the Vercel Workflow SDK for the chart.

The code seems to be here and uses React Flow.

IMO it looks pretty good:

[tazsq]

@Nic13Gamer yeah will take a look at it!

[jsheets245]

Hey, all, following the guidance in Discord, since there hasn't been PR movement on this issue in ~2 weeks, I decided to work on it, hope that's okay. I am about ready to put up a PR, but want to discuss the design a bit more before doing so along with ensuring I know all the edge cases and handle them properly.

The screenshot below has what I've currently implemented. Each step is now an expandable section. I opted against ReactFlow like Vercel is using as suggested above because it seems more complex than this package needs unless I am misunderstanding. For example, they seem to have a concept of loops that I'm not sure this package has.

Questions:

1. Does the above screenshot look correct for the happy path?
2. For other statuses than successful I would change the bar colour to the colour of that status, any different thoughts?
3. For a workflow that spawns another workflow, like hello-world-parent.ts the only step in the parent workflow is the child (assuming it doesn't have other steps in the parent). Should there be some link between the detailed view of the parent workflow and the child or is the id sufficient? This is likely a separate issue entirely, but I want to surface it here anyway.
4. Are there other edge cases I should consider? (like loops if this package has those and I missed it)

[tazsq]

Hey, all, following the guidance in Discord, since there hasn't been PR movement on this issue in ~2 weeks, I decided to work on it, hope that's okay. I am about ready to put up a PR, but want to discuss the design a bit more before doing so along with ensuring I know all the edge cases and handle them properly.

The screenshot below has what I've currently implemented. Each step is now an expandable section. I opted against ReactFlow like Vercel is using as suggested above because it seems more complex than this package needs unless I am misunderstanding. For example, they seem to have a concept of loops that I'm not sure this package has.

Questions:

1. Does the above screenshot look correct for the happy path?
2. For other statuses than successful I would change the bar colour to the colour of that status, any different thoughts?
3. For a workflow that spawns another workflow, like hello-world-parent.ts the only step in the parent workflow is the child (assuming it doesn't have other steps in the parent). Should there be some link between the detailed view of the parent workflow and the child or is the id sufficient? This is likely a separate issue entirely, but I want to surface it here anyway.
4. Are there other edge cases I should consider? (like loops if this package has those and I missed it)

Since you have already implemented this much, go ahead! Happy to collaborate too!