Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Cloud Security] Fixes SVG flickering and adding insight telemetry #198812

Merged
merged 5 commits into from
Nov 6, 2024
Merged

[Cloud Security] Fixes SVG flickering and adding insight telemetry #198812

merged 5 commits into from
Nov 6, 2024

Conversation

JordanSh
Copy link
Contributor

@JordanSh JordanSh commented Nov 4, 2024 •
edited by kibanamachine
Loading

Summary

Resolves Onboarding blocks "jump" while images being loaded
Resolves Add telemetry for posture data in alerts flyout

Fixes flickering while SVG is loading by setting a container component with set height

Added container with fixed height and width, matching the other SVGs which are used in this empty state UI.

Video shows no flickering while disabled cache is active and paginating between the tables

Screen.Recording.2024-11-04.at.17.43.30.mov

Adding telemetry counters to the new flyout elements

The insights component is being reused multiple times on the alert flyout and expaded details flyout as can be seen here:

image

I've utilized the test-subj-id in order to differentiate between render instances

image

Here is how it looks in the telemetry:

image

@JordanSh JordanSh self-assigned this Nov 4, 2024
@JordanSh JordanSh added Team:Cloud Security Cloud Security team related backport:prev-minor Backport to (8.x) the previous minor version (i.e. one version back from main) v8.16.0 labels Nov 4, 2024
@JordanSh JordanSh requested review from maxcold and CohenIdo November 4, 2024 15:56
@JordanSh JordanSh added release_note:skip Skip the PR/issue when compiling release notes v9.0.0 backport:version Backport to applied version labels v8.17.0 labels Nov 4, 2024
@JordanSh JordanSh marked this pull request as ready for review November 4, 2024 15:59
@JordanSh JordanSh requested review from a team as code owners November 4, 2024 15:59
@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-cloud-security-posture (Team:Cloud Security)

