Fix-Query-Insights-Dashboards-Trineo-style-integration-GroupQueryDeta…

…ils-Tests&lint (#70) (#107) (cherry picked from commit 69a60c5) 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 · fe107e7 · fe107e7
1 parent f0cb6ac
commit fe107e7
Show file tree

Hide file tree

Showing 4 changed files with 229 additions and 165 deletions.
diff --git a/public/pages/QueryGroupDetails/Components/QueryGroupAggregateSummary.tsx b/public/pages/QueryGroupDetails/Components/QueryGroupAggregateSummary.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 {
   AVERAGE_CPU_TIME,
   AVERAGE_LATENCY,
@@ -17,28 +24,37 @@ import { calculateMetric } from '../../../../common/utils/MetricUtils';
 // Panel component for displaying query group 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>
 );
 
 export const QueryGroupAggregateSummary = ({ query }: { query: any }) => {
   if (!query) {
-    return <EuiText size="s">No query data available.</EuiText>;
+    return (
+      <EuiTitle size="s">
+        <h2>No query data available.</h2>
+      </EuiTitle>
+    );
   }
   const { measurements, id: id, group_by: groupBy } = query;
   const queryCount =
     measurements.latency?.count || measurements.cpu?.count || measurements.memory?.count || 1;
   return (
     <EuiPanel>
-      <EuiText size="xs">
+      <EuiTitle size="s">
         <h2>
           Aggregate summary for {queryCount} {queryCount === 1 ? 'query' : 'queries'}
         </h2>
-      </EuiText>
-      <EuiHorizontalRule margin="m" />
+      </EuiTitle>
+      <EuiHorizontalRule margin="xs" />
       <EuiFlexGrid columns={4}>
         <PanelItem label={ID} value={id} />
         <PanelItem

diff --git a/public/pages/QueryGroupDetails/Components/QueryGroupSampleQuerySummary.tsx b/public/pages/QueryGroupDetails/Components/QueryGroupSampleQuerySummary.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 {
   INDICES,
   NODE_ID,
@@ -15,16 +22,25 @@ import {
 
 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>
 );
 
 export const QueryGroupSampleQuerySummary = ({ query }: { query: any }) => {
   if (!query) {
-    return <EuiText size="s">No query data available.</EuiText>;
+    return (
+      <EuiTitle size="s">
+        <h2>No query data available.</h2>
+      </EuiTitle>
+    );
   }
   const convertTime = (unixTime: number) => {
     const date = new Date(unixTime);
@@ -41,10 +57,10 @@ export const QueryGroupSampleQuerySummary = ({ query }: { query: any }) => {
   } = query;
   return (
     <EuiPanel>
-      <EuiText size="xs">
+      <EuiTitle size="s">
         <h2>Sample query summary</h2>
-      </EuiText>
-      <EuiHorizontalRule margin="m" />
+      </EuiTitle>
+      <EuiHorizontalRule margin="xs" />
       <EuiFlexGrid columns={4}>
         <PanelItem label={TIMESTAMP} value={convertTime(timestamp)} />
         <PanelItem label={INDICES} value={indices.toString()} />

diff --git a/public/pages/QueryGroupDetails/QueryGroupDetails.tsx b/public/pages/QueryGroupDetails/QueryGroupDetails.tsx
@@ -18,7 +18,6 @@ import {
   EuiHorizontalRule,
   EuiPanel,
   EuiSpacer,
-  EuiText,
   EuiTitle,
   EuiIconTip,
 } from '@elastic/eui';
@@ -193,12 +192,13 @@ export const QueryGroupDetails = ({
             <EuiPanel>
               <EuiFlexGroup alignItems="center" justifyContent="spaceBetween">
                 <EuiFlexItem>
-                  <EuiText size="xs">
+                  <EuiTitle size="xs">
                     <h2>Query</h2>
-                  </EuiText>
+                  </EuiTitle>
                 </EuiFlexItem>
                 <EuiFlexItem grow={false}>
                   <EuiButton
+                    size="s"
                     iconSide="right"
                     iconType="popout"
                     target="_blank"
@@ -223,10 +223,10 @@ export const QueryGroupDetails = ({
           </EuiFlexItem>
           <EuiFlexItem grow={1} style={{ alignSelf: 'start' }}>
             <EuiPanel>
-              <EuiText size="xs">
+              <EuiTitle size="s">
                 <h2>Latency</h2>
-              </EuiText>
-              <EuiHorizontalRule margin="m" />
+              </EuiTitle>
+              <EuiHorizontalRule margin="xs" />
               <div id="latency" />
             </EuiPanel>
           </EuiFlexItem>