From b6adcce4e8135de752d061568559266016732c10 Mon Sep 17 00:00:00 2001 From: Maryam Saeidi Date: Wed, 21 Jun 2023 12:15:21 +0200 Subject: [PATCH] [AO] Fix developer console warnings related to rule details page (#160034) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- .../hideable_react_query_dev_tools.tsx | 1 + .../event_log/event_log_list_status.tsx | 4 +- .../components/rule_event_log_list_kpi.tsx | 9 +-- .../rule_execution_summary_and_chart.test.tsx | 26 +++---- .../rule_execution_summary_and_chart.tsx | 72 +++++++++++-------- 5 files changed, 60 insertions(+), 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 index b09bbb8656699..322d8a467ef38 100644 --- 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" /> diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/event_log/event_log_list_status.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/event_log/event_log_list_status.tsx index 44b72072f836d..2dc460fc755ca 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/event_log/event_log_list_status.tsx +++ b/x-pack/plugins/triggers_actions_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 ( -
+ {statusString} -
+ ); }; diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/rule_event_log_list_kpi.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/rule_event_log_list_kpi.tsx index 2f0aa0460c754..9e393a6507fc6 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/rule_event_log_list_kpi.tsx +++ b/x-pack/plugins/triggers_actions_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} - - - ); + return {element}; }; return ( diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/rule_execution_summary_and_chart.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/rule_execution_summary_and_chart.test.tsx index c9626bad07dd6..89f330515091e 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/rule_execution_summary_and_chart.test.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/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/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/rule_execution_summary_and_chart.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/rule_execution_summary_and_chart.tsx index f3e7409b66d2b..6a577e9ecf667 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/rule_execution_summary_and_chart.tsx +++ b/x-pack/plugins/triggers_actions_ui/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; +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} > - - {showDurationWarning && ( - - - - )} - - {formatMillisForDisplay(computedRuleSummary.executionDuration.average)} - - - } - description={i18n.translate( + + {i18n.translate( 'xpack.triggersActionsUI.sections.ruleDetails.alertsList.avgDurationDescription', { defaultMessage: `Average duration`, } )} - /> + + + {showDurationWarning && ( + + + + )} + + + + {formatMillisForDisplay(computedRuleSummary.executionDuration.average)} + + + +