From 18dbfb064df8ec18b0a5c05b3a24d31ead9a4160 Mon Sep 17 00:00:00 2001
From: Ramakrishna Chilaka
 <49393831+RamakrishnaChilaka@users.noreply.github.com>
Date: Fri, 12 Apr 2024 13:43:48 +0530
Subject: [PATCH] Interface change for MDS and deprecating dataSourceLabel from
 the URL (#1031)

Signed-off-by: Ramakrishna Chilaka <ramachil@amazon.com>
(cherry picked from commit ed98e4ab820ebe7fd436548a4e0793757a4cbb30)
---
 .../MDSEnabledComponent.tsx                   |  12 +-
 public/pages/Aliases/utils/constants.tsx      |   1 -
 .../ComposableTemplates/utils/constants.tsx   |   1 -
 public/pages/DataStreams/utils/constants.tsx  |   1 -
 .../containers/Indices/Indices.test.tsx       |   3 -
 .../Indices/containers/Indices/Indices.tsx    |   4 +-
 public/pages/Main/Main.tsx                    | 956 +++++++++---------
 .../Rollups/containers/Rollups/Rollups.tsx    |   2 +-
 public/pages/Templates/utils/constants.tsx    |   1 -
 public/services/DataSourceMenuContext.ts      |   2 -
 10 files changed, 507 insertions(+), 476 deletions(-)

diff --git a/public/components/MDSEnabledComponent/MDSEnabledComponent.tsx b/public/components/MDSEnabledComponent/MDSEnabledComponent.tsx
index 340fe1120..701753729 100644
--- a/public/components/MDSEnabledComponent/MDSEnabledComponent.tsx
+++ b/public/components/MDSEnabledComponent/MDSEnabledComponent.tsx
@@ -11,7 +11,6 @@ export default class MDSEnabledComponent<
     super(props);
     this.state = {
       dataSourceId: props.dataSourceId,
-      dataSourceLabel: props.dataSourceLabel,
       multiDataSourceEnabled: props.multiDataSourceEnabled,
     } as State;
   }
@@ -21,13 +20,9 @@ export default class MDSEnabledComponent<
     prevState: State
   ) {
     // static members cannot reference class type parameters
-    if (
-      nextProps.multiDataSourceEnabled &&
-      (nextProps.dataSourceId !== prevState.dataSourceId || nextProps.dataSourceLabel !== prevState.dataSourceLabel)
-    ) {
+    if (nextProps.multiDataSourceEnabled && nextProps.dataSourceId !== prevState.dataSourceId) {
       return {
         dataSourceId: nextProps.dataSourceId,
-        dataSourceLabel: nextProps.dataSourceLabel,
       };
     }
     return null;
@@ -36,7 +31,7 @@ export default class MDSEnabledComponent<
 
 export function useUpdateUrlWithDataSourceProperties() {
   const dataSourceMenuProps = useContext(DataSourceMenuContext);
-  const { dataSourceId, dataSourceLabel, multiDataSourceEnabled } = dataSourceMenuProps;
+  const { dataSourceId, multiDataSourceEnabled } = dataSourceMenuProps;
   const history = useHistory();
   const currentSearch = history.location.search;
   const currentQuery = queryString.parse(currentSearch);
@@ -46,9 +41,8 @@ export function useUpdateUrlWithDataSourceProperties() {
         search: queryString.stringify({
           ...currentQuery,
           dataSourceId,
-          dataSourceLabel,
         }),
       });
     }
-  }, [dataSourceId, dataSourceLabel, multiDataSourceEnabled]);
+  }, [dataSourceId, multiDataSourceEnabled]);
 }
diff --git a/public/pages/Aliases/utils/constants.tsx b/public/pages/Aliases/utils/constants.tsx
index 643e1074e..ebed1fb94 100644
--- a/public/pages/Aliases/utils/constants.tsx
+++ b/public/pages/Aliases/utils/constants.tsx
@@ -15,5 +15,4 @@ export const DEFAULT_QUERY_PARAMS = {
   sortDirection: SortDirection.DESC,
   status: "",
   dataSourceId: "",
-  dataSourceLabel: "",
 };
diff --git a/public/pages/ComposableTemplates/utils/constants.tsx b/public/pages/ComposableTemplates/utils/constants.tsx
index 00adea8a5..6203656e5 100644
--- a/public/pages/ComposableTemplates/utils/constants.tsx
+++ b/public/pages/ComposableTemplates/utils/constants.tsx
@@ -14,5 +14,4 @@ export const DEFAULT_QUERY_PARAMS = {
   sortField: "name" as keyof ICatComposableTemplate,
   sortDirection: SortDirection.DESC,
   dataSourceId: "",
-  dataSourceLabel: "",
 };
