;
- });
- };
-
render() {
const isEdit = this.isEdit;
- const { indexDetail, isSubmitting, oldIndexDetail } = this.state;
return (
@@ -388,40 +53,13 @@ export default class CreateIndex extends Component{isEdit ? "Edit" : "Create"} index
- (this.indexDetailRef = ref)}
- isEdit={this.isEdit}
- value={indexDetail}
- oldValue={oldIndexDetail}
- onChange={this.onDetailChange}
- onSimulateIndexTemplate={this.onSimulateIndexTemplate}
- refreshOptions={(aliasName) =>
- this.props.commonService.apiCaller({
- endpoint: "cat.aliases",
- method: "GET",
- data: {
- format: "json",
- name: aliasName,
- expand_wildcards: "open",
- },
- })
- }
+ onCancel={this.onCancel}
+ onSubmitSuccess={() => this.props.history.push(ROUTES.INDICES)}
/>
-
-
-
-
-
- Cancel
-
-
-
-
- {isEdit ? "Update" : "Create"}
-
-
-
);
}
diff --git a/public/pages/CreateIndex/containers/IndexForm/IndexForm.test.tsx b/public/pages/CreateIndex/containers/IndexForm/IndexForm.test.tsx
new file mode 100644
index 000000000..ff7615f35
--- /dev/null
+++ b/public/pages/CreateIndex/containers/IndexForm/IndexForm.test.tsx
@@ -0,0 +1,310 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from "react";
+import { render, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import IndexForm, { IndexFormProps } from "./index";
+import { ServicesConsumer, ServicesContext } from "../../../../services";
+import { browserServicesMock, coreServicesMock, apiCallerMock } from "../../../../../test/mocks";
+import { BrowserServices } from "../../../../models/interfaces";
+import { IndicesUpdateMode } from "../../../../utils/constants";
+import { CoreServicesContext } from "../../../../components/core_services";
+
+apiCallerMock(browserServicesMock);
+
+function renderCreateIndexWithRouter(props: Omit) {
+ return {
+ ...render(
+
+
+
+ {(services: BrowserServices | null) => services && }
+
+
+
+ ),
+ };
+}
+
+describe(" spec", () => {
+ it("show a toast if getIndices gracefully fails", async () => {
+ const { getByText } = renderCreateIndexWithRouter({
+ index: "bad_index",
+ });
+
+ await waitFor(() => {
+ getByText("Update");
+ });
+ expect(coreServicesMock.notifications.toasts.addDanger).toHaveBeenCalledTimes(1);
+ expect(coreServicesMock.notifications.toasts.addDanger).toHaveBeenCalledWith("bad_error");
+ });
+
+ it("shows error for index name input when clicking create", async () => {
+ const { queryByText, getByText } = renderCreateIndexWithRouter({});
+
+ await waitFor(() => getByText("Define index"));
+
+ expect(queryByText("Index name can not be null.")).toBeNull();
+
+ userEvent.click(getByText("Create"));
+ await waitFor(() => {
+ expect(queryByText("Index name can not be null.")).not.toBeNull();
+ });
+ });
+
+ it("routes you back to indices and shows a success toast when successfully creating a index", async () => {
+ const { getByText, getByPlaceholderText, getByTestId } = renderCreateIndexWithRouter({});
+
+ await waitFor(() => {
+ getByText("Define index");
+ });
+
+ const indexNameInput = getByPlaceholderText("Please enter the name for your index");
+
+ userEvent.type(indexNameInput, `bad_index`);
+ userEvent.click(document.body);
+ await waitFor(() => {});
+ userEvent.clear(indexNameInput);
+ userEvent.type(indexNameInput, `good_index`);
+ userEvent.click(document.body);
+ await waitFor(() => {
+ expect(getByTestId("form-name-index.number_of_replicas").querySelector("input")).toHaveAttribute("value", "10");
+ });
+ userEvent.click(getByText("Create"));
+ await waitFor(() => {
+ expect(coreServicesMock.notifications.toasts.addSuccess).toHaveBeenCalledWith("[good_index] has been successfully created.");
+ });
+ });
+
+ it("shows a danger toast when getting graceful error from create index", async () => {
+ const { getByText, getByPlaceholderText } = renderCreateIndexWithRouter({});
+
+ await waitFor(() => getByText("Define index"));
+
+ userEvent.type(getByPlaceholderText("Please enter the name for your index"), `bad_index`);
+ userEvent.click(getByText("Create"));
+
+ await waitFor(() => {
+ expect(coreServicesMock.notifications.toasts.addDanger).toHaveBeenCalledWith("bad_index");
+ });
+ });
+
+ it("it shows detail and does not call any api when nothing modified", async () => {
+ const { getByText, getByTestId } = renderCreateIndexWithRouter({
+ index: "good_index",
+ });
+ await waitFor(() => getByText("Define index"));
+ userEvent.click(getByText("Update"));
+ await waitFor(() => {});
+ userEvent.click(getByTestId("change_diff_confirm-confirm"));
+
+ await waitFor(() => {
+ // it shows detail and does not call any api when nothing modified
+ expect(browserServicesMock.commonService.apiCaller).toBeCalledTimes(2);
+ });
+ });
+
+ it("shows detail info and update others", async () => {
+ const { getByText, getByTestId, getByTitle } = renderCreateIndexWithRouter({
+ index: "good_index",
+ });
+
+ await waitFor(() => getByText("Define index"));
+
+ userEvent.click(getByTitle("update_test_1").querySelector("button") as Element);
+ userEvent.type(getByTestId("comboBoxSearchInput"), "test_1{enter}");
+ userEvent.type(getByTestId("form-name-index.number_of_replicas").querySelector("input") as Element, "2");
+ userEvent.click(getByTestId("create index add field button"));
+ await waitFor(() => {});
+ await userEvent.clear(getByTestId("mapping-visual-editor-1-field-name"));
+ await userEvent.type(getByTestId("mapping-visual-editor-1-field-name"), "test_mapping_2");
+ await userEvent.click(document.body);
+ userEvent.click(getByText("Update"));
+ await waitFor(() => {});
+ userEvent.click(getByTestId("change_diff_confirm-confirm"));
+
+ await waitFor(() => {
+ expect(coreServicesMock.notifications.toasts.addSuccess).toBeCalledTimes(1);
+ expect(browserServicesMock.commonService.apiCaller).toBeCalledWith({
+ endpoint: "indices.updateAliases",
+ method: "PUT",
+ data: {
+ body: {
+ actions: [
+ {
+ remove: {
+ index: "good_index",
+ alias: "update_test_1",
+ },
+ },
+ {
+ add: {
+ index: "good_index",
+ alias: "test_1",
+ },
+ },
+ ],
+ },
+ },
+ });
+
+ expect(browserServicesMock.commonService.apiCaller).toBeCalledWith({
+ endpoint: "indices.putSettings",
+ method: "PUT",
+ data: {
+ index: "good_index",
+ flat_settings: true,
+ body: {
+ "index.number_of_replicas": "12",
+ },
+ },
+ });
+
+ expect(browserServicesMock.commonService.apiCaller).toBeCalledWith({
+ endpoint: "indices.putMapping",
+ method: "PUT",
+ data: {
+ index: "good_index",
+ body: {
+ properties: {
+ test_mapping_2: {
+ type: "text",
+ },
+ },
+ },
+ },
+ });
+ });
+ });
+
+ it("shows detail alias and update alias only", async () => {
+ const { getByText, getByTestId, getByTitle } = renderCreateIndexWithRouter({
+ index: "good_index",
+ mode: IndicesUpdateMode.alias,
+ });
+
+ await waitFor(() => {});
+
+ userEvent.click(getByTitle("update_test_1").querySelector("button") as Element);
+ userEvent.type(getByTestId("comboBoxSearchInput"), "test_1{enter}");
+ await waitFor(() => {});
+ userEvent.click(getByText("Update"));
+
+ await waitFor(() => {
+ // shows detail alias and update alias only
+ expect(coreServicesMock.notifications.toasts.addSuccess).toBeCalledTimes(1);
+ expect(browserServicesMock.commonService.apiCaller).toBeCalledWith({
+ endpoint: "indices.updateAliases",
+ method: "PUT",
+ data: {
+ body: {
+ actions: [
+ {
+ remove: {
+ index: "good_index",
+ alias: "update_test_1",
+ },
+ },
+ {
+ add: {
+ index: "good_index",
+ alias: "test_1",
+ },
+ },
+ ],
+ },
+ },
+ });
+ });
+ });
+
+ it("shows detail mappings and update mappings only", async () => {
+ const { getByText, getByTestId } = renderCreateIndexWithRouter({
+ index: "good_index",
+ mode: IndicesUpdateMode.mappings,
+ });
+
+ await waitFor(() => {});
+
+ userEvent.click(getByTestId("create index add field button"));
+ await waitFor(() => {});
+ await userEvent.clear(getByTestId("mapping-visual-editor-1-field-name"));
+ await userEvent.type(getByTestId("mapping-visual-editor-1-field-name"), "test_mapping_2");
+ await userEvent.click(document.body);
+ await waitFor(() => {});
+ userEvent.click(getByText("Update"));
+ await waitFor(() => {});
+ userEvent.click(getByTestId("change_diff_confirm-cancel"));
+ await waitFor(() => {});
+ userEvent.click(getByText("Update"));
+ await waitFor(() => {});
+ userEvent.click(getByTestId("change_diff_confirm-confirm"));
+
+ await waitFor(() => {
+ // shows detail settings and update settings only
+ expect(coreServicesMock.notifications.toasts.addSuccess).toBeCalledTimes(1);
+
+ expect(browserServicesMock.commonService.apiCaller).toBeCalledWith({
+ endpoint: "indices.putMapping",
+ method: "PUT",
+ data: {
+ index: "good_index",
+ body: {
+ properties: {
+ test_mapping_2: {
+ type: "text",
+ },
+ },
+ },
+ },
+ });
+ });
+ });
+
+ it("shows detail settings and update settings only", async () => {
+ const { getByText, getByTestId } = renderCreateIndexWithRouter({
+ index: "good_index",
+ mode: IndicesUpdateMode.settings,
+ });
+
+ await waitFor(() => {});
+
+ userEvent.type(getByTestId("form-name-index.number_of_replicas").querySelector("input") as Element, "2");
+ userEvent.click(getByText("Update"));
+ await waitFor(() => {});
+ userEvent.click(getByTestId("change_diff_confirm-confirm"));
+
+ await waitFor(() => {
+ expect(coreServicesMock.notifications.toasts.addSuccess).toBeCalledTimes(1);
+
+ expect(browserServicesMock.commonService.apiCaller).toBeCalledWith({
+ endpoint: "indices.putSettings",
+ method: "PUT",
+ data: {
+ index: "good_index",
+ flat_settings: true,
+ body: {
+ "index.number_of_replicas": "12",
+ },
+ },
+ });
+ });
+ });
+
+ it("it triggers onCancel when click cancel", async () => {
+ const onCancelMock = jest.fn();
+ const { getByText } = renderCreateIndexWithRouter({
+ index: "good_index",
+ onCancel: onCancelMock,
+ });
+ await waitFor(() => {});
+ userEvent.click(getByText("Cancel"));
+ await (() => {
+ expect(onCancelMock).toBeCalledTimes(1);
+ expect(onCancelMock).toBeCalledWith(undefined);
+ });
+ });
+});
diff --git a/public/pages/CreateIndex/containers/IndexForm/index.tsx b/public/pages/CreateIndex/containers/IndexForm/index.tsx
new file mode 100644
index 000000000..f05c480bd
--- /dev/null
+++ b/public/pages/CreateIndex/containers/IndexForm/index.tsx
@@ -0,0 +1,454 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { Component } from "react";
+import { EuiSpacer, EuiFlexGroup, EuiFlexItem, EuiButton, EuiButtonEmpty } from "@elastic/eui";
+import { get, set, differenceWith, isEqual } from "lodash";
+import { diffArrays } from "diff";
+import flattern from "flat";
+// eui depends on react-ace, so we can import react-ace here
+import { MonacoEditorDiffReact } from "../../../../components/MonacoEditor";
+import IndexDetail from "../../components/IndexDetail";
+import { IAliasAction, IndexItem, IndexItemRemote, MappingsProperties } from "../../../../../models/interfaces";
+import { BREADCRUMBS, IndicesUpdateMode } from "../../../../utils/constants";
+import { CoreServicesContext } from "../../../../components/core_services";
+import { IIndexDetailRef, IndexDetailProps } from "../../components/IndexDetail/IndexDetail";
+import { transformArrayToObject, transformObjectToArray } from "../../components/IndexMapping/IndexMapping";
+import { CommonService } from "../../../../services/index";
+import { ServerResponse } from "../../../../../server/models/types";
+import { Modal } from "../../../../components/Modal";
+
+export interface IndexFormProps {
+ index?: string;
+ mode?: IndicesUpdateMode;
+ commonService: CommonService;
+ onCancel?: () => void;
+ onSubmitSuccess?: () => void;
+}
+
+interface CreateIndexState {
+ indexDetail: IndexItem;
+ oldIndexDetail?: IndexItem;
+ isSubmitting: boolean;
+}
+
+export default class CreateIndex extends Component {
+ static contextType = CoreServicesContext;
+ state: CreateIndexState = {
+ isSubmitting: false,
+ indexDetail: {
+ index: "",
+ settings: {
+ "index.number_of_shards": 1,
+ "index.number_of_replicas": 1,
+ "index.refresh_interval": "1s",
+ },
+ mappings: {},
+ },
+ oldIndexDetail: undefined,
+ };
+
+ indexDetailRef: IIndexDetailRef | null = null;
+
+ get commonService() {
+ return this.props.commonService;
+ }
+
+ get index() {
+ return this.props.index;
+ }
+
+ get isEdit() {
+ return this.index !== undefined;
+ }
+
+ get mode() {
+ return this.props.mode;
+ }
+
+ componentDidMount = async (): Promise => {
+ const isEdit = this.isEdit;
+ if (isEdit) {
+ const response: ServerResponse> = await this.commonService.apiCaller({
+ endpoint: "indices.get",
+ data: {
+ index: this.index,
+ flat_settings: true,
+ },
+ });
+ if (response.ok) {
+ const payload = {
+ ...response.response[this.index || ""],
+ index: this.index,
+ };
+ set(payload, "mappings.properties", transformObjectToArray(get(payload, "mappings.properties", {})));
+
+ this.setState({
+ indexDetail: payload as IndexItem,
+ oldIndexDetail: JSON.parse(JSON.stringify(payload)),
+ });
+ } else {
+ this.context.notifications.toasts.addDanger(response.error);
+ }
+ }
+ this.context.chrome.setBreadcrumbs([
+ BREADCRUMBS.INDEX_MANAGEMENT,
+ BREADCRUMBS.INDICES,
+ isEdit ? BREADCRUMBS.EDIT_INDEX : BREADCRUMBS.CREATE_INDEX,
+ ]);
+ };
+
+ onCancel = () => {
+ this.props.onCancel && this.props.onCancel();
+ };
+
+ onDetailChange: IndexDetailProps["onChange"] = (value) => {
+ this.setState({
+ indexDetail: {
+ ...this.state.indexDetail,
+ ...value,
+ },
+ });
+ };
+
+ updateAlias = async (): Promise> => {
+ const { indexDetail, oldIndexDetail } = this.state;
+ const { index } = indexDetail;
+ // handle the alias here
+ const diffedAliasArrayes = diffArrays(Object.keys(oldIndexDetail?.aliases || {}), Object.keys(indexDetail.aliases || {}));
+ const aliasActions: IAliasAction[] = diffedAliasArrayes.reduce((total: IAliasAction[], current) => {
+ if (current.added) {
+ return [
+ ...total,
+ ...current.value.map((item) => ({
+ add: {
+ index,
+ alias: item,
+ },
+ })),
+ ];
+ } else if (current.removed) {
+ return [
+ ...total,
+ ...current.value.map((item) => ({
+ remove: {
+ index,
+ alias: item,
+ },
+ })),
+ ];
+ }
+
+ return total;
+ }, [] as IAliasAction[]);
+
+ // alias may have many unexpected errors, do that before update index settings.
+ if (aliasActions.length) {
+ return await this.commonService.apiCaller({
+ endpoint: "indices.updateAliases",
+ method: "PUT",
+ data: {
+ body: {
+ actions: aliasActions,
+ },
+ },
+ });
+ }
+
+ return Promise.resolve({
+ ok: true,
+ response: {},
+ });
+ };
+ updateSettings = async (): Promise> => {
+ const { indexDetail, oldIndexDetail } = this.state;
+ const { index } = indexDetail;
+
+ const newSettings = (indexDetail?.settings || {}) as Required["settings"];
+ const oldSettings = (oldIndexDetail?.settings || {}) as Required["settings"];
+ const differences = differenceWith(Object.entries(newSettings), Object.entries(oldSettings), isEqual);
+ if (!differences.length) {
+ return {
+ ok: true,
+ response: {},
+ };
+ }
+
+ const finalSettings = differences.reduce((total, current) => {
+ if (newSettings[current[0]] !== undefined) {
+ return {
+ ...total,
+ [current[0]]: newSettings[current[0]],
+ };
+ }
+
+ return total;
+ }, {});
+
+ return await this.commonService.apiCaller({
+ endpoint: "indices.putSettings",
+ method: "PUT",
+ data: {
+ index,
+ flat_settings: true,
+ // In edit mode, only dynamic settings can be modified
+ body: finalSettings,
+ },
+ });
+ };
+ updateMappings = async (): Promise> => {
+ const { indexDetail, oldIndexDetail } = this.state;
+ const { index } = indexDetail;
+ // handle the mappings here
+ const newMappingProperties = indexDetail?.mappings?.properties || [];
+ const diffedMappingArrayes = diffArrays(
+ (oldIndexDetail?.mappings?.properties || []).map((item) => item.fieldName),
+ newMappingProperties.map((item) => item.fieldName)
+ );
+ const newMappingFields: MappingsProperties = diffedMappingArrayes
+ .filter((item) => item.added)
+ .reduce((total, current) => [...total, ...current.value], [] as string[])
+ .map((current) => newMappingProperties.find((item) => item.fieldName === current) as MappingsProperties[number])
+ .filter((item) => item);
+
+ const newMappingSettings = transformArrayToObject(newMappingFields);
+
+ if (newMappingFields.length) {
+ return await this.commonService.apiCaller({
+ endpoint: "indices.putMapping",
+ method: "PUT",
+ data: {
+ index,
+ body: {
+ properties: newMappingSettings,
+ },
+ },
+ });
+ }
+
+ return Promise.resolve({
+ ok: true,
+ response: {},
+ });
+ };
+
+ chainPromise = async (promises: Promise>[]): Promise> => {
+ const newPromises = [...promises];
+ while (newPromises.length) {
+ const result = (await newPromises.shift()) as ServerResponse;
+ if (!result?.ok) {
+ return result;
+ }
+ }
+
+ return {
+ ok: true,
+ response: {},
+ };
+ };
+
+ getOrderedJson = (json: Record) => {
+ const entries = Object.entries(json);
+ entries.sort((a, b) => (a[0] < b[0] ? -1 : 1));
+ return entries.reduce((total, [key, value]) => ({ ...total, [key]: value }), {});
+ };
+
+ showDiff = async (): Promise> => {
+ return new Promise((resolve, reject) => {
+ if (this.mode === IndicesUpdateMode.alias) {
+ resolve({
+ ok: true,
+ response: {},
+ });
+ return;
+ }
+ Modal.show({
+ title: "Please confirm the change.",
+ "data-test-subj": "change_diff_confirm",
+ type: "confirm",
+ maxWidth: "100%",
+ style: {
+ width: "70vw",
+ },
+ content: (
+ <>
+ The following changes will be done once you click the confirm button, Please make sure you want to do all the changes.
+
+
+
+ ),
+ onOk: () =>
+ resolve({
+ ok: true,
+ response: {},
+ }),
+ onCancel: () => {
+ resolve({
+ ok: false,
+ error: "",
+ });
+ },
+ });
+ });
+ };
+
+ onSubmit = async (): Promise => {
+ const mode = this.mode;
+ const { indexDetail } = this.state;
+ const { index, mappings, ...others } = indexDetail;
+ if (!(await this.indexDetailRef?.validate())) {
+ return;
+ }
+ this.setState({ isSubmitting: true });
+ let result: ServerResponse;
+ if (this.isEdit) {
+ const diffConfirm = await this.showDiff();
+ if (!diffConfirm.ok) {
+ this.setState({ isSubmitting: false });
+ return;
+ }
+ let chainedPromises: Promise>[] = [];
+ if (!mode) {
+ chainedPromises.push(...[this.updateMappings(), this.updateAlias(), this.updateSettings()]);
+ } else {
+ switch (mode) {
+ case IndicesUpdateMode.alias:
+ chainedPromises.push(this.updateAlias());
+ break;
+ case IndicesUpdateMode.settings:
+ chainedPromises.push(this.updateSettings());
+ break;
+ case IndicesUpdateMode.mappings:
+ chainedPromises.push(this.updateMappings());
+ break;
+ }
+ }
+ result = await this.chainPromise(chainedPromises);
+ } else {
+ result = await this.commonService.apiCaller({
+ endpoint: "indices.create",
+ method: "PUT",
+ data: {
+ index,
+ body: {
+ ...others,
+ mappings: {
+ properties: transformArrayToObject(mappings?.properties || []),
+ },
+ },
+ },
+ });
+ }
+ this.setState({ isSubmitting: false });
+
+ // handle all the response here
+ if (result && result.ok) {
+ this.context.notifications.toasts.addSuccess(`[${indexDetail.index}] has been successfully ${this.isEdit ? "updated" : "created"}.`);
+ this.props.onSubmitSuccess && this.props.onSubmitSuccess();
+ } else {
+ this.context.notifications.toasts.addDanger(result.error);
+ }
+ };
+
+ onSimulateIndexTemplate = (indexName: string): Promise> => {
+ return this.commonService
+ .apiCaller<{ template: IndexItemRemote }>({
+ endpoint: "transport.request",
+ data: {
+ path: `/_index_template/_simulate_index/${indexName}`,
+ method: "POST",
+ },
+ })
+ .then((res) => {
+ if (res.ok && res.response && res.response.template) {
+ return {
+ ...res,
+ response: {
+ ...res.response.template,
+ settings: flattern(res.response.template?.settings || {}),
+ },
+ };
+ }
+
+ return {
+ ok: false,
+ error: "",
+ } as ServerResponse;
+ });
+ };
+
+ render() {
+ const isEdit = this.isEdit;
+ const { indexDetail, isSubmitting, oldIndexDetail } = this.state;
+
+ return (
+ <>
+ (this.indexDetailRef = ref)}
+ isEdit={this.isEdit}
+ value={indexDetail}
+ oldValue={oldIndexDetail}
+ onChange={this.onDetailChange}
+ onSimulateIndexTemplate={this.onSimulateIndexTemplate}
+ refreshOptions={(aliasName) =>
+ this.commonService.apiCaller({
+ endpoint: "cat.aliases",
+ method: "GET",
+ data: {
+ format: "json",
+ name: aliasName,
+ expand_wildcards: "open",
+ },
+ })
+ }
+ />
+
+
+
+
+
+ Cancel
+
+
+
+
+ {isEdit ? "Update" : "Create"}
+
+
+
+
+ );
+ }
+}
diff --git a/public/pages/Indices/components/ShrinkIndexFlyout/__snapshots__/ShrinkIndexFlyout.test.tsx.snap b/public/pages/Indices/components/ShrinkIndexFlyout/__snapshots__/ShrinkIndexFlyout.test.tsx.snap
index 8275aeba4..8bfc7bbd9 100644
--- a/public/pages/Indices/components/ShrinkIndexFlyout/__snapshots__/ShrinkIndexFlyout.test.tsx.snap
+++ b/public/pages/Indices/components/ShrinkIndexFlyout/__snapshots__/ShrinkIndexFlyout.test.tsx.snap
@@ -233,24 +233,28 @@ HTMLCollection [
>
The number of primary shards in the new shrunken index.
-
+
Must be a multi of undefined
-
+
spec", () => {
+ const onUpdateSuccessMock = jest.fn();
it("render the component", async () => {
- browserServicesMock.commonService.apiCaller = jest.fn().mockResolvedValue({
- ok: true,
- response: {
- test_index: {
- aliases: {},
- mappings: {},
- settings: {
- index: {
- number_of_shards: "1",
- number_of_replicas: "1",
- provided_name: "test_index",
- },
- },
- },
- },
- });
- const { container, getByTestId } = renderWithRouter({
+ const { container, getByTestId, getByDisplayValue } = renderWithRouter({
index: "test_index",
record: {
"docs.count": "5",
@@ -64,6 +50,10 @@ describe("container spec", () => {
data_stream: "",
},
onDelete: () => null,
+ onUpdateIndex: onUpdateSuccessMock,
+ onClose: () => null,
+ onOpen: () => null,
+ onShrink: () => null,
});
await waitFor(() => {
@@ -82,5 +72,14 @@ describe("container spec", () => {
},
});
});
+
+ userEvent.click(document.getElementById("index-detail-modal-alias") as Element);
+ await waitFor(() => {
+ expect(getByDisplayValue("test_index")).not.toBeNull();
+ });
+ userEvent.click(getByTestId("createIndexCreateButton"));
+ await waitFor(() => {
+ expect(onUpdateSuccessMock).toBeCalledTimes(1);
+ });
});
});
diff --git a/public/pages/Indices/containers/IndexDetail/index.tsx b/public/pages/Indices/containers/IndexDetail/index.tsx
index d2d7cd050..e0e88feb5 100644
--- a/public/pages/Indices/containers/IndexDetail/index.tsx
+++ b/public/pages/Indices/containers/IndexDetail/index.tsx
@@ -3,7 +3,7 @@
* SPDX-License-Identifier: Apache-2.0
*/
-import React, { useContext, useEffect, useMemo, useState } from "react";
+import React, { useCallback, useContext, useEffect, useMemo, useState } from "react";
import {
EuiButtonEmpty,
EuiCopy,
@@ -11,17 +11,11 @@ import {
EuiDescriptionList,
EuiDescriptionListTitle,
EuiDescriptionListDescription,
- EuiFlexGrid,
- EuiFlexItem,
EuiSpacer,
- EuiFlexGroup,
- EuiButton,
- EuiBasicTable,
EuiFlyout,
EuiFlyoutHeader,
EuiTitle,
EuiFlyoutBody,
- EuiCodeBlock,
} from "@elastic/eui";
import { get } from "lodash";
import { Link } from "react-router-dom";
@@ -31,10 +25,12 @@ import { ManagedCatIndex } from "../../../../../server/models/interfaces";
import { IndicesUpdateMode, ROUTES } from "../../../../utils/constants";
import { ServicesContext } from "../../../../services";
import { BrowserServices } from "../../../../models/interfaces";
+import IndexForm from "../../../CreateIndex/containers/IndexForm";
-export interface IndexDetailModalProps extends Pick {
+export interface IndexDetailModalProps extends Omit {
index: string;
record: ManagedCatIndex;
+ onUpdateIndex: () => void;
}
interface IFinalDetail extends ManagedCatIndex, IndexItem {}
@@ -57,7 +53,7 @@ const OVERVIEW_DISPLAY_INFO: {
},
{
label: "Creation date",
- value: ({ detail }) => {new Date(parseInt(detail.settings?.index.creation_date || "0")).toLocaleString()},
+ value: ({ detail }) => {new Date(parseInt(detail.settings?.index?.creation_date || "0")).toLocaleString()},
},
{
label: "Total size",
@@ -94,7 +90,7 @@ const OVERVIEW_DISPLAY_INFO: {
return (
{blocks.map(([key, value]) => (
- - {key}
+ - {key}
))}
);
@@ -111,7 +107,7 @@ const OVERVIEW_DISPLAY_INFO: {
];
export default function IndexDetail(props: IndexDetailModalProps) {
- const { index, record, onDelete } = props;
+ const { index, record, onUpdateIndex, ...others } = props;
const [visible, setVisible] = useState(false);
const [detail, setDetail] = useState({} as IndexItem);
const finalDetail: IFinalDetail = useMemo(
@@ -149,6 +145,21 @@ export default function IndexDetail(props: IndexDetailModalProps) {
});
}
}, [visible]);
+
+ const onCloseFlyout = useCallback(() => {
+ setVisible(false);
+ }, [setVisible]);
+
+ const indexFormCommonProps = {
+ index: props.index,
+ commonService: services.commonService,
+ onCancel: onCloseFlyout,
+ onSubmitSuccess: () => {
+ onCloseFlyout();
+ onUpdateIndex();
+ },
+ };
+
return (
<>
@@ -158,14 +169,13 @@ export default function IndexDetail(props: IndexDetailModalProps) {
{index}
{visible ? (
- setVisible(false)} hideCloseButton>
+
{index}
- {/* {index} */}
-
+
@@ -209,22 +219,7 @@ export default function IndexDetail(props: IndexDetailModalProps) {
content: (
<>
-
-
- Advanced index settings
-
-
-
-
- Edit
-
-
-
-
-
-
- {JSON.stringify(finalDetail.settings || {}, null, 2)}
-
+
),
},
@@ -234,22 +229,7 @@ export default function IndexDetail(props: IndexDetailModalProps) {
content: (
<>
-
-
- Index mappings
-
-
-
-
- Edit
-
-
-
-
-
-
- {JSON.stringify(finalDetail.mappings || {}, null, 2)}
-
+
),
},
@@ -259,31 +239,7 @@ export default function IndexDetail(props: IndexDetailModalProps) {
content: (
<>
-
-
- Index alias
-
-
-
-
- Edit
-
-
-
-
-
- ({ alias: item }))}
- columns={[
- {
- field: "alias",
- name: "Alias name",
- render: (val: string, record: { alias: string }) => {val},
- },
- ]}
- />
+
),
},
diff --git a/public/pages/Indices/containers/Indices/Indices.tsx b/public/pages/Indices/containers/Indices/Indices.tsx
index 0571dd8f5..7be690553 100644
--- a/public/pages/Indices/containers/Indices/Indices.tsx
+++ b/public/pages/Indices/containers/Indices/Indices.tsx
@@ -113,7 +113,14 @@ export default class Indices extends Component {
if (getIndicesResponse.ok) {
const { indices, totalIndices } = getIndicesResponse.response;
- this.setState({ indices, totalIndices });
+ const payload = {
+ indices,
+ totalIndices,
+ selectedItems: this.state.selectedItems
+ .map((item) => indices.find((remoteItem) => remoteItem.index === item.index))
+ .filter((item) => item),
+ } as IndicesState;
+ this.setState(payload);
} else {
this.context.notifications.toasts.addDanger(getIndicesResponse.error);
}
@@ -260,6 +267,7 @@ export default class Indices extends Component {
onClose: this.getIndices,
onShrink: this.getIndices,
onReindex: this.getIndices,
+ onUpdateIndex: this.getIndices,
})}
isSelectable={true}
itemId="index"
diff --git a/public/pages/Indices/containers/IndicesActions/IndicesActions.test.tsx b/public/pages/Indices/containers/IndicesActions/IndicesActions.test.tsx
index cfe97a7d3..baa80c3a7 100644
--- a/public/pages/Indices/containers/IndicesActions/IndicesActions.test.tsx
+++ b/public/pages/Indices/containers/IndicesActions/IndicesActions.test.tsx
@@ -274,7 +274,7 @@ describe(" spec", () => {
await waitFor(() => {
expect(browserServicesMock.commonService.apiCaller).toHaveBeenCalledTimes(2);
expect(coreServicesMock.notifications.toasts.addSuccess).toHaveBeenCalledTimes(1);
- expect(coreServicesMock.notifications.toasts.addSuccess).toHaveBeenCalledWith("Delete successfully");
+ expect(coreServicesMock.notifications.toasts.addSuccess).toHaveBeenCalledWith("Delete [test_index] successfully");
expect(onDelete).toHaveBeenCalledTimes(1);
});
});
diff --git a/public/pages/Indices/containers/IndicesActions/index.tsx b/public/pages/Indices/containers/IndicesActions/index.tsx
index 452a35ee8..abdf524a3 100644
--- a/public/pages/Indices/containers/IndicesActions/index.tsx
+++ b/public/pages/Indices/containers/IndicesActions/index.tsx
@@ -22,8 +22,8 @@ import ShrinkIndexFlyout from "../../components/ShrinkIndexFlyout";
import { getErrorMessage } from "../../../../utils/helpers";
import ReindexFlyout from "../../components/ReindexFlyout";
import SplitIndexFlyout from "../../components/SplitIndexFlyout";
-import {IndexItem} from "../../../../../models/interfaces";
-import {ServerResponse} from "../../../../../server/models/types";
+import { IndexItem } from "../../../../../models/interfaces";
+import { ServerResponse } from "../../../../../server/models/types";
export interface IndicesActionsProps {
selectedItems: ManagedCatIndex[];
@@ -50,14 +50,15 @@ export default function IndicesActions(props: IndicesActionsProps) {
};
const onDeleteIndexModalConfirm = useCallback(async () => {
+ const indexPayload = selectedItems.map((item) => item.index).join(",");
const result = await services.commonService.apiCaller({
endpoint: "indices.delete",
data: {
- index: selectedItems.map((item) => item.index).join(","),
+ index: indexPayload,
},
});
if (result && result.ok) {
- coreServices.notifications.toasts.addSuccess("Delete successfully");
+ coreServices.notifications.toasts.addSuccess(`Delete [${indexPayload}] successfully`);
onDeleteIndexModalClose();
onDelete();
} else {
@@ -78,7 +79,7 @@ export default function IndicesActions(props: IndicesActionsProps) {
target: targetIndex,
body: {
settings: {
- ...settingsPayload
+ ...settingsPayload,
},
},
},
@@ -88,8 +89,9 @@ export default function IndicesActions(props: IndicesActionsProps) {
onDelete();
onCloseFlyout();
} else {
- coreServices.notifications.toasts.addDanger(result?.error ||
- "There was a problem submit split index request, please check with admin");
+ coreServices.notifications.toasts.addDanger(
+ result?.error || "There was a problem submit split index request, please check with admin"
+ );
}
};
@@ -175,7 +177,7 @@ export default function IndicesActions(props: IndicesActionsProps) {
);
const getIndexSettings = async (indexName: string, flat: boolean): Promise> => {
- const result : ServerResponse> = await services.commonService.apiCaller({
+ const result: ServerResponse> = await services.commonService.apiCaller({
endpoint: "indices.getSettings",
data: {
index: indexName,
@@ -282,8 +284,7 @@ export default function IndicesActions(props: IndicesActionsProps) {
{
name: "Split",
"data-test-subj": "Split Action",
- disabled: !selectedItems.length
- || selectedItems.length > 1,
+ disabled: !selectedItems.length || selectedItems.length > 1,
onClick: () => setSplitIndexFlyoutVisible(true),
},
{
@@ -338,14 +339,15 @@ export default function IndicesActions(props: IndicesActionsProps) {
/>
)}
- {splitIndexFlyoutVisible &&
+ {splitIndexFlyoutVisible && (
}
+ />
+ )}
);
}
diff --git a/public/pages/Indices/utils/constants.tsx b/public/pages/Indices/utils/constants.tsx
index 77eeac269..f21577b73 100644
--- a/public/pages/Indices/utils/constants.tsx
+++ b/public/pages/Indices/utils/constants.tsx
@@ -5,7 +5,7 @@
import React from "react";
import { EuiHealth, EuiTableFieldDataColumnType } from "@elastic/eui";
-import IndexDetail from "../containers/IndexDetail";
+import IndexDetail, { IndexDetailModalProps } from "../containers/IndexDetail";
import { IndicesActionsProps } from "../containers/IndicesActions";
import { ManagedCatIndex } from "../../../../server/models/interfaces";
import { SortDirection } from "../../../utils/constants";
@@ -32,7 +32,7 @@ const HEALTH_TO_COLOR: {
red: "danger",
};
-interface IColumnOptions extends Omit {}
+interface IColumnOptions extends Omit, Pick {}
const getColumns = (props: IColumnOptions): EuiTableFieldDataColumnType[] => {
return [
diff --git a/test/mocks/index.ts b/test/mocks/index.ts
index df4405a77..47bf18162 100644
--- a/test/mocks/index.ts
+++ b/test/mocks/index.ts
@@ -9,4 +9,100 @@ import httpClientMock from "./httpClientMock";
import styleMock from "./styleMock";
import coreServicesMock from "./coreServicesMock";
-export { browserServicesMock, historyMock, httpClientMock, styleMock, coreServicesMock };
+const apiCallerMock = (browserServicesMockObject: typeof browserServicesMock) => {
+ browserServicesMockObject.commonService.apiCaller = jest.fn(
+ async (payload): Promise => {
+ switch (payload.endpoint) {
+ case "transport.request": {
+ if (payload.data?.path?.startsWith("/_index_template/_simulate_index/bad_index")) {
+ return {
+ ok: true,
+ response: {},
+ };
+ } else {
+ return {
+ ok: true,
+ response: {
+ template: {
+ settings: {
+ index: {
+ number_of_replicas: "10",
+ },
+ },
+ },
+ },
+ };
+ }
+ }
+ case "indices.create":
+ if (payload.data?.index === "bad_index") {
+ return {
+ ok: false,
+ error: "bad_index",
+ };
+ }
+
+ return {
+ ok: true,
+ response: {},
+ };
+ break;
+ case "cat.aliases":
+ return {
+ ok: true,
+ response: [
+ {
+ alias: ".kibana",
+ index: ".kibana_1",
+ filter: "-",
+ is_write_index: "-",
+ },
+ {
+ alias: "2",
+ index: "1234",
+ filter: "-",
+ is_write_index: "-",
+ },
+ ],
+ };
+ case "indices.get":
+ const payloadIndex = payload.data?.index;
+ if (payloadIndex === "bad_index") {
+ return {
+ ok: false,
+ error: "bad_error",
+ response: {},
+ };
+ }
+
+ return {
+ ok: true,
+ response: {
+ [payload.data?.index]: {
+ aliases: {
+ update_test_1: {},
+ },
+ mappings: {
+ properties: {
+ test_mapping_1: {
+ type: "text",
+ },
+ },
+ },
+ settings: {
+ "index.number_of_shards": "1",
+ "index.number_of_replicas": "1",
+ },
+ },
+ },
+ };
+ }
+ return {
+ ok: true,
+ response: {},
+ };
+ }
+ );
+};
+
+export { browserServicesMock, historyMock, httpClientMock, styleMock, coreServicesMock, apiCallerMock };