`render-counter` directive by spalger · Pull Request #9206 · elastic/kibana

spalger · 2016-11-23T19:00:31Z

Implements a render-counter directive that listens for renderComplete events on it's element and tracks the number of events it sees.

This directive is attached to elements where we want to capture the render count, including the <doc-table> and <visualize> directives in discover and visualize.

If the render counter should be disabled, access it's controller and call it's disabled method like the <visualize> directive does.

spalger · 2016-11-23T19:43:27Z

jenkins, test this

kobelb · 2016-11-23T19:47:14Z

LGTM

w33ble · 2016-11-23T20:47:41Z

src/ui/public/doc_table/doc_table.js

+      $el.attr('has-render-count', 'true');
+      $el.attr('render-count', '0');
+      $el.on('renderComplete', () => {
+        $el.attr('render-count', parseInt($el.attr('render-count'), 10) + 1);


maybe a dumb micro-optimization, but reading this off the DOM every time isn't free. Why not store the value in the directive?

w33ble · 2016-11-23T21:34:47Z

@spalger ~~doesn't the doc-table directive also need the renderCounter.disable() step like visualize does?~~ nevermind, I see what's going on here now.

w33ble · 2016-11-23T21:47:11Z

LGTM!

kobelb

LGTM

kobelb · 2016-11-23T21:34:20Z

src/ui/public/doc_table/doc_table.js

      filter: '=?',
    },
-    link: function ($scope) {
+    link: function ($scope, $el) {


$el isn't needed anymore

Backports PR #9206 **Commit 1:** [docTable/row] delay first render until watchers initialize * Original sha: 4945e08 * Authored by spalger <email@spalger.com> on 2016-11-23T18:57:22Z **Commit 2:** [docTable/row] emit a renderComplete event, count in table directive * Original sha: 641f9af * Authored by spalger <email@spalger.com> on 2016-11-23T18:58:21Z **Commit 3:** [renderCounter] unify render counting login into directive * Original sha: 0c084ac * Authored by spalger <email@spalger.com> on 2016-11-23T21:26:44Z **Commit 4:** [docTable] remove unused var * Original sha: 275bf70 * Authored by spalger <email@spalger.com> on 2016-11-23T22:00:52Z

Backports PR elastic#9206 **Commit 1:** [docTable/row] delay first render until watchers initialize * Original sha: 4945e08 * Authored by spalger <email@spalger.com> on 2016-11-23T18:57:22Z **Commit 2:** [docTable/row] emit a renderComplete event, count in table directive * Original sha: 641f9af * Authored by spalger <email@spalger.com> on 2016-11-23T18:58:21Z **Commit 3:** [renderCounter] unify render counting login into directive * Original sha: 0c084ac * Authored by spalger <email@spalger.com> on 2016-11-23T21:26:44Z **Commit 4:** [docTable] remove unused var * Original sha: 275bf70 * Authored by spalger <email@spalger.com> on 2016-11-23T22:00:52Z Former-commit-id: 4617e09

- `@elastic/eui`: `v109.0.0` ⏩ `v109.1.0` - `@elastic/eslint-plugin-eui`: `v2.5.0` ⏩ `v2.6.0` --- ## Changes - Updated i18n EUI mapping 6cc95b0 - Updated test in Unified Search 668948f ## Package updates ### `@elastic/eui` [`v109.1.0`](https://github.com/elastic/eui/releases/v109.1.0) - Added `--euiBottomBarOffset` CSS variable to `EuiBottomBar` for positioning other fixed elements relative to the bottom bar's height ([#9211](elastic/eui#9211)) - Updated `boxesVertical` icon and restored `checkInCircleFilled`, `errorFilled`, and `warningFilled` icons. ([#9194](elastic/eui#9194)) - Updated `EuiSuperDatePicker` with new time zone information, opt-in via `timeZoneDisplayProps`. ([#9191](elastic/eui#9191)) - Updated the position of `EuiModal` by removing bottom padding in `EuiOverlayMask` ([#9190](elastic/eui#9190)) - Added `EuiPopover` and `EuiToolTip`'s `repositionOnScroll` to `componentDefaults` ([#9152](elastic/eui#9152)) - Updated `EuiSuperDatePicker` with new time window buttons for time shifting and zoom out, opt-in via `showTimeWindowButtons` boolean prop. ([#9151](elastic/eui#9151)) - Added beta prop `hasAriaDisabled` to all base button components: `EuiButton`, `EuiButtonEmpty`, `EuiButtonIcon`, `EuibuttonGroup`, `EuiFilterButton` ([#9201](elastic/eui#9201)) - Added `euiDisabledSelector` variable that combines CSS selectors `:disabled` and `[aria-disabled="true"]` ([#9201](elastic/eui#9201)) - Added custom test matchers that check for both `disabled` and `aria-disabled` attributes: ([#9201](elastic/eui#9201)) - React testing Library: `.toBeEuiDisabled()` - Enzyme: `.toHaveEuiDisabledProp()` - Cypress: `should('be.euiDisabled)` **Bug fixes** - Fixed unexpected duplicate columns in `EuiDataGrid` crashing the column sorting by removing duplicate columns entirely ([#9209](elastic/eui#9209)) - Fixed a visual bug in `EuiTable` where long table row content would be cut off on mobile screens ([#9206](elastic/eui#9206)) - Fixed virtualized `EuiCodeBlock` rendering blank lines when content updates if scrolled. ([#9196](elastic/eui#9196)) - Fixed `EuiButtonGroup` button sizing to ensure square buttons when used with `isIconOnly=true` ([#9170](elastic/eui#9170)) **Accessibility** - Fixed an issue where portalled components like `EuiPopover` were not included in `EuiFlyout`'s focus trap through `includeSelectorInFocusTrap`, making them inaccessible to keyboard users ([#9103](elastic/eui#9103)) ### `@elastic/eslint-plugin-eui` [`v2.6.0`](https://github.com/elastic/eui/blob/main/packages/eslint-plugin/changelogs/CHANGELOG_2025.md#v260) - Added new `require-table-caption` rule. ([#9168](elastic/eui#9168)) --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

- `@elastic/eui`: `v109.0.0` ⏩ `v109.1.0` - `@elastic/eslint-plugin-eui`: `v2.5.0` ⏩ `v2.6.0` --- ## Changes - Updated i18n EUI mapping 6cc95b0 - Updated test in Unified Search 668948f ## Package updates ### `@elastic/eui` [`v109.1.0`](https://github.com/elastic/eui/releases/v109.1.0) - Added `--euiBottomBarOffset` CSS variable to `EuiBottomBar` for positioning other fixed elements relative to the bottom bar's height ([elastic#9211](elastic/eui#9211)) - Updated `boxesVertical` icon and restored `checkInCircleFilled`, `errorFilled`, and `warningFilled` icons. ([elastic#9194](elastic/eui#9194)) - Updated `EuiSuperDatePicker` with new time zone information, opt-in via `timeZoneDisplayProps`. ([elastic#9191](elastic/eui#9191)) - Updated the position of `EuiModal` by removing bottom padding in `EuiOverlayMask` ([elastic#9190](elastic/eui#9190)) - Added `EuiPopover` and `EuiToolTip`'s `repositionOnScroll` to `componentDefaults` ([elastic#9152](elastic/eui#9152)) - Updated `EuiSuperDatePicker` with new time window buttons for time shifting and zoom out, opt-in via `showTimeWindowButtons` boolean prop. ([elastic#9151](elastic/eui#9151)) - Added beta prop `hasAriaDisabled` to all base button components: `EuiButton`, `EuiButtonEmpty`, `EuiButtonIcon`, `EuibuttonGroup`, `EuiFilterButton` ([elastic#9201](elastic/eui#9201)) - Added `euiDisabledSelector` variable that combines CSS selectors `:disabled` and `[aria-disabled="true"]` ([elastic#9201](elastic/eui#9201)) - Added custom test matchers that check for both `disabled` and `aria-disabled` attributes: ([elastic#9201](elastic/eui#9201)) - React testing Library: `.toBeEuiDisabled()` - Enzyme: `.toHaveEuiDisabledProp()` - Cypress: `should('be.euiDisabled)` **Bug fixes** - Fixed unexpected duplicate columns in `EuiDataGrid` crashing the column sorting by removing duplicate columns entirely ([elastic#9209](elastic/eui#9209)) - Fixed a visual bug in `EuiTable` where long table row content would be cut off on mobile screens ([elastic#9206](elastic/eui#9206)) - Fixed virtualized `EuiCodeBlock` rendering blank lines when content updates if scrolled. ([elastic#9196](elastic/eui#9196)) - Fixed `EuiButtonGroup` button sizing to ensure square buttons when used with `isIconOnly=true` ([elastic#9170](elastic/eui#9170)) **Accessibility** - Fixed an issue where portalled components like `EuiPopover` were not included in `EuiFlyout`'s focus trap through `includeSelectorInFocusTrap`, making them inaccessible to keyboard users ([elastic#9103](elastic/eui#9103)) ### `@elastic/eslint-plugin-eui` [`v2.6.0`](https://github.com/elastic/eui/blob/main/packages/eslint-plugin/changelogs/CHANGELOG_2025.md#v260) - Added new `require-table-caption` rule. ([elastic#9168](elastic/eui#9168)) --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

spalger added review v5.1.0 v6.0.0 labels Nov 23, 2016

spalger assigned w33ble and kobelb Nov 23, 2016

spalger added 2 commits November 23, 2016 12:01

[docTable/row] delay first render until watchers initialize

4945e08

[docTable/row] emit a renderComplete event, count in table directive

641f9af

spalger force-pushed the implement/doc-table-render-count branch from de75deb to 641f9af Compare November 23, 2016 19:01

w33ble reviewed Nov 23, 2016

View reviewed changes

[renderCounter] unify render counting login into directive

0c084ac

spalger changed the title ~~[docTable] Implement render count~~ render-counter directive Nov 23, 2016

kobelb reviewed Nov 23, 2016

View reviewed changes

[docTable] remove unused var

275bf70

spalger merged commit 9527a8f into elastic:master Nov 23, 2016

This was referenced Nov 23, 2016

[5.1] render-counter directive #9210

Merged

[5.x] render-counter directive #9211

Merged

spalger added the v5.2.0 label Nov 23, 2016

spalger deleted the implement/doc-table-render-count branch November 23, 2016 22:09

spalger restored the implement/doc-table-render-count branch November 27, 2016 09:57

ppisljar added the backported label Dec 2, 2016

epixa added v5.1.1 and removed v5.1.1 labels Dec 8, 2016

epixa removed the v5.1.0 label Dec 8, 2016

spalger deleted the implement/doc-table-render-count branch August 18, 2020 17:54

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

`render-counter` directive#9206

`render-counter` directive#9206
spalger merged 4 commits intoelastic:masterfrom
spalger:implement/doc-table-render-count

spalger commented Nov 23, 2016 •

edited

Loading

Uh oh!

spalger commented Nov 23, 2016

Uh oh!

kobelb commented Nov 23, 2016

Uh oh!

w33ble Nov 23, 2016 •

edited

Loading

Uh oh!

spalger Nov 23, 2016

Uh oh!

w33ble commented Nov 23, 2016 •

edited

Loading

Uh oh!

w33ble commented Nov 23, 2016

Uh oh!

kobelb left a comment •

edited

Loading

Uh oh!

kobelb Nov 23, 2016

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Conversation

spalger commented Nov 23, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

spalger commented Nov 23, 2016

Uh oh!

kobelb commented Nov 23, 2016

Uh oh!

w33ble Nov 23, 2016 • 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!

spalger Nov 23, 2016

Choose a reason for hiding this comment

Uh oh!

w33ble commented Nov 23, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

w33ble commented Nov 23, 2016

Uh oh!

kobelb 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!

kobelb Nov 23, 2016

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

spalger commented Nov 23, 2016 •

edited

Loading

w33ble Nov 23, 2016 •

edited

Loading

w33ble commented Nov 23, 2016 •

edited

Loading

kobelb left a comment •

edited

Loading