-
Notifications
You must be signed in to change notification settings - Fork 8
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add standard ensembler UI #37
Changes from 14 commits
5feb2ac
b8cbf82
d0b8b0a
2f3ea20
b8365fb
bb4ace6
a7de94a
7429a77
4289b85
9e56ccb
2762412
6e5cddf
9dd11c7
968fdde
0017478
23ad1a4
0dd528c
a71f04e
7dc089e
73d673f
6234f6d
caa20c7
7005210
584c0e3
fd79dbf
6f82e3e
5f8d17f
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 "../form/standard_ensembler/LinkedRoutesTable"; | ||
terryyylim marked this conversation as resolved.
Show resolved
Hide resolved
|
||
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; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
terryyylim marked this conversation as resolved.
Show resolved
Hide resolved
|
||
<EuiDescriptionList | ||
textStyle="reverse" | ||
type="responsiveColumn" | ||
compressed> | ||
terryyylim marked this conversation as resolved.
Show resolved
Hide resolved
|
||
<EuiDescriptionListTitle> | ||
Route Name Path | ||
</EuiDescriptionListTitle> | ||
<EuiDescriptionListDescription> | ||
{routeNamePath} | ||
</EuiDescriptionListDescription> | ||
</EuiDescriptionList> | ||
</EuiTextColor> | ||
</EuiTitle> | ||
); | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,86 @@ | ||
import React from "react"; | ||
|
||
import { | ||
EuiContextMenu, | ||
EuiPopover, | ||
EuiButtonEmpty, | ||
EuiTextColor, | ||
EuiIcon | ||
} from "@elastic/eui"; | ||
|
||
export const LinkedExperimentsContextMenu = ({ | ||
item, | ||
projectId, | ||
routeToExperimentMappings, | ||
isButtonPopoverOpen, | ||
setIsButtonPopoverOpen, | ||
experimentStatus | ||
}) => { | ||
let numRoutes = routeToExperimentMappings[item.id] ? Object.keys(routeToExperimentMappings[item.id][experimentStatus]).length : 0; | ||
terryyylim marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
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={numRoutes === 0} | ||
> | ||
{numRoutes} | ||
</EuiButtonEmpty> | ||
); | ||
|
||
return isButtonPopoverOpen[item.id] ? ( | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Let's use There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Thanks for catching that! I've just edited it! There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Should be addressed by this suggestion - #37 (comment). |
||
<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: ( | ||
<EuiTextColor> | ||
terryyylim marked this conversation as resolved.
Show resolved
Hide resolved
|
||
<a | ||
href={`/turing/projects/${projectId}/experiments/${e.id}/details`} | ||
target={"_blank"} | ||
rel="noreferrer" | ||
> | ||
{e.name} | ||
</a> | ||
</EuiTextColor> | ||
), | ||
icon: <EuiIcon type={"popout"} size={"m"} color={"primary"} />, | ||
size: "s", | ||
toolTipContent: "Open experiment details page", | ||
toolTipPosition: "right", | ||
} | ||
)) | ||
} | ||
] | ||
} | ||
/> | ||
</EuiPopover> | ||
) : null; | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fixed this colour which is no longer supported as part of the EUI colour palette; it now needs to be specified manually with a colour hex.