[Logs Explorer] UI state gets lost on navigating via back button #181968
Assignees
Labels
bug
Fixes for quality problems that affect the customer experience
Feature:LogsExplorer
Logs Explorer feature
Team:obs-ux-logs
Observability Logs User Experience Team
Comments
flash1293
added
the
bug
flash1293
added
Team:obs-ux-logs
|
Pinging @elastic/obs-ux-logs-team (Team:obs-ux-logs) |
tonyghiani
added a commit
that referenced
this issue
May 6, 2024
…2641) ## 📓 Summary Closes #181968 The issue, where the Logs Explorer app was not correctly loading data, was the result of the following investigation. The issue was affecting, without major problems, also other Observability apps. **Before** https://github.com/elastic/kibana/assets/34506779/5beb300c-f397-401a-b24b-2a125139a79e **After** https://github.com/elastic/kibana/assets/34506779/3f3132d5-19cc-4086-ac24-bd3629878c95 ### Why the UI and state management are not synced upon navigation? Looking at the state management for Logs Explorer and the initialization flow, everything looked good. The UI was de-synced from the initialized services and state due to a forced unmount/remount of the main app (to not confuse it with a rerender, the app was completely removed and remounted in the react tree), the DiscoverContainer. ### Why the main app was remounted? Checking level by level the react tree, the remount didn't occur due to Logs Explorer or Discover state changes, but at the level of the `ObservabilityPageTemplate` template wrapper component. Any component using this wrapper and performing client-side navigation to/from the same page was triggering the following react warning: ``` Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. at DiscoverMainRoute // ... at KibanaPageTemplateInner (http://localhost:5601/ftw/XXXXXXXXXXXX/bundles/plugin/observabilityShared/1.0.0/observabilityShared.chunk.0.js:2959:3) at WithSolutionNav (http://localhost:5601/ftw/XXXXXXXXXXXX/bundles/plugin/observabilityShared/1.0.0/observabilityShared.chunk.0.js:3988:107) ``` Given this, something was causing an immediate rerender of the `WithSolutionNav` HoC, de-syncing the UI tree from the state handled at a higher level through the state machine of the Logs Explorer app. ### Where was the issue The bug causing the double render of the whole app was in the [`createLazyObservabilityPageTemplate`](https://github.com/elastic/kibana/blob/main/x-pack/plugins/observability_solution/observability_shared/public/components/page_template/lazy_page_template.tsx#L27) function: ```tsx const showSolutionNav = !!showSolutionNavProp || isSidebarEnabled; ``` and in the default value for this property in the [`ObservabilityPageTemplate`](https://github.com/elastic/kibana/blob/main/x-pack/plugins/observability_solution/observability_shared/public/components/page_template/page_template.tsx#L100) component: ```tsx showSolutionNav = true, ``` `isSidebarEnabled` can either be a boolean or `undefined`. Given how the statement is written, `showSolutionNav` can so result in a boolean value or `undefined` too, since `isSidebarEnabled` is the last variable in the boolean OR condition. If the property resulted is undefined and passed to the component, JS consider it as if it was not passed, using the default value for that specific argument, for example: <img width="1545" alt="Screenshot 2024-05-06 at 09 56 44" src="https://github.com/elastic/kibana/assets/34506779/90f0ce62-b7d9-4f0b-a54a-baee9b6194a0"> Saying this, the `showSolutionNav` property, instead of always being set to a `false` value, was flapping between true and `false` since the `isSidebarEnabled` variable was not immediately resolved to a boolean. An explicit casting to a boolean for `showSolutionNav` exclude the case where `ObservabilityPageTemplate` used the default truthy value, removing the extra mount and keeping the state in sync with the UI. Co-authored-by: Marco Antonio Ghiani <marcoantonio.ghiani@elastic.co>
tonyghiani
added a commit
that referenced
this issue
Jun 4, 2024
…4652) ## 📓 Summary Adding an initial value to the `useObservable` call prevents its value from flapping and rendering twice the whole child application. This issue is similar to what was reported in #181968 and also its solution lies on a similar error. I added a functional test for both stateful/serverless environments to assert this behaviour doesn't break anymore. --------- Co-authored-by: Marco Antonio Ghiani <marcoantonio.ghiani@elastic.co> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
rohanxz
pushed a commit
to honeyn303/kibana
that referenced
this issue
Jun 4, 2024
…stic#184652) ## 📓 Summary Adding an initial value to the `useObservable` call prevents its value from flapping and rendering twice the whole child application. This issue is similar to what was reported in elastic#181968 and also its solution lies on a similar error. I added a functional test for both stateful/serverless environments to assert this behaviour doesn't break anymore. --------- Co-authored-by: Marco Antonio Ghiani <marcoantonio.ghiani@elastic.co> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Kibana version: main serverless
Describe the bug:
When navigating back to the Logs Explorer via the browser back button, the state of the UI is not applied correctly
Steps to reproduce:
Navigate to some other page (e.g. dashboard listing page, but it doesn't matter)
Hit the back button. Logs explorer loads, but it shows all logs instead of the selected integration and doesn't have columns selected:
On page reload, the expected view is rendered:
Expected behavior:
After hitting the back button, the correct view should be rendered.
The text was updated successfully, but these errors were encountered: