[Alert details page] Correct spacing between components (elastic#195208)

Fixes elastic#195111 ## Summary This PR fixes the spacing between components on the alert details page: |With grouping and license|With grouping without license| |---|---| |![image](https://github.com/user-attachments/assets/c7c5cd77-8bfe-4a19-90a8-112b7b3c5a01)|![image](https://github.com/user-attachments/assets/c02cbd18-623c-40c3-b65b-1a478f3545d5)|
juliaElastic · Oct 8, 2024 · 5533f42 · 5533f42
1 parent 17ae71b
commit 5533f42
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 60 deletions.
diff --git a/...plugins/observability_solution/observability/public/pages/alert_details/alert_details.tsx b/...plugins/observability_solution/observability/public/pages/alert_details/alert_details.tsx
@@ -218,24 +218,22 @@ export function AlertDetails() {
         <EuiFlexGroup direction="column" gutterSize="m">
           <SourceBar alert={alertDetail.formatted} sources={sources} />
           <AlertDetailContextualInsights alert={alertDetail} />
+          {rule && alertDetail.formatted && (
+            <>
+              <AlertDetailsAppSection
+                alert={alertDetail.formatted}
+                rule={rule}
+                timeZone={timeZone}
+                setSources={setSources}
+                setRelatedAlertsKuery={setRelatedAlertsKuery}
+              />
+              <AlertHistoryChart
+                alert={alertDetail.formatted}
+                rule={rule as unknown as CustomThresholdRule}
+              />
+            </>
+          )}
         </EuiFlexGroup>
-        <EuiSpacer size="m" />
-        {rule && alertDetail.formatted && (
-          <>
-            <AlertDetailsAppSection
-              alert={alertDetail.formatted}
-              rule={rule}
-              timeZone={timeZone}
-              setSources={setSources}
-              setRelatedAlertsKuery={setRelatedAlertsKuery}
-            />
-            <EuiSpacer size="l" />
-            <AlertHistoryChart
-              alert={alertDetail.formatted}
-              rule={rule as unknown as CustomThresholdRule}
-            />
-          </>
-        )}
       </>
     ) : (
       <EuiPanel hasShadow={false} data-test-subj="overviewTabPanel" paddingSize="none">

diff --git a/...y_solution/observability/public/pages/alert_details/alert_details_contextual_insights.tsx b/...y_solution/observability/public/pages/alert_details/alert_details_contextual_insights.tsx
@@ -5,8 +5,6 @@
  * 2.0.
  */
 
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-
 import React, { useCallback } from 'react';
 import { i18n } from '@kbn/i18n';
 import { ALERT_RULE_PARAMETERS } from '@kbn/rule-data-utils';
@@ -88,21 +86,17 @@ export function AlertDetailContextualInsights({ alert }: { alert: AlertData | nu
     }
   }, [alert, http, observabilityAIAssistant]);
 
-  if (!ObservabilityAIAssistantContextualInsight) {
+  if (!ObservabilityAIAssistantContextualInsight || !getAlertContextMessages()) {
     return null;
   }
 
   return (
-    <EuiFlexGroup direction="column" gutterSize="m">
-      <EuiFlexItem grow={false}>
-        <ObservabilityAIAssistantContextualInsight
-          title={i18n.translate(
-            'xpack.observability.alertDetailContextualInsights.InsightButtonLabel',
-            { defaultMessage: 'Help me understand this alert' }
-          )}
-          messages={getAlertContextMessages}
-        />
-      </EuiFlexItem>
-    </EuiFlexGroup>
+    <ObservabilityAIAssistantContextualInsight
+      title={i18n.translate(
+        'xpack.observability.alertDetailContextualInsights.InsightButtonLabel',
+        { defaultMessage: 'Help me understand this alert' }
+      )}
+      messages={getAlertContextMessages}
+    />
   );
 }
diff --git a/...observability_solution/observability/public/pages/alert_details/components/source_bar.tsx b/...observability_solution/observability/public/pages/alert_details/components/source_bar.tsx
@@ -33,35 +33,31 @@ export function SourceBar({ alert, sources = [] }: SourceBarProps) {
   }, [alertStart, alertEnd]);
 
   return (
-    <>
-      {groups && groups.length > 0 && (
-        <EuiPanel data-test-subj="alert-summary-container" hasShadow={false} hasBorder={true}>
-          <EuiFlexGroup gutterSize="l" direction="row" wrap>
-            <EuiTitle size="xs">
-              <h5>
-                <FormattedMessage
-                  id="xpack.observability.alertDetails.sourceBar.source"
-                  defaultMessage="Source"
-                />
-              </h5>
-            </EuiTitle>
-            <Groups
-              groups={groups}
-              timeRange={alertEnd ? timeRange : { ...timeRange, to: 'now' }}
-            />
-            {sources.map((field, idx) => {
-              return (
-                <EuiFlexItem key={`sources-${idx}`} grow={false}>
-                  <EuiText>
-                    {field.label}: {field.value}
-                  </EuiText>
-                </EuiFlexItem>
-              );
-            })}
-          </EuiFlexGroup>
-        </EuiPanel>
-      )}
-    </>
+    groups &&
+    groups.length > 0 && (
+      <EuiPanel data-test-subj="alert-summary-container" hasShadow={false} hasBorder={true}>
+        <EuiFlexGroup gutterSize="l" direction="row" wrap>
+          <EuiTitle size="xs">
+            <h5>
+              <FormattedMessage
+                id="xpack.observability.alertDetails.sourceBar.source"
+                defaultMessage="Source"
+              />
+            </h5>
+          </EuiTitle>
+          <Groups groups={groups} timeRange={alertEnd ? timeRange : { ...timeRange, to: 'now' }} />
+          {sources.map((field, idx) => {
+            return (
+              <EuiFlexItem key={`sources-${idx}`} grow={false}>
+                <EuiText>
+                  {field.label}: {field.value}
+                </EuiText>
+              </EuiFlexItem>
+            );
+          })}
+        </EuiFlexGroup>
+      </EuiPanel>
+    )
   );
 }