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

Lens Embeddable flicks when rendering a visualization #170428

Closed
angorayc opened this issue Nov 2, 2023 · 6 comments · Fixed by #171238
Closed

Lens Embeddable flicks when rendering a visualization #170428

angorayc opened this issue Nov 2, 2023 · 6 comments · Fixed by #171238
Assignees
@drewdaemon @machadoum @angorayc
Labels
bug Fixes for quality problems that affect the customer experience Feature:Lens Charts Security Solution Lens Charts feature Team: SecuritySolution Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc. Team:Threat Hunting:Explore Team:Threat Hunting Security Solution Threat Hunting Team Team:Visualizations Visualization editors, elastic-charts and infrastructure usability

Comments

@angorayc
Copy link
Contributor

angorayc commented Nov 2, 2023 •
edited
Loading

We are adding more visualizations to Security Solution.
Here is a weird case that the metric flicked when it's loaded.
After tracking the code I found we have a few async components under the Lens Embeddable, each had its-own place holder when loading might be the cause.

vis-flick.mp4

In our case, It'd look smoother when rendering if we do this changes. Please could you advise how to proceed. Thank you.

  1. x-pack/plugins/lens/public/embeddable/embeddable_component.tsx, return null in line 163
  2. src/plugins/embeddable/public/embeddable_panel/index.tsx, return null in line 20
Screen.Recording.2023-11-02.at.14.32.18.mov

Steps to reproduce:

  1. Please run this branch in default space with platinum or trial license: https://github.com/elastic/kibana/pull/169514/files#diff-9373de54fa51479b6287dc9086ea8eb04e3fede21f3254c2182af6b6fbcd5a8cR191

  2. in kibana.dev.yml add:
    xpack.securitySolution.enableExperimental: ['newUserDetailsFlyout']

  3. Add some data from dev tool


PUT auditbeat-custom-index-1

PUT auditbeat-custom-index-1/_mapping
{
"properties": {
  "@timestamp": {
    "type": "date"
  },
  "agent.type": {
    "type": "constant_keyword"
  },
  "event.category": {
    "type": "constant_keyword"
  }
}
}

POST auditbeat-custom-index-1/_doc
{
"@timestamp": "2023-11-01T09:41:49.668Z",
"host": {
  "name": "foo"
},
"event": {
  "category": "an_invalid_category"
},
"some.field": "this",
"source": {
  "port": 90210,
  "ip": "10.1.2.3"
}
}
  1. visit /app/security/entity_analytics_management to enable risk score module
Screenshot 2023-11-10 at 17 00 18
  1. In Dev tools
POST risk-score.risk-score-latest-default/_doc
{
  "@timestamp": "2023-11-09T12:56:37.689Z",
  "host": {
    "name": "Angelas-MacBook-Pro.local",
    "risk": {
      "id_field": "host.name",
      "id_value": "Angelas-MacBook-Pro.local",
      "calculated_level": "Unknown",
      "calculated_score": 50.67035607277805,
      "calculated_score_norm": 19.399064346392823,
      "category_1_score": 37,
      "category_1_count": 100,
      "notes": [],
      "inputs": [
        {
          "id": "01a7fb5acda592358a9d3bf048ce2cddc0e41f08bbadc2a94989923fc773cfc0",
          "index": ".internal.alerts-security.alerts-default-000001",
          "description": "Alert from Rule: xx",
          "category": "category_1",
          "risk_score": 21,
          "timestamp": "2023-11-09T12:53:23.178Z"
        },
        {
          "id": "0eca2a98fadcbc7999510183b748f16577d7b05b6069ff10e77155e1d3925b3b",
          "index": ".internal.alerts-security.alerts-default-000001",
          "description": "Alert from Rule: xx",
          "category": "category_1",
          "risk_score": 21,
          "timestamp": "2023-11-09T12:53:23.180Z"
        },
        {
          "id": "d7f6e72944e38cfc98d83df0ab2977edba2fac035e7ec70b6d4bf2708facba15",
          "index": ".internal.alerts-security.alerts-default-000001",
          "description": "Alert from Rule: xx",
          "category": "category_1",
          "risk_score": 21,
          "timestamp": "2023-11-09T12:53:23.182Z"
        },
        {
          "id": "16f5ebd5ecd7eea068be673a16cf556de4ccc87a52fdf50b114ad03d39541490",
          "index": ".internal.alerts-security.alerts-default-000001",
          "description": "Alert from Rule: xx",
          "category": "category_1",
          "risk_score": 21,
          "timestamp": "2023-11-09T12:53:23.183Z"
        },
        {
          "id": "473e81911fc05d3a0be951214273b787691ff34005ea4259dc493f0b5ff31e3c",
          "index": ".internal.alerts-security.alerts-default-000001",
          "description": "Alert from Rule: xx",
          "category": "category_1",
          "risk_score": 21,
          "timestamp": "2023-11-09T12:53:23.184Z"
        }
      ]
    }
  },
  "user": {
    "name": "angela",
    "risk": {
      "id_field": "user.name",
      "id_value": "angela",
      "calculated_level": "Unknown",
      "calculated_score": 50.67035607277805,
      "calculated_score_norm": 19.399064346392823,
      "category_1_score": 37,
      "category_1_count": 100,
      "notes": [],
      "inputs": [
        {
          "id": "01a7fb5acda592358a9d3bf048ce2cddc0e41f08bbadc2a94989923fc773cfc0",
          "index": ".internal.alerts-security.alerts-default-000001",
          "description": "Alert from Rule: xx",
          "category": "category_1",
          "risk_score": 21,
          "timestamp": "2023-11-09T12:53:23.178Z"
        },
        {
          "id": "0eca2a98fadcbc7999510183b748f16577d7b05b6069ff10e77155e1d3925b3b",
          "index": ".internal.alerts-security.alerts-default-000001",
          "description": "Alert from Rule: xx",
          "category": "category_1",
          "risk_score": 21,
          "timestamp": "2023-11-09T12:53:23.180Z"
        },
        {
          "id": "d7f6e72944e38cfc98d83df0ab2977edba2fac035e7ec70b6d4bf2708facba15",
          "index": ".internal.alerts-security.alerts-default-000001",
          "description": "Alert from Rule: xx",
          "category": "category_1",
          "risk_score": 21,
          "timestamp": "2023-11-09T12:53:23.182Z"
        },
        {
          "id": "16f5ebd5ecd7eea068be673a16cf556de4ccc87a52fdf50b114ad03d39541490",
          "index": ".internal.alerts-security.alerts-default-000001",
          "description": "Alert from Rule: xx",
          "category": "category_1",
          "risk_score": 21,
          "timestamp": "2023-11-09T12:53:23.183Z"
        },
        {
          "id": "473e81911fc05d3a0be951214273b787691ff34005ea4259dc493f0b5ff31e3c",
          "index": ".internal.alerts-security.alerts-default-000001",
          "description": "Alert from Rule: xx",
          "category": "category_1",
          "risk_score": 21,
          "timestamp": "2023-11-09T12:53:23.184Z"
        }
      ]
    }
  }
}

