Fix context.pageName by fixing missing executionContext by maryam-saeidi · Pull Request #201118 · elastic/kibana

maryam-saeidi · 2024-11-21T11:03:17Z

Resolves #195778

🐞 Summary

This PR fixes missing executionContext in sharedux router by adding SharedUXContext to the KibanaRenderContextProvider. (More context provided in this comment)

After this change, we will have the route in the page name as well:

⚠️ Note for reviewer

To ensure this logic does not have a negative impact on custom implementation in plugins and also possibly remove duplicate implementation that can be covered with this implementation, I added a temporary TODO comment to different plugins that have a custom implementation. I would appreciate it if someone from the team that owns those plugins would take a look at the usage of useExecutionContext and ensure this logic works as expected after merging this PR according to the "How to test" section.

It is worth mentioning that the APM customized execution context had worked as expected when I tested it with a static value.

APM test

🧪 How to test

This is the shared implementation that is provided by KibanaRenderContextProvider

useSharedUXExecutionContext(executionContext, {
    type: 'application',
    page: match.path,
    id: Object.keys(match.params).length > 0 ? JSON.stringify(match.params) : undefined,
  });

This logic will be visible in the kibana-browser request on your page as shown below: (here is the code for setting pageName)

For your plugin, please check the following:

For the instances of useExecutionContext
- if this matches the above implementation, please check if everything works as expected if you remove the custom useExecutionContext usage.
  - If yes, please do so and commit the change to this PR.
  - If not, does the current implementation affect your custom implementation? Please let me know if that's the case.
After checking this logic, please approve this PR and add a commit to this PR to remove // TODO: Remove this comment after testing.

Plugin overview

Plugin	Works with shared logic	Comment
discover	✅	comment
data_quality	❌	comment
dashboard	✅	comment
cross_cluster_replication	❌	comment
index_management	✅	comment
rollup	❌	comment
snapshot_restore	✅	comment
upgrade_assistant	✅	comment
security_solution	❌	comment

add router to bazel

maryam-saeidi · 2024-11-21T17:26:54Z

Hi @kpatticha ,

I checked this implementation for APM pages to ensure this does not interfere with APM custom implementation, and it looks fine to me:

Was APM the only application with a custom logic? Do you mind testing this PR and verify if the previous custom implementations still have the same context.pageName?

Dosant · 2024-11-22T09:35:11Z

Was APM the only application with a custom logic? Do you mind testing this PR and verify if the previous custom implementations still have the same context.pageName?

@maryam-saeidi, if I understand correctly it is any places where useExecutionContext is called directly:

https://github.com/search?q=repo%3Aelastic%2Fkibana+useExecutionContext%28&type=code

Or executionContext.set

https://github.com/search?q=repo%3Aelastic%2Fkibana+executionContext.set%28&type=code

kpatticha · 2024-11-22T12:07:40Z

Hi @kpatticha ,

I checked this implementation for APM pages to ensure this does not interfere with APM custom implementation, and it looks fine to me:

Was APM the only application with a custom logic? Do you mind testing this PR and verify if the previous custom implementations still have the same context.pageName?

Tested APM and it works as expected 💯 I've noticed the following in security timeline page. The localhost seems correct to me but it might worth checking or inform the team that the fix in this PR could potentially impact their telemetry data

Also, @afharo opened a PR trying to address the same problem #200785 .Have you had a chance to review it? It might be worth coordinating to avoid duplicating efforts. 😊

afharo · 2024-11-22T14:11:21Z

packages/react/kibana_context/root/root_provider.tsx

+  /** The `ExecutionContextStart` API from `CoreStart`. */
+  executionContext?: ExecutionContextStart;


Q: to avoid errors in the future, should we make this one mandatory?

I will check to see if it is OK to make this dependency mandatory.
Still, I don't think this will prevent similar issues in the future because, eventually, it will be passed to SharedUXContext, which is initialized with an empty executionContext here.

elasticmachine · 2024-11-25T10:22:23Z

Pinging @elastic/obs-ux-infra_services-team (Team:obs-ux-infra_services)

github-actions · 2024-11-25T10:22:32Z

🤖 GitHub comments

Expand to view the GitHub comments

Just comment with:

/oblt-deploy : Deploy a Kibana instance using the Observability test environments.
run docs-build : Re-trigger the docs validation. (use unformatted text in the comment!)

maryam-saeidi · 2024-11-25T10:32:42Z

Also, @afharo opened a PR trying to address the same problem #200785 .Have you had a chance to review it?

