From 666e603e13ffba3267bd9e1b17abb2540c9ee78b Mon Sep 17 00:00:00 2001 From: Kevin Delemme Date: Tue, 22 Oct 2024 11:10:50 -0400 Subject: [PATCH 01/17] return early tab component --- .../slo_details/components/slo_details.tsx | 25 +++++++++++-------- 1 file changed, 15 insertions(+), 10 deletions(-) diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/slo_details.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/slo_details.tsx index 249984fb3ed56..f9b8299e54d65 100644 --- a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/slo_details.tsx +++ b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/slo_details.tsx @@ -33,7 +33,6 @@ export interface Props { } export function SloDetails({ slo, isAutoRefreshing, selectedTabId }: Props) { const { burnRateOptions } = useBurnRateOptions(slo); - const [range, setRange] = useState<{ from: Date; to: Date }>({ from: moment().subtract(1, 'day').toDate(), to: new Date(), @@ -50,7 +49,21 @@ export function SloDetails({ slo, isAutoRefreshing, selectedTabId }: Props) { return () => clearInterval(intervalId); }, [isAutoRefreshing]); - return selectedTabId === OVERVIEW_TAB_ID ? ( + if (selectedTabId === HISTORY_TAB_ID) { + return ( + + ); + } + + if (selectedTabId === ALERTS_TAB_ID) { + return ; + } + + return ( @@ -76,13 +89,5 @@ export function SloDetails({ slo, isAutoRefreshing, selectedTabId }: Props) { - ) : selectedTabId === ALERTS_TAB_ID ? ( - - ) : ( - ); } From 058fa9b6cfc167c18872d6057d33378eaeb5b5d1 Mon Sep 17 00:00:00 2001 From: Kevin Delemme Date: Tue, 22 Oct 2024 11:12:19 -0400 Subject: [PATCH 02/17] Remove extra divs --- .../history/slo_details_history.tsx | 34 +++++++++---------- .../slo_details/components/slo_details.tsx | 20 +++++------ 2 files changed, 25 insertions(+), 29 deletions(-) diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/history/slo_details_history.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/history/slo_details_history.tsx index 7ecf4d4672775..f59ae6a650feb 100644 --- a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/history/slo_details_history.tsx +++ b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/history/slo_details_history.tsx @@ -86,16 +86,15 @@ export function SLODetailsHistory({ slo, isAutoRefreshing, selectedTabId }: Prop - - - + + - - - + + ); diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/slo_details.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/slo_details.tsx index f9b8299e54d65..486afd1d584ba 100644 --- a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/slo_details.tsx +++ b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/slo_details.tsx @@ -71,22 +71,20 @@ export function SloDetails({ slo, isAutoRefreshing, selectedTabId }: Props) { - - - + + - - - + + ); From 498121d25aaa2574c0e1a0a2ed192a90094e1614 Mon Sep 17 00:00:00 2001 From: Kevin Delemme Date: Tue, 22 Oct 2024 11:27:04 -0400 Subject: [PATCH 03/17] Move alert details related components --- .../alert_details/alert_details_app_section.tsx | 4 ++-- .../components/custom_panels/apm/apm_alert_details.tsx | 0 .../components/custom_panels/apm/embeddable_root.tsx | 0 .../custom_panels/custom_kql/custom_kql_panels.tsx | 2 +- .../__snapshots__/log_rate_analysis_query.test.ts.snap | 0 .../custom_kql/helpers/log_rate_analysis_query.test.ts | 0 .../custom_kql/helpers/log_rate_analysis_query.ts | 0 .../custom_panels/custom_kql/log_rate_analysis_panel.tsx | 6 +++--- .../components/custom_panels/custom_panels.tsx | 0 .../components/error_rate/error_rate_panel.tsx | 6 +++--- .../components/{slo/burn_rate => }/alert_details/types.ts | 4 ++-- .../{slo/burn_rate => }/alert_details/utils/alert.ts | 4 ++-- .../alert_details/utils/last_duration_i18n.ts | 2 +- .../{slo/burn_rate => }/alert_details/utils/time_range.ts | 2 +- .../slo/public/rules/register_burn_rate_rule_type.ts | 2 +- 15 files changed, 16 insertions(+), 16 deletions(-) rename x-pack/plugins/observability_solution/slo/public/components/{slo/burn_rate => }/alert_details/alert_details_app_section.tsx (93%) rename x-pack/plugins/observability_solution/slo/public/components/{slo/burn_rate => }/alert_details/components/custom_panels/apm/apm_alert_details.tsx (100%) rename x-pack/plugins/observability_solution/slo/public/components/{slo/burn_rate => }/alert_details/components/custom_panels/apm/embeddable_root.tsx (100%) rename x-pack/plugins/observability_solution/slo/public/components/{slo/burn_rate => }/alert_details/components/custom_panels/custom_kql/custom_kql_panels.tsx (92%) rename x-pack/plugins/observability_solution/slo/public/components/{slo/burn_rate => }/alert_details/components/custom_panels/custom_kql/helpers/__snapshots__/log_rate_analysis_query.test.ts.snap (100%) rename x-pack/plugins/observability_solution/slo/public/components/{slo/burn_rate => }/alert_details/components/custom_panels/custom_kql/helpers/log_rate_analysis_query.test.ts (100%) rename x-pack/plugins/observability_solution/slo/public/components/{slo/burn_rate => }/alert_details/components/custom_panels/custom_kql/helpers/log_rate_analysis_query.ts (100%) rename x-pack/plugins/observability_solution/slo/public/components/{slo/burn_rate => }/alert_details/components/custom_panels/custom_kql/log_rate_analysis_panel.tsx (98%) rename x-pack/plugins/observability_solution/slo/public/components/{slo/burn_rate => }/alert_details/components/custom_panels/custom_panels.tsx (100%) rename x-pack/plugins/observability_solution/slo/public/components/{slo/burn_rate => }/alert_details/components/error_rate/error_rate_panel.tsx (96%) rename x-pack/plugins/observability_solution/slo/public/components/{slo/burn_rate => }/alert_details/types.ts (76%) rename x-pack/plugins/observability_solution/slo/public/components/{slo/burn_rate => }/alert_details/utils/alert.ts (92%) rename x-pack/plugins/observability_solution/slo/public/components/{slo/burn_rate => }/alert_details/utils/last_duration_i18n.ts (95%) rename x-pack/plugins/observability_solution/slo/public/components/{slo/burn_rate => }/alert_details/utils/time_range.ts (92%) diff --git a/x-pack/plugins/observability_solution/slo/public/components/slo/burn_rate/alert_details/alert_details_app_section.tsx b/x-pack/plugins/observability_solution/slo/public/components/alert_details/alert_details_app_section.tsx similarity index 93% rename from x-pack/plugins/observability_solution/slo/public/components/slo/burn_rate/alert_details/alert_details_app_section.tsx rename to x-pack/plugins/observability_solution/slo/public/components/alert_details/alert_details_app_section.tsx index 44ab29e77e1bd..b3ae26e241908 100644 --- a/x-pack/plugins/observability_solution/slo/public/components/slo/burn_rate/alert_details/alert_details_app_section.tsx +++ b/x-pack/plugins/observability_solution/slo/public/components/alert_details/alert_details_app_section.tsx @@ -9,8 +9,8 @@ import React, { useEffect } from 'react'; import { EuiFlexGroup, EuiLink } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { AlertDetailsAppSectionProps } from '@kbn/observability-plugin/public'; -import { useKibana } from '../../../../utils/kibana_react'; -import { useFetchSloDetails } from '../../../../hooks/use_fetch_slo_details'; +import { useKibana } from '../../utils/kibana_react'; +import { useFetchSloDetails } from '../../hooks/use_fetch_slo_details'; import { CustomAlertDetailsPanel } from './components/custom_panels/custom_panels'; import { ErrorRatePanel } from './components/error_rate/error_rate_panel'; import { BurnRateAlert, BurnRateRule } from './types'; diff --git a/x-pack/plugins/observability_solution/slo/public/components/slo/burn_rate/alert_details/components/custom_panels/apm/apm_alert_details.tsx b/x-pack/plugins/observability_solution/slo/public/components/alert_details/components/custom_panels/apm/apm_alert_details.tsx similarity index 100% rename from x-pack/plugins/observability_solution/slo/public/components/slo/burn_rate/alert_details/components/custom_panels/apm/apm_alert_details.tsx rename to x-pack/plugins/observability_solution/slo/public/components/alert_details/components/custom_panels/apm/apm_alert_details.tsx diff --git a/x-pack/plugins/observability_solution/slo/public/components/slo/burn_rate/alert_details/components/custom_panels/apm/embeddable_root.tsx b/x-pack/plugins/observability_solution/slo/public/components/alert_details/components/custom_panels/apm/embeddable_root.tsx similarity index 100% rename from x-pack/plugins/observability_solution/slo/public/components/slo/burn_rate/alert_details/components/custom_panels/apm/embeddable_root.tsx rename to x-pack/plugins/observability_solution/slo/public/components/alert_details/components/custom_panels/apm/embeddable_root.tsx diff --git a/x-pack/plugins/observability_solution/slo/public/components/slo/burn_rate/alert_details/components/custom_panels/custom_kql/custom_kql_panels.tsx b/x-pack/plugins/observability_solution/slo/public/components/alert_details/components/custom_panels/custom_kql/custom_kql_panels.tsx similarity index 92% rename from x-pack/plugins/observability_solution/slo/public/components/slo/burn_rate/alert_details/components/custom_panels/custom_kql/custom_kql_panels.tsx rename to x-pack/plugins/observability_solution/slo/public/components/alert_details/components/custom_panels/custom_kql/custom_kql_panels.tsx index 418f7c5d08d41..1a75a30766423 100644 --- a/x-pack/plugins/observability_solution/slo/public/components/slo/burn_rate/alert_details/components/custom_panels/custom_kql/custom_kql_panels.tsx +++ b/x-pack/plugins/observability_solution/slo/public/components/alert_details/components/custom_panels/custom_kql/custom_kql_panels.tsx @@ -9,7 +9,7 @@ import { GetSLOResponse } from '@kbn/slo-schema'; import React from 'react'; import { LogRateAnalysisPanel } from './log_rate_analysis_panel'; import { BurnRateAlert, BurnRateRule } from '../../../types'; -import { useLicense } from '../../../../../../../hooks/use_license'; +import { useLicense } from '../../../../../hooks/use_license'; interface Props { slo: GetSLOResponse; diff --git a/x-pack/plugins/observability_solution/slo/public/components/slo/burn_rate/alert_details/components/custom_panels/custom_kql/helpers/__snapshots__/log_rate_analysis_query.test.ts.snap b/x-pack/plugins/observability_solution/slo/public/components/alert_details/components/custom_panels/custom_kql/helpers/__snapshots__/log_rate_analysis_query.test.ts.snap similarity index 100% rename from x-pack/plugins/observability_solution/slo/public/components/slo/burn_rate/alert_details/components/custom_panels/custom_kql/helpers/__snapshots__/log_rate_analysis_query.test.ts.snap rename to x-pack/plugins/observability_solution/slo/public/components/alert_details/components/custom_panels/custom_kql/helpers/__snapshots__/log_rate_analysis_query.test.ts.snap diff --git a/x-pack/plugins/observability_solution/slo/public/components/slo/burn_rate/alert_details/components/custom_panels/custom_kql/helpers/log_rate_analysis_query.test.ts b/x-pack/plugins/observability_solution/slo/public/components/alert_details/components/custom_panels/custom_kql/helpers/log_rate_analysis_query.test.ts similarity index 100% rename from x-pack/plugins/observability_solution/slo/public/components/slo/burn_rate/alert_details/components/custom_panels/custom_kql/helpers/log_rate_analysis_query.test.ts rename to x-pack/plugins/observability_solution/slo/public/components/alert_details/components/custom_panels/custom_kql/helpers/log_rate_analysis_query.test.ts diff --git a/x-pack/plugins/observability_solution/slo/public/components/slo/burn_rate/alert_details/components/custom_panels/custom_kql/helpers/log_rate_analysis_query.ts b/x-pack/plugins/observability_solution/slo/public/components/alert_details/components/custom_panels/custom_kql/helpers/log_rate_analysis_query.ts similarity index 100% rename from x-pack/plugins/observability_solution/slo/public/components/slo/burn_rate/alert_details/components/custom_panels/custom_kql/helpers/log_rate_analysis_query.ts rename to x-pack/plugins/observability_solution/slo/public/components/alert_details/components/custom_panels/custom_kql/helpers/log_rate_analysis_query.ts diff --git a/x-pack/plugins/observability_solution/slo/public/components/slo/burn_rate/alert_details/components/custom_panels/custom_kql/log_rate_analysis_panel.tsx b/x-pack/plugins/observability_solution/slo/public/components/alert_details/components/custom_panels/custom_kql/log_rate_analysis_panel.tsx similarity index 98% rename from x-pack/plugins/observability_solution/slo/public/components/slo/burn_rate/alert_details/components/custom_panels/custom_kql/log_rate_analysis_panel.tsx rename to x-pack/plugins/observability_solution/slo/public/components/alert_details/components/custom_panels/custom_kql/log_rate_analysis_panel.tsx index e94b8d5baed55..51b637a826b3f 100644 --- a/x-pack/plugins/observability_solution/slo/public/components/slo/burn_rate/alert_details/components/custom_panels/custom_kql/log_rate_analysis_panel.tsx +++ b/x-pack/plugins/observability_solution/slo/public/components/alert_details/components/custom_panels/custom_kql/log_rate_analysis_panel.tsx @@ -23,11 +23,11 @@ import { colorTransformer } from '@kbn/observability-shared-plugin/common'; import { KQLCustomIndicator, DurationUnit } from '@kbn/slo-schema'; import { i18n } from '@kbn/i18n'; import type { Message } from '@kbn/observability-ai-assistant-plugin/public'; -import type { WindowSchema } from '../../../../../../../typings'; -import { TimeRange } from '../../../../../error_rate_chart/use_lens_definition'; +import type { WindowSchema } from '../../../../../typings'; +import { TimeRange } from '../../../../slo/error_rate_chart/use_lens_definition'; import { BurnRateAlert, BurnRateRule } from '../../../types'; import { getActionGroupFromReason } from '../../../utils/alert'; -import { useKibana } from '../../../../../../../utils/kibana_react'; +import { useKibana } from '../../../../../utils/kibana_react'; import { getESQueryForLogRateAnalysis } from './helpers/log_rate_analysis_query'; function getDataTimeRange( timeRange: { gte: string; lte?: string }, diff --git a/x-pack/plugins/observability_solution/slo/public/components/slo/burn_rate/alert_details/components/custom_panels/custom_panels.tsx b/x-pack/plugins/observability_solution/slo/public/components/alert_details/components/custom_panels/custom_panels.tsx similarity index 100% rename from x-pack/plugins/observability_solution/slo/public/components/slo/burn_rate/alert_details/components/custom_panels/custom_panels.tsx rename to x-pack/plugins/observability_solution/slo/public/components/alert_details/components/custom_panels/custom_panels.tsx diff --git a/x-pack/plugins/observability_solution/slo/public/components/slo/burn_rate/alert_details/components/error_rate/error_rate_panel.tsx b/x-pack/plugins/observability_solution/slo/public/components/alert_details/components/error_rate/error_rate_panel.tsx similarity index 96% rename from x-pack/plugins/observability_solution/slo/public/components/slo/burn_rate/alert_details/components/error_rate/error_rate_panel.tsx rename to x-pack/plugins/observability_solution/slo/public/components/alert_details/components/error_rate/error_rate_panel.tsx index 560f3f463bb46..8846b4fc82eb3 100644 --- a/x-pack/plugins/observability_solution/slo/public/components/slo/burn_rate/alert_details/components/error_rate/error_rate_panel.tsx +++ b/x-pack/plugins/observability_solution/slo/public/components/alert_details/components/error_rate/error_rate_panel.tsx @@ -23,9 +23,9 @@ import { FormattedMessage } from '@kbn/i18n-react'; import { ALERT_EVALUATION_VALUE, ALERT_TIME_RANGE } from '@kbn/rule-data-utils'; import { GetSLOResponse } from '@kbn/slo-schema'; import React from 'react'; -import { useKibana } from '../../../../../../utils/kibana_react'; -import { ErrorRateChart } from '../../../../error_rate_chart'; -import { TimeRange } from '../../../../error_rate_chart/use_lens_definition'; +import { useKibana } from '../../../../utils/kibana_react'; +import { ErrorRateChart } from '../../../slo/error_rate_chart'; +import { TimeRange } from '../../../slo/error_rate_chart/use_lens_definition'; import { BurnRateAlert } from '../../types'; import { getActionGroupWindow } from '../../utils/alert'; import { getLastDurationInUnit } from '../../utils/last_duration_i18n'; diff --git a/x-pack/plugins/observability_solution/slo/public/components/slo/burn_rate/alert_details/types.ts b/x-pack/plugins/observability_solution/slo/public/components/alert_details/types.ts similarity index 76% rename from x-pack/plugins/observability_solution/slo/public/components/slo/burn_rate/alert_details/types.ts rename to x-pack/plugins/observability_solution/slo/public/components/alert_details/types.ts index 71aeb901d2b84..4592f4e2b4f1d 100644 --- a/x-pack/plugins/observability_solution/slo/public/components/slo/burn_rate/alert_details/types.ts +++ b/x-pack/plugins/observability_solution/slo/public/components/alert_details/types.ts @@ -7,8 +7,8 @@ import type { Rule } from '@kbn/alerting-plugin/common'; import type { TopAlert } from '@kbn/observability-plugin/public'; -import type { BurnRateRuleParams } from '../../../../typings/slo'; -export type { TimeRange } from '../../error_rate_chart/use_lens_definition'; +import type { BurnRateRuleParams } from '../../typings/slo'; +export type { TimeRange } from '../slo/error_rate_chart/use_lens_definition'; export type BurnRateRule = Rule; export type BurnRateAlert = TopAlert; diff --git a/x-pack/plugins/observability_solution/slo/public/components/slo/burn_rate/alert_details/utils/alert.ts b/x-pack/plugins/observability_solution/slo/public/components/alert_details/utils/alert.ts similarity index 92% rename from x-pack/plugins/observability_solution/slo/public/components/slo/burn_rate/alert_details/utils/alert.ts rename to x-pack/plugins/observability_solution/slo/public/components/alert_details/utils/alert.ts index 9857973446d16..cf47d6949c796 100644 --- a/x-pack/plugins/observability_solution/slo/public/components/slo/burn_rate/alert_details/utils/alert.ts +++ b/x-pack/plugins/observability_solution/slo/public/components/alert_details/utils/alert.ts @@ -10,9 +10,9 @@ import { HIGH_PRIORITY_ACTION_ID, LOW_PRIORITY_ACTION_ID, MEDIUM_PRIORITY_ACTION_ID, -} from '../../../../../../common/constants'; +} from '../../../../common/constants'; import { BurnRateAlert } from '../types'; -import { WindowSchema } from '../../../../../typings'; +import { WindowSchema } from '../../../typings'; export function getActionGroupFromReason(reason: string): string { const prefix = reason.split(':')[0]?.toLowerCase() ?? undefined; diff --git a/x-pack/plugins/observability_solution/slo/public/components/slo/burn_rate/alert_details/utils/last_duration_i18n.ts b/x-pack/plugins/observability_solution/slo/public/components/alert_details/utils/last_duration_i18n.ts similarity index 95% rename from x-pack/plugins/observability_solution/slo/public/components/slo/burn_rate/alert_details/utils/last_duration_i18n.ts rename to x-pack/plugins/observability_solution/slo/public/components/alert_details/utils/last_duration_i18n.ts index cda5f292a8a8e..a1b34bf427f9a 100644 --- a/x-pack/plugins/observability_solution/slo/public/components/slo/burn_rate/alert_details/utils/last_duration_i18n.ts +++ b/x-pack/plugins/observability_solution/slo/public/components/alert_details/utils/last_duration_i18n.ts @@ -7,7 +7,7 @@ import { i18n } from '@kbn/i18n'; import moment from 'moment'; -import { TimeRange } from '../../../error_rate_chart/use_lens_definition'; +import { TimeRange } from '../../slo/error_rate_chart/use_lens_definition'; export function getLastDurationInUnit(timeRange: TimeRange): string { const duration = moment.duration(moment(timeRange.to).diff(timeRange.from)); diff --git a/x-pack/plugins/observability_solution/slo/public/components/slo/burn_rate/alert_details/utils/time_range.ts b/x-pack/plugins/observability_solution/slo/public/components/alert_details/utils/time_range.ts similarity index 92% rename from x-pack/plugins/observability_solution/slo/public/components/slo/burn_rate/alert_details/utils/time_range.ts rename to x-pack/plugins/observability_solution/slo/public/components/alert_details/utils/time_range.ts index 0f5358978478e..9fd813dff5e90 100644 --- a/x-pack/plugins/observability_solution/slo/public/components/slo/burn_rate/alert_details/utils/time_range.ts +++ b/x-pack/plugins/observability_solution/slo/public/components/alert_details/utils/time_range.ts @@ -6,7 +6,7 @@ */ import type { DateRange } from '@kbn/alerting-plugin/common'; import { ALERT_TIME_RANGE } from '@kbn/rule-data-utils'; -import { TimeRange } from '../../../error_rate_chart/use_lens_definition'; +import { TimeRange } from '../../slo/error_rate_chart/use_lens_definition'; import { BurnRateAlert } from '../types'; import { getActionGroupWindow } from './alert'; diff --git a/x-pack/plugins/observability_solution/slo/public/rules/register_burn_rate_rule_type.ts b/x-pack/plugins/observability_solution/slo/public/rules/register_burn_rate_rule_type.ts index f843809543620..66b845df9e443 100644 --- a/x-pack/plugins/observability_solution/slo/public/rules/register_burn_rate_rule_type.ts +++ b/x-pack/plugins/observability_solution/slo/public/rules/register_burn_rate_rule_type.ts @@ -72,7 +72,7 @@ export const registerBurnRateRuleType = ( defaultActionMessage: sloBurnRateDefaultActionMessage, defaultRecoveryMessage: sloBurnRateDefaultRecoveryMessage, alertDetailsAppSection: lazy( - () => import('../components/slo/burn_rate/alert_details/alert_details_app_section') + () => import('../components/alert_details/alert_details_app_section') ), priority: 100, }); From 1153ff1ecde6fbcaaf9dd09d0b3d27aaa16a1eda Mon Sep 17 00:00:00 2001 From: Kevin Delemme Date: Tue, 22 Oct 2024 11:32:28 -0400 Subject: [PATCH 04/17] Move burn rate components to page folder --- .../components}/burn_rate/burn_rate.test.tsx | 4 ++-- .../slo_details/components}/burn_rate/burn_rate.tsx | 2 +- .../components}/burn_rate/burn_rate_header.tsx | 2 +- .../slo_details/components}/burn_rate/burn_rates.tsx | 10 +++++----- .../components/history/slo_details_history.tsx | 2 +- .../pages/slo_details/components/slo_details.tsx | 2 +- .../pages/slo_details/hooks/use_burn_rate_options.ts | 2 +- 7 files changed, 12 insertions(+), 12 deletions(-) rename x-pack/plugins/observability_solution/slo/public/{components/slo => pages/slo_details/components}/burn_rate/burn_rate.test.tsx (91%) rename x-pack/plugins/observability_solution/slo/public/{components/slo => pages/slo_details/components}/burn_rate/burn_rate.tsx (98%) rename x-pack/plugins/observability_solution/slo/public/{components/slo => pages/slo_details/components}/burn_rate/burn_rate_header.tsx (95%) rename x-pack/plugins/observability_solution/slo/public/{components/slo => pages/slo_details/components}/burn_rate/burn_rates.tsx (89%) diff --git a/x-pack/plugins/observability_solution/slo/public/components/slo/burn_rate/burn_rate.test.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rate.test.tsx similarity index 91% rename from x-pack/plugins/observability_solution/slo/public/components/slo/burn_rate/burn_rate.test.tsx rename to x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rate.test.tsx index 5185fa73758d1..a606b1baee06d 100644 --- a/x-pack/plugins/observability_solution/slo/public/components/slo/burn_rate/burn_rate.test.tsx +++ b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rate.test.tsx @@ -8,8 +8,8 @@ import { screen } from '@testing-library/react'; import React from 'react'; -import { buildSlo } from '../../../data/slo/slo'; -import { render } from '../../../utils/test_helper'; +import { buildSlo } from '../../../../data/slo/slo'; +import { render } from '../../../../utils/test_helper'; import { BurnRate } from './burn_rate'; describe('BurnRate', () => { diff --git a/x-pack/plugins/observability_solution/slo/public/components/slo/burn_rate/burn_rate.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rate.tsx similarity index 98% rename from x-pack/plugins/observability_solution/slo/public/components/slo/burn_rate/burn_rate.tsx rename to x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rate.tsx index 9d32524a2ce58..eb11e98739c22 100644 --- a/x-pack/plugins/observability_solution/slo/public/components/slo/burn_rate/burn_rate.tsx +++ b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rate.tsx @@ -11,7 +11,7 @@ import { i18n } from '@kbn/i18n'; import { SLODefinitionResponse } from '@kbn/slo-schema'; import moment from 'moment'; import React from 'react'; -import { toDuration, toMinutes } from '../../../utils/slo/duration'; +import { toDuration, toMinutes } from '../../../../utils/slo/duration'; export interface BurnRateParams { slo: SLODefinitionResponse; diff --git a/x-pack/plugins/observability_solution/slo/public/components/slo/burn_rate/burn_rate_header.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rate_header.tsx similarity index 95% rename from x-pack/plugins/observability_solution/slo/public/components/slo/burn_rate/burn_rate_header.tsx rename to x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rate_header.tsx index 4c878735a5857..43a5afd4063e0 100644 --- a/x-pack/plugins/observability_solution/slo/public/components/slo/burn_rate/burn_rate_header.tsx +++ b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rate_header.tsx @@ -8,7 +8,7 @@ import { EuiButtonGroup, EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import React from 'react'; -import { SloTabId } from '../../../pages/slo_details/components/slo_details'; +import { SloTabId } from '../slo_details'; import { BurnRateOption } from './burn_rates'; interface Props { burnRateOption: BurnRateOption; diff --git a/x-pack/plugins/observability_solution/slo/public/components/slo/burn_rate/burn_rates.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rates.tsx similarity index 89% rename from x-pack/plugins/observability_solution/slo/public/components/slo/burn_rate/burn_rates.tsx rename to x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rates.tsx index a6c02572d10fe..863a827364814 100644 --- a/x-pack/plugins/observability_solution/slo/public/components/slo/burn_rate/burn_rates.tsx +++ b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rates.tsx @@ -9,12 +9,12 @@ import { EuiFlexGroup, EuiFlexItem, EuiPanel } from '@elastic/eui'; import { SLOWithSummaryResponse } from '@kbn/slo-schema'; import moment from 'moment'; import React, { useEffect, useState } from 'react'; -import { TimeBounds } from '../../../pages/slo_details/types'; -import { TimeRange } from '../error_rate_chart/use_lens_definition'; -import { SloTabId } from '../../../pages/slo_details/components/slo_details'; +import { TimeBounds } from '../../types'; +import { TimeRange } from '../../../../components/slo/error_rate_chart/use_lens_definition'; +import { SloTabId } from '../slo_details'; import { BurnRateHeader } from './burn_rate_header'; -import { useFetchSloBurnRates } from '../../../hooks/use_fetch_slo_burn_rates'; -import { ErrorRateChart } from '../error_rate_chart'; +import { useFetchSloBurnRates } from '../../../../hooks/use_fetch_slo_burn_rates'; +import { ErrorRateChart } from '../../../../components/slo/error_rate_chart'; import { BurnRate } from './burn_rate'; interface Props { diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/history/slo_details_history.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/history/slo_details_history.tsx index f59ae6a650feb..88c99c7668c02 100644 --- a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/history/slo_details_history.tsx +++ b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/history/slo_details_history.tsx @@ -15,7 +15,7 @@ import { import DateMath from '@kbn/datemath'; import { SLOWithSummaryResponse } from '@kbn/slo-schema'; import React, { useMemo, useState } from 'react'; -import { BurnRates } from '../../../../components/slo/burn_rate/burn_rates'; +import { BurnRates } from '../burn_rate/burn_rates'; import { useKibana } from '../../../../utils/kibana_react'; import { useBurnRateOptions } from '../../hooks/use_burn_rate_options'; import { TimeBounds } from '../../types'; diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/slo_details.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/slo_details.tsx index 486afd1d584ba..29a56efcbc73d 100644 --- a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/slo_details.tsx +++ b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/slo_details.tsx @@ -9,7 +9,7 @@ import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import { SLOWithSummaryResponse } from '@kbn/slo-schema'; import moment from 'moment'; import React, { useEffect, useState } from 'react'; -import { BurnRates } from '../../../components/slo/burn_rate/burn_rates'; +import { BurnRates } from './burn_rate/burn_rates'; import { useBurnRateOptions } from '../hooks/use_burn_rate_options'; import { EventsChartPanel } from './events_chart_panel'; import { HistoricalDataCharts } from './historical_data_charts'; diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/hooks/use_burn_rate_options.ts b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/hooks/use_burn_rate_options.ts index 1bb86de617fac..35e8952507086 100644 --- a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/hooks/use_burn_rate_options.ts +++ b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/hooks/use_burn_rate_options.ts @@ -8,7 +8,7 @@ import { htmlIdGenerator } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { SLOWithSummaryResponse } from '@kbn/slo-schema'; -import { BurnRateOption } from '../../../components/slo/burn_rate/burn_rates'; +import { BurnRateOption } from '../components/burn_rate/burn_rates'; import { useFetchRulesForSlo } from '../../../hooks/use_fetch_rules_for_slo'; export const DEFAULT_BURN_RATE_OPTIONS: BurnRateOption[] = [ From 6af00911a1250b8634828fff333785e5a632a9a0 Mon Sep 17 00:00:00 2001 From: Kevin Delemme Date: Tue, 22 Oct 2024 11:35:38 -0400 Subject: [PATCH 05/17] Reorganize layout history details --- .../history/slo_details_history.tsx | 53 +++++++++---------- 1 file changed, 24 insertions(+), 29 deletions(-) diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/history/slo_details_history.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/history/slo_details_history.tsx index 88c99c7668c02..1f1e1174316b6 100644 --- a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/history/slo_details_history.tsx +++ b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/history/slo_details_history.tsx @@ -7,7 +7,6 @@ import { EuiFlexGroup, EuiFlexItem, - EuiSpacer, EuiSuperDatePicker, OnRefreshProps, OnTimeChangeProps, @@ -15,10 +14,10 @@ import { import DateMath from '@kbn/datemath'; import { SLOWithSummaryResponse } from '@kbn/slo-schema'; import React, { useMemo, useState } from 'react'; -import { BurnRates } from '../burn_rate/burn_rates'; import { useKibana } from '../../../../utils/kibana_react'; import { useBurnRateOptions } from '../../hooks/use_burn_rate_options'; import { TimeBounds } from '../../types'; +import { BurnRates } from '../burn_rate/burn_rates'; import { EventsChartPanel } from '../events_chart_panel'; import { HistoricalDataCharts } from '../historical_data_charts'; import { SloTabId } from '../slo_details'; @@ -55,7 +54,7 @@ export function SLODetailsHistory({ slo, isAutoRefreshing, selectedTabId }: Prop }; return ( - <> + - + - - + - - - - - + + ); } From f5ad7a798444708f1a69662e19486e23a4527a37 Mon Sep 17 00:00:00 2001 From: Kevin Delemme Date: Tue, 22 Oct 2024 12:00:09 -0400 Subject: [PATCH 06/17] Refactor history burn rates component --- .../slo/error_rate_chart/error_rate_chart.tsx | 6 +- .../error_rate_chart/use_lens_definition.ts | 130 +++++++++--------- .../components/burn_rate/burn_rate_header.tsx | 41 +++--- .../components/burn_rate/burn_rates.tsx | 28 ++-- .../history/slo_details_history.tsx | 29 ++-- .../slo_details/components/slo_details.tsx | 3 +- 6 files changed, 110 insertions(+), 127 deletions(-) diff --git a/x-pack/plugins/observability_solution/slo/public/components/slo/error_rate_chart/error_rate_chart.tsx b/x-pack/plugins/observability_solution/slo/public/components/slo/error_rate_chart/error_rate_chart.tsx index 261359e1b8873..ecd88c090e371 100644 --- a/x-pack/plugins/observability_solution/slo/public/components/slo/error_rate_chart/error_rate_chart.tsx +++ b/x-pack/plugins/observability_solution/slo/public/components/slo/error_rate_chart/error_rate_chart.tsx @@ -9,7 +9,6 @@ import { ViewMode } from '@kbn/embeddable-plugin/public'; import { SLOWithSummaryResponse } from '@kbn/slo-schema'; import moment from 'moment'; import React from 'react'; -import { SloTabId } from '../../../pages/slo_details/components/slo_details'; import { TimeBounds } from '../../../pages/slo_details/types'; import { useKibana } from '../../../utils/kibana_react'; import { getDelayInSecondsFromSLO } from '../../../utils/slo/get_delay_in_seconds_from_slo'; @@ -18,11 +17,10 @@ import { AlertAnnotation, TimeRange, useLensDefinition } from './use_lens_defini interface Props { slo: SLOWithSummaryResponse; dataTimeRange: TimeRange; - threshold: number; + threshold?: number; alertTimeRange?: TimeRange; showErrorRateAsLine?: boolean; annotations?: AlertAnnotation[]; - selectedTabId?: SloTabId; onBrushed?: (timeBounds: TimeBounds) => void; } @@ -34,7 +32,6 @@ export function ErrorRateChart({ showErrorRateAsLine, annotations, onBrushed, - selectedTabId, }: Props) { const { lens: { EmbeddableComponent }, @@ -46,7 +43,6 @@ export function ErrorRateChart({ dataTimeRange, annotations, showErrorRateAsLine, - selectedTabId, }); const delayInSeconds = getDelayInSecondsFromSLO(slo); diff --git a/x-pack/plugins/observability_solution/slo/public/components/slo/error_rate_chart/use_lens_definition.ts b/x-pack/plugins/observability_solution/slo/public/components/slo/error_rate_chart/use_lens_definition.ts index d562706f78129..dd625d847ef7e 100644 --- a/x-pack/plugins/observability_solution/slo/public/components/slo/error_rate_chart/use_lens_definition.ts +++ b/x-pack/plugins/observability_solution/slo/public/components/slo/error_rate_chart/use_lens_definition.ts @@ -13,7 +13,6 @@ import { ALL_VALUE, SLOWithSummaryResponse } from '@kbn/slo-schema'; import moment from 'moment'; import { v4 as uuidv4 } from 'uuid'; import { SLO_DESTINATION_INDEX_PATTERN } from '../../../../common/constants'; -import { SloTabId } from '../../../pages/slo_details/components/slo_details'; import { getLensDefinitionInterval } from './utils'; export interface TimeRange { @@ -26,6 +25,15 @@ export interface AlertAnnotation { total: number; } +interface Props { + slo: SLOWithSummaryResponse; + threshold?: number; + dataTimeRange: TimeRange; + alertTimeRange?: TimeRange; + annotations?: AlertAnnotation[]; + showErrorRateAsLine?: boolean; +} + export function useLensDefinition({ slo, threshold, @@ -33,16 +41,7 @@ export function useLensDefinition({ alertTimeRange, annotations, showErrorRateAsLine, - selectedTabId, -}: { - slo: SLOWithSummaryResponse; - threshold: number; - dataTimeRange: TimeRange; - alertTimeRange?: TimeRange; - annotations?: AlertAnnotation[]; - showErrorRateAsLine?: boolean; - selectedTabId?: SloTabId; -}): TypedLensByValueInput['attributes'] { +}: Props): TypedLensByValueInput['attributes'] { const { euiTheme } = useEuiTheme(); const interval = getLensDefinitionInterval(dataTimeRange, slo); @@ -99,7 +98,7 @@ export function useLensDefinition({ }, ], }, - ...(selectedTabId !== 'history' + ...(threshold !== undefined ? [ { layerId: '34298f84-681e-4fa3-8107-d6facb32ed92', @@ -398,66 +397,69 @@ export function useLensDefinition({ incompleteColumns: {}, sampling: 1, }, - '34298f84-681e-4fa3-8107-d6facb32ed92': { - linkToLayers: [], - columns: { - '0a42b72b-cd5a-4d59-81ec-847d97c268e6X0': { - label: `Part of ${threshold}x`, - dataType: 'number', - operationType: 'math', - isBucketed: false, - scale: 'ratio', - params: { - // @ts-ignore - tinymathAst: { - type: 'function', - name: 'multiply', - args: [ - { - type: 'function', - name: 'subtract', - args: [1, slo.objective.target], - location: { - min: 1, - max: 9, + + ...(threshold !== undefined && { + '34298f84-681e-4fa3-8107-d6facb32ed92': { + linkToLayers: [], + columns: { + '0a42b72b-cd5a-4d59-81ec-847d97c268e6X0': { + label: `Part of ${threshold}x`, + dataType: 'number', + operationType: 'math', + isBucketed: false, + scale: 'ratio', + params: { + // @ts-ignore + tinymathAst: { + type: 'function', + name: 'multiply', + args: [ + { + type: 'function', + name: 'subtract', + args: [1, slo.objective.target], + location: { + min: 1, + max: 9, + }, + text: `1 - ${slo.objective.target}`, }, - text: `1 - ${slo.objective.target}`, + threshold, + ], + location: { + min: 0, + max: 17, }, - threshold, - ], - location: { - min: 0, - max: 17, + text: `(1 - ${slo.objective.target}) * ${threshold}`, }, - text: `(1 - ${slo.objective.target}) * ${threshold}`, }, + references: [], + customLabel: true, }, - references: [], - customLabel: true, - }, - '0a42b72b-cd5a-4d59-81ec-847d97c268e6': { - label: `${numeral(threshold).format('0.[00]')}x`, - dataType: 'number', - operationType: 'formula', - isBucketed: false, - scale: 'ratio', - params: { - // @ts-ignore - formula: `(1 - ${slo.objective.target}) * ${threshold}`, - isFormulaBroken: false, + '0a42b72b-cd5a-4d59-81ec-847d97c268e6': { + label: `${numeral(threshold).format('0.[00]')}x`, + dataType: 'number', + operationType: 'formula', + isBucketed: false, + scale: 'ratio', + params: { + // @ts-ignore + formula: `(1 - ${slo.objective.target}) * ${threshold}`, + isFormulaBroken: false, + }, + references: ['0a42b72b-cd5a-4d59-81ec-847d97c268e6X0'], + customLabel: true, }, - references: ['0a42b72b-cd5a-4d59-81ec-847d97c268e6X0'], - customLabel: true, }, + columnOrder: [ + '0a42b72b-cd5a-4d59-81ec-847d97c268e6', + '0a42b72b-cd5a-4d59-81ec-847d97c268e6X0', + ], + sampling: 1, + ignoreGlobalFilters: false, + incompleteColumns: {}, }, - columnOrder: [ - '0a42b72b-cd5a-4d59-81ec-847d97c268e6', - '0a42b72b-cd5a-4d59-81ec-847d97c268e6X0', - ], - sampling: 1, - ignoreGlobalFilters: false, - incompleteColumns: {}, - }, + }), }, }, indexpattern: { diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rate_header.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rate_header.tsx index 43a5afd4063e0..5738cec1dbd3c 100644 --- a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rate_header.tsx +++ b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rate_header.tsx @@ -8,20 +8,13 @@ import { EuiButtonGroup, EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import React from 'react'; -import { SloTabId } from '../slo_details'; import { BurnRateOption } from './burn_rates'; interface Props { burnRateOption: BurnRateOption; setBurnRateOption: (option: BurnRateOption) => void; burnRateOptions: BurnRateOption[]; - selectedTabId: SloTabId; } -export function BurnRateHeader({ - burnRateOption, - burnRateOptions, - setBurnRateOption, - selectedTabId, -}: Props) { +export function BurnRateHeader({ burnRateOption, burnRateOptions, setBurnRateOption }: Props) { const onBurnRateOptionChange = (optionId: string) => { const selected = burnRateOptions.find((opt) => opt.id === optionId) ?? burnRateOptions[0]; setBurnRateOption(selected); @@ -37,23 +30,21 @@ export function BurnRateHeader({ - {selectedTabId !== 'history' && ( - - ({ - id: opt.id, - label: opt.label, - 'aria-label': opt.ariaLabel, - }))} - idSelected={burnRateOption.id} - onChange={onBurnRateOptionChange} - buttonSize="compressed" - /> - - )} + + ({ + id: opt.id, + label: opt.label, + 'aria-label': opt.ariaLabel, + }))} + idSelected={burnRateOption.id} + onChange={onBurnRateOptionChange} + buttonSize="compressed" + /> + ); } diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rates.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rates.tsx index 863a827364814..e50b57dd62e1c 100644 --- a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rates.tsx +++ b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rates.tsx @@ -9,19 +9,17 @@ import { EuiFlexGroup, EuiFlexItem, EuiPanel } from '@elastic/eui'; import { SLOWithSummaryResponse } from '@kbn/slo-schema'; import moment from 'moment'; import React, { useEffect, useState } from 'react'; -import { TimeBounds } from '../../types'; +import { ErrorRateChart } from '../../../../components/slo/error_rate_chart'; import { TimeRange } from '../../../../components/slo/error_rate_chart/use_lens_definition'; -import { SloTabId } from '../slo_details'; -import { BurnRateHeader } from './burn_rate_header'; import { useFetchSloBurnRates } from '../../../../hooks/use_fetch_slo_burn_rates'; -import { ErrorRateChart } from '../../../../components/slo/error_rate_chart'; +import { TimeBounds } from '../../types'; import { BurnRate } from './burn_rate'; +import { BurnRateHeader } from './burn_rate_header'; interface Props { slo: SLOWithSummaryResponse; isAutoRefreshing?: boolean; burnRateOptions: BurnRateOption[]; - selectedTabId: SloTabId; range?: TimeRange; onBrushed?: (timeBounds: TimeBounds) => void; } @@ -39,14 +37,7 @@ function getWindowsFromOptions(opts: BurnRateOption[]): Array<{ name: string; du return opts.map((opt) => ({ name: opt.windowName, duration: `${opt.duration}h` })); } -export function BurnRates({ - slo, - isAutoRefreshing, - burnRateOptions, - selectedTabId, - range, - onBrushed, -}: Props) { +export function BurnRates({ slo, isAutoRefreshing, burnRateOptions, range, onBrushed }: Props) { const [burnRateOption, setBurnRateOption] = useState(burnRateOptions[0]); const { isLoading, data } = useFetchSloBurnRates({ slo, @@ -77,21 +68,18 @@ export function BurnRates({ burnRateOption={burnRateOption} burnRateOptions={burnRateOptions} setBurnRateOption={setBurnRateOption} - selectedTabId={selectedTabId} /> - {selectedTabId !== 'history' && ( - - - - )} + + + + diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/history/slo_details_history.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/history/slo_details_history.tsx index 1f1e1174316b6..41317a9c28850 100644 --- a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/history/slo_details_history.tsx +++ b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/history/slo_details_history.tsx @@ -7,17 +7,19 @@ import { EuiFlexGroup, EuiFlexItem, + EuiPanel, EuiSuperDatePicker, + EuiTitle, OnRefreshProps, OnTimeChangeProps, } from '@elastic/eui'; import DateMath from '@kbn/datemath'; +import { i18n } from '@kbn/i18n'; import { SLOWithSummaryResponse } from '@kbn/slo-schema'; import React, { useMemo, useState } from 'react'; +import { ErrorRateChart } from '../../../../components/slo/error_rate_chart'; import { useKibana } from '../../../../utils/kibana_react'; -import { useBurnRateOptions } from '../../hooks/use_burn_rate_options'; import { TimeBounds } from '../../types'; -import { BurnRates } from '../burn_rate/burn_rates'; import { EventsChartPanel } from '../events_chart_panel'; import { HistoricalDataCharts } from '../historical_data_charts'; import { SloTabId } from '../slo_details'; @@ -30,7 +32,6 @@ export interface Props { export function SLODetailsHistory({ slo, isAutoRefreshing, selectedTabId }: Props) { const { uiSettings } = useKibana().services; - const { burnRateOptions } = useBurnRateOptions(slo); const [start, setStart] = useState(`now-${slo.timeWindow.duration}`); const [end, setEnd] = useState('now'); @@ -82,14 +83,20 @@ export function SLODetailsHistory({ slo, isAutoRefreshing, selectedTabId }: Prop - + + + + +

+ {i18n.translate('xpack.slo.sloDetailsHistory.h2.errorRatePanelTitle', { + defaultMessage: 'Error rate', + })} +

+ + + + + Date: Tue, 22 Oct 2024 12:39:42 -0400 Subject: [PATCH 07/17] Inline burn rate header --- .../components/burn_rate/burn_rate_header.tsx | 50 ------------------- .../components/burn_rate/burn_rates.tsx | 40 ++++++++++++--- 2 files changed, 33 insertions(+), 57 deletions(-) delete mode 100644 x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rate_header.tsx diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rate_header.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rate_header.tsx deleted file mode 100644 index 5738cec1dbd3c..0000000000000 --- a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rate_header.tsx +++ /dev/null @@ -1,50 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. - */ - -import { EuiButtonGroup, EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui'; -import { i18n } from '@kbn/i18n'; -import React from 'react'; -import { BurnRateOption } from './burn_rates'; -interface Props { - burnRateOption: BurnRateOption; - setBurnRateOption: (option: BurnRateOption) => void; - burnRateOptions: BurnRateOption[]; -} -export function BurnRateHeader({ burnRateOption, burnRateOptions, setBurnRateOption }: Props) { - const onBurnRateOptionChange = (optionId: string) => { - const selected = burnRateOptions.find((opt) => opt.id === optionId) ?? burnRateOptions[0]; - setBurnRateOption(selected); - }; - return ( - - - -

- {i18n.translate('xpack.slo.burnRate.title', { - defaultMessage: 'Burn rate', - })} -

- - - - ({ - id: opt.id, - label: opt.label, - 'aria-label': opt.ariaLabel, - }))} - idSelected={burnRateOption.id} - onChange={onBurnRateOptionChange} - buttonSize="compressed" - /> - - - ); -} diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rates.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rates.tsx index e50b57dd62e1c..b761dbbd33c83 100644 --- a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rates.tsx +++ b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rates.tsx @@ -5,7 +5,8 @@ * 2.0. */ -import { EuiFlexGroup, EuiFlexItem, EuiPanel } from '@elastic/eui'; +import { EuiButtonGroup, EuiFlexGroup, EuiFlexItem, EuiPanel, EuiTitle } from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; import { SLOWithSummaryResponse } from '@kbn/slo-schema'; import moment from 'moment'; import React, { useEffect, useState } from 'react'; @@ -14,7 +15,6 @@ import { TimeRange } from '../../../../components/slo/error_rate_chart/use_lens_ import { useFetchSloBurnRates } from '../../../../hooks/use_fetch_slo_burn_rates'; import { TimeBounds } from '../../types'; import { BurnRate } from './burn_rate'; -import { BurnRateHeader } from './burn_rate_header'; interface Props { slo: SLOWithSummaryResponse; @@ -61,14 +61,40 @@ export function BurnRates({ slo, isAutoRefreshing, burnRateOptions, range, onBru (curr) => curr.name === burnRateOption.windowName )?.burnRate; + const onBurnRateOptionChange = (optionId: string) => { + const selected = burnRateOptions.find((opt) => opt.id === optionId) ?? burnRateOptions[0]; + setBurnRateOption(selected); + }; + return ( - + + + +

+ {i18n.translate('xpack.slo.burnRates.h2.burnRatePanelTitle', { + defaultMessage: 'Burn rate', + })} +

+ + + + ({ + id: opt.id, + label: opt.label, + 'aria-label': opt.ariaLabel, + }))} + idSelected={burnRateOption.id} + onChange={onBurnRateOptionChange} + buttonSize="compressed" + /> + + From 83fdb804f4657b8a5b95bfa7f7662888cba5b4d8 Mon Sep 17 00:00:00 2001 From: Kevin Delemme Date: Tue, 22 Oct 2024 12:52:19 -0400 Subject: [PATCH 08/17] Remove div --- .../public/pages/slo_details/components/slo_details.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/slo_details.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/slo_details.tsx index ecd5533248cca..ddd3cc86e1aaa 100644 --- a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/slo_details.tsx +++ b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/slo_details.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; +import { EuiFlexGroup } from '@elastic/eui'; import { SLOWithSummaryResponse } from '@kbn/slo-schema'; import moment from 'moment'; import React, { useEffect, useState } from 'react'; @@ -67,9 +67,8 @@ export function SloDetails({ slo, isAutoRefreshing, selectedTabId }: Props) { - - - + + Date: Tue, 22 Oct 2024 13:00:49 -0400 Subject: [PATCH 09/17] Fetch burn rate rule options from component --- .../pages/slo_details/components/burn_rate/burn_rates.tsx | 7 ++++--- .../public/pages/slo_details/components/slo_details.tsx | 8 +------- 2 files changed, 5 insertions(+), 10 deletions(-) diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rates.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rates.tsx index b761dbbd33c83..ae5a23edd64fb 100644 --- a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rates.tsx +++ b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rates.tsx @@ -15,11 +15,11 @@ import { TimeRange } from '../../../../components/slo/error_rate_chart/use_lens_ import { useFetchSloBurnRates } from '../../../../hooks/use_fetch_slo_burn_rates'; import { TimeBounds } from '../../types'; import { BurnRate } from './burn_rate'; +import { useBurnRateOptions } from '../../hooks/use_burn_rate_options'; interface Props { slo: SLOWithSummaryResponse; isAutoRefreshing?: boolean; - burnRateOptions: BurnRateOption[]; range?: TimeRange; onBrushed?: (timeBounds: TimeBounds) => void; } @@ -37,7 +37,8 @@ function getWindowsFromOptions(opts: BurnRateOption[]): Array<{ name: string; du return opts.map((opt) => ({ name: opt.windowName, duration: `${opt.duration}h` })); } -export function BurnRates({ slo, isAutoRefreshing, burnRateOptions, range, onBrushed }: Props) { +export function BurnRates({ slo, isAutoRefreshing, range, onBrushed }: Props) { + const { burnRateOptions } = useBurnRateOptions(slo); const [burnRateOption, setBurnRateOption] = useState(burnRateOptions[0]); const { isLoading, data } = useFetchSloBurnRates({ slo, @@ -73,7 +74,7 @@ export function BurnRates({ slo, isAutoRefreshing, burnRateOptions, range, onBru

- {i18n.translate('xpack.slo.burnRates.h2.burnRatePanelTitle', { + {i18n.translate('xpack.slo.burnRates.burnRatePanelTitle', { defaultMessage: 'Burn rate', })}

diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/slo_details.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/slo_details.tsx index ddd3cc86e1aaa..6078fee023f92 100644 --- a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/slo_details.tsx +++ b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/slo_details.tsx @@ -9,7 +9,6 @@ import { EuiFlexGroup } from '@elastic/eui'; import { SLOWithSummaryResponse } from '@kbn/slo-schema'; import moment from 'moment'; import React, { useEffect, useState } from 'react'; -import { useBurnRateOptions } from '../hooks/use_burn_rate_options'; import { BurnRates } from './burn_rate/burn_rates'; import { EventsChartPanel } from './events_chart_panel'; import { HistoricalDataCharts } from './historical_data_charts'; @@ -32,7 +31,6 @@ export interface Props { selectedTabId: SloTabId; } export function SloDetails({ slo, isAutoRefreshing, selectedTabId }: Props) { - const { burnRateOptions } = useBurnRateOptions(slo); const [range, setRange] = useState<{ from: Date; to: Date }>({ from: moment().subtract(1, 'day').toDate(), to: new Date(), @@ -70,11 +68,7 @@ export function SloDetails({ slo, isAutoRefreshing, selectedTabId }: Props) { - + Date: Tue, 22 Oct 2024 13:22:16 -0400 Subject: [PATCH 10/17] Cleanup burn rate hook --- .../components/burn_rate/burn_rates.tsx | 19 ++------ .../hooks/use_burn_rate_options.ts | 46 +++++++++++-------- 2 files changed, 33 insertions(+), 32 deletions(-) diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rates.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rates.tsx index ae5a23edd64fb..6fc44d049aa3f 100644 --- a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rates.tsx +++ b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rates.tsx @@ -11,17 +11,13 @@ import { SLOWithSummaryResponse } from '@kbn/slo-schema'; import moment from 'moment'; import React, { useEffect, useState } from 'react'; import { ErrorRateChart } from '../../../../components/slo/error_rate_chart'; -import { TimeRange } from '../../../../components/slo/error_rate_chart/use_lens_definition'; import { useFetchSloBurnRates } from '../../../../hooks/use_fetch_slo_burn_rates'; -import { TimeBounds } from '../../types'; -import { BurnRate } from './burn_rate'; import { useBurnRateOptions } from '../../hooks/use_burn_rate_options'; +import { BurnRate } from './burn_rate'; interface Props { slo: SLOWithSummaryResponse; isAutoRefreshing?: boolean; - range?: TimeRange; - onBrushed?: (timeBounds: TimeBounds) => void; } export interface BurnRateOption { @@ -37,7 +33,7 @@ function getWindowsFromOptions(opts: BurnRateOption[]): Array<{ name: string; du return opts.map((opt) => ({ name: opt.windowName, duration: `${opt.duration}h` })); } -export function BurnRates({ slo, isAutoRefreshing, range, onBrushed }: Props) { +export function BurnRates({ slo, isAutoRefreshing }: Props) { const { burnRateOptions } = useBurnRateOptions(slo); const [burnRateOption, setBurnRateOption] = useState(burnRateOptions[0]); const { isLoading, data } = useFetchSloBurnRates({ @@ -47,12 +43,12 @@ export function BurnRates({ slo, isAutoRefreshing, range, onBrushed }: Props) { }); useEffect(() => { - if (burnRateOptions.length) { + if (burnRateOptions.length > 0) { setBurnRateOption(burnRateOptions[0]); } }, [burnRateOptions]); - const dataTimeRange = range ?? { + const dataTimeRange = { from: moment().subtract(burnRateOption.duration, 'hour').toDate(), to: new Date(), }; @@ -102,12 +98,7 @@ export function BurnRates({ slo, isAutoRefreshing, range, onBrushed }: Props) { - + diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/hooks/use_burn_rate_options.ts b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/hooks/use_burn_rate_options.ts index 35e8952507086..1dac02695bd04 100644 --- a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/hooks/use_burn_rate_options.ts +++ b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/hooks/use_burn_rate_options.ts @@ -8,8 +8,9 @@ import { htmlIdGenerator } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { SLOWithSummaryResponse } from '@kbn/slo-schema'; -import { BurnRateOption } from '../components/burn_rate/burn_rates'; +import { useEffect, useState } from 'react'; import { useFetchRulesForSlo } from '../../../hooks/use_fetch_rules_for_slo'; +import { BurnRateOption } from '../components/burn_rate/burn_rates'; export const DEFAULT_BURN_RATE_OPTIONS: BurnRateOption[] = [ { @@ -71,22 +72,31 @@ export const DEFAULT_BURN_RATE_OPTIONS: BurnRateOption[] = [ ]; export const useBurnRateOptions = (slo: SLOWithSummaryResponse) => { - const { data: rules } = useFetchRulesForSlo({ sloIds: [slo.id] }); - const burnRateOptions = - rules?.[slo.id]?.[0]?.params?.windows?.map((window) => ({ - id: htmlIdGenerator()(), - label: i18n.translate('xpack.slo.burnRates.fromRange.label', { - defaultMessage: '{duration, plural, one {# hour} other {# hours}}', - values: { duration: window.longWindow.value }, - }), - ariaLabel: i18n.translate('xpack.slo.burnRates.fromRange.label', { - defaultMessage: '{duration, plural, one {# hour} other {# hours}}', - values: { duration: window.longWindow.value }, - }), - windowName: window.actionGroup, - threshold: window.burnRateThreshold, - duration: window.longWindow.value, - })) ?? DEFAULT_BURN_RATE_OPTIONS; + const sloId = slo.id; + const [burnRateOptions, setBurnRateOptions] = + useState(DEFAULT_BURN_RATE_OPTIONS); + const { data: rules, isLoading } = useFetchRulesForSlo({ sloIds: [sloId] }); + + useEffect(() => { + if (!isLoading && rules && rules[sloId]) { + setBurnRateOptions( + rules[sloId][0].params?.windows?.map((window) => ({ + id: htmlIdGenerator()(), + label: i18n.translate('xpack.slo.burnRates.fromRange.label', { + defaultMessage: '{duration, plural, one {# hour} other {# hours}}', + values: { duration: window.longWindow.value }, + }), + ariaLabel: i18n.translate('xpack.slo.burnRates.fromRange.label', { + defaultMessage: '{duration, plural, one {# hour} other {# hours}}', + values: { duration: window.longWindow.value }, + }), + windowName: window.actionGroup, + threshold: window.burnRateThreshold, + duration: window.longWindow.value, + })) ?? DEFAULT_BURN_RATE_OPTIONS + ); + } + }, [rules, sloId, isLoading]); - return { burnRateOptions }; + return { isLoading, burnRateOptions }; }; From 33762b9cd933191b76d058fe4c48b7b704987719 Mon Sep 17 00:00:00 2001 From: Kevin Delemme Date: Tue, 22 Oct 2024 15:05:15 -0400 Subject: [PATCH 11/17] Refactor burn rate --- .../components/burn_rate/burn_rate.test.tsx | 10 +- .../components/burn_rate/burn_rate.tsx | 112 ------------- .../components/burn_rate/burn_rate_status.tsx | 147 ++++++++++++++++++ .../components/burn_rate/burn_rates.tsx | 102 +++++++----- .../hooks/use_burn_rate_options.ts | 102 ------------ .../hooks/use_fetch_burn_rate_windows.ts | 67 ++++++++ 6 files changed, 282 insertions(+), 258 deletions(-) delete mode 100644 x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rate.tsx create mode 100644 x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rate_status.tsx delete mode 100644 x-pack/plugins/observability_solution/slo/public/pages/slo_details/hooks/use_burn_rate_options.ts create mode 100644 x-pack/plugins/observability_solution/slo/public/pages/slo_details/hooks/use_fetch_burn_rate_windows.ts diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rate.test.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rate.test.tsx index a606b1baee06d..688dbd3145770 100644 --- a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rate.test.tsx +++ b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rate.test.tsx @@ -10,26 +10,28 @@ import React from 'react'; import { buildSlo } from '../../../../data/slo/slo'; import { render } from '../../../../utils/test_helper'; -import { BurnRate } from './burn_rate'; +import { BurnRateStatus } from './burn_rate_status'; describe('BurnRate', () => { it("displays '--' when burn rate is 'undefined'", async () => { const slo = buildSlo(); - render(); + render( + + ); expect(screen.queryByTestId('sloDetailsBurnRateStat')).toHaveTextContent('--'); }); it("displays the burn rate value when not 'undefined'", async () => { const slo = buildSlo(); - render(); + render(); expect(screen.queryByTestId('sloDetailsBurnRateStat')).toHaveTextContent('3.4x'); }); it("displays the burn rate value when '0'", async () => { const slo = buildSlo(); - render(); + render(); expect(screen.queryByTestId('sloDetailsBurnRateStat')).toHaveTextContent('0x'); }); diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rate.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rate.tsx deleted file mode 100644 index eb11e98739c22..0000000000000 --- a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rate.tsx +++ /dev/null @@ -1,112 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. - */ - -import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiStat, EuiText, EuiTextColor } from '@elastic/eui'; -import numeral from '@elastic/numeral'; -import { i18n } from '@kbn/i18n'; -import { SLODefinitionResponse } from '@kbn/slo-schema'; -import moment from 'moment'; -import React from 'react'; -import { toDuration, toMinutes } from '../../../../utils/slo/duration'; - -export interface BurnRateParams { - slo: SLODefinitionResponse; - threshold: number; - burnRate?: number; - isLoading?: boolean; -} - -type Status = 'NO_DATA' | 'BREACHED' | 'OK'; - -function getTitleFromStatus(status: Status): string { - if (status === 'NO_DATA') - return i18n.translate('xpack.slo.burnRate.noDataStatusTitle', { - defaultMessage: 'No value', - }); - if (status === 'BREACHED') - return i18n.translate('xpack.slo.burnRate.breachedStatustTitle', { - defaultMessage: 'Critical value breached', - }); - - return i18n.translate('xpack.slo.burnRate.okStatusTitle', { - defaultMessage: 'Acceptable value', - }); -} - -function getSubtitleFromStatus( - status: Status, - burnRate: number | undefined = 1, - slo: SLODefinitionResponse -): string { - if (status === 'NO_DATA') - return i18n.translate('xpack.slo.burnRate.noDataStatusSubtitle', { - defaultMessage: 'Waiting for more data.', - }); - if (status === 'BREACHED') - return i18n.translate('xpack.slo.burnRate.breachedStatustSubtitle', { - defaultMessage: 'At current rate, the error budget will be exhausted in {hour} hours.', - values: { - hour: numeral( - moment - .duration(toMinutes(toDuration(slo.timeWindow.duration)) / burnRate, 'minutes') - .asHours() - ).format('0'), - }, - }); - - return i18n.translate('xpack.slo.burnRate.okStatusSubtitle', { - defaultMessage: 'There is no risk of error budget exhaustion.', - }); -} - -export function BurnRate({ threshold, burnRate, slo, isLoading }: BurnRateParams) { - const status: Status = - burnRate === undefined ? 'NO_DATA' : burnRate > threshold ? 'BREACHED' : 'OK'; - const color = status === 'NO_DATA' ? 'subdued' : status === 'BREACHED' ? 'danger' : 'success'; - - return ( - - - - - -
{getTitleFromStatus(status)}
- - - - - {getSubtitleFromStatus(status, burnRate, slo)} - - - - - - - - - {i18n.translate('xpack.slo.burnRate.threshold', { - defaultMessage: 'Threshold is {threshold}x', - values: { threshold: numeral(threshold).format('0.[00]') }, - })} - - - } - /> - - - - - ); -} diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rate_status.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rate_status.tsx new file mode 100644 index 0000000000000..e2fcfcd9c83cb --- /dev/null +++ b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rate_status.tsx @@ -0,0 +1,147 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { + EuiFlexGroup, + EuiFlexItem, + EuiLoadingSpinner, + EuiPanel, + EuiStat, + EuiText, + EuiTextColor, +} from '@elastic/eui'; +import numeral from '@elastic/numeral'; +import { i18n } from '@kbn/i18n'; +import React from 'react'; +import { BurnRateWindow } from '../../hooks/use_fetch_burn_rate_windows'; + +export interface BurnRateParams { + isLoading: boolean; + selectedWindow: BurnRateWindow; + longWindowBurnRate: number; + shortWindowBurnRate: number; +} + +type Status = 'BREACHED' | 'RECOVERING' | 'INCREASING' | 'ACCEPTABLE'; + +export function BurnRateStatus({ + selectedWindow, + longWindowBurnRate, + shortWindowBurnRate, + isLoading, +}: BurnRateParams) { + const threshold = selectedWindow.threshold; + const status = getStatus(threshold, longWindowBurnRate, shortWindowBurnRate); + const color = getColor(status); + + if (isLoading) { + return ; + } + + return ( + + + + + +
{getTitle(status)}
+ + + + + {getSubtitle(shortWindowBurnRate, longWindowBurnRate, selectedWindow)} + + + + + + + + + {i18n.translate('xpack.slo.burnRate.thresholdLabel', { + defaultMessage: 'Threshold', + })} + + + } + /> + + + + + ); +} + +function getStatus( + threshold: number, + longWindowBurnRate: number, + shortWindowBurnRate: number +): Status { + const isLongWindowBurnRateAboveThreshold = longWindowBurnRate > threshold; + const isShortWindowBurnRateAboveThreshold = shortWindowBurnRate > threshold; + const areBothBurnRatesAboveThreshold = + isLongWindowBurnRateAboveThreshold && isShortWindowBurnRateAboveThreshold; + + return areBothBurnRatesAboveThreshold + ? 'BREACHED' + : isLongWindowBurnRateAboveThreshold && !isShortWindowBurnRateAboveThreshold + ? 'RECOVERING' + : !isLongWindowBurnRateAboveThreshold && isShortWindowBurnRateAboveThreshold + ? 'INCREASING' + : 'ACCEPTABLE'; +} + +function getColor(status: Status) { + return status === 'BREACHED' ? 'danger' : status === 'INCREASING' ? 'warning' : 'success'; +} + +function getTitle(status: Status): string { + switch (status) { + case 'BREACHED': + return i18n.translate('xpack.slo.burnRate.breachedStatustTitle', { + defaultMessage: 'Breached', + }); + case 'INCREASING': + return i18n.translate('xpack.slo.burnRate.increasingStatustTitle', { + defaultMessage: 'Increasing', + }); + case 'RECOVERING': + return i18n.translate('xpack.slo.burnRate.recoveringStatustTitle', { + defaultMessage: 'Recovering', + }); + case 'ACCEPTABLE': + default: + return i18n.translate('xpack.slo.burnRate.okStatusTitle', { + defaultMessage: 'Acceptable value', + }); + } +} + +function getSubtitle( + shortWindowBurnRate: number, + longWindowBurnRate: number, + selectedWindow: BurnRateWindow +): string { + return i18n.translate('xpack.slo.burnRate.subtitle', { + defaultMessage: + 'The {longWindowDuration} burn rate is {longWindowBurnRate}x and the {shortWindowDuration} burn rate is {shortWindowBurnRate}x.', + values: { + longWindowDuration: `${selectedWindow.longWindow.value}${selectedWindow.longWindow.unit}`, + longWindowBurnRate: numeral(longWindowBurnRate).format('0.[00]'), + shortWindowDuration: `${selectedWindow.shortWindow.value}${selectedWindow.shortWindow.unit}`, + shortWindowBurnRate: numeral(shortWindowBurnRate).format('0.[00]'), + }, + }); +} diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rates.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rates.tsx index 6fc44d049aa3f..545c462dc53c9 100644 --- a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rates.tsx +++ b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rates.tsx @@ -12,56 +12,41 @@ import moment from 'moment'; import React, { useEffect, useState } from 'react'; import { ErrorRateChart } from '../../../../components/slo/error_rate_chart'; import { useFetchSloBurnRates } from '../../../../hooks/use_fetch_slo_burn_rates'; -import { useBurnRateOptions } from '../../hooks/use_burn_rate_options'; -import { BurnRate } from './burn_rate'; +import { BurnRateWindow, useFetchBurnRateWindows } from '../../hooks/use_fetch_burn_rate_windows'; +import { BurnRateStatus } from './burn_rate_status'; interface Props { slo: SLOWithSummaryResponse; isAutoRefreshing?: boolean; } -export interface BurnRateOption { - id: string; - label: string; - windowName: string; - threshold: number; - duration: number; - ariaLabel: string; -} - -function getWindowsFromOptions(opts: BurnRateOption[]): Array<{ name: string; duration: string }> { - return opts.map((opt) => ({ name: opt.windowName, duration: `${opt.duration}h` })); -} - export function BurnRates({ slo, isAutoRefreshing }: Props) { - const { burnRateOptions } = useBurnRateOptions(slo); - const [burnRateOption, setBurnRateOption] = useState(burnRateOptions[0]); + const burnRateWindows = useFetchBurnRateWindows(slo); + const [selectedWindow, setSelectedwindow] = useState(burnRateWindows[0]); const { isLoading, data } = useFetchSloBurnRates({ slo, shouldRefetch: isAutoRefreshing, - windows: getWindowsFromOptions(burnRateOptions), + windows: toPayload(burnRateWindows), }); useEffect(() => { - if (burnRateOptions.length > 0) { - setBurnRateOption(burnRateOptions[0]); + if (burnRateWindows.length > 0) { + setSelectedwindow(burnRateWindows[0]); } - }, [burnRateOptions]); + }, [burnRateWindows]); - const dataTimeRange = { - from: moment().subtract(burnRateOption.duration, 'hour').toDate(), - to: new Date(), + const onBurnRateOptionChange = (windowName: string) => { + const selected = burnRateWindows.find((opt) => opt.name === windowName) ?? burnRateWindows[0]; + setSelectedwindow(selected); }; - const threshold = burnRateOption.threshold; - const burnRate = data?.burnRates.find( - (curr) => curr.name === burnRateOption.windowName - )?.burnRate; - - const onBurnRateOptionChange = (optionId: string) => { - const selected = burnRateOptions.find((opt) => opt.id === optionId) ?? burnRateOptions[0]; - setBurnRateOption(selected); - }; + const threshold = selectedWindow.threshold; + const longWindowBurnRate = + data?.burnRates.find((curr) => curr.name === longWindowName(selectedWindow.name))?.burnRate ?? + 0; + const shortWindowbBurnRate = + data?.burnRates.find((curr) => curr.name === shortWindowName(selectedWindow.name))?.burnRate ?? + 0; return ( @@ -81,12 +66,12 @@ export function BurnRates({ slo, isAutoRefreshing }: Props) { legend={i18n.translate('xpack.slo.burnRate.timeRangeBtnLegend', { defaultMessage: 'Select the time range', })} - options={burnRateOptions.map((opt) => ({ - id: opt.id, - label: opt.label, - 'aria-label': opt.ariaLabel, + options={burnRateWindows.map((burnRateWindow) => ({ + id: burnRateWindow.name, + label: burnRateWindowLabel(burnRateWindow), + 'aria-label': burnRateWindowLabel(burnRateWindow), }))} - idSelected={burnRateOption.id} + idSelected={selectedWindow.name} onChange={onBurnRateOptionChange} buttonSize="compressed" /> @@ -94,14 +79,51 @@ export function BurnRates({ slo, isAutoRefreshing }: Props) { - + - + ); } + +const burnRateWindowLabel = (option: BurnRateWindow) => + i18n.translate('xpack.slo.burnRates.optionLabel', { + defaultMessage: '{duration, plural, one {# hour} other {# hours}}', + values: { duration: option.longWindow.value }, + }); + +const longWindowName = (window: string) => `${window}_LONG`; +const shortWindowName = (window: string) => `${window}_SHORT`; +const toPayload = ( + burnRateWindows: BurnRateWindow[] +): Array<{ name: string; duration: string }> => { + return burnRateWindows.flatMap((window) => [ + { + name: longWindowName(window.name), + duration: `${window.longWindow.value}${window.longWindow.unit}`, + }, + { + name: shortWindowName(window.name), + duration: `${window.shortWindow.value}${window.shortWindow.unit}`, + }, + ]); +}; diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/hooks/use_burn_rate_options.ts b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/hooks/use_burn_rate_options.ts deleted file mode 100644 index 1dac02695bd04..0000000000000 --- a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/hooks/use_burn_rate_options.ts +++ /dev/null @@ -1,102 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. - */ - -import { htmlIdGenerator } from '@elastic/eui'; -import { i18n } from '@kbn/i18n'; -import { SLOWithSummaryResponse } from '@kbn/slo-schema'; -import { useEffect, useState } from 'react'; -import { useFetchRulesForSlo } from '../../../hooks/use_fetch_rules_for_slo'; -import { BurnRateOption } from '../components/burn_rate/burn_rates'; - -export const DEFAULT_BURN_RATE_OPTIONS: BurnRateOption[] = [ - { - id: htmlIdGenerator()(), - label: i18n.translate('xpack.slo.burnRates.fromRange.label', { - defaultMessage: '{duration} hour', - values: { duration: 1 }, - }), - ariaLabel: i18n.translate('xpack.slo.burnRates.fromRange.label', { - defaultMessage: '{duration} hour', - values: { duration: 1 }, - }), - windowName: 'CRITICAL', - threshold: 14.4, - duration: 1, - }, - { - id: htmlIdGenerator()(), - label: i18n.translate('xpack.slo.burnRates.fromRange.label', { - defaultMessage: '{duration} hours', - values: { duration: 6 }, - }), - ariaLabel: i18n.translate('xpack.slo.burnRates.fromRange.label', { - defaultMessage: '{duration} hours', - values: { duration: 6 }, - }), - windowName: 'HIGH', - threshold: 6, - duration: 6, - }, - { - id: htmlIdGenerator()(), - label: i18n.translate('xpack.slo.burnRates.fromRange.label', { - defaultMessage: '{duration} hours', - values: { duration: 24 }, - }), - ariaLabel: i18n.translate('xpack.slo.burnRates.fromRange.label', { - defaultMessage: '{duration} hours', - values: { duration: 24 }, - }), - windowName: 'MEDIUM', - threshold: 3, - duration: 24, - }, - { - id: htmlIdGenerator()(), - ariaLabel: i18n.translate('xpack.slo.burnRates.fromRange.label', { - defaultMessage: '{duration} hours', - values: { duration: 72 }, - }), - label: i18n.translate('xpack.slo.burnRates.fromRange.label', { - defaultMessage: '{duration} hours', - values: { duration: 72 }, - }), - windowName: 'LOW', - threshold: 1, - duration: 72, - }, -]; - -export const useBurnRateOptions = (slo: SLOWithSummaryResponse) => { - const sloId = slo.id; - const [burnRateOptions, setBurnRateOptions] = - useState(DEFAULT_BURN_RATE_OPTIONS); - const { data: rules, isLoading } = useFetchRulesForSlo({ sloIds: [sloId] }); - - useEffect(() => { - if (!isLoading && rules && rules[sloId]) { - setBurnRateOptions( - rules[sloId][0].params?.windows?.map((window) => ({ - id: htmlIdGenerator()(), - label: i18n.translate('xpack.slo.burnRates.fromRange.label', { - defaultMessage: '{duration, plural, one {# hour} other {# hours}}', - values: { duration: window.longWindow.value }, - }), - ariaLabel: i18n.translate('xpack.slo.burnRates.fromRange.label', { - defaultMessage: '{duration, plural, one {# hour} other {# hours}}', - values: { duration: window.longWindow.value }, - }), - windowName: window.actionGroup, - threshold: window.burnRateThreshold, - duration: window.longWindow.value, - })) ?? DEFAULT_BURN_RATE_OPTIONS - ); - } - }, [rules, sloId, isLoading]); - - return { isLoading, burnRateOptions }; -}; diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/hooks/use_fetch_burn_rate_windows.ts b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/hooks/use_fetch_burn_rate_windows.ts new file mode 100644 index 0000000000000..27ced2b5eea4d --- /dev/null +++ b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/hooks/use_fetch_burn_rate_windows.ts @@ -0,0 +1,67 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { SLOWithSummaryResponse } from '@kbn/slo-schema'; +import { useEffect, useState } from 'react'; +import { useFetchRulesForSlo } from '../../../hooks/use_fetch_rules_for_slo'; +import { Duration } from '../../../typings'; + +export interface BurnRateWindow { + name: string; + threshold: number; + longWindow: Duration; + shortWindow: Duration; +} + +export const DEFAULT_BURN_RATE_WINDOWS: BurnRateWindow[] = [ + { + name: 'CRITICAL', + threshold: 14.4, + longWindow: { value: 1, unit: 'h' }, + shortWindow: { value: 5, unit: 'm' }, + }, + { + name: 'HIGH', + threshold: 6, + longWindow: { value: 6, unit: 'h' }, + shortWindow: { value: 30, unit: 'm' }, + }, + { + name: 'MEDIUM', + threshold: 3, + longWindow: { value: 24, unit: 'h' }, + shortWindow: { value: 2, unit: 'h' }, + }, + { + name: 'LOW', + threshold: 1, + longWindow: { value: 72, unit: 'h' }, + shortWindow: { value: 6, unit: 'h' }, + }, +]; + +export const useFetchBurnRateWindows = (slo: SLOWithSummaryResponse) => { + const sloId = slo.id; + const [burnRateWindows, setBurnRateWindows] = + useState(DEFAULT_BURN_RATE_WINDOWS); + const { data: rules, isLoading } = useFetchRulesForSlo({ sloIds: [sloId] }); + + useEffect(() => { + if (!isLoading && rules && rules[sloId]) { + setBurnRateWindows( + rules[sloId][0].params?.windows?.map((window) => ({ + name: window.actionGroup, + threshold: window.burnRateThreshold, + longWindow: window.longWindow, + shortWindow: window.shortWindow, + })) ?? DEFAULT_BURN_RATE_WINDOWS + ); + } + }, [rules, sloId, isLoading]); + + return burnRateWindows; +}; From 10ea0e39c826ac786a47a78d1b3e89115b8be229 Mon Sep 17 00:00:00 2001 From: Kevin Delemme Date: Tue, 22 Oct 2024 16:02:22 -0400 Subject: [PATCH 12/17] update test --- .../components/burn_rate/burn_rate.test.tsx | 83 +++++++++++++++---- .../components/burn_rate/burn_rate_status.tsx | 12 +-- 2 files changed, 74 insertions(+), 21 deletions(-) diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rate.test.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rate.test.tsx index 688dbd3145770..a8455dcbc42fc 100644 --- a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rate.test.tsx +++ b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rate.test.tsx @@ -7,32 +7,85 @@ import { screen } from '@testing-library/react'; import React from 'react'; - -import { buildSlo } from '../../../../data/slo/slo'; import { render } from '../../../../utils/test_helper'; +import { DEFAULT_BURN_RATE_WINDOWS } from '../../hooks/use_fetch_burn_rate_windows'; import { BurnRateStatus } from './burn_rate_status'; -describe('BurnRate', () => { - it("displays '--' when burn rate is 'undefined'", async () => { - const slo = buildSlo(); +describe('BurnRateStatus', () => { + it('displays loading spinner when burn rates are being fetched', async () => { render( - + ); - expect(screen.queryByTestId('sloDetailsBurnRateStat')).toHaveTextContent('--'); + expect(screen.queryByTestId('loadingSpinner')).toBeDefined(); }); - it("displays the burn rate value when not 'undefined'", async () => { - const slo = buildSlo(); - render(); + it("displays the 'breached' status", async () => { + render( + + ); - expect(screen.queryByTestId('sloDetailsBurnRateStat')).toHaveTextContent('3.4x'); + expect(screen.queryByTestId('title')).toHaveTextContent('Breached'); + expect(screen.queryByTestId('description')).toHaveTextContent( + 'The 1h burn rate is 22.32x and the 5m burn rate is 18.45x.' + ); }); - it("displays the burn rate value when '0'", async () => { - const slo = buildSlo(); - render(); + it("displays the 'recovering' status", async () => { + render( + + ); + + expect(screen.queryByTestId('title')).toHaveTextContent('Recovering'); + expect(screen.queryByTestId('description')).toHaveTextContent( + 'The 1h burn rate is 22.32x and the 5m burn rate is 1.2x.' + ); + }); - expect(screen.queryByTestId('sloDetailsBurnRateStat')).toHaveTextContent('0x'); + it("displays the 'Increasing' status", async () => { + render( + + ); + + expect(screen.queryByTestId('title')).toHaveTextContent('Increasing'); + expect(screen.queryByTestId('description')).toHaveTextContent( + 'The 1h burn rate is 1.32x and the 5m burn rate is 18.45x.' + ); + }); + + it("displays the 'Acceptable' status", async () => { + render( + + ); + + expect(screen.queryByTestId('title')).toHaveTextContent('Acceptable value'); + expect(screen.queryByTestId('description')).toHaveTextContent( + 'The 1h burn rate is 2.32x and the 5m burn rate is 1.45x.' + ); }); }); diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rate_status.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rate_status.tsx index e2fcfcd9c83cb..60509c76418ee 100644 --- a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rate_status.tsx +++ b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rate_status.tsx @@ -39,7 +39,7 @@ export function BurnRateStatus({ const color = getColor(status); if (isLoading) { - return ; + return ; } return ( @@ -47,13 +47,13 @@ export function BurnRateStatus({ - +
{getTitle(status)}
 - - {getSubtitle(shortWindowBurnRate, longWindowBurnRate, selectedWindow)} + + {getDescription(shortWindowBurnRate, longWindowBurnRate, selectedWindow)} @@ -66,7 +66,7 @@ export function BurnRateStatus({ titleSize="s" textAlign="right" isLoading={isLoading} - data-test-subj="burnRateThreshold" + data-test-subj="threshold" description={ @@ -129,7 +129,7 @@ function getTitle(status: Status): string { } } -function getSubtitle( +function getDescription( shortWindowBurnRate: number, longWindowBurnRate: number, selectedWindow: BurnRateWindow From 84c47d466578398617d9214656bad5946ec8235e Mon Sep 17 00:00:00 2001 From: Kevin Delemme Date: Tue, 22 Oct 2024 16:05:17 -0400 Subject: [PATCH 13/17] Rename component --- .../burn_rates.tsx => burn_rate_panel/burn_rate_panel.tsx} | 2 +- .../burn_rate_status.test.tsx} | 0 .../{burn_rate => burn_rate_panel}/burn_rate_status.tsx | 0 .../slo/public/pages/slo_details/components/slo_details.tsx | 4 ++-- .../pages/slo_details/hooks/use_fetch_burn_rate_windows.ts | 2 +- 5 files changed, 4 insertions(+), 4 deletions(-) rename x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/{burn_rate/burn_rates.tsx => burn_rate_panel/burn_rate_panel.tsx} (98%) rename x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/{burn_rate/burn_rate.test.tsx => burn_rate_panel/burn_rate_status.test.tsx} (100%) rename x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/{burn_rate => burn_rate_panel}/burn_rate_status.tsx (100%) diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rates.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate_panel/burn_rate_panel.tsx similarity index 98% rename from x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rates.tsx rename to x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate_panel/burn_rate_panel.tsx index 545c462dc53c9..a68601877e768 100644 --- a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rates.tsx +++ b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate_panel/burn_rate_panel.tsx @@ -20,7 +20,7 @@ interface Props { isAutoRefreshing?: boolean; } -export function BurnRates({ slo, isAutoRefreshing }: Props) { +export function BurnRatePanel({ slo, isAutoRefreshing }: Props) { const burnRateWindows = useFetchBurnRateWindows(slo); const [selectedWindow, setSelectedwindow] = useState(burnRateWindows[0]); const { isLoading, data } = useFetchSloBurnRates({ diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rate.test.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate_panel/burn_rate_status.test.tsx similarity index 100% rename from x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rate.test.tsx rename to x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate_panel/burn_rate_status.test.tsx diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rate_status.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate_panel/burn_rate_status.tsx similarity index 100% rename from x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate/burn_rate_status.tsx rename to x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate_panel/burn_rate_status.tsx diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/slo_details.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/slo_details.tsx index 6078fee023f92..498123b0d633c 100644 --- a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/slo_details.tsx +++ b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/slo_details.tsx @@ -9,7 +9,7 @@ import { EuiFlexGroup } from '@elastic/eui'; import { SLOWithSummaryResponse } from '@kbn/slo-schema'; import moment from 'moment'; import React, { useEffect, useState } from 'react'; -import { BurnRates } from './burn_rate/burn_rates'; +import { BurnRatePanel } from './burn_rate_panel/burn_rate_panel'; import { EventsChartPanel } from './events_chart_panel'; import { HistoricalDataCharts } from './historical_data_charts'; import { SLODetailsHistory } from './history/slo_details_history'; @@ -68,7 +68,7 @@ export function SloDetails({ slo, isAutoRefreshing, selectedTabId }: Props) { - + { useEffect(() => { if (!isLoading && rules && rules[sloId]) { setBurnRateWindows( - rules[sloId][0].params?.windows?.map((window) => ({ + rules[sloId][0]?.params?.windows?.map((window) => ({ name: window.actionGroup, threshold: window.burnRateThreshold, longWindow: window.longWindow, From eb077ef9ece5d71d3511e310cc726f9589b6b83d Mon Sep 17 00:00:00 2001 From: Kevin Delemme Date: Wed, 23 Oct 2024 09:10:41 -0400 Subject: [PATCH 14/17] Update i18n --- .../components/burn_rate_panel/burn_rate_status.tsx | 8 ++++---- x-pack/plugins/translations/translations/fr-FR.json | 9 --------- x-pack/plugins/translations/translations/ja-JP.json | 9 --------- x-pack/plugins/translations/translations/zh-CN.json | 9 --------- 4 files changed, 4 insertions(+), 31 deletions(-) diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate_panel/burn_rate_status.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate_panel/burn_rate_status.tsx index 60509c76418ee..255bc3efe36cd 100644 --- a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate_panel/burn_rate_status.tsx +++ b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate_panel/burn_rate_status.tsx @@ -110,20 +110,20 @@ function getColor(status: Status) { function getTitle(status: Status): string { switch (status) { case 'BREACHED': - return i18n.translate('xpack.slo.burnRate.breachedStatustTitle', { + return i18n.translate('xpack.slo.burnRate.breachedStatusTitle', { defaultMessage: 'Breached', }); case 'INCREASING': - return i18n.translate('xpack.slo.burnRate.increasingStatustTitle', { + return i18n.translate('xpack.slo.burnRate.increasingStatusTitle', { defaultMessage: 'Increasing', }); case 'RECOVERING': - return i18n.translate('xpack.slo.burnRate.recoveringStatustTitle', { + return i18n.translate('xpack.slo.burnRate.recoveringStatusTitle', { defaultMessage: 'Recovering', }); case 'ACCEPTABLE': default: - return i18n.translate('xpack.slo.burnRate.okStatusTitle', { + return i18n.translate('xpack.slo.burnRate.acceptableStatusTitle', { defaultMessage: 'Acceptable value', }); } diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json index fc240ba84ad29..9fdb5a7d7230e 100644 --- a/x-pack/plugins/translations/translations/fr-FR.json +++ b/x-pack/plugins/translations/translations/fr-FR.json @@ -41021,15 +41021,7 @@ "xpack.slo.budgetingMethod.occurrences": "Occurrences", "xpack.slo.budgetingMethod.timeslices": "Intervalles de temps", "xpack.slo.burnRate.alertDetails.logRateAnalysis.sectionTitle": "Analyse du taux de log", - "xpack.slo.burnRate.breachedStatustSubtitle": "Au rythme actuel, le budget d'erreur sera épuisé dans {hour} heures.", - "xpack.slo.burnRate.breachedStatustTitle": "Valeur critique dépassée", - "xpack.slo.burnRate.noDataStatusSubtitle": "En attente de plus de données.", - "xpack.slo.burnRate.noDataStatusTitle": "Aucune valeur", - "xpack.slo.burnRate.okStatusSubtitle": "Aucun risque d'épuisement du budget d'erreurs.", - "xpack.slo.burnRate.okStatusTitle": "Valeur acceptable", - "xpack.slo.burnRate.threshold": "Le seuil est {threshold}x", "xpack.slo.burnRate.timeRangeBtnLegend": "Sélectionner la plage temporelle", - "xpack.slo.burnRate.title": "Taux d'avancement", "xpack.slo.burnRateRule.alertDetails.logRateAnalysisTitle": "Causes possibles et résolutions", "xpack.slo.burnRateRule.alertDetailsAppSection.burnRate.sloDetailsLink": "Détails des SLO", "xpack.slo.burnRateRule.alertDetailsAppSection.burnRate.thresholdBreachedTitle": "Seuil dépassé", @@ -41041,7 +41033,6 @@ "xpack.slo.burnRateRule.alertDetailsAppSection.lastDurationInSeconds": "{duration} dernières secondes", "xpack.slo.burnRateRuleEditor.h5.chooseASLOToMonitorLabel": "Choisir un SLO pour monitorer", "xpack.slo.burnRateRuleEditor.h5.defineMultipleBurnRateLabel": "Définir des fenêtres du taux d'avancement multiples", - "xpack.slo.burnRates.fromRange.label": "{duration}h", "xpack.slo.create.errorNotification": "Un problème est survenu lors de la création de {name}", "xpack.slo.deleteConfirmationModal.cancelButtonLabel": "Annuler", "xpack.slo.deleteConfirmationModal.deleteAllButtonLabel": "Supprimer le SLO et toutes les instances", diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index 4d39022965da0..adde587ed7d7c 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -40766,15 +40766,7 @@ "xpack.slo.budgetingMethod.occurrences": "出現回数", "xpack.slo.budgetingMethod.timeslices": "タイムスライス", "xpack.slo.burnRate.alertDetails.logRateAnalysis.sectionTitle": "ログレート分析", - "xpack.slo.burnRate.breachedStatustSubtitle": "現在のレートでは、エラー予算は{hour}時間後に使い果たされます。", - "xpack.slo.burnRate.breachedStatustTitle": "重大値違反", - "xpack.slo.burnRate.noDataStatusSubtitle": "その他のデータを待機中です。", - "xpack.slo.burnRate.noDataStatusTitle": "値なし", - "xpack.slo.burnRate.okStatusSubtitle": "エラー予算が枯渇するリスクはありません。", - "xpack.slo.burnRate.okStatusTitle": "許容値", - "xpack.slo.burnRate.threshold": "しきい値は{threshold}xです", "xpack.slo.burnRate.timeRangeBtnLegend": "時間範囲を選択", - "xpack.slo.burnRate.title": "バーンレート", "xpack.slo.burnRateRule.alertDetails.logRateAnalysisTitle": "考えられる原因と修正方法", "xpack.slo.burnRateRule.alertDetailsAppSection.burnRate.sloDetailsLink": "SLO詳細", "xpack.slo.burnRateRule.alertDetailsAppSection.burnRate.thresholdBreachedTitle": "しきい値を超えました", @@ -40787,7 +40779,6 @@ "xpack.slo.burnRateRule.name": "{name}バーンレートルール", "xpack.slo.burnRateRuleEditor.h5.chooseASLOToMonitorLabel": "監視するSLOを選択", "xpack.slo.burnRateRuleEditor.h5.defineMultipleBurnRateLabel": "複数のバーンレート時間枠を定義", - "xpack.slo.burnRates.fromRange.label": "{duration}h", "xpack.slo.create.errorNotification": "{name}の作成中に問題が発生しました", "xpack.slo.deleteConfirmationModal.cancelButtonLabel": "キャンセル", "xpack.slo.deleteConfirmationModal.deleteAllButtonLabel": "SLOとすべてのインスタンスを削除", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index 27ee1dd00a563..1113a2e4abdce 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -40811,15 +40811,7 @@ "xpack.slo.budgetingMethod.occurrences": "发生次数", "xpack.slo.budgetingMethod.timeslices": "时间片", "xpack.slo.burnRate.alertDetails.logRateAnalysis.sectionTitle": "日志速率分析", - "xpack.slo.burnRate.breachedStatustSubtitle": "按照当前的速率，错误预算将在 {hour} 小时后耗尽。", - "xpack.slo.burnRate.breachedStatustTitle": "已超出临界值", - "xpack.slo.burnRate.noDataStatusSubtitle": "等待更多数据。", - "xpack.slo.burnRate.noDataStatusTitle": "无值", - "xpack.slo.burnRate.okStatusSubtitle": "没有错误预算耗尽风险。", - "xpack.slo.burnRate.okStatusTitle": "可接受的值", - "xpack.slo.burnRate.threshold": "阈值为 {threshold}x", "xpack.slo.burnRate.timeRangeBtnLegend": "选择时间范围", - "xpack.slo.burnRate.title": "消耗速度", "xpack.slo.burnRateRule.alertDetails.logRateAnalysisTitle": "可能的原因和补救措施", "xpack.slo.burnRateRule.alertDetailsAppSection.burnRate.sloDetailsLink": "SLO 详情", "xpack.slo.burnRateRule.alertDetailsAppSection.burnRate.thresholdBreachedTitle": "超出阈值", @@ -40832,7 +40824,6 @@ "xpack.slo.burnRateRule.name": "{name} 消耗速度规则", "xpack.slo.burnRateRuleEditor.h5.chooseASLOToMonitorLabel": "选择要监测的 SLO", "xpack.slo.burnRateRuleEditor.h5.defineMultipleBurnRateLabel": "定义多个消耗速度窗口", - "xpack.slo.burnRates.fromRange.label": "{duration}h", "xpack.slo.create.errorNotification": "创建 {name} 时出现问题", "xpack.slo.deleteConfirmationModal.cancelButtonLabel": "取消", "xpack.slo.deleteConfirmationModal.deleteAllButtonLabel": "删除 SLO 和所有实例", From f1f10fb493ddcd1830cd12626d03b9ec191d0c54 Mon Sep 17 00:00:00 2001 From: Kevin Delemme Date: Tue, 29 Oct 2024 15:23:42 -0400 Subject: [PATCH 15/17] Remove area error rate chart --- .../components/error_rate/error_rate_panel.tsx | 1 - .../components/slo/error_rate_chart/error_rate_chart.tsx | 3 --- .../components/slo/error_rate_chart/use_lens_definition.ts | 6 ++---- 3 files changed, 2 insertions(+), 8 deletions(-) diff --git a/x-pack/plugins/observability_solution/slo/public/components/alert_details/components/error_rate/error_rate_panel.tsx b/x-pack/plugins/observability_solution/slo/public/components/alert_details/components/error_rate/error_rate_panel.tsx index 8846b4fc82eb3..1f0f8a6830b38 100644 --- a/x-pack/plugins/observability_solution/slo/public/components/alert_details/components/error_rate/error_rate_panel.tsx +++ b/x-pack/plugins/observability_solution/slo/public/components/alert_details/components/error_rate/error_rate_panel.tsx @@ -153,7 +153,6 @@ export function ErrorRatePanel({ alert, slo, isLoading }: Props) { dataTimeRange={dataTimeRange} alertTimeRange={alertTimeRange} threshold={actionGroupWindow!.burnRateThreshold} - showErrorRateAsLine /> diff --git a/x-pack/plugins/observability_solution/slo/public/components/slo/error_rate_chart/error_rate_chart.tsx b/x-pack/plugins/observability_solution/slo/public/components/slo/error_rate_chart/error_rate_chart.tsx index ecd88c090e371..61a3f26032c3f 100644 --- a/x-pack/plugins/observability_solution/slo/public/components/slo/error_rate_chart/error_rate_chart.tsx +++ b/x-pack/plugins/observability_solution/slo/public/components/slo/error_rate_chart/error_rate_chart.tsx @@ -19,7 +19,6 @@ interface Props { dataTimeRange: TimeRange; threshold?: number; alertTimeRange?: TimeRange; - showErrorRateAsLine?: boolean; annotations?: AlertAnnotation[]; onBrushed?: (timeBounds: TimeBounds) => void; } @@ -29,7 +28,6 @@ export function ErrorRateChart({ dataTimeRange, threshold, alertTimeRange, - showErrorRateAsLine, annotations, onBrushed, }: Props) { @@ -42,7 +40,6 @@ export function ErrorRateChart({ alertTimeRange, dataTimeRange, annotations, - showErrorRateAsLine, }); const delayInSeconds = getDelayInSecondsFromSLO(slo); diff --git a/x-pack/plugins/observability_solution/slo/public/components/slo/error_rate_chart/use_lens_definition.ts b/x-pack/plugins/observability_solution/slo/public/components/slo/error_rate_chart/use_lens_definition.ts index dd625d847ef7e..3af741eba8a96 100644 --- a/x-pack/plugins/observability_solution/slo/public/components/slo/error_rate_chart/use_lens_definition.ts +++ b/x-pack/plugins/observability_solution/slo/public/components/slo/error_rate_chart/use_lens_definition.ts @@ -31,7 +31,6 @@ interface Props { dataTimeRange: TimeRange; alertTimeRange?: TimeRange; annotations?: AlertAnnotation[]; - showErrorRateAsLine?: boolean; } export function useLensDefinition({ @@ -40,7 +39,6 @@ export function useLensDefinition({ dataTimeRange, alertTimeRange, annotations, - showErrorRateAsLine, }: Props): TypedLensByValueInput['attributes'] { const { euiTheme } = useEuiTheme(); @@ -87,14 +85,14 @@ export function useLensDefinition({ layerId: '8730e8af-7dac-430e-9cef-3b9989ff0866', accessors: ['9f69a7b0-34b9-4b76-9ff7-26dc1a06ec14'], position: 'top', - seriesType: !!showErrorRateAsLine ? 'line' : 'area', + seriesType: 'line', showGridlines: false, layerType: 'data', xAccessor: '627ded04-eae0-4437-83a1-bbb6138d2c3b', yConfig: [ { forAccessor: '9f69a7b0-34b9-4b76-9ff7-26dc1a06ec14', - color: !!showErrorRateAsLine ? euiTheme.colors.primary : euiTheme.colors.danger, + color: euiTheme.colors.primary, }, ], }, From a5fdf770c70bf9ee93593288be8dcb13d8cb1caf Mon Sep 17 00:00:00 2001 From: Kevin Delemme Date: Thu, 31 Oct 2024 10:31:25 -0400 Subject: [PATCH 16/17] Change line chart color based on burn rate status or SLO status when used outside of the burn rate panel --- .../error_rate/error_rate_panel.tsx | 1 + .../slo/error_rate_chart/error_rate_chart.tsx | 3 +++ .../error_rate_chart/use_lens_definition.ts | 6 ++++- .../burn_rate_panel/burn_rate_panel.tsx | 4 +++ .../burn_rate_panel/burn_rate_status.tsx | 22 ++------------- .../components/burn_rate_panel/utils.ts | 27 +++++++++++++++++++ .../history/slo_details_history.tsx | 7 ++++- 7 files changed, 48 insertions(+), 22 deletions(-) create mode 100644 x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate_panel/utils.ts diff --git a/x-pack/plugins/observability_solution/slo/public/components/alert_details/components/error_rate/error_rate_panel.tsx b/x-pack/plugins/observability_solution/slo/public/components/alert_details/components/error_rate/error_rate_panel.tsx index 1f0f8a6830b38..58ecf4fe29871 100644 --- a/x-pack/plugins/observability_solution/slo/public/components/alert_details/components/error_rate/error_rate_panel.tsx +++ b/x-pack/plugins/observability_solution/slo/public/components/alert_details/components/error_rate/error_rate_panel.tsx @@ -153,6 +153,7 @@ export function ErrorRatePanel({ alert, slo, isLoading }: Props) { dataTimeRange={dataTimeRange} alertTimeRange={alertTimeRange} threshold={actionGroupWindow!.burnRateThreshold} + variant="danger" /> diff --git a/x-pack/plugins/observability_solution/slo/public/components/slo/error_rate_chart/error_rate_chart.tsx b/x-pack/plugins/observability_solution/slo/public/components/slo/error_rate_chart/error_rate_chart.tsx index 61a3f26032c3f..913dea7db4b42 100644 --- a/x-pack/plugins/observability_solution/slo/public/components/slo/error_rate_chart/error_rate_chart.tsx +++ b/x-pack/plugins/observability_solution/slo/public/components/slo/error_rate_chart/error_rate_chart.tsx @@ -21,6 +21,7 @@ interface Props { alertTimeRange?: TimeRange; annotations?: AlertAnnotation[]; onBrushed?: (timeBounds: TimeBounds) => void; + variant?: 'success' | 'danger'; } export function ErrorRateChart({ @@ -30,6 +31,7 @@ export function ErrorRateChart({ alertTimeRange, annotations, onBrushed, + variant = 'success', }: Props) { const { lens: { EmbeddableComponent }, @@ -40,6 +42,7 @@ export function ErrorRateChart({ alertTimeRange, dataTimeRange, annotations, + variant, }); const delayInSeconds = getDelayInSecondsFromSLO(slo); diff --git a/x-pack/plugins/observability_solution/slo/public/components/slo/error_rate_chart/use_lens_definition.ts b/x-pack/plugins/observability_solution/slo/public/components/slo/error_rate_chart/use_lens_definition.ts index 3af741eba8a96..db7eb43f71188 100644 --- a/x-pack/plugins/observability_solution/slo/public/components/slo/error_rate_chart/use_lens_definition.ts +++ b/x-pack/plugins/observability_solution/slo/public/components/slo/error_rate_chart/use_lens_definition.ts @@ -31,6 +31,7 @@ interface Props { dataTimeRange: TimeRange; alertTimeRange?: TimeRange; annotations?: AlertAnnotation[]; + variant: 'success' | 'danger'; } export function useLensDefinition({ @@ -39,9 +40,12 @@ export function useLensDefinition({ dataTimeRange, alertTimeRange, annotations, + variant, }: Props): TypedLensByValueInput['attributes'] { const { euiTheme } = useEuiTheme(); + const lineColor = variant === 'danger' ? euiTheme.colors.danger : euiTheme.colors.success; + const interval = getLensDefinitionInterval(dataTimeRange, slo); return { @@ -92,7 +96,7 @@ export function useLensDefinition({ yConfig: [ { forAccessor: '9f69a7b0-34b9-4b76-9ff7-26dc1a06ec14', - color: euiTheme.colors.primary, + color: lineColor, }, ], }, diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate_panel/burn_rate_panel.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate_panel/burn_rate_panel.tsx index a68601877e768..6b95c84abd59a 100644 --- a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate_panel/burn_rate_panel.tsx +++ b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate_panel/burn_rate_panel.tsx @@ -14,6 +14,7 @@ import { ErrorRateChart } from '../../../../components/slo/error_rate_chart'; import { useFetchSloBurnRates } from '../../../../hooks/use_fetch_slo_burn_rates'; import { BurnRateWindow, useFetchBurnRateWindows } from '../../hooks/use_fetch_burn_rate_windows'; import { BurnRateStatus } from './burn_rate_status'; +import { getStatus } from './utils'; interface Props { slo: SLOWithSummaryResponse; @@ -48,6 +49,8 @@ export function BurnRatePanel({ slo, isAutoRefreshing }: Props) { data?.burnRates.find((curr) => curr.name === shortWindowName(selectedWindow.name))?.burnRate ?? 0; + const currentStatus = getStatus(threshold, longWindowBurnRate, shortWindowbBurnRate); + return ( @@ -97,6 +100,7 @@ export function BurnRatePanel({ slo, isAutoRefreshing }: Props) { to: new Date(), }} threshold={threshold} + variant={currentStatus === 'BREACHED' ? 'danger' : 'success'} /> diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate_panel/burn_rate_status.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate_panel/burn_rate_status.tsx index 255bc3efe36cd..ed2be19aa76fd 100644 --- a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate_panel/burn_rate_status.tsx +++ b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate_panel/burn_rate_status.tsx @@ -18,6 +18,7 @@ import numeral from '@elastic/numeral'; import { i18n } from '@kbn/i18n'; import React from 'react'; import { BurnRateWindow } from '../../hooks/use_fetch_burn_rate_windows'; +import { getStatus } from './utils'; export interface BurnRateParams { isLoading: boolean; @@ -26,7 +27,7 @@ export interface BurnRateParams { shortWindowBurnRate: number; } -type Status = 'BREACHED' | 'RECOVERING' | 'INCREASING' | 'ACCEPTABLE'; +export type Status = 'BREACHED' | 'RECOVERING' | 'INCREASING' | 'ACCEPTABLE'; export function BurnRateStatus({ selectedWindow, @@ -84,25 +85,6 @@ export function BurnRateStatus({ ); } -function getStatus( - threshold: number, - longWindowBurnRate: number, - shortWindowBurnRate: number -): Status { - const isLongWindowBurnRateAboveThreshold = longWindowBurnRate > threshold; - const isShortWindowBurnRateAboveThreshold = shortWindowBurnRate > threshold; - const areBothBurnRatesAboveThreshold = - isLongWindowBurnRateAboveThreshold && isShortWindowBurnRateAboveThreshold; - - return areBothBurnRatesAboveThreshold - ? 'BREACHED' - : isLongWindowBurnRateAboveThreshold && !isShortWindowBurnRateAboveThreshold - ? 'RECOVERING' - : !isLongWindowBurnRateAboveThreshold && isShortWindowBurnRateAboveThreshold - ? 'INCREASING' - : 'ACCEPTABLE'; -} - function getColor(status: Status) { return status === 'BREACHED' ? 'danger' : status === 'INCREASING' ? 'warning' : 'success'; } diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate_panel/utils.ts b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate_panel/utils.ts new file mode 100644 index 0000000000000..028231d5327b2 --- /dev/null +++ b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/burn_rate_panel/utils.ts @@ -0,0 +1,27 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import type { Status } from './burn_rate_status'; + +export function getStatus( + threshold: number, + longWindowBurnRate: number, + shortWindowBurnRate: number +): Status { + const isLongWindowBurnRateAboveThreshold = longWindowBurnRate > threshold; + const isShortWindowBurnRateAboveThreshold = shortWindowBurnRate > threshold; + const areBothBurnRatesAboveThreshold = + isLongWindowBurnRateAboveThreshold && isShortWindowBurnRateAboveThreshold; + + return areBothBurnRatesAboveThreshold + ? 'BREACHED' + : isLongWindowBurnRateAboveThreshold && !isShortWindowBurnRateAboveThreshold + ? 'RECOVERING' + : !isLongWindowBurnRateAboveThreshold && isShortWindowBurnRateAboveThreshold + ? 'INCREASING' + : 'ACCEPTABLE'; +} diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/history/slo_details_history.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/history/slo_details_history.tsx index 41317a9c28850..cfcd1378bf09f 100644 --- a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/history/slo_details_history.tsx +++ b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/history/slo_details_history.tsx @@ -94,7 +94,12 @@ export function SLODetailsHistory({ slo, isAutoRefreshing, selectedTabId }: Prop - + From 3d6ce0b3752dd13ba1a5313e920cf52c44201a3e Mon Sep 17 00:00:00 2001 From: Kevin Delemme Date: Wed, 13 Nov 2024 10:45:27 -0500 Subject: [PATCH 17/17] Fix merge conflict i18n --- x-pack/plugins/translations/translations/fr-FR.json | 9 --------- x-pack/plugins/translations/translations/ja-JP.json | 9 --------- x-pack/plugins/translations/translations/zh-CN.json | 9 --------- 3 files changed, 27 deletions(-) diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json index 5ccbe70bd8fe1..4e5fda703d65c 100644 --- a/x-pack/plugins/translations/translations/fr-FR.json +++ b/x-pack/plugins/translations/translations/fr-FR.json @@ -43369,17 +43369,9 @@ "xpack.slo.budgetingMethod.occurrences": "Occurrences", "xpack.slo.budgetingMethod.timeslices": "Intervalles de temps", "xpack.slo.burnRate.alertDetails.logRateAnalysis.sectionTitle": "Analyse du taux de log", - "xpack.slo.burnRate.breachedStatustSubtitle": "Au rythme actuel, le budget d'erreur sera épuisé dans {hour} heures.", - "xpack.slo.burnRate.breachedStatustTitle": "Valeur critique dépassée", "xpack.slo.burnRate.durationLabel": "Dernièr(e)(s) {duration}", "xpack.slo.burnRate.exhaustionTimeLabel": "À ce rythme, l'ensemble du budget d'erreur sera épuisé dans {hour} heures.", - "xpack.slo.burnRate.noDataStatusSubtitle": "En attente de plus de données.", - "xpack.slo.burnRate.noDataStatusTitle": "Aucune valeur", - "xpack.slo.burnRate.okStatusSubtitle": "Aucun risque d'épuisement du budget d'erreurs.", - "xpack.slo.burnRate.okStatusTitle": "Valeur acceptable", - "xpack.slo.burnRate.threshold": "Le seuil est {threshold}x", "xpack.slo.burnRate.timeRangeBtnLegend": "Sélectionner la plage temporelle", - "xpack.slo.burnRate.title": "Taux d'avancement", "xpack.slo.burnRateEmbeddable.ariaLabel": "Taux d’avancement du SLO", "xpack.slo.burnRateEmbeddable.configuration.cancelButtonLabel": "Confirmer", "xpack.slo.burnRateEmbeddable.configuration.durationLabel": "Durée", @@ -43400,7 +43392,6 @@ "xpack.slo.burnRateRule.alertDetailsAppSection.summaryField.slo": "SLO", "xpack.slo.burnRateRuleEditor.h5.chooseASLOToMonitorLabel": "Choisir un SLO pour monitorer", "xpack.slo.burnRateRuleEditor.h5.defineMultipleBurnRateLabel": "Définir des fenêtres du taux d'avancement multiples", - "xpack.slo.burnRates.fromRange.label": "{duration, plural, one {# heure} other {# heures}}", "xpack.slo.burnRates.value": "{value} fois", "xpack.slo.create.errorNotification": "Un problème est survenu lors de la création de {name}", "xpack.slo.dataPreviewChart.noResultsLabel": "aucun résultat", diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index 8aadc59451b36..0d95ffa40fdf0 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -43333,17 +43333,9 @@ "xpack.slo.budgetingMethod.occurrences": "出現回数", "xpack.slo.budgetingMethod.timeslices": "タイムスライス", "xpack.slo.burnRate.alertDetails.logRateAnalysis.sectionTitle": "ログレート分析", - "xpack.slo.burnRate.breachedStatustSubtitle": "現在のレートでは、エラー予算は{hour}時間後に使い果たされます。", - "xpack.slo.burnRate.breachedStatustTitle": "重大値違反", "xpack.slo.burnRate.durationLabel": "前回の{duration}", "xpack.slo.burnRate.exhaustionTimeLabel": "このレートでは、全体のエラー予算は{hour}時間後に使い果たされます。", - "xpack.slo.burnRate.noDataStatusSubtitle": "その他のデータを待機中です。", - "xpack.slo.burnRate.noDataStatusTitle": "値なし", - "xpack.slo.burnRate.okStatusSubtitle": "エラー予算が枯渇するリスクはありません。", - "xpack.slo.burnRate.okStatusTitle": "許容値", - "xpack.slo.burnRate.threshold": "しきい値は{threshold}xです", "xpack.slo.burnRate.timeRangeBtnLegend": "時間範囲を選択", - "xpack.slo.burnRate.title": "バーンレート", "xpack.slo.burnRateEmbeddable.ariaLabel": "SLOバーンレート", "xpack.slo.burnRateEmbeddable.configuration.cancelButtonLabel": "確認", "xpack.slo.burnRateEmbeddable.configuration.durationLabel": "期間", @@ -43365,7 +43357,6 @@ "xpack.slo.burnRateRule.name": "{name}バーンレートルール", "xpack.slo.burnRateRuleEditor.h5.chooseASLOToMonitorLabel": "監視するSLOを選択", "xpack.slo.burnRateRuleEditor.h5.defineMultipleBurnRateLabel": "複数のバーンレート時間枠を定義", - "xpack.slo.burnRates.fromRange.label": "{duration, plural, other {#時間}}", "xpack.slo.burnRates.value": "{value}x", "xpack.slo.create.errorNotification": "{name}の作成中に問題が発生しました", "xpack.slo.dataPreviewChart.noResultsLabel": "結果なし", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index 6bb17f1a2bdaa..ba03e185f9048 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -42678,17 +42678,9 @@ "xpack.slo.budgetingMethod.occurrences": "发生次数", "xpack.slo.budgetingMethod.timeslices": "时间片", "xpack.slo.burnRate.alertDetails.logRateAnalysis.sectionTitle": "日志速率分析", - "xpack.slo.burnRate.breachedStatustSubtitle": "按照当前的速率，错误预算将在 {hour} 小时后耗尽。", - "xpack.slo.burnRate.breachedStatustTitle": "已超出临界值", "xpack.slo.burnRate.durationLabel": "过去 {duration}", "xpack.slo.burnRate.exhaustionTimeLabel": "按照此速率，整个错误预算将在 {hour} 小时后耗尽。", - "xpack.slo.burnRate.noDataStatusSubtitle": "等待更多数据。", - "xpack.slo.burnRate.noDataStatusTitle": "无值", - "xpack.slo.burnRate.okStatusSubtitle": "没有错误预算耗尽风险。", - "xpack.slo.burnRate.okStatusTitle": "可接受的值", - "xpack.slo.burnRate.threshold": "阈值为 {threshold}x", "xpack.slo.burnRate.timeRangeBtnLegend": "选择时间范围", - "xpack.slo.burnRate.title": "消耗速度", "xpack.slo.burnRateEmbeddable.ariaLabel": "SLO 消耗速度", "xpack.slo.burnRateEmbeddable.configuration.cancelButtonLabel": "确认", "xpack.slo.burnRateEmbeddable.configuration.durationLabel": "持续时间", @@ -42710,7 +42702,6 @@ "xpack.slo.burnRateRule.name": "{name} 消耗速度规则", "xpack.slo.burnRateRuleEditor.h5.chooseASLOToMonitorLabel": "选择要监测的 SLO", "xpack.slo.burnRateRuleEditor.h5.defineMultipleBurnRateLabel": "定义多个消耗速度窗口", - "xpack.slo.burnRates.fromRange.label": "{duration, plural, other {# 小时}}", "xpack.slo.burnRates.value": "{value} 倍", "xpack.slo.create.errorNotification": "创建 {name} 时出现问题", "xpack.slo.dataPreviewChart.noResultsLabel": "无结果",