Add another risk score data:

POST risk-score.risk-score-default/_doc
{
  "@timestamp": "2023-11-09T12:56:37.689Z",
  "host": {
    "name": "Angelas-MacBook-Pro.local",
    "risk": {
      "id_field": "host.name",
      "id_value": "Angelas-MacBook-Pro.local",
      "calculated_level": "Unknown",
      "calculated_score": 50.67035607277805,
      "calculated_score_norm": 19.399064346392823,
      "category_1_score": 37,
      "category_1_count": 100,
      "notes": [],
      "inputs": [
        {
          "id": "01a7fb5acda592358a9d3bf048ce2cddc0e41f08bbadc2a94989923fc773cfc0",
          "index": ".internal.alerts-security.alerts-default-000001",
          "description": "Alert from Rule: xx",
          "category": "category_1",
          "risk_score": 21,
          "timestamp": "2023-11-09T12:53:23.178Z"
        },
        {
          "id": "0eca2a98fadcbc7999510183b748f16577d7b05b6069ff10e77155e1d3925b3b",
          "index": ".internal.alerts-security.alerts-default-000001",
          "description": "Alert from Rule: xx",
          "category": "category_1",
          "risk_score": 21,
          "timestamp": "2023-11-09T12:53:23.180Z"
        },
        {
          "id": "d7f6e72944e38cfc98d83df0ab2977edba2fac035e7ec70b6d4bf2708facba15",
          "index": ".internal.alerts-security.alerts-default-000001",
          "description": "Alert from Rule: xx",
          "category": "category_1",
          "risk_score": 21,
          "timestamp": "2023-11-09T12:53:23.182Z"
        },
        {
          "id": "16f5ebd5ecd7eea068be673a16cf556de4ccc87a52fdf50b114ad03d39541490",
          "index": ".internal.alerts-security.alerts-default-000001",
          "description": "Alert from Rule: xx",
          "category": "category_1",
          "risk_score": 21,
          "timestamp": "2023-11-09T12:53:23.183Z"
        },
        {
          "id": "473e81911fc05d3a0be951214273b787691ff34005ea4259dc493f0b5ff31e3c",
          "index": ".internal.alerts-security.alerts-default-000001",
          "description": "Alert from Rule: xx",
          "category": "category_1",
          "risk_score": 21,
          "timestamp": "2023-11-09T12:53:23.184Z"
        }
      ]
    }
  },
  "user": {
    "name": "angela",
    "risk": {
      "id_field": "user.name",
      "id_value": "angela",
      "calculated_level": "Unknown",
      "calculated_score": 50.67035607277805,
      "calculated_score_norm": 19.399064346392823,
      "category_1_score": 37,
      "category_1_count": 100,
      "notes": [],
      "inputs": [
        {
          "id": "01a7fb5acda592358a9d3bf048ce2cddc0e41f08bbadc2a94989923fc773cfc0",
          "index": ".internal.alerts-security.alerts-default-000001",
          "description": "Alert from Rule: xx",
          "category": "category_1",
          "risk_score": 21,
          "timestamp": "2023-11-09T12:53:23.178Z"
        },
        {
          "id": "0eca2a98fadcbc7999510183b748f16577d7b05b6069ff10e77155e1d3925b3b",
          "index": ".internal.alerts-security.alerts-default-000001",
          "description": "Alert from Rule: xx",
          "category": "category_1",
          "risk_score": 21,
          "timestamp": "2023-11-09T12:53:23.180Z"
        },
        {
          "id": "d7f6e72944e38cfc98d83df0ab2977edba2fac035e7ec70b6d4bf2708facba15",
          "index": ".internal.alerts-security.alerts-default-000001",
          "description": "Alert from Rule: xx",
          "category": "category_1",
          "risk_score": 21,
          "timestamp": "2023-11-09T12:53:23.182Z"
        },
        {
          "id": "16f5ebd5ecd7eea068be673a16cf556de4ccc87a52fdf50b114ad03d39541490",
          "index": ".internal.alerts-security.alerts-default-000001",
          "description": "Alert from Rule: xx",
          "category": "category_1",
          "risk_score": 21,
          "timestamp": "2023-11-09T12:53:23.183Z"
        },
        {
          "id": "473e81911fc05d3a0be951214273b787691ff34005ea4259dc493f0b5ff31e3c",
          "index": ".internal.alerts-security.alerts-default-000001",
          "description": "Alert from Rule: xx",
          "category": "category_1",
          "risk_score": 21,
          "timestamp": "2023-11-09T12:53:23.184Z"
        }
      ]
    }
  }
}
  1. Add alerts data
