From 27fc4d11fa529268c76eb994595f8420fe80b697 Mon Sep 17 00:00:00 2001
From: abhishekbhatia1710 <abhishek.bhatia@elastic.co>
Date: Thu, 3 Jul 2025 16:02:07 +0530
Subject: [PATCH 1/5] Changes to show "Data not available" when index is not
 present for a specific data

---
 .../common/key_insights_tile.tsx              | 113 ++++++++++++------
 .../components/key_insights_panel/index.tsx   |  14 +--
 2 files changed, 84 insertions(+), 43 deletions(-)

diff --git a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/privileged_user_monitoring/components/key_insights_panel/common/key_insights_tile.tsx b/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/privileged_user_monitoring/components/key_insights_panel/common/key_insights_tile.tsx
index e4b2168a1b433..b449c52a0298e 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/privileged_user_monitoring/components/key_insights_panel/common/key_insights_tile.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/privileged_user_monitoring/components/key_insights_panel/common/key_insights_tile.tsx
@@ -5,31 +5,26 @@
  * 2.0.
  */
 
-import React from 'react';
-import { EuiFlexItem, useEuiTheme } from '@elastic/eui';
-import { css } from '@emotion/react';
+import React, { useState, useEffect } from 'react';
+import { EuiFlexItem, EuiFlexGroup, EuiPanel, EuiText } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
 import type { ReactElement } from 'react';
 import { createKeyInsightsPanelLensAttributes } from './lens_attributes';
 import { VisualizationEmbeddable } from '../../../../../../common/components/visualization_actions/visualization_embeddable';
 import { useEsqlGlobalFilterQuery } from '../../../../../../common/hooks/esql/use_esql_global_filter';
 import { useGlobalTime } from '../../../../../../common/containers/use_global_time';
 import { useSpaceId } from '../../../../../../common/hooks/use_space_id';
+import { useVisualizationResponse } from '../../../../../../common/components/visualization_actions/use_visualization_response';
 
-const LENS_VISUALIZATION_HEIGHT = 126;
-const LENS_VISUALIZATION_MIN_WIDTH = 160;
+const LENS_VISUALIZATION_HEIGHT = 150;
+const LENS_VISUALIZATION_MIN_WIDTH = 220;
 
 interface KeyInsightsTileProps {
-  /** The title of the tile (i18n FormattedMessage element) */
   title: ReactElement;
-  /** The label for the visualization (i18n FormattedMessage element) */
   label: ReactElement;
-  /** Function that returns the ESQL query for the given namespace */
   getEsqlQuery: (namespace: string) => string;
-  /** Unique ID for the visualization */
   id: string;
-  /** The inspect title element for the visualization */
   inspectTitle: ReactElement;
-  /** Optional override for space ID (if not provided, will use useSpaceId hook) */
   spaceId?: string;
 }
 
