Fix:Query-Insights-Dashboards-style-integration-QueryDetails (#69) (#111

) * Query Details Styling * update the test file * update the test file lint --------- (cherry picked from commit 8e586d0) Signed-off-by: Kishore Kumaar Natarajan <[email protected]> Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Kishore Kumaar Natarajan <[email protected]>
opensearch-project · Feb 14, 2025 · 8f93541 · 8f93541
1 parent daaf349
commit 8f93541
Show file tree

Hide file tree

Showing 4 changed files with 162 additions and 124 deletions.
diff --git a/public/pages/QueryDetails/Components/QuerySummary.tsx b/public/pages/QueryDetails/Components/QuerySummary.tsx
@@ -4,7 +4,14 @@
  */
 
 import React from 'react';
-import { EuiFlexGrid, EuiFlexItem, EuiHorizontalRule, EuiPanel, EuiText } from '@elastic/eui';
+import {
+  EuiFlexGrid,
+  EuiFlexItem,
+  EuiHorizontalRule,
+  EuiPanel,
+  EuiTitle,
+  EuiDescriptionList,
+} from '@elastic/eui';
 import { SearchQueryRecord } from '../../../../types/types';
 import {
   CPU_TIME,
@@ -21,10 +28,15 @@ import { calculateMetric } from '../../../../common/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>
+    <EuiDescriptionList
+      compressed={true}
+      listItems={[
+        {
+          title: <h4>{label}</h4>,
+          description: value,
+        },
+      ]}
+    />
   </EuiFlexItem>
 );
 
@@ -33,9 +45,9 @@ const QuerySummary = ({ query }: { query: SearchQueryRecord | null }) => {
   if (!query) {
     return (
       <EuiPanel data-test-subj={'query-details-summary-section'}>
-        <EuiText size="xs">
+        <EuiTitle size="xs">
           <h2>No Data Available</h2>
-        </EuiText>
+        </EuiTitle>
       </EuiPanel>
     );
   }
@@ -49,9 +61,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.test.tsx b/public/pages/QueryDetails/QueryDetails.test.tsx
@@ -142,7 +142,7 @@ describe('QueryDetails component', () => {
       expect(retrieveQueryById).toHaveBeenCalled();
     });
 
-    const dateElements = container.getElementsByClassName('euiText euiText--extraSmall');
+    const dateElements = container.getElementsByClassName('euiDescriptionList__description');
     Array.from(dateElements).forEach((element) => {
       if (element.textContent?.includes('@')) {
         element.textContent = 'Sep 24, 2021 @ 12:00:00 AM';

diff --git 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';
@@ -162,12 +161,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"
@@ -192,10 +192,10 @@ const QueryDetails = ({
           </EuiFlexItem>
           <EuiFlexItem grow={1} style={{ alignSelf: 'start' }}>
             <EuiPanel data-test-subj={'query-details-latency-chart'}>
-              <EuiText size="xs">
+              <EuiTitle size="xs">
                 <h2>Latency</h2>
-              </EuiText>
-              <EuiHorizontalRule margin="m" />
+              </EuiTitle>
+              <EuiHorizontalRule margin="xs" />
               <div id="latency" />
             </EuiPanel>
           </EuiFlexItem>