Android dashboard changes (#213734)

## Summary

Resolves #213730 

## Overview tab

### Before

![Overview
before](https://github.com/user-attachments/assets/e0a61d8b-2649-4738-8276-bf366c7bfbb4)

### After

![Overview
after](https://github.com/user-attachments/assets/19b00766-1c4f-4233-ae82-167b65192534)

## Errors tab

### Before

![Errors
before](https://github.com/user-attachments/assets/e5b3d0c3-b377-4e46-a195-47de05326181)

### After

![Errors
after](https://github.com/user-attachments/assets/1c219849-05f5-4bfc-a198-2957848fe93b)

### Checklist

Check the PR satisfies following conditions. 

Reviewers should verify this PR satisfies this list as well.

- [x] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

---------

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
This commit is contained in:
César 2025-03-14 17:00:34 +01:00 committed by GitHub
parent e615dd6457
commit 7e8d0c61cc
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 56 additions and 40 deletions

View file

@ -10,6 +10,8 @@ import { EuiTab, EuiTabs, EuiSpacer } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { MobileErrorsOverview } from '../errors_overview';
import { MobileCrashesOverview } from '../crashes_overview';
import { isAndroidAgentName } from '../../../../../../common/agent_name';
import { useApmServiceContext } from '../../../../../context/apm_service/use_apm_service_context';
export enum MobileErrorTabIds {
ERRORS = 'errors',
@ -41,6 +43,8 @@ export function Tabs({
mobileErrorTabId: MobileErrorTabIds;
onTabClick: (nextTab: MobileErrorTabIds) => void;
}) {
const { agentName } = useApmServiceContext();
const isAndroidAgent = isAndroidAgentName(agentName);
const selectedTabId = mobileErrorTabId;
const tabEntries = tabs.map((tab, index) => (
<EuiTab
@ -58,8 +62,12 @@ export function Tabs({
return (
<>
<EuiTabs>{tabEntries}</EuiTabs>
<EuiSpacer />
{!isAndroidAgent && (
<>
<EuiTabs>{tabEntries}</EuiTabs>
<EuiSpacer />
</>
)}
{selectedTabId === MobileErrorTabIds.ERRORS && <MobileErrorsOverview />}
{selectedTabId === MobileErrorTabIds.CRASHES && <MobileCrashesOverview />}
</>

View file

@ -20,6 +20,7 @@ import { ServiceOverviewThroughputChart } from '../../service_overview/service_o
import { TransactionsTable } from '../../../shared/transactions_table';
import { MostUsedCharts } from './most_used_charts';
import { GeoMap } from './geo_map';
import { isAndroidAgentName } from '../../../../../common/agent_name';
import { FailedTransactionRateChart } from '../../../shared/charts/failed_transaction_rate_chart';
import { ServiceOverviewDependenciesTable } from '../../service_overview/service_overview_dependencies_table';
import { LatencyChart } from '../../../shared/charts/latency_chart';
@ -35,9 +36,10 @@ import { useAdHocApmDataView } from '../../../../hooks/use_adhoc_apm_data_view';
export const chartHeight = 288;
export function MobileServiceOverview() {
const { serviceName } = useApmServiceContext();
const { serviceName, agentName } = useApmServiceContext();
const router = useApmRouter();
const { dataView } = useAdHocApmDataView();
const isAndroidAgent = isAndroidAgentName(agentName);
const {
query,
@ -96,36 +98,40 @@ export function MobileServiceOverview() {
>
<ChartPointerEventContextProvider>
<EuiFlexGroup direction="column" gutterSize="s">
<EuiFlexItem>
<MobileStats start={start} end={end} kuery={kueryWithMobileFilters} />
<EuiSpacer size="s" />
</EuiFlexItem>
<EuiFlexItem>
<EuiPanel hasBorder={true}>
<EuiFlexGroup gutterSize="s">
<EuiFlexItem grow={8}>
<GeoMap
start={start}
end={end}
kuery={kueryWithMobileFilters}
filters={embeddableFilters}
dataView={dataView}
/>
</EuiFlexItem>
<EuiFlexItem grow={3}>
<MobileLocationStats
start={start}
end={end}
kuery={kueryWithMobileFilters}
environment={environment}
offset={offset}
serviceName={serviceName}
comparisonEnabled={comparisonEnabled}
/>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPanel>
</EuiFlexItem>
{!isAndroidAgent && (
<>
<EuiFlexItem>
<MobileStats start={start} end={end} kuery={kueryWithMobileFilters} />
<EuiSpacer size="s" />
</EuiFlexItem>
<EuiFlexItem>
<EuiPanel hasBorder={true}>
<EuiFlexGroup gutterSize="s">
<EuiFlexItem grow={8}>
<GeoMap
start={start}
end={end}
kuery={kueryWithMobileFilters}
filters={embeddableFilters}
dataView={dataView}
/>
</EuiFlexItem>
<EuiFlexItem grow={3}>
<MobileLocationStats
start={start}
end={end}
kuery={kueryWithMobileFilters}
environment={environment}
offset={offset}
serviceName={serviceName}
comparisonEnabled={comparisonEnabled}
/>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPanel>
</EuiFlexItem>
</>
)}
<EuiFlexItem>
<EuiPanel hasBorder={true}>
@ -182,13 +188,15 @@ export function MobileServiceOverview() {
<EuiFlexItem>
<EuiFlexGroup direction={rowDirection} gutterSize="s" responsive={false}>
<EuiFlexItem grow={3}>
<FailedTransactionRateChart
height={nonLatencyChartHeight}
showAnnotations={false}
kuery={kueryWithMobileFilters}
/>
</EuiFlexItem>
{!isAndroidAgent && (
<EuiFlexItem grow={3}>
<FailedTransactionRateChart
height={nonLatencyChartHeight}
showAnnotations={false}
kuery={kueryWithMobileFilters}
/>
</EuiFlexItem>
)}
<EuiFlexItem grow={7}>
<EuiPanel hasBorder={true}>