github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 17:59:23 -04:00
Code Issues Projects Releases Packages Wiki Activity

Fix size functionality for PingList component. (#40909)

Browse source
This commit is contained in:
Justin Kambic 2019-07-12 07:32:28 -04:00 • committed by GitHub
parent 2ed38ee78e
commit 4f7876cd93
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 36 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -150,7 +150,7 @@ exports[`PingList component renders sorted list without errors 1`] = `
<EuiSpacer
size="s"
/>
<EuiInMemoryTable
<EuiBasicTable
columns={
Array [
Object {
@ -191,7 +191,6 @@ exports[`PingList component renders sorted list without errors 1`] = `
},
]
}
executeQueryOptions={Object {}}
items={
Array [
Object {
@ -386,19 +385,23 @@ exports[`PingList component renders sorted list without errors 1`] = `
]
}
loading={false}
noItemsMessage="No items found"
onChange={[Function]}
pagination={
Object {
"initialPageSize": 20,
"pageIndex": 0,
"pageSize": 30,
"pageSizeOptions": Array [
5,
10,
20,
50,
100,
],
}
}
responsive={true}
sorting={false}
/>
</EuiPanel>
</Fragment>

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

@ -193,11 +193,13 @@ describe('PingList component', () => {
<PingListComponent
loading={false}
data={{ allPings }}
onPageCountChange={jest.fn()}
onSelectedLocationChange={(loc: EuiComboBoxProps[]) => {}}
onSelectedStatusChange={jest.fn()}
onUpdateApp={jest.fn()}
onSelectedStatusUpdate={jest.fn()}
pageSize={30}
selectedOption="down"
selectedLocation={BaseLocationOptions}
setSelectedLocation={(loc: EuiComboBoxProps[]) => {}}
/>
);
expect(component).toMatchSnapshot();

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

@ -5,13 +5,12 @@
*/
import {
EuiBadge,
EuiBasicTable,
EuiComboBox,
EuiComboBoxOptionProps,
EuiFlexGroup,
EuiFlexItem,
EuiHealth,
// @ts-ignore
EuiInMemoryTable,
EuiPanel,
EuiSpacer,
EuiText,
@ -29,17 +28,20 @@ import { convertMicrosecondsToMilliseconds as microsToMillis } from '../../lib/h
import { UptimeGraphQLQueryProps, withUptimeGraphQL } from '../higher_order';
import { pingsQuery } from '../../queries';
import { LocationName } from './location_name';
import { Criteria } from './monitor_list';
interface PingListQueryResult {
allPings?: PingResults;
}
interface PingListProps {
onSelectedStatusChange: (status: string | null) => void;
onSelectedLocationChange: (location: EuiComboBoxOptionProps[]) => void;
onPageCountChange: (itemCount: number) => void;
onUpdateApp: () => void;
onSelectedStatusUpdate: (status: string | null) => void;
pageSize: number;
selectedOption: string;
selectedLocation: EuiComboBoxOptionProps[];
setSelectedLocation: (location: EuiComboBoxOptionProps[]) => void;
}
type Props = UptimeGraphQLQueryProps<PingListQueryResult> & PingListProps;
@ -49,11 +51,13 @@ export const BaseLocationOptions = [{ label: 'All', value: 'All' }];
export const PingListComponent = ({
data,
loading,
onSelectedStatusUpdate,
onPageCountChange,
onSelectedLocationChange,
onSelectedStatusChange,
onUpdateApp,
pageSize,
selectedOption,
selectedLocation,
setSelectedLocation,
}: Props) => {
const statusOptions: EuiComboBoxOptionProps[] = [
{
@ -234,7 +238,7 @@ export const PingListComponent = ({
})}
onChange={(selectedOptions: EuiComboBoxOptionProps[]) => {
if (typeof selectedOptions[0].value === 'string') {
onSelectedStatusUpdate(
onSelectedStatusChange(
// @ts-ignore it's definitely a string
selectedOptions[0].value !== '' ? selectedOptions[0].value : null
);
@ -259,7 +263,7 @@ export const PingListComponent = ({
defaultMessage: 'Location',
})}
onChange={(selectedOptions: EuiComboBoxOptionProps[]) => {
setSelectedLocation(selectedOptions);
onSelectedLocationChange(selectedOptions);
}}
/>
</EuiFormRow>
@ -270,11 +274,17 @@ export const PingListComponent = ({
</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer size="s" />
<EuiInMemoryTable
<EuiBasicTable
loading={loading}
columns={columns}
items={pings}
pagination={{ initialPageSize: 20, pageSizeOptions: [5, 10, 20, 100] }}
pagination={{
initialPageSize: 20,
pageIndex: 0,
pageSize,
pageSizeOptions: [5, 10, 20, 50, 100],
}}
onChange={({ page: { size } }: Criteria) => onPageCountChange(size)}
/>
</EuiPanel>
</Fragment>

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

@ -46,6 +46,7 @@ export const MonitorPage = ({
}: MonitorPageProps) => {
const parsedPath = location.pathname.replace(/^(\/monitor\/)/, '').split('/');
const [monitorId] = useState<string>(decodeURI(parsedPath[0]));
const [pingListPageCount, setPingListPageCount] = useState<number>(10);
const { colors, refreshApp, setHeadingText } = useContext(UptimeSettingsContext);
const [params, updateUrlParams] = useUrlParams(history, location);
const { dateRangeStart, dateRangeEnd, selectedPingStatus } = params;
@ -104,15 +105,18 @@ export const MonitorPage = ({
/>
<EuiSpacer size="s" />
<PingList
onSelectedStatusUpdate={(selectedStatus: string | null) =>
onPageCountChange={setPingListPageCount}
onSelectedLocationChange={setSelectedLocation}
onSelectedStatusChange={(selectedStatus: string | null) =>
updateUrlParams({ selectedPingStatus: selectedStatus || '' })
}
onUpdateApp={refreshApp}
pageSize={pingListPageCount}
selectedOption={selectedPingStatus}
selectedLocation={selectedLocation}
setSelectedLocation={setSelectedLocation}
variables={{
...sharedVariables,
size: pingListPageCount,
status: selectedPingStatus,
}}
/>