@kpatticha Yes, I checked that PR, and I think since we already have SharedUXContext that can be included inrootContextProvider, fixing it this way makes more sense. In the current implementation of this PR, we also have the possibility of disabling this logic for plugins if they want to continue with the custom implementation or if the shared logic is causing an issue (we just need to make rootContextProvider configurable).

maryam-saeidi · 2024-11-25T11:19:33Z

x-pack/plugins/security_solution/public/common/hooks/use_update_execution_context.ts

    // setImmediate is required to ensure that EBT telemetry for the previous page is shipped before the new page is updated
    setImmediate(() => {
+      // TODO: Remove this comment after testing
      executionContext.set({ page: pathname });


@kpatticha noticed a difference in the new context:

@elastic/security-solution Any idea how we can solve this issue?
In APM customized execution context, overriding the value is working as expected with the changes in this PR. I wonder what the difference between these two cases is.

It seems like the same problem as with the data_quality page. The custom hook is called before the hook in our Route

And there is slight implementation difference which is probably why the pageName is different

we use : const match = useRouteMatch(); match.path
security uses: const { pathname } = useLocation();

afharo · 2024-11-25T15:38:17Z

Also, @afharo opened a PR trying to address the same problem #200785 .Have you had a chance to review it?

@kpatticha Yes, I checked that PR, and I think since we already have SharedUXContext that can be included inrootContextProvider, fixing it this way makes more sense. In the current implementation of this PR, we also have the possibility of disabling this logic for plugins if they want to continue with the custom implementation or if the shared logic is causing an issue (we just need to make rootContextProvider configurable).

++! My PR was just exploration work... but this solution looks like a better approach

…ext_app.tsx

davismcphee

Reviewed Data Discovery usages, LGTM 👍

davismcphee · 2024-11-25T21:34:43Z

src/plugins/discover/public/application/context/context_app.tsx

    });
  }, [locator, referrer, services]);

+  // TODO: Remove this comment after testing


I reviewed our usages in Discover and dropping the custom overrides changes the context properties. E.g. for this one specifically:

page: "context" -> page: "/context/:dataViewId/:id" entityId: "90943e30-9a47-11e8-b64d-95841ca0b247" -> entityId: "{\"dataViewId\":\"90943e30-9a47-11e8-b64d-95841ca0b247\",\"id\":\"Am8GZZMBvuc8nvvEfgGJ\"}"

I kept the overrides and removed the TODO here: 89b004b.

tonyghiani · 2024-11-26T12:00:11Z

x-pack/plugins/data_quality/public/application.tsx

 }) => {
  const { executionContext } = core;

-  // TODO: Remove this comment after testing


@maryam-saeidi this override is on purpose as described in
[Dataset quality] Adding execution context to data quality page within management app.

I removed the comment with fix(dataset-quality): remove TODO

However, it seems your changes are affecting how the pageName is sent for this app.

Before this PR, the pageName for dataset quality was constantly tracked as application:management:data_quality.

Visiting the same page on this PR, we get relative paths for the sub-router of this app instead of the target app.

Can't say exactly what is the turning point, but the values are different now 😕

@maryam-saeidi, I think the problem here is that manual useExecutionContext() is called before the ones that are called in Routes, so Route overrides the custom one. Ideally the final one could look like this: "application: management: data_quality:details"

crespocarlos

APM and Infra look good. Profiling is not manually changing the execution context on route changes, as APM does it , so the context pageName never changes. Are going to address that in a separate PR?

maryam-saeidi · 2024-11-26T12:36:21Z

APM and Infra look good. Profiling is not manually changing the execution context on route changes, as APM does it , so the context pageName never changes. Are going to address that in a separate PR?

Thanks for checking, Carlos. This is not part of this PR, and it is up to the teams at the moment. We can discuss this with appex-sharedux to improve this logic, but it would be outside of the scope of this PR.

nreese · 2024-11-27T18:49:25Z

src/plugins/dashboard/public/dashboard_listing/dashboard_listing_table.tsx

  urlStateEnabled,
  showCreateDashboardButton = true,
 }: DashboardListingProps) => {
+  // TODO: Remove this comment after testing


dashboard changes LGTM, comment needs to be removed

ElenaStoeva

Thanks for working on this! Tested locally and some of the Kibana Management plugins have a different pageName context now.

ElenaStoeva · 2024-11-28T13:21:05Z

x-pack/plugins/cross_cluster_replication/public/app/index.tsx

  getUrlForApp: ApplicationStart['getUrlForApp'];
  executionContext: ExecutionContextStart;
 }) => {
+  // TODO: Remove this comment after testing


There seems to be a difference here:

ElenaStoeva · 2024-11-28T13:21:39Z

x-pack/plugins/index_management/public/application/sections/home/index_list/index_list.tsx

    core: { executionContext },
  } = useAppContext();

