[Fleet] Add option to only list custom integrations

[weltenwort]

:notebook: Summary

With the addition of a basic integration creation API in https://github.com/elastic/kibana/pull/160777 and its use during custom application log on-boarding in https://github.com/elastic/kibana/pull/163219 it's likely that the user will have a mix of registry-hosted and custom integrations installed in their cluster. In order to make their management easier we should offer a way to focus the list of installed integrations on custom integrations.

• :link: related to: https://github.com/elastic/kibana/pull/160777
• :link: related to: https://github.com/elastic/kibana/pull/163219

:heavy_check_mark: Acceptance criteria

• There is a way to filter the list of installed integrations to only view the integrations with install_source === 'custom'.

:art: Mock-ups

TBD - this could be a filter in the sidebar or a completely separate tab

[elasticmachine]

Pinging @elastic/fleet (Team:Fleet)

[elasticmachine]

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

[elasticmachine]

Pinging @elastic/fleet (Feature:EPM)

[joshdover]

@zombieFox Any input on this one? Not sure how far you've gotten into thinking about the Integrations catalog.

I prefer a top-level tab, personally. I think this is going to be quite a central experience long-term and it'd be good to highlight it as so.

[zombieFox]

A proposed design change to add a new left nav item is can be found in Fleet tags (figma) and in this Prototype link

Proposal:

• Add the side bar filter facets:
  • Updates available and Update failed
• Navigating between the three filter facets changes the view
• Present a callout warning the user when an update is available or an update has failed

[jsoriano]

A proposed design change to add a new left nav item is can be found in Fleet tags (figma) and in this Prototype link

@zombieFox sorry if I misunderstood something, this proposed design seems to be related to tagging packages with available updates, but this issue is about filtering custom integrations.

[zombieFox]

Ah, apologies, I confused this issue with a previous issue about introducing the "upgrade" and "failed" facets. Custom integrations should follow the same patter and introduce a new side bar facet. I've updated the design and the prototype to reflect this.

[formgeist]

@weltenwort @jlind23 What's the status here? Is design help still needed for this issue? Thanks

[jlind23]

@formgeist yes, a design is still required for this one.

[simosilvestri]

Hi @jlind23, I put together a design proposal for you to review.

UX recommendations

Figma file

Integrations page (Installed integrations tab)

• Add a "Custom Integrations" navigation item under "Installed Integrations" to maintain the information architecture of the page.
• Add a "Custom Integration" badge to the integration card to highlight custom integrations at a glance.

---

Integrations details page

• Add a "Custom Integration" badge to the integration page to highlight that is a custom integration at a glance.

---

Empty state

• Link documentation to https://www.elastic.co/guide/en/integrations-developer/current/build-a-new-integration.html

[jlind23]

thanks @simosilvestri replied back on Figma but my 2 cents are that we should redirect the users to https://www.elastic.co/guide/en/integrations-developer/current/build-a-new-integration.html as this is all about giving them the ability to develop their own custom integration.

[simosilvestri]

Amazing! Thanks @jlind23. This is ready for implementation, if you have any question on the design please let me know? Should I create a new issue or would you like to use this one?

[jlind23]

@simosilvestri we will reuse this one, thanks.