fix issue add scroll bar at bottom of the diagnostic log container

IDAES · May 20, 2024 · 0a031d5 · 0a031d5
1 parent 7547a6a
commit 0a031d5
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 8 deletions.
diff --git a/IDAES-UI/src/diagnosticLogs/DiagnosticsLog.module.css b/IDAES-UI/src/diagnosticLogs/DiagnosticsLog.module.css
@@ -1,8 +1,8 @@
-.diagnosticsRunner_content_container{
+.diagnostics_log_container{
     position:relative;
     min-height: 500px;
     max-height: 1080px;
     padding: 20px;
-    overflow-y: scroll !important;
+    overflow: scroll !important;
     scroll-behavior: smooth;
 }
diff --git a/IDAES-UI/src/diagnosticLogs/DiagnosticsLog.tsx b/IDAES-UI/src/diagnosticLogs/DiagnosticsLog.tsx
@@ -33,12 +33,27 @@ export default function DiagnosticsLog(){
 
     useEffect(()=>{
         setDiagnosticsHistory((prev:number)=>displayLength)
-    },[displayLength])
+    },[displayLength]);
+
+    useEffect(()=>{
+        // Setup diagnostics log panel height is 100% as parent element height
+        const diagnosticsLogPanelLogContainer = document.getElementById('diagnostics_log_container');
+        if(diagnosticsLogPanelLogContainer){
+            const parentElement = diagnosticsLogPanelLogContainer.parentElement;
+            if(parentElement){
+                parentElement.style.position = "relative";
+                parentElement.style.height = "100%";
+                diagnosticsLogPanelLogContainer.style.height = "100%";
+                diagnosticsLogPanelLogContainer.style.minHeight = "100%";
+                diagnosticsLogPanelLogContainer.style.maxHeight = "100%";
+            }
+        }
+    },[])
 
     return(
         <div 
-            className={css.diagnosticsRunner_content_container} 
-            id="diagnosticsRunner_content_container" 
+            className={css.diagnostics_log_container} 
+            id="diagnostics_log_container" 
             style={{"overflowY" : "scroll"}}
         >
             {display}

diff --git a/IDAES-UI/src/diagnostics/DiagnosticsDisplay.tsx b/IDAES-UI/src/diagnostics/DiagnosticsDisplay.tsx
@@ -171,13 +171,13 @@ export default function DiagnosticsDisplay(props:any){
         }catch(error:any){
             messageBarTemplateGenerator("diagnosticFNRunError", false, error.response.data.error)
             console.log(error)
-            const diagnosticsRunnerContentContainer = document.getElementById("diagnosticsRunner_content_container");
-            if(diagnosticsRunnerContentContainer){
+            const diagnosticsLogContainer = document.getElementById("diagnostics_log_container");
+            if(diagnosticsLogContainer){
                 const errorTemplate = `
                     <pre class="${css.error_message}">${error.response.data.error}<pre>
                     <br>
                 `
-                diagnosticsRunnerContentContainer.innerHTML+= errorTemplate
+                diagnosticsLogContainer.innerHTML+= errorTemplate
             }
         }
     }

diff --git a/IDAES-UI/src/utility/resizePanel.tsx b/IDAES-UI/src/utility/resizePanel.tsx
@@ -0,0 +1,19 @@
+/**
+ * @Description This function take current element's id as param then read parent element height and assign to current element
+ * @param DOMid DOM element ID
+ * @return VOID
+ */
+export function resizePanelHeightAsParent(DOMid:string){
+    const element = document.getElementById(DOMid);
+    if(element){
+        const parentNodeHeight = element.parentElement?.clientHeight;
+        if(parentNodeHeight){
+            element.style.height = parentNodeHeight + 'px';
+            console.log(parentNodeHeight)
+        }else{
+            console.log(`Try to resize element as parent height, but parent node high not found!`)
+        }
+    }else{
+        console.log(`Try to resize element as parent height, but parent node element not found!`)
+    }
+}