Skip to content

Commit

Permalink
[APM] Alerting: Add global option to create all alert types (#78151) (#…
Browse files Browse the repository at this point in the history
…78579)

* adding alert to service page

* sending on alert per service environment and transaction type

* addressing PR comment

* addressing PR comment

Co-authored-by: Elastic Machine <[email protected]>

Co-authored-by: Elastic Machine <[email protected]>
  • Loading branch information
cauemarcondes and elasticmachine authored Sep 29, 2020
1 parent f2c87e0 commit 9b3e54e
Show file tree
Hide file tree
Showing 19 changed files with 1,419 additions and 119 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
* you may not use this file except in compliance with the Elastic License.
*/
import React from 'react';
import { AlertType } from '../../../../../../common/alert_types';
import { AlertAdd } from '../../../../../../../triggers_actions_ui/public';
import { AlertType } from '../../../../common/alert_types';
import { AlertAdd } from '../../../../../triggers_actions_ui/public';

type AlertAddProps = React.ComponentProps<typeof AlertAdd>;

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -34,11 +34,17 @@ export function ServiceAlertTrigger(props: Props) {

useEffect(() => {
// we only want to run this on mount to set default values
setAlertProperty('name', `${alertTypeName} | ${params.serviceName}`);
setAlertProperty('tags', [
'apm',
`service.name:${params.serviceName}`.toLowerCase(),
]);

const alertName = params.serviceName
? `${alertTypeName} | ${params.serviceName}`
: alertTypeName;
setAlertProperty('name', alertName);

const tags = ['apm'];
if (params.serviceName) {
tags.push(`service.name:${params.serviceName}`.toLowerCase());
}
setAlertProperty('tags', tags);
Object.keys(params).forEach((key) => {
setAlertParams(key, params[key]);
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -90,16 +90,16 @@ export function TransactionDurationAlertTrigger(props: Props) {

const fields = [
<ServiceField value={serviceName} />,
<EnvironmentField
currentValue={params.environment}
options={environmentOptions}
onChange={(e) => setAlertParams('environment', e.target.value)}
/>,
<TransactionTypeField
currentValue={params.transactionType}
options={transactionTypes.map((key) => ({ text: key, value: key }))}
onChange={(e) => setAlertParams('transactionType', e.target.value)}
/>,
<EnvironmentField
currentValue={params.environment}
options={environmentOptions}
onChange={(e) => setAlertParams('environment', e.target.value)}
/>,
<PopoverExpression
value={params.aggregationType}
title={i18n.translate('xpack.apm.transactionDurationAlertTrigger.when', {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,6 @@ import {
SelectAnomalySeverity,
} from './SelectAnomalySeverity';
import { ENVIRONMENT_ALL } from '../../../../common/environment_filter_values';
import {
TRANSACTION_PAGE_LOAD,
TRANSACTION_REQUEST,
} from '../../../../common/transaction_types';
import {
EnvironmentField,
ServiceField,
Expand All @@ -32,8 +28,8 @@ import {
interface Params {
windowSize: number;
windowUnit: string;
serviceName: string;
transactionType: string;
serviceName?: string;
transactionType?: string;
environment: string;
anomalySeverityType:
| ANOMALY_SEVERITY.CRITICAL
Expand All @@ -53,23 +49,17 @@ export function TransactionDurationAnomalyAlertTrigger(props: Props) {
const { urlParams } = useUrlParams();
const transactionTypes = useServiceTransactionTypes(urlParams);
const { serviceName } = useParams<{ serviceName?: string }>();
const { start, end } = urlParams;
const { start, end, transactionType } = urlParams;
const { environmentOptions } = useEnvironments({ serviceName, start, end });
const supportedTransactionTypes = transactionTypes.filter((transactionType) =>
[TRANSACTION_PAGE_LOAD, TRANSACTION_REQUEST].includes(transactionType)
);

if (!supportedTransactionTypes.length || !serviceName) {
if (serviceName && !transactionTypes.length) {
return null;
}

// 'page-load' for RUM, 'request' otherwise
const transactionType = supportedTransactionTypes[0];

const defaults: Params = {
windowSize: 15,
windowUnit: 'm',
transactionType,
transactionType: transactionType || transactionTypes[0],
serviceName,
environment: urlParams.environment || ENVIRONMENT_ALL.value,
anomalySeverityType: ANOMALY_SEVERITY.CRITICAL,
Expand All @@ -82,7 +72,11 @@ export function TransactionDurationAnomalyAlertTrigger(props: Props) {

const fields = [
<ServiceField value={serviceName} />,
<TransactionTypeField currentValue={transactionType} />,
<TransactionTypeField
currentValue={params.transactionType}
options={transactionTypes.map((key) => ({ text: key, value: key }))}
onChange={(e) => setAlertParams('transactionType', e.target.value)}
/>,
<EnvironmentField
currentValue={params.environment}
options={environmentOptions}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export function TransactionErrorRateAlertTrigger(props: Props) {
const { start, end, transactionType } = urlParams;
const { environmentOptions } = useEnvironments({ serviceName, start, end });

if (!transactionTypes.length || !serviceName) {
if (serviceName && !transactionTypes.length) {
return null;
}

Expand All @@ -62,16 +62,16 @@ export function TransactionErrorRateAlertTrigger(props: Props) {

const fields = [
<ServiceField value={serviceName} />,
<EnvironmentField
currentValue={params.environment}
options={environmentOptions}
onChange={(e) => setAlertParams('environment', e.target.value)}
/>,
<TransactionTypeField
currentValue={params.transactionType}
options={transactionTypes.map((key) => ({ text: key, value: key }))}
onChange={(e) => setAlertParams('transactionType', e.target.value)}
/>,
<EnvironmentField
currentValue={params.environment}
options={environmentOptions}
onChange={(e) => setAlertParams('environment', e.target.value)}
/>,
<IsAboveField
value={params.threshold}
unit="%"
Expand Down
61 changes: 61 additions & 0 deletions x-pack/plugins/apm/public/components/alerting/fields.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/
import React from 'react';
import { ServiceField, TransactionTypeField } from './fields';
import { act, fireEvent, render } from '@testing-library/react';
import { expectTextsInDocument } from '../../utils/testHelpers';

describe('alerting fields', () => {
describe('Service Fiels', () => {
it('renders with value', () => {
const component = render(<ServiceField value="foo" />);
expectTextsInDocument(component, ['foo']);
});
it('renders with All when value is not defined', () => {
const component = render(<ServiceField />);
expectTextsInDocument(component, ['All']);
});
});
describe('Transaction Type Field', () => {
it('renders select field when multiple options available', () => {
const options = [
{ text: 'Foo', value: 'foo' },
{ text: 'Bar', value: 'bar' },
];
const { getByText, getByTestId } = render(
<TransactionTypeField currentValue="Foo" options={options} />
);

act(() => {
fireEvent.click(getByText('Foo'));
});

const selectBar = getByTestId('transactionTypeField');
expect(selectBar instanceof HTMLSelectElement).toBeTruthy();
const selectOptions = (selectBar as HTMLSelectElement).options;
expect(selectOptions.length).toEqual(2);
expect(
Object.values(selectOptions).map((option) => option.value)
).toEqual(['foo', 'bar']);
});
it('renders read-only field when single option available', () => {
const options = [{ text: 'Bar', value: 'bar' }];
const component = render(
<TransactionTypeField currentValue="Bar" options={options} />
);
expectTextsInDocument(component, ['Bar']);
});
it('renders read-only All option when no option available', () => {
const component = render(<TransactionTypeField currentValue="" />);
expectTextsInDocument(component, ['All']);
});

it('renders current value when available', () => {
const component = render(<TransactionTypeField currentValue="foo" />);
expectTextsInDocument(component, ['foo']);
});
});
});
15 changes: 11 additions & 4 deletions x-pack/plugins/apm/public/components/alerting/fields.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,17 @@ import { EuiSelectOption } from '@elastic/eui';
import { getEnvironmentLabel } from '../../../common/environment_filter_values';
import { PopoverExpression } from './ServiceAlertTrigger/PopoverExpression';

const ALL_OPTION = i18n.translate('xpack.apm.alerting.fields.all_option', {
defaultMessage: 'All',
});

export function ServiceField({ value }: { value?: string }) {
return (
<EuiExpression
description={i18n.translate('xpack.apm.alerting.fields.service', {
defaultMessage: 'Service',
})}
value={value}
value={value || ALL_OPTION}
/>
);
}
Expand Down Expand Up @@ -53,21 +57,24 @@ export function TransactionTypeField({
options,
onChange,
}: {
currentValue: string;
currentValue?: string;
options?: EuiSelectOption[];
onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
}) {
const label = i18n.translate('xpack.apm.alerting.fields.type', {
defaultMessage: 'Type',
});

if (!options || options.length === 1) {
return <EuiExpression description={label} value={currentValue} />;
if (!options || options.length <= 1) {
return (
<EuiExpression description={label} value={currentValue || ALL_OPTION} />
);
}

return (
<PopoverExpression value={currentValue} title={label}>
<EuiSelect
data-test-subj="transactionTypeField"
value={currentValue}
options={options}
onChange={onChange}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

import { Capabilities } from 'kibana/public';
import { ApmPluginSetupDeps } from '../../plugin';

export const getAlertingCapabilities = (
plugins: ApmPluginSetupDeps,
capabilities: Capabilities
) => {
const canReadAlerts = !!capabilities.apm['alerting:show'];
const canSaveAlerts = !!capabilities.apm['alerting:save'];
const isAlertingPluginEnabled = 'alerts' in plugins;
const isAlertingAvailable =
isAlertingPluginEnabled && (canReadAlerts || canSaveAlerts);
const isMlPluginEnabled = 'ml' in plugins;
const canReadAnomalies = !!(
isMlPluginEnabled &&
capabilities.ml.canAccessML &&
capabilities.ml.canGetJobs
);

return {
isAlertingAvailable,
canReadAlerts,
canSaveAlerts,
canReadAnomalies,
};
};
Loading

0 comments on commit 9b3e54e

Please sign in to comment.