Skip to content

Commit cf2f19d

Browse files
cauemarcondescauemarcondes
committed
[APM]Create custom link from Trace summary (#59648)
* adding custom links to actions menu * user should have at least gold license to be able to manage custom links * replacing variable for the correspondent value * refactoring license prompt to a shared place * fixing query to return filters that were saved separated by comma * refactoring license prompt to a shared place * fixing query to return filters that were saved separated by comma * adding unit test, splitting value by comma and removing empty ones * adding custom links to actions menu * UI fixes * moving stuff to common * changing flyout texts * refactoring getSelectOption * refactoring getSelectOption * refactoring filter options name * adding preview panel * adding preview panel * fixing test * adding unit test for replace template variables * fixing typo * polishing preview panel * fixing pr comments * fixing pr comments * adding links * fixing unit test * removing servicemap license prompt
1 parent 756deb7 commit cf2f19d

40 files changed

Lines changed: 1894 additions & 232 deletions

‎x-pack/legacy/plugins/apm/public/components/app/ServiceMap/PlatinumLicensePrompt.tsx‎

Lines changed: 0 additions & 74 deletions
This file was deleted.

‎x-pack/legacy/plugins/apm/public/components/app/ServiceMap/index.tsx‎

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,23 @@
33
* or more contributor license agreements. Licensed under the Elastic License;
44
* you may not use this file except in compliance with the Elastic License.
55
*/
6-
7-
import theme from '@elastic/eui/dist/eui_theme_light.json';
86
import React from 'react';
9-
import { isValidPlatinumLicense } from '../../../../../../../plugins/apm/common/service_map';
7+
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
8+
import theme from '@elastic/eui/dist/eui_theme_light.json';
9+
import {
10+
invalidLicenseMessage,
11+
isValidPlatinumLicense
12+
} from '../../../../../../../plugins/apm/common/service_map';
1013
import { useFetcher } from '../../../hooks/useFetcher';
1114
import { useLicense } from '../../../hooks/useLicense';
1215
import { useUrlParams } from '../../../hooks/useUrlParams';
1316
import { callApmApi } from '../../../services/rest/createCallApmApi';
1417
import { BetaBadge } from './BetaBadge';
18+
import { LicensePrompt } from '../../shared/LicensePrompt';
1519
import { Controls } from './Controls';
1620
import { Cytoscape } from './Cytoscape';
1721
import { cytoscapeDivStyle } from './cytoscapeOptions';
1822
import { EmptyBanner } from './EmptyBanner';
19-
import { PlatinumLicensePrompt } from './PlatinumLicensePrompt';
2023
import { Popover } from './Popover';
2124
import { useRefDimensions } from './useRefDimensions';
2225

@@ -74,6 +77,18 @@ export function ServiceMap({ serviceName }: ServiceMapProps) {
7477
</Cytoscape>
7578
</div>
7679
) : (
77-
<PlatinumLicensePrompt />
80+
<EuiFlexGroup
81+
alignItems="center"
82+
justifyContent="spaceAround"
83+
// Set the height to give it some top margin
84+
style={{ height: '60vh' }}
85+
>
86+
<EuiFlexItem
87+
grow={false}
88+
style={{ width: 600, textAlign: 'center' as const }}
89+
>
90+
<LicensePrompt text={invalidLicenseMessage} showBetaBadge />
91+
</EuiFlexItem>
92+
</EuiFlexGroup>
7893
);
7994
}

‎x-pack/legacy/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CustomLinkFlyout/Documentation.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License;
4+
* you may not use this file except in compliance with the Elastic License.
5+
*/
6+
import React from 'react';
7+
import { ElasticDocsLink } from '../../../../../shared/Links/ElasticDocsLink';
8+
9+
interface Props {
10+
label: string;
11+
}
12+
export const Documentation = ({ label }: Props) => (
13+
<ElasticDocsLink section="/kibana" path="/custom-links.html" target="_blank">
14+
{label}
15+
</ElasticDocsLink>
16+
);

