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 16b8cc34e975..d8bae2a3db63 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 959380240719..f49f27d94a08 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 b22260ffabe4..67eae5376a74 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 4d7457422e83..6e181535cc05 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 a3b0ec0ac66d..793ca6f0655d 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 19318553727c..c348b3f13104 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 afed0be7cc20..c7dd0f46cfc2 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 68c3edabfa44..fce7c2b2a2a6 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 ff2b95667a63..1439e59877ea 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 58f3a4c61a8a..3d1527a47374 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 7d2e2fbefc35..5aec7e902874 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}
+
+ >
+ }
+ />
+
+ );
+ });
+ })}
+
);
-}
+};