added pagination on alert instances page

gmmorris · Feb 13, 2020 · 6ca3826 · 6ca3826
1 parent a5d661c
commit 6ca3826
Show file tree

Hide file tree

Showing 3 changed files with 123 additions and 12 deletions.
diff --git a/...ggers_actions_ui/public/application/sections/alert_details/components/alert_instances.tsx b/...ggers_actions_ui/public/application/sections/alert_details/components/alert_instances.tsx
@@ -4,16 +4,16 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { Fragment } from 'react';
+import React, { Fragment, useState } from 'react';
 import moment, { Duration } from 'moment';
 import { i18n } from '@kbn/i18n';
 import { EuiBasicTable, EuiButtonToggle, EuiBadge, EuiHealth } from '@elastic/eui';
 // @ts-ignore
 import { RIGHT_ALIGNMENT, CENTER_ALIGNMENT } from '@elastic/eui/lib/services';
-import { padLeft, difference } from 'lodash';
+import { padLeft, difference, chunk } from 'lodash';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { RawAlertInstance } from '../../../../../../../legacy/plugins/alerting/common';
-import { Alert, AlertTaskState } from '../../../../types';
+import { Alert, AlertTaskState, Pagination } from '../../../../types';
 import {
   ComponentOpts as AlertApis,
   withBulkAlertOperations,
@@ -135,22 +135,36 @@ export function AlertInstances({
   unmuteAlertInstance,
   requestRefresh,
 }: AlertInstancesProps) {
+  const [pagination, setPagination] = useState<Pagination>({ index: 0, size: 10 });
+
+  const mergedAlertInstances = [
+    ...Object.entries(alertInstances).map(([instanceId, instance]) =>
+      alertInstanceToListItem(alert, instanceId, instance)
+    ),
+    ...difference(alert.mutedInstanceIds, Object.keys(alertInstances)).map(instanceId =>
+      alertInstanceToListItem(alert, instanceId)
+    ),
+  ];
+  const pageOfAlertInstances = getPage(mergedAlertInstances, pagination);
+
   const onMuteAction = async (instance: AlertInstanceListItem) => {
     await (instance.isMuted
       ? unmuteAlertInstance(alert, instance.instance)
       : muteAlertInstance(alert, instance.instance));
     requestRefresh();
   };
+
   return (
     <EuiBasicTable
-      items={[
-        ...Object.entries(alertInstances).map(([instanceId, instance]) =>
-          alertInstanceToListItem(alert, instanceId, instance)
-        ),
-        ...difference(alert.mutedInstanceIds, Object.keys(alertInstances)).map(instanceId =>
-          alertInstanceToListItem(alert, instanceId)
-        ),
-      ]}
+      items={pageOfAlertInstances}
+      pagination={{
+        pageIndex: pagination.index,
+        pageSize: pagination.size,
+        totalItemCount: mergedAlertInstances.length,
+      }}
+      onChange={({ page: changedPage }: { page: Pagination }) => {
+        setPagination(changedPage);
+      }}
       rowProps={() => ({
         'data-test-subj': 'alert-instance-row',
       })}
@@ -164,6 +178,10 @@ export function AlertInstances({
 }
 export const AlertInstancesWithApi = withBulkAlertOperations(AlertInstances);
 
+function getPage(items: any[], pagination: Pagination) {
+  return chunk(items, pagination.size)[pagination.index];
+}
+
 interface AlertInstanceListItemStatus {
   label: string;
   healthColor: string;

diff --git a/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/details.ts b/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/details.ts
@@ -6,7 +6,7 @@
 
 import expect from '@kbn/expect';
 import uuid from 'uuid';
-import { omit } from 'lodash';
+import { omit, range, flatten } from 'lodash';
 import moment from 'moment';
 import { FtrProviderContext } from '../../ftr_provider_context';
 
@@ -330,5 +330,94 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
         await pageObjects.alertDetailsUI.ensureAlertInstanceExistance('eu-east', false);
       });
     });
+
+    describe('Alert Instance Pagination', function() {
+      const testRunUuid = uuid.v4();
+      let alert: any;
+
+      before(async () => {
+        await pageObjects.common.navigateToApp('triggersActions');
+
+        const actions = await Promise.all([
+          alerting.actions.createAction({
+            name: `server-log-${testRunUuid}-${0}`,
+            actionTypeId: '.server-log',
+            config: {},
+            secrets: {},
+          }),
+          alerting.actions.createAction({
+            name: `server-log-${testRunUuid}-${1}`,
+            actionTypeId: '.server-log',
+            config: {},
+            secrets: {},
+          }),
+        ]);
+
+        const instances = flatten(
+          range(10).map(index => [
+            { id: `us-central-${index}` },
+            { id: `us-east-${index}` },
+            { id: `us-west-${index}` },
+          ])
+        );
+        alert = await alerting.alerts.createAlwaysFiringWithActions(
+          `test-alert-${testRunUuid}`,
+          actions.map(action => ({
+            id: action.id,
+            group: 'default',
+            params: {
+              message: 'from alert 1s',
+              level: 'warn',
+            },
+          })),
+          {
+            instances,
+          }
+        );
+
+        // refresh to see alert
+        await browser.refresh();
+
+        await pageObjects.header.waitUntilLoadingHasFinished();
+
+        // Verify content
+        await testSubjects.existOrFail('alertsList');
+
+        // click on first alert
+        await pageObjects.triggersActionsUI.clickOnAlertInAlertsList(alert.name);
+
+        // await first run to complete so we have an initial state
+        await retry.try(async () => {
+          const { alertInstances } = await alerting.alerts.getAlertState(alert.id);
+          expect(Object.keys(alertInstances).length).to.eql(instances.length);
+        });
+      });
+
+      it('renders the first page', async () => {
+        // Verify content
+        await testSubjects.existOrFail('alertInstancesList');
+
+        const { alertInstances } = await alerting.alerts.getAlertState(alert.id);
+
+        const [firstItem] = await pageObjects.alertDetailsUI.getAlertInstancesList();
+        expect(firstItem.instance).to.eql(Object.keys(alertInstances)[0]);
+      });
+
+      it('navigates to the next page', async () => {
+        // Verify content
+        await testSubjects.existOrFail('alertInstancesList');
+
+        const { alertInstances } = await alerting.alerts.getAlertState(alert.id);
+
+        await pageObjects.alertDetailsUI.clickPaginationNextPage();
+
+        const PAGE_SIZE = 10;
+
+        await retry.try(async () => {
+          const [firstItem] = await pageObjects.alertDetailsUI.getAlertInstancesList();
+          expect(firstItem.instance).to.eql(Object.keys(alertInstances)[PAGE_SIZE]);
+        });
+      });
+    });
   });
 };
diff --git a/x-pack/test/functional_with_es_ssl/page_objects/alert_details.ts b/x-pack/test/functional_with_es_ssl/page_objects/alert_details.ts
@@ -92,5 +92,9 @@ export function AlertDetailsPageProvider({ getService }: FtrProviderContext) {
         ).to.eql(shouldExist ? 1 : 0);
       });
     },
+    async clickPaginationNextPage() {
+      const nextButton = await testSubjects.find(`pagination-button-next`);
+      nextButton.click();
+    },
   };
 }