diff --git a/public/JobHandler/index.ts b/public/JobHandler/index.ts
index 1798e4625..f07bd9c29 100644
--- a/public/JobHandler/index.ts
+++ b/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",
diff --git a/public/pages/ChangePolicy/containers/ChangePolicy/ChangePolicy.tsx b/public/pages/ChangePolicy/containers/ChangePolicy/ChangePolicy.tsx
index ed7b9d500..7c464f8da 100644
--- a/public/pages/ChangePolicy/containers/ChangePolicy/ChangePolicy.tsx
+++ b/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,7 +38,7 @@ 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 = {
     selectedPolicies: [],
@@ -53,6 +55,22 @@ export default class ChangePolicy extends Component<ChangePolicyProps, ChangePol
     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({
+        selectedPolicies: [],
+        selectedManagedIndices: [],
+        selectedStateFilters: [],
+        stateRadioIdSelected: Radio.Current,
+        stateSelected: "",
+        managedIndicesError: "",
+        selectedPoliciesError: "",
+        hasSubmitted: false,
+      });
+    }
+  }
+
   onChangeSelectedPolicy = (selectedPolicies: PolicyOption[]): void => {
     // reset the selected state and radio whenever we select a new policy
     const selectedPoliciesError = selectedPolicies.length ? "" : "Required";
@@ -151,6 +169,7 @@ export default class ChangePolicy extends Component<ChangePolicyProps, ChangePol
         <EuiSpacer />
 
         <ChangeManagedIndices
+          key={`changeManagedIndices-${this.props.dataSourceId}`}
           {...this.props}
           managedIndexService={managedIndexService}
           selectedManagedIndices={selectedManagedIndices}
@@ -163,6 +182,7 @@ export default class ChangePolicy extends Component<ChangePolicyProps, ChangePol
         <EuiSpacer />
 
         <NewPolicy
+          key={`newPolicy-${this.props.dataSourceId}`}
           {...this.props}
           indexService={indexService}
           selectedPolicies={selectedPolicies}
@@ -192,3 +212,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} />;
+}
\ No newline at end of file
diff --git a/public/pages/CreatePolicy/containers/CreatePolicy/CreatePolicy.tsx b/public/pages/CreatePolicy/containers/CreatePolicy/CreatePolicy.tsx
index ffb17b759..fb50c7f04 100644
--- a/public/pages/CreatePolicy/containers/CreatePolicy/CreatePolicy.tsx
+++ b/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,22 @@ 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,
+        policyId: "",
+        policyIdError: "",
+        submitError: "",
+        jsonString: DEFAULT_POLICY,
+        isSubmitting: false,
+        hasSubmitted: false,
+      });
+    }
+  }
+
   getPolicyToEdit = async (policyId: string): Promise<void> => {
     try {
       const { policyService } = this.props;
@@ -250,3 +268,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} />;
+}
diff --git a/public/pages/CreateRollup/containers/CreateRollup/CreateRollup.tsx b/public/pages/CreateRollup/containers/CreateRollup/CreateRollup.tsx
index a28b4a519..92905139e 100644
--- a/public/pages/CreateRollup/containers/CreateRollup/CreateRollup.tsx
+++ b/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 />
diff --git a/public/pages/CreateRollup/containers/CreateRollupForm/CreateRollupForm.tsx b/public/pages/CreateRollup/containers/CreateRollupForm/CreateRollupForm.tsx
index 85ce8d1b1..b16281742 100644
--- a/public/pages/CreateRollup/containers/CreateRollupForm/CreateRollupForm.tsx
+++ b/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,7 +82,7 @@ interface CreateRollupFormState {
   rollupJSON: any;
 }
 
-export default class CreateRollupForm extends Component<CreateRollupFormProps, CreateRollupFormState> {
+export class CreateRollupForm extends Component<CreateRollupFormProps, CreateRollupFormState> {
   static contextType = CoreServicesContext;
   _isMount: boolean;
 
@@ -143,6 +150,59 @@ 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({
+        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: "",
+
+        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),
+      });
+    }
+  }
+
   getMappings = async (srcIndex: string): Promise<void> => {
     if (!srcIndex.length) return;
     try {
@@ -171,6 +231,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 (!dataSourceReadOnly) {
+      setDataSourceReadOnly(true);
+    }
+
     //Verification here
     if (currentStep == 1) {
       const { rollupId, sourceIndex, targetIndex } = this.state;
@@ -234,6 +302,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 (dataSourceReadOnly) {
+        setDataSourceReadOnly(false);
+      }
+    }
     this.setState({
       currentStep: currentStep,
     });
@@ -680,3 +756,10 @@ export default class CreateRollupForm extends Component<CreateRollupFormProps, C
     );
   }
 }
+
+export default function (props: Omit<CreateRollupFormProps, keyof DataSourceMenuProperties>) {
+  const dataSourceReadOnlyProperties = useContext(DataSourceMenuReadOnlyContext);
+  const dataSourceMenuProperties = useContext(DataSourceMenuContext);
+  useUpdateUrlWithDataSourceProperties();
+  return <CreateRollupForm {...props} {...dataSourceMenuProperties} {...dataSourceReadOnlyProperties} />;
+}
diff --git a/public/pages/CreateTransform/components/DefineTransforms/DefineTransforms.tsx b/public/pages/CreateTransform/components/DefineTransforms/DefineTransforms.tsx
index 79d3fcc52..d13b84c0b 100644
--- a/public/pages/CreateTransform/components/DefineTransforms/DefineTransforms.tsx
+++ b/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)
diff --git a/public/pages/CreateTransform/containers/CreateTransformForm/CreateTransformForm.tsx b/public/pages/CreateTransform/containers/CreateTransformForm/CreateTransformForm.tsx
index 326daff6c..a2a46f4ab 100644
--- a/public/pages/CreateTransform/containers/CreateTransformForm/CreateTransformForm.tsx
+++ b/public/pages/CreateTransform/containers/CreateTransformForm/CreateTransformForm.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 { EuiButton, EuiButtonEmpty, EuiComboBoxOptionOption, EuiFlexGroup, EuiFlexItem } from "@elastic/eui";
 import { RouteComponentProps } from "react-router-dom";
 import moment from "moment";
@@ -27,8 +27,15 @@ import SpecifyScheduleStep from "../SpecifyScheduleStep";
 import ReviewAndCreateStep from "../ReviewAndCreateStep";
 import { compareFieldItem, createdTransformToastMessage, isGroupBy, parseFieldOptions } from "../../utils/helpers";
 import { CoreServicesContext } from "../../../../components/core_services";
