visually represent InferenceService resources marked for deletion

[christianvogt]

Closes: #2052

Description

When we delete an InferenceService it may take some time for the finalizers to complete the deletion. At deletion time, the resource will be marked with a deletionTimestamp. We can visually represent the deletion state in the UI when this timestamp is present.

Row items that are marked for deletion take on a 50% opacity and kebab menu is replaced with a Ban icon along with a tooltip. The components are made generically and can apply to other tables in the application at a later date.

Project details view:

Global model serving:

How Has This Been Tested?

• Deploy a model, kserve or model mesh.
• Delete the model from the global serving page or from the project details page
• Observe the row with the new visuals

Test Impact

Added integration test.

Request review criteria:

Self checklist (all need to be checked):

• The developer has manually tested the changes and verified that the changes work
• Commits have been squashed into descriptive, self-contained units of work (e.g. 'WIP' and 'Implements feedback' style messages have been removed)
• Testing instructions have been added in the PR body (for PRs involving changes that are not immediately obvious).
• The developer has added tests or explained why testing cannot be added (unit tests & storybook for related changes)

If you have UI changes:

• Included any necessary screenshots or gifs if it was a UI change.
• Included tags to the UX team if it was a UI/UX change (find relevant UX in the SMEs section).

After the PR is posted & before it merges:

• The developer has tested their solution on a cluster by using the image produced by the PR to main

cc @vconzola

[christianvogt]

@vconzola Please have a look at this visual representation of a resource marked for deletion and make any other suggestions. What I've done is simply changed the opacity of the row to 50%, replace the kebab with a Ban icon and added a tooltip.

[DaoDaoNoCode]

The half opacity is pretty cool, I think if this design is approved, we might also apply this style to ProjectView because it also takes a while to delete a project, currently, we only show Terminating as the state but don't do any style change to the row. Just a UX suggestion.

[vconzola]

@christianvogt @DaoDaoNoCode Since this change might be broader in scope than just inference services, I'd like @kywalker-rh to weigh in on if this is an acceptable pattern to use. Or there might be something else already being done in OpenShift or other products with similar use cases.

[andrewballantyne]

@christianvogt @DaoDaoNoCode Since this change might be broader in scope than just inference services, I'd like @kywalker-rh to weigh in on if this is an acceptable pattern to use. Or there might be something else already being done in OpenShift or other products with similar use cases.

This is half of what OpenShift Console already does... when you delete say a project, it has a lot to clean up. It doesn't really do a lot to reveal that. Projects luckily have a status so it's in "terminating" -- but the visual state of the row is the same. The kebeb hover shows the tooltip Christian used.

I like the fading aspect because it really shows it's on the way out more than resources in OpenShift console (especially ones who don't have a status field like Projects).

Look forward to seeing what @kywalker-rh has to say.

[christianvogt]

/hold for UX review as this is proposing an new pattern

[kywalker-rh]

I really like this! It would be super-cool if we could animate the fade to 50%, and then fade it out when its fully deleted too, but understand if that's too resource intensive.

Taking the tooltip from OpenShift makes sense too. I'll do a quick check with others in Patternfly, just to see if there is already another pattern in use, but I am a proponent of this.

[christianvogt]

@kywalker-rh OpenShift console shows the tooltip text Resource is being deleted. and they also only disable the kebab instead of changing to another icon as I've done here.

[christianvogt]

@kywalker-rh just for you I've added a transition on the opacity. This uses PFs default of 250ms transition with timing function ease-in-out. When the resource is first marked for deletion, the row will transition to 50% opacity. However once the resource is gone, the row will be removed immediately with no transition.

[kywalker-rh]

I'll take it... thanks for adding it!

[kywalker-rh]

I haven't received any feedback from Patternfly, so let's go with this as implemented. Thanks @christianvogt!

[lucferbux]

/lgtm

I've added some thoughts about the custom component, but for the scope of this PR this is perfect

[lucferbux]

I think we should have a storybook component with our own table and this components, not only targeting this to kserve only (not saying this for this PR, i was thinking that if we want this implementation in other pages, I think storybook could be great for our custom components)

[openshift-ci]

[APPROVALNOTIFIER] This PR is APPROVED

Approval requirements bypassed by manually added approval.

This pull-request has been approved by:

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment