[Synthetics] Fix last run panel styling (#188479)

## Summary Fixes #174085 Fix last run panel styling !! ### After <img width="1481" alt="image" src="https://github.com/user-attachments/assets/5e3cf7ce-1d0f-4dd4-a35d-169d60a3ddc2"> ### Before <img width="1502" alt="image" src="https://github.com/user-attachments/assets/7da9c018-d421-4a97-a3b5-72ed83f37173">
elastic · Jul 18, 2024 · b36fbef · b36fbef
1 parent 62144fb
commit b36fbef
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 32 deletions.
diff --git a/...etics/public/apps/synthetics/components/common/monitor_test_result/single_ping_result.tsx b/...etics/public/apps/synthetics/components/common/monitor_test_result/single_ping_result.tsx
@@ -11,42 +11,66 @@ import {
   EuiDescriptionListTitle,
   EuiDescriptionListDescription,
   EuiBadge,
+  EuiLink,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { Ping } from '../../../../../../common/runtime_types';
 import { formatTestDuration } from '../../../utils/monitor_test_result/test_time_formats';
 
-export const SinglePingResult = ({ ping, loading }: { ping?: Ping; loading: boolean }) => {
-  const ip = !loading ? ping?.resolve?.ip : undefined;
-  const durationUs = !loading ? ping?.monitor?.duration?.us ?? NaN : NaN;
-  const rtt = !loading ? ping?.resolve?.rtt?.us ?? NaN : NaN;
-  const url = !loading ? ping?.url?.full : undefined;
-  const responseStatus = !loading ? ping?.http?.response?.status_code : undefined;
+export const SinglePingResult = ({ ping }: { ping?: Ping }) => {
+  const ip = ping?.resolve?.ip;
+  const durationUs = ping?.monitor?.duration?.us ?? NaN;
+  const rtt = ping?.resolve?.rtt?.us ?? NaN;
+  const url = ping?.url?.full;
+  const responseStatus = ping?.http?.response?.status_code;
 
   return (
-    <EuiDescriptionList type="column" compressed={true}>
-      <EuiDescriptionListTitle>IP</EuiDescriptionListTitle>
-      <EuiDescriptionListDescription>{ip}</EuiDescriptionListDescription>
-      <EuiDescriptionListTitle>{DURATION_LABEL}</EuiDescriptionListTitle>
-      <EuiDescriptionListDescription>
-        {isNaN(durationUs) ? '' : formatTestDuration(durationUs)}
-      </EuiDescriptionListDescription>
-      <EuiDescriptionListTitle>rtt</EuiDescriptionListTitle>
-      <EuiDescriptionListDescription>
-        {isNaN(rtt) ? '' : formatTestDuration(rtt)}
-      </EuiDescriptionListDescription>
-      <EuiDescriptionListTitle>URL</EuiDescriptionListTitle>
-      <EuiDescriptionListDescription>{url}</EuiDescriptionListDescription>
+    <>
+      <EuiDescriptionList type="column" compressed={true}>
+        <EuiDescriptionListTitle>
+          {i18n.translate('xpack.synthetics.singlePingResult.ipDescriptionListTitleLabel', {
+            defaultMessage: 'IP',
+          })}
+        </EuiDescriptionListTitle>
+        <EuiDescriptionListDescription>{ip}</EuiDescriptionListDescription>
+        <EuiDescriptionListTitle>{DURATION_LABEL}</EuiDescriptionListTitle>
+        <EuiDescriptionListDescription>
+          {isNaN(durationUs) ? '' : formatTestDuration(durationUs)}
+        </EuiDescriptionListDescription>
+        <EuiDescriptionListTitle>
+          {i18n.translate('xpack.synthetics.singlePingResult.rttDescriptionListTitleLabel', {
+            defaultMessage: 'rtt',
+          })}
+        </EuiDescriptionListTitle>
+        <EuiDescriptionListDescription>
+          {isNaN(rtt) ? '' : formatTestDuration(rtt)}
+        </EuiDescriptionListDescription>
+        <EuiDescriptionListTitle>
+          {i18n.translate('xpack.synthetics.singlePingResult.urlDescriptionListTitleLabel', {
+            defaultMessage: 'URL',
+          })}
+        </EuiDescriptionListTitle>
+        <EuiDescriptionListDescription className="eui-textBreakWord">
+          <EuiLink data-test-subj="syntheticsSinglePingResultLink" href={url}>
+            {url}
+          </EuiLink>
+        </EuiDescriptionListDescription>
 
-      {responseStatus ? (
-        <>
-          <EuiDescriptionListTitle>Response status</EuiDescriptionListTitle>
-          <EuiDescriptionListDescription>
-            <EuiBadge>{responseStatus}</EuiBadge>
-          </EuiDescriptionListDescription>
-        </>
-      ) : null}
-    </EuiDescriptionList>
+        {responseStatus ? (
+          <>
+            <EuiDescriptionListTitle>
+              {i18n.translate(
+                'xpack.synthetics.singlePingResult.responseStatusDescriptionListTitleLabel',
+                { defaultMessage: 'Response status' }
+              )}
+            </EuiDescriptionListTitle>
+            <EuiDescriptionListDescription>
+              <EuiBadge>{responseStatus}</EuiBadge>
+            </EuiDescriptionListDescription>
+          </>
+        ) : null}
+      </EuiDescriptionList>
+    </>
   );
 };
 

diff --git a/...etics/public/apps/synthetics/components/monitor_details/monitor_summary/last_test_run.tsx b/...etics/public/apps/synthetics/components/monitor_details/monitor_summary/last_test_run.tsx
@@ -19,6 +19,7 @@ import {
   EuiText,
   EuiTitle,
   useEuiTheme,
+  EuiProgress,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
@@ -87,6 +88,7 @@ export const LastTestRunComponent = ({
 
   return (
     <EuiPanel hasShadow={false} hasBorder css={{ minHeight: 356 }}>
+      {loading && <EuiProgress size="xs" color="accent" />}
       <PanelHeader monitor={monitor} latestPing={latestPing} loading={loading} />
       {!(loading && !latestPing) && latestPing?.error ? (
         <EuiCallOut
@@ -130,7 +132,7 @@ export const LastTestRunComponent = ({
           showExpand={isErrorDetails}
         />
       ) : (
-        <SinglePingResult ping={latestPing} loading={loading} />
+        <SinglePingResult ping={latestPing} />
       )}
     </EuiPanel>
   );
@@ -188,13 +190,13 @@ const PanelHeader = ({
   return (
     <>
       <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false} wrap={true}>
-        <EuiFlexItem grow={false}>{TitleNode}</EuiFlexItem>
+        <EuiFlexItem>{TitleNode}</EuiFlexItem>
         <EuiFlexItem grow={false} css={{ flexBasis: 'fit-content' }}>
           <StatusBadge
             status={parseBadgeStatus(latestPing?.summary?.down! > 0 ? 'fail' : 'success')}
           />
         </EuiFlexItem>
-        <EuiFlexItem grow={true}>
+        <EuiFlexItem grow={false}>
           <EuiText css={{ whiteSpace: 'nowrap' }} size="xs" color={euiTheme.colors.darkShade}>
             {lastRunTimestamp}
           </EuiText>

diff --git a/...ics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_summary.tsx b/...ics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_summary.tsx
@@ -118,7 +118,7 @@ export const MonitorSummary = () => {
       />
       <EuiSpacer size="m" />
       <EuiFlexGroup gutterSize="m" wrap={true}>
-        <EuiFlexItem css={isFlyoutOpen ? { minWidth: 260 } : undefined}>
+        <EuiFlexItem css={isFlyoutOpen ? { minWidth: 260, maxWidth: 500 } : { maxWidth: 500 }}>
           <LastTestRun />
         </EuiFlexItem>
         <EuiFlexItem css={{ minWidth: 260 }}>

diff --git a/x-pack/plugins/observability_solution/synthetics/server/routes/monitor_cruds/add_monitor.ts b/x-pack/plugins/observability_solution/synthetics/server/routes/monitor_cruds/add_monitor.ts
@@ -7,6 +7,7 @@
 import { schema } from '@kbn/config-schema';
 import { SavedObjectsErrorHelpers } from '@kbn/core/server';
 import { i18n } from '@kbn/i18n';
+import { validatePermissions } from './edit_monitor';
 import { InvalidLocationError } from '../../synthetics_service/project_monitor/normalizers/common_fields';
 import { AddEditMonitorAPI, CreateMonitorPayLoad } from './add_monitor/add_monitor_api';
 import { SyntheticsRestApiRouteFactory } from '../types';
@@ -82,6 +83,14 @@ export const addSyntheticsMonitorRoute: SyntheticsRestApiRouteFactory = () => ({
 
       const normalizedMonitor = validationResult.decodedMonitor;
 
+      const err = await validatePermissions(routeContext, normalizedMonitor.locations);
+      if (err) {
+        return response.forbidden({
+          body: {
+            message: err,
+          },
+        });
+      }
       const nameError = await addMonitorAPI.validateUniqueMonitorName(normalizedMonitor.name);
       if (nameError) {
         return response.badRequest({