Feature: Alias management

cypress/integration/aliases.js

@@ -0,0 +1,116 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { PLUGIN_NAME } from "../support/constants";
+
+const SAMPLE_INDEX_PREFIX = "index-for-alias-test";
+const SAMPLE_ALIAS_PREFIX = "alias-for-test";
+const CREATE_ALIAS = "create-alias";
+const EDIT_INDEX = "index-edit-index-for-alias-test";
+
+describe("Aliases", () => {
+  before(() => {
+    // Set welcome screen tracking to false
+    localStorage.setItem("home:welcome:show", "false");
+    cy.deleteAllIndices();
+    for (let i = 0; i < 11; i++) {
+      cy.createIndex(`${SAMPLE_INDEX_PREFIX}-${i}`, null);
+    }
+    cy.createIndex(EDIT_INDEX, null);
+    for (let i = 0; i < 30; i++) {
+      cy.addAlias(`${SAMPLE_ALIAS_PREFIX}-${i}`, `${SAMPLE_INDEX_PREFIX}-${i % 11}`);
+    }
+    cy.removeAlias(`${SAMPLE_ALIAS_PREFIX}-0`);
+    cy.addAlias(`${SAMPLE_ALIAS_PREFIX}-0`, `${SAMPLE_INDEX_PREFIX}-*`);
+  });
+
+  beforeEach(() => {
+    // Visit ISM OSD
+    cy.visit(`${Cypress.env("opensearch_dashboards")}/app/${PLUGIN_NAME}#/aliases`);
+
+    // 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("can be searched / sorted / paginated", () => {
+    it("successfully", () => {
+      cy.get('[data-test-subj="pagination-button-1"]').should("exist");
+      cy.get('[placeholder="Search..."]').type("alias-for-test-0{enter}");
+      cy.contains("alias-for-test-0");
+      cy.get(".euiTableRow").should("have.length", 1);
+      cy.get('[data-test-subj="comboBoxSearchInput"]').type("closed{enter}");
+
+      cy.contains("You have no aliases.");
+    });
+  });
+
+  describe("shows more flyout", () => {
+    it("successfully", () => {
+      cy.get('[placeholder="Search..."]').type("alias-for-test-0{enter}");
+      cy.contains("alias-for-test-0");
+      cy.get(".euiTableRow").should("have.length", 1);
+      cy.get(".euiTableRowCell button").click().get('[data-test-subj="indices-table"] .euiTableRow').should("have.length", 10);
+    });
+  });
+
+  describe("can create a alias with wildcard and specific name", () => {
+    it("successfully", () => {
+      cy.get('[data-test-subj="Create AliasButton"]').click();
+      cy.get('[data-test-subj="form-name-alias"]').type(CREATE_ALIAS);
+      cy.get('[data-test-subj="form-name-indexArray"] [data-test-subj="comboBoxSearchInput"]').type(
+        `${EDIT_INDEX}{enter}${SAMPLE_INDEX_PREFIX}-*{enter}`
+      );
+      cy.get(".euiFlyoutFooter .euiButton--fill").click().get('[data-test-subj="9 more"]').should("exist");
+    });
+  });
+
+  describe("can edit / delete a alias", () => {
+    it("successfully", () => {
+      cy.get('[placeholder="Search..."]').type(`${SAMPLE_ALIAS_PREFIX}-0{enter}`);
+      cy.contains(`${SAMPLE_ALIAS_PREFIX}-0`);
+      cy.get('[data-test-subj="More Action"] button')
+        .click()
+        .get('[data-test-subj="Edit Action"]')
+        .should("be.disabled")
+        .get(`#_selection_column_${SAMPLE_ALIAS_PREFIX}-0-checkbox`)
+        .click()
+        .get('[data-test-subj="More Action"] button')
+        .click()
+        .get('[data-test-subj="Edit Action"]')
+        .click()
+        .get('[data-test-subj="form-name-indexArray"] [data-test-subj="comboBoxInput"]')
+        .click()
+        .type(`${EDIT_INDEX}{enter}`)
+        .get(`[title="${SAMPLE_INDEX_PREFIX}-0"] button`)
+        .click()
+        .get(`[title="${SAMPLE_INDEX_PREFIX}-1"] button`)
+        .click()
+        .get(".euiFlyoutFooter .euiButton--fill")
+        .click()
+        .end();
+
+      cy.get('[data-test-subj="7 more"]').should("exist");
+
+      cy.get('[data-test-subj="More Action"] button').click().get('[data-test-subj="Delete Action"]').click();
+      // The confirm button should be disabled
+      cy.get('[data-test-subj="deleteConfirmButton"]').should("be.disabled");
+      // type delete
+      cy.wait(500).get('[data-test-subj="deleteInput"]').type("delete");
+      cy.get('[data-test-subj="deleteConfirmButton"]').should("not.be.disabled");
+      // click to delete
+      cy.get('[data-test-subj="deleteConfirmButton"]').click();
+      // the alias should not exist
+      cy.wait(500);
+      cy.get(`#_selection_column_${SAMPLE_ALIAS_PREFIX}-0-checkbox`).should("not.exist");
+    });
+  });
+
+  after(() => {
+    cy.deleteAllIndices();
+    for (let i = 0; i < 30; i++) {
+      cy.removeAlias(`${SAMPLE_ALIAS_PREFIX}-${i}`);
+    }
+    cy.removeAlias(CREATE_ALIAS);
+  });
+});

