Add standard ensembler UI

ui/craco.config.js

@@ -37,6 +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/EditStandardEnsemblerConfig",
+                        "./StandardEnsemblerConfigDetails": "./src/turing/components/configuration/StandardEnsemblerConfigDetails"
                     },
                     filename: "remoteEntry.js",
                     shared: {

ui/src/config.js

@@ -55,6 +55,7 @@ export const appConfig = {
     // Padding of page template
     paddingSize: "none",
   },
+  routeNamePathPrefix: "treatment.configuration."
 };
 
 const sentryConfig = {

ui/src/services/experiment/ExperimentStatus.js

@@ -13,7 +13,7 @@ export const getExperimentStatus = (experiment) => {
   const statusMapping = {
     Deactivated: {
       label: "Deactivated",
-      color: "subdued",
+      color: "default",
       iconType: "cross",
     },
     Completed: {

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 { LinkedRoutesTable } from "turing/components/form/standard_ensembler/LinkedRoutesTable";
+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="Linked Routes" className="linkedRoutesPanel">
+            <LinkedRoutesTable
+              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;

ui/src/turing/components/configuration/standard_ensembler_config/RouteNamePathConfigGroup.js

@@ -0,0 +1,26 @@
+import React from "react";
+
+import {
+  EuiDescriptionList,
+  EuiTitle,
+} from "@elastic/eui";
+
+export const RouteNamePathConfigGroup = ({ routeNamePath }) => {
+  return (
+    <EuiTitle size="xs">
+      <EuiDescriptionList
+        compressed
+        textStyle="reverse"
+        type="responsiveColumn"
+        listItems={[
+          {
+            title: "Route Name Path",
+            description: routeNamePath,
+          },
+        ]}
+        titleProps={{ style: { width: "30%" } }}
+        descriptionProps={{ style: { width: "70%" } }}
+      />
+    </EuiTitle>
+  );
+};

ui/src/turing/components/form/EditStandardEnsemblerConfig.js

@@ -0,0 +1,80 @@
+import React, { useContext, useRef } from "react";
+
+import { EuiCallOut, EuiFlexItem, EuiLoadingChart, EuiHorizontalRule } 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 { SettingsContextProvider } from "providers/settings/context";
+import { LinkedRoutesTable } from "./standard_ensembler/LinkedRoutesTable";
+import { RouteNamePathRow } from "./standard_ensembler/RouteNamePathRow";
+
+const EditStandardEnsemblerConfigComponent = ({
+  projectId,
+  routes,
+  routeNamePath = "",
+  onChange,
+  errors,
+}) => {
+  const { appConfig: { routeNamePathPrefix } } = useConfig();
+
+  const { isProjectOnboarded, isLoaded } = useContext(ProjectContext);
+  const overlayRef = useRef();
+
+  return (
+    <EuiFlexItem grow={false}>
+      {isLoaded ? (
+        isProjectOnboarded(projectId) ? (
+          <SettingsContextProvider projectId={projectId}>
+            <Panel title={"Route Selection"}>
+              <RouteNamePathRow
+                routeNamePath={routeNamePath}
+                routeNamePathPrefix={routeNamePathPrefix}
+                onChange={onChange}
+                errors={errors}
+              />
+
+              <EuiHorizontalRule />
+
+              <LinkedRoutesTable
+                projectId={projectId}
+                routes={routes}
+                treatmentConfigRouteNamePath={routeNamePath.slice(routeNamePathPrefix.length)}
+              />
+            </Panel>
+          </SettingsContextProvider>
+        ) : (
+          <Panel title={"Configuration"}>
+            <EuiCallOut
+              title={"Project not onboarded to Experiments"}
+              color={"danger"}
+              iconType={"alert"}>
+              <p>
+                {"Please complete onboarding to Turing experiments to configure the standard ensembler."}
+              </p>
+            </EuiCallOut>
+          </Panel>
+        )
+      ) : (
+        <div ref={overlayRef}>
+          <OverlayMask parentRef={overlayRef} opacity={0.4}>
+            <EuiLoadingChart size={"xl"} mono />
+          </OverlayMask>
+        </div>
+      )}
+    </EuiFlexItem>
+  );
+};
+
+const EditStandardEnsemblerConfig = (props) => {
+  return (
+    <ConfigProvider>
+      <ProjectContextProvider>
+        <EditStandardEnsemblerConfigComponent {...props} />
+      </ProjectContextProvider>
+    </ConfigProvider>
+  )
+};
+
+export default EditStandardEnsemblerConfig;

ui/src/turing/components/form/standard_ensembler/LinkedExperimentsContextMenu.js

@@ -0,0 +1,80 @@
+import React from "react";
+
+import {
+  EuiContextMenu,
+  EuiPopover,
+  EuiButtonEmpty,
+  EuiLink,
+  EuiIcon
+} from "@elastic/eui";
+
+export const LinkedExperimentsContextMenu = ({
+  item,
+  projectId,
+  routeToExperimentMappings,
+  isButtonPopoverOpen,
+  setIsButtonPopoverOpen,
+  experimentStatus
+}) => {
+  let numExperiments = routeToExperimentMappings[item.id] ? Object.keys(routeToExperimentMappings[item.id][experimentStatus]).length : 0;
+
+  const onButtonClick = () => {
+    let newIsButtonPopoverOpen = { ...isButtonPopoverOpen };
+    newIsButtonPopoverOpen[item.id][experimentStatus] = !isButtonPopoverOpen[item.id][experimentStatus];
+    setIsButtonPopoverOpen(newIsButtonPopoverOpen);
+  };
+
+  const closePopover = () => {
+    let newIsButtonPopoverOpen = { ...isButtonPopoverOpen };
+    newIsButtonPopoverOpen[item.id][experimentStatus] = false;
+    setIsButtonPopoverOpen(newIsButtonPopoverOpen);
+  };
+
+  const button = (
+    <EuiButtonEmpty
+      size={"s"}
+      iconType={"arrowRight"}
+      iconSide={"right"}
+      color={"primary"}
+      onClick={onButtonClick}
+      isDisabled={numExperiments === 0}
+    >
+      {numExperiments}
+    </EuiButtonEmpty>
+  );
+
+  return isButtonPopoverOpen[item.id] && (
+    <EuiPopover
+      button={button}
+      isOpen={isButtonPopoverOpen[item.id][experimentStatus]}
+      closePopover={closePopover}
+      panelPaddingSize={"none"}
+      anchorPosition={"rightCenter"}
+    >
+      <EuiContextMenu
+        initialPanelId={0}
+        panels={
+          [
+            {
+              id: 0,
+              title: `Linked ${experimentStatus[0].toUpperCase() + experimentStatus.slice(1)} Experiments`,
+              items: Object.values(routeToExperimentMappings[item.id][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>
+  );
+};