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

[UX] Add percentile selector #78562

Merged
merged 18 commits into from
Sep 30, 2020
Merged

Conversation

shahzad31
Copy link
Contributor

@shahzad31 shahzad31 commented Sep 28, 2020

Summary

Fixes: #78657

Added a percentile selector for UX app.

User can choose what threshold percentile they want to view all the metrics at.

User can choose between 50,75,90,95,99

This percentile selector doesn't affect page load, page view and visitor breakdowns charts.

image

@shahzad31 shahzad31 changed the title Add median filter [UX] Add percentile selector Sep 28, 2020
@shahzad31 shahzad31 marked this pull request as ready for review September 28, 2020 18:00
@shahzad31 shahzad31 requested review from a team as code owners September 28, 2020 18:01
@shahzad31 shahzad31 self-assigned this Sep 28, 2020
Comment on lines 44 to 70
const options = [
{
value: '50',
inputDisplay: 'P50 (Median)',
'data-test-subj': 'p50Percentile',
},
{
value: '75',
inputDisplay: 'P75',
'data-test-subj': 'p75Percentile',
},
{
value: '90',
inputDisplay: 'P90',
'data-test-subj': 'p90Percentile',
},
{
value: '95',
inputDisplay: 'P95',
'data-test-subj': 'p95Percentile',
},
{
value: '99',
inputDisplay: 'P99',
'data-test-subj': 'p99Percentile',
},
];
Copy link
Contributor

Choose a reason for hiding this comment

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

Can I make a suggestion to rename the percentiles to "50th (median), 75th, 90th" etc. possibly with the added title before the options labelled "Percentiles"? The reason being I don't think the average user will know that P50 etc. refers to. cc @drewpost cc @katrin-freihofner

Choose a reason for hiding this comment

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

I like this usability suggestion. Thanks @formgeist I agree - anything we can do to help people understand this better, we should do.

@botelastic botelastic bot added Team:APM All issues that need APM UI Team support Team:Uptime - DEPRECATED Synthetics & RUM sub-team of Application Observability labels Sep 28, 2020
@elasticmachine
Copy link
Contributor

Pinging @elastic/uptime (Team:uptime)

@elasticmachine
Copy link
Contributor

Pinging @elastic/apm-ui (Team:apm)

Comment on lines +30 to +32
<EuiFlexItem grow={false}>
<UserPercentile />
</EuiFlexItem>
Copy link
Contributor

Choose a reason for hiding this comment

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

I would suggest aligning the percentile selector by the date picker. This is a global selector like the time range, so it feels more natural to place adjacent to that option.

94430494-4dfac600-0194-11eb-9925-54daf9c1f55a

cc @drewpost @katrin-freihofner

Copy link
Contributor

Choose a reason for hiding this comment

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

We could choose to add a prepended label in front of the selector which displays "Aggregation" or "Agg." shortened.

Copy link
Contributor

Choose a reason for hiding this comment

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

It might be nice to indicate that this is "active" when it isn't set to the default value of P50. This value gets persisted in the URL so someone could get linked to this state and be unaware.

Copy link
Contributor

@justinkambic justinkambic left a comment

Choose a reason for hiding this comment

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

This is looking good to me, seems to work as expected. Had a comment agreeing with what @formgeist said about the positioning of the percentile selector.

Comment on lines +30 to +32
<EuiFlexItem grow={false}>
<UserPercentile />
</EuiFlexItem>
Copy link
Contributor

Choose a reason for hiding this comment

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

It might be nice to indicate that this is "active" when it isn't set to the default value of P50. This value gets persisted in the URL so someone could get linked to this state and be unaware.

Copy link
Contributor

@justinkambic justinkambic left a comment

Choose a reason for hiding this comment

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

LGTM

@kibanamachine
Copy link
Contributor

💚 Build Succeeded

Metrics [docs]

@kbn/optimizer bundle module count

id value diff baseline
apm 1259 +3 1256

async chunks size

id value diff baseline
apm 4.1MB +4.4KB 4.1MB

distributable file count

id value diff baseline
default 45850 +3 45847

History

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

Copy link
Contributor

@formgeist formgeist left a comment

Choose a reason for hiding this comment

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

Design/UX looks good. The only nit is the selected percentile state when it's different than the default. I don't have a better suggestion at this time.

Screenshot 2020-09-29 at 21 17 44

@shahzad31 shahzad31 merged commit a31dd64 into elastic:master Sep 30, 2020
@shahzad31 shahzad31 deleted the add-median-filter branch September 30, 2020 08:24
yctercero pushed a commit to yctercero/kibana that referenced this pull request Sep 30, 2020
phillipb added a commit to phillipb/kibana that referenced this pull request Sep 30, 2020
…aly-detection-partition-field

* 'master' of github.com:elastic/kibana: (37 commits)
  [UiActions] Don't throw an error if there are no compatible actions to execute (elastic#78917)
  [Observability] Kibana nav when docked overlaps the content of the pages. (elastic#78593)
  Invalid `searchSourceJSON` causes saved object migration to fail (elastic#78535)
  update vega version (elastic#78390)
  Fix warning text doesn't get displayed on filters with custom filter name (elastic#78617)
  [ILM] Data tier notices should reflect tier preferences (elastic#78398)
  [APM] Service Map: `Not Defined` option doesn't work properly (elastic#77757)
  Improve invalid field error message at search.aggs.param_types.field (elastic#78587)
  Remove isDeprecated flag on visType (elastic#78820)
  Remove unused elasticsearch.preserverHost setting (elastic#78608)
  Fix condition and adjust tests (elastic#78898)
  [UX] Add percentile selector (elastic#78562)
  [ML] Replace use of rest_total_hits_as_int with track_total_hits (elastic#78423)
  expression service docs (elastic#78774)
  [Functional] Wait for the page to load and then click the new vis button (elastic#78725)
  [TSVB] No data in visualizations with annotations (elastic#78794)
  [kbn/ui-shared-deps] track asset sizes (elastic#78718)
  delete target before building (elastic#78665)
  Move indexPattern.popularizeField into discover (elastic#77668)
  [Security Solution][Resolver]Add backdrop to pills (elastic#78625)
  ...
shahzad31 added a commit to shahzad31/kibana that referenced this pull request Oct 1, 2020
shahzad31 added a commit that referenced this pull request Oct 1, 2020
@sorenlouv sorenlouv removed the Team:APM All issues that need APM UI Team support label Oct 7, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
release_note:enhancement Team:Uptime - DEPRECATED Synthetics & RUM sub-team of Application Observability v7.10.0 v8.0.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[UX] Add percentile selector
7 participants