@@ -41,7 +36,6 @@ export const KeyInsightsTile: React.FC<KeyInsightsTileProps> = ({
   inspectTitle,
   spaceId: propSpaceId,
 }) => {
-  const { euiTheme } = useEuiTheme();
   const filterQuery = useEsqlGlobalFilterQuery();
   const timerange = useGlobalTime();
   const hookSpaceId = useSpaceId();
@@ -61,30 +55,77 @@ export const KeyInsightsTile: React.FC<KeyInsightsTileProps> = ({
     filterQuery,
   });
 
+  const visualizationResponse = useVisualizationResponse({
+    visualizationId: id,
+  });
+
+  // Track whether loading has started at least once
+  const [hasStartedLoading, setHasStartedLoading] = useState(false);
+
+  useEffect(() => {
+    if (visualizationResponse?.loading === true) {
+      setHasStartedLoading(true);
+    }
+  }, [visualizationResponse?.loading]);
+
+  // Only show error state if:
+  // 1. Loading has started at least once (hasStartedLoading)
+  // 2. Loading is now complete (loading === false)
+  // 3. We have no tables (indicating an error)
+  if (
+    hasStartedLoading &&
+    visualizationResponse &&
+    visualizationResponse.loading === false &&
+    !visualizationResponse.tables
+  ) {
+    return (
+      <EuiFlexItem grow={false} style={{ minWidth: LENS_VISUALIZATION_MIN_WIDTH }}>
+        <EuiPanel
+          color="subdued"
+          hasBorder={true}
+          paddingSize="m"
+          style={{ height: LENS_VISUALIZATION_HEIGHT }}
+          data-test-subj="visualization-embeddable-error"
+        >
+          <EuiFlexGroup direction="column" justifyContent="flexStart" style={{ height: '100%' }}>
+            <EuiFlexItem grow={false}>
+              <EuiFlexGroup justifyContent="flexStart">
+                <EuiFlexItem grow={false}>
+                  <EuiText size="m">
+                    <strong>{titleString}</strong>
+                  </EuiText>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiFlexItem>
+            <EuiFlexItem grow={true} />
+            <EuiFlexItem grow={false}>
+              <EuiFlexGroup justifyContent="flexEnd">
+                <EuiFlexItem grow={false}>
+                  <FormattedMessage
+                    id="xpack.securitySolution.keyInsightsTile.dataNotAvailable"
+                    defaultMessage="Data not available"
+                  />
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiPanel>
+      </EuiFlexItem>
+    );
+  }
+
+  // If we reach here, either still loading or we have a valid response, so show the embeddable
   return (
-    <EuiFlexItem grow={false}>
-      <div
-        css={css`
-          height: ${LENS_VISUALIZATION_HEIGHT}px;
-          min-width: ${LENS_VISUALIZATION_MIN_WIDTH}px;
-          width: auto;
-          display: inline-block;
-          background: ${euiTheme.colors.lightestShade};
-          border-radius: ${euiTheme.border.radius.medium};
-        `}
-      >
-        <VisualizationEmbeddable
-          applyGlobalQueriesAndFilters={true}
-          applyPageAndTabsFilters={true}
-          lensAttributes={lensAttributes}
-          id={id}
-          timerange={timerange}
-          width="auto"
-          height={LENS_VISUALIZATION_HEIGHT}
-          disableOnClickFilter
-          inspectTitle={inspectTitle}
-        />
-      </div>
-    </EuiFlexItem>
+    <VisualizationEmbeddable
+      applyGlobalQueriesAndFilters={true}
+      applyPageAndTabsFilters={true}
+      lensAttributes={lensAttributes}
+      id={id}
+      timerange={timerange}
+      width={LENS_VISUALIZATION_MIN_WIDTH}
+      height={LENS_VISUALIZATION_HEIGHT}
+      disableOnClickFilter
+      inspectTitle={inspectTitle}
+    />
   );
 };
