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

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

Merged
merged 6 commits into from
Apr 4, 2022
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f0eedae
[APM] Convert DB statement code box to EuiCode
boriskirov Apr 1, 2022
e59d5aa
Merge branch 'main' into db-span-flyout
boriskirov Apr 1, 2022
23ddc02
added a target_blank attribute to the link
boriskirov Apr 1, 2022
9281917
added target attribute and removed more code from the db statement
boriskirov Apr 1, 2022
3001b85
Merge branch 'db-span-flyout' of github.com:boriskirov/kibana into db…
boriskirov Apr 1, 2022
e14e27f
Merge branch 'main' into db-span-flyout
kibanamachine Apr 4, 2022
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
53 changes: 5 additions & 48 deletions ...tion_details/waterfall_with_summary/waterfall_container/waterfall/span_flyout/span_db.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
boriskirov marked this conversation as resolved.
Show resolved Hide resolved
<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">
Expand All @@ -76,9 +31,11 @@ export function SpanDatabase({ spanDb }: Props) {
)}
</h3>
</EuiTitle>
<EuiSpacer size="s" />
<EuiCodeBlock language="sql" fontSize="m" paddingSize="m">
{spanDb.statement}
boriskirov marked this conversation as resolved.
Show resolved Hide resolved
</EuiCodeBlock>
<EuiSpacer size="m" />
<DatabaseStatement>{statementItem}</DatabaseStatement>
<EuiSpacer size="l" />
</Fragment>
);
}
22 changes: 10 additions & 12 deletions x-pack/plugins/apm/public/components/shared/metadata_table/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
boriskirov marked this conversation as resolved.
Show resolved Hide resolved
</EuiLink>
</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer size="m" />
{isLoading && (
<EuiFlexGroup justifyContent="center">
<EuiFlexItem grow={false}>
Expand Down