chore(slo): Improve fixtures and storybook cases (#149639)

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']> = {}
+): SLOWithSummaryResponse['objective'] => {
+  return {
+    target: 0.99,
+    ...params,
+  };
+};
+
+export const buildTimeslicesObjective = (
+  params: Partial<SLOWithSummaryResponse['objective']> = {}
+): SLOWithSummaryResponse['objective'] => {
+  return {
+    target: 0.99,
+    timesliceTarget: 0.95,
+    timesliceWindow: '5m',
+    ...params,
+  };
+};
+
+export const buildHealthySummary = (
+  params: Partial<SLOWithSummaryResponse['summary']> = {}
+): 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']> = {}
+): 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']> = {}
+): 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']> = {}
+): SLOWithSummaryResponse['summary'] => {
+  return {
+    status: 'DEGRADING',
+    sliValue: 0.97,
+    errorBudget: {
+      initial: 0.02,
+      consumed: 0.88,
+      remaining: 0.12,
+      isEstimated: true,
+    },
+    ...params,
+  };
+};

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']['params']> = {}
+): 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']['params']> = {}
+): 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']['params']> = {}
+): SLOWithSummaryResponse['indicator'] => {
+  return {
+    type: 'sli.kql.custom',
+    params: {
+      index: 'some_logs*',
+      good: 'latency < 300',
+      total: 'latency > 0',
+      filter: 'labels.eventId: event-0',
+      ...params,
+    },
+  };
+};

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,125 +71,81 @@ 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,
   perPage: 25,
   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> = {}
+): 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> = {}): SLOWithSummaryResponse {
+export function buildSlo(params: Partial<SLOWithSummaryResponse> = {}): 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',
-  },
-};

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']> = {}
+): SLOWithSummaryResponse['timeWindow'] => {
+  return {
+    duration: '30d',
+    isRolling: true,
+    ...params,
+  };
+};
+
+export const buildCalendarAlignedTimeWindow = (
+  params: Partial<SLOWithSummaryResponse['timeWindow']> = {}
+): SLOWithSummaryResponse['timeWindow'] => {
+  return {
+    duration: '1M',
+    calendar: { startTime: '2023-01-01T00:00:00.000Z' },
+    ...params,
+  };
+};

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<typeof Component> = (props: Props) => <Component {...props} />;
 
 const defaultProps: Props = {
-  slo: anSLO,
+  slo: buildSlo(),
 };
 
 export const SloDetails = Template.bind({});