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

[8.12] [APM] Add progress bar for mobile error and crashes charts (#172805) (#172926)

Browse source 
# Backport

This will backport the following commits from `main` to `8.12`:
- [[APM] Add progress bar for mobile error and crashes charts
(#172805)](https://github.com/elastic/kibana/pull/172805)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT
[{"author":{"name":"Katerina","email":"aikaterini.patticha@elastic.co"},"sourceCommit":{"committedDate":"2023-12-08T10:26:17Z","message":"[APM]
Add progress bar for mobile error and crashes charts (#172805)\n\n##
Summary\r\n\r\ncloses:
https://github.com/elastic/kibana/issues/172317\r\n\r\n# Progress bar
\r\n\r\n###
Before\r\n\r\na185c39e-c7d7-49fd-ad65-a193509f906b\r\n\r\n###
After\r\n\r\n\r\n6ee3580f-4072-4193-86dc-b47df38bb632\r\n\r\n\r\n\r\n\r\n#
Layout \r\nIn addition to the loaders I fixed some styling and layout
for the error\r\nand crash group page\r\n\r\n### Before \r\n<img
width=\"1704\"
alt=\"image\"\r\nsrc=\"16eac334-51e0-48cf-9506-15569112ba73\">\r\n\r\n###
After \r\n<img width=\"1704\"
alt=\"image\"\r\nsrc=\"39b3cce0-0a86-4626-a2c6-a164a1f3272d\">","sha":"f596e94215c926a5294c2727d5468fe106e59b1c","branchLabelMapping":{"^v8.13.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","Team:APM","release_note:skip","backport:prev-minor","v8.13.0"],"number":172805,"url":"https://github.com/elastic/kibana/pull/172805","mergeCommit":{"message":"[APM]
Add progress bar for mobile error and crashes charts (#172805)\n\n##
Summary\r\n\r\ncloses:
https://github.com/elastic/kibana/issues/172317\r\n\r\n# Progress bar
\r\n\r\n###
Before\r\n\r\na185c39e-c7d7-49fd-ad65-a193509f906b\r\n\r\n###
After\r\n\r\n\r\n6ee3580f-4072-4193-86dc-b47df38bb632\r\n\r\n\r\n\r\n\r\n#
Layout \r\nIn addition to the loaders I fixed some styling and layout
for the error\r\nand crash group page\r\n\r\n### Before \r\n<img
width=\"1704\"
alt=\"image\"\r\nsrc=\"16eac334-51e0-48cf-9506-15569112ba73\">\r\n\r\n###
After \r\n<img width=\"1704\"
alt=\"image\"\r\nsrc=\"39b3cce0-0a86-4626-a2c6-a164a1f3272d\">","sha":"f596e94215c926a5294c2727d5468fe106e59b1c"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v8.13.0","labelRegex":"^v8.13.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/172805","number":172805,"mergeCommit":{"message":"[APM]
Add progress bar for mobile error and crashes charts (#172805)\n\n##
Summary\r\n\r\ncloses:
https://github.com/elastic/kibana/issues/172317\r\n\r\n# Progress bar
\r\n\r\n###
Before\r\n\r\na185c39e-c7d7-49fd-ad65-a193509f906b\r\n\r\n###
After\r\n\r\n\r\n6ee3580f-4072-4193-86dc-b47df38bb632\r\n\r\n\r\n\r\n\r\n#
Layout \r\nIn addition to the loaders I fixed some styling and layout
for the error\r\nand crash group page\r\n\r\n### Before \r\n<img
width=\"1704\"
alt=\"image\"\r\nsrc=\"16eac334-51e0-48cf-9506-15569112ba73\">\r\n\r\n###
After \r\n<img width=\"1704\"
alt=\"image\"\r\nsrc=\"39b3cce0-0a86-4626-a2c6-a164a1f3272d\">","sha":"f596e94215c926a5294c2727d5468fe106e59b1c"}}]}]
BACKPORT-->

Co-authored-by: Katerina <aikaterini.patticha@elastic.co>
This commit is contained in:
Kibana Machine 2023-12-08 06:40:59 -05:00 • committed by GitHub
parent 16c3bbec34
commit 15f70d5c54
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 126 additions and 132 deletions
Download patch file Download diff file Expand all files Collapse all files

11
x-pack/plugins/apm/public/components/app/mobile/charts/mobile_errors_and_crashes_treemap/index.tsx
View file

@ -6,10 +6,10 @@
*/
import React, { useState } from 'react';
import { EuiSpacer } from '@elastic/eui';
import { EuiPanel, EuiProgress, EuiSpacer } from '@elastic/eui';
import { TreemapSelect, TreemapTypes } from './treemap_select';
import { TreemapChart } from '../../../../shared/charts/treemap_chart';
import { useFetcher } from '../../../../../hooks/use_fetcher';
import { useFetcher, isPending } from '../../../../../hooks/use_fetcher';
import {
DEVICE_MODEL_IDENTIFIER,
SERVICE_VERSION,
@ -62,7 +62,10 @@ export function MobileErrorsAndCrashesTreemap({
[environment, kuery, serviceName, start, end, selectedTreemap]
);
return (
<>
<EuiPanel hasBorder={true} style={{ position: 'relative' }}>
{isPending(status) && (
<EuiProgress size="xs" color="accent" position="absolute" />
)}
<TreemapSelect
selectedTreemap={selectedTreemap}
onChange={selectTreemap}
@ -74,6 +77,6 @@ export function MobileErrorsAndCrashesTreemap({
id="device-treemap"
height={320}
/>
</>
</EuiPanel>
);
}

9
x-pack/plugins/apm/public/components/app/mobile/charts/mobile_http_error_rate/index.tsx
View file

@ -11,13 +11,13 @@ import {
EuiIconTip,
EuiFlexItem,
EuiFlexGroup,
EuiProgress,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import React from 'react';
import { getComparisonChartTheme } from '../../../../shared/time_comparison/get_comparison_chart_theme';
import { TimeseriesChartWithContext } from '../../../../shared/charts/timeseries_chart_with_context';
import { useFetcher } from '../../../../../hooks/use_fetcher';
import { isPending, useFetcher } from '../../../../../hooks/use_fetcher';
import {
ChartType,
@ -100,7 +100,10 @@ export function HttpErrorRateChart({
];
return (
<EuiPanel hasBorder={true}>
<EuiPanel hasBorder={true} style={{ position: 'relative' }}>
{isPending(status) && (
<EuiProgress size="xs" color="accent" position="absolute" />
)}
<EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
<EuiFlexItem grow={false}>
<EuiTitle size="xs">

59
x-pack/plugins/apm/public/components/app/mobile/errors_and_crashes_group_details/crash_group_details/index.tsx
View file

@ -9,7 +9,6 @@ import {
EuiBadge,
EuiFlexGroup,
EuiFlexItem,
EuiPanel,
EuiSpacer,
EuiTitle,
} from '@elastic/eui';
@ -219,46 +218,40 @@ export function CrashGroupDetails() {
return (
<>
<EuiSpacer size={'s'} />
<EuiSpacer size="m" />
<CrashGroupHeader
groupId={groupId}
occurrencesCount={errorSamplesData?.occurrencesCount}
/>
<EuiSpacer size={'m'} />
<EuiFlexGroup>
<EuiSpacer size="m" />
<EuiFlexGroup gutterSize="s">
<ChartPointerEventContextProvider>
<EuiFlexItem grow={3}>
<EuiPanel hasBorder={true}>
<ErrorDistribution
fetchStatus={crashDistributionStatus}
distribution={crashDistributionData}
title={i18n.translate(
'xpack.apm.serviceDetails.metrics.crashOccurrencesChart.title',
{ defaultMessage: 'Crash occurrences' }
)}
height={300}
tip={i18n.translate(
'xpack.apm.serviceDetails.metrics.errorOccurrencesChart.tip',
{
defaultMessage: `Crash occurrence is measured in crashes per minute.`,
}
)}
/>
</EuiPanel>
<ErrorDistribution
fetchStatus={crashDistributionStatus}
distribution={crashDistributionData}
title={i18n.translate(
'xpack.apm.serviceDetails.metrics.crashOccurrencesChart.title',
{ defaultMessage: 'Crash occurrences' }
)}
height={300}
tip={i18n.translate(
'xpack.apm.serviceDetails.metrics.errorOccurrencesChart.tip',
{
defaultMessage: `Crash occurrence is measured in crashes per minute.`,
}
)}
/>
</EuiFlexItem>
</ChartPointerEventContextProvider>
<EuiFlexItem grow={2}>
<EuiPanel hasBorder={true}>
<MobileErrorsAndCrashesTreemap
serviceName={serviceName}
kuery={`${kueryForTreemap}`}
environment={environment}
start={start}
end={end}
/>
</EuiPanel>
<EuiFlexItem grow={3}>
<MobileErrorsAndCrashesTreemap
serviceName={serviceName}
kuery={`${kueryForTreemap}`}
environment={environment}
start={start}
end={end}
/>
</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer size="s" />

63
x-pack/plugins/apm/public/components/app/mobile/errors_and_crashes_group_details/error_group_details/index.tsx
View file

@ -9,7 +9,6 @@ import {
EuiBadge,
EuiFlexGroup,
EuiFlexItem,
EuiPanel,
EuiSpacer,
EuiTitle,
} from '@elastic/eui';
@ -218,48 +217,42 @@ export function ErrorGroupDetails() {
return (
<>
<EuiSpacer size={'s'} />
<EuiSpacer size="m" />
<ErrorGroupHeader
groupId={groupId}
occurrencesCount={errorSamplesData?.occurrencesCount}
/>
<EuiSpacer size={'m'} />
<EuiFlexGroup>
<EuiSpacer size="m" />
<EuiFlexGroup gutterSize="s">
<ChartPointerEventContextProvider>
<EuiFlexItem grow={3}>
<EuiPanel hasBorder={true}>
<ErrorDistribution
fetchStatus={errorDistributionStatus}
distribution={errorDistributionData}
title={i18n.translate(
'xpack.apm.errorGroupDetails.occurrencesChartLabel',
{
defaultMessage: 'Error occurrences',
}
)}
height={300}
tip={i18n.translate(
'xpack.apm.serviceDetails.metrics.errorRateChart.tip',
{
defaultMessage: `Error rate is measured in transactions per minute.`,
}
)}
/>
</EuiPanel>
<ErrorDistribution
fetchStatus={errorDistributionStatus}
distribution={errorDistributionData}
title={i18n.translate(
'xpack.apm.errorGroupDetails.occurrencesChartLabel',
{
defaultMessage: 'Error occurrences',
}
)}
height={300}
tip={i18n.translate(
'xpack.apm.serviceDetails.metrics.errorRateChart.tip',
{
defaultMessage: `Error rate is measured in transactions per minute.`,
}
)}
/>
</EuiFlexItem>
</ChartPointerEventContextProvider>
<EuiFlexItem grow={2}>
<EuiPanel hasBorder={true}>
<MobileErrorsAndCrashesTreemap
serviceName={serviceName}
kuery={`${kueryForTreemap}`}
environment={environment}
start={start}
end={end}
/>
</EuiPanel>
<EuiFlexItem grow={3}>
<MobileErrorsAndCrashesTreemap
serviceName={serviceName}
kuery={`${kueryForTreemap}`}
environment={environment}
start={start}
end={end}
/>
</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer size="s" />

20
x-pack/plugins/apm/public/components/app/mobile/errors_and_crashes_group_details/shared/distribution/index.tsx
View file

@ -5,11 +5,18 @@
* 2.0.
*/
import { EuiTitle, EuiIconTip, EuiFlexItem, EuiFlexGroup } from '@elastic/eui';
import {
EuiTitle,
EuiIconTip,
EuiFlexItem,
EuiFlexGroup,
EuiPanel,
EuiProgress,
} from '@elastic/eui';
import React from 'react';
import { TimeseriesChartWithContext } from '../../../../../shared/charts/timeseries_chart_with_context';
import { useLegacyUrlParams } from '../../../../../../context/url_params_context/use_url_params';
import { FETCH_STATUS } from '../../../../../../hooks/use_fetcher';
import { FETCH_STATUS, isPending } from '../../../../../../hooks/use_fetcher';
import { usePreviousPeriodLabel } from '../../../../../../hooks/use_previous_period_text';
import { APIReturnType } from '../../../../../../services/rest/create_call_apm_api';
import { getComparisonChartTheme } from '../../../../../shared/time_comparison/get_comparison_chart_theme';
@ -66,8 +73,11 @@ export function ErrorDistribution({
const comparisonChartTheme = getComparisonChartTheme();
return (
<>
<EuiFlexGroup alignItems="center" responsive={false}>
<EuiPanel hasBorder={true} style={{ position: 'relative' }}>
{isPending(fetchStatus) && (
<EuiProgress size="xs" color="accent" position="absolute" />
)}
<EuiFlexGroup alignItems="center" responsive={false} gutterSize="s">
<EuiFlexItem grow={false}>
<EuiTitle size="xs">
<h2>{title}</h2>
@ -87,6 +97,6 @@ export function ErrorDistribution({
timeseries={timeseries}
customTheme={comparisonChartTheme}
/>
</>
</EuiPanel>
);
}

48
x-pack/plugins/apm/public/components/app/mobile/errors_and_crashes_overview/crashes_overview.tsx
View file

@ -201,37 +201,33 @@ export function MobileCrashesOverview() {
<EuiFlexGroup direction="column" gutterSize="s">
<ChartPointerEventContextProvider>
<EuiFlexItem>
<EuiPanel hasBorder={true}>
<ErrorDistribution
fetchStatus={status}
distribution={crashDistributionData}
height={375}
title={i18n.translate(
'xpack.apm.serviceDetails.metrics.crashOccurrencesChart.title',
{ defaultMessage: 'Crash occurrences' }
)}
tip={i18n.translate(
'xpack.apm.serviceDetails.metrics.errorOccurrencesChart.tip',
{
defaultMessage: `Crash occurrence is measured in crashes per minute.`,
}
)}
/>
</EuiPanel>
<ErrorDistribution
fetchStatus={status}
distribution={crashDistributionData}
height={375}
title={i18n.translate(
'xpack.apm.serviceDetails.metrics.crashOccurrencesChart.title',
{ defaultMessage: 'Crash occurrences' }
)}
tip={i18n.translate(
'xpack.apm.serviceDetails.metrics.errorOccurrencesChart.tip',
{
defaultMessage: `Crash occurrence is measured in crashes per minute.`,
}
)}
/>
</EuiFlexItem>
</ChartPointerEventContextProvider>
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem>
<EuiPanel hasBorder={true}>
<MobileErrorsAndCrashesTreemap
serviceName={serviceName}
kuery={kueryForTreemap}
environment={environment}
start={start}
end={end}
/>
</EuiPanel>
<MobileErrorsAndCrashesTreemap
serviceName={serviceName}
kuery={kueryForTreemap}
environment={environment}
start={start}
end={end}
/>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>

48
x-pack/plugins/apm/public/components/app/mobile/errors_and_crashes_overview/errors_overview.tsx
View file

@ -197,23 +197,21 @@ export function MobileErrorsOverview() {
<EuiFlexGroup direction="column" gutterSize="s">
<ChartPointerEventContextProvider>
<EuiFlexItem>
<EuiPanel hasBorder={true}>
<ErrorDistribution
fetchStatus={status}
distribution={errorDistributionData}
height={150}
title={i18n.translate(
'xpack.apm.serviceDetails.metrics.errorRateChart.title',
{ defaultMessage: 'Error rate' }
)}
tip={i18n.translate(
'xpack.apm.serviceDetails.metrics.errorRateChart.tip',
{
defaultMessage: `Error rate is measured in transactions per minute.`,
}
)}
/>
</EuiPanel>
<ErrorDistribution
fetchStatus={status}
distribution={errorDistributionData}
height={150}
title={i18n.translate(
'xpack.apm.serviceDetails.metrics.errorRateChart.title',
{ defaultMessage: 'Error rate' }
)}
tip={i18n.translate(
'xpack.apm.serviceDetails.metrics.errorRateChart.tip',
{
defaultMessage: `Error rate is measured in transactions per minute.`,
}
)}
/>
</EuiFlexItem>
<EuiFlexItem>
<HttpErrorRateChart
@ -231,15 +229,13 @@ export function MobileErrorsOverview() {
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem>
<EuiPanel hasBorder={true}>
<MobileErrorsAndCrashesTreemap
serviceName={serviceName}
kuery={kueryForTreemap}
environment={environment}
start={start}
end={end}
/>
</EuiPanel>
<MobileErrorsAndCrashesTreemap
serviceName={serviceName}
kuery={kueryForTreemap}
environment={environment}
start={start}
end={end}
/>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>