[APM] Add section titles to span detail modal (#20717)

* Adding fontSize from variables

* SectionHeader style added

* Adding section headers

Needed titling for DB statement and Stacktrace on the page

* Pluralization

* Adding fontSize variable

* Creating new header title style

* Moving title into Stacktrace container

* Updated snapshots
This commit is contained in:
Casper Hübertz 2018-07-13 09:15:28 +02:00 committed by GitHub
parent b142f80d7d
commit ecefab55e6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 183 additions and 154 deletions

View file

@ -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,21 +116,6 @@ exports[`DetailView should render with data 1`] = `
background: #f5f5f5;
}
.c21 {
position: relative;
min-width: 42px;
padding-left: 8px;
padding-right: 4px;
color: #999999;
line-height: 18px;
text-align: right;
border-right: 1px solid #d9d9d9;
}
.c21:last-of-type {
border-radius: 0 0 0 5px;
}
.c22 {
position: relative;
min-width: 42px;
@ -135,7 +125,6 @@ exports[`DetailView should render with data 1`] = `
line-height: 18px;
text-align: right;
border-right: 1px solid #d9d9d9;
background-color: #FCF2E6;
}
.c22:last-of-type {
@ -143,17 +132,33 @@ exports[`DetailView should render with data 1`] = `
}
.c23 {
position: relative;
min-width: 42px;
padding-left: 8px;
padding-right: 4px;
color: #999999;
line-height: 18px;
text-align: right;
border-right: 1px solid #d9d9d9;
background-color: #FCF2E6;
}
.c23:last-of-type {
border-radius: 0 0 0 5px;
}
.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"
>
<div>
<div
<h4
className="c14"
>
Stacktraces
</h4>
<div
className="c15"
>
<div
className="c15"
className="c16"
>
<span
className="c16 c17"
className="c17 c18"
>
server/coffee.js
</span>
in
<span
className="c16 c17"
className="c17 c18"
>
&lt;anonymous&gt;
</span>
at
<span
className="c16 c17"
className="c17 c18"
>
line
9
</span>
</div>
<div
className="c18"
className="c19"
>
<div
className="c19"
className="c20"
/>
<div
className="c20"
className="c21"
>
<div
className="c21"
className="c22"
>
2
.
</div>
<div
className="c21"
className="c22"
>
3
.
</div>
<div
className="c21"
className="c22"
>
4
.
</div>
<div
className="c21"
className="c22"
>
5
.
</div>
<div
className="c21"
className="c22"
>
6
.
</div>
<div
className="c21"
className="c22"
>
7
.
</div>
<div
className="c21"
className="c22"
>
8
.
</div>
<div
className="c22"
className="c23"
>
9
.
</div>
<div
className="c21"
className="c22"
>
10
.
</div>
<div
className="c21"
className="c22"
>
11
.
</div>
<div
className="c21"
className="c22"
>
12
.
</div>
<div
className="c21"
className="c22"
>
13
.
</div>
<div
className="c21"
className="c22"
>
14
.
</div>
<div
className="c21"
className="c22"
>
15
.
</div>
<div
className="c21"
className="c22"
>
16
.
</div>
</div>
<div
className="c23"
className="c24"
>
<pre
className="c24"
className="c25"
style={
Object {
"background": "#fff",
@ -643,14 +653,14 @@ exports[`DetailView should render with data 1`] = `
}
>
<code
className="c25"
className="c26"
>
</code>
</pre>
<pre
className="c24"
className="c25"
style={
Object {
"background": "#fff",
@ -662,7 +672,7 @@ exports[`DetailView should render with data 1`] = `
}
>
<code
className="c25"
className="c26"
>
<span
style={
@ -697,7 +707,7 @@ exports[`DetailView should render with data 1`] = `
</code>
</pre>
<pre
className="c24"
className="c25"
style={
Object {
"background": "#fff",
@ -709,7 +719,7 @@ exports[`DetailView should render with data 1`] = `
}
>
<code
className="c25"
className="c26"
>
<span
style={
@ -744,7 +754,7 @@ exports[`DetailView should render with data 1`] = `
</code>
</pre>
<pre
className="c24"
className="c25"
style={
Object {
"background": "#fff",
@ -756,14 +766,14 @@ exports[`DetailView should render with data 1`] = `
}
>
<code
className="c25"
className="c26"
>
</code>
</pre>
<pre
className="c24"
className="c25"
style={
Object {
"background": "#fff",
@ -775,7 +785,7 @@ exports[`DetailView should render with data 1`] = `
}
>
<code
className="c25"
className="c26"
>
<span
style={
@ -810,7 +820,7 @@ exports[`DetailView should render with data 1`] = `
</code>
</pre>
<pre
className="c24"
className="c25"
style={
Object {
"background": "#fff",
@ -822,14 +832,14 @@ exports[`DetailView should render with data 1`] = `
}
>
<code
className="c25"
className="c26"
>
</code>
</pre>
<pre
className="c24"
className="c25"
style={
Object {
"background": "#fff",
@ -841,7 +851,7 @@ exports[`DetailView should render with data 1`] = `
}
>
<code
className="c25"
className="c26"
>
app.get(
<span
@ -882,7 +892,7 @@ exports[`DetailView should render with data 1`] = `
</code>
</pre>
<pre
className="c24"
className="c25"
style={
Object {
"background": "#fff",
@ -894,7 +904,7 @@ exports[`DetailView should render with data 1`] = `
}
>
<code
className="c25"
className="c26"
>
<span
@ -920,7 +930,7 @@ exports[`DetailView should render with data 1`] = `
</code>
</pre>
<pre
className="c24"
className="c25"
style={
Object {
"background": "#fff",
@ -932,7 +942,7 @@ exports[`DetailView should render with data 1`] = `
}
>
<code
className="c25"
className="c26"
>
res.send(
<span
@ -948,7 +958,7 @@ exports[`DetailView should render with data 1`] = `
</code>
</pre>
<pre
className="c24"
className="c25"
style={
Object {
"background": "#fff",
@ -960,7 +970,7 @@ exports[`DetailView should render with data 1`] = `
}
>
<code
className="c25"
className="c26"
>
}
<span
@ -976,7 +986,7 @@ exports[`DetailView should render with data 1`] = `
</code>
</pre>
<pre
className="c24"
className="c25"
style={
Object {
"background": "#fff",
@ -988,7 +998,7 @@ exports[`DetailView should render with data 1`] = `
}
>
<code
className="c25"
className="c26"
>
res.send(
<span
@ -1004,7 +1014,7 @@ exports[`DetailView should render with data 1`] = `
</code>
</pre>
<pre
className="c24"
className="c25"
style={
Object {
"background": "#fff",
@ -1016,13 +1026,13 @@ exports[`DetailView should render with data 1`] = `
}
>
<code
className="c25"
className="c26"
>
}
</code>
</pre>
<pre
className="c24"
className="c25"
style={
Object {
"background": "#fff",
@ -1034,13 +1044,13 @@ exports[`DetailView should render with data 1`] = `
}
>
<code
className="c25"
className="c26"
>
})
</code>
</pre>
<pre
className="c24"
className="c25"
style={
Object {
"background": "#fff",
@ -1052,14 +1062,14 @@ exports[`DetailView should render with data 1`] = `
}
>
<code
className="c25"
className="c26"
>
</code>
</pre>
<pre
className="c24"
className="c25"
style={
Object {
"background": "#fff",
@ -1071,7 +1081,7 @@ exports[`DetailView should render with data 1`] = `
}
>
<code
className="c25"
className="c26"
>
app.get(
<span
@ -1116,7 +1126,7 @@ exports[`DetailView should render with data 1`] = `
</div>
<div>
<div
className="c26"
className="c27"
>
<button
className="euiLink euiLink--primary"
@ -1143,137 +1153,137 @@ exports[`DetailView should render with data 1`] = `
/>
</div>
<div
className="c14"
className="c15"
>
<div
className="c15"
className="c16"
>
<span
className="c16 c17"
className="c17 c18"
>
server.js
</span>
in
<span
className="c16 c17"
className="c17 c18"
>
&lt;anonymous&gt;
</span>
at
<span
className="c16 c17"
className="c17 c18"
>
line
27
</span>
</div>
<div
className="c18"
className="c19"
>
<div
className="c19"
className="c20"
/>
<div
className="c20"
className="c21"
>
<div
className="c21"
className="c22"
>
20
.
</div>
<div
className="c21"
className="c22"
>
21
.
</div>
<div
className="c21"
className="c22"
>
22
.
</div>
<div
className="c21"
className="c22"
>
23
.
</div>
<div
className="c21"
className="c22"
>
24
.
</div>
<div
className="c21"
className="c22"
>
25
.
</div>
<div
className="c21"
className="c22"
>
26
.
</div>
<div
className="c22"
className="c23"
>
27
.
</div>
<div
className="c21"
className="c22"
>
28
.
</div>
<div
className="c21"
className="c22"
>
29
.
</div>
<div
className="c21"
className="c22"
>
30
.
</div>
<div
className="c21"
className="c22"
>
31
.
</div>
<div
className="c21"
className="c22"
>
32
.
</div>
<div
className="c21"
className="c22"
>
33
.
</div>
<div
className="c21"
className="c22"
>
34
.
</div>
</div>
<div
className="c23"
className="c24"
>
<pre
className="c24"
className="c25"
style={
Object {
"background": "#fff",
@ -1285,7 +1295,7 @@ exports[`DetailView should render with data 1`] = `
}
>
<code
className="c25"
className="c26"
>
app.use(
<span
@ -1311,7 +1321,7 @@ exports[`DetailView should render with data 1`] = `
</code>
</pre>
<pre
className="c24"
className="c25"
style={
Object {
"background": "#fff",
@ -1323,7 +1333,7 @@ exports[`DetailView should render with data 1`] = `
}
>
<code
className="c25"
className="c26"
>
app.use(express.static(
<span
@ -1339,7 +1349,7 @@ exports[`DetailView should render with data 1`] = `
</code>
</pre>
<pre
className="c24"
className="c25"
style={
Object {
"background": "#fff",
@ -1351,7 +1361,7 @@ exports[`DetailView should render with data 1`] = `
}
>
<code
className="c25"
className="c26"
>
app.use(
<span
@ -1382,7 +1392,7 @@ exports[`DetailView should render with data 1`] = `
</code>
</pre>
<pre
className="c24"
className="c25"
style={
Object {
"background": "#fff",
@ -1394,7 +1404,7 @@ exports[`DetailView should render with data 1`] = `
}
>
<code
className="c25"
className="c26"
>
apm.setTag(
<span
@ -1420,7 +1430,7 @@ exports[`DetailView should render with data 1`] = `
</code>
</pre>
<pre
className="c24"
className="c25"
style={
Object {
"background": "#fff",
@ -1432,7 +1442,7 @@ exports[`DetailView should render with data 1`] = `
}
>
<code
className="c25"
className="c26"
>
apm.setTag(
<span
@ -1458,7 +1468,7 @@ exports[`DetailView should render with data 1`] = `
</code>
</pre>
<pre
className="c24"
className="c25"
style={
Object {
"background": "#fff",
@ -1470,7 +1480,7 @@ exports[`DetailView should render with data 1`] = `
}
>
<code
className="c25"
className="c26"
>
apm.setTag(
<span
@ -1496,7 +1506,7 @@ exports[`DetailView should render with data 1`] = `
</code>
</pre>
<pre
className="c24"
className="c25"
style={
Object {
"background": "#fff",
@ -1508,7 +1518,7 @@ exports[`DetailView should render with data 1`] = `
}
>
<code
className="c25"
className="c26"
>
apm.setTag(
<span
@ -1534,7 +1544,7 @@ exports[`DetailView should render with data 1`] = `
</code>
</pre>
<pre
className="c24"
className="c25"
style={
Object {
"background": "#fff",
@ -1546,13 +1556,13 @@ exports[`DetailView should render with data 1`] = `
}
>
<code
className="c25"
className="c26"
>
next()
</code>
</pre>
<pre
className="c24"
className="c25"
style={
Object {
"background": "#fff",
@ -1564,13 +1574,13 @@ exports[`DetailView should render with data 1`] = `
}
>
<code
className="c25"
className="c26"
>
})
</code>
</pre>
<pre
className="c24"
className="c25"
style={
Object {
"background": "#fff",
@ -1582,14 +1592,14 @@ exports[`DetailView should render with data 1`] = `
}
>
<code
className="c25"
className="c26"
>
</code>
</pre>
<pre
className="c24"
className="c25"
style={
Object {
"background": "#fff",
@ -1601,7 +1611,7 @@ exports[`DetailView should render with data 1`] = `
}
>
<code
className="c25"
className="c26"
>
app.use(
<span
@ -1627,7 +1637,7 @@ exports[`DetailView should render with data 1`] = `
</code>
</pre>
<pre
className="c24"
className="c25"
style={
Object {
"background": "#fff",
@ -1639,7 +1649,7 @@ exports[`DetailView should render with data 1`] = `
}
>
<code
className="c25"
className="c26"
>
app.use(
<span
@ -1675,7 +1685,7 @@ exports[`DetailView should render with data 1`] = `
</code>
</pre>
<pre
className="c24"
className="c25"
style={
Object {
"background": "#fff",
@ -1687,7 +1697,7 @@ exports[`DetailView should render with data 1`] = `
}
>
<code
className="c25"
className="c26"
>
app.get(
<span
@ -1728,7 +1738,7 @@ exports[`DetailView should render with data 1`] = `
</code>
</pre>
<pre
className="c24"
className="c25"
style={
Object {
"background": "#fff",
@ -1740,7 +1750,7 @@ exports[`DetailView should render with data 1`] = `
}
>
<code
className="c25"
className="c26"
>
res.sendFile(path.resolve(__dirname,
<span
@ -1766,7 +1776,7 @@ exports[`DetailView should render with data 1`] = `
</code>
</pre>
<pre
className="c24"
className="c25"
style={
Object {
"background": "#fff",
@ -1778,7 +1788,7 @@ exports[`DetailView should render with data 1`] = `
}
>
<code
className="c25"
className="c26"
>
})
</code>
@ -1788,7 +1798,7 @@ exports[`DetailView should render with data 1`] = `
</div>
<div>
<div
className="c26"
className="c27"
>
<button
className="euiLink euiLink--primary"

View file

@ -38,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);
@ -174,22 +175,25 @@ function DatabaseContext({ dbContext }) {
}
return (
<DatabaseStatement>
<SyntaxHighlighter
language={'sql'}
style={xcode}
customStyle={{
color: null,
background: null,
padding: null,
lineHeight: px(unit * 1.5),
whiteSpace: 'pre-wrap',
overflowX: 'scroll'
}}
>
{dbContext.statement}
</SyntaxHighlighter>
</DatabaseStatement>
<div>
<HeaderXSmall>DB Statement</HeaderXSmall>
<DatabaseStatement>
<SyntaxHighlighter
language={'sql'}
style={xcode}
customStyle={{
color: null,
background: null,
padding: null,
lineHeight: px(unit * 1.5),
whiteSpace: 'pre-wrap',
overflowX: 'scroll'
}}
>
{dbContext.statement}
</SyntaxHighlighter>
</DatabaseStatement>
</div>
);
}

View file

@ -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 (
<div>
<HeaderXSmall>Stacktraces</HeaderXSmall>
{getCollapsedLibraryFrames(stackframes).map((item, i) => {
if (!item.libraryFrame) {
return (

View file

@ -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`
@ -40,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};