@JordanSh JordanSh changed the title fixes flicker and adds telemtry [Cloud Security] Fixes SVG flickering and adding insight telemetry Nov 4, 2024
maxcold
maxcold reviewed Nov 5, 2024
View reviewed changes
...urity_solution/public/flyout/document_details/shared/components/misconfiguration_insight.tsx Outdated
useEffect(() => {
uiMetricService.trackUiMetric(
METRIC_TYPE.COUNT,
`${MISCONFIGURATION_INSIGHT} instance id: ${dataTestSubj}`
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wouldn't couple the test id with the tracking tbh, let's introduce a prop dedicated to tracking. If we change the test id for some reason, the tracking info will also change which might affect reports and numbers

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

makes sense. @CohenIdo would we also want to insert the field (user/host) to the id? so we can track which is more used?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've added a telemetrySuffix prop. left the values as plain texts rather than constants because if this component will be moved i prefer it to be clear that the suffix might need to change as well.

CohenIdo
CohenIdo approved these changes Nov 5, 2024
View reviewed changes
...urity_solution/public/flyout/document_details/shared/components/misconfiguration_insight.tsx Outdated
useEffect(() => {
uiMetricService.trackUiMetric(
METRIC_TYPE.COUNT,
`${MISCONFIGURATION_INSIGHT} instance id: ${dataTestSubj}`
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes.

@JordanSh JordanSh requested a review from maxcold November 5, 2024 15:12
@JordanSh JordanSh enabled auto-merge (squash) November 6, 2024 13:24
@JordanSh JordanSh merged commit de46e7f into elastic:main Nov 6, 2024
45 checks passed
@kibanamachine
Copy link
Contributor

Starting backport for target branches: 8.16, 8.x

https://github.com/elastic/kibana/actions/runs/11704942785

@elasticmachine
Copy link
Contributor

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id before after diff
cloudSecurityPosture 662 663 +1

Async chunks

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

id before after diff
cloudSecurityPosture 509.3KB 509.4KB +162.0B
securitySolution 21.0MB 21.0MB +2.2KB
total +2.4KB

Page load bundle

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

id before after diff
securitySolution 88.1KB 88.2KB +125.0B
Unknown metric groups

ESLint disabled line counts

id before after diff
securitySolution 552 554 +2

Total ESLint disabled count

id before after diff
securitySolution 638 640 +2

History

cc @JordanSh

kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Nov 6, 2024
@JordanSh
[Cloud Security] Fixes SVG flickering and adding insight telemetry (e…
bb7d680 
…lastic#198812)

(cherry picked from commit de46e7f)
@kibanamachine kibanamachine mentioned this pull request Nov 6, 2024
Merged
kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Nov 6, 2024
@JordanSh
[Cloud Security] Fixes SVG flickering and adding insight telemetry (e…
0257050 
…lastic#198812)

(cherry picked from commit de46e7f)
@kibanamachine kibanamachine mentioned this pull request Nov 6, 2024
Merged
@kibanamachine
Copy link
Contributor

💚 All backports created successfully

Status Branch Result
✅ 8.16
✅ 8.x

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

kibanamachine added a commit that referenced this pull request Nov 6, 2024
@kibanamachine @JordanSh
[8.x] [Cloud Security] Fixes SVG flickering and adding insight teleme…
72aad63 
…try (#198812) (#199142)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Cloud Security] Fixes SVG flickering and adding insight telemetry
(#198812)](#198812)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT
[{"author":{"name":"Jordan","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-11-06T13:52:30Z","message":"[Cloud
Security] Fixes SVG flickering and adding insight telemetry
(#198812)","sha":"de46e7f0739eb14138655e204d4be77d8e24ff37","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:Cloud
Security","backport:prev-minor","v8.16.0","backport:version","v8.17.0"],"title":"[Cloud
Security] Fixes SVG flickering and adding insight
telemetry","number":198812,"url":"https://github.com/elastic/kibana/pull/198812","mergeCommit":{"message":"[Cloud
Security] Fixes SVG flickering and adding insight telemetry
(#198812)","sha":"de46e7f0739eb14138655e204d4be77d8e24ff37"}},"sourceBranch":"main","suggestedTargetBranches":["8.16","8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/198812","number":198812,"mergeCommit":{"message":"[Cloud
Security] Fixes SVG flickering and adding insight telemetry
(#198812)","sha":"de46e7f0739eb14138655e204d4be77d8e24ff37"}},{"branch":"8.16","label":"v8.16.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.x","label":"v8.17.0","branchLabelMappingKey":"^v8.17.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Jordan <[email protected]>
kibanamachine added a commit that referenced this pull request Nov 6, 2024
@kibanamachine @JordanSh
[8.16] [Cloud Security] Fixes SVG flickering and adding insight telem…
c929240 
…etry (#198812) (#199141)

# Backport

This will backport the following commits from `main` to `8.16`:
- [[Cloud Security] Fixes SVG flickering and adding insight telemetry
(#198812)](#198812)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT
[{"author":{"name":"Jordan","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-11-06T13:52:30Z","message":"[Cloud
Security] Fixes SVG flickering and adding insight telemetry
(#198812)","sha":"de46e7f0739eb14138655e204d4be77d8e24ff37","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:Cloud
Security","backport:prev-minor","v8.16.0","backport:version","v8.17.0"],"title":"[Cloud
Security] Fixes SVG flickering and adding insight
telemetry","number":198812,"url":"https://github.com/elastic/kibana/pull/198812","mergeCommit":{"message":"[Cloud
Security] Fixes SVG flickering and adding insight telemetry
(#198812)","sha":"de46e7f0739eb14138655e204d4be77d8e24ff37"}},"sourceBranch":"main","suggestedTargetBranches":["8.16","8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/198812","number":198812,"mergeCommit":{"message":"[Cloud
Security] Fixes SVG flickering and adding insight telemetry
(#198812)","sha":"de46e7f0739eb14138655e204d4be77d8e24ff37"}},{"branch":"8.16","label":"v8.16.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.x","label":"v8.17.0","branchLabelMappingKey":"^v8.17.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Jordan <[email protected]>
mgadewoll pushed a commit to mgadewoll/kibana that referenced this pull request Nov 7, 2024
@JordanSh @mgadewoll
[Cloud Security] Fixes SVG flickering and adding insight telemetry (e…
bd4aaee 
…lastic#198812)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@CohenIdo CohenIdo CohenIdo approved these changes

@maxcold maxcold maxcold approved these changes

@janmonschke janmonschke janmonschke approved these changes

Assignees

@JordanSh JordanSh

Labels
backport:prev-minor Backport to (8.x) the previous minor version (i.e. one version back from main) backport:version Backport to applied version labels release_note:skip Skip the PR/issue when compiling release notes Team:Cloud Security Cloud Security team related v8.16.0 v8.17.0 v9.0.0
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Onboarding blocks "jump" while images being loaded
6 participants
@JordanSh @elasticmachine @kibanamachine @janmonschke @maxcold @CohenIdo