[Fleet] Use docLinks service to link to the doc (#102660) (#102741)

Co-authored-by: Nicolas Chaulet <nicolas.chaulet@elastic.co>
elastic · Jun 21, 2021 · 4f99200 · 4f99200
1 parent 26ba444
commit 4f99200
Show file tree

Hide file tree

Showing 14 changed files with 110 additions and 49 deletions.
diff --git a/docs/development/core/public/kibana-plugin-core-public.doclinksstart.links.md b/docs/development/core/public/kibana-plugin-core-public.doclinksstart.links.md
@@ -185,5 +185,18 @@ readonly links: {
         readonly plugins: Record<string, string>;
         readonly snapshotRestore: Record<string, string>;
         readonly ingest: Record<string, string>;
+        readonly fleet: Readonly<{
+            guide: string;
+            fleetServer: string;
+            fleetServerAddFleetServer: string;
+            settings: string;
+            settingsFleetServerHostSettings: string;
+            troubleshooting: string;
+            elasticAgent: string;
+            datastreams: string;
+            datastreamsNamingScheme: string;
+            upgradeElasticAgent: string;
+            upgradeElasticAgent712lower: string;
+        }>;
     };
 ```
diff --git a/docs/development/core/public/kibana-plugin-core-public.doclinksstart.md b/docs/development/core/public/kibana-plugin-core-public.doclinksstart.md
diff --git a/src/core/public/doc_links/doc_links_service.ts b/src/core/public/doc_links/doc_links_service.ts
@@ -22,6 +22,7 @@ export class DocLinksService {
     const ELASTIC_WEBSITE_URL = 'https://www.elastic.co/';
     const ELASTICSEARCH_DOCS = `${ELASTIC_WEBSITE_URL}guide/en/elasticsearch/reference/${DOC_LINK_VERSION}/`;
     const KIBANA_DOCS = `${ELASTIC_WEBSITE_URL}guide/en/kibana/${DOC_LINK_VERSION}/`;
+    const FLEET_DOCS = `${ELASTIC_WEBSITE_URL}guide/en/fleet/${DOC_LINK_VERSION}/`;
     const PLUGIN_DOCS = `${ELASTIC_WEBSITE_URL}guide/en/elasticsearch/plugins/${DOC_LINK_VERSION}/`;
 
     return deepFreeze({
@@ -402,6 +403,19 @@ export class DocLinksService {
           urlDecode: `${ELASTICSEARCH_DOCS}urldecode-processor.html`,
           userAgent: `${ELASTICSEARCH_DOCS}user-agent-processor.html`,
         },
+        fleet: {
+          guide: `${FLEET_DOCS}index.html`,
+          fleetServer: `${FLEET_DOCS}fleet-server.html`,
+          fleetServerAddFleetServer: `${FLEET_DOCS}fleet-server.html#add-fleet-server`,
+          settings: `${FLEET_DOCS}fleet-settings.html#fleet-server-hosts-setting`,
+          settingsFleetServerHostSettings: `${FLEET_DOCS}fleet-settings.html#fleet-server-hosts-setting`,
+          troubleshooting: `${FLEET_DOCS}fleet-troubleshooting.html`,
+          elasticAgent: `${FLEET_DOCS}elastic-agent-installation-configuration.html`,
+          datastreams: `${FLEET_DOCS}data-streams.html`,
+          datastreamsNamingScheme: `${FLEET_DOCS}data-streams.html#data-streams-naming-scheme`,
+          upgradeElasticAgent: `${FLEET_DOCS}upgrade-elastic-agent.html`,
+          upgradeElasticAgent712lower: `${FLEET_DOCS}upgrade-elastic-agent.html#upgrade-7.12-lower`,
+        },
       },
     });
   }
@@ -589,5 +603,18 @@ export interface DocLinksStart {
     readonly plugins: Record<string, string>;
     readonly snapshotRestore: Record<string, string>;
     readonly ingest: Record<string, string>;
+    readonly fleet: Readonly<{
+      guide: string;
+      fleetServer: string;
+      fleetServerAddFleetServer: string;
+      settings: string;
+      settingsFleetServerHostSettings: string;
+      troubleshooting: string;
+      elasticAgent: string;
+      datastreams: string;
+      datastreamsNamingScheme: string;
+      upgradeElasticAgent: string;
+      upgradeElasticAgent712lower: string;
+    }>;
   };
 }
