diff --git a/x-pack/plugins/ingest_manager/common/services/datasource_to_agent_datasource.test.ts b/x-pack/plugins/ingest_manager/common/services/datasource_to_agent_datasource.test.ts
index 3496ea782ee99..17509571f1985 100644
--- a/x-pack/plugins/ingest_manager/common/services/datasource_to_agent_datasource.test.ts
+++ b/x-pack/plugins/ingest_manager/common/services/datasource_to_agent_datasource.test.ts
@@ -3,11 +3,11 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import { NewDatasource, DatasourceInput } from '../types';
+import { Datasource, NewDatasource, DatasourceInput } from '../types';
 import { storedDatasourceToAgentDatasource } from './datasource_to_agent_datasource';
 
 describe('Ingest Manager - storedDatasourceToAgentDatasource', () => {
-  const mockDatasource: NewDatasource = {
+  const mockNewDatasource: NewDatasource = {
     name: 'mock-datasource',
     description: '',
     config_id: '',
@@ -17,6 +17,12 @@ describe('Ingest Manager - storedDatasourceToAgentDatasource', () => {
     inputs: [],
   };
 
+  const mockDatasource: Datasource = {
+    ...mockNewDatasource,
+    id: 'some-uuid',
+    revision: 1,
+  };
+
   const mockInput: DatasourceInput = {
     type: 'test-logs',
     enabled: true,
@@ -70,7 +76,8 @@ describe('Ingest Manager - storedDatasourceToAgentDatasource', () => {
 
   it('returns agent datasource config for datasource with no inputs', () => {
     expect(storedDatasourceToAgentDatasource(mockDatasource)).toEqual({
-      id: 'mock-datasource',
+      id: 'some-uuid',
+      name: 'mock-datasource',
       namespace: 'default',
       enabled: true,
       use_output: 'default',
@@ -87,7 +94,8 @@ describe('Ingest Manager - storedDatasourceToAgentDatasource', () => {
         },
       })
     ).toEqual({
-      id: 'mock-datasource',
+      id: 'some-uuid',
+      name: 'mock-datasource',
       namespace: 'default',
       enabled: true,
       use_output: 'default',
@@ -99,9 +107,21 @@ describe('Ingest Manager - storedDatasourceToAgentDatasource', () => {
     });
   });
 
+  it('uses name for id when id is not provided in case of new datasource', () => {
+    expect(storedDatasourceToAgentDatasource(mockNewDatasource)).toEqual({
+      id: 'mock-datasource',
+      name: 'mock-datasource',
+      namespace: 'default',
+      enabled: true,
+      use_output: 'default',
+      inputs: [],
+    });
+  });
+
   it('returns agent datasource config with flattened input and package stream', () => {
     expect(storedDatasourceToAgentDatasource({ ...mockDatasource, inputs: [mockInput] })).toEqual({
-      id: 'mock-datasource',
+      id: 'some-uuid',
+      name: 'mock-datasource',
       namespace: 'default',
       enabled: true,
       use_output: 'default',
@@ -140,7 +160,8 @@ describe('Ingest Manager - storedDatasourceToAgentDatasource', () => {
         ],
       })
     ).toEqual({
-      id: 'mock-datasource',
+      id: 'some-uuid',
+      name: 'mock-datasource',
       namespace: 'default',
       enabled: true,
       use_output: 'default',
@@ -169,7 +190,8 @@ describe('Ingest Manager - storedDatasourceToAgentDatasource', () => {
         inputs: [{ ...mockInput, enabled: false }],
       })
     ).toEqual({
-      id: 'mock-datasource',
+      id: 'some-uuid',
+      name: 'mock-datasource',
       namespace: 'default',
       enabled: true,
       use_output: 'default',
diff --git a/x-pack/plugins/ingest_manager/common/services/datasource_to_agent_datasource.ts b/x-pack/plugins/ingest_manager/common/services/datasource_to_agent_datasource.ts
index b509878b7f945..9e09d3fa3153a 100644
--- a/x-pack/plugins/ingest_manager/common/services/datasource_to_agent_datasource.ts
+++ b/x-pack/plugins/ingest_manager/common/services/datasource_to_agent_datasource.ts
@@ -12,7 +12,8 @@ export const storedDatasourceToAgentDatasource = (
   const { name, namespace, enabled, package: pkg, inputs } = datasource;
 
   const fullDatasource: FullAgentConfigDatasource = {
-    id: name,
+    id: 'id' in datasource ? datasource.id : name,
+    name,
     namespace,
     enabled,
     use_output: DEFAULT_OUTPUT.name, // TODO: hardcoded to default output for now
diff --git a/x-pack/plugins/ingest_manager/common/types/models/agent_config.ts b/x-pack/plugins/ingest_manager/common/types/models/agent_config.ts
index 002c3784446a8..2372caee512af 100644
--- a/x-pack/plugins/ingest_manager/common/types/models/agent_config.ts
+++ b/x-pack/plugins/ingest_manager/common/types/models/agent_config.ts
@@ -34,8 +34,10 @@ export interface AgentConfig extends NewAgentConfig, SavedObjectAttributes {
   revision: number;
 }
 
-export type FullAgentConfigDatasource = Pick<Datasource, 'namespace' | 'enabled'> & {
-  id: string;
+export type FullAgentConfigDatasource = Pick<
+  Datasource,
+  'id' | 'name' | 'namespace' | 'enabled'
+> & {
   package?: Pick<DatasourcePackage, 'name' | 'version'>;
   use_output: string;
   inputs: Array<
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/details_page/components/yaml/index.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/details_page/components/yaml/index.tsx
index 56b109a9bc062..ad27c590d5eaa 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/details_page/components/yaml/index.tsx
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/details_page/components/yaml/index.tsx
@@ -27,7 +27,9 @@ import { Loading } from '../../../../../components';
 
 const CONFIG_KEYS_ORDER = [
   'id',
+  'name',
   'revision',
+  'type',
   'outputs',
   'datasources',
   'enabled',
@@ -52,7 +54,7 @@ export const ConfigYamlView = memo<{ config: AgentConfig }>(({ config }) => {
   return (
     <EuiFlexGroup>
       <EuiFlexItem grow={7}>
-        <EuiCodeBlock language="yaml" isCopyable>
+        <EuiCodeBlock language="yaml" isCopyable overflowHeight={500}>
           {dump(fullConfigRequest.data.item, {
             sortKeys: (keyA: string, keyB: string) => {
               const indexA = CONFIG_KEYS_ORDER.indexOf(keyA);