From 1ec014a4bd08f29ba1aef90f50f2dc3740d20c11 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B8ren=20Louv-Jansen?= <sorenlouv@gmail.com>
Date: Sat, 8 Sep 2018 16:53:56 +0200
Subject: [PATCH] [APM] Minor cleanup (#22827)

# Conflicts:
#	x-pack/plugins/apm/public/components/app/TransactionOverview/view.js
---
 x-pack/plugins/apm/common/constants.js        |   2 +
 .../__snapshots__/DetailView.test.js.snap     | 312 +++++++++---------
 .../app/ErrorGroupDetails/DetailView/index.js |  24 +-
 .../__test__/__snapshots__/List.test.js.snap  |   8 +-
 .../Watcher/WatcherFlyOut.js                  |  12 +-
 .../StickyTransactionProperties.js            |  57 ++++
 .../TransactionDetails/Transaction/view.js    |  34 +-
 .../components/app/TransactionDetails/view.js |   4 +-
 .../DynamicBaseline/Flyout.js                 |   8 +-
 .../TransactionOverview.test.js.snap          |   2 +-
 .../app/TransactionOverview/index.js          |   2 +-
 .../app/TransactionOverview/view.js           |   8 +-
 .../components/shared/ContextProperties.js    | 111 -------
 .../StickyProperties/StickyProperties.test.js |  52 +++
 .../StickyProperties.test.js.snap             | 168 ++++++++++
 .../shared/StickyProperties/index.js          | 116 +++++++
 .../public/services/__test__/callApi.test.js  |  70 ++--
 .../apm/public/services/rest/callApi.js       |  14 +-
 ...sCharts.js => transactionDetailsCharts.js} |   8 +-
 ...Charts.js => transactionOverviewCharts.js} |   8 +-
 .../plugins/apm/public/utils/testHelpers.js   |   4 +-
 21 files changed, 649 insertions(+), 375 deletions(-)
 create mode 100644 x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/StickyTransactionProperties.js
 delete mode 100644 x-pack/plugins/apm/public/components/shared/ContextProperties.js
 create mode 100644 x-pack/plugins/apm/public/components/shared/StickyProperties/StickyProperties.test.js
 create mode 100644 x-pack/plugins/apm/public/components/shared/StickyProperties/__snapshots__/StickyProperties.test.js.snap
 create mode 100644 x-pack/plugins/apm/public/components/shared/StickyProperties/index.js
 rename x-pack/plugins/apm/public/store/reactReduxRequest/{detailsCharts.js => transactionDetailsCharts.js} (86%)
 rename x-pack/plugins/apm/public/store/reactReduxRequest/{overviewCharts.js => transactionOverviewCharts.js} (86%)

diff --git a/x-pack/plugins/apm/common/constants.js b/x-pack/plugins/apm/common/constants.js
index 7bb25a4a2813a..e0627338bbc2f 100644
--- a/x-pack/plugins/apm/common/constants.js
+++ b/x-pack/plugins/apm/common/constants.js
@@ -31,4 +31,6 @@ export const ERROR_LOG_MESSAGE = 'error.log.message';
 export const ERROR_EXC_MESSAGE = 'error.exception.message';
 export const ERROR_EXC_HANDLED = 'error.exception.handled';
 
+export const REQUEST_URL_FULL = 'context.request.url.full';
+
 export const USER_ID = 'context.user.id';
diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/DetailView/__test__/__snapshots__/DetailView.test.js.snap b/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/DetailView/__test__/__snapshots__/DetailView.test.js.snap
index 1c47d1665a5da..8b76e15a9da9f 100644
--- a/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/DetailView/__test__/__snapshots__/DetailView.test.js.snap
+++ b/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/DetailView/__test__/__snapshots__/DetailView.test.js.snap
@@ -24,12 +24,6 @@ exports[`DetailView should render with data 1`] = `
   margin-bottom: 16px;
 }
 
-.c8 {
-  width: 33%;
-  margin-bottom: 16px;
-  width: 66%;
-}
-
 .c5 {
   margin-bottom: 8px;
   font-size: 12px;
@@ -40,22 +34,22 @@ exports[`DetailView should render with data 1`] = `
   cursor: help;
 }
 
+.c7 {
+  color: #999999;
+}
+
 .c6 {
   display: inline-block;
   line-height: 16px;
 }
 