diff --git a/src/core/public/public.api.md b/src/core/public/public.api.md
@@ -664,6 +664,19 @@ export interface DocLinksStart {
         readonly plugins: Record<string, string>;
         readonly snapshotRestore: Record<string, string>;
         readonly ingest: Record<string, string>;
+        readonly fleet: Readonly<{
+            guide: string;
+            fleetServer: string;
+            fleetServerAddFleetServer: string;
+            settings: string;
+            settingsFleetServerHostSettings: string;
+            troubleshooting: string;
+            elasticAgent: string;
+            datastreams: string;
+            datastreamsNamingScheme: string;
+            upgradeElasticAgent: string;
+            upgradeElasticAgent712lower: string;
+        }>;
     };
 }
 

diff --git a/...ns/fleet/public/applications/fleet/sections/agent_policy/components/agent_policy_form.tsx b/...ns/fleet/public/applications/fleet/sections/agent_policy/components/agent_policy_form.tsx
@@ -29,6 +29,7 @@ import styled from 'styled-components';
 import { dataTypes } from '../../../../../../common';
 import type { NewAgentPolicy, AgentPolicy } from '../../../types';
 import { isValidNamespace } from '../../../services';
+import { useStartServices } from '../../../hooks';
 
 import { AgentPolicyDeleteProvider } from './agent_policy_delete_provider';
 
