mirror of
https://github.com/elastic/kibana.git
synced 2025-04-23 01:13:23 -04:00
[Chore] Rename getAddAlertFlyout to getAddRuleFlyout (#153082)
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Coen Warmer
GitHub
parent
bb3f91715e
commit
b24cdb1b39
16 changed files with 128 additions and 92 deletions
|
|
@ -91,7 +91,7 @@ export function AlertsPopover({
|
|||
updateDataViewList(metadata.adHocDataViewList);
|
||||
};
|
||||
|
||||
return triggersActionsUi?.getAddAlertFlyout({
|
||||
return triggersActionsUi?.getAddRuleFlyout({
|
||||
metadata: discoverMetadata,
|
||||
consumer: 'discover',
|
||||
onClose: (_, metadata) => {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
* 2.0.
|
||||
*/
|
||||
|
||||
import React, { useMemo, useState, useCallback } from 'react';
|
||||
import React, { useState, useCallback } from 'react';
|
||||
|
||||
import { EuiIcon, EuiFlexItem, EuiCard, EuiFlexGroup } from '@elastic/eui';
|
||||
|
||||
|
|
@ -13,23 +13,13 @@ import { AlertingExampleComponentParams } from '../application';
|
|||
import { ALERTING_EXAMPLE_APP_ID } from '../../common/constants';
|
||||
|
||||
export const CreateAlert = ({
|
||||
triggersActionsUi,
|
||||
triggersActionsUi: { getAddRuleFlyout: AddRuleFlyout },
|
||||
}: Pick<AlertingExampleComponentParams, 'triggersActionsUi'>) => {
|
||||
const [alertFlyoutVisible, setAlertFlyoutVisibility] = useState<boolean>(false);
|
||||
const [ruleFlyoutVisible, setRuleFlyoutVisibility] = useState<boolean>(false);
|
||||
|
||||
const onCloseAlertFlyout = useCallback(
|
||||
() => setAlertFlyoutVisibility(false),
|
||||
[setAlertFlyoutVisibility]
|
||||
);
|
||||
|
||||
const AddAlertFlyout = useMemo(
|
||||
() =>
|
||||
triggersActionsUi.getAddAlertFlyout({
|
||||
consumer: ALERTING_EXAMPLE_APP_ID,
|
||||
onClose: onCloseAlertFlyout,
|
||||
}),
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
[onCloseAlertFlyout]
|
||||
() => setRuleFlyoutVisibility(false),
|
||||
[setRuleFlyoutVisibility]
|
||||
);
|
||||
|
||||
return (
|
||||
|
|
@ -39,10 +29,14 @@ export const CreateAlert = ({
|
|||
icon={<EuiIcon size="xxl" type={`bell`} />}
|
||||
title={`Create Rule`}
|
||||
description="Create a new Rule based on one of our example Rule Types ."
|
||||
onClick={() => setAlertFlyoutVisibility(true)}
|
||||
onClick={() => setRuleFlyoutVisibility(true)}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>{alertFlyoutVisible && AddAlertFlyout}</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
{ruleFlyoutVisible ? (
|
||||
<AddRuleFlyout consumer={ALERTING_EXAMPLE_APP_ID} onClose={onCloseAlertFlyout} />
|
||||
) : null}
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@ export function AlertingFlyout(props: Props) {
|
|||
const addAlertFlyout = useMemo(
|
||||
() =>
|
||||
ruleType &&
|
||||
services.triggersActionsUi.getAddAlertFlyout({
|
||||
services.triggersActionsUi.getAddRuleFlyout({
|
||||
consumer: APM_SERVER_FEATURE_ID,
|
||||
onClose: onCloseAddFlyout,
|
||||
ruleTypeId: ruleType,
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ export const AlertFlyout = ({ options, nodeType, filter, visible, setVisible }:
|
|||
const AddAlertFlyout = useMemo(
|
||||
() =>
|
||||
triggersActionsUI &&
|
||||
triggersActionsUI.getAddAlertFlyout({
|
||||
triggersActionsUI.getAddRuleFlyout({
|
||||
consumer: 'infrastructure',
|
||||
onClose: onCloseFlyout,
|
||||
canChangeTrigger: false,
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ export const AlertFlyout = (props: Props) => {
|
|||
const AddAlertFlyout = useMemo(
|
||||
() =>
|
||||
triggersActionsUI &&
|
||||
triggersActionsUI.getAddAlertFlyout({
|
||||
triggersActionsUI.getAddRuleFlyout({
|
||||
consumer: 'logs',
|
||||
onClose: onCloseFlyout,
|
||||
canChangeTrigger: false,
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ export const AlertFlyout = ({ metric, nodeType, visible, setVisible }: Props) =>
|
|||
const AddAlertFlyout = useMemo(
|
||||
() =>
|
||||
triggersActionsUI &&
|
||||
triggersActionsUI.getAddAlertFlyout({
|
||||
triggersActionsUI.getAddRuleFlyout({
|
||||
consumer: 'infrastructure',
|
||||
onClose: onCloseFlyout,
|
||||
canChangeTrigger: false,
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ export const AlertFlyout = (props: Props) => {
|
|||
const AddAlertFlyout = useMemo(
|
||||
() =>
|
||||
triggersActionsUI &&
|
||||
triggersActionsUI.getAddAlertFlyout({
|
||||
triggersActionsUI.getAddRuleFlyout({
|
||||
consumer: 'infrastructure',
|
||||
onClose: onCloseFlyout,
|
||||
canChangeTrigger: false,
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@ export const MlAnomalyAlertFlyout: FC<MlAnomalyAlertFlyoutProps> = ({
|
|||
});
|
||||
}
|
||||
|
||||
return triggersActionsUi.getAddAlertFlyout({
|
||||
return triggersActionsUi.getAddRuleFlyout({
|
||||
...commonProps,
|
||||
consumer: PLUGIN_ID,
|
||||
canChangeTrigger: false,
|
||||
|
|
|
|||
|
|
@ -26,15 +26,13 @@ const embeddableStartMock = {
|
|||
const triggersActionsUiStartMock = {
|
||||
createStart() {
|
||||
return {
|
||||
getAddAlertFlyout: jest.fn(() => (
|
||||
<div data-test-subj="add-alerts-flyout">mocked component</div>
|
||||
)),
|
||||
getAlertsSearchBar: jest.fn(() => (
|
||||
<div data-test-subj="alerts-search-bar">mocked component</div>
|
||||
)),
|
||||
getAlertsStateTable: jest.fn(() => (
|
||||
<div data-test-subj="alerts-state-table">mocked component</div>
|
||||
)),
|
||||
getAddRuleFlyout: jest.fn(() => <div data-test-subj="add-rule-flyout">mocked component</div>),
|
||||
getEditAlertFlyout: jest.fn(() => (
|
||||
<div data-test-subj="edit-alert-flyout">mocked component</div>
|
||||
)),
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ function RulesPage() {
|
|||
http,
|
||||
docLinks,
|
||||
triggersActionsUi: {
|
||||
getAddAlertFlyout: AddAlertFlyout,
|
||||
getAddRuleFlyout: AddRuleFlyout,
|
||||
getRulesList: RuleList,
|
||||
getRulesSettingsLink: RulesSettingsLink,
|
||||
},
|
||||
|
|
@ -121,7 +121,7 @@ function RulesPage() {
|
|||
</EuiFlexGroup>
|
||||
|
||||
{addRuleFlyoutVisibility && (
|
||||
<AddAlertFlyout
|
||||
<AddRuleFlyout
|
||||
consumer={ALERTS_FEATURE_ID}
|
||||
filteredRuleTypes={filteredRuleTypes}
|
||||
onClose={() => {
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ export const UptimeAlertsFlyoutWrapperComponent = ({
|
|||
);
|
||||
const AddAlertFlyout = useMemo(
|
||||
() =>
|
||||
triggersActionsUi.getAddAlertFlyout({
|
||||
triggersActionsUi.getAddRuleFlyout({
|
||||
consumer: 'uptime',
|
||||
onClose: onCloseAlertFlyout,
|
||||
ruleTypeId: alertTypeId,
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ export const TransformAlertFlyout: FC<TransformAlertFlyoutProps> = ({
|
|||
});
|
||||
}
|
||||
|
||||
return triggersActionsUi.getAddAlertFlyout({
|
||||
return triggersActionsUi.getAddRuleFlyout({
|
||||
...commonProps,
|
||||
consumer: 'stackAlerts',
|
||||
canChangeTrigger: false,
|
||||
|
|
|
|||
|
|
@ -1,14 +1,13 @@
|
|||
# Kibana Alerts and Actions UI
|
||||
|
||||
The Kibana alerts and actions UI plugin provides a user interface for managing alerts and actions.
|
||||
The Kibana alerts and actions UI plugin provides a user interface for managing alerts and actions.
|
||||
As a developer you can reuse and extend built-in alerts and actions UI functionality:
|
||||
|
||||
- Create and register a new Alert Type.
|
||||
- Create and register a new Action Type.
|
||||
- Embed the Create Alert flyout within any Kibana plugin.
|
||||
|
||||
-----
|
||||
|
||||
---
|
||||
|
||||
Table of Contents
|
||||
|
||||
|
|
@ -97,7 +96,6 @@ interface IndexThresholdProps {
|
|||
| setRuleProperty | Alert reducer method, which is used to create a new copy of alert object with the changed any direct alert property value. |
|
||||
| errors | Alert level errors tracking object. |
|
||||
|
||||
|
||||
Alert reducer is defined on the AlertAdd functional component level and passed down to the subcomponents to provide a new state of Alert object:
|
||||
|
||||
```
|
||||
|
|
@ -128,6 +126,7 @@ const setRuleProperty = (key: string, value: any) => {
|
|||
```
|
||||
|
||||
'x-pack/plugins/triggers_actions_ui/public/application/sections/alert_add/alert_reducer.ts' define the methods for changing different type of alert properties:
|
||||
|
||||
```
|
||||
export const alertReducer = (state: any, action: AlertReducerAction) => {
|
||||
const { command, payload } = action;
|
||||
|
|
@ -236,6 +235,7 @@ Index Threshold Alert form with validation:
|
|||
## Alert type model definition
|
||||
|
||||
Each alert type should be defined as `RuleTypeModel` object with the these properties:
|
||||
|
||||
```
|
||||
id: string;
|
||||
name: string;
|
||||
|
|
@ -246,6 +246,7 @@ Each alert type should be defined as `RuleTypeModel` object with the these prope
|
|||
>;
|
||||
defaultActionMessage?: string;
|
||||
```
|
||||
|
||||
| Property | Description |
|
||||
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| id | Alert type id. Should be the same as on the server side. |
|
||||
|
|
@ -257,9 +258,10 @@ Each alert type should be defined as `RuleTypeModel` object with the these prope
|
|||
| defaultRecoveryMessage | Optional property for providing a default message for all added actions with `message` property for the Recovery action group. |
|
||||
| requiresAppContext | Define if alert type is enabled for create and edit in the alerting management UI. |
|
||||
|
||||
IMPORTANT: The current UI supports a single action group only.
|
||||
IMPORTANT: The current UI supports a single action group only.
|
||||
Action groups are mapped from the server API result for [GET /api/alerts/list_alert_types: List alert types](https://github.com/elastic/kibana/tree/main/x-pack/plugins/alerting#get-apialerttypes-list-alert-types).
|
||||
Server side alert type model:
|
||||
|
||||
```
|
||||
export interface RuleType {
|
||||
id: string;
|
||||
|
|
@ -272,6 +274,7 @@ export interface RuleType {
|
|||
requiresAppContext: boolean;
|
||||
}
|
||||
```
|
||||
|
||||
Only the default (which means first item of the array) action group is displayed in the current UI.
|
||||
Design of user interface and server API for multiple action groups is under discussion and development.
|
||||
|
||||
|
|
@ -280,11 +283,11 @@ Design of user interface and server API for multiple action groups is under disc
|
|||
There are two ways of registering a new alert type:
|
||||
|
||||
1. Directly in the `triggers_actions_ui` plugin. In this case, the alert type will be available in the Create Alert flyout of the Alerts and Actions management section.
|
||||
Registration code for a new alert type model should be added to the file `x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/index.ts`
|
||||
Only registered alert types are available in UI.
|
||||
Registration code for a new alert type model should be added to the file `x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/index.ts`
|
||||
Only registered alert types are available in UI.
|
||||
|
||||
2. Register the alert type in another plugin. In this case, the alert type will be available only in the current plugin UI.
|
||||
It should be done by importing dependency `TriggersAndActionsUIPublicPluginSetup` and adding the next code on plugin setup:
|
||||
2. Register the alert type in another plugin. In this case, the alert type will be available only in the current plugin UI.
|
||||
It should be done by importing dependency `TriggersAndActionsUIPublicPluginSetup` and adding the next code on plugin setup:
|
||||
|
||||
```
|
||||
function getSomeNewAlertType() {
|
||||
|
|
@ -296,13 +299,14 @@ triggersActionsUi.ruleTypeRegistry.register(getSomeNewAlertType());
|
|||
|
||||
## Create and register new alert type UI example
|
||||
|
||||
Before registering a UI for a new Alert Type, you should first register the type on the server-side by following the Alerting guide: https://github.com/elastic/kibana/tree/main/x-pack/plugins/alerting#example
|
||||
Before registering a UI for a new Alert Type, you should first register the type on the server-side by following the Alerting guide: https://github.com/elastic/kibana/tree/main/x-pack/plugins/alerting#example
|
||||
|
||||
Alert type UI is expected to be defined as `RuleTypeModel` object.
|
||||
|
||||
Below is a list of steps that should be done to build and register a new alert type with the name `Example Alert Type`:
|
||||
|
||||
1. At any suitable place in Kibana, create a file, which will expose an object implementing interface [RuleTypeModel](https://github.com/elastic/kibana/blob/55b7905fb5265b73806006e7265739545d7521d0/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/types.ts#L83). Example:
|
||||
|
||||
```
|
||||
import { lazy } from 'react';
|
||||
import { RuleTypeModel } from '../../../../types';
|
||||
|
|
@ -320,9 +324,11 @@ export function getAlertType(): RuleTypeModel {
|
|||
};
|
||||
}
|
||||
```
|
||||
|
||||
Fields of this object `RuleTypeModel` will be mapped properly in the UI below.
|
||||
|
||||
2. Define `ruleParamsExpression` as `React.FunctionComponent` - this is the form for filling Alert params based on the current Alert type.
|
||||
|
||||
```
|
||||
import React, { useState } from 'react';
|
||||
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
|
||||
|
|
@ -375,11 +381,13 @@ export const ExampleExpression: React.FunctionComponent<ExampleProps> = ({
|
|||
export {ExampleExpression as default};
|
||||
|
||||
```
|
||||
|
||||
This alert type form becomes available, when the card of `Example Alert Type` is selected.
|
||||
Each expression word here is `EuiExpression` component and implements the basic aggregation, grouping and comparison methods.
|
||||
Expression components, which can be embedded to different alert types, are described here [Common expression components](#common-expression-components).
|
||||
|
||||
3. Define alert type params validation using the property of `RuleTypeModel` `validate`:
|
||||
3. Define alert type params validation using the property of `RuleTypeModel` `validate`:
|
||||
|
||||
```
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { ValidationResult } from '../../../../types';
|
||||
|
|
@ -406,6 +414,7 @@ export function validateExampleAlertType({
|
|||
```
|
||||
|
||||
4. Extend registration code with the new alert type register in the file `x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/index.ts`
|
||||
|
||||
```
|
||||
import { getAlertType as getExampledAlertType } from './example';
|
||||
...
|
||||
|
|
@ -436,6 +445,7 @@ Click on the select card for `Example Alert Type` to open the expression form th
|
|||
```
|
||||
|
||||
Props definition:
|
||||
|
||||
```
|
||||
interface WhenExpressionProps {
|
||||
aggType: string;
|
||||
|
|
@ -451,7 +461,7 @@ interface WhenExpressionProps {
|
|||
| aggType | Selected aggregation type that will be set as the alert type property. |
|
||||
| customAggTypesOptions | (Optional) List of aggregation types that replaces the default options defined in constants `x-pack/plugins/triggers_actions_ui/public/common/constants/aggregation_types.ts`. |
|
||||
| onChangeSelectedAggType | event handler that will be executed when selected aggregation type is changed. |
|
||||
| popupPosition | (Optional) expression popup position. Default is `downLeft`. Recommend changing it for a small parent window space. |
|
||||
| popupPosition | (Optional) expression popup position. Default is `downLeft`. Recommend changing it for a small parent window space. |
|
||||
|
||||
### OF expression component
|
||||
|
||||
|
|
@ -472,6 +482,7 @@ OF expression is available, if aggregation type requires selecting data fields f
|
|||
```
|
||||
|
||||
Props definition:
|
||||
|
||||
```
|
||||
interface OfExpressionProps {
|
||||
aggType: string;
|
||||
|
|
@ -519,6 +530,7 @@ interface OfExpressionProps {
|
|||
```
|
||||
|
||||
Props definition:
|
||||
|
||||
```
|
||||
interface GroupByExpressionProps {
|
||||
groupBy: string;
|
||||
|
|
@ -569,6 +581,7 @@ interface GroupByExpressionProps {
|
|||
```
|
||||
|
||||
Props definition:
|
||||
|
||||
```
|
||||
interface ForLastExpressionProps {
|
||||
timeWindowSize?: number;
|
||||
|
|
@ -609,6 +622,7 @@ interface ForLastExpressionProps {
|
|||
```
|
||||
|
||||
Props definition:
|
||||
|
||||
```
|
||||
interface ThresholdExpressionProps {
|
||||
thresholdComparator: string;
|
||||
|
|
@ -635,7 +649,9 @@ interface ThresholdExpressionProps {
|
|||
| popupPosition | (Optional) expression popup position. Default is `downLeft`. Recommend changing it for a small parent window space. |
|
||||
|
||||
## Alert Conditions Components
|
||||
|
||||
To aid in creating a uniform UX across Alert Types, we provide two components for specifying the conditions for detection of a certain alert under within any specific Action Groups:
|
||||
|
||||
1. `AlertConditions`: A component that generates a container which renders custom component for each Action Group which has had its _conditions_ specified.
|
||||
2. `AlertConditionsGroup`: A component that provides a unified container for the Action Group with its name and a button for resetting its condition.
|
||||
|
||||
|
|
@ -705,6 +721,7 @@ The `isRequired` field specifies whether this specific action group is _required
|
|||
Using this `ThresholdSpecifier` component, we can now use `AlertConditionsGroup` & `AlertConditions` to enable the user to specify these thresholds for each action group in the alert type.
|
||||
|
||||
Like so:
|
||||
|
||||
```
|
||||
interface ThresholdAlertTypeParams {
|
||||
thresholds?: {
|
||||
|
|
@ -763,7 +780,7 @@ const DEFAULT_THRESHOLDS: ThresholdAlertTypeParams['threshold] = {
|
|||
</AlertConditions>
|
||||
```
|
||||
|
||||
### The AlertConditions component
|
||||
### The AlertConditions component
|
||||
|
||||
This component will render the `Conditions` header & headline, along with the selectors for adding every Action Group you specity.
|
||||
Additionally it will clone its `children` for _each_ action group which has a `condition` specified for it, passing in the appropriate `actionGroup` prop for each one.
|
||||
|
|
@ -774,7 +791,7 @@ Additionally it will clone its `children` for _each_ action group which has a `c
|
|||
| actionGroups | A list of `ActionGroupWithCondition` which includes all the action group you wish to offer the user and what conditions they are already configured to follow |
|
||||
| onInitializeConditionsFor | A callback which is called when the user ask for a certain actionGroup to be initialized with an initial default condition. If you have no specific default, that's fine, as the component will render the action group's field even if the condition is empty (using a `null` or an `undefined`) and determines whether to render these fields by _the very presence_ of a `condition` field |
|
||||
|
||||
### The AlertConditionsGroup component
|
||||
### The AlertConditionsGroup component
|
||||
|
||||
This component renders a standard EuiTitle foe each action group, wrapping the Alert Type specific component, in addition to a "reset" button which allows the user to reset the condition for that action group. The definition of what a _reset_ actually means is Alert Type specific, and up to the implementor to decide. In some case it might mean removing the condition, in others it might mean to reset it to some default value on the server side. In either case, it should _delete_ the `condition` field from the appropriate `actionGroup` as per the above example.
|
||||
|
||||
|
|
@ -782,18 +799,20 @@ This component renders a standard EuiTitle foe each action group, wrapping the A
|
|||
| -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| onResetConditionsFor | A callback which is called when the user clicks the _reset_ button besides the action group's title. The implementor should use this to remove the `condition` from the specified actionGroup |
|
||||
|
||||
|
||||
## Embed the Create Alert flyout within any Kibana plugin
|
||||
|
||||
Follow the instructions bellow to embed the Create Alert flyout within any Kibana plugin:
|
||||
|
||||
1. Add TriggersAndActionsUIPublicPluginStart to Kibana plugin setup dependencies:
|
||||
|
||||
```
|
||||
triggersActionsUi: TriggersAndActionsUIPublicPluginStart;
|
||||
```
|
||||
|
||||
Then this dependency will be used to embed Create Alert flyout.
|
||||
|
||||
2. Add Create Alert flyout to React component using triggersActionsUi start contract:
|
||||
|
||||
```
|
||||
// in the component state definition section
|
||||
const [alertFlyoutVisible, setAlertFlyoutVisibility] = useState<boolean>(false);
|
||||
|
|
@ -813,7 +832,7 @@ const [alertFlyoutVisible, setAlertFlyoutVisibility] = useState<boolean>(false);
|
|||
|
||||
const AddAlertFlyout = useMemo(
|
||||
() =>
|
||||
triggersActionsUi.getAddAlertFlyout({
|
||||
triggersActionsUi.getAddRuleFlyout({
|
||||
consumer: ALERTING_EXAMPLE_APP_ID,
|
||||
addFlyoutVisible: alertFlyoutVisible,
|
||||
setAddFlyoutVisibility: setAlertFlyoutVisibility,
|
||||
|
|
@ -826,9 +845,10 @@ const AddAlertFlyout = useMemo(
|
|||
return <>{AddAlertFlyout}</>;
|
||||
```
|
||||
|
||||
getAddAlertFlyout variables definition:
|
||||
getAddRuleFlyout variables definition:
|
||||
|
||||
```
|
||||
interface AlertAddProps {
|
||||
interface RuleAddProps {
|
||||
consumer: string;
|
||||
addFlyoutVisible: boolean;
|
||||
setAddFlyoutVisibility: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
|
|
@ -864,15 +884,15 @@ Kibana ships with a set of built-in action types UI:
|
|||
| [Webhook](#webhook) | `.webhook` | Sends a payload to a web service using HTTP POST or PUT |
|
||||
| [PagerDuty](#pagerduty) | `.pagerduty` | Triggers, resolves, or acknowledges an incident to a PagerDuty service |
|
||||
|
||||
Every action type should be registered server side, and can be optionally registered client side.
|
||||
Every action type should be registered server side, and can be optionally registered client side.
|
||||
Only action types registered on both client and server will be displayed in the Alerts and Actions UI.
|
||||
Built-in action types UI is located under the folder `x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types`
|
||||
and this is a file `x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/index.ts` for client side registration.
|
||||
|
||||
|
||||
### Server log
|
||||
|
||||
Action type model definition:
|
||||
|
||||
```
|
||||
export function getActionType(): ActionTypeModel {
|
||||
return {
|
||||
|
|
@ -898,6 +918,7 @@ export function getActionType(): ActionTypeModel {
|
|||
};
|
||||
}
|
||||
```
|
||||
|
||||
Server log has a connector UI:
|
||||
|
||||
|
||||
|
|
@ -910,6 +931,7 @@ and action params form available in Create Alert form:
|
|||
### Email
|
||||
|
||||
Action type model definition:
|
||||
|
||||
```
|
||||
export function getActionType(): ActionTypeModel {
|
||||
const mailformat = /^[^@\s]+@[^@\s]+$/;
|
||||
|
|
@ -936,6 +958,7 @@ export function getActionType(): ActionTypeModel {
|
|||
};
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -946,6 +969,7 @@ and action params form available in Create Alert form:
|
|||
### Slack
|
||||
|
||||
Action type model definition:
|
||||
|
||||
```
|
||||
export function getActionType(): ActionTypeModel {
|
||||
return {
|
||||
|
|
@ -964,7 +988,7 @@ export function getActionType(): ActionTypeModel {
|
|||
}
|
||||
),
|
||||
validateParams: (actionParams: SlackActionParams): Promise<ValidationResult> => {
|
||||
// validation of action params implementation
|
||||
// validation of action params implementation
|
||||
},
|
||||
actionConnectorFields: SlackActionFields,
|
||||
actionParamsFields: SlackParamsFields,
|
||||
|
|
@ -982,6 +1006,7 @@ and action params form available in Create Alert form:
|
|||
### Index
|
||||
|
||||
Action type model definition:
|
||||
|
||||
```
|
||||
export function getActionType(): ActionTypeModel {
|
||||
return {
|
||||
|
|
@ -1019,12 +1044,13 @@ Example of the index document for Index Threshold alert:
|
|||
"context_title": "{{context.title}}",
|
||||
"context_value": "{{context.value}}",
|
||||
"context_message": "{{context.message}}"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Webhook
|
||||
|
||||
Action type model definition:
|
||||
|
||||
```
|
||||
export function getActionType(): ActionTypeModel {
|
||||
return {
|
||||
|
|
@ -1052,10 +1078,10 @@ export function getActionType(): ActionTypeModel {
|
|||
and action params form available in Create Alert form:
|
||||
|
||||
|
||||
|
||||
### PagerDuty
|
||||
|
||||
Action type model definition:
|
||||
|
||||
```
|
||||
export function getActionType(): ActionTypeModel {
|
||||
return {
|
||||
|
|
@ -1092,6 +1118,7 @@ and action params form available in Create Alert form:
|
|||
## Action type model definition
|
||||
|
||||
Each action type should be defined as an `ActionTypeModel` object with the following properties:
|
||||
|
||||
```
|
||||
id: string;
|
||||
iconClass: IconType;
|
||||
|
|
@ -1102,6 +1129,7 @@ Each action type should be defined as an `ActionTypeModel` object with the follo
|
|||
actionParamsFields: React.LazyExoticComponent<ComponentType<ActionParamsProps<ActionParams>>>;
|
||||
customConnectorSelectItem?: CustomConnectorSelectionItem;
|
||||
```
|
||||
|
||||
| Property | Description |
|
||||
| ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| id | Action type id. Should be the same as on server side. |
|
||||
|
|
@ -1130,11 +1158,11 @@ Each action type should be defined as an `ActionTypeModel` object with the follo
|
|||
There are two ways to register a new action type UI:
|
||||
|
||||
1. Directly in `triggers_actions_ui` plugin. In this case, the action type will be available in the Alerts and Actions management section.
|
||||
Registration code for a new action type model should be added to the file `x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/index.ts`
|
||||
Only registered action types are available in UI.
|
||||
Registration code for a new action type model should be added to the file `x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/index.ts`
|
||||
Only registered action types are available in UI.
|
||||
|
||||
2. Register action type in another plugin. In this case, the action type will be available only in the current plugin UI.
|
||||
It should be done by importing dependency `TriggersAndActionsUIPublicPluginSetup` and adding the next code on plugin setup:
|
||||
It should be done by importing dependency `TriggersAndActionsUIPublicPluginSetup` and adding the next code on plugin setup:
|
||||
|
||||
```
|
||||
function getSomeNewActionType() {
|
||||
|
|
@ -1155,6 +1183,7 @@ The framework uses the [Form lib](https://github.com/elastic/kibana/blob/main/sr
|
|||
Below is a list of steps that should be done to build and register a new action type with the name `Example Action Type`:
|
||||
|
||||
1. At any suitable place in Kibana, create a file, which will expose an object implementing interface [ActionTypeModel]:
|
||||
|
||||
```
|
||||
import React, { lazy } from 'react';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
|
|
@ -1210,6 +1239,7 @@ export function getActionType(): ActionTypeModel {
|
|||
```
|
||||
|
||||
2. Define `actionConnectorFields` as `React.FunctionComponent` - this is the form for action connector.
|
||||
|
||||
```
|
||||
import React from 'react';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
|
|
@ -1253,7 +1283,8 @@ const ExampleConnectorFields: React.FunctionComponent<ActionConnectorFieldsProps
|
|||
export {ExampleConnectorFields as default};
|
||||
```
|
||||
|
||||
3. Define action type params fields using the property of `ActionTypeModel` `actionParamsFields`:
|
||||
3. Define action type params fields using the property of `ActionTypeModel` `actionParamsFields`:
|
||||
|
||||
```
|
||||
import React from 'react';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
|
|
@ -1302,6 +1333,7 @@ export {ExampleParamsFields as default};
|
|||
```
|
||||
|
||||
4. Extend registration code with the new action type register in the file `x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/index.ts`
|
||||
|
||||
```
|
||||
import { getActionType as getExampledActionType } from './example';
|
||||
...
|
||||
|
|
@ -1328,6 +1360,7 @@ or create a new connector:
|
|||
## Embed the Alert Actions form within any Kibana plugin
|
||||
|
||||
Follow the instructions bellow to embed the Alert Actions form within any Kibana plugin:
|
||||
|
||||
1. Add TriggersAndActionsUIPublicPluginSetup and TriggersAndActionsUIPublicPluginStart to Kibana plugin setup dependencies:
|
||||
|
||||
```
|
||||
|
|
@ -1341,6 +1374,7 @@ triggersActionsUi: TriggersAndActionsUIPublicPluginSetup;
|
|||
|
||||
triggersActionsUi: TriggersAndActionsUIPublicPluginStart;
|
||||
```
|
||||
|
||||
Then this dependencies will be used to embed Actions form or register your own action type.
|
||||
|
||||
2. Add Actions form to React component:
|
||||
|
|
@ -1401,6 +1435,7 @@ export const ComponentWithActionsForm: () => {
|
|||
```
|
||||
|
||||
ActionForm Props definition:
|
||||
|
||||
```
|
||||
interface ActionAccordionFormProps {
|
||||
actions: RuleAction[];
|
||||
|
|
@ -1422,23 +1457,23 @@ interface ActionAccordionFormProps {
|
|||
|
||||
```
|
||||
|
||||
| Property | Description |
|
||||
| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| actions | List of actions comes from alert.actions property. |
|
||||
| defaultActionGroupId | Default action group id to which each new action will belong by default. |
|
||||
| actionGroups | Optional. List of action groups to which new action can be assigned. The RunWhen field is only displayed when these action groups are specified |
|
||||
| setActionIdByIndex | Function for changing action 'id' by the proper index in alert.actions array. |
|
||||
| setActionGroupIdByIndex | Function for changing action 'group' by the proper index in alert.actions array. |
|
||||
| setRuleProperty | Function for changing alert property 'actions'. Used when deleting action from the array to reset it. |
|
||||
| setActionParamsProperty | Function for changing action key/value property by index in alert.actions array. |
|
||||
| http | HttpSetup needed for executing API calls. |
|
||||
| actionTypeRegistry | Registry for action types. |
|
||||
| toastNotifications | Toast messages Plugin Setup Contract. |
|
||||
| docLinks | Documentation links Plugin Start Contract. |
|
||||
| featureId | Property that filters which action types are loaded when the flyout is opened. Each action type configures the feature ids it is available in during [server side registration](https://github.com/elastic/kibana/tree/main/x-pack/plugins/actions#action-types). |
|
||||
| messageVariables | Optional property, which allows to define a list of variables for action 'message' property. Set `useWithTripleBracesInTemplates` to true if you don't want the variable escaped when rendering. |
|
||||
| defaultActionMessage | Optional property, which allows to define a message value for action with 'message' property. |
|
||||
| capabilities | Kibana core's Capabilities ApplicationStart['capabilities']. |
|
||||
| Property | Description |
|
||||
| ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| actions | List of actions comes from alert.actions property. |
|
||||
| defaultActionGroupId | Default action group id to which each new action will belong by default. |
|
||||
| actionGroups | Optional. List of action groups to which new action can be assigned. The RunWhen field is only displayed when these action groups are specified |
|
||||
| setActionIdByIndex | Function for changing action 'id' by the proper index in alert.actions array. |
|
||||
| setActionGroupIdByIndex | Function for changing action 'group' by the proper index in alert.actions array. |
|
||||
| setRuleProperty | Function for changing alert property 'actions'. Used when deleting action from the array to reset it. |
|
||||
| setActionParamsProperty | Function for changing action key/value property by index in alert.actions array. |
|
||||
| http | HttpSetup needed for executing API calls. |
|
||||
| actionTypeRegistry | Registry for action types. |
|
||||
| toastNotifications | Toast messages Plugin Setup Contract. |
|
||||
| docLinks | Documentation links Plugin Start Contract. |
|
||||
| featureId | Property that filters which action types are loaded when the flyout is opened. Each action type configures the feature ids it is available in during [server side registration](https://github.com/elastic/kibana/tree/main/x-pack/plugins/actions#action-types). |
|
||||
| messageVariables | Optional property, which allows to define a list of variables for action 'message' property. Set `useWithTripleBracesInTemplates` to true if you don't want the variable escaped when rendering. |
|
||||
| defaultActionMessage | Optional property, which allows to define a message value for action with 'message' property. |
|
||||
| capabilities | Kibana core's Capabilities ApplicationStart['capabilities']. |
|
||||
|
||||
| Property | Description |
|
||||
| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
|
|
@ -1455,6 +1490,7 @@ interface ActionAccordionFormProps {
|
|||
## Embed the Create Connector flyout within any Kibana plugin
|
||||
|
||||
Follow the instructions bellow to embed the Create Connector flyout within any Kibana plugin:
|
||||
|
||||
1. Add TriggersAndActionsUIPublicPluginSetup and TriggersAndActionsUIPublicPluginStart to Kibana plugin setup dependencies:
|
||||
|
||||
```
|
||||
|
|
@ -1468,9 +1504,11 @@ triggersActionsUi: TriggersAndActionsUIPublicPluginSetup;
|
|||
|
||||
triggersActionsUi: TriggersAndActionsUIPublicPluginStart;
|
||||
```
|
||||
|
||||
Then this dependency will be used to embed Create Connector flyout or register new action type.
|
||||
|
||||
2. Add Create Connector flyout to React component:
|
||||
|
||||
```
|
||||
// import section
|
||||
import { ActionsConnectorsContextProvider, CreateConnectorFlyout } from '../../../../../../../triggers_actions_ui/public';
|
||||
|
|
@ -1514,6 +1552,7 @@ const connector = {
|
|||
```
|
||||
|
||||
CreateConnectorFlyout Props definition:
|
||||
|
||||
```
|
||||
export interface ConnectorAddFlyoutProps {
|
||||
actionTypeRegistry: ActionTypeRegistryContract;
|
||||
|
|
@ -1524,17 +1563,18 @@ export interface ConnectorAddFlyoutProps {
|
|||
}
|
||||
```
|
||||
|
||||
| Property | Description |
|
||||
| -------------------- | ----------------------------------------------------------------------------------------------------------------- |
|
||||
| actionTypeRegistry | The action type registry. |
|
||||
| onClose | Called when closing the flyout |
|
||||
| featureId | Optional property that filters which action types are loaded when the flyout is opened. Each action type configures the feature ids it is available in during [server side registration](https://github.com/elastic/kibana/tree/main/x-pack/plugins/actions#action-types). |
|
||||
| onConnectorCreated | Optional property. Function to be called after the creation of the connector. |
|
||||
| onTestConnector | Optional property. Function to be called when the user press the Save & Test button. |
|
||||
| Property | Description |
|
||||
| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| actionTypeRegistry | The action type registry. |
|
||||
| onClose | Called when closing the flyout |
|
||||
| featureId | Optional property that filters which action types are loaded when the flyout is opened. Each action type configures the feature ids it is available in during [server side registration](https://github.com/elastic/kibana/tree/main/x-pack/plugins/actions#action-types). |
|
||||
| onConnectorCreated | Optional property. Function to be called after the creation of the connector. |
|
||||
| onTestConnector | Optional property. Function to be called when the user press the Save & Test button. |
|
||||
|
||||
## Embed the Edit Connector flyout within any Kibana plugin
|
||||
|
||||
Follow the instructions bellow to embed the Edit Connector flyout within any Kibana plugin:
|
||||
|
||||
1. Add TriggersAndActionsUIPublicPluginSetup and TriggersAndActionsUIPublicPluginStart to Kibana plugin setup dependencies:
|
||||
|
||||
```
|
||||
|
|
@ -1548,9 +1588,11 @@ triggersActionsUi: TriggersAndActionsUIPublicPluginSetup;
|
|||
|
||||
triggersActionsUi: TriggersAndActionsUIPublicPluginStart;
|
||||
```
|
||||
|
||||
Then this dependency will be used to embed Edit Connector flyout.
|
||||
|
||||
2. Add Create Connector flyout to React component:
|
||||
|
||||
```
|
||||
// import section
|
||||
import { ActionsConnectorsContextProvider, EditConnectorFlyout } from '../../../../../../../triggers_actions_ui/public';
|
||||
|
|
@ -1585,6 +1627,7 @@ const { http, triggersActionsUi, notifications, application } = useKibana().serv
|
|||
```
|
||||
|
||||
EditConnectorFlyout Props definition:
|
||||
|
||||
```
|
||||
export interface ConnectorEditProps {
|
||||
actionTypeRegistry: ActionTypeRegistryContract;
|
||||
|
|
@ -1603,6 +1646,7 @@ export interface ConnectorEditProps {
|
|||
| onConnectorUpdated | Optional property. Function to be called after the update of the connector. |
|
||||
|
||||
ActionsConnectorsContextValue options:
|
||||
|
||||
```
|
||||
export interface ActionsConnectorsContextValue {
|
||||
http: HttpSetup;
|
||||
|
|
|
|||
|
|
@ -8,10 +8,10 @@
|
|||
import React from 'react';
|
||||
import { ConnectorProvider } from '../application/context/connector_context';
|
||||
import { RuleAdd } from '../application/sections/rule_form';
|
||||
import type { ConnectorServices, RuleAddProps as AlertAddProps } from '../types';
|
||||
import type { ConnectorServices, RuleAddProps } from '../types';
|
||||
|
||||
export const getAddAlertFlyoutLazy = (
|
||||
props: AlertAddProps & { connectorServices: ConnectorServices }
|
||||
export const getAddRuleFlyoutLazy = (
|
||||
props: RuleAddProps & { connectorServices: ConnectorServices }
|
||||
) => {
|
||||
return (
|
||||
<ConnectorProvider value={{ services: props.connectorServices }}>
|
||||
|
|
@ -9,7 +9,7 @@ import type { TriggersAndActionsUIPublicPluginStart } from './plugin';
|
|||
|
||||
import { getAddConnectorFlyoutLazy } from './common/get_add_connector_flyout';
|
||||
import { getEditConnectorFlyoutLazy } from './common/get_edit_connector_flyout';
|
||||
import { getAddAlertFlyoutLazy } from './common/get_add_alert_flyout';
|
||||
import { getAddRuleFlyoutLazy } from './common/get_add_rule_flyout';
|
||||
import { getEditAlertFlyoutLazy } from './common/get_edit_alert_flyout';
|
||||
import { TypeRegistry } from './application/type_registry';
|
||||
import {
|
||||
|
|
@ -70,8 +70,8 @@ function createStartMock(): TriggersAndActionsUIPublicPluginStart {
|
|||
connectorServices,
|
||||
});
|
||||
},
|
||||
getAddAlertFlyout: (props: Omit<RuleAddProps, 'actionTypeRegistry' | 'ruleTypeRegistry'>) => {
|
||||
return getAddAlertFlyoutLazy({
|
||||
getAddRuleFlyout: (props: Omit<RuleAddProps, 'actionTypeRegistry' | 'ruleTypeRegistry'>) => {
|
||||
return getAddRuleFlyoutLazy({
|
||||
...props,
|
||||
actionTypeRegistry,
|
||||
ruleTypeRegistry,
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ import { TypeRegistry } from './application/type_registry';
|
|||
|
||||
import { getAddConnectorFlyoutLazy } from './common/get_add_connector_flyout';
|
||||
import { getEditConnectorFlyoutLazy } from './common/get_edit_connector_flyout';
|
||||
import { getAddAlertFlyoutLazy } from './common/get_add_alert_flyout';
|
||||
import { getAddRuleFlyoutLazy } from './common/get_add_rule_flyout';
|
||||
import { getEditAlertFlyoutLazy } from './common/get_edit_alert_flyout';
|
||||
import { getAlertsTableLazy } from './common/get_alerts_table';
|
||||
import { getFieldBrowserLazy } from './common/get_field_browser';
|
||||
|
|
@ -105,7 +105,7 @@ export interface TriggersAndActionsUIPublicPluginStart {
|
|||
getEditConnectorFlyout: (
|
||||
props: Omit<EditConnectorFlyoutProps, 'actionTypeRegistry'>
|
||||
) => ReactElement<EditConnectorFlyoutProps>;
|
||||
getAddAlertFlyout: (
|
||||
getAddRuleFlyout: (
|
||||
props: Omit<RuleAddProps, 'actionTypeRegistry' | 'ruleTypeRegistry'>
|
||||
) => ReactElement<RuleAddProps>;
|
||||
getEditAlertFlyout: (
|
||||
|
|
@ -366,8 +366,8 @@ export class Plugin
|
|||
connectorServices: this.connectorServices!,
|
||||
});
|
||||
},
|
||||
getAddAlertFlyout: (props: Omit<RuleAddProps, 'actionTypeRegistry' | 'ruleTypeRegistry'>) => {
|
||||
return getAddAlertFlyoutLazy({
|
||||
getAddRuleFlyout: (props: Omit<RuleAddProps, 'actionTypeRegistry' | 'ruleTypeRegistry'>) => {
|
||||
return getAddRuleFlyoutLazy({
|
||||
...props,
|
||||
actionTypeRegistry: this.actionTypeRegistry,
|
||||
ruleTypeRegistry: this.ruleTypeRegistry,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue