[Fleet] Enhancing the installation instruction to accomodate all architectures available

[nimarezainia]

User story

As a user, I want to enroll agents across a variety of host architecture so that I can collect data from hosts across my diverse environment.

Description

The current "install Elastic Agent on your host" instructions do not suitably account for all platform/architecture combinations, making it challenging for users who support a diverse set of host architectures to easily enroll Elastic Agent.

Acceptance criteria

• The "platform selector" UI in the Agent onboarding flyout is updated to include the following options in the following order
  • Linux aarch64
  • macOS aarch64
  • Windows x86_64
  • DEB aarch64
  • RPM aarch64
• A new dropdown labeled ... includes three additional options for less common architectures
  • Linux x86_64
  • macOS x86_64
  • RPM x86_64
  • DEB x86_64
• The copy-pasteable code block for each platform provides valid and functional steps to enroll an agent using the selected platform

Mockups

Figma link

Old description

The cut+paste tutorials within fleet are very useful to our users, gets them started quickly:

these currently don't show a cut+paste option for aarch64 which is now ubiquitously available for all platforms.

this request is to have these tutorials accommodate an option for aarch64 types also. We should match what is available for download:

[elasticmachine]

Pinging @elastic/fleet (Feature:Fleet)

[nimarezainia]

@zombieFox your thoughts on this please.
I was thinking that a secondary choice (after platform is chosen), to say whether aarch64 or 64 but that would create an extra click for the user. Perhaps bets to just mention all types ate the top level.

[zombieFox]

I wasn't aware the platforms had this difference. Agreed, we should provide code snippets which could be copied to keep things consistent.

[kpollich]

@nimarezainia - Assigning to you for prioritization.

[kpollich]

cc @nimarezainia + @simosilvestri we have this slotted for the beginning of 2025 and it'd be good to make sure we have UX thoughts here. I think a dropdown with all available architecture would be fairly straightforward, but it'd be helpful to see how we expect this to work in conjunction with the copy/pasteable code blocks containing the instructions.

[nimarezainia]

@kpollich do you think having more tabs would be too much?

@simosilvestri not sure what options we could pursue if too many tabs are problematic. Perhaps it could be a double look up? like first choice is the operating system (what we have today: linux, mac, windows etc). then the second choice would be the architecture?

[simosilvestri]

Hello @kpollich and @nimarezainia , I suggest to have tabs only for distinct categories, so in this case the dropdown solution works better.
One other option is to show at a glance the most used platforms and hide the rest.

I will create a design issue and share the proposal in the next days.

[nimarezainia]

I think showing the most popular ones and a "...." to expand to the rest if needed makes sense. thank you @simosilvestri

[simosilvestri]

@kpollich and @nimarezainia Please review the design issue #546

[nimarezainia]

thanks @simosilvestri , looks good to me.

[kpollich]

Looks great! I'll work on translating this into an implementation issue based on those designs and get this scheduled.

[kpollich]

This fell through the cracks a bit over the holidays, so I'm punting this to sprint 42. Will deliver the implementation plan this week.

[kpollich]

I've updated the description to include implementation details.

@nimarezainia - Can you help with confirming the list of options (including naming), order, and placement of platform options? I recall we were considering having aarch64 as the first and foremost option as we're seeing it more commonly than x86 today, but I might be misremembering.

[nimarezainia]

@kpollich no you are right. It was the macos aarch64 that should be favored instead of the x86 variant. I don't seem to have access to the download telemetry but revised the description based on the popular platforms we see today

[kpollich]

Updated list, order and mockups based on conversation above. Thanks all.

[kpollich]

We can use EUI's filter group for the UI here https://eui.elastic.co/#/forms/filter-group

[jen-huang]

@nimarezainia FYI, Kubernetes is not part of this issue's requirements even though we currently have that as an available platform. I decided to put it as the first option in the dropdown.

I also found that it is hard to tell when there is a platform selected from the dropdown options (bold ... doesn't really look different from normal ellipses 😅), so I included the active badge when there is something selected there.

You can see how both of these changes look here. Let me know if any concerns: