[AO] Fix developer console warnings related to rule details page (#16…

…0034) Fixes #159285 ## Summary This PR fixes the following warnings. |First warning|Second Warning| |---|---| |![image](https://github.com/elastic/kibana/assets/12370520/bf8e3e4b-0885-4a28-9485-3c5ff73efe42)|![image](https://github.com/elastic/kibana/assets/12370520/91375b77-f739-4273-8d3f-1fe4a71c794e)| ## 🧪 How to test Make sure the following components look like before. ![image](https://github.com/elastic/kibana/assets/12370520/34ea58e8-e8ce-4e58-9b2c-04245f462016)
elastic · Jun 21, 2023 · b6adcce · b6adcce
1 parent 6f87995
commit b6adcce
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 52 deletions.
diff --git a/x-pack/plugins/observability/public/application/hideable_react_query_dev_tools.tsx b/x-pack/plugins/observability/public/application/hideable_react_query_dev_tools.tsx
@@ -20,6 +20,7 @@ export function HideableReactQueryDevTools() {
         color="primary"
         style={{ zIndex: 99999, position: 'fixed', bottom: '40px', left: '40px' }}
         onClick={() => setIsHidden(!isHidden)}
+        aria-label="Hide react query"
       />
       <ReactQueryDevtools />
     </div>

diff --git a/...ions_ui/public/application/sections/common/components/event_log/event_log_list_status.tsx b/...ions_ui/public/application/sections/common/components/event_log/event_log_list_status.tsx
@@ -56,9 +56,9 @@ export const EventLogListStatus = (props: EventLogListStatusProps) => {
   }, [useExecutionStatus, status]);
 
   return (
-    <div style={statusContainerStyles}>
+    <span style={statusContainerStyles} data-test-subj="eventLogListStatus">
       <EuiIcon type="dot" color={color} style={iconStyles} />
       {statusString}
-    </div>
+    </span>
   );
 };
diff --git a/...ctions_ui/public/application/sections/rule_details/components/rule_event_log_list_kpi.tsx b/...ctions_ui/public/application/sections/rule_details/components/rule_event_log_list_kpi.tsx
@@ -8,7 +8,7 @@
 import React, { useEffect, useState, useMemo, useRef } from 'react';
 import { i18n } from '@kbn/i18n';
 import datemath from '@kbn/datemath';
