Fix size functionality for PingList component. (#40909) (#40974)

elastic · Jul 12, 2019 · 2159313 · 2159313
1 parent 204f5d9
commit 2159313
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 17 deletions.
diff --git a/...ugins/uptime/public/components/functional/__tests__/__snapshots__/ping_list.test.tsx.snap b/...ugins/uptime/public/components/functional/__tests__/__snapshots__/ping_list.test.tsx.snap
diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/__tests__/ping_list.test.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/__tests__/ping_list.test.tsx
@@ -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();

diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/ping_list.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/ping_list.tsx
@@ -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>

diff --git a/x-pack/legacy/plugins/uptime/public/pages/monitor.tsx b/x-pack/legacy/plugins/uptime/public/pages/monitor.tsx
@@ -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,
         }}
       />