-.c7 {
-  color: #999999;
-}
-
-.c9 {
+.c8 {
   display: inline-block;
+  line-height: 16px;
   max-width: 100%;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  line-height: 16px;
 }
 
 .c2 {
@@ -64,12 +58,12 @@ exports[`DetailView should render with data 1`] = `
   margin: 0;
 }
 
-.c14 {
+.c13 {
   margin: 24px 0;
   font-size: 14px;
 }
 
-.c11 {
+.c10 {
   display: inline-block;
   font-size: 16px;
   padding: 16px 20px;
@@ -82,7 +76,7 @@ exports[`DetailView should render with data 1`] = `
   border-bottom: 2px solid #006E8A;
 }
 
-.c12 {
+.c11 {
   display: inline-block;
   font-size: 16px;
   padding: 16px 20px;
@@ -94,12 +88,12 @@ exports[`DetailView should render with data 1`] = `
   user-select: none;
 }
 
-.c19 {
+.c18 {
   position: relative;
   border-radius: 0 0 5px 5px;
 }
 
-.c20 {
+.c19 {
   position: absolute;
   width: 100%;
   height: 18px;
@@ -108,7 +102,7 @@ exports[`DetailView should render with data 1`] = `
   background-color: #FCF2E6;
 }
 
-.c21 {
+.c20 {
   position: absolute;
   top: 0;
   left: 0;
@@ -116,7 +110,7 @@ exports[`DetailView should render with data 1`] = `
   background: #f5f5f5;
 }
 
-.c22 {
+.c21 {
   position: relative;
   min-width: 42px;
   padding-left: 8px;
@@ -127,11 +121,11 @@ exports[`DetailView should render with data 1`] = `
   border-right: 1px solid #d9d9d9;
 }
 
-.c22:last-of-type {
+.c21:last-of-type {
   border-radius: 0 0 0 5px;
 }
 
-.c23 {
+.c22 {
   position: relative;
   min-width: 42px;
   padding-left: 8px;
@@ -143,22 +137,22 @@ exports[`DetailView should render with data 1`] = `
   background-color: #FCF2E6;
 }
 
-.c23:last-of-type {
+.c22:last-of-type {
   border-radius: 0 0 0 5px;
 }
 
-.c24 {
+.c23 {
   overflow: auto;
   margin: 0 0 0 42px;
   padding: 0;
   background-color: #ffffff;
 }
 
-.c24:last-of-type {
+.c23:last-of-type {
   border-radius: 0 0 5px 0;
 }
 
-.c25 {
+.c24 {
   margin: 0;
   color: inherit;
   background: inherit;
@@ -169,7 +163,7 @@ exports[`DetailView should render with data 1`] = `
   line-height: 18px;
 }
 
-.c26 {
+.c25 {
   position: relative;
   padding: 0;
   margin: 0;
@@ -177,18 +171,18 @@ exports[`DetailView should render with data 1`] = `
   z-index: 2;
 }
 
-.c16 {
+.c15 {
   color: #999999;
   padding: 8px;
   border-bottom: 1px solid #d9d9d9;
   border-radius: 5px 5px 0 0;
 }
 
-.c18 {
+.c17 {
   font-weight: bold;
 }
 
-.c15 {
+.c14 {
   margin: 0 0 24px 0;
   position: relative;
   font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;
@@ -197,11 +191,11 @@ exports[`DetailView should render with data 1`] = `
   background: #f5f5f5;
 }
 
-.c15 .c17 {
+.c14 .c16 {
   color: #000000;
 }
 
-.c27 {
+.c26 {
   margin: 0 0 24px 0;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -233,12 +227,12 @@ exports[`DetailView should render with data 1`] = `
   margin-bottom: 16px;
 }
 
-.c10 {
+.c9 {
   padding: 0 24px;
   border-bottom: 1px solid #d9d9d9;
 }
 
-.c13 {
+.c12 {
   padding: 24px 24px 0;
 }
 
@@ -339,19 +333,19 @@ exports[`DetailView should render with data 1`] = `
       <div
         className="c6"
       >
-        1515508740
+        1337 minutes ago (mocking 1515508740)
          
         <span
           className="c7"
         >
           (
-          1515508740
+          1st of January (mocking 1515508740)
           )
         </span>
       </div>
     </div>
     <div
-      className="c8"
+      className="c4"
     >
       <div
         className="c5"
@@ -366,7 +360,7 @@ exports[`DetailView should render with data 1`] = `
       </div>
       <span
         aria-describedby="overlay3"
-        className="c9"
+        className="c8"
         onMouseOut={[Function]}
         onMouseOver={[Function]}
       >
@@ -435,66 +429,66 @@ exports[`DetailView should render with data 1`] = `
     </div>
   </div>
   <div
-    className="c10"
+    className="c9"
   >
     <div
-      className="c11"
+      className="c10"
       onClick={[Function]}
       selected={true}
     >
       Exception stacktrace
     </div>
     <div
-      className="c12"
+      className="c11"
       onClick={[Function]}
       selected={false}
     >
       Request
     </div>
     <div
-      className="c12"
+      className="c11"
       onClick={[Function]}
       selected={false}
     >
       Response
     </div>
     <div
-      className="c12"
+      className="c11"
       onClick={[Function]}
       selected={false}
     >
       System
     </div>
     <div
-      className="c12"
+      className="c11"
       onClick={[Function]}
       selected={false}
     >
       Service
     </div>
     <div
-      className="c12"
+      className="c11"
       onClick={[Function]}
       selected={false}
     >
       Process
     </div>
     <div
-      className="c12"
+      className="c11"
       onClick={[Function]}
       selected={false}
     >
       User
     </div>
     <div
-      className="c12"
+      className="c11"
       onClick={[Function]}
       selected={false}
     >
       Tags
     </div>
     <div
-      className="c12"
+      className="c11"
       onClick={[Function]}
       selected={false}
     >
@@ -502,146 +496,146 @@ exports[`DetailView should render with data 1`] = `
     </div>
   </div>
   <div
-    className="c13"
+    className="c12"
   >
     <div>
       <h4
-        className="c14"
+        className="c13"
       >
         Stacktraces
       </h4>
       <div
-        className="c15"
+        className="c14"
       >
         <div
-          className="c16"
+          className="c15"
         >
           <span
-            className="c17 c18"
+            className="c16 c17"
           >
             server/coffee.js
           </span>
            in
            
           <span
-            className="c17 c18"
+            className="c16 c17"
           >
             &lt;anonymous&gt;
           </span>
            at
            
           <span
-            className="c17 c18"
+            className="c16 c17"
           >
             line 
             9
           </span>
         </div>
         <div
-          className="c19"
+          className="c18"
         >
           <div
-            className="c20"
+            className="c19"
           />
           <div
-            className="c21"
+            className="c20"
           >
             <div
-              className="c22"
+              className="c21"
             >
               2
               .
             </div>
             <div
-              className="c22"
+              className="c21"
             >
               3
               .
             </div>
             <div
-              className="c22"
+              className="c21"
             >
               4
               .
             </div>
             <div
-              className="c22"
+              className="c21"
             >
               5
               .
             </div>
             <div
-              className="c22"
+              className="c21"
             >
               6
               .
             </div>
             <div
-              className="c22"
+              className="c21"
             >
               7
               .
             </div>
             <div
-              className="c22"
+              className="c21"
             >
               8
               .
             </div>
             <div
-              className="c23"
+              className="c22"
             >
               9
               .
             </div>
             <div
-              className="c22"
+              className="c21"
             >
               10
               .
             </div>
             <div
-              className="c22"
+              className="c21"
             >
               11
               .
             </div>
             <div
-              className="c22"
+              className="c21"
             >
               12
               .
             </div>
             <div
-              className="c22"
+              className="c21"
             >
               13
               .
             </div>
             <div
-              className="c22"
+              className="c21"
             >
               14
               .
             </div>
             <div
-              className="c22"
+              className="c21"
             >
               15
               .
             </div>
             <div
-              className="c22"
+              className="c21"
             >
               16
               .
             </div>
           </div>
           <div
-            className="c24"
+            className="c23"
           >
             <pre
-              className="c25"
+              className="c24"
               style={
                 Object {
                   "background": "#fff",
@@ -653,14 +647,14 @@ exports[`DetailView should render with data 1`] = `
               }
             >
               <code
-                className="c26"
+                className="c25"
               >
                 
 
               </code>
             </pre>
             <pre
-              className="c25"
+              className="c24"
               style={
                 Object {
                   "background": "#fff",
@@ -672,7 +666,7 @@ exports[`DetailView should render with data 1`] = `
               }
             >
               <code
-                className="c26"
+                className="c25"
               >
                 <span
                   style={
@@ -707,7 +701,7 @@ exports[`DetailView should render with data 1`] = `
               </code>
             </pre>
             <pre
-              className="c25"
+              className="c24"
               style={
                 Object {
                   "background": "#fff",
@@ -719,7 +713,7 @@ exports[`DetailView should render with data 1`] = `
               }
             >
               <code
-                className="c26"
+                className="c25"
               >
                 <span
                   style={
@@ -754,7 +748,7 @@ exports[`DetailView should render with data 1`] = `
               </code>
             </pre>
             <pre
-              className="c25"
+              className="c24"
               style={
                 Object {
                   "background": "#fff",
@@ -766,14 +760,14 @@ exports[`DetailView should render with data 1`] = `
               }
             >
               <code
-                className="c26"
+                className="c25"
               >
                 
 
               </code>
             </pre>
             <pre
-              className="c25"
+              className="c24"
               style={
                 Object {
                   "background": "#fff",
@@ -785,7 +779,7 @@ exports[`DetailView should render with data 1`] = `
               }
             >
               <code
-                className="c26"
+                className="c25"
               >
                 <span
                   style={
@@ -820,7 +814,7 @@ exports[`DetailView should render with data 1`] = `
               </code>
             </pre>
             <pre
-              className="c25"
+              className="c24"
               style={
                 Object {
                   "background": "#fff",
@@ -832,14 +826,14 @@ exports[`DetailView should render with data 1`] = `
               }
             >
               <code
-                className="c26"
+                className="c25"
               >
                 
 
               </code>
             </pre>
             <pre
-              className="c25"
+              className="c24"
               style={
                 Object {
                   "background": "#fff",
@@ -851,7 +845,7 @@ exports[`DetailView should render with data 1`] = `
               }
             >
               <code
-                className="c26"
+                className="c25"
               >
                 app.get(
                 <span
@@ -892,7 +886,7 @@ exports[`DetailView should render with data 1`] = `
               </code>
             </pre>
             <pre
-              className="c25"
+              className="c24"
               style={
                 Object {
                   "background": "#fff",
@@ -904,7 +898,7 @@ exports[`DetailView should render with data 1`] = `
               }
             >
               <code
-                className="c26"
+                className="c25"
               >
                   
                 <span
@@ -930,7 +924,7 @@ exports[`DetailView should render with data 1`] = `
               </code>
             </pre>
             <pre
-              className="c25"
+              className="c24"
               style={
                 Object {
                   "background": "#fff",
@@ -942,7 +936,7 @@ exports[`DetailView should render with data 1`] = `
               }
             >
               <code
-                className="c26"
+                className="c25"
               >
                     res.send(
                 <span
@@ -958,7 +952,7 @@ exports[`DetailView should render with data 1`] = `
               </code>
             </pre>
             <pre
-              className="c25"
+              className="c24"
               style={
                 Object {
                   "background": "#fff",
@@ -970,7 +964,7 @@ exports[`DetailView should render with data 1`] = `
               }
             >
               <code
-                className="c26"
+                className="c25"
               >
                   } 
                 <span
@@ -986,7 +980,7 @@ exports[`DetailView should render with data 1`] = `
               </code>
             </pre>
             <pre
-              className="c25"
+              className="c24"
               style={
                 Object {
                   "background": "#fff",
@@ -998,7 +992,7 @@ exports[`DetailView should render with data 1`] = `
               }
             >
               <code
-                className="c26"
+                className="c25"
               >
                     res.send(
                 <span
@@ -1014,7 +1008,7 @@ exports[`DetailView should render with data 1`] = `
               </code>
             </pre>
             <pre
-              className="c25"
+              className="c24"
               style={
                 Object {
                   "background": "#fff",
@@ -1026,13 +1020,13 @@ exports[`DetailView should render with data 1`] = `
               }
             >
               <code
-                className="c26"
+                className="c25"
               >
                   }
               </code>
             </pre>
             <pre
-              className="c25"
+              className="c24"
               style={
                 Object {
                   "background": "#fff",
@@ -1044,13 +1038,13 @@ exports[`DetailView should render with data 1`] = `
               }
             >
               <code
-                className="c26"
+                className="c25"
               >
                 })
               </code>
             </pre>
             <pre
-              className="c25"
+              className="c24"
               style={
                 Object {
                   "background": "#fff",
@@ -1062,14 +1056,14 @@ exports[`DetailView should render with data 1`] = `
               }
             >
               <code
-                className="c26"
+                className="c25"
               >
                 
 
               </code>
             </pre>
             <pre
-              className="c25"
+              className="c24"
               style={
                 Object {
                   "background": "#fff",
@@ -1081,7 +1075,7 @@ exports[`DetailView should render with data 1`] = `
               }
             >
               <code
-                className="c26"
+                className="c25"
               >
                 app.get(
                 <span
@@ -1126,7 +1120,7 @@ exports[`DetailView should render with data 1`] = `
       </div>
       <div>
         <div
-          className="c27"
+          className="c26"
         >
           <button
             className="euiLink euiLink--primary"
@@ -1153,137 +1147,137 @@ exports[`DetailView should render with data 1`] = `
         />
       </div>
       <div
-        className="c15"
+        className="c14"
       >
         <div
-          className="c16"
+          className="c15"
         >
           <span
-            className="c17 c18"
+            className="c16 c17"
           >
             server.js
           </span>
            in
            
           <span
-            className="c17 c18"
+            className="c16 c17"
           >
             &lt;anonymous&gt;
           </span>
            at
            
           <span
-            className="c17 c18"
+            className="c16 c17"
           >
             line 
             27
           </span>
         </div>
         <div
-          className="c19"
+          className="c18"
         >
           <div
-            className="c20"
+            className="c19"
           />
           <div
-            className="c21"
+            className="c20"
           >
             <div
-              className="c22"
+              className="c21"
             >
               20
               .
             </div>
             <div
-              className="c22"
+              className="c21"
             >
               21
               .
             </div>
             <div
-              className="c22"
+              className="c21"
             >
               22
               .
             </div>
             <div
-              className="c22"
+              className="c21"
             >
               23
               .
             </div>
             <div
-              className="c22"
+              className="c21"
             >
               24
               .
             </div>
             <div
-              className="c22"
+              className="c21"
             >
               25
               .
             </div>
             <div
-              className="c22"
+              className="c21"
             >
               26
               .
             </div>
             <div
-              className="c23"
+              className="c22"
             >
               27
               .
             </div>
             <div
-              className="c22"
+              className="c21"
             >
               28
               .
             </div>
             <div
-              className="c22"
+              className="c21"
             >
               29
               .
             </div>
             <div
-              className="c22"
+              className="c21"
             >
               30
               .
             </div>
             <div
-              className="c22"
+              className="c21"
             >
               31
               .
             </div>
             <div
-              className="c22"
+              className="c21"
             >
               32
               .
             </div>
             <div
-              className="c22"
+              className="c21"
             >
               33
               .
             </div>
             <div
-              className="c22"
+              className="c21"
             >
               34
               .
             </div>
           </div>
           <div
-            className="c24"
+            className="c23"
           >
             <pre
-              className="c25"
+              className="c24"
               style={
                 Object {
                   "background": "#fff",
@@ -1295,7 +1289,7 @@ exports[`DetailView should render with data 1`] = `
               }
             >
               <code
-                className="c26"
+                className="c25"
               >
                 app.use(
                 <span
@@ -1321,7 +1315,7 @@ exports[`DetailView should render with data 1`] = `
               </code>
             </pre>
             <pre
-              className="c25"
+              className="c24"
               style={
                 Object {
                   "background": "#fff",
@@ -1333,7 +1327,7 @@ exports[`DetailView should render with data 1`] = `
               }
             >
               <code
-                className="c26"
+                className="c25"
               >
                 app.use(express.static(
                 <span
@@ -1349,7 +1343,7 @@ exports[`DetailView should render with data 1`] = `
               </code>
             </pre>
             <pre
-              className="c25"
+              className="c24"
               style={
                 Object {
                   "background": "#fff",
@@ -1361,7 +1355,7 @@ exports[`DetailView should render with data 1`] = `
               }
             >
               <code
-                className="c26"
+                className="c25"
               >
                 app.use(
                 <span
@@ -1392,7 +1386,7 @@ exports[`DetailView should render with data 1`] = `
               </code>
             </pre>
             <pre
-              className="c25"
+              className="c24"
               style={
                 Object {
                   "background": "#fff",
@@ -1404,7 +1398,7 @@ exports[`DetailView should render with data 1`] = `
               }
             >
               <code
-                className="c26"
+                className="c25"
               >
                   apm.setTag(
                 <span
@@ -1430,7 +1424,7 @@ exports[`DetailView should render with data 1`] = `
               </code>
             </pre>
             <pre
-              className="c25"
+              className="c24"
               style={
                 Object {
                   "background": "#fff",
@@ -1442,7 +1436,7 @@ exports[`DetailView should render with data 1`] = `
               }
             >
               <code
-                className="c26"
+                className="c25"
               >
                   apm.setTag(
                 <span
@@ -1468,7 +1462,7 @@ exports[`DetailView should render with data 1`] = `
               </code>
             </pre>
             <pre
-              className="c25"
+              className="c24"
               style={
                 Object {
                   "background": "#fff",
@@ -1480,7 +1474,7 @@ exports[`DetailView should render with data 1`] = `
               }
             >
               <code
-                className="c26"
+                className="c25"
               >
                   apm.setTag(
                 <span
@@ -1506,7 +1500,7 @@ exports[`DetailView should render with data 1`] = `
               </code>
             </pre>
             <pre
-              className="c25"
+              className="c24"
               style={
                 Object {
                   "background": "#fff",
@@ -1518,7 +1512,7 @@ exports[`DetailView should render with data 1`] = `
               }
             >
               <code
-                className="c26"
+                className="c25"
               >
                   apm.setTag(
                 <span
@@ -1544,7 +1538,7 @@ exports[`DetailView should render with data 1`] = `
               </code>
             </pre>
             <pre
-              className="c25"
+              className="c24"
               style={
                 Object {
                   "background": "#fff",
@@ -1556,13 +1550,13 @@ exports[`DetailView should render with data 1`] = `
               }
             >
               <code
-                className="c26"
+                className="c25"
               >
                   next()
               </code>
             </pre>
             <pre
-              className="c25"
+              className="c24"
               style={
                 Object {
                   "background": "#fff",
@@ -1574,13 +1568,13 @@ exports[`DetailView should render with data 1`] = `
               }
             >
               <code
-                className="c26"
+                className="c25"
               >
                 })
               </code>
             </pre>
             <pre
-              className="c25"
+              className="c24"
               style={
                 Object {
                   "background": "#fff",
@@ -1592,14 +1586,14 @@ exports[`DetailView should render with data 1`] = `
               }
             >
               <code
-                className="c26"
+                className="c25"
               >
                 
 
               </code>
             </pre>
             <pre
-              className="c25"
+              className="c24"
               style={
                 Object {
                   "background": "#fff",
@@ -1611,7 +1605,7 @@ exports[`DetailView should render with data 1`] = `
               }
             >
               <code
-                className="c26"
+                className="c25"
               >
                 app.use(
                 <span
@@ -1637,7 +1631,7 @@ exports[`DetailView should render with data 1`] = `
               </code>
             </pre>
             <pre
-              className="c25"
+              className="c24"
               style={
                 Object {
                   "background": "#fff",
@@ -1649,7 +1643,7 @@ exports[`DetailView should render with data 1`] = `
               }
             >
               <code
-                className="c26"
+                className="c25"
               >
                 app.use(
                 <span
@@ -1685,7 +1679,7 @@ exports[`DetailView should render with data 1`] = `
               </code>
             </pre>
             <pre
-              className="c25"
+              className="c24"
               style={
                 Object {
                   "background": "#fff",
@@ -1697,7 +1691,7 @@ exports[`DetailView should render with data 1`] = `
               }
             >
               <code
-                className="c26"
+                className="c25"
               >
                 app.get(
                 <span
@@ -1738,7 +1732,7 @@ exports[`DetailView should render with data 1`] = `
               </code>
             </pre>
             <pre
-              className="c25"
+              className="c24"
               style={
                 Object {
                   "background": "#fff",
@@ -1750,7 +1744,7 @@ exports[`DetailView should render with data 1`] = `
               }
             >
               <code
-                className="c26"
+                className="c25"
               >
                   res.sendFile(path.resolve(__dirname, 
                 <span
@@ -1776,7 +1770,7 @@ exports[`DetailView should render with data 1`] = `
               </code>
             </pre>
             <pre
-              className="c25"
+              className="c24"
               style={
                 Object {
                   "background": "#fff",
@@ -1788,7 +1782,7 @@ exports[`DetailView should render with data 1`] = `
               }
             >
               <code
-                className="c26"
+                className="c25"
               >
                 })
               </code>
@@ -1798,7 +1792,7 @@ exports[`DetailView should render with data 1`] = `
       </div>
       <div>
         <div
-          className="c27"
+          className="c26"
         >
           <button
             className="euiLink euiLink--primary"
diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/DetailView/index.js b/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/DetailView/index.js
index ca137ec39a7e9..6f6e2c60aa671 100644
--- a/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/DetailView/index.js
+++ b/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/DetailView/index.js
@@ -17,7 +17,7 @@ import {
 import { get, capitalize, isEmpty } from 'lodash';
 import { STATUS } from '../../../../constants';
 
-import { ContextProperties } from '../../../shared/ContextProperties';
+import { StickyProperties } from '../../../shared/StickyProperties';
 import { Tab, HeaderMedium } from '../../../shared/UIComponents';
 import DiscoverButton from '../../../shared/DiscoverButton';
 import {
@@ -30,7 +30,8 @@ import {
   ERROR_GROUP_ID,
   SERVICE_AGENT_NAME,
   SERVICE_LANGUAGE_NAME,
-  USER_ID
+  USER_ID,
+  REQUEST_URL_FULL
 } from '../../../../../common/constants';
 import { fromQuery, toQuery, history } from '../../../../utils/url';
 
@@ -87,9 +88,20 @@ function DetailView({ errorGroup, urlParams, location }) {
   const { serviceName } = urlParams;
 
   const timestamp = get(errorGroup, 'data.error.@timestamp');
-  const url = get(errorGroup.data.error, 'context.request.url.full', 'N/A');
+  const url = get(errorGroup.data.error, REQUEST_URL_FULL, 'N/A');
 
   const stickyProperties = [
+    {
+      label: 'Timestamp',
+      fieldName: '@timestamp',
+      val: timestamp
+    },
+    {
+      fieldName: REQUEST_URL_FULL,
+      label: 'URL',
+      val: url,
+      truncated: true
+    },
     {
       label: 'Request method',
       fieldName: 'context.request.method',
@@ -154,11 +166,7 @@ function DetailView({ errorGroup, urlParams, location }) {
         </DiscoverButton>
       </HeaderContainer>
 
-      <ContextProperties
-        timestamp={timestamp}
-        url={url}
-        stickyProperties={stickyProperties}
-      />
+      <StickyProperties stickyProperties={stickyProperties} />
 
       <TabContainer>
         {tabs.map(key => {
diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/__snapshots__/List.test.js.snap b/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/__snapshots__/List.test.js.snap
index 56a2847ca4824..ee53c815949ff 100644
--- a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/__snapshots__/List.test.js.snap
+++ b/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/__snapshots__/List.test.js.snap
@@ -569,7 +569,7 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
             <div
               className="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--overflowingContent"
             >
-              1515578797
+              1337 minutes ago (mocking 1515578797)
             </div>
           </td>
         </tr>
@@ -650,7 +650,7 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
             <div
               className="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--overflowingContent"
             >
-              1515578797
+              1337 minutes ago (mocking 1515578797)
             </div>
           </td>
         </tr>
@@ -731,7 +731,7 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
             <div
               className="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--overflowingContent"
             >
-              1515578796
+              1337 minutes ago (mocking 1515578796)
             </div>
           </td>
         </tr>
@@ -812,7 +812,7 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
             <div
               className="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--overflowingContent"
             >
-              1515578773
+              1337 minutes ago (mocking 1515578773)
             </div>
           </td>
         </tr>
diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/Watcher/WatcherFlyOut.js b/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/Watcher/WatcherFlyOut.js
index 6ede807a49add..78199377a8d23 100644
--- a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/Watcher/WatcherFlyOut.js
+++ b/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/Watcher/WatcherFlyOut.js
@@ -199,17 +199,17 @@ export default class WatcherFlyout extends Component {
   };
 
   render() {
-    const userTimezoneSetting = getUserTimezone();
+    if (!this.props.isOpen) {
+      return null;
+    }
 
+    const userTimezoneSetting = getUserTimezone();
     const dailyTime = this.state.daily;
-
     const inputTime = `${dailyTime}Z`; // Add tz to make into UTC
     const inputFormat = 'HH:mmZ'; // Parse as 24 hour w. tz
-
     const dailyTimeFormatted = moment(inputTime, inputFormat)
       .tz(userTimezoneSetting)
       .format('HH:mm'); // Format as 24h
-
     const dailyTime12HourFormatted = moment(inputTime, inputFormat)
       .tz(userTimezoneSetting)
       .format('hh:mm A (z)'); // Format as 12h w. tz
@@ -397,7 +397,7 @@ export default class WatcherFlyout extends Component {
       </EuiText>
     );
 
-    const flyout = (
+    return (
       <EuiFlyout onClose={this.props.onClose} size="s">
         <EuiFlyoutHeader>
           <EuiTitle>
@@ -421,8 +421,6 @@ export default class WatcherFlyout extends Component {
         </EuiFlyoutFooter>
       </EuiFlyout>
     );
-
-    return <React.Fragment>{this.props.isOpen && flyout}</React.Fragment>;
   }
 }
 
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/StickyTransactionProperties.js b/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/StickyTransactionProperties.js
new file mode 100644
index 0000000000000..55cedaedec4f8
--- /dev/null
+++ b/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/StickyTransactionProperties.js
@@ -0,0 +1,57 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { get } from 'lodash';
+import { StickyProperties } from '../../../shared/StickyProperties';
+import {
+  TRANSACTION_DURATION,
+  TRANSACTION_RESULT,
+  USER_ID,
+  REQUEST_URL_FULL
+} from '../../../../../common/constants';
+import { asTime } from '../../../../utils/formatters';
+
+export default function StickyTransactionProperties({ transaction }) {
+  const timestamp = get(transaction, '@timestamp');
+  const url = get(transaction, REQUEST_URL_FULL, 'N/A');
+  const duration = get(transaction, TRANSACTION_DURATION);
+  const stickyProperties = [
+    {
+      label: 'Timestamp',
+      fieldName: '@timestamp',
+      val: timestamp
+    },
+    {
+      fieldName: REQUEST_URL_FULL,
+      label: 'URL',
+      val: url,
+      truncated: true
+    },
+    {
+      label: 'Duration',
+      fieldName: TRANSACTION_DURATION,
+      val: duration ? asTime(duration) : 'N/A'
+    },
+    {
+      label: 'Result',
+      fieldName: TRANSACTION_RESULT,
+      val: get(transaction, TRANSACTION_RESULT, 'N/A')
+    },
+    {
+      label: 'User ID',
+      fieldName: USER_ID,
+      val: get(transaction, USER_ID, 'N/A')
+    }
+  ];
+
+  return <StickyProperties stickyProperties={stickyProperties} />;
+}
+
+StickyTransactionProperties.propTypes = {
+  transaction: PropTypes.object.isRequired
+};
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/view.js b/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/view.js
index 7703ab4722732..19e1f42d16024 100644
--- a/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/view.js
+++ b/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/view.js
@@ -17,7 +17,7 @@ import {
 import { Tab, HeaderMedium } from '../../../shared/UIComponents';
 import { isEmpty, capitalize, get, sortBy, last } from 'lodash';
 
-import { ContextProperties } from '../../../shared/ContextProperties';
+import StickyTransactionProperties from './StickyTransactionProperties';
 import {
   PropertiesTable,
   getLevelOneProps
@@ -28,12 +28,9 @@ import {
   TRANSACTION_ID,
   PROCESSOR_EVENT,
   SERVICE_AGENT_NAME,
-  TRANSACTION_DURATION,
-  TRANSACTION_RESULT,
-  USER_ID
+  TRANSACTION_DURATION
 } from '../../../../../common/constants';
 import { fromQuery, toQuery, history } from '../../../../utils/url';
-import { asTime } from '../../../../utils/formatters';
 import EmptyMessage from '../../../shared/EmptyMessage';
 
 const Container = styled.div`
@@ -129,27 +126,6 @@ function Transaction({ transaction, location, urlParams }) {
     );
   }
 
-  const timestamp = get(transaction, '@timestamp');
-  const url = get(transaction, 'context.request.url.full', 'N/A');
-  const duration = get(transaction, TRANSACTION_DURATION);
-  const stickyProperties = [
-    {
-      label: 'Duration',
-      fieldName: TRANSACTION_DURATION,
-      val: duration ? asTime(duration) : 'N/A'
-    },
-    {
-      label: 'Result',
-      fieldName: TRANSACTION_RESULT,
-      val: get(transaction, TRANSACTION_RESULT, 'N/A')
-    },
-    {
-      label: 'User ID',
-      fieldName: USER_ID,
-      val: get(transaction, USER_ID, 'N/A')
-    }
-  ];
-
   const agentName = get(transaction, SERVICE_AGENT_NAME);
   const tabs = getTabs(transaction);
   const currentTab = getCurrentTab(tabs, urlParams.detailTab);
@@ -181,11 +157,7 @@ function Transaction({ transaction, location, urlParams }) {
         </DiscoverButton>
       </HeaderContainer>
 
-      <ContextProperties
-        timestamp={timestamp}
-        url={url}
-        stickyProperties={stickyProperties}
-      />
+      <StickyTransactionProperties transaction={transaction} />
 
       <TabContainer>
         {[DEFAULT_TAB, ...tabs].map(key => {
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/view.js b/x-pack/plugins/apm/public/components/app/TransactionDetails/view.js
index d8fa4ae9a3c11..d1c48d31ba5cf 100644
--- a/x-pack/plugins/apm/public/components/app/TransactionDetails/view.js
+++ b/x-pack/plugins/apm/public/components/app/TransactionDetails/view.js
@@ -9,7 +9,7 @@ import { EuiSpacer } from '@elastic/eui';
 import { HeaderLarge } from '../../shared/UIComponents';
 import Transaction from './Transaction';
 import Distribution from './Distribution';
-import { DetailsChartsRequest } from '../../../store/reactReduxRequest/detailsCharts';
+import { TransactionDetailsChartsRequest } from '../../../store/reactReduxRequest/transactionDetailsCharts';
 import Charts from '../../shared/charts/TransactionCharts';
 import { TransactionDistributionRequest } from '../../../store/reactReduxRequest/transactionDistribution';
 import { TransactionDetailsRequest } from '../../../store/reactReduxRequest/transactionDetails';
@@ -24,7 +24,7 @@ function TransactionDetails({ urlParams, location }) {
 
       <EuiSpacer size="s" />
 
-      <DetailsChartsRequest
+      <TransactionDetailsChartsRequest
         urlParams={urlParams}
         render={({ data }) => (
           <Charts charts={data} urlParams={urlParams} location={location} />
diff --git a/x-pack/plugins/apm/public/components/app/TransactionOverview/DynamicBaseline/Flyout.js b/x-pack/plugins/apm/public/components/app/TransactionOverview/DynamicBaseline/Flyout.js
index 1231e60e5bd80..58e1e05b79718 100644
--- a/x-pack/plugins/apm/public/components/app/TransactionOverview/DynamicBaseline/Flyout.js
+++ b/x-pack/plugins/apm/public/components/app/TransactionOverview/DynamicBaseline/Flyout.js
@@ -101,7 +101,11 @@ export default class DynamicBaselineFlyout extends Component {
     } = this.props;
     const { isLoading, hasIndexPattern } = this.state;
 
-    const flyout = (
+    if (!isOpen) {
+      return null;
+    }
+
+    return (
       <EuiFlyout onClose={onClose} size="s">
         <EuiFlyoutHeader>
           <EuiTitle>
@@ -199,8 +203,6 @@ export default class DynamicBaselineFlyout extends Component {
         </EuiFlyoutFooter>
       </EuiFlyout>
     );
-
-    return <React.Fragment>{isOpen && flyout}</React.Fragment>;
   }
 }
 
diff --git a/x-pack/plugins/apm/public/components/app/TransactionOverview/__jest__/__snapshots__/TransactionOverview.test.js.snap b/x-pack/plugins/apm/public/components/app/TransactionOverview/__jest__/__snapshots__/TransactionOverview.test.js.snap
index b825ec8428732..32c4a7023e8c5 100644
--- a/x-pack/plugins/apm/public/components/app/TransactionOverview/__jest__/__snapshots__/TransactionOverview.test.js.snap
+++ b/x-pack/plugins/apm/public/components/app/TransactionOverview/__jest__/__snapshots__/TransactionOverview.test.js.snap
@@ -20,7 +20,7 @@ exports[`TransactionOverview should not call loadTransactionList without any pro
     transactionType="request"
   />
   <Connect(TabNavigation) />
-  <OverviewChartsRequest
+  <TransactionOverviewChartsRequest
     render={[Function]}
     urlParams={
       Object {
diff --git a/x-pack/plugins/apm/public/components/app/TransactionOverview/index.js b/x-pack/plugins/apm/public/components/app/TransactionOverview/index.js
index d96243e90e969..df6dd93ffdc19 100644
--- a/x-pack/plugins/apm/public/components/app/TransactionOverview/index.js
+++ b/x-pack/plugins/apm/public/components/app/TransactionOverview/index.js
@@ -7,7 +7,7 @@
 import { connect } from 'react-redux';
 import TransactionOverview from './view';
 import { getUrlParams } from '../../../store/urlParams';
-import { hasDynamicBaseline } from '../../../store/reactReduxRequest/overviewCharts';
+import { hasDynamicBaseline } from '../../../store/reactReduxRequest/transactionOverviewCharts';
 import { getLicense } from '../../../store/reactReduxRequest/license';
 
 function mapStateToProps(state = {}) {
diff --git a/x-pack/plugins/apm/public/components/app/TransactionOverview/view.js b/x-pack/plugins/apm/public/components/app/TransactionOverview/view.js
index b250afe837965..e7ad54f441326 100644
--- a/x-pack/plugins/apm/public/components/app/TransactionOverview/view.js
+++ b/x-pack/plugins/apm/public/components/app/TransactionOverview/view.js
@@ -12,11 +12,11 @@ import PropTypes from 'prop-types';
 import { get } from 'lodash';
 import { HeaderContainer, HeaderMedium } from '../../shared/UIComponents';
 import TabNavigation from '../../shared/TabNavigation';
-import Charts from '../../shared/charts/TransactionCharts';
 import { getMlJobUrl, KibanaLink } from '../../../utils/url';
+import TransactionCharts from '../../shared/charts/TransactionCharts';
 import List from './List';
 import { units, px, fontSizes } from '../../../style/variables';
-import { OverviewChartsRequest } from '../../../store/reactReduxRequest/overviewCharts';
+import { TransactionOverviewChartsRequest } from '../../../store/reactReduxRequest/transactionOverviewCharts';
 import { TransactionListRequest } from '../../../store/reactReduxRequest/transactionList';
 import { ServiceDetailsRequest } from '../../../store/reactReduxRequest/serviceDetails';
 
@@ -111,10 +111,10 @@ class TransactionOverview extends Component {
 
         <TabNavigation />
 
-        <OverviewChartsRequest
+        <TransactionOverviewChartsRequest
           urlParams={urlParams}
           render={({ data }) => (
-            <Charts
+            <TransactionCharts
               charts={data}
               urlParams={urlParams}
               location={location}
diff --git a/x-pack/plugins/apm/public/components/shared/ContextProperties.js b/x-pack/plugins/apm/public/components/shared/ContextProperties.js
deleted file mode 100644
index dc21ffac625aa..0000000000000
--- a/x-pack/plugins/apm/public/components/shared/ContextProperties.js
+++ /dev/null
@@ -1,111 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import React from 'react';
-import styled from 'styled-components';
-import moment from 'moment';
-
-import {
-  unit,
-  units,
-  px,
-  fontSizes,
-  colors,
-  truncate
-} from '../../style/variables';
-
-import TooltipOverlay, { fieldNameHelper } from '../shared/TooltipOverlay';
-
-const PropertiesContainer = styled.div`
-  display: flex;
-  padding: 0 ${px(units.plus)};
-  width: 100%;
-  justify-content: flex-start;
-  flex-wrap: wrap;
-`;
-
-const Property = styled.div`
-  width: 33%;
-  margin-bottom: ${px(unit)};
-`;
-
-const PropertyWide = Property.extend`
-  width: 66%;
-`;
-
-const PropertyLabel = styled.div`
-  margin-bottom: ${px(units.half)};
-  font-size: ${fontSizes.small};
-  color: ${colors.gray3};
-
-  span {
-    cursor: help;
-  }
-`;
-
-const PropertyValue = styled.div`
-  display: inline-block;
-  line-height: ${px(unit)};
-`;
-
-const PropertyValueEmphasis = styled.span`
-  color: ${colors.gray3};
-`;
-
-const PropertyUrl = styled.span`
-  display: inline-block;
-  ${truncate('100%')};
-  line-height: ${px(unit)};
-`;
-
-export function ContextProperties({ timestamp, url, stickyProperties }) {
-  const time = moment(timestamp);
-  const timeAgo = timestamp ? time.fromNow() : 'N/A';
-  const timestampFull = timestamp
-    ? time.format('MMMM Do YYYY, HH:mm:ss.SSS')
-    : 'N/A';
-
-  return (
-    <PropertiesContainer>
-      <Property>
-        <PropertyLabel>
-          <TooltipOverlay content={fieldNameHelper('@timestamp')}>
-            <span>Timestamp</span>
-          </TooltipOverlay>
-        </PropertyLabel>
-        <PropertyValue>
-          {timeAgo}{' '}
-          <PropertyValueEmphasis>({timestampFull})</PropertyValueEmphasis>
-        </PropertyValue>
-      </Property>
-      <PropertyWide>
-        <PropertyLabel>
-          <TooltipOverlay content={fieldNameHelper('context.request.url.full')}>
-            <span>URL</span>
-          </TooltipOverlay>
-        </PropertyLabel>
-        <TooltipOverlay content={url}>
-          <PropertyUrl>{url}</PropertyUrl>
-        </TooltipOverlay>
-      </PropertyWide>
-      {stickyProperties &&
-        stickyProperties.map(({ label, val, fieldName }, i) => (
-          <Property key={i}>
-            {fieldName ? (
-              <PropertyLabel>
-                <TooltipOverlay content={fieldNameHelper(fieldName)}>
-                  <span>{label}</span>
-                </TooltipOverlay>
-              </PropertyLabel>
-            ) : (
-              <PropertyLabel>{label}</PropertyLabel>
-            )}
-            <PropertyValue>{String(val)}</PropertyValue>
-          </Property>
-        ))}
-    </PropertiesContainer>
-  );
-}
diff --git a/x-pack/plugins/apm/public/components/shared/StickyProperties/StickyProperties.test.js b/x-pack/plugins/apm/public/components/shared/StickyProperties/StickyProperties.test.js
new file mode 100644
index 0000000000000..b35069a44f219
--- /dev/null
+++ b/x-pack/plugins/apm/public/components/shared/StickyProperties/StickyProperties.test.js
@@ -0,0 +1,52 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { StickyProperties } from './index';
+import { mount } from 'enzyme';
+import { USER_ID, REQUEST_URL_FULL } from '../../../../common/constants';
+import { toJson, mockMoment } from '../../../utils/testHelpers';
+
+describe('StickyProperties', () => {
+  beforeEach(mockMoment);
+
+  it('should render', () => {
+    const stickyProperties = [
+      {
+        label: 'Timestamp',
+        fieldName: '@timestamp',
+        val: 1536405447640
+      },
+      {
+        fieldName: REQUEST_URL_FULL,
+        label: 'URL',
+        val: 'https://www.elastic.co/test',
+        truncated: true
+      },
+      {
+        label: 'Request method',
+        fieldName: 'context.request.method',
+        val: 'GET'
+      },
+      {
+        label: 'Handled',
+        fieldName: 'error.exception.handled',
+        val: 'true'
+      },
+      {
+        label: 'User ID',
+        fieldName: USER_ID,
+        val: 1337
+      }
+    ];
+
+    const wrapper = mount(
+      <StickyProperties stickyProperties={stickyProperties} />
+    );
+
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+});
diff --git a/x-pack/plugins/apm/public/components/shared/StickyProperties/__snapshots__/StickyProperties.test.js.snap b/x-pack/plugins/apm/public/components/shared/StickyProperties/__snapshots__/StickyProperties.test.js.snap
new file mode 100644
index 0000000000000..e71121fbe578e
--- /dev/null
+++ b/x-pack/plugins/apm/public/components/shared/StickyProperties/__snapshots__/StickyProperties.test.js.snap
@@ -0,0 +1,168 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StickyProperties should render 1`] = `
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 0 24px;
+  width: 100%;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+}
+
+.c1 {
+  width: 33%;
+  margin-bottom: 16px;
+}
+
+.c2 {
+  margin-bottom: 8px;
+  font-size: 12px;
+  color: #999999;
+}
+
+.c2 span {
+  cursor: help;
+}
+
+.c4 {
+  color: #999999;
+}
+
+.c3 {
+  display: inline-block;
+  line-height: 16px;
+}
+
+.c5 {
+  display: inline-block;
+  line-height: 16px;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+<div
+  className="c0"
+>
+  <div
+    className="c1"
+  >
+    <div
+      className="c2"
+    >
+      <span
+        aria-describedby="overlay1"
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+      >
+        Timestamp
+      </span>
+    </div>
+    <div
+      className="c3"
+    >
+      1337 minutes ago (mocking 1536405447)
+       
+      <span
+        className="c4"
+      >
+        (
+        1st of January (mocking 1536405447)
+        )
+      </span>
+    </div>
+  </div>
+  <div
+    className="c1"
+  >
+    <div
+      className="c2"
+    >
+      <span
+        aria-describedby="overlay2"
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+      >
+        URL
+      </span>
+    </div>
+    <span
+      aria-describedby="overlay3"
+      className="c5"
+      onMouseOut={[Function]}
+      onMouseOver={[Function]}
+    >
+      https://www.elastic.co/test
+    </span>
+  </div>
+  <div
+    className="c1"
+  >
+    <div
+      className="c2"
+    >
+      <span
+        aria-describedby="overlay4"
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+      >
+        Request method
+      </span>
+    </div>
+    <div
+      className="c3"
+    >
+      GET
+    </div>
+  </div>
+  <div
+    className="c1"
+  >
+    <div
+      className="c2"
+    >
+      <span
+        aria-describedby="overlay5"
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+      >
+        Handled
+      </span>
+    </div>
+    <div
+      className="c3"
+    >
+      true
+    </div>
+  </div>
+  <div
+    className="c1"
+  >
+    <div
+      className="c2"
+    >
+      <span
+        aria-describedby="overlay6"
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+      >
+        User ID
+      </span>
+    </div>
+    <div
+      className="c3"
+    >
+      1337
+    </div>
+  </div>
+</div>
+`;
diff --git a/x-pack/plugins/apm/public/components/shared/StickyProperties/index.js b/x-pack/plugins/apm/public/components/shared/StickyProperties/index.js
new file mode 100644
index 0000000000000..3c690e3031c6a
--- /dev/null
+++ b/x-pack/plugins/apm/public/components/shared/StickyProperties/index.js
@@ -0,0 +1,116 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import styled from 'styled-components';
+import moment from 'moment';
+
+import {
+  unit,
+  units,
+  px,
+  fontSizes,
+  colors,
+  truncate
+} from '../../../style/variables';
+
+import TooltipOverlay, { fieldNameHelper } from '../../shared/TooltipOverlay';
+
+const PropertiesContainer = styled.div`
+  display: flex;
+  padding: 0 ${px(units.plus)};
+  width: 100%;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+`;
+
+const Property = styled.div`
+  width: 33%;
+  margin-bottom: ${px(unit)};
+`;
+
+const PropertyLabel = styled.div`
+  margin-bottom: ${px(units.half)};
+  font-size: ${fontSizes.small};
+  color: ${colors.gray3};
+
+  span {
+    cursor: help;
+  }
+`;
+
+const PropertyValueDimmed = styled.span`
+  color: ${colors.gray3};
+`;
+
+const PropertyValue = styled.div`
+  display: inline-block;
+  line-height: ${px(unit)};
+`;
+
+const PropertyValueTruncated = styled.span`
+  display: inline-block;
+  line-height: ${px(unit)};
+  ${truncate('100%')};
+`;
+
+function TimestampValue({ timestamp }) {
+  const time = moment(timestamp);
+  const timeAgo = timestamp ? time.fromNow() : 'N/A';
+  const timestampFull = timestamp
+    ? time.format('MMMM Do YYYY, HH:mm:ss.SSS')
+    : 'N/A';
+
+  return (
+    <PropertyValue>
+      {timeAgo} <PropertyValueDimmed>({timestampFull})</PropertyValueDimmed>
+    </PropertyValue>
+  );
+}
+
+function getPropertyLabel({ fieldName, label }) {
+  if (fieldName) {
+    return (
+      <PropertyLabel>
+        <TooltipOverlay content={fieldNameHelper(fieldName)}>
+          <span>{label}</span>
+        </TooltipOverlay>
+      </PropertyLabel>
+    );
+  }
+
+  return <PropertyLabel>{label}</PropertyLabel>;
+}
+
+function getPropertyValue({ val, fieldName, truncated = false }) {
+  if (fieldName === '@timestamp') {
+    return <TimestampValue timestamp={val} />;
+  }
+
+  if (truncated) {
+    return (
+      <TooltipOverlay content={String(val)}>
+        <PropertyValueTruncated>{String(val)}</PropertyValueTruncated>
+      </TooltipOverlay>
+    );
+  }
+
+  return <PropertyValue>{String(val)}</PropertyValue>;
+}
+
+export function StickyProperties({ stickyProperties }) {
+  return (
+    <PropertiesContainer>
+      {stickyProperties &&
+        stickyProperties.map((prop, i) => (
+          <Property key={i}>
+            {getPropertyLabel(prop)}
+            {getPropertyValue(prop)}
+          </Property>
+        ))}
+    </PropertiesContainer>
+  );
+}
diff --git a/x-pack/plugins/apm/public/services/__test__/callApi.test.js b/x-pack/plugins/apm/public/services/__test__/callApi.test.js
index 79a988a4099a3..7e5439b2e6eb4 100644
--- a/x-pack/plugins/apm/public/services/__test__/callApi.test.js
+++ b/x-pack/plugins/apm/public/services/__test__/callApi.test.js
@@ -23,39 +23,57 @@ describe('callApi', () => {
   });
 
   describe('callApi', () => {
-    describe('debug param', () => {
-      describe('when apm_debug is true', () => {
-        beforeEach(() => {
-          sessionStorage.setItem('apm_debug', 'true');
-        });
-
-        it('should add debug param for APM endpoints', async () => {
-          await callApi({ pathname: `/api/apm/status/server` });
-
-          expect(kfetchSpy).toHaveBeenCalledWith(
-            { pathname: '/api/apm/status/server', query: { _debug: true } },
-            { camelcase: true }
-          );
-        });
-
-        it('should not add debug param for non-APM endpoints', async () => {
-          await callApi({ pathname: `/api/kibana` });
-
-          expect(kfetchSpy).toHaveBeenCalledWith(
-            { pathname: '/api/kibana' },
-            { camelcase: true }
-          );
-        });
+    describe('apm_debug', () => {
+      beforeEach(() => {
+        sessionStorage.setItem('apm_debug', 'true');
+      });
+
+      it('should add debug param for APM endpoints', async () => {
+        await callApi({ pathname: `/api/apm/status/server` });
+
+        expect(kfetchSpy).toHaveBeenCalledWith(
+          { pathname: '/api/apm/status/server', query: { _debug: true } },
+          expect.any(Object)
+        );
+      });
+
+      it('should not add debug param for non-APM endpoints', async () => {
+        await callApi({ pathname: `/api/kibana` });
+
+        expect(kfetchSpy).toHaveBeenCalledWith(
+          { pathname: '/api/kibana' },
+          expect.any(Object)
+        );
+      });
+    });
+
+    describe('prependBasePath', () => {
+      it('should be true by default', async () => {
+        await callApi({ pathname: `/api/kibana` });
+
+        expect(kfetchSpy).toHaveBeenCalledWith(
+          { pathname: '/api/kibana' },
+          { prependBasePath: true }
+        );
+      });
+
+      it('should respect settings', async () => {
+        await callApi({ pathname: `/api/kibana` }, { prependBasePath: false });
+
+        expect(kfetchSpy).toHaveBeenCalledWith(
+          { pathname: '/api/kibana' },
+          { prependBasePath: false }
+        );
       });
     });
 
     describe('camelcase', () => {
-      it('camelcase param should be true by default', async () => {
+      it('should be true by default', async () => {
         const res = await callApi({ pathname: `/api/kibana` });
 
         expect(kfetchSpy).toHaveBeenCalledWith(
           { pathname: '/api/kibana' },
-          { camelcase: true }
+          expect.any(Object)
         );
 
         expect(res).toEqual({ myKey: 'hello world' });
@@ -69,7 +87,7 @@ describe('callApi', () => {
 
         expect(kfetchSpy).toHaveBeenCalledWith(
           { pathname: '/api/kibana' },
-          { camelcase: false }
+          expect.any(Object)
         );
 
         expect(res).toEqual({ my_key: 'hello world' });
diff --git a/x-pack/plugins/apm/public/services/rest/callApi.js b/x-pack/plugins/apm/public/services/rest/callApi.js
index 636278471f6f9..d33bea0644d5d 100644
--- a/x-pack/plugins/apm/public/services/rest/callApi.js
+++ b/x-pack/plugins/apm/public/services/rest/callApi.js
@@ -27,13 +27,11 @@ function fetchOptionsWithDebug(fetchOptions) {
   };
 }
 
-export async function callApi(fetchOptions, kibanaOptions) {
-  const combinedKibanaOptions = {
-    camelcase: true,
-    ...kibanaOptions
-  };
-
+export async function callApi(
+  fetchOptions,
+  { camelcase = true, prependBasePath = true } = {}
+) {
   const combinedFetchOptions = fetchOptionsWithDebug(fetchOptions);
-  const res = await kfetch(combinedFetchOptions, combinedKibanaOptions);
-  return combinedKibanaOptions.camelcase ? camelizeKeys(res) : res;
+  const res = await kfetch(combinedFetchOptions, { prependBasePath });
+  return camelcase ? camelizeKeys(res) : res;
 }
diff --git a/x-pack/plugins/apm/public/store/reactReduxRequest/detailsCharts.js b/x-pack/plugins/apm/public/store/reactReduxRequest/transactionDetailsCharts.js
similarity index 86%
rename from x-pack/plugins/apm/public/store/reactReduxRequest/detailsCharts.js
rename to x-pack/plugins/apm/public/store/reactReduxRequest/transactionDetailsCharts.js
index 0c38eb3f8f1e0..484555bf86328 100644
--- a/x-pack/plugins/apm/public/store/reactReduxRequest/detailsCharts.js
+++ b/x-pack/plugins/apm/public/store/reactReduxRequest/transactionDetailsCharts.js
@@ -12,7 +12,7 @@ import { Request } from 'react-redux-request';
 import { loadCharts } from '../../services/rest/apm';
 import { createInitialDataSelector } from './helpers';
 
-const ID = 'detailsCharts';
+const ID = 'transactionDetailsCharts';
 const INITIAL_DATA = {
   totalHits: 0,
   dates: [],
@@ -23,7 +23,7 @@ const INITIAL_DATA = {
 
 const withInitialData = createInitialDataSelector(INITIAL_DATA);
 
-export const getDetailsCharts = createSelector(
+export const getTransactionDetailsCharts = createSelector(
   getUrlParams,
   state => withInitialData(state.reactReduxRequest[ID]),
   (urlParams, detailCharts) => {
@@ -34,7 +34,7 @@ export const getDetailsCharts = createSelector(
   }
 );
 
-export function DetailsChartsRequest({ urlParams, render }) {
+export function TransactionDetailsChartsRequest({ urlParams, render }) {
   const {
     serviceName,
     start,
@@ -55,7 +55,7 @@ export function DetailsChartsRequest({ urlParams, render }) {
       args={[
         { serviceName, start, end, transactionType, transactionName, kuery }
       ]}
-      selector={getDetailsCharts}
+      selector={getTransactionDetailsCharts}
       render={render}
     />
   );
diff --git a/x-pack/plugins/apm/public/store/reactReduxRequest/overviewCharts.js b/x-pack/plugins/apm/public/store/reactReduxRequest/transactionOverviewCharts.js
similarity index 86%
rename from x-pack/plugins/apm/public/store/reactReduxRequest/overviewCharts.js
rename to x-pack/plugins/apm/public/store/reactReduxRequest/transactionOverviewCharts.js
index 347a5fa86303f..a5313c7efda10 100644
--- a/x-pack/plugins/apm/public/store/reactReduxRequest/overviewCharts.js
+++ b/x-pack/plugins/apm/public/store/reactReduxRequest/transactionOverviewCharts.js
@@ -12,7 +12,7 @@ import { getUrlParams } from '../urlParams';
 import { Request } from 'react-redux-request';
 import { loadCharts } from '../../services/rest/apm';
 
-const ID = 'overviewCharts';
+const ID = 'transactionOverviewCharts';
 const INITIAL_DATA = {
   totalHits: 0,
   dates: [],
@@ -21,7 +21,7 @@ const INITIAL_DATA = {
   overallAvgDuration: null
 };
 
-export const getOverviewCharts = createSelector(
+export const getTransactionOverviewCharts = createSelector(
   getUrlParams,
   state => state.reactReduxRequest[ID],
   (urlParams, overviewCharts = {}) => {
@@ -41,7 +41,7 @@ export function hasDynamicBaseline(state) {
   );
 }
 
-export function OverviewChartsRequest({ urlParams, render }) {
+export function TransactionOverviewChartsRequest({ urlParams, render }) {
   const { serviceName, start, end, transactionType, kuery } = urlParams;
 
   if (!(serviceName && start && end && transactionType)) {
@@ -53,7 +53,7 @@ export function OverviewChartsRequest({ urlParams, render }) {
       id={ID}
       fn={loadCharts}
       args={[{ serviceName, start, end, transactionType, kuery }]}
-      selector={getOverviewCharts}
+      selector={getTransactionOverviewCharts}
       render={render}
     />
   );
diff --git a/x-pack/plugins/apm/public/utils/testHelpers.js b/x-pack/plugins/apm/public/utils/testHelpers.js
index 756f7f41305a4..6cc1de8b648e6 100644
--- a/x-pack/plugins/apm/public/utils/testHelpers.js
+++ b/x-pack/plugins/apm/public/utils/testHelpers.js
@@ -69,11 +69,11 @@ export function mountWithStore(Component, storeState = {}) {
 export function mockMoment() {
   // avoid timezone issues
   jest.spyOn(moment.prototype, 'format').mockImplementation(function() {
-    return this.unix();
+    return `1st of January (mocking ${this.unix()})`;
   });
 
   // convert relative time to absolute time to avoid timing issues
   jest.spyOn(moment.prototype, 'fromNow').mockImplementation(function() {
-    return this.unix();
+    return `1337 minutes ago (mocking ${this.unix()})`;
   });
 }