diff --git a/public/pages/CreateRollup/containers/CreateRollup/CreateRollup.tsx b/public/pages/CreateRollup/containers/CreateRollup/CreateRollup.tsx
index 1572e0e89..92905139e 100644
--- a/public/pages/CreateRollup/containers/CreateRollup/CreateRollup.tsx
+++ b/public/pages/CreateRollup/containers/CreateRollup/CreateRollup.tsx
@@ -36,7 +36,7 @@ interface CreateRollupProps extends RouteComponentProps, DataSourceMenuPropertie
   hasAggregation: boolean;
 }
 
-export class CreateRollup extends Component<CreateRollupProps> {
+export default class CreateRollup extends Component<CreateRollupProps> {
   render() {
     if (this.props.currentStep !== 1) {
       return null;
@@ -63,9 +63,3 @@ export class CreateRollup extends Component<CreateRollupProps> {
     );
   }
 }
-
-export default function (props: CreateRollupProps) {
-  const dataSourceMenuProperties = useContext(DataSourceMenuContext);
-  useUpdateUrlWithDataSourceProperties();
-  return <CreateRollup {...props} {...dataSourceMenuProperties} />;
-}
diff --git a/public/pages/CreateRollup/containers/CreateRollupForm/CreateRollupForm.tsx b/public/pages/CreateRollup/containers/CreateRollupForm/CreateRollupForm.tsx
index bf743f838..b16281742 100644
--- a/public/pages/CreateRollup/containers/CreateRollupForm/CreateRollupForm.tsx
+++ b/public/pages/CreateRollup/containers/CreateRollupForm/CreateRollupForm.tsx
@@ -5,7 +5,7 @@
 
 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,10 +21,15 @@ import CreateRollupStep3 from "../CreateRollupStep3";
 import CreateRollupStep4 from "../CreateRollupStep4";
 import { compareFieldItem, parseFieldOptions } from "../../utils/helpers";
 import { CoreServicesContext } from "../../../../components/core_services";
-import { DataSourceMenuContext, DataSourceMenuProperties } from "../../../../services/DataSourceMenuContext";
+import {
+  DataSourceMenuContext,
+  DataSourceMenuProperties,
+  DataSourceMenuReadOnlyContext,
+  DataSourceMenuReadOnlyProperties,
+} from "../../../../services/DataSourceMenuContext";
 import { useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent";
 
-interface CreateRollupFormProps extends RouteComponentProps, DataSourceMenuProperties {
+interface CreateRollupFormProps extends RouteComponentProps, DataSourceMenuProperties, DataSourceMenuReadOnlyProperties {
   rollupService: RollupService;
   indexService: IndexService;
 }
@@ -226,6 +231,14 @@ export class CreateRollupForm extends Component<CreateRollupFormProps, CreateRol
   _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;
@@ -289,6 +302,14 @@ export class CreateRollupForm extends Component<CreateRollupFormProps, CreateRol
     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,
     });
@@ -737,7 +758,8 @@ export class CreateRollupForm extends Component<CreateRollupFormProps, CreateRol
 }
 
 export default function (props: Omit<CreateRollupFormProps, keyof DataSourceMenuProperties>) {
+  const dataSourceReadOnlyProperties = useContext(DataSourceMenuReadOnlyContext);
   const dataSourceMenuProperties = useContext(DataSourceMenuContext);
   useUpdateUrlWithDataSourceProperties();
-  return <CreateRollupForm {...props} {...dataSourceMenuProperties} />;
+  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 dcbbd7ae1..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,
@@ -159,28 +162,38 @@ const dataSourceEnabledPaths: string[] = [
   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));
   }
@@ -215,6 +228,7 @@ export default class Main extends Component<MainProps, MainState> {
       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;
   }
