[Component templates] Form wizard

x-pack/plugins/index_management/common/lib/component_template_serialization.test.ts

@@ -4,91 +4,164 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { deserializeComponentTemplate } from './component_template_serialization';
+import {
+  deserializeComponentTemplate,
+  serializeComponentTemplate,
+} from './component_template_serialization';
 
-describe('deserializeComponentTemplate', () => {
-  test('deserializes a component template', () => {
-    expect(
-      deserializeComponentTemplate(
-        {
-          name: 'my_component_template',
-          component_template: {
-            version: 1,
-            _meta: {
-              serialization: {
-                id: 10,
-                class: 'MyComponentTemplate',
-              },
-              description: 'set number of shards to one',
-            },
-            template: {
-              settings: {
-                number_of_shards: 1,
+describe('Component template serialization', () => {
+  describe('deserializeComponentTemplate()', () => {
+    test('deserializes a component template', () => {
+      expect(
+        deserializeComponentTemplate(
+          {
+            name: 'my_component_template',
+            component_template: {
+              version: 1,
+              _meta: {
+                serialization: {
+                  id: 10,
+                  class: 'MyComponentTemplate',
+                },
+                description: 'set number of shards to one',
               },
-              mappings: {
-                _source: {
-                  enabled: false,
+              template: {
+                settings: {
+                  number_of_shards: 1,
                 },
-                properties: {
-                  host_name: {
-                    type: 'keyword',
+                mappings: {
+                  _source: {
+                    enabled: false,
                   },
-                  created_at: {
-                    type: 'date',
-                    format: 'EEE MMM dd HH:mm:ss Z yyyy',
+                  properties: {
+                    host_name: {
+                      type: 'keyword',
+                    },
+                    created_at: {
+                      type: 'date',
+                      format: 'EEE MMM dd HH:mm:ss Z yyyy',
+                    },
                   },
                 },
               },
             },
           },
-        },
-        [
-          {
-            name: 'my_index_template',
-            index_template: {
-              index_patterns: ['foo'],
-              template: {
-                settings: {
-                  number_of_replicas: 2,
+          [
+            {
+              name: 'my_index_template',
+              index_template: {
+                index_patterns: ['foo'],
+                template: {
+                  settings: {
+                    number_of_replicas: 2,
+                  },
                 },
+                composed_of: ['my_component_template'],
+              },
+            },
+          ]
+        )
+      ).toEqual({
+        name: 'my_component_template',
+        version: 1,
+        _meta: {
+          serialization: {
+            id: 10,
+            class: 'MyComponentTemplate',
+          },
+          description: 'set number of shards to one',
+        },
+        template: {
+          settings: {
+            number_of_shards: 1,
+          },
+          mappings: {
+            _source: {
+              enabled: false,
+            },
+            properties: {
+              host_name: {
+                type: 'keyword',
+              },
+              created_at: {
+                type: 'date',
+                format: 'EEE MMM dd HH:mm:ss Z yyyy',
               },
-              composed_of: ['my_component_template'],
             },
           },
-        ]
-      )
-    ).toEqual({
-      name: 'my_component_template',
-      version: 1,
-      _meta: {
-        serialization: {
-          id: 10,
-          class: 'MyComponentTemplate',
         },
-        description: 'set number of shards to one',
-      },
-      template: {
-        settings: {
-          number_of_shards: 1,
+        _kbnMeta: {
+          usedBy: ['my_index_template'],
         },
-        mappings: {
-          _source: {
-            enabled: false,
+      });
+    });
+  });
+
+  describe('serializeComponentTemplate()', () => {
+    test('serialize a component template', () => {
+      expect(
+        serializeComponentTemplate({
+          name: 'my_component_template',
+          version: 1,
+          _kbnMeta: {
+            usedBy: [],
+          },
+          _meta: {
+            serialization: {
+              id: 10,
+              class: 'MyComponentTemplate',
+            },
+            description: 'set number of shards to one',
+          },
+          template: {
+            settings: {
+              number_of_shards: 1,
+            },
+            mappings: {
+              _source: {
+                enabled: false,
+              },
+              properties: {
+                host_name: {
+                  type: 'keyword',
+                },
+                created_at: {
+                  type: 'date',
+                  format: 'EEE MMM dd HH:mm:ss Z yyyy',
+                },
+              },
+            },
+          },
+        })
+      ).toEqual({
+        version: 1,
+        _meta: {
+          serialization: {
+            id: 10,
+            class: 'MyComponentTemplate',
           },
-          properties: {
-            host_name: {
-              type: 'keyword',
+          description: 'set number of shards to one',
+        },
+        template: {
+          settings: {
+            number_of_shards: 1,
+          },
+          mappings: {
+            _source: {
+              enabled: false,
             },
-            created_at: {
-              type: 'date',
-              format: 'EEE MMM dd HH:mm:ss Z yyyy',
+            properties: {
+              host_name: {
+                type: 'keyword',
+              },
+              created_at: {
+                type: 'date',
+                format: 'EEE MMM dd HH:mm:ss Z yyyy',
+              },
             },
           },
         },
-      },
-      _kbnMeta: {
-        usedBy: ['my_index_template'],
-      },
+      });
     });
   });
 });

x-pack/plugins/index_management/common/lib/component_template_serialization.ts

@@ -8,6 +8,7 @@ import {
   ComponentTemplateFromEs,
   ComponentTemplateDeserialized,
   ComponentTemplateListItem,
+  ComponentTemplateSerialized,
 } from '../types';
 
 const hasEntries = (data: object = {}) => Object.entries(data).length > 0;
@@ -84,3 +85,15 @@ export function deserializeComponenTemplateList(
 
   return componentTemplateListItem;
 }
+
+export function serializeComponentTemplate(
+  componentTemplateDeserialized: ComponentTemplateDeserialized
+): ComponentTemplateSerialized {
+  const { version, template, _meta } = componentTemplateDeserialized;
+
+  return {
+    version,
+    template,
+    _meta,
+  };
+}

x-pack/plugins/index_management/common/lib/index.ts

@@ -20,4 +20,5 @@ export { getTemplateParameter } from './utils';
 export {
   deserializeComponentTemplate,
   deserializeComponenTemplateList,
+  serializeComponentTemplate,
 } from './component_template_serialization';

x-pack/plugins/index_management/public/application/app.tsx

@@ -16,6 +16,11 @@ import { TemplateClone } from './sections/template_clone';
 import { TemplateEdit } from './sections/template_edit';
 
 import { useServices } from './app_context';
+import {
+  ComponentTemplateCreate,
+  ComponentTemplateEdit,
+  ComponentTemplateClone,
+} from './components';
 
 export const App = ({ history }: { history: ScopedHistory }) => {
   const { uiMetricService } = useServices();
@@ -34,6 +39,13 @@ export const AppWithoutRouter = () => (
     <Route exact path="/create_template" component={TemplateCreate} />
     <Route exact path="/clone_template/:name*" component={TemplateClone} />
     <Route exact path="/edit_template/:name*" component={TemplateEdit} />
+    <Route exact path="/create_component_template" component={ComponentTemplateCreate} />
+    <Route
+      exact
+      path="/create_component_template/:sourceComponentTemplateName"
+      component={ComponentTemplateClone}
+    />
+    <Route exact path="/edit_component_template/:name*" component={ComponentTemplateEdit} />
     <Route path={`/:section(${homeSections.join('|')})`} component={IndexManagementHome} />
     <Redirect from={`/`} to={`/indices`} />
   </Switch>

x-pack/plugins/index_management/public/application/app_context.tsx

@@ -6,9 +6,10 @@
 
 import React, { createContext, useContext } from 'react';
 import { ScopedHistory } from 'kibana/public';
+import { ManagementAppMountParams } from 'src/plugins/management/public';
 import { UsageCollectionSetup } from 'src/plugins/usage_collection/public';
-
 import { CoreStart } from '../../../../../src/core/public';
+
 import { IngestManagerSetup } from '../../../ingest_manager/public';
 import { IndexMgmtMetricsType } from '../types';
 import { UiMetricService, NotificationService, HttpService } from './services';
@@ -32,6 +33,7 @@ export interface AppDependencies {
     notificationService: NotificationService;
   };
   history: ScopedHistory;
+  setBreadcrumbs: ManagementAppMountParams['setBreadcrumbs'];
 }
 
 export const AppContextProvider = ({