maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[Uptime] Use EuiSelect instead of ComboBox for ping history (#49700)

Browse source 
Use EuiSelect instead of ComboBox for ping history

Resolves elastic/uptime#98
This commit is contained in:
Andrew Cholakian 2019-11-07 18:24:38 -05:00 committed by GitHub
parent a014241a3c
commit cd94184f86
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 47 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
x-pack/legacy/plugins/uptime/public/components/functional/__tests__/__snapshots__/ping_list.test.tsx.snap generated
View file

@ -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>

4
x-pack/legacy/plugins/uptime/public/components/functional/__tests__/ping_list.test.tsx
View file

@ -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();

59
x-pack/legacy/plugins/uptime/public/components/functional/ping_list.tsx
View file

@ -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>

12
x-pack/legacy/plugins/uptime/public/pages/monitor.tsx
View file

@ -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}