Add request flyout to Remote Clusters. (elastic#42900)

x-pack/legacy/plugins/remote_clusters/common/index.ts

@@ -19,3 +19,5 @@ export const PLUGIN = {
 };
 
 export const API_BASE_PATH = '/api/remote_clusters';
+
+export { deserializeCluster, serializeCluster } from './cluster_serialization';

x-pack/legacy/plugins/remote_clusters/public/app/sections/components/remote_cluster_form/remote_cluster_form.js

@@ -38,6 +38,8 @@ import {
   transportPortUrl,
 } from '../../../services/documentation';
 
+import { RequestFlyout } from './request_flyout';
+
 import { validateName, validateSeeds, validateSeed } from './validators';
 
 const defaultFields = {
@@ -78,9 +80,16 @@ export class RemoteClusterForm extends Component {
       disabledFields,
       fieldsErrors: this.getFieldsErrors(fieldsState),
       areErrorsVisible: false,
+      isRequestVisible: false,
     };
   }
 
+  toggleRequest = () => {
+    this.setState(({ isRequestVisible }) => ({
+      isRequestVisible: !isRequestVisible,
+    }));
+  };
+
   getFieldsErrors(fields, seedInput = '') {
     const { name, seeds } = fields;
     return {
@@ -385,7 +394,7 @@ export class RemoteClusterForm extends Component {
 
   renderActions() {
     const { isSaving, cancel } = this.props;
-    const { areErrorsVisible } = this.state;
+    const { areErrorsVisible, isRequestVisible } = this.state;
 
     if (isSaving) {
       return (
@@ -427,25 +436,47 @@ export class RemoteClusterForm extends Component {
     const isSaveDisabled = areErrorsVisible && this.hasErrors();
 
     return (
-      <EuiFlexGroup alignItems="center" gutterSize="m">
+      <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
         <EuiFlexItem grow={false}>
-          <EuiButton
-            data-test-subj="remoteClusterFormSaveButton"
-            color="secondary"
-            iconType="check"
-            onClick={this.save}
-            fill
-            disabled={isSaveDisabled}
-            aria-describedby={`${this.generateId(ERROR_TITLE_ID)} ${this.generateId(ERROR_LIST_ID)}`}
-          >
-            <FormattedMessage
-              id="xpack.remoteClusters.remoteClusterForm.saveButtonLabel"
-              defaultMessage="Save"
-            />
-          </EuiButton>
+          <EuiFlexGroup alignItems="center" gutterSize="m">
+            <EuiFlexItem grow={false}>
+              <EuiButton
+                data-test-subj="remoteClusterFormSaveButton"
+                color="secondary"
+                iconType="check"
+                onClick={this.save}
+                fill
+                disabled={isSaveDisabled}
+                aria-describedby={`${this.generateId(ERROR_TITLE_ID)} ${this.generateId(ERROR_LIST_ID)}`}
+              >
+                <FormattedMessage
+                  id="xpack.remoteClusters.remoteClusterForm.saveButtonLabel"
+                  defaultMessage="Save"
+                />
+              </EuiButton>
+            </EuiFlexItem>
+
+            {cancelButton}
+          </EuiFlexGroup>
         </EuiFlexItem>
 
-        {cancelButton}
+        <EuiFlexItem grow={false}>
+          <EuiButtonEmpty
+            onClick={this.toggleRequest}
+          >
+            {isRequestVisible ? (
+              <FormattedMessage
+                id="xpack.remoteClusters.remoteClusterForm.hideRequestButtonLabel"
+                defaultMessage="Hide request"
+              />
+            ) : (
+              <FormattedMessage
+                id="xpack.remoteClusters.remoteClusterForm.showRequestButtonLabel"
+                defaultMessage="Show request"
+              />
+            )}
+          </EuiButtonEmpty>
+        </EuiFlexItem>
       </EuiFlexGroup>
     );
   }
@@ -593,6 +624,7 @@ export class RemoteClusterForm extends Component {
     } = this.props;
 
     const {
+      isRequestVisible,
       areErrorsVisible,
       fields: {
         name,
@@ -667,6 +699,14 @@ export class RemoteClusterForm extends Component {
         {this.renderActions()}
 
         {this.renderSavingFeedback()}
+
+        {isRequestVisible ? (
+          <RequestFlyout
+            name={name}
+            cluster={this.getAllFields()}
+            close={() => this.setState({ isRequestVisible: false })}
+          />
+        ) : null}
       </Fragment>
     );
   }

x-pack/legacy/plugins/remote_clusters/public/app/sections/components/remote_cluster_form/request_flyout.js

@@ -0,0 +1,100 @@
+/*
+ * 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.
+ */
+
+/*
+ * 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, { PureComponent } from 'react';
+import { FormattedMessage } from '@kbn/i18n/react';
+import PropTypes from 'prop-types';
+
+import {
+  EuiButtonEmpty,
+  EuiCodeBlock,
+  EuiFlyout,
+  EuiFlyoutBody,
+  EuiFlyoutFooter,
+  EuiFlyoutHeader,
+  EuiSpacer,
+  EuiText,
+  EuiTitle,
+} from '@elastic/eui';
+
+import { serializeCluster } from '../../../../../common';
+
+export class RequestFlyout extends PureComponent {
+  static propTypes = {
+    close: PropTypes.func.isRequired,
+    name: PropTypes.string.isRequired,
+    cluster: PropTypes.object.isRequired,
+  };
+
+  render() {
+    const { name, close, cluster } = this.props;
+    const endpoint = 'PUT _cluster/settings';
+    const payload = JSON.stringify(serializeCluster(cluster), null, 2);
+    const request = `${endpoint}\n${payload}`;
+
+    return (
+      <EuiFlyout maxWidth={480} onClose={close}>
+        <EuiFlyoutHeader>
+          <EuiTitle>
+            <h2>
+              {name ? (
+                <FormattedMessage
+                  id="xpack.remoteClusters.requestFlyout.namedTitle"
+                  defaultMessage="Request for '{name}'"
+                  values={{ name }}
+                />
+              ) : (
+                <FormattedMessage
+                  id="xpack.remoteClusters.requestFlyout.unnamedTitle"
+                  defaultMessage="Request"
+                />
+              )}
+            </h2>
+          </EuiTitle>
+        </EuiFlyoutHeader>
+
+        <EuiFlyoutBody>
+          <EuiText>
+            <p>
+              <FormattedMessage
+                id="xpack.remoteClusters.requestFlyout.descriptionText"
+                defaultMessage="This Elasticsearch request will create or update this remote cluster."
+              />
+            </p>
+          </EuiText>
+
+          <EuiSpacer />
+
+          <EuiCodeBlock
+            language="json"
+            isCopyable
+          >
+            {request}
+          </EuiCodeBlock>
+        </EuiFlyoutBody>
+
+        <EuiFlyoutFooter>
+          <EuiButtonEmpty
+            iconType="cross"
+            onClick={close}
+            flush="left"
+          >
+            <FormattedMessage
+              id="xpack.remoteClusters.requestFlyout.closeButtonLabel"
+              defaultMessage="Close"
+            />
+          </EuiButtonEmpty>
+        </EuiFlyoutFooter>
+      </EuiFlyout>
+    );
+  }
+}

x-pack/legacy/plugins/remote_clusters/server/routes/api/add_route.ts

@@ -11,8 +11,8 @@ import {
   RouterRouteHandler,
   wrapCustomError,
 } from '../../../../../server/lib/create_router';
+import { serializeCluster } from '../../../common/cluster_serialization';
 import { doesClusterExist } from '../../lib/does_cluster_exist';
-import { serializeCluster } from '../../lib/cluster_serialization';
 
 export const register = (router: Router): void => {
   router.post('', addHandler);

x-pack/legacy/plugins/remote_clusters/server/routes/api/delete_route.ts

@@ -13,8 +13,8 @@ import {
   wrapEsError,
   wrapUnknownError,
 } from '../../../../../server/lib/create_router';
+import { serializeCluster } from '../../../common/cluster_serialization';
 import { doesClusterExist } from '../../lib/does_cluster_exist';
-import { serializeCluster } from '../../lib/cluster_serialization';
 
 export const register = (router: Router, isEsError: any): void => {
   router.delete('/{nameOrNames}', createDeleteHandler(isEsError));

x-pack/legacy/plugins/remote_clusters/server/routes/api/get_route.ts

@@ -7,7 +7,7 @@
 import { get } from 'lodash';
 
 import { Router, RouterRouteHandler } from '../../../../../server/lib/create_router';
-import { deserializeCluster } from '../../lib/cluster_serialization';
+import { deserializeCluster } from '../../../common/cluster_serialization';
 
 export const register = (router: Router): void => {
   router.get('', getAllHandler);

x-pack/legacy/plugins/remote_clusters/server/routes/api/update_route.ts

@@ -11,8 +11,8 @@ import {
   RouterRouteHandler,
   wrapCustomError,
 } from '../../../../../server/lib/create_router';
+import { serializeCluster, deserializeCluster } from '../../../common/cluster_serialization';
 import { doesClusterExist } from '../../lib/does_cluster_exist';
-import { serializeCluster, deserializeCluster } from '../../lib/cluster_serialization';
 
 export const register = (router: Router): void => {
   router.put('/{name}', updateHandler);