@@ -341,504 +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.EDIT_POLICY,
-                                ROUTES.POLICY_DETAILS,
-                                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,
-                                ROUTES.MANAGED_INDICES,
-                                ROUTES.INDEX_POLICIES,
-                                ROUTES.CREATE_POLICY,
-                                ROUTES.CHANGE_POLICY,
-                                ROUTES.TRANSFORMS,
-                                ROUTES.ROLLUPS,
-                                ROUTES.CREATE_ROLLUP,
-                              ]}
-                              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/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 7fea01eae..4c06703e7 100644
--- a/public/pages/Rollups/containers/Rollups/Rollups.tsx
+++ b/public/pages/Rollups/containers/Rollups/Rollups.tsx
@@ -74,6 +74,7 @@ export class Rollups extends MDSEnabledComponent<RollupsProps, RollupsState> {
     const { from, size, search, sortField, sortDirection } = getURLQueryParams(this.props.location);
 
     this.state = {
+      ...this.state,
       totalRollups: 0,
       from,
       size,
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/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/TransformService.test.ts b/public/services/TransformService.test.ts
index 58e11434f..9a8f71e08 100644
--- a/public/services/TransformService.test.ts
+++ b/public/services/TransformService.test.ts
@@ -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..e96c60e2b 100644
--- a/public/services/TransformService.ts
+++ b/public/services/TransformService.ts
@@ -3,21 +3,17 @@
  * 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}`;
+    queryObject = this.patchQueryObjectWithDataSourceId(queryObject);
     // @ts-ignore
     return (await this.httpClient.get(url, { query: queryObject })) as ServerResponse<GetTransformsResponse>;
   };
@@ -29,47 +25,49 @@ 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<
+    let queryObject = this.patchQueryObjectWithDataSourceId({ seqNo, primaryTerm });
+    return (await this.httpClient.put(url, { query: queryObject, body: JSON.stringify(transform) })) 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 queryObject = this.patchQueryObjectWithDataSourceId();
+    return (await this.httpClient.get(url, { query: queryObject })) 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 queryObject = this.patchQueryObjectWithDataSourceId();
+    return (await this.httpClient.delete(url, { query: queryObject })) 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 queryObject = this.patchQueryObjectWithDataSourceId();
+    return (await this.httpClient.post(url, { query: queryObject })) 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 queryObject = this.patchQueryObjectWithDataSourceId();
+    return (await this.httpClient.post(url, { query: queryObject })) as ServerResponse<boolean>;
   };
 
   previewTransform = async (transform: any): Promise<ServerResponse<PreviewTransformResponse>> => {
     const url = `..${NODE_API.TRANSFORMS}/_preview`;
+    const queryObject = this.patchQueryObjectWithDataSourceId();
     // @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), query: queryObject })) 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>;
-    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}`;
+    queryObject = this.patchQueryObjectWithDataSourceId(queryObject);
     const response = (await this.httpClient.post(url, { query: queryObject, body: body })) as ServerResponse<any>;
     return response;
   };
diff --git a/server/plugin.ts b/server/plugin.ts
index 38a536a13..387fada15 100644
--- a/server/plugin.ts
+++ b/server/plugin.ts
@@ -53,7 +53,7 @@ export class IndexPatternManagementPlugin implements Plugin<IndexManagementPlugi
     const policyService = new PolicyService(osDriver, dataSourceEnabled);
     const managedIndexService = new ManagedIndexService(osDriver, dataSourceEnabled);
     const rollupService = new RollupService(osDriver, dataSourceEnabled);
-    const transformService = new TransformService(osDriver);
+    const transformService = new TransformService(osDriver, dataSourceEnabled);
     const notificationService = new NotificationService(osDriver, dataSourceEnabled);
     const snapshotManagementService = new SnapshotManagementService(osDriver);
     const commonService = new CommonService(osDriver, dataSourceEnabled);
@@ -84,7 +84,7 @@ export class IndexPatternManagementPlugin implements Plugin<IndexManagementPlugi
     policies(services, router, dataSourceEnabled);
     managedIndices(services, router, dataSourceEnabled);
     rollups(services, router, dataSourceEnabled);
-    transforms(services, router);
+    transforms(services, router, dataSourceEnabled);
     notifications(services, router, dataSourceEnabled);
     snapshotManagement(services, router);
     common(services, router, dataSourceEnabled);
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/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: {