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

[User Experience] Use EuiSelect for percentiles instead of SuperSelect #81082

Merged
merged 5 commits into from
Oct 21, 2020
Merged

[User Experience] Use EuiSelect for percentiles instead of SuperSelect #81082

Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
af10dfb
Use EuiSelect for percentiles instead of SuperSelect
andrewvc Oct 19, 2020
61fbe6d
Remove unused types
andrewvc Oct 20, 2020
76381b1
Merge remote-tracking branch 'origin/master' into standardize-select
andrewvc Oct 20, 2020
44b9800
Fix failing cypress test
andrewvc Oct 20, 2020
3fa0f39
Merge branch 'master' into standardize-select
kibanamachine Oct 20, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 8 additions & 12 deletions x-pack/plugins/apm/public/components/app/RumDashboard/UserPercentile/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

import React, { useCallback, useEffect } from 'react';

import { EuiSuperSelect } from '@elastic/eui';
import { EuiSelect } from '@elastic/eui';
import { useHistory } from 'react-router-dom';
import styled from 'styled-components';
import { useUrlParams } from '../../../../hooks/useUrlParams';
Expand Down Expand Up @@ -49,32 +49,29 @@ export function UserPercentile() {
const options = [
{
value: '50',
inputDisplay: I18LABELS.percentile50thMedian,
text: I18LABELS.percentile50thMedian,
dropdownDisplay: I18LABELS.percentile50thMedian,
'data-test-subj': 'p50Percentile',
},
{
value: '75',
inputDisplay: <StyledSpan>{I18LABELS.percentile75th}</StyledSpan>,
text: I18LABELS.percentile75th,
dropdownDisplay: I18LABELS.percentile75th,
'data-test-subj': 'p75Percentile',
},
{
value: '90',
inputDisplay: <StyledSpan>{I18LABELS.percentile90th}</StyledSpan>,
dropdownDisplay: I18LABELS.percentile90th,
text: I18LABELS.percentile90th,
'data-test-subj': 'p90Percentile',
},
{
value: '95',
inputDisplay: <StyledSpan>{I18LABELS.percentile95th}</StyledSpan>,
dropdownDisplay: I18LABELS.percentile95th,
text: I18LABELS.percentile95th,
'data-test-subj': 'p95Percentile',
},
{
value: '99',
inputDisplay: <StyledSpan>{I18LABELS.percentile99th}</StyledSpan>,
dropdownDisplay: I18LABELS.percentile99th,
text: I18LABELS.percentile99th,
'data-test-subj': 'p99Percentile',
},
];
Expand All @@ -84,13 +81,12 @@ export function UserPercentile() {
};

return (
<EuiSuperSelect
<EuiSelect
prepend={I18LABELS.percentile}
data-test-subj="uxPercentileSelect"
style={{ width: 150 }}
options={options}
valueOfSelected={String(percentile ?? DEFAULT_P)}
onChange={(value) => onChange(value)}
onChange={(evt) => onChange(evt.target.value)}
/>
);
}