[Uptime] Use EuiSelect instead of ComboBox for ping history (#49700)
Use EuiSelect instead of ComboBox for ping history Resolves elastic/uptime#98
This commit is contained in:
parent
a014241a3c
commit
cd94184f86
|
@ -43,41 +43,30 @@ exports[`PingList component renders sorted list without errors 1`] = `
|
|||
label="Status"
|
||||
labelType="label"
|
||||
>
|
||||
<EuiComboBox
|
||||
<EuiSelect
|
||||
aria-label="Status"
|
||||
compressed={false}
|
||||
fullWidth={false}
|
||||
isClearable={false}
|
||||
hasNoInitialSelection={false}
|
||||
isLoading={false}
|
||||
onChange={[Function]}
|
||||
options={
|
||||
Array [
|
||||
Object {
|
||||
"label": "All",
|
||||
"text": "All",
|
||||
"value": "",
|
||||
},
|
||||
Object {
|
||||
"label": "Up",
|
||||
"text": "Up",
|
||||
"value": "up",
|
||||
},
|
||||
Object {
|
||||
"label": "Down",
|
||||
"text": "Down",
|
||||
"value": "down",
|
||||
},
|
||||
]
|
||||
}
|
||||
selectedOptions={
|
||||
Array [
|
||||
Object {
|
||||
"label": "Down",
|
||||
"value": "down",
|
||||
},
|
||||
]
|
||||
}
|
||||
singleSelection={
|
||||
Object {
|
||||
"asPlainText": true,
|
||||
}
|
||||
}
|
||||
value="down"
|
||||
/>
|
||||
</EuiFormRow>
|
||||
</EuiFlexItem>
|
||||
|
@ -92,37 +81,26 @@ exports[`PingList component renders sorted list without errors 1`] = `
|
|||
label="Location"
|
||||
labelType="label"
|
||||
>
|
||||
<EuiComboBox
|
||||
<EuiSelect
|
||||
aria-label="Location"
|
||||
compressed={false}
|
||||
fullWidth={false}
|
||||
isClearable={false}
|
||||
hasNoInitialSelection={false}
|
||||
isLoading={false}
|
||||
onChange={[Function]}
|
||||
options={
|
||||
Array [
|
||||
Object {
|
||||
"label": "All",
|
||||
"value": "All",
|
||||
"text": "All",
|
||||
"value": "",
|
||||
},
|
||||
Object {
|
||||
"label": "nyc",
|
||||
"text": "nyc",
|
||||
"value": "nyc",
|
||||
},
|
||||
]
|
||||
}
|
||||
selectedOptions={
|
||||
Array [
|
||||
Object {
|
||||
"label": "All",
|
||||
"value": "All",
|
||||
},
|
||||
]
|
||||
}
|
||||
singleSelection={
|
||||
Object {
|
||||
"asPlainText": true,
|
||||
}
|
||||
}
|
||||
value=""
|
||||
/>
|
||||
</EuiFormRow>
|
||||
</EuiFlexItem>
|
||||
|
|
|
@ -7,7 +7,7 @@
|
|||
import React from 'react';
|
||||
import { shallowWithIntl } from 'test_utils/enzyme_helpers';
|
||||
import { PingResults, Ping } from '../../../../common/graphql/types';
|
||||
import { PingListComponent, BaseLocationOptions, toggleDetails } from '../ping_list';
|
||||
import { PingListComponent, AllLocationOption, toggleDetails } from '../ping_list';
|
||||
import { EuiComboBoxOptionProps } from '@elastic/eui';
|
||||
import { ExpandedRowMap } from '../monitor_list/types';
|
||||
|
||||
|
@ -210,7 +210,7 @@ describe('PingList component', () => {
|
|||
onUpdateApp={jest.fn()}
|
||||
pageSize={30}
|
||||
selectedOption="down"
|
||||
selectedLocation={BaseLocationOptions}
|
||||
selectedLocation={AllLocationOption.value}
|
||||
/>
|
||||
);
|
||||
expect(component).toMatchSnapshot();
|
||||
|
|
|
@ -6,12 +6,11 @@
|
|||
import {
|
||||
EuiBadge,
|
||||
EuiBasicTable,
|
||||
EuiComboBox,
|
||||
EuiComboBoxOptionProps,
|
||||
EuiFlexGroup,
|
||||
EuiFlexItem,
|
||||
EuiHealth,
|
||||
EuiPanel,
|
||||
EuiSelect,
|
||||
EuiSpacer,
|
||||
EuiText,
|
||||
EuiTitle,
|
||||
|
@ -38,13 +37,13 @@ interface PingListQueryResult {
|
|||
}
|
||||
|
||||
interface PingListProps {
|
||||
onSelectedStatusChange: (status: string | null) => void;
|
||||
onSelectedLocationChange: (location: EuiComboBoxOptionProps[]) => void;
|
||||
onSelectedStatusChange: (status: string | undefined) => void;
|
||||
onSelectedLocationChange: (location: any) => void;
|
||||
onPageCountChange: (itemCount: number) => void;
|
||||
onUpdateApp: () => void;
|
||||
pageSize: number;
|
||||
selectedOption: string;
|
||||
selectedLocation: EuiComboBoxOptionProps[];
|
||||
selectedLocation: string | undefined;
|
||||
}
|
||||
|
||||
type Props = UptimeGraphQLQueryProps<PingListQueryResult> & PingListProps;
|
||||
|
@ -52,7 +51,7 @@ interface ExpandedRowMap {
|
|||
[key: string]: JSX.Element;
|
||||
}
|
||||
|
||||
export const BaseLocationOptions = [{ label: 'All', value: 'All' }];
|
||||
export const AllLocationOption = { text: 'All', value: '' };
|
||||
|
||||
export const toggleDetails = (
|
||||
ping: Ping,
|
||||
|
@ -84,32 +83,32 @@ export const PingListComponent = ({
|
|||
}: Props) => {
|
||||
const [itemIdToExpandedRowMap, setItemIdToExpandedRowMap] = useState<ExpandedRowMap>({});
|
||||
|
||||
const statusOptions: EuiComboBoxOptionProps[] = [
|
||||
const statusOptions = [
|
||||
{
|
||||
label: i18n.translate('xpack.uptime.pingList.statusOptions.allStatusOptionLabel', {
|
||||
text: i18n.translate('xpack.uptime.pingList.statusOptions.allStatusOptionLabel', {
|
||||
defaultMessage: 'All',
|
||||
}),
|
||||
value: '',
|
||||
},
|
||||
{
|
||||
label: i18n.translate('xpack.uptime.pingList.statusOptions.upStatusOptionLabel', {
|
||||
text: i18n.translate('xpack.uptime.pingList.statusOptions.upStatusOptionLabel', {
|
||||
defaultMessage: 'Up',
|
||||
}),
|
||||
value: 'up',
|
||||
},
|
||||
{
|
||||
label: i18n.translate('xpack.uptime.pingList.statusOptions.downStatusOptionLabel', {
|
||||
text: i18n.translate('xpack.uptime.pingList.statusOptions.downStatusOptionLabel', {
|
||||
defaultMessage: 'Down',
|
||||
}),
|
||||
value: 'down',
|
||||
},
|
||||
];
|
||||
const locations = get<string[]>(data, 'allPings.locations');
|
||||
const locationOptions: EuiComboBoxOptionProps[] = !locations
|
||||
? BaseLocationOptions
|
||||
: BaseLocationOptions.concat(
|
||||
const locationOptions = !locations
|
||||
? [AllLocationOption]
|
||||
: [AllLocationOption].concat(
|
||||
locations.map(name => {
|
||||
return { label: name, value: name };
|
||||
return { text: name, value: name };
|
||||
})
|
||||
);
|
||||
|
||||
|
@ -253,22 +252,18 @@ export const PingListComponent = ({
|
|||
defaultMessage: 'Status',
|
||||
})}
|
||||
>
|
||||
<EuiComboBox
|
||||
isClearable={false}
|
||||
singleSelection={{ asPlainText: true }}
|
||||
selectedOptions={[
|
||||
statusOptions.find(({ value }) => value === selectedOption) ||
|
||||
statusOptions[2],
|
||||
]}
|
||||
<EuiSelect
|
||||
options={statusOptions}
|
||||
aria-label={i18n.translate('xpack.uptime.pingList.statusLabel', {
|
||||
defaultMessage: 'Status',
|
||||
})}
|
||||
onChange={(selectedOptions: EuiComboBoxOptionProps[]) => {
|
||||
if (typeof selectedOptions[0].value === 'string') {
|
||||
value={selectedOption}
|
||||
onChange={selected => {
|
||||
if (typeof selected.target.value === 'string') {
|
||||
onSelectedStatusChange(
|
||||
// @ts-ignore it's definitely a string
|
||||
selectedOptions[0].value !== '' ? selectedOptions[0].value : null
|
||||
selected.target && selected.target.value !== ''
|
||||
? selected.target.value
|
||||
: undefined
|
||||
);
|
||||
}
|
||||
}}
|
||||
|
@ -282,16 +277,18 @@ export const PingListComponent = ({
|
|||
defaultMessage: 'Location',
|
||||
})}
|
||||
>
|
||||
<EuiComboBox
|
||||
isClearable={false}
|
||||
singleSelection={{ asPlainText: true }}
|
||||
selectedOptions={selectedLocation}
|
||||
<EuiSelect
|
||||
options={locationOptions}
|
||||
value={selectedLocation}
|
||||
aria-label={i18n.translate('xpack.uptime.pingList.locationLabel', {
|
||||
defaultMessage: 'Location',
|
||||
})}
|
||||
onChange={(selectedOptions: EuiComboBoxOptionProps[]) => {
|
||||
onSelectedLocationChange(selectedOptions);
|
||||
onChange={selected => {
|
||||
onSelectedLocationChange(
|
||||
selected.target && selected.target.value !== ''
|
||||
? selected.target.value
|
||||
: null
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</EuiFormRow>
|
||||
|
|
|
@ -7,7 +7,6 @@
|
|||
import {
|
||||
// @ts-ignore No typings for EuiSpacer
|
||||
EuiSpacer,
|
||||
EuiComboBoxOptionProps,
|
||||
} from '@elastic/eui';
|
||||
import { ApolloQueryResult, OperationVariables, QueryOptions } from 'apollo-client';
|
||||
import gql from 'graphql-tag';
|
||||
|
@ -23,7 +22,6 @@ import { UMUpdateBreadcrumbs } from '../lib/lib';
|
|||
import { UptimeSettingsContext } from '../contexts';
|
||||
import { useUrlParams } from '../hooks';
|
||||
import { stringifyUrlParams } from '../lib/helper/stringify_url_params';
|
||||
import { BaseLocationOptions } from '../components/functional/ping_list';
|
||||
import { useTrackPageview } from '../../../infra/public';
|
||||
import { getTitle } from '../lib/helper/get_title';
|
||||
|
||||
|
@ -74,16 +72,12 @@ export const MonitorPage = ({
|
|||
});
|
||||
}, [params]);
|
||||
|
||||
const [selectedLocation, setSelectedLocation] = useState<EuiComboBoxOptionProps[]>(
|
||||
BaseLocationOptions
|
||||
);
|
||||
|
||||
const selLocationVal = selectedLocation[0].value === 'All' ? null : selectedLocation[0].value;
|
||||
const [selectedLocation, setSelectedLocation] = useState(undefined);
|
||||
|
||||
const sharedVariables = {
|
||||
dateRangeStart,
|
||||
dateRangeEnd,
|
||||
location: selLocationVal,
|
||||
location: selectedLocation,
|
||||
monitorId,
|
||||
};
|
||||
|
||||
|
@ -111,7 +105,7 @@ export const MonitorPage = ({
|
|||
<PingList
|
||||
onPageCountChange={setPingListPageCount}
|
||||
onSelectedLocationChange={setSelectedLocation}
|
||||
onSelectedStatusChange={(selectedStatus: string | null) =>
|
||||
onSelectedStatusChange={(selectedStatus: string | undefined) =>
|
||||
updateUrlParams({ selectedPingStatus: selectedStatus || '' })
|
||||
}
|
||||
onUpdateApp={refreshApp}
|
||||
|
|
Loading…
Reference in a new issue