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

[ResponseOps] [RAM] Align flyout pagination with discover (#131193)

Browse source 
* Initial version

* Uncomment for now

* PR feedback

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Chris Roberson 2022-05-05 09:54:03 -04:00 • committed by GitHub
parent 3545f313f1
commit 5ab0fa580d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 179 additions and 123 deletions
Download patch file Download diff file Expand all files Collapse all files

33
x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/alerts_flyout/alerts_flyout.test.tsx
View file

@ -11,16 +11,17 @@ import { AlertsFlyout } from './alerts_flyout';
import { AlertsField } from '../../../../types';
const onClose = jest.fn();
const onPaginateNext = jest.fn();
const onPaginatePrevious = jest.fn();
const onPaginate = jest.fn();
const props = {
alert: {
[AlertsField.name]: ['one'],
[AlertsField.reason]: ['two'],
},
flyoutIndex: 0,
alertsCount: 4,
isLoading: false,
onClose,
onPaginateNext,
onPaginatePrevious,
onPaginate,
};
describe('AlertsFlyout', () => {
@ -34,19 +35,31 @@ describe('AlertsFlyout', () => {
await nextTick();
wrapper.update();
});
expect(wrapper.find('[data-test-subj="alertsFlyoutTitle"]').first().text()).toBe('one');
expect(wrapper.find('[data-test-subj="alertsFlyoutName"]').first().text()).toBe('one');
expect(wrapper.find('[data-test-subj="alertsFlyoutReason"]').first().text()).toBe('two');
});
it('should allow pagination', async () => {
it('should allow pagination with next', async () => {
const wrapper = mountWithIntl(<AlertsFlyout {...props} />);
await act(async () => {
await nextTick();
wrapper.update();
});
wrapper.find('[data-test-subj="alertsFlyoutPaginatePrevious"]').first().simulate('click');
expect(onPaginatePrevious).toHaveBeenCalled();
wrapper.find('[data-test-subj="alertsFlyoutPaginateNext"]').first().simulate('click');
expect(onPaginateNext).toHaveBeenCalled();
wrapper.find('[data-test-subj="pagination-button-next"]').first().simulate('click');
expect(onPaginate).toHaveBeenCalledWith(1);
});
it('should allow pagination with previous', async () => {
const customProps = {
...props,
flyoutIndex: 1,
};
const wrapper = mountWithIntl(<AlertsFlyout {...customProps} />);
await act(async () => {
await nextTick();
wrapper.update();
});
wrapper.find('[data-test-subj="pagination-button-previous"]').first().simulate('click');
expect(onPaginate).toHaveBeenCalledWith(0);
});
});

114
x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/alerts_flyout/alerts_flyout.tsx
View file

@ -15,13 +15,28 @@ import {
EuiTitle,
EuiText,
EuiHorizontalRule,
EuiFlyoutFooter,
EuiFlexGroup,
EuiFlexItem,
EuiButton,
EuiPagination,
EuiProgress,
EuiLoadingContent,
} from '@elastic/eui';
import { AlertsField, AlertsData } from '../../../../types';
const SAMPLE_TITLE_LABEL = i18n.translate(
'xpack.triggersActionsUI.sections.alertsTable.alertsFlyout.sampleTitle',
{
defaultMessage: 'Sample title',
}
);
const NAME_LABEL = i18n.translate(
'xpack.triggersActionsUI.sections.alertsTable.alertsFlyout.name',
{
defaultMessage: 'Name',
}
);
const REASON_LABEL = i18n.translate(
'xpack.triggersActionsUI.sections.alertsTable.alertsFlyout.reason',
{
@ -29,67 +44,82 @@ const REASON_LABEL = i18n.translate(
}
);
const NEXT_LABEL = i18n.translate(
'xpack.triggersActionsUI.sections.alertsTable.alertsFlyout.next',
const PAGINATION_LABEL = i18n.translate(
'xpack.triggersActionsUI.sections.alertsTable.alertsFlyout.paginationLabel',
{
defaultMessage: 'Next',
}
);
const PREVIOUS_LABEL = i18n.translate(
'xpack.triggersActionsUI.sections.alertsTable.alertsFlyout.previous',
{
defaultMessage: 'Previous',
defaultMessage: 'Alert navigation',
}
);
interface AlertsFlyoutProps {
alert: AlertsData;
flyoutIndex: number;
alertsCount: number;
isLoading: boolean;
onClose: () => void;
onPaginateNext: () => void;
onPaginatePrevious: () => void;
onPaginate: (pageIndex: number) => void;
}
export const AlertsFlyout: React.FunctionComponent<AlertsFlyoutProps> = ({
alert,
flyoutIndex,
alertsCount,
isLoading,
onClose,
onPaginateNext,
onPaginatePrevious,
onPaginate,
}: AlertsFlyoutProps) => {
return (
<EuiFlyout onClose={onClose} size="s" data-test-subj="alertsFlyout">
{isLoading && <EuiProgress size="xs" color="accent" data-test-subj="alertsFlyoutLoading" />}
<EuiFlyoutHeader hasBorder>
<EuiTitle size="m" data-test-subj="alertsFlyoutTitle">
<h2>{get(alert, AlertsField.name)}</h2>
<EuiTitle size="m">
<h2>{SAMPLE_TITLE_LABEL}</h2>
</EuiTitle>
<EuiSpacer size="m" />
<EuiFlexGroup gutterSize="none" justifyContent="flexEnd">
<EuiFlexItem grow={false}>
<EuiPagination
aria-label={PAGINATION_LABEL}
pageCount={alertsCount}
activePage={flyoutIndex}
onPageClick={onPaginate}
compressed
data-test-subj="alertsFlyoutPagination"
/>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlyoutHeader>
<EuiFlyoutBody>
<EuiTitle size="xs">
<h4>{REASON_LABEL}</h4>
</EuiTitle>
<EuiSpacer size="s" />
<EuiText size="s" data-test-subj="alertsFlyoutReason">
{get(alert, AlertsField.reason)}
</EuiText>
<EuiFlexGroup gutterSize="s" justifyContent="spaceBetween" direction="column">
<EuiFlexItem grow={false}>
<EuiTitle size="xs">
<h4>{NAME_LABEL}</h4>
</EuiTitle>
<EuiSpacer size="s" />
{isLoading ? (
<EuiLoadingContent lines={1} />
) : (
<EuiText size="s" data-test-subj="alertsFlyoutName">
{get(alert, AlertsField.name, [])[0]}
</EuiText>
)}
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiTitle size="xs">
<h4>{REASON_LABEL}</h4>
</EuiTitle>
<EuiSpacer size="s" />
{isLoading ? (
<EuiLoadingContent lines={3} />
) : (
<EuiText size="s" data-test-subj="alertsFlyoutReason">
{get(alert, AlertsField.reason, [])[0]}
</EuiText>
)}
</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer size="s" />
<EuiHorizontalRule size="full" />
</EuiFlyoutBody>
<EuiFlyoutFooter>
<EuiFlexGroup justifyContent="flexStart">
<EuiFlexItem grow={false}>
<EuiButton
data-test-subj="alertsFlyoutPaginatePrevious"
fill
onClick={onPaginatePrevious}
>
{PREVIOUS_LABEL}
</EuiButton>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton data-test-subj="alertsFlyoutPaginateNext" fill onClick={onPaginateNext}>
{NEXT_LABEL}
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlyoutFooter>
</EuiFlyout>
);
};

14
x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/alerts_table.test.tsx
View file

@ -132,16 +132,16 @@ describe('AlertsTable', () => {
const result = await wrapper.findAllByTestId('alertsFlyout');
expect(result.length).toBe(1);
expect(wrapper.queryByTestId('alertsFlyoutTitle')?.textContent).toBe('one');
expect(wrapper.queryByTestId('alertsFlyoutName')?.textContent).toBe('one');
expect(wrapper.queryByTestId('alertsFlyoutReason')?.textContent).toBe('two');
// Should paginate too
userEvent.click(wrapper.queryAllByTestId('alertsFlyoutPaginateNext')[0]);
expect(wrapper.queryByTestId('alertsFlyoutTitle')?.textContent).toBe('three');
userEvent.click(wrapper.queryAllByTestId('pagination-button-next')[0]);
expect(wrapper.queryByTestId('alertsFlyoutName')?.textContent).toBe('three');
expect(wrapper.queryByTestId('alertsFlyoutReason')?.textContent).toBe('four');
userEvent.click(wrapper.queryAllByTestId('alertsFlyoutPaginatePrevious')[0]);
expect(wrapper.queryByTestId('alertsFlyoutTitle')?.textContent).toBe('one');
userEvent.click(wrapper.queryAllByTestId('pagination-button-previous')[0]);
expect(wrapper.queryByTestId('alertsFlyoutName')?.textContent).toBe('one');
expect(wrapper.queryByTestId('alertsFlyoutReason')?.textContent).toBe('two');
});
@ -152,10 +152,10 @@ describe('AlertsTable', () => {
const result = await wrapper.findAllByTestId('alertsFlyout');
expect(result.length).toBe(1);
userEvent.click(wrapper.queryAllByTestId('alertsFlyoutPaginateNext')[0]);
userEvent.click(wrapper.queryAllByTestId('pagination-button-next')[0]);
expect(fetchAlertsData.onPageChange).toHaveBeenCalledWith({ pageIndex: 1, pageSize: 1 });
userEvent.click(wrapper.queryAllByTestId('alertsFlyoutPaginatePrevious')[0]);
userEvent.click(wrapper.queryAllByTestId('pagination-button-previous')[0]);
expect(fetchAlertsData.onPageChange).toHaveBeenCalledWith({ pageIndex: 0, pageSize: 1 });
});
});

12
x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/alerts_table.tsx
View file

@ -39,14 +39,14 @@ const emptyConfiguration = {
const AlertsTable: React.FunctionComponent<AlertsTableProps> = (props: AlertsTableProps) => {
const [rowClasses, setRowClasses] = useState<EuiDataGridStyle['rowClasses']>({});
const { activePage, alertsCount, onPageChange, onSortChange } = props.useFetchAlertsData();
const { activePage, alertsCount, onPageChange, onSortChange, isLoading } =
props.useFetchAlertsData();
const { sortingColumns, onSort } = useSorting(onSortChange);
const {
pagination,
onChangePageSize,
onChangePageIndex,
onPaginateFlyoutNext,
onPaginateFlyoutPrevious,
onPaginateFlyout,
flyoutAlertIndex,
setFlyoutAlertIndex,
} = usePagination({
@ -122,9 +122,11 @@ const AlertsTable: React.FunctionComponent<AlertsTableProps> = (props: AlertsTab
<Suspense fallback={null}>
<AlertsFlyout
alert={props.alerts[flyoutAlertIndex]}
alertsCount={alertsCount}
onClose={handleFlyoutClose}
onPaginateNext={onPaginateFlyoutNext}
onPaginatePrevious={onPaginateFlyoutPrevious}
flyoutIndex={flyoutAlertIndex + pagination.pageIndex * pagination.pageSize}
onPaginate={onPaginateFlyout}
isLoading={isLoading}
/>
</Suspense>
)}

28
x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/hooks/use_pagination.test.ts
View file

@ -58,31 +58,31 @@ describe('usePagination', () => {
expect(result.current.flyoutAlertIndex).toBe(-1);
act(() => {
result.current.onPaginateFlyoutNext();
result.current.onPaginateFlyout(0);
});
expect(result.current.flyoutAlertIndex).toBe(0);
act(() => {
result.current.onPaginateFlyoutNext();
result.current.onPaginateFlyout(1);
});
expect(result.current.flyoutAlertIndex).toBe(1);
act(() => {
result.current.onPaginateFlyoutPrevious();
result.current.onPaginateFlyout(0);
});
expect(result.current.flyoutAlertIndex).toBe(0);
});
it('should paginate the flyout when we need to change the page index', () => {
it('should paginate the flyout when we need to change the page index going back', () => {
const { result } = renderHook(() =>
usePagination({ onPageChange, pageIndex: 0, pageSize: 1, alertsCount })
);
act(() => {
result.current.onPaginateFlyoutPrevious();
result.current.onPaginateFlyout(-2);
});
// It should reset to the first alert in the table
@ -90,25 +90,21 @@ describe('usePagination', () => {
// It should go to the last page
expect(result.current.pagination).toStrictEqual({ pageIndex: 4, pageSize: 1 });
});
it('should paginate the flyout when we need to change the page index going forward', () => {
const { result } = renderHook(() =>
usePagination({ onPageChange, pageIndex: 0, pageSize: 1, alertsCount })
);
act(() => {
result.current.onPaginateFlyoutNext();
result.current.onPaginateFlyout(1);
});
// It should reset to the first alert in the table
expect(result.current.flyoutAlertIndex).toBe(0);
// It should go to the first page
expect(result.current.pagination).toStrictEqual({ pageIndex: 0, pageSize: 1 });
act(() => {
result.current.onPaginateFlyoutNext();
});
// It should reset to the first alert in the table
expect(result.current.flyoutAlertIndex).toBe(0);
// It should go to the second page
expect(result.current.pagination).toStrictEqual({ pageIndex: 1, pageSize: 1 });
});
});

17
x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/hooks/use_pagination.ts
View file

@ -58,19 +58,20 @@ export function usePagination({ onPageChange, pageIndex, pageSize, alertsCount }
},
[pagination, alertsCount, onChangePageIndex]
);
const onPaginateFlyoutNext = useCallback(() => {
paginateFlyout(flyoutAlertIndex + 1);
}, [paginateFlyout, flyoutAlertIndex]);
const onPaginateFlyoutPrevious = useCallback(() => {
paginateFlyout(flyoutAlertIndex - 1);
}, [paginateFlyout, flyoutAlertIndex]);
const onPaginateFlyout = useCallback(
(nextPageIndex: number) => {
nextPageIndex -= pagination.pageSize * pagination.pageIndex;
paginateFlyout(nextPageIndex);
},
[paginateFlyout, pagination.pageSize, pagination.pageIndex]
);
return {
pagination,
onChangePageSize,
onChangePageIndex,
onPaginateFlyoutNext,
onPaginateFlyoutPrevious,
onPaginateFlyout,
flyoutAlertIndex,
setFlyoutAlertIndex,
};

84
x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/alerts_table.ts
View file

@ -87,41 +87,48 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
);
});
it('should open a flyout and paginate through the flyout', async () => {
await PageObjects.common.navigateToUrlWithBrowserHistory('triggersActions', '/alerts');
await waitTableIsLoaded();
await testSubjects.click('expandColumnCellOpenFlyoutButton-0');
await waitFlyoutOpen();
// This keeps failing in CI because the next button is not clickable
// Revisit this once we change the UI around based on feedback
/*
fail: Actions and Triggers app Alerts table should open a flyout and paginate through the flyout
│ Error: retry.try timeout: ElementClickInterceptedError: element click intercepted: Element <a class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiPaginationArrowButton" href="#i5c22d1f1-c736-11ec-8510-cf83e5eb2b41" rel="noreferrer" aria-label="Next page" title="Next page" data-test-subj="pagination-button-next" aria-controls="i5c22d1f1-c736-11ec-8510-cf83e5eb2b41">...</a> is not clickable at point (1564, 795). Other element would receive the click: <div tabindex="0" class="euiFlyoutBody__overflow">...</div>
*/
// it('should open a flyout and paginate through the flyout', async () => {
// await PageObjects.common.navigateToUrlWithBrowserHistory('triggersActions', '/alerts');
// await waitTableIsLoaded();
// await testSubjects.click('expandColumnCellOpenFlyoutButton-0');
// await waitFlyoutOpen();
// await waitFlyoutIsLoaded();
expect(await testSubjects.getVisibleText('alertsFlyoutTitle')).to.be(
'APM Failed Transaction Rate (one)'
);
expect(await testSubjects.getVisibleText('alertsFlyoutReason')).to.be(
'Failed transactions rate is greater than 5.0% (current value is 31%) for elastic-co-frontend'
);
// expect(await testSubjects.getVisibleText('alertsFlyoutName')).to.be(
// 'APM Failed Transaction Rate (one)'
// );
// expect(await testSubjects.getVisibleText('alertsFlyoutReason')).to.be(
// 'Failed transactions rate is greater than 5.0% (current value is 31%) for elastic-co-frontend'
// );
await testSubjects.click('alertsFlyoutPaginateNext');
// await testSubjects.click('pagination-button-next');
expect(await testSubjects.getVisibleText('alertsFlyoutTitle')).to.be(
'APM Failed Transaction Rate (one)'
);
expect(await testSubjects.getVisibleText('alertsFlyoutReason')).to.be(
'Failed transactions rate is greater than 5.0% (current value is 35%) for opbeans-python'
);
// expect(await testSubjects.getVisibleText('alertsFlyoutName')).to.be(
// 'APM Failed Transaction Rate (one)'
// );
// expect(await testSubjects.getVisibleText('alertsFlyoutReason')).to.be(
// 'Failed transactions rate is greater than 5.0% (current value is 35%) for opbeans-python'
// );
await testSubjects.click('alertsFlyoutPaginatePrevious');
await testSubjects.click('alertsFlyoutPaginatePrevious');
// await testSubjects.click('pagination-button-previous');
// await testSubjects.click('pagination-button-previous');
await waitTableIsLoaded();
// await waitTableIsLoaded();
const rows = await getRows();
expect(rows[0].status).to.be('close');
expect(rows[0].lastUpdated).to.be('2021-10-19T14:55:14.503Z');
expect(rows[0].duration).to.be('252002000');
expect(rows[0].reason).to.be(
'CPU usage is greater than a threshold of 40 (current value is 56.7%) for gke-edge-oblt-default-pool-350b44de-c3dd'
);
});
// const rows = await getRows();
// expect(rows[0].status).to.be('close');
// expect(rows[0].lastUpdated).to.be('2021-10-19T14:55:14.503Z');
// expect(rows[0].duration).to.be('252002000');
// expect(rows[0].reason).to.be(
// 'CPU usage is greater than a threshold of 40 (current value is 56.7%) for gke-edge-oblt-default-pool-350b44de-c3dd'
// );
// });
async function waitTableIsLoaded() {
return await retry.try(async () => {
@ -130,12 +137,19 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
});
}
async function waitFlyoutOpen() {
return await retry.try(async () => {
const exists = await testSubjects.exists('alertsFlyout');
if (!exists) throw new Error('Still loading...');
});
}
// async function waitFlyoutOpen() {
// return await retry.try(async () => {
// const exists = await testSubjects.exists('alertsFlyout');
// if (!exists) throw new Error('Still loading...');
// });
// }
// async function waitFlyoutIsLoaded() {
// return await retry.try(async () => {
// const exists = await testSubjects.exists('alertsFlyoutLoading');
// if (exists) throw new Error('Still loading...');
// });
// }
async function getRows() {
const euiDataGridRows = await find.allByCssSelector('.euiDataGridRow');