From a16806d90dd0cf2f4c558dddcc751acf948e5623 Mon Sep 17 00:00:00 2001 From: Kevin Delemme Date: Mon, 30 Jan 2023 09:43:56 -0500 Subject: [PATCH] chore(slo): Improve fixtures and storybook cases (#149639) --- .../observability/public/data/slo/common.ts | 92 ++++++++++ .../public/data/slo/indicator.ts | 55 ++++++ .../observability/public/data/slo/slo.ts | 164 +++++++----------- .../public/data/slo/time_window.ts | 28 +++ .../components/slo_details.stories.tsx | 4 +- .../public/pages/slo_details/index.test.tsx | 20 ++- .../public/pages/slo_edit/index.test.tsx | 43 +++-- .../components/badges/slo_badges.stories.tsx | 4 +- .../slo_indicator_type_badge.stories.tsx | 18 +- .../badges/slo_status_badge.stories.tsx | 4 +- .../badges/slo_time_window_badge.stories.tsx | 14 +- .../slo_delete_confirmation_modal.stories.tsx | 4 +- .../slos/components/slo_list_item.stories.tsx | 4 +- .../components/slo_list_items.stories.tsx | 4 +- .../slos/components/slo_summary.stories.tsx | 4 +- 15 files changed, 307 insertions(+), 155 deletions(-) create mode 100644 x-pack/plugins/observability/public/data/slo/common.ts create mode 100644 x-pack/plugins/observability/public/data/slo/indicator.ts create mode 100644 x-pack/plugins/observability/public/data/slo/time_window.ts diff --git a/x-pack/plugins/observability/public/data/slo/common.ts b/x-pack/plugins/observability/public/data/slo/common.ts new file mode 100644 index 0000000000000..3c0e1b7e49408 --- /dev/null +++ b/x-pack/plugins/observability/public/data/slo/common.ts @@ -0,0 +1,92 @@ +/* + * 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'; + +export const buildOccurrencesObjective = ( + params: Partial = {} +): SLOWithSummaryResponse['objective'] => { + return { + target: 0.99, + ...params, + }; +}; + +export const buildTimeslicesObjective = ( + params: Partial = {} +): SLOWithSummaryResponse['objective'] => { + return { + target: 0.99, + timesliceTarget: 0.95, + timesliceWindow: '5m', + ...params, + }; +}; + +export const buildHealthySummary = ( + params: Partial = {} +): SLOWithSummaryResponse['summary'] => { + return { + status: 'HEALTHY', + sliValue: 0.99872, + errorBudget: { + initial: 0.02, + consumed: 0.064, + remaining: 0.936, + isEstimated: false, + }, + ...params, + }; +}; + +export const buildViolatedSummary = ( + params: Partial = {} +): SLOWithSummaryResponse['summary'] => { + return { + status: 'VIOLATED', + sliValue: 0.97, + errorBudget: { + initial: 0.02, + consumed: 1, + remaining: 0, + isEstimated: false, + }, + ...params, + }; +}; + +export const buildNoDataSummary = ( + params: Partial = {} +): SLOWithSummaryResponse['summary'] => { + return { + status: 'NO_DATA', + sliValue: -1, + errorBudget: { + initial: 0.02, + consumed: 0, + remaining: 1, + isEstimated: false, + }, + ...params, + }; +}; + +export const buildDegradingSummary = ( + params: Partial = {} +): SLOWithSummaryResponse['summary'] => { + return { + status: 'DEGRADING', + sliValue: 0.97, + errorBudget: { + initial: 0.02, + consumed: 0.88, + remaining: 0.12, + isEstimated: true, + }, + ...params, + }; +}; diff --git a/x-pack/plugins/observability/public/data/slo/indicator.ts b/x-pack/plugins/observability/public/data/slo/indicator.ts new file mode 100644 index 0000000000000..8e38f787c1b83 --- /dev/null +++ b/x-pack/plugins/observability/public/data/slo/indicator.ts @@ -0,0 +1,55 @@ +/* + * 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'; + +export const buildApmAvailabilityIndicator = ( + params: Partial = {} +): SLOWithSummaryResponse['indicator'] => { + return { + type: 'sli.apm.transactionErrorRate', + params: { + environment: 'development', + service: 'o11y-app', + transactionType: 'request', + transactionName: 'GET /flaky', + goodStatusCodes: ['2xx', '3xx', '4xx'], + ...params, + }, + }; +}; + +export const buildApmLatencyIndicator = ( + params: Partial = {} +): SLOWithSummaryResponse['indicator'] => { + return { + type: 'sli.apm.transactionDuration', + params: { + environment: 'development', + service: 'o11y-app', + transactionType: 'request', + transactionName: 'GET /slow', + 'threshold.us': 5000000, + ...params, + }, + }; +}; + +export const buildCustomKqlIndicator = ( + params: Partial = {} +): SLOWithSummaryResponse['indicator'] => { + return { + type: 'sli.kql.custom', + params: { + index: 'some_logs*', + good: 'latency < 300', + total: 'latency > 0', + filter: 'labels.eventId: event-0', + ...params, + }, + }; +}; diff --git a/x-pack/plugins/observability/public/data/slo/slo.ts b/x-pack/plugins/observability/public/data/slo/slo.ts index ab9071d7b6ddc..43eb45524e3ca 100644 --- a/x-pack/plugins/observability/public/data/slo/slo.ts +++ b/x-pack/plugins/observability/public/data/slo/slo.ts @@ -8,6 +8,16 @@ import { cloneDeep } from 'lodash'; import { v1 as uuidv1 } from 'uuid'; import { FindSLOResponse, SLOWithSummaryResponse } from '@kbn/slo-schema'; +import { + buildDegradingSummary, + buildHealthySummary, + buildNoDataSummary, + buildOccurrencesObjective, + buildTimeslicesObjective, + buildViolatedSummary, +} from './common'; +import { buildCalendarAlignedTimeWindow, buildRollingTimeWindow } from './time_window'; +import { buildApmAvailabilityIndicator, buildCustomKqlIndicator } from './indicator'; export const emptySloList: FindSLOResponse = { results: [], @@ -61,60 +71,57 @@ export const sloList: FindSLOResponse = { { ...baseSlo, id: '1f1c6ee7-433f-4b56-b727-5682262e0d7d', - summary: { - status: 'HEALTHY', - sliValue: 0.99872, - errorBudget: { - initial: 0.02, - consumed: 0.064, - remaining: 0.936, - isEstimated: false, - }, - }, + indicator: buildCustomKqlIndicator(), + summary: buildHealthySummary(), + timeWindow: buildRollingTimeWindow(), + }, + { + ...baseSlo, + id: '1f1c6ee7-433f-4b56-b727-5682262e0d7e', + indicator: buildApmAvailabilityIndicator(), + summary: buildHealthySummary(), + timeWindow: buildCalendarAlignedTimeWindow(), }, { ...baseSlo, id: 'c0f8d669-9177-4706-9098-f397a88173a6', - summary: { - status: 'VIOLATED', - sliValue: 0.97, - errorBudget: { - initial: 0.02, - consumed: 1, - remaining: 0, - isEstimated: false, - }, - }, + summary: buildViolatedSummary(), + indicator: buildApmAvailabilityIndicator(), + timeWindow: buildCalendarAlignedTimeWindow(), + }, + { + ...baseSlo, + id: 'c0f8d669-9177-4706-9098-f397a88173a6', + summary: buildViolatedSummary(), + timeWindow: buildRollingTimeWindow({ duration: '7d' }), }, { ...baseSlo, id: 'c0f8d669-9177-4706-9098-f397a88173a7', - summary: { - status: 'NO_DATA', - sliValue: -1, - errorBudget: { - initial: 0.02, - consumed: 0, - remaining: 1, - isEstimated: false, - }, - }, + summary: buildNoDataSummary(), + }, + { + ...baseSlo, + id: 'c0f8d669-9177-4706-9098-f397a88173b7', + summary: buildNoDataSummary(), + indicator: buildApmAvailabilityIndicator(), + timeWindow: buildCalendarAlignedTimeWindow(), }, { ...baseSlo, id: 'c0f8d669-9177-4706-9098-f397a88173a8', budgetingMethod: 'timeslices', - objective: { target: 0.98, timesliceTarget: 0.9, timesliceWindow: '5m' }, - summary: { - status: 'DEGRADING', - sliValue: 0.97, - errorBudget: { - initial: 0.02, - consumed: 0.88, - remaining: 0.12, - isEstimated: false, - }, - }, + timeWindow: buildCalendarAlignedTimeWindow(), + objective: buildTimeslicesObjective(), + summary: buildDegradingSummary(), + }, + { + ...baseSlo, + id: 'c0f8d669-9177-4706-9098-f397a88173a9', + objective: buildOccurrencesObjective(), + timeWindow: buildCalendarAlignedTimeWindow(), + summary: buildDegradingSummary(), + indicator: buildApmAvailabilityIndicator(), }, ], page: 1, @@ -122,64 +129,23 @@ export const sloList: FindSLOResponse = { total: 4, }; -export const anSLO: SLOWithSummaryResponse = { - ...baseSlo, - id: '2f17deb0-725a-11ed-ab7c-4bb641cfc57e', -}; - -export const aForecastedSLO: SLOWithSummaryResponse = { - ...baseSlo, - timeWindow: { - duration: '1M', - calendar: { - startTime: '2022-01-01T00:00:00.000Z', - }, - }, - id: '2f17deb0-725a-11ed-ab7c-4bb641cfc57e', - summary: { - status: 'HEALTHY', - sliValue: 0.990097, - errorBudget: { - initial: 0.02, - consumed: 0.495169, - remaining: 0.504831, - isEstimated: true, - }, - }, -}; +export function buildForecastedSlo( + params: Partial = {} +): SLOWithSummaryResponse { + return buildSlo({ + timeWindow: buildCalendarAlignedTimeWindow(), + summary: buildHealthySummary({ + errorBudget: { + initial: 0.02, + consumed: 0.064, + remaining: 0.936, + isEstimated: true, + }, + }), + ...params, + }); +} -export function createSLO(params: Partial = {}): SLOWithSummaryResponse { +export function buildSlo(params: Partial = {}): SLOWithSummaryResponse { return cloneDeep({ ...baseSlo, id: uuidv1(), ...params }); } - -export const anApmAvailabilityIndicator: SLOWithSummaryResponse['indicator'] = { - type: 'sli.apm.transactionErrorRate', - params: { - environment: 'development', - service: 'o11y-app', - transactionType: 'request', - transactionName: 'GET /flaky', - goodStatusCodes: ['2xx', '3xx', '4xx'], - }, -}; - -export const anApmLatencyIndicator: SLOWithSummaryResponse['indicator'] = { - type: 'sli.apm.transactionDuration', - params: { - environment: 'development', - service: 'o11y-app', - transactionType: 'request', - transactionName: 'GET /slow', - 'threshold.us': 5000000, - }, -}; - -export const aCustomKqlIndicator: SLOWithSummaryResponse['indicator'] = { - type: 'sli.kql.custom', - params: { - index: 'some_logs*', - good: 'latency < 300', - total: 'latency > 0', - filter: 'labels.eventId: event-0', - }, -}; diff --git a/x-pack/plugins/observability/public/data/slo/time_window.ts b/x-pack/plugins/observability/public/data/slo/time_window.ts new file mode 100644 index 0000000000000..5de62ef4a5245 --- /dev/null +++ b/x-pack/plugins/observability/public/data/slo/time_window.ts @@ -0,0 +1,28 @@ +/* + * 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'; + +export const buildRollingTimeWindow = ( + params: Partial = {} +): SLOWithSummaryResponse['timeWindow'] => { + return { + duration: '30d', + isRolling: true, + ...params, + }; +}; + +export const buildCalendarAlignedTimeWindow = ( + params: Partial = {} +): SLOWithSummaryResponse['timeWindow'] => { + return { + duration: '1M', + calendar: { startTime: '2023-01-01T00:00:00.000Z' }, + ...params, + }; +}; diff --git a/x-pack/plugins/observability/public/pages/slo_details/components/slo_details.stories.tsx b/x-pack/plugins/observability/public/pages/slo_details/components/slo_details.stories.tsx index 63b12f829f13b..bf462b7c360bb 100644 --- a/x-pack/plugins/observability/public/pages/slo_details/components/slo_details.stories.tsx +++ b/x-pack/plugins/observability/public/pages/slo_details/components/slo_details.stories.tsx @@ -8,7 +8,7 @@ import React from 'react'; import { ComponentStory } from '@storybook/react'; -import { anSLO } from '../../../data/slo/slo'; +import { buildSlo } from '../../../data/slo/slo'; import { SloDetails as Component, Props } from './slo_details'; export default { @@ -20,7 +20,7 @@ export default { const Template: ComponentStory = (props: Props) => ; const defaultProps: Props = { - slo: anSLO, + slo: buildSlo(), }; export const SloDetails = Template.bind({}); diff --git a/x-pack/plugins/observability/public/pages/slo_details/index.test.tsx b/x-pack/plugins/observability/public/pages/slo_details/index.test.tsx index c2e461a38c4ea..33567da34ef35 100644 --- a/x-pack/plugins/observability/public/pages/slo_details/index.test.tsx +++ b/x-pack/plugins/observability/public/pages/slo_details/index.test.tsx @@ -14,7 +14,7 @@ import { useLicense } from '../../hooks/use_license'; import { useFetchSloDetails } from '../../hooks/slo/use_fetch_slo_details'; import { render } from '../../utils/test_helper'; import { SloDetailsPage } from '.'; -import { anSLO } from '../../data/slo/slo'; +import { buildSlo } from '../../data/slo/slo'; import type { ConfigSchema } from '../../plugin'; import type { Subset } from '../../typings'; import { paths } from '../../config'; @@ -64,8 +64,9 @@ describe('SLO Details Page', () => { describe('when the feature flag is not enabled', () => { it('renders the not found page', async () => { - useParamsMock.mockReturnValue(anSLO.id); - useFetchSloDetailsMock.mockReturnValue({ loading: false, slo: anSLO }); + const slo = buildSlo(); + useParamsMock.mockReturnValue(slo.id); + useFetchSloDetailsMock.mockReturnValue({ loading: false, slo }); useLicenseMock.mockReturnValue({ hasAtLeast: () => true }); render(, { unsafe: { slo: { enabled: false } } }); @@ -77,8 +78,9 @@ describe('SLO Details Page', () => { describe('when the feature flag is enabled', () => { describe('when the incorrect license is found', () => { it('navigates to the SLO List page', async () => { - useParamsMock.mockReturnValue(anSLO.id); - useFetchSloDetailsMock.mockReturnValue({ loading: false, slo: anSLO }); + const slo = buildSlo(); + useParamsMock.mockReturnValue(slo.id); + useFetchSloDetailsMock.mockReturnValue({ loading: false, slo }); useLicenseMock.mockReturnValue({ hasAtLeast: () => false }); render(, { unsafe: { slo: { enabled: true } } }); @@ -99,7 +101,8 @@ describe('SLO Details Page', () => { }); it('renders the loading spinner when fetching the SLO', async () => { - useParamsMock.mockReturnValue(anSLO.id); + const slo = buildSlo(); + useParamsMock.mockReturnValue(slo.id); useFetchSloDetailsMock.mockReturnValue({ loading: true, slo: undefined }); useLicenseMock.mockReturnValue({ hasAtLeast: () => true }); @@ -111,8 +114,9 @@ describe('SLO Details Page', () => { }); it('renders the SLO details page', async () => { - useParamsMock.mockReturnValue(anSLO.id); - useFetchSloDetailsMock.mockReturnValue({ loading: false, slo: anSLO }); + const slo = buildSlo(); + useParamsMock.mockReturnValue(slo.id); + useFetchSloDetailsMock.mockReturnValue({ loading: false, slo }); useLicenseMock.mockReturnValue({ hasAtLeast: () => true }); render(, config); diff --git a/x-pack/plugins/observability/public/pages/slo_edit/index.test.tsx b/x-pack/plugins/observability/public/pages/slo_edit/index.test.tsx index ee0b1c25dfc97..2d183648e7000 100644 --- a/x-pack/plugins/observability/public/pages/slo_edit/index.test.tsx +++ b/x-pack/plugins/observability/public/pages/slo_edit/index.test.tsx @@ -21,7 +21,7 @@ import { kibanaStartMock } from '../../utils/kibana_react.mock'; import { ConfigSchema } from '../../plugin'; import { Subset } from '../../typings'; import { SLO_EDIT_FORM_DEFAULT_VALUES } from './constants'; -import { anSLO } from '../../data/slo/slo'; +import { buildSlo } from '../../data/slo/slo'; import { paths } from '../../config'; import { SloEditPage } from '.'; @@ -282,10 +282,11 @@ describe('SLO Edit Page', () => { describe('when a sloId route param is provided', () => { it('renders the SLO Edit page with prefilled form values', async () => { + const slo = buildSlo({ id: '123' }); jest.spyOn(Router, 'useParams').mockReturnValue({ sloId: '123' }); useLicenseMock.mockReturnValue({ hasAtLeast: () => true }); - useFetchSloMock.mockReturnValue({ loading: false, slo: anSLO }); + useFetchSloMock.mockReturnValue({ loading: false, slo }); useFetchIndicesMock.mockReturnValue({ loading: false, indices: [{ name: 'some-index' }], @@ -303,39 +304,40 @@ describe('SLO Edit Page', () => { expect(screen.queryByTestId('sloForm')).toBeTruthy(); expect(screen.queryByTestId('sloFormIndicatorTypeSelect')).toHaveValue( - anSLO.indicator.type + slo.indicator.type ); expect(screen.queryByTestId('sloFormCustomKqlIndexInput')).toHaveValue( - anSLO.indicator.params.index + slo.indicator.params.index ); expect(screen.queryByTestId('sloFormCustomKqlFilterQueryInput')).toHaveValue( - anSLO.indicator.type === 'sli.kql.custom' ? anSLO.indicator.params.filter : '' + slo.indicator.type === 'sli.kql.custom' ? slo.indicator.params.filter : '' ); expect(screen.queryByTestId('sloFormCustomKqlGoodQueryInput')).toHaveValue( - anSLO.indicator.type === 'sli.kql.custom' ? anSLO.indicator.params.good : '' + slo.indicator.type === 'sli.kql.custom' ? slo.indicator.params.good : '' ); expect(screen.queryByTestId('sloFormCustomKqlTotalQueryInput')).toHaveValue( - anSLO.indicator.type === 'sli.kql.custom' ? anSLO.indicator.params.total : '' + slo.indicator.type === 'sli.kql.custom' ? slo.indicator.params.total : '' ); expect(screen.queryByTestId('sloFormBudgetingMethodSelect')).toHaveValue( - anSLO.budgetingMethod + slo.budgetingMethod ); expect(screen.queryByTestId('sloFormTimeWindowDurationSelect')).toHaveValue( - anSLO.timeWindow.duration + slo.timeWindow.duration ); expect(screen.queryByTestId('sloFormObjectiveTargetInput')).toHaveValue( - anSLO.objective.target * 100 + slo.objective.target * 100 ); - expect(screen.queryByTestId('sloFormNameInput')).toHaveValue(anSLO.name); - expect(screen.queryByTestId('sloFormDescriptionTextArea')).toHaveValue(anSLO.description); + expect(screen.queryByTestId('sloFormNameInput')).toHaveValue(slo.name); + expect(screen.queryByTestId('sloFormDescriptionTextArea')).toHaveValue(slo.description); }); it('calls the updateSlo hook if all required values are filled in', async () => { // Note: the `anSLO` object is considered to have (at least) // values for all required fields. + const slo = buildSlo({ id: '123' }); jest.spyOn(Router, 'useParams').mockReturnValue({ sloId: '123' }); @@ -344,7 +346,7 @@ describe('SLO Edit Page', () => { loading: false, indices: [{ name: 'some-index' }], }); - useFetchSloMock.mockReturnValue({ loading: false, slo: anSLO }); + useFetchSloMock.mockReturnValue({ loading: false, slo }); const mockCreate = jest.fn(); const mockUpdate = jest.fn(); useCreateOrUpdateSloMock.mockReturnValue({ @@ -365,7 +367,7 @@ describe('SLO Edit Page', () => { [MockFunction] { "calls": Array [ Array [ - "2f17deb0-725a-11ed-ab7c-4bb641cfc57e", + "123", Object { "budgetingMethod": "occurrences", "description": "some description useful", @@ -407,6 +409,7 @@ describe('SLO Edit Page', () => { it('blocks submitting if not all required values are filled in', async () => { // Note: the `anSLO` object is considered to have (at least) // values for all required fields. + const slo = buildSlo(); jest.spyOn(Router, 'useParams').mockReturnValue({ sloId: '123' }); @@ -415,7 +418,7 @@ describe('SLO Edit Page', () => { loading: false, indices: [], }); - useFetchSloMock.mockReturnValue({ loading: false, slo: { ...anSLO, name: '' } }); + useFetchSloMock.mockReturnValue({ loading: false, slo: { ...slo, name: '' } }); render(, config); @@ -429,10 +432,12 @@ describe('SLO Edit Page', () => { it('renders a success toast', async () => { // Note: the `anSLO` object is considered to have (at least) // values for all required fields. + const slo = buildSlo(); + jest.spyOn(Router, 'useParams').mockReturnValue({ sloId: '123' }); useLicenseMock.mockReturnValue({ hasAtLeast: () => true }); - useFetchSloMock.mockReturnValue({ loading: false, slo: anSLO }); + useFetchSloMock.mockReturnValue({ loading: false, slo }); useFetchIndicesMock.mockReturnValue({ loading: false, indices: [{ name: 'some-index' }], @@ -451,10 +456,11 @@ describe('SLO Edit Page', () => { it('navigates to the SLO List page', async () => { // Note: the `anSLO` object is considered to have (at least) // values for all required fields. + const slo = buildSlo(); jest.spyOn(Router, 'useParams').mockReturnValue({ sloId: '123' }); useLicenseMock.mockReturnValue({ hasAtLeast: () => true }); - useFetchSloMock.mockReturnValue({ loading: false, slo: anSLO }); + useFetchSloMock.mockReturnValue({ loading: false, slo }); useFetchIndicesMock.mockReturnValue({ loading: false, indices: [{ name: 'some-index' }], @@ -475,10 +481,11 @@ describe('SLO Edit Page', () => { it('renders an error toast', async () => { // Note: the `anSLO` object is considered to have (at least) // values for all required fields. + const slo = buildSlo(); jest.spyOn(Router, 'useParams').mockReturnValue({ sloId: '123' }); useLicenseMock.mockReturnValue({ hasAtLeast: () => true }); - useFetchSloMock.mockReturnValue({ loading: false, slo: anSLO }); + useFetchSloMock.mockReturnValue({ loading: false, slo }); useFetchIndicesMock.mockReturnValue({ loading: false, indices: [{ name: 'some-index' }], diff --git a/x-pack/plugins/observability/public/pages/slos/components/badges/slo_badges.stories.tsx b/x-pack/plugins/observability/public/pages/slos/components/badges/slo_badges.stories.tsx index 3079b7d3b6709..f3abb871e6e2f 100644 --- a/x-pack/plugins/observability/public/pages/slos/components/badges/slo_badges.stories.tsx +++ b/x-pack/plugins/observability/public/pages/slos/components/badges/slo_badges.stories.tsx @@ -8,7 +8,7 @@ import React from 'react'; import { ComponentStory } from '@storybook/react'; -import { aForecastedSLO } from '../../../../data/slo/slo'; +import { buildForecastedSlo } from '../../../../data/slo/slo'; import { KibanaReactStorybookDecorator } from '../../../../utils/kibana_react.storybook_decorator'; import { SloBadges as Component, Props } from './slo_badges'; @@ -21,7 +21,7 @@ export default { const Template: ComponentStory = (props: Props) => ; const defaultProps = { - slo: aForecastedSLO, + slo: buildForecastedSlo(), }; export const SloBadges = Template.bind({}); diff --git a/x-pack/plugins/observability/public/pages/slos/components/badges/slo_indicator_type_badge.stories.tsx b/x-pack/plugins/observability/public/pages/slos/components/badges/slo_indicator_type_badge.stories.tsx index efdd85ef06878..a8a3933be95d4 100644 --- a/x-pack/plugins/observability/public/pages/slos/components/badges/slo_indicator_type_badge.stories.tsx +++ b/x-pack/plugins/observability/public/pages/slos/components/badges/slo_indicator_type_badge.stories.tsx @@ -8,14 +8,14 @@ import React from 'react'; import { ComponentStory } from '@storybook/react'; +import { + buildCustomKqlIndicator, + buildApmAvailabilityIndicator, + buildApmLatencyIndicator, +} from '../../../../data/slo/indicator'; import { KibanaReactStorybookDecorator } from '../../../../utils/kibana_react.storybook_decorator'; import { SloIndicatorTypeBadge as Component, Props } from './slo_indicator_type_badge'; -import { - aCustomKqlIndicator, - anApmAvailabilityIndicator, - anApmLatencyIndicator, - createSLO, -} from '../../../../data/slo/slo'; +import { buildSlo } from '../../../../data/slo/slo'; export default { component: Component, @@ -26,10 +26,10 @@ export default { const Template: ComponentStory = (props: Props) => ; export const WithCustomKql = Template.bind({}); -WithCustomKql.args = { slo: createSLO({ indicator: aCustomKqlIndicator }) }; +WithCustomKql.args = { slo: buildSlo({ indicator: buildCustomKqlIndicator() }) }; export const WithApmAvailability = Template.bind({}); -WithApmAvailability.args = { slo: createSLO({ indicator: anApmAvailabilityIndicator }) }; +WithApmAvailability.args = { slo: buildSlo({ indicator: buildApmAvailabilityIndicator() }) }; export const WithApmLatency = Template.bind({}); -WithApmLatency.args = { slo: createSLO({ indicator: anApmLatencyIndicator }) }; +WithApmLatency.args = { slo: buildSlo({ indicator: buildApmLatencyIndicator() }) }; diff --git a/x-pack/plugins/observability/public/pages/slos/components/badges/slo_status_badge.stories.tsx b/x-pack/plugins/observability/public/pages/slos/components/badges/slo_status_badge.stories.tsx index c5a62f51bee0e..5ab384419dd28 100644 --- a/x-pack/plugins/observability/public/pages/slos/components/badges/slo_status_badge.stories.tsx +++ b/x-pack/plugins/observability/public/pages/slos/components/badges/slo_status_badge.stories.tsx @@ -10,7 +10,7 @@ import { ComponentStory } from '@storybook/react'; import { KibanaReactStorybookDecorator } from '../../../../utils/kibana_react.storybook_decorator'; import { SloStatusBadge as Component, SloStatusProps } from './slo_status_badge'; -import { anSLO } from '../../../../data/slo/slo'; +import { buildSlo } from '../../../../data/slo/slo'; export default { component: Component, @@ -23,7 +23,7 @@ const Template: ComponentStory = (props: SloStatusProps) => ( ); const defaultProps = { - slo: anSLO, + slo: buildSlo(), }; export const SloStatusBadge = Template.bind({}); diff --git a/x-pack/plugins/observability/public/pages/slos/components/badges/slo_time_window_badge.stories.tsx b/x-pack/plugins/observability/public/pages/slos/components/badges/slo_time_window_badge.stories.tsx index 9b0ac40e56d2b..361b839b7bf7e 100644 --- a/x-pack/plugins/observability/public/pages/slos/components/badges/slo_time_window_badge.stories.tsx +++ b/x-pack/plugins/observability/public/pages/slos/components/badges/slo_time_window_badge.stories.tsx @@ -10,7 +10,7 @@ import { ComponentStory } from '@storybook/react'; import { KibanaReactStorybookDecorator } from '../../../../utils/kibana_react.storybook_decorator'; import { SloTimeWindowBadge as Component, Props } from './slo_time_window_badge'; -import { createSLO } from '../../../../data/slo/slo'; +import { buildSlo } from '../../../../data/slo/slo'; export default { component: Component, @@ -21,35 +21,35 @@ export default { const Template: ComponentStory = (props: Props) => ; export const With7DaysRolling = Template.bind({}); -With7DaysRolling.args = { slo: createSLO({ timeWindow: { duration: '7d', isRolling: true } }) }; +With7DaysRolling.args = { slo: buildSlo({ timeWindow: { duration: '7d', isRolling: true } }) }; export const With30DaysRolling = Template.bind({}); -With30DaysRolling.args = { slo: createSLO({ timeWindow: { duration: '30d', isRolling: true } }) }; +With30DaysRolling.args = { slo: buildSlo({ timeWindow: { duration: '30d', isRolling: true } }) }; export const WithMonthlyCalendarStartingToday = Template.bind({}); WithMonthlyCalendarStartingToday.args = { - slo: createSLO({ + slo: buildSlo({ timeWindow: { duration: '1M', calendar: { startTime: new Date().toISOString() } }, }), }; export const WithMonthlyCalendar = Template.bind({}); WithMonthlyCalendar.args = { - slo: createSLO({ + slo: buildSlo({ timeWindow: { duration: '1M', calendar: { startTime: '2022-01-01T00:00:00.000Z' } }, }), }; export const WithBiWeeklyCalendar = Template.bind({}); WithBiWeeklyCalendar.args = { - slo: createSLO({ + slo: buildSlo({ timeWindow: { duration: '2w', calendar: { startTime: '2023-01-01T00:00:00.000Z' } }, }), }; export const WithQuarterlyCalendar = Template.bind({}); WithQuarterlyCalendar.args = { - slo: createSLO({ + slo: buildSlo({ timeWindow: { duration: '1Q', calendar: { startTime: '2022-01-01T00:00:00.000Z' } }, }), }; diff --git a/x-pack/plugins/observability/public/pages/slos/components/slo_delete_confirmation_modal.stories.tsx b/x-pack/plugins/observability/public/pages/slos/components/slo_delete_confirmation_modal.stories.tsx index df9f919f838fe..675aba1158010 100644 --- a/x-pack/plugins/observability/public/pages/slos/components/slo_delete_confirmation_modal.stories.tsx +++ b/x-pack/plugins/observability/public/pages/slos/components/slo_delete_confirmation_modal.stories.tsx @@ -13,7 +13,7 @@ import { SloDeleteConfirmationModal as Component, SloDeleteConfirmationModalProps, } from './slo_delete_confirmation_modal'; -import { anSLO } from '../../../data/slo/slo'; +import { buildSlo } from '../../../data/slo/slo'; export default { component: Component, @@ -26,7 +26,7 @@ const Template: ComponentStory = (props: SloDeleteConfirmation ); const defaultProps = { - slo: anSLO, + slo: buildSlo(), }; export const SloDeleteConfirmationModal = Template.bind({}); diff --git a/x-pack/plugins/observability/public/pages/slos/components/slo_list_item.stories.tsx b/x-pack/plugins/observability/public/pages/slos/components/slo_list_item.stories.tsx index 2cf37d6eea30d..17d7c74ccc066 100644 --- a/x-pack/plugins/observability/public/pages/slos/components/slo_list_item.stories.tsx +++ b/x-pack/plugins/observability/public/pages/slos/components/slo_list_item.stories.tsx @@ -12,7 +12,7 @@ import { HEALTHY_ROLLING_SLO, historicalSummaryData, } from '../../../data/slo/historical_summary_data'; -import { anSLO } from '../../../data/slo/slo'; +import { buildSlo } from '../../../data/slo/slo'; import { KibanaReactStorybookDecorator } from '../../../utils/kibana_react.storybook_decorator'; import { SloListItem as Component, SloListItemProps } from './slo_list_item'; @@ -27,7 +27,7 @@ const Template: ComponentStory = (props: SloListItemProps) => ); const defaultProps = { - slo: anSLO, + slo: buildSlo(), historicalSummary: historicalSummaryData[HEALTHY_ROLLING_SLO], }; diff --git a/x-pack/plugins/observability/public/pages/slos/components/slo_list_items.stories.tsx b/x-pack/plugins/observability/public/pages/slos/components/slo_list_items.stories.tsx index 59465a2a07005..560353e483960 100644 --- a/x-pack/plugins/observability/public/pages/slos/components/slo_list_items.stories.tsx +++ b/x-pack/plugins/observability/public/pages/slos/components/slo_list_items.stories.tsx @@ -10,7 +10,7 @@ import { ComponentStory } from '@storybook/react'; import { KibanaReactStorybookDecorator } from '../../../utils/kibana_react.storybook_decorator'; import { SloListItems as Component, Props } from './slo_list_items'; -import { aForecastedSLO, anSLO } from '../../../data/slo/slo'; +import { sloList } from '../../../data/slo/slo'; export default { component: Component, @@ -21,7 +21,7 @@ export default { const Template: ComponentStory = (props: Props) => ; const defaultProps: Props = { - sloList: [anSLO, anSLO, aForecastedSLO], + sloList: sloList.results, loading: false, error: false, onDeleted: () => {}, diff --git a/x-pack/plugins/observability/public/pages/slos/components/slo_summary.stories.tsx b/x-pack/plugins/observability/public/pages/slos/components/slo_summary.stories.tsx index 8c7a9f7cab909..0998c8b1d4edf 100644 --- a/x-pack/plugins/observability/public/pages/slos/components/slo_summary.stories.tsx +++ b/x-pack/plugins/observability/public/pages/slos/components/slo_summary.stories.tsx @@ -13,7 +13,7 @@ import { HEALTHY_ROLLING_SLO, historicalSummaryData, } from '../../../data/slo/historical_summary_data'; -import { createSLO } from '../../../data/slo/slo'; +import { buildSlo } from '../../../data/slo/slo'; import { SloSummary as Component, Props } from './slo_summary'; export default { @@ -25,7 +25,7 @@ export default { const Template: ComponentStory = (props: Props) => ; const defaultProps = { - slo: createSLO(), + slo: buildSlo(), historicalSummary: historicalSummaryData[HEALTHY_ROLLING_SLO], historicalSummaryLoading: false, };