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] Small design uplifts of the Mobile APM overview page #144998

Merged
merged 6 commits into from
Nov 14, 2022
Merged

[APM] Small design uplifts of the Mobile APM overview page #144998

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
7767bb2
Small design uplifts of the Mobile APM overview page
boriskirov Nov 10, 2022
8518c3b
[CI] Auto-commit changed files from 'node scripts/precommit_hook.js -…
kibanamachine Nov 10, 2022
60ab576
Merge branch 'main' of github.com:elastic/kibana into mobile-apm-desi…
kpatticha Nov 14, 2022
916f572
Add missing translation for mobile
kpatticha Nov 14, 2022
9288df7
Update snapshots
kpatticha Nov 14, 2022
4ccb904
Update snapshot
kpatticha Nov 14, 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
6 changes: 5 additions & 1 deletion ...gins/apm/public/components/app/service_overview/service_overview_charts/filters/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,11 @@ export function MobileFilters({
<EuiFlexGroup justifyContent="flexEnd">
{data.mobileFilters.map((filter) => {
return (
<EuiFlexItem grow={false} key={filter.key}>
<EuiFlexItem
grow={false}
key={filter.key}
style={{ minWidth: '225px' }}
>
<EuiSelect
prepend={filter.label}
options={toSelectOptions(filter.options)}
Expand Down
4 changes: 3 additions & 1 deletion ...rview/service_overview_charts/most_used_chart/__snapshots__/most_used_chart.test.tsx.snap
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 3 additions & 1 deletion ...nents/app/service_overview/service_overview_charts/most_used_chart/get_lens_attributes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,16 +88,18 @@ export function getLensAttributes({
],
state: {
visualization: {
shape: 'pie',
shape: 'donut',
layers: [
{
layerId: metricId,
primaryGroups: [columnA],
metric: columnB,
categoryDisplay: 'default',
legendDisplay: 'hide',
nestedLegend: false,
numberDisplay: 'percent',
layerType: 'data',
legendPosition: 'bottom',
},
],
} as PieVisualizationState,
Expand Down
9 changes: 5 additions & 4 deletions .../public/components/app/service_overview/service_overview_charts/most_used_chart/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import { EuiTitle, EuiFlexItem, EuiPanel } from '@elastic/eui';
import { EuiTitle, EuiFlexItem, EuiPanel, EuiSpacer } from '@elastic/eui';
import React, { useMemo, useCallback } from 'react';
import type { Filter } from '@kbn/es-query';
import { i18n } from '@kbn/i18n';
Expand Down Expand Up @@ -96,19 +96,20 @@ export function MostUsedChart({
};

return (
<EuiPanel hasBorder={true}>
<EuiPanel hasShadow={false} paddingSize="none">
<EuiFlexItem grow={false}>
<EuiTitle size="xs">
<EuiTitle size="xxxs">
<h2>{title}</h2>
</EuiTitle>
<EuiSpacer size="s" />
</EuiFlexItem>
<EuiFlexItem>
<EmbeddableComponent
viewMode={ViewMode.VIEW}
id={`most-used-${metric.replaceAll('.', '-')}`}
hidePanelTitles
withDefaultActions
style={{ height: 200 }}
style={{ height: 175 }}
attributes={lensAttributes}
timeRange={{
from: start,
Expand Down
216 changes: 138 additions & 78 deletions ...components/app/service_overview/service_overview_charts/service_oveview_mobile_charts.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,18 @@
*/

import React from 'react';
import { EuiFlexGroup, EuiFlexItem, EuiLink, EuiPanel } from '@elastic/eui';
import {
EuiFlexGroup,
EuiFlexItem,
EuiLink,
EuiPanel,
EuiSpacer,
} from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n-react';
import { i18n } from '@kbn/i18n';
import { EuiTitle } from '@elastic/eui';
import { EuiHorizontalRule } from '@elastic/eui';
import { EuiCallOut } from '@elastic/eui';
import { useApmRouter } from '../../../../hooks/use_apm_router';
import { useApmServiceContext } from '../../../../context/apm_service/use_apm_service_context';
import { LatencyChart } from '../../../shared/charts/latency_chart';
Expand Down Expand Up @@ -71,7 +81,7 @@ export function ServiceOverviewMobileCharts({

return (
<EuiFlexGroup direction="column" gutterSize="s">
<EuiFlexItem>
<EuiFlexItem grow={false}>
<MobileFilters
start={start}
end={end}
Expand All @@ -91,6 +101,132 @@ export function ServiceOverviewMobileCharts({
<AggregatedTransactionsBadge />
</EuiFlexItem>
)}
<EuiFlexItem>
<EuiHorizontalRule />
</EuiFlexItem>
<EuiFlexItem>
<EuiCallOut
title={i18n.translate(
'xpack.apm.serviceOverview.mobileCallOutTitle',
{
defaultMessage: 'Mobile APM',
}
)}
iconType="mobile"
>
<p>
<FormattedMessage
id="xpack.apm.serviceOverview.mobileCallOutText"
defaultMessage="This is a mobile service, which is currently released as a technical
preview. You can help us improve the experience by giving feedback. {feedbackLink}."
values={{
feedbackLink: (
<EuiLink href="https://ela.st/feedback-mobile-apm">
{i18n.translate(
'xpack.apm.serviceOverview.mobileCallOutLink',
{
defaultMessage: 'Give feedback',
}
)}
</EuiLink>
),
}}
/>
</p>
</EuiCallOut>
<EuiSpacer size="s" />
</EuiFlexItem>
<EuiFlexItem>
<EuiFlexGroup gutterSize="s">
<EuiFlexItem grow={5}>
<EuiPanel hasBorder={true}>
<LatencyMap filters={filters} />
</EuiPanel>
</EuiFlexItem>

<EuiFlexItem grow={7}>
<EuiPanel hasBorder={true}>
<EuiFlexItem grow={false}>
<EuiTitle size="xs">
<h2>
{i18n.translate('xpack.apm.serviceOverview.mostUsedTitle', {
defaultMessage: 'Most used',
})}
</h2>
</EuiTitle>
</EuiFlexItem>
<EuiFlexGroup direction={rowDirection} gutterSize="s">
{/* Device */}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[nit] do we need these type of comments?

<EuiFlexItem>
<MostUsedChart
title={i18n.translate(
'xpack.apm.serviceOverview.mostUsed.device',
{
defaultMessage: 'Devices',
}
)}
metric={DEVICE_MODEL_NAME}
start={start}
end={end}
kuery={kuery}
filters={filters}
/>
</EuiFlexItem>
{/* NCT */}
<EuiFlexItem>
<MostUsedChart
title={i18n.translate(
'xpack.apm.serviceOverview.mostUsed.nct',
{
defaultMessage: 'Network Connection Type',
}
)}
metric={NETWORK_CONNECTION_TYPE}
start={start}
end={end}
kuery={kuery}
filters={filters}
/>
</EuiFlexItem>
</EuiFlexGroup>
<EuiFlexGroup>
{/* OS version */}
<EuiFlexItem>
<MostUsedChart
title={i18n.translate(
'xpack.apm.serviceOverview.mostUsed.osVersion',
{
defaultMessage: 'OS version',
}
)}
metric={HOST_OS_VERSION}
start={start}
end={end}
kuery={kuery}
filters={filters}
/>
</EuiFlexItem>
{/* App version */}
<EuiFlexItem>
<MostUsedChart
title={i18n.translate(
'xpack.apm.serviceOverview.mostUsed.appVersion',
{
defaultMessage: 'App version',
}
)}
metric={SERVICE_VERSION}
start={start}
end={end}
kuery={kuery}
filters={filters}
/>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPanel>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem>
<EuiPanel hasBorder={true}>
<LatencyChart height={latencyChartHeight} kuery={kuery} />
Expand Down Expand Up @@ -156,82 +292,6 @@ export function ServiceOverviewMobileCharts({
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>

<EuiFlexItem>
<EuiPanel hasBorder={true}>
<LatencyMap filters={filters} />
</EuiPanel>
</EuiFlexItem>

<EuiFlexItem>
<EuiFlexGroup direction={rowDirection} gutterSize="s">
{/* Device */}
<EuiFlexItem>
<MostUsedChart
title={i18n.translate(
'xpack.apm.serviceOverview.mostUsed.device',
{
defaultMessage: 'Most used device',
}
)}
metric={DEVICE_MODEL_NAME}
start={start}
end={end}
kuery={kuery}
filters={filters}
/>
</EuiFlexItem>
{/* NCT */}
<EuiFlexItem>
<MostUsedChart
title={i18n.translate('xpack.apm.serviceOverview.mostUsed.nct', {
defaultMessage: 'Most used NCT',
})}
metric={NETWORK_CONNECTION_TYPE}
start={start}
end={end}
kuery={kuery}
filters={filters}
/>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem>
<EuiFlexGroup direction={rowDirection} gutterSize="s">
{/* OS Version */}
<EuiFlexItem>
<MostUsedChart
title={i18n.translate(
'xpack.apm.serviceOverview.mostUsed.osVersion',
{
defaultMessage: 'Most used OS version',
}
)}
metric={HOST_OS_VERSION}
start={start}
end={end}
kuery={kuery}
filters={filters}
/>
</EuiFlexItem>
{/* App version */}
<EuiFlexItem>
<MostUsedChart
title={i18n.translate(
'xpack.apm.serviceOverview.mostUsed.appVersion',
{
defaultMessage: 'Most used app version',
}
)}
metric={SERVICE_VERSION}
start={start}
end={end}
kuery={kuery}
filters={filters}
/>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
);
}
7 changes: 7 additions & 0 deletions x-pack/plugins/apm/public/components/routing/templates/apm_service_template/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,8 @@ function TemplateWithContext({

const tabs = useTabs({ selectedTab });

const { agentName } = useApmServiceContext();

useBreadcrumb(
() => ({
title,
Expand Down Expand Up @@ -117,6 +119,11 @@ function TemplateWithContext({
end={end}
/>
</EuiFlexItem>
{isMobileAgentName(agentName) && (
<EuiFlexItem grow={false}>
<TechnicalPreviewBadge />
</EuiFlexItem>
)}
</EuiFlexGroup>
</EuiFlexItem>

Expand Down