‎x-pack/legacy/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CustomLinkFlyout/FiltersSection.tsx‎

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -16,31 +16,31 @@ import {
1616
import { i18n } from '@kbn/i18n';
1717
import { isEmpty } from 'lodash';
1818
import React from 'react';
19-
// eslint-disable-next-line @kbn/eslint/no-restricted-paths
20-
import { FilterOptions } from '../../../../../../../../../../plugins/apm/server/routes/settings/custom_link';
19+
import { FilterOptions } from '../../../../../../../../../../plugins/apm/common/custom_link_filter_options';
2120
import {
2221
DEFAULT_OPTION,
23-
Filters,
24-
filterSelectOptions,
22+
FilterKeyValue,
23+
FILTER_SELECT_OPTIONS,
2524
getSelectOptions
2625
} from './helper';
2726

2827
export const FiltersSection = ({
2928
filters,
3029
onChangeFilters
3130
}: {
32-
filters: Filters;
33-
onChangeFilters: (filters: Filters) => void;
31+
filters: FilterKeyValue[];
32+
onChangeFilters: (filters: FilterKeyValue[]) => void;
3433
}) => {
35-
const onChangeFilter = (filter: Filters[0], idx: number) => {
34+
const onChangeFilter = (filter: FilterKeyValue, idx: number) => {
3635
const newFilters = [...filters];
3736
newFilters[idx] = filter;
3837
onChangeFilters(newFilters);
3938
};
4039

4140
const onRemoveFilter = (idx: number) => {
4241
// remove without mutating original array
43-
const newFilters = [...filters].splice(idx, 1);
42+
const newFilters = [...filters];
43+
newFilters.splice(idx, 1);
4444

4545
// if there is only one item left it should not be removed
4646
// but reset to empty
@@ -68,12 +68,12 @@ export const FiltersSection = ({
6868
</h3>
6969
</EuiTitle>
7070
<EuiSpacer size="s" />
71-
<EuiText size="xs">
71+
<EuiText size="s">
7272
{i18n.translate(
7373
'xpack.apm.settings.customizeUI.customLink.flyout.filters.subtitle',
7474
{
7575
defaultMessage:
76-
'Add additional values within the same field by comma separating values.'
76+
'Use the filter options to scope them to only appear for specific services.'
7777
}
7878
)}
7979
</EuiText>
@@ -83,12 +83,12 @@ export const FiltersSection = ({
8383
{filters.map((filter, idx) => {
8484
const [key, value] = filter;
8585
const filterId = `filter-${idx}`;
86-
const selectOptions = getSelectOptions(filters, idx);
86+
const selectOptions = getSelectOptions(filters, key);
8787
return (
8888
<EuiFlexGroup key={filterId} gutterSize="s" alignItems="center">
8989
<EuiFlexItem>
9090
<EuiSelect
91-
aria-label={filterId}
91+
data-test-subj={filterId}
9292
id={filterId}
9393
fullWidth
9494
options={selectOptions}
@@ -113,6 +113,7 @@ export const FiltersSection = ({
113113
</EuiFlexItem>
114114
<EuiFlexItem>
115115
<EuiFieldText
116+
data-test-subj={`value-${idx}`}
116117
fullWidth
117118
placeholder={i18n.translate(
118119
'xpack.apm.settings.customizeUI.customLink.flyOut.filters.defaultOption.value',
@@ -127,7 +128,7 @@ export const FiltersSection = ({
127128
<EuiButtonEmpty
128129
iconType="trash"
129130
onClick={() => onRemoveFilter(idx)}
130-
disabled={!key && filters.length === 1}
131+
disabled={!value && !key && filters.length === 1}
131132
/>
132133
</EuiFlexItem>
133134
</EuiFlexGroup>
@@ -139,7 +140,7 @@ export const FiltersSection = ({
139140
<AddFilterButton
140141
onClick={handleAddFilter}
141142
// Disable button when user has already added all items available
142-
isDisabled={filters.length === filterSelectOptions.length - 1}
143+
isDisabled={filters.length === FILTER_SELECT_OPTIONS.length - 1}
143144
/>
144145
</>
145146
);

‎x-pack/legacy/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CustomLinkFlyout/LinkPreview.test.tsx‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License;
4+
* you may not use this file except in compliance with the Elastic License.
5+
*/
6+
import React from 'react';
7+
import { LinkPreview } from '../CustomLinkFlyout/LinkPreview';
8+
import { render, getNodeText, getByTestId } from '@testing-library/react';
9+
10+
describe('LinkPreview', () => {
11+
const getElementValue = (container: HTMLElement, id: string) =>
12+
getNodeText(
13+
((getByTestId(container, id) as HTMLDivElement)
14+
.children as HTMLCollection)[0] as HTMLDivElement
15+
);
16+
17+
it('shows label and url default values', () => {
18+
const { container } = render(
19+
<LinkPreview label="" url="" filters={[['', '']]} />
20+
);
21+
expect(getElementValue(container, 'preview-label')).toEqual('Elastic.co');
22+
expect(getElementValue(container, 'preview-url')).toEqual(
23+
'https://www.elastic.co'
24+
);
25+
});
26+
27+
it('shows label and url values', () => {
28+
const { container } = render(
29+
<LinkPreview label="foo" url="https://baz.co" filters={[['', '']]} />
30+
);
31+
expect(getElementValue(container, 'preview-label')).toEqual('foo');
32+
expect(
33+
(getByTestId(container, 'preview-link') as HTMLAnchorElement).text
34+
).toEqual('https://baz.co');
35+
});
36+
37+
it('shows warning when couldnt replace context variables', () => {
38+
const { container } = render(
39+
<LinkPreview
40+
label="foo"
41+
url="https://baz.co?service.name={{invalid}"
42+
filters={[['', '']]}
43+
/>
44+
);
45+
expect(getElementValue(container, 'preview-label')).toEqual('foo');
46+
expect(
47+
(getByTestId(container, 'preview-link') as HTMLAnchorElement).text
48+
).toEqual('https://baz.co?service.name={{invalid}');
49+
expect(getByTestId(container, 'preview-warning')).toBeInTheDocument();
50+
});
51+
});

0 commit comments

Comments
 (0)