[LogsUI] [InfraUI] Turn source configuration into a tab and standardize the main navigation

[Kerry350]

Summary

This ticket implements #39071, and also implements the Infra focussed concerns of #150 by changing the main navigation to align with SIEM / APM.

This implements all of the outlined acceptance criteria, there's also one extra addition in that the locations we had a "Change configuration" button that used to open the flyout (no data states for example) now navigate to the settings page. Those changes are all in this commit.

One thing to note is that I've had to disable some functional tests for now. I am still currently looking in to those, but as that was the only thing blocking this PR being opened and reviewed I thought it best to disable them. **

===============================================

** The issues I'm seeing in the functional tests are very odd. For example, in one of the tests this assertion fails:

const logStreamEntries = await infraLogStream.getStreamEntries();
expect(logStreamEntries.length).to.be.greaterThan(0);

As logStreamEntries.length returns with a length of 0. However, when I check the screenshot output in the failures folder the elements are rendered in full. Similarly, if I check the HTML output in the failure_debug folder the DOM elements with the correct data-test-subj all exist. So I can't possibly see how they're 0.

Even more curious if I add a console.log (and nothing else), e.g.:

const logStreamEntries = await infraLogStream.getStreamEntries();
console.log( logStreamEntries);
expect(logStreamEntries.length).to.be.greaterThan(0);

then there's no longer a length of 0, the items exist, and the test passes.

It's very weird, and very flaky 🙈

===============================================

Checklist

Use strikethroughs to remove checklist items you don't feel are applicable to this PR.

• This was checked for cross-browser compatibility, including a check against IE11
• Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
• Unit or functional tests were updated or added to match the most common scenarios
• This was checked for keyboard-only and screenreader accessibility

[elasticmachine]

Pinging @elastic/infra-logs-ui

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request

[Kerry350]

@Zacqary I've addressed your feedback so far:

The navigation is now more performant when switching, and the visual discrepencies are cleaned up.

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request

[Zacqary]

@Kerry350 Looks great! Are you able to take it a step further and prevent the logs stream from having to reload data when switching away from the Settings tab?

If it's very complicated to fix, that might not be the biggest issue. Users will probably be changing settings when they switch to the Settings tab which would require a stream reload anyway. Unless persisting the logs data when you switch to the Settings tab would also allow it to start loading new data before you even switch away from the tab?

[Zacqary]

Can we also get some kind of "Are you sure?" prompt if you make changes, then click the Stream tab instead of clicking Apply? Otherwise those changes are lost

[Kerry350]

@Zacqary

Are you able to take it a step further and prevent the logs stream from having to reload data when switching away from the Settings tab?

If it's very complicated to fix, that might not be the biggest issue. Users will probably be changing settings when they switch to the Settings tab which would require a stream reload anyway. Unless persisting the logs data when you switch to the Settings tab would also allow it to start loading new data before you even switch away from the tab?

This would be a very involved and non-trivial change, and I doubt we want to focus time in that direction at the moment given the feature priorities.

I realise that comes with an air of negativity so I wanted to highlight architecturally why it's not a simple improvement:

• Historically we don't use caching functionality. Log entries are served - data wise - by a combination of GraphQL and Redux. On the client GraphQL side we turn off caching with a fetchPolicy of no-cache, the reason for this is Apollo's caching functionality was found to have quirks / bugs. We don't cache within Redux for later consumption either. Adding on to that, we want to, very soon, remove GraphQL and Redux usage from the locations they still exist. So we don't, as it stands, have an easy way to instantly re-access data that was previously queried for display.

• Every independent page (currently) handles it's data in an independent way. When the stream page mounts it fetches and displays it's data, the same happens for settings (+ inventory and metrics-explorer). They don't share anything in any way anymore, this was different with the flyout as it was rendered within every page. This loops back in to either having a form of caching mechanism, or hoisting some sort of data sharing mechanism to the index page (also not in place).

• We don't actually persist last used query parameters when navigating between tabs, so when you go to /settings and then back to /stream, when the stream page re-mounts it will set itself back up with a new point in time etc.

If this was something we wanted to look at long term - now that we have more "pages" coming in and more navigation needs - I'd say we need to look at this as a whole team and agree upon an approach for the whole of infrastructure + logs. Which, I personally feel, wouldn't make sense until we've got everything moved over to the "simple HTTP API" approach. Even in that scenario, for caching, we can't make use of something simple like regular HTTP cache headers as we use POST.

[Kerry350]

@Zacqary

Can we also get some kind of "Are you sure?" prompt if you make changes, then click the Stream tab instead of clicking Apply? Otherwise those changes are lost

This would be a nice addition, I'll look at this now 👍

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request

[Kerry350]

@Zacqary I've added in a prompt for when changes are about to be lost. I've used the <Prompt /> component that ships directly with react-router. It works well, the only downside (well, that's up for debate) is it uses a native browser prompt, so it's not stylised at all. I don't think this is an issue, given how rarely it will probably be seen.

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request

[Zacqary]

All looks good to me! Great work!

[Kerry350]

Awesome, thanks for the reviews.

Just a note to say I've got a small followup PR that will come with a fix for the breadcrumbs being incorrect sometimes. It wasn't broken by this work, it exists in Master, but I spotted it as part of the navigation work. But I don't want to block this big ol' chunk getting merged.