[Infra UI] Implement telemetry for the asset details flyout #163078

crespocarlos · 2023-08-03T14:30:31Z

Summary

This PR adds proper data-test-subj attributes to the Asset Details component and adds a new custom telemetry event

Besides that, I've renamed 2 props,node -> asset and nodeType -> assetType, to make naming consistent with what we're naming these attributes across asset-related stuff.

How to test

Setup a local Kibana instance
Navigate to Infrastructure > Hosts
Open the flyout
- Upon opening, an event called Asset Details Flyout Viewed should be present in kibana-browser request
- Click through the flyout and check the kibana-browser requests
  - All automatic events in the flyout should contain the data-component-name and data-asset-type attributes

apmmachine · 2023-08-03T14:30:47Z

🤖 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 · 2023-08-04T10:50:07Z

Pinging @elastic/infra-monitoring-ui (Team:Infra Monitoring UI)

crespocarlos · 2023-08-04T10:56:29Z

@elasticmachine merge upstream

crespocarlos · 2023-08-07T14:41:33Z

@elasticmachine merge upstream

…ut-telemetry

jennypavlova

LGTM 🚀 I am able to see the view event and also click events in the browser. I added some questions regarding tracking different render modes ( if we have a different issue for the assets details page telemetry we can ignore it here )

jennypavlova · 2023-08-10T09:32:41Z

x-pack/plugins/infra/public/components/asset_details/constants.ts

@@ -5,4 +5,5 @@
 * 2.0.
 */

+export const ASSET_DETAILS_FLYOUT_COMPONENT_NAME = 'infraAssetDetailsFlyout';


Do we want to have a different name in case it's open as page? Maybe I am missing something but I don't see a different component value or passing renderMode to this event 🤔

Yes. the name will be different. Probably infraAssetDetailsPage

jennypavlova · 2023-08-10T09:36:51Z

x-pack/plugins/infra/public/services/telemetry/telemetry_service.test.ts