+  // TODO: Remove this comment after testing


Lgtm, removed comment with 2a5a780.

ElenaStoeva · 2024-11-28T13:24:53Z

x-pack/plugins/rollup/public/application.tsx

  history: ManagementAppMountParams['history'];
  executionContext: ExecutionContextStart;
 }) => {
+  // TODO: Remove this comment after testing


There seems to be a difference here:

ElenaStoeva · 2024-11-28T13:28:09Z

x-pack/plugins/snapshot_restore/public/application/sections/home/policy_list/policy_list.tsx

    uiMetricService.trackUiMetric(UIM_POLICY_LIST_LOAD);
  }, [uiMetricService]);

+  // TODO: Remove this comment after testing


Lgtm, removed comment with 2a5a780.

ElenaStoeva · 2024-11-28T13:30:53Z

x-pack/plugins/upgrade_assistant/public/application/app.tsx

    core: { application, http, executionContext, ...startServices },
  } = dependencies.services;

+  // TODO: Remove this comment after testing


Lgtm, removed comment with 2a5a780.

crespocarlos

LGTM.

elasticmachine · 2024-11-28T14:40:47Z

⏳ Build in-progress

Buildkite Build
Commit: 2a5a780
Kibana Serverless Image: docker.elastic.co/kibana-ci/kibana-serverless:pr-201118-2a5a780b0e0c

History

💚 Build #254394 succeeded 7e4df5d
💔 Build #254245 failed 89b004b
💔 Build #253941 failed 87ae813
💔 Build #253917 failed 3f82e98
💔 Build #253259 failed dcc81b8

cc @maryam-saeidi

dej611 · 2024-11-29T10:15:57Z

x-pack/plugins/lens/public/app_plugin/app.tsx

    setIndicateNoData(true);
  }, [setIndicateNoData]);

+  // TODO: Remove this comment after testing


Not sure it is strictly related to this PR, but from my quick testing I see these page names from different flows:

Create visualization in dashboard, opens a Lens editor => application:lens:editor ✅

Create ES|QL panel in dashboard => application:dashboards:app ❓

Edit inline in a Dashboard => application:dashboard:app ❓

Edit in editor from a Dashboard inline editing panel => application:lens:editor ✅

Edit visualization in Discover => application:lens:/edit_by_value ❓

dej611 · 2024-11-29T10:28:56Z

src/plugins/visualizations/public/visualize_app/components/visualize_editor.tsx

  );

  const editorName = savedVisInstance?.vis.type.title.toLowerCase().replace(' ', '_') || '';
+  // TODO: Remove this comment after testing


I've checked this and noticed some subtle different pageName sometimes.
Nothing major, just these few issues:

application:visualize and application:visualize:editor are used for similar flows

application:visualize:editor:xxxxx is triggered only on navigating back to dashboard from editor, not on enter

dej611

I've tested various flows for all the editors (Lens & legacy): the events are triggered correctly, not sure about their content as described in the inline comments, but at least they are there.
While it would be nice to have more context on my comment, I'll approve the PR to unblock it.

darnautov · 2024-12-03T16:35:28Z

@maryam-saeidi We also use execution context for embeddables here, which doesn't seem to pass a child attribute.

Example of the embeddable context on the dashboard app

