@openshift-assisted/ui-lib
Version:
React component library for the Assisted Installer UI
83 lines • 7.03 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ClusterDetailsFormFields = exports.BaseDnsHelperText = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_core_1 = require("@patternfly/react-core");
const formik_1 = require("formik");
const common_1 = require("../../../common");
const StaticTextField_1 = require("../../../common/components/ui/StaticTextField");
const clusters_1 = require("../../../common/components/clusters");
const formik_2 = require("../../../common/components/ui/formik");
const use_translation_wrapper_1 = require("../../../common/hooks/use-translation-wrapper");
const CpuArchitectureDropdown_1 = tslib_1.__importDefault(require("../common/CpuArchitectureDropdown"));
const ControlPlaneNodesDropdown_1 = tslib_1.__importDefault(require("../../../common/components/clusterConfiguration/ControlPlaneNodesDropdown"));
const helpers_1 = require("../helpers");
const BaseDnsHelperText = ({ name, baseDnsDomain, }) => {
const { t } = (0, use_translation_wrapper_1.useTranslation)();
return (React.createElement(React.Fragment, null,
t('ai:All DNS records must be subdomains of this base and include the cluster name. This cannot be changed after cluster installation. The full cluster address will be:'),
' ',
React.createElement("br", null),
React.createElement("strong", null,
name || '[Cluster Name]',
".",
baseDnsDomain || '[example.com]')));
};
exports.BaseDnsHelperText = BaseDnsHelperText;
const ClusterDetailsFormFields = ({ isEditFlow, versions, allVersions, forceOpenshiftVersion, extensionAfter, isNutanix, cpuArchitectures, allowHighlyAvailable, }) => {
const { t } = (0, use_translation_wrapper_1.useTranslation)();
const nameInputRef = React.useRef();
const [openshiftVersionModalOpen, setOpenshiftVersionModalOpen] = React.useState(false);
const { values, setFieldValue } = (0, formik_1.useFormikContext)();
const { name, baseDnsDomain } = values;
React.useEffect(() => {
if (!versions.length && !values.openshiftVersion) {
const fallbackOpenShiftVersion = allVersions.find((version) => version.default);
setFieldValue('customOpenshiftSelect', fallbackOpenShiftVersion);
setFieldValue('openshiftVersion', fallbackOpenShiftVersion === null || fallbackOpenShiftVersion === void 0 ? void 0 : fallbackOpenShiftVersion.value);
setFieldValue('networkType', (0, helpers_1.getNetworkType)(fallbackOpenShiftVersion));
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
React.useEffect(() => {
var _a;
(_a = nameInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
}, []);
const selectOptions = React.useMemo(() => versions.map((version) => ({
label: version.label,
value: version.value,
})), [versions]);
const additionalSelectOptions = React.useMemo(() => {
if (values.customOpenshiftSelect &&
!selectOptions.some((option) => { var _a; return option.value === ((_a = values.customOpenshiftSelect) === null || _a === void 0 ? void 0 : _a.value); })) {
return [
{
value: values.customOpenshiftSelect.value,
label: values.customOpenshiftSelect.label,
},
];
}
return [];
}, [selectOptions, values.customOpenshiftSelect]);
const isDiskEncryptionEnabled = values.enableDiskEncryptionOnMasters || values.enableDiskEncryptionOnWorkers;
return (React.createElement(react_core_1.Form, { id: "wizard-cluster-details__form" },
isEditFlow ? (React.createElement(StaticTextField_1.StaticTextField, { name: "name", label: t('ai:Cluster name'), isRequired: true }, name)) : (React.createElement(formik_2.RichInputField, { ref: nameInputRef, label: t('ai:Cluster name'), name: "name", placeholder: t('ai:Enter cluster name'), richValidationMessages: (0, formik_2.acmClusterNameValidationMessages)(t), isRequired: true })),
(extensionAfter === null || extensionAfter === void 0 ? void 0 : extensionAfter['name']) && extensionAfter['name'],
isEditFlow ? (React.createElement(StaticTextField_1.StaticTextField, { name: "baseDnsDomain", label: t('ai:Base domain'), helperText: React.createElement(exports.BaseDnsHelperText, { name: name, baseDnsDomain: baseDnsDomain }), isRequired: true }, baseDnsDomain)) : (React.createElement(formik_2.InputField, { label: t('ai:Base domain'), name: "baseDnsDomain", helperText: React.createElement(exports.BaseDnsHelperText, { name: name, baseDnsDomain: baseDnsDomain }), placeholder: "example.com", isRequired: true })),
forceOpenshiftVersion ? (React.createElement(StaticTextField_1.StaticTextField, { name: "openshiftVersion", label: "OpenShift version", isRequired: true },
t('ai:OpenShift'),
" ",
forceOpenshiftVersion)) : (React.createElement(React.Fragment, null,
React.createElement(common_1.OpenShiftVersionDropdown, { name: "openshiftVersion", items: selectOptions, versions: versions, showReleasesLink: false, showOpenshiftVersionModal: () => setOpenshiftVersionModalOpen(true), customItems: additionalSelectOptions }),
openshiftVersionModalOpen && (React.createElement(common_1.OpenShiftVersionModal, { allVersions: allVersions, setOpenshiftVersionModalOpen: setOpenshiftVersionModalOpen })))),
React.createElement(ControlPlaneNodesDropdown_1.default, { isDisabled: isEditFlow, allowHighlyAvailable: allowHighlyAvailable }),
!isNutanix && (React.createElement(CpuArchitectureDropdown_1.default, { cpuArchitectures: cpuArchitectures, isDisabled: isEditFlow })),
(extensionAfter === null || extensionAfter === void 0 ? void 0 : extensionAfter['openshiftVersion']) && extensionAfter['openshiftVersion'],
!isEditFlow && React.createElement(clusters_1.PullSecret, null),
(extensionAfter === null || extensionAfter === void 0 ? void 0 : extensionAfter['pullSecret']) && extensionAfter['pullSecret'],
isDiskEncryptionEnabled && values.diskEncryptionMode === 'tpmv2' && (React.createElement(react_core_1.Alert, { variant: react_core_1.AlertVariant.warning, isInline: true, title: React.createElement(react_core_1.FlexItem, null, t('ai:To use this encryption method, enable TPMv2 encryption in the BIOS of each selected host.')) })),
isDiskEncryptionEnabled && values.diskEncryptionMode === 'tang' && (React.createElement(react_core_1.Alert, { variant: react_core_1.AlertVariant.warning, isInline: true, title: React.createElement(react_core_1.FlexItem, null, t('ai:The use of Tang encryption mode to encrypt your disks is only supported for bare metal or vSphere installations on user-provisioned infrastructure.')) }))));
};
exports.ClusterDetailsFormFields = ClusterDetailsFormFields;
//# sourceMappingURL=ClusterDetailsFormFields.js.map