Adding tooltip to rules that are disabled due to license (#103295)

Co-authored-by: Kibana Machine <[email protected]>
elastic · Jun 28, 2021 · 2ff2a6f · 2ff2a6f
1 parent f89dc9c
commit 2ff2a6f
Show file tree

Hide file tree

Showing 2 changed files with 148 additions and 9 deletions.
diff --git a/...iggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.test.tsx b/...iggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.test.tsx
@@ -69,6 +69,7 @@ const alertTypeFromApi = {
   defaultActionGroupId: 'default',
   producer: ALERTS_FEATURE_ID,
   minimumLicenseRequired: 'basic',
+  enabledInLicense: true,
   authorizedConsumers: {
     [ALERTS_FEATURE_ID]: { read: true, all: true },
   },
@@ -520,3 +521,122 @@ describe('alerts_list with show only capability', () => {
     // TODO: check delete button
   });
 });
+
+describe('alerts_list with disabled itmes', () => {
+  let wrapper: ReactWrapper<any>;
+
+  async function setup() {
+    loadAlerts.mockResolvedValue({
+      page: 1,
+      perPage: 10000,
+      total: 2,
+      data: [
+        {
+          id: '1',
+          name: 'test alert',
+          tags: ['tag1'],
+          enabled: true,
+          alertTypeId: 'test_alert_type',
+          schedule: { interval: '5d' },
+          actions: [],
+          params: { name: 'test alert type name' },
+          scheduledTaskId: null,
+          createdBy: null,
+          updatedBy: null,
+          apiKeyOwner: null,
+          throttle: '1m',
+          muteAll: false,
+          mutedInstanceIds: [],
+          executionStatus: {
+            status: 'active',
+            lastExecutionDate: new Date('2020-08-20T19:23:38Z'),
+            error: null,
+          },
+        },
+        {
+          id: '2',
+          name: 'test alert 2',
+          tags: ['tag1'],
+          enabled: true,
+          alertTypeId: 'test_alert_type_disabled_by_license',
+          schedule: { interval: '5d' },
+          actions: [{ id: 'test', group: 'alert', params: { message: 'test' } }],
+          params: { name: 'test alert type name' },
+          scheduledTaskId: null,
+          createdBy: null,
+          updatedBy: null,
+          apiKeyOwner: null,
+          throttle: '1m',
+          muteAll: false,
+          mutedInstanceIds: [],
+          executionStatus: {
+            status: 'active',
+            lastExecutionDate: new Date('2020-08-20T19:23:38Z'),
+            error: null,
+          },
+        },
+      ],
+    });
+    loadActionTypes.mockResolvedValue([
+      {
+        id: 'test',
+        name: 'Test',
+      },
+      {
+        id: 'test2',
+        name: 'Test2',
+      },
+    ]);
+
+    loadAlertTypes.mockResolvedValue([
+      alertTypeFromApi,
+      {
+        id: 'test_alert_type_disabled_by_license',
+        name: 'some alert type that is not allowed',
+        actionGroups: [{ id: 'default', name: 'Default' }],
+        recoveryActionGroup: { id: 'recovered', name: 'Recovered' },
+        actionVariables: { context: [], state: [] },
+        defaultActionGroupId: 'default',
+        producer: ALERTS_FEATURE_ID,
+        minimumLicenseRequired: 'platinum',
+        enabledInLicense: false,
+        authorizedConsumers: {
+          [ALERTS_FEATURE_ID]: { read: true, all: true },
+        },
+      },
+    ]);
+    loadAllActions.mockResolvedValue([]);
+
+    alertTypeRegistry.has.mockReturnValue(false);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useKibanaMock().services.alertTypeRegistry = alertTypeRegistry;
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useKibanaMock().services.actionTypeRegistry = actionTypeRegistry;
+    wrapper = mountWithIntl(<AlertsList />);
+
+    await act(async () => {
+      await nextTick();
+      wrapper.update();
+    });
+  }
+
+  it('renders rules list with disabled indicator if disabled due to license', async () => {
+    await setup();
+    expect(wrapper.find('EuiBasicTable')).toHaveLength(1);
+    expect(wrapper.find('EuiTableRow')).toHaveLength(2);
+    expect(wrapper.find('EuiTableRow').at(0).prop('className')).toEqual('');
+    expect(wrapper.find('EuiTableRow').at(1).prop('className')).toEqual(
+      'actAlertsList__tableRowDisabled'
+    );
+    expect(wrapper.find('EuiIconTip[data-test-subj="ruleDisabledByLicenseTooltip"]').length).toBe(
+      1
+    );
+    expect(
+      wrapper.find('EuiIconTip[data-test-subj="ruleDisabledByLicenseTooltip"]').props().type
+    ).toEqual('questionInCircle');
+    expect(
+      wrapper.find('EuiIconTip[data-test-subj="ruleDisabledByLicenseTooltip"]').props().content
+    ).toEqual('This rule type requires a Platinum license.');
+  });
+});
diff --git a/...ns/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.tsx b/...ns/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.tsx
@@ -18,6 +18,7 @@ import {
   EuiFieldSearch,
   EuiFlexGroup,
   EuiFlexItem,
+  EuiIconTip,
   EuiSpacer,
   EuiLink,
   EuiEmptyPrompt,
@@ -63,6 +64,7 @@ import { DEFAULT_HIDDEN_ACTION_TYPES } from '../../../../common/constants';
 import './alerts_list.scss';
 import { CenterJustifiedSpinner } from '../../../components/center_justified_spinner';
 import { ManageLicenseModal } from './manage_license_modal';
+import { checkAlertTypeEnabled } from '../../../lib/check_alert_type_enabled';
 
 const ENTER_KEY = 13;
 
@@ -318,15 +320,32 @@ export const AlertsList: React.FunctionComponent = () => {
       width: '35%',
       'data-test-subj': 'alertsTableCell-name',
       render: (name: string, alert: AlertTableItem) => {
-        return (
-          <EuiLink
-            title={name}
-            onClick={() => {
-              history.push(routeToRuleDetails.replace(`:ruleId`, alert.id));
-            }}
-          >
-            {name}
-          </EuiLink>
+        const ruleType = alertTypesState.data.get(alert.alertTypeId);
+        const checkEnabledResult = checkAlertTypeEnabled(ruleType);
+        const link = (
+          <>
+            <EuiLink
+              title={name}
+              onClick={() => {
+                history.push(routeToRuleDetails.replace(`:ruleId`, alert.id));
+              }}
+            >
+              {name}
+            </EuiLink>
+          </>
+        );
+        return checkEnabledResult.isEnabled ? (
+          link
+        ) : (
+          <>
+            {link}
+            <EuiIconTip
+              data-test-subj="ruleDisabledByLicenseTooltip"
+              type="questionInCircle"
+              content={checkEnabledResult.message}
+              position="right"
+            />
+          </>
         );
       },
     },