Support rollover

Author: nchaulet

x-pack/plugins/index_management/public/application/components/component_templates/component_template_wizard/component_template_create/component_template_create.tsx

@@ -16,6 +16,8 @@ import { ComponentTemplateDeserialized } from '../../shared_imports';
 import { useComponentTemplatesContext } from '../../component_templates_context';
 import { ComponentTemplateForm } from '../component_template_form';
 import { useStepFromQueryString } from '../use_step_from_query_string';
+import { useDatastreamsRollover } from '../component_template_datastreams_rollover/use_datastreams_rollover';
+import { MANAGED_BY_FLEET } from '../../constants';
 
 interface Props {
   /**
@@ -58,6 +60,7 @@ export const ComponentTemplateCreate: React.FunctionComponent<RouteComponentProp
   }, [locationSearchParams, sourceComponentTemplate]);
 
   const { api } = useComponentTemplatesContext();
+  const { showDatastreamRolloverModal } = useDatastreamsRollover();
 
   const onSave = async (componentTemplate: ComponentTemplateDeserialized) => {
     const { name } = componentTemplate;
@@ -73,6 +76,9 @@ export const ComponentTemplateCreate: React.FunctionComponent<RouteComponentProp
       setSaveError(error);
       return;
     }
+    if (componentTemplate._meta?.managed_by === MANAGED_BY_FLEET) {
+      await showDatastreamRolloverModal(componentTemplate.name);
+    }
 
     redirectTo(encodeURI(`/component_templates/${encodeURIComponent(name)}`));
   };

x-pack/plugins/index_management/public/application/components/component_templates/component_template_wizard/component_template_edit/mappings_datastreams_rollover_modal.tsx renamed to x-pack/plugins/index_management/public/application/components/component_templates/component_template_wizard/component_template_datastreams_rollover/mappings_datastreams_rollover_modal.tsx

@@ -0,0 +1,63 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useCallback } from 'react';
+import { toMountPoint } from '@kbn/kibana-react-plugin/public';
+
+import { useComponentTemplatesContext } from '../../component_templates_context';
+import { MappingsDatastreamRolloverModal } from './mappings_datastreams_rollover_modal';
+
+export const test = {};
+
+export function useDatastreamsRollover() {
+  const { api, overlays } = useComponentTemplatesContext();
+
+  const showDatastreamRolloverModal = useCallback(
+    async (componentTemplateName: string) => {
+      const { data: dataStreamResponse } = await api.getComponentTemplateDatastreams(
+        componentTemplateName
+      );
+      const dataStreams = dataStreamResponse?.data_streams ?? [];
+
+      const dataStreamsToRollover: string[] = [];
+      for (const dataStream of dataStreams) {
+        try {
+          const { error: applyMappingError } = await api.postDataStreamMappingsFromTemplate(
+            dataStream
+          );
+          if (applyMappingError) {
+            throw applyMappingError;
+          }
+        } catch (err) {
+          dataStreamsToRollover.push(dataStream);
+        }
+      }
+
+      if (dataStreamsToRollover.length) {
+        const ref = overlays.openModal(
+          toMountPoint(
+            <MappingsDatastreamRolloverModal
+              componentTemplatename={componentTemplateName}
+              dataStreams={dataStreamsToRollover}
+              api={api}
+              onClose={() => {
+                ref.close();
+              }}
+            />
+          )
+        );
+
+        await ref.onClose;
+      }
+    },
+    [api, overlays]
+  );
+
+  return {
+    showDatastreamRolloverModal,
+  };
+}

x-pack/plugins/index_management/public/application/components/component_templates/component_template_wizard/component_template_datastreams_rollover/use_datastreams_rollover.tsx

@@ -8,7 +8,6 @@
 import React, { useState, useEffect, useMemo } from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { toMountPoint } from '@kbn/kibana-react-plugin/public';
 import { EuiPageSection, EuiPageHeader, EuiSpacer } from '@elastic/eui';
 
 import { breadcrumbService, IndexManagementBreadcrumb } from '../../../../services/breadcrumbs';
@@ -24,8 +23,8 @@ import { ComponentTemplateForm } from '../component_template_form';
 import { useRedirectPath } from '../../../../hooks/redirect_path';
 import { MANAGED_BY_FLEET } from '../../constants';
 
-import { MappingsDatastreamRolloverModal } from './mappings_datastreams_rollover_modal';
 import { useStepFromQueryString } from '../use_step_from_query_string';
+import { useDatastreamsRollover } from '../component_template_datastreams_rollover/use_datastreams_rollover';
 
 interface MatchParams {
   name: string;
@@ -37,7 +36,7 @@ export const ComponentTemplateEdit: React.FunctionComponent<RouteComponentProps<
   },
   history,
 }) => {
-  const { api, overlays } = useComponentTemplatesContext();
+  const { api } = useComponentTemplatesContext();
   const { activeStep: defaultActiveStep, updateStep } = useStepFromQueryString(history);
   const redirectTo = useRedirectPath(history);
 
@@ -50,6 +49,8 @@ export const ComponentTemplateEdit: React.FunctionComponent<RouteComponentProps<
   const { data: dataStreamResponse } = api.useLoadComponentTemplatesDatastream(decodedName);
   const dataStreams = useMemo(() => dataStreamResponse?.data_streams ?? [], [dataStreamResponse]);
 
+  const { showDatastreamRolloverModal } = useDatastreamsRollover();
+
   useEffect(() => {
     breadcrumbService.setBreadcrumbs(IndexManagementBreadcrumb.componentTemplateEdit);
   }, []);
@@ -67,37 +68,8 @@ export const ComponentTemplateEdit: React.FunctionComponent<RouteComponentProps<
       return;
     }
 
-    if (updatedComponentTemplate._meta?.managed_by === MANAGED_BY_FLEET && dataStreams.length) {
-      const dataStreamsToRollover: string[] = [];
-      for (const dataStream of dataStreams) {
-        try {
-          const { error: applyMappingError } = await api.postDataStreamMappingsFromTemplate(
-            dataStream
-          );
-          if (applyMappingError) {
-            throw applyMappingError;
-          }
-        } catch (err) {
-          dataStreamsToRollover.push(dataStream);
-        }
-      }
-
-      if (dataStreamsToRollover.length) {
-        const ref = overlays.openModal(
-          toMountPoint(
-            <MappingsDatastreamRolloverModal
-              componentTemplatename={updatedComponentTemplate.name}
-              dataStreams={dataStreamsToRollover}
-              api={api}
-              onClose={() => {
-                ref.close();
-              }}
-            />
-          )
-        );
-
-        await ref.onClose;
-      }
+    if (updatedComponentTemplate._meta?.managed_by === MANAGED_BY_FLEET) {
+      await showDatastreamRolloverModal(updatedComponentTemplate.name);
     }
     redirectTo({
       pathname: encodeURI(

x-pack/plugins/index_management/public/application/components/component_templates/component_template_wizard/component_template_edit/component_template_edit.tsx

@@ -97,7 +97,7 @@ export const getApi = (
 
   async function postDataStreamRollover(name: string) {
     return sendRequest<ComponentTemplateDatastreams>({
-      path: `${apiBasePath}/data_streams/${encodeURIComponent(name)}/rollover`,
+      path: `${apiBasePath}/data_streams/${encodeURIComponent(name)}/rollover?lazy`,
       method: 'post',
     });
   }