-
-interface CreateTransformFormProps extends RouteComponentProps {
+import {
+  DataSourceMenuContext,
+  DataSourceMenuProperties,
+  DataSourceMenuReadOnlyContext,
+  DataSourceMenuReadOnlyProperties,
+} from "../../../../services/DataSourceMenuContext";
+import { useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent";
+
+interface CreateTransformFormProps extends RouteComponentProps, DataSourceMenuProperties, DataSourceMenuReadOnlyProperties {
   rollupService: RollupService;
   transformService: TransformService;
   indexService: IndexService;
@@ -78,7 +85,7 @@ interface CreateTransformFormState {
   isLoading: boolean;
 }
 
-export default class CreateTransformForm extends Component<CreateTransformFormProps, CreateTransformFormState> {
+export class CreateTransformForm extends Component<CreateTransformFormProps, CreateTransformFormState> {
   static contextType = CoreServicesContext;
   _isMount: boolean;
 
@@ -188,11 +195,10 @@ export default class CreateTransformForm extends Component<CreateTransformFormPr
     const { sourceIndex, sourceIndexFilter } = this.state;
     this.setState({ isLoading: true });
     try {
-      const response = await transformService.searchSampleData(
-        sourceIndex[0].label,
-        { from: 0, size: DefaultSampleDataSize },
-        sourceIndexFilter
-      );
+      const response = await transformService.searchSampleData(sourceIndex[0].label, sourceIndexFilter, {
+        from: 0,
+        size: DefaultSampleDataSize,
+      });
 
       if (!response.ok) {
         const errMsg = response.error ? response.error : "There was a problem searching data from source index.";
@@ -213,6 +219,13 @@ export default class CreateTransformForm extends Component<CreateTransformFormPr
     let currentStep = this.state.currentStep;
     let warned = this.state.beenWarned;
     let error = false;
+
+    const dataSourceReadOnly = this.props.dataSourceReadOnly;
+    const setDataSourceReadOnly = this.props.setDataSourceReadOnly;
+    if (!dataSourceReadOnly) {
+      setDataSourceReadOnly(true);
+    }
+
     // Verification here
     if (currentStep == 1) {
       const { transformId, sourceIndex, targetIndex, sourceIndexFilterError } = this.state;
@@ -265,6 +278,14 @@ export default class CreateTransformForm extends Component<CreateTransformFormPr
     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 (dataSourceReadOnly) {
+        setDataSourceReadOnly(false);
+      }
+    }
     this.setState({
       currentStep: currentStep,
     });
@@ -664,3 +685,10 @@ export default class CreateTransformForm extends Component<CreateTransformFormPr
     );
   }
 }
+
+export default function (props: Omit<CreateTransformFormProps, keyof DataSourceMenuProperties>) {
+  const dataSourceReadOnlyProperties = useContext(DataSourceMenuReadOnlyContext);
+  const dataSourceMenuProperties = useContext(DataSourceMenuContext);
+  useUpdateUrlWithDataSourceProperties();
+  return <CreateTransformForm {...props} {...dataSourceMenuProperties} {...dataSourceReadOnlyProperties} />;
+}
diff --git a/public/pages/EditRollup/containers/EditRollup.tsx b/public/pages/EditRollup/containers/EditRollup.tsx
index cec6dc41e..ea46a8adb 100644
--- a/public/pages/EditRollup/containers/EditRollup.tsx
+++ b/public/pages/EditRollup/containers/EditRollup.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 { RouteComponentProps } from "react-router-dom";
 import moment from "moment";
 import queryString from "query-string";
@@ -17,6 +17,7 @@ import { RollupService } from "../../../services";
 import { EMPTY_ROLLUP } from "../../CreateRollup/utils/constants";
 import { CoreServicesContext } from "../../../components/core_services";
 import { delayTimeUnitToMS, msToDelayTimeUnit } from "../../CreateRollup/utils/helpers";
+import { useUpdateUrlWithDataSourceProperties } from "../../../components/MDSEnabledComponent";
 
 interface EditRollupProps extends RouteComponentProps {
   rollupService: RollupService;
@@ -45,7 +46,7 @@ interface EditRollupState {
   rollupJSON: any;
 }
 
-export default class EditRollup extends Component<EditRollupProps, EditRollupState> {
+export class EditRollup extends Component<EditRollupProps, EditRollupState> {
   static contextType = CoreServicesContext;
   constructor(props: EditRollupProps) {
     super(props);
@@ -343,3 +344,8 @@ export default class EditRollup extends Component<EditRollupProps, EditRollupSta
     );
   }
 }
+
+export default function (props: EditRollupProps) {
+  useUpdateUrlWithDataSourceProperties();
+  return <EditRollup {...props} />;
+}
diff --git a/public/pages/Main/Main.tsx b/public/pages/Main/Main.tsx
index 319567772..2f2568438 100644
--- a/public/pages/Main/Main.tsx
+++ b/public/pages/Main/Main.tsx
@@ -58,9 +58,10 @@ import ForceMerge from "../ForceMerge";
 import Notifications from "../Notifications";
 import ComposableTemplates from "../ComposableTemplates";
 import CreateComposableTemplate from "../CreateComposableTemplate";
-import { DataSourceMenuContext, DataSourceMenuProperties } from "../../services/DataSourceMenuContext";
+import { DataSourceMenuContext, DataSourceMenuProperties, DataSourceMenuReadOnlyContext } from "../../services/DataSourceMenuContext";
 import queryString from "query-string";
 import { DataSourceManagementPluginSetup } from "../../../../../src/plugins/data_source_management/public";
+import { bool } from "aws-sdk/clients/signer";
 
 enum Navigation {
   IndexManagement = "Index Management",
@@ -131,7 +132,9 @@ interface MainProps extends RouteComponentProps {
   dataSourceManagement: DataSourceManagementPluginSetup;
 }
 
-interface MainState extends Pick<DataSourceMenuProperties, "dataSourceId" | "dataSourceLabel"> {}
+interface MainState extends Pick<DataSourceMenuProperties, "dataSourceId" | "dataSourceLabel"> {
+  dataSourceReadOnly: boolean;
+}
 
 const dataSourceEnabledPaths: string[] = [
   ROUTES.CREATE_DATA_STREAM,
@@ -141,6 +144,12 @@ const dataSourceEnabledPaths: string[] = [
   ROUTES.SPLIT_INDEX,
   ROUTES.ROLLOVER,
   ROUTES.INDEX_DETAIL,
+  ROUTES.INDEX_POLICIES,
+  ROUTES.MANAGED_INDICES,
+  ROUTES.CREATE_POLICY,
+  ROUTES.EDIT_POLICY,
+  ROUTES.CHANGE_POLICY,
+  ROUTES.POLICY_DETAILS,
   ROUTES.INDICES,
   ROUTES.CREATE_INDEX,
   ROUTES.ALIASES,
@@ -151,28 +160,40 @@ const dataSourceEnabledPaths: string[] = [
   ROUTES.COMPOSABLE_TEMPLATES,
   ROUTES.CREATE_COMPOSABLE_TEMPLATE,
   ROUTES.REINDEX,
+  ROUTES.ROLLUPS,
+  ROUTES.CREATE_ROLLUP,
+  ROUTES.EDIT_ROLLUP,
+  ROUTES.ROLLUP_DETAILS,
+  ROUTES.TRANSFORMS,
+  ROUTES.CREATE_TRANSFORM,
 ];
 
 export default class Main extends Component<MainProps, MainState> {
   constructor(props: MainProps) {
     super(props);
+    let dataSourceId = "";
+    let dataSourceLabel = "";
     if (props.multiDataSourceEnabled) {
-      const { dataSourceId = "", dataSourceLabel = "" } = queryString.parse(this.props.location.search) as {
+      const { dataSourceId: parsedDataSourceId, dataSourceLabel: parsedDataSourceLabel } = queryString.parse(
+        this.props.location.search
+      ) as {
         dataSourceId: string;
         dataSourceLabel: string;
       };
-      this.state = {
-        dataSourceId: dataSourceId,
-        dataSourceLabel: dataSourceLabel,
-      };
-    } else {
-      this.state = {
-        dataSourceId: "",
-        dataSourceLabel: "",
-      };
+      dataSourceId = parsedDataSourceId || "";
+      dataSourceLabel = parsedDataSourceLabel || "";
     }
+    this.state = {
+      dataSourceId: dataSourceId,
+      dataSourceLabel: dataSourceLabel,
+      dataSourceReadOnly: false,
+    };
   }
 
+  setDataSourceReadOnly = (readonly: boolean) => {
+    this.setState({ dataSourceReadOnly: readonly });
+  };
+
   isDataSourceEnabledForPath(path: string): boolean {
     return dataSourceEnabledPaths.some((dataSourceEnabledPath: string) => path.startsWith(dataSourceEnabledPath));
   }
@@ -203,6 +224,11 @@ export default class Main extends Component<MainProps, MainState> {
     if (this.props.multiDataSourceEnabled && this.isDataSourceEnabledForPath(pathname)) {
       services.indexService = new IndexService(http, this.state.dataSourceId, this.props.multiDataSourceEnabled);
       services.commonService = new CommonService(http, this.state.dataSourceId, this.props.multiDataSourceEnabled);
+      services.managedIndexService = new ManagedIndexService(http, this.state.dataSourceId, this.props.multiDataSourceEnabled);
+      services.policyService = new PolicyService(http, this.state.dataSourceId, this.props.multiDataSourceEnabled);
+      services.notificationService = new NotificationService(http, this.state.dataSourceId, this.props.multiDataSourceEnabled);
+      services.rollupService = new RollupService(http, this.state.dataSourceId, this.props.multiDataSourceEnabled);
+      services.transformService = new TransformService(http, this.state.dataSourceId, this.props.multiDataSourceEnabled);
     }
     return services;
   }
@@ -329,495 +355,548 @@ export default class Main extends Component<MainProps, MainState> {
                           multiDataSourceEnabled: this.props.multiDataSourceEnabled,
                         }}
                       >
-                        {this.props.multiDataSourceEnabled && (
-                          <Switch>
-                            <Route
-                              path={[
-                                `${ROUTES.CREATE_DATA_STREAM}/:dataStream`,
-                                `${ROUTES.CREATE_TEMPLATE}/:template`,
-                                `${ROUTES.CREATE_COMPOSABLE_TEMPLATE}/:composableTemplate`,
-                                ROUTES.FORCE_MERGE,
-                                ROUTES.SPLIT_INDEX,
-                                ROUTES.ROLLOVER,
-                                ROUTES.INDEX_DETAIL,
-                                ROUTES.REINDEX,
-                              ]}
-                              render={(props) => (
-                                <DataSourceMenu
-                                  appName={"Index State Management"}
-                                  setMenuMountPoint={this.props.setActionMenu}
-                                  showDataSourceView={true}
-                                  selectedOption={(() => {
-                                    if (this.state.dataSourceId && this.state.dataSourceId !== "") {
-                                      return [
-                                        {
-                                          id: this.state.dataSourceId,
-                                          label: this.state.dataSourceLabel,
-                                        },
-                                      ];
-                                    }
-                                    return undefined;
-                                  })()}
-                                  fullWidth={false}
-                                  hideLocalCluster={false}
-                                />
-                              )}
-                            />
-                            <Route
-                              path={[
-                                ROUTES.INDICES,
-                                ROUTES.CREATE_INDEX,
-                                ROUTES.ALIASES,
-                                ROUTES.DATA_STREAMS,
-                                ROUTES.TEMPLATES,
-                                ROUTES.CREATE_DATA_STREAM,
-                                ROUTES.CREATE_TEMPLATE,
-                                ROUTES.COMPOSABLE_TEMPLATES,
-                                ROUTES.CREATE_COMPOSABLE_TEMPLATE,
-                              ]}
-                              render={() => (
-                                <DataSourceMenu
-                                  appName={"Index State Management"}
-                                  setMenuMountPoint={this.props.setActionMenu}
-                                  showDataSourceSelectable={true}
-                                  dataSourceCallBackFunc={({ id: dataSourceId, label: dataSourceLabel }) => {
-                                    this.setState({ dataSourceId, dataSourceLabel });
-                                  }}
-                                  disableDataSourceSelectable={false}
-                                  notifications={services.notificationService}
-                                  savedObjects={core.savedObjects.client}
-                                  selectedOption={(() => {
-                                    if (this.state.dataSourceId && this.state.dataSourceId !== "") {
-                                      return [
-                                        {
-                                          id: this.state.dataSourceId,
-                                          label: this.state.dataSourceLabel,
-                                        },
-                                      ];
-                                    }
-                                    return undefined;
-                                  })()}
-                                  fullWidth={false}
-                                  hideLocalCluster={false}
-                                />
-                              )}
-                            />
-                          </Switch>
-                        )}
-                        <ModalRoot services={services} />
-                        <EuiPage restrictWidth="100%">
-                          {/* Hide side navigation bar when creating or editing rollup job*/}
-                          {!HIDDEN_NAV_ROUTES.includes(pathname) &&
-                          !HIDDEN_NAV_STARTS_WITH_ROUTE.some((item) => pathname.startsWith(item)) ? (
-                            <EuiPageSideBar style={{ minWidth: 200 }}>
-                              <EuiSideNav style={{ width: 200 }} items={sideNav} />
-                            </EuiPageSideBar>
-                          ) : null}
-                          <EuiPageBody>
+                        <DataSourceMenuReadOnlyContext.Provider
+                          value={{
+                            dataSourceReadOnly: this.state.dataSourceReadOnly,
+                            setDataSourceReadOnly: this.setDataSourceReadOnly,
+                          }}
+                        >
+                          {this.props.multiDataSourceEnabled && (
                             <Switch>
                               <Route
-                                path={ROUTES.SNAPSHOTS}
-                                render={(props: RouteComponentProps) => (
-                                  <div style={ROUTE_STYLE}>
-                                    <Snapshots
-                                      {...props}
-                                      snapshotManagementService={services.snapshotManagementService}
-                                      indexService={services.indexService}
-                                    />
-                                  </div>
-                                )}
-                              />
-                              <Route
-                                path={ROUTES.REPOSITORIES}
-                                render={(props: RouteComponentProps) => (
-                                  <div style={ROUTE_STYLE}>
-                                    <Repositories {...props} snapshotManagementService={services.snapshotManagementService} />
-                                  </div>
-                                )}
-                              />
-                              <Route
-                                path={ROUTES.SNAPSHOT_POLICIES}
-                                render={(props: RouteComponentProps) => (
-                                  <div style={ROUTE_STYLE}>
-                                    <SnapshotPolicies {...props} snapshotManagementService={services.snapshotManagementService} />
-                                  </div>
-                                )}
-                              />
-                              <Route
-                                path={ROUTES.SNAPSHOT_POLICY_DETAILS}
-                                render={(props: RouteComponentProps) => (
-                                  <SnapshotPolicyDetails
-                                    {...props}
-                                    snapshotManagementService={services.snapshotManagementService}
-                                    notificationService={services.notificationService}
-                                  />
-                                )}
-                              />
-                              <Route
-                                path={ROUTES.CREATE_SNAPSHOT_POLICY}
-                                render={(props: RouteComponentProps) => (
-                                  <CreateSnapshotPolicy
-                                    {...props}
-                                    snapshotManagementService={services.snapshotManagementService}
-                                    notificationService={services.notificationService}
-                                    indexService={services.indexService}
-                                    isEdit={false}
+                                path={[
+                                  `${ROUTES.CREATE_DATA_STREAM}/:dataStream`,
+                                  `${ROUTES.CREATE_TEMPLATE}/:template`,
+                                  `${ROUTES.CREATE_COMPOSABLE_TEMPLATE}/:composableTemplate`,
+                                  ROUTES.FORCE_MERGE,
+                                  ROUTES.SPLIT_INDEX,
+                                  ROUTES.ROLLOVER,
+                                  ROUTES.INDEX_DETAIL,
+                                  ROUTES.EDIT_POLICY,
+                                  ROUTES.POLICY_DETAILS,
+                                  ROUTES.REINDEX,
+                                  ROUTES.EDIT_ROLLUP,
+                                  ROUTES.ROLLUP_DETAILS,
+                                  ROUTES.TRANSFORM_DETAILS,
+                                  ROUTES.EDIT_TRANSFORM,
+                                ]}
+                                render={(props) => (
+                                  <DataSourceMenu
+                                    appName={"Index State Management"}
+                                    setMenuMountPoint={this.props.setActionMenu}
+                                    showDataSourceView={true}
+                                    selectedOption={(() => {
+                                      if (this.state.dataSourceId && this.state.dataSourceId !== "") {
+                                        return [
+                                          {
+                                            id: this.state.dataSourceId,
+                                            label: this.state.dataSourceLabel,
+                                          },
+                                        ];
+                                      }
+                                      return undefined;
+                                    })()}
+                                    fullWidth={false}
+                                    hideLocalCluster={false}
                                   />
                                 )}
                               />
                               <Route
-                                path={ROUTES.EDIT_SNAPSHOT_POLICY}
-                                render={(props: RouteComponentProps) => (
-                                  <CreateSnapshotPolicy
-                                    {...props}
-                                    snapshotManagementService={services.snapshotManagementService}
-                                    notificationService={services.notificationService}
-                                    indexService={services.indexService}
-                                    isEdit={true}
+                                path={[
+                                  ROUTES.INDICES,
+                                  ROUTES.CREATE_INDEX,
+                                  ROUTES.ALIASES,
+                                  ROUTES.DATA_STREAMS,
+                                  ROUTES.TEMPLATES,
+                                  ROUTES.CREATE_DATA_STREAM,
+                                  ROUTES.CREATE_TEMPLATE,
+                                  ROUTES.COMPOSABLE_TEMPLATES,
+                                  ROUTES.CREATE_COMPOSABLE_TEMPLATE,
+                                  ROUTES.MANAGED_INDICES,
+                                  ROUTES.INDEX_POLICIES,
+                                  ROUTES.CREATE_POLICY,
+                                  ROUTES.CHANGE_POLICY,
+                                  ROUTES.ROLLUPS,
+                                  ROUTES.TRANSFORMS,
+                                ]}
+                                render={() => (
+                                  <DataSourceMenu
+                                    appName={"Index State Management"}
+                                    setMenuMountPoint={this.props.setActionMenu}
+                                    showDataSourceSelectable={true}
+                                    dataSourceCallBackFunc={({ id: dataSourceId, label: dataSourceLabel }) => {
+                                      this.setState({ dataSourceId, dataSourceLabel });
+                                    }}
+                                    disableDataSourceSelectable={false}
+                                    notifications={services.notificationService}
+                                    savedObjects={core.savedObjects.client}
+                                    selectedOption={(() => {
+                                      if (this.state.dataSourceId && this.state.dataSourceId !== "") {
+                                        return [
+                                          {
+                                            id: this.state.dataSourceId,
+                                            label: this.state.dataSourceLabel,
+                                          },
+                                        ];
+                                      }
+                                      return undefined;
+                                    })()}
+                                    fullWidth={false}
+                                    hideLocalCluster={false}
                                   />
                                 )}
                               />
                               <Route
-                                path={ROUTES.CHANGE_POLICY}
-                                render={(props: RouteComponentProps) => (
-                                  <ChangePolicy
-                                    {...props}
-                                    managedIndexService={services.managedIndexService}
-                                    indexService={services.indexService}
+                                path={[ROUTES.CREATE_ROLLUP, ROUTES.CREATE_TRANSFORM]}
+                                render={() => (
+                                  <DataSourceMenu
+                                    appName={"Index State Management"}
+                                    setMenuMountPoint={this.props.setActionMenu}
+                                    showDataSourceView={this.state.dataSourceReadOnly}
+                                    showDataSourceSelectable={!this.state.dataSourceReadOnly}
+                                    disableDataSourceSelectable={this.state.dataSourceReadOnly}
+                                    dataSourceCallBackFunc={
+                                      this.state.dataSourceReadOnly
+                                        ? undefined
+                                        : ({ id: dataSourceId, label: dataSourceLabel }) => {
+                                            this.setState({ dataSourceId, dataSourceLabel });
+                                          }
+                                    }
+                                    notifications={this.state.dataSourceReadOnly ? undefined : services.notificationService}
+                                    savedObjects={this.state.dataSourceReadOnly ? undefined : core.savedObjects.client}
+                                    selectedOption={(() => {
+                                      if (this.state.dataSourceId && this.state.dataSourceId !== "") {
+                                        return [
+                                          {
+                                            id: this.state.dataSourceId,
+                                            label: this.state.dataSourceLabel,
+                                          },
+                                        ];
+                                      }
+                                      return undefined;
+                                    })()}
+                                    fullWidth={false}
+                                    hideLocalCluster={false}
                                   />
                                 )}
                               />
-                              <Route
-                                path={ROUTES.CREATE_POLICY}
-                                render={(props: RouteComponentProps) =>
-                                  queryString.parse(this.props.location.search).type == "visual" ? (
-                                    <VisualCreatePolicy
+                            </Switch>
+                          )}
+                          <ModalRoot services={services} />
+                          <EuiPage restrictWidth="100%">
+                            {/* Hide side navigation bar when creating or editing rollup job*/}
+                            {!HIDDEN_NAV_ROUTES.includes(pathname) &&
+                            !HIDDEN_NAV_STARTS_WITH_ROUTE.some((item) => pathname.startsWith(item)) ? (
+                              <EuiPageSideBar style={{ minWidth: 200 }}>
+                                <EuiSideNav style={{ width: 200 }} items={sideNav} />
+                              </EuiPageSideBar>
+                            ) : null}
+                            <EuiPageBody>
+                              <Switch>
+                                <Route
+                                  path={ROUTES.SNAPSHOTS}
+                                  render={(props: RouteComponentProps) => (
+                                    <div style={ROUTE_STYLE}>
+                                      <Snapshots
+                                        {...props}
+                                        snapshotManagementService={services.snapshotManagementService}
+                                        indexService={services.indexService}
+                                      />
+                                    </div>
+                                  )}
+                                />
+                                <Route
+                                  path={ROUTES.REPOSITORIES}
+                                  render={(props: RouteComponentProps) => (
+                                    <div style={ROUTE_STYLE}>
+                                      <Repositories {...props} snapshotManagementService={services.snapshotManagementService} />
+                                    </div>
+                                  )}
+                                />
+                                <Route
+                                  path={ROUTES.SNAPSHOT_POLICIES}
+                                  render={(props: RouteComponentProps) => (
+                                    <div style={ROUTE_STYLE}>
+                                      <SnapshotPolicies {...props} snapshotManagementService={services.snapshotManagementService} />
+                                    </div>
+                                  )}
+                                />
+                                <Route
+                                  path={ROUTES.SNAPSHOT_POLICY_DETAILS}
+                                  render={(props: RouteComponentProps) => (
+                                    <SnapshotPolicyDetails
                                       {...props}
-                                      isEdit={false}
-                                      policyService={services.policyService}
+                                      snapshotManagementService={services.snapshotManagementService}
                                       notificationService={services.notificationService}
                                     />
-                                  ) : (
-                                    <CreatePolicy {...props} isEdit={false} policyService={services.policyService} />
-                                  )
-                                }
-                              />
-                              <Route
-                                path={ROUTES.EDIT_POLICY}
-                                render={(props: RouteComponentProps) =>
-                                  queryString.parse(this.props.location.search).type == "visual" ? (
-                                    <VisualCreatePolicy
+                                  )}
+                                />
+                                <Route
+                                  path={ROUTES.CREATE_SNAPSHOT_POLICY}
+                                  render={(props: RouteComponentProps) => (
+                                    <CreateSnapshotPolicy
                                       {...props}
-                                      isEdit={true}
-                                      policyService={services.policyService}
+                                      snapshotManagementService={services.snapshotManagementService}
                                       notificationService={services.notificationService}
+                                      indexService={services.indexService}
+                                      isEdit={false}
                                     />
-                                  ) : (
-                                    <CreatePolicy {...props} isEdit={true} policyService={services.policyService} />
-                                  )
-                                }
-                              />
-                              <Route
-                                path={ROUTES.INDEX_POLICIES}
-                                render={(props: RouteComponentProps) => (
-                                  <div style={ROUTE_STYLE}>
-                                    <Policies {...props} policyService={services.policyService} />
-                                  </div>
-                                )}
-                              />
-                              <Route
-                                path={ROUTES.POLICY_DETAILS}
-                                render={(props: RouteComponentProps) => (
-                                  <div style={ROUTE_STYLE}>
-                                    <PolicyDetails {...props} policyService={services.policyService} />
-                                  </div>
-                                )}
-                              />
-                              <Route
-                                path={ROUTES.MANAGED_INDICES}
-                                render={(props: RouteComponentProps) => (
-                                  <div style={ROUTE_STYLE}>
-                                    <ManagedIndices {...props} managedIndexService={services.managedIndexService} />
-                                  </div>
-                                )}
-                              />
-                              <Route
-                                path={ROUTES.INDICES}
-                                render={(props: RouteComponentProps) => (
-                                  <div style={ROUTE_STYLE}>
-                                    <Indices {...props} indexService={services.indexService} commonService={services.commonService} />
-                                  </div>
-                                )}
-                              />
-                              <Route
-                                path={ROUTES.ROLLUPS}
-                                render={(props: RouteComponentProps) => (
-                                  <div style={ROUTE_STYLE}>
-                                    <Rollups {...props} rollupService={services.rollupService} />
-                                  </div>
-                                )}
-                              />
-                              <Route
-                                path={ROUTES.CREATE_ROLLUP}
-                                render={(props: RouteComponentProps) => (
-                                  <div style={ROUTE_STYLE}>
-                                    <CreateRollupForm
+                                  )}
+                                />
+                                <Route
+                                  path={ROUTES.EDIT_SNAPSHOT_POLICY}
+                                  render={(props: RouteComponentProps) => (
+                                    <CreateSnapshotPolicy
                                       {...props}
-                                      rollupService={services.rollupService}
+                                      snapshotManagementService={services.snapshotManagementService}
+                                      notificationService={services.notificationService}
                                       indexService={services.indexService}
+                                      isEdit={true}
                                     />
-                                  </div>
-                                )}
-                              />
-                              <Route
-                                path={ROUTES.EDIT_ROLLUP}
-                                render={(props: RouteComponentProps) => (
-                                  <div style={ROUTE_STYLE}>
-                                    <EditRollup {...props} rollupService={services.rollupService} />
-                                  </div>
-                                )}
-                              />
-                              <Route
-                                path={ROUTES.ROLLUP_DETAILS}
-                                render={(props: RouteComponentProps) => (
-                                  <div style={ROUTE_STYLE}>
-                                    <RollupDetails {...props} rollupService={services.rollupService} />
-                                  </div>
-                                )}
-                              />
-                              <Route
-                                path={ROUTES.TRANSFORMS}
-                                render={(props: RouteComponentProps) => (
-                                  <div style={ROUTE_STYLE}>
-                                    <Transforms {...props} transformService={services.transformService} />
-                                  </div>
-                                )}
-                              />
-                              <Route
-                                path={ROUTES.CREATE_TRANSFORM}
-                                render={(props: RouteComponentProps) => (
-                                  <div style={ROUTE_STYLE}>
-                                    <CreateTransformForm
+                                  )}
+                                />
+                                <Route
+                                  path={ROUTES.CHANGE_POLICY}
+                                  render={(props: RouteComponentProps) => (
+                                    <ChangePolicy
                                       {...props}
-                                      rollupService={services.rollupService}
-                                      transformService={services.transformService}
+                                      managedIndexService={services.managedIndexService}
                                       indexService={services.indexService}
                                     />
-                                  </div>
-                                )}
-                              />
-                              <Route
-                                path={ROUTES.EDIT_TRANSFORM}
-                                render={(props: RouteComponentProps) => (
-                                  <div style={ROUTE_STYLE}>
-                                    <EditTransform {...props} transformService={services.transformService} />
-                                  </div>
-                                )}
-                              />
-                              <Route
-                                path={ROUTES.TRANSFORM_DETAILS}
-                                render={(props: RouteComponentProps) => (
-                                  <div style={ROUTE_STYLE}>
-                                    <TransformDetails {...props} transformService={services.transformService} />
-                                  </div>
-                                )}
-                              />
-                              <Route
-                                path={`${ROUTES.CREATE_INDEX}/:index/:mode`}
-                                render={(props: RouteComponentProps) => (
-                                  <div style={ROUTE_STYLE}>
-                                    <CreateIndex {...props} />
-                                  </div>
-                                )}
-                              />
-                              <Route
-                                path={`${ROUTES.CREATE_INDEX}/:index`}
-                                render={(props: RouteComponentProps) => (
-                                  <div style={ROUTE_STYLE}>
-                                    <CreateIndex {...props} />
-                                  </div>
-                                )}
-                              />
-                              <Route
-                                path={ROUTES.CREATE_INDEX}
-                                render={(props: RouteComponentProps) => (
-                                  <div style={ROUTE_STYLE}>
-                                    <CreateIndex {...props} />
-                                  </div>
-                                )}
-                              />
-                              <Route
-                                path={ROUTES.REINDEX}
-                                render={(props: RouteComponentProps) => (
-                                  <div style={ROUTE_STYLE}>
-                                    <Reindex {...props} commonService={services.commonService} indexService={services.indexService} />
-                                  </div>
-                                )}
-                              />
-                              <Route
-                                path={ROUTES.SPLIT_INDEX}
-                                render={(props: RouteComponentProps) => (
-                                  <div style={ROUTE_STYLE}>
-                                    <SplitIndex {...props} />
-                                  </div>
-                                )}
-                              />
-                              <Route
-                                path={ROUTES.ALIASES}
-                                render={(props) => (
-                                  <div style={ROUTE_STYLE}>
-                                    <Aliases {...props} />
-                                  </div>
-                                )}
-                              />
-                              <Route
-                                path={ROUTES.TEMPLATES}
-                                render={(props) => (
-                                  <div style={ROUTE_STYLE}>
-                                    <Templates {...props} />
-                                  </div>
-                                )}
-                              />
-                              <Route
-                                path={ROUTES.COMPOSABLE_TEMPLATES}
-                                render={(props) => (
-                                  <div style={ROUTE_STYLE}>
-                                    <ComposableTemplates {...props} />
-                                  </div>
-                                )}
-                              />
-                              <Route
-                                path={`${ROUTES.CREATE_COMPOSABLE_TEMPLATE}/:template/:mode`}
-                                render={(props) => (
-                                  <div style={ROUTE_STYLE}>
-                                    <CreateComposableTemplate {...props} />
-                                  </div>
-                                )}
-                              />
-                              <Route
-                                path={`${ROUTES.CREATE_COMPOSABLE_TEMPLATE}/:template`}
-                                render={(props) => (
-                                  <div style={ROUTE_STYLE}>
-                                    <CreateComposableTemplate {...props} />
-                                  </div>
-                                )}
-                              />
-                              <Route
-                                path={ROUTES.CREATE_COMPOSABLE_TEMPLATE}
-                                render={(props) => (
-                                  <div style={ROUTE_STYLE}>
-                                    <CreateComposableTemplate {...props} />
-                                  </div>
-                                )}
-                              />
-                              <Route
-                                path={`${ROUTES.CREATE_TEMPLATE}/:template/:mode`}
-                                render={(props) => (
-                                  <div style={ROUTE_STYLE}>
-                                    <CreateIndexTemplate {...props} />
-                                  </div>
-                                )}
-                              />
-                              <Route
-                                path={`${ROUTES.CREATE_TEMPLATE}/:template`}
-                                render={(props) => (
-                                  <div style={ROUTE_STYLE}>
-                                    <CreateIndexTemplate {...props} />
-                                  </div>
-                                )}
-                              />
-                              <Route
-                                path={ROUTES.CREATE_TEMPLATE}
-                                render={(props) => (
-                                  <div style={ROUTE_STYLE}>
-                                    <CreateIndexTemplate {...props} />
-                                  </div>
-                                )}
-                              />
-                              <Route
-                                path={`${ROUTES.INDEX_DETAIL}/:index`}
-                                render={(props) => (
-                                  <div style={ROUTE_STYLE}>
-                                    <IndexDetail {...props} />
-                                  </div>
-                                )}
-                              />
-                              <Route
-                                path={ROUTES.SHRINK_INDEX}
-                                render={(props) => (
-                                  <div style={ROUTE_STYLE}>
-                                    <ShrinkIndex {...props} commonService={services.commonService} />
-                                  </div>
-                                )}
-                              />
-                              <Route
-                                path={`${ROUTES.ROLLOVER}/:source`}
-                                render={(props) => (
-                                  <div style={ROUTE_STYLE}>
-                                    <Rollover {...props} />
-                                  </div>
-                                )}
-                              />
-                              <Route
-                                path={ROUTES.ROLLOVER}
-                                render={(props) => (
-                                  <div style={ROUTE_STYLE}>
-                                    <Rollover {...props} />
-                                  </div>
-                                )}
-                              />
-                              <Route
-                                path={ROUTES.DATA_STREAMS}
-                                render={(props) => (
-                                  <div style={ROUTE_STYLE}>
-                                    <DataStreams {...props} />
-                                  </div>
-                                )}
-                              />
-                              <Route
-                                path={`${ROUTES.CREATE_DATA_STREAM}/:dataStream`}
-                                render={(props) => (
-                                  <div style={ROUTE_STYLE}>
-                                    <CreateDataStream {...props} />
-                                  </div>
-                                )}
-                              />
-                              <Route
-                                path={ROUTES.CREATE_DATA_STREAM}
-                                render={(props) => (
-                                  <div style={ROUTE_STYLE}>
-                                    <CreateDataStream {...props} />
-                                  </div>
-                                )}
-                              />
-                              <Route
-                                path={`${ROUTES.FORCE_MERGE}/:indexes`}
-                                render={(props) => (
-                                  <div style={ROUTE_STYLE}>
-                                    <ForceMerge {...props} />
-                                  </div>
-                                )}
-                              />
-                              <Route
-                                path={ROUTES.FORCE_MERGE}
-                                render={(props) => (
-                                  <div style={ROUTE_STYLE}>
-                                    <ForceMerge {...props} />
-                                  </div>
-                                )}
-                              />
-                              <Route
-                                path={ROUTES.NOTIFICATIONS}
-                                render={(props) => (
-                                  <div style={ROUTE_STYLE}>
-                                    <Notifications {...props} />
-                                  </div>
-                                )}
-                              />
-                              <Redirect from="/" to={landingPage} />
-                            </Switch>
-                          </EuiPageBody>
-                        </EuiPage>
+                                  )}
+                                />
+                                <Route
+                                  path={ROUTES.CREATE_POLICY}
+                                  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) =>
+                                    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}
+                                  render={(props: RouteComponentProps) => (
+                                    <div style={ROUTE_STYLE}>
+                                      <Policies {...props} policyService={services.policyService} />
+                                    </div>
+                                  )}
+                                />
+                                <Route
+                                  path={ROUTES.POLICY_DETAILS}
+                                  render={(props: RouteComponentProps) => (
+                                    <div style={ROUTE_STYLE}>
+                                      <PolicyDetails {...props} policyService={services.policyService} />
+                                    </div>
+                                  )}
+                                />
+                                <Route
+                                  path={ROUTES.MANAGED_INDICES}
+                                  render={(props: RouteComponentProps) => (
+                                    <div style={ROUTE_STYLE}>
+                                      <ManagedIndices {...props} managedIndexService={services.managedIndexService} />
+                                    </div>
+                                  )}
+                                />
+                                <Route
+                                  path={ROUTES.INDICES}
+                                  render={(props: RouteComponentProps) => (
+                                    <div style={ROUTE_STYLE}>
+                                      <Indices {...props} indexService={services.indexService} commonService={services.commonService} />
+                                    </div>
+                                  )}
+                                />
+                                <Route
+                                  path={ROUTES.ROLLUPS}
+                                  render={(props: RouteComponentProps) => (
+                                    <div style={ROUTE_STYLE}>
+                                      <Rollups {...props} rollupService={services.rollupService} />
+                                    </div>
+                                  )}
+                                />
+                                <Route
+                                  path={ROUTES.CREATE_ROLLUP}
+                                  render={(props: RouteComponentProps) => (
+                                    <div style={ROUTE_STYLE}>
+                                      <CreateRollupForm
+                                        {...props}
+                                        rollupService={services.rollupService}
+                                        indexService={services.indexService}
+                                      />
+                                    </div>
+                                  )}
+                                />
+                                <Route
+                                  path={ROUTES.EDIT_ROLLUP}
+                                  render={(props: RouteComponentProps) => (
+                                    <div style={ROUTE_STYLE}>
+                                      <EditRollup {...props} rollupService={services.rollupService} />
+                                    </div>
+                                  )}
+                                />
+                                <Route
+                                  path={ROUTES.ROLLUP_DETAILS}
+                                  render={(props: RouteComponentProps) => (
+                                    <div style={ROUTE_STYLE}>
+                                      <RollupDetails {...props} rollupService={services.rollupService} />
+                                    </div>
+                                  )}
+                                />
+                                <Route
+                                  path={ROUTES.TRANSFORMS}
+                                  render={(props: RouteComponentProps) => (
+                                    <div style={ROUTE_STYLE}>
+                                      <Transforms {...props} transformService={services.transformService} />
+                                    </div>
+                                  )}
+                                />
+                                <Route
+                                  path={ROUTES.CREATE_TRANSFORM}
+                                  render={(props: RouteComponentProps) => (
+                                    <div style={ROUTE_STYLE}>
+                                      <CreateTransformForm
+                                        {...props}
+                                        rollupService={services.rollupService}
+                                        transformService={services.transformService}
+                                        indexService={services.indexService}
+                                      />
+                                    </div>
+                                  )}
+                                />
+                                <Route
+                                  path={ROUTES.EDIT_TRANSFORM}
+                                  render={(props: RouteComponentProps) => (
+                                    <div style={ROUTE_STYLE}>
+                                      <EditTransform {...props} transformService={services.transformService} />
+                                    </div>
+                                  )}
+                                />
+                                <Route
+                                  path={ROUTES.TRANSFORM_DETAILS}
+                                  render={(props: RouteComponentProps) => (
+                                    <div style={ROUTE_STYLE}>
+                                      <TransformDetails {...props} transformService={services.transformService} />
+                                    </div>
+                                  )}
+                                />
+                                <Route
+                                  path={`${ROUTES.CREATE_INDEX}/:index/:mode`}
+                                  render={(props: RouteComponentProps) => (
+                                    <div style={ROUTE_STYLE}>
+                                      <CreateIndex {...props} />
+                                    </div>
+                                  )}
+                                />
+                                <Route
+                                  path={`${ROUTES.CREATE_INDEX}/:index`}
+                                  render={(props: RouteComponentProps) => (
+                                    <div style={ROUTE_STYLE}>
+                                      <CreateIndex {...props} />
+                                    </div>
+                                  )}
+                                />
+                                <Route
+                                  path={ROUTES.CREATE_INDEX}
+                                  render={(props: RouteComponentProps) => (
+                                    <div style={ROUTE_STYLE}>
+                                      <CreateIndex {...props} />
+                                    </div>
+                                  )}
+                                />
+                                <Route
+                                  path={ROUTES.REINDEX}
+                                  render={(props: RouteComponentProps) => (
+                                    <div style={ROUTE_STYLE}>
+                                      <Reindex {...props} commonService={services.commonService} indexService={services.indexService} />
+                                    </div>
+                                  )}
+                                />
+                                <Route
+                                  path={ROUTES.SPLIT_INDEX}
+                                  render={(props: RouteComponentProps) => (
+                                    <div style={ROUTE_STYLE}>
+                                      <SplitIndex {...props} />
+                                    </div>
+                                  )}
+                                />
+                                <Route
+                                  path={ROUTES.ALIASES}
+                                  render={(props) => (
+                                    <div style={ROUTE_STYLE}>
+                                      <Aliases {...props} />
+                                    </div>
+                                  )}
+                                />
+                                <Route
+                                  path={ROUTES.TEMPLATES}
+                                  render={(props) => (
+                                    <div style={ROUTE_STYLE}>
+                                      <Templates {...props} />
+                                    </div>
+                                  )}
+                                />
+                                <Route
+                                  path={ROUTES.COMPOSABLE_TEMPLATES}
+                                  render={(props) => (
+                                    <div style={ROUTE_STYLE}>
+                                      <ComposableTemplates {...props} />
+                                    </div>
+                                  )}
+                                />
+                                <Route
+                                  path={`${ROUTES.CREATE_COMPOSABLE_TEMPLATE}/:template/:mode`}
+                                  render={(props) => (
+                                    <div style={ROUTE_STYLE}>
+                                      <CreateComposableTemplate {...props} />
+                                    </div>
+                                  )}
+                                />
+                                <Route
+                                  path={`${ROUTES.CREATE_COMPOSABLE_TEMPLATE}/:template`}
+                                  render={(props) => (
+                                    <div style={ROUTE_STYLE}>
+                                      <CreateComposableTemplate {...props} />
+                                    </div>
+                                  )}
+                                />
+                                <Route
+                                  path={ROUTES.CREATE_COMPOSABLE_TEMPLATE}
+                                  render={(props) => (
+                                    <div style={ROUTE_STYLE}>
+                                      <CreateComposableTemplate {...props} />
+                                    </div>
+                                  )}
+                                />
+                                <Route
+                                  path={`${ROUTES.CREATE_TEMPLATE}/:template/:mode`}
+                                  render={(props) => (
+                                    <div style={ROUTE_STYLE}>
+                                      <CreateIndexTemplate {...props} />
+                                    </div>
+                                  )}
+                                />
+                                <Route
+                                  path={`${ROUTES.CREATE_TEMPLATE}/:template`}
+                                  render={(props) => (
+                                    <div style={ROUTE_STYLE}>
+                                      <CreateIndexTemplate {...props} />
+                                    </div>
+                                  )}
+                                />
+                                <Route
+                                  path={ROUTES.CREATE_TEMPLATE}
+                                  render={(props) => (
+                                    <div style={ROUTE_STYLE}>
+                                      <CreateIndexTemplate {...props} />
+                                    </div>
+                                  )}
+                                />
+                                <Route
+                                  path={`${ROUTES.INDEX_DETAIL}/:index`}
+                                  render={(props) => (
+                                    <div style={ROUTE_STYLE}>
+                                      <IndexDetail {...props} />
+                                    </div>
+                                  )}
+                                />
+                                <Route
+                                  path={ROUTES.SHRINK_INDEX}
+                                  render={(props) => (
+                                    <div style={ROUTE_STYLE}>
+                                      <ShrinkIndex {...props} commonService={services.commonService} />
+                                    </div>
+                                  )}
+                                />
+                                <Route
+                                  path={`${ROUTES.ROLLOVER}/:source`}
+                                  render={(props) => (
+                                    <div style={ROUTE_STYLE}>
+                                      <Rollover {...props} />
+                                    </div>
+                                  )}
+                                />
+                                <Route
+                                  path={ROUTES.ROLLOVER}
+                                  render={(props) => (
+                                    <div style={ROUTE_STYLE}>
+                                      <Rollover {...props} />
+                                    </div>
+                                  )}
+                                />
+                                <Route
+                                  path={ROUTES.DATA_STREAMS}
+                                  render={(props) => (
+                                    <div style={ROUTE_STYLE}>
+                                      <DataStreams {...props} />
+                                    </div>
+                                  )}
+                                />
+                                <Route
+                                  path={`${ROUTES.CREATE_DATA_STREAM}/:dataStream`}
+                                  render={(props) => (
+                                    <div style={ROUTE_STYLE}>
+                                      <CreateDataStream {...props} />
+                                    </div>
+                                  )}
+                                />
+                                <Route
+                                  path={ROUTES.CREATE_DATA_STREAM}
+                                  render={(props) => (
+                                    <div style={ROUTE_STYLE}>
+                                      <CreateDataStream {...props} />
+                                    </div>
+                                  )}
+                                />
+                                <Route
+                                  path={`${ROUTES.FORCE_MERGE}/:indexes`}
+                                  render={(props) => (
+                                    <div style={ROUTE_STYLE}>
+                                      <ForceMerge {...props} />
+                                    </div>
+                                  )}
+                                />
+                                <Route
+                                  path={ROUTES.FORCE_MERGE}
+                                  render={(props) => (
+                                    <div style={ROUTE_STYLE}>
+                                      <ForceMerge {...props} />
+                                    </div>
+                                  )}
+                                />
+                                <Route
+                                  path={ROUTES.NOTIFICATIONS}
+                                  render={(props) => (
+                                    <div style={ROUTE_STYLE}>
+                                      <Notifications {...props} />
+                                    </div>
+                                  )}
+                                />
+                                <Redirect from="/" to={landingPage} />
+                              </Switch>
+                            </EuiPageBody>
+                          </EuiPage>
+                        </DataSourceMenuReadOnlyContext.Provider>
                       </DataSourceMenuContext.Provider>
                     </ModalProvider>
                   )
diff --git a/public/pages/ManagedIndices/containers/ManagedIndices/ManagedIndices.tsx b/public/pages/ManagedIndices/containers/ManagedIndices/ManagedIndices.tsx
index f393d6168..8ae7de242 100644
--- a/public/pages/ManagedIndices/containers/ManagedIndices/ManagedIndices.tsx
+++ b/public/pages/ManagedIndices/containers/ManagedIndices/ManagedIndices.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 {
   EuiBasicTable,
@@ -46,12 +46,14 @@ import RolloverAliasModal from "../../components/RolloverAliasModal";
 import { CoreServicesContext } from "../../../../components/core_services";
 import { DataStream } from "../../../../../server/models/interfaces";
 import { SECURITY_EXCEPTION_PREFIX } from "../../../../../server/utils/constants";
+import { DataSourceMenuContext, DataSourceMenuProperties } from "../../../../services/DataSourceMenuContext";
+import MDSEnabledComponent from "../../../../components/MDSEnabledComponent";
 
-interface ManagedIndicesProps extends RouteComponentProps {
+interface ManagedIndicesProps extends RouteComponentProps, DataSourceMenuProperties {
   managedIndexService: ManagedIndexService;
 }
 
-interface ManagedIndicesState {
+interface ManagedIndicesState extends DataSourceMenuProperties {
   totalManagedIndices: number;
   from: number;
   size: number;
@@ -66,7 +68,7 @@ interface ManagedIndicesState {
   isDataStreamColumnVisible: boolean;
 }
 
-export default class ManagedIndices extends Component<ManagedIndicesProps, ManagedIndicesState> {
+export class ManagedIndices extends MDSEnabledComponent<ManagedIndicesProps, ManagedIndicesState> {
   static contextType = CoreServicesContext;
   columns: EuiTableFieldDataColumnType<ManagedIndexItem>[];
 
@@ -76,6 +78,7 @@ export default class ManagedIndices extends Component<ManagedIndicesProps, Manag
     const { from, size, search, sortField, sortDirection, showDataStreams } = getURLQueryParams(this.props.location);
 
     this.state = {
+      ...this.state,
       totalManagedIndices: 0,
       from,
       size,
@@ -193,8 +196,25 @@ export default class ManagedIndices extends Component<ManagedIndicesProps, Manag
     }
   }
 
-  static getQueryObjectFromState({ from, size, search, sortField, sortDirection, showDataStreams }: ManagedIndicesState) {
-    return { from, size, search, sortField, sortDirection, showDataStreams };
+  static getQueryObjectFromState({
+    from,
+    size,
+    search,
+    sortField,
+    sortDirection,
+    showDataStreams,
+    dataSourceId,
+    multiDataSourceEnabled,
+  }: ManagedIndicesState) {
+    return {
+      from,
+      size,
+      search,
+      sortField,
+      sortDirection,
+      showDataStreams,
+      ...(multiDataSourceEnabled ? { dataSourceId } : {}),
+    };
   }
 
   renderPolicyId = (policyId: string, item: ManagedIndexItem) => {
@@ -227,7 +247,7 @@ export default class ManagedIndices extends Component<ManagedIndicesProps, Manag
     try {
       const { managedIndexService, history } = this.props;
       const queryObject = ManagedIndices.getQueryObjectFromState(this.state);
-      const queryParamsString = queryString.stringify(queryObject);
+      const queryParamsString = queryString.stringify({ ...queryObject, dataSourceLabel: this.state.dataSourceLabel });
       history.replace({ ...this.props.location, search: queryParamsString });
 
       const getManagedIndicesResponse = await managedIndexService.getManagedIndices({
@@ -256,7 +276,7 @@ export default class ManagedIndices extends Component<ManagedIndicesProps, Manag
 
   getDataStreams = async (): Promise<DataStream[]> => {
     const { managedIndexService } = this.props;
-    const serverResponse = await managedIndexService.getDataStreams();
+    const serverResponse = await managedIndexService.getDataStreams(undefined);
     if (!serverResponse.ok) {
       if (serverResponse.error.startsWith(SECURITY_EXCEPTION_PREFIX)) {
         this.context.notifications.toasts.addWarning(serverResponse.error);
@@ -284,11 +304,12 @@ export default class ManagedIndices extends Component<ManagedIndicesProps, Manag
     try {
       if (!indices.length) return;
       const { managedIndexService } = this.props;
-      const removePolicyResponse = await managedIndexService.removePolicy(indices);
+      const removePolicyResponse = await managedIndexService.removePolicy(indices, undefined);
       if (removePolicyResponse.ok) {
         const { updatedIndices, failedIndices, failures } = removePolicyResponse.response;
         if (updatedIndices) {
           this.context.notifications.toasts.addSuccess(`Removed policy from ${updatedIndices} managed indexes`);
+          await this.getManagedIndices();
         }
         if (failures) {
           this.context.notifications.toasts.addDanger(
@@ -479,3 +500,8 @@ export default class ManagedIndices extends Component<ManagedIndicesProps, Manag
     );
   }
 }
+
+export default function (props: Omit<ManagedIndicesProps, keyof DataSourceMenuProperties>) {
+  const dataSourceMenuProps = useContext(DataSourceMenuContext);
+  return <ManagedIndices {...props} {...dataSourceMenuProps} />;
+}
diff --git a/public/pages/Policies/containers/Policies/Policies.tsx b/public/pages/Policies/containers/Policies/Policies.tsx
index d36d1f8ee..8e7e97353 100644
--- a/public/pages/Policies/containers/Policies/Policies.tsx
+++ b/public/pages/Policies/containers/Policies/Policies.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 queryString from "query-string";
 import {
@@ -34,12 +34,15 @@ import { PolicyService } from "../../../../services";
 import { getErrorMessage } from "../../../../utils/helpers";
 import ConfirmationModal from "../../../../components/ConfirmationModal";
 import { CoreServicesContext } from "../../../../components/core_services";
+import { DataSourceMenuContext, DataSourceMenuProperties } from "../../../../services/DataSourceMenuContext";
+import MDSEnabledComponent from "../../../../components/MDSEnabledComponent";
+import { DataSource } from "src/plugins/data/public";
 
-interface PoliciesProps extends RouteComponentProps {
+interface PoliciesProps extends RouteComponentProps, DataSourceMenuProperties {
   policyService: PolicyService;
 }
 
-interface PoliciesState {
+interface PoliciesState extends DataSourceMenuProperties {
   totalPolicies: number;
   from: number;
   size: number;
@@ -51,7 +54,7 @@ interface PoliciesState {
   loadingPolicies: boolean;
 }
 
-export default class Policies extends Component<PoliciesProps, PoliciesState> {
+export class Policies extends MDSEnabledComponent<PoliciesProps, PoliciesState> {
   static contextType = CoreServicesContext;
   columns: EuiTableFieldDataColumnType<PolicyItem>[];
 
@@ -61,6 +64,7 @@ export default class Policies extends Component<PoliciesProps, PoliciesState> {
     const { from, size, search, sortField, sortDirection } = getURLQueryParams(this.props.location);
 
     this.state = {
+      ...this.state,
       totalPolicies: 0,
       from,
       size,
@@ -121,8 +125,16 @@ export default class Policies extends Component<PoliciesProps, PoliciesState> {
     }
   }
 
-  static getQueryObjectFromState({ from, size, search, sortField, sortDirection }: PoliciesState): PoliciesQueryParams {
-    return { from, size, search, sortField, sortDirection };
+  static getQueryObjectFromState({
+    from,
+    size,
+    search,
+    sortField,
+    sortDirection,
+    dataSourceId,
+    multiDataSourceEnabled,
+  }: PoliciesState): PoliciesQueryParams {
+    return { from, size, search, sortField, sortDirection, ...(multiDataSourceEnabled ? { dataSourceId } : {}) };
   }
 
   getPolicies = async (): Promise<void> => {
@@ -130,7 +142,7 @@ export default class Policies extends Component<PoliciesProps, PoliciesState> {
     try {
       const { policyService, history } = this.props;
       const queryObject = Policies.getQueryObjectFromState(this.state);
-      const queryParamsString = queryString.stringify(queryObject);
+      const queryParamsString = queryString.stringify({ ...queryObject, dataSourceLabel: this.state.dataSourceLabel });
       history.replace({ ...this.props.location, search: queryParamsString });
       const getPoliciesResponse = await policyService.getPolicies(queryObject);
       if (getPoliciesResponse.ok) {
@@ -312,3 +324,8 @@ export default class Policies extends Component<PoliciesProps, PoliciesState> {
     );
   }
 }
+
+export default function (props: Omit<PoliciesProps, keyof DataSourceMenuProperties>) {
+  const dataSourceMenuProps = useContext(DataSourceMenuContext);
+  return <Policies {...props} {...dataSourceMenuProps} />;
+}
diff --git a/public/pages/PolicyDetails/containers/PolicyDetails/PolicyDetails.tsx b/public/pages/PolicyDetails/containers/PolicyDetails/PolicyDetails.tsx
index 42bd11f1c..8db46ede5 100644
--- a/public/pages/PolicyDetails/containers/PolicyDetails/PolicyDetails.tsx
+++ b/public/pages/PolicyDetails/containers/PolicyDetails/PolicyDetails.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { Component } from "react";
+import React, { Component, useContext } from "react";
 import {
   EuiSpacer,
   EuiTitle,
@@ -33,8 +33,10 @@ import { ContentPanel } from "../../../../components/ContentPanel";
 import { convertTemplatesToArray } from "../../../VisualCreatePolicy/utils/helpers";
 import CreatePolicyModal from "../../../../components/CreatePolicyModal";
 import { ModalConsumer } from "../../../../components/Modal";
+import { DataSourceMenuContext, DataSourceMenuProperties } from "../../../../services/DataSourceMenuContext";
+import { useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent";
 
-interface PolicyDetailsProps extends RouteComponentProps {
+interface PolicyDetailsProps extends RouteComponentProps, DataSourceMenuProperties {
   policyService: PolicyService;
 }
 
@@ -48,7 +50,7 @@ interface PolicyDetailsState {
   showPerPageOptions: boolean;
 }
 
-export default class PolicyDetails extends Component<PolicyDetailsProps, PolicyDetailsState> {
+export class PolicyDetails extends Component<PolicyDetailsProps, PolicyDetailsState> {
   static contextType = CoreServicesContext;
   constructor(props: PolicyDetailsProps) {
     super(props);
@@ -76,6 +78,19 @@ export default class PolicyDetails extends Component<PolicyDetailsProps, PolicyD
     }
   };
 
+  componentDidUpdate(prevProps: Readonly<PolicyDetailsProps>, prevState: Readonly<PolicyDetailsState>, snapshot?: any): void {
+    if (prevProps.dataSourceId !== this.props.dataSourceId) {
+      this.setState({
+        policyId: "",
+        policy: null,
+        isJSONModalOpen: false,
+        isDeleteModalVisible: false,
+        pageIndex: 0,
+        pageSize: 10,
+        showPerPageOptions: true,
+      });
+    }
+  }
   getPolicy = async (policyId: string): Promise<void> => {
     try {
       const { policyService } = this.props;
@@ -244,3 +259,9 @@ export default class PolicyDetails extends Component<PolicyDetailsProps, PolicyD
     );
   }
 }
+
+export default function (props: Omit<PolicyDetailsProps, keyof DataSourceMenuProperties>) {
+  const dataSourceMenuProperties = useContext(DataSourceMenuContext);
+  useUpdateUrlWithDataSourceProperties();
+  return <PolicyDetails {...props} {...dataSourceMenuProperties} />;
+}
diff --git a/public/pages/RollupDetails/containers/RollupDetails/RollupDetails.tsx b/public/pages/RollupDetails/containers/RollupDetails/RollupDetails.tsx
index 78eb046bc..1b4109e25 100644
--- a/public/pages/RollupDetails/containers/RollupDetails/RollupDetails.tsx
+++ b/public/pages/RollupDetails/containers/RollupDetails/RollupDetails.tsx
@@ -33,6 +33,7 @@ import { DimensionItem, MetricItem, RollupDimensionItem, RollupMetadata, RollupM
 import { renderTime } from "../../../Rollups/utils/helpers";
 import DeleteModal from "../../../Rollups/components/DeleteModal";
 import { CoreServicesContext } from "../../../../components/core_services";
+import { useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent";
 
 interface RollupDetailsProps extends RouteComponentProps {
   rollupService: RollupService;
@@ -69,7 +70,7 @@ interface RollupDetailsState {
   isDeleteModalVisible: boolean;
 }
 
-export default class RollupDetails extends Component<RollupDetailsProps, RollupDetailsState> {
+export class RollupDetails extends Component<RollupDetailsProps, RollupDetailsState> {
   static contextType = CoreServicesContext;
   constructor(props: RollupDetailsProps) {
     super(props);
@@ -412,3 +413,8 @@ export default class RollupDetails extends Component<RollupDetailsProps, RollupD
     );
   }
 }
+
+export default function (props: RollupDetailsProps) {
+  useUpdateUrlWithDataSourceProperties();
+  return <RollupDetails {...props} />;
+}
diff --git a/public/pages/Rollups/containers/Rollups/Rollups.tsx b/public/pages/Rollups/containers/Rollups/Rollups.tsx
index 6780cb813..4c06703e7 100644
--- a/public/pages/Rollups/containers/Rollups/Rollups.tsx
+++ b/public/pages/Rollups/containers/Rollups/Rollups.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { Component } from "react";
+import React, { Component, useContext } from "react";
 import _ from "lodash";
 import { BREADCRUMBS, ROUTES } from "../../../../utils/constants";
 import queryString from "query-string";
@@ -43,12 +43,15 @@ import DeleteModal from "../../components/DeleteModal";
 import { renderStatus } from "../../../RollupDetails/utils/helpers";
 import { DocumentRollup } from "../../../../../models/interfaces";
 import { CoreServicesContext } from "../../../../components/core_services";
+import { DataSourceMenuContext, DataSourceMenuProperties } from "../../../../services/DataSourceMenuContext";
+import MDSEnabledComponent from "../../../../components/MDSEnabledComponent";
+import { HttpFetchQuery } from "opensearch-dashboards/public";
 
-interface RollupsProps extends RouteComponentProps {
+interface RollupsProps extends RouteComponentProps, DataSourceMenuProperties {
   rollupService: RollupService;
 }
 
-interface RollupsState {
+interface RollupsState extends DataSourceMenuProperties {
   totalRollups: number;
   from: number;
   size: number;
@@ -63,7 +66,7 @@ interface RollupsState {
   isDeleteModalVisible: boolean;
 }
 
-export default class Rollups extends Component<RollupsProps, RollupsState> {
+export class Rollups extends MDSEnabledComponent<RollupsProps, RollupsState> {
   static contextType = CoreServicesContext;
   constructor(props: RollupsProps) {
     super(props);
@@ -71,6 +74,7 @@ export default class Rollups extends Component<RollupsProps, RollupsState> {
     const { from, size, search, sortField, sortDirection } = getURLQueryParams(this.props.location);
 
     this.state = {
+      ...this.state,
       totalRollups: 0,
       from,
       size,
@@ -101,8 +105,16 @@ export default class Rollups extends Component<RollupsProps, RollupsState> {
     }
   }
 
-  static getQueryObjectFromState({ from, size, search, sortField, sortDirection }: RollupsState): RollupQueryParams {
-    return { from, size, search, sortField, sortDirection };
+  static getQueryObjectFromState({
+    from,
+    size,
+    search,
+    sortField,
+    sortDirection,
+    dataSourceId,
+    multiDataSourceEnabled,
+  }: RollupsState): RollupQueryParams {
+    return { from, size, search, sortField, sortDirection, ...(multiDataSourceEnabled ? { dataSourceId } : {}) };
   }
 
   getRollups = async (): Promise<void> => {
@@ -110,9 +122,9 @@ export default class Rollups extends Component<RollupsProps, RollupsState> {
     try {
       const { rollupService, history } = this.props;
       const queryObject = Rollups.getQueryObjectFromState(this.state);
-      const queryParamsString = queryString.stringify(Rollups.getQueryObjectFromState(this.state));
+      const queryParamsString = queryString.stringify({ ...queryObject, dataSourceLabel: this.state.dataSourceLabel });
       history.replace({ ...this.props.location, search: queryParamsString });
-      const rollupJobsResponse = await rollupService.getRollups(queryObject);
+      const rollupJobsResponse = await rollupService.getRollups(queryObject); // Add type assertion
       if (rollupJobsResponse.ok) {
         const { rollups, totalRollups, metadata } = rollupJobsResponse.response;
         this.setState({ rollups, totalRollups, rollupExplain: metadata });
@@ -480,3 +492,8 @@ export default class Rollups extends Component<RollupsProps, RollupsState> {
     );
   }
 }
+
+export default function (props: Omit<RollupsProps, keyof DataSourceMenuProperties>) {
+  const dataSourceMenuProps = useContext(DataSourceMenuContext);
+  return <Rollups {...props} {...dataSourceMenuProps} />;
+}
diff --git a/public/pages/Transforms/containers/Transforms/EditTransform.tsx b/public/pages/Transforms/containers/Transforms/EditTransform.tsx
index b674f3c9e..9fb1c0b5b 100644
--- a/public/pages/Transforms/containers/Transforms/EditTransform.tsx
+++ b/public/pages/Transforms/containers/Transforms/EditTransform.tsx
@@ -17,6 +17,7 @@ import Schedule from "../../components/Schedule";
 import Indices from "../../components/Indices";
 import moment from "moment";
 import { Transform } from "../../../../../models/interfaces";
+import { useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent";
 
 interface EditTransformProps extends RouteComponentProps {
   transformService: TransformService;
@@ -45,7 +46,7 @@ interface EditTransformState {
   schedule: string;
 }
 
-export default class EditTransform extends Component<EditTransformProps, EditTransformState> {
+export class EditTransform extends Component<EditTransformProps, EditTransformState> {
   static contextType = CoreServicesContext;
 
   constructor(props: EditTransformProps) {
@@ -297,3 +298,8 @@ export default class EditTransform extends Component<EditTransformProps, EditTra
     this.setState({ intervalTimeUnit: e.target.value });
   };
 }
+
+export default function (props: EditTransformProps) {
+  useUpdateUrlWithDataSourceProperties();
+  return <EditTransform {...props} />;
+}
diff --git a/public/pages/Transforms/containers/Transforms/TransformDetails.tsx b/public/pages/Transforms/containers/Transforms/TransformDetails.tsx
index cbf19d2f7..bf2d9fc5f 100644
--- a/public/pages/Transforms/containers/Transforms/TransformDetails.tsx
+++ b/public/pages/Transforms/containers/Transforms/TransformDetails.tsx
@@ -36,6 +36,7 @@ import { EMPTY_TRANSFORM } from "../../utils/constants";
 import TransformSettings from "./TransformSettings";
 import GeneralInformation from "../../components/GeneralInformation";
 import { buildIntervalScheduleText } from "../../../CreateRollup/utils/helpers";
+import { useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent";
 
 interface TransformDetailsProps extends RouteComponentProps {
   transformService: TransformService;
@@ -64,7 +65,7 @@ interface TransformDetailsState {
   isPopOverOpen: boolean;
 }
 
-export default class TransformDetails extends Component<TransformDetailsProps, TransformDetailsState> {
+export class TransformDetails extends Component<TransformDetailsProps, TransformDetailsState> {
   static contextType = CoreServicesContext;
   constructor(props: TransformDetailsProps) {
     super(props);
@@ -440,3 +441,8 @@ export default class TransformDetails extends Component<TransformDetailsProps, T
     this.setState({ isPopOverOpen: false });
   };
 }
+
+export default function (props: TransformDetailsProps) {
+  useUpdateUrlWithDataSourceProperties();
+  return <TransformDetails {...props} />;
+}
diff --git a/public/pages/Transforms/containers/Transforms/Transforms.tsx b/public/pages/Transforms/containers/Transforms/Transforms.tsx
index fea04a856..0ec8986af 100644
--- a/public/pages/Transforms/containers/Transforms/Transforms.tsx
+++ b/public/pages/Transforms/containers/Transforms/Transforms.tsx
@@ -31,7 +31,7 @@ import queryString from "query-string";
 import { RouteComponentProps } from "react-router-dom";
 import TransformService from "../../../../services/TransformService";
 import { DocumentTransform } from "../../../../../models/interfaces";
-import React, { Component } from "react";
+import React, { Component, useContext } from "react";
 import { CoreServicesContext } from "../../../../components/core_services";
 import { getURLQueryParams, renderTime } from "../../utils/helpers";
 import { TransformQueryParams } from "../../models/interfaces";
@@ -44,12 +44,14 @@ import { DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_QUERY_PARAMS } from "../../../Indice
 import _ from "lodash";
 import { ManagedCatIndex } from "../../../../../server/models/interfaces";
 import { renderContinuous } from "../../../Rollups/utils/helpers";
+import { DataSourceMenuContext, DataSourceMenuProperties } from "../../../../services/DataSourceMenuContext";
+import MDSEnabledComponent from "../../../../components/MDSEnabledComponent";
 
-interface TransformProps extends RouteComponentProps {
+interface TransformProps extends RouteComponentProps, DataSourceMenuProperties {
   transformService: TransformService;
 }
 
-interface TransformState {
+interface TransformState extends DataSourceMenuProperties {
   totalTransforms: number;
   from: number;
   size: number;
@@ -64,7 +66,7 @@ interface TransformState {
   isDeleteModalVisible: boolean;
 }
 
-export default class Transforms extends Component<TransformProps, TransformState> {
+export class Transforms extends MDSEnabledComponent<TransformProps, TransformState> {
   static contextType = CoreServicesContext;
   constructor(props: TransformProps) {
     super(props);
@@ -72,6 +74,7 @@ export default class Transforms extends Component<TransformProps, TransformState
     const { from, size, search, sortField, sortDirection } = getURLQueryParams(this.props.location);
 
     this.state = {
+      ...this.state,
       totalTransforms: 0,
       from,
       size,
@@ -339,7 +342,10 @@ export default class Transforms extends Component<TransformProps, TransformState
     try {
       const { transformService, history } = this.props;
       const queryObject = Transforms.getQueryObjectFromState(this.state);
-      const queryParamsString = queryString.stringify(Transforms.getQueryObjectFromState(this.state));
+      const queryParamsString = queryString.stringify({
+        ...Transforms.getQueryObjectFromState(this.state),
+        dataSourceLabel: this.state.dataSourceLabel,
+      });
       history.replace({ ...this.props.location, search: queryParamsString });
       const response = await transformService.getTransforms(queryObject);
       if (response.ok) {
@@ -477,7 +483,20 @@ export default class Transforms extends Component<TransformProps, TransformState
     this.setState({ isPopOverOpen: !this.state.isPopOverOpen });
   };
 
-  static getQueryObjectFromState({ from, size, search, sortField, sortDirection }: TransformState): TransformQueryParams {
-    return { from, size, search, sortField, sortDirection };
+  static getQueryObjectFromState({
+    from,
+    size,
+    search,
+    sortField,
+    sortDirection,
+    dataSourceId,
+    multiDataSourceEnabled,
+  }: TransformState): TransformQueryParams {
+    return { from, size, search, sortField, sortDirection, ...(multiDataSourceEnabled ? { dataSourceId } : {}) };
   }
 }
+
+export default function (props: Omit<TransformProps, keyof DataSourceMenuProperties>) {
+  const dataSourceMenuProps = useContext(DataSourceMenuContext);
+  return <Transforms {...props} {...dataSourceMenuProps} />;
+}
diff --git a/public/pages/VisualCreatePolicy/containers/VisualCreatePolicy/VisualCreatePolicy.tsx b/public/pages/VisualCreatePolicy/containers/VisualCreatePolicy/VisualCreatePolicy.tsx
index 9825dd288..52dccc716 100644
--- a/public/pages/VisualCreatePolicy/containers/VisualCreatePolicy/VisualCreatePolicy.tsx
+++ b/public/pages/VisualCreatePolicy/containers/VisualCreatePolicy/VisualCreatePolicy.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 { EuiText, EuiSpacer, EuiTitle, EuiFlexGroup, EuiFlexItem, EuiButton, EuiLink, EuiIcon } from "@elastic/eui";
 import { RouteComponentProps } from "react-router-dom";
 import queryString from "query-string";
@@ -19,8 +19,11 @@ import CreateState from "../CreateState";
 import { getErrorMessage } from "../../../../utils/helpers";
 import { getUpdatedPolicy, getUpdatedStates } from "../../utils/helpers";
 import ErrorNotification from "../ErrorNotification";
+import { DataSourceMenuContext, DataSourceMenuProperties } from "../../../../services/DataSourceMenuContext";
+import { useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent";
+import { Data } from "vega";
 
-interface VisualCreatePolicyProps extends RouteComponentProps {
+interface VisualCreatePolicyProps extends RouteComponentProps, DataSourceMenuProperties {
   isEdit: boolean;
   policyService: PolicyService;
   notificationService: NotificationService;
@@ -40,7 +43,7 @@ interface VisualCreatePolicyState {
   errorNotificationJsonString: string;
 }
 
-export default class VisualCreatePolicy extends Component<VisualCreatePolicyProps, VisualCreatePolicyState> {
+export class VisualCreatePolicy extends Component<VisualCreatePolicyProps, VisualCreatePolicyState> {
   static contextType = CoreServicesContext;
   constructor(props: VisualCreatePolicyProps) {
     super(props);
@@ -301,6 +304,7 @@ export default class VisualCreatePolicy extends Component<VisualCreatePolicyProp
         />
         <EuiSpacer size="m" />
         <ErrorNotification
+          key={this.props.dataSourceId}
           errorNotification={policy.error_notification}
           errorNotificationJsonString={errorNotificationJsonString}
           onChangeChannelId={this.onChangeChannelId}
@@ -339,3 +343,9 @@ export default class VisualCreatePolicy extends Component<VisualCreatePolicyProp
     );
   }
 }
+
+export default function (props: Omit<VisualCreatePolicyProps, keyof DataSourceMenuProperties>) {
+  const dataSourceMenuProperties = useContext(DataSourceMenuContext);
+  useUpdateUrlWithDataSourceProperties();
+  return <VisualCreatePolicy {...props} {...dataSourceMenuProperties} />;
+}
diff --git a/public/services/CommonService.ts b/public/services/CommonService.ts
index a0247d355..b04770497 100644
--- a/public/services/CommonService.ts
+++ b/public/services/CommonService.ts
@@ -23,4 +23,18 @@ export default class CommonService extends MDSEnabledClientService {
     payload.query = queryObject;
     return (await this.httpClient.fetch(url, payload)) as ServerResponse<T>;
   };
+
+  accountInfo = async <T>(params: IAPICaller): Promise<ServerResponse<T>> => {
+    let url = `${NODE_API.ACCOUNT_INFO}`;
+    const payload: HttpFetchOptions = {};
+    payload.method = "POST";
+    payload.body = JSON.stringify({
+      data: params.data,
+      endpoint: params.endpoint,
+      hideLog: params.hideLog,
+    });
+    // we are not sending dataSourceId in query object, as for securityInfo,
+    // it will always contact local cluster
+    return (await this.httpClient.fetch(url, payload)) as ServerResponse<T>;
+  };
 }
diff --git a/public/services/DataSourceMenuContext.ts b/public/services/DataSourceMenuContext.ts
index 3770b1100..8e30d3b16 100644
--- a/public/services/DataSourceMenuContext.ts
+++ b/public/services/DataSourceMenuContext.ts
@@ -1,3 +1,4 @@
+import { create } from "lodash";
 import { createContext } from "react";
 
 export interface DataSourceMenuProperties {
@@ -6,6 +7,11 @@ export interface DataSourceMenuProperties {
   multiDataSourceEnabled: boolean;
 }
 
+export interface DataSourceMenuReadOnlyProperties {
+  dataSourceReadOnly: boolean;
+  setDataSourceReadOnly: (dataSourceMenuReadOnly: boolean) => void;
+}
+
 const DataSourceMenuContext = createContext<DataSourceMenuProperties>({
   dataSourceId: "",
   dataSourceLabel: "",
@@ -14,4 +20,9 @@ const DataSourceMenuContext = createContext<DataSourceMenuProperties>({
 
 const DataSourceMenuConsumer = DataSourceMenuContext.Consumer;
 
-export { DataSourceMenuContext, DataSourceMenuConsumer };
+const DataSourceMenuReadOnlyContext = createContext<DataSourceMenuReadOnlyProperties>({
+  dataSourceReadOnly: false,
+  setDataSourceReadOnly: () => {},
+});
+
+export { DataSourceMenuContext, DataSourceMenuReadOnlyContext, DataSourceMenuConsumer };
diff --git a/public/services/IndexService.ts b/public/services/IndexService.ts
index 49e8baae9..bc26bef5d 100644
--- a/public/services/IndexService.ts
+++ b/public/services/IndexService.ts
@@ -23,20 +23,23 @@ import { MDSEnabledClientService } from "./MDSEnabledClientService";
 export default class IndexService extends MDSEnabledClientService {
   getIndices = async (queryObject: HttpFetchQuery): Promise<ServerResponse<GetIndicesResponse>> => {
     let url = `..${NODE_API._INDICES}`;
-    queryObject = this.patchQueryObjectWithDataSourceId(queryObject);
-    return (await this.httpClient.get(url, { query: queryObject })) as ServerResponse<GetIndicesResponse>;
+    const query = this.patchQueryObjectWithDataSourceId(queryObject);
+    const params = query ? { query } : {};
+    return (await this.httpClient.get(url, params)) as ServerResponse<GetIndicesResponse>;
   };
 
   getDataStreams = async (queryObject: HttpFetchQuery): Promise<ServerResponse<GetDataStreamsResponse>> => {
     const url = `..${NODE_API._DATA_STREAMS}`;
-    queryObject = this.patchQueryObjectWithDataSourceId(queryObject);
-    return await this.httpClient.get(url, { query: queryObject });
+    const query = this.patchQueryObjectWithDataSourceId(queryObject);
+    const params = query ? { query } : {};
+    return await this.httpClient.get(url, params);
   };
 
   getAliases = async (queryObject: HttpFetchQuery): Promise<ServerResponse<GetAliasesResponse>> => {
     const url = `..${NODE_API._ALIASES}`;
-    queryObject = this.patchQueryObjectWithDataSourceId(queryObject);
-    return await this.httpClient.get(url, { query: queryObject });
+    const query = this.patchQueryObjectWithDataSourceId(queryObject);
+    const params = query ? { query } : {};
+    return await this.httpClient.get(url, params);
   };
 
   getDataStreamsAndIndicesNames = async (searchValue: string): Promise<ServerResponse<GetDataStreamsAndIndicesNamesResponse>> => {
@@ -86,30 +89,33 @@ export default class IndexService extends MDSEnabledClientService {
     };
   };
 
-  applyPolicy = async (indices: string[], policyId: string, queryObject: HttpFetchQuery): Promise<ServerResponse<ApplyPolicyResponse>> => {
+  applyPolicy = async (indices: string[], policyId: string, queryObject?: HttpFetchQuery): Promise<ServerResponse<ApplyPolicyResponse>> => {
     const body = { indices, policyId };
-    queryObject = this.patchQueryObjectWithDataSourceId(queryObject);
+    const query = this.patchQueryObjectWithDataSourceId(queryObject);
+    const params = query ? { query } : {};
     const url = `..${NODE_API.APPLY_POLICY}`;
     return (await this.httpClient.post(url, {
       body: JSON.stringify(body),
-      query: queryObject,
+      ...params,
     })) as ServerResponse<ApplyPolicyResponse>;
   };
 
-  editRolloverAlias = async (index: string, alias: string, queryObject: HttpFetchQuery): Promise<ServerResponse<AcknowledgedResponse>> => {
+  editRolloverAlias = async (index: string, alias: string, queryObject?: HttpFetchQuery): Promise<ServerResponse<AcknowledgedResponse>> => {
     const body = { index, alias };
-    queryObject = this.patchQueryObjectWithDataSourceId(queryObject);
+    const query = this.patchQueryObjectWithDataSourceId(queryObject);
+    const params = query ? { query } : {};
     const url = `..${NODE_API.EDIT_ROLLOVER_ALIAS}`;
     return (await this.httpClient.post(url, {
       body: JSON.stringify(body),
-      query: queryObject,
+      ...params,
     })) as ServerResponse<AcknowledgedResponse>;
   };
 
   searchPolicies = async (searchValue: string, source: boolean = false): Promise<ServerResponse<GetPoliciesResponse>> => {
     const str = searchValue.trim();
-    const queryObject = this.patchQueryObjectWithDataSourceId({ from: 0, size: 10, search: str, sortDirection: "desc", sortField: "id" });
+    const query = this.patchQueryObjectWithDataSourceId({ from: 0, size: 10, search: str, sortDirection: "desc", sortField: "id" });
+    const params = query ? { query } : {};
     const url = `..${NODE_API.POLICIES}`;
-    return (await this.httpClient.get(url, { query: queryObject })) as ServerResponse<GetPoliciesResponse>;
+    return (await this.httpClient.get(url, params)) as ServerResponse<GetPoliciesResponse>;
   };
 }
diff --git a/public/services/MDSEnabledClientService.ts b/public/services/MDSEnabledClientService.ts
index 14a4f60f0..c5a2755c4 100644
--- a/public/services/MDSEnabledClientService.ts
+++ b/public/services/MDSEnabledClientService.ts
@@ -11,7 +11,7 @@ export abstract class MDSEnabledClientService {
     this.mdsEnabled = mdsEnabled;
   }
 
-  patchQueryObjectWithDataSourceId(queryObject?: HttpFetchQuery) {
+  patchQueryObjectWithDataSourceId(queryObject?: HttpFetchQuery): HttpFetchQuery | undefined {
     if (this.mdsEnabled) {
       queryObject = queryObject || {};
       queryObject.dataSourceId = this.dataSourceId;
diff --git a/public/services/ManagedIndexService.test.ts b/public/services/ManagedIndexService.test.ts
index 655ec053b..dec3acb89 100644
--- a/public/services/ManagedIndexService.test.ts
+++ b/public/services/ManagedIndexService.test.ts
@@ -16,7 +16,7 @@ describe("ManagedIndexService spec", () => {
     await managedIndexService.getManagedIndex(managedIndexUuid);
 
     expect(httpClientMock.get).toHaveBeenCalledTimes(1);
-    expect(httpClientMock.get).toHaveBeenCalledWith(`..${NODE_API.MANAGED_INDICES}/${managedIndexUuid}`);
+    expect(httpClientMock.get).toHaveBeenCalledWith(`..${NODE_API.MANAGED_INDICES}/${managedIndexUuid}`, expect.anything());
   });
 
   it("calls get managed indices nodejs route when calling getManagedIndices", async () => {
@@ -33,7 +33,7 @@ describe("ManagedIndexService spec", () => {
     await managedIndexService.getDataStreams();
 
     expect(httpClientMock.get).toHaveBeenCalledTimes(1);
-    expect(httpClientMock.get).toHaveBeenCalledWith(`..${NODE_API._DATA_STREAMS}`);
+    expect(httpClientMock.get).toHaveBeenCalledWith(`..${NODE_API._DATA_STREAMS}`, expect.anything());
   });
 
   it("calls retry policy nodejs route when calling retryManagedIndexPolicy", async () => {
diff --git a/public/services/ManagedIndexService.ts b/public/services/ManagedIndexService.ts
index deedec9dc..18c190ada 100644
--- a/public/services/ManagedIndexService.ts
+++ b/public/services/ManagedIndexService.ts
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { HttpSetup } from "opensearch-dashboards/public";
+import { HttpFetchQuery, HttpSetup } from "opensearch-dashboards/public";
 import {
   ChangePolicyResponse,
   GetDataStreamsResponse,
@@ -13,43 +13,56 @@ import {
 } from "../../server/models/interfaces";
 import { ServerResponse } from "../../server/models/types";
 import { NODE_API } from "../../utils/constants";
+import { MDSEnabledClientService } from "./MDSEnabledClientService";
 
-export default class ManagedIndexService {
-  httpClient: HttpSetup;
-
-  constructor(httpClient: HttpSetup) {
-    this.httpClient = httpClient;
-  }
-
-  getManagedIndex = async (managedIndexUuid: string): Promise<ServerResponse<any>> => {
-    const response = (await this.httpClient.get(`..${NODE_API.MANAGED_INDICES}/${managedIndexUuid}`)) as ServerResponse<any>;
+export default class ManagedIndexService extends MDSEnabledClientService {
+  getManagedIndex = async (managedIndexUuid: string, queryObject: HttpFetchQuery | undefined): Promise<ServerResponse<any>> => {
+    let url = `..${NODE_API.MANAGED_INDICES}/${managedIndexUuid}`;
+    const query = this.patchQueryObjectWithDataSourceId(queryObject);
+    const params = query ? { query } : {};
+    const response = (await this.httpClient.get(url, params)) as ServerResponse<any>;
     return response;
   };
 
-  getManagedIndices = async (queryObject: object): Promise<ServerResponse<GetManagedIndicesResponse>> => {
+  getManagedIndices = async (queryObject: HttpFetchQuery | undefined): Promise<ServerResponse<GetManagedIndicesResponse>> => {
     let url = `..${NODE_API.MANAGED_INDICES}`;
-    const response = (await this.httpClient.get(url, { query: queryObject })) as ServerResponse<GetManagedIndicesResponse>;
+    const query = this.patchQueryObjectWithDataSourceId(queryObject);
+    const params = query ? { query } : {};
+    const response = (await this.httpClient.get(url, params)) as ServerResponse<GetManagedIndicesResponse>;
     return response;
   };
 
-  getDataStreams = async (): Promise<ServerResponse<GetDataStreamsResponse>> => {
-    const url = `..${NODE_API._DATA_STREAMS}`;
-    return await this.httpClient.get(url);
+  getDataStreams = async (queryObject: HttpFetchQuery | undefined): Promise<ServerResponse<GetDataStreamsResponse>> => {
+    let url = `..${NODE_API._DATA_STREAMS}`;
+    const query = this.patchQueryObjectWithDataSourceId(queryObject);
+    const params = query ? { query } : {};
+    const response = (await this.httpClient.get(url, params)) as ServerResponse<GetDataStreamsResponse>;
+    return response;
   };
 
-  retryManagedIndexPolicy = async (index: string[], state: string | null): Promise<ServerResponse<RetryManagedIndexResponse>> => {
+  retryManagedIndexPolicy = async (
+    index: string[],
+    state: string | null,
+    queryObject: HttpFetchQuery | undefined
+  ): Promise<ServerResponse<RetryManagedIndexResponse>> => {
     const body = { index, state };
-    const response = (await this.httpClient.post(`..${NODE_API.RETRY}`, { body: JSON.stringify(body) })) as ServerResponse<
-      RetryManagedIndexResponse
-    >;
+    const query = this.patchQueryObjectWithDataSourceId(queryObject);
+    const params = query ? { query } : {};
+    const response = (await this.httpClient.post(`..${NODE_API.RETRY}`, {
+      body: JSON.stringify(body),
+      ...params,
+    })) as ServerResponse<RetryManagedIndexResponse>;
     return response;
   };
 
-  removePolicy = async (indices: string[]): Promise<ServerResponse<RemovePolicyResponse>> => {
+  removePolicy = async (indices: string[], queryObject: HttpFetchQuery | undefined): Promise<ServerResponse<RemovePolicyResponse>> => {
     const body = { indices };
-    const response = (await this.httpClient.post(`..${NODE_API.REMOVE_POLICY}`, { body: JSON.stringify(body) })) as ServerResponse<
-      RemovePolicyResponse
-    >;
+    const query = this.patchQueryObjectWithDataSourceId(queryObject);
+    const params = query ? { query } : {};
+    const response = (await this.httpClient.post(`..${NODE_API.REMOVE_POLICY}`, {
+      body: JSON.stringify(body),
+      ...params,
+    })) as ServerResponse<RemovePolicyResponse>;
     return response;
   };
 
@@ -57,12 +70,16 @@ export default class ManagedIndexService {
     indices: string[],
     policyId: string,
     state: string | null,
-    include: object[]
+    include: object[],
+    queryObject?: HttpFetchQuery | undefined
   ): Promise<ServerResponse<ChangePolicyResponse>> => {
     const body = { indices, policyId, state, include };
-    const response = (await this.httpClient.post(`..${NODE_API.CHANGE_POLICY}`, { body: JSON.stringify(body) })) as ServerResponse<
-      ChangePolicyResponse
-    >;
+    const query = this.patchQueryObjectWithDataSourceId(queryObject);
+    const params = query ? { query } : {};
+    const response = (await this.httpClient.post(`..${NODE_API.CHANGE_POLICY}`, {
+      body: JSON.stringify(body),
+      ...params,
+    })) as ServerResponse<ChangePolicyResponse>;
     return response;
   };
 }
diff --git a/public/services/NotificationService.test.ts b/public/services/NotificationService.test.ts
index ff727e109..e19bd5381 100644
--- a/public/services/NotificationService.test.ts
+++ b/public/services/NotificationService.test.ts
@@ -15,6 +15,6 @@ describe("NotificationService spec", () => {
     await notificationService.getChannels();
 
     expect(httpClientMock.get).toHaveBeenCalledTimes(1);
-    expect(httpClientMock.get).toHaveBeenCalledWith(`..${NODE_API.CHANNELS}`);
+    expect(httpClientMock.get).toHaveBeenCalledWith(`..${NODE_API.CHANNELS}`, expect.anything());
   });
 });
diff --git a/public/services/NotificationService.ts b/public/services/NotificationService.ts
index 751f2af44..2c9cfae5d 100644
--- a/public/services/NotificationService.ts
+++ b/public/services/NotificationService.ts
@@ -7,23 +7,22 @@ import { HttpSetup } from "opensearch-dashboards/public";
 import { GetChannelsResponse, GetNotificationConfigsResponse } from "../../server/models/interfaces";
 import { ServerResponse } from "../../server/models/types";
 import { NODE_API } from "../../utils/constants";
+import { MDSEnabledClientService } from "./MDSEnabledClientService";
 
-export default class NotificationService {
-  httpClient: HttpSetup;
-
-  constructor(httpClient: HttpSetup) {
-    this.httpClient = httpClient;
-  }
-
+export default class NotificationService extends MDSEnabledClientService {
   getChannels = async (): Promise<ServerResponse<GetChannelsResponse>> => {
     let url = `..${NODE_API.CHANNELS}`;
-    const response = (await this.httpClient.get(url)) as ServerResponse<GetChannelsResponse>;
+    const query = this.patchQueryObjectWithDataSourceId();
+    const params = query ? { query } : {};
+    const response = (await this.httpClient.get(url, params)) as ServerResponse<GetChannelsResponse>;
     return response;
   };
 
   getChannel = async (channelId: string): Promise<ServerResponse<GetNotificationConfigsResponse>> => {
     let url = `..${NODE_API.CHANNELS}/${channelId}`;
-    const response = (await this.httpClient.get(url)) as ServerResponse<GetNotificationConfigsResponse>;
+    const query = this.patchQueryObjectWithDataSourceId();
+    const params = query ? { query } : {};
+    const response = (await this.httpClient.get(url, params)) as ServerResponse<GetNotificationConfigsResponse>;
     return response;
   };
 }
diff --git a/public/services/PolicyService.test.ts b/public/services/PolicyService.test.ts
index c2f98ebd4..53cde441c 100644
--- a/public/services/PolicyService.test.ts
+++ b/public/services/PolicyService.test.ts
@@ -16,7 +16,7 @@ describe("PolicyService spec", () => {
     await policyService.getPolicy(policyId);
 
     expect(httpClientMock.get).toHaveBeenCalledTimes(1);
-    expect(httpClientMock.get).toHaveBeenCalledWith(`..${NODE_API.POLICIES}/${policyId}`);
+    expect(httpClientMock.get).toHaveBeenCalledWith(`..${NODE_API.POLICIES}/${policyId}`, expect.anything());
   });
 
   it("calls get policies nodejs route when calling getPolicies", async () => {
@@ -44,6 +44,6 @@ describe("PolicyService spec", () => {
     await policyService.deletePolicy(policyId);
 
     expect(httpClientMock.delete).toHaveBeenCalledTimes(1);
-    expect(httpClientMock.delete).toHaveBeenCalledWith(`..${NODE_API.POLICIES}/${policyId}`);
+    expect(httpClientMock.delete).toHaveBeenCalledWith(`..${NODE_API.POLICIES}/${policyId}`, expect.anything());
   });
 });
diff --git a/public/services/PolicyService.ts b/public/services/PolicyService.ts
index 2dae2f4d6..5eb5bd9a1 100644
--- a/public/services/PolicyService.ts
+++ b/public/services/PolicyService.ts
@@ -3,22 +3,19 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { HttpSetup } from "opensearch-dashboards/public";
+import { HttpFetchError, HttpFetchQuery, HttpSetup } from "opensearch-dashboards/public";
 import { GetPoliciesResponse, PutPolicyResponse } from "../../server/models/interfaces";
 import { ServerResponse } from "../../server/models/types";
 import { NODE_API } from "../../utils/constants";
 import { DocumentPolicy, Policy } from "../../models/interfaces";
+import { MDSEnabledClientService } from "./MDSEnabledClientService";
 
-export default class PolicyService {
-  httpClient: HttpSetup;
-
-  constructor(httpClient: HttpSetup) {
-    this.httpClient = httpClient;
-  }
-
-  getPolicies = async (queryObject: object): Promise<ServerResponse<GetPoliciesResponse>> => {
+export default class PolicyService extends MDSEnabledClientService {
+  getPolicies = async (queryObject: HttpFetchQuery | undefined): Promise<ServerResponse<GetPoliciesResponse>> => {
     let url = `..${NODE_API.POLICIES}`;
-    const response = (await this.httpClient.get(url, { query: queryObject })) as ServerResponse<GetPoliciesResponse>;
+    const query = this.patchQueryObjectWithDataSourceId(queryObject);
+    const params = query ? { query } : {};
+    const response = (await this.httpClient.get(url, params)) as ServerResponse<GetPoliciesResponse>;
     return response;
   };
 
@@ -29,21 +26,26 @@ export default class PolicyService {
     primaryTerm?: number
   ): Promise<ServerResponse<PutPolicyResponse>> => {
     let url = `..${NODE_API.POLICIES}/${policyId}`;
-    const response = (await this.httpClient.put(url, { query: { seqNo, primaryTerm }, body: JSON.stringify(policy) })) as ServerResponse<
-      PutPolicyResponse
-    >;
+    let queryObject: HttpFetchQuery | undefined = { seqNo, primaryTerm };
+    const query = this.patchQueryObjectWithDataSourceId(queryObject);
+    const params = query ? { query } : {};
+    const response = (await this.httpClient.put(url, { body: JSON.stringify(policy), ...params })) as ServerResponse<PutPolicyResponse>;
     return response;
   };
 
   getPolicy = async (policyId: string): Promise<ServerResponse<DocumentPolicy>> => {
     const url = `..${NODE_API.POLICIES}/${policyId}`;
-    const response = (await this.httpClient.get(url)) as ServerResponse<DocumentPolicy>;
+    const query = this.patchQueryObjectWithDataSourceId();
+    const params = query ? { query } : {};
+    const response = (await this.httpClient.get(url, params)) as ServerResponse<DocumentPolicy>;
     return response;
   };
 
   deletePolicy = async (policyId: string): Promise<ServerResponse<boolean>> => {
     const url = `..${NODE_API.POLICIES}/${policyId}`;
-    const response = (await this.httpClient.delete(url)) as ServerResponse<boolean>;
+    const query = this.patchQueryObjectWithDataSourceId();
+    const params = query ? { query } : {};
+    const response = (await this.httpClient.delete(url, params)) as ServerResponse<boolean>;
     return response;
   };
 }
diff --git a/public/services/RollupService.test.ts b/public/services/RollupService.test.ts
index 147396445..70da770e7 100644
--- a/public/services/RollupService.test.ts
+++ b/public/services/RollupService.test.ts
@@ -17,7 +17,7 @@ describe("rollupService spec", () => {
     await rollupService.getRollup(rollupId);
 
     expect(httpClientMock.get).toHaveBeenCalledTimes(1);
-    expect(httpClientMock.get).toHaveBeenCalledWith(`..${NODE_API.ROLLUPS}/${rollupId}`);
+    expect(httpClientMock.get).toHaveBeenCalledWith(`..${NODE_API.ROLLUPS}/${rollupId}`, expect.anything());
   });
 
   it("calls get rollups nodejs route when calling getRollups", async () => {
@@ -47,7 +47,7 @@ describe("rollupService spec", () => {
     await rollupService.deleteRollup(rollupId);
 
     expect(httpClientMock.delete).toHaveBeenCalledTimes(1);
-    expect(httpClientMock.delete).toHaveBeenCalledWith(`..${NODE_API.ROLLUPS}/${rollupId}`);
+    expect(httpClientMock.delete).toHaveBeenCalledWith(`..${NODE_API.ROLLUPS}/${rollupId}`, expect.anything());
   });
 
   it("calls start rollup nodejs route when calling startRollup", async () => {
@@ -56,7 +56,7 @@ describe("rollupService spec", () => {
     await rollupService.startRollup(rollupId);
 
     expect(httpClientMock.post).toHaveBeenCalledTimes(1);
-    expect(httpClientMock.post).toHaveBeenCalledWith(`..${NODE_API.ROLLUPS}/${rollupId}/_start`);
+    expect(httpClientMock.post).toHaveBeenCalledWith(`..${NODE_API.ROLLUPS}/${rollupId}/_start`, expect.anything());
   });
 
   it("calls stop rollup nodejs route when calling stopRollup", async () => {
@@ -65,7 +65,7 @@ describe("rollupService spec", () => {
     await rollupService.stopRollup(rollupId);
 
     expect(httpClientMock.post).toHaveBeenCalledTimes(1);
-    expect(httpClientMock.post).toHaveBeenCalledWith(`..${NODE_API.ROLLUPS}/${rollupId}/_stop`);
+    expect(httpClientMock.post).toHaveBeenCalledWith(`..${NODE_API.ROLLUPS}/${rollupId}/_stop`, expect.anything());
   });
 
   it("calls get mappings nodejs route when calling getMappings", async () => {
diff --git a/public/services/RollupService.ts b/public/services/RollupService.ts
index a8c8f6605..4dac755a6 100644
--- a/public/services/RollupService.ts
+++ b/public/services/RollupService.ts
@@ -3,22 +3,19 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { HttpSetup } from "opensearch-dashboards/public";
+import { HttpFetchQuery, HttpSetup } from "opensearch-dashboards/public";
 import { PutRollupResponse, GetRollupsResponse, GetFieldsResponse } from "../../server/models/interfaces";
 import { ServerResponse } from "../../server/models/types";
 import { NODE_API } from "../../utils/constants";
 import { DocumentRollup, Rollup } from "../../models/interfaces";
+import { MDSEnabledClientService } from "./MDSEnabledClientService";
 
-export default class RollupService {
-  httpClient: HttpSetup;
-
-  constructor(httpClient: HttpSetup) {
-    this.httpClient = httpClient;
-  }
-
-  getRollups = async (queryObject: object): Promise<ServerResponse<GetRollupsResponse>> => {
+export default class RollupService extends MDSEnabledClientService {
+  getRollups = async (queryObject?: HttpFetchQuery): Promise<ServerResponse<GetRollupsResponse>> => {
     let url = `..${NODE_API.ROLLUPS}`;
-    const response = (await this.httpClient.get(url, { query: queryObject })) as ServerResponse<GetRollupsResponse>;
+    const query = this.patchQueryObjectWithDataSourceId(queryObject);
+    const params = query ? { query } : {};
+    const response = (await this.httpClient.get(url, params)) as ServerResponse<GetRollupsResponse>;
     return response;
   };
 
@@ -29,33 +26,41 @@ export default class RollupService {
     primaryTerm?: number
   ): Promise<ServerResponse<PutRollupResponse>> => {
     let url = `..${NODE_API.ROLLUPS}/${rollupId}`;
-    const response = (await this.httpClient.put(url, { query: { seqNo, primaryTerm }, body: JSON.stringify(rollup) })) as ServerResponse<
-      PutRollupResponse
-    >;
+    const query = this.patchQueryObjectWithDataSourceId({ seqNo, primaryTerm });
+    const params = query ? { query } : {};
+    const response = (await this.httpClient.put(url, { body: JSON.stringify(rollup), ...params })) as ServerResponse<PutRollupResponse>;
     return response;
   };
 
   getRollup = async (rollupId: string): Promise<ServerResponse<DocumentRollup>> => {
     const url = `..${NODE_API.ROLLUPS}/${rollupId}`;
-    const response = (await this.httpClient.get(url)) as ServerResponse<DocumentRollup>;
+    const query = this.patchQueryObjectWithDataSourceId();
+    const params = query ? { query } : {};
+    const response = (await this.httpClient.get(url, params)) as ServerResponse<DocumentRollup>;
     return response;
   };
 
   deleteRollup = async (rollupId: string): Promise<ServerResponse<boolean>> => {
     const url = `..${NODE_API.ROLLUPS}/${rollupId}`;
-    const response = (await this.httpClient.delete(url)) as ServerResponse<boolean>;
+    const query = this.patchQueryObjectWithDataSourceId();
+    const params = query ? { query } : {};
+    const response = (await this.httpClient.delete(url, params)) as ServerResponse<boolean>;
     return response;
   };
 
   startRollup = async (rollupId: string): Promise<ServerResponse<boolean>> => {
     const url = `..${NODE_API.ROLLUPS}/${rollupId}/_start`;
-    const response = (await this.httpClient.post(url)) as ServerResponse<boolean>;
+    const query = this.patchQueryObjectWithDataSourceId();
+    const params = query ? { query } : {};
+    const response = (await this.httpClient.post(url, params)) as ServerResponse<boolean>;
     return response;
   };
 
   stopRollup = async (rollupId: string): Promise<ServerResponse<boolean>> => {
     const url = `..${NODE_API.ROLLUPS}/${rollupId}/_stop`;
-    const response = (await this.httpClient.post(url)) as ServerResponse<boolean>;
+    const query = this.patchQueryObjectWithDataSourceId();
+    const params = query ? { query } : {};
+    const response = (await this.httpClient.post(url, params)) as ServerResponse<boolean>;
     return response;
   };
 
@@ -63,7 +68,9 @@ export default class RollupService {
   getMappings = async (index: string): Promise<ServerResponse<any>> => {
     const url = `..${NODE_API._MAPPINGS}`;
     const body = { index: index };
-    const response = (await this.httpClient.post(url, { body: JSON.stringify(body) })) as ServerResponse<GetFieldsResponse>;
+    const query = this.patchQueryObjectWithDataSourceId();
+    const params = query ? { query } : {};
+    const response = (await this.httpClient.post(url, { body: JSON.stringify(body), ...params })) as ServerResponse<GetFieldsResponse>;
     return response;
   };
 }
diff --git a/public/services/TransformService.test.ts b/public/services/TransformService.test.ts
index 58e11434f..b81ed490c 100644
--- a/public/services/TransformService.test.ts
+++ b/public/services/TransformService.test.ts
@@ -17,7 +17,7 @@ describe("transformService spec", () => {
     await transformService.getTransform(transformId);
 
     expect(httpClientMock.get).toHaveBeenCalledTimes(1);
-    expect(httpClientMock.get).toHaveBeenCalledWith(`..${NODE_API.TRANSFORMS}/${transformId}`);
+    expect(httpClientMock.get).toHaveBeenCalledWith(`..${NODE_API.TRANSFORMS}/${transformId}`, expect.anything());
   });
 
   it("calls get transforms nodejs route when calling getTransforms", async () => {
@@ -47,7 +47,7 @@ describe("transformService spec", () => {
     await transformService.deleteTransform(transformId);
 
     expect(httpClientMock.delete).toHaveBeenCalledTimes(1);
-    expect(httpClientMock.delete).toHaveBeenCalledWith(`..${NODE_API.TRANSFORMS}/${transformId}`);
+    expect(httpClientMock.delete).toHaveBeenCalledWith(`..${NODE_API.TRANSFORMS}/${transformId}`, expect.anything());
   });
 
   it("calls start transform nodejs route when calling startTransform", async () => {
@@ -56,7 +56,7 @@ describe("transformService spec", () => {
     await transformService.startTransform(transformId);
 
     expect(httpClientMock.post).toHaveBeenCalledTimes(1);
-    expect(httpClientMock.post).toHaveBeenCalledWith(`..${NODE_API.TRANSFORMS}/${transformId}/_start`);
+    expect(httpClientMock.post).toHaveBeenCalledWith(`..${NODE_API.TRANSFORMS}/${transformId}/_start`, expect.anything());
   });
 
   it("calls stop transform nodejs route when calling stopTransform", async () => {
@@ -65,7 +65,7 @@ describe("transformService spec", () => {
     await transformService.stopTransform(transformId);
 
     expect(httpClientMock.post).toHaveBeenCalledTimes(1);
-    expect(httpClientMock.post).toHaveBeenCalledWith(`..${NODE_API.TRANSFORMS}/${transformId}/_stop`);
+    expect(httpClientMock.post).toHaveBeenCalledWith(`..${NODE_API.TRANSFORMS}/${transformId}/_stop`, expect.anything());
   });
 
   it("calls preview transform nodejs route when calling previewTransform", async () => {
@@ -92,7 +92,7 @@ describe("transformService spec", () => {
     const indexName = "index_1";
     const queryObject = {};
     const body = "";
-    await transformService.searchSampleData(indexName, queryObject, body);
+    await transformService.searchSampleData(indexName, body, queryObject);
 
     expect(httpClientMock.post).toHaveBeenCalledTimes(1);
     expect(httpClientMock.post).toHaveBeenCalledWith(`..${NODE_API._SEARCH_SAMPLE_DATA}/${indexName}`, { query: queryObject, body: body });
@@ -107,7 +107,7 @@ describe("transformService spec", () => {
         customer_gender: "FEMALE",
       },
     });
-    await transformService.searchSampleData(indexName, queryObject, body);
+    await transformService.searchSampleData(indexName, body, queryObject);
 
     expect(httpClientMock.post).toHaveBeenCalledTimes(1);
     expect(httpClientMock.post).toHaveBeenCalledWith(`..${NODE_API._SEARCH_SAMPLE_DATA}/${indexName}`, { query: queryObject, body: body });
diff --git a/public/services/TransformService.ts b/public/services/TransformService.ts
index c2a1d68a6..04692f94f 100644
--- a/public/services/TransformService.ts
+++ b/public/services/TransformService.ts
@@ -3,23 +3,20 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { HttpSetup } from "opensearch-dashboards/public";
+import { HttpFetchQuery, HttpSetup } from "opensearch-dashboards/public";
 import { ServerResponse } from "../../server/models/types";
 import { GetFieldsResponse, GetTransformsResponse, PreviewTransformResponse, PutTransformResponse } from "../../server/models/interfaces";
 import { NODE_API } from "../../utils/constants";
 import { DocumentTransform, Transform } from "../../models/interfaces";
+import { MDSEnabledClientService } from "./MDSEnabledClientService";
 
-export default class TransformService {
-  httpClient: HttpSetup;
-
-  constructor(httpClient: HttpSetup) {
-    this.httpClient = httpClient;
-  }
-
-  getTransforms = async (queryObject: object): Promise<ServerResponse<GetTransformsResponse>> => {
+export default class TransformService extends MDSEnabledClientService {
+  getTransforms = async (queryObject?: HttpFetchQuery): Promise<ServerResponse<GetTransformsResponse>> => {
     const url = `..${NODE_API.TRANSFORMS}`;
+    const query = this.patchQueryObjectWithDataSourceId(queryObject);
+    const params = query ? { query } : {};
     // @ts-ignore
-    return (await this.httpClient.get(url, { query: queryObject })) as ServerResponse<GetTransformsResponse>;
+    return (await this.httpClient.get(url, params)) as ServerResponse<GetTransformsResponse>;
   };
 
   putTransform = async (
@@ -29,48 +26,62 @@ export default class TransformService {
     primaryTerm?: number
   ): Promise<ServerResponse<PutTransformResponse>> => {
     const url = `..${NODE_API.TRANSFORMS}/${transformId}`;
-    return (await this.httpClient.put(url, { query: { seqNo, primaryTerm }, body: JSON.stringify(transform) })) as ServerResponse<
-      PutTransformResponse
-    >;
+    const query = this.patchQueryObjectWithDataSourceId({ seqNo, primaryTerm });
+    const params = query ? { query } : {};
+    return (await this.httpClient.put(url, { body: JSON.stringify(transform), ...params })) as ServerResponse<PutTransformResponse>;
   };
 
   getTransform = async (transformId: string): Promise<ServerResponse<DocumentTransform>> => {
     const url = `..${NODE_API.TRANSFORMS}/${transformId}`;
-    return (await this.httpClient.get(url)) as ServerResponse<DocumentTransform>;
+    const query = this.patchQueryObjectWithDataSourceId();
+    const params = query ? { query } : {};
+    return (await this.httpClient.get(url, params)) as ServerResponse<DocumentTransform>;
   };
 
   deleteTransform = async (transformId: string): Promise<ServerResponse<boolean>> => {
     const url = `..${NODE_API.TRANSFORMS}/${transformId}`;
-    return (await this.httpClient.delete(url)) as ServerResponse<boolean>;
+    const query = this.patchQueryObjectWithDataSourceId();
+    const params = query ? { query } : {};
+    return (await this.httpClient.delete(url, params)) as ServerResponse<boolean>;
   };
 
   startTransform = async (transformId: string): Promise<ServerResponse<boolean>> => {
     const url = `..${NODE_API.TRANSFORMS}/${transformId}/_start`;
-    return (await this.httpClient.post(url)) as ServerResponse<boolean>;
+    const query = this.patchQueryObjectWithDataSourceId();
+    const params = query ? { query } : {};
+    return (await this.httpClient.post(url, params)) as ServerResponse<boolean>;
   };
 
   stopTransform = async (transformId: string): Promise<ServerResponse<boolean>> => {
     const url = `..${NODE_API.TRANSFORMS}/${transformId}/_stop`;
-    return (await this.httpClient.post(url)) as ServerResponse<boolean>;
+    const query = this.patchQueryObjectWithDataSourceId();
+    const params = query ? { query } : {};
+    return (await this.httpClient.post(url, params)) as ServerResponse<boolean>;
   };
 
   previewTransform = async (transform: any): Promise<ServerResponse<PreviewTransformResponse>> => {
     const url = `..${NODE_API.TRANSFORMS}/_preview`;
+    const query = this.patchQueryObjectWithDataSourceId();
+    const params = query ? { query } : {};
     // @ts-ignore
-    return (await this.httpClient.post(url, { body: JSON.stringify(transform) })) as ServerResponse<PreviewTransformResponse>;
+    return (await this.httpClient.post(url, { body: JSON.stringify(transform), ...params })) as ServerResponse<PreviewTransformResponse>;
   };
 
   //Function to search for fields from a source index using GET /${source_index}/_mapping
   getMappings = async (index: string): Promise<ServerResponse<any>> => {
     const url = `..${NODE_API._MAPPINGS}`;
     const body = { index: index };
-    const response = (await this.httpClient.post(url, { body: JSON.stringify(body) })) as ServerResponse<GetFieldsResponse>;
+    const query = this.patchQueryObjectWithDataSourceId();
+    const params = query ? { query } : {};
+    const response = (await this.httpClient.post(url, { body: JSON.stringify(body), ...params })) as ServerResponse<GetFieldsResponse>;
     return response;
   };
 
-  searchSampleData = async (index: string, queryObject: object, body: string): Promise<ServerResponse<any>> => {
+  searchSampleData = async (index: string, body: string, queryObject?: HttpFetchQuery): Promise<ServerResponse<any>> => {
     const url = `..${NODE_API._SEARCH_SAMPLE_DATA}/${index}`;
-    const response = (await this.httpClient.post(url, { query: queryObject, body: body })) as ServerResponse<any>;
+    const query = this.patchQueryObjectWithDataSourceId(queryObject);
+    const params = query ? { query } : {};
+    const response = (await this.httpClient.post(url, { body: body, ...params })) as ServerResponse<any>;
     return response;
   };
 }
diff --git a/server/plugin.ts b/server/plugin.ts
index f925e3be3..387fada15 100644
--- a/server/plugin.ts
+++ b/server/plugin.ts
@@ -32,6 +32,7 @@ import {
 import dataStreams from "./routes/dataStreams";
 import { NodeServices } from "./models/interfaces";
 import { DataSourcePluginSetup } from "../../../src/plugins/data_source/server";
+import { data } from "jquery";
 
 export interface IndexManagementPluginDependencies {
   dataSource: DataSourcePluginSetup;
@@ -49,11 +50,11 @@ export class IndexPatternManagementPlugin implements Plugin<IndexManagementPlugi
     // Initialize services
     const indexService = new IndexService(osDriver, dataSourceEnabled);
     const dataStreamService = new DataStreamService(osDriver, dataSourceEnabled);
-    const policyService = new PolicyService(osDriver);
-    const managedIndexService = new ManagedIndexService(osDriver);
-    const rollupService = new RollupService(osDriver);
-    const transformService = new TransformService(osDriver);
-    const notificationService = new NotificationService(osDriver);
+    const policyService = new PolicyService(osDriver, dataSourceEnabled);
+    const managedIndexService = new ManagedIndexService(osDriver, dataSourceEnabled);
+    const rollupService = new RollupService(osDriver, dataSourceEnabled);
+    const transformService = new TransformService(osDriver, dataSourceEnabled);
+    const notificationService = new NotificationService(osDriver, dataSourceEnabled);
     const snapshotManagementService = new SnapshotManagementService(osDriver);
     const commonService = new CommonService(osDriver, dataSourceEnabled);
     const aliasService = new AliasServices(osDriver, dataSourceEnabled);
@@ -80,11 +81,11 @@ export class IndexPatternManagementPlugin implements Plugin<IndexManagementPlugi
     // Add server routes
     indices(services, router, dataSourceEnabled);
     dataStreams(services, router, dataSourceEnabled);
-    policies(services, router);
-    managedIndices(services, router);
-    rollups(services, router);
-    transforms(services, router);
-    notifications(services, router);
+    policies(services, router, dataSourceEnabled);
+    managedIndices(services, router, dataSourceEnabled);
+    rollups(services, router, dataSourceEnabled);
+    transforms(services, router, dataSourceEnabled);
+    notifications(services, router, dataSourceEnabled);
     snapshotManagement(services, router);
     common(services, router, dataSourceEnabled);
     aliases(services, router, dataSourceEnabled);
diff --git a/server/routes/common.ts b/server/routes/common.ts
index c01c31be1..9e4348d60 100644
--- a/server/routes/common.ts
+++ b/server/routes/common.ts
@@ -17,20 +17,32 @@ export default function (services: NodeServices, router: IRouter, dataSourceEnab
       dataSourceId: schema.string(),
     });
   }
+  let bodySchema = schema.nullable(
+    schema.object({
+      endpoint: schema.string(),
+      data: schema.nullable(schema.any()),
+      hideLog: schema.nullable(schema.boolean()),
+    })
+  );
 
   const payload = {
     path: NODE_API.API_CALLER,
     validate: {
-      body: schema.nullable(
-        schema.object({
-          endpoint: schema.string(),
-          data: schema.nullable(schema.any()),
-          hideLog: schema.nullable(schema.boolean()),
-        })
-      ),
+      body: bodySchema,
       query: query,
     },
   };
 
   router.post(payload, commonService.apiCaller);
+
+  // this api is called on the very first page load
+  router.post(
+    {
+      path: NODE_API.ACCOUNT_INFO,
+      validate: {
+        body: bodySchema,
+      },
+    },
+    commonService.apiCaller
+  );
 }
diff --git a/server/routes/indices.ts b/server/routes/indices.ts
index b5cdc0eb4..d7bdc0089 100644
--- a/server/routes/indices.ts
+++ b/server/routes/indices.ts
@@ -41,21 +41,15 @@ export default function (services: NodeServices, router: IRouter, dataSourceEnab
     indexService.getIndices
   );
 
-  let genericBodyAndDataSourceIdQuery: { body: AnyType; query?: ObjectType } = {
-    body: schema.any(),
-  };
-  if (dataSourceEnabled) {
-    genericBodyAndDataSourceIdQuery = {
-      ...genericBodyAndDataSourceIdQuery,
-      query: schema.object({
-        dataSourceId: schema.string(),
-      }),
-    };
-  }
   router.post(
     {
       path: NODE_API.APPLY_POLICY,
-      validate: genericBodyAndDataSourceIdQuery,
+      validate: {
+        body: schema.any(),
+        query: schema.object({
+          ...(dataSourceEnabled ? { dataSourceId: schema.string() } : {}),
+        }),
+      },
     },
     indexService.applyPolicy
   );
@@ -63,7 +57,12 @@ export default function (services: NodeServices, router: IRouter, dataSourceEnab
   router.post(
     {
       path: NODE_API.EDIT_ROLLOVER_ALIAS,
-      validate: genericBodyAndDataSourceIdQuery,
+      validate: {
+        body: schema.any(),
+        query: schema.object({
+          ...(dataSourceEnabled ? { dataSourceId: schema.string() } : {}),
+        }),
+      },
     },
     indexService.editRolloverAlias
   );
diff --git a/server/routes/managedIndices.ts b/server/routes/managedIndices.ts
index d16b2afde..fb90df05d 100644
--- a/server/routes/managedIndices.ts
+++ b/server/routes/managedIndices.ts
@@ -8,7 +8,7 @@ import { schema } from "@osd/config-schema";
 import { NodeServices } from "../models/interfaces";
 import { NODE_API } from "../../utils/constants";
 
-export default function (services: NodeServices, router: IRouter) {
+export default function (services: NodeServices, router: IRouter, dataSourceEnabled: boolean) {
   const { managedIndexService } = services;
 
   router.get(
@@ -25,6 +25,7 @@ export default function (services: NodeServices, router: IRouter) {
           indices: schema.maybe(schema.any()),
           dataStreams: schema.maybe(schema.any()),
           showDataStreams: schema.boolean(),
+          ...(dataSourceEnabled ? { dataSourceId: schema.string() } : {}),
         }),
       },
     },
@@ -38,6 +39,9 @@ export default function (services: NodeServices, router: IRouter) {
         params: schema.object({
           id: schema.string(),
         }),
+        query: schema.object({
+          ...(dataSourceEnabled ? { dataSourceId: schema.string() } : {}),
+        }),
       },
     },
     managedIndexService.getManagedIndex
@@ -48,6 +52,9 @@ export default function (services: NodeServices, router: IRouter) {
       path: NODE_API.RETRY,
       validate: {
         body: schema.any(),
+        query: schema.object({
+          ...(dataSourceEnabled ? { dataSourceId: schema.string() } : {}),
+        }),
       },
     },
     managedIndexService.retryManagedIndexPolicy
@@ -58,6 +65,9 @@ export default function (services: NodeServices, router: IRouter) {
       path: NODE_API.CHANGE_POLICY,
       validate: {
         body: schema.any(),
+        query: schema.object({
+          ...(dataSourceEnabled ? { dataSourceId: schema.string() } : {}),
+        }),
       },
     },
     managedIndexService.changePolicy
@@ -68,6 +78,9 @@ export default function (services: NodeServices, router: IRouter) {
       path: NODE_API.REMOVE_POLICY,
       validate: {
         body: schema.any(),
+        query: schema.object({
+          ...(dataSourceEnabled ? { dataSourceId: schema.string() } : {}),
+        }),
       },
     },
     managedIndexService.removePolicy
diff --git a/server/routes/notifications.ts b/server/routes/notifications.ts
index 90f56498f..e8e919308 100644
--- a/server/routes/notifications.ts
+++ b/server/routes/notifications.ts
@@ -8,13 +8,17 @@ import { NODE_API } from "../../utils/constants";
 import { IRouter } from "../../../../src/core/server";
 import { schema } from "@osd/config-schema";
 
-export default function (services: NodeServices, router: IRouter) {
+export default function (services: NodeServices, router: IRouter, dataSourceEnabled: boolean) {
   const { notificationService } = services;
 
   router.get(
     {
       path: NODE_API.CHANNELS,
-      validate: false,
+      validate: {
+        query: schema.object({
+          ...(dataSourceEnabled ? { dataSourceId: schema.string() } : {}),
+        }),
+      },
     },
     notificationService.getChannels
   );
@@ -26,6 +30,9 @@ export default function (services: NodeServices, router: IRouter) {
         params: schema.object({
           id: schema.string(),
         }),
+        query: schema.object({
+          ...(dataSourceEnabled ? { dataSourceId: schema.string() } : {}),
+        }),
       },
     },
     notificationService.getChannelById
diff --git a/server/routes/policies.ts b/server/routes/policies.ts
index 9896c7f00..fda06a447 100644
--- a/server/routes/policies.ts
+++ b/server/routes/policies.ts
@@ -8,7 +8,7 @@ import { schema } from "@osd/config-schema";
 import { NodeServices } from "../models/interfaces";
 import { NODE_API } from "../../utils/constants";
 
-export default function (services: NodeServices, router: IRouter) {
+export default function (services: NodeServices, router: IRouter, dataSourceEnabled: boolean) {
   const { policyService } = services;
 
   router.get(
@@ -21,6 +21,7 @@ export default function (services: NodeServices, router: IRouter) {
           search: schema.string(),
           sortField: schema.string(),
           sortDirection: schema.string(),
+          ...(dataSourceEnabled ? { dataSourceId: schema.string() } : {}),
         }),
       },
     },
@@ -37,6 +38,7 @@ export default function (services: NodeServices, router: IRouter) {
         query: schema.object({
           seqNo: schema.maybe(schema.number()),
           primaryTerm: schema.maybe(schema.number()),
+          ...(dataSourceEnabled ? { dataSourceId: schema.string() } : {}),
         }),
         body: schema.any(),
       },
@@ -51,6 +53,9 @@ export default function (services: NodeServices, router: IRouter) {
         params: schema.object({
           id: schema.string(),
         }),
+        query: schema.object({
+          ...(dataSourceEnabled ? { dataSourceId: schema.string() } : {}),
+        }),
       },
     },
     policyService.getPolicy
@@ -63,6 +68,9 @@ export default function (services: NodeServices, router: IRouter) {
         params: schema.object({
           id: schema.string(),
         }),
+        query: schema.object({
+          ...(dataSourceEnabled ? { dataSourceId: schema.string() } : {}),
+        }),
       },
     },
     policyService.deletePolicy
diff --git a/server/routes/rollups.ts b/server/routes/rollups.ts
index b4bce2b3b..c01d6779f 100644
--- a/server/routes/rollups.ts
+++ b/server/routes/rollups.ts
@@ -8,7 +8,7 @@ import { schema } from "@osd/config-schema";
 import { NodeServices } from "../models/interfaces";
 import { NODE_API } from "../../utils/constants";
 
-export default function (services: NodeServices, router: IRouter) {
+export default function (services: NodeServices, router: IRouter, dataSourceEnabled: boolean) {
   const { rollupService, transformService } = services;
 
   router.get(
@@ -21,6 +21,7 @@ export default function (services: NodeServices, router: IRouter) {
           search: schema.string(),
           sortField: schema.string(),
           sortDirection: schema.string(),
+          ...(dataSourceEnabled ? { dataSourceId: schema.string() } : {}),
         }),
       },
     },
@@ -37,6 +38,7 @@ export default function (services: NodeServices, router: IRouter) {
         query: schema.object({
           seqNo: schema.maybe(schema.number()),
           primaryTerm: schema.maybe(schema.number()),
+          ...(dataSourceEnabled ? { dataSourceId: schema.string() } : {}),
         }),
         body: schema.any(),
       },
@@ -51,6 +53,9 @@ export default function (services: NodeServices, router: IRouter) {
         params: schema.object({
           id: schema.string(),
         }),
+        query: schema.object({
+          ...(dataSourceEnabled ? { dataSourceId: schema.string() } : {}),
+        }),
       },
     },
     rollupService.getRollup
@@ -63,6 +68,9 @@ export default function (services: NodeServices, router: IRouter) {
         params: schema.object({
           id: schema.string(),
         }),
+        query: schema.object({
+          ...(dataSourceEnabled ? { dataSourceId: schema.string() } : {}),
+        }),
       },
     },
     rollupService.deleteRollup
@@ -75,6 +83,9 @@ export default function (services: NodeServices, router: IRouter) {
         params: schema.object({
           id: schema.string(),
         }),
+        query: schema.object({
+          ...(dataSourceEnabled ? { dataSourceId: schema.string() } : {}),
+        }),
       },
     },
     rollupService.startRollup
@@ -87,6 +98,9 @@ export default function (services: NodeServices, router: IRouter) {
         params: schema.object({
           id: schema.string(),
         }),
+        query: schema.object({
+          ...(dataSourceEnabled ? { dataSourceId: schema.string() } : {}),
+        }),
       },
     },
     rollupService.stopRollup
@@ -97,6 +111,9 @@ export default function (services: NodeServices, router: IRouter) {
       path: NODE_API._MAPPINGS,
       validate: {
         body: schema.any(),
+        query: schema.object({
+          ...(dataSourceEnabled ? { dataSourceId: schema.string() } : {}),
+        }),
       },
     },
     rollupService.getMappings
diff --git a/server/routes/transforms.ts b/server/routes/transforms.ts
index 37ea72af4..a28aa00c1 100644
--- a/server/routes/transforms.ts
+++ b/server/routes/transforms.ts
@@ -8,7 +8,7 @@ import { IRouter } from "opensearch-dashboards/server";
 import { NODE_API } from "../../utils/constants";
 import { schema } from "@osd/config-schema";
 
-export default function (services: NodeServices, router: IRouter) {
+export default function (services: NodeServices, router: IRouter, dataSourceEnabled: boolean) {
   const { transformService } = services;
 
   router.get(
@@ -21,6 +21,7 @@ export default function (services: NodeServices, router: IRouter) {
           search: schema.string(),
           sortField: schema.string(),
           sortDirection: schema.string(),
+          ...(dataSourceEnabled ? { dataSourceId: schema.string() } : {}),
         }),
       },
     },
@@ -34,6 +35,9 @@ export default function (services: NodeServices, router: IRouter) {
         params: schema.object({
           id: schema.string(),
         }),
+        query: schema.object({
+          ...(dataSourceEnabled ? { dataSourceId: schema.string() } : {}),
+        }),
       },
     },
     transformService.getTransform
@@ -46,6 +50,9 @@ export default function (services: NodeServices, router: IRouter) {
         params: schema.object({
           id: schema.string(),
         }),
+        query: schema.object({
+          ...(dataSourceEnabled ? { dataSourceId: schema.string() } : {}),
+        }),
       },
     },
     transformService.stopTransform
@@ -58,6 +65,9 @@ export default function (services: NodeServices, router: IRouter) {
         params: schema.object({
           id: schema.string(),
         }),
+        query: schema.object({
+          ...(dataSourceEnabled ? { dataSourceId: schema.string() } : {}),
+        }),
       },
     },
     transformService.startTransform
@@ -70,6 +80,9 @@ export default function (services: NodeServices, router: IRouter) {
         params: schema.object({
           id: schema.string(),
         }),
+        query: schema.object({
+          ...(dataSourceEnabled ? { dataSourceId: schema.string() } : {}),
+        }),
       },
     },
     transformService.deleteTransform
@@ -85,6 +98,7 @@ export default function (services: NodeServices, router: IRouter) {
         query: schema.object({
           seqNo: schema.maybe(schema.number()),
           primaryTerm: schema.maybe(schema.number()),
+          ...(dataSourceEnabled ? { dataSourceId: schema.string() } : {}),
         }),
         body: schema.any(),
       },
@@ -102,6 +116,7 @@ export default function (services: NodeServices, router: IRouter) {
         query: schema.object({
           from: schema.number(),
           size: schema.number(),
+          ...(dataSourceEnabled ? { dataSourceId: schema.string() } : {}),
         }),
         body: schema.any(),
       },
@@ -116,6 +131,9 @@ export default function (services: NodeServices, router: IRouter) {
         body: schema.object({
           transform: schema.any(),
         }),
+        query: schema.object({
+          ...(dataSourceEnabled ? { dataSourceId: schema.string() } : {}),
+        }),
       },
     },
     transformService.previewTransform
diff --git a/server/services/DataStreamService.ts b/server/services/DataStreamService.ts
index 26f6296ef..6060acc08 100644
--- a/server/services/DataStreamService.ts
+++ b/server/services/DataStreamService.ts
@@ -13,7 +13,7 @@ import {
 import { ServerResponse } from "../models/types";
 import { DataStream, GetDataStreamsResponse, IndexToDataStream } from "../models/interfaces";
 import { SECURITY_EXCEPTION_PREFIX } from "../utils/constants";
-import { MDSEnabledClientService } from "./MDSEnabledClientService";
+import { DataSourceClient, MDSEnabledClientService } from "./MDSEnabledClientService";
 
 export default class DataStreamService extends MDSEnabledClientService {
   getDataStreams = async (
@@ -81,9 +81,7 @@ export async function getDataStreams(callWithRequest: any, search?: string): Pro
   return [dataStreamsResponse["data_streams"], accessible, errMsg];
 }
 
-export async function getIndexToDataStreamMapping({
-  callAsCurrentUser: callWithRequest,
-}: ILegacyScopedClusterClient): Promise<IndexToDataStream> {
+export async function getIndexToDataStreamMapping(callWithRequest: DataSourceClient): Promise<IndexToDataStream> {
   const [dataStreams] = await getDataStreams(callWithRequest);
 
   const mapping: { [indexName: string]: string } = {};
diff --git a/server/services/IndexService.ts b/server/services/IndexService.ts
index 767a3374f..e5d0b5994 100644
--- a/server/services/IndexService.ts
+++ b/server/services/IndexService.ts
@@ -99,7 +99,7 @@ export default class IndexService extends MDSEnabledClientService {
           actions: "indices:data/write/reindex",
         }).catch(() => []),
         callWithRequest("cat.indices", params),
-        getIndexToDataStreamMapping({ callAsCurrentUser: callWithRequest }),
+        getIndexToDataStreamMapping(callWithRequest),
       ]);
 
       const formattedTasks: IReindexItem[] = tasks.map(
@@ -248,10 +248,10 @@ export default class IndexService extends MDSEnabledClientService {
   ): Promise<IOpenSearchDashboardsResponse<ServerResponse<ApplyPolicyResponse>>> => {
     try {
       const { indices, policyId } = request.body as { indices: string[]; policyId: string };
-      const { callAsCurrentUser: callWithRequest } = this.osDriver.asScoped(request);
+      const callWithRequest = this.getClientBasedOnDataSource(context, request);
       const params = { index: indices.join(","), body: { policy_id: policyId } };
 
-      const addResponse: AddResponse = await callWithRequest("ism.add", params);
+      const addResponse: AddResponse = (await callWithRequest("ism.add", params)) as AddResponse;
       return response.custom({
         statusCode: 200,
         body: {
@@ -287,9 +287,9 @@ export default class IndexService extends MDSEnabledClientService {
   ): Promise<IOpenSearchDashboardsResponse<ServerResponse<AcknowledgedResponse>>> => {
     try {
       const { alias, index } = request.body as { alias: string; index: string };
-      const { callAsCurrentUser: callWithRequest } = this.osDriver.asScoped(request);
+      const callWithRequest = this.getClientBasedOnDataSource(context, request);
       const params = { index, body: { [Setting.RolloverAlias]: alias } };
-      const rollOverResponse = await callWithRequest("indices.putSettings", params);
+      const rollOverResponse: AcknowledgedResponse = (await callWithRequest("indices.putSettings", params)) as AcknowledgedResponse;
       return response.custom({
         statusCode: 200,
         body: {
diff --git a/server/services/MDSEnabledClientService.ts b/server/services/MDSEnabledClientService.ts
index c5bb3404c..e7e9aba9a 100644
--- a/server/services/MDSEnabledClientService.ts
+++ b/server/services/MDSEnabledClientService.ts
@@ -28,3 +28,5 @@ export abstract class MDSEnabledClientService {
     }
   }
 }
+
+export type DataSourceClient = ReturnType<MDSEnabledClientService["getClientBasedOnDataSource"]>;
diff --git a/server/services/ManagedIndexService.ts b/server/services/ManagedIndexService.ts
index f74a85395..ed4335efb 100644
--- a/server/services/ManagedIndexService.ts
+++ b/server/services/ManagedIndexService.ts
@@ -10,7 +10,6 @@ import {
   OpenSearchDashboardsRequest,
   OpenSearchDashboardsResponseFactory,
   IOpenSearchDashboardsResponse,
-  ILegacyCustomClusterClient,
 } from "opensearch-dashboards/server";
 import { INDEX } from "../utils/constants";
 import { getSearchString, transformManagedIndexMetaData } from "../utils/helpers";
@@ -29,14 +28,9 @@ import {
 import { ManagedIndicesSort, ServerResponse } from "../models/types";
 import { ManagedIndexItem } from "../../models/interfaces";
 import { getIndexToDataStreamMapping } from "./DataStreamService";
+import { MDSEnabledClientService } from "./MDSEnabledClientService";
 
-export default class ManagedIndexService {
-  osDriver: ILegacyCustomClusterClient;
-
-  constructor(osDriver: ILegacyCustomClusterClient) {
-    this.osDriver = osDriver;
-  }
-
+export default class ManagedIndexService extends MDSEnabledClientService {
   // TODO: Not finished, need UI page that uses this first
   getManagedIndex = async (
     context: RequestHandlerContext,
@@ -46,8 +40,8 @@ export default class ManagedIndexService {
     try {
       const { id } = request.params as { id: string };
       const params: RequestParams.Get = { id, index: INDEX.OPENDISTRO_ISM_CONFIG };
-      const { callAsCurrentUser: callWithRequest } = this.osDriver.asScoped(request);
-      const results: SearchResponse<any> = await callWithRequest("search", params);
+      const callWithRequest = this.getClientBasedOnDataSource(context, request);
+      const results: SearchResponse<any> = (await callWithRequest("search", params)) as SearchResponse<any>;
       return response.custom({
         statusCode: 200,
         body: {
@@ -91,13 +85,13 @@ export default class ManagedIndexService {
         sortOrder: sortDirection,
         queryString: getSearchString(terms, indices, dataStreams, showDataStreams),
         from: from,
-        size: size
+        size: size,
       };
 
-      const { callAsCurrentUser: callWithRequest } = this.osDriver.asScoped(request);
+      const callWithRequest = this.getClientBasedOnDataSource(context, request);
       const [explainAllResponse, indexToDataStreamMapping] = await Promise.all([
         callWithRequest("ism.explainAll", explainParams) as Promise<ExplainAllResponse>,
-        getIndexToDataStreamMapping({ callAsCurrentUser: callWithRequest }),
+        getIndexToDataStreamMapping(callWithRequest),
       ]);
       const managedIndices: ManagedIndexItem[] = [];
       for (const indexName in explainAllResponse) {
@@ -138,7 +132,7 @@ export default class ManagedIndexService {
         statusCode: 200,
         body: {
           ok: true,
-          response: { managedIndices: managedIndices, totalManagedIndices: totalManagedIndices},
+          response: { managedIndices: managedIndices, totalManagedIndices: totalManagedIndices },
         },
       });
     } catch (err) {
@@ -215,9 +209,9 @@ export default class ManagedIndexService {
         state: string | null;
         include: { state: string }[];
       };
-      const { callAsCurrentUser: callWithRequest } = this.osDriver.asScoped(request);
+      const callWithRequest = this.getClientBasedOnDataSource(context, request);
       const params = { index: indices.join(","), body: { policy_id: policyId, include, state } };
-      const changeResponse: RemoveResponse = await callWithRequest("ism.change", params);
+      const changeResponse: RemoveResponse = (await callWithRequest("ism.change", params)) as RemoveResponse;
       return response.custom({
         statusCode: 200,
         body: {
@@ -252,9 +246,9 @@ export default class ManagedIndexService {
   ): Promise<IOpenSearchDashboardsResponse<ServerResponse<RemovePolicyResponse>>> => {
     try {
       const { indices } = request.body as { indices: string[] };
-      const { callAsCurrentUser: callWithRequest } = this.osDriver.asScoped(request);
+      const callWithRequest = this.getClientBasedOnDataSource(context, request);
       const params = { index: indices.join(",") };
-      const addResponse: RemoveResponse = await callWithRequest("ism.remove", params);
+      const addResponse: RemoveResponse = (await callWithRequest("ism.remove", params)) as RemoveResponse;
       return response.custom({
         statusCode: 200,
         body: {
diff --git a/server/services/NotificationService.ts b/server/services/NotificationService.ts
index b7d39a37a..7b6005dc2 100644
--- a/server/services/NotificationService.ts
+++ b/server/services/NotificationService.ts
@@ -13,22 +13,17 @@ import {
 } from "opensearch-dashboards/server";
 import { ServerResponse } from "../models/types";
 import { GetChannelsResponse, GetNotificationConfigsResponse } from "../models/interfaces";
+import { MDSEnabledClientService } from "./MDSEnabledClientService";
 
-export default class NotificationService {
-  osDriver: ILegacyCustomClusterClient;
-
-  constructor(osDriver: ILegacyCustomClusterClient) {
-    this.osDriver = osDriver;
-  }
-
+export default class NotificationService extends MDSEnabledClientService {
   getChannels = async (
     context: RequestHandlerContext,
     request: OpenSearchDashboardsRequest,
     response: OpenSearchDashboardsResponseFactory
   ): Promise<IOpenSearchDashboardsResponse<ServerResponse<GetChannelsResponse> | ResponseError>> => {
     try {
-      const { callAsCurrentUser: callWithRequest } = this.osDriver.asScoped(request);
-      const getChannelsResponse: GetChannelsResponse = await callWithRequest("ism.getChannels");
+      const callWithRequest = this.getClientBasedOnDataSource(context, request);
+      const getChannelsResponse: GetChannelsResponse = (await callWithRequest("ism.getChannels", {})) as GetChannelsResponse;
 
       return response.custom({
         statusCode: 200,
@@ -59,10 +54,10 @@ export default class NotificationService {
         id: string;
       };
 
-      const { callAsCurrentUser: callWithRequest } = this.osDriver.asScoped(request);
-      const getResponse: GetNotificationConfigsResponse = await callWithRequest("ism.getChannel", {
+      const callWithRequest = this.getClientBasedOnDataSource(context, request);
+      const getResponse: GetNotificationConfigsResponse = (await callWithRequest("ism.getChannel", {
         id,
-      });
+      })) as GetNotificationConfigsResponse;
 
       return response.custom({
         statusCode: 200,
diff --git a/server/services/PolicyService.ts b/server/services/PolicyService.ts
index 395df38dc..eda8bbcc8 100644
--- a/server/services/PolicyService.ts
+++ b/server/services/PolicyService.ts
@@ -5,24 +5,18 @@
 
 import _ from "lodash";
 import {
-  ILegacyCustomClusterClient,
+  IOpenSearchDashboardsResponse,
   OpenSearchDashboardsRequest,
   OpenSearchDashboardsResponseFactory,
-  IOpenSearchDashboardsResponse,
-  ResponseError,
   RequestHandlerContext,
-} from "opensearch-dashboards/server";
+  ResponseError,
+} from "../../../../src/core/server";
 import { DeletePolicyParams, DeletePolicyResponse, GetPoliciesResponse, PutPolicyParams, PutPolicyResponse } from "../models/interfaces";
 import { PoliciesSort, ServerResponse } from "../models/types";
 import { DocumentPolicy, Policy } from "../../models/interfaces";
+import { MDSEnabledClientService } from "./MDSEnabledClientService";
 
-export default class PolicyService {
-  osDriver: ILegacyCustomClusterClient;
-
-  constructor(osDriver: ILegacyCustomClusterClient) {
-    this.osDriver = osDriver;
-  }
-
+export default class PolicyService extends MDSEnabledClientService {
   /**
    * Calls backend Put Policy API
    */
@@ -40,8 +34,8 @@ export default class PolicyService {
         method = "ism.createPolicy";
         params = { policyId: id, body: JSON.stringify(request.body) };
       }
-      const { callAsCurrentUser: callWithRequest } = this.osDriver.asScoped(request);
-      const putPolicyResponse: PutPolicyResponse = await callWithRequest(method, params);
+      const callWithRequest = this.getClientBasedOnDataSource(context, request);
+      const putPolicyResponse: PutPolicyResponse = (await callWithRequest(method, params)) as PutPolicyResponse;
       return response.custom({
         statusCode: 200,
         body: {
@@ -72,8 +66,8 @@ export default class PolicyService {
     try {
       const { id } = request.params as { id: string };
       const params: DeletePolicyParams = { policyId: id };
-      const { callAsCurrentUser: callWithRequest } = this.osDriver.asScoped(request);
-      const deletePolicyResponse: DeletePolicyResponse = await callWithRequest("ism.deletePolicy", params);
+      const callWithRequest = this.getClientBasedOnDataSource(context, request);
+      const deletePolicyResponse: DeletePolicyResponse = (await callWithRequest("ism.deletePolicy", params)) as DeletePolicyResponse;
       if (deletePolicyResponse.result !== "deleted") {
         return response.custom({
           statusCode: 200,
@@ -113,7 +107,7 @@ export default class PolicyService {
     try {
       const { id } = request.params as { id: string };
       const params = { policyId: id };
-      const { callAsCurrentUser: callWithRequest } = this.osDriver.asScoped(request);
+      const callWithRequest = this.getClientBasedOnDataSource(context, request);
       const getResponse = await callWithRequest("ism.getPolicy", params);
       const policy = _.get(getResponse, "policy", null);
       const seqNo = _.get(getResponse, "_seq_no");
@@ -147,9 +141,6 @@ export default class PolicyService {
     }
   };
 
-  /**
-   * Calls backend Get Policy API
-   */
   getPolicies = async (
     context: RequestHandlerContext,
     request: OpenSearchDashboardsRequest,
@@ -178,10 +169,10 @@ export default class PolicyService {
         queryString: search.trim() ? `*${search.trim().split(" ").join("* *")}*` : "*",
       };
 
-      const { callAsCurrentUser: callWithRequest } = this.osDriver.asScoped(request);
-      const getResponse = await callWithRequest("ism.getPolicies", params);
+      const callWithRequest = this.getClientBasedOnDataSource(context, request);
+      const getResponse: any = await callWithRequest("ism.getPolicies", params);
 
-      const policies: DocumentPolicy[] = getResponse.policies.map((p) => ({
+      const policies: DocumentPolicy[] = getResponse.policies.map((p: any) => ({
         seqNo: p._seq_no,
         primaryTerm: p._primary_term,
         id: p._id,
diff --git a/server/services/RollupService.ts b/server/services/RollupService.ts
index 6ba8a5cd9..e7f8a0014 100644
--- a/server/services/RollupService.ts
+++ b/server/services/RollupService.ts
@@ -5,7 +5,6 @@
 
 import _ from "lodash";
 import {
-  ILegacyCustomClusterClient,
   OpenSearchDashboardsRequest,
   OpenSearchDashboardsResponseFactory,
   IOpenSearchDashboardsResponse,
@@ -15,14 +14,9 @@ import {
 import { DeleteRollupParams, DeleteRollupResponse, GetRollupsResponse, PutRollupParams, PutRollupResponse } from "../models/interfaces";
 import { ServerResponse } from "../models/types";
 import { DocumentRollup, Rollup } from "../../models/interfaces";
+import { MDSEnabledClientService } from "./MDSEnabledClientService";
 
-export default class RollupService {
-  osDriver: ILegacyCustomClusterClient;
-
-  constructor(osDriver: ILegacyCustomClusterClient) {
-    this.osDriver = osDriver;
-  }
-
+export default class RollupService extends MDSEnabledClientService {
   /**
    * Calls backend Put Rollup API
    */
@@ -45,8 +39,8 @@ export default class RollupService {
         method = "ism.createRollup";
         params = { rollupId: id, body: JSON.stringify(request.body) };
       }
-      const { callAsCurrentUser: callWithRequest } = this.osDriver.asScoped(request);
-      const putRollupResponse: PutRollupResponse = await callWithRequest(method, params);
+      const callWithRequest = this.getClientBasedOnDataSource(context, request);
+      const putRollupResponse: PutRollupResponse = (await callWithRequest(method, params)) as PutRollupResponse;
       return response.custom({
         statusCode: 200,
         body: {
@@ -77,8 +71,8 @@ export default class RollupService {
     try {
       const { id } = request.params as { id: string };
       const params: DeleteRollupParams = { rollupId: id };
-      const { callAsCurrentUser: callWithRequest } = this.osDriver.asScoped(request);
-      const deleteRollupResponse: DeleteRollupResponse = await callWithRequest("ism.deleteRollup", params);
+      const callWithRequest = this.getClientBasedOnDataSource(context, request);
+      const deleteRollupResponse: DeleteRollupResponse = (await callWithRequest("ism.deleteRollup", params)) as DeleteRollupResponse;
       if (deleteRollupResponse.result !== "deleted") {
         return response.custom({
           statusCode: 200,
@@ -115,7 +109,7 @@ export default class RollupService {
     try {
       const { id } = request.params as { id: string };
       const params = { rollupId: id };
-      const { callAsCurrentUser: callWithRequest } = this.osDriver.asScoped(request);
+      const callWithRequest = this.getClientBasedOnDataSource(context, request);
       const startResponse = await callWithRequest("ism.startRollup", params);
       const acknowledged = _.get(startResponse, "acknowledged");
       if (acknowledged) {
@@ -146,7 +140,7 @@ export default class RollupService {
     try {
       const { id } = request.params as { id: string };
       const params = { rollupId: id };
-      const { callAsCurrentUser: callWithRequest } = this.osDriver.asScoped(request);
+      const callWithRequest = this.getClientBasedOnDataSource(context, request);
       const stopResponse = await callWithRequest("ism.stopRollup", params);
       const acknowledged = _.get(stopResponse, "acknowledged");
       if (acknowledged) {
@@ -180,7 +174,7 @@ export default class RollupService {
     try {
       const { id } = request.params as { id: string };
       const params = { rollupId: id };
-      const { callAsCurrentUser: callWithRequest } = this.osDriver.asScoped(request);
+      const callWithRequest = this.getClientBasedOnDataSource(context, request);
       const getResponse = await callWithRequest("ism.getRollup", params);
       const metadata = await callWithRequest("ism.explainRollup", params);
       const rollup = _.get(getResponse, "rollup", null);
@@ -240,7 +234,7 @@ export default class RollupService {
     try {
       const { index } = request.body as { index: string };
       const params = { index: index };
-      const { callAsCurrentUser: callWithRequest } = this.osDriver.asScoped(request);
+      const callWithRequest = this.getClientBasedOnDataSource(context, request);
       const mappings = await callWithRequest("indices.getMapping", params);
       return response.custom({
         statusCode: 200,
@@ -292,8 +286,8 @@ export default class RollupService {
         sortDirection,
       };
 
-      const { callAsCurrentUser: callWithRequest } = this.osDriver.asScoped(request);
-      const getRollupResponse = await callWithRequest("ism.getRollups", params);
+      const callWithRequest = this.getClientBasedOnDataSource(context, request);
+      const getRollupResponse: any = await callWithRequest("ism.getRollups", params);
       const totalRollups = getRollupResponse.total_rollups;
       const rollups = getRollupResponse.rollups.map((rollup: DocumentRollup) => ({
         _seqNo: rollup._seqNo as number,
@@ -307,7 +301,7 @@ export default class RollupService {
       if (totalRollups) {
         // Concat rollup job ids
         const ids = rollups.map((rollup: DocumentRollup) => rollup._id).join(",");
-        const explainResponse = await callWithRequest("ism.explainRollup", { rollupId: ids });
+        const explainResponse: any = await callWithRequest("ism.explainRollup", { rollupId: ids });
         if (!explainResponse.error) {
           rollups.map((rollup: DocumentRollup) => {
             rollup.metadata = explainResponse[rollup._id];
diff --git a/server/services/TransformService.ts b/server/services/TransformService.ts
index 771bd91da..87b09ac79 100644
--- a/server/services/TransformService.ts
+++ b/server/services/TransformService.ts
@@ -20,14 +20,9 @@ import {
 } from "../models/interfaces";
 import { DocumentTransform, Transform } from "../../models/interfaces";
 import _ from "lodash";
+import { MDSEnabledClientService } from "./MDSEnabledClientService";
 
-export default class TransformService {
-  esDriver: IClusterClient;
-
-  constructor(esDriver: IClusterClient) {
-    this.esDriver = esDriver;
-  }
-
+export default class TransformService extends MDSEnabledClientService {
   getTransforms = async (
     context: RequestHandlerContext,
     request: OpenSearchDashboardsRequest,
@@ -57,8 +52,8 @@ export default class TransformService {
         sortDirection,
       };
 
-      const { callAsCurrentUser: callWithRequest } = this.esDriver.asScoped(request);
-      const getTransformsResponse = await callWithRequest("ism.getTransforms", params);
+      const callWithRequest = this.getClientBasedOnDataSource(context, request);
+      const getTransformsResponse = (await callWithRequest("ism.getTransforms", params)) as any;
       const totalTransforms = getTransformsResponse.total_transforms;
       const transforms = getTransformsResponse.transforms.map((transform: DocumentTransform) => ({
         _seqNo: transform._seqNo as number,
@@ -69,7 +64,9 @@ export default class TransformService {
       }));
       if (totalTransforms) {
         const ids = transforms.map((transform: DocumentTransform) => transform._id).join(",");
-        const explainResponse = await callWithRequest("ism.explainTransform", { transformId: ids });
+        const callWithRequest = this.getClientBasedOnDataSource(context, request);
+
+        const explainResponse = (await callWithRequest("ism.explainTransform", { transformId: ids })) as any;
         if (!explainResponse.error) {
           transforms.map((transform: DocumentTransform) => {
             transform.metadata = explainResponse[transform._id];
@@ -123,7 +120,7 @@ export default class TransformService {
     try {
       const { id } = request.params as { id: string };
       const params = { transformId: id };
-      const { callAsCurrentUser: callWithRequest } = this.esDriver.asScoped(request);
+      const callWithRequest = this.getClientBasedOnDataSource(context, request);
       const getResponse = await callWithRequest("ism.getTransform", params);
       const metadata = await callWithRequest("ism.explainTransform", params);
       const transform = _.get(getResponse, "transform", null);
@@ -183,7 +180,7 @@ export default class TransformService {
     try {
       const { id } = request.params as { id: string };
       const params = { transformId: id };
-      const { callAsCurrentUser: callWithRequest } = this.esDriver.asScoped(request);
+      const callWithRequest = this.getClientBasedOnDataSource(context, request);
       const startResponse = await callWithRequest("ism.startTransform", params);
       const acknowledged = _.get(startResponse, "acknowledged");
       if (acknowledged) {
@@ -214,7 +211,7 @@ export default class TransformService {
     try {
       const { id } = request.params as { id: string };
       const params = { transformId: id };
-      const { callAsCurrentUser: callWithRequest } = this.esDriver.asScoped(request);
+      const callWithRequest = this.getClientBasedOnDataSource(context, request);
       const stopResponse = await callWithRequest("ism.stopTransform", params);
       const acknowledged = _.get(stopResponse, "acknowledged");
       if (acknowledged) {
@@ -245,8 +242,8 @@ export default class TransformService {
     try {
       const { id } = request.params as { id: string };
       const params = { transformId: id };
-      const { callAsCurrentUser: callWithRequest } = this.esDriver.asScoped(request);
-      const deleteResponse = await callWithRequest("ism.deleteTransform", params);
+      const callWithRequest = this.getClientBasedOnDataSource(context, request);
+      const deleteResponse = (await callWithRequest("ism.deleteTransform", params)) as any;
       if (!deleteResponse.errors) {
         return response.custom({
           statusCode: 200,
@@ -286,8 +283,8 @@ export default class TransformService {
         method = "ism.putTransform";
         params = { transformId: id, body: JSON.stringify(request.body) };
       }
-      const { callAsCurrentUser: callWithRequest } = this.esDriver.asScoped(request);
-      const putTransformResponse: PutTransformResponse = await callWithRequest(method, params);
+      const callWithRequest = this.getClientBasedOnDataSource(context, request);
+      const putTransformResponse: PutTransformResponse = (await callWithRequest(method, params)) as PutTransformResponse;
       return response.custom({
         statusCode: 200,
         body: {
@@ -324,8 +321,8 @@ export default class TransformService {
         size: size,
         body: request.body ? JSON.stringify({ query: request.body }) : {},
       };
-      const { callAsCurrentUser: callWithRequest } = this.esDriver.asScoped(request);
-      const searchResponse: SearchResponse<any> = await callWithRequest("search", params);
+      const callWithRequest = this.getClientBasedOnDataSource(context, request);
+      const searchResponse: SearchResponse<any> = (await callWithRequest("search", params)) as SearchResponse<any>;
       return response.custom({
         statusCode: 200,
         body: {
@@ -369,8 +366,8 @@ export default class TransformService {
       let params = {
         body: JSON.stringify(request.body),
       };
-      const { callAsCurrentUser: callWithRequest } = this.esDriver.asScoped(request);
-      const previewResponse: PreviewTransformResponse = await callWithRequest("ism.previewTransform", params);
+      const callWithRequest = this.getClientBasedOnDataSource(context, request);
+      const previewResponse: PreviewTransformResponse = (await callWithRequest("ism.previewTransform", params)) as PreviewTransformResponse;
       return response.custom({
         statusCode: 200,
         body: {
diff --git a/utils/constants.ts b/utils/constants.ts
index 0dda4d67a..25a5a6728 100644
--- a/utils/constants.ts
+++ b/utils/constants.ts
@@ -27,6 +27,7 @@ export const NODE_API = Object.freeze({
   _REPOSITORIES: `${BASE_API_PATH}/_repositores`,
   PUT_INDEX: `${BASE_API_PATH}/putIndex`,
   API_CALLER: `${BASE_API_PATH}/apiCaller`,
+  ACCOUNT_INFO: `${BASE_API_PATH}/accountInfo`,
 });
 
 export const REQUEST = Object.freeze({