From b246701d39a582b4ea3c32f9a3ca8ed8fcdb2480 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandro=20Fern=C3=A1ndez=20G=C3=B3mez?=
 <alejandro.fernandez@elastic.co>
Date: Thu, 26 Nov 2020 14:18:42 +0100
Subject: [PATCH] [Logs UI] Polish the UI for the log entry examples in the
 anomaly table (#82139)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 .../log_entry_examples/log_entry_examples.tsx        |  1 +
 .../log_entry_examples_empty_indicator.tsx           |  2 +-
 .../log_entry_examples_failure_indicator.tsx         |  2 +-
 .../sections/anomalies/expanded_row.tsx              | 12 +++++++-----
 4 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/x-pack/plugins/infra/public/components/logging/log_entry_examples/log_entry_examples.tsx b/x-pack/plugins/infra/public/components/logging/log_entry_examples/log_entry_examples.tsx
index 2ec9922d9455..2d15068e51da 100644
--- a/x-pack/plugins/infra/public/components/logging/log_entry_examples/log_entry_examples.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_entry_examples/log_entry_examples.tsx
@@ -46,4 +46,5 @@ const Wrapper = euiStyled.div`
   flex-direction: column;
   flex: 1 0 0%;
   overflow: hidden;
+  padding-top: 1px; // Buffer for the "Reload" buttons' hover state
 `;
diff --git a/x-pack/plugins/infra/public/components/logging/log_entry_examples/log_entry_examples_empty_indicator.tsx b/x-pack/plugins/infra/public/components/logging/log_entry_examples/log_entry_examples_empty_indicator.tsx
index 1d6028ed032a..d3d309948529 100644
--- a/x-pack/plugins/infra/public/components/logging/log_entry_examples/log_entry_examples_empty_indicator.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_entry_examples/log_entry_examples_empty_indicator.tsx
@@ -10,7 +10,7 @@ import React from 'react';
 export const LogEntryExampleMessagesEmptyIndicator: React.FunctionComponent<{
   onReload: () => void;
 }> = ({ onReload }) => (
-  <EuiFlexGroup alignItems="center" justifyContent="center">
+  <EuiFlexGroup alignItems="center">
     <EuiFlexItem grow={false} className="eui-textNoWrap">
       <FormattedMessage
         id="xpack.infra.logs.logEntryExamples.exampleEmptyDescription"
diff --git a/x-pack/plugins/infra/public/components/logging/log_entry_examples/log_entry_examples_failure_indicator.tsx b/x-pack/plugins/infra/public/components/logging/log_entry_examples/log_entry_examples_failure_indicator.tsx
index dca786bce3b7..2a81265f043d 100644
--- a/x-pack/plugins/infra/public/components/logging/log_entry_examples/log_entry_examples_failure_indicator.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_entry_examples/log_entry_examples_failure_indicator.tsx
@@ -10,7 +10,7 @@ import React from 'react';
 export const LogEntryExampleMessagesFailureIndicator: React.FunctionComponent<{
   onRetry: () => void;
 }> = ({ onRetry }) => (
-  <EuiFlexGroup alignItems="center" justifyContent="center">
+  <EuiFlexGroup alignItems="center">
     <EuiFlexItem grow={false} className="eui-textNoWrap">
       <EuiTextColor color="danger">
         <FormattedMessage
diff --git a/x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/anomalies/expanded_row.tsx b/x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/anomalies/expanded_row.tsx
index 9c78c421af75..e6489417f2d0 100644
--- a/x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/anomalies/expanded_row.tsx
+++ b/x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/anomalies/expanded_row.tsx
@@ -51,9 +51,11 @@ export const AnomaliesTableExpandedRow: React.FunctionComponent<{
     <>
       <ExpandedContentWrapper direction="column">
         <EuiFlexItem>
-          <EuiTitle size="s">
+          <EuiTitle size="xs">
             <h3>{examplesTitle}</h3>
           </EuiTitle>
+        </EuiFlexItem>
+        <EuiFlexItem>
           <LogEntryExampleMessages
             isLoading={isLoadingLogEntryExamples}
             hasFailedLoading={hasFailedLoadingLogEntryExamples}
@@ -84,8 +86,8 @@ export const AnomaliesTableExpandedRow: React.FunctionComponent<{
           <EuiFlexGroup>
             <EuiFlexItem grow={false}>
               <EuiStat
-                titleSize="s"
-                title={`${numeral(anomaly.typical).format('0.00a')} ${i18n.translate(
+                titleSize="xs"
+                title={`${numeral(anomaly.typical).format('0.[00]a')} ${i18n.translate(
                   'xpack.infra.logs.analysis.anomaliesExpandedRowTypicalRateTitle',
                   {
                     defaultMessage: '{typicalCount, plural, one {message} other {messages}}',
@@ -102,8 +104,8 @@ export const AnomaliesTableExpandedRow: React.FunctionComponent<{
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
               <EuiStat
-                titleSize="s"
-                title={`${numeral(anomaly.actual).format('0.00a')} ${i18n.translate(
+                titleSize="xs"
+                title={`${numeral(anomaly.actual).format('0.[00]a')} ${i18n.translate(
                   'xpack.infra.logs.analysis.anomaliesExpandedRowActualRateTitle',
                   {
                     defaultMessage: '{actualCount, plural, one {message} other {messages}}',