Jest and Storybook fixes (#104991)
This commit is contained in:
parent
5bd4762561
commit
88ac1f9761
11 changed files with 149 additions and 139 deletions
|
@ -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 (
|
||||
<div style={{ width: 400 }}>
|
||||
<MemoryRouter initialEntries={['/transactions/test-service-name']}>
|
||||
<Route path="/transactions/:serviceName">
|
||||
<MemoryRouter initialEntries={['/services/test-service-name']}>
|
||||
<Route path="/services/:serviceName">
|
||||
<MockApmPluginContextWrapper value={contextMock}>
|
||||
<MockUrlParamsContextProvider>
|
||||
<Story />
|
||||
<ApmServiceContextProvider>
|
||||
<StoryComponent />
|
||||
</ApmServiceContextProvider>
|
||||
</MockUrlParamsContextProvider>
|
||||
</MockApmPluginContextWrapper>
|
||||
</Route>
|
||||
|
@ -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}
|
||||
/>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
|
|
@ -49,7 +49,7 @@ export function CustomLinkTable({ items = [], onCustomLinkSelected }: Props) {
|
|||
truncateText: true,
|
||||
},
|
||||
{
|
||||
width: 160,
|
||||
width: '160px',
|
||||
align: 'right',
|
||||
field: '@timestamp',
|
||||
name: i18n.translate(
|
||||
|
|
|
@ -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 <Schema />;
|
||||
};
|
||||
|
||||
interface ModalArgs {
|
||||
unsupportedConfigs: Array<{ key: string; value: string }>;
|
||||
}
|
||||
|
||||
export const Modal: Story<ModalArgs> = ({ unsupportedConfigs }) => {
|
||||
return (
|
||||
<ConfirmSwitchModal
|
||||
onCancel={() => {}}
|
||||
onConfirm={() => {}}
|
||||
unsupportedConfigs={unsupportedConfigs}
|
||||
/>
|
||||
);
|
||||
};
|
||||
Modal.args = { unsupportedConfigs: [{ key: 'test', value: '123' }] };
|
||||
|
|
|
@ -79,7 +79,7 @@ function ErrorGroupList({ items, serviceName }: Props) {
|
|||
),
|
||||
field: 'groupId',
|
||||
sortable: false,
|
||||
width: unit * 6,
|
||||
width: `${unit * 6}px`,
|
||||
render: (groupId: string) => {
|
||||
return (
|
||||
<GroupIdLink serviceName={serviceName} errorGroupId={groupId}>
|
||||
|
|
|
@ -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 }) => (
|
||||
<EnvironmentBadge environments={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`,
|
||||
},
|
||||
];
|
||||
}
|
||||
|
|
|
@ -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<CoreStart>);
|
||||
} as unknown) as Partial<CoreStart>);
|
||||
|
||||
const mockParams = {
|
||||
rangeFrom: 'now-15m',
|
||||
|
|
|
@ -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<CoreStart>);
|
||||
} as unknown) as Partial<CoreStart>);
|
||||
|
||||
const history = createMemoryHistory();
|
||||
jest.spyOn(history, 'push');
|
||||
|
|
|
@ -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 (
|
||||
<>
|
||||
<EuiCodeBlock language="html" isCopyable paddingSize="m">
|
||||
{'<AgentIcon agentName="dotnet" />'}
|
||||
</EuiCodeBlock>
|
||||
|
||||
<EuiSpacer />
|
||||
|
||||
<EuiFlexGroup gutterSize="l" wrap={true}>
|
||||
{AGENT_NAMES.map((agentName) => {
|
||||
return (
|
||||
<EuiFlexItem key={agentName} grow={false}>
|
||||
<EuiCard
|
||||
icon={
|
||||
<>
|
||||
<p>
|
||||
<EuiToolTip
|
||||
position="top"
|
||||
content="Icon rendered with `EuiImage`"
|
||||
>
|
||||
<EuiImage
|
||||
size="s"
|
||||
hasShadow
|
||||
alt={agentName}
|
||||
src={getAgentIcon(agentName, theme.darkMode)}
|
||||
/>
|
||||
</EuiToolTip>
|
||||
</p>
|
||||
</>
|
||||
}
|
||||
title={agentName}
|
||||
description={
|
||||
<div>
|
||||
<EuiFlexGroup gutterSize="l" wrap={true}>
|
||||
{AGENT_NAMES.map((agentName) => {
|
||||
return (
|
||||
<EuiFlexItem key={agentName} grow={false}>
|
||||
<EuiCard
|
||||
icon={
|
||||
<>
|
||||
<p>
|
||||
<EuiToolTip
|
||||
position="bottom"
|
||||
content="Icon rendered with `AgentIcon`"
|
||||
position="top"
|
||||
content="Icon rendered with `EuiImage`"
|
||||
>
|
||||
<AgentIcon agentName={agentName} />
|
||||
<EuiImage
|
||||
size="s"
|
||||
hasShadow
|
||||
alt={agentName}
|
||||
src={getAgentIcon(agentName, darkMode)}
|
||||
/>
|
||||
</EuiToolTip>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
);
|
||||
})}
|
||||
</EuiFlexGroup>
|
||||
</>
|
||||
</p>
|
||||
</>
|
||||
}
|
||||
title={agentName}
|
||||
description={
|
||||
<div>
|
||||
<EuiToolTip
|
||||
position="bottom"
|
||||
content="Icon rendered with `AgentIcon`"
|
||||
>
|
||||
<AgentIcon agentName={agentName} />
|
||||
</EuiToolTip>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
);
|
||||
})}
|
||||
</EuiFlexGroup>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
|
|
@ -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 (
|
||||
<ApmPluginContext.Provider value={apmPluginContextMock}>
|
||||
<MemoryRouter initialEntries={[`/app/apm/services/test-service`]}>
|
||||
<Route path="/app/apm/services/:serviceName">
|
||||
<MemoryRouter initialEntries={[`/services/${serviceName}`]}>
|
||||
<Route path="/services/:serviceName">
|
||||
<KibanaContextProvider
|
||||
services={{ ...apmPluginContextMock.core }}
|
||||
>
|
||||
<MockUrlParamsContextProvider
|
||||
params={{
|
||||
latencyAggregationType: LatencyAggregationType.avg,
|
||||
transactionType: `${Math.random()}`, // So we don't memoize
|
||||
}}
|
||||
>
|
||||
<ApmServiceContextProvider>
|
||||
<APMServiceContext.Provider
|
||||
value={{
|
||||
alerts: alertsResponse.alerts,
|
||||
serviceName,
|
||||
transactionType,
|
||||
transactionTypes: [],
|
||||
}}
|
||||
>
|
||||
<ChartPointerEventContextProvider>
|
||||
<Story />
|
||||
</ChartPointerEventContextProvider>
|
||||
</ApmServiceContextProvider>
|
||||
</APMServiceContext.Provider>
|
||||
</MockUrlParamsContextProvider>
|
||||
</KibanaContextProvider>
|
||||
</Route>
|
||||
|
|
|
@ -19,7 +19,7 @@ export interface ITableColumn<T> {
|
|||
field?: string;
|
||||
dataType?: string;
|
||||
align?: string;
|
||||
width?: string | number;
|
||||
width?: string;
|
||||
sortable?: boolean;
|
||||
render?: (value: any, item: T) => unknown;
|
||||
}
|
||||
|
|
|
@ -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 (
|
||||
<>
|
||||
<EuiCodeBlock language="html" isCopyable paddingSize="m">
|
||||
{'<SpanIcon type="db" subtype="cassandra" />'}
|
||||
</EuiCodeBlock>
|
||||
<EuiFlexGroup gutterSize="l" wrap={true}>
|
||||
{spanTypes.map((type) => {
|
||||
const subTypes = Object.keys(spanTypeIcons[type]);
|
||||
return subTypes.map((subType) => {
|
||||
const id = `${type}.${subType}`;
|
||||
|
||||
<EuiSpacer />
|
||||
|
||||
<EuiFlexGroup gutterSize="l" wrap={true}>
|
||||
{spanTypes.map((type) => {
|
||||
const subTypes = Object.keys(spanTypeIcons[type]);
|
||||
return subTypes.map((subType) => {
|
||||
const id = `${type}.${subType}`;
|
||||
|
||||
return (
|
||||
<EuiFlexItem key={id}>
|
||||
<EuiCard
|
||||
icon={
|
||||
<p>
|
||||
return (
|
||||
<EuiFlexItem key={id}>
|
||||
<EuiCard
|
||||
icon={
|
||||
<p>
|
||||
<EuiToolTip
|
||||
position="top"
|
||||
content="Icon rendered with `EuiImage`"
|
||||
>
|
||||
<EuiImage
|
||||
size="s"
|
||||
hasShadow
|
||||
alt={id}
|
||||
src={getSpanIcon(type, subType)}
|
||||
/>
|
||||
</EuiToolTip>
|
||||
</p>
|
||||
}
|
||||
title={id}
|
||||
description={
|
||||
<>
|
||||
<div>
|
||||
<EuiToolTip
|
||||
position="top"
|
||||
content="Icon rendered with `EuiImage`"
|
||||
position="bottom"
|
||||
content="Icon rendered with `SpanIcon`"
|
||||
>
|
||||
<EuiImage
|
||||
size="s"
|
||||
hasShadow
|
||||
alt={id}
|
||||
src={getSpanIcon(type, subType)}
|
||||
/>
|
||||
<SpanIcon type={type} subType={subType} />
|
||||
</EuiToolTip>
|
||||
</p>
|
||||
}
|
||||
title={id}
|
||||
description={
|
||||
<>
|
||||
<div>
|
||||
<EuiToolTip
|
||||
position="bottom"
|
||||
content="Icon rendered with `SpanIcon`"
|
||||
>
|
||||
<SpanIcon type={type} subType={subType} />
|
||||
</EuiToolTip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<code
|
||||
style={{
|
||||
textAlign: 'left',
|
||||
whiteSpace: 'nowrap',
|
||||
}}
|
||||
>
|
||||
<div>span.type: {type}</div>
|
||||
<div>span.subtype: {subType}</div>
|
||||
</code>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
);
|
||||
});
|
||||
})}
|
||||
</EuiFlexGroup>
|
||||
</>
|
||||
<code
|
||||
style={{
|
||||
textAlign: 'left',
|
||||
whiteSpace: 'nowrap',
|
||||
}}
|
||||
>
|
||||
<div>span.type: {type}</div>
|
||||
<div>span.subtype: {subType}</div>
|
||||
</code>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
);
|
||||
});
|
||||
})}
|
||||
</EuiFlexGroup>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
|
Loading…
Reference in a new issue