[Fleet] Support for remote ES output

packages/kbn-check-mappings-update-cli/current_mappings.json

@@ -1680,6 +1680,10 @@
         "type": "keyword",
         "index": false
       },
+      "service_token": {
+        "type": "keyword",
+        "index": false
+      },
       "config": {
         "type": "flattened"
       },

x-pack/plugins/fleet/common/constants/output.ts

@@ -13,6 +13,7 @@ export const outputType = {
   Elasticsearch: 'elasticsearch',
   Logstash: 'logstash',
   Kafka: 'kafka',
+  RemoteElasticsearch: 'remote-elasticsearch',
 } as const;
 
 export const DEFAULT_OUTPUT_ID = 'fleet-default-output';

x-pack/plugins/fleet/common/experimental_features.ts

@@ -23,6 +23,7 @@ export const allowedExperimentalValues = Object.freeze<Record<string, boolean>>(
   agentTamperProtectionEnabled: true,
   secretsStorage: true,
   kafkaOutput: true,
+  remoteESOutput: true,
 });
 
 type ExperimentalConfigKeys = Array<keyof ExperimentalFeatures>;

x-pack/plugins/fleet/common/types/models/output.ts

@@ -49,11 +49,20 @@ export interface NewElasticsearchOutput extends NewBaseOutput {
   type: OutputType['Elasticsearch'];
 }
 
+export interface NewRemoteElasticsearchOutput extends NewBaseOutput {
+  type: OutputType['RemoteElasticsearch'];
+  service_token?: string;
+}
+
 export interface NewLogstashOutput extends NewBaseOutput {
   type: OutputType['Logstash'];
 }
 
