From 3d470f9decb596eb558d42fbd341edca020bf4b9 Mon Sep 17 00:00:00 2001
From: Lin Wang <wonglam@amazon.com>
Date: Thu, 26 Sep 2024 14:12:17 +0800
Subject: [PATCH 1/4] Reduce machine learning table spacing

Signed-off-by: Lin Wang <wonglam@amazon.com>
---
 public/components/monitoring/index.tsx | 39 +++++++++++++-------------
 1 file changed, 20 insertions(+), 19 deletions(-)

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>

From 31a10e267e11130ca7ef2b9ff78a796523d3c5f1 Mon Sep 17 00:00:00 2001
From: Lin Wang <wonglam@amazon.com>
Date: Thu, 26 Sep 2024 16:37:25 +0800
Subject: [PATCH 2/4] Fix input overflow in new home page enabled

Signed-off-by: Lin Wang <wonglam@amazon.com>
---
 public/components/monitoring/monitoring_page_header.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

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>
+          ),
         },
       ];
     }

From 705c6bca2eb350b24a2af62af68adbba4d9e32b7 Mon Sep 17 00:00:00 2001
From: Lin Wang <wonglam@amazon.com>
Date: Thu, 26 Sep 2024 17:31:53 +0800
Subject: [PATCH 3/4] Avoid refresh immediately after very large number input

Signed-off-by: Lin Wang <wonglam@amazon.com>
---
 public/components/common/refresh_interval.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/public/components/common/refresh_interval.tsx b/public/components/common/refresh_interval.tsx
index 68df681e..1cc6762e 100644
--- a/public/components/common/refresh_interval.tsx
+++ b/public/components/common/refresh_interval.tsx
@@ -98,9 +98,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 2147483647, the inner function will be executed immediately
+         * if the delayed value is greater than 2147483647. Add a Math.min here to avoid been executed immediately.
+         **/
         intervalId = window.setInterval(() => {
           onRefresh();
-        }, interval);
+        }, Math.min(interval, 2147483647));
       }
     }
 

From 8cbc68cd98bac2189e1b89fc530e9b589b862388 Mon Sep 17 00:00:00 2001
From: Lin Wang <wonglam@amazon.com>
Date: Fri, 27 Sep 2024 11:29:04 +0800
Subject: [PATCH 4/4] Addre PR comments

Signed-off-by: Lin Wang <wonglam@amazon.com>
---
 public/components/common/refresh_interval.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/public/components/common/refresh_interval.tsx b/public/components/common/refresh_interval.tsx
index 1cc6762e..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,
@@ -100,12 +102,12 @@ export const RefreshInterval = ({
       if (interval !== null) {
         /**
          * According https://developer.mozilla.org/en-US/docs/Web/API/setInterval#return_value
-         * the max delayed value of setInterval is 2147483647, the inner function will be executed immediately
-         * if the delayed value is greater than 2147483647. Add a Math.min here to avoid been executed immediately.
+         * 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();
-        }, Math.min(interval, 2147483647));
+        }, Math.min(interval, MAX_SIGNED_32_BIT_INTEGER));
       }
     }