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]>

Author: dbbaughe

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);

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");
 

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 {

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;
+    }
+  }
+}

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>

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>

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"
             >

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;

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;

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}