MDS Support for Policies, Policy Managed Indices, Rollup Jobs and Transform Jobs

public/JobHandler/index.ts

@@ -17,7 +17,7 @@ export { listenEvent, destroyListener, EVENT_MAP } from "./utils";
 
 export async function JobHandlerRegister(core: CoreSetup) {
   const commonService = new CommonService(core.http);
-  const accountResult = await commonService.apiCaller<{
+  const accountResult = await commonService.accountInfo<{
     user_name: string;
   }>({
     endpoint: "transport.request",

public/pages/ChangePolicy/containers/ChangePolicy/ChangePolicy.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { Component } from "react";
+import React, { Component, useContext } from "react";
 import { RouteComponentProps } from "react-router-dom";
 import { EuiSpacer, EuiTitle, EuiButton, EuiFlexGroup, EuiFlexItem, EuiButtonEmpty } from "@elastic/eui";
 import { IndexService, ManagedIndexService } from "../../../../services";
@@ -14,8 +14,10 @@ import { ManagedIndexItem } from "../../../../../models/interfaces";
 import { getErrorMessage } from "../../../../utils/helpers";
 import { PolicyOption } from "../../models/interfaces";
 import { CoreServicesContext } from "../../../../components/core_services";
+import { DataSourceMenuContext, DataSourceMenuProperties } from "../../../../services/DataSourceMenuContext";
+import { useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent";
 
-interface ChangePolicyProps extends RouteComponentProps {
+interface ChangePolicyProps extends RouteComponentProps, DataSourceMenuProperties {
   managedIndexService: ManagedIndexService;
   indexService: IndexService;
 }
@@ -36,9 +38,9 @@ export enum Radio {
   State = "state",
 }
 
-export default class ChangePolicy extends Component<ChangePolicyProps, ChangePolicyState> {
+export class ChangePolicy extends Component<ChangePolicyProps, ChangePolicyState> {
   static contextType = CoreServicesContext;
-  state: ChangePolicyState = {
+  static emptyState = {
     selectedPolicies: [],
     selectedManagedIndices: [],
     selectedStateFilters: [],
@@ -48,11 +50,21 @@ export default class ChangePolicy extends Component<ChangePolicyProps, ChangePol
     selectedPoliciesError: "",
     hasSubmitted: false,
   };
+  state: ChangePolicyState = ChangePolicy.emptyState;
 
   async componentDidMount(): Promise<void> {
     this.context.chrome.setBreadcrumbs([BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.MANAGED_INDICES, BREADCRUMBS.CHANGE_POLICY]);
   }
 
+  componentDidUpdate(prevProps: ChangePolicyProps, prevState: Readonly<ChangePolicyState>) {
+    if (prevProps.dataSourceId !== this.props.dataSourceId) {
+      // reset the state, if dataSourceId changes, i.e., clear state
+      this.setState({
+        ...ChangePolicy.emptyState,
+      });
+    }
+  }
+
   onChangeSelectedPolicy = (selectedPolicies: PolicyOption[]): void => {
     // reset the selected state and radio whenever we select a new policy
     const selectedPoliciesError = selectedPolicies.length ? "" : "Required";
@@ -151,6 +163,7 @@ export default class ChangePolicy extends Component<ChangePolicyProps, ChangePol
         <EuiSpacer />
 
         <ChangeManagedIndices
+          key={`changeManagedIndices-${this.props.dataSourceId}`} // force re-mount on dataSourceId change
           {...this.props}
           managedIndexService={managedIndexService}
           selectedManagedIndices={selectedManagedIndices}
@@ -163,6 +176,7 @@ export default class ChangePolicy extends Component<ChangePolicyProps, ChangePol
         <EuiSpacer />
 
         <NewPolicy
+          key={`newPolicy-${this.props.dataSourceId}`} // force re-mount on dataSourceId change
           {...this.props}
           indexService={indexService}
           selectedPolicies={selectedPolicies}
@@ -192,3 +206,9 @@ export default class ChangePolicy extends Component<ChangePolicyProps, ChangePol
     );
   }
 }
+
+export default function (props: Omit<ChangePolicyProps, keyof DataSourceMenuProperties>) {
+  const dataSourceMenuProperties = useContext(DataSourceMenuContext);
+  useUpdateUrlWithDataSourceProperties();
+  return <ChangePolicy {...props} {...dataSourceMenuProperties} />;
+}

public/pages/CreatePolicy/containers/CreatePolicy/CreatePolicy.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { ChangeEvent, Component, Fragment } from "react";
+import React, { ChangeEvent, Component, Fragment, useContext } from "react";
 import { EuiSpacer, EuiTitle, EuiFlexGroup, EuiFlexItem, EuiButton, EuiButtonEmpty, EuiCallOut, EuiLink, EuiIcon } from "@elastic/eui";
 import queryString from "query-string";
 import { RouteComponentProps } from "react-router-dom";
@@ -15,8 +15,10 @@ import { PolicyService } from "../../../../services";
 import { BREADCRUMBS, DOCUMENTATION_URL, ROUTES } from "../../../../utils/constants";
 import { getErrorMessage } from "../../../../utils/helpers";
 import { CoreServicesContext } from "../../../../components/core_services";
+import { DataSourceMenuContext, DataSourceMenuProperties } from "../../../../services/DataSourceMenuContext";
+import { useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent";
 
-interface CreatePolicyProps extends RouteComponentProps {
+interface CreatePolicyProps extends RouteComponentProps, DataSourceMenuProperties {
   isEdit: boolean;
   policyService: PolicyService;
 }
@@ -32,7 +34,7 @@ interface CreatePolicyState {
   hasSubmitted: boolean;
 }
 
-export default class CreatePolicy extends Component<CreatePolicyProps, CreatePolicyState> {
+export class CreatePolicy extends Component<CreatePolicyProps, CreatePolicyState> {
   static contextType = CoreServicesContext;
   _isMount: boolean;
   constructor(props: CreatePolicyProps) {
@@ -78,6 +80,20 @@ export default class CreatePolicy extends Component<CreatePolicyProps, CreatePol
     this._isMount = false;
   }
 
+  componentDidUpdate(prevProps: CreatePolicyProps, prevState: Readonly<CreatePolicyState>) {
+    if (prevProps.dataSourceId != this.props.dataSourceId) {
+      // reset the state, if dataSourceId changes, i.e., clear state
+      this.setState({
+        policySeqNo: null,
+        policyPrimaryTerm: null,
+        policyIdError: "",
+        submitError: "",
+        isSubmitting: false,
+        hasSubmitted: false,
+      });
+    }
+  }
+
   getPolicyToEdit = async (policyId: string): Promise<void> => {
     try {
       const { policyService } = this.props;
@@ -250,3 +266,9 @@ export default class CreatePolicy extends Component<CreatePolicyProps, CreatePol
     );
   }
 }
+
+export default function (props: Omit<CreatePolicyProps, keyof DataSourceMenuProperties>) {
+  const dataSourceMenuProperties = useContext(DataSourceMenuContext);
+  useUpdateUrlWithDataSourceProperties();
+  return <CreatePolicy {...props} {...dataSourceMenuProperties} />;
+}

public/pages/CreateRollup/containers/CreateRollup/CreateRollup.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { ChangeEvent, Component } from "react";
+import React, { ChangeEvent, Component, useContext } from "react";
 import { EuiSpacer, EuiTitle, EuiFlexGroup, EuiFlexItem, EuiComboBoxOptionOption } from "@elastic/eui";
 import { RouteComponentProps } from "react-router-dom";
 import { RollupService } from "../../../../services";
@@ -12,8 +12,10 @@ import RollupIndices from "../../components/RollupIndices";
 import CreateRollupSteps from "../../components/CreateRollupSteps";
 import IndexService from "../../../../services/IndexService";
 import { IndexItem } from "../../../../../models/interfaces";
+import { DataSourceMenuContext, DataSourceMenuProperties } from "../../../../services/DataSourceMenuContext";
+import { useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent";
 
-interface CreateRollupProps extends RouteComponentProps {
+interface CreateRollupProps extends RouteComponentProps, DataSourceMenuProperties {
   rollupService: RollupService;
   indexService: IndexService;
   rollupId: string;
@@ -53,7 +55,7 @@ export default class CreateRollup extends Component<CreateRollupProps> {
             <EuiSpacer />
             <ConfigureRollup isEdit={false} {...this.props} />
             <EuiSpacer />
-            <RollupIndices {...this.props} />
+            <RollupIndices key={this.props.dataSourceId} {...this.props} />
           </EuiFlexItem>
         </EuiFlexGroup>
         <EuiSpacer />

public/pages/CreateRollup/containers/CreateRollupForm/CreateRollupForm.tsx

@@ -3,9 +3,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { ChangeEvent, Component } from "react";
+import React, { ChangeEvent, Component, useContext } from "react";
 import { EuiButton, EuiButtonEmpty, EuiComboBoxOptionOption, EuiFlexGroup, EuiFlexItem } from "@elastic/eui";
-import { RouteComponentProps } from "react-router-dom";
+import { RouteComponentProps, useHistory } from "react-router-dom";
 import moment from "moment";
 import { RollupService } from "../../../../services";
 import { BREADCRUMBS, ROUTES } from "../../../../utils/constants";
@@ -21,8 +21,15 @@ import CreateRollupStep3 from "../CreateRollupStep3";
 import CreateRollupStep4 from "../CreateRollupStep4";
 import { compareFieldItem, parseFieldOptions } from "../../utils/helpers";
 import { CoreServicesContext } from "../../../../components/core_services";
-
-interface CreateRollupFormProps extends RouteComponentProps {
+import {
+  DataSourceMenuContext,
+  DataSourceMenuProperties,
+  DataSourceMenuReadOnlyContext,
+  DataSourceMenuReadOnlyProperties,
+} from "../../../../services/DataSourceMenuContext";
+import { useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent";
+
+interface CreateRollupFormProps extends RouteComponentProps, DataSourceMenuProperties, DataSourceMenuReadOnlyProperties {
   rollupService: RollupService;
   indexService: IndexService;
 }
@@ -75,61 +82,63 @@ interface CreateRollupFormState {
   rollupJSON: any;
 }
 
-export default class CreateRollupForm extends Component<CreateRollupFormProps, CreateRollupFormState> {
+export class CreateRollupForm extends Component<CreateRollupFormProps, CreateRollupFormState> {
   static contextType = CoreServicesContext;
   _isMount: boolean;
 
+  static baseState = {
+    currentStep: 1,
+    rollupSeqNo: null,
+    rollupPrimaryTerm: null,
+    rollupId: "",
+    rollupIdError: "",
+    submitError: "",
+    isSubmitting: false,
+    hasSubmitted: false,
+    loadingIndices: true,
+    indices: [],
+    totalIndices: 0,
+
+    mappings: "",
+    allMappings: [],
+    fields: [],
+    selectedFields: [],
+    selectedTerms: [],
+    selectedDimensionField: [],
+    selectedMetrics: [],
+    metricError: "",
+    description: "",
+
+    sourceIndex: [],
+    sourceIndexError: "",
+    targetIndex: [],
+    targetIndexError: "",
+
+    timestamp: [],
+    timestampError: "",
+    intervalType: "fixed",
+    intervalValue: 1,
+    intervalError: "",
+    timezone: "UTC",
+    timeunit: "h",
+
+    jobEnabledByDefault: true,
+    continuousJob: "no",
+    continuousDefinition: "fixed",
+    interval: 1,
+    intervalTimeunit: "MINUTES",
+    cronExpression: "",
+    cronTimezone: "UTC",
+    pageSize: 1000,
+    delayTime: undefined,
+    delayTimeunit: "MINUTES",
+    rollupJSON: JSON.parse(EMPTY_ROLLUP),
+  };
+
   constructor(props: CreateRollupFormProps) {
     super(props);
 
-    this.state = {
-      currentStep: 1,
-      rollupSeqNo: null,
-      rollupPrimaryTerm: null,
-      rollupId: "",
-      rollupIdError: "",
-      submitError: "",
-      isSubmitting: false,
-      hasSubmitted: false,
-      loadingIndices: true,
-      indices: [],
-      totalIndices: 0,
-
-      mappings: "",
-      allMappings: [],
-      fields: [],
-      selectedFields: [],
-      selectedTerms: [],
-      selectedDimensionField: [],
-      selectedMetrics: [],
-      metricError: "",
-      description: "",
-
-      sourceIndex: [],
-      sourceIndexError: "",
-      targetIndex: [],
-      targetIndexError: "",
-
-      timestamp: [],
-      timestampError: "",
-      intervalType: "fixed",
-      intervalValue: 1,
-      intervalError: "",
-      timezone: "UTC",
-      timeunit: "h",
-
-      jobEnabledByDefault: true,
-      continuousJob: "no",
-      continuousDefinition: "fixed",
-      interval: 1,
-      intervalTimeunit: "MINUTES",
-      cronExpression: "",
-      cronTimezone: "UTC",
-      pageSize: 1000,
-      delayTime: undefined,
-      delayTimeunit: "MINUTES",
-      rollupJSON: JSON.parse(EMPTY_ROLLUP),
-    };
+    this.state = CreateRollupForm.baseState;
     this._next = this._next.bind(this);
     this._prev = this._prev.bind(this);
     this._isMount = true;
@@ -143,6 +152,17 @@ export default class CreateRollupForm extends Component<CreateRollupFormProps, C
     this._isMount = false;
   }
 
+  componentDidUpdate(prevProps: CreateRollupFormProps, prevState: Readonly<CreateRollupFormState>) {
+    if (prevProps.dataSourceId !== this.props.dataSourceId) {
+      // reset the state, if dataSourceId changes, i.e., clear state
+      this.setState({
+        ...CreateRollupForm.baseState,
+        rollupId: this.state.rollupId,
+        description: this.state.description,
+      });
+    }
+  }
+
   getMappings = async (srcIndex: string): Promise<void> => {
     if (!srcIndex.length) return;
     try {
@@ -171,6 +191,14 @@ export default class CreateRollupForm extends Component<CreateRollupFormProps, C
   _next() {
     let currentStep = this.state.currentStep;
     let error = false;
+
+    const dataSourceReadOnly = this.props.dataSourceReadOnly;
+    const setDataSourceReadOnly = this.props.setDataSourceReadOnly;
+
+    if (this.props.multiDataSourceEnabled && !dataSourceReadOnly) {
+      setDataSourceReadOnly(true);
+    }
+
     //Verification here
     if (currentStep == 1) {
       const { rollupId, sourceIndex, targetIndex } = this.state;
@@ -234,6 +262,14 @@ export default class CreateRollupForm extends Component<CreateRollupFormProps, C
     let currentStep = this.state.currentStep;
     // If the current step is 2 or 3, then subtract one on "previous" button click
     currentStep = currentStep <= 1 ? 1 : currentStep - 1;
+    if (currentStep === 1) {
+      const dataSourceReadOnly = this.props.dataSourceReadOnly;
+      const setDataSourceReadOnly = this.props.setDataSourceReadOnly;
+
+      if (this.props.multiDataSourceEnabled && dataSourceReadOnly) {
+        setDataSourceReadOnly(false);
+      }
+    }
     this.setState({
       currentStep: currentStep,
     });
@@ -680,3 +716,9 @@ export default class CreateRollupForm extends Component<CreateRollupFormProps, C
     );
   }
 }
+
+export default function (props: Omit<CreateRollupFormProps, keyof DataSourceMenuProperties>) {
+  const dataSourceMenuProperties = useContext(DataSourceMenuContext);
+  useUpdateUrlWithDataSourceProperties();
+  return <CreateRollupForm {...props} {...dataSourceMenuProperties} />;
+}

public/pages/CreateTransform/components/DefineTransforms/DefineTransforms.tsx

@@ -96,7 +96,7 @@ export default function DefineTransforms({
   const fetchData = useCallback(async () => {
     setLoading(true);
     try {
-      const response = await transformService.searchSampleData(sourceIndex, { from: 0, size: DefaultSampleDataSize }, sourceIndexFilter);
+      const response = await transformService.searchSampleData(sourceIndex, sourceIndexFilter, { from: 0, size: DefaultSampleDataSize });
 
       if (response.ok) {
         setData(response.response.data);
@@ -162,7 +162,7 @@ export default function DefineTransforms({
     }
     const val = data[rowIndex]._source[columnId];
     return val !== undefined ? JSON.stringify(val) : "-";
-  }
+  };
 
   //TODO: remove duplicate code here after extracting the first table as separate component
   if (isReadOnly)