diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.tsx index a78dc796dbf8f..11761cec7cdbb 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.tsx @@ -99,7 +99,10 @@ export const AlertsList: React.FunctionComponent = () => { const [alertStatusesFilter, setAlertStatusesFilter] = useState([]); const [alertFlyoutVisible, setAlertFlyoutVisibility] = useState(false); const [dismissAlertErrors, setDismissAlertErrors] = useState(false); - const [manageLicenseMessage, setManageLicenseMessage] = useState(undefined); + const [manageLicenseModalOpts, setManageLicenseModalOpts] = useState<{ + licenseType: string; + alertTypeId: string; + } | null>(null); const [alertsStatusesTotal, setAlertsStatusesTotal] = useState>( AlertExecutionStatusValues.reduce( (prev: Record, status: string) => @@ -240,7 +243,10 @@ export const AlertsList: React.FunctionComponent = () => { } } - const renderAlertExecutionStatus = (executionStatus: AlertExecutionStatus) => { + const renderAlertExecutionStatus = ( + executionStatus: AlertExecutionStatus, + item: AlertTableItem + ) => { const healthColor = getHealthColor(executionStatus.status); const tooltipMessage = executionStatus.status === 'error' ? `Error: ${executionStatus?.error?.message}` : null; @@ -276,7 +282,12 @@ export const AlertsList: React.FunctionComponent = () => { setManageLicenseMessage(executionStatus?.error?.message)} + onClick={() => + setManageLicenseModalOpts({ + licenseType: alertTypesState.data.get(item.alertTypeId)?.minimumLicenseRequired!, + alertTypeId: item.alertTypeId, + }) + } > { truncateText: false, width: '150px', 'data-test-subj': 'alertsTableCell-status', - render: (executionStatus: AlertExecutionStatus) => { - return renderAlertExecutionStatus(executionStatus); + render: (executionStatus: AlertExecutionStatus, item: AlertTableItem) => { + return renderAlertExecutionStatus(executionStatus, item); }, }, { @@ -673,14 +684,15 @@ export const AlertsList: React.FunctionComponent = () => { setPage(changedPage); }} /> - {manageLicenseMessage !== undefined && ( + {manageLicenseModalOpts && ( { window.open(`${http.basePath.get()}/app/management/stack/license_management`, '_blank'); - setManageLicenseMessage(undefined); + setManageLicenseModalOpts(null); }} - onCancel={() => setManageLicenseMessage(undefined)} + onCancel={() => setManageLicenseModalOpts(null)} /> )} diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/manage_license_modal.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/manage_license_modal.tsx index 465e6234f9802..f13e5fd96d2ad 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/manage_license_modal.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/manage_license_modal.tsx @@ -7,20 +7,30 @@ import React from 'react'; import { i18n } from '@kbn/i18n'; +import { FormattedMessage } from '@kbn/i18n/react'; import { EuiOverlayMask, EuiConfirmModal } from '@elastic/eui'; +import { capitalize } from 'lodash'; interface Props { - message?: string; + licenseType: string; + alertTypeId: string; onConfirm: () => void; onCancel: () => void; } -export const ManageLicenseModal: React.FC = ({ message, onConfirm, onCancel }) => { +export const ManageLicenseModal: React.FC = ({ + licenseType, + alertTypeId, + onConfirm, + onCancel, +}) => { + const licenseRequired = capitalize(licenseType); return ( = ({ message, onConfirm, onCanc defaultFocusedButton="confirm" data-test-subj="manageLicenseModal" > -

{message}

+

+ +

);