From a03c99c1b84cedcfcbad4421877d4812e3dd00ce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Casper=20Hu=CC=88bertz?= Date: Thu, 12 Jul 2018 14:09:41 +0200 Subject: [PATCH 1/8] Adding fontSize from variables --- .../TransactionDetails/Transaction/Spans/SpanDetails/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/Spans/SpanDetails/index.js b/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/Spans/SpanDetails/index.js index d8d7a435b8e24..61147a6bf9683 100644 --- a/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/Spans/SpanDetails/index.js +++ b/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/Spans/SpanDetails/index.js @@ -26,6 +26,7 @@ import { borderRadius, fontFamilyCode, fontSizes, + fontSize, truncate } from '../../../../../../style/variables'; import TooltipOverlay, { From 836fa067d3302e09f0223d7d9433aa36f5262d2f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Casper=20Hu=CC=88bertz?= Date: Thu, 12 Jul 2018 14:09:59 +0200 Subject: [PATCH 2/8] SectionHeader style added --- .../Transaction/Spans/SpanDetails/index.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/Spans/SpanDetails/index.js b/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/Spans/SpanDetails/index.js index 61147a6bf9683..e4a77b496db41 100644 --- a/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/Spans/SpanDetails/index.js +++ b/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/Spans/SpanDetails/index.js @@ -78,6 +78,12 @@ const LegendIndicator = styled(Indicator)` display: inline-block; `; +const SectionHeader = styled.div` + margin-top: ${px(unit)}; + font-size: ${fontSize}; + color: ${colors.gray1}; +`; + const StackTraceContainer = styled.div` margin-top: ${px(unit)}; `; From 6f5b6cdbc1764be98a024266d28c11042dbead2e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Casper=20Hu=CC=88bertz?= Date: Thu, 12 Jul 2018 14:10:27 +0200 Subject: [PATCH 3/8] Adding section headers Needed titling for DB statement and Stacktrace on the page --- .../Transaction/Spans/SpanDetails/index.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/Spans/SpanDetails/index.js b/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/Spans/SpanDetails/index.js index e4a77b496db41..9175f0ca3d4f8 100644 --- a/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/Spans/SpanDetails/index.js +++ b/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/Spans/SpanDetails/index.js @@ -162,8 +162,16 @@ function SpanDetails({ span, spanTypeLabel, spanTypeColor, totalDuration }) { + + DB Statement + + + + Stacktrace + + From c0b2b004b641482b2c6f9ae396e6c6a8d7d157d7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Casper=20Hu=CC=88bertz?= Date: Thu, 12 Jul 2018 14:17:03 +0200 Subject: [PATCH 4/8] Pluralization --- .../TransactionDetails/Transaction/Spans/SpanDetails/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/Spans/SpanDetails/index.js b/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/Spans/SpanDetails/index.js index 9175f0ca3d4f8..2fa8d17b3e75a 100644 --- a/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/Spans/SpanDetails/index.js +++ b/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/Spans/SpanDetails/index.js @@ -169,7 +169,7 @@ function SpanDetails({ span, spanTypeLabel, spanTypeColor, totalDuration }) { - Stacktrace + Stacktraces From 77e387186f27e759f0f68b167b199f57011d1cbb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Casper=20Hu=CC=88bertz?= Date: Thu, 12 Jul 2018 15:00:06 +0200 Subject: [PATCH 5/8] Adding fontSize variable --- .../plugins/apm/public/components/shared/UIComponents.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/x-pack/plugins/apm/public/components/shared/UIComponents.js b/x-pack/plugins/apm/public/components/shared/UIComponents.js index e286b68c7e495..4c3584cee07ee 100644 --- a/x-pack/plugins/apm/public/components/shared/UIComponents.js +++ b/x-pack/plugins/apm/public/components/shared/UIComponents.js @@ -5,7 +5,14 @@ */ import styled from 'styled-components'; -import { unit, units, px, fontSizes, colors } from '../../style/variables'; +import { + unit, + units, + px, + fontSizes, + colors, + fontSize +} from '../../style/variables'; import { RelativeLink } from '../../utils/url'; export const HeaderContainer = styled.div` From 8802d5cb0e58ddae09da5e8ec9a4ed29e5d42143 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Casper=20Hu=CC=88bertz?= Date: Thu, 12 Jul 2018 15:00:19 +0200 Subject: [PATCH 6/8] Creating new header title style --- x-pack/plugins/apm/public/components/shared/UIComponents.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/x-pack/plugins/apm/public/components/shared/UIComponents.js b/x-pack/plugins/apm/public/components/shared/UIComponents.js index 4c3584cee07ee..97030a3fa6d79 100644 --- a/x-pack/plugins/apm/public/components/shared/UIComponents.js +++ b/x-pack/plugins/apm/public/components/shared/UIComponents.js @@ -47,6 +47,12 @@ export const HeaderSmall = styled.h3` ${props => props.css}; `; +export const HeaderXSmall = styled.h4` + margin: ${px(units.plus)} 0; + font-size: ${fontSize}; + ${props => props.css}; +`; + export const Tab = styled.div` display: inline-block; font-size: ${fontSizes.large}; From 78914c8469c43e8b6cb845fde754fa0963f5dcd0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Casper=20Hu=CC=88bertz?= Date: Thu, 12 Jul 2018 15:02:21 +0200 Subject: [PATCH 7/8] Moving title into Stacktrace container --- .../Transaction/Spans/SpanDetails/index.js | 51 ++++++++----------- .../components/shared/Stacktrace/index.js | 2 + 2 files changed, 22 insertions(+), 31 deletions(-) diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/Spans/SpanDetails/index.js b/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/Spans/SpanDetails/index.js index 2fa8d17b3e75a..3ef67277a68c7 100644 --- a/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/Spans/SpanDetails/index.js +++ b/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/Spans/SpanDetails/index.js @@ -26,7 +26,6 @@ import { borderRadius, fontFamilyCode, fontSizes, - fontSize, truncate } from '../../../../../../style/variables'; import TooltipOverlay, { @@ -39,6 +38,7 @@ import SyntaxHighlighter, { import { xcode } from 'react-syntax-highlighter/dist/styles'; import sql from 'react-syntax-highlighter/dist/languages/sql'; +import { HeaderXSmall } from '../../../../../shared/UIComponents'; registerLanguage('sql', sql); @@ -78,12 +78,6 @@ const LegendIndicator = styled(Indicator)` display: inline-block; `; -const SectionHeader = styled.div` - margin-top: ${px(unit)}; - font-size: ${fontSize}; - color: ${colors.gray1}; -`; - const StackTraceContainer = styled.div` margin-top: ${px(unit)}; `; @@ -162,16 +156,8 @@ function SpanDetails({ span, spanTypeLabel, spanTypeColor, totalDuration }) { - - DB Statement - - - - Stacktraces - - @@ -189,22 +175,25 @@ function DatabaseContext({ dbContext }) { } return ( - - - {dbContext.statement} - - +
+ DB Statement + + + {dbContext.statement} + + +
); } diff --git a/x-pack/plugins/apm/public/components/shared/Stacktrace/index.js b/x-pack/plugins/apm/public/components/shared/Stacktrace/index.js index b20988a517e6c..6aeb3b0e6a857 100644 --- a/x-pack/plugins/apm/public/components/shared/Stacktrace/index.js +++ b/x-pack/plugins/apm/public/components/shared/Stacktrace/index.js @@ -12,6 +12,7 @@ import { Ellipsis } from '../../shared/Icons'; import { units, px } from '../../../style/variables'; import EmptyMessage from '../../shared/EmptyMessage'; import { EuiLink } from '@elastic/eui'; +import { HeaderXSmall } from '../UIComponents'; const LibraryFrameToggle = styled.div` margin: 0 0 ${px(units.plus)} 0; @@ -74,6 +75,7 @@ class Stacktrace extends PureComponent { return (
+ Stacktraces {getCollapsedLibraryFrames(stackframes).map((item, i) => { if (!item.libraryFrame) { return ( From 4d8c7e675eafd795537dc4c74d63f6f59392bcd8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Casper=20Hu=CC=88bertz?= Date: Thu, 12 Jul 2018 20:57:01 +0200 Subject: [PATCH 8/8] Updated snapshots --- .../__snapshots__/DetailView.test.js.snap | 262 +++++++++--------- 1 file changed, 136 insertions(+), 126 deletions(-) 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 d2b96e9bd1f43..1c47d1665a5da 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 @@ -64,6 +64,11 @@ exports[`DetailView should render with data 1`] = ` margin: 0; } +.c14 { + margin: 24px 0; + font-size: 14px; +} + .c11 { display: inline-block; font-size: 16px; @@ -89,12 +94,12 @@ exports[`DetailView should render with data 1`] = ` user-select: none; } -.c18 { +.c19 { position: relative; border-radius: 0 0 5px 5px; } -.c19 { +.c20 { position: absolute; width: 100%; height: 18px; @@ -103,7 +108,7 @@ exports[`DetailView should render with data 1`] = ` background-color: #FCF2E6; } -.c20 { +.c21 { position: absolute; top: 0; left: 0; @@ -111,7 +116,7 @@ exports[`DetailView should render with data 1`] = ` background: #f5f5f5; } -.c21 { +.c22 { position: relative; min-width: 42px; padding-left: 8px; @@ -122,11 +127,11 @@ exports[`DetailView should render with data 1`] = ` border-right: 1px solid #d9d9d9; } -.c21:last-of-type { +.c22:last-of-type { border-radius: 0 0 0 5px; } -.c22 { +.c23 { position: relative; min-width: 42px; padding-left: 8px; @@ -138,22 +143,22 @@ exports[`DetailView should render with data 1`] = ` background-color: #FCF2E6; } -.c22:last-of-type { +.c23:last-of-type { border-radius: 0 0 0 5px; } -.c23 { +.c24 { overflow: auto; margin: 0 0 0 42px; padding: 0; background-color: #ffffff; } -.c23:last-of-type { +.c24:last-of-type { border-radius: 0 0 5px 0; } -.c24 { +.c25 { margin: 0; color: inherit; background: inherit; @@ -164,7 +169,7 @@ exports[`DetailView should render with data 1`] = ` line-height: 18px; } -.c25 { +.c26 { position: relative; padding: 0; margin: 0; @@ -172,18 +177,18 @@ exports[`DetailView should render with data 1`] = ` z-index: 2; } -.c15 { +.c16 { color: #999999; padding: 8px; border-bottom: 1px solid #d9d9d9; border-radius: 5px 5px 0 0; } -.c17 { +.c18 { font-weight: bold; } -.c14 { +.c15 { margin: 0 0 24px 0; position: relative; font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace; @@ -192,11 +197,11 @@ exports[`DetailView should render with data 1`] = ` background: #f5f5f5; } -.c14 .c16 { +.c15 .c17 { color: #000000; } -.c26 { +.c27 { margin: 0 0 24px 0; -webkit-user-select: none; -moz-user-select: none; @@ -500,138 +505,143 @@ exports[`DetailView should render with data 1`] = ` className="c13" >
-
+ Stacktraces + +
server/coffee.js in <anonymous> at line 9
2 .
3 .
4 .
5 .
6 .
7 .
8 .
9 .
10 .
11 .
12 .
13 .
14 .
15 .
16 . 
               
                 
 
               
             
               
                 
             
               
                 
             
               
                 
 
               
             
               
                 
             
               
                 
 
               
             
               
                 app.get(
                 
             
               
                   
                 
             
               
                     res.send(
                 
             
               
                   } 
                 
             
               
                     res.send(
                 
             
               
                   }
               
             
               
                 })
               
             
               
                 
 
               
             
               
                 app.get(
                 
       

         

           

       

         

           
             server.js
           
            in
            
           
             <anonymous>
           
            at
            
           
             line 
             27
           
         

         

           

           

             

               20
               .
             

             

               21
               .
             

             

               22
               .
             

             

               23
               .
             

             

               24
               .
             

             

               25
               .
             

             

               26
               .
             

             

               27
               .
             

             

               28
               .
             

             

               29
               .
             

             

               30
               .
             

             

               31
               .
             

             

               32
               .
             

             

               33
               .
             

             

               34
               .
             

           

           

             
               
                 app.use(
                 
             

             
               
                 app.use(express.static(
                 
             

             
               
                 app.use(
                 
             

             
               
                   apm.setTag(
                 
             

             
               
                   apm.setTag(
                 
             

             
               
                   apm.setTag(
                 
             

             
               
                   apm.setTag(
                 
             

             
               
                   next()
               
             

             
               
                 })
               
             

             
               
                 
 
               
             

             
               
                 app.use(
                 
             

             
               
                 app.use(
                 
             

             
               
                 app.get(
                 
             

             
               
                   res.sendFile(path.resolve(__dirname, 
                 
             

             
               
                 })
               
@@ -1788,7 +1798,7 @@ exports[`DetailView should render with data 1`] = `