[Infra UI] Add Features section to Infra settings

[mykolaharmash]

Closes #167062

Summary

• Adds "Features" section to Infra settings screen
• Hooks changes to uiSettings into existing form in order to use the current "Discard" and "Apply" buttons logic
• Replaces usage of uiSettings with settings.client as uiSettings seems to be [deprecated]([KibanaReact] Use settings service in useUiSetting hook #154710. Observables exposed by uiSettings do not seem to work anymore.
• Deletes the Hosts landing screen
• Revives the logic for showing/hiding Hosts nav item depending on the settings toggle

CleanShot.2023-10-17.at.16.48.24.mp4

How to test

• Checkout locally and run in stateful mode
• Go to Infra Setttings screen and make sure Features section is present
• Make sure that the "Infrastructure Hosts view" toggle shows/hides the Hosts nav item
• Make sure that "Infrastructure Hosts view" in "Anvanced Settings" is synced with the the one in Infra settings

[apmmachine]

🤖 GitHub comments

Expand to view the GitHub comments

Just comment with:

• /oblt-deploy : Deploy a Kibana instance using the Observability test environments.
• /oblt-deploy-serverless : Deploy a serverless 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)

[alisonelizabeth]

Management changes LGTM (packages/serverless/settings/observability_project/index.ts). Please see comment for awareness. Did not test locally.

[alisonelizabeth]

FYI - this setting will also appear on the Advanced Settings page in serverless. Just pointing out as it wasn't mentioned in the PR description.

[neptunian]

Hi @alisonelizabeth I reached out to understand further but I was under the impression that there wasn't going to be an observability advanced settings area or at least one where Infra could have a setting. If there is and we can keep our setting there, we don't necessarily need to add it to our own UI. Since it won't work in our UI without enabling it here, I assume we then have to show it in the Project Advanced Settings and I misinterpreted the docs.

[neptunian]

@mykolaharmash I think we need to leave this out for now and add it when we "flip the switch" to enable our plugin. Otherwise this setting will show up with no Infra UI if we haven't enabled the plugin for serverless yet.

[alisonelizabeth]

Hi @alisonelizabeth I reached out to understand further but I was under the impression that there wasn't going to be an observability advanced settings area or at least one where Infra could have a setting. If there is and we can keep our setting there, we don't necessarily need to add it to our own UI. Since it won't work in our UI without enabling it here, I assume we then have to show it in the Project Advanced Settings and I misinterpreted the docs.

You can go to /app/management/kibana/settings to view Advanced Settings in serverless for each project type.

It is possible to have project-specific settings. The settings are defined here. You'll see that there is a set of common settings that are used across project types, as well as project-specific settings.

[mykolaharmash]

FYI - this setting will also appear on the Advanced Settings page in serverless. Just pointing out as it wasn't mentioned in the PR description.

Thank you @alisonelizabeth for pointing this out! Somehow I thought that the allowlist only enables the changes through the API and does not affect the UI 🙈

[mykolaharmash]

@mykolaharmash I think we need to leave this out for now and add it when we "flip the switch" to enable our plugin. Otherwise this setting will show up with no Infra UI if we haven't enabled the plugin for serverless yet.

Agree 💯

[neptunian]

@mykolaharmash In #142477 at the time Hosts was unavailable or hidden in the navigation and turned on if the setting was enabled. We used an observable so it would react to the change without a refresh. I think the same should happen now where when I go to the advanced settings enable/disable it and then click on Hosts the change should be reflected. Would this be difficult to change? I also think our UI setting should update when the one in the Advanced Setting does. I understand it might not work vice versa where the Advanced Setting changes when the one in our UI settings changes and I think that's fine for now.

[mykolaharmash]

@mykolaharmash In #142477 at the time Hosts was unavailable or hidden in the navigation and turned on if the setting was enabled. We used an observable so it would react to the change without a refresh. I think the same should happen now where when I go to the advanced settings enable/disable it and then click on Hosts the change should be reflected. Would this be difficult to change? I also think our UI setting should update when the one in the Advanced Setting does. I understand it might not work vice versa where the Advanced Setting changes when the one in our UI settings changes and I think that's fine for now.

Thank you for catching this @neptunian 🙌 I double-checked and it seems like toggling the flag in advanced settings does not have an immediate effect in the current version as well. Have not checked the code but my guess is that it worked before with nav item because the nav component was subscribed to the observable and once we switched to the new Hosts landing screen, that lives within our plugin, the subscription is not initialized while user is on the advanced settings screen, so it requires a page reload.

With the Features section in our own settings toggling the flag works as expected and the landing screen updates without a refresh.

In case we decide to keep the Feature section, what we could do is force page reload when making changes from Advanced Settings and rely on the observable when changing from Infra settings. Or alternatively, we could always reload the page, in case we want to keep the toggles in sync on the Infra and Advanced Settings screens (afaik there is no other way to reset the uiSettings cache other than page reload).

Wdyt?

[mykolaharmash]

Moving back to draft as requirements in #167062 have been updated.

[neptunian]

Looks great!

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: 253f4d0

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
infra	1414	1411	-3

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	-2.5KB

Page load bundle

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

id	before	after	diff
infra	105.8KB	106.3KB	+548.0B
observabilityShared	47.1KB	47.1KB	+23.0B
total			+571.0B

Unknown metric groups

miscellaneous assets size

id	before	after	diff
infra	1.2MB	961.0KB	-238.2KB

History

• 💔 Build #168656 failed 5d806b6
• 💔 Build #167362 failed 4012e502172c000efa6f2ffd79df5ef2b6c20d2e

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

[cauemarcondes]

@mykolaharmash maybe to keep it consistent with what we have on Profiling and APM you should use the bottom button bar when something has changed.

[mykolaharmash]

@mykolaharmash maybe to keep it consistent with what we have on Profiling and APM you should use the bottom button bar when something has changed.

Right, was thinking the same as we use the bottom bar on the Advanced Settings screen and APM settings. The current infra settings already had those custom form buttons and I did not want to bloat this PR with bottom bar refactoring. If you don't mind, I'll create a separate issue to migrate the whole form to use the bottom bar, wdyt?

[mykolaharmash]

Created a ticket to unify the buttons #169210 cc @cauemarcondes

[cauemarcondes]

Created a ticket to unify the buttons #169210 cc @cauemarcondes

Thanks for that... 🙏🏻