From d8f62cf35403b44f873c0814ff9d60fa9082dba5 Mon Sep 17 00:00:00 2001
From: Kishore Kumaar Natarajan <kkamazonn@amazon.com>
Date: Thu, 23 Jan 2025 23:42:45 -0800
Subject: [PATCH] 
 Fix:Query-Insights-Dashboards-Trineo-style-integration-QueryDetails

Signed-off-by: Kishore Kumaar Natarajan <kkamazonn@amazon.com>
---
 .../QueryDetails/Components/QuerySummary.tsx  | 27 ++++++++++++-------
 public/pages/QueryDetails/QueryDetails.tsx    | 16 ++++++-----
 2 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/public/pages/QueryDetails/Components/QuerySummary.tsx b/public/pages/QueryDetails/Components/QuerySummary.tsx
index b192a6f..bc8b741 100644
--- a/public/pages/QueryDetails/Components/QuerySummary.tsx
+++ b/public/pages/QueryDetails/Components/QuerySummary.tsx
@@ -4,7 +4,15 @@
  */
 
 import React from 'react';
-import { EuiFlexGrid, EuiFlexItem, EuiHorizontalRule, EuiPanel, EuiText } from '@elastic/eui';
+import {
+  EuiFlexGrid,
+  EuiFlexItem,
+  EuiHorizontalRule,
+  EuiPanel,
+  EuiText,
+  EuiFormRow,
+  EuiTitle,
+} from '@elastic/eui';
 import { SearchQueryRecord } from '../../../../types/types';
 import {
   CPU_TIME,
@@ -21,10 +29,9 @@ import { calculateMetric } from '../../Utils/MetricUtils';
 // Panel component for displaying query detail values
 const PanelItem = ({ label, value }: { label: string; value: string | number }) => (
   <EuiFlexItem>
-    <EuiText size="xs">
-      <h4>{label}</h4>
-    </EuiText>
-    <EuiText size="xs">{value}</EuiText>
+    <EuiFormRow label={label} compressed={true}>
+      <EuiText size="s">{value}</EuiText>
+    </EuiFormRow>
   </EuiFlexItem>
 );
 
@@ -32,10 +39,10 @@ const QuerySummary = ({ query }: { query: SearchQueryRecord | null }) => {
   // If query is null, return a message indicating no data is available
   if (!query) {
     return (
-      <EuiPanel data-test-subj={'query-details-summary-section'}>
-        <EuiText size="xs">
+      <EuiPanel data-test-subj="query-details-summary-section">
+        <EuiTitle size="s">
           <h2>No Data Available</h2>
-        </EuiText>
+        </EuiTitle>
       </EuiPanel>
     );
   }
@@ -49,9 +56,9 @@ const QuerySummary = ({ query }: { query: SearchQueryRecord | null }) => {
   const { timestamp, measurements, indices, search_type, node_id, total_shards } = query;
   return (
     <EuiPanel data-test-subj={'query-details-summary-section'}>
-      <EuiText size="xs">
+      <EuiTitle size="s">
         <h2>Summary</h2>
-      </EuiText>
+      </EuiTitle>
       <EuiHorizontalRule margin="m" />
       <EuiFlexGrid columns={4}>
         <PanelItem label={TIMESTAMP} value={convertTime(timestamp)} />
diff --git a/public/pages/QueryDetails/QueryDetails.tsx b/public/pages/QueryDetails/QueryDetails.tsx
index 4ecb2d5..a135755 100644
--- a/public/pages/QueryDetails/QueryDetails.tsx
+++ b/public/pages/QueryDetails/QueryDetails.tsx
@@ -15,7 +15,6 @@ import {
   EuiHorizontalRule,
   EuiPanel,
   EuiSpacer,
-  EuiText,
   EuiTitle,
 } from '@elastic/eui';
 import { useHistory, useLocation } from 'react-router-dom';
@@ -143,12 +142,13 @@ const QueryDetails = ({
             <EuiPanel data-test-subj={'query-details-source-section'}>
               <EuiFlexGroup alignItems="center" justifyContent="spaceBetween">
                 <EuiFlexItem>
-                  <EuiText size="xs">
+                  <EuiTitle size="s">
                     <h2>Query</h2>
-                  </EuiText>
+                  </EuiTitle>
                 </EuiFlexItem>
                 <EuiFlexItem grow={false}>
                   <EuiButton
+                    size="s"
                     iconSide="right"
                     iconType="popout"
                     target="_blank"
@@ -173,10 +173,12 @@ const QueryDetails = ({
           </EuiFlexItem>
           <EuiFlexItem grow={1} style={{ alignSelf: 'start' }}>
             <EuiPanel data-test-subj={'query-details-latency-chart'}>
-              <EuiText size="xs">
-                <h2>Latency</h2>
-              </EuiText>
-              <EuiHorizontalRule margin="m" />
+              <EuiFlexItem>
+                <EuiTitle size="s">
+                  <h2>Latency</h2>
+                </EuiTitle>
+              </EuiFlexItem>
+              <EuiHorizontalRule margin="xs" />
               <div id="latency" />
             </EuiPanel>
           </EuiFlexItem>