[Infrastructure UI] Asset Details: Add pins to the metadata table

[jennypavlova]

Closes #155190

Summary

This PR adds the possibility to pin different rows inside the metadata table in asset details embeddable. The pins are persisted in the local storage and should be available after refreshing/reopening the host flyout. The order and sorting are explained in this comment, so basically we keep the original sorting order of the table (host, cloud, agent) also for the pins.

Testing

• Go to hosts view and open a single host flyout (metadata tab)
• Try to add / remove pins
• Check if the pins are persisted after a page refresh

pins.mov

[apmmachine]

🤖 GitHub comments

Expand to view the GitHub comments

Just comment with:

• /oblt-deploy : Deploy a Kibana instance using the Observability test environments.
• run elasticsearch-ci/docs : Re-trigger the docs validation. (use unformatted text in the comment!)

[elasticmachine]

Pinging @elastic/infra-monitoring-ui (Team:Infra Monitoring UI)

[crespocarlos]

Good job, Jenny 👏 ! This is very useful. Just left a few minor comments.

[crespocarlos]

These handlers are receiving pin as parameter. When they are called, we basically pass fieldName. I think we could do this instead

Suggested change

	const handleAddPin = (pin: Field['name']) => {
	setPinnedItems([...pinnedItems, pin]);
	};
	const handleRemovePin = (pin: Field['name']) => {
	if (pinnedItems && pinnedItems.includes(pin)) {
	setPinnedItems((pinnedItems ?? []).filter((pinName: string) => pin !== pinName));
	}
	};
	const handleAddPin = () => {
	setPinnedItems([...pinnedItems, fieldName]);
	};
	const handleRemovePin = () => {
	if (pinnedItems && pinnedItems.includes(fieldName)) {
	setPinnedItems((pinnedItems ?? []).filter((pinName: string) => fieldName !== pinName));
	}
	};

[jennypavlova]

Good point, thanks! I change those 👍

[crespocarlos]

Since this is an event handler, I'd name it onPinned or something along those lines. Wdyt?

[jennypavlova]

Hmm this is basically setting the the pinned items to the locale storage here but in this component I can rename it 👍

[jennypavlova]

Renamed ✅

[crespocarlos]

I think we're removing this in another PR, right?

[jennypavlova]

Yes, I removed them here as well :)

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: dc509fd

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
infra	1380	1381	+1

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
infra	1.9MB	1.9MB	+1.5KB

Unknown metric groups

ESLint disabled line counts

id	before	after	diff
enterpriseSearch	14	16	+2
securitySolution	410	414	+4
total			+6

Total ESLint disabled count

id	before	after	diff
enterpriseSearch	15	17	+2
securitySolution	489	493	+4
total			+6

History

• 💔 Build #140567 failed c2d717a
• 💚 Build #139729 succeeded 65fdea9

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

cc @jennypavlova

[crespocarlos]

LGTM! Thanks for making the changes.