[IMPROVEMENT] BackingImage UI improvement

[ChanYiLin]

Is your improvement request related to a feature? Please describe (👍 if you like this request)

From this issue #7288 we would like to improve some user experiences of BackingImage

• In BackingImage page
  • BackingIamge should show the source of it. This can be retrieved from the parameters in the json
    • For export-from-volume: volume-name
    • For download: url
    • For upload: `` (empty)
    • For restore: backup-url (this feature will be released in v1.6.0)
  • Add a filter so user can filter the BackingImage with other properties (e.g. Created From)
  • Bulk download BackingImages
  • Allow user to create Volume in BackingImage page
    • I think we can reuse the same form in Volume page but with BackingImage assigned
  • BackingImages can show different colors for backing image status here.
  • Remove cleanup operation, instead, move the cleanup function in detail page here
  • Filter out un-ready status backing image in volume create modal dropdown.

cc @innobead @m-ildefons

Describe the solution you'd like

.

Describe alternatives you've considered

.

Additional context

.

[innobead]

@ChanYiLin a few questions

• Bulk download BackingImages

Is this feasible? What does the behavior look like?

• Allow user to create Volume in BackingImage page

Why do we want to have this? Don't users be able to create a volume based on a selected backing image?

[ChanYiLin]

Hi @innobead , I just summarized these improvements requests from the original user report #7288 (comment)

Bulk downloads of multiple images are not supported in the UI, this can be tedious when dealing with many images/volumes.
The backing images view should have an action to directly create a volume from a backing image

We can still discuss if we really need this.

1. Bulk download BackingImages
   I think one simple way is user can pick multiple BackingImage at once, and from UI side, it will then send the download requests to the Backend at once.

2. Allow user to create Volume in BackingImage page
   Yes this seems duplicated.

[a110605]

Current longhorn-ui doesn't support restore type of backing image.
I can add it later after implementing #7541.

[a110605]

As per discussion with @ChanYiLin , change below two request items

• BackingImages' status on different disks could have colors -> show different colors for backing image status
• Allow user to create Volume in BackingImage page (won't need to implement)

[longhorn-io-github-bot]

Pre Ready-For-Testing Checklist

• Where is the reproduce steps/test steps documented?
  The reproduce steps/test steps are at:

• Create some backing images in backing image page
• Check below improvements
  • Columns can be sorted in backing image list
  • Add UUID / Created fromfilter option options to filter in backing image list
  • Bulk download backing images
  • Show different colors for backing image status
  • Move cleanup operation into detail page

See recordings in

• Allow download mulitple backing images with one click and move clean up action in detail modal longhorn-ui#729
• Add colorful text to disk status and add more fitler in backing image page  longhorn-ui#728

• Is there a workaround for the issue? If so, where is it documented?
  The workaround is at:

• Does the PR include the explanation for the fix or the feature?

• Does the PR include deployment change (YAML/Chart)? If so, where are the PRs for both YAML file and Chart?
  The PR for the YAML change is at:
  The PR for the chart change is at:

• Have the backend code been merged (Manager, Engine, Instance Manager, BackupStore etc) (including backport-needed/*)?
  The PR is at

• Which areas/issues this PR might have potential impacts on?
  Area
  Issues

• If labeled: require/LEP Has the Longhorn Enhancement Proposal PR submitted?
  The LEP PR is at

• If labeled: area/ui Has the UI issue filed or ready to be merged (including backport-needed/*)?
  The UI issue/PR is at

• If labeled: require/doc Has the necessary document PR submitted or merged (including backport-needed/*)?
  The documentation issue/PR is at

• If labeled: require/automation-e2e Has the end-to-end test plan been merged? Have QAs agreed on the automation test case? If only test case skeleton w/o implementation, have you created an implementation issue (including backport-needed/*)
  The automation skeleton PR is at
  The automation test case PR is at
  The issue of automation test case implementation is at (please create by the template)

• If labeled: require/automation-engine Has the engine integration test been merged (including backport-needed/*)?
  The engine automation PR is at

• If labeled: require/manual-test-plan Has the manual test plan been documented?
  The updated manual test plan is at

• If the fix introduces the code for backward compatibility Has a separate issue been filed with the label release/obsolete-compatibility?
  The compatibility issue is filed at

[roger-ryao]

Verified on master-head 20240528

• longhorn master-head cd4d723
• longhorn-ui master-head longhorn/longhorn-ui@30c1e41

The test steps
#7293 (comment)

Result Passed

• Columns can be sorted in backing image list
• Add UUID / Created fromfilter option options to filter in backing image list
• Bulk download backing images
• Show different colors for backing image status
• Move cleanup operation into detail page
• require/doc : Update backing image clean up action according to latest UI change website#913

Hi @ChanYiLin @a110605

1. Could this IMPROVEMENT be backported to v1.6.x?

2. According to Bulk download : only has ready disk status image can be downloaded, I think we might need to create another ticket for when a volume with a backing image is created but the backing image is not ready.
   In this case, we should also display a message to the user, instead of waiting until the volume is attached and its status remains at Attaching, to check the backing image status. WDYT?

[a110605]

Verified on master-head 20240528

• longhorn master-head cd4d723
• longhorn-ui master-head longhorn/longhorn-ui@30c1e41

The test steps #7293 (comment)

Result Passed

• Columns can be sorted in backing image list
• Add UUID / Created fromfilter option options to filter in backing image list
• Bulk download backing images
• Show different colors for backing image status
• Move cleanup operation into detail page
• require/doc : Update backing image clean up action according to latest UI change website#913

Hi @ChanYiLin @a110605

1. Could this IMPROVEMENT be backported to v1.6.x?
2. According to Bulk download : only has ready disk status image can be downloaded, I think we might need to create another ticket for when a volume with a backing image is created but the backing image is not ready.
   In this case, we should also display a message to the user, instead of waiting until the volume is attached and its status remains at Attaching, to check the backing image status. WDYT?

1. I can do the backport to v1.6.x.
2. Current backing image in failed-and-clean-up status can still chosen to create volume. But it keeps attaching when attaching to a node. IMO, we should filter out those backing images not in Ready status in dropdown when creating volume. cc @ChanYiLin

create volume	volume detail

[ChanYiLin]

Hi @roger-ryao @a110605
Thanks for the feedback

• Yes it can be backported to v1.6.x
• Yes we can filter out the non-ready BackingImage when creating the Volume from BackingImage to improve the UI user friendly

[a110605]

Hi @roger-ryao @a110605 Thanks for the feedback

• Yes it can be backported to v1.6.x
• Yes we can filter out the non-ready BackingImage when creating the Volume from BackingImage to improve the UI user friendly

Hi @roger-ryao , @ChanYiLin ,
Let me add this improvment in this ticket and have a PR for it.

[a110605]

Hi @roger-ryao ,
For extra enhancement : Filter out un-ready status backing image in volume create modal dropdown.

The verification steps are as below

1. Create some backing images not in READY status

• upload a image to create (in progress status)
• download from invalid url (failed status)

2. go to volume page - > create new volume
3. the backing image field dropdown can only select READY backing image.

[roger-ryao]

Verified on master-head 20240531

• longhorn master-head 6fd4b16
• longhorn-ui master-head longhorn/longhorn-ui@f07eb8e

The test steps
#7293 (comment)

Result Passed

• Columns can be sorted in backing image list
• Add UUID / Created from filter option options to filter in backing image list
• Bulk download backing images
• Show different colors for backing image status
• Move cleanup operation into detail page
• Filter out un-ready status backing image in volume create modal dropdown.
• require/doc : Update backing image clean up action according to latest UI change website#913