Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 | 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 11x 5x 5x 5x 4x 4x 1x 1x 3x 3x 1x 1x 2x | import React from 'react';
import { Scheduler } from '@jupyterlab/scheduler';
import Checkbox from '@mui/material/Checkbox';
import InfoIcon from '@mui/icons-material/Info';
import { Tooltip } from '../../../../components/tooltip/Tooltip';
import { FormState } from '../..';
import { i18nStrings } from '../../../../constants/common';
import { Link, LinkTarget } from '../../../../components/link';
import * as Styles from '../../../styles';
const vpcErrorStrings = i18nStrings.ScheduleNoteBook.MainPanel.ErrorMessages.VPCErrors;
const labelStrings = i18nStrings.ScheduleNoteBook.MainPanel.AdvancedOptions;
const tooltipsStrings = i18nStrings.ScheduleNoteBook.MainPanel.Tooltips;
const toolTipLink = 'https://docs.aws.amazon.com/sagemaker/latest/dg/create-notebook-auto-execution-advanced.html';
export interface VpcProps {
isChecked: boolean;
formState: FormState;
initialSecurityGroups: string[];
initialSubnets: string[];
availableSubnets: string[];
formErrors: Scheduler.ErrorsType;
setChecked: (checked: boolean) => void;
setFormState: (formState: FormState) => void;
setFormErrors: (formErrors: Scheduler.ErrorsType) => void;
['data-testid']?: string;
}
const tooltipArea = (
<div>
<span className={Styles.TooltipTextContainer}> {tooltipsStrings.VPCTooltip} </span>
<Link href={toolTipLink} target={LinkTarget.External}>
<p className={Styles.TooltipLink}>{i18nStrings.ScheduleNoteBook.MainPanel.Tooltips.LearnMore}</p>
</Link>
</div>
);
const VpcCheckbox: React.FunctionComponent<VpcProps> = ({
isChecked,
formState,
formErrors,
initialSecurityGroups,
initialSubnets,
availableSubnets,
setFormErrors,
setChecked,
setFormState,
...rest
}) => {
return (
<div className={Styles.TooltipCheckBoxContainer}>
<Checkbox
name={'vpc-check-box'}
className={Styles.Checkbox}
color={'primary'}
checked={isChecked}
onChange={e => {
const checked = (e.target as HTMLInputElement).checked;
setChecked(checked);
if (checked) {
setFormState({
...formState,
vpc_security_group_ids: initialSecurityGroups,
vpc_subnets: initialSubnets
});
if (initialSubnets.length === 0 && availableSubnets.length > 0) {
setFormErrors({
...formErrors,
subnetError: `${vpcErrorStrings.RequiresPrivateSubnet} ${vpcErrorStrings.NoPrivateSubnetsInSageMakerDomain}. ${vpcErrorStrings.YouMayChooseOtherSubnets}`
});
return;
}
if (availableSubnets.length === 0) {
setFormErrors({
...formErrors,
subnetError: `${vpcErrorStrings.RequiresPrivateSubnet} ${vpcErrorStrings.NoPrivateSubnetsInSageMakerDomain}`
});
}
} else {
setFormState({
...formState,
vpc_security_group_ids: [],
vpc_subnets: []
});
setFormErrors({
...formErrors,
subnetError: '',
securityGroupError: ''
});
}
}}
{...rest}
/>
<label>{labelStrings.useVPC}</label>
<Tooltip
classes={{
popperInteractive: Styles.PopperInteractive,
}}
title={tooltipArea}
>
<InfoIcon fontSize="small" />
</Tooltip>
</div>
);
};
export { VpcCheckbox };
|