[CCR] Add pause, resume, and unfollow actions for follower indices

x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_pause_provider.js

@@ -0,0 +1,118 @@
+/*
+ * 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 React, { PureComponent, Fragment } from 'react';
+import { connect } from 'react-redux';
+import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
+import {
+  EuiConfirmModal,
+  EuiOverlayMask,
+} from '@elastic/eui';
+
+import { pauseFollowerIndex } from '../store/actions';
+import { arrify } from '../../../common/services/utils';
+
+class Provider extends PureComponent {
+  state = {
+    isModalOpen: false,
+    ids: null
+  }
+
+  onMouseOverModal = (event) => {
+    // This component can sometimes be used inside of an EuiToolTip, in which case mousing over
+    // the modal can trigger the tooltip. Stopping propagation prevents this.
+    event.stopPropagation();
+  };
+
+  pauseFollowerIndex = (id) => {
+    this.setState({ isModalOpen: true, ids: arrify(id) });
+  };
+
+  onConfirm = () => {
+    this.props.pauseFollowerIndex(this.state.ids);
+    this.setState({ isModalOpen: false, ids: null });
+  }
+
+  closeConfirmModal = () => {
+    this.setState({
+      isModalOpen: false,
+    });
+  };
+
+  renderModal = () => {
+    const { intl } = this.props;
+    const { ids } = this.state;
+    const isSingle = ids.length === 1;
+    const title = isSingle
+      ? intl.formatMessage({
+        id: 'xpack.crossClusterReplication.pauseFollowerIndex.confirmModal.pauseSingleTitle',
+        defaultMessage: 'Pause follower index \'{name}\'?',
+      }, { name: ids[0] })
+      : intl.formatMessage({
+        id: 'xpack.crossClusterReplication.pauseFollowerIndex.confirmModal.pauseMultipleTitle',
+        defaultMessage: 'Pause {count} follower indices?',
+      }, { count: ids.length });
+
+    return (
+      <EuiOverlayMask>
+        { /* eslint-disable-next-line jsx-a11y/mouse-events-have-key-events */ }
+        <EuiConfirmModal
+          title={title}
+          onCancel={this.closeConfirmModal}
+          onConfirm={this.onConfirm}
+          cancelButtonText={
+            intl.formatMessage({
+              id: 'xpack.crossClusterReplication.pauseFollowerIndex.confirmModal.cancelButtonText',
+              defaultMessage: 'Cancel',
+            })
+          }
+          buttonColor="primary"
+          confirmButtonText={
+            intl.formatMessage({
+              id: 'xpack.crossClusterReplication.pauseFollowerIndex.confirmModal.confirmButtonText',
+              defaultMessage: 'Pause',
+            })
+          }
+          onMouseOver={this.onMouseOverModal}
+        >
+          {!isSingle && (
+            <Fragment>
+              <p>
+                <FormattedMessage
+                  id="xpack.crossClusterReplication.pauseFollowerIndex.confirmModal.multiplePauseDescription"
+                  defaultMessage="These follower indices will be paused:"
+                />
+              </p>
+              <ul>{ids.map(id => <li key={id}>{id}</li>)}</ul>
+            </Fragment>
+          )}
+        </EuiConfirmModal>
+      </EuiOverlayMask>
+    );
+  }
+
+  render() {
+    const { children } = this.props;
+    const { isModalOpen } = this.state;
+
+    return (
+      <Fragment>
+        {children(this.pauseFollowerIndex)}
+        {isModalOpen && this.renderModal()}
+      </Fragment>
+    );
+  }
+}
+
+const mapDispatchToProps = (dispatch) => ({
+  pauseFollowerIndex: (id) => dispatch(pauseFollowerIndex(id)),
+});
+
+export const FollowerIndexPauseProvider = connect(
+  undefined,
+  mapDispatchToProps
+)(injectI18n(Provider));
+

x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_delete_provider.js → x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_resume_provider.js

@@ -4,7 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-
 import React, { PureComponent, Fragment } from 'react';
 import { connect } from 'react-redux';
 import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
@@ -13,7 +12,7 @@ import {
   EuiOverlayMask,
 } from '@elastic/eui';
 
