diff --git a/ui/craco.config.js b/ui/craco.config.js index e87bd19f..3cf41d3a 100644 --- 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 index cd1de73a..3d7ce133 100644 --- 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 new file mode 100644 index 00000000..ea5969ec --- /dev/null +++ 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 ( + + + + + + + + + + + + + + + + ); +}; + +const StandardEnsemblerConfigDetails = (props) => { + return ( + + + + + + ) +}; + +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 new file mode 100644 index 00000000..fb1017c9 --- /dev/null +++ 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 ( + + + + + Route Name Path + + + {routeNamePath} + + + + + ); +}; diff --git a/ui/src/turing/components/form/standard_ensembler/EditStandardEnsemblerConfig.js b/ui/src/turing/components/form/EditStandardEnsemblerConfig.js similarity index 79% rename from ui/src/turing/components/form/standard_ensembler/EditStandardEnsemblerConfig.js rename to ui/src/turing/components/form/EditStandardEnsemblerConfig.js index c58e72b4..20215ac7 100644 --- a/ui/src/turing/components/form/standard_ensembler/EditStandardEnsemblerConfig.js +++ b/ui/src/turing/components/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 = ({ @@ -37,9 +40,7 @@ const EditStandardEnsemblerConfigComponent = ({ @@ -50,9 +51,7 @@ const EditStandardEnsemblerConfigComponent = ({ color={"danger"} iconType={"alert"}>

- { - "Please complete onboarding to Turing experiments to configure the standard ensembler." - } + {"Please complete onboarding to Turing experiments to configure the standard ensembler."}

@@ -69,7 +68,6 @@ const EditStandardEnsemblerConfigComponent = ({ }; const EditStandardEnsemblerConfig = (props) => { - return ( diff --git a/ui/src/turing/components/form/standard_ensembler/AffectedRoutesTable.js b/ui/src/turing/components/form/standard_ensembler/AffectedRoutesTable.js index 5869fb25..66e727b0 100644 --- 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 index 9d7bfc7f..74a79b03 100644 --- 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={ } @@ -24,11 +25,11 @@ export const RouteNamePathRow = ({ onChange(e.target.value)} + value={routeNamePath.slice(routeNamePathPrefix.length)} + onChange={(e) => onChange(routeNamePathPrefix + e.target.value)} isInvalid={!!errors} name="route-name-path" - prepend={treatment.configuration.} + prepend={{routeNamePathPrefix}} />