POST .alerts-security.alerts-default/_doc
{
  "@timestamp": "2023-11-10T12:56:37.699Z",
  "kibana": {
    "alert": {
      "workflow_status": "open"
    },
    "space_ids": "default"
  },
  "host": {
    "name": "Angelas-MacBook-Pro.local"
  },
  "user": {
    "name": "angela"
  }
}
  1. Visit Security Solution > Alerts page, and click a user.name from the alerts table
Screen.Recording.2023-11-10.at.17.02.34.mov
@angorayc angorayc added Team:Threat Hunting Security Solution Threat Hunting Team Team: SecuritySolution Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc. Team:Threat Hunting:Explore Feature:Lens Charts Security Solution Lens Charts feature labels Nov 2, 2023
@elasticmachine
Copy link
Contributor

Pinging @elastic/security-threat-hunting (Team:Threat Hunting)

@elasticmachine
Copy link
Contributor

Pinging @elastic/security-solution (Team: SecuritySolution)

@angorayc angorayc mentioned this issue Nov 2, 2023
Draft
9 tasks
@timductive timductive added bug Fixes for quality problems that affect the customer experience usability Team:Visualizations Visualization editors, elastic-charts and infrastructure labels Nov 2, 2023
@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-visualizations (Team:Visualizations)

@drewdaemon drewdaemon self-assigned this Nov 10, 2023
@drewdaemon
Copy link
Contributor

Just recording a few findings

Removing embeddable component loader

The loader in the embeddable component was added as part of a bug fix for #126558. I have verified that removing the loader (returning null as suggested above) does not reintroduce the bug:

Screen.Recording.2023-11-10.at.7.24.50.AM.mov

Style-matching

Making the loaders styles consistent is an improvement but there's still a brief pause between the embeddable panel loader and the expression renderer loader. Need to look into why.

I took this video with a throttled network and 4x CPU slowdown to highlight the transitions.

metric.trimmed.mov

@angorayc
Copy link
Contributor Author

Hi @drewdaemon ,

Thanks for looking into this. Making the loaders styles consistent is certainly a decent enhancement. It might still have a short pause in between, but looks a lot more smoother. 👍 👍 👍

@drewdaemon drewdaemon mentioned this issue Nov 14, 2023
Merged
1 task
@drewdaemon
Copy link
Contributor

I was able to remove the flicker by adding another loader to src/plugins/embeddable/public/embeddable_panel/embeddable_panel.tsx

no-flash.mov

drewdaemon added a commit that referenced this issue Nov 28, 2023
@drewdaemon @kibanamachine
Unify style for embeddable-stack loaders (#171238)
a864715 
## Summary

Fix #170428

The bug this is intended to resolve requires some in-depth steps to
reproduce. Follow the instructions in the issue above. Then, merge in
this branch and compare.


### Checklist

- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios

---------

Co-authored-by: kibanamachine <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@drewdaemon drewdaemon

@machadoum machadoum

@angorayc angorayc

Labels
bug Fixes for quality problems that affect the customer experience Feature:Lens Charts Security Solution Lens Charts feature Team: SecuritySolution Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc. Team:Threat Hunting:Explore Team:Threat Hunting Security Solution Threat Hunting Team Team:Visualizations Visualization editors, elastic-charts and infrastructure usability
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Unify style for embeddable-stack loaders drewdaemon/kibana
5 participants
@drewdaemon @timductive @machadoum @angorayc @elasticmachine