+      const telemetry = service.start();
+
+      telemetry.reportAssetDetailsFlyoutViewed({
+        componentName: 'infraAssetDetailsFlyout',


Do we also want to pass the render mode here? Or to have infraAssetDetailsFlyout and infraAssetDetailsPage to know when a the flyout/details page is rendered

this:

Or to have infraAssetDetailsFlyout and infraAssetDetailsPage to know when a the flyout/details page is rendered

jennypavlova · 2023-08-10T09:38:38Z

x-pack/plugins/monitoring/dev_docs/reference/metricbeat.yarn.yml

@@ -4,6 +4,17 @@ http.enabled: true
 http.host: "0.0.0.0"

 metricbeat.modules:
+  - module: system
+  - module: nginx


Q: This is not part of the telemetry right? it's nice to have it in the docs tho 🙂

Ooops. thanks for catching it.

jennypavlova · 2023-08-10T11:19:04Z

x-pack/plugins/infra/public/components/asset_details/asset_details.stories.tsx

@@ -107,7 +101,7 @@ export const Page = PageTemplate.bind({});
 export const Flyout = FlyoutTemplate.bind({});
 Flyout.args = {
  renderMode: {
-    showInFlyout: true,
+    mode: 'flyout',


I realized that this will conflict with my changes in my PR where I use showInFlyout as a boolean. I can adapt that once this PR is merged. It is all good, I am just curious now if it is somehow used in the telemetry object or not yet (I don't see the mode when I check it just want to be sure that I am not missing something)

renderMode will only be used to determine the componentName attribute. I changed it because this way seems more explanatory to differentiate between render mode: page vs flyout. Not sure if you agree.

Ok, got it! Yeah, it makes sense, we can also extend with other modes that way! I used the boolean to have the "default" view and "flyout" view so the consumer should add a prop only in case a flyout is needed, but your change is good, thanks for explaining 👍

kibana-ci · 2023-08-10T13:05:51Z

💚 Build Succeeded

Metrics [docs]

Async chunks

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

id	before	after	diff
`infra`	2.0MB	2.0MB	+290.0B

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.3KB	105.9KB	+541.0B

History

💚 Build #149065 succeeded c6e0a4f
💚 Build #147992 succeeded 7fffa3c
💛 Build #147465 was flaky 367638a
💚 Build #147433 succeeded 3f36690
💔 Build #147420 failed 1e725fe
💔 Build #147198 failed 48b947c

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

* main: (108 commits) [Telemetry Schema Validation] Allow `null` on `string` (elastic#163499) [Search] Add Slack and Gmail connectors (elastic#163321) [ML] Provide hints for empty fields in dropdown options in Anomaly detection & Transform creation wizards, Change point detection view (elastic#163371) chore(slo): Add response required fields (elastic#163430) [AO] Fix add_to_case functional test (elastic#163155) unskip license type functional test (elastic#163199) fix(NA): yarn env vars for node_modules mirrors (elastic#163549) [Response Ops][Task Manager] Expose SLI metrics in HTTP API (elastic#162178) [Logs UI] Adapt test to ES highlighting changes and unskip (elastic#163592) [Infra UI] Implement Telemetry on 'Show' buttons within Inventory (elastic#163587) [Enterprise Search]Migrate all usages of EuiPage*_Deprecated (elastic#163482) fix(slo): settings and access for serverless (elastic#163514) [Infra UI] Implement telemetry for the asset details flyout (elastic#163078) [Fleet] Add a banner to the top of the Kafka Output UI to say that Elastic Defend integration is not supported (elastic#163579) [Fleet] Re-enable and fix Fleet policy secret integration tests (elastic#163428) [Fleet] add managed to imported saved object (elastic#163526) [Index Management] Disable index actions using contextRef (elastic#163475) [Discover] Inline shard failures warnings (elastic#161271) [Security Solution][Detection engine] skips geo_point non-ecs validation (elastic#163487) Update EUI layout components in bfetch example plugin (elastic#163490) ...

Implement telemetry for the asset details

d70461f

crespocarlos changed the title ~~Implement telemetry for the asset details~~ [Infra UI] Implement telemetry for the asset details Aug 3, 2023

crespocarlos added 3 commits August 3, 2023 16:58

Fix tests

48b947c

Fix build

1e725fe

Fix metadata.tsx unit test

3f36690

crespocarlos marked this pull request as ready for review August 4, 2023 10:50

crespocarlos requested a review from a team as a code owner August 4, 2023 10:50

kibanamachine and others added 2 commits August 4, 2023 06:56

Merge branch 'main' into 1129-asset-flyout-telemetry

367638a

Adjust KPIs data-test-subj

4cca4c7

Merge branch 'main' into 1129-asset-flyout-telemetry

7fffa3c

crespocarlos changed the title ~~[Infra UI] Implement telemetry for the asset details~~ [Infra UI] Implement telemetry for the asset details flyout Aug 9, 2023

Merge branch 'main' of github.com:elastic/kibana into 1129-asset-flyo…

c6e0a4f

…ut-telemetry

jennypavlova self-requested a review August 10, 2023 09:02

jennypavlova approved these changes Aug 10, 2023

View reviewed changes

jennypavlova reviewed Aug 10, 2023

View reviewed changes

revert metricbeat.yarn.yml changes

10fcd98

crespocarlos enabled auto-merge (squash) August 10, 2023 12:33

crespocarlos merged commit 4a56d20 into elastic:main Aug 10, 2023

crespocarlos deleted the 1129-asset-flyout-telemetry branch August 11, 2023 09:05

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Infra UI] Implement telemetry for the asset details flyout #163078

[Infra UI] Implement telemetry for the asset details flyout #163078

crespocarlos commented Aug 3, 2023 •

edited

Loading

apmmachine commented Aug 3, 2023

elasticmachine commented Aug 4, 2023

crespocarlos commented Aug 4, 2023

crespocarlos commented Aug 7, 2023

jennypavlova left a comment

jennypavlova Aug 10, 2023

crespocarlos Aug 10, 2023

jennypavlova Aug 10, 2023

crespocarlos Aug 10, 2023

jennypavlova Aug 10, 2023

crespocarlos Aug 10, 2023

jennypavlova Aug 10, 2023

crespocarlos Aug 10, 2023

jennypavlova Aug 10, 2023

kibana-ci commented Aug 10, 2023

[Infra UI] Implement telemetry for the asset details flyout #163078

[Infra UI] Implement telemetry for the asset details flyout #163078

Conversation

crespocarlos commented Aug 3, 2023 • edited Loading

Summary

How to test

apmmachine commented Aug 3, 2023

🤖 GitHub comments

elasticmachine commented Aug 4, 2023

crespocarlos commented Aug 4, 2023

crespocarlos commented Aug 7, 2023

jennypavlova left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kibana-ci commented Aug 10, 2023

💚 Build Succeeded

Metrics [docs]

Async chunks

Page load bundle

History

crespocarlos commented Aug 3, 2023 •

edited

Loading