[Remote clusters] Add cloud-specific logic to remote clusters (#61639)

x-pack/plugins/remote_clusters/common/lib/cluster_serialization.test.ts

@@ -112,6 +112,40 @@ describe('cluster_serialization', () => {
           },
           'localhost:9300'
         )
+      ).toEqual({
+        name: 'test_cluster',
+        proxyAddress: 'localhost:9300',
+        mode: 'proxy',
+        hasDeprecatedProxySetting: true,
+        isConnected: true,
+        connectedNodesCount: 1,
+        maxConnectionsPerCluster: 3,
+        initialConnectTimeout: '30s',
+        skipUnavailable: false,
+        transportPingSchedule: '-1',
+        transportCompress: false,
+      });
+    });
+
+    it('should deserialize a cluster that contains a deprecated proxy address and is in cloud', () => {
+      expect(
+        deserializeCluster(
+          'test_cluster',
+          {
+            seeds: ['localhost:9300'],
+            connected: true,
+            num_nodes_connected: 1,
+            max_connections_per_cluster: 3,
+            initial_connect_timeout: '30s',
+            skip_unavailable: false,
+            transport: {
+              ping_schedule: '-1',
+              compress: false,
+            },
+          },
+          'localhost:9300',
+          true
+        )
       ).toEqual({
         name: 'test_cluster',
         proxyAddress: 'localhost:9300',

x-pack/plugins/remote_clusters/common/lib/cluster_serialization.ts

@@ -68,7 +68,8 @@ export interface ClusterSettingsPayloadEs {
 export function deserializeCluster(
   name: string,
   esClusterObject: ClusterInfoEs,
-  deprecatedProxyAddress?: string | undefined
+  deprecatedProxyAddress?: string | undefined,
+  isCloudEnabled?: boolean | undefined
 ): Cluster {
   if (!name || !esClusterObject || typeof esClusterObject !== 'object') {
     throw new Error('Unable to deserialize cluster');
@@ -117,7 +118,7 @@ export function deserializeCluster(
   // If a user has a remote cluster with the deprecated proxy setting,
   // we transform the data to support the new implementation and also flag the deprecation
   if (deprecatedProxyAddress) {
-    // Create server name (address, without port), since field doesn't exist in deprecated implementation
+    // Cloud-specific logic: Create default server name, since field doesn't exist in deprecated implementation
     const defaultServerName = deprecatedProxyAddress.split(':')[0];
 
     deserializedClusterObject = {
@@ -126,7 +127,7 @@ export function deserializeCluster(
       seeds: undefined,
       hasDeprecatedProxySetting: true,
       mode: PROXY_MODE,
-      serverName: defaultServerName,
+      serverName: isCloudEnabled ? defaultServerName : undefined,
     };
   }
 

x-pack/plugins/remote_clusters/kibana.json

@@ -11,7 +11,8 @@
     "indexManagement"
   ],
   "optionalPlugins": [
-    "usageCollection"
+    "usageCollection",
+    "cloud"
   ],
   "server": true,
   "ui": true

x-pack/plugins/remote_clusters/public/application/app_context.tsx

@@ -0,0 +1,22 @@
+/*
+ * 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, { createContext } from 'react';
+
+export interface Context {
+  isCloudEnabled: boolean;
+}
+
+export const AppContext = createContext<Context>({} as any);
+
+export const AppContextProvider = ({
+  children,
+  context,
+}: {
+  children: React.ReactNode;
+  context: Context;
+}) => {
+  return <AppContext.Provider value={context}>{children}</AppContext.Provider>;
+};

x-pack/plugins/remote_clusters/public/application/index.d.ts

@@ -8,5 +8,8 @@ import { RegisterManagementAppArgs, I18nStart } from '../types';
 
 export declare const renderApp: (
   elem: HTMLElement | null,
-  I18nContext: I18nStart['Context']
+  I18nContext: I18nStart['Context'],
+  appDependencies: {
+    isCloudEnabled?: boolean;
+  }
 ) => ReturnType<RegisterManagementAppArgs['mount']>;

x-pack/plugins/remote_clusters/public/application/index.js

@@ -11,14 +11,17 @@ import { Provider } from 'react-redux';
 
 import { App } from './app';
 import { remoteClustersStore } from './store';
+import { AppContextProvider } from './app_context';
 
-export const renderApp = (elem, I18nContext) => {
+export const renderApp = (elem, I18nContext, appDependencies) => {
   render(
     <I18nContext>
       <Provider store={remoteClustersStore}>
-        <HashRouter>
-          <App />
-        </HashRouter>
+        <AppContextProvider context={appDependencies}>
+          <HashRouter>
+            <App />
+          </HashRouter>
+        </AppContextProvider>
       </Provider>
     </I18nContext>,
     elem

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

@@ -42,15 +42,22 @@ import {
 
 import { RequestFlyout } from './request_flyout';
 
-import { validateName, validateSeeds, validateProxy, validateSeed } from './validators';
+import {
+  validateName,
+  validateSeeds,
+  validateProxy,
+  validateSeed,
+  validateServerName,
+} from './validators';
 
 import { SNIFF_MODE, PROXY_MODE } from '../../../../../common/constants';
 
+import { AppContext } from '../../../app_context';
+
 const defaultFields = {
   name: '',
   seeds: [],
   skipUnavailable: false,
-  mode: SNIFF_MODE,
   nodeConnections: 3,
   proxyAddress: '',
   proxySocketConnections: 18,
@@ -75,11 +82,17 @@ export class RemoteClusterForm extends Component {
     disabledFields: {},
   };
 
-  constructor(props) {
-    super(props);
+  static contextType = AppContext;
+
+  constructor(props, context) {
+    super(props, context);
 
     const { fields, disabledFields } = props;
-    const fieldsState = merge({}, defaultFields, fields);
+    const { isCloudEnabled } = context;
+
+    // Connection mode should default to "proxy" in cloud
+    const defaultMode = isCloudEnabled ? PROXY_MODE : SNIFF_MODE;
+    const fieldsState = merge({}, { ...defaultFields, mode: defaultMode }, fields);
 
     this.generateId = htmlIdGenerator();
     this.state = {
@@ -100,12 +113,15 @@ export class RemoteClusterForm extends Component {
   };
 
   getFieldsErrors(fields, seedInput = '') {
-    const { name, seeds, mode, proxyAddress } = fields;
+    const { name, seeds, mode, proxyAddress, serverName } = fields;
+    const { isCloudEnabled } = this.context;
 
     return {
       name: validateName(name),
       seeds: mode === SNIFF_MODE ? validateSeeds(seeds, seedInput) : null,
       proxyAddress: mode === PROXY_MODE ? validateProxy(proxyAddress) : null,
+      // server name is only required in cloud when proxy mode is enabled
+      serverName: isCloudEnabled && mode === PROXY_MODE ? validateServerName(serverName) : null,
     };
   }
 
@@ -349,9 +365,11 @@ export class RemoteClusterForm extends Component {
     const {
       areErrorsVisible,
       fields: { proxyAddress, proxySocketConnections, serverName },
-      fieldsErrors: { proxyAddress: errorProxyAddress },
+      fieldsErrors: { proxyAddress: errorProxyAddress, serverName: errorServerName },
     } = this.state;
 
+    const { isCloudEnabled } = this.context;
+
     return (
       <>
         <EuiFormRow
@@ -413,11 +431,20 @@ export class RemoteClusterForm extends Component {
         </EuiFormRow>
         <EuiFormRow
           data-test-subj="remoteClusterFormServerNameFormRow"
+          isInvalid={Boolean(areErrorsVisible && errorServerName)}
+          error={errorServerName}
           label={
-            <FormattedMessage
-              id="xpack.remoteClusters.remoteClusterForm.fieldServerNameLabel"
-              defaultMessage="Server name (optional)"
-            />
+            isCloudEnabled ? (
+              <FormattedMessage
+                id="xpack.remoteClusters.remoteClusterForm.fieldServerNameRequiredLabel"
+                defaultMessage="Server name"
+              />
+            ) : (
+              <FormattedMessage
+                id="xpack.remoteClusters.remoteClusterForm.fieldServerNameOptionalLabel"
+                defaultMessage="Server name (optional)"
+              />
+            )
           }
           helpText={
             <FormattedMessage
@@ -440,6 +467,7 @@ export class RemoteClusterForm extends Component {
           <EuiFieldText
             value={serverName}
             onChange={e => this.onFieldsChange({ serverName: e.target.value })}
+            isInvalid={Boolean(areErrorsVisible && errorServerName)}
             fullWidth
           />
         </EuiFormRow>
@@ -452,6 +480,8 @@ export class RemoteClusterForm extends Component {
       fields: { mode },
     } = this.state;
 
+    const { isCloudEnabled } = this.context;
+
     return (
       <EuiDescribedFormGroup
         title={
@@ -485,6 +515,21 @@ export class RemoteClusterForm extends Component {
                 }
               />
             </EuiFormRow>
+            {isCloudEnabled && mode === PROXY_MODE ? (
+              <>
+                <EuiSpacer size="s" />
+                <EuiCallOut
+                  title={
+                    <FormattedMessage
+                      id="xpack.remoteClusters.cloudClusterInformationTitle"
+                      defaultMessage="You can find the proxy address and server name of your cluster in the Security section of your deployment."
+                    />
+                  }
+                  iconType="pin"
+                  size="s"
+                />
+              </>
+            ) : null}
           </>
         }
         fullWidth

x-pack/plugins/remote_clusters/public/application/sections/components/remote_cluster_form/validators/index.js

@@ -8,3 +8,4 @@ export { validateName } from './validate_name';
 export { validateProxy } from './validate_proxy';
 export { validateSeeds } from './validate_seeds';
 export { validateSeed } from './validate_seed';
+export { validateServerName } from './validate_server_name';

x-pack/plugins/remote_clusters/public/application/sections/components/remote_cluster_form/validators/validate_server_name.js

@@ -0,0 +1,21 @@
+/*
+ * 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 from 'react';
+import { FormattedMessage } from '@kbn/i18n/react';
+
+export function validateServerName(serverName) {
+  if (!serverName || !serverName.trim()) {
+    return (
+      <FormattedMessage
+        id="xpack.remoteClusters.form.errors.serverNameMissing"
+        defaultMessage="A server name is required."
+      />
+    );
+  }
+
+  return null;
+}

x-pack/plugins/remote_clusters/public/plugin.ts

@@ -19,7 +19,7 @@ export class RemoteClustersUIPlugin implements Plugin<void, void, Dependencies,
 
   setup(
     { notifications: { toasts }, http, getStartServices }: CoreSetup,
-    { management, usageCollection }: Dependencies
+    { management, usageCollection, cloud }: Dependencies
   ) {
     const {
       ui: { enabled: isRemoteClustersUiEnabled },
@@ -48,8 +48,10 @@ export class RemoteClustersUIPlugin implements Plugin<void, void, Dependencies,
           initNotification(toasts, fatalErrors);
           initHttp(http);
 
+          const isCloudEnabled = Boolean(cloud?.isCloudEnabled);
+
           const { renderApp } = await import('./application');
-          return renderApp(element, i18nContext);
+          return renderApp(element, i18nContext, { isCloudEnabled });
         },
       });
     }