{
  "timestamp": "2024-12-03T16:31:19.632Z",
  "event_type": "click",
  "context": {
    "isDev": true,
    "isDistributable": false,
    "version": "9.0.0",
    "branch": "main",
    "buildNum": 9007199254740991,
    "buildSha": "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
    "session_id": "e5b78d05-c775-4c58-b5c9-6e028e27fe8b",
    "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36",
    "preferred_language": "en-GB",
    "preferred_languages": [
      "en-GB",
      "en-US",
      "en",
      "ru",
      "nl"
    ],
    "viewport_width": 2511,
    "viewport_height": 695,
    "cluster_name": "default-9.0.0-main-1043",
    "cluster_uuid": "zhJo9MR_Rbeh1w92AcwuZQ",
    "cluster_version": "9.0.0-SNAPSHOT",
    "cluster_build_flavor": "default",
    "pageName": "dashboard:dashboards:app",
    "applicationId": "dashboards",
    "page": "app",
    "entityId": "b702185d-5512-4597-b0dc-195e94c671ad",
    "page_title": "ggg - Elastic",
    "page_url": "/app/dashboards#/view/b702185d-5512-4597-b0dc-195e94c671ad?_g=(filters:!(),refreshInterval:(pause:!f,value:30000),time:(from:'2024-11-10T00:39:02.912Z',to:'2024-12-03T16:15:00.000Z'))",
    "license_id": "66d90a0e-6eed-45fc-a2a4-08a9d21e60b3",
    "license_status": "active",
    "license_type": "trial",
    "labels": {},
    "discoverProfiles": [],
    "userId": "986051385feae5b9850804db2d701c0b029ad24f09bce340c12aee7a5c8a0391",
    "isElasticCloudUser": false
  },
  "properties": {
    "target": [
      "HTML",
      "lang=en",
      "BODY",
      "class=coreSystemRootDomElement euiBody--headerIsFixed kbnBody kbnBody--noHeaderBanner kbnBody--chromeVisible kbnVersion-9-0-0",
      "DIV",
      "id=kibana-body",
      "data-test-subj=kibanaChrome",
      "DIV",
      "class=kbnAppWrapper",
      "data-test-subj=kbnAppWrapper visibleChrome",
      "DIV",
      "class=kbnAppWrapper",
      "aria-busy=false",
      "DIV",
      "class=dashboardViewport",
      "DIV",
      "class=dashboardContainer",
      "DIV",
      "class=dshDashboardViewportWrapper",
      "DIV",
      "class=dshDashboardViewport",
      "data-shared-items-container=true",
      "data-title=ggg",
      "data-shared-items-count=1",
      "DIV",
      "class=react-grid-layout dshLayout--editing",
      "style=height: 428px;",
      "DIV",
      "class=dshDashboardGrid__item react-grid-item react-draggable react-resizable css-13nuqur-dashboard_grid_item--focusStyles",
      "data-test-subj=dashboardPanel",
      "id=panel-89ef8154-7ee0-46e0-8c17-2a40ccf249a4",
      "data-grid=[object Object]",
      "style=top: 8px; left: 0.318598%; width: 49.542%; height: 412px; position: absolute;",
      "DIV",
      "class=embPanel__hoverActionsAnchor css-1k23tud-presentation_panel_hover_actions--PresentationPanelHoverActions",
      "data-test-subj=embeddablePanelHoverActions-MLanomalyswimlaneforcatrogy_example",
      "data-test-embeddable-id=89ef8154-7ee0-46e0-8c17-2a40ccf249a4",
      "DIV",
      "class=euiPanel euiPanel--plain embPanel embPanel--editing css-szlwjt-euiPanel-grow-m-plain",
      "role=figure",
      "aria-labelledby=i00652701-b194-11ef-a80f-9f14aa095f80",
      "data-test-subj=embeddablePanel",
      "data-render-complete=true",
      "DIV",
      "class=embPanel__content",
      "DIV",
      "data-test-subj=mlAnomalySwimlaneEmbeddableWrapper",
      "data-shared-item=",
      "class=css-1osklss-anomaly_swimlane_embeddable_factory--Component",
      "DIV",
      "data-test-subj=mlSwimLaneEmbeddable_89ef8154-7ee0-46e0-8c17-2a40ccf249a4",
      "class=euiFlexGroup css-12hn1m1-euiFlexGroup-none-flexStart-stretch-column-swimlane_container--SwimlaneContainer",
      "DIV",
      "class=euiFlexItem css-18qej2d-euiFlexItem-growZero-swimlane_container--SwimlaneContainer",
      "DIV",
      "DIV",
      "class=css-1h3qr3u-swimlane_container--SwimlaneContainer",
      "style=height: 154px;",
      "DIV",
      "class=echChart",
      "style=width: 100%; height: 100%;",
      "DIV",
      "class=echChartContent mlSwimLaneContainer echChartContent--column",
      "DIV",
      "class=echContainer",
      "DIV",
      "class=echChartPointerContainer",
      "style=cursor: pointer;",
      "FIGURE",
      "aria-describedby=e71a3f69-ae2b-4e0d-856e-677abf63217f--defaultSummary",
      "CANVAS",
      "class=echCanvasRenderer",
      "width=2456",
      "height=240",
      "role=presentation",
      "style=width: 1228px; height: 120px;"
    ]
  }
}

darnautov · 2024-12-03T16:36:44Z

x-pack/plugins/ml/public/application/routing/use_active_route.tsx

    [activeRoute, overlays, pathname, startServices]
  );

+  // TODO: Remove this comment after testing


Tested, works as expected

Suggested change

// TODO: Remove this comment after testing

maryam-saeidi · 2024-12-17T11:23:41Z

