[Synthetics] Update layout for ping monitor

x-pack/plugins/synthetics/public/apps/synthetics/components/common/monitor_test_result/single_ping_result.tsx

@@ -24,7 +24,7 @@ export const SinglePingResult = ({ ping, loading }: { ping: Ping; loading: boole
   const responseStatus = !loading ? ping?.http?.response?.status_code : undefined;
 
   return (
-    <EuiDescriptionList type="responsiveColumn" compressed={true}>
+    <EuiDescriptionList type="column" compressed={true}>
       <EuiDescriptionListTitle>IP</EuiDescriptionListTitle>
       <EuiDescriptionListDescription>{ip}</EuiDescriptionListDescription>
       <EuiDescriptionListTitle>{DURATION_LABEL}</EuiDescriptionListTitle>

x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_details_panel.tsx

@@ -55,7 +55,7 @@ export const MonitorDetailsPanel = () => {
   return (
     <div css={wrapperStyle}>
       <EuiSpacer size="s" />
-      <EuiDescriptionList type="responsiveColumn" compressed={true}>
+      <EuiDescriptionList type="column" compressed={true}>
         <EuiDescriptionListTitle>{ENABLED_LABEL}</EuiDescriptionListTitle>
         <EuiDescriptionListDescription>
           {monitor && (

x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/step_duration_panel.tsx

@@ -12,6 +12,7 @@ import { ReportTypes } from '@kbn/observability-plugin/public';
 import { useParams } from 'react-router-dom';
 import { i18n } from '@kbn/i18n';
 
+import { useSelectedMonitor } from '../hooks/use_selected_monitor';
 import { ClientPluginsStart } from '../../../../../plugin';
 export const StepDurationPanel = () => {
   const { observability } = useKibana<ClientPluginsStart>().services;
@@ -20,12 +21,16 @@ export const StepDurationPanel = () => {
 
   const { monitorId } = useParams<{ monitorId: string }>();
 
+  const { monitor } = useSelectedMonitor();
+
+  const isBrowser = monitor?.type === 'browser';
+
   return (
     <EuiPanel>
       <EuiFlexGroup alignItems="center" gutterSize="s">
         <EuiFlexItem grow={false}>
           <EuiTitle size="xs">
-            <h3>{DURATION_BY_STEP_LABEL}</h3>
+            <h3>{isBrowser ? DURATION_BY_STEP_LABEL : DURATION_BY_LOCATION}</h3>
           </EuiTitle>
         </EuiFlexItem>
         <EuiFlexItem>
@@ -43,10 +48,10 @@ export const StepDurationPanel = () => {
           {
             name: DURATION_BY_STEP_LABEL,
             reportDefinitions: { 'monitor.id': [monitorId] },
-            selectedMetricField: 'synthetics.step.duration.us',
+            selectedMetricField: isBrowser ? 'synthetics.step.duration.us' : 'monitor.duration.us',
             dataType: 'synthetics',
             time: { from: 'now-24h/h', to: 'now' },
-            breakdown: 'synthetics.step.name.keyword',
+            breakdown: isBrowser ? 'synthetics.step.name.keyword' : 'observer.geo.name',
             operationType: 'last_value',
             seriesType: 'area_stacked',
           },
@@ -60,6 +65,10 @@ const DURATION_BY_STEP_LABEL = i18n.translate('xpack.synthetics.detailsPanel.dur
   defaultMessage: 'Duration by step',
 });
 
+const DURATION_BY_LOCATION = i18n.translate('xpack.synthetics.detailsPanel.durationByLocation', {
+  defaultMessage: 'Duration by location',
+});
+
 const LAST_24H_LABEL = i18n.translate('xpack.synthetics.detailsPanel.last24Hours', {
   defaultMessage: 'Last 24 hours',
 });

x-pack/plugins/synthetics/public/apps/synthetics/state/monitor_details/api.ts

@@ -51,8 +51,8 @@ export const fetchSyntheticsMonitor = async ({
   )) as SavedObject<SyntheticsMonitor>;
 
   return {
-    id: savedObject.id,
     ...savedObject.attributes,
+    id: savedObject.id,
     updated_at: savedObject.updated_at,
   } as EncryptedSyntheticsSavedMonitor;
 };