[Uptime] Use ML Capabilities API to determine license type (elastic#6…

…6921)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

x-pack/plugins/uptime/public/components/monitor/ml/__tests__/license_info.test.tsx

@@ -7,8 +7,16 @@
 import React from 'react';
 import { renderWithIntl, shallowWithIntl } from 'test_utils/enzyme_helpers';
 import { ShowLicenseInfo } from '../license_info';
+import * as redux from 'react-redux';
 
 describe('ShowLicenseInfo', () => {
+  beforeEach(() => {
+    const spy = jest.spyOn(redux, 'useDispatch');
+    spy.mockReturnValue(jest.fn());
+
+    const spy1 = jest.spyOn(redux, 'useSelector');
+    spy1.mockReturnValue(true);
+  });
   it('shallow renders without errors', () => {
     const wrapper = shallowWithIntl(<ShowLicenseInfo />);
     expect(wrapper).toMatchSnapshot();

x-pack/plugins/uptime/public/components/monitor/ml/__tests__/ml_flyout.test.tsx

@@ -9,47 +9,21 @@ import { renderWithIntl, shallowWithIntl } from 'test_utils/enzyme_helpers';
 import { MLFlyoutView } from '../ml_flyout';
 import { UptimeSettingsContext } from '../../../../contexts';
 import { CLIENT_DEFAULTS } from '../../../../../common/constants';
-import { License } from '../../../../../../../plugins/licensing/common/license';
-
-const expiredLicense = new License({
-  signature: 'test signature',
-  license: {
-    expiryDateInMillis: 0,
-    mode: 'platinum',
-    status: 'expired',
-    type: 'platinum',
-    uid: '1',
-  },
-  features: {
-    ml: {
-      isAvailable: false,
-      isEnabled: false,
-    },
-  },
-});
-
-const validLicense = new License({
-  signature: 'test signature',
-  license: {
-    expiryDateInMillis: 30000,
-    mode: 'platinum',
-    status: 'active',
-    type: 'platinum',
-    uid: '2',
-  },
-  features: {
-    ml: {
-      isAvailable: true,
-      isEnabled: true,
-    },
-  },
-});
+import * as redux from 'react-redux';
 
 describe('ML Flyout component', () => {
   const createJob = () => {};
   const onClose = () => {};
   const { DATE_RANGE_START, DATE_RANGE_END } = CLIENT_DEFAULTS;
 
+  beforeEach(() => {
+    const spy = jest.spyOn(redux, 'useDispatch');
+    spy.mockReturnValue(jest.fn());
+
+    const spy1 = jest.spyOn(redux, 'useSelector');
+    spy1.mockReturnValue(true);
+  });
+
   it('renders without errors', () => {
     const wrapper = shallowWithIntl(
       <MLFlyoutView
@@ -62,8 +36,12 @@ describe('ML Flyout component', () => {
     expect(wrapper).toMatchSnapshot();
   });
   it('shows license info if no ml available', () => {
+    const spy1 = jest.spyOn(redux, 'useSelector');
+
+    // return false value for no license
+    spy1.mockReturnValue(false);
+
     const value = {
-      license: expiredLicense,
       basePath: '',
       dateRangeStart: DATE_RANGE_START,
       dateRangeEnd: DATE_RANGE_END,
@@ -88,7 +66,6 @@ describe('ML Flyout component', () => {
 
   it('able to create job if valid license is available', () => {
     const value = {
-      license: validLicense,
       basePath: '',
       dateRangeStart: DATE_RANGE_START,
       dateRangeEnd: DATE_RANGE_END,

x-pack/plugins/uptime/public/components/monitor/ml/license_info.tsx

@@ -3,13 +3,48 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import React, { useContext } from 'react';
+import React, { useContext, useState, useEffect } from 'react';
 import { EuiCallOut, EuiButton, EuiSpacer } from '@elastic/eui';
+import { useDispatch, useSelector } from 'react-redux';
 import { UptimeSettingsContext } from '../../../contexts';
 import * as labels from './translations';
+import { getMLCapabilitiesAction } from '../../../state/actions';
+import { hasMLFeatureSelector } from '../../../state/selectors';
 
 export const ShowLicenseInfo = () => {
   const { basePath } = useContext(UptimeSettingsContext);
+  const [loading, setLoading] = useState<boolean>(false);
+  const hasMlFeature = useSelector(hasMLFeatureSelector);
+
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    dispatch(getMLCapabilitiesAction.get());
+  }, [dispatch]);
+
+  useEffect(() => {
+    let retryInterval: any;
+    if (loading) {
+      retryInterval = setInterval(() => {
+        dispatch(getMLCapabilitiesAction.get());
+      }, 5000);
+    } else {
+      clearInterval(retryInterval);
+    }
+
+    return () => {
+      clearInterval(retryInterval);
+    };
+  }, [dispatch, loading]);
+
+  useEffect(() => {
+    setLoading(false);
+  }, [hasMlFeature]);
+
+  const startLicenseTrial = () => {
+    setLoading(true);
+  };
+
   return (
     <>
       <EuiCallOut
@@ -20,13 +55,16 @@ export const ShowLicenseInfo = () => {
         iconType="help"
       >
         <p>{labels.START_TRAIL_DESC}</p>
-        <EuiButton
-          color="primary"
-          href={basePath + `/app/management/stack/license_management/home`}
-          target="_blank"
-        >
-          {labels.START_TRAIL}
-        </EuiButton>
+        <span onClick={startLicenseTrial} onKeyDown={() => {}}>
+          <EuiButton
+            color="primary"
+            isLoading={loading}
+            target="_blank"
+            href={basePath + `/app/management/stack/license_management/home`}
+          >
+            {labels.START_TRAIL}
+          </EuiButton>
+        </span>
       </EuiCallOut>
       <EuiSpacer />
     </>

x-pack/plugins/uptime/public/components/monitor/ml/ml_flyout.tsx

@@ -20,9 +20,11 @@ import {
   EuiTitle,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
+import { useSelector } from 'react-redux';
 import * as labels from './translations';
 import { UptimeSettingsContext } from '../../../contexts';
 import { ShowLicenseInfo } from './license_info';
+import { hasMLFeatureSelector } from '../../../state/selectors';
 
 interface Props {
   isCreatingJob: boolean;
@@ -32,11 +34,11 @@ interface Props {
 }
 
 export function MLFlyoutView({ isCreatingJob, onClickCreate, onClose, canCreateMLJob }: Props) {
-  const { basePath, license } = useContext(UptimeSettingsContext);
+  const { basePath } = useContext(UptimeSettingsContext);
 
-  const isLoadingMLJob = false;
+  const hasMlFeature = useSelector(hasMLFeatureSelector);
 
-  const hasPlatinumLicense = license?.getFeature('ml')?.isAvailable;
+  const isLoadingMLJob = false;
 
   return (
     <EuiFlyout onClose={onClose} size="s" data-test-subj="uptimeMLFlyout">
@@ -47,7 +49,7 @@ export function MLFlyoutView({ isCreatingJob, onClickCreate, onClose, canCreateM
         <EuiSpacer size="s" />
       </EuiFlyoutHeader>
       <EuiFlyoutBody>
-        {!hasPlatinumLicense && <ShowLicenseInfo />}
+        {!hasMlFeature && <ShowLicenseInfo />}
         <EuiText>
           <p>{labels.CREAT_ML_JOB_DESC}</p>
           <p>
@@ -80,7 +82,7 @@ export function MLFlyoutView({ isCreatingJob, onClickCreate, onClose, canCreateM
               onClick={() => onClickCreate()}
               fill
               isLoading={isCreatingJob}
-              disabled={isCreatingJob || isLoadingMLJob || !hasPlatinumLicense || !canCreateMLJob}
+              disabled={isCreatingJob || isLoadingMLJob || !hasMlFeature || !canCreateMLJob}
             >
               {labels.CREATE_NEW_JOB}
             </EuiButton>

x-pack/plugins/uptime/public/components/monitor/ml/ml_integeration.tsx

@@ -8,7 +8,7 @@ import React, { useContext, useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { MachineLearningFlyout } from './ml_flyout_container';
 import {
-  hasMLFeatureAvailable,
+  hasMLFeatureSelector,
   hasMLJobSelector,
   isMLJobDeletedSelector,
   isMLJobDeletingSelector,
@@ -35,7 +35,7 @@ export const MLIntegrationComponent = () => {
 
   const dispatch = useDispatch();
 
-  const isMLAvailable = useSelector(hasMLFeatureAvailable);
+  const isMLAvailable = useSelector(hasMLFeatureSelector);
 
   const deleteMLJob = () => dispatch(deleteMLJobAction.get({ monitorId: monitorId as string }));
   const isMLJobDeleting = useSelector(isMLJobDeletingSelector);

x-pack/plugins/uptime/public/components/monitor/monitor_duration/monitor_duration_container.tsx

@@ -14,7 +14,7 @@ import {
 } from '../../../state/actions';
 import {
   anomaliesSelector,
-  hasMLFeatureAvailable,
+  hasMLFeatureSelector,
   hasMLJobSelector,
   selectDurationLines,
 } from '../../../state/selectors';
@@ -34,7 +34,7 @@ export const MonitorDuration: React.FC<MonitorIdParam> = ({ monitorId }) => {
 
   const { durationLines, loading } = useSelector(selectDurationLines);
 
-  const isMLAvailable = useSelector(hasMLFeatureAvailable);
+  const isMLAvailable = useSelector(hasMLFeatureSelector);
 
   const { data: mlJobs, loading: jobsLoading } = useSelector(hasMLJobSelector);