Add API endpoint to Rollup Job JSON summary. (#42789) (#42902)

* Switch to using EuiCodeBlock, add description text, and make request copyable.
* Align ILM request flyout.

x-pack/legacy/plugins/index_lifecycle_management/public/sections/edit_policy/components/policy_json_flyout.js

@@ -5,18 +5,13 @@
  */
 
 import React, { PureComponent } from 'react';
-import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import PropTypes from 'prop-types';
-import { toastNotifications } from 'ui/notify';
 
 import {
-  EuiButton,
-  EuiCodeEditor,
-  EuiCopy,
+  EuiCodeBlock,
   EuiFlyout,
   EuiFlyoutBody,
-  EuiFlyoutFooter,
   EuiFlyoutHeader,
   EuiPortal,
   EuiSpacer,
@@ -40,8 +35,8 @@ export class PolicyJsonFlyout extends PureComponent {
 
   render() {
     const { lifecycle, close, policyName } = this.props;
-    const endpoint = `PUT _ilm/policy/${policyName || '{policyName}'}\n`;
-    const request = `${endpoint}${this.getEsJson(lifecycle)}`;
+    const endpoint = `PUT _ilm/policy/${policyName || '<policyName>'}`;
+    const request = `${endpoint}\n${this.getEsJson(lifecycle)}`;
 
     return (
       <EuiPortal>
@@ -70,47 +65,20 @@ export class PolicyJsonFlyout extends PureComponent {
               <p>
                 <FormattedMessage
                   id="xpack.indexLifecycleMgmt.policyJsonFlyout.descriptionText"
-                  defaultMessage="This is the underlying request to Elasticsearch that will create or update this index lifecycle policy."
+                  defaultMessage="This Elasticsearch request will create or update this index lifecycle policy."
                 />
               </p>
             </EuiText>
 
             <EuiSpacer />
 
-            <EuiCodeEditor
-              mode="json"
-              theme="textmate"
-              isReadOnly
-              setOptions={{ maxLines: Infinity, useWorker: false }}
-              value={request}
-              editorProps={{
-                $blockScrolling: Infinity
-              }}
-            />
+            <EuiCodeBlock
+              language="json"
+              isCopyable
+            >
+              {request}
+            </EuiCodeBlock>
           </EuiFlyoutBody>
-
-          <EuiFlyoutFooter>
-            <EuiCopy textToCopy={request}>
-              {copy => (
-                <EuiButton
-                  onClick={() => {
-                    copy();
-                    toastNotifications.add(i18n.translate(
-                      'xpack.indexLifecycleMgmt.editPolicy.policyJsonFlyout.copiedToClipboardMessage',
-                      {
-                        defaultMessage: 'Request copied to clipboard'
-                      }
-                    ));
-                  }}
-                >
-                  <FormattedMessage
-                    id="xpack.indexLifecycleMgmt.policyJsonFlyout.copyToClipboardButton"
-                    defaultMessage="Copy to clipboard"
-                  />
-                </EuiButton>
-              )}
-            </EuiCopy>
-          </EuiFlyoutFooter>
         </EuiFlyout>
       </EuiPortal>
     );

x-pack/legacy/plugins/rollup/__jest__/client_integration/job_create_review.test.js

@@ -93,12 +93,12 @@ describe('Create Rollup Job, step 6: Review', () => {
         .simulate('click');
     };
 
-    it('should have a "Summary" & "JSON" tabs to review the Job', async () => {
+    it('should have a "Summary" & "Request" tabs to review the Job', async () => {
       await goToStep(6);
-      expect(getTabsText()).toEqual(['Summary', 'JSON']);
+      expect(getTabsText()).toEqual(['Summary', 'Request']);
     });
 
-    it('should have a "Summary", "Terms" & "JSON" tab if a term aggregation was added', async () => {
+    it('should have a "Summary", "Terms" & "Request" tab if a term aggregation was added', async () => {
       httpRequestsMockHelpers.setIndexPatternValidityResponse({ numericFields: ['my-field'] });
       await goToStep(3);
       selectFirstField('Terms');
@@ -107,10 +107,10 @@ describe('Create Rollup Job, step 6: Review', () => {
       actions.clickNextStep(); // go to step 5
       actions.clickNextStep(); // go to review
 
-      expect(getTabsText()).toEqual(['Summary', 'Terms', 'JSON']);
+      expect(getTabsText()).toEqual(['Summary', 'Terms', 'Request']);
     });
 
-    it('should have a "Summary", "Histogram" & "JSON" tab if a histogram field was added', async () => {
+    it('should have a "Summary", "Histogram" & "Request" tab if a histogram field was added', async () => {
       httpRequestsMockHelpers.setIndexPatternValidityResponse({ numericFields: ['a-field'] });
       await goToStep(4);
       selectFirstField('Histogram');
@@ -119,10 +119,10 @@ describe('Create Rollup Job, step 6: Review', () => {
       actions.clickNextStep(); // go to step 5
       actions.clickNextStep(); // go to review
 
-      expect(getTabsText()).toEqual(['Summary', 'Histogram', 'JSON']);
+      expect(getTabsText()).toEqual(['Summary', 'Histogram', 'Request']);
     });
 
-    it('should have a "Summary", "Metrics" & "JSON" tab if a histogram field was added', async () => {
+    it('should have a "Summary", "Metrics" & "Request" tab if a histogram field was added', async () => {
       httpRequestsMockHelpers.setIndexPatternValidityResponse({ numericFields: ['a-field'], dateFields: ['b-field'] });
       await goToStep(5);
       selectFirstField('Metrics');
@@ -130,7 +130,7 @@ describe('Create Rollup Job, step 6: Review', () => {
 
       actions.clickNextStep(); // go to review
 
-      expect(getTabsText()).toEqual(['Summary', 'Metrics', 'JSON']);
+      expect(getTabsText()).toEqual(['Summary', 'Metrics', 'Request']);
     });
   });
 

x-pack/legacy/plugins/rollup/public/crud_app/sections/components/index.js

@@ -15,6 +15,7 @@ export {
   JOB_DETAILS_TAB_HISTOGRAM,
   JOB_DETAILS_TAB_METRICS,
   JOB_DETAILS_TAB_JSON,
+  JOB_DETAILS_TAB_REQUEST,
   tabToHumanizedMap,
 } from './job_details';
 

x-pack/legacy/plugins/rollup/public/crud_app/sections/components/job_details/index.js

@@ -11,5 +11,6 @@ export {
   JOB_DETAILS_TAB_HISTOGRAM,
   JOB_DETAILS_TAB_METRICS,
   JOB_DETAILS_TAB_JSON,
+  JOB_DETAILS_TAB_REQUEST,
   tabToHumanizedMap,
 } from './job_details';

x-pack/legacy/plugins/rollup/public/crud_app/sections/components/job_details/job_details.js

@@ -14,6 +14,7 @@ import {
   TabMetrics,
   TabJson,
   TabHistogram,
+  TabRequest,
 } from './tabs';
 
 export const JOB_DETAILS_TAB_SUMMARY = 'JOB_DETAILS_TAB_SUMMARY';
@@ -21,6 +22,7 @@ export const JOB_DETAILS_TAB_TERMS = 'JOB_DETAILS_TAB_TERMS';
 export const JOB_DETAILS_TAB_HISTOGRAM = 'JOB_DETAILS_TAB_HISTOGRAM';
 export const JOB_DETAILS_TAB_METRICS = 'JOB_DETAILS_TAB_METRICS';
 export const JOB_DETAILS_TAB_JSON = 'JOB_DETAILS_TAB_JSON';
+export const JOB_DETAILS_TAB_REQUEST = 'JOB_DETAILS_TAB_REQUEST';
 
 export const tabToHumanizedMap = {
   [JOB_DETAILS_TAB_SUMMARY]: (
@@ -53,6 +55,12 @@ export const tabToHumanizedMap = {
       defaultMessage="JSON"
     />
   ),
+  [JOB_DETAILS_TAB_REQUEST]: (
+    <FormattedMessage
+      id="xpack.rollupJobs.create.jobDetails.tabRequestLabel"
+      defaultMessage="Request"
+    />
+  ),
 };
 
 const JOB_DETAILS_TABS = [
@@ -61,6 +69,7 @@ const JOB_DETAILS_TABS = [
   JOB_DETAILS_TAB_HISTOGRAM,
   JOB_DETAILS_TAB_METRICS,
   JOB_DETAILS_TAB_JSON,
+  JOB_DETAILS_TAB_REQUEST,
 ];
 
 export const JobDetails = ({
@@ -68,6 +77,7 @@ export const JobDetails = ({
   job,
   stats,
   json,
+  endpoint,
 }) => {
   const {
     metrics,
@@ -95,6 +105,9 @@ export const JobDetails = ({
     [JOB_DETAILS_TAB_JSON]: (
       <TabJson json={json} />
     ),
+    [JOB_DETAILS_TAB_REQUEST]: (
+      <TabRequest json={json} endpoint={endpoint} />
+    ),
   };
 
   return tabToContentMap[tab];

x-pack/legacy/plugins/rollup/public/crud_app/sections/components/job_details/tabs/index.js

@@ -9,3 +9,4 @@ export { TabTerms } from './tab_terms';
 export { TabHistogram } from './tab_histogram';
 export { TabMetrics } from './tab_metrics';
 export { TabJson } from './tab_json';
+export { TabRequest } from './tab_request';

x-pack/legacy/plugins/rollup/public/crud_app/sections/components/job_details/tabs/tab_json.js

@@ -20,7 +20,7 @@ export const TabJson = ({
       mode="json"
       theme="textmate"
       isReadOnly
-      setOptions={{ maxLines: Infinity }}
+      setOptions={{ maxLines: Infinity, useWorker: false }}
       value={jsonString}
       editorProps={{
         $blockScrolling: Infinity

x-pack/legacy/plugins/rollup/public/crud_app/sections/components/job_details/tabs/tab_request.js

@@ -0,0 +1,43 @@
+/*
+ * 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 React, { Fragment } from 'react';
+import { FormattedMessage } from '@kbn/i18n/react';
+
+import {
+  EuiCodeBlock,
+  EuiSpacer,
+  EuiText,
+} from '@elastic/eui';
+
+export const TabRequest = ({
+  json,
+  endpoint,
+}) => {
+  const request = `${endpoint}\n${JSON.stringify(json, null, 2)}`;
+
+  return (
+    <Fragment>
+      <EuiText>
+        <p>
+          <FormattedMessage
+            id="xpack.rollupJobs.jobDetails.tabRequest.descriptionText"
+            defaultMessage="This Elasticsearch request will create this rollup job."
+          />
+        </p>
+      </EuiText>
+
+      <EuiSpacer size="m" />
+
+      <EuiCodeBlock
+        language="json"
+        isCopyable
+      >
+        {request}
+      </EuiCodeBlock>
+    </Fragment>
+  );
+};

x-pack/legacy/plugins/rollup/public/crud_app/sections/job_create/steps/step_review.js

@@ -18,16 +18,17 @@ import {
   JOB_DETAILS_TAB_TERMS,
   JOB_DETAILS_TAB_HISTOGRAM,
   JOB_DETAILS_TAB_METRICS,
-  JOB_DETAILS_TAB_JSON,
+  JOB_DETAILS_TAB_REQUEST,
   tabToHumanizedMap,
 } from '../../components';
 
+
 const JOB_DETAILS_TABS = [
   JOB_DETAILS_TAB_SUMMARY,
   JOB_DETAILS_TAB_TERMS,
   JOB_DETAILS_TAB_HISTOGRAM,
   JOB_DETAILS_TAB_METRICS,
-  JOB_DETAILS_TAB_JSON,
+  JOB_DETAILS_TAB_REQUEST,
 ];
 
 export class StepReviewUi extends Component {
@@ -98,6 +99,8 @@ export class StepReviewUi extends Component {
     const { job } = this.props;
     const { selectedTab } = this.state;
     const json = serializeJob(job);
+    const endpoint = `PUT _rollup/job/${job.id}`;
+
     return (
       <Fragment>
         <EuiTitle data-test-subj="rollupJobCreateReviewTitle">
@@ -113,7 +116,7 @@ export class StepReviewUi extends Component {
         {this.renderTabs()}
 
         <EuiErrorBoundary>
-          <JobDetails job={job} json={json} tab={selectedTab} />
+          <JobDetails job={job} json={json} endpoint={endpoint} tab={selectedTab} />
         </EuiErrorBoundary>
       </Fragment>
     );

x-pack/plugins/translations/translations/ja-JP.json

@@ -4901,7 +4901,6 @@
     "xpack.indexLifecycleMgmt.editPolicy.phaseErrorMessage": "エラーを修正してください",
     "xpack.indexLifecycleMgmt.editPolicy.phaseWarm.minimumAgeLabel": "ウォームフェーズのタイミング",
     "xpack.indexLifecycleMgmt.editPolicy.phaseWarm.minimumAgeUnitsAriaLabel": "ウォームフェーズのタイミングの単位",
-    "xpack.indexLifecycleMgmt.editPolicy.policyJsonFlyout.copiedToClipboardMessage": "JSON がクリップボードにコピーされました",
     "xpack.indexLifecycleMgmt.editPolicy.policyNameAlreadyUsedError": "このポリシー名は既に使用されています。",
     "xpack.indexLifecycleMgmt.editPolicy.policyNameContainsCommaError": "ポリシー名にはコンマを使用できません。",
     "xpack.indexLifecycleMgmt.editPolicy.policyNameContainsSpaceError": "ポリシー名にはスペースを使用できません。",
@@ -4993,7 +4992,6 @@
     "xpack.indexLifecycleMgmt.nodeAttrDetails.title": "属性 {selectedNodeAttrs} を含むノード",
     "xpack.indexLifecycleMgmt.noMatch.noPolicicesDescription": "表示するポリシーがありません",
     "xpack.indexLifecycleMgmt.optionalMessage": " (オプション)",
-    "xpack.indexLifecycleMgmt.policyJsonFlyout.copyToClipboardButton": "クリップボードにコピー",
     "xpack.indexLifecycleMgmt.policyTable.actionsButtonText": "アクション",
     "xpack.indexLifecycleMgmt.policyTable.addLifecyclePolicyToTemplateConfirmModal.cancelButton": "キャンセル",
     "xpack.indexLifecycleMgmt.policyTable.addLifecyclePolicyToTemplateConfirmModal.chooseTemplateLabel": "インデックステンプレート",

x-pack/plugins/translations/translations/zh-CN.json

@@ -5044,7 +5044,6 @@
     "xpack.indexLifecycleMgmt.editPolicy.phaseErrorMessage": "修复错误",
     "xpack.indexLifecycleMgmt.editPolicy.phaseWarm.minimumAgeLabel": "温阶段计时",
     "xpack.indexLifecycleMgmt.editPolicy.phaseWarm.minimumAgeUnitsAriaLabel": "温阶段计时单位",
-    "xpack.indexLifecycleMgmt.editPolicy.policyJsonFlyout.copiedToClipboardMessage": "JSON 已复制到剪贴板",
     "xpack.indexLifecycleMgmt.editPolicy.policyNameAlreadyUsedError": "该策略名称已被使用。",
     "xpack.indexLifecycleMgmt.editPolicy.policyNameContainsCommaError": "策略名称不能包含逗号。",
     "xpack.indexLifecycleMgmt.editPolicy.policyNameContainsSpaceError": "策略名称不能包含空格。",
@@ -5136,7 +5135,6 @@
     "xpack.indexLifecycleMgmt.nodeAttrDetails.title": "包含属性 {selectedNodeAttrs} 的节点",
     "xpack.indexLifecycleMgmt.noMatch.noPolicicesDescription": "没有要显示的策略",
     "xpack.indexLifecycleMgmt.optionalMessage": " （可选）",
-    "xpack.indexLifecycleMgmt.policyJsonFlyout.copyToClipboardButton": "复制到剪贴板",
     "xpack.indexLifecycleMgmt.policyTable.actionsButtonText": "操作",
     "xpack.indexLifecycleMgmt.policyTable.addLifecyclePolicyToTemplateConfirmModal.cancelButton": "取消",
     "xpack.indexLifecycleMgmt.policyTable.addLifecyclePolicyToTemplateConfirmModal.chooseTemplateLabel": "索引模板",