Add standard ensembler config view

ui/src/router/components/configuration/components/EnsemblerConfigSection.js

@@ -1,16 +1,15 @@
 import React, { Fragment } from "react";
 import { DockerConfigViewGroup } from "./docker_config_section/DockerConfigViewGroup";
-import { FallbackRouteConfigSection } from "./standard_config_section/FallbackRouteConfigSection";
-import { TreatmentMappingConfigSection } from "./standard_config_section/TreatmentMappingConfigSection";
 import { ExperimentEngineContextProvider } from "../../../../providers/experiments/ExperimentEngineContextProvider";
 import { NopConfigViewGroup } from "./nop_config_section/NopConfigViewGroup";
 import { PyFuncConfigViewGroup } from "./pyfunc_config_section/PyFuncConfigViewGroup";
+import { StandardConfigViewGroup } from "./standard_config_section/StandardConfigViewGroup"
 import { EnsemblersContextContextProvider } from "../../../../providers/ensemblers/context";
-import { EuiFlexGroup, EuiFlexItem } from "@elastic/eui";
 
 export const EnsemblerConfigSection = ({
   projectId,
   config: {
+    routes,
     ensembler,
     experiment_engine: { type, config: experimentConfig },
   },
@@ -38,22 +37,13 @@ export const EnsemblerConfigSection = ({
     )}
     {ensembler.type === "standard" && (
       <ExperimentEngineContextProvider>
-        <EuiFlexGroup direction="column">
-          <EuiFlexItem>
-            <TreatmentMappingConfigSection
-              engine={type}
-              experiments={(experimentConfig || {}).experiments || []}
-              mappings={ensembler.standard_config.experiment_mappings}
-            />
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <FallbackRouteConfigSection
-              fallbackResponseRouteId={
-                ensembler.standard_config.fallback_response_route_id
-              }
-            />
-          </EuiFlexItem>
-        </EuiFlexGroup>
+        <StandardConfigViewGroup
+          projectId={projectId}
+          routes={routes}
+          standardConfig={ensembler.standard_config}
+          experimentConfig={(experimentConfig || {}).experiments || []}
+          type={type}
+        />
       </ExperimentEngineContextProvider>
     )}
   </Fragment>

ui/src/router/components/configuration/components/standard_config_section/StandardConfigViewGroup.js

@@ -0,0 +1,96 @@
+import React, { useContext } from "react";
+
+import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from "@elastic/eui";
+import { TreatmentMappingConfigSection } from "./TreatmentMappingConfigSection";
+import { FallbackRouteConfigSection } from "./FallbackRouteConfigSection";
+import ExperimentEngineContext from "../../../../../providers/experiments/context";
+import { Panel} from "../../../form/components/Panel";
+import StandardEnsemblerLoaderComponent from "../../../../../components/ensembler/StandardEnsemblerLoaderComponent";
+import { RemoteComponent } from "../../../../../components/remote_component/RemoteComponent";
+
+const FallbackView = ({ text }) => (
+  <EuiFlexItem grow={true}>
+    <Panel title="Route Selection">
+      <EuiSpacer size="m" />
+      {text}
+    </Panel>
+  </EuiFlexItem>
+);
+
+const StandardEnsemblerWithCustomExperimentEngineConfigView = ({
+  remoteUi,
+  projectId,
+  routes,
+  routeNamePath
+}) => {
+  // Load component from remote host
+  return (
+    <React.Suspense
+      fallback={<FallbackView text="Loading Standard Ensembler config for the selected Custom Experiment Engine" />}>
+      <StandardEnsemblerLoaderComponent
+        FallbackView={FallbackView}
+        experimentEngine={remoteUi}>
+        <RemoteComponent
+          scope={remoteUi.name}
+          name="./StandardEnsemblerConfigDetails"
+          fallback={<FallbackView text="Loading Standard Ensembler config for the selected Custom Experiment Engine" />}
+          projectId={projectId}
+          routes={routes}
+          routeNamePath={routeNamePath}
+        />
+      </StandardEnsemblerLoaderComponent>
+    </React.Suspense>
+  );
+};
+
+
+export const StandardConfigViewGroup = ({
+  projectId,
+  routes,
+  standardConfig,
+  experimentConfig,
+  type
+}) => {
+  const { getEngineProperties, isLoaded } = useContext(ExperimentEngineContext);
+
+  const engineProps = getEngineProperties(type);
+
+  return (
+    !!standardConfig && (
+      <EuiFlexGroup direction="column">
+        <>
+          {engineProps?.type === "standard" ? (
+            <EuiFlexItem>
+              <TreatmentMappingConfigSection
+                engine={type}
+                experiments={experimentConfig}
+                mappings={standardConfig.experiment_mappings}
+              />
+            </EuiFlexItem>
+          ) : isLoaded ? (
+            <EuiFlexItem>
+              <StandardEnsemblerWithCustomExperimentEngineConfigView
+                remoteUi={engineProps.custom_experiment_manager_config.remote_ui}
+                projectId={projectId}
+                routes={routes}
+                routeNamePath={standardConfig.route_name_path}
+              />
+            </EuiFlexItem>
+          ) : (
+            <EuiFlexItem>
+              <FallbackView text={"Loading ..."} />
+            </EuiFlexItem>
+          )}
+
+          <EuiFlexItem>
+            <FallbackRouteConfigSection
+              fallbackResponseRouteId={
+                standardConfig.fallback_response_route_id
+              }
+            />
+          </EuiFlexItem>
+        </>
+      </EuiFlexGroup>
+    )
+  );
+};

ui/src/router/components/form/components/ensembler_config/standard_ensembler/StandardEnsemblerFormGroup.js

@@ -14,7 +14,7 @@ import StandardEnsemblerLoaderComponent from "../../../../../../components/ensem
 
 const FallbackView = ({ text }) => (
   <EuiFlexItem grow={true}>
-    <Panel title="Route Name Path">
+    <Panel title="Route Selection">
       <EuiSpacer size="m" />
       {text}
     </Panel>
@@ -39,7 +39,7 @@ const StandardEnsemblerWithCustomExperimentEnginePanel = ({
         <RemoteComponent
           scope={remoteUi.name}
           name="./EditStandardEnsemblerConfig"
-          fallback={<FallbackView text="Loading Standard Ensembler config for the selected Custom Experiment Engine" />}
+          fallback={<FallbackView text="Loading Standard Ensembler form for the selected Custom Experiment Engine" />}
           projectId={projectId}
           routes={routes}
           routeNamePath={routeNamePath}
@@ -108,11 +108,7 @@ export const StandardEnsemblerFormGroup = ({
         ) : isLoaded ? (
           <EuiFlexItem>
             <StandardEnsemblerWithCustomExperimentEnginePanel
-              remoteUi={{
-                config: "http://localhost:3002/xp/app.config.js",
-                name: "xp",
-                url: "http://localhost:3002/xp/remoteEntry.js"
-              }}
+              remoteUi={engineProps.custom_experiment_manager_config.remote_ui}
               projectId={projectId}
               routes={routes}
               routeNamePath={standardConfig.route_name_path}