[APM] Use EUI to render "Local variables" for the stack trace (#48208)

elastic · Oct 16, 2019 · 03a1ee1 · 03a1ee1
1 parent a9515bd
commit 03a1ee1
Showing 1 changed file with 19 additions and 42 deletions.
diff --git a/x-pack/legacy/plugins/apm/public/components/shared/Stacktrace/Variables.tsx b/x-pack/legacy/plugins/apm/public/components/shared/Stacktrace/Variables.tsx
@@ -5,71 +5,48 @@
  */
 
 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 { borderRadius, px, unit, units } from '../../../style/variables';
 import { IStackframe } from '../../../../typings/es_schemas/raw/fields/Stackframe';
-import {
-  borderRadius,
-  fontFamily,
-  px,
-  unit,
-  units
-} from '../../../style/variables';
-import { Ellipsis } from '../Icons';
 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>
     );
   }
 }