[Fleet] Add sudo to fleet managed instructions

x-pack/plugins/fleet/public/applications/fleet/components/enrollment_instructions/manual/index.tsx

@@ -7,10 +7,13 @@
 
 import React from 'react';
 import styled from 'styled-components';
-import { EuiText, EuiSpacer, EuiLink, EuiTitle, EuiCodeBlock } from '@elastic/eui';
+import { EuiText, EuiSpacer, EuiLink, EuiCodeBlock, EuiSelect } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';
 
 import type { EnrollmentAPIKey } from '../../../types';
+import { PLATFORM_OPTIONS, usePlatform } from '../../../sections/agents/hooks/use_platform';
+import type { PLATFORM_TYPE } from '../../../sections/agents/hooks/use_platform';
 
 interface Props {
   fleetServerHosts: string[];
@@ -30,9 +33,11 @@ export const ManualInstructions: React.FunctionComponent<Props> = ({
   apiKey,
   fleetServerHosts,
 }) => {
+  const { platform, setPlatform } = usePlatform();
+
   const enrollArgs = getfleetServerHostsEnrollArgs(apiKey, fleetServerHosts);
 
-  const linuxMacCommand = `./elastic-agent install -f ${enrollArgs}`;
+  const linuxMacCommand = `sudo ./elastic-agent install -f ${enrollArgs}`;
 
   const windowsCommand = `.\\elastic-agent.exe install -f ${enrollArgs}`;
 
@@ -45,53 +50,58 @@ export const ManualInstructions: React.FunctionComponent<Props> = ({
         />
       </EuiText>
       <EuiSpacer size="l" />
-      <EuiTitle size="xs">
-        <h4>
-          <FormattedMessage
-            id="xpack.fleet.enrollmentInstructions.linuxMacOSTitle"
-            defaultMessage="Linux, macOS"
-          />
-        </h4>
-      </EuiTitle>
+      <EuiSelect
+        prepend={
+          <EuiText>
+            <FormattedMessage
+              id="xpack.fleet.enrollmentInstructions.platformSelectLabel"
+              defaultMessage="Platform"
+            />
+          </EuiText>
+        }
+        options={PLATFORM_OPTIONS}
+        value={platform}
+        onChange={(e) => setPlatform(e.target.value as PLATFORM_TYPE)}
+        aria-label={i18n.translate('xpack.fleet.enrollmentInstructions.platformSelectAriaLabel', {
+          defaultMessage: 'Platform',
+        })}
+      />
       <EuiSpacer size="s" />
-      <EuiCodeBlock fontSize="m" isCopyable={true} paddingSize="m">
-        <CommandCode>{linuxMacCommand}</CommandCode>
-      </EuiCodeBlock>
-      <EuiSpacer size="l" />
-      <EuiTitle size="xs">
-        <h4>
+      {platform === 'linux-mac' && (
+        <EuiCodeBlock fontSize="m" isCopyable={true} paddingSize="m">
+          <CommandCode>{linuxMacCommand}</CommandCode>
+        </EuiCodeBlock>
+      )}
+      {platform === 'windows' && (
+        <EuiCodeBlock fontSize="m" isCopyable={true} paddingSize="m">
+          <CommandCode>{windowsCommand}</CommandCode>
+        </EuiCodeBlock>
+      )}
+
+      {platform === 'rpm-deb' && (
+        <EuiText>
           <FormattedMessage
-            id="xpack.fleet.enrollmentInstructions.windowsTitle"
-            defaultMessage="Windows"
+            id="xpack.fleet.enrollmentInstructions.moreInstructionsText"
+            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"
+                >
+                  <FormattedMessage
+                    id="xpack.fleet.enrollmentInstructions.moreInstructionsLink"
+                    defaultMessage="Elastic Agent docs"
+                  />
+                </EuiLink>
+              ),
+            }}
           />
-        </h4>
-      </EuiTitle>
-      <EuiSpacer size="s" />
-      <EuiCodeBlock fontSize="m" isCopyable={true} paddingSize="m">
-        <CommandCode>{windowsCommand}</CommandCode>
-      </EuiCodeBlock>
+        </EuiText>
+      )}
+
       <EuiSpacer size="l" />
-      <EuiText>
-        <FormattedMessage
-          id="xpack.fleet.enrollmentInstructions.moreInstructionsText"
-          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"
-              >
-                <FormattedMessage
-                  id="xpack.fleet.enrollmentInstructions.moreInstructionsLink"
-                  defaultMessage="Elastic Agent docs"
-                />
-              </EuiLink>
-            ),
-          }}
-        />
-      </EuiText>
-      <EuiSpacer size="s" />
       <EuiText>
         <FormattedMessage
           id="xpack.fleet.enrollmentInstructions.troubleshootingText"

x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_requirements_page/fleet_server_requirement_page.tsx

@@ -28,6 +28,8 @@ import { FormattedMessage } from '@kbn/i18n/react';
 
 import { DownloadStep } from '../components/agent_enrollment_flyout/steps';
 import { useStartServices, useGetOutputs, sendGenerateServiceToken } from '../../../hooks';
