add protocol for prediction_context display (#49)

* add protocol for prediction_context display * update labels for detail view * remove custom func and use lodash Co-authored-by: ningjie.lee <ningjie.lee@gojek.com>
caraml-dev · Nov 4, 2022 · d3ff430 · d3ff430
1 parent a2cf2c6
commit d3ff430
Show file tree

Hide file tree

Showing 12 changed files with 204 additions and 118 deletions.
diff --git a/ui/src/turing/components/configuration/ExperimentEngineConfigDetails.js b/ui/src/turing/components/configuration/ExperimentEngineConfigDetails.js
@@ -8,7 +8,7 @@ import { ConfigProvider } from "config";
 import { ExperimentsConfigGroup } from "./experiments_config/ExperimentsConfigGroup";
 import { VariablesConfigGroup } from "./variables_config/VariablesConfigGroup";
 
-const ExperimentEngineConfigDetails = ({ projectId, config }) => (
+const ExperimentEngineConfigDetails = ({ projectId, protocol, config }) => (
   <ConfigProvider>
     <EuiFlexGroup direction="row" wrap>
       <EuiFlexItem grow={1} className="euiFlexItem--smallPanel">
@@ -20,8 +20,12 @@ const ExperimentEngineConfigDetails = ({ projectId, config }) => (
       <EuiFlexItem grow={2} className="euiFlexItem--smallPanel">
         <ConfigSectionPanel
           title="Variables"
-          className="experimentVariablesPanel">
-          <VariablesConfigGroup variables={config.variables} />
+          className="experimentVariablesPanel"
+        >
+          <VariablesConfigGroup
+            variables={config.variables}
+            protocol={protocol}
+          />
         </ConfigSectionPanel>
       </EuiFlexItem>
     </EuiFlexGroup>

diff --git a/ui/src/turing/components/configuration/variables_config/VariablesConfigGroup.js b/ui/src/turing/components/configuration/variables_config/VariablesConfigGroup.js
@@ -1,8 +1,10 @@
 import React from "react";
 
-import { EuiBasicTable, EuiTextColor, EuiTitle } from "@elastic/eui";
+import { EuiBasicTable, EuiText, EuiTextColor, EuiTitle } from "@elastic/eui";
 
-export const VariablesConfigGroup = ({ variables }) => {
+import { mapProtocolLabel } from "turing/components/utils/helper";
+
+export const VariablesConfigGroup = ({ variables, protocol }) => {
   const columns = [
     {
       field: "name",
@@ -28,6 +30,9 @@ export const VariablesConfigGroup = ({ variables }) => {
       field: "field_source",
       name: "Source",
       width: "30%",
+      render: (value) => (
+        <EuiText size="s">{mapProtocolLabel(protocol, value)}</EuiText>
+      ),
     },
   ];
 

diff --git a/ui/src/turing/components/form/EditExperimentEngineConfig.js b/ui/src/turing/components/form/EditExperimentEngineConfig.js
@@ -14,6 +14,7 @@ import { VariablesConfigPanel } from "./variables_config/VariablesConfigPanel";
 
 const EditExperimentEngineConfigComponent = ({
   projectId,
+  protocol,
   config = {},
   onChangeHandler,
   errors = {},
@@ -41,6 +42,7 @@ const EditExperimentEngineConfigComponent = ({
             <VariablesConfigPanel
               projectId={projectId}
               variables={config.variables}
+              protocol={protocol}
               onChangeHandler={onChange("variables")}
               errors={get(errors, "variables")}
             />
@@ -50,7 +52,8 @@ const EditExperimentEngineConfigComponent = ({
             <EuiCallOut
               title="Project not onboarded to Experiments"
               color="danger"
-              iconType="alert">
+              iconType="alert"
+            >
               <p>
                 {
                   "Please complete onboarding to Turing experiments to configure the router."

diff --git a/ui/src/turing/components/form/EditStandardEnsemblerConfig.js b/ui/src/turing/components/form/EditStandardEnsemblerConfig.js
@@ -1,12 +1,20 @@
 import React, { useContext, useRef } from "react";
 
-import { EuiCallOut, EuiFlexItem, EuiLoadingChart, EuiHorizontalRule } from "@elastic/eui";
+import {
+  EuiCallOut,
+  EuiFlexItem,
+  EuiHorizontalRule,
+  EuiLoadingChart,
+} from "@elastic/eui";
 import { OverlayMask } from "@gojek/mlp-ui";
 
 import { Panel } from "components/panel/Panel";
 import { ConfigProvider, useConfig } from "config";
-import ProjectContext, { ProjectContextProvider } from "providers/project/context";
 import { ExperimentContextProvider } from "providers/experiment/context";
+import ProjectContext, {
+  ProjectContextProvider,
+} from "providers/project/context";
+
 import { LinkedRoutesTable } from "./standard_ensembler/LinkedRoutesTable";
 import { RouteNamePathRow } from "./standard_ensembler/RouteNamePathRow";
 
@@ -17,7 +25,9 @@ const EditStandardEnsemblerConfigComponent = ({
   onChange,
   errors,
 }) => {
-  const { appConfig: { routeNamePathPrefix } } = useConfig();
+  const {
+    appConfig: { routeNamePathPrefix },
+  } = useConfig();
 
   const { isProjectOnboarded, isLoaded } = useContext(ProjectContext);
   const overlayRef = useRef();
@@ -40,7 +50,9 @@ const EditStandardEnsemblerConfigComponent = ({
               <LinkedRoutesTable
                 projectId={projectId}
                 routes={routes}
-                treatmentConfigRouteNamePath={routeNamePath.slice(routeNamePathPrefix.length)}
+                treatmentConfigRouteNamePath={routeNamePath.slice(
+                  routeNamePathPrefix.length
+                )}
               />
             </ExperimentContextProvider>
           </Panel>
@@ -49,9 +61,12 @@ const EditStandardEnsemblerConfigComponent = ({
             <EuiCallOut
               title={"Project not onboarded to Experiments"}
               color={"danger"}
-              iconType={"alert"}>
+              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>
@@ -74,7 +89,7 @@ const EditStandardEnsemblerConfig = (props) => {
         <EditStandardEnsemblerConfigComponent {...props} />
       </ProjectContextProvider>
     </ConfigProvider>
-  )
+  );
 };
 
 export default EditStandardEnsemblerConfig;
diff --git a/ui/src/turing/components/form/standard_ensembler/LinkedExperimentsContextMenu.js b/ui/src/turing/components/form/standard_ensembler/LinkedExperimentsContextMenu.js
@@ -1,18 +1,18 @@
 import React from "react";
 
 import {
-  EuiContextMenu,
-  EuiPopover,
   EuiButtonEmpty,
+  EuiContextMenu,
+  EuiIcon,
   EuiLink,
-  EuiIcon
+  EuiPopover,
 } from "@elastic/eui";
 import { useToggle } from "@gojek/mlp-ui";
 
 export const LinkedExperimentsContextMenu = ({
   projectId,
   linkedExperiments,
-  experimentStatus
+  experimentStatus,
 }) => {
   const [isPopoverOpen, togglePopover] = useToggle();
 
@@ -41,28 +41,32 @@ export const LinkedExperimentsContextMenu = ({
     >
       <EuiContextMenu
         initialPanelId={0}
-        panels={
-          [
-            {
-              id: 0,
-              title: `Linked ${experimentStatus[0].toUpperCase() + experimentStatus.slice(1)} Experiments`,
-              items: Object.values(linkedExperiments[experimentStatus]).map(e => (
-                {
-                  name: (
-                    <EuiLink href={`/turing/projects/${projectId}/experiments/${e.id}/details`} external={false} target={"_blank"}>
-                      {e.name}
-                    </EuiLink>
-                  ),
-                  icon: <EuiIcon type={"popout"} size={"m"} color={"primary"} />,
-                  size: "s",
-                  toolTipContent: "Open experiment details page",
-                  toolTipPosition: "right",
-                }
-              ))
-            }
-          ]
-        }
+        panels={[
+          {
+            id: 0,
+            title: `Linked ${
+              experimentStatus[0].toUpperCase() + experimentStatus.slice(1)
+            } Experiments`,
+            items: Object.values(linkedExperiments[experimentStatus]).map(
+              (e) => ({
+                name: (
+                  <EuiLink
+                    href={`/turing/projects/${projectId}/experiments/${e.id}/details`}
+                    external={false}
+                    target={"_blank"}
+                  >
+                    {e.name}
+                  </EuiLink>
+                ),
+                icon: <EuiIcon type={"popout"} size={"m"} color={"primary"} />,
+                size: "s",
+                toolTipContent: "Open experiment details page",
+                toolTipPosition: "right",
+              })
+            ),
+          },
+        ]}
       />
     </EuiPopover>
   );
-};
+};
diff --git a/ui/src/turing/components/form/standard_ensembler/LinkedRoutesTable.js b/ui/src/turing/components/form/standard_ensembler/LinkedRoutesTable.js
@@ -2,10 +2,10 @@ import React, { useContext, useEffect, useState } from "react";
 
 import {
   EuiFlexItem,
+  EuiIcon,
+  EuiInMemoryTable,
   EuiLoadingChart,
   EuiTextAlign,
-  EuiInMemoryTable,
-  EuiIcon,
   EuiTextColor,
 } from "@elastic/eui";
 
@@ -19,13 +19,19 @@ export const LinkedRoutesTable = ({
 }) => {
   const { scheduledAndRunningExperiments, isLoaded } = useContext(ExperimentContext)
 
-  const [routeToExperimentMappings, setRouteToExperimentMappings] = useState(routes.reduce((m, r) => {m[r.id] = {running: {}, scheduled: {}}; return m}, {}));
+  const [routeToExperimentMappings, setRouteToExperimentMappings] = useState(
+    routes.reduce((m, r) => {
+      m[r.id] = { running: {}, scheduled: {} };
+      return m;
+    }, {})
+  );
 
-  const getRouteName = (config, path) => path.split('.').reduce((obj, key) => obj && obj[key], config);
+  const getRouteName = (config, path) =>
+    path.split(".").reduce((obj, key) => obj && obj[key], config);
 
   // this stringified value of routes below allows the React effect below to mimic a deep comparison when changes to the
   // array routes are made
-  const stringifiedRoutes = routes.map(e => e.id).join();
+  const stringifiedRoutes = routes.map((e) => e.id).join();
 
   // reset loaded routeToExperimentMappings if treatmentConfigRouteNamePath or routes changes
   useEffect(() => {
@@ -48,9 +54,11 @@ export const LinkedRoutesTable = ({
       field: "id",
       width: "5px",
       render: (id) => {
-        const isAssigned = routeToExperimentMappings[id] ?
-          Object.keys(routeToExperimentMappings[id].running).length +
-          Object.keys(routeToExperimentMappings[id].scheduled).length > 0 : false;
+        const isAssigned = routeToExperimentMappings[id]
+          ? Object.keys(routeToExperimentMappings[id].running).length +
+              Object.keys(routeToExperimentMappings[id].scheduled).length >
+            0
+          : false;
         return (
           <EuiIcon
             type={isAssigned ? "check" : "cross"}
@@ -66,35 +74,43 @@ export const LinkedRoutesTable = ({
       width: "20%",
       name: "Route Name",
       render: (id) => {
-        const isAssigned = routeToExperimentMappings[id] ?
-          Object.keys(routeToExperimentMappings[id].running).length +
-          Object.keys(routeToExperimentMappings[id].scheduled).length > 0 : false;
-        return (<EuiTextColor color={isAssigned ? "success" : "danger"}>{id}</EuiTextColor>);
+        const isAssigned = routeToExperimentMappings[id]
+          ? Object.keys(routeToExperimentMappings[id].running).length +
+              Object.keys(routeToExperimentMappings[id].scheduled).length >
+            0
+          : false;
+        return (
+          <EuiTextColor color={isAssigned ? "success" : "danger"}>
+            {id}
+          </EuiTextColor>
+        );
       },
     },
     {
       field: "id",
       width: "35%",
       name: "Running Experiments",
-      render: (id) => routeToExperimentMappings[id] && (
-        <LinkedExperimentsContextMenu
-          projectId={projectId}
-          linkedExperiments={routeToExperimentMappings[id]}
-          experimentStatus={"running"}
-        />
-      ),
+      render: (id) =>
+        routeToExperimentMappings[id] && (
+          <LinkedExperimentsContextMenu
+            projectId={projectId}
+            linkedExperiments={routeToExperimentMappings[id]}
+            experimentStatus={"running"}
+          />
+        ),
     },
     {
       field: "id",
       width: "35%",
       name: "Scheduled Experiments",
-      render: (id) => routeToExperimentMappings[id] && (
-        <LinkedExperimentsContextMenu
-          projectId={projectId}
-          linkedExperiments={routeToExperimentMappings[id]}
-          experimentStatus={"scheduled"}
-        />
-      )
+      render: (id) =>
+        routeToExperimentMappings[id] && (
+          <LinkedExperimentsContextMenu
+            projectId={projectId}
+            linkedExperiments={routeToExperimentMappings[id]}
+            experimentStatus={"scheduled"}
+          />
+        ),
     },
   ];
 
@@ -107,9 +123,9 @@ export const LinkedRoutesTable = ({
         isSelectable={false}
       />
     </EuiFlexItem>
-    ) : (
-      <EuiTextAlign textAlign={"center"}>
-        <EuiLoadingChart size={"xl"} mono />
-      </EuiTextAlign>
-    );
+  ) : (
+    <EuiTextAlign textAlign={"center"}>
+      <EuiLoadingChart size={"xl"} mono />
+    </EuiTextAlign>
+  );
 };