Small improvements to add cluster page (#29142)

Improve text around what port should be entered, and add a tooltip that explains the "Not Connected" error message.
elastic · Jan 23, 2019 · e706908 · e706908
1 parent 8f54a6f
commit e706908
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 6 deletions.
diff --git a/...ins/remote_clusters/public/sections/components/remote_cluster_form/remote_cluster_form.js b/...ins/remote_clusters/public/sections/components/remote_cluster_form/remote_cluster_form.js
@@ -327,7 +327,7 @@ export const RemoteClusterForm = injectI18n(
             helpText={(
               <FormattedMessage
                 id="xpack.remoteClusters.remoteClusterForm.sectionSeedsHelpText"
-                defaultMessage="An IP address or host name, followed by the port."
+                defaultMessage="An IP address or host name, followed by the transport port of the remote cluster."
               />
             )}
             isInvalid={showErrors}

diff --git a/...ers/public/sections/remote_cluster_list/components/connection_status/connection_status.js b/...ers/public/sections/remote_cluster_list/components/connection_status/connection_status.js
@@ -12,6 +12,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiIcon,
+  EuiIconTip,
   EuiText,
 } from '@elastic/eui';
 
@@ -43,16 +44,31 @@ export function ConnectionStatus({ isConnected }) {
     });
   }
 
+  const seedNodeTooltip = i18n.translate('xpack.remoteClusters.connectedStatus.notConnectedToolTip', {
+    defaultMessage: "Ensure the seed nodes are configured with the remote cluster's transport port, not the http port.",
+  });
+
   return (
     <EuiFlexGroup gutterSize="s" alignItems="center">
       <EuiFlexItem grow={false}>
-        {icon}
+        <EuiFlexGroup gutterSize="s" alignItems="center">
+          <EuiFlexItem grow={false}>
+            {icon}
+          </EuiFlexItem>
+
+          <EuiFlexItem>
+            <EuiText>
+              {message}
+            </EuiText>
+          </EuiFlexItem>
+        </EuiFlexGroup>
       </EuiFlexItem>
 
-      <EuiFlexItem>
-        <EuiText>
-          {message}
-        </EuiText>
+      <EuiFlexItem grow={false}>
+        <EuiIconTip
+          color="subdued"
+          content={seedNodeTooltip}
+        />
       </EuiFlexItem>
     </EuiFlexGroup>
   );