Thanks, everyone, for your help with checking this implementation. Due to a race condition between the custom implementation and the default one, we decided to add the possibility of enabling execution context tracking on demand instead of enabling it by default. You can review this implementation in the other PR. I will close this PR in favor of that one.

Fix missing executionContext

3925c21

maryam-saeidi added release_note:skip Skip the PR/issue when compiling release notes backport:prev-minor labels Nov 21, 2024

maryam-saeidi self-assigned this Nov 21, 2024

maryam-saeidi and others added 3 commits November 21, 2024 14:04

Revert ExecutionContextStart directly

d0b0d51

add router to bazel

b0c621c

Merge pull request #4 from Dosant/195778-fix-pageName

dcc81b8

add router to bazel

maryam-saeidi requested review from Dosant, afharo and kpatticha November 21, 2024 17:23

afharo reviewed Nov 22, 2024

View reviewed changes

Add temporary TODOs

68cae60

maryam-saeidi marked this pull request as ready for review November 25, 2024 10:22

maryam-saeidi requested review from a team as code owners November 25, 2024 10:22

maryam-saeidi requested a review from a team November 25, 2024 10:22

maryam-saeidi requested review from a team as code owners November 25, 2024 10:22

Merge branch 'main' into 195778-fix-pageName

3f82e98

botelastic bot added ci:project-deploy-observability Create an Observability project Team:obs-ux-infra_services - DEPRECATED DEPRECATED - Use Team:obs-presentation. labels Nov 25, 2024

Revert useExecutionContext test in APM

87ae813

maryam-saeidi commented Nov 25, 2024

View reviewed changes

ElenaStoeva self-requested a review November 25, 2024 16:30

Remove TODO from src/plugins/discover/public/application/context/cont…

89b004b

…ext_app.tsx

davismcphee approved these changes Nov 25, 2024

View reviewed changes

Marco Antonio Ghiani and others added 2 commits November 26, 2024 12:50

fix(dataset-quality): remove TODO

81a712c

Merge branch 'main' into 195778-fix-pageName

7e4df5d

tonyghiani reviewed Nov 26, 2024

View reviewed changes

crespocarlos reviewed Nov 26, 2024

View reviewed changes

nreese approved these changes Nov 27, 2024

View reviewed changes

darnautov self-requested a review November 28, 2024 12:58

Remove comments for IM, Snapshot restore, UA

2a5a780

ElenaStoeva reviewed Nov 28, 2024

View reviewed changes

crespocarlos approved these changes Nov 28, 2024

View reviewed changes

dej611 reviewed Nov 29, 2024

View reviewed changes

dej611 approved these changes Nov 29, 2024

View reviewed changes

darnautov reviewed Dec 3, 2024

View reviewed changes

maryam-saeidi closed this Dec 17, 2024

afharo mentioned this pull request Dec 17, 2024

[Execution Context] Update on URL change #200785

Closed

2 tasks

maryam-saeidi deleted the 195778-fix-pageName branch December 17, 2024 11:37

maryam-saeidi mentioned this pull request Dec 18, 2024

Fix context.pageName by fixing missing executionContext and add enableExecutionContextTracking flag #204547

Merged

		/** The `ExecutionContextStart` API from `CoreStart`. */
		executionContext?: ExecutionContextStart;

Conversation

maryam-saeidi commented Nov 21, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🐞 Summary

⚠️ Note for reviewer

🧪 How to test

Plugin overview

Uh oh!

maryam-saeidi commented Nov 21, 2024

Uh oh!

Dosant commented Nov 22, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kpatticha commented Nov 22, 2024

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented Nov 25, 2024

Uh oh!

github-actions bot commented Nov 25, 2024

🤖 GitHub comments

Uh oh!

maryam-saeidi commented Nov 25, 2024

Uh oh!

maryam-saeidi Nov 25, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Dosant Nov 28, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Dosant Nov 28, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

afharo commented Nov 25, 2024

Uh oh!

davismcphee left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

crespocarlos left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

maryam-saeidi commented Nov 26, 2024

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ElenaStoeva left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

crespocarlos left a comment

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented Nov 28, 2024

⏳ Build in-progress

History

Uh oh!

dej611 Nov 29, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

maryam-saeidi commented Nov 21, 2024 •

edited

Loading

Dosant commented Nov 22, 2024 •

edited

Loading

maryam-saeidi Nov 25, 2024 •

edited

Loading

Dosant Nov 28, 2024 •

edited

Loading

Dosant Nov 28, 2024 •

edited

Loading

crespocarlos left a comment •

edited

Loading

dej611 Nov 29, 2024 •

edited

Loading