[Index Management] Add deprecation warning to index template and comp…

…onent template UIs (elastic#174450) Partially addresses elastic#170805 ## Summary With elastic/elasticsearch#101148 we now can alert the users when a component template or index template will soon be deprecated and shouldnt be relied upon. This PR adds a badge and a callout to the component template and index template UIs to alert the users about this. ##### How to test * Start up kibana and es * Navigate to Stack management -> index management (component_templates|index_templates) * Verify that: * Deprecated resources are hidden by default * Upon enabling filtering to see them they should pop up on the table with a badge * Verify that deprecated resources are highlighted and when editing, we also show a warning callout. <details> <summary>Create deprecated component template</summary> ``` PUT _component_template/template_1 { "template": { "settings" : { "number_of_shards" : 1 } }, "deprecated": true } ``` </details> <details> <summary>Screenshots</summary> // index templates ![Screenshot 2024-01-10 at 15 25 26](https://github.com/elastic/kibana/assets/1191206/ff632464-c4ac-43a2-b89d-be423489a82a) ![Screenshot 2024-01-10 at 15 25 31](https://github.com/elastic/kibana/assets/1191206/bb231c7c-5ae3-466d-9411-3cca842124dc) ![Screenshot 2024-01-08 at 13 52 35](https://github.com/elastic/kibana/assets/1191206/c6724867-3a0e-4998-871b-35fd577689bc) ![Screenshot 2024-01-08 at 14 00 46](https://github.com/elastic/kibana/assets/1191206/0b1001d4-c0bb-49a8-862a-746754e34fe0) // component templates ![Screenshot 2024-01-10 at 14 45 10](https://github.com/elastic/kibana/assets/1191206/675519b8-80d7-466a-a4ad-185bb7f52651) ![Screenshot 2024-01-10 at 14 45 15](https://github.com/elastic/kibana/assets/1191206/0cbe5704-8549-4812-9202-e44b8f02ac95) ![Screenshot 2024-01-08 at 14 51 03](https://github.com/elastic/kibana/assets/1191206/0288ca12-c8f5-4ed5-ba4c-f77834702e68) ![Screenshot 2024-01-08 at 15 07 17](https://github.com/elastic/kibana/assets/1191206/97f72f52-6816-4bc9-910c-fbe88df50ad2) </details> --------- Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Yulia Čech <6585477+yuliacech@users.noreply.github.com> Co-authored-by: Yulia Cech <yulia.cech@elastic.co>
fkanout · Feb 7, 2024 · eec04ca · eec04ca
1 parent cf8432f
commit eec04ca
Show file tree

Hide file tree

Showing 29 changed files with 357 additions and 56 deletions.
diff --git a/.../plugins/index_management/__jest__/client_integration/home/index_templates_tab.helpers.ts b/.../plugins/index_management/__jest__/client_integration/home/index_templates_tab.helpers.ts
@@ -100,9 +100,9 @@ const createActions = (testBed: TestBed<TestSubjects>) => {
     find('closeDetailsButton').simulate('click');
   };
 
-  const toggleViewItem = (view: 'managed' | 'cloudManaged' | 'system') => {
+  const toggleViewItem = (view: 'managed' | 'deprecated' | 'cloudManaged' | 'system') => {
     const { find, component } = testBed;
-    const views = ['managed', 'cloudManaged', 'system'];
+    const views = ['managed', 'deprecated', 'cloudManaged', 'system'];
 
     // First open the pop over
     act(() => {

diff --git a/x-pack/plugins/index_management/__jest__/client_integration/home/index_templates_tab.test.ts b/x-pack/plugins/index_management/__jest__/client_integration/home/index_templates_tab.test.ts
@@ -111,6 +111,13 @@ describe('Index Templates tab', () => {
       type: 'system',
     });
 
+    const deprecatedTemplate = fixtures.getTemplate({
+      name: `.d${getRandomString()}`,
+      indexPatterns: ['template7Pattern1*'],
+      type: 'system',
+      deprecated: true,
+    });
+
     const template4 = fixtures.getTemplate({
       name: `a${getRandomString()}`,
       indexPatterns: ['template4Pattern1*', 'template4Pattern2'],
@@ -140,7 +147,7 @@ describe('Index Templates tab', () => {
       type: 'system',
     });
 
-    const templates = [template1, template2, template3];
+    const templates = [template1, template2, template3, deprecatedTemplate];
     const legacyTemplates = [template4, template5, template6];
 
     beforeEach(async () => {
@@ -245,6 +252,35 @@ describe('Index Templates tab', () => {
       expect(updatedRows.length).toEqual(legacyTemplates.length);
     });
 
+    test('should have a switch to view deprecated templates', async () => {
+      const { table, actions } = testBed;
+      const { tableCellsValues } = table.getMetaData('templateTable');
+
+      // None of the available templates should have the deprecated template
+      tableCellsValues.forEach((row) => {
+        expect(
+          removeWhiteSpaceOnArrayValues(row).every(
+            (cell) => !cell.includes(deprecatedTemplate.name)
+          )
+        ).toBeTruthy();
+      });
+
+      actions.toggleViewItem('system');
+      actions.toggleViewItem('deprecated');
+
+      // After when all the tempaltes are available should have the deprecated template
+      const { tableCellsValues: updatedTableCellsValues } = table.getMetaData('templateTable');
+
+      // Find the row that has the deprecated template
+      const tableCellsWithDeprecatedTemplate = updatedTableCellsValues.filter((row) => {
+        return removeWhiteSpaceOnArrayValues(row).some((cell) =>
+          cell.includes(deprecatedTemplate.name)
+        );
+      });
+      // Assert that it has one row with the deprecated template
+      expect(tableCellsWithDeprecatedTemplate.length).toBe(1);
+    });
+
     test('each row should have a link to the template details panel', async () => {
       const { find, exists, actions, component } = testBed;
 

diff --git a/x-pack/plugins/index_management/common/lib/component_template_serialization.test.ts b/x-pack/plugins/index_management/common/lib/component_template_serialization.test.ts
@@ -63,6 +63,7 @@ describe('Component template serialization', () => {
           ]
         )
       ).toEqual({
+        isDeprecated: false,
         name: 'my_component_template',
         version: 1,
         _meta: {

diff --git a/x-pack/plugins/index_management/common/lib/component_template_serialization.ts b/x-pack/plugins/index_management/common/lib/component_template_serialization.ts
@@ -51,7 +51,7 @@ export function deserializeComponentTemplate(
   indexTemplatesEs: TemplateFromEs[]
 ) {
   const { name, component_template: componentTemplate } = componentTemplateEs;
-  const { template, _meta, version } = componentTemplate;
+  const { template, _meta, version, deprecated } = componentTemplate;
 
   const indexTemplatesToUsedBy = getIndexTemplatesToUsedBy(indexTemplatesEs);
 
@@ -60,6 +60,7 @@ export function deserializeComponentTemplate(
     template,
     version,
     _meta,
+    isDeprecated: Boolean(deprecated === true),
     _kbnMeta: {
       usedBy: indexTemplatesToUsedBy[name] || [],
       isManaged: Boolean(_meta?.managed === true),
@@ -74,13 +75,14 @@ export function deserializeComponentTemplateList(
   indexTemplatesEs: TemplateFromEs[]
 ) {
   const { name, component_template: componentTemplate } = componentTemplateEs;
-  const { template, _meta } = componentTemplate;
+  const { template, _meta, deprecated } = componentTemplate;
 
   const indexTemplatesToUsedBy = getIndexTemplatesToUsedBy(indexTemplatesEs);
 
   const componentTemplateListItem: ComponentTemplateListItem = {
     name,
     usedBy: indexTemplatesToUsedBy[name] || [],
+    isDeprecated: Boolean(deprecated === true),
     isManaged: Boolean(_meta?.managed === true),
     hasSettings: hasEntries(template.settings),
     hasMappings: hasEntries(template.mappings),

diff --git a/x-pack/plugins/index_management/common/lib/template_serialization.ts b/x-pack/plugins/index_management/common/lib/template_serialization.ts
@@ -53,6 +53,7 @@ export function deserializeTemplate(
     _meta,
     composed_of: composedOf,
     data_stream: dataStream,
+    deprecated,
     allow_auto_create: allowAutoCreate,
   } = templateEs;
   const { settings } = template;
@@ -78,6 +79,7 @@ export function deserializeTemplate(
     dataStream,
     allowAutoCreate,
     _meta,
+    deprecated,
     _kbnMeta: {
       type,
       hasDatastream: Boolean(dataStream),

diff --git a/x-pack/plugins/index_management/common/types/component_templates.ts b/x-pack/plugins/index_management/common/types/component_templates.ts
@@ -18,12 +18,14 @@ export interface ComponentTemplateSerialized {
     lifecycle?: DataStream['lifecycle'];
   };
   version?: number;
+  deprecated?: boolean;
   _meta?: { [key: string]: any };
   lifecycle?: DataRetention;
 }
 
 export interface ComponentTemplateDeserialized extends ComponentTemplateSerialized {
   name: string;
+  isDeprecated?: boolean;
   _kbnMeta: {
     usedBy: string[];
     isManaged: boolean;
@@ -42,6 +44,7 @@ export interface ComponentTemplateListItem {
   hasAliases: boolean;
   hasSettings: boolean;
   isManaged: boolean;
+  isDeprecated?: boolean;
 }
 
 export interface ComponentTemplateDatastreams {

diff --git a/x-pack/plugins/index_management/common/types/templates.ts b/x-pack/plugins/index_management/common/types/templates.ts
@@ -21,6 +21,7 @@ export interface TemplateSerialized {
     mappings?: Mappings;
     lifecycle?: DataStream['lifecycle'];
   };
+  deprecated?: boolean;
   composed_of?: string[];
   version?: number;
   priority?: number;
@@ -51,6 +52,7 @@ export interface TemplateDeserialized {
   ilmPolicy?: {
     name: string;
   };
+  deprecated?: boolean;
   _meta?: { [key: string]: any }; // Composable template only
   // Composable template only
   dataStream?: {
@@ -85,6 +87,7 @@ export interface TemplateListItem {
   hasSettings: boolean;
   hasAliases: boolean;
   hasMappings: boolean;
+  deprecated?: boolean;
   ilmPolicy?: {
     name: string;
   };
@@ -106,6 +109,7 @@ export interface LegacyTemplateSerialized {
   version?: number;
   settings?: IndexSettings;
   aliases?: Aliases;
+  deprecated?: boolean;
   mappings?: Mappings;
   order?: number;
 }
diff --git a/...onents/component_templates/__jest__/client_integration/component_template_details.test.ts b/...onents/component_templates/__jest__/client_integration/component_template_details.test.ts
@@ -15,6 +15,7 @@ const { setup } = pageHelpers.componentTemplateDetails;
 
 const COMPONENT_TEMPLATE: ComponentTemplateDeserialized = {
   name: 'comp-1',
+  isDeprecated: true,
   template: {
     mappings: { properties: { ip_address: { type: 'ip' } } },
     aliases: { mydata: {} },
@@ -62,6 +63,9 @@ describe('<ComponentTemplateDetails />', () => {
       // Verify footer does not display since "actions" prop was not provided
       expect(exists('footer')).toBe(false);
 
+      // Verify the deprecated badge is displayed
+      expect(exists('deprecatedComponentTemplateBadge')).toBe(true);
+
       // Verify tabs exist
       expect(exists('settingsTab')).toBe(true);
       expect(exists('mappingsTab')).toBe(true);

diff --git a/...mponents/component_templates/__jest__/client_integration/component_template_edit.test.tsx b/...mponents/component_templates/__jest__/client_integration/component_template_edit.test.tsx
@@ -74,6 +74,7 @@ describe('<ComponentTemplateEdit />', () => {
   const COMPONENT_TEMPLATE_NAME = 'comp-1';
   const COMPONENT_TEMPLATE_TO_EDIT = {
     name: COMPONENT_TEMPLATE_NAME,
+    isDeprecated: true,
     template: {
       settings: { number_of_shards: 1 },
     },
@@ -106,6 +107,7 @@ describe('<ComponentTemplateEdit />', () => {
     const { exists, find } = testBed;
 
     expect(exists('pageTitle')).toBe(true);
+    expect(exists('deprecatedTemplateCallout')).toBe(true);
     expect(find('pageTitle').text()).toEqual(
       `Edit component template '${COMPONENT_TEMPLATE_NAME}'`
     );

diff --git a/...omponents/component_templates/__jest__/client_integration/component_template_list.test.ts b/...omponents/component_templates/__jest__/client_integration/component_template_list.test.ts
@@ -43,6 +43,7 @@ describe('<ComponentTemplateList />', () => {
       hasSettings: true,
       usedBy: [],
       isManaged: false,
+      isDeprecated: false,
     };
 
     const componentTemplate2: ComponentTemplateListItem = {
@@ -52,6 +53,7 @@ describe('<ComponentTemplateList />', () => {
       hasSettings: true,
       usedBy: ['test_index_template_1'],
       isManaged: false,
+      isDeprecated: false,
     };
 
     const componentTemplate3: ComponentTemplateListItem = {
@@ -61,6 +63,7 @@ describe('<ComponentTemplateList />', () => {
       hasSettings: true,
       usedBy: ['test_index_template_1', 'test_index_template_2'],
       isManaged: false,
+      isDeprecated: true,
     };
 
     const componentTemplates = [componentTemplate1, componentTemplate2, componentTemplate3];
@@ -89,15 +92,32 @@ describe('<ComponentTemplateList />', () => {
       const { tableCellsValues: ascTableCellsValues } =
         table.getMetaData('componentTemplatesTable');
       const ascUsageCountValues = ascTableCellsValues.map((row) => row[2]);
-      expect(ascUsageCountValues).toEqual(['Not in use', '1', '2']);
+      expect(ascUsageCountValues).toEqual(['Not in use', '1']);
 
       // Sort descending
       await actions.clickTableColumnSortButton(1);
 
       const { tableCellsValues: descTableCellsValues } =
         table.getMetaData('componentTemplatesTable');
       const descUsageCountValues = descTableCellsValues.map((row) => row[2]);
-      expect(descUsageCountValues).toEqual(['2', '1', 'Not in use']);
+      expect(descUsageCountValues).toEqual(['1', 'Not in use']);
+    });
+
+    test('Hides deprecated component templates by default', async () => {
+      const { component, find } = testBed;
+
+      // Initially the switch is off so we should not see any deprecated component templates
+      let deprecatedList = find('deprecatedComponentTemplateBadge');
+      expect(deprecatedList.length).toBe(0);
+
+      testBed.find('componentTemplatesFiltersButton').simulate('click');
+      testBed.find('componentTemplates--deprecatedFilter').simulate('click');
+
+      component.update();
+
+      // Now we should see all deprecated component templates
+      deprecatedList = find('deprecatedComponentTemplateBadge');
+      expect(deprecatedList.length).toBe(1);
     });
 
     test('should reload the component templates data', async () => {

diff --git a/...onent_templates/__jest__/client_integration/helpers/component_template_details.helpers.ts b/...onent_templates/__jest__/client_integration/helpers/component_template_details.helpers.ts
@@ -86,6 +86,7 @@ export type ComponentTemplateDetailsTestSubjects =
   | 'noMappingsCallout'
   | 'settingsTabContent'
   | 'noSettingsCallout'
+  | 'deprecatedComponentTemplateBadge'
   | 'manageComponentTemplateButton'
   | 'manageComponentTemplateContextMenu'
   | 'manageComponentTemplateContextMenu.action';
diff --git a/...omponent_templates/__jest__/client_integration/helpers/component_template_form.helpers.ts b/...omponent_templates/__jest__/client_integration/helpers/component_template_form.helpers.ts
@@ -183,6 +183,7 @@ export type ComponentTemplateFormTestSubjects =
   | 'stepReview.summaryTab'
   | 'stepReview.requestTab'
   | 'valueDataRetentionField'
+  | 'deprecatedTemplateCallout'
   | 'dataRetentionToggle.input'
   | 'versionField'
   | 'aliasesEditor'

diff --git a/...omponent_templates/__jest__/client_integration/helpers/component_template_list.helpers.ts b/...omponent_templates/__jest__/client_integration/helpers/component_template_list.helpers.ts
@@ -104,4 +104,7 @@ export type ComponentTemplateTestSubjects =
   | 'sectionLoading'
   | 'componentTemplatesLoadError'
   | 'deleteComponentTemplateButton'
-  | 'reloadButton';
+  | 'deprecatedComponentTemplateBadge'
+  | 'reloadButton'
+  | 'componentTemplatesFiltersButton'
+  | 'componentTemplates--deprecatedFilter';
diff --git a/.../components/component_templates/component_template_details/component_template_details.tsx b/.../components/component_templates/component_template_details/component_template_details.tsx
@@ -29,6 +29,7 @@ import {
   attemptToURIDecode,
 } from '../shared_imports';
 import { useComponentTemplatesContext } from '../component_templates_context';
+import { DeprecatedBadge } from '../components';
 import { TabSummary } from './tab_summary';
 import { ComponentTemplateTabs, TabType } from './tabs';
 import { ManageButton, ManageAction } from './manage_button';
@@ -120,6 +121,9 @@ export const ComponentTemplateDetailsFlyoutContent: React.FunctionComponent<Prop
     );
   }
 
+  const isManaged = componentTemplateDetails?._kbnMeta.isManaged;
+  const isDeprecated = componentTemplateDetails?.isDeprecated;
+
   return (
     <>
       <EuiFlyoutHeader>
@@ -132,7 +136,14 @@ export const ComponentTemplateDetailsFlyoutContent: React.FunctionComponent<Prop
             </EuiTitle>
           </EuiFlexItem>
 
-          {componentTemplateDetails?._kbnMeta.isManaged ? (
+          {isDeprecated && (
+            <EuiFlexItem grow={false}>
+              {' '}
+              <DeprecatedBadge />
+            </EuiFlexItem>
+          )}
+
+          {isManaged && (
             <EuiFlexItem grow={false}>
               {' '}
               <EuiBadge color="hollow">
@@ -142,7 +153,7 @@ export const ComponentTemplateDetailsFlyoutContent: React.FunctionComponent<Prop
                 />
               </EuiBadge>
             </EuiFlexItem>
-          ) : null}
+          )}
         </EuiFlexGroup>
       </EuiFlyoutHeader>