[Look&Feel] Traces Density and Consistency Improvements (#2072)

* Updated Traces Look & Feel Signed-off-by: Dan Dong <[email protected]> * Look&Feel for Metrics Signed-off-by: Dan Dong <[email protected]> * Fixed error Signed-off-by: Dan Dong <[email protected]> * Fixed snapshot testing Signed-off-by: Dan Dong <[email protected]> --------- Signed-off-by: Dan Dong <[email protected]>
opensearch-project · Aug 21, 2024 · 386522c · 386522c
1 parent 7cdcacb
commit 386522c
Show file tree

Hide file tree

Showing 26 changed files with 356 additions and 244 deletions.
diff --git a/public/components/application_analytics/__tests__/__snapshots__/create.test.tsx.snap b/public/components/application_analytics/__tests__/__snapshots__/create.test.tsx.snap
diff --git a/public/components/application_analytics/__tests__/__snapshots__/service_config.test.tsx.snap b/public/components/application_analytics/__tests__/__snapshots__/service_config.test.tsx.snap
@@ -1124,7 +1124,9 @@ exports[`Service Config component renders empty service config 1`] = `
                           </EuiSpacer>
                           <EuiEmptyPrompt
                             body={
-                              <EuiText>
+                              <EuiText
+                                size="s"
+                              >
                                 No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
                               </EuiText>
                             }
@@ -1163,9 +1165,11 @@ exports[`Service Config component renders empty service config 1`] = `
                                     <div
                                       className="euiText euiText--medium"
                                     >
-                                      <EuiText>
+                                      <EuiText
+                                        size="s"
+                                      >
                                         <div
-                                          className="euiText euiText--medium"
+                                          className="euiText euiText--small"
                                         >
                                           No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
                                         </div>
@@ -2345,7 +2349,9 @@ exports[`Service Config component renders with one service selected 1`] = `
                           </EuiSpacer>
                           <EuiEmptyPrompt
                             body={
-                              <EuiText>
+                              <EuiText
+                                size="s"
+                              >
                                 No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
                               </EuiText>
                             }
@@ -2384,9 +2390,11 @@ exports[`Service Config component renders with one service selected 1`] = `
                                     <div
                                       className="euiText euiText--medium"
                                     >
-                                      <EuiText>
+                                      <EuiText
+                                        size="s"
+                                      >
                                         <div
-                                          className="euiText euiText--medium"
+                                          className="euiText euiText--small"
                                         >
                                           No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
                                         </div>

diff --git a/public/components/application_analytics/__tests__/__snapshots__/trace_config.test.tsx.snap b/public/components/application_analytics/__tests__/__snapshots__/trace_config.test.tsx.snap
@@ -845,7 +845,9 @@ exports[`Trace Config component renders empty trace config 1`] = `
                         </EuiSpacer>
                         <EuiEmptyPrompt
                           body={
-                            <EuiText>
+                            <EuiText
+                              size="s"
+                            >
                               No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
                             </EuiText>
                           }
@@ -884,9 +886,11 @@ exports[`Trace Config component renders empty trace config 1`] = `
                                   <div
                                     className="euiText euiText--medium"
                                   >
-                                    <EuiText>
+                                    <EuiText
+                                      size="s"
+                                    >
                                       <div
-                                        className="euiText euiText--medium"
+                                        className="euiText euiText--small"
                                       >
                                         No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
                                       </div>
@@ -1779,7 +1783,9 @@ exports[`Trace Config component renders with one trace selected 1`] = `
                         </EuiSpacer>
                         <EuiEmptyPrompt
                           body={
-                            <EuiText>
+                            <EuiText
+                              size="s"
+                            >
                               No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
                             </EuiText>
                           }
@@ -1818,9 +1824,11 @@ exports[`Trace Config component renders with one trace selected 1`] = `
                                   <div
                                     className="euiText euiText--medium"
                                   >
-                                    <EuiText>
+                                    <EuiText
+                                      size="s"
+                                    >
                                       <div
-                                        className="euiText euiText--medium"
+                                        className="euiText euiText--small"
                                       >
                                         No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
                                       </div>

diff --git a/public/components/metrics/top_menu/__tests__/__snapshots__/metrics_export.test.tsx.snap b/public/components/metrics/top_menu/__tests__/__snapshots__/metrics_export.test.tsx.snap
@@ -27,7 +27,7 @@ exports[`Export Metrics Panel Component renders Export Metrics Panel Component 1
           hasArrow={true}
           isOpen={false}
           ownFocus={true}
-          panelPaddingSize="m"
+          panelPaddingSize="s"
         >
           <div
             className="euiPopover euiPopover--anchorDownCenter"

diff --git a/public/components/metrics/top_menu/__tests__/__snapshots__/top_menu.test.tsx.snap b/public/components/metrics/top_menu/__tests__/__snapshots__/top_menu.test.tsx.snap
@@ -934,7 +934,7 @@ exports[`Metrics Top Menu Component renders Top Menu Component when enabled 1`]
                             hasArrow={true}
                             isOpen={false}
                             ownFocus={true}
-                            panelPaddingSize="m"
+                            panelPaddingSize="s"
                           >
                             <div
                               className="euiPopover euiPopover--anchorDownCenter"

diff --git a/public/components/metrics/top_menu/metrics_export.tsx b/public/components/metrics/top_menu/metrics_export.tsx
@@ -391,6 +391,7 @@ const MetricsExportPopOver = () => {
         button={<Savebutton setIsPanelOpen={setIsPanelOpen} />}
         isOpen={isPanelOpen}
         closePopover={() => setIsPanelOpen(false)}
+        panelPaddingSize="s"
       >
         <MetricsExportPanel
           availableDashboards={availableDashboards ?? []}

diff --git a/.../trace_analytics/components/common/__tests__/__snapshots__/helper_functions.test.tsx.snap b/.../trace_analytics/components/common/__tests__/__snapshots__/helper_functions.test.tsx.snap
@@ -73,7 +73,9 @@ exports[`Helper functions renders no match and missing configuration messages 1`
   />
   <EuiEmptyPrompt
     body={
-      <EuiText>
+      <EuiText
+        size="s"
+      >
         No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
       </EuiText>
     }
@@ -93,17 +95,19 @@ exports[`Helper functions renders no match and missing configuration messages 2`
 <Fragment>
   <EuiEmptyPrompt
     actions={
-      <EuiSmallButton
+      <EuiSmallButtonEmpty
         color="primary"
         iconSide="right"
         iconType="popout"
         onClick={[Function]}
       >
         Learn more
-      </EuiSmallButton>
+      </EuiSmallButtonEmpty>
     }
     body={
-      <EuiText>
+      <EuiText
+        size="s"
+      >
         The indices required for trace analytics (otel-v1-apm-span-* and otel-v1-apm-service-map*) do not exist or you do not have permission to access them.
       </EuiText>
     }

diff --git a/public/components/trace_analytics/components/common/filters/filters.tsx b/public/components/trace_analytics/components/common/filters/filters.tsx
@@ -210,7 +210,7 @@ export function Filters(props: FiltersOwnProps) {
         withTitle
         data-test-subj="global-filter-button"
       >
-        <EuiContextMenu initialPanelId={0} panels={globalPopoverPanels} />
+        <EuiContextMenu initialPanelId={0} panels={globalPopoverPanels} size="s" />
       </EuiPopover>
     );
   };

diff --git a/public/components/trace_analytics/components/common/helper_functions.tsx b/public/components/trace_analytics/components/common/helper_functions.tsx
@@ -5,7 +5,7 @@
 /* eslint-disable radix */
 
 import dateMath from '@elastic/datemath';
-import { EuiSmallButton, EuiEmptyPrompt, EuiSpacer, EuiText } from '@elastic/eui';
+import { EuiSmallButtonEmpty, EuiEmptyPrompt, EuiSpacer, EuiText } from '@elastic/eui';
 import { SpacerSize } from '@elastic/eui/src/components/spacer/spacer';
 import { isEmpty, round } from 'lodash';
 import React from 'react';
@@ -45,7 +45,7 @@ export function NoMatchMessage(props: { size: SpacerSize }) {
       <EuiEmptyPrompt
         title={<h2>No matches</h2>}
         body={
-          <EuiText>
+          <EuiText size="s">
             No data matches the selected filter. Clear the filter and/or increase the time range to
             see more results.
           </EuiText>
@@ -65,16 +65,16 @@ export function MissingConfigurationMessage(props: { mode: TraceAnalyticsMode })
     <>
       <EuiEmptyPrompt
         title={<h2>Trace Analytics not set up</h2>}
-        body={<EuiText>{missingConfigurationBody}</EuiText>}
+        body={<EuiText size="s">{missingConfigurationBody}</EuiText>}
         actions={
-          <EuiSmallButton
+          <EuiSmallButtonEmpty
             color="primary"
             iconSide="right"
             iconType="popout"
             onClick={() => window.open(TRACE_ANALYTICS_DOCUMENTATION_LINK, '_blank')}
           >
             Learn more
-          </EuiSmallButton>
+          </EuiSmallButtonEmpty>
         }
       />
     </>

diff --git a/public/components/trace_analytics/components/common/plots/service_map_node_details.tsx b/public/components/trace_analytics/components/common/plots/service_map_node_details.tsx
@@ -46,9 +46,9 @@ export const ServiceMapNodeDetails = ({
         </EuiFlexItem>
       </EuiFlexGroup>
       <EuiSpacer size="l" />
-      <EuiText>{selectedNodeDetails?.average_latency}</EuiText>
-      <EuiText>{selectedNodeDetails?.error_rate}</EuiText>
-      <EuiText>{selectedNodeDetails?.throughput}</EuiText>
+      <EuiText size="s">{selectedNodeDetails?.average_latency}</EuiText>
+      <EuiText size="s">{selectedNodeDetails?.error_rate}</EuiText>
+      <EuiText size="s">{selectedNodeDetails?.throughput}</EuiText>
       <EuiSpacer size="l" />
       <EuiFlexGroup direction="column" gutterSize="s">
         <EuiFlexItem>