[APM] Convert DB statement code box to EuiCode (#129193)

* [APM] Convert DB statement code box to EuiCode Closes #76849 * added a target_blank attribute to the link * added target attribute and removed more code from the db statement
elastic · Apr 4, 2022 · 881a8ec · 881a8ec
1 parent e1c25c9
commit 881a8ec
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 60 deletions.
diff --git a/...tion_details/waterfall_with_summary/waterfall_container/waterfall/span_flyout/span_db.tsx b/...tion_details/waterfall_with_summary/waterfall_container/waterfall/span_flyout/span_db.tsx
@@ -5,65 +5,20 @@
  * 2.0.
  */
 
-import { EuiSpacer, EuiTitle } from '@elastic/eui';
+import { EuiSpacer, EuiTitle, EuiCodeBlock } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { tint } from 'polished';
 import React, { Fragment } from 'react';
-import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
-import sql from 'react-syntax-highlighter/dist/cjs/languages/hljs/sql';
-import xcode from 'react-syntax-highlighter/dist/cjs/styles/hljs/xcode';
-import { euiStyled } from '../../../../../../../../../../../src/plugins/kibana_react/common';
 import { Span } from '../../../../../../../../typings/es_schemas/ui/span';
-import { useTheme } from '../../../../../../../hooks/use_theme';
-import { TruncateHeightSection } from './truncate_height_section';
-
-SyntaxHighlighter.registerLanguage('sql', sql);
-
-const DatabaseStatement = euiStyled.div`
-  padding: ${({ theme }) =>
-    `${theme.eui.paddingSizes.s} ${theme.eui.paddingSizes.m}`};
-  background: ${({ theme }) => tint(0.9, theme.eui.euiColorWarning)};
-  border-radius: ${({ theme }) => theme.eui.euiBorderRadiusSmall};
-  border: 1px solid ${({ theme }) => theme.eui.euiColorLightShade};
-  font-family: ${({ theme }) => theme.eui.euiCodeFontFamily};
-  font-size: ${({ theme }) => theme.eui.euiFontSizeS};
-`;
 
 interface Props {
   spanDb?: NonNullable<Span['span']>['db'];
 }
 
 export function SpanDatabase({ spanDb }: Props) {
-  const theme = useTheme();
-  const dbSyntaxLineHeight = theme.eui.euiSizeL;
-  const previewHeight = 240; // 10 * dbSyntaxLineHeight
-
   if (!spanDb || !spanDb.statement) {
     return null;
   }
 
-  const statementItem =
-    spanDb.type !== 'sql' ? (
-      spanDb.statement
-    ) : (
-      <TruncateHeightSection previewHeight={previewHeight}>
-        <SyntaxHighlighter
-          language={'sql'}
-          style={xcode}
-          customStyle={{
-            color: null,
-            background: null,
-            padding: null,
-            lineHeight: dbSyntaxLineHeight,
-            whiteSpace: 'pre-wrap',
-            overflowX: 'scroll',
-          }}
-        >
-          {spanDb.statement}
-        </SyntaxHighlighter>
-      </TruncateHeightSection>
-    );
-
   return (
     <Fragment>
       <EuiTitle size="xs">
@@ -76,9 +31,11 @@ export function SpanDatabase({ spanDb }: Props) {
           )}
         </h3>
       </EuiTitle>
+      <EuiSpacer size="s" />
+      <EuiCodeBlock language="sql" fontSize="m" paddingSize="m">
+        {spanDb.statement}
+      </EuiCodeBlock>
       <EuiSpacer size="m" />
-      <DatabaseStatement>{statementItem}</DatabaseStatement>
-      <EuiSpacer size="l" />
     </Fragment>
   );
 }
diff --git a/x-pack/plugins/apm/public/components/shared/metadata_table/index.tsx b/x-pack/plugins/apm/public/components/shared/metadata_table/index.tsx
@@ -58,28 +58,26 @@ export function MetadataTable({ sections, isLoading }: Props) {
   const noResultFound = Boolean(searchTerm) && isEmpty(filteredSections);
   return (
     <React.Fragment>
-      <EuiFlexGroup justifyContent="flexEnd" alignItems="center">
-        <EuiFlexItem grow={false}>
-          <EuiLink href={docLinks.links.apm.metaData}>
-            <EuiText size="s">
-              <EuiIcon type="help" /> How to add labels and other data
-            </EuiText>
-          </EuiLink>
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
+      <EuiSpacer size="m" />
+      <EuiFlexGroup alignItems="center">
+        <EuiFlexItem>
           <EuiFieldSearch
             onChange={onSearchChange}
             placeholder={i18n.translate('xpack.apm.searchInput.filter', {
               defaultMessage: 'Filter...',
             })}
-            style={{
-              width: 400,
-            }}
             isInvalid={noResultFound}
             value={searchTerm}
+            fullWidth={true}
           />
         </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiLink href={docLinks.links.apm.metaData} target="_blank">
+            <EuiIcon type="help" /> How to add labels and other data
+          </EuiLink>
+        </EuiFlexItem>
       </EuiFlexGroup>
+      <EuiSpacer size="m" />
       {isLoading && (
         <EuiFlexGroup justifyContent="center">
           <EuiFlexItem grow={false}>