[Fleet] implements new design for outputs UI

[nchaulet]

Description

Related to #117317

Implement the new UI for multiple outputs, as we do not support multiple output type for now and this do not add a lot of user value to be able to only create multiple output on the same cluster, we choose to not allow to create new output for now but still go ahead with that new UI.

UI changes

Outputs List

Editing a preconfigured ouput (you cannot save or edit)

Editing the default output

[elasticmachine]

Pinging @elastic/fleet (Team:Fleet)

[juliaElastic]

nit: using arrow function here is less optimal

[juliaElastic]

could there be any eui theme values for these hardcoded values?

[nchaulet]

I do not think we have eui values here that will work for this table, I am still going to double check

[juliaElastic]

this might be an existing issue, on Storybook Preview I'm seeing an error:

[nchaulet]

@juliaElastic Thanks for your review, I found the issue with the storybook story and it should be fixed.

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: 97b5718
• Storybooks Preview

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
fleet	536	544	+8

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
fleet	1130	1138	+8

Async chunks

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

id	before	after	diff
fleet	636.0KB	644.2KB	+8.2KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
fleet	105.3KB	106.6KB	+1.3KB

Unknown metric groups

API count

id	before	after	diff
fleet	1232	1240	+8

History

• 💚 Build #8764 succeeded 5280e72
• 💔 Build #8538 failed ef1ed44
• 💔 Build #8475 failed ebbaa96
• 💔 Build #8435 failed 4ea6c6b
• 💔 Build #7450 failed a9d61f78ed3aa2ef52b4c9aef4465de8a0a82b65

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

cc @nchaulet

[juliaElastic]

Thanks for adding tests, LGTM 🚀

[kibanamachine]

💔 Backport failed

Status	Branch	Result
❌	8.0	Commit could not be cherrypicked due to conflicts

To backport manually run:
node scripts/backport --pr 118910

[ghost]

We have created below proposed test scenarios for this PR:

• Scenario 01: Validate that ‘Fleet server hosts’ and ‘Outputs’ sections are displayed on Fleet> Settings tab.
• Scenario 02: Validate that the correct URL is displayed under the ‘Host URL’ tab.
• Scenario 03: Validate that user is redirected to ‘Fleet and Elastic Agent’ guide on clicking ‘Fleet User Guide’ link displayed under ‘Fleet server hosts’ section
• Scenario 04: Validate that Fleet Server Host flyout is displayed on clicking ‘Edit hosts’ link.
• Scenario 05: Validate that the user is able to update/add a new server host from Fleet Server Host flyout.
• Scenario 06: Validate that ‘Default’ and ‘Elastic Cloud internal output’ outputs are displayed under ‘Outputs’ section on Fleet> Settings tab.
• Scenario 07: Validate user is not able to edit/update pre-configured output under Settings tab.
• Scenario 08: Validate user is able to edit/update default output and changes should be visible throughout under all policies.
• Scenario 09: Validate that updated data is reflected in the output list after updating default output.
• Scenario 10: Validate Save and deploy confirmation on editing/updating default output.
• Scenario 11: Validate that default output settings are not saved on clicking Cancel from Edit Output dialog.
• Scenario 12: Validate that error is displayed on saving output settings without host or with invalid host.

Please let us know if we are missing something and after validating these scenarios and behavior is confirmed, we will add them to the Testrail.

Further, we have one query for this new output list UI. We noticed that two tags i.e. Agent Integration and Agent monitoring are displayed under 'Default' column on Output list.

Can you please let me know significance of these two tags.

[ghost]

While performing exploratory testing on this PR, found one issue and reported it as separate bug.

#121515

[nchaulet]

Can you please let me know significance of these two tags.

For these two tags this mean that output is used as the default output to send integration data and monitoring data (We plan in the future to allow users to have different output to send integration data and monitoring data and this default column will make a lot more sense there)

[ghost]

Can you please let me know significance of these two tags.

For these two tags this mean that output is used as the default output to send integration data and monitoring data (We plan in the future to allow users to have different output to send integration data and monitoring data and this default column will make a lot more sense there)

Hi Nicolas,

Thanks for your feedback.

As you mentioned that Output list section will have more number of outputs in future which further will send integration and monitoring data and Default column would tell what kind of data is being send for the respective output.

Further questions:

1. Could you please confirm if this entry/tags will remain common for x no of agents we deploy on Kibana. And would contain only these two tags i.e Agent Integration and Agent Monitoring.
2. Column header name 'Default' is not so user friendly and seems to be incomplete name. Can we have more appropriate label that is self explanatory.

Please provide your feedback.

Thanks

[ghost]

We have converted above proposed test cases into detailed ones and added them under Test Rail.

Below is the reference link:
https://elastic.testrail.io/index.php?/suites/view/27&group_by=cases:section_id&group_order=asc&display_deleted_cases=0&group_id=34818