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

## Summary closes: https://github.com/elastic/kibana/issues/172317 # Progress bar ### Before a185c39e-c7d7-49fd-ad65-a193509f906b ### After 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="16eac334-51e0-48cf-9506-15569112ba73"> ### After <img width="1704" alt="image" src="39b3cce0-0a86-4626-a2c6-a164a1f3272d">
2025-04-24 01:38:56 -04:00 · 2023-12-08 12:26:17 +02:00 · 2023-12-08 12:26:17 +02:00 · f596e94215
commit f596e94215
parent c0ab01aebc
7 changed files with 126 additions and 132 deletions
--- a/x-pack/plugins/apm/public/components/app/mobile/charts/mobile_errors_and_crashes_treemap/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/mobile/charts/mobile_errors_and_crashes_treemap/index.tsx
@ -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>
  );
 }
--- a/x-pack/plugins/apm/public/components/app/mobile/charts/mobile_http_error_rate/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/mobile/charts/mobile_http_error_rate/index.tsx
@ -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">
--- a/x-pack/plugins/apm/public/components/app/mobile/errors_and_crashes_group_details/crash_group_details/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/mobile/errors_and_crashes_group_details/crash_group_details/index.tsx
@ -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" />
--- a/x-pack/plugins/apm/public/components/app/mobile/errors_and_crashes_group_details/error_group_details/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/mobile/errors_and_crashes_group_details/error_group_details/index.tsx
@ -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" />
--- a/x-pack/plugins/apm/public/components/app/mobile/errors_and_crashes_group_details/shared/distribution/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/mobile/errors_and_crashes_group_details/shared/distribution/index.tsx
@ -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>
  );
 }
--- a/x-pack/plugins/apm/public/components/app/mobile/errors_and_crashes_overview/crashes_overview.tsx
+++ b/x-pack/plugins/apm/public/components/app/mobile/errors_and_crashes_overview/crashes_overview.tsx
@ -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>
--- a/x-pack/plugins/apm/public/components/app/mobile/errors_and_crashes_overview/errors_overview.tsx
+++ b/x-pack/plugins/apm/public/components/app/mobile/errors_and_crashes_overview/errors_overview.tsx
@ -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>