+import { PLATFORM_OPTIONS, usePlatform } from '../hooks/use_platform';
+import type { PLATFORM_TYPE } from '../hooks/use_platform';
 
 const FlexItemWithMinWidth = styled(EuiFlexItem)`
   min-width: 0px;
@@ -45,13 +47,6 @@ const CommandCode = styled.pre({
   overflow: 'scroll',
 });
 
-type PLATFORM_TYPE = 'linux-mac' | 'windows' | 'rpm-deb';
-const PLATFORM_OPTIONS: Array<{ text: string; value: PLATFORM_TYPE }> = [
-  { text: 'Linux / macOS', value: 'linux-mac' },
-  { text: 'Windows', value: 'windows' },
-  { text: 'RPM / DEB', value: 'rpm-deb' },
-];
-
 export const ServiceTokenStep = ({
   serviceToken,
   getServiceToken,
@@ -237,7 +232,7 @@ export const useFleetServerInstructions = (policyId?: string) => {
   const { notifications } = useStartServices();
   const [serviceToken, setServiceToken] = useState<string>();
   const [isLoadingServiceToken, setIsLoadingServiceToken] = useState<boolean>(false);
-  const [platform, setPlatform] = useState<PLATFORM_TYPE>('linux-mac');
+  const { platform, setPlatform } = usePlatform();
 
   const output = outputsRequest.data?.items?.[0];
   const esHost = output?.hosts?.[0];

x-pack/plugins/fleet/public/applications/fleet/sections/agents/hooks/index.tsx

@@ -0,0 +1,8 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export * from './use_platform';

x-pack/plugins/fleet/public/applications/fleet/sections/agents/hooks/use_platform.tsx

@@ -0,0 +1,24 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { useState } from 'react';
+
+export type PLATFORM_TYPE = 'linux-mac' | 'windows' | 'rpm-deb';
+export const PLATFORM_OPTIONS: Array<{ text: string; value: PLATFORM_TYPE }> = [
+  { text: 'Linux / macOS', value: 'linux-mac' },
+  { text: 'Windows', value: 'windows' },
+  { text: 'RPM / DEB', value: 'rpm-deb' },
+];
+
+export function usePlatform() {
+  const [platform, setPlatform] = useState<PLATFORM_TYPE>('linux-mac');
+
+  return {
+    platform,
+    setPlatform,
+  };
+}

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

@@ -8426,10 +8426,8 @@
     "xpack.fleet.enrollemntAPIKeyList.emptyMessage": "登録トークンが見つかりません。",
     "xpack.fleet.enrollemntAPIKeyList.loadingTokensMessage": "登録トークンを読み込んでいます...",
     "xpack.fleet.enrollmentInstructions.descriptionText": "エージェントのディレクトリから、該当するコマンドを実行し、Elasticエージェントをインストール、登録、起動します。これらのコマンドを再利用すると、複数のホストでエージェントを設定できます。管理者権限が必要です。",
-    "xpack.fleet.enrollmentInstructions.linuxMacOSTitle": "Linux、MacOS",
     "xpack.fleet.enrollmentInstructions.moreInstructionsLink": "Elastic エージェントドキュメント",
     "xpack.fleet.enrollmentInstructions.moreInstructionsText": "RPM/DEB デプロイの手順については、{link}を参照してください。",
-    "xpack.fleet.enrollmentInstructions.windowsTitle": "Windows",
     "xpack.fleet.enrollmentStepAgentPolicy.enrollmentTokenSelectLabel": "登録トークン",
     "xpack.fleet.enrollmentStepAgentPolicy.policySelectAriaLabel": "エージェントポリシー",
     "xpack.fleet.enrollmentStepAgentPolicy.policySelectLabel": "エージェントポリシー",

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

@@ -8511,10 +8511,8 @@
     "xpack.fleet.enrollemntAPIKeyList.emptyMessage": "未找到任何注册令牌。",
     "xpack.fleet.enrollemntAPIKeyList.loadingTokensMessage": "正在加载注册令牌......",
     "xpack.fleet.enrollmentInstructions.descriptionText": "从代理目录运行相应命令，以安装、注册并启动 Elastic 代理。您可以重复使用这些命令在多个主机上设置代理。需要管理员权限。",
-    "xpack.fleet.enrollmentInstructions.linuxMacOSTitle": "Linux、macOS",
     "xpack.fleet.enrollmentInstructions.moreInstructionsLink": "Elastic 代理文档",
     "xpack.fleet.enrollmentInstructions.moreInstructionsText": "有关 RPM/DEB 部署说明，请参见 {link}。",
-    "xpack.fleet.enrollmentInstructions.windowsTitle": "Windows",
     "xpack.fleet.enrollmentStepAgentPolicy.enrollmentTokenSelectLabel": "注册令牌",
     "xpack.fleet.enrollmentStepAgentPolicy.policySelectAriaLabel": "代理策略",
     "xpack.fleet.enrollmentStepAgentPolicy.policySelectLabel": "代理策略",