[Uptime] Waterfall filters #89185

shahzad31 · 2021-01-25T18:03:40Z

Summary

WaterFall filters

…fall-filters

paulb-elastic · 2021-02-05T10:06:01Z

@dominiqueclarke / @shahzad31 there is a problem where the filter disappears if the “collapse” option is selected and there are no matches (either in the search, or selecting a MIME type that doesn’t have any corresponding requests). When this happens, there is no way of getting the filter back, to update it (have to refresh the browser).

justinkambic

Had a few comments but this is looking great, and I really enjoy using the filters. Really nice addition. 👍

justinkambic · 2021-02-05T16:33:27Z

...k/plugins/uptime/public/components/monitor/synthetics/waterfall/components/use_bar_charts.ts

@@ -19,17 +19,27 @@ export const useBarCharts = ({ data = [] }: UseBarHookProps) => {
  useEffect(() => {
    if (data.length > 0) {
      let chartIndex = 0;
+      /* We want at most CANVAS_MAX_ITEMS **RESOURCES** per array.


...k/plugins/uptime/public/components/monitor/synthetics/waterfall/components/use_bar_charts.ts

justinkambic · 2021-02-05T16:42:48Z

...ins/uptime/public/components/monitor/synthetics/waterfall/components/use_bar_charts.test.tsx

@@ -70,4 +75,35 @@ describe('useBarChartsHooks', () => {
    expect(lastChartItems[0].x).toBe(CANVAS_MAX_ITEMS * 4);
    expect(lastChartItems[lastChartItems.length - 1].x).toBe(CANVAS_MAX_ITEMS * 5 - 1);
  });
+
+  it('returns result as expected for filtered data', () => {
+    /* multiply x values to simulate filtered data, where x values can have gaps in the


justinkambic · 2021-02-05T16:44:44Z

.../uptime/public/components/monitor/synthetics/waterfall/components/network_requests_total.tsx

+        })}{' '}
+        {showHighlightedNetworkRequests &&
+          highlightedNetworkRequests >= 0 &&
+          `(${i18n.translate('xpack.uptime.synthetics.waterfall.requestsHighlightedMessage', {


Can we switch this to use <FormattedMessage />? This seems super un-readable by comparison.

justinkambic · 2021-02-05T16:49:00Z

...uptime/public/components/monitor/synthetics/step_detail/waterfall/waterfall_sidebar_item.tsx

+    return is400 || is500 || isSpecific300;
+  };
+
+  const isHighlighted = item.isHighlighted;


We can probably either skip this declaration and directly reference item.isHighlighted, or destructure it from item.

Suggested change

const isHighlighted = item.isHighlighted;

const { isHighlighted } = item;

justinkambic · 2021-02-05T16:50:12Z

...ugins/uptime/public/components/monitor/synthetics/step_detail/waterfall/waterfall_filter.tsx

+            compressed={true}
+            disabled={!(query || activeFilters.length > 0)}
+            id="onlyHighlighted"
+            label="Collapse to only show matching requests"


Requires translation.

justinkambic · 2021-02-05T16:59:46Z

.../uptime/public/components/monitor/synthetics/step_detail/waterfall/waterfall_filter.test.tsx

+
+    // inout has debounce effect so hence the timer
+    act(() => {
+      jest.advanceTimersByTime(300);


justinkambic · 2021-02-05T17:04:19Z

.../public/components/monitor/synthetics/step_detail/waterfall/waterfall_chart_wrapper.test.tsx

+
+    const searchText = '.js';
+
+    act(() => {


Did you want to modify this?

justinkambic · 2021-02-05T17:05:25Z

...ugins/uptime/public/components/monitor/synthetics/step_detail/waterfall/waterfall_filter.tsx

+
+export const MIME_FILTERS = [
+  {
+    label: 'XHR',


I'm thinking it's best to err on the side of caution and translate these labels. We have XHR translated further up in this diff already, so it'd also be consistent.

…fall-filters

dominiqueclarke · 2021-02-08T02:00:43Z

@dominiqueclarke / @shahzad31 there is a problem where the filter disappears if the “collapse” option is selected and there are no matches (either in the search, or selecting a MIME type that doesn’t have any corresponding requests). When this happens, there is no way of getting the filter back, to update it (have to refresh the browser).

@paulb-elastic This happened when 0 items matched the filter. This has been resolved. Please note, this is the new, current UI when there are 0 resources that match the filter.

Notice that the grid lines from the legend do not move reach the bottom. This is because we are no longer rendering a canvas for a waterfall chart, since there are no valid matching resources. We render the legend separately for UI flexibility. Please note that ensuring that the gridlines reach the bottom of the page may be possible (haven't investigated as of yet) but would take more time for investigation and essentially faking a waterfall canvas chart without any data.

dominiqueclarke · 2021-02-08T05:31:43Z

@elasticmachine merge upstream

paulb-elastic · 2021-02-08T10:30:41Z

Thanks @dominiqueclarke, the empty filter result works much better now (doesn’t disappear).

Thanks also for highlighting about the gridlines. I think that’s ok for now (especially as there are still open questions about keeping the collapse view longer term). Plus it's consistent with how we only show the gridlines where there are network requests, filter or not, such as this example where there are not many network requests:

shahzad31 · 2021-02-08T11:36:30Z

@elasticmachine merge upstream

kibanamachine · 2021-02-08T13:43:38Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 7cc75d3

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`uptime`	581	589	+8

Async chunks

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

id	before	after	diff
`uptime`	895.8KB	908.6KB	+12.8KB

Page load bundle

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

id	before	after	diff
`observability`	36.8KB	37.1KB	+239.0B
`uptime`	19.3KB	19.4KB	+65.0B
total			+304.0B

History

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

justinkambic

LGTM - really great enhancement @dominiqueclarke @shahzad31

* WIP * Use multi canvas solution * type * fix test * adde unit tests * reduce item to 150 * update margins * use constant * update z-index * added key * wip * wip * wip filters * reorgnaise components * fix issue * update filter * only highlight button * water fall test * styling * fix styling * test * fix types * update test * update ari hidden * added click telemetry for waterfall filters * added input click telemetry * update filter behaviour * fixed typo * fix type * fix styling * persist original resource number in waterfall sidebar when showing only highlighted resources * update waterfall filter collapse checkbox content * update use_bar_charts to work with filtered data * update network request total label to include filtered requests * adjust telemetry * add accessible text * add waterfall chart view telemetry * updated mime type filter label translations * adjust total network requests to use FormattedMessage * adjust translations and tests * use FormattedMessage in NetworkRequestsTotal * ensure sidebar persists when 0 resources match filter * use destructuring in waterfall sidebar item * reset collapse requests checkbox when filters are removed * update license headers Co-authored-by: Dominique Clarke <dominique.clarke@elastic.co> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

kibanamachine · 2021-02-10T15:50:55Z

Backport result

{"level":"info","message":"POST https://api.github.com/graphql (status: 200)"}
{"level":"info","message":"POST https://api.github.com/graphql (status: 200)"}
{"meta":{"labels":["Team:uptime","auto-backport","release_note:enhancement","v7.12.0","v8.0.0"],"branchLabelMapping":{"^v8.0.0$":"master","^v7.12.0$":"7.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"},"existingTargetPullRequests":[]},"level":"info","message":"Inputs when calculating target branches:"}
{"meta":["7.x"],"level":"info","message":"Target branches inferred from labels:"}
{"meta":{"killed":false,"code":2,"signal":null,"cmd":"git remote rm kibanamachine","stdout":"","stderr":"error: No such remote: 'kibanamachine'\n"},"level":"info","message":"exec error 'git remote rm kibanamachine':"}
{"meta":{"killed":false,"code":2,"signal":null,"cmd":"git remote rm elastic","stdout":"","stderr":"error: No such remote: 'elastic'\n"},"level":"info","message":"exec error 'git remote rm elastic':"}
{"level":"info","message":"Backporting [{\"sourceBranch\":\"master\",\"targetBranchesFromLabels\":[\"7.x\"],\"sha\":\"a1a2536b5bb624d9dce989389319d7d527377d79\",\"formattedMessage\":\"[Uptime] Waterfall filters (#89185)\",\"originalMessage\":\"[Uptime] Waterfall filters (#89185)\\n\\n* WIP\\r\\n\\r\\n* Use multi canvas solution\\r\\n\\r\\n* type\\r\\n\\r\\n* fix test\\r\\n\\r\\n* adde unit tests\\r\\n\\r\\n* reduce item to 150\\r\\n\\r\\n* update margins\\r\\n\\r\\n* use constant\\r\\n\\r\\n* update z-index\\r\\n\\r\\n* added key\\r\\n\\r\\n* wip\\r\\n\\r\\n* wip\\r\\n\\r\\n* wip filters\\r\\n\\r\\n* reorgnaise components\\r\\n\\r\\n* fix issue\\r\\n\\r\\n* update filter\\r\\n\\r\\n* only highlight button\\r\\n\\r\\n* water fall test\\r\\n\\r\\n* styling\\r\\n\\r\\n* fix styling\\r\\n\\r\\n* test\\r\\n\\r\\n* fix types\\r\\n\\r\\n* update test\\r\\n\\r\\n* update ari hidden\\r\\n\\r\\n* added click telemetry for waterfall filters\\r\\n\\r\\n* added input click telemetry\\r\\n\\r\\n* update filter behaviour\\r\\n\\r\\n* fixed typo\\r\\n\\r\\n* fix type\\r\\n\\r\\n* fix styling\\r\\n\\r\\n* persist original resource number in waterfall sidebar when showing only highlighted resources\\r\\n\\r\\n* update waterfall filter collapse checkbox content\\r\\n\\r\\n* update use_bar_charts to work with filtered data\\r\\n\\r\\n* update network request total label to include filtered requests\\r\\n\\r\\n* adjust telemetry\\r\\n\\r\\n* add accessible text\\r\\n\\r\\n* add waterfall chart view telemetry\\r\\n\\r\\n* updated mime type filter label translations\\r\\n\\r\\n* adjust total network requests to use FormattedMessage\\r\\n\\r\\n* adjust translations and tests\\r\\n\\r\\n* use FormattedMessage in NetworkRequestsTotal\\r\\n\\r\\n* ensure sidebar persists when 0 resources match filter\\r\\n\\r\\n* use destructuring in waterfall sidebar item\\r\\n\\r\\n* reset collapse requests checkbox when filters are removed\\r\\n\\r\\n* update license headers\\r\\n\\r\\nCo-authored-by: Dominique Clarke <dominique.clarke@elastic.co>\\r\\nCo-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>\",\"pullNumber\":89185,\"existingTargetPullRequests\":[]}] to 7.x"}

Backporting to 7.x:
{"level":"info","message":"Backporting via filesystem"}
{"level":"info","message":"Creating PR with title: \"[7.x] [Uptime] Waterfall filters (#89185)\". kibanamachine:backport/7.x/pr-89185 -> 7.x"}
{"level":"info","message":"POST /repos/elastic/kibana/pulls - 201 in 1097ms"}
{"level":"info","message":"Adding assignees to #90967: shahzad31"}
{"level":"info","message":"POST /repos/elastic/kibana/issues/90967/assignees - 201 in 548ms"}
{"level":"info","message":"Adding labels: backport"}
{"level":"info","message":"POST /repos/elastic/kibana/issues/90967/labels - 200 in 458ms"}
View pull request: https://github.com/elastic/kibana/pull/90967

* WIP * Use multi canvas solution * type * fix test * adde unit tests * reduce item to 150 * update margins * use constant * update z-index * added key * wip * wip * wip filters * reorgnaise components * fix issue * update filter * only highlight button * water fall test * styling * fix styling * test * fix types * update test * update ari hidden * added click telemetry for waterfall filters * added input click telemetry * update filter behaviour * fixed typo * fix type * fix styling * persist original resource number in waterfall sidebar when showing only highlighted resources * update waterfall filter collapse checkbox content * update use_bar_charts to work with filtered data * update network request total label to include filtered requests * adjust telemetry * add accessible text * add waterfall chart view telemetry * updated mime type filter label translations * adjust total network requests to use FormattedMessage * adjust translations and tests * use FormattedMessage in NetworkRequestsTotal * ensure sidebar persists when 0 resources match filter * use destructuring in waterfall sidebar item * reset collapse requests checkbox when filters are removed * update license headers Co-authored-by: Dominique Clarke <dominique.clarke@elastic.co> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Shahzad <shahzad.muhammad@elastic.co> Co-authored-by: Dominique Clarke <dominique.clarke@elastic.co>

shahzad31 added 30 commits January 11, 2021 21:19

WIP

534678a

Use multi canvas solution

20b7e5d

type

aa285ff

fix test

5fd0e8b

adde unit tests

8f374d1

Merge branch 'master' into water-fall-issue

9fa4144

reduce item to 150

b131bf2

update margins

88239d8

Merge branch 'master' into water-fall-issue

2612eff

use constant

4240857

update z-index

d78aa80

added key

add7043

Merge branch 'master' into waterfall-filters

2b43683

Merge branch 'water-fall-issue' into waterfall-filters

2c1a4d9

Merge branch 'master' into waterfall-filters

45e9eb5

Merge branch 'master' into waterfall-filters

fb93fd4

wip

d575247

wip

c0b3c14

Merge branch 'master' into waterfall-filters

6e02e08

wip filters

92be91d

Merge branch 'master' into waterfall-filters

dbea8f5

reorgnaise components

00909e5

Merge branch 'master' into waterfall-filters

038500e

fix issue

f028695

update filter

a765b17

Merge branch 'master' into waterfall-filters

ab8521f

only highlight button

18b1a9a

water fall test

21d1908

styling

bd72555

Merge branch 'master' into waterfall-filters

fd7dfdc

add accessible text

063d875

dominiqueclarke force-pushed the waterfall-filters branch from 46242f6 to 063d875 Compare February 4, 2021 17:57

Merge branch 'master' of github.com:elastic/kibana into shahzad/water…

6073bef

…fall-filters

add waterfall chart view telemetry

f94cf5b

justinkambic reviewed Feb 5, 2021

View reviewed changes

dominiqueclarke added 6 commits February 7, 2021 17:03

updated mime type filter label translations

7c60849

adjust total network requests to use FormattedMessage

d0032db

adjust translations and tests

e2a5204

use FormattedMessage in NetworkRequestsTotal

2b39750

Merge branch 'master' of github.com:elastic/kibana into shahzad/water…

f15494c

…fall-filters

ensure sidebar persists when 0 resources match filter

895a8d1

dominiqueclarke added 2 commits February 7, 2021 21:12

use destructuring in waterfall sidebar item

898ebae

reset collapse requests checkbox when filters are removed

d337d57

kibanamachine and others added 2 commits February 8, 2021 00:31

Merge branch 'master' into waterfall-filters

fcb3254

update license headers

1cc9344

Merge branch 'master' into waterfall-filters

7cc75d3

justinkambic approved these changes Feb 8, 2021

View reviewed changes

dominiqueclarke merged commit a1a2536 into elastic:master Feb 8, 2021

dominiqueclarke deleted the waterfall-filters branch February 8, 2021 20:27

shahzad31 added the auto-backport Deprecated - use backport:version if exact versions are needed label Feb 10, 2021

kibanamachine mentioned this pull request Feb 10, 2021

[7.x] [Uptime] Waterfall filters (#89185) #90967

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Uptime] Waterfall filters #89185

[Uptime] Waterfall filters #89185

shahzad31 commented Jan 25, 2021 •

edited

Loading

paulb-elastic commented Feb 5, 2021

justinkambic left a comment

justinkambic Feb 5, 2021

justinkambic Feb 5, 2021

justinkambic Feb 5, 2021

justinkambic Feb 5, 2021

justinkambic Feb 5, 2021

justinkambic Feb 5, 2021

justinkambic Feb 5, 2021

justinkambic Feb 5, 2021

dominiqueclarke commented Feb 8, 2021

dominiqueclarke commented Feb 8, 2021

paulb-elastic commented Feb 8, 2021

shahzad31 commented Feb 8, 2021

kibanamachine commented Feb 8, 2021

justinkambic left a comment

kibanamachine commented Feb 10, 2021

	const isHighlighted = item.isHighlighted;
	const { isHighlighted } = item;

[Uptime] Waterfall filters #89185

[Uptime] Waterfall filters #89185

Conversation

shahzad31 commented Jan 25, 2021 • edited Loading

Summary

paulb-elastic commented Feb 5, 2021

justinkambic 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

dominiqueclarke commented Feb 8, 2021

dominiqueclarke commented Feb 8, 2021

paulb-elastic commented Feb 8, 2021

shahzad31 commented Feb 8, 2021

kibanamachine commented Feb 8, 2021

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

Page load bundle

History

justinkambic left a comment

Choose a reason for hiding this comment

kibanamachine commented Feb 10, 2021

shahzad31 commented Jan 25, 2021 •

edited

Loading