[APM] Mobile UI tweaks (#172368)

closes #151716 #151766 ### Before https://github.com/elastic/kibana/assets/3369346/0cd1c885-3729-4ceb-9b4f-f345efa7e85d ### After https://github.com/elastic/kibana/assets/3369346/086f6454-d98c-4a87-99ec-fbebf55d87f2 Fixes: - Metric loading - Hidden map in smaller screens - Spaces and layout --------- Co-authored-by: Cauê Marcondes <[email protected]>
elastic · Dec 4, 2023 · 155d20b · 155d20b
1 parent 6e7b446
commit 155d20b
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 35 deletions.
diff --git a/x-pack/plugins/apm/public/components/app/mobile/search_bar.tsx b/x-pack/plugins/apm/public/components/app/mobile/search_bar.tsx
@@ -14,7 +14,6 @@ import {
 import React from 'react';
 import { useBreakpoints } from '../../../hooks/use_breakpoints';
 import { TimeComparison } from '../../shared/time_comparison';
-import { TransactionTypeSelect } from '../../shared/transaction_type_select';
 import { MobileFilters } from './service_overview/filters';
 import { UnifiedSearchBar } from '../../shared/unified_search_bar';
 
@@ -56,12 +55,6 @@ export function MobileSearchBar({
           gutterSize="s"
           responsive={false}
         >
-          {showTransactionTypeSelector && (
-            <EuiFlexItem grow={isSmall}>
-              <TransactionTypeSelect />
-            </EuiFlexItem>
-          )}
-
           {showUnifiedSearchBar && (
             <EuiFlexItem>
               <UnifiedSearchBar placeholder={searchBarPlaceholder} />
@@ -72,6 +65,7 @@ export function MobileSearchBar({
       <EuiSpacer size={isSmall ? 's' : 'm'} />
       <EuiFlexGroup
         justifyContent="spaceBetween"
+        gutterSize={isMedium ? 's' : 'm'}
         direction={isLarge || isMedium ? 'column' : 'row'}
       >
         {showTimeComparison && (

diff --git a/x-pack/plugins/apm/public/components/app/mobile/service_overview/filters/index.tsx b/x-pack/plugins/apm/public/components/app/mobile/service_overview/filters/index.tsx
@@ -59,7 +59,7 @@ const MOBILE_FILTERS: Array<{ key: MobileFilter['key']; label: string }> = [
 
 export function MobileFilters() {
   const history = useHistory();
-  const { isSmall, isLarge } = useBreakpoints();
+  const { isLarge } = useBreakpoints();
   const { serviceName } = useApmServiceContext();
 
   const {
@@ -136,7 +136,7 @@ export function MobileFilters() {
           >
             <EuiSelect
               data-test-subj="apmMobileFiltersSelect"
-              fullWidth={isSmall}
+              fullWidth
               isLoading={status === FETCH_STATUS.LOADING}
               prepend={label}
               options={toSelectOptions(selectOptions)}

diff --git a/x-pack/plugins/apm/public/components/app/mobile/service_overview/geo_map/index.tsx b/x-pack/plugins/apm/public/components/app/mobile/service_overview/geo_map/index.tsx
@@ -29,13 +29,19 @@ export function GeoMap({
     <>
       <EmbeddedMapSelect selectedMap={selectedMap} onChange={selectMap} />
       <EuiSpacer size="s" />
-      <EmbeddedMap
-        selectedMap={selectedMap}
-        start={start}
-        end={end}
-        kuery={kuery}
-        filters={filters}
-      />
+      <div
+        style={{
+          height: 500,
+        }}
+      >
+        <EmbeddedMap
+          selectedMap={selectedMap}
+          start={start}
+          end={end}
+          kuery={kuery}
+          filters={filters}
+        />
+      </div>
     </>
   );
 }
diff --git a/x-pack/plugins/apm/public/components/app/mobile/service_overview/stats/location_stats.tsx b/x-pack/plugins/apm/public/components/app/mobile/service_overview/stats/location_stats.tsx
@@ -6,28 +6,24 @@
  */
 import { MetricDatum, MetricTrendShape } from '@elastic/charts';
 import { i18n } from '@kbn/i18n';
-import { EuiIcon, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import {
+  EuiIcon,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiLoadingSpinner,
+} from '@elastic/eui';
 import React, { useCallback } from 'react';
 import { useTheme } from '@kbn/observability-shared-plugin/public';
-import { useFetcher, isPending } from '../../../../../hooks/use_fetcher';
+import {
+  useFetcher,
+  isPending,
+  FETCH_STATUS,
+} from '../../../../../hooks/use_fetcher';
 import { CLIENT_GEO_COUNTRY_NAME } from '../../../../../../common/es_fields/apm';
 import { NOT_AVAILABLE_LABEL } from '../../../../../../common/i18n';
 import { MetricItem } from './metric_item';
 import { usePreviousPeriodLabel } from '../../../../../hooks/use_previous_period_text';
 
-const getIcon =
-  (type: string) =>
-  ({
-    width = 20,
-    height = 20,
-    color,
-  }: {
-    width: number;
-    height: number;
-    color: string;
-  }) =>
-    <EuiIcon type={type} width={width} height={height} fill={color} />;
-
 const formatDifference = (value: number) => {
   return value > 0 ? '+' + value.toFixed(0) + '%' : value.toFixed(0) + '%';
 };
@@ -90,6 +86,26 @@ export function MobileLocationStats({
     [start, end, environment, kuery, serviceName, locationField, offset]
   );
 
+  const getIcon = useCallback(
+    (type: string) =>
+      ({
+        width = 20,
+        height = 20,
+        color,
+      }: {
+        width: number;
+        height: number;
+        color: string;
+      }) => {
+        return locationStatsStatus === FETCH_STATUS.LOADING ? (
+          <EuiLoadingSpinner size="m" />
+        ) : (
+          <EuiIcon type={type} width={width} height={height} fill={color} />
+        );
+      },
+    [locationStatsStatus]
+  );
+
   const loadingLocationStats = isPending(locationStatsStatus);
 
   const currentPeriod = locationStatsData?.currentPeriod;

diff --git a/x-pack/plugins/apm/public/components/app/mobile/service_overview/stats/stats.tsx b/x-pack/plugins/apm/public/components/app/mobile/service_overview/stats/stats.tsx
@@ -130,7 +130,7 @@ export function MobileStats({
         Number.isNaN(value)
           ? NOT_AVAILABLE_LABEL
           : valueFormatter(Number(value.toFixed(1)), 'ms'),
-      trend: data?.currentPeriod?.launchTimes?.timeseries,
+      trend: data?.currentPeriod?.launchTimes?.timeseries ?? [],
       extra: getComparisonValueFormatter(
         data?.previousPeriod.launchTimes?.value?.toFixed(1)
       ),
@@ -145,7 +145,7 @@ export function MobileStats({
       value: data?.currentPeriod?.sessions?.value ?? NaN,
       valueFormatter: (value: number) =>
         Number.isNaN(value) ? NOT_AVAILABLE_LABEL : valueFormatter(value),
-      trend: data?.currentPeriod?.sessions?.timeseries,
+      trend: data?.currentPeriod?.sessions?.timeseries ?? [],
       extra: getComparisonValueFormatter(data?.previousPeriod.sessions?.value),
       trendShape: MetricTrendShape.Area,
     },

diff --git a/x-pack/plugins/apm/public/components/shared/time_comparison/index.tsx b/x-pack/plugins/apm/public/components/shared/time_comparison/index.tsx
@@ -36,7 +36,7 @@ const PrependContainer = euiStyled.div`
 export function TimeComparison() {
   const trackApmEvent = useUiTracker({ app: 'apm' });
   const history = useHistory();
-  const { isSmall } = useBreakpoints();
+  const { isSmall, isMedium } = useBreakpoints();
   const {
     query: { rangeFrom, rangeTo, comparisonEnabled, offset },
   } = useAnyOfApmParams(
@@ -113,7 +113,7 @@ export function TimeComparison() {
 
   return (
     <EuiSelect
-      fullWidth={isSmall}
+      fullWidth={isSmall || isMedium}
       data-test-subj="comparisonSelect"
       disabled={comparisonEnabled === false}
       options={comparisonOptions}