From 33a7fb2dfd7d58e77053b3390187329b40e391db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Casper=20Hu=CC=88bertz?= <casper@formgeist.com>
Date: Thu, 13 Feb 2020 13:23:43 +0100
Subject: [PATCH 1/4] [APM] Remove PaginationContainer

Removing the old pagination from the trace summary title.
---
 .../WaterfallWithSummmary/index.tsx              | 16 ----------------
 1 file changed, 16 deletions(-)

diff --git a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/index.tsx b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/index.tsx
index 6dcab6c6b97c1..c506840502874 100644
--- a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/index.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/index.tsx
@@ -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;

From 1942e0714e057d25a0bc5cc89623704f0a180a33 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Casper=20Hu=CC=88bertz?= <casper@formgeist.com>
Date: Thu, 13 Feb 2020 13:24:11 +0100
Subject: [PATCH 2/4] [APM] Removing PaginationContainer component ref

---
 .../TransactionDetails/WaterfallWithSummmary/index.tsx | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/index.tsx b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/index.tsx
index c506840502874..adbc8c302b7b8 100644
--- a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/index.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/index.tsx
@@ -95,16 +95,6 @@ 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>
           )}
         </EuiFlexItem>
         <EuiFlexItem>

From fef513d10f167c820eab30cb28e0009ab3acf6cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Casper=20Hu=CC=88bertz?= <casper@formgeist.com>
Date: Thu, 13 Feb 2020 13:24:45 +0100
Subject: [PATCH 3/4] [APM] Change the vertical alignment to center

---
 .../app/TransactionDetails/WaterfallWithSummmary/index.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/index.tsx b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/index.tsx
index adbc8c302b7b8..3c77c9310d551 100644
--- a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/index.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/index.tsx
@@ -86,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', {

From 25fdb5c4e31a7283407388dd8c36016e5e0e9feb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Casper=20Hu=CC=88bertz?= <casper@formgeist.com>
Date: Thu, 13 Feb 2020 13:25:18 +0100
Subject: [PATCH 4/4] [APM] Leaving the EuiPagination component in place

---
 .../app/TransactionDetails/WaterfallWithSummmary/index.tsx  | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/index.tsx b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/index.tsx
index 3c77c9310d551..69557241c42aa 100644
--- a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/index.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/index.tsx
@@ -95,6 +95,12 @@ export const WaterfallWithSummmary: React.FC<Props> = ({
             </h5>
           </EuiTitle>
           {traceSamples && (
+            <EuiPagination
+              pageCount={traceSamples.length}
+              activePage={sampleActivePage}
+              onPageClick={goToSample}
+              compressed
+            />
           )}
         </EuiFlexItem>
         <EuiFlexItem>