diff --git a/public/pages/DataStreams/utils/constants.tsx b/public/pages/DataStreams/utils/constants.tsx
index bd4c3cfb5..79e195db5 100644
--- a/public/pages/DataStreams/utils/constants.tsx
+++ b/public/pages/DataStreams/utils/constants.tsx
@@ -14,7 +14,6 @@ export const DEFAULT_QUERY_PARAMS = {
   sortField: "name" as keyof DataStream,
   sortDirection: SortDirection.DESC,
   dataSourceId: "",
-  dataSourceLabel: "",
 };
 
 export const HEALTH_TO_COLOR: {
diff --git a/public/pages/Indices/containers/Indices/Indices.test.tsx b/public/pages/Indices/containers/Indices/Indices.test.tsx
index 4224efc51..6610525c9 100644
--- a/public/pages/Indices/containers/Indices/Indices.test.tsx
+++ b/public/pages/Indices/containers/Indices/Indices.test.tsx
@@ -23,7 +23,6 @@ function renderWithRouter(
   Component: React.ComponentType<any>,
   data: DataSourceMenuProperties = {
     dataSourceId: "",
-    dataSourceLabel: "",
     multiDataSourceEnabled: false,
   },
   renderFn = render
@@ -264,7 +263,6 @@ describe("re-render on data-source-id prop change", () => {
 
     const { getByText, queryByText, rerender } = renderWithRouter(Indices, {
       dataSourceId: "test_data_source_id",
-      dataSourceLabel: "test_data_source_label",
       multiDataSourceEnabled: true,
     });
 
@@ -276,7 +274,6 @@ describe("re-render on data-source-id prop change", () => {
       Indices,
       {
         dataSourceId: "test_data_source_id_2",
-        dataSourceLabel: "test_data_source_label_2",
         multiDataSourceEnabled: true,
       },
       rerender
diff --git a/public/pages/Indices/containers/Indices/Indices.tsx b/public/pages/Indices/containers/Indices/Indices.tsx
index 21c04f967..235bbddb2 100644
--- a/public/pages/Indices/containers/Indices/Indices.tsx
+++ b/public/pages/Indices/containers/Indices/Indices.tsx
@@ -131,7 +131,9 @@ export class Indices extends MDSEnabledComponent<IndicesProps, IndicesState> {
     try {
       const { indexService, history } = this.props;
       const queryObject = this.getQueryObjectFromState(this.state);
-      const queryParamsString = queryString.stringify({ ...queryObject, dataSourceLabel: this.state.dataSourceLabel });
+      const queryParamsString = queryString.stringify({
+        ...queryObject,
+      });
       history.replace({ ...this.props.location, search: queryParamsString });
 
       const getIndicesResponse = await indexService.getIndices({
diff --git a/public/pages/Main/Main.tsx b/public/pages/Main/Main.tsx
index 319567772..cf14383ce 100644
--- a/public/pages/Main/Main.tsx
+++ b/public/pages/Main/Main.tsx
@@ -60,7 +60,13 @@ import ComposableTemplates from "../ComposableTemplates";
 import CreateComposableTemplate from "../CreateComposableTemplate";
 import { DataSourceMenuContext, DataSourceMenuProperties } from "../../services/DataSourceMenuContext";
 import queryString from "query-string";
-import { DataSourceManagementPluginSetup } from "../../../../../src/plugins/data_source_management/public";
+import {
+  DataSourceManagementPluginSetup,
+  DataSourceSelectableConfig,
+  DataSourceViewConfig,
+} from "../../../../../src/plugins/data_source_management/public";
+import { DataSourceOption } from "../../../../../src/plugins/data_source_management/public/components/data_source_menu/types";
+import { ImageType } from "../../../../../src/core/common";
 
 enum Navigation {
   IndexManagement = "Index Management",
@@ -131,7 +137,11 @@ interface MainProps extends RouteComponentProps {
   dataSourceManagement: DataSourceManagementPluginSetup;
 }
 
-interface MainState extends Pick<DataSourceMenuProperties, "dataSourceId" | "dataSourceLabel"> {}
+interface MainState extends Pick<DataSourceMenuProperties, "dataSourceId"> {
+  dataSourceLabel: string;
+  dataSourceReadOnly: boolean;
+  dataSourceLoading: boolean;
+}
 
 const dataSourceEnabledPaths: string[] = [
   ROUTES.CREATE_DATA_STREAM,
@@ -171,6 +181,12 @@ export default class Main extends Component<MainProps, MainState> {
         dataSourceLabel: "",
       };
     }
+    this.state = {
+      dataSourceId: dataSourceId,
+      dataSourceLabel: dataSourceLabel,
+      dataSourceReadOnly: false,
+      dataSourceLoading: props.multiDataSourceEnabled,
+    };
   }
 
   isDataSourceEnabledForPath(path: string): boolean {
@@ -207,6 +223,21 @@ export default class Main extends Component<MainProps, MainState> {
     return services;
   }
 
+  onSelectedDataSources = (dataSources: DataSourceOption[]) => {
+    const { id = "", label = "" } = dataSources[0] || {};
+    if (this.state.dataSourceId != id || this.state.dataSourceLabel != label) {
+      this.setState({
+        dataSourceId: id,
+        dataSourceLabel: label,
+      });
+    }
+    if (this.state.dataSourceLoading) {
+      this.setState({
+        dataSourceLoading: false,
+      });
+    }
+  };
+
   render() {
     const {
       location: { pathname },
@@ -311,7 +342,9 @@ export default class Main extends Component<MainProps, MainState> {
     const { landingPage } = this.props;
 
     const ROUTE_STYLE = { padding: "25px 25px" };
-    const DataSourceMenu = this.props.dataSourceManagement?.ui?.DataSourceMenu;
+
+    const DataSourceMenu = this.props.dataSourceManagement?.ui?.getDataSourceMenu<DataSourceSelectableConfig>();
+    const DataSourceViewer = this.props.dataSourceManagement?.ui?.getDataSourceMenu<DataSourceViewConfig>();
 
     return (
       <CoreServicesConsumer>
@@ -325,11 +358,10 @@ export default class Main extends Component<MainProps, MainState> {
                       <DataSourceMenuContext.Provider
                         value={{
                           dataSourceId: this.state.dataSourceId,
-                          dataSourceLabel: this.state.dataSourceLabel,
                           multiDataSourceEnabled: this.props.multiDataSourceEnabled,
                         }}
                       >
-                        {this.props.multiDataSourceEnabled && (
+                        {this.props.multiDataSourceEnabled && DataSourceMenu && DataSourceViewer && (
                           <Switch>
                             <Route
                               path={[
@@ -342,24 +374,14 @@ export default class Main extends Component<MainProps, MainState> {
                                 ROUTES.INDEX_DETAIL,
                                 ROUTES.REINDEX,
                               ]}
-                              render={(props) => (
-                                <DataSourceMenu
-                                  appName={"Index State Management"}
+                              render={() => (
+                                <DataSourceViewer
                                   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}
+                                  componentType={"DataSourceView"}
+                                  componentConfig={{
+                                    activeOption: [{ label: this.state.dataSourceLabel, id: this.state.dataSourceId }],
+                                    fullWidth: false,
+                                  }}
                                 />
                               )}
                             />
@@ -377,447 +399,469 @@ export default class Main extends Component<MainProps, MainState> {
                               ]}
                               render={() => (
                                 <DataSourceMenu
-                                  appName={"Index State Management"}
                                   setMenuMountPoint={this.props.setActionMenu}
-                                  showDataSourceSelectable={true}
-                                  dataSourceCallBackFunc={({ id: dataSourceId, label: dataSourceLabel }) => {
-                                    this.setState({ dataSourceId, dataSourceLabel });
+                                  componentType={"DataSourceSelectable"}
+                                  componentConfig={{
+                                    savedObjects: core?.savedObjects.client,
+                                    notifications: core?.notifications,
+                                    fullWidth: false,
+                                    activeOption: [{ label: this.state.dataSourceLabel, id: this.state.dataSourceId }],
+                                    onSelectedDataSources: this.onSelectedDataSources,
                                   }}
-                                  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.CREATE_ROLLUP, ROUTES.CREATE_TRANSFORM]}
+                              render={() =>
+                                this.state.dataSourceReadOnly ? (
+                                  <DataSourceViewer
+                                    setMenuMountPoint={this.props.setActionMenu}
+                                    componentType={"DataSourceView"}
+                                    componentConfig={{
+                                      activeOption: [{ label: this.state.dataSourceLabel, id: this.state.dataSourceId }],
+                                      fullWidth: false,
+                                    }}
+                                  />
+                                ) : (
+                                  <DataSourceMenu
+                                    setMenuMountPoint={this.props.setActionMenu}
+                                    componentType={"DataSourceSelectable"}
+                                    componentConfig={{
+                                      savedObjects: core?.savedObjects.client,
+                                      notifications: core?.notifications,
+                                      fullWidth: false,
+                                      activeOption: [{ label: this.state.dataSourceLabel, id: this.state.dataSourceId }],
+                                      onSelectedDataSources: this.onSelectedDataSources,
+                                    }}
+                                  />
+                                )
+                              }
+                            />
                           </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}
-                                    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}
-                                  />
-                                )}
-                              />
-                              <Route
-                                path={ROUTES.EDIT_SNAPSHOT_POLICY}
-                                render={(props: RouteComponentProps) => (
-                                  <CreateSnapshotPolicy
-                                    {...props}
-                                    snapshotManagementService={services.snapshotManagementService}
-                                    notificationService={services.notificationService}
-                                    indexService={services.indexService}
-                                    isEdit={true}
-                                  />
-                                )}
-                              />
-                              <Route
-                                path={ROUTES.CHANGE_POLICY}
-                                render={(props: RouteComponentProps) => (
-                                  <ChangePolicy
-                                    {...props}
-                                    managedIndexService={services.managedIndexService}
-                                    indexService={services.indexService}
-                                  />
-                                )}
-                              />
-                              <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>
+                        {!this.state.dataSourceLoading && (
+                          <>
+                            <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}
+                                        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}
+                                      />
+                                    )}
+                                  />
+                                  <Route
+                                    path={ROUTES.EDIT_SNAPSHOT_POLICY}
+                                    render={(props: RouteComponentProps) => (
+                                      <CreateSnapshotPolicy
+                                        {...props}
+                                        snapshotManagementService={services.snapshotManagementService}
+                                        notificationService={services.notificationService}
+                                        indexService={services.indexService}
+                                        isEdit={true}
+                                      />
+                                    )}
+                                  />
+                                  <Route
+                                    path={ROUTES.CHANGE_POLICY}
+                                    render={(props: RouteComponentProps) => (
+                                      <ChangePolicy
+                                        {...props}
+                                        managedIndexService={services.managedIndexService}
+                                        indexService={services.indexService}
+                                      />
+                                    )}
+                                  />
+                                  <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}
+                                          dataSourceReadOnly={this.state.dataSourceReadOnly}
+                                          setDataSourceReadOnly={this.setDataSourceReadOnly}
+                                        />
+                                      </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}
+                                          dataSourceReadOnly={this.state.dataSourceReadOnly}
+                                          setDataSourceReadOnly={this.setDataSourceReadOnly}
+                                        />
+                                      </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>
+                          </>
+                        )}
                       </DataSourceMenuContext.Provider>
                     </ModalProvider>
                   )
diff --git a/public/pages/Rollups/containers/Rollups/Rollups.tsx b/public/pages/Rollups/containers/Rollups/Rollups.tsx
index 6780cb813..05f36a6be 100644
--- a/public/pages/Rollups/containers/Rollups/Rollups.tsx
+++ b/public/pages/Rollups/containers/Rollups/Rollups.tsx
@@ -110,7 +110,7 @@ export default class Rollups extends Component<RollupsProps, RollupsState> {
     try {
       const { rollupService, history } = this.props;
       const queryObject = Rollups.getQueryObjectFromState(this.state);
-      const queryParamsString = queryString.stringify(Rollups.getQueryObjectFromState(this.state));
+      const queryParamsString = queryString.stringify(queryObject);
       history.replace({ ...this.props.location, search: queryParamsString });
       const rollupJobsResponse = await rollupService.getRollups(queryObject);
       if (rollupJobsResponse.ok) {
diff --git a/public/pages/Templates/utils/constants.tsx b/public/pages/Templates/utils/constants.tsx
index 21230015d..3ff2466eb 100644
--- a/public/pages/Templates/utils/constants.tsx
+++ b/public/pages/Templates/utils/constants.tsx
@@ -14,5 +14,4 @@ export const DEFAULT_QUERY_PARAMS = {
   sortField: "name" as keyof ITemplate,
   sortDirection: SortDirection.DESC,
   dataSourceId: "",
-  dataSourceLabel: "",
 };
diff --git a/public/services/DataSourceMenuContext.ts b/public/services/DataSourceMenuContext.ts
index 3770b1100..36fd6ba3a 100644
--- a/public/services/DataSourceMenuContext.ts
+++ b/public/services/DataSourceMenuContext.ts
@@ -2,13 +2,11 @@ import { createContext } from "react";
 
 export interface DataSourceMenuProperties {
   dataSourceId: string;
-  dataSourceLabel: string;
   multiDataSourceEnabled: boolean;
 }
 
 const DataSourceMenuContext = createContext<DataSourceMenuProperties>({
   dataSourceId: "",
-  dataSourceLabel: "",
   multiDataSourceEnabled: false,
 });