[Fleet] add Agent config details yaml view

x-pack/plugins/ingest_manager/common/services/routes.ts

@@ -82,6 +82,10 @@ export const agentConfigRouteService = {
   getDeletePath: () => {
     return AGENT_CONFIG_API_ROUTES.DELETE_PATTERN;
   },
+
+  getInfoFullPath: (agentConfigId: string) => {
+    return AGENT_CONFIG_API_ROUTES.FULL_INFO_PATTERN.replace('{agentConfigId}', agentConfigId);
+  },
 };
 
 export const fleetSetupRouteService = {

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_list_page/components/enrollment_instructions/shell/index.tsx → x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/enrollment_instructions/shell/index.tsx

@@ -37,11 +37,13 @@ export const ShellEnrollmentInstructions: React.FunctionComponent<Props> = ({
   const [isPlatformOptionsOpen, setIsPlatformOptionsOpen] = useState<boolean>(false);
 
   // Build quick installation command
-  const quickInstallInstructions = `${
-    kibanaCASha256 ? `CA_SHA256=${kibanaCASha256} ` : ''
-  }API_KEY=${
-    apiKey.api_key
-  } sh -c "$(curl ${kibanaUrl}/api/ingest_manager/fleet/install/${currentPlatform})"`;
+  // const quickInstallInstructions = `${
+  //   kibanaCASha256 ? `CA_SHA256=${kibanaCASha256} ` : ''
+  // }API_KEY=${
+  //   apiKey.api_key
+  // } sh -c "$(curl ${kibanaUrl}/api/ingest_manager/fleet/install/${currentPlatform})"`;
+
+  const quickInstallInstructions = `./agent enroll ${kibanaUrl} ${apiKey.api_key}`;
 
   return (
     <>

x-pack/plugins/ingest_manager/public/applications/ingest_manager/hooks/use_request/agent_config.ts

@@ -32,6 +32,13 @@ export const useGetOneAgentConfig = (agentConfigId: string) => {
   });
 };
 
+export const useGetOneAgentConfigFull = (agentConfigId: string) => {
+  return useRequest({
+    path: agentConfigRouteService.getInfoFullPath(agentConfigId),
+    method: 'get',
+  });
+};
+
 export const sendGetOneAgentConfig = (agentConfigId: string) => {
   return sendRequest<GetOneAgentConfigResponse>({
     path: agentConfigRouteService.getInfoPath(agentConfigId),

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/details_page/components/yaml/index.tsx

@@ -0,0 +1,78 @@
+/*
+ * 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, { memo } from 'react';
+import { dump } from 'js-yaml';
+import { FormattedMessage } from '@kbn/i18n/react';
+import {
+  EuiTitle,
+  EuiSpacer,
+  EuiText,
+  EuiCodeBlock,
+  EuiFlexGroup,
+  EuiFlexItem,
+} from '@elastic/eui';
+import { AgentConfig } from '../../../../../../../../common/types/models';
+import {
+  useGetOneAgentConfigFull,
+  useGetEnrollmentAPIKeys,
+  useGetOneEnrollmentAPIKey,
+  useCore,
+} from '../../../../../hooks';
+import { ShellEnrollmentInstructions } from '../../../../../components/enrollment_instructions';
+import { Loading } from '../../../../../components';
+
+const CONFIG_KEYS_ORDER = ['id', 'revision', 'outputs', 'datasources'];
+
+export const ConfigYamlView = memo<{ config: AgentConfig }>(({ config }) => {
+  const core = useCore();
+
+  const fullConfigRequest = useGetOneAgentConfigFull(config.id);
+  const apiKeysRequest = useGetEnrollmentAPIKeys();
+  const apiKeyRequest = useGetOneEnrollmentAPIKey(apiKeysRequest.data?.list?.[0].id as string);
+
+  if (fullConfigRequest.isLoading && !fullConfigRequest.data) {
+    return <Loading />;
+  }
+
+  return (
+    <EuiFlexGroup>
+      <EuiFlexItem grow={7}>
+        <EuiCodeBlock language="yaml" isCopyable>
+          {dump(fullConfigRequest.data.item, {
+            sortKeys: (keyA: string, keyB: string) => {
+              return CONFIG_KEYS_ORDER.indexOf(keyA) - CONFIG_KEYS_ORDER.indexOf(keyB);
+            },
+          })}
+        </EuiCodeBlock>
+      </EuiFlexItem>
+      <EuiFlexItem grow={3}>
+        <EuiTitle size="s">
+          <h3>
+            <FormattedMessage
+              id="xpack.ingestManager.yamlConfig.instructionTittle  "
+              defaultMessage="Enroll with fleet"
+            />
+          </h3>
+        </EuiTitle>
+        <EuiSpacer size={'m'} />
+        <EuiText size="s">
+          <FormattedMessage
+            id="xpack.ingestManager.yamlConfig.instructionDescription  "
+            defaultMessage="To enroll an agent with this configuration, copy and run the following command on your host."
+          />
+        </EuiText>
+        <EuiSpacer size={'m'} />
+        {apiKeyRequest.data && (
+          <ShellEnrollmentInstructions
+            apiKey={apiKeyRequest.data.item}
+            kibanaUrl={`${window.location.origin}${core.http.basePath.get()}`}
+          />
+        )}
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+});

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/details_page/index.tsx

@@ -31,6 +31,7 @@ import { LinkedAgentCount } from '../components';
 import { useAgentConfigLink } from './hooks/use_details_uri';
 import { DETAILS_ROUTER_PATH, DETAILS_ROUTER_SUB_PATH } from './constants';
 import { ConfigDatasourcesView } from './components/datasources';
+import { ConfigYamlView } from './components/yaml';
 
 const Divider = styled.div`
   width: 0;
@@ -282,8 +283,7 @@ export const AgentConfigDetailsLayout: React.FunctionComponent = () => {
             <Route
               path={`${DETAILS_ROUTER_PATH}/yaml`}
               render={() => {
-                // TODO: YAML implementation tracked via https://github.com/elastic/kibana/issues/57958
-                return <div>YAML placeholder</div>;
+                return <ConfigYamlView config={agentConfig} />;
               }}
             />
             <Route

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_list_page/components/agent_enrollment_flyout/instructions.tsx

@@ -8,7 +8,10 @@ import { i18n } from '@kbn/i18n';
 import { EuiSpacer, EuiText, EuiButtonGroup, EuiSteps } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { useEnrollmentApiKey } from '../enrollment_api_keys';
-import { ShellEnrollmentInstructions, ManualInstructions } from '../enrollment_instructions';
+import {
+  ShellEnrollmentInstructions,
+  ManualInstructions,
+} from '../../../../../components/enrollment_instructions';
 import { useCore, useGetAgents } from '../../../../../hooks';
 import { Loading } from '../../../components';