[Actionable Observability] Add license modal to rules table

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 (
     <EuiFlexGroup gutterSize="none">
       <EuiFlexItem>{healthWithTooltip}</EuiFlexItem>
+      {isLicenseError && (
+        <EuiFlexItem grow={false}>
+          <EuiButtonEmpty
+            size="xs"
+            data-test-subj="ruleStatus-error-license-fix"
+            onClick={() =>
+              setManageLicenseModalOpts({
+                licenseType,
+                ruleTypeId: item.ruleTypeId,
+              })
+            }
+          >
+            <FormattedMessage
+              id="xpack.observability.rules.rulesTable.fixLicenseLink"
+              defaultMessage="Fix"
+            />
+          </EuiButtonEmpty>
+        </EuiFlexItem>
+      )}
+      {manageLicenseModalOpts && (
+        <ManageLicenseModal
+          licenseType={manageLicenseModalOpts.licenseType}
+          ruleTypeId={manageLicenseModalOpts.ruleTypeId}
+          onConfirm={() => {
+            window.open(`${http.basePath.get()}/app/management/stack/license_management`, '_blank');
+            setManageLicenseModalOpts(null);
+          }}
+          onCancel={() => setManageLicenseModalOpts(null)}
+        />
+      )}
     </EuiFlexGroup>
   );
 }

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 (
+    <EuiConfirmModal
+      title={i18n.translate('xpack.observability.rules.manageLicense.manageLicenseTitle', {
+        defaultMessage: '{licenseRequired} license required',
+        values: { licenseRequired },
+      })}
+      onCancel={onCancel}
+      onConfirm={onConfirm}
+      confirmButtonText={i18n.translate(
+        'xpack.observability.rules.manageLicense.manageLicenseConfirmButtonText',
+        {
+          defaultMessage: 'Manage license',
+        }
+      )}
+      cancelButtonText={i18n.translate(
+        'xpack.observability.rules.manageLicense.manageLicenseCancelButtonText',
+        {
+          defaultMessage: 'Cancel',
+        }
+      )}
+      defaultFocusedButton="confirm"
+      data-test-subj="manageLicenseModal"
+    >
+      <p>
+        <FormattedMessage
+          id="xpack.observability.rules.manageLicense.manageLicenseMessage"
+          defaultMessage="Rule type {ruleTypeId} is disabled because it requires a {licenseRequired} license. Continue to License Management to view upgrade options."
+          values={{ ruleTypeId, licenseRequired }}
+        />
+      </p>
+    </EuiConfirmModal>
+  );
+}

x-pack/plugins/observability/public/pages/rules/index.tsx

@@ -202,7 +202,11 @@ export function RulesPage() {
         width: '120px',
         'data-test-subj': 'rulesTableCell-status',
         render: (_executionStatus: RuleExecutionStatus, item: RuleTableItem) => (
-          <ExecutionStatus executionStatus={item.executionStatus} />
+          <ExecutionStatus
+            executionStatus={item.executionStatus}
+            item={item}
+            licenseType={ruleTypeIndex.get(item.ruleTypeId)?.minimumLicenseRequired!}
+          />
         ),
       },
       {

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 {