From 233fe603b523cfed600528c77fc04e135582a96c Mon Sep 17 00:00:00 2001
From: Bena Kansara <69037875+benakansara@users.noreply.github.com>
Date: Wed, 11 Sep 2024 17:53:48 +0200
Subject: [PATCH] [RCA] Move charts closer, remove x-axis and labels (#192550)

Resolves https://github.com/elastic/kibana/issues/192548

<img width="1481" alt="Screenshot 2024-09-11 at 10 54 03"
src="https://github.com/user-attachments/assets/1dc39b3e-dac0-4259-9083-3ecfe1a048ce">

---------

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 .../items/esql_item/register_esql_item.tsx    |  21 ++--
 .../items/lens_item/register_lens_item.tsx    |   5 +-
 .../details/components/grid_item/index.tsx    | 112 +++++++++---------
 .../utils/get_lens_attrs_for_suggestion.ts    |  13 ++
 .../hooks/use_create_investigation.tsx        |   5 +-
 5 files changed, 83 insertions(+), 73 deletions(-)

diff --git a/x-pack/plugins/observability_solution/investigate_app/public/items/esql_item/register_esql_item.tsx b/x-pack/plugins/observability_solution/investigate_app/public/items/esql_item/register_esql_item.tsx
index 6ecab29020eba4..5f2f95807b4e03 100644
--- a/x-pack/plugins/observability_solution/investigate_app/public/items/esql_item/register_esql_item.tsx
+++ b/x-pack/plugins/observability_solution/investigate_app/public/items/esql_item/register_esql_item.tsx
@@ -21,10 +21,6 @@ import { getLensAttrsForSuggestion } from '../../utils/get_lens_attrs_for_sugges
 import type { Options } from '../register_items';
 import { getDateHistogramResults } from './get_date_histogram_results';
 
-const lensClassName = css`
-  height: 100%;
-`;
-
 interface Props {
   suggestion: Suggestion;
   dataView: DataView;
@@ -142,7 +138,7 @@ export function EsqlWidget({ suggestion, dataView, esqlQuery, dateHistogramResul
           grow={false}
           className={css`
             > div {
-              height: 196px;
+              height: 128px;
             }
           `}
         >
@@ -153,15 +149,12 @@ export function EsqlWidget({ suggestion, dataView, esqlQuery, dateHistogramResul
   }
 
   return (
-    <EuiFlexItem
-      grow={true}
-      className={css`
-        > div {
-          height: 196px;
-        }
-      `}
-    >
-      <lens.EmbeddableComponent {...input} className={lensClassName} />
+    <EuiFlexItem grow={true}>
+      <lens.EmbeddableComponent
+        {...input}
+        style={{ height: 128 }}
+        overrides={{ axisX: { hide: true } }}
+      />
     </EuiFlexItem>
   );
 }
diff --git a/x-pack/plugins/observability_solution/investigate_app/public/items/lens_item/register_lens_item.tsx b/x-pack/plugins/observability_solution/investigate_app/public/items/lens_item/register_lens_item.tsx
index c81ebec9c6ade3..3f2b1d9f9c1bf5 100644
--- a/x-pack/plugins/observability_solution/investigate_app/public/items/lens_item/register_lens_item.tsx
+++ b/x-pack/plugins/observability_solution/investigate_app/public/items/lens_item/register_lens_item.tsx
@@ -148,7 +148,7 @@ export function LensWidget({
           interval,
         },
       },
-      seriesType: 'bar',
+      seriesType: 'bar_stacked',
     };
 
     if (groupBy && groupBy?.length) {
@@ -221,12 +221,13 @@ export function LensWidget({
       <lens.EmbeddableComponent
         onLoad={setChartLoading}
         id="alertDefaultChart"
-        style={{ height: 180 }}
+        style={{ height: 128 }}
         timeRange={timeRange}
         attributes={attributes}
         query={(searchConfiguration?.query as Query) || defaultQuery}
         disableTriggers={true}
         filters={filters}
+        overrides={{ axisX: { hide: true } }}
       />
     </div>
   );
diff --git a/x-pack/plugins/observability_solution/investigate_app/public/pages/details/components/grid_item/index.tsx b/x-pack/plugins/observability_solution/investigate_app/public/pages/details/components/grid_item/index.tsx
index 91f7a58b43b5ea..c43ae1ffaa04fa 100644
--- a/x-pack/plugins/observability_solution/investigate_app/public/pages/details/components/grid_item/index.tsx
+++ b/x-pack/plugins/observability_solution/investigate_app/public/pages/details/components/grid_item/index.tsx
@@ -52,13 +52,13 @@ const panelContentClassName = css`
   }
 `;
 
-const headerClassName = css`
-  height: ${GRID_ITEM_HEADER_HEIGHT}px;
-`;
-
 export function GridItem({ id, title, children, onDelete, onCopy, loading }: GridItemProps) {
   const theme = useTheme();
 
+  const headerClassName = css`
+  padding: 0 ${theme.size.s} 0 ${theme.size.s}};
+`;
+
   const containerClassName = css`
     height: 100%;
     max-width: 100%;
@@ -71,58 +71,58 @@ export function GridItem({ id, title, children, onDelete, onCopy, loading }: Gri
   `;
 
   return (
-    <EuiFlexGroup
-      direction="column"
-      gutterSize="none"
-      className={containerClassName}
-      alignItems="stretch"
-    >
-      <EuiFlexItem grow={false}>
-        <EuiFlexGroup
-          direction="row"
-          gutterSize="m"
-          alignItems="center"
-          className={headerClassName}
-        >
-          <EuiFlexItem className={titleContainerClassName}>
-            <EuiText size="s" className={titleItemClassName}>
-              {title}
-            </EuiText>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false} className="gridItemControls">
-            <EuiFlexGroup
-              direction="row"
-              gutterSize="xs"
-              alignItems="center"
-              justifyContent="flexEnd"
-            >
-              <EuiFlexItem grow={false}>
-                <InvestigateTextButton
-                  iconType="copy"
-                  onClick={() => {
-                    onCopy();
-                  }}
-                  disabled={loading}
-                />
-              </EuiFlexItem>
-              <EuiFlexItem grow={false}>
-                <InvestigateTextButton
-                  iconType="trash"
-                  onClick={() => {
-                    onDelete();
-                  }}
-                  disabled={loading}
-                />
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiFlexItem>
-      <EuiFlexItem grow className={panelContainerClassName}>
-        <EuiPanel hasBorder hasShadow={false} className={panelClassName}>
+    <EuiPanel hasBorder hasShadow={false} className={panelClassName} paddingSize="none">
+      <EuiFlexGroup
+        direction="column"
+        gutterSize="none"
+        className={containerClassName}
+        alignItems="stretch"
+      >
+        <EuiFlexItem grow={false}>
+          <EuiFlexGroup
+            direction="row"
+            gutterSize="none"
+            alignItems="center"
+            className={headerClassName}
+          >
+            <EuiFlexItem className={titleContainerClassName}>
+              <EuiText size="s" className={titleItemClassName}>
+                <h5>{title}</h5>
+              </EuiText>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false} className="gridItemControls">
+              <EuiFlexGroup
+                direction="row"
+                gutterSize="none"
+                alignItems="center"
+                justifyContent="flexEnd"
+              >
+                <EuiFlexItem grow={false}>
+                  <InvestigateTextButton
+                    iconType="copy"
+                    onClick={() => {
+                      onCopy();
+                    }}
+                    disabled={loading}
+                  />
+                </EuiFlexItem>
+                <EuiFlexItem grow={false}>
+                  <InvestigateTextButton
+                    iconType="trash"
+                    onClick={() => {
+                      onDelete();
+                    }}
+                    disabled={loading}
+                  />
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFlexItem>
+        <EuiFlexItem grow className={panelContainerClassName}>
           <div className={panelContentClassName}>{children}</div>
-        </EuiPanel>
-      </EuiFlexItem>
-    </EuiFlexGroup>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiPanel>
   );
 }
diff --git a/x-pack/plugins/observability_solution/investigate_app/public/utils/get_lens_attrs_for_suggestion.ts b/x-pack/plugins/observability_solution/investigate_app/public/utils/get_lens_attrs_for_suggestion.ts
index 0483d771954c06..79693ff2941aa4 100644
--- a/x-pack/plugins/observability_solution/investigate_app/public/utils/get_lens_attrs_for_suggestion.ts
+++ b/x-pack/plugins/observability_solution/investigate_app/public/utils/get_lens_attrs_for_suggestion.ts
@@ -32,6 +32,19 @@ export function getLensAttrsForSuggestion({
     dataView,
   }) as TypedLensByValueInput['attributes'];
 
+  attrs.state.visualization = {
+    ...(attrs.state.visualization as any),
+    axisTitlesVisibilitySettings: {
+      x: false,
+      yLeft: false,
+      yRight: false,
+    },
+    legend: {
+      isVisible: false,
+      position: 'right',
+    },
+  };
+
   const lensEmbeddableInput: TypedLensByValueInput = {
     attributes: attrs,
     id: v4(),
diff --git a/x-pack/plugins/observability_solution/observability/public/pages/alert_details/hooks/use_create_investigation.tsx b/x-pack/plugins/observability_solution/observability/public/pages/alert_details/hooks/use_create_investigation.tsx
index 428e94ef15b158..8fad55195f9b20 100644
--- a/x-pack/plugins/observability_solution/observability/public/pages/alert_details/hooks/use_create_investigation.tsx
+++ b/x-pack/plugins/observability_solution/observability/public/pages/alert_details/hooks/use_create_investigation.tsx
@@ -32,7 +32,10 @@ export function useCreateInvestigation() {
     ['createInvestigation'],
     ({ investigation }) => {
       const body = JSON.stringify(investigation);
-      return http.post<CreateInvestigationResponse>(`/api/observability/investigations`, { body });
+      return http.post<CreateInvestigationResponse>(`/api/observability/investigations`, {
+        body,
+        version: '2023-10-31',
+      });
     },
     {
       onError: (error, { investigation }, context) => {