[ILM] Cloud-specific changes for 7.10 (elastic#79650)

* added cloud cold tier specific call out, probably wip

* added jest test

* rephrase copy

* Added logic for showing/hiding data tier allocation option

- Added server-side test for detecting legacy config
- Added client-side test for asserting on cloud data tier option
  is hidden

* added test for not-on-cloud case

* Refactored logic for rendering data allocation notices

Also updated a comment.

* paraphrashing of Adams copy recommendation

* Fix comment

* address pr feedback

* clarify slight hack comment

* complete refactor of new flag for tests

Co-authored-by: Kibana Machine <[email protected]>

x-pack/plugins/index_lifecycle_management/__jest__/components/edit_policy.test.tsx

@@ -21,8 +21,10 @@ import {
   fatalErrorsServiceMock,
 } from '../../../../../src/core/public/mocks';
 import { usageCollectionPluginMock } from '../../../../../src/plugins/usage_collection/public/mocks';
+import { CloudSetup } from '../../../cloud/public';
 
 import { EditPolicy } from '../../public/application/sections/edit_policy/edit_policy';
+import { KibanaContextProvider } from '../../public/shared_imports';
 import { init as initHttp } from '../../public/application/services/http';
 import { init as initUiMetric } from '../../public/application/services/ui_metric';
 import { init as initNotification } from '../../public/application/services/notification';
@@ -148,7 +150,14 @@ const save = (rendered: ReactWrapper) => {
 describe('edit policy', () => {
   beforeEach(() => {
     component = (
-      <EditPolicy history={history} getUrlForApp={jest.fn()} policies={policies} policyName={''} />
+      <KibanaContextProvider services={{ cloud: { isCloudEnabled: false } as CloudSetup }}>
+        <EditPolicy
+          history={history}
+          getUrlForApp={jest.fn()}
+          policies={policies}
+          policyName={''}
+        />
+      </KibanaContextProvider>
     );
 
     ({ http } = editPolicyHelpers.setup());
@@ -447,6 +456,7 @@ describe('edit policy', () => {
       http.setupNodeListResponse({
         nodesByAttributes: {},
         nodesByRoles: { data: ['node1'] },
+        isUsingDeprecatedDataRoleConfig: false,
       });
       const rendered = mountWithIntl(component);
       noRollover(rendered);
@@ -495,6 +505,7 @@ describe('edit policy', () => {
       http.setupNodeListResponse({
         nodesByAttributes: {},
         nodesByRoles: {},
+        isUsingDeprecatedDataRoleConfig: false,
       });
       const rendered = mountWithIntl(component);
       noRollover(rendered);
@@ -507,6 +518,7 @@ describe('edit policy', () => {
       http.setupNodeListResponse({
         nodesByAttributes: {},
         nodesByRoles: { data_hot: ['test'], data_cold: ['test'] },
+        isUsingDeprecatedDataRoleConfig: false,
       });
       const rendered = mountWithIntl(component);
       noRollover(rendered);
@@ -519,6 +531,7 @@ describe('edit policy', () => {
       http.setupNodeListResponse({
         nodesByAttributes: {},
         nodesByRoles: { data: ['test'] },
+        isUsingDeprecatedDataRoleConfig: false,
       });
       const rendered = mountWithIntl(component);
       noRollover(rendered);
@@ -568,6 +581,7 @@ describe('edit policy', () => {
       http.setupNodeListResponse({
         nodesByAttributes: {},
         nodesByRoles: { data: ['node1'] },
+        isUsingDeprecatedDataRoleConfig: false,
       });
       const rendered = mountWithIntl(component);
       noRollover(rendered);
@@ -626,6 +640,7 @@ describe('edit policy', () => {
       http.setupNodeListResponse({
         nodesByAttributes: {},
         nodesByRoles: {},
+        isUsingDeprecatedDataRoleConfig: false,
       });
       const rendered = mountWithIntl(component);
       noRollover(rendered);
@@ -638,6 +653,7 @@ describe('edit policy', () => {
       http.setupNodeListResponse({
         nodesByAttributes: {},
         nodesByRoles: { data_hot: ['test'], data_warm: ['test'] },
+        isUsingDeprecatedDataRoleConfig: false,
       });
       const rendered = mountWithIntl(component);
       noRollover(rendered);
@@ -650,6 +666,7 @@ describe('edit policy', () => {
       http.setupNodeListResponse({
         nodesByAttributes: {},
         nodesByRoles: { data: ['test'] },
+        isUsingDeprecatedDataRoleConfig: false,
       });
       const rendered = mountWithIntl(component);
       noRollover(rendered);
@@ -679,4 +696,104 @@ describe('edit policy', () => {
       expectedErrorMessages(rendered, [positiveNumberRequiredMessage]);
     });
   });
+  describe('not on cloud', () => {
+    beforeEach(() => {
+      server.respondImmediately = true;
+    });
+    test('should show all allocation options, even if using legacy config', async () => {
+      http.setupNodeListResponse({
+        nodesByAttributes: { test: ['123'] },
+        nodesByRoles: { data: ['test'], data_hot: ['test'], data_warm: ['test'] },
+        isUsingDeprecatedDataRoleConfig: true,
+      });
+      const rendered = mountWithIntl(component);
+      noRollover(rendered);
+      setPolicyName(rendered, 'mypolicy');
+      await activatePhase(rendered, 'warm');
+      expect(rendered.find('.euiLoadingSpinner').exists()).toBeFalsy();
+
+      // Assert that only the custom and off options exist
+      findTestSubject(rendered, 'dataTierSelect').simulate('click');
+      expect(findTestSubject(rendered, 'defaultDataAllocationOption').exists()).toBeTruthy();
+      expect(findTestSubject(rendered, 'customDataAllocationOption').exists()).toBeTruthy();
+      expect(findTestSubject(rendered, 'noneDataAllocationOption').exists()).toBeTruthy();
+    });
+  });
+  describe('on cloud', () => {
+    beforeEach(() => {
+      component = (
+        <KibanaContextProvider services={{ cloud: { isCloudEnabled: true } as CloudSetup }}>
+          <EditPolicy
+            history={history}
+            getUrlForApp={jest.fn()}
+            policies={policies}
+            policyName="test"
+          />
+        </KibanaContextProvider>
+      );
+      ({ http } = editPolicyHelpers.setup());
+      ({ server, httpRequestsMockHelpers } = http);
+      server.respondImmediately = true;
+
+      httpRequestsMockHelpers.setPoliciesResponse(policies);
+    });
+
+    describe('with legacy data role config', () => {
+      test('should hide data tier option on cloud using legacy node role configuration', async () => {
+        http.setupNodeListResponse({
+          nodesByAttributes: { test: ['123'] },
+          nodesByRoles: { data: ['test'], data_hot: ['test'], data_warm: ['test'] },
+          isUsingDeprecatedDataRoleConfig: true,
+        });
+        const rendered = mountWithIntl(component);
+        noRollover(rendered);
+        setPolicyName(rendered, 'mypolicy');
+        await activatePhase(rendered, 'warm');
+        expect(rendered.find('.euiLoadingSpinner').exists()).toBeFalsy();
+
+        // Assert that only the custom and off options exist
+        findTestSubject(rendered, 'dataTierSelect').simulate('click');
+        expect(findTestSubject(rendered, 'defaultDataAllocationOption').exists()).toBeFalsy();
+        expect(findTestSubject(rendered, 'customDataAllocationOption').exists()).toBeTruthy();
+        expect(findTestSubject(rendered, 'noneDataAllocationOption').exists()).toBeTruthy();
+      });
+    });
+
+    describe('with node role config', () => {
+      test('should show off, custom and data role options on cloud with data roles', async () => {
+        http.setupNodeListResponse({
+          nodesByAttributes: { test: ['123'] },
+          nodesByRoles: { data: ['test'], data_hot: ['test'], data_warm: ['test'] },
+          isUsingDeprecatedDataRoleConfig: false,
+        });
+        const rendered = mountWithIntl(component);
+        noRollover(rendered);
+        setPolicyName(rendered, 'mypolicy');
+        await activatePhase(rendered, 'warm');
+        expect(rendered.find('.euiLoadingSpinner').exists()).toBeFalsy();
+
+        findTestSubject(rendered, 'dataTierSelect').simulate('click');
+        expect(findTestSubject(rendered, 'defaultDataAllocationOption').exists()).toBeTruthy();
+        expect(findTestSubject(rendered, 'customDataAllocationOption').exists()).toBeTruthy();
+        expect(findTestSubject(rendered, 'noneDataAllocationOption').exists()).toBeTruthy();
+      });
+
+      test('should show cloud notice when cold tier nodes do not exist', async () => {
+        http.setupNodeListResponse({
+          nodesByAttributes: {},
+          nodesByRoles: { data: ['test'], data_hot: ['test'], data_warm: ['test'] },
+          isUsingDeprecatedDataRoleConfig: false,
+        });
+        const rendered = mountWithIntl(component);
+        noRollover(rendered);
+        setPolicyName(rendered, 'mypolicy');
+        await activatePhase(rendered, 'cold');
+        expect(rendered.find('.euiLoadingSpinner').exists()).toBeFalsy();
+        expect(findTestSubject(rendered, 'cloudDataTierCallout').exists()).toBeTruthy();
+        // Assert that other notices are not showing
+        expect(findTestSubject(rendered, 'defaultAllocationNotice').exists()).toBeFalsy();
+        expect(findTestSubject(rendered, 'noNodeAttributesWarning').exists()).toBeFalsy();
+      });
+    });
+  });
 });

x-pack/plugins/index_lifecycle_management/common/types/api.ts

@@ -9,4 +9,12 @@ import { NodeDataRoleWithCatchAll } from '.';
 export interface ListNodesRouteResponse {
   nodesByAttributes: { [attributePair: string]: string[] };
   nodesByRoles: { [role in NodeDataRoleWithCatchAll]?: string[] };
+
+  /**
+   * A flag to indicate whether a node is using `settings.node.data` which is the now deprecated way cloud configured
+   * nodes to have data (and other) roles.
+   *
+   * If this is true, it means the cluster is using legacy cloud configuration for data allocation, not node roles.
+   */
+  isUsingDeprecatedDataRoleConfig: boolean;
 }

x-pack/plugins/index_lifecycle_management/kibana.json

@@ -9,6 +9,7 @@
     "features"
   ],
   "optionalPlugins": [
+    "cloud",
     "usageCollection",
     "indexManagement",
     "home"

x-pack/plugins/index_lifecycle_management/public/application/index.tsx

@@ -8,6 +8,9 @@ import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 import { I18nStart, ScopedHistory, ApplicationStart } from 'kibana/public';
 import { UnmountCallback } from 'src/core/public';
+import { CloudSetup } from '../../../cloud/public';
+
+import { KibanaContextProvider } from '../shared_imports';
 
 import { App } from './app';
 
@@ -16,11 +19,14 @@ export const renderApp = (
   I18nContext: I18nStart['Context'],
   history: ScopedHistory,
   navigateToApp: ApplicationStart['navigateToApp'],
-  getUrlForApp: ApplicationStart['getUrlForApp']
+  getUrlForApp: ApplicationStart['getUrlForApp'],
+  cloud?: CloudSetup
 ): UnmountCallback => {
   render(
     <I18nContext>
-      <App history={history} navigateToApp={navigateToApp} getUrlForApp={getUrlForApp} />
+      <KibanaContextProvider services={{ cloud }}>
+        <App history={history} navigateToApp={navigateToApp} getUrlForApp={getUrlForApp} />
+      </KibanaContextProvider>
     </I18nContext>,
     element
   );

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/data_tier_allocation/cloud_data_tier_callout.tsx

@@ -0,0 +1,26 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { i18n } from '@kbn/i18n';
+import React, { FunctionComponent } from 'react';
+import { EuiCallOut } from '@elastic/eui';
+
+const i18nTexts = {
+  title: i18n.translate('xpack.indexLifecycleMgmt.editPolicy.cloudDataTierCallout.title', {
+    defaultMessage: 'Create a cold tier',
+  }),
+  body: i18n.translate('xpack.indexLifecycleMgmt.editPolicy.cloudDataTierCallout.body', {
+    defaultMessage: 'Edit your Elastic Cloud deployment to set up a cold tier.',
+  }),
+};
+
+export const CloudDataTierCallout: FunctionComponent = () => {
+  return (
+    <EuiCallOut title={i18nTexts.title} data-test-subj="cloudDataTierCallout">
+      {i18nTexts.body}
+    </EuiCallOut>
+  );
+};

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/data_tier_allocation/data_tier_allocation.tsx

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { FunctionComponent } from 'react';
+import React, { FunctionComponent, useEffect } from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiText, EuiFormRow, EuiSpacer, EuiSuperSelect, EuiSuperSelectOption } from '@elastic/eui';
 
@@ -90,7 +90,25 @@ const i18nTexts = {
 };
 
 export const DataTierAllocation: FunctionComponent<SharedProps> = (props) => {
-  const { phaseData, setPhaseData, phase, hasNodeAttributes } = props;
+  const { phaseData, setPhaseData, phase, hasNodeAttributes, disableDataTierOption } = props;
+
+  useEffect(() => {
+    if (disableDataTierOption && phaseData.dataTierAllocationType === 'default') {
+      /**
+       * @TODO
+       * This is a slight hack because we only know we should disable the "default" option further
+       * down the component tree (i.e., after the policy has been deserialized).
+       *
+       * We reset the value to "custom" if we deserialized to "default".
+       *
+       * It would be better if we had all the information we needed before deserializing and
+       * were able to handle this at the deserialization step instead of patching further down
+       * the component tree - this should be a future refactor.
+       */
+      setPhaseData('dataTierAllocationType', 'custom');
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   return (
     <div data-test-subj={`${phase}-dataTierAllocationControls`}>
@@ -102,21 +120,40 @@ export const DataTierAllocation: FunctionComponent<SharedProps> = (props) => {
           onChange={(value) => setPhaseData('dataTierAllocationType', value)}
           options={
             [
+              disableDataTierOption
+                ? undefined
+                : {
+                    'data-test-subj': 'defaultDataAllocationOption',
+                    value: 'default',
+                    inputDisplay: i18nTexts.allocationOptions[phase].default.input,
+                    dropdownDisplay: (
+                      <>
+                        <strong>{i18nTexts.allocationOptions[phase].default.input}</strong>
+                        <EuiText size="s" color="subdued">
+                          <p className="euiTextColor--subdued">
+                            {i18nTexts.allocationOptions[phase].default.helpText}
+                          </p>
+                        </EuiText>
+                      </>
+                    ),
+                  },
               {
-                value: 'default',
-                inputDisplay: i18nTexts.allocationOptions[phase].default.input,
+                'data-test-subj': 'customDataAllocationOption',
+                value: 'custom',
+                inputDisplay: i18nTexts.allocationOptions[phase].custom.inputDisplay,
                 dropdownDisplay: (
                   <>
-                    <strong>{i18nTexts.allocationOptions[phase].default.input}</strong>
+                    <strong>{i18nTexts.allocationOptions[phase].custom.inputDisplay}</strong>
                     <EuiText size="s" color="subdued">
                       <p className="euiTextColor--subdued">
-                        {i18nTexts.allocationOptions[phase].default.helpText}
+                        {i18nTexts.allocationOptions[phase].custom.helpText}
                       </p>
                     </EuiText>
                   </>
                 ),
               },
               {
+                'data-test-subj': 'noneDataAllocationOption',
                 value: 'none',
                 inputDisplay: i18nTexts.allocationOptions[phase].none.inputDisplay,
                 dropdownDisplay: (
@@ -130,22 +167,7 @@ export const DataTierAllocation: FunctionComponent<SharedProps> = (props) => {
                   </>
                 ),
               },
-              {
-                'data-test-subj': 'customDataAllocationOption',
-                value: 'custom',
-                inputDisplay: i18nTexts.allocationOptions[phase].custom.inputDisplay,
-                dropdownDisplay: (
-                  <>
-                    <strong>{i18nTexts.allocationOptions[phase].custom.inputDisplay}</strong>
-                    <EuiText size="s" color="subdued">
-                      <p className="euiTextColor--subdued">
-                        {i18nTexts.allocationOptions[phase].custom.helpText}
-                      </p>
-                    </EuiText>
-                  </>
-                ),
-              },
-            ] as SelectOptions[]
+            ].filter(Boolean) as SelectOptions[]
           }
         />
       </EuiFormRow>

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/data_tier_allocation/default_allocation_notice.tsx

@@ -6,7 +6,7 @@
 
 import { i18n } from '@kbn/i18n';
 import React, { FunctionComponent } from 'react';
-import { EuiCallOut, EuiSpacer } from '@elastic/eui';
+import { EuiCallOut } from '@elastic/eui';
 
 import { PhaseWithAllocation, NodeDataRole } from '../../../../../../common/types';
 
@@ -102,10 +102,5 @@ export const DefaultAllocationNotice: FunctionComponent<Props> = ({ phase, targe
       </EuiCallOut>
     );
 
-  return (
-    <>
-      <EuiSpacer size="s" />
-      {content}
-    </>
-  );
+  return content;
 };