diff --git a/x-pack/plugins/apm/public/components/shared/CodePreview/__test__/__snapshots__/CodePreview.test.js.snap b/x-pack/plugins/apm/public/components/shared/CodePreview/__test__/__snapshots__/CodePreview.test.js.snap
index dd6009581ecc4fa..dba27f173491076 100644
--- a/x-pack/plugins/apm/public/components/shared/CodePreview/__test__/__snapshots__/CodePreview.test.js.snap
+++ b/x-pack/plugins/apm/public/components/shared/CodePreview/__test__/__snapshots__/CodePreview.test.js.snap
@@ -84,15 +84,20 @@ exports[`CodePreview should render with data 1`] = `
z-index: 2;
}
-.c1 {
+.c2 {
color: #999999;
padding: 8px;
- border-bottom: 1px solid #d9d9d9;
- border-radius: 5px 5px 0 0;
+ font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;
}
.c3 {
font-weight: bold;
+ color: #000000;
+}
+
+.c1 {
+ border-bottom: 1px solid #d9d9d9;
+ border-radius: 5px 5px 0 0;
}
.c0 {
@@ -104,36 +109,36 @@ exports[`CodePreview should render with data 1`] = `
background: #f5f5f5;
}
-.c0 .c2 {
- color: #000000;
-}
-
-
- server/coffee.js
-
- in
-
-
- <anonymous>
-
- at
-
-
- line
- 17
-
+
+ server/coffee.js
+
+ in
+
+
+ <anonymous>
+
+ at
+
+
+ line
+ 17
+
+
(props.isLibraryFrame ? colors.white : colors.gray5)};
-
- ${FileDetails} {
- ${props => (!props.hasContext ? 'border-bottom: 0' : null)};
- }
-
- ${FileDetail} {
- color: ${props => (props.isLibraryFrame ? colors.gray1 : colors.black)};
- }
`;
class CodePreview extends PureComponent {
@@ -67,26 +54,22 @@ class CodePreview extends PureComponent {
render() {
const { stackframe, codeLanguage, isLibraryFrame } = this.props;
- const hasContext = !(
- isEmpty(stackframe.context) && isEmpty(stackframe.line.context)
- );
const hasVariables = !isEmpty(stackframe.vars);
return (
-
-
- {stackframe.filename} in{' '}
- {stackframe.function} at{' '}
- line {stackframe.line.number}
-
-
- {hasContext && (
-
+
+
- )}
+
+
+
{hasVariables && (
= ({
+ stackframe,
+ isLibraryFrame = false
+}) => {
+ const FileDetail = isLibraryFrame
+ ? LibraryFrameFileDetail
+ : AppFrameFileDetail;
+ return (
+
+ {stackframe.filename} in{' '}
+ {stackframe.function} at{' '}
+ line {stackframe.line.number}
+
+ );
+};
+
+export { FrameHeading };
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 b7a7f5f567f7bc8..6a4fbc89bc7f931 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, EuiTitle } from '@elastic/eui';
+import { FrameHeading } from './FrameHeading';
const LibraryFrameToggle = styled.div`
margin: 0 0 ${px(units.plus)} 0;
@@ -39,6 +40,12 @@ function getCollapsedLibraryFrames(stackframes) {
}, []);
}
+function hasSourceLines(stackframe) {
+ return (
+ !isEmpty(stackframe.context) || !isEmpty(get(stackframe, 'line.context'))
+ );
+}
+
class Stacktrace extends PureComponent {
state = {
libraryframes: {}
@@ -79,13 +86,16 @@ class Stacktrace extends PureComponent {
{getCollapsedLibraryFrames(stackframes).map((item, i) => {
if (!item.libraryFrame) {
- return (
-
- );
+ if (hasSourceLines(item)) {
+ return (
+
+ );
+ }
+ return ;
}
return (
@@ -115,14 +125,19 @@ function Libraryframes({ visible, stackframes, codeLanguage, onClick }) {
{visible &&
- stackframes.map((stackframe, i) => (
-
- ))}
+ stackframes.map(
+ (stackframe, i) =>
+ hasSourceLines(stackframe) ? (
+
+ ) : (
+
+ )
+ )}
);