import { Meta , Story } from '@storybook/react' ; import React , { ComponentProps } from 'react' ; import { MemoryRouter } from 'react-router-dom' ; import { MockApmPluginContextWrapper } from '../../../../../context/apm_plugin/mock_apm_plugin_context' ; import { WaterfallContainer } from './index' ; import { getWaterfall } from './waterfall/waterfall_helpers/waterfall_helpers' ; import { inferredSpans , manyChildrenWithSameLength , simpleTrace , traceChildStartBeforeParent , traceWithErrors , urlParams as testUrlParams , } from './waterfall_container.stories.data' ; type Args = ComponentProps < typeof WaterfallContainer > ; const stories = { title : 'app/TransactionDetails/waterfall' , component : WaterfallContainer , decorators : [ ( StoryComponent ) => ( < MemoryRouter initialEntries = { [ '/services/{serviceName}/transactions/view?rangeFrom=now-15m&rangeTo=now&transactionName=testTransactionName' , ] } > < MockApmPluginContextWrapper > < StoryComponent /> < /MockApmPluginContextWrapper> < /MemoryRouter>), ] , } ; export default stories ; export const Example = ( { urlParams , waterfall } ) => { return < WaterfallContainer urlParams = { urlParams } waterfall = { waterfall } / > ; } ; Example . args = { urlParams : testUrlParams , waterfall : getWaterfall ( simpleTrace , '975c8d5bfd1dd20b' ) , } ; export const WithErrors = ( { urlParams , waterfall } ) => { return < WaterfallContainer urlParams = { urlParams } waterfall = { waterfall } / > ; } ; WithErrors . args = { urlParams : testUrlParams , waterfall : getWaterfall ( traceWithErrors , '975c8d5bfd1dd20b' ) , } ; export const ChildStartsBeforeParent = ( { urlParams , waterfall , } ) => { return < WaterfallContainer urlParams = { urlParams } waterfall = { waterfall } / > ; } ; ChildStartsBeforeParent . args = { urlParams : testUrlParams , waterfall : getWaterfall ( traceChildStartBeforeParent , '975c8d5bfd1dd20b' ) , } ; export const InferredSpans = ( { urlParams , waterfall } ) => { return < WaterfallContainer urlParams = { urlParams } waterfall = { waterfall } / > ; } ; InferredSpans . args = { urlParams : testUrlParams , waterfall : getWaterfall ( inferredSpans , 'f2387d37260d00bd' ) , } ; export const ManyChildrenWithSameLength = ( { urlParams , waterfall , } ) => { return < WaterfallContainer urlParams = { urlParams } waterfall = { waterfall } / > ; } ; ManyChildrenWithSameLength . args = { urlParams : testUrlParams , waterfall : getWaterfall ( manyChildrenWithSameLength , '9a7f717439921d39' ) , } ;