[7.x] [Component templates] Table view (#68031) (#68687)

Co-authored-by: Elastic Machine <[email protected]>

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

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export { PLUGIN, API_BASE_PATH, CREATE_LEGACY_TEMPLATE_BY_DEFAULT } from './constants';
+export { PLUGIN, API_BASE_PATH, CREATE_LEGACY_TEMPLATE_BY_DEFAULT, BASE_PATH } from './constants';
 
 export { getTemplateParameter } from './lib';
 

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

@@ -0,0 +1,94 @@
+/*
+ * 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 { deserializeComponentTemplate } 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,
+              },
+              mappings: {
+                _source: {
+                  enabled: false,
+                },
+                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,
+                },
+              },
+              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',
+            },
+          },
+        },
+      },
+      _kbnMeta: {
+        usedBy: ['my_index_template'],
+      },
+    });
+  });
+});

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

@@ -0,0 +1,86 @@
+/*
+ * 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 {
+  TemplateFromEs,
+  ComponentTemplateFromEs,
+  ComponentTemplateDeserialized,
+  ComponentTemplateListItem,
+} from '../types';
+
+const hasEntries = (data: object = {}) => Object.entries(data).length > 0;
+
+/**
+ * Normalize a list of component templates to a map where each key
+ * is a component template name, and the value is an array of index templates name using it
+ *
+ * @example
+ *
+ {
+   "comp-1": [
+     "template-1",
+     "template-2"
+   ],
+   "comp2": [
+     "template-1",
+     "template-2"
+   ]
+ }
+ *
+ * @param indexTemplatesEs List of component templates
+ */
+
+const getIndexTemplatesToUsedBy = (indexTemplatesEs: TemplateFromEs[]) => {
+  return indexTemplatesEs.reduce((acc, item) => {
+    if (item.index_template.composed_of) {
+      item.index_template.composed_of.forEach((component) => {
+        acc[component] = acc[component] ? [...acc[component], item.name] : [item.name];
+      });
+    }
+    return acc;
+  }, {} as { [key: string]: string[] });
+};
+
+export function deserializeComponentTemplate(
+  componentTemplateEs: ComponentTemplateFromEs,
+  indexTemplatesEs: TemplateFromEs[]
+) {
+  const { name, component_template: componentTemplate } = componentTemplateEs;
+  const { template, _meta, version } = componentTemplate;
+
+  const indexTemplatesToUsedBy = getIndexTemplatesToUsedBy(indexTemplatesEs);
+
+  const deserializedComponentTemplate: ComponentTemplateDeserialized = {
+    name,
+    template,
+    version,
+    _meta,
+    _kbnMeta: {
+      usedBy: indexTemplatesToUsedBy[name] || [],
+    },
+  };
+
+  return deserializedComponentTemplate;
+}
+
+export function deserializeComponenTemplateList(
+  componentTemplateEs: ComponentTemplateFromEs,
+  indexTemplatesEs: TemplateFromEs[]
+) {
+  const { name, component_template: componentTemplate } = componentTemplateEs;
+  const { template } = componentTemplate;
+
+  const indexTemplatesToUsedBy = getIndexTemplatesToUsedBy(indexTemplatesEs);
+
+  const componentTemplateListItem: ComponentTemplateListItem = {
+    name,
+    usedBy: indexTemplatesToUsedBy[name] || [],
+    hasSettings: hasEntries(template.settings),
+    hasMappings: hasEntries(template.mappings),
+    hasAliases: hasEntries(template.aliases),
+  };
+
+  return componentTemplateListItem;
+}

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

@@ -11,3 +11,8 @@ export {
 } from './template_serialization';
 
 export { getTemplateParameter } from './utils';
+
+export {
+  deserializeComponentTemplate,
+  deserializeComponenTemplateList,
+} from './component_template_serialization';

x-pack/plugins/index_management/common/types/component_templates.ts

@@ -0,0 +1,39 @@
+/*
+ * 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 { IndexSettings } from './indices';
+import { Aliases } from './aliases';
+import { Mappings } from './mappings';
+
+export interface ComponentTemplateSerialized {
+  template: {
+    settings?: IndexSettings;
+    aliases?: Aliases;
+    mappings?: Mappings;
+  };
+  version?: number;
+  _meta?: { [key: string]: any };
+}
+
+export interface ComponentTemplateDeserialized extends ComponentTemplateSerialized {
+  name: string;
+  _kbnMeta: {
+    usedBy: string[];
+  };
+}
+
+export interface ComponentTemplateFromEs {
+  name: string;
+  component_template: ComponentTemplateSerialized;
+}
+
+export interface ComponentTemplateListItem {
+  name: string;
+  usedBy: string[];
+  hasMappings: boolean;
+  hasAliases: boolean;
+  hasSettings: boolean;
+}

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

@@ -11,3 +11,5 @@ export * from './indices';
 export * from './mappings';
 
 export * from './templates';
+
+export * from './component_templates';

x-pack/plugins/index_management/common/types/templates.ts

@@ -49,6 +49,11 @@ export interface TemplateDeserialized {
   };
 }
 
+export interface TemplateFromEs {
+  name: string;
+  index_template: TemplateSerialized;
+}
+
 /**
  * Interface for the template list in our UI table
  * we don't include the mappings, settings and aliases

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

@@ -5,10 +5,12 @@
  */
 
 import React, { useEffect } from 'react';
+
 import { Router, Switch, Route, Redirect } from 'react-router-dom';
 import { ScopedHistory } from 'kibana/public';
+
 import { UIM_APP_LOAD } from '../../common/constants';
-import { IndexManagementHome } from './sections/home';
+import { IndexManagementHome, homeSections } from './sections/home';
 import { TemplateCreate } from './sections/template_create';
 import { TemplateClone } from './sections/template_clone';
 import { TemplateEdit } from './sections/template_edit';
@@ -32,7 +34,7 @@ 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 path={`/:section(indices|templates)`} component={IndexManagementHome} />
+    <Route path={`/:section(${homeSections.join('|')})`} component={IndexManagementHome} />
     <Redirect from={`/`} to={`/indices`} />
   </Switch>
 );