[CCR] Follower indices table and detail panel

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

@@ -49,7 +49,7 @@ export class App extends Component {
     return (
       <div>
         <Switch>
-          <Redirect exact from={`${BASE_PATH}`} to={`${BASE_PATH}/auto_follow_patterns`} />
+          <Redirect exact from={`${BASE_PATH}`} to={`${BASE_PATH}/follower_indices`} />
           <Route exact path={`${BASE_PATH}/auto_follow_patterns/add`} component={AutoFollowPatternAdd} />
           <Route exact path={`${BASE_PATH}/auto_follow_patterns/edit/:id`} component={AutoFollowPatternEdit} />
           <Route exact path={`${BASE_PATH}/:section`} component={CrossClusterReplicationHome} />

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

@@ -0,0 +1,119 @@
+/*
+ * 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 { deleteFollowerIndex } 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();
+  };
+
+  deleteFollowerIndex = (id) => {
+    this.setState({ isModalOpen: true, ids: arrify(id) });
+  };
+
+  onConfirm = () => {
+    // this.props.deleteFollowerIndex(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.deleteFollowerIndex.confirmModal.deleteSingleTitle',
+        defaultMessage: 'Remove follower index \'{name}\'?',
+      }, { name: ids[0] })
+      : intl.formatMessage({
+        id: 'xpack.crossClusterReplication.deleteFollowerIndex.confirmModal.deleteMultipleTitle',
+        defaultMessage: 'Remove {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.deleteFollowerIndex.confirmModal.cancelButtonText',
+              defaultMessage: 'Cancel',
+            })
+          }
+          buttonColor="danger"
+          confirmButtonText={
+            intl.formatMessage({
+              id: 'xpack.crossClusterReplication.deleteFollowerIndex.confirmModal.confirmButtonText',
+              defaultMessage: 'Remove',
+            })
+          }
+          onMouseOver={this.onMouseOverModal}
+        >
+          {!isSingle && (
+            <Fragment>
+              <p>
+                <FormattedMessage
+                  id="xpack.crossClusterReplication.deleteFollowerIndex.confirmModal.multipleDeletionDescription"
+                  defaultMessage="You are about to remove these follower 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.deleteFollowerIndex)}
+        {isModalOpen && this.renderModal()}
+      </Fragment>
+    );
+  }
+}
+
+const mapDispatchToProps = (/*dispatch*/) => ({
+  // deleteFollowerIndex: (id) => dispatch(deleteFollowerIndex(id)),
+});
+
+export const FollowerIndexDeleteProvider = connect(
+  undefined,
+  mapDispatchToProps
+)(injectI18n(Provider));
+

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

@@ -12,3 +12,5 @@ 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';

x-pack/plugins/cross_cluster_replication/public/app/constants/sections.js

@@ -6,6 +6,6 @@
 
 export const SECTIONS = {
   AUTO_FOLLOW_PATTERN: 'autoFollowPattern',
-  INDEX_FOLLOWER: 'indexFollower',
+  FOLLOWER_INDEX: 'followerIndex',
   REMOTE_CLUSTER: 'remoteCluster'
 };

x-pack/plugins/cross_cluster_replication/public/app/sections/home/auto_follow_pattern_list/components/auto_follow_pattern_table/auto_follow_pattern_table.js

@@ -116,7 +116,7 @@ export const AutoFollowPatternTable = injectI18n(
           {
             render: ({ name }) => {
               const label = i18n.translate(
-                'xpack.crossClusterReplication.autofollowPatternList.table.actionDeleteDescription',
+                'xpack.crossClusterReplication.autoFollowPatternList.table.actionDeleteDescription',
                 {
                   defaultMessage: 'Delete auto-follow pattern',
                 }

x-pack/plugins/cross_cluster_replication/public/app/sections/home/follower_indices_list/components/detail_panel/detail_panel.container.js

@@ -0,0 +1,23 @@
+/*
+ * 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 { connect } from 'react-redux';
+import { DetailPanel as DetailPanelView } from './detail_panel';
+
+import { getSelectedFollowerIndex, getSelectedFollowerIndexId, getApiStatus, } from '../../../../../store/selectors';
+import { SECTIONS } from '../../../../../constants';
+
+const scope = SECTIONS.FOLLOWER_INDEX;
+
+const mapStateToProps = (state) => ({
+  followerIndexId: getSelectedFollowerIndexId('detail')(state),
+  followerIndex: getSelectedFollowerIndex('detail')(state),
+  apiStatus: getApiStatus(scope)(state),
+});
+
+export const DetailPanel = connect(
+  mapStateToProps,
+)(DetailPanelView);