Add tooltip and color to affected experiments menu

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

Hide file tree

Showing 2 changed files with 15 additions and 9 deletions.
diff --git a/ui/src/turing/components/form/standard_ensembler/AffectedExperimentsContextMenu.js b/ui/src/turing/components/form/standard_ensembler/AffectedExperimentsContextMenu.js
@@ -4,6 +4,8 @@ import {
   EuiContextMenu,
   EuiPopover,
   EuiButtonEmpty,
+  EuiTextColor,
+  EuiIcon
 } from "@elastic/eui";
 
 export const AffectedExperimentsContextMenu = ({
@@ -14,7 +16,6 @@ export const AffectedExperimentsContextMenu = ({
   setIsButtonPopoverOpen,
   experimentStatus
 }) => {
-  console.log(isButtonPopoverOpen);
   let numRoutes = routeToExperimentMappings[item.id] ? Object.keys(routeToExperimentMappings[item.id][experimentStatus]).length : 0;
 
   const onButtonClick = () => {
@@ -34,7 +35,7 @@ export const AffectedExperimentsContextMenu = ({
       size={"s"}
       iconType={"arrowRight"}
       iconSide={"right"}
-      color={"black"}
+      color={"primary"}
       onClick={onButtonClick}
       isDisabled={numRoutes === 0}
     >
@@ -56,13 +57,20 @@ export const AffectedExperimentsContextMenu = ({
           [
             {
               id: 0,
-              title: `Affected ${experimentStatus[0].toUpperCase() + experimentStatus.slice(1)} Experiments`,
+              title: `Linked ${experimentStatus[0].toUpperCase() + experimentStatus.slice(1)} Experiments`,
               items: Object.values(routeToExperimentMappings[item.id][experimentStatus]).map(e => (
                 {
-                  name: e.name,
-                  icon: "popout",
+                  name: (
+                    <EuiTextColor>
+                      <a href={`/turing/projects/${projectId}/experiments/${e.id}/details`}>
+                        {e.name}
+                      </a>
+                    </EuiTextColor>
+                  ),
+                  icon: <EuiIcon type={"popout"} size={"m"} color={"primary"} />,
                   size: "s",
-                  href: `/turing/projects/${projectId}/experiments/${e.id}/details`
+                  toolTipContent: "Open experiment details page",
+                  toolTipPosition: "right",
                 }
               ))
             }

diff --git a/ui/src/turing/components/form/standard_ensembler/EditStandardEnsemblerConfig.js b/ui/src/turing/components/form/standard_ensembler/EditStandardEnsemblerConfig.js
@@ -5,9 +5,7 @@ import { OverlayMask } from "@gojek/mlp-ui";
 
 import { Panel } from "components/panel/Panel";
 import { ConfigProvider } from "config";
-import ProjectContext, {
-  ProjectContextProvider,
-} from "providers/project/context";
+import ProjectContext, { ProjectContextProvider } from "providers/project/context";
 import { SettingsContextProvider } from "providers/settings/context";
 import { AffectedRoutesTable } from "./AffectedRoutesTable";
 import { RouteNamePathRow } from "./RouteNamePathRow";