-export type NewOutput = NewElasticsearchOutput | NewLogstashOutput | KafkaOutput;
+export type NewOutput =
+  | NewElasticsearchOutput
+  | NewRemoteElasticsearchOutput
+  | NewLogstashOutput
+  | KafkaOutput;
 
 export type Output = NewOutput & {
   id: string;

x-pack/plugins/fleet/public/applications/fleet/components/fleet_server_instructions/hooks/index.ts

@@ -14,5 +14,4 @@ export * from './use_quick_start_form';
 // but exported here to support individual usage.
 export * from './use_wait_for_fleet_server';
 export * from './use_select_fleet_server_policy';
-export * from './use_service_token';
 export * from './use_fleet_server_host';

x-pack/plugins/fleet/public/applications/fleet/components/fleet_server_instructions/hooks/use_advanced_form.ts

@@ -9,9 +9,10 @@ import { useState } from 'react';
 
 import type { DeploymentMode } from '../steps';
 
+import { useServiceToken } from '../../../hooks/use_service_token';
+
 import { useFleetServerHost } from './use_fleet_server_host';
 import { useSelectFleetServerPolicy } from './use_select_fleet_server_policy';
-import { useServiceToken } from './use_service_token';
 import { useWaitForFleetServer } from './use_wait_for_fleet_server';
 
 /**

x-pack/plugins/fleet/public/applications/fleet/components/fleet_server_instructions/hooks/use_quick_start_form.ts

@@ -15,8 +15,9 @@ import type { NewAgentPolicy } from '../../../types';
 
 import type { FleetServerHost } from '../../../types';
 
+import { useServiceToken } from '../../../hooks/use_service_token';
+
 import { useSelectFleetServerPolicy } from './use_select_fleet_server_policy';
-import { useServiceToken } from './use_service_token';
 import { useFleetServerHost } from './use_fleet_server_host';
 
 const QUICK_START_FLEET_SERVER_POLICY_FIELDS: NewAgentPolicy = {

x-pack/plugins/fleet/public/applications/fleet/components/fleet_server_instructions/steps/create_service_token.tsx

@@ -9,38 +9,17 @@ import React from 'react';
 import styled from 'styled-components';
 
 import type { EuiStepProps } from '@elastic/eui';
-import {
-  EuiButton,
-  EuiCallOut,
-  EuiCodeBlock,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiSpacer,
-  EuiText,
-} from '@elastic/eui';
+import { EuiFlexGroup } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { FormattedMessage } from '@kbn/i18n-react';
 
-const FlexItemWithMinWidth = styled(EuiFlexItem)`
-  min-width: 0px;
-  max-width: 100%;
-`;
+import { GenerateServiceTokenComponent } from '../../generate_service_token';
 
 export const ContentWrapper = styled(EuiFlexGroup)`
   height: 100%;
   margin: 0 auto;
   max-width: 800px;
 `;
 
-// Otherwise the copy button is over the text
-const CommandCode = styled.div.attrs(() => {
-  return {
-    className: 'eui-textBreakAll',
-  };
-})`
-  margin-right: ${(props) => props.theme.eui.euiSizeM};
-`;
-
 export const getGenerateServiceTokenStep = ({
   disabled = false,
   serviceToken,
@@ -58,79 +37,11 @@ export const getGenerateServiceTokenStep = ({
     }),
     status: disabled ? 'disabled' : undefined,
     children: !disabled && (
-      <ServiceTokenStepContent
+      <GenerateServiceTokenComponent
         serviceToken={serviceToken}
         generateServiceToken={generateServiceToken}
         isLoadingServiceToken={isLoadingServiceToken}
       />
     ),
   };
 };
-
-const ServiceTokenStepContent: React.FunctionComponent<{
-  serviceToken?: string;
-  generateServiceToken: () => void;
-  isLoadingServiceToken: boolean;
-}> = ({ serviceToken, generateServiceToken, isLoadingServiceToken }) => {
-  return (
-    <>
-      <EuiText>
-        <FormattedMessage
-          id="xpack.fleet.fleetServerSetup.generateServiceTokenDescription"
-          defaultMessage="A service token grants Fleet Server permissions to write to Elasticsearch."
-        />
-      </EuiText>
-      <EuiSpacer size="m" />
-      {!serviceToken ? (
-        <EuiFlexGroup>
-          <EuiFlexItem grow={false}>
-            <EuiButton
-              fill
-              isLoading={isLoadingServiceToken}
-              isDisabled={isLoadingServiceToken}
-              onClick={() => {
-                generateServiceToken();
-              }}
-              data-test-subj="fleetServerGenerateServiceTokenBtn"
-            >
-              <FormattedMessage
-                id="xpack.fleet.fleetServerSetup.generateServiceTokenButton"
-                defaultMessage="Generate service token"
-              />
-            </EuiButton>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      ) : (
-        <>
-          <EuiCallOut
-            iconType="check"
-            size="s"
-            color="success"
-            title={
-              <FormattedMessage
-                id="xpack.fleet.fleetServerSetup.saveServiceTokenDescription"
-                defaultMessage="Save your service token information. This will be shown only once."
-              />
-            }
-          />
-          <EuiSpacer size="m" />
-          <EuiFlexGroup direction="column" gutterSize="s">
-            <EuiFlexItem grow={false}>
-              <strong data-test-subject="serviceTokenSaveReminderHeader">
-                <FormattedMessage
-                  id="xpack.fleet.fleetServerSetup.serviceTokenLabel"
-                  defaultMessage="Service token"
-                />
-              </strong>
-            </EuiFlexItem>
-            <FlexItemWithMinWidth>
-              <EuiCodeBlock paddingSize="m" isCopyable>
-                <CommandCode>{serviceToken}</CommandCode>
-              </EuiCodeBlock>
-            </FlexItemWithMinWidth>
-          </EuiFlexGroup>
-        </>
-      )}
-    </>
-  );
-};

x-pack/plugins/fleet/public/applications/fleet/components/generate_service_token.tsx

@@ -0,0 +1,138 @@
+/*
+ * 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 React from 'react';
+import styled from 'styled-components';
+
+import { EuiLink, EuiToolTip } from '@elastic/eui';
+import {
+  EuiButton,
+  EuiCallOut,
+  EuiCodeBlock,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+  EuiText,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
+
+import { useStartServices } from '../../../hooks';
+import { useCheckPermissions } from '../hooks';
+
+const FlexItemWithMinWidth = styled(EuiFlexItem)`
+  min-width: 0px;
+  max-width: 100%;
+`;
+
+// Otherwise the copy button is over the text
+const CommandCode = styled.div.attrs(() => {
+  return {
+    className: 'eui-textBreakAll',
+  };
+})`
+  margin-right: ${(props) => props.theme.eui.euiSizeM};
+`;
+
+export const GenerateServiceTokenComponent: React.FunctionComponent<{
+  serviceToken?: string;
+  generateServiceToken: (remote?: boolean) => void;
+  isLoadingServiceToken: boolean;
+  isRemote?: boolean;
+}> = ({ serviceToken, generateServiceToken, isLoadingServiceToken, isRemote = false }) => {
+  const { docLinks } = useStartServices();
+  const { permissionsError, isPermissionsLoading } = useCheckPermissions();
+
+  return (
+    <>
+      <EuiText>
+        {isRemote ? (
+          <FormattedMessage
+            id="xpack.fleet.settings.remoteServiceToken.generateServiceTokenDescription"
+            defaultMessage="A service token grants Fleet Server permissions to write to Elasticsearch, and can be used to configure this Elasticsearch cluster for remote output. For more information, see the {fleetUserGuide}."
+            values={{
+              fleetUserGuide: (
+                <EuiLink href={docLinks.links.fleet.guide} target="_blank">
+                  {i18n.translate('xpack.fleet.settings.editOutputFlyout.fleetUserGuideLabel', {
+                    defaultMessage: 'Fleet User Guide',
+                  })}
+                </EuiLink>
+              ),
+            }}
+          />
+        ) : (
+          <FormattedMessage
+            id="xpack.fleet.fleetServerSetup.generateServiceTokenDescription"
+            defaultMessage="A service token grants Fleet Server permissions to write to Elasticsearch."
+          />
+        )}
+      </EuiText>
+      <EuiSpacer size="m" />
+      {!serviceToken ? (
+        <EuiFlexGroup>
+          <EuiFlexItem grow={false}>
+            <EuiToolTip
+              content={
+                isRemote && !!permissionsError ? (
+                  <FormattedMessage
+                    id="xpack.fleet.settings.remoteServiceToken.noPermissionTooltip"
+                    defaultMessage="To generate service token, you must have the minimum required privileges. Contact your administrator."
+                  />
+                ) : null
+              }
+            >
+              <EuiButton
+                fill
+                isLoading={isLoadingServiceToken}
+                isDisabled={isLoadingServiceToken || isPermissionsLoading || !!permissionsError}
+                onClick={() => {
+                  generateServiceToken(isRemote);
+                }}
+                data-test-subj="fleetServerGenerateServiceTokenBtn"
+              >
+                <FormattedMessage
+                  id="xpack.fleet.fleetServerSetup.generateServiceTokenButton"
+                  defaultMessage="Generate service token"
+                />
+              </EuiButton>
+            </EuiToolTip>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      ) : (
+        <>
+          <EuiCallOut
+            iconType="check"
+            size="s"
+            color="success"
+            title={
+              <FormattedMessage
+                id="xpack.fleet.fleetServerSetup.saveServiceTokenDescription"
+                defaultMessage="Save your service token information. This will be shown only once."
+              />
+            }
+          />
+          <EuiSpacer size="m" />
+          <EuiFlexGroup direction="column" gutterSize="s">
+            <EuiFlexItem grow={false}>
+              <strong data-test-subject="serviceTokenSaveReminderHeader">
+                <FormattedMessage
+                  id="xpack.fleet.fleetServerSetup.serviceTokenLabel"
+                  defaultMessage="Service token"
+                />
+              </strong>
+            </EuiFlexItem>
+            <FlexItemWithMinWidth>
+              <EuiCodeBlock paddingSize="m" isCopyable>
+                <CommandCode>{serviceToken}</CommandCode>
+              </EuiCodeBlock>
+            </FlexItemWithMinWidth>
+          </EuiFlexGroup>
+        </>
+      )}
+    </>
+  );
+};

x-pack/plugins/fleet/public/applications/fleet/components/index.ts

@@ -9,3 +9,4 @@ export * from '../../../components';
 
 export * from './search_bar';
 export * from './fleet_server_instructions';
+export * from './generate_service_token';

x-pack/plugins/fleet/public/applications/fleet/hooks/index.ts

@@ -9,3 +9,5 @@ export * from '../../../hooks';
 
 export * from './use_breadcrumbs';
 export * from './use_apm_service_href';
+export * from './use_service_token';
+export * from './use_check_permissions';