Reduce machine learning table spacing when new home page enabled (#377)

* Reduce machine learning table spacing Signed-off-by: Lin Wang <[email protected]> * Fix input overflow in new home page enabled Signed-off-by: Lin Wang <[email protected]> * Avoid refresh immediately after very large number input Signed-off-by: Lin Wang <[email protected]> * Addre PR comments Signed-off-by: Lin Wang <[email protected]> --------- Signed-off-by: Lin Wang <[email protected]>
opensearch-project · Sep 27, 2024 · 801bb59 · 801bb59
1 parent b6d9192
commit 801bb59
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 21 deletions.
diff --git 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
@@ -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
@@ -35,7 +35,11 @@ export const MonitoringPageHeader = ({
     if (useNewPageHeader) {
       return [
         {
-          renderComponent: <RefreshInterval onRefresh={onRefresh} />,
+          renderComponent: (
+            <div style={{ width: 227 }}>
+              <RefreshInterval onRefresh={onRefresh} />
+            </div>
+          ),
         },
       ];
     }