[Synthetics] Step details page object count breakdown (#144409)

x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/components/color_palette.tsx

@@ -10,22 +10,27 @@ import { EuiFlexGroup, EuiFlexItem, EuiText, EuiLoadingContent } from '@elastic/
 import { useTheme } from '@kbn/observability-plugin/public';
 import styled from 'styled-components';
 import { colourPalette } from './network_waterfall/step_detail/waterfall/data_formatting';
+
 export const ColorPalette = ({
   label,
   mimeType,
   percent,
   value,
   loading,
+  labelWidth = 40,
+  valueWidth = 60,
 }: {
   label: string;
   mimeType: string;
   percent: number;
   value: string;
   loading: boolean;
+  labelWidth?: number;
+  valueWidth?: number;
 }) => {
   return (
     <EuiFlexGroup gutterSize="s">
-      <EuiFlexItem grow={false} style={{ width: 40 }}>
+      <EuiFlexItem grow={false} style={{ width: labelWidth }}>
         <EuiText size="s">{label}</EuiText>
       </EuiFlexItem>
       <EuiFlexItem grow={true}>
@@ -35,7 +40,7 @@ export const ColorPalette = ({
           loading={loading}
         />
       </EuiFlexItem>
-      <EuiFlexItem grow={false} style={{ width: 65, justifySelf: 'flex-end' }}>
+      <EuiFlexItem grow={false} style={{ width: valueWidth, justifySelf: 'flex-end' }}>
         <EuiText
           size="s"
           style={{ fontWeight: 'bold', whiteSpace: 'nowrap' }}

x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/components/object_count_list.tsx

@@ -0,0 +1,57 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
+import React from 'react';
+import { i18n } from '@kbn/i18n';
+import { ColorPalette } from './color_palette';
+import { useObjectMetrics } from '../hooks/use_object_metrics';
+
+export const ObjectCountList = () => {
+  const objectMetrics = useObjectMetrics();
+
+  return (
+    <>
+      <EuiFlexGroup>
+        <EuiFlexItem grow>
+          <EuiTitle size="xs">
+            <h3>{OBJECT_COUNT_LABEL}</h3>
+          </EuiTitle>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiText>
+            {TOTAL_LABEL}: <span style={{ fontWeight: 'bold' }}> {objectMetrics.totalObjects}</span>
+          </EuiText>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <EuiSpacer size="s" />
+      <div>
+        {objectMetrics.items.map(({ label, mimeType, percent, count }) => (
+          <>
+            <ColorPalette
+              label={label}
+              mimeType={mimeType}
+              percent={percent}
+              value={String(count)}
+              valueWidth={30}
+              loading={objectMetrics.loading}
+            />
+            <EuiSpacer size="m" />
+          </>
+        ))}
+      </div>
+    </>
+  );
+};
+
+const OBJECT_COUNT_LABEL = i18n.translate('xpack.synthetics.stepDetails.objectCount', {
+  defaultMessage: 'Object count',
+});
+
+const TOTAL_LABEL = i18n.translate('xpack.synthetics.stepDetails.total', {
+  defaultMessage: 'Total',
+});

x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_detail_page.tsx

@@ -19,6 +19,7 @@ import {
 import { WaterfallChartContainer } from './components/network_waterfall/step_detail/waterfall/waterfall_chart_container';
 import { ObjectWeightList } from './components/object_weight_list';
 import { NetworkTimingsBreakdown } from './network_timings_breakdown';
+import { ObjectCountList } from './components/object_count_list';
 import { StepImage } from './components/step_image';
 import { useJourneySteps } from '../monitor_details/hooks/use_journey_steps';
 import { MonitorDetailsLinkPortal } from '../monitor_add_edit/monitor_details_portal';
@@ -94,7 +95,9 @@ export const StepDetailPage = () => {
               <EuiFlexItem grow={1}>
                 <ObjectWeightList />
               </EuiFlexItem>
-              <EuiFlexItem grow={1}>{/* TODO: Add breakdown of object weight*/}</EuiFlexItem>
+              <EuiFlexItem grow={1}>
+                <ObjectCountList />
+              </EuiFlexItem>
             </EuiFlexGroup>
           </EuiPanel>
         </EuiFlexItem>

x-pack/plugins/synthetics/public/apps/synthetics/routes.tsx

@@ -47,8 +47,8 @@ import {
   MONITOR_ERRORS_ROUTE,
   MONITOR_HISTORY_ROUTE,
   MONITOR_ROUTE,
-  STEP_DETAIL_ROUTE,
   ERROR_DETAILS_ROUTE,
+  STEP_DETAIL_ROUTE,
   OVERVIEW_ROUTE,
 } from '../../../common/constants';
 import { PLUGIN } from '../../../common/constants/plugin';