github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 17:59:23 -04:00
Code Issues Projects Releases Packages Wiki Activity

[APM] Global filters: Show service.environment in Services list (#36920) (#37006)

Browse source 
* [APM] Closes #34918, by listing service environments as badges. When
greater than 2 badges would be shown, condense into a summary badge with
a tooltip

* [APM] add i18n text for environment label
This commit is contained in:
Oliver Gupte 2019-05-23 11:13:03 -07:00 • committed by GitHub
parent 176d171a90
commit a1bd66c7ca
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 73 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

22
x-pack/plugins/apm/public/components/app/ServiceOverview/ServiceList/TruncatedAnchorEuiToolTip.tsx
View file

@ -1,22 +0,0 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/
import React, { ReactElement } from 'react';
import styled from 'styled-components';
import { EuiToolTip } from '@elastic/eui';
import { truncate } from '../../../../style/variables';
export const StyledAnchorEuiToolTip: React.FC<{
className: string;
[prop: string]: any;
children: ReactElement<any>; // matches EuiToolTip's children prop type
}> = ({ className, ...props }) => (
<EuiToolTip {...props} anchorClassName={className} />
);
export const TruncatedAnchorEuiToolTip = styled(StyledAnchorEuiToolTip)`
${truncate('100%')};
`;

14
x-pack/plugins/apm/public/components/app/ServiceOverview/ServiceList/index.tsx
View file

@ -14,7 +14,7 @@ import { fontSizes, truncate } from '../../../../style/variables';
import { asDecimal, asMillis } from '../../../../utils/formatters';
import { APMLink } from '../../../shared/Links/APMLink';
import { ITableColumn, ManagedTable } from '../../../shared/ManagedTable';
import { TruncatedAnchorEuiToolTip } from './TruncatedAnchorEuiToolTip';
import { EnvironmentBadge } from '../../../shared/EnvironmentBadge';
interface Props {
items?: ServiceListAPIResponse['items'];
@ -66,17 +66,7 @@ export const SERVICE_COLUMNS: Array<
width: '20%',
sortable: true,
render: (environments: string[]) => (
<TruncatedAnchorEuiToolTip
id="service-environments-tooltip"
content={environments.map(env => (
<React.Fragment key={env}>
{env}
<br />
</React.Fragment>
))}
>
<>{environments.join(', ')}</>
</TruncatedAnchorEuiToolTip>
<EnvironmentBadge environments={environments} />
)
},
{

37
x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/__snapshots__/ServiceOverview.test.tsx.snap generated
View file

@ -163,7 +163,7 @@ NodeList [
>
<a
aria-describedby="service-name-tooltip"
class="euiLink euiLink--primary sc-bwzfXH dkBCjq"
class="euiLink euiLink--primary sc-bdVaJa eQDnXY"
href="#/My Go Service/transactions?rangeFrom=now-24h&rangeTo=now&refreshPaused=true&refreshInterval=0"
>
My Go Service
@ -182,13 +182,7 @@ NodeList [
</div>
<div
class="euiTableCellContent euiTableCellContent--overflowingContent"
>
<span
class="euiToolTipAnchor sc-bdVaJa dequQV"
>
</span>
</div>
/>
</td>
<td
class="euiTableRowCell"
@ -267,7 +261,7 @@ NodeList [
>
<a
aria-describedby="service-name-tooltip"
class="euiLink euiLink--primary sc-bwzfXH dkBCjq"
class="euiLink euiLink--primary sc-bdVaJa eQDnXY"
href="#/My Python Service/transactions?rangeFrom=now-24h&rangeTo=now&refreshPaused=true&refreshInterval=0"
>
My Python Service
@ -288,9 +282,30 @@ NodeList [
class="euiTableCellContent euiTableCellContent--overflowingContent"
>
<span
class="euiToolTipAnchor sc-bdVaJa dequQV"
class="euiBadge euiBadge--hollow"
>
test, dev
<span
class="euiBadge__content"
>
<span
class="euiBadge__text"
>
test
</span>
</span>
</span>
<span
class="euiBadge euiBadge--hollow"
>
<span
class="euiBadge__content"
>
<span
class="euiBadge__text"
>
dev
</span>
</span>
</span>
</div>
</td>

45
x-pack/plugins/apm/public/components/shared/EnvironmentBadge/index.tsx Normal file
View file

@ -0,0 +1,45 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/
import React from 'react';
import { i18n } from '@kbn/i18n';
import { EuiBadge, EuiToolTip } from '@elastic/eui';
interface Props {
environments: string[];
}
export const EnvironmentBadge: React.FC<Props> = ({ environments = [] }) => {
if (environments.length < 3) {
return (
<>
{environments.map(env => (
<EuiBadge color="hollow" key={env}>
{env}
</EuiBadge>
))}
</>
);
}
return (
<EuiToolTip
position="right"
content={environments.map(env => (
<React.Fragment key={env}>
{env}
<br />
</React.Fragment>
))}
>
<EuiBadge>
{i18n.translate('xpack.apm.servicesTable.environmentCount', {
values: { environmentCount: environments.length },
defaultMessage:
'{environmentCount, plural, one {1 environment} other {# environments}}'
})}
</EuiBadge>
</EuiToolTip>
);
};