From fbb5a7660ef0ddc0c7e924114a714058b56a7755 Mon Sep 17 00:00:00 2001
From: Lin Wang <wonglam@amazon.com>
Date: Fri, 27 Sep 2024 14:57:13 +0800
Subject: [PATCH] Reduce machine learning table spacing when new home page
 enabled (#377)

* Reduce machine learning table spacing

Signed-off-by: Lin Wang <wonglam@amazon.com>

* Fix input overflow in new home page enabled

Signed-off-by: Lin Wang <wonglam@amazon.com>

* Avoid refresh immediately after very large number input

Signed-off-by: Lin Wang <wonglam@amazon.com>

* Addre PR comments

Signed-off-by: Lin Wang <wonglam@amazon.com>

---------

Signed-off-by: Lin Wang <wonglam@amazon.com>
(cherry picked from commit 801bb59e32754ca93b64ac312f25fcf245c0fefc)
---
 public/components/common/refresh_interval.tsx |  9 ++++-
 public/components/monitoring/index.tsx        | 39 ++++++++++---------
 .../monitoring/monitoring_page_header.tsx     |  6 ++-
 3 files changed, 33 insertions(+), 21 deletions(-)

diff --git a/public/components/common/refresh_interval.tsx b/public/components/common/refresh_interval.tsx
index 68df681e..9bc24264 100644
--- a/public/components/common/refresh_interval.tsx
+++ b/public/components/common/refresh_interval.tsx
@@ -38,6 +38,8 @@ const intervalUnitOptions = [
   { text: 'hours', value: 'h' },
 ];
 
+const MAX_SIGNED_32_BIT_INTEGER = 2147483647;
+
 export const RefreshInterval = ({
   onRefresh,
   onRefreshChange,
@@ -98,9 +100,14 @@ export const RefreshInterval = ({
       }
     } else {
       if (interval !== null) {
+        /**
+         * According https://developer.mozilla.org/en-US/docs/Web/API/setInterval#return_value
+         * the max delayed value of setInterval is MAX_SIGNED_32_BIT_INTEGER, the inner function will be executed immediately
+         * if the delayed value is greater than MAX_SIGNED_32_BIT_INTEGER. Add a Math.min here to avoid been executed immediately.
+         **/
         intervalId = window.setInterval(() => {
           onRefresh();
-        }, interval);
+        }, Math.min(interval, MAX_SIGNED_32_BIT_INTEGER));
       }
     }
 
diff --git a/public/components/monitoring/index.tsx b/public/components/monitoring/index.tsx
index ca28790b..798ab021 100644
--- a/public/components/monitoring/index.tsx
+++ b/public/components/monitoring/index.tsx
@@ -104,28 +104,29 @@ export const Monitoring = (props: MonitoringProps) => {
       />
       <EuiPanel>
         {!useNewPageHeader && (
-          <EuiText size="s">
-            <h2>
-              <FormattedMessage
-                id="machineLearning.aiModels.table.header.title"
-                defaultMessage="Models {records}"
-                values={{
-                  records:
-                    pageStatus === 'normal' ? (
-                      <EuiTextColor aria-label="total number of results" color="subdued">
-                        ({pagination?.totalRecords ?? 0})
-                      </EuiTextColor>
-                    ) : undefined,
-                }}
-              />
-            </h2>
-          </EuiText>
+          <>
+            <EuiText size="s">
+              <h2>
+                <FormattedMessage
+                  id="machineLearning.aiModels.table.header.title"
+                  defaultMessage="Models {records}"
+                  values={{
+                    records:
+                      pageStatus === 'normal' ? (
+                        <EuiTextColor aria-label="total number of results" color="subdued">
+                          ({pagination?.totalRecords ?? 0})
+                        </EuiTextColor>
+                      ) : undefined,
+                  }}
+                />
+              </h2>
+            </EuiText>
+            <EuiSpacer size="m" />
+          </>
         )}
-
-        <EuiSpacer size="m" />
         {pageStatus !== 'empty' && (
           <>
-            <EuiFlexGroup gutterSize="l">
+            <EuiFlexGroup gutterSize={useNewPageHeader ? 's' : 'l'}>
               <EuiFlexItem>
                 <SearchBar inputRef={setInputRef} onSearch={searchByNameOrId} />
               </EuiFlexItem>
diff --git a/public/components/monitoring/monitoring_page_header.tsx b/public/components/monitoring/monitoring_page_header.tsx
index 4c7c1e40..53fd4630 100644
--- a/public/components/monitoring/monitoring_page_header.tsx
+++ b/public/components/monitoring/monitoring_page_header.tsx
@@ -35,7 +35,11 @@ export const MonitoringPageHeader = ({
     if (useNewPageHeader) {
       return [
         {
-          renderComponent: <RefreshInterval onRefresh={onRefresh} />,
+          renderComponent: (
+            <div style={{ width: 227 }}>
+              <RefreshInterval onRefresh={onRefresh} />
+            </div>
+          ),
         },
       ];
     }