cypress/integration/create_index.js

@@ -147,7 +147,7 @@ describe("Create Index", () => {
 
       cy.get('[data-test-subj="createIndexCreateButton"]').click({ force: true });
 
-      cy.wait(1000).get('[placeholder="The number of replica shards each primary shard should have."]').should("have.value", "2");
+      cy.wait(1000).get('[data-test-subj="form-name-index.number_of_replicas"] .euiCodeBlock__code').should("have.text", "2");
     });
 
     it("Update mappings successfully", () => {

cypress/integration/indices_spec.js

@@ -292,7 +292,7 @@ describe("Indices", () => {
       });
 
       cy.request({
-        method: "PUT",
+        method: "POST",
         url: `${Cypress.env("opensearch_dashboards")}/api/ism/apiCaller`,
         headers: {
           "osd-xsrf": true,

cypress/integration/split_index.js

@@ -40,8 +40,8 @@ describe("Split Index", () => {
 
       cy.get(`[data-test-subj="view-index-detail-button-${SAMPLE_INDEX}"]`).click().end().get("#index-detail-modal-settings").click().end();
 
-      cy.get('[placeholder="The number of primary shards in the index. Default is 1."]').then(($shardNumber) => {
-        split_number = $shardNumber.val() * 2;
+      cy.get('[data-test-subj="form-name-index.number_of_replicas"] .euiCodeBlock__code').then(($shardNumber) => {
+        split_number = $shardNumber.attr("title") * 2;
       });
 
       cy.get("#index-detail-modal-alias").click().end();
@@ -77,7 +77,7 @@ describe("Split Index", () => {
 
       cy.get(`[data-test-subj="view-index-detail-button-${targetIndex}"]`).click().end().get("#index-detail-modal-settings").click().end();
 
-      cy.get('[placeholder="The number of primary shards in the index. Default is 1."]').should("have.value", `${split_number}`).end();
+      cy.get('[data-test-subj="form-name-index.number_of_shards"] .euiCodeBlock__code').should("have.text", `${split_number}`).end();
     }); // Split
 
     it("Split successfully with advanced setting", () => {
@@ -110,7 +110,7 @@ describe("Split Index", () => {
 
       cy.get(`[data-test-subj="view-index-detail-button-${targetIndex}"]`).click().end().get("#index-detail-modal-settings").click().end();
 
-      cy.get('[placeholder="The number of primary shards in the index. Default is 1."]').should("have.value", `${split_number}`).end();
+      cy.get('[data-test-subj="form-name-index.number_of_shards"] .euiCodeBlock__code').should("have.text", `${split_number}`).end();
     }); // advanced setting
 
     it("Split successfully with alias", () => {

cypress/support/commands.js

@@ -170,3 +170,39 @@ Cypress.Commands.add("disableJitter", () => {
   };
   cy.request("PUT", `${Cypress.env("opensearch")}/_cluster/settings`, jitterJson);
 });
+
+Cypress.Commands.add("addAlias", (alias, index) => {
+  cy.request({
+    url: `${Cypress.env("opensearch")}/_aliases`,
+    method: "POST",
+    body: {
+      actions: [
+        {
+          add: {
+            index,
+            alias,
+          },
+        },
+      ],
+    },
+    failOnStatusCode: false,
+  });
+});
+
+Cypress.Commands.add("removeAlias", (alias) => {
+  cy.request({
+    url: `${Cypress.env("opensearch")}/_aliases`,
+    method: "POST",
+    body: {
+      actions: [
+        {
+          remove: {
+            index: "*",
+            alias,
+          },
+        },
+      ],
+    },
+    failOnStatusCode: false,
+  });
+});

cypress/support/index.d.ts

@@ -118,5 +118,7 @@ declare namespace Cypress {
      * cy.createPipeline("pipelineId", {"description": "sample description", "processors": []})
      */
     createPipeline(pipelineId: string, pipeline: object);
+    addAlias(alias: string, index: string);
+    removeAlias(alias: string);
   }
 }

public/components/FormGenerator/FormGenerator.test.tsx

@@ -60,6 +60,13 @@ const testFormFields: IFormGeneratorProps["formFields"] = [
     name: "test_component_2",
     type: "Input",
   },
+  {
+    rowProps: {
+      label: "Text component",
+    },
+    name: "test_component_3",
+    type: "Text",
+  },
 ];
 
 describe("<FormGenerator /> spec", () => {
@@ -152,14 +159,16 @@ describe("<FormGenerator /> spec", () => {
     );
 
     userEvent.type(getByTestId("form-name-test_component").querySelector("input") as Element, "1");
-    expect(onChangeMock).toBeCalledWith(
-      {
-        test: "1",
-        test_component: "1",
-      },
-      "test_component",
-      "1"
-    );
+    await waitFor(() => {
+      expect(onChangeMock).toBeCalledWith(
+        {
+          test: "1",
+          test_component: "1",
+        },
+        "test_component",
+        "1"
+      );
+    });
   });
 
   it("shows error with custom validation in class component", async () => {

public/components/FormGenerator/__snapshots__/FormGenerator.test.tsx.snap

@@ -106,6 +106,37 @@ HTMLCollection [
           </span>
         </div>
       </div>
+      <div
+        class="euiFormRow"
+        data-test-subj="form-name-test_component_3"
+        id="some_html_id-row"
+      >
+        <div
+          class="euiFormRow__labelWrapper"
+        >
+          <label
+            aria-invalid="false"
+            class="euiFormLabel euiFormRow__label"
+            for="some_html_id"
+          >
+            Text component
+          </label>
+        </div>
+        <div
+          class="euiFormRow__fieldWrapper"
+        >
+          <span
+            class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline prismjs language-none"
+          >
+            <code
+              class="euiCodeBlock__code"
+              title="-"
+            >
+              -
+            </code>
+          </span>
+        </div>
+      </div>
     </div>
   </div>,
 ]

public/components/FormGenerator/built_in_components/index.tsx

@@ -1,8 +1,8 @@
 import React, { forwardRef } from "react";
-import { EuiFieldNumber, EuiFieldText, EuiSwitch, EuiSelect } from "@elastic/eui";
+import { EuiFieldNumber, EuiFieldText, EuiSwitch, EuiSelect, EuiCode } from "@elastic/eui";
 import EuiToolTipWrapper, { IEuiToolTipWrapperProps } from "../../EuiToolTipWrapper";
 
-type ComponentMapEnum = "Input" | "Number" | "Switch" | "Select";
+type ComponentMapEnum = "Input" | "Number" | "Switch" | "Select" | "Text";
 
 export interface IFieldComponentProps extends IEuiToolTipWrapperProps {
   onChange: (val: IFieldComponentProps["value"]) => void;
@@ -12,8 +12,8 @@ export interface IFieldComponentProps extends IEuiToolTipWrapperProps {
 
 const componentMap: Record<ComponentMapEnum, React.ComponentType<IFieldComponentProps>> = {
   Input: EuiToolTipWrapper(
-    forwardRef(({ onChange, value, disabledReason, disabled, ...others }, ref: React.Ref<HTMLInputElement>) => (
-      <EuiFieldText inputRef={ref} value={value || ""} onChange={(e) => onChange(e.target.value)} disabled={disabled} {...others} />
+    forwardRef(({ onChange, value, ...others }, ref: React.Ref<HTMLInputElement>) => (
+      <EuiFieldText inputRef={ref} value={value || ""} onChange={(e) => onChange(e.target.value)} {...others} />
     )) as React.ComponentType<IFieldComponentProps>
   ),
   Number: EuiToolTipWrapper(
@@ -28,9 +28,12 @@ const componentMap: Record<ComponentMapEnum, React.ComponentType<IFieldComponent
       </div>
     )) as React.ComponentType<IFieldComponentProps>
   ),
-  Select: forwardRef(({ onChange, value, ...others }, ref: React.Ref<any>) => (
-    <EuiSelect inputRef={ref} onChange={(e) => onChange(e.target.value)} value={value || ""} {...others} />
-  )),
+  Text: (({ value }) => <EuiCode title={value || "-"}>{value || "-"}</EuiCode>) as React.ComponentType<IFieldComponentProps>,
+  Select: EuiToolTipWrapper(
+    forwardRef(({ onChange, value, ...others }, ref: React.Ref<any>) => (
+      <EuiSelect inputRef={ref} onChange={(e) => onChange(e.target.value)} value={value || ""} {...others} />
+    )) as React.ComponentType<IFieldComponentProps>
+  ),
 };
 
 export default componentMap;

public/components/FormGenerator/index.tsx

@@ -1,11 +1,13 @@
 import React, { forwardRef, useRef, useImperativeHandle, useEffect, useMemo } from "react";
 import { EuiForm, EuiFormProps, EuiFormRowProps } from "@elastic/eui";
-import AllBuiltInComponents from "./built_in_components";
+import AllBuiltInComponents, { IFieldComponentProps } from "./built_in_components";
 // import Field, { InitOption, FieldOption, Rule } from "../../lib/field";
 import useField, { InitOption, FieldOption, Rule, FieldInstance } from "../../lib/field";
 import AdvancedSettings, { IAdvancedSettingsProps } from "../AdvancedSettings";
 import CustomFormRow from "../CustomFormRow";
 
+export * from "./built_in_components";
+
 type ParametersOfValidator = Parameters<Required<Rule>["validator"]>;
 interface IRule extends Omit<Rule, "validator"> {
   validator?: (rule: ParametersOfValidator[0], value: ParametersOfValidator[1], values: Record<string, any>) => Promise<string | void>;
@@ -20,10 +22,10 @@ interface IFormGeneratorAdvancedSettings extends IAdvancedSettingsProps {
 }
 
 export interface IField {
-  rowProps: Pick<EuiFormRowProps, "label" | "helpText">;
+  rowProps: Pick<EuiFormRowProps, "label" | "helpText" | "fullWidth">;
   name: string;
   type?: keyof typeof AllBuiltInComponents;
-  component?: typeof AllBuiltInComponents["Input"];
+  component?: React.ComponentType<IFieldComponentProps>;
   options?: Omit<IInitOption, "name">;
 }
 
@@ -39,6 +41,8 @@ export interface IFormGeneratorProps {
 
 export interface IFormGeneratorRef extends FieldInstance {}
 
+export { AllBuiltInComponents };
+
 export default forwardRef(function FormGenerator(props: IFormGeneratorProps, ref: React.Ref<IFormGeneratorRef>) {
   const { fieldProps, formFields, advancedSettingsProps } = props;
   const { blockedNameList } = advancedSettingsProps || {};