-import { EuiFlexGroup, EuiFlexItem, EuiStat, EuiSpacer } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiStat } from '@elastic/eui';
 import { IExecutionKPIResult } from '@kbn/alerting-plugin/common';
 import {
   ComponentOpts as RuleApis,
@@ -130,12 +130,7 @@ export const RuleEventLogListKPI = (props: RuleEventLogListKPIProps) => {
   const isLoadingData = useMemo(() => isLoading || !kpi, [isLoading, kpi]);
 
   const getStatDescription = (element: React.ReactNode) => {
-    return (
-      <>
-        {element}
-        <EuiSpacer size="s" />
-      </>
-    );
+    return <span style={{ paddingBottom: '8px', display: 'flex' }}>{element}</span>;
   };
 
   return (

diff --git a/...ic/application/sections/rule_details/components/rule_execution_summary_and_chart.test.tsx b/...ic/application/sections/rule_details/components/rule_execution_summary_and_chart.test.tsx
@@ -85,13 +85,12 @@ describe('rule_execution_summary_and_chart', () => {
     const avgExecutionDurationPanel = wrapper.find('[data-test-subj="avgExecutionDurationPanel"]');
     expect(avgExecutionDurationPanel.exists()).toBeTruthy();
     expect(avgExecutionDurationPanel.first().prop('color')).toEqual('subdued');
-    expect(wrapper.find('EuiStat[data-test-subj="avgExecutionDurationStat"]').text()).toEqual(
+    expect(wrapper.find('EuiPanel[data-test-subj="avgExecutionDurationPanel"]').text()).toEqual(
       'Average duration00:00:00.100'
     );
     expect(wrapper.find('[data-test-subj="ruleDurationWarning"]').exists()).toBeFalsy();
 
     expect(wrapper.find('[data-test-subj="executionDurationChartPanel"]').exists()).toBeTruthy();
-    expect(wrapper.find('[data-test-subj="avgExecutionDurationPanel"]').exists()).toBeTruthy();
     expect(wrapper.find('[data-test-subj="ruleEventLogListAvgDuration"]').first().text()).toEqual(
       '00:00:00.100'
     );
@@ -115,15 +114,17 @@ describe('rule_execution_summary_and_chart', () => {
     // Does not fetch for the rule summary by itself
     expect(loadRuleSummaryMock).toHaveBeenCalledTimes(1);
 
-    (
-      wrapper
-        .find('[data-test-subj="executionDurationChartPanelSelect"]')
-        .first()
-        .prop('onChange') as any
-    )({
-      target: {
-        value: 30,
-      },
+    await act(async () => {
+      (
+        wrapper
+          .find('[data-test-subj="executionDurationChartPanelSelect"]')
+          .first()
+          .prop('onChange') as any
+      )({
+        target: {
+          value: 30,
+        },
+      });
     });
 
     await act(async () => {
@@ -137,13 +138,12 @@ describe('rule_execution_summary_and_chart', () => {
     const avgExecutionDurationPanel = wrapper.find('[data-test-subj="avgExecutionDurationPanel"]');
     expect(avgExecutionDurationPanel.exists()).toBeTruthy();
     expect(avgExecutionDurationPanel.first().prop('color')).toEqual('subdued');
-    expect(wrapper.find('EuiStat[data-test-subj="avgExecutionDurationStat"]').text()).toEqual(
+    expect(wrapper.find('EuiPanel[data-test-subj="avgExecutionDurationPanel"]').text()).toEqual(
       'Average duration00:00:00.100'
     );
     expect(wrapper.find('[data-test-subj="ruleDurationWarning"]').exists()).toBeFalsy();
 
     expect(wrapper.find('[data-test-subj="executionDurationChartPanel"]').exists()).toBeTruthy();
-    expect(wrapper.find('[data-test-subj="avgExecutionDurationPanel"]').exists()).toBeTruthy();
     expect(wrapper.find('[data-test-subj="ruleEventLogListAvgDuration"]').first().text()).toEqual(
       '00:00:00.100'
     );

diff --git a/.../public/application/sections/rule_details/components/rule_execution_summary_and_chart.tsx b/.../public/application/sections/rule_details/components/rule_execution_summary_and_chart.tsx
@@ -7,7 +7,14 @@
 
 import React, { useMemo, useState, useCallback, useEffect, useRef } from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiPanel, EuiStat, EuiFlexItem, EuiFlexGroup, EuiIconTip } from '@elastic/eui';
+import {
+  EuiPanel,
+  EuiFlexItem,
+  EuiFlexGroup,
+  EuiIconTip,
+  EuiText,
+  useEuiTheme,
+} from '@elastic/eui';
 import { RuleSummary, RuleType } from '../../../../types';
 import { useKibana } from '../../../../common/lib/kibana';
 import { CenterJustifiedSpinner } from '../../../components/center_justified_spinner';
@@ -36,6 +43,13 @@ type RuleExecutionSummaryAndChartProps = {
   fetchRuleSummary?: boolean;
 } & Pick<RuleApis, 'loadRuleSummary'>;
 
+const ruleTypeExcessDurationMessage = i18n.translate(
+  'xpack.triggersActionsUI.sections.ruleDetails.alertsList.ruleTypeExcessDurationMessage',
+  {
+    defaultMessage: `Duration exceeds the rule's expected run time.`,
+  }
+);
+
 export const RuleExecutionSummaryAndChart = (props: RuleExecutionSummaryAndChartProps) => {
   const {
     ruleId,
@@ -52,6 +66,7 @@ export const RuleExecutionSummaryAndChart = (props: RuleExecutionSummaryAndChart
   const {
     notifications: { toasts },
   } = useKibana().services;
+  const { euiTheme } = useEuiTheme();
 
   const isInitialized = useRef(false);
 
@@ -154,40 +169,37 @@ export const RuleExecutionSummaryAndChart = (props: RuleExecutionSummaryAndChart
           color={showDurationWarning ? 'warning' : 'subdued'}
           hasBorder={false}
         >
-          <EuiStat
-            data-test-subj="avgExecutionDurationStat"
-            titleSize="xs"
-            title={
-              <EuiFlexGroup gutterSize="xs">
-                {showDurationWarning && (
-                  <EuiFlexItem grow={false}>
-                    <EuiIconTip
-                      data-test-subj="ruleDurationWarning"
-                      anchorClassName="ruleDurationWarningIcon"
-                      type="warning"
-                      color="warning"
-                      content={i18n.translate(
-                        'xpack.triggersActionsUI.sections.ruleDetails.alertsList.ruleTypeExcessDurationMessage',
-                        {
-                          defaultMessage: `Duration exceeds the rule's expected run time.`,
-                        }
-                      )}
-                      position="top"
-                    />
-                  </EuiFlexItem>
-                )}
-                <EuiFlexItem grow={false} data-test-subj="ruleEventLogListAvgDuration">
-                  {formatMillisForDisplay(computedRuleSummary.executionDuration.average)}
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            }
-            description={i18n.translate(
+          <EuiText size="s" color="text">
+            {i18n.translate(
               'xpack.triggersActionsUI.sections.ruleDetails.alertsList.avgDurationDescription',
               {
                 defaultMessage: `Average duration`,
               }
             )}
-          />
+          </EuiText>
+          <EuiFlexGroup gutterSize="xs" style={{ alignItems: 'center' }}>
+            {showDurationWarning && (
+              <EuiFlexItem grow={false}>
+                <EuiIconTip
+                  data-test-subj="ruleDurationWarning"
+                  anchorClassName="ruleDurationWarningIcon"
+                  type="warning"
+                  color="warning"
+                  content={ruleTypeExcessDurationMessage}
+                  aria-label={ruleTypeExcessDurationMessage}
+                  position="top"
+                  size="m"
+                />
+              </EuiFlexItem>
+            )}
+            <EuiFlexItem grow={false} data-test-subj="ruleEventLogListAvgDuration">
+              <EuiText size="m" color={euiTheme.colors.text}>
+                <strong>
+                  {formatMillisForDisplay(computedRuleSummary.executionDuration.average)}
+                </strong>
+              </EuiText>
+            </EuiFlexItem>
+          </EuiFlexGroup>
         </EuiPanel>
       </EuiFlexItem>
       <EuiFlexItem grow={2}>