[APM] Fix trace sample double pagination summary (#57558) (#57982)

* [APM] Remove PaginationContainer

Removing the old pagination from the trace summary title.

* [APM] Removing PaginationContainer component ref

* [APM] Change the vertical alignment to center

* [APM] Leaving the EuiPagination component in place

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
This commit is contained in:
Casper Hübertz 2020-02-19 13:36:12 +01:00 committed by GitHub
parent 75fa271b0d
commit c20e778656
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -16,10 +16,8 @@ import {
import { i18n } from '@kbn/i18n';
import { Location } from 'history';
import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
import { IBucket } from '../../../../../server/lib/transactions/distribution/get_buckets/transform';
import { IUrlParams } from '../../../../context/UrlParamsContext/types';
import { px, units } from '../../../../style/variables';
import { history } from '../../../../utils/history';
import { fromQuery, toQuery } from '../../../shared/Links/url_helpers';
import { LoadingStatePrompt } from '../../../shared/LoadingStatePrompt';
@ -29,20 +27,6 @@ import { MaybeViewTraceLink } from './MaybeViewTraceLink';
import { TransactionTabs } from './TransactionTabs';
import { IWaterfall } from './WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers';
const PaginationContainer = styled.div`
margin-left: ${px(units.quarter)};
display: flex;
align-items: center;
> span:first-of-type {
font-weight: 600;
}
> span:last-of-type {
margin-right: ${px(units.half)};
}
`;
interface Props {
urlParams: IUrlParams;
location: Location;
@ -102,7 +86,7 @@ export const WaterfallWithSummmary: React.FC<Props> = ({
return (
<EuiPanel paddingSize="m">
<EuiFlexGroup>
<EuiFlexItem style={{ flexDirection: 'row', alignItems: 'baseLine' }}>
<EuiFlexItem style={{ flexDirection: 'row', alignItems: 'center' }}>
<EuiTitle size="xs">
<h5>
{i18n.translate('xpack.apm.transactionDetails.traceSampleTitle', {
@ -111,16 +95,12 @@ export const WaterfallWithSummmary: React.FC<Props> = ({
</h5>
</EuiTitle>
{traceSamples && (
<PaginationContainer>
<span>{sampleActivePage + 1}</span>
<span>/{traceSamples.length}</span>
<EuiPagination
pageCount={traceSamples.length}
activePage={sampleActivePage}
onPageClick={goToSample}
compressed
/>
</PaginationContainer>
<EuiPagination
pageCount={traceSamples.length}
activePage={sampleActivePage}
onPageClick={goToSample}
compressed
/>
)}
</EuiFlexItem>
<EuiFlexItem>