From d579e6744089a2ddbff9513a49e7bbe9ec89194a Mon Sep 17 00:00:00 2001
From: Hailong-amzn <ihailong@amazon.com>
Date: Tue, 3 Jan 2023 16:49:59 +0800
Subject: [PATCH] Merge/index operation reindex (#526)

* Feature/common 2.5 (#506)

* feat: split to common change

Signed-off-by: suzhou <suzhou@amazon.com>

* feat: update

Signed-off-by: suzhou <suzhou@amazon.com>

Signed-off-by: suzhou <suzhou@amazon.com>

* enable fullwidth for JSON editor (#479)

* enable fullwidth for JSON editor

Signed-off-by: Hailong Cui <ihailong@amazon.com>

* update width of import settings & mappings

Signed-off-by: Hailong Cui <ihailong@amazon.com>

* wording change

Signed-off-by: Hailong Cui <ihailong@amazon.com>

Signed-off-by: Hailong Cui <ihailong@amazon.com>

* advanced settings

Signed-off-by: Hailong Cui <ihailong@amazon.com>

* fix integration test

Signed-off-by: Hailong Cui <ihailong@amazon.com>

* wording change

Signed-off-by: Hailong Cui <ihailong@amazon.com>

* filter system index and alias from destination

Signed-off-by: Hailong Cui <ihailong@amazon.com>

* fix code merge issue

Signed-off-by: Hailong Cui <ihailong@amazon.com>

Signed-off-by: suzhou <suzhou@amazon.com>
Signed-off-by: Hailong Cui <ihailong@amazon.com>
Co-authored-by: suzhou <suzhou@amazon.com>
---
 cypress/integration/reindex_spec.js           | 225 +++++
 public/pages/Main/Main.tsx                    |   9 +
 .../CreateIndexFlyout.test.tsx                |  33 +
 .../CreateIndexFlyout/CreateIndexFlyout.tsx   |  48 +
 .../CreateIndexFlyout.test.tsx.snap           | 918 ++++++++++++++++++
 .../components/CreateIndexFlyout/index.ts     |   8 +
 .../IndexSelect/IndexSelect.test.tsx          |  64 ++
 .../components/IndexSelect/IndexSelect.tsx    |  73 ++
 .../__snapshots__/IndexSelect.test.tsx.snap   | 190 ++++
 .../Reindex/components/IndexSelect/index.ts   |   8 +
 .../ReindexAdvancedOptions.test.tsx           |  93 ++
 .../ReindexAdvancedOptions.tsx                | 167 ++++
 .../ReindexAdvancedOptions.test.tsx.snap      | 648 +++++++++++++
 .../ReindexAdvancedOptions/index.ts           |   8 +
 .../container/Reindex/Reindex.test.tsx        | 627 ++++++++++++
 .../Reindex/container/Reindex/Reindex.tsx     | 645 ++++++++++++
 .../__snapshots__/Reindex.test.tsx.snap       | 449 +++++++++
 .../pages/Reindex/container/Reindex/index.ts  |   7 +
 public/pages/Reindex/index.ts                 |   8 +
 public/pages/Reindex/models/interfaces.ts     |  39 +
 public/pages/Reindex/utils/constants.ts       |  17 +
 public/pages/Reindex/utils/helper.test.ts     | 102 ++
 public/pages/Reindex/utils/helper.ts          |  69 ++
 .../components/FlyoutFooter/FlyoutFooter.tsx  |   5 +-
 test/mocks/coreServicesMock.ts                |   1 +
 25 files changed, 4459 insertions(+), 2 deletions(-)
 create mode 100644 cypress/integration/reindex_spec.js
 create mode 100644 public/pages/Reindex/components/CreateIndexFlyout/CreateIndexFlyout.test.tsx
 create mode 100644 public/pages/Reindex/components/CreateIndexFlyout/CreateIndexFlyout.tsx
 create mode 100644 public/pages/Reindex/components/CreateIndexFlyout/__snapshots__/CreateIndexFlyout.test.tsx.snap
 create mode 100644 public/pages/Reindex/components/CreateIndexFlyout/index.ts
 create mode 100644 public/pages/Reindex/components/IndexSelect/IndexSelect.test.tsx
 create mode 100644 public/pages/Reindex/components/IndexSelect/IndexSelect.tsx
 create mode 100644 public/pages/Reindex/components/IndexSelect/__snapshots__/IndexSelect.test.tsx.snap
 create mode 100644 public/pages/Reindex/components/IndexSelect/index.ts
 create mode 100644 public/pages/Reindex/components/ReindexAdvancedOptions/ReindexAdvancedOptions.test.tsx
 create mode 100644 public/pages/Reindex/components/ReindexAdvancedOptions/ReindexAdvancedOptions.tsx
 create mode 100644 public/pages/Reindex/components/ReindexAdvancedOptions/__snapshots__/ReindexAdvancedOptions.test.tsx.snap
 create mode 100644 public/pages/Reindex/components/ReindexAdvancedOptions/index.ts
 create mode 100644 public/pages/Reindex/container/Reindex/Reindex.test.tsx
 create mode 100644 public/pages/Reindex/container/Reindex/Reindex.tsx
 create mode 100644 public/pages/Reindex/container/Reindex/__snapshots__/Reindex.test.tsx.snap
 create mode 100644 public/pages/Reindex/container/Reindex/index.ts
 create mode 100644 public/pages/Reindex/index.ts
 create mode 100644 public/pages/Reindex/models/interfaces.ts
 create mode 100644 public/pages/Reindex/utils/constants.ts
 create mode 100644 public/pages/Reindex/utils/helper.test.ts
 create mode 100644 public/pages/Reindex/utils/helper.ts

diff --git a/cypress/integration/reindex_spec.js b/cypress/integration/reindex_spec.js
new file mode 100644
index 000000000..4f31b0270
--- /dev/null
+++ b/cypress/integration/reindex_spec.js
@@ -0,0 +1,225 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { PLUGIN_NAME } from "../support/constants";
+const REINDEX_DEST = "test-ecomm-rdx";
+const REINDEX_DEST_NO_SOURCE = "test-reindex-nosource";
+const REINDEX_NEW_CREATED = "test-logs-new";
+
+describe("Reindex", () => {
+  beforeEach(() => {
+    // Set welcome screen tracking to false
+    localStorage.setItem("home:welcome:show", "false");
+
+    // Visit ISM OSD
+    cy.visit(`${Cypress.env("opensearch_dashboards")}/app/${PLUGIN_NAME}#/indices`);
+
+    // Common text to wait for to confirm page loaded, give up to 60 seconds for initial load
+    cy.contains("Rows per page", { timeout: 60000 });
+  });
+
+  describe("Reindex validation error", () => {
+    before(() => {
+      cy.deleteAllIndices();
+      // Load ecommerce data
+      cy.request({
+        method: "POST",
+        url: `${Cypress.env("opensearch_dashboards")}/api/sample_data/ecommerce`,
+        headers: {
+          "osd-xsrf": true,
+        },
+      }).then((response) => {
+        expect(response.status).equal(200);
+      });
+
+      cy.createIndex(REINDEX_DEST_NO_SOURCE, null, {
+        mappings: {
+          _source: {
+            enabled: false,
+          },
+          properties: {
+            name: {
+              type: "keyword",
+            },
+          },
+        },
+      });
+    });
+
+    it("source validation failed", () => {
+      // Confirm we have our initial index
+      cy.contains(REINDEX_DEST_NO_SOURCE);
+
+      cy.get(`[data-test-subj="checkboxSelectRow-${REINDEX_DEST_NO_SOURCE}"]`).check({ force: true });
+
+      // Click actions button
+      cy.get('[data-test-subj="moreAction"]').click();
+      // Reindex should show as activate
+      cy.get('[data-test-subj="Reindex Action"]').should("exist").should("not.have.class", "euiContextMenuItem-isDisabled").click();
+
+      cy.contains(/_sources is not enabled/);
+    });
+  });
+
+  describe("Reindex successfully", () => {
+    before(() => {
+      cy.deleteAllIndices();
+      // Load ecommerce data
+      cy.request({
+        method: "POST",
+        url: `${Cypress.env("opensearch_dashboards")}/api/sample_data/ecommerce`,
+        headers: {
+          "osd-xsrf": true,
+        },
+      }).then((response) => {
+        expect(response.status).equal(200);
+      });
+
+      cy.createIndex(REINDEX_DEST, null, { settings: { "index.number_of_replicas": 0 } });
+
+      cy.createPipeline("bumpOrderId", {
+        description: "sample description",
+        processors: [
+          {
+            set: {
+              field: "order_id",
+              value: "200{{order_id}}",
+            },
+          },
+        ],
+      });
+    });
+
+    it("successfully", () => {
+      // Confirm we have our initial index
+      cy.contains("opensearch_dashboards_sample_data_ecommerce");
+
+      // Click actions button
+      cy.get('[data-test-subj="moreAction"]').click();
+      // Reindex should show as activate
+      cy.get('[data-test-subj="Reindex Action"]').should("exist").should("not.have.class", "euiContextMenuItem-isDisabled").click();
+
+      cy.get(`div[data-test-subj="sourceSelector"]`)
+        .find(`input[data-test-subj="comboBoxSearchInput"]`)
+        .type(`opensearch_dashboards_sample_data_ecommerce{downArrow}{enter}`);
+
+      cy.get(`div[data-test-subj="destinationSelector"]`)
+        .find(`input[data-test-subj="comboBoxSearchInput"]`)
+        .type(`${REINDEX_DEST}{downArrow}{enter}`);
+
+      // open advance option
+      cy.get('[data-test-subj="advanceOptionToggle"]').click();
+
+      // enable subset query
+      cy.get('[data-test-subj="subsetOption"] #subset').click({ force: true });
+
+      // input query to reindex subset
+      cy.get('[data-test-subj="queryJsonEditor"] textarea')
+        .focus()
+        .clear()
+        .type('{"query":{"match":{"category":"Men\'s Clothing"}}}', { parseSpecialCharSequences: false });
+
+      // set slices to auto
+      cy.get('[data-test-subj="sliceEnabled"]').click({ force: true });
+
+      // input pipeline
+      cy.get(`div[data-test-subj="pipelineCombobox"]`).find(`input[data-test-subj="comboBoxSearchInput"]`).type("bumpOrderId{enter}");
+
+      // click to perform reindex
+      cy.get('[data-test-subj="reindexConfirmButton"]').click();
+      cy.wait(10);
+      cy.contains(/Successfully started reindexing/);
+
+      cy.wait(10000);
+      // Type in REINDEX_DEST in search input
+      cy.get(`input[type="search"]`).focus().type(REINDEX_DEST);
+
+      // Confirm we only see REINDEX_DEST in table
+      cy.get("tbody > tr").should(($tr) => {
+        expect($tr, "1 row").to.have.length(1);
+        expect($tr, "item").to.contain(REINDEX_DEST);
+      });
+    });
+  });
+
+  describe("Reindex successfully for newly created index", () => {
+    before(() => {
+      cy.deleteAllIndices();
+      // Load logs data
+      cy.request({
+        method: "POST",
+        url: `${Cypress.env("opensearch_dashboards")}/api/sample_data/logs`,
+        headers: {
+          "osd-xsrf": true,
+        },
+      }).then((response) => {
+        expect(response.status).equal(200);
+      });
+    });
+
+    it("successfully", () => {
+      // search
+      cy.get(`input[type="search"]`).focus().type("opensearch_dashboards_sample_data_logs");
+
+      cy.wait(1000);
+
+      // Confirm we have our initial index
+      cy.contains("opensearch_dashboards_sample_data_logs");
+
+      // select logs index
+      cy.get("#_selection_column_opensearch_dashboards_sample_data_logs-checkbox").click();
+
+      // Click actions button
+      cy.get('[data-test-subj="moreAction"]').click();
+      // Reindex should show as activate
+      cy.get('[data-test-subj="Reindex Action"]').click();
+
+      // open advance option
+      cy.get('[data-test-subj="advanceOptionToggle"]').click();
+
+      // enable subset query
+      cy.get('[data-test-subj="subsetOption"] #subset').click({ force: true });
+
+      // input query to reindex subset
+      cy.get('[data-test-subj="queryJsonEditor"] textarea')
+        .focus()
+        .clear()
+        .type('{"query":{"match":{"ip":"135.201.60.64"}}}', { parseSpecialCharSequences: false });
+
+      // create destination
+      cy.get('[data-test-subj="createIndexButton"]').click();
+      cy.contains("Create Index");
+
+      cy.get('[placeholder="Specify a name for the new index."]').type(REINDEX_NEW_CREATED).blur();
+      cy.wait(1000);
+
+      // import setting and mapping
+      cy.get('[data-test-subj="importSettingMappingBtn"]').click();
+      cy.get('[data-test-subj="import-settings-opensearch_dashboards_sample_data_logs"]').click();
+
+      cy.wait(10);
+      cy.contains(/have been import successfully/);
+
+      cy.get('[data-test-subj="flyout-footer-action-button"]').click({ force: true });
+
+      // click to perform reindex
+      cy.get('[data-test-subj="reindexConfirmButton"]').click();
+      cy.wait(10);
+      cy.contains(/Successfully started reindexing/);
+
+      cy.wait(10000);
+      // Type in REINDEX_DEST in search input
+      cy.get(`input[type="search"]`).focus().type(REINDEX_NEW_CREATED);
+
+      // Confirm we only see REINDEX_DEST in table
+      cy.get("tbody > tr").should(($tr) => {
+        expect($tr, "1 row").to.have.length(1);
+        expect($tr, "item").to.contain(REINDEX_NEW_CREATED);
+        // subset data number
+        expect($tr, "item").to.contain(13);
+      });
+    });
+  });
+});
diff --git a/public/pages/Main/Main.tsx b/public/pages/Main/Main.tsx
index 4bd38c983..4d7351f76 100644
--- a/public/pages/Main/Main.tsx
+++ b/public/pages/Main/Main.tsx
@@ -38,6 +38,7 @@ import Templates from "../Templates";
 import CreateIndexTemplate from "../CreateIndexTemplate";
 import CreateIndex from "../CreateIndex";
 import IndexDetail from "../IndexDetail";
+import Reindex from "../Reindex/container/Reindex";
 
 enum Navigation {
   IndexManagement = "Index Management",
@@ -471,6 +472,14 @@ export default class Main extends Component<MainProps, object> {
                               </div>
                             )}
                           />
+                          <Route
+                            path={ROUTES.REINDEX}
+                            render={(props: RouteComponentProps) => (
+                              <div style={ROUTE_STYLE}>
+                                <Reindex {...props} commonService={services.commonService} indexService={services.indexService} />
+                              </div>
+                            )}
+                          />
                           <Redirect from="/" to={landingPage} />
                         </Switch>
                       </EuiPageBody>
diff --git a/public/pages/Reindex/components/CreateIndexFlyout/CreateIndexFlyout.test.tsx b/public/pages/Reindex/components/CreateIndexFlyout/CreateIndexFlyout.test.tsx
new file mode 100644
index 000000000..585d09a87
--- /dev/null
+++ b/public/pages/Reindex/components/CreateIndexFlyout/CreateIndexFlyout.test.tsx
@@ -0,0 +1,33 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { render, waitFor } from "@testing-library/react";
+import React from "react";
+import CreateIndexFlyout from "./CreateIndexFlyout";
+import { coreServicesMock, browserServicesMock, apiCallerMock } from "../../../../../test/mocks";
+import { CoreServicesContext } from "../../../../components/core_services";
+import { ServicesContext } from "../../../../services";
+
+describe("<CreateIndexFlyout /> spec", () => {
+  beforeEach(() => {
+    apiCallerMock(browserServicesMock);
+  });
+  it("renders the component", async () => {
+    const component = render(
+      <CoreServicesContext.Provider value={coreServicesMock}>
+        <ServicesContext.Provider value={browserServicesMock}>
+          <CreateIndexFlyout sourceIndices={[]} onCloseFlyout={() => {}} />,
+        </ServicesContext.Provider>
+      </CoreServicesContext.Provider>
+    );
+    await waitFor(
+      () => expect((document.querySelector("#accordionForCreateIndexSettings") as HTMLDivElement).style.height).toEqual("0px"),
+      {
+        timeout: 3000,
+      }
+    );
+    expect(component).toMatchSnapshot();
+  });
+});
diff --git a/public/pages/Reindex/components/CreateIndexFlyout/CreateIndexFlyout.tsx b/public/pages/Reindex/components/CreateIndexFlyout/CreateIndexFlyout.tsx
new file mode 100644
index 000000000..9683e5ce8
--- /dev/null
+++ b/public/pages/Reindex/components/CreateIndexFlyout/CreateIndexFlyout.tsx
@@ -0,0 +1,48 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from "react";
+import CreateIndex, { IndexFormProps, IndexForm } from "../../../CreateIndex/containers/IndexForm";
+import { CoreServicesContext } from "../../../../components/core_services";
+import { EuiFlyout, EuiFlyoutBody, EuiFlyoutFooter, EuiFlyoutHeader, EuiTitle } from "@elastic/eui";
+import FlyoutFooter from "../../../VisualCreatePolicy/components/FlyoutFooter";
+
+interface CreateIndexFlyoutProps extends IndexFormProps {
+  sourceIndices: string[];
+  onCloseFlyout: () => void;
+}
+
+export default class CreateIndexFlyout extends React.Component<CreateIndexFlyoutProps> {
+  static contextType = CoreServicesContext;
+
+  createIndexRef: IndexForm | null = null;
+
+  render() {
+    const { onCloseFlyout } = this.props;
+    return (
+      <EuiFlyout onClose={() => {}} hideCloseButton>
+        <EuiFlyoutHeader hasBorder>
+          <EuiTitle size="m">
+            <h2 id="flyoutTitle"> Create Index </h2>
+          </EuiTitle>
+        </EuiFlyoutHeader>
+
+        <EuiFlyoutBody>
+          <CreateIndex ref={(ref) => (this.createIndexRef = ref)} hideButtons={true} {...this.props} />
+        </EuiFlyoutBody>
+
+        <EuiFlyoutFooter>
+          <FlyoutFooter
+            action=""
+            text="Create"
+            edit={false}
+            onClickCancel={onCloseFlyout}
+            onClickAction={() => this.createIndexRef?.onSubmit()}
+          />
+        </EuiFlyoutFooter>
+      </EuiFlyout>
+    );
+  }
+}
diff --git a/public/pages/Reindex/components/CreateIndexFlyout/__snapshots__/CreateIndexFlyout.test.tsx.snap b/public/pages/Reindex/components/CreateIndexFlyout/__snapshots__/CreateIndexFlyout.test.tsx.snap
new file mode 100644
index 000000000..5e533a1bf
--- /dev/null
+++ b/public/pages/Reindex/components/CreateIndexFlyout/__snapshots__/CreateIndexFlyout.test.tsx.snap
@@ -0,0 +1,918 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<CreateIndexFlyout /> spec renders the component 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body
+    class="euiBody-hasOverlayMask euiBody--hasFlyout"
+  >
+    <div
+      aria-hidden="true"
+      data-aria-hidden="true"
+    >
+      ,
+    </div>
+    <div
+      class="euiOverlayMask euiOverlayMask--belowHeader"
+    >
+      <div
+        aria-hidden="true"
+        data-aria-hidden="true"
+        data-focus-guard="true"
+        style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+        tabindex="0"
+      />
+      <div
+        data-focus-lock-disabled="false"
+      >
+        <div
+          class="euiFlyout euiFlyout--medium euiFlyout--paddingLarge"
+          role="dialog"
+          tabindex="-1"
+        >
+          <div
+            class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
+          >
+            <h2
+              class="euiTitle euiTitle--medium"
+              id="flyoutTitle"
+            >
+               Create Index 
+            </h2>
+          </div>
+          <div
+            class="euiFlyoutBody"
+          >
+            <div
+              class="euiFlyoutBody__overflow"
+              tabindex="0"
+            >
+              <div
+                class="euiFlyoutBody__overflowContent"
+              >
+                <div
+                  class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+                  style="padding-left: 0px; padding-right: 0px;"
+                >
+                  <div
+                    class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsFlexStart euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+                    style="padding: 0px 10px;"
+                  >
+                    <div
+                      class="euiFlexItem"
+                    >
+                      <h3
+                        class="euiTitle euiTitle--small"
+                      >
+                        Define index
+                      </h3>
+                    </div>
+                  </div>
+                  <hr
+                    class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
+                  />
+                  <div
+                    style="padding: 0px 10px;"
+                  >
+                    <div
+                      class="euiForm"
+                    >
+                      <div
+                        class="euiFormRow"
+                        data-test-subj="form-name-index"
+                        id="some_html_id-row"
+                      >
+                        <div
+                          class="euiFormRow__labelWrapper"
+                        >
+                          <label
+                            aria-invalid="false"
+                            class="euiFormLabel euiFormRow__label"
+                            for="some_html_id"
+                          >
+                            Index name
+                          </label>
+                        </div>
+                        <div
+                          class="euiFormRow__fieldWrapper"
+                        >
+                          <span
+                            class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
+                          >
+                            <div
+                              class="euiFormControlLayout"
+                            >
+                              <div
+                                class="euiFormControlLayout__childrenWrapper"
+                              >
+                                <input
+                                  class="euiFieldText"
+                                  placeholder="Specify a name for the new index."
+                                  type="text"
+                                  value=""
+                                />
+                              </div>
+                            </div>
+                          </span>
+                          <div
+                            class="euiFormHelpText euiFormRow__text"
+                            id="some_html_id-help-0"
+                          >
+                            <div>
+                              Must be in lowercase letters. Cannot begin with underscores or hyphens. Spaces, commas, and characters :, ", *, +, /, , |, ?, #, &gt; are not allowed.
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        class="euiFormRow euiFormRow--fullWidth"
+                        data-test-subj="form-name-templateMessage"
+                        id="some_html_id-row"
+                      >
+                        <div
+                          class="euiFormRow__fieldWrapper"
+                        />
+                      </div>
+                      <div
+                        class="euiFormRow"
+                        data-test-subj="form-name-aliases"
+                        id="some_html_id-row"
+                      >
+                        <div
+                          class="euiFormRow__labelWrapper"
+                        >
+                          <label
+                            aria-invalid="false"
+                            class="euiFormLabel euiFormRow__label"
+                            for="some_html_id"
+                          >
+                            Index alias - optional
+                          </label>
+                        </div>
+                        <div
+                          class="euiFormRow__fieldWrapper"
+                        >
+                          <div
+                            class="euiFormHelpText euiFormRow__text"
+                            style="padding-top: 0px; padding-bottom: 4px;"
+                          >
+                            Allow this index to be referenced by existing aliases or specify a new alias.
+                          </div>
+                          <span
+                            class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
+                          >
+                            <div
+                              aria-expanded="false"
+                              aria-haspopup="listbox"
+                              class="euiComboBox"
+                              role="combobox"
+                            >
+                              <div
+                                class="euiFormControlLayout"
+                              >
+                                <div
+                                  class="euiFormControlLayout__childrenWrapper"
+                                >
+                                  <div
+                                    class="euiComboBox__inputWrap euiComboBox__inputWrap-isClearable"
+                                    data-test-subj="comboBoxInput"
+                                    tabindex="-1"
+                                  >
+                                    <p
+                                      class="euiComboBoxPlaceholder"
+                                    >
+                                      Select aliases or input new aliases.
+                                    </p>
+                                    <div
+                                      class="euiComboBox__input"
+                                      style="font-size: 14px; display: inline-block;"
+                                    >
+                                      <input
+                                        aria-controls=""
+                                        data-test-subj="comboBoxSearchInput"
+                                        role="textbox"
+                                        style="box-sizing: content-box; width: 2px;"
+                                        value=""
+                                      />
+                                      <div
+                                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                                      />
+                                    </div>
+                                  </div>
+                                  <div
+                                    class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                  >
+                                    <button
+                                      aria-label="Open list of options"
+                                      class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                                      data-test-subj="comboBoxToggleListButton"
+                                      type="button"
+                                    >
+                                      EuiIconMock
+                                    </button>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="euiSpacer euiSpacer--l"
+                />
+                <div
+                  class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+                  style="padding-left: 0px; padding-right: 0px;"
+                >
+                  <div
+                    class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsFlexStart euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+                    style="padding: 0px 10px;"
+                  >
+                    <div
+                      class="euiFlexItem"
+                    >
+                      <h3
+                        class="euiTitle euiTitle--small"
+                      >
+                        Index settings
+                      </h3>
+                    </div>
+                  </div>
+                  <hr
+                    class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
+                  />
+                  <div
+                    style="padding: 0px 10px;"
+                  >
+                    <div
+                      class="euiForm"
+                    >
+                      <div
+                        class="euiFormRow"
+                        data-test-subj="form-name-index.number_of_shards"
+                        id="some_html_id-row"
+                      >
+                        <div
+                          class="euiFormRow__labelWrapper"
+                        >
+                          <label
+                            aria-invalid="false"
+                            class="euiFormLabel euiFormRow__label"
+                            for="some_html_id"
+                          >
+                            Number of primary shards
+                          </label>
+                        </div>
+                        <div
+                          class="euiFormRow__fieldWrapper"
+                        >
+                          <div
+                            class="euiFormHelpText euiFormRow__text"
+                            style="padding-top: 0px; padding-bottom: 4px;"
+                          >
+                            <p>
+                              Specify the number of primary shards for the index. Default is 1. 
+                            </p>
+                            <p>
+                              The number of primary shards cannot be changed after the index is created.
+                            </p>
+                          </div>
+                          <span
+                            class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
+                          >
+                            <div
+                              class="euiFormControlLayout"
+                            >
+                              <div
+                                class="euiFormControlLayout__childrenWrapper"
+                              >
+                                <input
+                                  class="euiFieldNumber"
+                                  placeholder="The number of primary shards in the index. Default is 1."
+                                  type="number"
+                                  value="1"
+                                />
+                              </div>
+                            </div>
+                          </span>
+                        </div>
+                      </div>
+                      <div
+                        class="euiFormRow"
+                        data-test-subj="form-name-index.number_of_replicas"
+                        id="some_html_id-row"
+                      >
+                        <div
+                          class="euiFormRow__labelWrapper"
+                        >
+                          <label
+                            aria-invalid="false"
+                            class="euiFormLabel euiFormRow__label"
+                            for="some_html_id"
+                          >
+                            Number of replicas
+                          </label>
+                        </div>
+                        <div
+                          class="euiFormRow__fieldWrapper"
+                        >
+                          <div
+                            class="euiFormHelpText euiFormRow__text"
+                            style="padding-top: 0px; padding-bottom: 4px;"
+                          >
+                            Specify the number of replicas each primary shard should have. Default is 1.
+                          </div>
+                          <span
+                            class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
+                          >
+                            <div
+                              class="euiFormControlLayout"
+                            >
+                              <div
+                                class="euiFormControlLayout__childrenWrapper"
+                              >
+                                <input
+                                  class="euiFieldNumber"
+                                  placeholder="The number of replica shards each primary shard should have."
+                                  type="number"
+                                  value="1"
+                                />
+                              </div>
+                            </div>
+                          </span>
+                        </div>
+                      </div>
+                      <div
+                        class="euiFormRow"
+                        data-test-subj="form-name-index.refresh_interval"
+                        id="some_html_id-row"
+                      >
+                        <div
+                          class="euiFormRow__labelWrapper"
+                        >
+                          <label
+                            aria-invalid="false"
+                            class="euiFormLabel euiFormRow__label"
+                            for="some_html_id"
+                          >
+                            Refresh interval
+                          </label>
+                        </div>
+                        <div
+                          class="euiFormRow__fieldWrapper"
+                        >
+                          <div
+                            class="euiFormHelpText euiFormRow__text"
+                            style="padding-top: 0px; padding-bottom: 4px;"
+                          >
+                            Specify how often the index should refresh, which publishes the most recent changes and make them available for search. Default is 1 second.
+                          </div>
+                          <span
+                            class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
+                          >
+                            <div
+                              class="euiFormControlLayout"
+                            >
+                              <div
+                                class="euiFormControlLayout__childrenWrapper"
+                              >
+                                <input
+                                  class="euiFieldText"
+                                  placeholder="Can be set to -1 to disable refreshing."
+                                  type="text"
+                                  value="1s"
+                                />
+                              </div>
+                            </div>
+                          </span>
+                        </div>
+                      </div>
+                      <div
+                        class="euiSpacer euiSpacer--m"
+                      />
+                      <div
+                        class="euiAccordion accordion-in-advanced-settings"
+                      >
+                        <div
+                          class="euiAccordion__triggerWrapper"
+                        >
+                          <button
+                            aria-controls="accordionForCreateIndexSettings"
+                            aria-expanded="false"
+                            class="euiAccordion__button"
+                            id="some_html_id"
+                            type="button"
+                          >
+                            <span
+                              class="euiAccordion__iconWrapper"
+                            >
+                              EuiIconMock
+                            </span>
+                            <span
+                              class="euiIEFlexWrapFix"
+                            >
+                              <h4>
+                                Advanced settings
+                              </h4>
+                            </span>
+                          </button>
+                        </div>
+                        <div
+                          aria-labelledby="some_html_id"
+                          class="euiAccordion__childWrapper"
+                          id="accordionForCreateIndexSettings"
+                          role="region"
+                          style="height: 0px"
+                          tabindex="-1"
+                        >
+                          <div>
+                            <div
+                              class=""
+                            >
+                              <div
+                                class="euiSpacer euiSpacer--s"
+                              />
+                              <div
+                                class="euiFormRow euiFormRow--fullWidth"
+                                data-test-subj="formNameAdvancedSettings"
+                                id="some_html_id-row"
+                              >
+                                <div
+                                  class="euiFormRow__labelWrapper"
+                                >
+                                  <label
+                                    class="euiFormLabel euiFormRow__label"
+                                    for="some_html_id"
+                                  >
+                                    Specify advanced index settings
+                                  </label>
+                                </div>
+                                <div
+                                  class="euiFormRow__fieldWrapper"
+                                >
+                                  <div
+                                    class="euiFormHelpText euiFormRow__text"
+                                    style="padding-top: 0px; padding-bottom: 4px;"
+                                  >
+                                    <p>
+                                      Specify a comma-delimited list of settings.
+                                      <a
+                                        class="euiLink euiLink--primary"
+                                        href="https://opensearch.org/docs/latest/api-reference/index-apis/create-index#index-settings"
+                                        rel="noopener noreferrer"
+                                        target="_blank"
+                                      >
+                                        View index settings.
+                                        EuiIconMock
+                                        <span
+                                          class="euiScreenReaderOnly"
+                                        >
+                                          (opens in a new tab or window)
+                                        </span>
+                                      </a>
+                                    </p>
+                                    <p>
+                                      All the settings will be handled in flat structure.
+                                      <a
+                                        class="euiLink euiLink--primary"
+                                        href="https://opensearch.org/docs/latest/api-reference/index-apis/get-index/#url-parameters"
+                                        rel="noopener noreferrer"
+                                        target="_blank"
+                                      >
+                                        Learn more.
+                                        EuiIconMock
+                                        <span
+                                          class="euiScreenReaderOnly"
+                                        >
+                                          (opens in a new tab or window)
+                                        </span>
+                                      </a>
+                                    </p>
+                                  </div>
+                                  <textarea
+                                    data-test-subj="jsonEditor-valueDisplay"
+                                    readonly=""
+                                    style="display: none;"
+                                  >
+                                    {
+  "index.number_of_shards": 1,
+  "index.number_of_replicas": 1,
+  "index.refresh_interval": "1s"
+}
+                                  </textarea>
+                                  <div
+                                    class="euiCodeEditorWrapper"
+                                    data-test-subj="codeEditorContainer"
+                                    style="width: 100%;"
+                                  >
+                                    <button
+                                      class="euiCodeEditorKeyboardHint"
+                                      data-test-subj="codeEditorHint"
+                                      id="some_html_id"
+                                    >
+                                      <p
+                                        class="euiText"
+                                      >
+                                        Press Enter to start editing.
+                                      </p>
+                                      <p
+                                        class="euiText"
+                                      >
+                                        When you're done, press Escape to stop editing.
+                                      </p>
+                                    </button>
+                                    <div
+                                      class=" ace_editor ace-tm"
+                                      id="some_html_id"
+                                      style="width: 100%; height: 500px;"
+                                    >
+                                      <textarea
+                                        autocapitalize="off"
+                                        autocorrect="off"
+                                        class="ace_text-input"
+                                        spellcheck="false"
+                                        style="opacity: 0;"
+                                        tabindex="-1"
+                                        wrap="off"
+                                      />
+                                      <div
+                                        aria-hidden="true"
+                                        class="ace_gutter"
+                                      >
+                                        <div
+                                          class="ace_layer ace_gutter-layer ace_folding-enabled"
+                                        />
+                                        <div
+                                          class="ace_gutter-active-line"
+                                        />
+                                      </div>
+                                      <div
+                                        class="ace_scroller"
+                                      >
+                                        <div
+                                          class="ace_content"
+                                        >
+                                          <div
+                                            class="ace_layer ace_print-margin-layer"
+                                          >
+                                            <div
+                                              class="ace_print-margin"
+                                              style="left: 4px; visibility: visible;"
+                                            />
+                                          </div>
+                                          <div
+                                            class="ace_layer ace_marker-layer"
+                                          />
+                                          <div
+                                            class="ace_layer ace_text-layer"
+                                            style="padding: 0px 4px;"
+                                          />
+                                          <div
+                                            class="ace_layer ace_marker-layer"
+                                          />
+                                          <div
+                                            class="ace_layer ace_cursor-layer ace_hidden-cursors"
+                                          >
+                                            <div
+                                              class="ace_cursor"
+                                            />
+                                          </div>
+                                        </div>
+                                      </div>
+                                      <div
+                                        class="ace_scrollbar ace_scrollbar-v"
+                                        style="display: none; width: 20px;"
+                                      >
+                                        <div
+                                          class="ace_scrollbar-inner"
+                                          style="width: 20px;"
+                                        />
+                                      </div>
+                                      <div
+                                        class="ace_scrollbar ace_scrollbar-h"
+                                        style="display: none; height: 20px;"
+                                      >
+                                        <div
+                                          class="ace_scrollbar-inner"
+                                          style="height: 20px;"
+                                        />
+                                      </div>
+                                      <div
+                                        style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;"
+                                      >
+                                        <div
+                                          style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
+                                        />
+                                        <div
+                                          style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
+                                        >
+                                          XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+                                        </div>
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="euiSpacer euiSpacer--l"
+                />
+                <div
+                  class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+                  style="padding-left: 0px; padding-right: 0px;"
+                >
+                  <div
+                    class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsFlexStart euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+                    style="padding: 0px 10px;"
+                  >
+                    <div
+                      class="euiFlexItem"
+                    >
+                      <div
+                        class="euiTitle euiTitle--small"
+                      >
+                        Index mapping - optional
+                      </div>
+                      <div
+                        class="euiFormRow euiFormRow--fullWidth"
+                        id="some_html_id-row"
+                      >
+                        <div
+                          class="euiFormRow__fieldWrapper"
+                        >
+                          <div
+                            class="euiFormHelpText euiFormRow__text"
+                            id="some_html_id-help-0"
+                          >
+                            <div>
+                              Define how documents and their fields are stored and indexed.
+                               
+                              <a
+                                class="euiLink euiLink--primary"
+                                href="https://opensearch.org/docs/latest/opensearch/mappings/"
+                                rel="noopener noreferrer"
+                                target="_blank"
+                              >
+                                Learn more.
+                                EuiIconMock
+                                <span
+                                  class="euiScreenReaderOnly"
+                                >
+                                  (opens in a new tab or window)
+                                </span>
+                              </a>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <hr
+                    class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
+                  />
+                  <div
+                    style="padding: 0px 10px;"
+                  >
+                    <div
+                      class="euiFormRow euiFormRow--fullWidth"
+                      id="some_html_id-row"
+                    >
+                      <div
+                        class="euiFormRow__fieldWrapper"
+                      >
+                        <fieldset
+                          class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
+                        >
+                          <legend
+                            class="euiScreenReaderOnly"
+                          >
+                            Editor Type
+                          </legend>
+                          <div
+                            class="euiButtonGroup__buttons"
+                          >
+                            <label
+                              class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton--fill euiButtonGroupButton-isSelected"
+                              data-test-subj="editorTypeVisualEditor"
+                              for="some_html_id"
+                            >
+                              <span
+                                class="euiButtonContent euiButton__content"
+                              >
+                                <span
+                                  class="euiButton__text euiButtonGroupButton__textShift"
+                                  data-text="Visual Editor"
+                                  title="Visual Editor"
+                                >
+                                  <input
+                                    checked=""
+                                    class="euiScreenReaderOnly"
+                                    data-test-subj="VISUAL"
+                                    id="some_html_id"
+                                    name="some_html_id"
+                                    type="radio"
+                                    value=""
+                                  />
+                                  Visual Editor
+                                </span>
+                              </span>
+                            </label>
+                            <label
+                              class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                              data-test-subj="editorTypeJsonEditor"
+                              for="some_html_id"
+                            >
+                              <span
+                                class="euiButtonContent euiButton__content"
+                              >
+                                <span
+                                  class="euiButton__text euiButtonGroupButton__textShift"
+                                  data-text="JSON Editor"
+                                  title="JSON Editor"
+                                >
+                                  <input
+                                    class="euiScreenReaderOnly"
+                                    data-test-subj="JSON"
+                                    id="some_html_id"
+                                    name="some_html_id"
+                                    type="radio"
+                                    value=""
+                                  />
+                                  JSON Editor
+                                </span>
+                              </span>
+                            </label>
+                          </div>
+                        </fieldset>
+                        <div
+                          class="euiSpacer euiSpacer--l"
+                        />
+                        <p>
+                          You have no field mappings.
+                        </p>
+                        <div
+                          class="euiSpacer euiSpacer--l"
+                        />
+                        <button
+                          class="euiButton euiButton--primary"
+                          data-test-subj="createIndexAddFieldButton"
+                          style="margin-right: 8px;"
+                          type="button"
+                        >
+                          <span
+                            class="euiButtonContent euiButton__content"
+                          >
+                            <span
+                              class="euiButton__text"
+                            >
+                              Add new field
+                            </span>
+                          </span>
+                        </button>
+                        <button
+                          class="euiButton euiButton--primary"
+                          data-test-subj="createIndexAddObjectFieldButton"
+                          type="button"
+                        >
+                          <span
+                            class="euiButtonContent euiButton__content"
+                          >
+                            <span
+                              class="euiButton__text"
+                            >
+                              Add new object
+                            </span>
+                          </span>
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="euiFlyoutFooter"
+          >
+            <div
+              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
+            >
+              <div
+                class="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <button
+                  class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--flushLeft"
+                  data-test-subj="flyout-footer-cancel-button"
+                  type="button"
+                >
+                  <span
+                    class="euiButtonContent euiButtonEmpty__content"
+                  >
+                    <span
+                      class="euiButtonEmpty__text"
+                    >
+                      Cancel
+                    </span>
+                  </span>
+                </button>
+              </div>
+              <div
+                class="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <button
+                  class="euiButton euiButton--primary euiButton--fill"
+                  data-test-subj="flyout-footer-action-button"
+                  type="button"
+                >
+                  <span
+                    class="euiButtonContent euiButton__content"
+                  >
+                    <span
+                      class="euiButton__text"
+                    >
+                      Create
+                    </span>
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        aria-hidden="true"
+        data-aria-hidden="true"
+        data-focus-guard="true"
+        style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+        tabindex="0"
+      />
+    </div>
+  </body>,
+  "container": <div
+    aria-hidden="true"
+    data-aria-hidden="true"
+  >
+    ,
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
diff --git a/public/pages/Reindex/components/CreateIndexFlyout/index.ts b/public/pages/Reindex/components/CreateIndexFlyout/index.ts
new file mode 100644
index 000000000..fbe773ad3
--- /dev/null
+++ b/public/pages/Reindex/components/CreateIndexFlyout/index.ts
@@ -0,0 +1,8 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import CreateIndexFlyout from "./CreateIndexFlyout";
+
+export default CreateIndexFlyout;
diff --git a/public/pages/Reindex/components/IndexSelect/IndexSelect.test.tsx b/public/pages/Reindex/components/IndexSelect/IndexSelect.test.tsx
new file mode 100644
index 000000000..076ceab0b
--- /dev/null
+++ b/public/pages/Reindex/components/IndexSelect/IndexSelect.test.tsx
@@ -0,0 +1,64 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { render, waitFor } from "@testing-library/react";
+import React from "react";
+import { coreServicesMock } from "../../../../../test/mocks";
+import { CoreServicesContext } from "../../../../components/core_services";
+import IndexSelect from "./IndexSelect";
+import { act } from "react-dom/test-utils";
+
+describe("<IndexSelect /> spec", () => {
+  it("renders the component", async () => {
+    const component = render(
+      <CoreServicesContext.Provider value={coreServicesMock}>
+        <IndexSelect
+          getIndexOptions={(str) => Promise.resolve([{ label: "sourceIndex" }])}
+          onSelectedOptions={(options) => {}}
+          selectedOption={[{ label: "sourceIndex" }]}
+          singleSelect={true}
+        />
+      </CoreServicesContext.Provider>
+    );
+    await waitFor(() => {});
+    expect(component).toMatchSnapshot();
+  });
+
+  it("renders the component with error", async () => {
+    const getIndexOptionsFn = jest.fn().mockRejectedValue("service not available");
+    act(() => {
+      render(
+        <CoreServicesContext.Provider value={coreServicesMock}>
+          <IndexSelect
+            getIndexOptions={getIndexOptionsFn}
+            onSelectedOptions={(options) => {}}
+            selectedOption={[{ label: "sourceIndex" }]}
+            singleSelect={true}
+          />
+        </CoreServicesContext.Provider>
+      );
+    });
+    await waitFor(() => {});
+    expect(coreServicesMock.notifications.toasts.addDanger).toHaveBeenCalledTimes(1);
+  });
+
+  it("search async", async () => {
+    const getIndexOptionsFn = jest.fn().mockResolvedValue([{ label: "test-index" }]);
+    act(() => {
+      render(
+        <CoreServicesContext.Provider value={coreServicesMock}>
+          <IndexSelect
+            getIndexOptions={getIndexOptionsFn}
+            onSelectedOptions={(options) => {}}
+            selectedOption={[{ label: "sourceIndex" }]}
+            singleSelect={false}
+          />
+        </CoreServicesContext.Provider>
+      );
+    });
+    await waitFor(() => {});
+    expect(getIndexOptionsFn).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/public/pages/Reindex/components/IndexSelect/IndexSelect.tsx b/public/pages/Reindex/components/IndexSelect/IndexSelect.tsx
new file mode 100644
index 000000000..784b96b31
--- /dev/null
+++ b/public/pages/Reindex/components/IndexSelect/IndexSelect.tsx
@@ -0,0 +1,73 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiComboBoxOptionOption } from "@elastic/eui";
+import { _EuiComboBoxProps } from "@elastic/eui/src/components/combo_box/combo_box";
+import { CoreStart } from "opensearch-dashboards/public";
+import BetterComboBox from "../../../../components/BetterComboBox";
+import React, { useContext, useEffect, useState } from "react";
+import { CoreServicesContext } from "../../../../components/core_services";
+import { IndexSelectItem } from "../../models/interfaces";
+import { filterOverlaps } from "../../utils/helper";
+import { filterByMinimatch } from "../../../../../utils/helper";
+import { SYSTEM_ALIAS, SYSTEM_INDEX } from "../../../../../utils/constants";
+
+interface IndexSelectProps extends Pick<_EuiComboBoxProps<IndexSelectItem>, "data-test-subj"> {
+  getIndexOptions: (searchValue: string, excludeDataStreamIndex?: boolean) => Promise<EuiComboBoxOptionOption<IndexSelectItem>[]>;
+  onSelectedOptions: (options: EuiComboBoxOptionOption<IndexSelectItem>[]) => void;
+  singleSelect: boolean;
+  selectedOption: EuiComboBoxOptionOption<IndexSelectItem>[];
+  excludeDataStreamIndex?: boolean;
+  excludeList?: EuiComboBoxOptionOption<IndexSelectItem>[];
+  excludeSystemIndex?: boolean;
+}
+
+export default function IndexSelect(props: IndexSelectProps) {
+  const [indexOptions, setIndexOptions] = useState([] as EuiComboBoxOptionOption<IndexSelectItem>[]);
+  const coreServices = useContext(CoreServicesContext) as CoreStart;
+
+  const searchIndex = (searchValue?: string) => {
+    props
+      .getIndexOptions(searchValue ? searchValue : "", props.excludeDataStreamIndex)
+      .then((options) => {
+        props.excludeSystemIndex && filterSystemIndices(options);
+        setIndexOptions(filterOverlaps(options, props.excludeList));
+      })
+      .catch((err) => {
+        coreServices.notifications.toasts.addDanger(`fetch indices error ${err}`);
+      });
+  };
+
+  useEffect(() => {
+    searchIndex();
+  }, [props.getIndexOptions, props.excludeList, props.excludeDataStreamIndex, props.excludeSystemIndex]);
+
+  const onSearchChange = (searchValue: string) => {
+    searchIndex(searchValue);
+  };
+
+  const filterSystemIndices = (list: EuiComboBoxOptionOption<IndexSelectItem>[]) => {
+    list.map((it) => {
+      it.options = it.options?.filter((item) => !filterByMinimatch(item.label, SYSTEM_ALIAS));
+      it.options = it.options?.filter((item) => !filterByMinimatch(item.label, SYSTEM_INDEX));
+    });
+  };
+
+  return (
+    <div>
+      <BetterComboBox
+        data-test-subj={props["data-test-subj"]}
+        placeholder="Type or select indexes,data streams or aliases"
+        options={indexOptions}
+        async
+        selectedOptions={props.selectedOption}
+        onChange={props.onSelectedOptions}
+        onSearchChange={onSearchChange}
+        isClearable={true}
+        singleSelection={props.singleSelect ? { asPlainText: true } : false}
+      />
+    </div>
+  );
+}
diff --git a/public/pages/Reindex/components/IndexSelect/__snapshots__/IndexSelect.test.tsx.snap b/public/pages/Reindex/components/IndexSelect/__snapshots__/IndexSelect.test.tsx.snap
new file mode 100644
index 000000000..6f9f71ea7
--- /dev/null
+++ b/public/pages/Reindex/components/IndexSelect/__snapshots__/IndexSelect.test.tsx.snap
@@ -0,0 +1,190 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<IndexSelect /> spec renders the component 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div>
+        <div
+          aria-expanded="false"
+          aria-haspopup="listbox"
+          class="euiComboBox"
+          role="combobox"
+        >
+          <div
+            class="euiFormControlLayout"
+          >
+            <div
+              class="euiFormControlLayout__childrenWrapper"
+            >
+              <div
+                class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
+                data-test-subj="comboBoxInput"
+                tabindex="-1"
+              >
+                <span
+                  class="euiComboBoxPill euiComboBoxPill--plainText"
+                >
+                  sourceIndex
+                </span>
+                <div
+                  class="euiComboBox__input"
+                  style="font-size: 14px; display: inline-block;"
+                >
+                  <input
+                    aria-controls=""
+                    data-test-subj="comboBoxSearchInput"
+                    role="textbox"
+                    style="box-sizing: content-box; width: 2px;"
+                    value=""
+                  />
+                  <div
+                    style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                  />
+                </div>
+              </div>
+              <div
+                class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+              >
+                <button
+                  aria-label="Clear input"
+                  class="euiFormControlLayoutClearButton"
+                  data-test-subj="comboBoxClearButton"
+                  type="button"
+                >
+                  EuiIconMock
+                </button>
+                <button
+                  aria-label="Open list of options"
+                  class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                  data-test-subj="comboBoxToggleListButton"
+                  type="button"
+                >
+                  EuiIconMock
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div>
+      <div
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        class="euiComboBox"
+        role="combobox"
+      >
+        <div
+          class="euiFormControlLayout"
+        >
+          <div
+            class="euiFormControlLayout__childrenWrapper"
+          >
+            <div
+              class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
+              data-test-subj="comboBoxInput"
+              tabindex="-1"
+            >
+              <span
+                class="euiComboBoxPill euiComboBoxPill--plainText"
+              >
+                sourceIndex
+              </span>
+              <div
+                class="euiComboBox__input"
+                style="font-size: 14px; display: inline-block;"
+              >
+                <input
+                  aria-controls=""
+                  data-test-subj="comboBoxSearchInput"
+                  role="textbox"
+                  style="box-sizing: content-box; width: 2px;"
+                  value=""
+                />
+                <div
+                  style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                />
+              </div>
+            </div>
+            <div
+              class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+            >
+              <button
+                aria-label="Clear input"
+                class="euiFormControlLayoutClearButton"
+                data-test-subj="comboBoxClearButton"
+                type="button"
+              >
+                EuiIconMock
+              </button>
+              <button
+                aria-label="Open list of options"
+                class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                data-test-subj="comboBoxToggleListButton"
+                type="button"
+              >
+                EuiIconMock
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
diff --git a/public/pages/Reindex/components/IndexSelect/index.ts b/public/pages/Reindex/components/IndexSelect/index.ts
new file mode 100644
index 000000000..bfc369d83
--- /dev/null
+++ b/public/pages/Reindex/components/IndexSelect/index.ts
@@ -0,0 +1,8 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import IndexSelect from "./IndexSelect";
+
+export default IndexSelect;
diff --git a/public/pages/Reindex/components/ReindexAdvancedOptions/ReindexAdvancedOptions.test.tsx b/public/pages/Reindex/components/ReindexAdvancedOptions/ReindexAdvancedOptions.test.tsx
new file mode 100644
index 000000000..a89a6762a
--- /dev/null
+++ b/public/pages/Reindex/components/ReindexAdvancedOptions/ReindexAdvancedOptions.test.tsx
@@ -0,0 +1,93 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { render, waitFor } from "@testing-library/react";
+import React from "react";
+import ReindexAdvancedOptions from "./ReindexAdvancedOptions";
+import { coreServicesMock } from "../../../../../test/mocks";
+import { CoreServicesContext } from "../../../../components/core_services";
+
+describe("<ReindexAdvancedOptions /> spec", () => {
+  it("renders the component", async () => {
+    const component = render(
+      <CoreServicesContext.Provider value={coreServicesMock}>
+        <ReindexAdvancedOptions
+          slices="5"
+          onSlicesChange={() => {}}
+          selectedPipelines={[]}
+          onSelectedPipelinesChange={() => {}}
+          ignoreConflicts={true}
+          onIgnoreConflictsChange={() => {}}
+          getAllPipelines={async () => [{ label: "pipeline" }]}
+        />
+      </CoreServicesContext.Provider>
+    );
+    // wait for one tick
+    await waitFor(() => {});
+    expect(component).toMatchSnapshot();
+  });
+
+  it("renders the component with slice error", async () => {
+    const { findByText } = render(
+      <CoreServicesContext.Provider value={coreServicesMock}>
+        <ReindexAdvancedOptions
+          slices="0"
+          onSlicesChange={() => {}}
+          sliceErr={"slice must be positive integer or auto"}
+          selectedPipelines={[]}
+          onSelectedPipelinesChange={() => {}}
+          ignoreConflicts={false}
+          onIgnoreConflictsChange={() => {}}
+          getAllPipelines={async () => [{ label: "pipeline" }]}
+        />
+      </CoreServicesContext.Provider>
+    );
+
+    // wait for one tick
+    await waitFor(() => {});
+    expect(findByText("slice must be positive integer or auto")).not.toBeNull();
+  });
+
+  it("get pipeline error", async () => {
+    render(
+      <CoreServicesContext.Provider value={coreServicesMock}>
+        <ReindexAdvancedOptions
+          slices="1"
+          onSlicesChange={() => {}}
+          selectedPipelines={[]}
+          onSelectedPipelinesChange={() => {}}
+          ignoreConflicts={false}
+          onIgnoreConflictsChange={() => {}}
+          getAllPipelines={async () => Promise.reject("service not available")}
+        />
+      </CoreServicesContext.Provider>
+    );
+
+    // wait for one tick
+    await waitFor(() => {});
+    expect(coreServicesMock.notifications.toasts.addDanger).toHaveBeenCalledTimes(1);
+  });
+
+  it("get pipeline api been called", async () => {
+    const getPipeline = jest.fn().mockResolvedValue([{ label: "test1" }]);
+    render(
+      <CoreServicesContext.Provider value={coreServicesMock}>
+        <ReindexAdvancedOptions
+          slices="1"
+          onSlicesChange={() => {}}
+          selectedPipelines={[]}
+          onSelectedPipelinesChange={() => {}}
+          ignoreConflicts={false}
+          onIgnoreConflictsChange={() => {}}
+          getAllPipelines={getPipeline}
+        />
+      </CoreServicesContext.Provider>
+    );
+
+    // wait for one tick
+    await waitFor(() => {});
+    expect(getPipeline).toBeCalledTimes(1);
+  });
+});
diff --git a/public/pages/Reindex/components/ReindexAdvancedOptions/ReindexAdvancedOptions.tsx b/public/pages/Reindex/components/ReindexAdvancedOptions/ReindexAdvancedOptions.tsx
new file mode 100644
index 000000000..cc6ee81fe
--- /dev/null
+++ b/public/pages/Reindex/components/ReindexAdvancedOptions/ReindexAdvancedOptions.tsx
@@ -0,0 +1,167 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { ChangeEvent, useContext, useEffect, useState } from "react";
+import CustomFormRow from "../../../../components/CustomFormRow";
+import { EuiCheckbox, EuiComboBox, EuiComboBoxOptionOption, EuiFieldNumber, EuiLink, EuiRadioGroup, EuiSpacer } from "@elastic/eui";
+import { CoreServicesContext } from "../../../../components/core_services";
+import { CoreStart } from "opensearch-dashboards/public";
+
+interface ReindexOptionsProps {
+  slices?: string;
+  onSlicesChange: (val?: string) => void;
+  sliceErr?: string;
+  selectedPipelines?: EuiComboBoxOptionOption[];
+  onSelectedPipelinesChange: (options: EuiComboBoxOptionOption[]) => void;
+  getAllPipelines: () => Promise<EuiComboBoxOptionOption[]>;
+  ignoreConflicts: boolean;
+  onIgnoreConflictsChange: (val: ChangeEvent<HTMLInputElement>) => void;
+}
+
+const ReindexAdvancedOptions = (props: ReindexOptionsProps) => {
+  let pipelinesInit: EuiComboBoxOptionOption[] = [];
+  const [pipelines, SetPipelines] = useState(pipelinesInit);
+  const coreServices = useContext(CoreServicesContext) as CoreStart;
+
+  const {
+    slices,
+    sliceErr,
+    onSlicesChange,
+    selectedPipelines,
+    onSelectedPipelinesChange,
+    getAllPipelines,
+    ignoreConflicts,
+    onIgnoreConflictsChange,
+  } = props;
+
+  const sliceEnabled = slices !== undefined;
+  const sliceOption = slices === "auto" ? "auto" : "manual";
+  const showSliceInput = sliceEnabled && sliceOption === "manual";
+
+  useEffect(() => {
+    getAllPipelines()
+      .then((pipelines) => {
+        SetPipelines(pipelines);
+      })
+      .catch((err) => {
+        coreServices.notifications.toasts.addDanger(`fetch pipelines error ${err}`);
+      });
+  }, [coreServices, getAllPipelines]);
+
+  return (
+    <div style={{ padding: "10px 10px" }}>
+      <CustomFormRow
+        label="Version conflicts"
+        helpText={
+          <>
+            Instead of failing the reindexing operation, ignore any version conflicts during reindexing.
+            <EuiLink href={coreServices.docLinks.links.opensearch.reindexData.unique} target="_blank">
+              Learn more.
+            </EuiLink>
+          </>
+        }
+      >
+        <EuiCheckbox
+          id="ConflictsOptionCheckbox"
+          label="Ignore conflicts during reindexing"
+          checked={ignoreConflicts}
+          onChange={onIgnoreConflictsChange}
+        />
+      </CustomFormRow>
+      <EuiSpacer />
+
+      <CustomFormRow
+        label="Slice reindexing operation"
+        helpText="Divide this reindexing operation into smaller subtasks to run in parallel."
+      >
+        <>
+          <EuiCheckbox
+            id="sliceEnabledCheckBox"
+            data-test-subj="sliceEnabled"
+            label="Slice this reindexing operation"
+            checked={sliceEnabled}
+            onChange={(e) => {
+              onSlicesChange(e.target.checked ? "auto" : undefined);
+            }}
+          />
+
+          <EuiSpacer />
+
+          {sliceEnabled ? (
+            <EuiRadioGroup
+              options={[
+                {
+                  id: "auto",
+                  label: "Automatic",
+                },
+                {
+                  id: "manual",
+                  label: "Manually slice into subtasks",
+                },
+              ]}
+              idSelected={sliceOption}
+              onChange={(id) => {
+                onSlicesChange(id === "auto" ? "auto" : "");
+              }}
+              name="sliceOption"
+              data-test-subj="sliceOption"
+            />
+          ) : (
+            ""
+          )}
+        </>
+      </CustomFormRow>
+
+      {showSliceInput ? (
+        <CustomFormRow
+          isInvalid={!!sliceErr}
+          error={sliceErr}
+          label="Number of subtasks"
+          helpText="Specify how many subtasks you would like this operation divided into."
+        >
+          <EuiFieldNumber
+            data-test-subj="slices"
+            value={slices}
+            placeholder="Specify a number"
+            type="number"
+            min={2}
+            onChange={(e) => onSlicesChange(e.target.value)}
+          />
+        </CustomFormRow>
+      ) : (
+        ""
+      )}
+
+      <EuiSpacer />
+      <CustomFormRow
+        label={
+          <>
+            Transform with ingest pipeline – <i>optional</i>
+          </>
+        }
+        helpText={
+          <>
+            Select an ingest pipeline if you need to transform documents before writing data to the destination index.
+            <EuiLink href={coreServices.docLinks.links.opensearch.reindexData.transform} target="_blank">
+              Learn more.
+            </EuiLink>
+          </>
+        }
+      >
+        <EuiComboBox
+          aria-label="Ingest Pipeline"
+          placeholder="Select an ingest pipeline"
+          data-test-subj="pipelineCombobox"
+          singleSelection={{ asPlainText: true }}
+          options={pipelines}
+          selectedOptions={selectedPipelines}
+          onChange={onSelectedPipelinesChange}
+        />
+      </CustomFormRow>
+    </div>
+  );
+};
+
+export default ReindexAdvancedOptions;
diff --git a/public/pages/Reindex/components/ReindexAdvancedOptions/__snapshots__/ReindexAdvancedOptions.test.tsx.snap b/public/pages/Reindex/components/ReindexAdvancedOptions/__snapshots__/ReindexAdvancedOptions.test.tsx.snap
new file mode 100644
index 000000000..c51ea50ba
--- /dev/null
+++ b/public/pages/Reindex/components/ReindexAdvancedOptions/__snapshots__/ReindexAdvancedOptions.test.tsx.snap
@@ -0,0 +1,648 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ReindexAdvancedOptions /> spec renders the component 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        style="padding: 10px 10px;"
+      >
+        <div
+          class="euiFormRow"
+          id="some_html_id-row"
+        >
+          <div
+            class="euiFormRow__labelWrapper"
+          >
+            <label
+              class="euiFormLabel euiFormRow__label"
+              for="some_html_id"
+            >
+              Version conflicts
+            </label>
+          </div>
+          <div
+            class="euiFormRow__fieldWrapper"
+          >
+            <div
+              class="euiFormHelpText euiFormRow__text"
+              style="padding-top: 0px; padding-bottom: 4px;"
+            >
+              Instead of failing the reindexing operation, ignore any version conflicts during reindexing.
+              <button
+                class="euiLink euiLink--primary"
+                type="button"
+              >
+                Learn more.
+              </button>
+            </div>
+            <div
+              class="euiCheckbox"
+            >
+              <input
+                checked=""
+                class="euiCheckbox__input"
+                id="ConflictsOptionCheckbox"
+                type="checkbox"
+              />
+              <div
+                class="euiCheckbox__square"
+              />
+              <label
+                class="euiCheckbox__label"
+                for="ConflictsOptionCheckbox"
+              >
+                Ignore conflicts during reindexing
+              </label>
+            </div>
+          </div>
+        </div>
+        <div
+          class="euiSpacer euiSpacer--l"
+        />
+        <div
+          class="euiFormRow"
+          id="some_html_id-row"
+        >
+          <div
+            class="euiFormRow__labelWrapper"
+          >
+            <label
+              class="euiFormLabel euiFormRow__label"
+              for="some_html_id"
+            >
+              Slice reindexing operation
+            </label>
+          </div>
+          <div
+            class="euiFormRow__fieldWrapper"
+          >
+            <div
+              class="euiFormHelpText euiFormRow__text"
+              style="padding-top: 0px; padding-bottom: 4px;"
+            >
+              Divide this reindexing operation into smaller subtasks to run in parallel.
+            </div>
+            <div
+              class="euiCheckbox"
+            >
+              <input
+                checked=""
+                class="euiCheckbox__input"
+                data-test-subj="sliceEnabled"
+                id="sliceEnabledCheckBox"
+                type="checkbox"
+              />
+              <div
+                class="euiCheckbox__square"
+              />
+              <label
+                class="euiCheckbox__label"
+                for="sliceEnabledCheckBox"
+              >
+                Slice this reindexing operation
+              </label>
+            </div>
+            <div
+              class="euiSpacer euiSpacer--l"
+            />
+            <div
+              data-test-subj="sliceOption"
+            >
+              <div
+                class="euiRadio euiRadioGroup__item"
+              >
+                <input
+                  class="euiRadio__input"
+                  id="auto"
+                  name="sliceOption"
+                  type="radio"
+                  value=""
+                />
+                <div
+                  class="euiRadio__circle"
+                />
+                <label
+                  class="euiRadio__label"
+                  for="auto"
+                >
+                  Automatic
+                </label>
+              </div>
+              <div
+                class="euiRadio euiRadioGroup__item"
+              >
+                <input
+                  checked=""
+                  class="euiRadio__input"
+                  id="manual"
+                  name="sliceOption"
+                  type="radio"
+                  value=""
+                />
+                <div
+                  class="euiRadio__circle"
+                />
+                <label
+                  class="euiRadio__label"
+                  for="manual"
+                >
+                  Manually slice into subtasks
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="euiFormRow"
+          id="some_html_id-row"
+        >
+          <div
+            class="euiFormRow__labelWrapper"
+          >
+            <label
+              aria-invalid="false"
+              class="euiFormLabel euiFormRow__label"
+              for="some_html_id"
+            >
+              Number of subtasks
+            </label>
+          </div>
+          <div
+            class="euiFormRow__fieldWrapper"
+          >
+            <div
+              class="euiFormHelpText euiFormRow__text"
+              style="padding-top: 0px; padding-bottom: 4px;"
+            >
+              Specify how many subtasks you would like this operation divided into.
+            </div>
+            <div
+              class="euiFormControlLayout"
+            >
+              <div
+                class="euiFormControlLayout__childrenWrapper"
+              >
+                <input
+                  class="euiFieldNumber"
+                  data-test-subj="slices"
+                  min="2"
+                  placeholder="Specify a number"
+                  type="number"
+                  value="5"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="euiSpacer euiSpacer--l"
+        />
+        <div
+          class="euiFormRow"
+          id="some_html_id-row"
+        >
+          <div
+            class="euiFormRow__labelWrapper"
+          >
+            <label
+              class="euiFormLabel euiFormRow__label"
+              for="some_html_id"
+            >
+              Transform with ingest pipeline – 
+              <i>
+                optional
+              </i>
+            </label>
+          </div>
+          <div
+            class="euiFormRow__fieldWrapper"
+          >
+            <div
+              class="euiFormHelpText euiFormRow__text"
+              style="padding-top: 0px; padding-bottom: 4px;"
+            >
+              Select an ingest pipeline if you need to transform documents before writing data to the destination index.
+              <a
+                class="euiLink euiLink--primary"
+                href="https://opensearch.org/docs/latest/opensearch/reindex-data/#transform-documents-during-reindexing"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                Learn more.
+                EuiIconMock
+                <span
+                  class="euiScreenReaderOnly"
+                >
+                  (opens in a new tab or window)
+                </span>
+              </a>
+            </div>
+            <div
+              aria-expanded="false"
+              aria-haspopup="listbox"
+              aria-label="Ingest Pipeline"
+              class="euiComboBox"
+              data-test-subj="pipelineCombobox"
+              role="combobox"
+            >
+              <div
+                class="euiFormControlLayout"
+              >
+                <div
+                  class="euiFormControlLayout__childrenWrapper"
+                >
+                  <div
+                    class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
+                    data-test-subj="comboBoxInput"
+                    tabindex="-1"
+                  >
+                    <p
+                      class="euiComboBoxPlaceholder"
+                    >
+                      Select an ingest pipeline
+                    </p>
+                    <div
+                      class="euiComboBox__input"
+                      style="font-size: 14px; display: inline-block;"
+                    >
+                      <input
+                        aria-controls=""
+                        data-test-subj="comboBoxSearchInput"
+                        role="textbox"
+                        style="box-sizing: content-box; width: 2px;"
+                        value=""
+                      />
+                      <div
+                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                      />
+                    </div>
+                  </div>
+                  <div
+                    class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                  >
+                    <button
+                      aria-label="Open list of options"
+                      class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                      data-test-subj="comboBoxToggleListButton"
+                      type="button"
+                    >
+                      EuiIconMock
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      style="padding: 10px 10px;"
+    >
+      <div
+        class="euiFormRow"
+        id="some_html_id-row"
+      >
+        <div
+          class="euiFormRow__labelWrapper"
+        >
+          <label
+            class="euiFormLabel euiFormRow__label"
+            for="some_html_id"
+          >
+            Version conflicts
+          </label>
+        </div>
+        <div
+          class="euiFormRow__fieldWrapper"
+        >
+          <div
+            class="euiFormHelpText euiFormRow__text"
+            style="padding-top: 0px; padding-bottom: 4px;"
+          >
+            Instead of failing the reindexing operation, ignore any version conflicts during reindexing.
+            <button
+              class="euiLink euiLink--primary"
+              type="button"
+            >
+              Learn more.
+            </button>
+          </div>
+          <div
+            class="euiCheckbox"
+          >
+            <input
+              checked=""
+              class="euiCheckbox__input"
+              id="ConflictsOptionCheckbox"
+              type="checkbox"
+            />
+            <div
+              class="euiCheckbox__square"
+            />
+            <label
+              class="euiCheckbox__label"
+              for="ConflictsOptionCheckbox"
+            >
+              Ignore conflicts during reindexing
+            </label>
+          </div>
+        </div>
+      </div>
+      <div
+        class="euiSpacer euiSpacer--l"
+      />
+      <div
+        class="euiFormRow"
+        id="some_html_id-row"
+      >
+        <div
+          class="euiFormRow__labelWrapper"
+        >
+          <label
+            class="euiFormLabel euiFormRow__label"
+            for="some_html_id"
+          >
+            Slice reindexing operation
+          </label>
+        </div>
+        <div
+          class="euiFormRow__fieldWrapper"
+        >
+          <div
+            class="euiFormHelpText euiFormRow__text"
+            style="padding-top: 0px; padding-bottom: 4px;"
+          >
+            Divide this reindexing operation into smaller subtasks to run in parallel.
+          </div>
+          <div
+            class="euiCheckbox"
+          >
+            <input
+              checked=""
+              class="euiCheckbox__input"
+              data-test-subj="sliceEnabled"
+              id="sliceEnabledCheckBox"
+              type="checkbox"
+            />
+            <div
+              class="euiCheckbox__square"
+            />
+            <label
+              class="euiCheckbox__label"
+              for="sliceEnabledCheckBox"
+            >
+              Slice this reindexing operation
+            </label>
+          </div>
+          <div
+            class="euiSpacer euiSpacer--l"
+          />
+          <div
+            data-test-subj="sliceOption"
+          >
+            <div
+              class="euiRadio euiRadioGroup__item"
+            >
+              <input
+                class="euiRadio__input"
+                id="auto"
+                name="sliceOption"
+                type="radio"
+                value=""
+              />
+              <div
+                class="euiRadio__circle"
+              />
+              <label
+                class="euiRadio__label"
+                for="auto"
+              >
+                Automatic
+              </label>
+            </div>
+            <div
+              class="euiRadio euiRadioGroup__item"
+            >
+              <input
+                checked=""
+                class="euiRadio__input"
+                id="manual"
+                name="sliceOption"
+                type="radio"
+                value=""
+              />
+              <div
+                class="euiRadio__circle"
+              />
+              <label
+                class="euiRadio__label"
+                for="manual"
+              >
+                Manually slice into subtasks
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="euiFormRow"
+        id="some_html_id-row"
+      >
+        <div
+          class="euiFormRow__labelWrapper"
+        >
+          <label
+            aria-invalid="false"
+            class="euiFormLabel euiFormRow__label"
+            for="some_html_id"
+          >
+            Number of subtasks
+          </label>
+        </div>
+        <div
+          class="euiFormRow__fieldWrapper"
+        >
+          <div
+            class="euiFormHelpText euiFormRow__text"
+            style="padding-top: 0px; padding-bottom: 4px;"
+          >
+            Specify how many subtasks you would like this operation divided into.
+          </div>
+          <div
+            class="euiFormControlLayout"
+          >
+            <div
+              class="euiFormControlLayout__childrenWrapper"
+            >
+              <input
+                class="euiFieldNumber"
+                data-test-subj="slices"
+                min="2"
+                placeholder="Specify a number"
+                type="number"
+                value="5"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="euiSpacer euiSpacer--l"
+      />
+      <div
+        class="euiFormRow"
+        id="some_html_id-row"
+      >
+        <div
+          class="euiFormRow__labelWrapper"
+        >
+          <label
+            class="euiFormLabel euiFormRow__label"
+            for="some_html_id"
+          >
+            Transform with ingest pipeline – 
+            <i>
+              optional
+            </i>
+          </label>
+        </div>
+        <div
+          class="euiFormRow__fieldWrapper"
+        >
+          <div
+            class="euiFormHelpText euiFormRow__text"
+            style="padding-top: 0px; padding-bottom: 4px;"
+          >
+            Select an ingest pipeline if you need to transform documents before writing data to the destination index.
+            <a
+              class="euiLink euiLink--primary"
+              href="https://opensearch.org/docs/latest/opensearch/reindex-data/#transform-documents-during-reindexing"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              Learn more.
+              EuiIconMock
+              <span
+                class="euiScreenReaderOnly"
+              >
+                (opens in a new tab or window)
+              </span>
+            </a>
+          </div>
+          <div
+            aria-expanded="false"
+            aria-haspopup="listbox"
+            aria-label="Ingest Pipeline"
+            class="euiComboBox"
+            data-test-subj="pipelineCombobox"
+            role="combobox"
+          >
+            <div
+              class="euiFormControlLayout"
+            >
+              <div
+                class="euiFormControlLayout__childrenWrapper"
+              >
+                <div
+                  class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
+                  data-test-subj="comboBoxInput"
+                  tabindex="-1"
+                >
+                  <p
+                    class="euiComboBoxPlaceholder"
+                  >
+                    Select an ingest pipeline
+                  </p>
+                  <div
+                    class="euiComboBox__input"
+                    style="font-size: 14px; display: inline-block;"
+                  >
+                    <input
+                      aria-controls=""
+                      data-test-subj="comboBoxSearchInput"
+                      role="textbox"
+                      style="box-sizing: content-box; width: 2px;"
+                      value=""
+                    />
+                    <div
+                      style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                    />
+                  </div>
+                </div>
+                <div
+                  class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                >
+                  <button
+                    aria-label="Open list of options"
+                    class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                    data-test-subj="comboBoxToggleListButton"
+                    type="button"
+                  >
+                    EuiIconMock
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
diff --git a/public/pages/Reindex/components/ReindexAdvancedOptions/index.ts b/public/pages/Reindex/components/ReindexAdvancedOptions/index.ts
new file mode 100644
index 000000000..572fd96d9
--- /dev/null
+++ b/public/pages/Reindex/components/ReindexAdvancedOptions/index.ts
@@ -0,0 +1,8 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import ReindexAdvancedOptions from "./ReindexAdvancedOptions";
+
+export default ReindexAdvancedOptions;
diff --git a/public/pages/Reindex/container/Reindex/Reindex.test.tsx b/public/pages/Reindex/container/Reindex/Reindex.test.tsx
new file mode 100644
index 000000000..f4449774c
--- /dev/null
+++ b/public/pages/Reindex/container/Reindex/Reindex.test.tsx
@@ -0,0 +1,627 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from "react";
+import "@testing-library/jest-dom/extend-expect";
+import { render, fireEvent, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Route, RouteComponentProps, Switch } from "react-router-dom";
+import { MemoryRouter as Router } from "react-router-dom";
+import { CoreStart } from "opensearch-dashboards/public";
+import { browserServicesMock, coreServicesMock } from "../../../../../test/mocks";
+import { ServicesConsumer, ServicesContext } from "../../../../services";
+import { BREADCRUMBS, ROUTES } from "../../../../utils/constants";
+import { CoreServicesConsumer, CoreServicesContext } from "../../../../components/core_services";
+import Reindex from "./Reindex";
+import { ModalProvider, ModalRoot } from "../../../../components/Modal";
+import { BrowserServices } from "../../../../models/interfaces";
+
+function renderWithRouter(initialEntries = [ROUTES.REINDEX] as string[]) {
+  return {
+    ...render(
+      <Router initialEntries={initialEntries}>
+        <CoreServicesContext.Provider value={coreServicesMock}>
+          <ServicesContext.Provider value={browserServicesMock}>
+            <ServicesConsumer>
+              {(services: BrowserServices | null) =>
+                services && (
+                  <CoreServicesConsumer>
+                    {(core: CoreStart | null) =>
+                      core && (
+                        <ModalProvider>
+                          <ModalRoot services={services} />
+                          <Switch>
+                            <Route
+                              path={ROUTES.REINDEX}
+                              render={(props: RouteComponentProps) => (
+                                <Reindex {...props} indexService={services?.indexService} commonService={services.commonService} />
+                              )}
+                            />
+                            <Route path={ROUTES.INDICES} render={(props: RouteComponentProps) => <h1>location is: {ROUTES.INDICES}</h1>} />
+                          </Switch>
+                        </ModalProvider>
+                      )
+                    }
+                  </CoreServicesConsumer>
+                )
+              }
+            </ServicesConsumer>
+          </ServicesContext.Provider>
+        </CoreServicesContext.Provider>
+      </Router>
+    ),
+  };
+}
+
+const indices = [
+  {
+    "docs.count": 5,
+    "docs.deleted": 2,
+    health: "green",
+    index: "index-source",
+    pri: "1",
+    "pri.store.size": "100KB",
+    rep: "0",
+    status: "open",
+    "store.size": "100KB",
+    uuid: "some_uuid",
+  },
+  {
+    "docs.count": 5,
+    "docs.deleted": 2,
+    health: "green",
+    index: "index-dest",
+    pri: "1",
+    "pri.store.size": "100KB",
+    rep: "0",
+    status: "open",
+    "store.size": "100KB",
+    uuid: "some_uuid",
+  },
+  {
+    "docs.count": 5,
+    "docs.deleted": 2,
+    health: "green",
+    index: "index-source-2",
+    pri: "1",
+    "pri.store.size": "100KB",
+    rep: "0",
+    status: "open",
+    "store.size": "100KB",
+    uuid: "some_uuid",
+  },
+];
+
+const dataStreams = [
+  {
+    name: "log-redis-daily",
+    timestamp_field: "@timestamp",
+    indices: [".ds-log-redis-daily-000001", ".ds-log-redis-daily-000002"],
+    writingIndex: ".ds-log-redis-daily-000002",
+    generation: 2,
+    status: "GREEN",
+    template: "",
+  },
+];
+
+const aliases = [
+  {
+    alias: "alias-1",
+    index: "index-source",
+    filter: "-",
+    is_write_index: "false",
+    "routing.index": "-",
+    "routing.search": "-",
+  },
+  {
+    alias: "alias-1",
+    index: "index-source-2",
+    filter: "-",
+    is_write_index: "true",
+    "routing.index": "-",
+    "routing.search": "-",
+  },
+  {
+    alias: "alias-2",
+    index: "index-test-1",
+    filter: "-",
+    is_write_index: "-",
+    "routing.index": "-",
+    "routing.search": "-",
+  },
+  {
+    alias: "alias-2",
+    index: "index-test-2",
+    filter: "-",
+    is_write_index: "-",
+    "routing.index": "-",
+    "routing.search": "-",
+  },
+];
+
+const mockApi = (validateQueryFail?: boolean) => {
+  browserServicesMock.indexService.getIndices = jest.fn().mockImplementation((args) => ({
+    ok: true,
+    response: { indices: args.search.length > 0 ? indices.filter((index) => index.index.startsWith(args.search)) : indices },
+  }));
+
+  browserServicesMock.indexService.getDataStreams = jest.fn().mockImplementation((args) => ({
+    ok: true,
+    response: {
+      dataStreams: args.search.length > 0 ? dataStreams.filter((ds) => ds.name.startsWith(args.search)) : dataStreams,
+    },
+  }));
+  browserServicesMock.indexService.getAliases = jest.fn().mockImplementation((args) => ({
+    ok: true,
+    response: {
+      aliases: args.search.length > 0 ? aliases.filter((alias) => alias.alias.startsWith(args.search)) : aliases,
+    },
+  }));
+
+  browserServicesMock.commonService.apiCaller = jest.fn().mockImplementation((args) => {
+    if (args.endpoint === "transport.request") {
+      if (args.data.path.startsWith("_reindex")) {
+        return Promise.resolve({
+          ok: true,
+          response: {
+            task: "some task id",
+          },
+        });
+      }
+    } else if (args.endpoint === "indices.getFieldMapping") {
+      return Promise.resolve({
+        ok: true,
+        response: {
+          "index-source": {
+            mappings: {
+              _source: {
+                full_name: "_source",
+                mapping: {
+                  _source: {
+                    enabled: true,
+                  },
+                },
+              },
+            },
+          },
+        },
+      });
+    } else if (args.endpoint === "ingest.getPipeline") {
+      return Promise.resolve({
+        ok: true,
+        response: {
+          bumpOrderId: {
+            description: "bump order id to add 200 prefix",
+            processors: [
+              {
+                set: {
+                  field: "order_id",
+                  value: "200{{order_id}}",
+                },
+              },
+            ],
+          },
+        },
+      });
+    } else if (args.endpoint === "indices.validateQuery") {
+      return Promise.resolve({ ok: true, response: { valid: !validateQueryFail } });
+    }
+    return Promise.resolve({ ok: true });
+  });
+};
+
+describe("<Reindex /> spec", () => {
+  beforeEach(() => {
+    mockApi();
+  });
+
+  it("renders the component", async () => {
+    const { container } = renderWithRouter();
+    // wait for one tick
+    await waitFor(() => {});
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it("set breadcrumbs when mounting", async () => {
+    renderWithRouter();
+
+    // wait for one tick
+    await waitFor(() => {});
+
+    expect(coreServicesMock.chrome.setBreadcrumbs).toHaveBeenCalledTimes(1);
+    expect(coreServicesMock.chrome.setBreadcrumbs).toHaveBeenCalledWith([
+      BREADCRUMBS.INDEX_MANAGEMENT,
+      BREADCRUMBS.INDICES,
+      BREADCRUMBS.REINDEX,
+    ]);
+  });
+
+  it("cancel back to indices page", async () => {
+    const { getByText } = renderWithRouter();
+    await waitFor(() => {});
+    userEvent.click(getByText("Cancel"));
+
+    expect(getByText(`location is: ${ROUTES.INDICES}`)).toBeInTheDocument();
+  });
+
+  it("auto populate source from search query", async () => {
+    const { getByTestId } = renderWithRouter([`${ROUTES.REINDEX}?source=index-source`]);
+
+    await waitFor(() => {});
+
+    let sourceName = getByTestId("sourceSelector").querySelector(".euiBadge__text") as Element;
+    expect(sourceName.textContent).toBe("index-source");
+  });
+
+  it("source is required", async () => {
+    const { getByText, getByTestId } = renderWithRouter();
+
+    await waitFor(() => {
+      getByText("Configure source index");
+    });
+
+    userEvent.click(getByTestId("reindexConfirmButton"));
+
+    expect(getByText("Source is required.")).toBeInTheDocument();
+  });
+
+  it("source status is closed", async () => {
+    browserServicesMock.indexService.getIndices = jest.fn().mockResolvedValue({
+      ok: true,
+      response: {
+        indices: [
+          {
+            "docs.count": 5,
+            "docs.deleted": 2,
+            health: "green",
+            index: "index-source-closed",
+            pri: "1",
+            "pri.store.size": "100KB",
+            rep: "0",
+            status: "close",
+            "store.size": "100KB",
+            uuid: "some_uuid",
+          },
+        ],
+      },
+    });
+    const { getByText, getAllByTestId, getByTestId } = renderWithRouter();
+
+    await waitFor(() => {
+      getByText("Configure source index");
+    });
+
+    await userEvent.type(getAllByTestId("comboBoxSearchInput")[0], "index-source-closed");
+    fireEvent.keyDown(getAllByTestId("comboBoxSearchInput")[0], { key: "ArrowDown", code: "ArrowDown" });
+    fireEvent.keyDown(getAllByTestId("comboBoxSearchInput")[0], { key: "Enter", code: "Enter" });
+
+    userEvent.click(getByTestId("reindexConfirmButton"));
+
+    await waitFor(() => {});
+
+    expect(getByText("Index [index-source-closed] status is closed")).toBeInTheDocument();
+  });
+
+  it("source status is red", async () => {
+    browserServicesMock.indexService.getIndices = jest.fn().mockResolvedValue({
+      ok: true,
+      response: {
+        indices: [
+          {
+            "docs.count": 5,
+            "docs.deleted": 2,
+            health: "red",
+            index: "index-source-red",
+            pri: "1",
+            "pri.store.size": "100KB",
+            rep: "0",
+            status: "open",
+            "store.size": "100KB",
+            uuid: "some_uuid",
+          },
+        ],
+      },
+    });
+    const { getByText, getAllByTestId, getByTestId } = renderWithRouter();
+
+    await waitFor(() => {
+      getByText("Configure source index");
+    });
+
+    userEvent.type(getAllByTestId("comboBoxSearchInput")[0], "index-source-red");
+    fireEvent.keyDown(getAllByTestId("comboBoxSearchInput")[0], { key: "ArrowDown", code: "ArrowDown" });
+    fireEvent.keyDown(getAllByTestId("comboBoxSearchInput")[0], { key: "Enter", code: "Enter" });
+
+    userEvent.click(getByTestId("reindexConfirmButton"));
+
+    await waitFor(() => {}, { timeout: 4000 });
+
+    expect(getByText("Index [index-source-red] health status is red.")).toBeInTheDocument();
+  });
+
+  it("source index _source is not enabled", async () => {
+    browserServicesMock.commonService.apiCaller = jest.fn().mockImplementation((args) => {
+      if (args.endpoint === "indices.getFieldMapping") {
+        return Promise.resolve({
+          ok: true,
+          response: {
+            "index-source": {
+              mappings: {
+                _source: {
+                  full_name: "_source",
+                  mapping: {
+                    _source: {
+                      enabled: false,
+                    },
+                  },
+                },
+              },
+            },
+          },
+        });
+      }
+    });
+    const { getByText, getAllByTestId, getByTestId } = renderWithRouter();
+
+    await waitFor(() => {
+      getByText("Configure source index");
+    });
+
+    await userEvent.type(getAllByTestId("comboBoxSearchInput")[0], "index-source");
+    fireEvent.keyDown(getAllByTestId("comboBoxSearchInput")[0], { key: "ArrowDown", code: "ArrowDown" });
+    fireEvent.keyDown(getAllByTestId("comboBoxSearchInput")[0], { key: "Enter", code: "Enter" });
+
+    userEvent.click(getByTestId("reindexConfirmButton"));
+
+    await waitFor(() => {}, { timeout: 4000 });
+
+    expect(getByText("Index [index-source] _sources is not enabled")).toBeInTheDocument();
+  });
+
+  it("destination is required", async () => {
+    const { getByText, getAllByTestId, getByTestId } = renderWithRouter();
+
+    await waitFor(() => {
+      getByText("Configure source index");
+    });
+    userEvent.type(getAllByTestId("comboBoxSearchInput")[0], "index-source");
+    await waitFor(() => {});
+    fireEvent.keyDown(getAllByTestId("comboBoxSearchInput")[0], { key: "ArrowDown", code: "ArrowDown" });
+    fireEvent.keyDown(getAllByTestId("comboBoxSearchInput")[0], { key: "Enter", code: "Enter" });
+
+    userEvent.click(getByTestId("reindexConfirmButton"));
+    await waitFor(() => {});
+    expect(getByText("Destination is required.")).toBeInTheDocument();
+  });
+
+  it("destination is closed", async () => {
+    const { getByText, getAllByTestId, getByTestId } = renderWithRouter();
+
+    await waitFor(() => {
+      getByText("Configure source index");
+    });
+    userEvent.type(getAllByTestId("comboBoxSearchInput")[0], "index-source");
+    await waitFor(() => {});
+    fireEvent.keyDown(getAllByTestId("comboBoxSearchInput")[0], { key: "ArrowDown", code: "ArrowDown" });
+    fireEvent.keyDown(getAllByTestId("comboBoxSearchInput")[0], { key: "Enter", code: "Enter" });
+
+    browserServicesMock.indexService.getIndices = jest.fn().mockResolvedValue({
+      ok: true,
+      response: {
+        indices: [
+          {
+            "docs.count": 5,
+            "docs.deleted": 2,
+            health: "green",
+            index: "index-dest",
+            pri: "1",
+            "pri.store.size": "100KB",
+            rep: "0",
+            status: "close",
+            "store.size": "100KB",
+            uuid: "some_uuid",
+          },
+        ],
+      },
+    });
+
+    userEvent.type(getAllByTestId("comboBoxSearchInput")[1], "index-dest");
+    await waitFor(() => {});
+    fireEvent.keyDown(getAllByTestId("comboBoxSearchInput")[1], { key: "ArrowDown", code: "ArrowDown" });
+    fireEvent.keyDown(getAllByTestId("comboBoxSearchInput")[1], { key: "Enter", code: "Enter" });
+    userEvent.click(getByTestId("reindexConfirmButton"));
+
+    await waitFor(() => {});
+
+    expect(getByText("Index [index-dest] status is closed")).toBeInTheDocument();
+  });
+
+  it("destination health status is red", async () => {
+    const { getByText, getAllByTestId, getByTestId } = renderWithRouter();
+
+    await waitFor(() => {
+      getByText("Configure source index");
+    });
+    userEvent.type(getAllByTestId("comboBoxSearchInput")[0], "index-source");
+    await waitFor(() => {});
+    fireEvent.keyDown(getAllByTestId("comboBoxSearchInput")[0], { key: "ArrowDown", code: "ArrowDown" });
+    fireEvent.keyDown(getAllByTestId("comboBoxSearchInput")[0], { key: "Enter", code: "Enter" });
+
+    browserServicesMock.indexService.getIndices = jest.fn().mockResolvedValue({
+      ok: true,
+      response: {
+        indices: [
+          {
+            "docs.count": 5,
+            "docs.deleted": 2,
+            health: "red",
+            index: "index-dest",
+            pri: "1",
+            "pri.store.size": "100KB",
+            rep: "0",
+            status: "open",
+            "store.size": "100KB",
+            uuid: "some_uuid",
+          },
+        ],
+      },
+    });
+
+    await userEvent.type(getAllByTestId("comboBoxSearchInput")[1], "index-dest");
+    await waitFor(() => {});
+    fireEvent.keyDown(getAllByTestId("comboBoxSearchInput")[1], { key: "ArrowDown", code: "ArrowDown" });
+    fireEvent.keyDown(getAllByTestId("comboBoxSearchInput")[1], { key: "Enter", code: "Enter" });
+
+    userEvent.click(getByTestId("reindexConfirmButton"));
+
+    await waitFor(() => {});
+    expect(getByText("Index [index-dest] health status is red.")).toBeInTheDocument();
+  });
+
+  it("destination alias must have writing index behind", async () => {
+    const { getByText, getAllByTestId, getByTestId } = renderWithRouter();
+
+    await waitFor(() => {
+      getByText("Configure source index");
+    });
+    userEvent.type(getAllByTestId("comboBoxSearchInput")[0], "index-source");
+    await waitFor(() => {});
+    fireEvent.keyDown(getAllByTestId("comboBoxSearchInput")[0], { key: "ArrowDown", code: "ArrowDown" });
+    fireEvent.keyDown(getAllByTestId("comboBoxSearchInput")[0], { key: "Enter", code: "Enter" });
+
+    // change to alias
+    userEvent.type(getAllByTestId("comboBoxSearchInput")[1], "alias-2");
+    await waitFor(() => {});
+    fireEvent.keyDown(getAllByTestId("comboBoxSearchInput")[1], { key: "ArrowDown", code: "ArrowDown" });
+    fireEvent.keyDown(getAllByTestId("comboBoxSearchInput")[1], { key: "Enter", code: "Enter" });
+
+    userEvent.click(getByTestId("reindexConfirmButton"));
+
+    await waitFor(() => {});
+    expect(getByText("Alias [alias-2] don't have writing index behind it")).toBeInTheDocument();
+  });
+
+  it("slices format validation", async () => {
+    const { getByText, getAllByTestId, getByTestId } = renderWithRouter();
+
+    await waitFor(() => {
+      getByText("Configure source index");
+    });
+    userEvent.type(getAllByTestId("comboBoxSearchInput")[0], "index-source");
+    await waitFor(() => {});
+    fireEvent.keyDown(getAllByTestId("comboBoxSearchInput")[0], { key: "ArrowDown", code: "ArrowDown" });
+    fireEvent.keyDown(getAllByTestId("comboBoxSearchInput")[0], { key: "Enter", code: "Enter" });
+
+    await userEvent.type(getAllByTestId("comboBoxSearchInput")[1], "index-dest");
+    await waitFor(() => {});
+    fireEvent.keyDown(getAllByTestId("comboBoxSearchInput")[1], { key: "ArrowDown", code: "ArrowDown" });
+    fireEvent.keyDown(getAllByTestId("comboBoxSearchInput")[1], { key: "Enter", code: "Enter" });
+
+    // open advanced settings
+    userEvent.click(getByTestId("advanceOptionToggle"));
+    // slices
+    userEvent.click(getByTestId("sliceEnabled"));
+    userEvent.click(getByText("Manually slice into subtasks"));
+    userEvent.type(getByTestId("slices"), "0");
+
+    await waitFor(() => {});
+    expect(getByText("Must be an integer greater than or equal to 2.")).toBeInTheDocument();
+  });
+
+  it("it goes to indices page when submit reindex successfully", async () => {
+    const { getByText, getAllByTestId, getByTestId } = renderWithRouter();
+
+    userEvent.type(getAllByTestId("comboBoxSearchInput")[0], "index-source");
+    await waitFor(() => {});
+    fireEvent.keyDown(getAllByTestId("comboBoxSearchInput")[0], { key: "ArrowDown", code: "ArrowDown" });
+    fireEvent.keyDown(getAllByTestId("comboBoxSearchInput")[0], { key: "Enter", code: "Enter" });
+
+    userEvent.type(getAllByTestId("comboBoxSearchInput")[1], "index-dest");
+    await waitFor(() => {});
+    fireEvent.keyDown(getAllByTestId("comboBoxSearchInput")[1], { key: "ArrowDown", code: "ArrowDown" });
+    fireEvent.keyDown(getAllByTestId("comboBoxSearchInput")[1], { key: "Enter", code: "Enter" });
+
+    userEvent.click(getByTestId("reindexConfirmButton"));
+
+    await waitFor(() => {});
+    expect(getByText(`location is: ${ROUTES.INDICES}`)).toBeInTheDocument();
+  });
+
+  it("call api failed", async () => {
+    browserServicesMock.indexService.getIndices = jest.fn().mockResolvedValue({
+      ok: false,
+      error: "service not available",
+    });
+    const { getByText, getByTestId } = renderWithRouter();
+
+    await waitFor(() => {
+      getByText("Configure source index");
+    });
+
+    userEvent.click(getByTestId("reindexConfirmButton"));
+
+    await waitFor(() => {});
+
+    expect(coreServicesMock.notifications.toasts.addDanger).toBeCalled();
+  });
+
+  it("show subset query editor", async () => {
+    const { getByText, getByTestId } = renderWithRouter();
+
+    await waitFor(() => {
+      getByText("Configure source index");
+    });
+
+    // click subset radio
+    userEvent.click(getByText("Reindex a subset of documents (Advanced)"));
+
+    expect(getByTestId("queryJsonEditor")).toBeVisible();
+  });
+
+  it("query DSL validation failed", async () => {
+    mockApi(true);
+    const { getByText, getByTestId, getAllByTestId } = renderWithRouter();
+
+    await waitFor(() => {
+      getByText("Configure source index");
+    });
+
+    userEvent.type(getAllByTestId("comboBoxSearchInput")[0], "index-source");
+    await waitFor(() => {});
+    fireEvent.keyDown(getAllByTestId("comboBoxSearchInput")[0], { key: "ArrowDown", code: "ArrowDown" });
+    fireEvent.keyDown(getAllByTestId("comboBoxSearchInput")[0], { key: "Enter", code: "Enter" });
+
+    await userEvent.type(getAllByTestId("comboBoxSearchInput")[1], "index-dest");
+    await waitFor(() => {});
+    fireEvent.keyDown(getAllByTestId("comboBoxSearchInput")[1], { key: "ArrowDown", code: "ArrowDown" });
+    fireEvent.keyDown(getAllByTestId("comboBoxSearchInput")[1], { key: "Enter", code: "Enter" });
+
+    // click subset radio
+    userEvent.click(getByText("Reindex a subset of documents (Advanced)"));
+    expect(getByTestId("queryJsonEditor")).toBeVisible();
+
+    userEvent.click(getByTestId("reindexConfirmButton"));
+
+    await waitFor(() => {
+      expect(getByText("Invalid query expression")).toBeInTheDocument();
+    });
+  });
+
+  it("advance settings toggle", async () => {
+    const { getByText, getByTestId } = renderWithRouter();
+
+    await waitFor(() => {
+      getByText("Configure source index");
+    });
+
+    // click advances settings
+    userEvent.click(getByTestId("advanceOptionToggle"));
+    await waitFor(() => {});
+
+    expect(browserServicesMock.commonService.apiCaller).toBeCalledWith({
+      endpoint: "ingest.getPipeline",
+    });
+  });
+});
diff --git a/public/pages/Reindex/container/Reindex/Reindex.tsx b/public/pages/Reindex/container/Reindex/Reindex.tsx
new file mode 100644
index 000000000..015dec41e
--- /dev/null
+++ b/public/pages/Reindex/container/Reindex/Reindex.tsx
@@ -0,0 +1,645 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiButton,
+  EuiButtonEmpty,
+  EuiButtonIcon,
+  EuiComboBoxOptionOption,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiLink,
+  EuiRadioGroup,
+  EuiSpacer,
+  EuiSwitchEvent,
+  EuiText,
+  EuiTitle,
+} from "@elastic/eui";
+import _ from "lodash";
+import React, { ChangeEvent, Component } from "react";
+import { CoreStart } from "opensearch-dashboards/public";
+import { CoreServicesContext } from "../../../../components/core_services";
+import { getErrorMessage } from "../../../../utils/helpers";
+import { IndexSelectItem, ReindexRequest, ReindexResponse } from "../../models/interfaces";
+import CustomFormRow from "../../../../components/CustomFormRow";
+import { ContentPanel } from "../../../../components/ContentPanel";
+import ReindexAdvancedOptions from "../../components/ReindexAdvancedOptions";
+import { BREADCRUMBS, ROUTES } from "../../../../utils/constants";
+import { CommonService, IndexService } from "../../../../services";
+import { RouteComponentProps } from "react-router-dom";
+import IndexSelect from "../../components/IndexSelect";
+import { DEFAULT_QUERY, REINDEX_ERROR_PROMPT, DEFAULT_SLICE } from "../../utils/constants";
+import JSONEditor from "../../../../components/JSONEditor";
+import { REQUEST } from "../../../../../utils/constants";
+import CreateIndexFlyout from "../../components/CreateIndexFlyout";
+import queryString from "query-string";
+import { parseIndexNames, checkDuplicate } from "../../utils/helper";
+import { jobSchedulerInstance } from "../../../../context/JobSchedulerContext";
+import { ReindexJobMetaData } from "../../../../models/interfaces";
+
+interface ReindexProps extends RouteComponentProps {
+  commonService: CommonService;
+  indexService: IndexService;
+}
+
+interface ReindexState {
+  indexOptions: EuiComboBoxOptionOption<IndexSelectItem>[];
+  sources: EuiComboBoxOptionOption<IndexSelectItem>[];
+  sourceErr: string[];
+  destination: EuiComboBoxOptionOption<IndexSelectItem>[];
+  destError: string | null;
+  subset: boolean;
+  sourceQuery: string;
+  sourceQueryErr?: string;
+  advancedSettingsOpen: boolean;
+  slices?: string;
+  sliceError?: string;
+  pipelines: EuiComboBoxOptionOption[];
+  selectedPipelines?: EuiComboBoxOptionOption[];
+  ignoreConflicts: boolean;
+  executing: boolean;
+  showCreateIndexFlyout: boolean;
+}
+
+export default class Reindex extends Component<ReindexProps, ReindexState> {
+  static contextType = CoreServicesContext;
+
+  constructor(props: ReindexProps) {
+    super(props);
+
+    this.state = {
+      sources: [],
+      indexOptions: [],
+      destination: [],
+      sourceQuery: DEFAULT_QUERY,
+      pipelines: [],
+      advancedSettingsOpen: false,
+      ignoreConflicts: false,
+      sourceErr: [],
+      destError: null,
+      subset: false,
+      executing: false,
+      showCreateIndexFlyout: false,
+    };
+  }
+
+  async componentDidMount() {
+    this.context.chrome.setBreadcrumbs([
+      BREADCRUMBS.INDEX_MANAGEMENT,
+      BREADCRUMBS.INDICES,
+      { ...BREADCRUMBS.REINDEX, href: `#${this.props.location.pathname}${this.props.location.search}` },
+    ]);
+
+    const { source } = queryString.parse(this.props.location.search);
+
+    if (typeof source === "string") {
+      const allOptions = await this.getIndexOptions(source);
+      const arr = source.split(",");
+      if (allOptions && allOptions.length > 0 && allOptions[0].options) {
+        const selectedSource = allOptions[0].options.filter((item) => arr.indexOf(item.label) !== -1);
+        await this.onSourceSelection(selectedSource);
+      }
+    }
+  }
+
+  getIndexOptions = async (searchValue: string, excludeDataStreamIndex?: boolean): Promise<EuiComboBoxOptionOption<IndexSelectItem>[]> => {
+    const { indexService } = this.props;
+    let options: EuiComboBoxOptionOption<IndexSelectItem>[] = [];
+    try {
+      let actualSearchValue = parseIndexNames(searchValue);
+
+      const [indexResponse, dataStreamResponse, aliasResponse] = await Promise.all([
+        indexService.getIndices({
+          from: 0,
+          size: 50, // max page size value
+          search: actualSearchValue.join(","),
+          indices: [actualSearchValue.join(",")],
+          sortDirection: "desc",
+          sortField: "index",
+          showDataStreams: !excludeDataStreamIndex,
+        }),
+        indexService.getDataStreams({ search: searchValue.trim() }),
+        indexService.getAliases({ search: searchValue.trim() }),
+      ]);
+      if (indexResponse.ok) {
+        const indices = indexResponse.response.indices.map((index) => ({
+          label: index.index,
+          value: { isIndex: true, status: index.status, health: index.health },
+        }));
+        options.push({ label: "indices", options: indices });
+      } else {
+        this.context.notifications.toasts.addDanger(indexResponse.error);
+      }
+
+      if (dataStreamResponse && dataStreamResponse.ok) {
+        const dataStreams = dataStreamResponse.response.dataStreams.map((ds) => ({
+          label: ds.name,
+          health: ds.status.toLowerCase(),
+          value: {
+            isDataStream: true,
+            indices: ds.indices.map((item) => item.index_name),
+            writingIndex: ds.indices
+              .map((item) => item.index_name)
+              .sort()
+              .reverse()[0],
+          },
+        }));
+        options.push({ label: "dataStreams", options: dataStreams });
+      }
+
+      if (aliasResponse && aliasResponse.ok) {
+        const aliases = _.uniq(aliasResponse.response.aliases.map((alias) => alias.alias))
+          // TODO system alias
+          .filter((alias) => !alias.startsWith("."))
+          .map((name) => {
+            const indexBelongsToAlias = aliasResponse.response.aliases.filter((alias) => alias.alias === name).map((alias) => alias.index);
+            let writingIndex = aliasResponse.response.aliases
+              .filter((alias) => alias.alias === name && alias.is_write_index === "true")
+              .map((alias) => alias.index);
+            if (writingIndex.length === 0 && indexBelongsToAlias.length === 1) {
+              // set writing index when there is only 1 index for alias
+              writingIndex = indexBelongsToAlias;
+            }
+            return {
+              label: name,
+              value: {
+                isAlias: true,
+                indices: indexBelongsToAlias,
+                writingIndex: writingIndex[0],
+              },
+            };
+          });
+        options.push({ label: "aliases", options: aliases });
+      } else {
+        this.context.notifications.toasts.addDanger(aliasResponse.error);
+      }
+    } catch (err) {
+      this.context.notifications.toasts.addDanger(getErrorMessage(err, "There was a problem fetching index options."));
+    }
+    return options;
+  };
+
+  getAllPipelines = async () => {
+    const { commonService } = this.props;
+    let pipelines: EuiComboBoxOptionOption[] = [];
+    const pipelineRes = await commonService.apiCaller({
+      endpoint: "ingest.getPipeline",
+    });
+    if (pipelineRes && pipelineRes.ok) {
+      pipelines = _.keys(pipelineRes.response).map((pipeline) => ({ label: pipeline }));
+    } else {
+      if (pipelineRes.error.indexOf("Not Found") === -1) {
+        throw new Error(pipelineRes?.error || "");
+      }
+    }
+    return pipelines;
+  };
+
+  onClickAction = async () => {
+    const { sourceQuery, destination, slices, selectedPipelines, ignoreConflicts, sources, subset } = this.state;
+
+    if (!(await this.validateSource(sources)) || !this.validateDestination(destination) || !this.validateSlices(slices)) {
+      return;
+    }
+    // validate query DSL
+    if (subset && !(await this.validateQueryDSL(sources, sourceQuery))) {
+      return;
+    }
+
+    const [isDestAsDataStream] = destination.map((dest) => dest.value?.isDataStream);
+
+    try {
+      this.setState({ executing: true });
+      let reindexReq: ReindexRequest = {
+        waitForCompletion: false,
+        slices: slices === undefined ? DEFAULT_SLICE : slices,
+        body: {
+          conflicts: ignoreConflicts ? "proceed" : "abort",
+          source: {
+            index: sources.map((item) => item.label).join(","),
+          },
+          dest: {
+            index: destination.map((item) => item.label)[0],
+            op_type: isDestAsDataStream ? "create" : "index",
+          },
+        },
+      };
+      // set query DSL
+      if (subset) {
+        Object.assign(reindexReq.body.source, JSON.parse(sourceQuery));
+      }
+      // set pipeline if available
+      if (selectedPipelines && selectedPipelines.length > 0) {
+        reindexReq.body.dest.pipeline = selectedPipelines[0].label;
+      }
+      await this.onReindexConfirm(reindexReq);
+      this.setState({ executing: false });
+      // back to indices page
+      this.onCancel();
+    } catch (error) {
+      this.context.notifications.toasts.addDanger(`Reindex operation error happened ${error}`);
+      this.setState({ executing: false });
+    }
+  };
+
+  onReindexConfirm = async (reindexRequest: ReindexRequest) => {
+    const res = await this.props.commonService.apiCaller<ReindexResponse>({
+      endpoint: "transport.request",
+      method: REQUEST.POST,
+      data: {
+        path: `_reindex?slices=${reindexRequest.slices}&wait_for_completion=${reindexRequest.waitForCompletion}`,
+        method: REQUEST.POST,
+        body: reindexRequest.body,
+      },
+    });
+    if (res && res.ok) {
+      // @ts-ignore
+      const toast = `Successfully started reindexing ${reindexRequest.body.source.index}.The reindexed index will be named ${reindexRequest.body.dest.index}.`;
+      const toastInstance = (this.context as CoreStart).notifications.toasts.addSuccess(toast, {
+        toastLifeTimeMs: 1000 * 60 * 60 * 24 * 5,
+      });
+      await jobSchedulerInstance.addJob({
+        type: "reindex",
+        extras: {
+          toastId: toastInstance.id,
+          sourceIndex: reindexRequest.body.source.index,
+          destIndex: reindexRequest.body.dest.index,
+          taskId: res.response.task,
+        },
+        interval: 30000,
+      } as ReindexJobMetaData);
+    } else {
+      this.context.notifications.toasts.addDanger(`Reindex operation error ${res?.error}`);
+    }
+  };
+
+  getAllSelectedIndices = (): string[] => {
+    const { sources } = this.state;
+    let result: string[] = [];
+    sources.forEach((item) => {
+      item.value?.isIndex && result.push(item.label);
+      item.value?.isAlias && item.value.indices && result.push(...item.value.indices);
+      item.value?.isDataStream && item.value.writingIndex && result.push(item.value.writingIndex);
+    });
+    return result;
+  };
+
+  // validation
+  validateDestination = (selectedOptions: EuiComboBoxOptionOption<IndexSelectItem>[]): boolean => {
+    const { sources } = this.state;
+    if (!selectedOptions || selectedOptions.length != 1) {
+      this.setState({ destError: REINDEX_ERROR_PROMPT.DEST_REQUIRED });
+      return false;
+    }
+
+    const [dest] = selectedOptions;
+    if (dest.value?.health === "red") {
+      this.setState({ destError: `Index [${dest.label}] ${REINDEX_ERROR_PROMPT.HEALTH_RED}` });
+      return false;
+    }
+
+    if (dest.value?.status === "close") {
+      this.setState({ destError: `Index [${dest.label}] status is closed` });
+      return false;
+    }
+
+    // if destination is alias, then it must have a writing index behind it
+    if (dest.value?.isAlias) {
+      if (!dest.value?.writingIndex) {
+        this.setState({ destError: `Alias [${dest.label}] don't have writing index behind it` });
+        return false;
+      }
+    }
+
+    const error = checkDuplicate(sources, selectedOptions);
+    if (error) {
+      this.setState({ destError: error });
+      return false;
+    }
+    return true;
+  };
+
+  validateSource = async (sourceIndices: EuiComboBoxOptionOption<IndexSelectItem>[]): Promise<boolean> => {
+    if (sourceIndices.length == 0) {
+      this.setState({ sourceErr: [REINDEX_ERROR_PROMPT.SOURCE_REQUIRED] });
+      return false;
+    }
+
+    let errors = [];
+
+    for (const source of sourceIndices) {
+      if (source.value?.health === "red") {
+        errors.push(`Index [${source.label}] ${REINDEX_ERROR_PROMPT.HEALTH_RED}`);
+      }
+    }
+
+    const { commonService } = this.props;
+
+    sourceIndices
+      .filter((item) => item.value?.status === "close")
+      .forEach((item) => {
+        errors.push(`Index [${item.label}] status is closed`);
+      });
+
+    // validate _source for non-closed indices only, closed index won't return the mapping
+    const res = await commonService.apiCaller({
+      endpoint: "indices.getFieldMapping",
+      data: {
+        fields: "_source",
+        index: sourceIndices
+          .filter((item) => item.value?.status !== "close")
+          .map((item) => item.label)
+          .join(","),
+      },
+    });
+    if (res && res.ok) {
+      for (const index of sourceIndices) {
+        const sourceEnabled = _.get(res.response, [index.label, "mappings", "_source", "mapping", "_source", "enabled"]);
+        if (sourceEnabled === false) {
+          errors.push(`Index [${index.label}] _sources is not enabled`);
+        }
+      }
+    } else {
+      this.context.notifications.toasts.addDanger(res?.error || "can't validate whether _source is enabled for source");
+    }
+
+    const error = checkDuplicate(sourceIndices, this.state.destination);
+    error && this.setState({ destError: error });
+
+    this.setState({ sourceErr: errors });
+    return errors.length === 0;
+  };
+
+  validateSlices = (slices?: string): boolean => {
+    if (slices === undefined || slices === "auto") return true;
+    const sliceRegex = /^[2-9][0-9]*$/;
+    if (!sliceRegex.test(slices)) {
+      this.setState({ sliceError: REINDEX_ERROR_PROMPT.SLICES_FORMAT_ERROR });
+      return false;
+    }
+    return true;
+  };
+
+  validateQueryDSL = async (sourceIndices: EuiComboBoxOptionOption<IndexSelectItem>[], queryString: string): Promise<boolean> => {
+    if (!queryString) return true;
+    const { commonService } = this.props;
+    const validateRes = await commonService.apiCaller({
+      endpoint: "indices.validateQuery",
+      data: {
+        index: sourceIndices.map((item) => item.label).join(","),
+        body: {
+          ...JSON.parse(queryString),
+        },
+      },
+    });
+    if (validateRes && validateRes.ok) {
+      // @ts-ignore
+      const valid = validateRes.response.valid;
+      if (!valid) {
+        this.setState({ sourceQueryErr: "Invalid query expression" });
+        return false;
+      }
+    }
+    return true;
+  };
+
+  onCancel = () => {
+    this.props.history.push(ROUTES.INDICES);
+  };
+
+  onCreateIndexSuccess = (indexName: string) => {
+    const option: EuiComboBoxOptionOption<IndexSelectItem>[] = [{ label: indexName, value: { isIndex: true } }];
+    this.setState({ destination: option, showCreateIndexFlyout: false, destError: null });
+  };
+
+  // onChange
+  onSourceSelection = async (selectedOptions: EuiComboBoxOptionOption<IndexSelectItem>[]) => {
+    this.setState({
+      sources: selectedOptions,
+      sourceErr: [],
+    });
+
+    await this.validateSource(selectedOptions);
+  };
+
+  onDestinationSelection = (selectedOptions: EuiComboBoxOptionOption<IndexSelectItem>[]) => {
+    this.setState({
+      destination: selectedOptions,
+      destError: null,
+    });
+
+    this.validateDestination(selectedOptions);
+  };
+
+  onSourceQueryChange = async (value: string) => {
+    this.setState({ sourceQuery: value, sourceQueryErr: undefined });
+    await this.validateQueryDSL(this.state.sources, value);
+  };
+
+  onSliceChange = (val?: string) => {
+    this.setState({ slices: val, sliceError: undefined });
+    this.validateSlices(val);
+  };
+
+  onPipelineChange = (selectedOptions: EuiComboBoxOptionOption[]) => {
+    this.setState({ selectedPipelines: selectedOptions });
+  };
+
+  onIgnoreConflictsChange = (e: ChangeEvent<HTMLInputElement>): void => {
+    this.setState({ ignoreConflicts: e.target.checked });
+  };
+
+  onSubsetChange = (event: EuiSwitchEvent) => {
+    this.setState({ subset: event.target.checked });
+  };
+
+  render() {
+    const { sources, destination, sourceQuery, destError, slices, sourceErr, advancedSettingsOpen, showCreateIndexFlyout } = this.state;
+    const { ignoreConflicts: ignoreConflicts, subset, executing, sourceQueryErr } = this.state;
+
+    const advanceTitle = (
+      <EuiFlexGroup gutterSize="none" justifyContent="flexStart" alignItems="center">
+        <EuiFlexItem grow={false}>
+          <EuiButtonIcon
+            iconType={advancedSettingsOpen ? "arrowDown" : "arrowRight"}
+            color="text"
+            data-test-subj="advanceOptionToggle"
+            onClick={() => {
+              this.setState({ advancedSettingsOpen: !this.state.advancedSettingsOpen });
+            }}
+            aria-label="drop down icon"
+          />
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiTitle size="s">
+            <h3>Advanced settings</h3>
+          </EuiTitle>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    );
+
+    const subTitleText = (
+      <EuiText color="subdued" size="s" style={{ padding: "5px 0px" }}>
+        <p style={{ fontWeight: 200 }}>
+          Use reindex to make extensive changes to your index. Reindex will copy data of the source index into another index.{" "}
+          <EuiLink href={this.context.docLinks.links.opensearch.reindexData.base} target="_blank" rel="noopener noreferrer">
+            Learn more.
+          </EuiLink>
+        </p>
+      </EuiText>
+    );
+
+    // expand data streams and aliases
+    const allSelectedIndices = this.getAllSelectedIndices();
+
+    return (
+      <div style={{ padding: "0px 50px" }}>
+        <EuiTitle size="l">
+          <h1>Reindex</h1>
+        </EuiTitle>
+        {subTitleText}
+        <EuiSpacer />
+
+        <ContentPanel title="Configure source index" titleSize="s">
+          <EuiSpacer />
+          <CustomFormRow
+            label="Specify source indexes or data streams"
+            isInvalid={sourceErr.length > 0}
+            error={sourceErr}
+            fullWidth
+            helpText="Specify one or more indexes or data streams you want to reindex from."
+          >
+            <IndexSelect
+              data-test-subj="sourceSelector"
+              getIndexOptions={this.getIndexOptions}
+              onSelectedOptions={this.onSourceSelection}
+              singleSelect={false}
+              selectedOption={sources}
+              excludeList={destination}
+            />
+          </CustomFormRow>
+
+          <EuiSpacer />
+          <CustomFormRow>
+            <EuiRadioGroup
+              options={[
+                {
+                  id: "all",
+                  label: "Reindex all documents",
+                },
+                {
+                  id: "subset",
+                  label: "Reindex a subset of documents (Advanced)",
+                },
+              ]}
+              idSelected={subset ? "subset" : "all"}
+              onChange={(id) => {
+                this.setState({ subset: id === "subset" });
+              }}
+              name="subsetOption"
+              data-test-subj="subsetOption"
+              legend={{
+                children: <span>Specify a reindex option</span>,
+              }}
+            />
+          </CustomFormRow>
+          <EuiSpacer />
+          {subset ? (
+            <CustomFormRow
+              fullWidth={true}
+              label="Query expression"
+              isInvalid={!!sourceQueryErr}
+              error={sourceQueryErr}
+              labelAppend={
+                <EuiText size="xs">
+                  <EuiLink href={this.context.docLinks.links.opensearch.queryDSL.base} target="_blank" rel="noopener noreferrer">
+                    Learn more about query DSL
+                  </EuiLink>
+                </EuiText>
+              }
+            >
+              <JSONEditor
+                mode="json"
+                width="100%"
+                value={sourceQuery}
+                onChange={this.onSourceQueryChange}
+                aria-label="Query DSL Editor"
+                height="200px"
+                data-test-subj="queryJsonEditor"
+              />
+            </CustomFormRow>
+          ) : null}
+        </ContentPanel>
+
+        <EuiSpacer />
+
+        <ContentPanel title="Configure destination index" titleSize="s">
+          <EuiSpacer />
+          <EuiFlexGroup alignItems="flexEnd">
+            <EuiFlexItem style={{ maxWidth: "400px" }}>
+              <CustomFormRow label="Specify a destination index or data stream" isInvalid={!!destError} error={destError}>
+                <IndexSelect
+                  data-test-subj="destinationSelector"
+                  getIndexOptions={this.getIndexOptions}
+                  onSelectedOptions={this.onDestinationSelection}
+                  singleSelect={true}
+                  selectedOption={destination}
+                  excludeDataStreamIndex={true}
+                  excludeList={sources}
+                  excludeSystemIndex={true}
+                />
+              </CustomFormRow>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiButton data-test-subj="createIndexButton" onClick={() => this.setState({ showCreateIndexFlyout: true })}>
+                Create index
+              </EuiButton>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </ContentPanel>
+
+        <EuiSpacer />
+
+        <ContentPanel title={advanceTitle}>
+          {advancedSettingsOpen && (
+            <ReindexAdvancedOptions
+              slices={slices}
+              onSlicesChange={this.onSliceChange}
+              sliceErr={this.state.sliceError}
+              getAllPipelines={this.getAllPipelines}
+              selectedPipelines={this.state.selectedPipelines}
+              onSelectedPipelinesChange={this.onPipelineChange}
+              ignoreConflicts={ignoreConflicts}
+              onIgnoreConflictsChange={this.onIgnoreConflictsChange}
+            />
+          )}
+        </ContentPanel>
+
+        <EuiSpacer />
+
+        <EuiFlexGroup alignItems="center" justifyContent="flexEnd">
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty onClick={this.onCancel} data-test-subj="reindexCancelButton">
+              Cancel
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiButton fill onClick={this.onClickAction} isLoading={executing} data-test-subj="reindexConfirmButton">
+              Reindex
+            </EuiButton>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+
+        {showCreateIndexFlyout ? (
+          <CreateIndexFlyout
+            onSubmitSuccess={this.onCreateIndexSuccess}
+            sourceIndices={allSelectedIndices}
+            onCloseFlyout={() => this.setState({ showCreateIndexFlyout: false })}
+          />
+        ) : null}
+      </div>
+    );
+  }
+}
diff --git a/public/pages/Reindex/container/Reindex/__snapshots__/Reindex.test.tsx.snap b/public/pages/Reindex/container/Reindex/__snapshots__/Reindex.test.tsx.snap
new file mode 100644
index 000000000..6c1940b57
--- /dev/null
+++ b/public/pages/Reindex/container/Reindex/__snapshots__/Reindex.test.tsx.snap
@@ -0,0 +1,449 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Reindex /> spec renders the component 1`] = `
+<div
+  style="padding: 0px 50px;"
+>
+  <h1
+    class="euiTitle euiTitle--large"
+  >
+    Reindex
+  </h1>
+  <div
+    class="euiText euiText--small"
+    style="padding: 5px 0px;"
+  >
+    <div
+      class="euiTextColor euiTextColor--subdued"
+    >
+      <p
+        style="font-weight: 200;"
+      >
+        Use reindex to make extensive changes to your index. Reindex will copy data of the source index into another index.
+         
+        <a
+          class="euiLink euiLink--primary"
+          href="https://opensearch.org/docs/latest/opensearch/reindex-data/"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          Learn more.
+          EuiIconMock
+          <span
+            class="euiScreenReaderOnly"
+          >
+            (opens in a new tab or window)
+          </span>
+        </a>
+      </p>
+    </div>
+  </div>
+  <div
+    class="euiSpacer euiSpacer--l"
+  />
+  <div
+    class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+    style="padding-left: 0px; padding-right: 0px;"
+  >
+    <div
+      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsFlexStart euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+      style="padding: 0px 10px;"
+    >
+      <div
+        class="euiFlexItem"
+      >
+        <h3
+          class="euiTitle euiTitle--small"
+        >
+          Configure source index
+        </h3>
+      </div>
+    </div>
+    <hr
+      class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
+    />
+    <div
+      style="padding: 0px 10px;"
+    >
+      <div
+        class="euiSpacer euiSpacer--l"
+      />
+      <div
+        class="euiFormRow euiFormRow--fullWidth"
+        id="some_html_id-row"
+      >
+        <div
+          class="euiFormRow__labelWrapper"
+        >
+          <label
+            aria-invalid="false"
+            class="euiFormLabel euiFormRow__label"
+            for="some_html_id"
+          >
+            Specify source indexes or data streams
+          </label>
+        </div>
+        <div
+          class="euiFormRow__fieldWrapper"
+        >
+          <div
+            class="euiFormHelpText euiFormRow__text"
+            style="padding-top: 0px; padding-bottom: 4px;"
+          >
+            Specify one or more indexes or data streams you want to reindex from.
+          </div>
+          <div>
+            <div
+              aria-expanded="false"
+              aria-haspopup="listbox"
+              class="euiComboBox"
+              data-test-subj="sourceSelector"
+              role="combobox"
+            >
+              <div
+                class="euiFormControlLayout"
+              >
+                <div
+                  class="euiFormControlLayout__childrenWrapper"
+                >
+                  <div
+                    class="euiComboBox__inputWrap euiComboBox__inputWrap-isClearable"
+                    data-test-subj="comboBoxInput"
+                    tabindex="-1"
+                  >
+                    <p
+                      class="euiComboBoxPlaceholder"
+                    >
+                      Type or select indexes,data streams or aliases
+                    </p>
+                    <div
+                      class="euiComboBox__input"
+                      style="font-size: 14px; display: inline-block;"
+                    >
+                      <input
+                        aria-controls=""
+                        data-test-subj="comboBoxSearchInput"
+                        role="textbox"
+                        style="box-sizing: content-box; width: 2px;"
+                        value=""
+                      />
+                      <div
+                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                      />
+                    </div>
+                  </div>
+                  <div
+                    class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                  >
+                    <button
+                      aria-label="Open list of options"
+                      class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                      data-test-subj="comboBoxToggleListButton"
+                      type="button"
+                    >
+                      EuiIconMock
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="euiSpacer euiSpacer--l"
+      />
+      <div
+        class="euiFormRow"
+        id="some_html_id-row"
+      >
+        <div
+          class="euiFormRow__fieldWrapper"
+        >
+          <fieldset
+            data-test-subj="subsetOption"
+          >
+            <legend
+              class="euiFormLegend"
+            >
+              <span>
+                Specify a reindex option
+              </span>
+            </legend>
+            <div
+              class="euiRadio euiRadioGroup__item"
+            >
+              <input
+                checked=""
+                class="euiRadio__input"
+                id="all"
+                name="subsetOption"
+                type="radio"
+                value=""
+              />
+              <div
+                class="euiRadio__circle"
+              />
+              <label
+                class="euiRadio__label"
+                for="all"
+              >
+                Reindex all documents
+              </label>
+            </div>
+            <div
+              class="euiRadio euiRadioGroup__item"
+            >
+              <input
+                class="euiRadio__input"
+                id="subset"
+                name="subsetOption"
+                type="radio"
+                value=""
+              />
+              <div
+                class="euiRadio__circle"
+              />
+              <label
+                class="euiRadio__label"
+                for="subset"
+              >
+                Reindex a subset of documents (Advanced)
+              </label>
+            </div>
+          </fieldset>
+        </div>
+      </div>
+      <div
+        class="euiSpacer euiSpacer--l"
+      />
+    </div>
+  </div>
+  <div
+    class="euiSpacer euiSpacer--l"
+  />
+  <div
+    class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+    style="padding-left: 0px; padding-right: 0px;"
+  >
+    <div
+      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsFlexStart euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+      style="padding: 0px 10px;"
+    >
+      <div
+        class="euiFlexItem"
+      >
+        <h3
+          class="euiTitle euiTitle--small"
+        >
+          Configure destination index
+        </h3>
+      </div>
+    </div>
+    <hr
+      class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
+    />
+    <div
+      style="padding: 0px 10px;"
+    >
+      <div
+        class="euiSpacer euiSpacer--l"
+      />
+      <div
+        class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
+      >
+        <div
+          class="euiFlexItem"
+          style="max-width: 400px;"
+        >
+          <div
+            class="euiFormRow"
+            id="some_html_id-row"
+          >
+            <div
+              class="euiFormRow__labelWrapper"
+            >
+              <label
+                aria-invalid="false"
+                class="euiFormLabel euiFormRow__label"
+                for="some_html_id"
+              >
+                Specify a destination index or data stream
+              </label>
+            </div>
+            <div
+              class="euiFormRow__fieldWrapper"
+            >
+              <div>
+                <div
+                  aria-expanded="false"
+                  aria-haspopup="listbox"
+                  class="euiComboBox"
+                  data-test-subj="destinationSelector"
+                  role="combobox"
+                >
+                  <div
+                    class="euiFormControlLayout"
+                  >
+                    <div
+                      class="euiFormControlLayout__childrenWrapper"
+                    >
+                      <div
+                        class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
+                        data-test-subj="comboBoxInput"
+                        tabindex="-1"
+                      >
+                        <p
+                          class="euiComboBoxPlaceholder"
+                        >
+                          Type or select indexes,data streams or aliases
+                        </p>
+                        <div
+                          class="euiComboBox__input"
+                          style="font-size: 14px; display: inline-block;"
+                        >
+                          <input
+                            aria-controls=""
+                            data-test-subj="comboBoxSearchInput"
+                            role="textbox"
+                            style="box-sizing: content-box; width: 2px;"
+                            value=""
+                          />
+                          <div
+                            style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                          />
+                        </div>
+                      </div>
+                      <div
+                        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                      >
+                        <button
+                          aria-label="Open list of options"
+                          class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                          data-test-subj="comboBoxToggleListButton"
+                          type="button"
+                        >
+                          EuiIconMock
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="euiFlexItem euiFlexItem--flexGrowZero"
+        >
+          <button
+            class="euiButton euiButton--primary"
+            data-test-subj="createIndexButton"
+            type="button"
+          >
+            <span
+              class="euiButtonContent euiButton__content"
+            >
+              <span
+                class="euiButton__text"
+              >
+                Create index
+              </span>
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="euiSpacer euiSpacer--l"
+  />
+  <div
+    class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+    style="padding-left: 0px; padding-right: 0px;"
+  >
+    <div
+      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsFlexStart euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+      style="padding: 0px 10px;"
+    >
+      <div
+        class="euiFlexItem"
+      >
+        <div
+          class="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+        >
+          <div
+            class="euiFlexItem euiFlexItem--flexGrowZero"
+          >
+            <button
+              aria-label="drop down icon"
+              class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+              data-test-subj="advanceOptionToggle"
+              type="button"
+            >
+              EuiIconMock
+            </button>
+          </div>
+          <div
+            class="euiFlexItem euiFlexItem--flexGrowZero"
+          >
+            <h3
+              class="euiTitle euiTitle--small"
+            >
+              Advanced settings
+            </h3>
+          </div>
+        </div>
+      </div>
+    </div>
+    <hr
+      class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
+    />
+  </div>
+  <div
+    class="euiSpacer euiSpacer--l"
+  />
+  <div
+    class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
+  >
+    <div
+      class="euiFlexItem euiFlexItem--flexGrowZero"
+    >
+      <button
+        class="euiButtonEmpty euiButtonEmpty--primary"
+        data-test-subj="reindexCancelButton"
+        type="button"
+      >
+        <span
+          class="euiButtonContent euiButtonEmpty__content"
+        >
+          <span
+            class="euiButtonEmpty__text"
+          >
+            Cancel
+          </span>
+        </span>
+      </button>
+    </div>
+    <div
+      class="euiFlexItem euiFlexItem--flexGrowZero"
+    >
+      <button
+        class="euiButton euiButton--primary euiButton--fill"
+        data-test-subj="reindexConfirmButton"
+        type="button"
+      >
+        <span
+          class="euiButtonContent euiButton__content"
+        >
+          <span
+            class="euiButton__text"
+          >
+            Reindex
+          </span>
+        </span>
+      </button>
+    </div>
+  </div>
+</div>
+`;
diff --git a/public/pages/Reindex/container/Reindex/index.ts b/public/pages/Reindex/container/Reindex/index.ts
new file mode 100644
index 000000000..f5699de32
--- /dev/null
+++ b/public/pages/Reindex/container/Reindex/index.ts
@@ -0,0 +1,7 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import Reindex from "./Reindex";
+
+export default Reindex;
diff --git a/public/pages/Reindex/index.ts b/public/pages/Reindex/index.ts
new file mode 100644
index 000000000..e3494a1f5
--- /dev/null
+++ b/public/pages/Reindex/index.ts
@@ -0,0 +1,8 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import Reindex from "./container/Reindex";
+
+export default Reindex;
diff --git a/public/pages/Reindex/models/interfaces.ts b/public/pages/Reindex/models/interfaces.ts
new file mode 100644
index 000000000..80fe5c3d2
--- /dev/null
+++ b/public/pages/Reindex/models/interfaces.ts
@@ -0,0 +1,39 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export interface ReindexRequest {
+  waitForCompletion: boolean;
+  slices?: number | string;
+  maxDocs?: number;
+  body: {
+    conflicts?: string;
+    source: {
+      index: string;
+      [key: string]: any;
+    };
+    dest: {
+      index: string;
+      pipeline?: string;
+      op_type?: string;
+    };
+  };
+  script?: {
+    source: string;
+    lang: string;
+  };
+}
+export interface ReindexResponse {
+  task: string;
+}
+
+export interface IndexSelectItem {
+  status?: string;
+  health?: string;
+  isIndex?: boolean;
+  isDataStream?: boolean;
+  isAlias?: boolean;
+  indices?: string[];
+  writingIndex?: string;
+}
diff --git a/public/pages/Reindex/utils/constants.ts b/public/pages/Reindex/utils/constants.ts
new file mode 100644
index 000000000..2f2376a84
--- /dev/null
+++ b/public/pages/Reindex/utils/constants.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const DATA_STREAM_REGEX = /^.ds-(.*)-\d{6}$/;
+
+export const DEFAULT_SLICE = "1";
+
+export const DEFAULT_QUERY = JSON.stringify({ query: { match_all: {} } }, null, 2);
+
+export const REINDEX_ERROR_PROMPT = {
+  DEST_REQUIRED: "Destination is required.",
+  SOURCE_REQUIRED: "Source is required.",
+  HEALTH_RED: "health status is red.",
+  SLICES_FORMAT_ERROR: "Must be an integer greater than or equal to 2.",
+};
diff --git a/public/pages/Reindex/utils/helper.test.ts b/public/pages/Reindex/utils/helper.test.ts
new file mode 100644
index 000000000..365585233
--- /dev/null
+++ b/public/pages/Reindex/utils/helper.test.ts
@@ -0,0 +1,102 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { checkDuplicate, filterOverlaps, parseIndexNames } from "./helper";
+import { IndexSelectItem } from "../models/interfaces";
+import { EuiComboBoxOptionOption } from "@elastic/eui";
+
+test("parse index names", () => {
+  expect(parseIndexNames("")).toEqual([]);
+  expect(parseIndexNames("test-index")).toEqual(["test-index"]);
+  expect(parseIndexNames("test-index,test-index-2")).toEqual(["test-index", "test-index-2"]);
+  expect(parseIndexNames("test-index,.ds-redis-logs-000001")).toEqual(["test-index", "redis-logs"]);
+  expect(parseIndexNames(".ds-redis-logs-000001,.ds-redis-logs-000001")).toEqual(["redis-logs", "redis-logs"]);
+  expect(parseIndexNames(".ds-nginx-logs-000001,.ds-redis-logs-000001")).toEqual(["nginx-logs", "redis-logs"]);
+  expect(parseIndexNames(".ds-abc-001")).toEqual([".ds-abc-001"]);
+});
+
+test("test check duplication for source and destination", () => {
+  const source = [{ label: "s1", value: { isIndex: true } }];
+  const dest = [{ label: "d1", value: { isIndex: true } }];
+  expect(checkDuplicate(source, dest)).toEqual(null);
+});
+
+test("test check duplication has duplication", () => {
+  const source = [{ label: "s1", value: { isIndex: true } }];
+  const dest = [{ label: "s1", value: { isIndex: true } }];
+  expect(checkDuplicate(source, dest)).toEqual(`Index [s1] both exists in source and destination`);
+});
+
+test("test check duplication for alias", () => {
+  let source: EuiComboBoxOptionOption<IndexSelectItem>[] = [{ label: "s1", value: { isIndex: true } }];
+  let dest: EuiComboBoxOptionOption<IndexSelectItem>[] = [
+    {
+      label: "a1",
+      value: { isAlias: true, writingIndex: "s2" },
+    },
+  ];
+  expect(checkDuplicate(source, dest)).toEqual(null);
+
+  dest = [{ label: "a1", value: { isAlias: true, writingIndex: "s1" } }];
+  expect(checkDuplicate(source, dest)).toEqual(`Index [s1] both exists in source and destination`);
+
+  source = [{ label: "a1", value: { isAlias: true, writingIndex: "s2", indices: ["s2"] } }];
+  dest = [{ label: "a1", value: { isAlias: true, writingIndex: "s2", indices: ["s2"] } }];
+  expect(checkDuplicate(source, dest)).toEqual(`Index [a1,s2] both exists in source and destination`);
+
+  source = [{ label: "a1", value: { isAlias: true, indices: ["s1", "s2"] } }];
+  dest = [{ label: "s2", value: { isIndex: true } }];
+  expect(checkDuplicate(source, dest)).toEqual(`Index [s2] both exists in source and destination`);
+});
+
+test("test check duplication for data streams", () => {
+  const source = [{ label: ".ds-test-0000001", value: { isIndex: true } }];
+  const dest = [
+    {
+      label: "test",
+      value: { isDataStream: true, indices: [".ds-test-0000002", ".ds-test-0000001"], writingIndex: ".ds-test-0000002" },
+    },
+  ];
+  expect(checkDuplicate(source, dest)).toEqual(null);
+});
+
+test("test filter overlap for indices", () => {
+  let list: EuiComboBoxOptionOption<IndexSelectItem>[] = [{ label: "indices", options: [{ label: "index-1", value: { isIndex: true } }] }];
+  let excludedList = [{ label: "index-1", value: { isIndex: true } }] as EuiComboBoxOptionOption<IndexSelectItem>[];
+  let result = filterOverlaps(list, excludedList);
+  expect(result[0].options?.length).toEqual(0);
+
+  list = [{ label: "indices", options: [{ label: "index-1", value: { isIndex: true } }] }];
+  excludedList = [{ label: "index-2", value: { isIndex: true } }] as EuiComboBoxOptionOption<IndexSelectItem>[];
+  result = filterOverlaps(list, excludedList);
+  expect(result[0].options?.length).toEqual(1);
+});
+
+test("test filter overlap for aliases", () => {
+  let list: EuiComboBoxOptionOption<IndexSelectItem>[] = [
+    { label: "aliases", options: [{ label: "alias-1", value: { isAlias: true, indices: ["test-1", "test-2"], writingIndex: "test-1" } }] },
+  ];
+  let excludedList = [{ label: "test-1", value: { isIndex: true } }] as EuiComboBoxOptionOption<IndexSelectItem>[];
+  let result = filterOverlaps(list, excludedList);
+  expect(result[0].options?.length).toEqual(0);
+
+  list = [{ label: "aliases", options: [{ label: "alias-1", value: { isAlias: true, indices: ["test-1", "test-2"] } }] }];
+  excludedList = [{ label: "test-1", value: { isIndex: true } }] as EuiComboBoxOptionOption<IndexSelectItem>[];
+  result = filterOverlaps(list, excludedList);
+  expect(result[0].options?.length).toEqual(1);
+});
+
+test("test filter overlap for data streams", () => {
+  const list: EuiComboBoxOptionOption<IndexSelectItem>[] = [
+    { label: "data streams", options: [{ label: "ds-1", value: { isDataStream: true, writingIndex: ".ds-ds-1-000001" } }] },
+  ];
+  let excludedList = [{ label: ".ds-ds-1-000001", value: { isIndex: true } }] as EuiComboBoxOptionOption<IndexSelectItem>[];
+  let result = filterOverlaps(list, excludedList);
+  expect(result[0].options?.length).toEqual(0);
+
+  excludedList = [{ label: "data streams", options: [{ label: "ds-1", value: { isDataStream: true, writingIndex: ".ds-ds-1-000001" } }] }];
+  result = filterOverlaps(list, excludedList);
+  expect(result[0].options?.length).toEqual(0);
+});
diff --git a/public/pages/Reindex/utils/helper.ts b/public/pages/Reindex/utils/helper.ts
new file mode 100644
index 000000000..582178077
--- /dev/null
+++ b/public/pages/Reindex/utils/helper.ts
@@ -0,0 +1,69 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { DATA_STREAM_REGEX } from "./constants";
+import { IndexSelectItem } from "../models/interfaces";
+import { EuiComboBoxOptionOption } from "@elastic/eui";
+import _ from "lodash";
+
+/**
+ * parse index names to extract data stream name if the index is a backing index of data stream,
+ * otherwise using whatever it is
+ *
+ * the reason for this is that GET _cat/indices/*.ds* will not return any result, it will need data stream name
+ * to pull all data stream indices
+ * @param indices
+ */
+export const parseIndexNames = (indices: string): string[] => {
+  let indexArray: string[] = [];
+  indices &&
+    indices.split(",").forEach((index) => {
+      // need extract data stream name first
+      if (DATA_STREAM_REGEX.test(index)) {
+        let match = index.match(DATA_STREAM_REGEX);
+        indexArray.push(match ? match[1] : index);
+      } else {
+        indexArray.push(index);
+      }
+    });
+  return indexArray;
+};
+
+export const checkDuplicate = (
+  sources: EuiComboBoxOptionOption<IndexSelectItem>[],
+  destination: EuiComboBoxOptionOption<IndexSelectItem>[]
+) => {
+  let expandedSource: string[] = [],
+    expandedDestination: string[] = [];
+  sources.forEach((item) => {
+    expandedSource.push(item.label);
+    item.value?.isAlias && item.value.indices && expandedSource.push(...item.value.indices);
+    item.value?.isDataStream && item.value.indices && expandedSource.push(...item.value.indices);
+  });
+
+  destination.forEach((item) => {
+    expandedDestination.push(item.label);
+    item.value?.isAlias && item.value.writingIndex && expandedDestination.push(item.value.writingIndex);
+    item.value?.isDataStream && item.value.writingIndex && expandedDestination.push(item.value.writingIndex);
+  });
+
+  const duplicate = _.intersection(expandedSource, expandedDestination);
+  if (duplicate.length > 0) {
+    return `Index [${duplicate.join(",")}] both exists in source and destination`;
+  }
+  return null;
+};
+
+export const filterOverlaps = (
+  list: EuiComboBoxOptionOption<IndexSelectItem>[],
+  excludeList?: EuiComboBoxOptionOption<IndexSelectItem>[]
+) => {
+  if (excludeList) {
+    list.map((it) => {
+      it.options = it.options?.filter((item) => !checkDuplicate(excludeList, [item]));
+    });
+  }
+  return list;
+};
diff --git a/public/pages/VisualCreatePolicy/components/FlyoutFooter/FlyoutFooter.tsx b/public/pages/VisualCreatePolicy/components/FlyoutFooter/FlyoutFooter.tsx
index 6ccde3c67..48ea74ad9 100644
--- a/public/pages/VisualCreatePolicy/components/FlyoutFooter/FlyoutFooter.tsx
+++ b/public/pages/VisualCreatePolicy/components/FlyoutFooter/FlyoutFooter.tsx
@@ -14,9 +14,10 @@ interface FlyoutFooterProps {
   onClickAction: () => void;
   save?: boolean;
   restore?: boolean;
+  text?: string;
 }
 
-const FlyoutFooter = ({ edit, action, disabledAction = false, onClickCancel, onClickAction, save, restore }: FlyoutFooterProps) => (
+const FlyoutFooter = ({ edit, action, disabledAction = false, onClickCancel, onClickAction, save, restore, text }: FlyoutFooterProps) => (
   <EuiFlexGroup justifyContent="flexEnd">
     <EuiFlexItem grow={false}>
       <EuiButtonEmpty onClick={onClickCancel} flush="left" data-test-subj="flyout-footer-cancel-button">
@@ -25,7 +26,7 @@ const FlyoutFooter = ({ edit, action, disabledAction = false, onClickCancel, onC
     </EuiFlexItem>
     <EuiFlexItem grow={false}>
       <EuiButton disabled={disabledAction} onClick={onClickAction} fill data-test-subj="flyout-footer-action-button">
-        {restore ? "Restore snapshot" : !save ? `${edit ? "Edit" : "Add"} ${action}` : save ? "Save" : "Create"}
+        {text ? text : restore ? "Restore snapshot" : !save ? `${edit ? "Edit" : "Add"} ${action}` : save ? "Save" : "Create"}
       </EuiButton>
     </EuiFlexItem>
   </EuiFlexGroup>
diff --git a/test/mocks/coreServicesMock.ts b/test/mocks/coreServicesMock.ts
index 3f2f435d8..0308450d7 100644
--- a/test/mocks/coreServicesMock.ts
+++ b/test/mocks/coreServicesMock.ts
@@ -23,6 +23,7 @@ const coreServicesMock = {
       opensearch: {
         reindexData: {
           base: "https://opensearch.org/docs/latest/opensearch/reindex-data/",
+          transform: "https://opensearch.org/docs/latest/opensearch/reindex-data/#transform-documents-during-reindexing",
         },
         queryDSL: {
           base: "https://opensearch.org/docs/opensearch/query-dsl/index/",