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.

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

Web browser high memory usage for Kibana Dashboard #7427

Closed
anhlqn opened this issue Jun 10, 2016 · 21 comments
Closed

Web browser high memory usage for Kibana Dashboard #7427

anhlqn opened this issue Jun 10, 2016 · 21 comments
Assignees
Labels
bug Fixes for quality problems that affect the customer experience Feature:Dashboard Dashboard related features Feature:Visualizations Generic visualization features (in case no more specific feature label is available)

Comments

@anhlqn
Copy link
Contributor

anhlqn commented Jun 10, 2016

Hi All,

I use nxlog to collect Windows performance stats and store them in Elasticsearch and have a dashboard with 14 visualizations to show all different stats over time such as ASP.NET requests, processor time, available memory, disk read/write, etc.

There are two sources of perfmon, A includes 5 servers and B includes 18 servers. Perfmon data are stored into two ES clusters on servers with lots of CPU, RAM, and SSD. The same Kibana dashboard (via export and import) for A and B are on separate Kibana instances.

My issue is when I use Google Chrome to view the dashboard

With perfmon dashboard for A (5 servers), the Chrome tab uses around 200MB of memory.
With perfmon dashboard for B (18 servers), the Chrome tab uses up to 1GB of memory and is usually very slow to unusable point.
When I try to open the perfmon dashboard for B in Firefox, Firefox will hang because of unresponsive script

Script: http://server:port/bundles/kibana.bundle.js?v=9689:3698

Error: [$rootScope:inprog] $digest already in progress
http://errors.angularjs.org/1.4.7/$rootScope/inprog?p0=%24digest (http://server:port/bundles/commons.bundle.js?v=9689:27679)

Version: 4.4.0
Build: 9689

Error: Error: [$rootScope:inprog] $digest already in progress
http://errors.angularjs.org/1.4.7/$rootScope/inprog?p0=%24digest (http://server:port/bundles/commons.bundle.js?v=9689:27679)
__WEBPACK_AMD_DEFINE_RESULT__</window.onerror@http://server:port/bundles/commons.bundle.js?v=9689:63832:25

Perfmon index is pretty small, weekly index is about 1 GB. The number of documents retrieved from ES is about 12K for last 1 hour.

I also have big indexes ranging from 10 to 100 GB daily indexes and Kibana dashboards for them work fine on the same Kibana instance that I have trouble viewing the perfmon dashboard.

I wonder if anyone knows possible causes or ways to find out the causes of the issue.

ES: 2.2.0
Kibaba: 4.4.0

All visualizations have similar settings

kibana visualization high memory chrome

I have about 13 visualizations in this dashboard

kibana dashboard high memory chrome

Looks like this also happens with Kibana 4.5.0 and ES 2.3.0 but not as bad as Kibana 4.4.0

@Bargs
Copy link
Contributor

Bargs commented Jun 13, 2016

