diff --git a/x-pack/plugins/apm/public/components/alerting/transaction_duration_alert_trigger/index.stories.tsx b/x-pack/plugins/apm/public/components/alerting/transaction_duration_alert_trigger/index.stories.tsx index 16b8cc34e9752..d8bae2a3db636 100644 --- a/x-pack/plugins/apm/public/components/alerting/transaction_duration_alert_trigger/index.stories.tsx +++ b/x-pack/plugins/apm/public/components/alerting/transaction_duration_alert_trigger/index.stories.tsx @@ -5,6 +5,7 @@ * 2.0. */ +import { Story } from '@storybook/react'; import { cloneDeep, merge } from 'lodash'; import React, { ComponentType } from 'react'; import { MemoryRouter, Route } from 'react-router-dom'; @@ -14,13 +15,14 @@ import { mockApmPluginContextValue, MockApmPluginContextWrapper, } from '../../../context/apm_plugin/mock_apm_plugin_context'; +import { ApmServiceContextProvider } from '../../../context/apm_service/apm_service_context'; import { MockUrlParamsContextProvider } from '../../../context/url_params_context/mock_url_params_context_provider'; export default { title: 'alerting/TransactionDurationAlertTrigger', component: TransactionDurationAlertTrigger, decorators: [ - (Story: ComponentType) => { + (StoryComponent: ComponentType) => { const contextMock = (merge(cloneDeep(mockApmPluginContextValue), { core: { http: { @@ -39,11 +41,13 @@ export default { return (
- - + + - + + + @@ -54,7 +58,7 @@ export default { ], }; -export function Example() { +export const Example: Story = () => { const params = { threshold: 1500, aggregationType: 'avg' as const, @@ -67,4 +71,4 @@ export function Example() { setAlertProperty={() => undefined} /> ); -} +}; diff --git a/x-pack/plugins/apm/public/components/app/Settings/customize_ui/custom_link/custom_link_table.tsx b/x-pack/plugins/apm/public/components/app/Settings/customize_ui/custom_link/custom_link_table.tsx index 9593802407193..f49f27d94a085 100644 --- a/x-pack/plugins/apm/public/components/app/Settings/customize_ui/custom_link/custom_link_table.tsx +++ b/x-pack/plugins/apm/public/components/app/Settings/customize_ui/custom_link/custom_link_table.tsx @@ -49,7 +49,7 @@ export function CustomLinkTable({ items = [], onCustomLinkSelected }: Props) { truncateText: true, }, { - width: 160, + width: '160px', align: 'right', field: '@timestamp', name: i18n.translate( diff --git a/x-pack/plugins/apm/public/components/app/Settings/schema/schema.stories.tsx b/x-pack/plugins/apm/public/components/app/Settings/schema/schema.stories.tsx index b22260ffabe46..67eae5376a74e 100644 --- a/x-pack/plugins/apm/public/components/app/Settings/schema/schema.stories.tsx +++ b/x-pack/plugins/apm/public/components/app/Settings/schema/schema.stories.tsx @@ -12,6 +12,7 @@ import { CoreStart } from '../../../../../../../../src/core/public'; import { MockApmPluginContextWrapper } from '../../../../context/apm_plugin/mock_apm_plugin_context'; import { createCallApmApi } from '../../../../services/rest/createCallApmApi'; import { Schema } from './'; +import { ConfirmSwitchModal } from './confirm_switch_modal'; interface Args { hasCloudAgentPolicy: boolean; @@ -107,3 +108,18 @@ export default { export const Example: Story = () => { return ; }; + +interface ModalArgs { + unsupportedConfigs: Array<{ key: string; value: string }>; +} + +export const Modal: Story = ({ unsupportedConfigs }) => { + return ( + {}} + onConfirm={() => {}} + unsupportedConfigs={unsupportedConfigs} + /> + ); +}; +Modal.args = { unsupportedConfigs: [{ key: 'test', value: '123' }] }; diff --git a/x-pack/plugins/apm/public/components/app/error_group_overview/List/index.tsx b/x-pack/plugins/apm/public/components/app/error_group_overview/List/index.tsx index 4d7457422e83b..6e181535cc05c 100644 --- a/x-pack/plugins/apm/public/components/app/error_group_overview/List/index.tsx +++ b/x-pack/plugins/apm/public/components/app/error_group_overview/List/index.tsx @@ -79,7 +79,7 @@ function ErrorGroupList({ items, serviceName }: Props) { ), field: 'groupId', sortable: false, - width: unit * 6, + width: `${unit * 6}px`, render: (groupId: string) => { return ( diff --git a/x-pack/plugins/apm/public/components/app/service_inventory/service_list/index.tsx b/x-pack/plugins/apm/public/components/app/service_inventory/service_list/index.tsx index a3b0ec0ac66de..793ca6f0655df 100644 --- a/x-pack/plugins/apm/public/components/app/service_inventory/service_list/index.tsx +++ b/x-pack/plugins/apm/public/components/app/service_inventory/service_list/index.tsx @@ -84,7 +84,7 @@ export function getServiceColumns({ name: i18n.translate('xpack.apm.servicesTable.healthColumnLabel', { defaultMessage: 'Health', }), - width: unit * 6, + width: `${unit * 6}px`, sortable: true, render: (_, { healthStatus }) => { return ( @@ -135,7 +135,7 @@ export function getServiceColumns({ name: i18n.translate('xpack.apm.servicesTable.environmentColumnLabel', { defaultMessage: 'Environment', }), - width: unit * 10, + width: `${unit * 10}px`, sortable: true, render: (_, { environments }) => ( @@ -149,7 +149,7 @@ export function getServiceColumns({ 'xpack.apm.servicesTable.transactionColumnLabel', { defaultMessage: 'Transaction type' } ), - width: unit * 10, + width: `${unit * 10}px`, sortable: true, }, ] @@ -169,7 +169,7 @@ export function getServiceColumns({ /> ), align: 'left', - width: unit * 10, + width: `${unit * 10}px`, }, { field: 'transactionsPerMinute', @@ -186,7 +186,7 @@ export function getServiceColumns({ /> ), align: 'left', - width: unit * 10, + width: `${unit * 10}px`, }, { field: 'transactionErrorRate', @@ -209,7 +209,7 @@ export function getServiceColumns({ ); }, align: 'left', - width: unit * 10, + width: `${unit * 10}px`, }, ]; } diff --git a/x-pack/plugins/apm/public/components/app/service_overview/service_overview.test.tsx b/x-pack/plugins/apm/public/components/app/service_overview/service_overview.test.tsx index 19318553727cb..c348b3f13104a 100644 --- a/x-pack/plugins/apm/public/components/app/service_overview/service_overview.test.tsx +++ b/x-pack/plugins/apm/public/components/app/service_overview/service_overview.test.tsx @@ -32,9 +32,10 @@ import { fromQuery } from '../../shared/Links/url_helpers'; import { MockUrlParamsContextProvider } from '../../../context/url_params_context/mock_url_params_context_provider'; import { uiSettingsServiceMock } from '../../../../../../../src/core/public/mocks'; -const KibanaReactContext = createKibanaReactContext({ +const KibanaReactContext = createKibanaReactContext(({ + uiSettings: { get: () => true }, usageCollection: { reportUiCounter: () => {} }, -} as Partial); +} as unknown) as Partial); const mockParams = { rangeFrom: 'now-15m', diff --git a/x-pack/plugins/apm/public/components/app/transaction_overview/transaction_overview.test.tsx b/x-pack/plugins/apm/public/components/app/transaction_overview/transaction_overview.test.tsx index afed0be7cc209..c7dd0f46cfc22 100644 --- a/x-pack/plugins/apm/public/components/app/transaction_overview/transaction_overview.test.tsx +++ b/x-pack/plugins/apm/public/components/app/transaction_overview/transaction_overview.test.tsx @@ -24,9 +24,10 @@ import { import { fromQuery } from '../../shared/Links/url_helpers'; import { TransactionOverview } from './'; -const KibanaReactContext = createKibanaReactContext({ +const KibanaReactContext = createKibanaReactContext(({ + uiSettings: { get: () => true }, usageCollection: { reportUiCounter: () => {} }, -} as Partial); +} as unknown) as Partial); const history = createMemoryHistory(); jest.spyOn(history, 'push'); diff --git a/x-pack/plugins/apm/public/components/shared/agent_icon/agent_icon.stories.tsx b/x-pack/plugins/apm/public/components/shared/agent_icon/agent_icon.stories.tsx index 68c3edabfa44e..fce7c2b2a2a69 100644 --- a/x-pack/plugins/apm/public/components/shared/agent_icon/agent_icon.stories.tsx +++ b/x-pack/plugins/apm/public/components/shared/agent_icon/agent_icon.stories.tsx @@ -7,73 +7,63 @@ import { EuiCard, - EuiCodeBlock, EuiFlexGroup, EuiFlexItem, EuiImage, - EuiSpacer, EuiToolTip, } from '@elastic/eui'; +import type { Story } from '@storybook/react'; import React from 'react'; import { AGENT_NAMES } from '../../../../common/agent_name'; -import { useTheme } from '../../../hooks/use_theme'; import { getAgentIcon } from './get_agent_icon'; import { AgentIcon } from './index'; export default { - title: 'shared/icons', + title: 'shared/AgentIcon', component: AgentIcon, }; -export function AgentIcons() { - const theme = useTheme(); +export const List: Story = (_args, { globals }) => { + const darkMode = globals.euiTheme.includes('dark'); return ( - <> - - {''} - - - - - - {AGENT_NAMES.map((agentName) => { - return ( - - -

- - - -

- - } - title={agentName} - description={ -
+ + {AGENT_NAMES.map((agentName) => { + return ( + + +

- + -

- } - /> -
- ); - })} -
- +

+ + } + title={agentName} + description={ +
+ + + +
+ } + /> + + ); + })} + ); -} +}; diff --git a/x-pack/plugins/apm/public/components/shared/charts/latency_chart/latency_chart.stories.tsx b/x-pack/plugins/apm/public/components/shared/charts/latency_chart/latency_chart.stories.tsx index ff2b95667a63a..1439e59877ea4 100644 --- a/x-pack/plugins/apm/public/components/shared/charts/latency_chart/latency_chart.stories.tsx +++ b/x-pack/plugins/apm/public/components/shared/charts/latency_chart/latency_chart.stories.tsx @@ -14,7 +14,7 @@ import { ApmPluginContext, ApmPluginContextValue, } from '../../../../context/apm_plugin/apm_plugin_context'; -import { ApmServiceContextProvider } from '../../../../context/apm_service/apm_service_context'; +import { APMServiceContext } from '../../../../context/apm_service/apm_service_context'; import { ChartPointerEventContextProvider } from '../../../../context/chart_pointer_event/chart_pointer_event_context'; import { MockUrlParamsContextProvider } from '../../../../context/url_params_context/mock_url_params_context_provider'; import { @@ -41,6 +41,7 @@ export default { decorators: [ (Story: ComponentType, { args }: StoryContext) => { const { alertsResponse, latencyChartResponse } = args as Args; + const serviceName = 'testService'; const apmPluginContextMock = ({ core: { @@ -51,10 +52,8 @@ export default { basePath: { prepend: () => {} }, get: (endpoint: string) => { switch (endpoint) { - case '/api/apm/services/test-service/transactions/charts/latency': + case `/api/apm/services/${serviceName}/transactions/charts/latency`: return latencyChartResponse; - case '/api/apm/services/test-service/alerts': - return alertsResponse; default: return {}; } @@ -68,24 +67,32 @@ export default { createCallApmApi(apmPluginContextMock.core); + const transactionType = `${Math.random()}`; // So we don't memoize + return ( - - + + - + - + diff --git a/x-pack/plugins/apm/public/components/shared/managed_table/index.tsx b/x-pack/plugins/apm/public/components/shared/managed_table/index.tsx index 58f3a4c61a8a1..3d1527a473740 100644 --- a/x-pack/plugins/apm/public/components/shared/managed_table/index.tsx +++ b/x-pack/plugins/apm/public/components/shared/managed_table/index.tsx @@ -19,7 +19,7 @@ export interface ITableColumn { field?: string; dataType?: string; align?: string; - width?: string | number; + width?: string; sortable?: boolean; render?: (value: any, item: T) => unknown; } diff --git a/x-pack/plugins/apm/public/components/shared/span_icon/span_icon.stories.tsx b/x-pack/plugins/apm/public/components/shared/span_icon/span_icon.stories.tsx index 7d2e2fbefc359..5aec7e9028745 100644 --- a/x-pack/plugins/apm/public/components/shared/span_icon/span_icon.stories.tsx +++ b/x-pack/plugins/apm/public/components/shared/span_icon/span_icon.stories.tsx @@ -7,13 +7,12 @@ import { EuiCard, - EuiCodeBlock, EuiFlexGroup, EuiFlexItem, EuiImage, - EuiSpacer, EuiToolTip, } from '@elastic/eui'; +import type { Story } from '@storybook/react'; import React from 'react'; import { getSpanIcon, spanTypeIcons } from './get_span_icon'; import { SpanIcon } from './index'; @@ -21,72 +20,64 @@ import { SpanIcon } from './index'; const spanTypes = Object.keys(spanTypeIcons); export default { - title: 'shared/icons', + title: 'shared/SpanIcon', component: SpanIcon, }; -export function SpanIcons() { +export const List: Story = () => { return ( - <> - - {''} - + + {spanTypes.map((type) => { + const subTypes = Object.keys(spanTypeIcons[type]); + return subTypes.map((subType) => { + const id = `${type}.${subType}`; - - - - {spanTypes.map((type) => { - const subTypes = Object.keys(spanTypeIcons[type]); - return subTypes.map((subType) => { - const id = `${type}.${subType}`; - - return ( - - + return ( + + + + + +

+ } + title={id} + description={ + <> +
- + -

- } - title={id} - description={ - <> -
- - - -
+
- -
span.type: {type}
-
span.subtype: {subType}
-
- - } - /> -
- ); - }); - })} -
- + +
span.type: {type}
+
span.subtype: {subType}
+
+ + } + /> + + ); + }); + })} +
); -} +};