fix(ui): inconsistency in height between the AI window and the event …

…table (#731) ## What type of PR is this? /kind bug ## What this PR does / why we need it: Fix the inconsistency in height between the AI window and the event table
KusionStack · Jan 14, 2025 · bb6a549 · bb6a549
1 parent 5b356f3
commit bb6a549
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/ui/src/pages/insightDetail/components/eventAggregator/index.tsx b/ui/src/pages/insightDetail/components/eventAggregator/index.tsx
@@ -68,6 +68,7 @@ const EventAggregator: React.FC<EventAggregatorProps> = ({
   const diagnosisEndRef = useRef<HTMLDivElement>(null)
   const abortControllerRef = useRef<AbortController | null>(null)
   const contentRef = useRef<HTMLDivElement>(null)
+  const tableContainerRef = useRef<HTMLDivElement>(null)
 
   const { aiOptions } = useSelector((state: any) => state.globalSlice)
   const isAIEnabled = aiOptions?.AIModel && aiOptions?.AIAuthToken
@@ -346,10 +347,13 @@ const EventAggregator: React.FC<EventAggregatorProps> = ({
     : { flexDirection: 'row' }
   const events_content_withDiagnosis_style: React.CSSProperties = isVertical
     ? { width: '100%' }
-    : { width: 'calc(100% - 424px)', height: 600, overflowY: 'scroll' }
+    : { width: 'calc(100% - 424px)' }
+  const tableHeight = tableContainerRef?.current
+    ? tableContainerRef?.current.getBoundingClientRect()?.height
+    : 400
   const events_content_diagnosisPanel_style: React.CSSProperties = isVertical
     ? { width: '100%', height: 300 }
-    : { width: 400, height: 600 }
+    : { width: 400, height: tableHeight || 400 }
 
   const contentToTopHeight = contentRef.current?.getBoundingClientRect()?.top
   const dotToTopHeight = diagnosisEndRef.current?.getBoundingClientRect()?.top
@@ -502,6 +506,7 @@ const EventAggregator: React.FC<EventAggregatorProps> = ({
 
       <div className={styles.events_content} style={events_content_styles}>
         <div
+          ref={tableContainerRef}
           className={classNames(styles.events_content_tableContainer, {
             [styles.events_content_withDiagnosis]: diagnosisStatus !== 'idle',
           })}

diff --git a/ui/src/pages/insightDetail/components/eventAggregator/styles.module.less b/ui/src/pages/insightDetail/components/eventAggregator/styles.module.less
@@ -185,8 +185,10 @@
     display: flex;
     position: relative;
     gap: 16px;
+    box-sizing: border-box;
 
     .events_content_tableContainer {
+      box-sizing: border-box;
       flex: 1;
       transition: width 0.3s ease;
 
@@ -240,7 +242,6 @@
 
     .events_content_diagnosisPanel {
       width: 400px;
-      height: 600px;
       border-radius: 12px;
       display: flex;
       flex-direction: column;
@@ -919,4 +920,3 @@
     transform: rotate(360deg);
   }
 }
-