@openshift-assisted/ui-lib
Version:
React component library for the Assisted Installer UI
60 lines • 6.39 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importDefault(require("react"));
const react_core_1 = require("@patternfly/react-core");
const formik_1 = require("formik");
const common_1 = require("../../../../common");
const OcmFormFields_1 = require("../../ui/OcmFormFields");
const getNetworkLabelSuffix = (index, isDualStack) => {
return isDualStack ? ` (${index === 0 ? 'IPv4' : 'IPv6'})` : '';
};
const IPv4PrefixPopoverText = 'For example, if Cluster Network Host Prefix is set to 23, then each node is assigned a /23 subnet out of the given cidr (clusterNetworkCIDR), which allows for 510 (2^(32 - 23) - 2) pod IPs addresses.';
const IPv6PrefixPopoverText = 'For example, if Cluster Network Host Prefix is set to 116, then each node is assigned a /116 subnet out of the given cidr (clusterNetworkCIDR), which allows for 4,094 (2^(128 - 116) - 2) pod IPs addresses.';
const ClusterPrefixHelperText = 'Defines how big the subnets for each individual node are out of the given CIDR. Must enter a whole number.';
const clusterCidrHelperText = 'The block must not overlap with existing physical networks. To access the Pods from an external network, configure load balancers and routers to manage the traffic.';
const serviceCidrHelperText = 'Enter only 1 IP address pool. If you need to access the services from an external network, configure load balancers and routers to manage the traffic.';
const AdvancedNetworkFields = () => {
const { values, errors } = (0, formik_1.useFormikContext)();
const isDualStack = values.stackType === common_1.DUAL_STACK;
const clusterNetworkCidrPrefix = (index) => parseInt(((values.clusterNetworks && values.clusterNetworks[index].cidr) || '').split('/')[1]) || 1;
const isSubnetIPv6 = (index) => (isDualStack ? !!index : false);
const clusterNetworkHostPrefixPopoverText = (index) => (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("p", null,
"The subnet prefix length to assign to each individual node.",
' ',
isSubnetIPv6(index) ? IPv6PrefixPopoverText : IPv4PrefixPopoverText),
react_1.default.createElement("p", null, "If you are required to provide access to nodes from an external network, configure load balancers and routers to manage the traffic.")));
return (react_1.default.createElement(react_core_1.Grid, { hasGutter: true, className: "pf-v5-u-ml-lg" },
react_1.default.createElement(formik_1.FieldArray, { name: "clusterNetworks" }, () => {
var _a;
return (react_1.default.createElement(react_core_1.FormGroup, { fieldId: "clusterNetworks", labelInfo: isDualStack && 'Primary' }, (_a = values.clusterNetworks) === null || _a === void 0 ? void 0 : _a.map((_, index) => {
const networkSuffix = getNetworkLabelSuffix(index, isDualStack);
return (react_1.default.createElement(react_core_1.Stack, { key: index },
react_1.default.createElement(react_core_1.StackItem, { className: 'network-field-group pf-v5-u-pb-md' },
react_1.default.createElement(OcmFormFields_1.OcmInputField, { name: `clusterNetworks.${index}.cidr`, label: react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("span", null, `Cluster network CIDR${networkSuffix} `),
react_1.default.createElement(common_1.PopoverIcon, { bodyContent: 'IP address blocks from which Pod IPs are allocated.' })), helperText: clusterCidrHelperText, isRequired: true, labelInfo: index === 0 && isDualStack ? 'Primary' : '' })),
react_1.default.createElement(react_core_1.StackItem, { className: 'network-field-group pf-v5-u-pb-md' },
react_1.default.createElement(OcmFormFields_1.OcmInputField, { name: `clusterNetworks.${index}.hostPrefix`, label: react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("span", null,
"Cluster network host prefix",
networkSuffix,
" "),
react_1.default.createElement(common_1.PopoverIcon, { bodyContent: clusterNetworkHostPrefixPopoverText(index), minWidth: "30rem" })), type: react_core_1.TextInputTypes.number, min: clusterNetworkCidrPrefix(index), max: isSubnetIPv6(index)
? common_1.PREFIX_MAX_RESTRICTION.IPv6
: common_1.PREFIX_MAX_RESTRICTION.IPv4, helperText: ClusterPrefixHelperText, isRequired: true }))));
})));
}),
typeof errors.clusterNetworks === 'string' && (react_1.default.createElement(react_core_1.Alert, { variant: react_core_1.AlertVariant.warning, title: errors.clusterNetworks, isInline: true })),
react_1.default.createElement(formik_1.FieldArray, { name: "serviceNetworks" }, () => {
var _a;
return (react_1.default.createElement(react_core_1.FormGroup, { fieldId: "serviceNetworks", labelInfo: isDualStack && 'Primary' }, (_a = values.serviceNetworks) === null || _a === void 0 ? void 0 : _a.map((_, index) => (react_1.default.createElement(react_core_1.StackItem, { key: index, className: 'network-field-group pf-v5-u-pb-md' },
react_1.default.createElement(OcmFormFields_1.OcmInputField, { name: `serviceNetworks.${index}.cidr`, label: react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("span", null, `Service network CIDR${getNetworkLabelSuffix(index, isDualStack)} `),
react_1.default.createElement(common_1.PopoverIcon, { bodyContent: 'The IP address pool used for service IP addresses.' })), helperText: serviceCidrHelperText, isRequired: true, labelInfo: index === 0 && isDualStack ? 'Primary' : '' }))))));
}),
typeof errors.serviceNetworks === 'string' && (react_1.default.createElement(react_core_1.Alert, { variant: react_core_1.AlertVariant.warning, title: errors.serviceNetworks, isInline: true }))));
};
exports.default = AdvancedNetworkFields;
//# sourceMappingURL=AdvancedNetworkFields.js.map