Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Stack trace local variables styling euitable #47128

Closed
wants to merge 9 commits into from
Closed

Stack trace local variables styling euitable #47128

Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
05e5bc0
changed the 'local variables' style in Stacktrace to use Eui
ffknob Oct 2, 2019
184d09a
Changed the 'local variables' style in Stacktrace to use Eui, and not…
ffknob Oct 2, 2019
5aff2eb
removed function that generated the 'Local variables' label
ffknob Oct 8, 2019
d945209
removed the funciton that returned the 'Local variables' label
ffknob Oct 8, 2019
9559186
brought back some of the styling code so it looks more like how it used
ffknob Oct 8, 2019
c47690d
applied euiAccordion class to the component
ffknob Oct 8, 2019
2a9141a
removed font-family and rule component
ffknob Oct 8, 2019
adce9b0
back to full_name
ffknob Oct 8, 2019
043fa4d
removed unused components
ffknob Oct 8, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 19 additions & 37 deletions x-pack/legacy/plugins/apm/public/components/shared/Stacktrace/Variables.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,71 +5,53 @@
*/

import theme from '@elastic/eui/dist/eui_theme_light.json';
import styled from 'styled-components';
import { EuiAccordion } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import React from 'react';
import styled from 'styled-components';
import { IStackframe } from '../../../../typings/es_schemas/raw/fields/Stackframe';
import {
borderRadius,
fontFamily,
px,
unit,
units
} from '../../../style/variables';
import { Ellipsis } from '../Icons';
import { IStackframe } from '../../../../typings/es_schemas/raw/fields/Stackframe';
import { DottedKeyValueTable } from '../DottedKeyValueTable';

const VariablesContainer = styled.div`
background: ${theme.euiColorEmptyShade};
border-top: 1px solid ${theme.euiColorLightShade};
border-radius: 0 0 ${borderRadius} ${borderRadius};
padding: ${px(units.half)} ${px(unit)};
font-family: ${fontFamily};
`;

const VariablesToggle = styled.a`
display: block;
cursor: pointer;
user-select: none;
`;

const VariablesTableContainer = styled.div`
padding: ${px(units.plus)} ${px(unit)} 0;
`;

interface Props {
vars: IStackframe['vars'];
}

export class Variables extends React.Component<Props> {
public state = {
isVisible: false
};

public onClick = () => {
this.setState(() => ({ isVisible: !this.state.isVisible }));
};

public render() {
if (!this.props.vars) {
return null;
}

return (
<VariablesContainer>
<VariablesToggle onClick={this.onClick}>
<Ellipsis horizontal={this.state.isVisible} />{' '}
{i18n.translate(
'xpack.apm.stacktraceTab.localVariablesToogleButtonLabel',
{ defaultMessage: 'Local variables' }
)}
</VariablesToggle>
{this.state.isVisible && (
<VariablesTableContainer>
<DottedKeyValueTable data={this.props.vars} maxDepth={5} />
</VariablesTableContainer>
)}
</VariablesContainer>
<React.Fragment>
<VariablesContainer>
<EuiAccordion
id="local-variables"
className="euiAccordion"
buttonContent={i18n.translate(
'xpack.apm.stacktraceTab.localVariablesToogleButtonLabel',
{ defaultMessage: 'Local variables' }
)}
>
<React.Fragment>
<DottedKeyValueTable data={this.props.vars} maxDepth={5} />
</React.Fragment>
</EuiAccordion>
</VariablesContainer>
</React.Fragment>
);
}
}