diff --git a/x-pack/plugins/observability/public/pages/rules/components/execution_status.tsx b/x-pack/plugins/observability/public/pages/rules/components/execution_status.tsx index 81dfe9ebd1606..c0c7413aa9c15 100644 --- a/x-pack/plugins/observability/public/pages/rules/components/execution_status.tsx +++ b/x-pack/plugins/observability/public/pages/rules/components/execution_status.tsx @@ -5,14 +5,22 @@ * 2.0. */ -import React from 'react'; -import { EuiHealth, EuiToolTip, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; +import React, { useState } from 'react'; +import { EuiHealth, EuiToolTip, EuiFlexGroup, EuiFlexItem, EuiButtonEmpty } from '@elastic/eui'; import { RuleExecutionStatusErrorReasons } from '@kbn/alerting-plugin/common'; +import { FormattedMessage } from '@kbn/i18n-react'; +import { ManageLicenseModal } from './manage_license_model'; import { getHealthColor, rulesStatusesTranslationsMapping } from '../config'; import { RULE_STATUS_LICENSE_ERROR } from '../translations'; import { ExecutionStatusProps } from '../types'; +import { useKibana } from '../../../utils/kibana_react'; -export function ExecutionStatus({ executionStatus }: ExecutionStatusProps) { +export function ExecutionStatus({ executionStatus, item, licenseType }: ExecutionStatusProps) { + const { http } = useKibana().services; + const [manageLicenseModalOpts, setManageLicenseModalOpts] = useState<{ + licenseType: string; + ruleTypeId: string; + } | null>(null); const healthColor = getHealthColor(executionStatus.status); const tooltipMessage = executionStatus.status === 'error' ? `Error: ${executionStatus?.error?.message}` : null; @@ -38,6 +46,36 @@ export function ExecutionStatus({ executionStatus }: ExecutionStatusProps) { return ( {healthWithTooltip} + {isLicenseError && ( + + + setManageLicenseModalOpts({ + licenseType, + ruleTypeId: item.ruleTypeId, + }) + } + > + + + + )} + {manageLicenseModalOpts && ( + { + window.open(`${http.basePath.get()}/app/management/stack/license_management`, '_blank'); + setManageLicenseModalOpts(null); + }} + onCancel={() => setManageLicenseModalOpts(null)} + /> + )} ); } diff --git a/x-pack/plugins/observability/public/pages/rules/components/manage_license_model.tsx b/x-pack/plugins/observability/public/pages/rules/components/manage_license_model.tsx new file mode 100644 index 0000000000000..e273c7d5a3044 --- /dev/null +++ b/x-pack/plugins/observability/public/pages/rules/components/manage_license_model.tsx @@ -0,0 +1,55 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React from 'react'; +import { i18n } from '@kbn/i18n'; +import { FormattedMessage } from '@kbn/i18n-react'; +import { EuiConfirmModal } from '@elastic/eui'; +import { capitalize } from 'lodash'; + +interface Props { + licenseType: string; + ruleTypeId: string; + onConfirm: () => void; + onCancel: () => void; +} + +export function ManageLicenseModal({ licenseType, ruleTypeId, onConfirm, onCancel }: Props) { + const licenseRequired = capitalize(licenseType); + return ( + +

+ +

+
+ ); +} diff --git a/x-pack/plugins/observability/public/pages/rules/index.tsx b/x-pack/plugins/observability/public/pages/rules/index.tsx index 693c5dd11f4d1..3d005c30fc747 100644 --- a/x-pack/plugins/observability/public/pages/rules/index.tsx +++ b/x-pack/plugins/observability/public/pages/rules/index.tsx @@ -205,7 +205,11 @@ function RulesPage() { width: '120px', 'data-test-subj': 'rulesTableCell-status', render: (_executionStatus: RuleExecutionStatus, item: RuleTableItem) => ( - + ), }, { diff --git a/x-pack/plugins/observability/public/pages/rules/types.ts b/x-pack/plugins/observability/public/pages/rules/types.ts index cbcd97919cddc..8b3e337b99bd8 100644 --- a/x-pack/plugins/observability/public/pages/rules/types.ts +++ b/x-pack/plugins/observability/public/pages/rules/types.ts @@ -45,6 +45,8 @@ export interface StatusFilterProps { export interface ExecutionStatusProps { executionStatus: RuleExecutionStatus; + item: RuleTableItem; + licenseType: string; } export interface LastRunProps {