diff --git a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/privileged_user_monitoring/components/key_insights_panel/index.tsx b/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/privileged_user_monitoring/components/key_insights_panel/index.tsx
index 45c3e7c0ccbbd..dd94cf18fd3c8 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/privileged_user_monitoring/components/key_insights_panel/index.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/privileged_user_monitoring/components/key_insights_panel/index.tsx
@@ -21,33 +21,33 @@ export const KeyInsightsPanel: React.FC<{ spaceId: string; sourcerDataView: Data
   sourcerDataView,
 }) => {
   return (
-    <EuiFlexGroup wrap gutterSize="l" responsive={false}>
-      <EuiFlexItem>
+    <EuiFlexGroup wrap gutterSize="s">
+      <EuiFlexItem grow={false}>
         <EuiPanel hasBorder>
           <ActivePrivilegedUsersTile spaceId={spaceId} sourcerDataView={sourcerDataView} />
         </EuiPanel>
       </EuiFlexItem>
-      <EuiFlexItem>
+      <EuiFlexItem grow={false}>
         <EuiPanel hasBorder>
           <AlertsTriggeredTile spaceId={spaceId} />
         </EuiPanel>
       </EuiFlexItem>
-      <EuiFlexItem>
+      <EuiFlexItem grow={false}>
         <EuiPanel hasBorder>
           <AnomaliesDetectedTile spaceId={spaceId} />
         </EuiPanel>
       </EuiFlexItem>
-      <EuiFlexItem>
+      <EuiFlexItem grow={false}>
         <EuiPanel hasBorder>
           <GrantedRightsTile spaceId={spaceId} sourcerDataView={sourcerDataView} />
         </EuiPanel>
       </EuiFlexItem>
-      <EuiFlexItem>
+      <EuiFlexItem grow={false}>
         <EuiPanel hasBorder>
           <AccountSwitchesTile spaceId={spaceId} sourcerDataView={sourcerDataView} />
         </EuiPanel>
       </EuiFlexItem>
-      <EuiFlexItem>
+      <EuiFlexItem grow={false}>
         <EuiPanel hasBorder>
           <AuthenticationsTile spaceId={spaceId} sourcerDataView={sourcerDataView} />
         </EuiPanel>

From 86714b49ec8929a3a7636e93d4f57ec4dac0c7db Mon Sep 17 00:00:00 2001
From: abhishekbhatia1710 <abhishek.bhatia@elastic.co>
Date: Thu, 3 Jul 2025 16:26:26 +0530
Subject: [PATCH 2/5] Reset when filter changes

---
 .../key_insights_panel/common/key_insights_tile.tsx          | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/privileged_user_monitoring/components/key_insights_panel/common/key_insights_tile.tsx b/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/privileged_user_monitoring/components/key_insights_panel/common/key_insights_tile.tsx
index b449c52a0298e..f652042943001 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/privileged_user_monitoring/components/key_insights_panel/common/key_insights_tile.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/privileged_user_monitoring/components/key_insights_panel/common/key_insights_tile.tsx
@@ -68,6 +68,11 @@ export const KeyInsightsTile: React.FC<KeyInsightsTileProps> = ({
     }
   }, [visualizationResponse?.loading]);
 
+  // Reset hasStartedLoading when any filter changes to allow fresh error detection
+  useEffect(() => {
+    setHasStartedLoading(false);
+  }, [timerange.from, timerange.to, filterQuery, effectiveSpaceId]);
+
   // Only show error state if:
   // 1. Loading has started at least once (hasStartedLoading)
   // 2. Loading is now complete (loading === false)

From 1f959effb19161a446f3d2a00420114fc4c978d0 Mon Sep 17 00:00:00 2001
From: abhishekbhatia1710 <abhishek.bhatia@elastic.co>
Date: Fri, 4 Jul 2025 11:27:02 +0530
Subject: [PATCH 3/5] Adjusted to better min-width

---
 .../components/key_insights_panel/common/key_insights_tile.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/privileged_user_monitoring/components/key_insights_panel/common/key_insights_tile.tsx b/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/privileged_user_monitoring/components/key_insights_panel/common/key_insights_tile.tsx
index f652042943001..85fab914b28e6 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/privileged_user_monitoring/components/key_insights_panel/common/key_insights_tile.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/privileged_user_monitoring/components/key_insights_panel/common/key_insights_tile.tsx
@@ -17,7 +17,7 @@ import { useSpaceId } from '../../../../../../common/hooks/use_space_id';
 import { useVisualizationResponse } from '../../../../../../common/components/visualization_actions/use_visualization_response';
 
 const LENS_VISUALIZATION_HEIGHT = 150;
-const LENS_VISUALIZATION_MIN_WIDTH = 220;
+const LENS_VISUALIZATION_MIN_WIDTH = 190;
 
 interface KeyInsightsTileProps {
   title: ReactElement;

From c2df723e6bf70df4b8ad81cc52b7d5160331037e Mon Sep 17 00:00:00 2001
From: abhishekbhatia1710 <abhishek.bhatia@elastic.co>
Date: Wed, 9 Jul 2025 19:35:37 +0530
Subject: [PATCH 4/5] Addressing review comments : 1. minWidht and minHeight
 remains 2. Subdued tile is removed 3. Title and "Data not available" similar
 to other tiles 4. Warning icon currently near "Data not available"

---
 .../common/key_insights_tile.tsx              | 51 ++++++++----------
 .../components/key_insights_panel/index.tsx   | 54 ++++++++-----------
 2 files changed, 44 insertions(+), 61 deletions(-)

diff --git a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/privileged_user_monitoring/components/key_insights_panel/common/key_insights_tile.tsx b/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/privileged_user_monitoring/components/key_insights_panel/common/key_insights_tile.tsx
index 85fab914b28e6..08ea0447705f6 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/privileged_user_monitoring/components/key_insights_panel/common/key_insights_tile.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/privileged_user_monitoring/components/key_insights_panel/common/key_insights_tile.tsx
@@ -6,7 +6,7 @@
  */
 
 import React, { useState, useEffect } from 'react';
-import { EuiFlexItem, EuiFlexGroup, EuiPanel, EuiText } from '@elastic/eui';
+import { EuiFlexItem, EuiFlexGroup, EuiTitle, EuiText, EuiIcon } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import type { ReactElement } from 'react';
 import { createKeyInsightsPanelLensAttributes } from './lens_attributes';
@@ -84,38 +84,33 @@ export const KeyInsightsTile: React.FC<KeyInsightsTileProps> = ({
     !visualizationResponse.tables
   ) {
     return (
-      <EuiFlexItem grow={false} style={{ minWidth: LENS_VISUALIZATION_MIN_WIDTH }}>
-        <EuiPanel
-          color="subdued"
-          hasBorder={true}
-          paddingSize="m"
-          style={{ height: LENS_VISUALIZATION_HEIGHT }}
-          data-test-subj="visualization-embeddable-error"
-        >
-          <EuiFlexGroup direction="column" justifyContent="flexStart" style={{ height: '100%' }}>
+      <EuiFlexGroup
+        direction="column"
+        justifyContent="spaceBetween"
+        style={{ height: '100%' }} // ensures it uses the full height so 'space-between' works
+      >
+        <EuiFlexItem grow={false}>
+          <EuiTitle size="xs">
+            <h4>{titleString}</h4>
+          </EuiTitle>
+        </EuiFlexItem>
+
+        <EuiFlexItem grow={false} style={{ alignSelf: 'flex-end' }}>
+          <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
             <EuiFlexItem grow={false}>
-              <EuiFlexGroup justifyContent="flexStart">
-                <EuiFlexItem grow={false}>
-                  <EuiText size="m">
-                    <strong>{titleString}</strong>
-                  </EuiText>
-                </EuiFlexItem>
-              </EuiFlexGroup>
+              <EuiIcon type="alert" color="warning" />
             </EuiFlexItem>
-            <EuiFlexItem grow={true} />
             <EuiFlexItem grow={false}>
-              <EuiFlexGroup justifyContent="flexEnd">
-                <EuiFlexItem grow={false}>
-                  <FormattedMessage
-                    id="xpack.securitySolution.keyInsightsTile.dataNotAvailable"
-                    defaultMessage="Data not available"
-                  />
-                </EuiFlexItem>
-              </EuiFlexGroup>
+              <EuiText size="s">
+                <FormattedMessage
+                  id="xpack.securitySolution.keyInsightsTile.dataNotAvailable"
+                  defaultMessage="Data not available"
+                />
+              </EuiText>
             </EuiFlexItem>
           </EuiFlexGroup>
-        </EuiPanel>
-      </EuiFlexItem>
+        </EuiFlexItem>
+      </EuiFlexGroup>
     );
   }
 
diff --git a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/privileged_user_monitoring/components/key_insights_panel/index.tsx b/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/privileged_user_monitoring/components/key_insights_panel/index.tsx
index dd94cf18fd3c8..19b0e3a47ea8f 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/privileged_user_monitoring/components/key_insights_panel/index.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/privileged_user_monitoring/components/key_insights_panel/index.tsx
@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { EuiFlexGroup, EuiFlexItem, EuiPanel } from '@elastic/eui';
+import { EuiPanel, EuiFlexGrid } from '@elastic/eui';
 import type { DataViewSpec } from '@kbn/data-views-plugin/public';
 
 import { ActivePrivilegedUsersTile } from './active_privileged_users_tile';
@@ -21,37 +21,25 @@ export const KeyInsightsPanel: React.FC<{ spaceId: string; sourcerDataView: Data
   sourcerDataView,
 }) => {
   return (
-    <EuiFlexGroup wrap gutterSize="s">
-      <EuiFlexItem grow={false}>
-        <EuiPanel hasBorder>
-          <ActivePrivilegedUsersTile spaceId={spaceId} sourcerDataView={sourcerDataView} />
-        </EuiPanel>
-      </EuiFlexItem>
-      <EuiFlexItem grow={false}>
-        <EuiPanel hasBorder>
-          <AlertsTriggeredTile spaceId={spaceId} />
-        </EuiPanel>
-      </EuiFlexItem>
-      <EuiFlexItem grow={false}>
-        <EuiPanel hasBorder>
-          <AnomaliesDetectedTile spaceId={spaceId} />
-        </EuiPanel>
-      </EuiFlexItem>
-      <EuiFlexItem grow={false}>
-        <EuiPanel hasBorder>
-          <GrantedRightsTile spaceId={spaceId} sourcerDataView={sourcerDataView} />
-        </EuiPanel>
-      </EuiFlexItem>
-      <EuiFlexItem grow={false}>
-        <EuiPanel hasBorder>
-          <AccountSwitchesTile spaceId={spaceId} sourcerDataView={sourcerDataView} />
-        </EuiPanel>
-      </EuiFlexItem>
-      <EuiFlexItem grow={false}>
-        <EuiPanel hasBorder>
-          <AuthenticationsTile spaceId={spaceId} sourcerDataView={sourcerDataView} />
-        </EuiPanel>
-      </EuiFlexItem>
-    </EuiFlexGroup>
+    <EuiFlexGrid columns={3} data-test-subj="key-insights-panel">
+      <EuiPanel hasBorder>
+        <ActivePrivilegedUsersTile spaceId={spaceId} sourcerDataView={sourcerDataView} />
+      </EuiPanel>
+      <EuiPanel hasBorder>
+        <AlertsTriggeredTile spaceId={spaceId} />
+      </EuiPanel>
+      <EuiPanel hasBorder>
+        <AnomaliesDetectedTile spaceId={spaceId} />
+      </EuiPanel>
+      <EuiPanel hasBorder>
+        <GrantedRightsTile spaceId={spaceId} sourcerDataView={sourcerDataView} />
+      </EuiPanel>
+      <EuiPanel hasBorder>
+        <AccountSwitchesTile spaceId={spaceId} sourcerDataView={sourcerDataView} />
+      </EuiPanel>
+      <EuiPanel hasBorder>
+        <AuthenticationsTile spaceId={spaceId} sourcerDataView={sourcerDataView} />
+      </EuiPanel>
+    </EuiFlexGrid>
   );
 };

From 7773801b25edde091bad2dc7bc4936b5669c410e Mon Sep 17 00:00:00 2001
From: abhishekbhatia1710 <abhishek.bhatia@elastic.co>
Date: Wed, 9 Jul 2025 20:10:10 +0530
Subject: [PATCH 5/5] Adjusting min width for the lens attributes

---
 .../components/key_insights_panel/common/key_insights_tile.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/privileged_user_monitoring/components/key_insights_panel/common/key_insights_tile.tsx b/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/privileged_user_monitoring/components/key_insights_panel/common/key_insights_tile.tsx
index 08ea0447705f6..079bfda1ccd65 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/privileged_user_monitoring/components/key_insights_panel/common/key_insights_tile.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/privileged_user_monitoring/components/key_insights_panel/common/key_insights_tile.tsx
@@ -17,7 +17,7 @@ import { useSpaceId } from '../../../../../../common/hooks/use_space_id';
 import { useVisualizationResponse } from '../../../../../../common/components/visualization_actions/use_visualization_response';
 
 const LENS_VISUALIZATION_HEIGHT = 150;
-const LENS_VISUALIZATION_MIN_WIDTH = 190;
+const LENS_VISUALIZATION_MIN_WIDTH = 220;
 
 interface KeyInsightsTileProps {
   title: ReactElement;