From ba93e958e1e09a40a59587fb22da1c94dc8cd110 Mon Sep 17 00:00:00 2001
From: Shenoy Pratik <sgguruda@amazon.com>
Date: Mon, 17 Apr 2023 21:16:26 -0700
Subject: [PATCH] fix doc viewer flyout styling in explorer (#378)

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>
---
 .../explorer/events_views/doc_flyout.tsx      | 18 ++---
 .../events_views/surrounding_flyout.tsx       | 68 ++++++++++---------
 2 files changed, 46 insertions(+), 40 deletions(-)

diff --git a/public/components/event_analytics/explorer/events_views/doc_flyout.tsx b/public/components/event_analytics/explorer/events_views/doc_flyout.tsx
index beba69089c..e7183cc4a0 100644
--- a/public/components/event_analytics/explorer/events_views/doc_flyout.tsx
+++ b/public/components/event_analytics/explorer/events_views/doc_flyout.tsx
@@ -123,14 +123,16 @@ export const DocFlyout = ({
 
   const flyoutBody = (
     <EuiFlyoutBody>
-      {populateDataGrid(
-        explorerFields,
-        getHeaders(explorerFields.queriedFields, DEFAULT_COLUMNS.slice(1), true),
-        <tr className="osdDocTable__row">{memorizedTds}</tr>,
-        getHeaders(explorerFields.selectedFields, DEFAULT_COLUMNS.slice(1), true),
-        <tr className="osdDocTable__row">{memorizedTds}</tr>
-      )}
-      <DocViewer http={http} hit={doc} openTraces={openTraces} />
+      <div className="obsExplorer">
+        {populateDataGrid(
+          explorerFields,
+          getHeaders(explorerFields.queriedFields, DEFAULT_COLUMNS.slice(1), true),
+          <tr className="osdDocTable__row">{memorizedTds}</tr>,
+          getHeaders(explorerFields.selectedFields, DEFAULT_COLUMNS.slice(1), true),
+          <tr className="osdDocTable__row">{memorizedTds}</tr>
+        )}
+        <DocViewer http={http} hit={doc} openTraces={openTraces} />
+      </div>
     </EuiFlyoutBody>
   );
 
diff --git a/public/components/event_analytics/explorer/events_views/surrounding_flyout.tsx b/public/components/event_analytics/explorer/events_views/surrounding_flyout.tsx
index 4c67c3e199..e7fe8d9899 100644
--- a/public/components/event_analytics/explorer/events_views/surrounding_flyout.tsx
+++ b/public/components/event_analytics/explorer/events_views/surrounding_flyout.tsx
@@ -124,9 +124,11 @@ export const SurroundingFlyout = ({
   };
 
   const loadButton = (typeOfDocs: 'new' | 'old') => {
-    typeOfDocs === 'new'
-      ? loadData(typeOfDocs, numNewEvents + 5)
-      : loadData(typeOfDocs, valueOldEvents + 5);
+    if (typeOfDocs === 'new') {
+      loadData(typeOfDocs, numNewEvents + 5);
+    } else {
+      loadData(typeOfDocs, valueOldEvents + 5);
+    }
   };
 
   const handleKeyDown = (
@@ -139,11 +141,11 @@ export const SurroundingFlyout = ({
   };
 
   const onChangeNewEvents = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setNumNewEvents(parseInt(e.target.value));
+    setNumNewEvents(parseInt(e.target.value, 10));
   };
 
   const onChangeOldEvents = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setNumOldEvents(parseInt(e.target.value));
+    setNumOldEvents(parseInt(e.target.value, 10));
   };
 
   const flyoutHeader = (
@@ -227,35 +229,37 @@ export const SurroundingFlyout = ({
 
   const flyoutBody = (
     <EuiFlyoutBody>
-      {getInputForm('arrowUp', onChangeNewEvents, numNewEvents, 'new')}
-      <EuiSpacer size="s" />
-      <div>
-        {newEventsError !== '' && (
-          <EuiCallOut iconType="bolt" title={newEventsError} color="warning" />
-        )}
-      </div>
-      {populateDataGrid(
-        explorerFields,
-        getHeaders(explorerFields.queriedFields, DEFAULT_COLUMNS.slice(1), true),
-        <>
-          {newEventsData}
-          <tr className="osdDocTable__row selected-event-row">{memorizedTds}</tr>
-          {oldEventsData}
-        </>,
-        getHeaders(explorerFields.selectedFields, DEFAULT_COLUMNS.slice(1), true),
-        <>
-          {newEventsData}
-          <tr className="osdDocTable__row selected-event-row">{memorizedTds}</tr>
-          {oldEventsData}
-        </>
-      )}
-      <div>
-        {oldEventsError !== '' && (
-          <EuiCallOut iconType="bolt" title={oldEventsError} color="warning" />
+      <div className="obsExplorer">
+        {getInputForm('arrowUp', onChangeNewEvents, numNewEvents, 'new')}
+        <EuiSpacer size="s" />
+        <div>
+          {newEventsError !== '' && (
+            <EuiCallOut iconType="bolt" title={newEventsError} color="warning" />
+          )}
+        </div>
+        {populateDataGrid(
+          explorerFields,
+          getHeaders(explorerFields.queriedFields, DEFAULT_COLUMNS.slice(1), true),
+          <>
+            {newEventsData}
+            <tr className="osdDocTable__row selected-event-row">{memorizedTds}</tr>
+            {oldEventsData}
+          </>,
+          getHeaders(explorerFields.selectedFields, DEFAULT_COLUMNS.slice(1), true),
+          <>
+            {newEventsData}
+            <tr className="osdDocTable__row selected-event-row">{memorizedTds}</tr>
+            {oldEventsData}
+          </>
         )}
+        <div>
+          {oldEventsError !== '' && (
+            <EuiCallOut iconType="bolt" title={oldEventsError} color="warning" />
+          )}
+        </div>
+        <EuiSpacer size="s" />
+        {getInputForm('arrowDown', onChangeOldEvents, valueOldEvents, 'old')}
       </div>
-      <EuiSpacer size="s" />
-      {getInputForm('arrowDown', onChangeOldEvents, valueOldEvents, 'old')}
     </EuiFlyoutBody>
   );