@@ -83,6 +84,7 @@ export const AgentPolicyForm: React.FunctionComponent<Props> = ({
   isEditing = false,
   onDelete = () => {},
 }) => {
+  const { docLinks } = useStartServices();
   const [touchedFields, setTouchedFields] = useState<{ [key: string]: boolean }>({});
   const fields: Array<{
     name: 'name' | 'description' | 'namespace';
@@ -174,10 +176,7 @@ export const AgentPolicyForm: React.FunctionComponent<Props> = ({
             defaultMessage="Namespaces are a user-configurable arbitrary grouping that makes it easier to search for data and manage user permissions. A policy namespace is used to name its integration's data streams. {fleetUserGuide}."
             values={{
               fleetUserGuide: (
-                <EuiLink
-                  href="https://www.elastic.co/guide/en/fleet/current/data-streams.html#data-streams-naming-scheme"
-                  target="_blank"
-                >
+                <EuiLink href={docLinks.links.fleet.datastreamsNamingScheme} target="_blank">
                   {i18n.translate(
                     'xpack.fleet.agentPolicyForm.nameSpaceFieldDescription.fleetUserGuideLabel',
                     { defaultMessage: 'Learn more' }

diff --git a/...ons/fleet/sections/agent_policy/create_package_policy_page/step_define_package_policy.tsx b/...ons/fleet/sections/agent_policy/create_package_policy_page/step_define_package_policy.tsx
@@ -29,6 +29,7 @@ import type {
 } from '../../../types';
 import { packageToPackagePolicy, pkgKeyFromPackageInfo } from '../../../services';
 import { Loading } from '../../../components';
+import { useStartServices } from '../../../hooks';
 
 import { isAdvancedVar } from './services';
 import type { PackagePolicyValidationResults } from './services';
@@ -52,6 +53,7 @@ export const StepDefinePackagePolicy: React.FunctionComponent<{
     validationResults,
     submitAttempted,
   }) => {
+    const { docLinks } = useStartServices();
     // Form show/hide states
     const [isShowingAdvanced, setIsShowingAdvanced] = useState<boolean>(false);
 
@@ -167,10 +169,7 @@ export const StepDefinePackagePolicy: React.FunctionComponent<{
                   defaultMessage="Change the default namespace inherited from the selected Agent policy. This setting changes the name of the integration's data stream. {learnMore}."
                   values={{
                     learnMore: (
-                      <EuiLink
-                        href="https://www.elastic.co/guide/en/fleet/current/data-streams.html#data-streams-naming-scheme"
-                        target="_blank"
-                      >
+                      <EuiLink href={docLinks.links.fleet.datastreamsNamingScheme} target="_blank">
                         {i18n.translate(
                           'xpack.fleet.createPackagePolicy.stepConfigure.packagePolicyNamespaceHelpLearnMoreLabel',
                           { defaultMessage: 'Learn more' }

diff --git a/...ublic/applications/fleet/sections/agents/agent_requirements_page/es_requirements_page.tsx b/...ublic/applications/fleet/sections/agents/agent_requirements_page/es_requirements_page.tsx
@@ -24,6 +24,7 @@ import {
 
 import { WithoutHeaderLayout } from '../../../layouts';
 import type { GetFleetStatusResponse } from '../../../types';
+import { useStartServices } from '../../../hooks';
 
 export const RequirementItem: React.FunctionComponent<{ isMissing: boolean }> = ({
   isMissing,
@@ -50,6 +51,8 @@ export const RequirementItem: React.FunctionComponent<{ isMissing: boolean }> =
 export const MissingESRequirementsPage: React.FunctionComponent<{
   missingRequirements: GetFleetStatusResponse['missing_requirements'];
 }> = ({ missingRequirements }) => {
+  const { docLinks } = useStartServices();
+
   return (
     <WithoutHeaderLayout>
       <EuiPageBody restrictWidth={820}>
@@ -79,7 +82,7 @@ export const MissingESRequirementsPage: React.FunctionComponent<{
               values={{
                 esSecurityLink: (
                   <EuiLink
-                    href="https://www.elastic.co/guide/en/elasticsearch/reference/current/configuring-security.html"
+                    href={docLinks.links.security.elasticsearchEnableSecurity}
                     target="_blank"
                     external
                   >
@@ -104,7 +107,7 @@ export const MissingESRequirementsPage: React.FunctionComponent<{
                 true: <EuiCode>true</EuiCode>,
                 apiKeyLink: (
                   <EuiLink
-                    href="https://www.elastic.co/guide/en/elasticsearch/reference/current/security-settings.html#api-key-service-settings"
+                    href={docLinks.links.security.apiKeyServiceSettings}
                     target="_blank"
                     external
                   >
@@ -128,11 +131,7 @@ xpack.security.authc.api_key.enabled: true`}
             defaultMessage="For more information, read our {link} guide."
             values={{
               link: (
-                <EuiLink
-                  href="https://www.elastic.co/guide/en/fleet/current/index.html"
-                  target="_blank"
-                  external
-                >
+                <EuiLink href={docLinks.links.fleet.guide} target="_blank" external>
                   <FormattedMessage
                     id="xpack.fleet.setupPage.gettingStartedLink"
                     defaultMessage="Getting Started"

diff --git a/...lications/fleet/sections/agents/agent_requirements_page/fleet_server_requirement_page.tsx b/...lications/fleet/sections/agents/agent_requirements_page/fleet_server_requirement_page.tsx
@@ -134,6 +134,8 @@ export const FleetServerCommandStep = ({
   platform: string;
   setPlatform: (platform: PLATFORM_TYPE) => void;
 }): EuiStepProps => {
+  const { docLinks } = useStartServices();
+
   return {
     title: i18n.translate('xpack.fleet.fleetServerSetup.stepInstallAgentTitle', {
       defaultMessage: 'Start Fleet Server',
@@ -147,7 +149,11 @@ export const FleetServerCommandStep = ({
             defaultMessage="From the agent directory, copy and run the appropriate quick start command to start an Elastic Agent as a Fleet Server using the generated token and a self-signed certificate. See the {userGuideLink} for instructions on using your own certificates for production deployment. All commands require administrator privileges."
             values={{
               userGuideLink: (
-                <EuiLink href="https://ela.st/add-fleet-server" external>
+                <EuiLink
+                  href={docLinks.links.fleet.fleetServerAddFleetServer}
+                  external
+                  target="_blank"
+                >
                   <FormattedMessage
                     id="xpack.fleet.fleetServerSetup.setupGuideLink"
                     defaultMessage="Fleet User Guide"
@@ -191,11 +197,7 @@ export const FleetServerCommandStep = ({
             defaultMessage="If you are having trouble connecting, see our {link}."
             values={{
               link: (
-                <EuiLink
-                  target="_blank"
-                  external
-                  href="https://www.elastic.co/guide/en/fleet/current/fleet-troubleshooting.html"
-                >
+                <EuiLink target="_blank" external href={docLinks.links.fleet.troubleshooting}>
                   <FormattedMessage
                     id="xpack.fleet.enrollmentInstructions.troubleshootingLink"
                     defaultMessage="troubleshooting guide"
@@ -287,6 +289,7 @@ const OnPremInstructions: React.FC = () => {
     platform,
     setPlatform,
   } = useFleetServerInstructions();
+  const { docLinks } = useStartServices();
 
   return (
     <EuiPanel paddingSize="l" grow={false} hasShadow={false} hasBorder={true}>
@@ -304,7 +307,11 @@ const OnPremInstructions: React.FC = () => {
           defaultMessage="A Fleet Server is required before you can enroll agents with Fleet. See the {userGuideLink} for more information."
           values={{
             userGuideLink: (
-              <EuiLink href="https://ela.st/add-fleet-server" external>
+              <EuiLink
+                href={docLinks.links.fleet.fleetServerAddFleetServer}
+                external
+                target="_blank"
+              >
                 <FormattedMessage
                   id="xpack.fleet.fleetServerSetup.setupGuideLink"
                   defaultMessage="Fleet User Guide"
@@ -328,6 +335,8 @@ const OnPremInstructions: React.FC = () => {
 };
 
 const CloudInstructions: React.FC<{ deploymentUrl: string }> = ({ deploymentUrl }) => {
+  const { docLinks } = useStartServices();
+
   return (
     <EuiPanel
       paddingSize="none"
@@ -351,7 +360,11 @@ const CloudInstructions: React.FC<{ deploymentUrl: string }> = ({ deploymentUrl
             defaultMessage="A Fleet Server is required before you can enroll agents with Fleet. You can add one to your deployment by enabling APM & Fleet. For more information see the {link}"
             values={{
               link: (
-                <EuiLink href="https://ela.st/add-fleet-server" target="_blank" external>
+                <EuiLink
+                  href={docLinks.links.fleet.fleetServerAddFleetServer}
+                  target="_blank"
+                  external
+                >
                   <FormattedMessage
                     id="xpack.fleet.settings.userGuideLink"
                     defaultMessage="Fleet User Guide"

diff --git a/...fleet/public/applications/fleet/sections/agents/components/fleet_server_upgrade_modal.tsx b/...fleet/public/applications/fleet/sections/agents/components/fleet_server_upgrade_modal.tsx
@@ -40,7 +40,7 @@ interface Props {
 
 export const FleetServerUpgradeModal: React.FunctionComponent<Props> = ({ onClose }) => {
   const { getAssetsPath } = useLink();
-  const { notifications, cloud } = useStartServices();
+  const { notifications, cloud, docLinks } = useStartServices();
 
   const isCloud = !!cloud?.cloudId;
 
@@ -163,7 +163,11 @@ export const FleetServerUpgradeModal: React.FunctionComponent<Props> = ({ onClos
                   </strong>
                 ),
                 link: (
-                  <EuiLink href="https://ela.st/add-fleet-server" external={true} target="_blank">
+                  <EuiLink
+                    href={docLinks.links.fleet.upgradeElasticAgent712lower}
+                    external={true}
+                    target="_blank"
+                  >
                     <FormattedMessage
                       id="xpack.fleet.fleetServerUpgradeModal.fleetServerMigrationGuide"
                       defaultMessage="Fleet Server migration guide"

diff --git a/...ins/fleet/public/components/agent_enrollment_flyout/missing_fleet_server_host_callout.tsx b/...ins/fleet/public/components/agent_enrollment_flyout/missing_fleet_server_host_callout.tsx
@@ -10,10 +10,12 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiCallOut, EuiLink, EuiButton, EuiSpacer } from '@elastic/eui';
 
-import { useUrlModal } from '../../hooks';
+import { useUrlModal, useStartServices } from '../../hooks';
 
 export const MissingFleetServerHostCallout: React.FunctionComponent = () => {
   const { setModal } = useUrlModal();
+  const { docLinks } = useStartServices();
+
   return (
     <EuiCallOut
       title={i18n.translate('xpack.fleet.agentEnrollment.missingFleetHostCalloutTitle', {
@@ -25,11 +27,7 @@ export const MissingFleetServerHostCallout: React.FunctionComponent = () => {
         defaultMessage="A URL for your Fleet Server host is required to enroll agents with Fleet. You can add this information in Fleet Settings. For more information, see the {link}."
         values={{
           link: (
-            <EuiLink
-              href="https://www.elastic.co/guide/en/fleet/current/index.html"
-              target="_blank"
-              external
-            >
+            <EuiLink href={docLinks.links.fleet.guide} target="_blank" external>
               <FormattedMessage
                 id="xpack.fleet.agentEnrollment.missingFleetHostGuideLink"
                 defaultMessage="Fleet User Guide"

diff --git a/x-pack/plugins/fleet/public/components/alpha_flyout.tsx b/x-pack/plugins/fleet/public/components/alpha_flyout.tsx
@@ -18,11 +18,15 @@ import {
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
+import { useStartServices } from '../hooks';
+
 interface Props {
   onClose: () => void;
 }
 
 export const AlphaFlyout: React.FunctionComponent<Props> = ({ onClose }) => {
+  const { docLinks } = useStartServices();
+
   return (
     <EuiFlyout onClose={onClose} size="m" maxWidth={640}>
       <EuiFlyoutHeader hasBorder aria-labelledby="AlphaMessagingFlyoutTitle">
@@ -49,11 +53,7 @@ export const AlphaFlyout: React.FunctionComponent<Props> = ({ onClose }) => {
               defaultMessage="Read our {docsLink} or go to our {forumLink} for questions or feedback."
               values={{
                 docsLink: (
-                  <EuiLink
-                    href="https://www.elastic.co/guide/en/fleet/current/index.html"
-                    external
-                    target="_blank"
-                  >
+                  <EuiLink href={docLinks.links.fleet.guide} external target="_blank">
                     <FormattedMessage
                       id="xpack.fleet.alphaMessaging.docsLink"
                       defaultMessage="documentation"

diff --git a/x-pack/plugins/fleet/public/components/enrollment_instructions/manual/index.tsx b/x-pack/plugins/fleet/public/components/enrollment_instructions/manual/index.tsx
@@ -12,7 +12,7 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 
 import type { EnrollmentAPIKey } from '../../../types';
-import { PLATFORM_OPTIONS, usePlatform } from '../../../hooks';
+import { PLATFORM_OPTIONS, usePlatform, useStartServices } from '../../../hooks';
 import type { PLATFORM_TYPE } from '../../../hooks';
 
 interface Props {
@@ -34,6 +34,7 @@ export const ManualInstructions: React.FunctionComponent<Props> = ({
   fleetServerHosts,
 }) => {
   const { platform, setPlatform } = usePlatform();
+  const { docLinks } = useStartServices();
 
   const enrollArgs = getfleetServerHostsEnrollArgs(apiKey, fleetServerHosts);
 
@@ -85,11 +86,7 @@ export const ManualInstructions: React.FunctionComponent<Props> = ({
             defaultMessage="See the {link} for RPM / DEB deploy instructions."
             values={{
               link: (
-                <EuiLink
-                  target="_blank"
-                  external
-                  href="https://www.elastic.co/guide/en/fleet/current/elastic-agent-installation-configuration.html"
-                >
+                <EuiLink target="_blank" external href={docLinks.links.fleet.elasticAgent}>
                   <FormattedMessage
                     id="xpack.fleet.enrollmentInstructions.moreInstructionsLink"
                     defaultMessage="Elastic Agent docs"
@@ -108,11 +105,7 @@ export const ManualInstructions: React.FunctionComponent<Props> = ({
           defaultMessage="If you are having trouble connecting, see our {link}."
           values={{
             link: (
-              <EuiLink
-                target="_blank"
-                external
-                href="https://www.elastic.co/guide/en/fleet/current/fleet-troubleshooting.html"
-              >
+              <EuiLink target="_blank" external href={docLinks.links.fleet.troubleshooting}>
                 <FormattedMessage
                   id="xpack.fleet.enrollmentInstructions.troubleshootingLink"
                   defaultMessage="troubleshooting guide"