Skip to content

Commit

Permalink
[APM] Add progress bar for mobile error and crashes charts (#172805)
Browse files Browse the repository at this point in the history 
## Summary

closes: #172317

# Progress bar 

### Before

https://github.com/elastic/kibana/assets/3369346/a185c39e-c7d7-49fd-ad65-a193509f906b

### After


https://github.com/elastic/kibana/assets/3369346/6ee3580f-4072-4193-86dc-b47df38bb632




# Layout 
In addition to the loaders I fixed some styling and layout for the error
and crash group page

### Before 
<img width="1704" alt="image"
src="https://github.com/elastic/kibana/assets/3369346/16eac334-51e0-48cf-9506-15569112ba73">

### After 
<img width="1704" alt="image"
src="https://github.com/elastic/kibana/assets/3369346/39b3cce0-0a86-4626-a2c6-a164a1f3272d">
  • Loading branch information
@kpatticha
kpatticha authored Dec 8, 2023
1 parent c0ab01a commit f596e94
Show file tree
Hide file tree
Showing 7 changed files with 126 additions and 132 deletions.
11 changes: 7 additions & 4 deletions ...ugins/apm/public/components/app/mobile/charts/mobile_errors_and_crashes_treemap/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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}
Expand All @@ -74,6 +77,6 @@ export function MobileErrorsAndCrashesTreemap({
id="device-treemap"
height={320}
/>
</>
</EuiPanel>
);
}
9 changes: 6 additions & 3 deletions x-pack/plugins/apm/public/components/app/mobile/charts/mobile_http_error_rate/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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">
Expand Down
59 changes: 26 additions & 33 deletions ...blic/components/app/mobile/errors_and_crashes_group_details/crash_group_details/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import {
EuiBadge,
EuiFlexGroup,
EuiFlexItem,
EuiPanel,
EuiSpacer,
EuiTitle,
} from '@elastic/eui';
Expand Down Expand Up @@ -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" />
Expand Down
63 changes: 28 additions & 35 deletions ...blic/components/app/mobile/errors_and_crashes_group_details/error_group_details/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import {
EuiBadge,
EuiFlexGroup,
EuiFlexItem,
EuiPanel,
EuiSpacer,
EuiTitle,
} from '@elastic/eui';
Expand Down Expand Up @@ -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" />
Expand Down
20 changes: 15 additions & 5 deletions ...blic/components/app/mobile/errors_and_crashes_group_details/shared/distribution/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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>
Expand All @@ -87,6 +97,6 @@ export function ErrorDistribution({
timeseries={timeseries}
customTheme={comparisonChartTheme}
/>
</>
</EuiPanel>
);
}
48 changes: 22 additions & 26 deletions ...plugins/apm/public/components/app/mobile/errors_and_crashes_overview/crashes_overview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
48 changes: 22 additions & 26 deletions .../plugins/apm/public/components/app/mobile/errors_and_crashes_overview/errors_overview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>
Expand Down

0 comments on commit f596e94

Please sign in to comment.