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

## Summary closes https://github.com/elastic/kibana/issues/144455 In this PR we've updated some of the initial overview experience for Mobile APM services by: - rearranging the panels on the Overview page for improved mobile and APM experience - fitting all the Most used widgets into one panel, and rearranging them - adding a callout for feedback - adding a technical preview badge - update the Embeddable component visual and size ![image](https://user-images.githubusercontent.com/13353203/201143633-20b8adb4-e342-4d7f-8e87-d7b3f7e10121.png) Related links: https://github.com/elastic/apm-dev/issues/823 https://github.com/elastic/kibana/issues/143498 https://github.com/elastic/kibana/issues/143501 https://github.com/elastic/kibana/issues/143504 Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Kate Patticha <aikaterini.patticha@elastic.co>
2025-04-24 09:48:58 -04:00 · 2022-11-14 15:22:30 +01:00 · 2022-11-14 15:22:30 +01:00 · 296769a314
commit 296769a314
parent a5cfe8ec0d
6 changed files with 161 additions and 85 deletions
--- a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_charts/filters/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_charts/filters/index.tsx
@ -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)}
--- a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_charts/most_used_chart/snapshots/most_used_chart.test.tsx.snap
+++ b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_charts/most_used_chart/snapshots/most_used_chart.test.tsx.snap
@ -85,14 +85,16 @@ Object {
          "layerId": "host-os-version",
          "layerType": "data",
          "legendDisplay": "hide",
+          "legendPosition": "bottom",
          "metric": "countColumn",
+          "nestedLegend": false,
          "numberDisplay": "percent",
          "primaryGroups": Array [
            "termsColumn",
          ],
        },
      ],
-      "shape": "pie",
+      "shape": "donut",
    },
  },
  "title": "most-used-host-os-version",
--- a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_charts/most_used_chart/get_lens_attributes.ts
+++ b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_charts/most_used_chart/get_lens_attributes.ts
@ -88,7 +88,7 @@ export function getLensAttributes({
    ],
    state: {
      visualization: {
-        shape: 'pie',
+        shape: 'donut',
        layers: [
          {
            layerId: metricId,
@ -96,8 +96,10 @@ export function getLensAttributes({
            metric: columnB,
            categoryDisplay: 'default',
            legendDisplay: 'hide',
+            nestedLegend: false,
            numberDisplay: 'percent',
            layerType: 'data',
+            legendPosition: 'bottom',
          },
        ],
      } as PieVisualizationState,
--- a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_charts/most_used_chart/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_charts/most_used_chart/index.tsx
@ -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';
@ -96,11 +96,12 @@ 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
@ -108,7 +109,7 @@ export function MostUsedChart({
          id={`most-used-${metric.replaceAll('.', '-')}`}
          hidePanelTitles
          withDefaultActions
-          style={{ height: 200 }}
+          style={{ height: 175 }}
          attributes={lensAttributes}
          timeRange={{
            from: start,
--- a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_charts/service_oveview_mobile_charts.tsx
+++ b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_charts/service_oveview_mobile_charts.tsx
@ -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';
@ -71,7 +81,7 @@ export function ServiceOverviewMobileCharts({

  return (
    <EuiFlexGroup direction="column" gutterSize="s">
-      <EuiFlexItem>
+      <EuiFlexItem grow={false}>
        <MobileFilters
          start={start}
          end={end}
@ -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 */}
+                <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} />
@ -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>
  );
 }
--- a/x-pack/plugins/apm/public/components/routing/templates/apm_service_template/index.tsx
+++ b/x-pack/plugins/apm/public/components/routing/templates/apm_service_template/index.tsx
@ -84,6 +84,8 @@ function TemplateWithContext({

  const tabs = useTabs({ selectedTab });

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