Adds VisualCreatePolicy page, missing backend routes/configs, updates… (

#61) * Adds VisualCreatePolicy page, missing backend routes/configs, updates all creation paths to show new modal, updates rates, etc. Signed-off-by: Drew Baugher <[email protected]> * Updates cypress tests Signed-off-by: Drew Baugher <[email protected]> * Fixes cypress test Signed-off-by: Drew Baugher <[email protected]> * Fixes duplicate action type, filters retry/timeout keys, and fixes transition condition default value when switching Signed-off-by: Drew Baugher <[email protected]>
opensearch-project · Aug 12, 2021 · 69d8fe1 · 69d8fe1
1 parent b9645f1
commit 69d8fe1
Show file tree

Hide file tree

Showing 32 changed files with 658 additions and 126 deletions.
diff --git a/cypress/integration/managed_indices_spec.js b/cypress/integration/managed_indices_spec.js
@@ -211,8 +211,8 @@ describe("Managed indices", () => {
       // Confirm we got the change policy toaster
       cy.contains("Changed policy on 1 indices");
 
-      // Click back to Managed Indices page
-      cy.contains("Managed Indices").click();
+      // Click back to Managed Indices page by clicking "Managed indices" breadcrumb
+      cy.contains("Managed indices").click();
 
       // Speed up execution of managed index
       cy.updateManagedIndexConfigStartTime(SAMPLE_INDEX);

diff --git a/cypress/integration/policies_spec.js b/cypress/integration/policies_spec.js
@@ -53,6 +53,12 @@ describe("Policies", () => {
       // Route us to create policy page
       cy.contains("Create policy").click({ force: true });
 
+      // Route us to create policy page
+      cy.contains("JSON editor").click({ force: true });
+
+      // Route us to create policy page
+      cy.contains("Continue").click({ force: true });
+
       // Wait for input to load and then type in the policy ID
       cy.get(`input[placeholder="hot_cold_workflow"]`).type(POLICY_ID, { force: true });
 
@@ -97,6 +103,12 @@ describe("Policies", () => {
       // Click Edit button
       cy.get(`[data-test-subj="EditButton"]`).click({ force: true });
 
+      // Route us to edit policy page
+      cy.contains("JSON editor").click({ force: true });
+
+      // Route us to edit policy page
+      cy.contains("Continue").click({ force: true });
+
       // Wait for initial policy JSON to load
       cy.contains("A simple description");
 

diff --git a/models/interfaces.ts b/models/interfaces.ts
@@ -92,9 +92,11 @@ export interface DocumentTransform {
 export interface Policy {
   description: string;
   default_state: string;
-  error_notification?: ErrorNotification;
+  error_notification?: ErrorNotification | null;
   states: State[];
   ism_template?: ISMTemplate[] | ISMTemplate | null;
+  last_updated_time?: string;
+  schema_version?: number;
 }
 
 export interface ErrorNotification {

diff --git a/public/app.scss b/public/app.scss
@@ -12,3 +12,41 @@
  * express or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
+
+// Copies over styling from eui library to be used in custom classes
+// Core
+$euiColorPrimary: #006BB4 !default;
+$euiColorDarkestShade: #343741 !default;
+$euiColorGhost: #FFF !default;
+$euiColorInk: #000 !default;
+$euiTextColor: $euiColorDarkestShade !default;
+
+.selected-radio-panel {
+  background-color: tintOrShade($euiColorPrimary, 90%, 70%);
+  border-color: $euiColorPrimary;
+}
+
+@function tintOrShade($color, $tint, $shade) {
+  @if (lightness($euiTextColor) > 50) {
+    @return shade($color, $shade);
+  } @else {
+    @return tint($color, $tint);
+  }
+}
+
+@function tint($color, $percent) {
+  @return mix($euiColorGhost, $color, $percent);
+}
+
+@function shade($color, $percent) {
+  @return mix($euiColorInk, $color, $percent);
+}
+
+.refresh-button {
+  min-width: 0;
+  .euiButtonContent {
+    .euiButton__text {
+      margin: 0;
+    }
+  }
+}
diff --git a/public/components/ConfirmationModal/ConfirmationModal.tsx b/public/components/ConfirmationModal/ConfirmationModal.tsx
@@ -39,18 +39,28 @@ import {
 
 interface ConfirmationModalProps {
   title: string;
-  bodyMessage: string;
+  bodyMessage: string | JSX.Element;
   actionMessage: string;
+  actionProps?: object;
+  modalProps?: object;
   onClose: () => void;
   onAction: () => void;
 }
 
-const ConfirmationModal: React.SFC<ConfirmationModalProps> = ({ title, bodyMessage, actionMessage, onClose, onAction }) => {
+const ConfirmationModal: React.SFC<ConfirmationModalProps> = ({
+  title,
+  bodyMessage,
+  actionMessage,
+  onClose,
+  onAction,
+  actionProps = {},
+  modalProps = {},
+}) => {
   return (
     <EuiOverlayMask>
       {/*
       // @ts-ignore */}
-      <EuiModal onCancel={onClose} onClose={onClose} maxWidth={1000}>
+      <EuiModal onCancel={onClose} onClose={onClose} maxWidth={1000} {...modalProps}>
         <EuiModalHeader>
           <EuiModalHeaderTitle>{title}</EuiModalHeaderTitle>
         </EuiModalHeader>
@@ -68,6 +78,7 @@ const ConfirmationModal: React.SFC<ConfirmationModalProps> = ({ title, bodyMessa
             }}
             fill
             data-test-subj="confirmationModalActionButton"
+            {...actionProps}
           >
             {actionMessage}
           </EuiButton>

diff --git a/public/components/PolicyModal/PolicyModal.tsx b/public/components/PolicyModal/PolicyModal.tsx
@@ -46,7 +46,7 @@ interface PolicyModalProps {
   policy: object | null;
   errorMessage?: string;
   onClose: () => void;
-  onEdit: () => void;
+  onEdit: (visual: boolean) => void;
 }
 
 const PolicyModal: React.SFC<PolicyModalProps> = ({ policyId, policy, errorMessage, onClose, onEdit }) => {
@@ -61,7 +61,7 @@ const PolicyModal: React.SFC<PolicyModalProps> = ({ policyId, policy, errorMessa
         </EuiModalHeader>
 
         <EuiModalBody>
-          <EuiCodeBlock language="json" fontSize="m">
+          <EuiCodeBlock language="json" fontSize="m" style={{ minWidth: 600 }}>
             {errorMessage != null ? errorMessage : policyString}
           </EuiCodeBlock>
         </EuiModalBody>
@@ -83,7 +83,12 @@ const PolicyModal: React.SFC<PolicyModalProps> = ({ policyId, policy, errorMessa
               </EuiButtonEmpty>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <EuiButton onClick={onEdit} fill disabled={!policyId || !policy} data-test-subj="policyModalEditButton">
+              <EuiButton onClick={() => onEdit(false)} fill disabled={!policyId || !policy} data-test-subj="policyModalEditJsonButton">
+                Edit as JSON
+              </EuiButton>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiButton onClick={() => onEdit(true)} fill disabled={!policyId || !policy} data-test-subj="policyModalEditButton">
                 Edit
               </EuiButton>
             </EuiFlexItem>

diff --git a/public/components/PolicyModal/__snapshots__/PolicyModal.test.tsx.snap b/public/components/PolicyModal/__snapshots__/PolicyModal.test.tsx.snap
@@ -59,6 +59,7 @@ exports[`<PolicyModal /> spec renders the component 1`] = `
               >
                 <code
                   class="euiCodeBlock__code json hljs"
+                  style="min-width: 600px;"
                 >
                   {
     
@@ -138,6 +139,25 @@ exports[`<PolicyModal /> spec renders the component 1`] = `
                 </span>
               </button>
             </div>
+            <div
+              class="euiFlexItem euiFlexItem--flexGrowZero"
+            >
+              <button
+                class="euiButton euiButton--primary euiButton--fill"
+                data-test-subj="policyModalEditJsonButton"
+                type="button"
+              >
+                <span
+                  class="euiButtonContent euiButton__content"
+                >
+                  <span
+                    class="euiButton__text"
+                  >
+                    Edit as JSON
+                  </span>
+                </span>
+              </button>
+            </div>
             <div
               class="euiFlexItem euiFlexItem--flexGrowZero"
             >

diff --git a/public/index_management_app.tsx b/public/index_management_app.tsx
@@ -40,6 +40,7 @@ import {
 import { DarkModeContext } from "./components/DarkMode";
 import Main from "./pages/Main";
 import { CoreServicesContext } from "./components/core_services";
+import "./app.scss";
 
 export function renderApp(coreStart: CoreStart, params: AppMountParameters) {
   const http = coreStart.http;

diff --git a/public/pages/CreatePolicy/containers/CreatePolicy/CreatePolicy.tsx b/public/pages/CreatePolicy/containers/CreatePolicy/CreatePolicy.tsx
@@ -113,7 +113,7 @@ export default class CreatePolicy extends Component<CreatePolicyProps, CreatePol
     }
   };
 
-  onCreate = async (policyId: string, policy: Policy): Promise<void> => {
+  onCreate = async (policyId: string, policy: { policy: Policy }): Promise<void> => {
     const { policyService } = this.props;
     try {
       const response = await policyService.putPolicy(policy, policyId);
@@ -128,7 +128,7 @@ export default class CreatePolicy extends Component<CreatePolicyProps, CreatePol
     }
   };
 
-  onUpdate = async (policyId: string, policy: Policy): Promise<void> => {
+  onUpdate = async (policyId: string, policy: { policy: Policy }): Promise<void> => {
     try {
       const { policyService } = this.props;
       const { policyPrimaryTerm, policySeqNo } = this.state;

diff --git a/public/pages/Main/Main.tsx b/public/pages/Main/Main.tsx
@@ -33,6 +33,7 @@ import Policies from "../Policies";
 import ManagedIndices from "../ManagedIndices";
 import Indices from "../Indices";
 import CreatePolicy from "../CreatePolicy";
+import VisualCreatePolicy from "../VisualCreatePolicy";
 import ChangePolicy from "../ChangePolicy";
 import Rollups from "../Rollups";
 import { ModalProvider, ModalRoot } from "../../components/Modal";
@@ -46,6 +47,8 @@ import EditRollup from "../EditRollup/containers";
 import RollupDetails from "../RollupDetails/containers/RollupDetails";
 import { EditTransform, Transforms } from "../Transforms";
 import TransformDetails from "../Transforms/containers/Transforms/TransformDetails";
+import queryString from "query-string";
+import PolicyDetails from "../PolicyDetails/containers/PolicyDetails";
 
 enum Navigation {
   IndexManagement = "Index Management",
@@ -64,6 +67,18 @@ enum Pathname {
   Transforms = "/transforms",
 }
 
+const HIDDEN_NAV_ROUTES = [
+  ROUTES.CREATE_ROLLUP,
+  ROUTES.EDIT_ROLLUP,
+  ROUTES.ROLLUP_DETAILS,
+  ROUTES.CREATE_TRANSFORM,
+  ROUTES.EDIT_TRANSFORM,
+  ROUTES.TRANSFORM_DETAILS,
+  ROUTES.CREATE_POLICY,
+  ROUTES.EDIT_POLICY,
+  ROUTES.CHANGE_POLICY,
+];
+
 interface MainProps extends RouteComponentProps {}
 
 export default class Main extends Component<MainProps, object> {
@@ -121,16 +136,11 @@ export default class Main extends Component<MainProps, object> {
                     <ModalRoot services={services} />
                     <EuiPage restrictWidth="100%">
                       {/*Hide side navigation bar when creating or editing rollup job*/}
-                      {pathname != ROUTES.CREATE_ROLLUP &&
-                        pathname != ROUTES.EDIT_ROLLUP &&
-                        pathname != ROUTES.ROLLUP_DETAILS &&
-                        pathname != ROUTES.CREATE_TRANSFORM &&
-                        pathname != ROUTES.EDIT_TRANSFORM &&
-                        pathname != ROUTES.TRANSFORM_DETAILS && (
-                          <EuiPageSideBar style={{ minWidth: 150 }}>
-                            <EuiSideNav style={{ width: 150 }} items={sideNav} />
-                          </EuiPageSideBar>
-                        )}
+                      {!HIDDEN_NAV_ROUTES.includes(pathname) && (
+                        <EuiPageSideBar style={{ minWidth: 150 }}>
+                          <EuiSideNav style={{ width: 150 }} items={sideNav} />
+                        </EuiPageSideBar>
+                      )}
                       <EuiPageBody>
                         <Switch>
                           <Route
@@ -145,15 +155,33 @@ export default class Main extends Component<MainProps, object> {
                           />
                           <Route
                             path={ROUTES.CREATE_POLICY}
-                            render={(props: RouteComponentProps) => (
-                              <CreatePolicy {...props} isEdit={false} policyService={services.policyService} />
-                            )}
+                            render={(props: RouteComponentProps) =>
+                              queryString.parse(this.props.location.search).type == "visual" ? (
+                                <VisualCreatePolicy
+                                  {...props}
+                                  isEdit={false}
+                                  policyService={services.policyService}
+                                  notificationService={services.notificationService}
+                                />
+                              ) : (
+                                <CreatePolicy {...props} isEdit={false} policyService={services.policyService} />
+                              )
+                            }
                           />
                           <Route
                             path={ROUTES.EDIT_POLICY}
-                            render={(props: RouteComponentProps) => (
-                              <CreatePolicy {...props} isEdit={true} policyService={services.policyService} />
-                            )}
+                            render={(props: RouteComponentProps) =>
+                              queryString.parse(this.props.location.search).type == "visual" ? (
+                                <VisualCreatePolicy
+                                  {...props}
+                                  isEdit={true}
+                                  policyService={services.policyService}
+                                  notificationService={services.notificationService}
+                                />
+                              ) : (
+                                <CreatePolicy {...props} isEdit={true} policyService={services.policyService} />
+                              )
+                            }
                           />
                           <Route
                             path={ROUTES.INDEX_POLICIES}

diff --git a/.../pages/ManagedIndices/components/ManagedIndexEmptyPrompt/ManagedIndexEmptyPrompt.test.tsx b/.../pages/ManagedIndices/components/ManagedIndexEmptyPrompt/ManagedIndexEmptyPrompt.test.tsx
@@ -28,25 +28,30 @@ import React from "react";
 import "@testing-library/jest-dom/extend-expect";
 import { render, fireEvent } from "@testing-library/react";
 import ManagedIndexEmptyPrompt, { TEXT } from "./ManagedIndexEmptyPrompt";
+import historyMock from "../../../../../test/mocks/historyMock";
 
 describe("<ManagedIndexEmptyPrompt /> spec", () => {
   it("renders the component", async () => {
-    const { container } = render(<ManagedIndexEmptyPrompt filterIsApplied={false} loading={false} resetFilters={() => {}} />);
+    const { container } = render(
+      <ManagedIndexEmptyPrompt history={historyMock} filterIsApplied={false} loading={false} resetFilters={() => {}} />
+    );
 
     expect(container.firstChild).toMatchSnapshot();
   });
 
   it("renders no managed indices by default", async () => {
     const { getByText, queryByTestId } = render(
-      <ManagedIndexEmptyPrompt filterIsApplied={false} loading={false} resetFilters={() => {}} />
+      <ManagedIndexEmptyPrompt history={historyMock} filterIsApplied={false} loading={false} resetFilters={() => {}} />
     );
 
     getByText(TEXT.NO_MANAGED_INDICES);
     expect(queryByTestId("managedIndexEmptyPromptResetFilters")).toBeNull();
   });
 
   it("shows LOADING", async () => {
-    const { getByText, queryByTestId } = render(<ManagedIndexEmptyPrompt filterIsApplied={true} loading={true} resetFilters={() => {}} />);
+    const { getByText, queryByTestId } = render(
+      <ManagedIndexEmptyPrompt history={historyMock} filterIsApplied={true} loading={true} resetFilters={() => {}} />
+    );
 
     getByText(TEXT.LOADING);
     expect(queryByTestId("managedIndexEmptyPromptResetFilters")).toBeNull();
@@ -55,7 +60,7 @@ describe("<ManagedIndexEmptyPrompt /> spec", () => {
   it("shows reset filters", async () => {
     const resetFilters = jest.fn();
     const { getByText, getByTestId } = render(
-      <ManagedIndexEmptyPrompt filterIsApplied={true} loading={false} resetFilters={resetFilters} />
+      <ManagedIndexEmptyPrompt history={historyMock} filterIsApplied={true} loading={false} resetFilters={resetFilters} />
     );
 
     getByText(TEXT.RESET_FILTERS);