hi @anhlqn, could you post this to our discussion forum (https://discuss.elastic.co/c/kibana)? We like to reserve Github issues for confirmed bugs and feature requests.

@Bargs Bargs closed this as completed Jun 13, 2016
@anhlqn
Copy link
Contributor Author

anhlqn commented Jun 14, 2016

Yeah, I originally posted in forum https://discuss.elastic.co/t/web-browser-high-memory-usage-for-kibana-dashboard/51992, but @tylersmalley asked me to create an issue here.

@Bargs
Copy link
Contributor

Bargs commented Jun 14, 2016

Ah sorry you're getting bounced around. In that case let's just handle it here. If you look at the size of the aggregation responses from Elasticsearch in your browser's devtools, how do they compare between the perfmon dashboard and the other dashboards that work fine? Also what date ranges are you using? How big is each individual document? While the other indices may have more data, the date range, the doc size, and the types of aggregations you're using can have a big impact on how much data is loaded.

@Bargs Bargs reopened this Jun 14, 2016
@anhlqn
Copy link
Contributor Author

anhlqn commented Jul 17, 2016

@Bargs and @epixa I think I've included all necessary info in my first post. A few more details

The dashboard is set to look at last 1 hour data which contains very few documents with stats as below

  • Query duration: 15ms
  • Request duration: 918ms
  • Hits: 4304

The dashboard includes 14 visualizations which use the same configuration as in first post (Date Histogram > Split Lines > Sub Aggregation Term

If I click the up arrow at the bottom of each visualization to hide the lines graphed, Chrome's memory usage will drop to normal, so I think that it's the line drawing part that consumes lots of memory and cause slowness to unusable point, which I am not sure if it's a server or client side problem (not a dev :( ). I have other dashboards with same number of visualization with same configuration, but the number of terms (or lines) to be visualized is under 10 for each. As soon as more than 10 terms/lines show up, things start to slow down and lag.

@Bargs
Copy link
Contributor

Bargs commented Jul 18, 2016

Are there any particularly large fields included in any of the visualizations?

@anhlqn
Copy link
Contributor Author

anhlqn commented Jul 19, 2016

No, they are just number fields

@Bargs
Copy link
Contributor

Bargs commented Jul 19, 2016

Ok, thanks for all the extra info @anhlqn. I think this one is going to take some time to investigate. Unfortunately I don't have many spare cycles at the moment, so I'll leave it in the queue so anyone can pick it up when they have some time.

@Bargs Bargs added bug Fixes for quality problems that affect the customer experience P3 labels Jul 19, 2016
@DigiAngel
Copy link

Legit...I see this as well with the beta:
2016-10-14 10_13_06-task manager

What other info can I provide? Thanks.

@coryk2049
Copy link

The reported problem here still exist in Kibana 4.6.1.

@tbragin tbragin added the Team:Operations Team label for Operations Team label Nov 9, 2016
@metametaclass
Copy link

It`s look like memory leak caused by jQuery data_priv.cache, which stores event handlers for DOM elements. When DOM elements deleted "behind" jQuery back such objects stay in cache forever.

All "circle" elements in line_chart.js contains events for tooltips, created in
https://github.com/elastic/kibana/blob/v5.0.0/src/ui/public/vislib/visualizations/line_chart.js#L173

After tooltip.destroy events are cleared by jQuery "off" call (https://github.com/elastic/kibana/blob/v5.0.0/src/ui/public/binder/binder.js#L19), but object stays in cache and cache grows infinitely. Line chart with lot of lines and "circle" elements causes memory to leak very rapidly.

As intermediate measure, memory leak can be alleviated by switching off checkbox "Show tooltip" in visualization view options. Other elements use much less memory.

Possible fix for memory leak - add call to jQuery "cleanData" to destroy method, https://github.com/elastic/kibana/blob/v5.0.0/src/ui/public/vislib/visualizations/_chart.js#L82

But in newer jQuery versions element event/user data storage moved from cache to element property (jquery/jquery@7b2f017) and it`s also supposed to solve problems like this.

@epixa epixa added Feature:Visualizations Generic visualization features (in case no more specific feature label is available) and removed Team:Operations Team label for Operations Team labels Dec 4, 2016
@epixa
Copy link
Contributor

epixa commented Dec 4, 2016

@metametaclass Thanks for the info!

@erikanderson
Copy link

erikanderson commented Jan 18, 2017

We are using the latest Kibana version 5.1.2. and when we run the dashboard overnight it crashes the Chrome tab (latest Chrome) so that it just shows a white screen. I will try to get more info and post it here

@imweijh
Copy link

imweijh commented Jan 25, 2017

+1 here
Dashboard autorefresh in Kibana version 5.1.2 crash chrome v55.2883.87
The dashboard is complicated. Don't know how to debug...

@AnkurThakur
Copy link

This is still an Open issue. We still face OOM in our Browser. After profiling it in Chrome, I agree with @metametaclass

Is there any plans to fix this issue in any upcoming versions?

@thomasneirynck
Copy link
Contributor

@AnkurThakur what version of Kibana are you using?

@AnkurThakur
Copy link

@thomasneirynck We are using 5.2.2 version of the stack here. It seems like this issue was there since a long time.

@mpereira
Copy link

mpereira commented Jul 12, 2017

Seems to be a bit better but it still happens on 5.3.2:

2017-07-12_11-41-31

@Sawyer612
Copy link

+1 for a solution within Kibana, we are seeing this issue as well, Kibana 5.5.0

We have several monitors on the NOC wall where Kibana dashboards run all day. They will crash if we don't setup an iFrame with an auto refresh of 2-4 hours depending on the dashboard. I have users that have seen this issue on their laptops that have even cause machine reboots. Thanks!

@stacey-gammon stacey-gammon added :Sharing Feature:Dashboard Dashboard related features labels Aug 9, 2017
@stacey-gammon
Copy link
Contributor

The tooltip leak is still an unresolved issue, but we may have found another memory leak which will hopefully help resolve this once fixed: #13458

@stacey-gammon
Copy link
Contributor

In order to keep these issues focused, I split out the tooltip one -#14058 . The other issue with a dashboard on auto refresh causing OOM errors after awhile should be fixed with #13458.

@stacey-gammon
Copy link
Contributor

stacey-gammon commented Sep 19, 2017

Closing this as it appears that the tooltip leak can't be reproduced, and the error handlers leak, on auto refreshed dashboards, is now fixed.

Please feel free to reopen this ticket, #14058, or open a new one if you are still seeing issues.

cee-chen added a commit that referenced this issue Jan 5, 2024
`v91.0.0-backport.0`⏩`v91.3.1`

⚠️ The largest set of changes in this PR that touch source code (as
opposed to test code) are related to several **EuiDataGrid** redesigns,
particularly around the toolbar, column cell headers, and cell actions.
We **strongly** recommend QAing your EuiDataGrid usages, **especially**
if you have custom CSS styling on data grid cells.

| Changes | Screencap |
|--------|--------|
| Cell actions and popover | <img
src="https://github.com/elastic/kibana/assets/549407/6462d983-307f-4a3c-84b1-36d9b276c9a0"
width="240" alt=""> |
| Column headers | <img
src="https://github.com/elastic/kibana/assets/549407/3fd64a15-829a-48f3-9dba-9dae3c73e6b2"
alt="" width="360"> |
| Toolbar | <img
src="https://github.com/elastic/kibana/assets/549407/f876f6d7-635d-497a-b1e7-9daf4e6fd3e3"
alt="" width="240"> |

---

## [`v91.3.1`](https://github.com/elastic/eui/releases/v91.3.1)

**Bug fixes**

- Moved `EuiDataGrid`'s header cells' `dataGridHeaderCellActionButton`
test subject attribute from to the clickable button, for easier E2E
testing ([#7427](elastic/eui#7427))
- Fixed `EuiBasicTable`/`EuiInMemoryTable` actions to correctly show as
disabled when rows are being selected
([#7428](elastic/eui#7428))

## [`v91.3.0`](https://github.com/elastic/eui/releases/v91.3.0)

- Added `esqlVis`, `pipeBreaks`, and `pipeNoBreaks` icon glyphs.
([#7399](elastic/eui#7399))
- Updated `EuiDataGridSchemaDetector`'s comparator arguments to include
entry indexes ([#7406](elastic/eui#7406))

## [`v91.2.0`](https://github.com/elastic/eui/releases/v91.2.0)

- Added `endpoint` glyph to `EuiIcon`
([#7383](elastic/eui#7383))

**Bug fixes**

- Fixed a bug with `EuiSelectable`s with custom `truncationProps`, where
scrollbar widths were not being accounted for
([#7392](elastic/eui#7392))

## [`v91.1.0`](https://github.com/elastic/eui/releases/tag/v91.1.0)

- Updated `EuiDataGrid` cell actions to display above cells instead of
within them, to avoid content clipping issues
([#7343](elastic/eui#7343))
- Updated `EuiDataGrid` cell expansion popovers to sit on top of cells
instead of below/next to them
([#7343](elastic/eui#7343))
- Updated `EuiListGroupItem` to render an external icon and screen
reader affordance for links with `target` set to to `_blank`
([#7352](elastic/eui#7352))
- Updated `EuiListGroupItem` with a new `external` prop, which allows
enabling or disabling the new external link icon
([#7352](elastic/eui#7352))
- Updated `EuiText` to no longer set any opinionated styles on child
`<img>` tags - use `EuiImage` for image display within text instead
([#7360](elastic/eui#7360))
- Improved `EuiBasicTable`/`EuiInMemoryTable`s mobile UI for custom
actions ([#7361](elastic/eui#7361))
- Added a new `EuiDataGridToolbarControl` subcomponent, which is useful
for rendering your own custom `EuiDataGrid` toolbar buttons while
matching the look of the default controls
([#7369](elastic/eui#7369))
- Updated `EuiDataGrid`'s toolbar controls to show active/current counts
in badges, and updated the Columns button icon
([#7369](elastic/eui#7369))
- Updated `EuiButtonEmpty` to allow passing `false` to `textProps`,
which allows rendering custom button content without an extra text
wrapper ([#7369](elastic/eui#7369))
- Updated `EuiDataGrid` column header cells to show the sort arrow after
the heading text, instead of before
([#7371](elastic/eui#7371))
- Updated `EuiDataGrid`'s column header actions icon from a chevron to
`boxesVertical` ([#7371](elastic/eui#7371))
- Updated the actions column in `EuiBasicTable` and `EuiInMemoryTable`s.
Alongside `name`, the `description`, `href`, and `data-test-subj`
properties now also accept an optional callback that the current `item`
will be passed to ([#7373](elastic/eui#7373))
- Updated `EuiContextMenuItem` with a new `toolTipProps` prop
([#7373](elastic/eui#7373))
- `EuiSelectable` now allows configurable text truncation via
`listProps.truncationProps`
([#7388](elastic/eui#7388))
- `EuiTextTruncate` now supports a new `calculationDelayMs` prop for
working around font loading or layout shifting scenarios
([#7388](elastic/eui#7388))

**Bug fixes**

- Fixed incorrect `EuiPopover` positioning calculations when `hasArrow`
was set to false ([#7343](elastic/eui#7343))
- Fixed `EuiSuperSelect` to render options with falsy values (false, 0,
and ''), but not nullish values (undefined or null)
([#7362](elastic/eui#7362))
- Fixed `EuiSuperSelect`'s typing to allow non-string values (e.g.,
booleans or numbers) ([#7362](elastic/eui#7362))
- Fixed `EuiDataGrid`'s numeric and currency column heading cells to be
correctly right-aligned
([#7371](elastic/eui#7371))
- Fixed `EuiBasicTable` and `EuiInMemoryTable` actions not showing
tooltip descriptions when rendered in the all actions popover menu
([#7373](elastic/eui#7373))
- Fixed missing underlines on `EuiContextMenu` link hover
([#7373](elastic/eui#7373))
- Fixed visual text truncation of `EuiBreadcrumb`s with `popoverContent`
([#7375](elastic/eui#7375))
- Fixed `EuiFormRow`s with `hasEmptyLabelSpace` being very slightly off
in vertical alignment
([#7380](elastic/eui#7380))

**Deprecations**

- Deprecated `EuiContextMenuItem`'s `toolTipTitle` prop. Use
`toolTipProps.title` instead
([#7373](elastic/eui#7373))
- Deprecated `EuiContextMenuItem`'s `toolTipPosition` prop. Use
`toolTipProps.position` instead
([#7373](elastic/eui#7373))

**Accessibility**

- Fixed custom `EuiBasicTable`/`EuiInMemoryTable` rendering nested
interactive custom actions
([#7361](elastic/eui#7361))
- Fixed `EuiBasicTable` and `EuiInMemoryTable` actions not correctly
reading out action descriptions to screen readers
([#7373](elastic/eui#7373))
- Fixed `EuiBasicTable` and `EuiInMemoryTable` primary actions not
visibly appearing on keyboard focus
([#7373](elastic/eui#7373))

---------

Co-authored-by: Julia Rechkunova <julia.rechkunova@elastic.co>
delanni pushed a commit to delanni/kibana that referenced this issue Jan 11, 2024
`v91.0.0-backport.0`⏩`v91.3.1`

⚠️ The largest set of changes in this PR that touch source code (as
opposed to test code) are related to several **EuiDataGrid** redesigns,
particularly around the toolbar, column cell headers, and cell actions.
We **strongly** recommend QAing your EuiDataGrid usages, **especially**
if you have custom CSS styling on data grid cells.

| Changes | Screencap |
|--------|--------|
| Cell actions and popover | <img
src="https://github.com/elastic/kibana/assets/549407/6462d983-307f-4a3c-84b1-36d9b276c9a0"
width="240" alt=""> |
| Column headers | <img
src="https://github.com/elastic/kibana/assets/549407/3fd64a15-829a-48f3-9dba-9dae3c73e6b2"
alt="" width="360"> |
| Toolbar | <img
src="https://github.com/elastic/kibana/assets/549407/f876f6d7-635d-497a-b1e7-9daf4e6fd3e3"
alt="" width="240"> |

---

## [`v91.3.1`](https://github.com/elastic/eui/releases/v91.3.1)

**Bug fixes**

- Moved `EuiDataGrid`'s header cells' `dataGridHeaderCellActionButton`
test subject attribute from to the clickable button, for easier E2E
testing ([elastic#7427](elastic/eui#7427))
- Fixed `EuiBasicTable`/`EuiInMemoryTable` actions to correctly show as
disabled when rows are being selected
([elastic#7428](elastic/eui#7428))

## [`v91.3.0`](https://github.com/elastic/eui/releases/v91.3.0)

- Added `esqlVis`, `pipeBreaks`, and `pipeNoBreaks` icon glyphs.
([elastic#7399](elastic/eui#7399))
- Updated `EuiDataGridSchemaDetector`'s comparator arguments to include
entry indexes ([elastic#7406](elastic/eui#7406))

## [`v91.2.0`](https://github.com/elastic/eui/releases/v91.2.0)

- Added `endpoint` glyph to `EuiIcon`
([elastic#7383](elastic/eui#7383))

**Bug fixes**

- Fixed a bug with `EuiSelectable`s with custom `truncationProps`, where
scrollbar widths were not being accounted for
([elastic#7392](elastic/eui#7392))

## [`v91.1.0`](https://github.com/elastic/eui/releases/tag/v91.1.0)

- Updated `EuiDataGrid` cell actions to display above cells instead of
within them, to avoid content clipping issues
([elastic#7343](elastic/eui#7343))
- Updated `EuiDataGrid` cell expansion popovers to sit on top of cells
instead of below/next to them
([elastic#7343](elastic/eui#7343))
- Updated `EuiListGroupItem` to render an external icon and screen
reader affordance for links with `target` set to to `_blank`
([elastic#7352](elastic/eui#7352))
- Updated `EuiListGroupItem` with a new `external` prop, which allows
enabling or disabling the new external link icon
([elastic#7352](elastic/eui#7352))
- Updated `EuiText` to no longer set any opinionated styles on child
`<img>` tags - use `EuiImage` for image display within text instead
([elastic#7360](elastic/eui#7360))
- Improved `EuiBasicTable`/`EuiInMemoryTable`s mobile UI for custom
actions ([elastic#7361](elastic/eui#7361))
- Added a new `EuiDataGridToolbarControl` subcomponent, which is useful
for rendering your own custom `EuiDataGrid` toolbar buttons while
matching the look of the default controls
([elastic#7369](elastic/eui#7369))
- Updated `EuiDataGrid`'s toolbar controls to show active/current counts
in badges, and updated the Columns button icon
([elastic#7369](elastic/eui#7369))
- Updated `EuiButtonEmpty` to allow passing `false` to `textProps`,
which allows rendering custom button content without an extra text
wrapper ([elastic#7369](elastic/eui#7369))
- Updated `EuiDataGrid` column header cells to show the sort arrow after
the heading text, instead of before
([elastic#7371](elastic/eui#7371))
- Updated `EuiDataGrid`'s column header actions icon from a chevron to
`boxesVertical` ([elastic#7371](elastic/eui#7371))
- Updated the actions column in `EuiBasicTable` and `EuiInMemoryTable`s.
Alongside `name`, the `description`, `href`, and `data-test-subj`
properties now also accept an optional callback that the current `item`
will be passed to ([elastic#7373](elastic/eui#7373))
- Updated `EuiContextMenuItem` with a new `toolTipProps` prop
([elastic#7373](elastic/eui#7373))
- `EuiSelectable` now allows configurable text truncation via
`listProps.truncationProps`
([elastic#7388](elastic/eui#7388))
- `EuiTextTruncate` now supports a new `calculationDelayMs` prop for
working around font loading or layout shifting scenarios
([elastic#7388](elastic/eui#7388))

**Bug fixes**

- Fixed incorrect `EuiPopover` positioning calculations when `hasArrow`
was set to false ([elastic#7343](elastic/eui#7343))
- Fixed `EuiSuperSelect` to render options with falsy values (false, 0,
and ''), but not nullish values (undefined or null)
([elastic#7362](elastic/eui#7362))
- Fixed `EuiSuperSelect`'s typing to allow non-string values (e.g.,
booleans or numbers) ([elastic#7362](elastic/eui#7362))
- Fixed `EuiDataGrid`'s numeric and currency column heading cells to be
correctly right-aligned
([elastic#7371](elastic/eui#7371))
- Fixed `EuiBasicTable` and `EuiInMemoryTable` actions not showing
tooltip descriptions when rendered in the all actions popover menu
([elastic#7373](elastic/eui#7373))
- Fixed missing underlines on `EuiContextMenu` link hover
([elastic#7373](elastic/eui#7373))
- Fixed visual text truncation of `EuiBreadcrumb`s with `popoverContent`
([elastic#7375](elastic/eui#7375))
- Fixed `EuiFormRow`s with `hasEmptyLabelSpace` being very slightly off
in vertical alignment
([elastic#7380](elastic/eui#7380))

**Deprecations**

- Deprecated `EuiContextMenuItem`'s `toolTipTitle` prop. Use
`toolTipProps.title` instead
([elastic#7373](elastic/eui#7373))
- Deprecated `EuiContextMenuItem`'s `toolTipPosition` prop. Use
`toolTipProps.position` instead
([elastic#7373](elastic/eui#7373))

**Accessibility**

- Fixed custom `EuiBasicTable`/`EuiInMemoryTable` rendering nested
interactive custom actions
([elastic#7361](elastic/eui#7361))
- Fixed `EuiBasicTable` and `EuiInMemoryTable` actions not correctly
reading out action descriptions to screen readers
([elastic#7373](elastic/eui#7373))
- Fixed `EuiBasicTable` and `EuiInMemoryTable` primary actions not
visibly appearing on keyboard focus
([elastic#7373](elastic/eui#7373))

---------

Co-authored-by: Julia Rechkunova <julia.rechkunova@elastic.co>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Fixes for quality problems that affect the customer experience Feature:Dashboard Dashboard related features Feature:Visualizations Generic visualization features (in case no more specific feature label is available)
Projects
None yet
Development

No branches or pull requests