maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[APM] StickyProperties should render components as values (#27814)

Browse source
This commit is contained in:
Søren Louv-Jansen 2018-12-28 12:20:31 +01:00 committed by GitHub
parent 93e4f12dbc
commit e520f121c5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 104 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
x-pack/plugins/apm/public/components/app/ErrorGroupDetails/DetailView/__test__/__snapshots__/DetailView.test.tsx.snap
View file

@ -68,7 +68,7 @@ exports[`DetailView should render StickyProperties 1`] = `
Object {
"fieldName": "error.exception.handled",
"label": "Handled",
"val": true,
"val": "true",
"width": "25%",
},
Object {

2
x-pack/plugins/apm/public/components/app/ErrorGroupDetails/DetailView/index.tsx
View file

@ -112,7 +112,7 @@ export function DetailView({ errorGroup, urlParams, location }: Props) {
{
fieldName: ERROR_EXC_HANDLED,
label: 'Handled',
val: get(error, ERROR_EXC_HANDLED, 'N/A'),
val: String(get(error, ERROR_EXC_HANDLED, 'N/A')),
width: '25%'
},
{

78
x-pack/plugins/apm/public/components/shared/StickyProperties/StickyProperties.test.js
View file

@ -13,7 +13,7 @@ import { mockMoment } from '../../../utils/testHelpers';
describe('StickyProperties', () => {
beforeEach(mockMoment);
it('should render', () => {
it('should render entire component', () => {
const stickyProperties = [
{
label: 'Timestamp',
@ -34,7 +34,7 @@ describe('StickyProperties', () => {
{
label: 'Handled',
fieldName: 'error.exception.handled',
val: true
val: String(true)
},
{
label: 'User ID',
@ -49,4 +49,78 @@ describe('StickyProperties', () => {
expect(wrapper).toMatchSnapshot();
});
describe('values', () => {
it('should render timestamp when fieldName is `@timestamp`', () => {
const stickyProperties = [
{
label: 'My Timestamp',
fieldName: '@timestamp',
val: 1536405447640
}
];
const wrapper = shallow(
<StickyProperties stickyProperties={stickyProperties} />
).find('TimestampValue');
expect(wrapper).toMatchSnapshot();
});
it('should render numbers', () => {
const stickyProperties = [
{
label: 'My Number',
fieldName: 'myNumber',
val: 1337
}
];
const wrapper = shallow(
<StickyProperties stickyProperties={stickyProperties} />
)
.find('PropertyValue')
.dive()
.text();
expect(wrapper).toEqual('1337');
});
it('should not stringify booleans', () => {
const stickyProperties = [
{
label: 'My boolean',
fieldName: 'myBoolean',
val: true
}
];
const wrapper = shallow(
<StickyProperties stickyProperties={stickyProperties} />
)
.find('PropertyValue')
.dive()
.text();
expect(wrapper).toEqual('');
});
it('should render nested components', () => {
const stickyProperties = [
{
label: 'My Component',
fieldName: 'myComponent',
val: <h1>My header</h1>
}
];
const wrapper = shallow(
<StickyProperties stickyProperties={stickyProperties} />
)
.find('PropertyValue')
.html();
expect(wrapper).toContain(`<h1>My header</h1>`);
});
});
});

40
x-pack/plugins/apm/public/components/shared/StickyProperties/__snapshots__/StickyProperties.test.js.snap
View file

@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`StickyProperties should render 1`] = `
exports[`StickyProperties should render entire component 1`] = `
<EuiFlexGroup
alignItems="stretch"
component="div"
@ -27,7 +27,7 @@ exports[`StickyProperties should render 1`] = `
}
}
>
<styled.div>
<PropertyLabel>
<EuiToolTip
content={
<styled.span>
@ -41,7 +41,7 @@ exports[`StickyProperties should render 1`] = `
Timestamp
</span>
</EuiToolTip>
</styled.div>
</PropertyLabel>
<TimestampValue
timestamp={1536405447640}
/>
@ -57,7 +57,7 @@ exports[`StickyProperties should render 1`] = `
}
}
>
<styled.div>
<PropertyLabel>
<EuiToolTip
content={
<styled.span>
@ -71,7 +71,7 @@ exports[`StickyProperties should render 1`] = `
URL
</span>
</EuiToolTip>
</styled.div>
</PropertyLabel>
<EuiToolTip
content="https://www.elastic.co/test"
delay="regular"
@ -93,7 +93,7 @@ exports[`StickyProperties should render 1`] = `
}
}
>
<styled.div>
<PropertyLabel>
<EuiToolTip
content={
<styled.span>
@ -107,10 +107,10 @@ exports[`StickyProperties should render 1`] = `
Request method
</span>
</EuiToolTip>
</styled.div>
<styled.div>
</PropertyLabel>
<PropertyValue>
GET
</styled.div>
</PropertyValue>
</EuiFlexItem>
<EuiFlexItem
component="div"
@ -123,7 +123,7 @@ exports[`StickyProperties should render 1`] = `
}
}
>
<styled.div>
<PropertyLabel>
<EuiToolTip
content={
<styled.span>
@ -137,10 +137,10 @@ exports[`StickyProperties should render 1`] = `
Handled
</span>
</EuiToolTip>
</styled.div>
<styled.div>
</PropertyLabel>
<PropertyValue>
true
</styled.div>
</PropertyValue>
</EuiFlexItem>
<EuiFlexItem
component="div"
@ -153,7 +153,7 @@ exports[`StickyProperties should render 1`] = `
}
}
>
<styled.div>
<PropertyLabel>
<EuiToolTip
content={
<styled.span>
@ -167,10 +167,16 @@ exports[`StickyProperties should render 1`] = `
User ID
</span>
</EuiToolTip>
</styled.div>
<styled.div>
</PropertyLabel>
<PropertyValue>
1337
</styled.div>
</PropertyValue>
</EuiFlexItem>
</EuiFlexGroup>
`;
exports[`StickyProperties values should render timestamp when fieldName is \`@timestamp\` 1`] = `
<TimestampValue
timestamp={1536405447640}
/>
`;

4
x-pack/plugins/apm/public/components/shared/StickyProperties/index.tsx
View file

@ -40,6 +40,7 @@ const PropertyLabel = styled.div`
cursor: help;
}
`;
PropertyLabel.displayName = 'PropertyLabel';
const PropertyValueDimmed = styled.span`
color: ${colors.gray3};
@ -49,6 +50,7 @@ const PropertyValue = styled.div`
display: inline-block;
line-height: ${px(unit)};
`;
PropertyValue.displayName = 'PropertyValue';
const PropertyValueTruncated = styled.span`
display: inline-block;
@ -101,7 +103,7 @@ function getPropertyValue({
);
}
return <PropertyValue>{String(val)}</PropertyValue>;
return <PropertyValue>{val}</PropertyValue>;
}
export function StickyProperties({