-// import { deleteFollowerIndex } from '../store/actions';
+import { resumeFollowerIndex } from '../store/actions';
 import { arrify } from '../../../common/services/utils';
 
 class Provider extends PureComponent {
@@ -28,12 +27,12 @@ class Provider extends PureComponent {
     event.stopPropagation();
   };
 
-  deleteFollowerIndex = (id) => {
+  resumeFollowerIndex = (id) => {
     this.setState({ isModalOpen: true, ids: arrify(id) });
   };
 
   onConfirm = () => {
-    // this.props.deleteFollowerIndex(this.state.ids);
+    this.props.resumeFollowerIndex(this.state.ids);
     this.setState({ isModalOpen: false, ids: null });
   }
 
@@ -49,12 +48,12 @@ class Provider extends PureComponent {
     const isSingle = ids.length === 1;
     const title = isSingle
       ? intl.formatMessage({
-        id: 'xpack.crossClusterReplication.deleteFollowerIndex.confirmModal.deleteSingleTitle',
-        defaultMessage: 'Remove follower index \'{name}\'?',
+        id: 'xpack.crossClusterReplication.resumeFollowerIndex.confirmModal.resumeSingleTitle',
+        defaultMessage: 'Resume follower index \'{name}\'?',
       }, { name: ids[0] })
       : intl.formatMessage({
-        id: 'xpack.crossClusterReplication.deleteFollowerIndex.confirmModal.deleteMultipleTitle',
-        defaultMessage: 'Remove {count} follower indices?',
+        id: 'xpack.crossClusterReplication.resumeFollowerIndex.confirmModal.resumeMultipleTitle',
+        defaultMessage: 'Resume {count} follower indices?',
       }, { count: ids.length });
 
     return (
@@ -66,15 +65,15 @@ class Provider extends PureComponent {
           onConfirm={this.onConfirm}
           cancelButtonText={
             intl.formatMessage({
-              id: 'xpack.crossClusterReplication.deleteFollowerIndex.confirmModal.cancelButtonText',
+              id: 'xpack.crossClusterReplication.resumeFollowerIndex.confirmModal.cancelButtonText',
               defaultMessage: 'Cancel',
             })
           }
-          buttonColor="danger"
+          buttonColor="primary"
           confirmButtonText={
             intl.formatMessage({
-              id: 'xpack.crossClusterReplication.deleteFollowerIndex.confirmModal.confirmButtonText',
-              defaultMessage: 'Remove',
+              id: 'xpack.crossClusterReplication.resumeFollowerIndex.confirmModal.confirmButtonText',
+              defaultMessage: 'Resume',
             })
           }
           onMouseOver={this.onMouseOverModal}
@@ -83,8 +82,8 @@ class Provider extends PureComponent {
             <Fragment>
               <p>
                 <FormattedMessage
-                  id="xpack.crossClusterReplication.deleteFollowerIndex.confirmModal.multipleDeletionDescription"
-                  defaultMessage="You are about to remove these follower indices:"
+                  id="xpack.crossClusterReplication.resumeFollowerIndex.confirmModal.multipleResumeDescription"
+                  defaultMessage="These follower indices will be resumed:"
                 />
               </p>
               <ul>{ids.map(id => <li key={id}>{id}</li>)}</ul>
@@ -101,18 +100,18 @@ class Provider extends PureComponent {
 
     return (
       <Fragment>
-        {children(this.deleteFollowerIndex)}
+        {children(this.resumeFollowerIndex)}
         {isModalOpen && this.renderModal()}
       </Fragment>
     );
   }
 }
 
-const mapDispatchToProps = (/*dispatch*/) => ({
-  // deleteFollowerIndex: (id) => dispatch(deleteFollowerIndex(id)),
+const mapDispatchToProps = (dispatch) => ({
+  resumeFollowerIndex: (id) => dispatch(resumeFollowerIndex(id)),
 });
 
-export const FollowerIndexDeleteProvider = connect(
+export const FollowerIndexResumeProvider = connect(
   undefined,
   mapDispatchToProps
 )(injectI18n(Provider));

x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_unfollow_provider.js

@@ -0,0 +1,127 @@
+/*
+ * 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 React, { PureComponent, Fragment } from 'react';
+import { connect } from 'react-redux';
+import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
+import {
+  EuiConfirmModal,
+  EuiOverlayMask,
+} from '@elastic/eui';
+
+import { unfollowLeaderIndex } from '../store/actions';
+import { arrify } from '../../../common/services/utils';
+
+class Provider extends PureComponent {
+  state = {
+    isModalOpen: false,
+    ids: null
+  }
+
+  onMouseOverModal = (event) => {
+    // This component can sometimes be used inside of an EuiToolTip, in which case mousing over
+    // the modal can trigger the tooltip. Stopping propagation prevents this.
+    event.stopPropagation();
+  };
+
+  unfollowLeaderIndex = (id) => {
+    this.setState({ isModalOpen: true, ids: arrify(id) });
+  };
+
+  onConfirm = () => {
+    this.props.unfollowLeaderIndex(this.state.ids);
+    this.setState({ isModalOpen: false, ids: null });
+  }
+
+  closeConfirmModal = () => {
+    this.setState({
+      isModalOpen: false,
+    });
+  };
+
+  renderModal = () => {
+    const { intl } = this.props;
+    const { ids } = this.state;
+    const isSingle = ids.length === 1;
+    const title = isSingle
+      ? intl.formatMessage({
+        id: 'xpack.crossClusterReplication.unfollowLeaderIndex.confirmModal.unfollowSingleTitle',
+        defaultMessage: 'Unfollow leader index of follower index \'{name}\'?',
+      }, { name: ids[0] })
+      : intl.formatMessage({
+        id: 'xpack.crossClusterReplication.unfollowLeaderIndex.confirmModal.unfollowMultipleTitle',
+        defaultMessage: 'Unfollow leader indices of {count} follower indices?',
+      }, { count: ids.length });
+
+    return (
+      <EuiOverlayMask>
+        { /* eslint-disable-next-line jsx-a11y/mouse-events-have-key-events */ }
+        <EuiConfirmModal
+          title={title}
+          onCancel={this.closeConfirmModal}
+          onConfirm={this.onConfirm}
+          cancelButtonText={
+            intl.formatMessage({
+              id: 'xpack.crossClusterReplication.unfollowLeaderIndex.confirmModal.cancelButtonText',
+              defaultMessage: 'Cancel',
+            })
+          }
+          buttonColor="danger"
+          confirmButtonText={
+            intl.formatMessage({
+              id: 'xpack.crossClusterReplication.unfollowLeaderIndex.confirmModal.confirmButtonText',
+              defaultMessage: 'Unfollow',
+            })
+          }
+          onMouseOver={this.onMouseOverModal}
+        >
+          {isSingle ? (
+            <Fragment>
+              <p>
+                <FormattedMessage
+                  id="xpack.crossClusterReplication.unfollowLeaderIndex.confirmModal.singleUnfollowDescription"
+                  defaultMessage="This follower index will be paused, closed, and converted into a regular index."
+                />
+              </p>
+            </Fragment>
+          ) : (
+            <Fragment>
+              <p>
+                <FormattedMessage
+                  id="xpack.crossClusterReplication.unfollowLeaderIndex.confirmModal.multipleUnfollowDescription"
+                  defaultMessage="These follower indices will be paused, closed, and converted into regular indices:"
+                />
+              </p>
+              <ul>{ids.map(id => <li key={id}>{id}</li>)}</ul>
+            </Fragment>
+          )}
+        </EuiConfirmModal>
+      </EuiOverlayMask>
+    );
+  }
+
+  render() {
+    const { children } = this.props;
+    const { isModalOpen } = this.state;
+
+    return (
+      <Fragment>
+        {children(this.unfollowLeaderIndex)}
+        {isModalOpen && this.renderModal()}
+      </Fragment>
+    );
+  }
+}
+
+const mapDispatchToProps = (dispatch) => ({
+  unfollowLeaderIndex: (id) => dispatch(unfollowLeaderIndex(id)),
+});
+
+export const FollowerIndexUnfollowProvider = connect(
+  undefined,
+  mapDispatchToProps
+)(injectI18n(Provider));
+

x-pack/plugins/cross_cluster_replication/public/app/components/index.js

@@ -12,6 +12,8 @@ export { AutoFollowPatternForm } from './auto_follow_pattern_form';
 export { AutoFollowPatternDeleteProvider } from './auto_follow_pattern_delete_provider';
 export { AutoFollowPatternPageTitle } from './auto_follow_pattern_page_title';
 export { AutoFollowPatternIndicesPreview } from './auto_follow_pattern_indices_preview';
-export { FollowerIndexDeleteProvider } from './follower_index_delete_provider';
+export { FollowerIndexPauseProvider } from './follower_index_pause_provider';
+export { FollowerIndexResumeProvider } from './follower_index_resume_provider';
+export { FollowerIndexUnfollowProvider } from './follower_index_unfollow_provider';
 export { FollowerIndexForm } from './follower_index_form';
 export { FollowerIndexPageTitle } from './follower_index_page_title';