FlowFuse / flowfuse

Build bespoke, flexible, and resilient manufacturing low-code applications with FlowFuse and Node-RED
https://flowfuse.com
Other
269 stars 63 forks source link

Compare Snapshots #3624

Open MarianRaphael opened 6 months ago

MarianRaphael commented 6 months ago

Epic

https://github.com/FlowFuse/flowfuse/issues/3574

Description

As a Node-RED Developer and FlowFuse User,

I want to have the ability to compare Snapshots visually within the FlowFuse platform,

So that I can immediately and effortlessly identify differences between two Snapshots, enhancing my ability to debug, understand changes, and maintain the integrity of my flows

Which customers would this be availble to

Everyone - CE/Starter/Team/Enterprise

Acceptance Criteria

No response

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

Customer Requested this features

  1. https://app-eu1.hubspot.com/contacts/26586079/record/0-1/14701
  2. https://app-eu1.hubspot.com/contacts/26586079/record/0-1/9233951
  3. https://app-eu1.hubspot.com/contacts/26586079/record/0-2/10189549510
    ### Tasks
    - [ ] https://github.com/FlowFuse/flow-renderer/issues/33
    - [ ] https://github.com/FlowFuse/flow-renderer/issues/34
    - [ ] https://github.com/FlowFuse/flowfuse/issues/3968
    - [ ] https://github.com/FlowFuse/flowfuse/issues/3977
    - [ ] https://github.com/FlowFuse/website/issues/2154
Steve-Mcl commented 4 months ago

Design work for how flow-viewer would render comparative flows

The flow viewer component is now integrated into FF core and is used for viewing the flows of a snapshot but there are other parts of a snapshot to consider (installed modules/module versions/env vars). These should be taken into consideration at design time (or perhaps implemented first?)

As an MVP, the flows diff could be a quick scan of the objects in the flow array and list out any property differences in a table. Would be worth seeing what we can borrow from NR source as the logic is already written.

To do a visual diff, we could have a toggle to show before and after (with suitable blending opacities?). We could also give the flow nodes a visual cue (like an outline) but this would likely require changes to flow renderer.

UX Design for how to choose two snapshots to compare against A quick win here could be to add a compare button that adds "select for compare" buttons to the rows. After 2 have been selected, pop open the flow viewer?

joepavitt commented 2 months ago

This was delivered, but feedback is that is is a little clunky and non-intuitive to use, and uptake has been very limited.

Could do with some usability/discoverability improvements, so will move a new task into a "Design" phase to see what a design iteration could look like. Design issue/task to follow.

Steve-Mcl commented 1 month ago

Joe, can we schedule in a chat around design and get something drawn up next week pls?

joepavitt commented 1 month ago

It's a lower priority atm Steve - will likely merge this in with work planned for https://github.com/FlowFuse/flowfuse/issues/4304