Add standard ensembler config view

caraml-dev · Sep 20, 2022 · 6a7b396 · 6a7b396
1 parent d0ffbbe
commit 6a7b396
Show file tree

Hide file tree

Showing 7 changed files with 94 additions and 19 deletions.
diff --git a/ui/craco.config.js b/ui/craco.config.js
@@ -37,7 +37,8 @@ module.exports = ({ }) => ({
                         "./EditExperimentEngineConfig": "./src/turing/components/form/EditExperimentEngineConfig",
                         "./ExperimentEngineConfigDetails": "./src/turing/components/configuration/ExperimentEngineConfigDetails",
                         "./ExperimentsLandingPage": "./src/experiments/ExperimentsLandingPage",
-                        "./EditStandardEnsemblerConfig": "./src/turing/components/form/standard_ensembler/EditStandardEnsemblerConfig"
+                        "./EditStandardEnsemblerConfig": "./src/turing/components/form/EditStandardEnsemblerConfig",
+                        "./StandardEnsemblerConfigDetails": "./src/turing/components/configuration/StandardEnsemblerConfigDetails"
                     },
                     filename: "remoteEntry.js",
                     shared: {

diff --git a/ui/src/config.js b/ui/src/config.js
@@ -55,6 +55,7 @@ export const appConfig = {
     // Padding of page template
     paddingSize: "none",
   },
+  routeNamePathPrefix: "treatment.configuration."
 };
 
 const sentryConfig = {

diff --git a/ui/src/turing/components/configuration/StandardEnsemblerConfigDetails.js b/ui/src/turing/components/configuration/StandardEnsemblerConfigDetails.js
@@ -0,0 +1,45 @@
+import React from "react";
+import { ConfigProvider, useConfig } from "../../../config";
+import { EuiFlexGroup, EuiFlexItem } from "@elastic/eui";
+import { ConfigSectionPanel } from "../../../components/config_section/ConfigSectionPanel";
+import { AffectedRoutesTable } from "../form/standard_ensembler/AffectedRoutesTable";
+import { RouteNamePathConfigGroup } from "./standard_ensembler_config/RouteNamePathConfigGroup";
+import { ProjectContextProvider } from "../../../providers/project/context";
+
+const StandardEnsemblerConfigDetailsComponent = ({ projectId, routes, routeNamePath }) => {
+  const { appConfig: { routeNamePathPrefix } } = useConfig();
+
+  return (
+    <ConfigProvider>
+      <EuiFlexGroup direction="row" wrap>
+        <EuiFlexItem grow={1} className="euiFlexItem--smallPanel">
+          <ConfigSectionPanel title="Route Selection" className="experimentSummaryPanel">
+            <RouteNamePathConfigGroup routeNamePath={routeNamePath} />
+          </ConfigSectionPanel>
+        </EuiFlexItem>
+
+        <EuiFlexItem grow={2} className="euiFlexItem--smallPanel">
+          <ConfigSectionPanel title="Affected Routes" className="affectedRoutesPanel">
+            <AffectedRoutesTable
+              projectId={projectId}
+              routes={routes}
+              treatmentConfigRouteNamePath={routeNamePath.slice(routeNamePathPrefix.length)}
+            />
+          </ConfigSectionPanel>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </ConfigProvider>
+  );
+};
+
+const StandardEnsemblerConfigDetails = (props) => {
+  return (
+    <ConfigProvider>
+      <ProjectContextProvider>
+        <StandardEnsemblerConfigDetailsComponent {...props} />
+      </ProjectContextProvider>
+    </ConfigProvider>
+  )
+};
+
+export default StandardEnsemblerConfigDetails;
diff --git a/ui/src/turing/components/configuration/standard_ensembler_config/RouteNamePathConfigGroup.js b/ui/src/turing/components/configuration/standard_ensembler_config/RouteNamePathConfigGroup.js
@@ -0,0 +1,29 @@
+import React from "react";
+
+import {
+  EuiDescriptionList,
+  EuiDescriptionListDescription,
+  EuiDescriptionListTitle,
+  EuiTextColor,
+  EuiTitle,
+} from "@elastic/eui";
+
+export const RouteNamePathConfigGroup = ({ routeNamePath }) => {
+  return (
+    <EuiTitle size="xs">
+      <EuiTextColor>
+        <EuiDescriptionList
+          textStyle="reverse"
+          type="responsiveColumn"
+          compressed>
+          <EuiDescriptionListTitle>
+            Route Name Path
+          </EuiDescriptionListTitle>
+          <EuiDescriptionListDescription>
+            {routeNamePath}
+          </EuiDescriptionListDescription>
+        </EuiDescriptionList>
+      </EuiTextColor>
+    </EuiTitle>
+  );
+};
diff --git a/..._ensembler/EditStandardEnsemblerConfig.js → ...nents/form/EditStandardEnsemblerConfig.js b/..._ensembler/EditStandardEnsemblerConfig.js → ...nents/form/EditStandardEnsemblerConfig.js
@@ -4,11 +4,11 @@ import { EuiCallOut, EuiFlexItem, EuiLoadingChart, EuiHorizontalRule } from "@el
 import { OverlayMask } from "@gojek/mlp-ui";
 
 import { Panel } from "components/panel/Panel";
-import { ConfigProvider } from "config";
+import { ConfigProvider, useConfig } from "config";
 import ProjectContext, { ProjectContextProvider } from "providers/project/context";
 import { SettingsContextProvider } from "providers/settings/context";
-import { AffectedRoutesTable } from "./AffectedRoutesTable";
-import { RouteNamePathRow } from "./RouteNamePathRow";
+import { AffectedRoutesTable } from "./standard_ensembler/AffectedRoutesTable";
+import { RouteNamePathRow } from "./standard_ensembler/RouteNamePathRow";
 
 const EditStandardEnsemblerConfigComponent = ({
   projectId,
@@ -17,6 +17,8 @@ const EditStandardEnsemblerConfigComponent = ({
   onChange,
   errors,
 }) => {
+  const { appConfig: { routeNamePathPrefix } } = useConfig();
+
   const { isProjectOnboarded, isLoaded } = useContext(ProjectContext);
   const overlayRef = useRef();
 
@@ -28,6 +30,7 @@ const EditStandardEnsemblerConfigComponent = ({
             <Panel title={"Route Selection"}>
               <RouteNamePathRow
                 routeNamePath={routeNamePath}
+                routeNamePathPrefix={routeNamePathPrefix}
                 onChange={onChange}
                 errors={errors}
               />
@@ -37,9 +40,7 @@ const EditStandardEnsemblerConfigComponent = ({
               <AffectedRoutesTable
                 projectId={projectId}
                 routes={routes}
-                routeNamePath={routeNamePath}
-                onChange={onChange}
-                errors={errors}
+                treatmentConfigRouteNamePath={routeNamePath.slice(routeNamePathPrefix.length)}
               />
             </Panel>
           </SettingsContextProvider>
@@ -50,9 +51,7 @@ const EditStandardEnsemblerConfigComponent = ({
               color={"danger"}
               iconType={"alert"}>
               <p>
-                {
-                  "Please complete onboarding to Turing experiments to configure the standard ensembler."
-                }
+                {"Please complete onboarding to Turing experiments to configure the standard ensembler."}
               </p>
             </EuiCallOut>
           </Panel>
@@ -69,7 +68,6 @@ const EditStandardEnsemblerConfigComponent = ({
 };
 
 const EditStandardEnsemblerConfig = (props) => {
-
   return (
     <ConfigProvider>
       <ProjectContextProvider>

diff --git a/ui/src/turing/components/form/standard_ensembler/AffectedRoutesTable.js b/ui/src/turing/components/form/standard_ensembler/AffectedRoutesTable.js
@@ -18,7 +18,7 @@ import { AffectedExperimentsContextMenu } from "./AffectedExperimentsContextMenu
 export const AffectedRoutesTable = ({
   projectId,
   routes,
-  routeNamePath,
+  treatmentConfigRouteNamePath,
 }) => {
   const { appConfig } = useConfig();
 
@@ -57,13 +57,13 @@ export const AffectedRoutesTable = ({
 
   const getRouteName = (config, path) => path.split('.').reduce((obj, key) => obj && obj[key], config);
 
-  // reset loaded routeToExperimentMappings if routeNamePath or routes changes
+  // reset loaded routeToExperimentMappings if treatmentConfigRouteNamePath or routes changes
   useEffect(() => {
     if (isAllExperimentsLoaded) {
       let newRouteToExperimentMappings = initRouteToExperimentMappings;
       for (let experiment of allExperiments) {
         for (let treatment of experiment.treatments) {
-          let configRouteName = getRouteName(treatment.configuration, routeNamePath);
+          let configRouteName = getRouteName(treatment.configuration, treatmentConfigRouteNamePath);
           if (typeof configRouteName === 'string' && configRouteName in newRouteToExperimentMappings) {
             newRouteToExperimentMappings[configRouteName][getExperimentStatus(experiment).label.toLowerCase()][experiment.id] = experiment;
           }
@@ -72,7 +72,7 @@ export const AffectedRoutesTable = ({
       setRouteToExperimentMappings(newRouteToExperimentMappings);
       setIsButtonPopoverOpen(initIsButtonPopoverOpen);
     }
-  }, [routeNamePath, JSON.stringify(routes), isAllExperimentsLoaded]);
+  }, [treatmentConfigRouteNamePath, JSON.stringify(routes), isAllExperimentsLoaded]);
 
   useEffect(() => {
     if (isLoaded) {

diff --git a/ui/src/turing/components/form/standard_ensembler/RouteNamePathRow.js b/ui/src/turing/components/form/standard_ensembler/RouteNamePathRow.js
@@ -5,6 +5,7 @@ import { FormLabelWithToolTip } from "@gojek/mlp-ui";
 
 export const RouteNamePathRow = ({
   routeNamePath,
+  routeNamePathPrefix,
   onChange,
   errors,
 }) => {
@@ -14,7 +15,7 @@ export const RouteNamePathRow = ({
         fullWidth
         label={
           <FormLabelWithToolTip
-            label="Route Selection *"
+            label="Route Name Path *"
             content="Specify the path in the treatment configuration where the route name for the final response can be found."
           />
         }
@@ -24,11 +25,11 @@ export const RouteNamePathRow = ({
         <EuiFieldText
           fullWidth
           placeholder="policy.route_name"
-          value={routeNamePath}
-          onChange={(e) => onChange(e.target.value)}
+          value={routeNamePath.slice(routeNamePathPrefix.length)}
+          onChange={(e) => onChange(routeNamePathPrefix + e.target.value)}
           isInvalid={!!errors}
           name="route-name-path"
-          prepend={<EuiText size={"s"}>treatment.configuration.</EuiText>}
+          prepend={<EuiText size={"s"}>{routeNamePathPrefix}</EuiText>}
         />
       </EuiFormRow>
     </EuiFlexItem>