@openshift-assisted/ui-lib
Version:
React component library for the Assisted Installer UI
154 lines • 10.9 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.HostValidationGroups = void 0;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importStar(require("react"));
const react_core_1 = require("@patternfly/react-core");
const global_warning_color_100_1 = require("@patternfly/react-tokens/dist/js/global_warning_color_100");
const global_success_color_100_1 = require("@patternfly/react-tokens/dist/js/global_success_color_100");
const pending_icon_1 = require("@patternfly/react-icons/dist/js/icons/pending-icon");
const check_circle_icon_1 = require("@patternfly/react-icons/dist/js/icons/check-circle-icon");
const exclamation_triangle_icon_1 = require("@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon");
const config_1 = require("../../config");
const ui_1 = require("../ui");
const Hostname_1 = tslib_1.__importDefault(require("./Hostname"));
const use_translation_wrapper_1 = require("../../hooks/use-translation-wrapper");
const utils_1 = require("../../utils");
require("./HostValidationGroups.css");
const external_link_alt_icon_1 = require("@patternfly/react-icons/dist/js/icons/external-link-alt-icon");
const ValidationsAlert = ({ validations, variant, title, actionLinks = [], }) => {
const { t } = (0, use_translation_wrapper_1.useTranslation)();
return (react_1.default.createElement(react_core_1.Alert, { title: title, variant: variant, actionLinks: actionLinks, isInline: true },
react_1.default.createElement("ul", null, validations.map((v) => (react_1.default.createElement("li", { key: v.id },
react_1.default.createElement("strong", null,
(0, config_1.hostValidationLabels)(t)[v.id] || v.id,
":"),
"\u00A0",
(0, ui_1.toSentence)(v.message.replace(/\\n/, ' ')),
' ',
v.status === 'failure' && (0, config_1.hostValidationFailureHints)(t)[v.id]))))));
};
const HostnameAlert = ({ onEditHostname, host, hostnameValidations, variant, }) => {
const { t } = (0, use_translation_wrapper_1.useTranslation)();
const actionLinks = [
react_1.default.createElement(Hostname_1.default, { key: "change-hostname", title: t('ai:Change hostname'), onEditHostname: onEditHostname, host: host }),
];
const title = t('ai:Illegal hostname');
return hostnameValidations.length === 1 ? (react_1.default.createElement(react_core_1.Alert, { title: title, variant: variant, actionLinks: actionLinks, isInline: true }, (0, ui_1.toSentence)(hostnameValidations[0].message))) : (react_1.default.createElement(ValidationsAlert, { title: title, validations: hostnameValidations, variant: variant, actionLinks: actionLinks }));
};
const NtpSyncAlert = ({ AdditionalNTPSourcesDialogToggleComponent, variant, validation, }) => {
const actionLinks = [react_1.default.createElement(AdditionalNTPSourcesDialogToggleComponent, { key: "add-ntp-sources" })];
const { t } = (0, use_translation_wrapper_1.useTranslation)();
return (react_1.default.createElement(react_core_1.Alert, { title: t('ai:NTP synchronization failure'), variant: variant, actionLinks: actionLinks, isInline: true },
(0, ui_1.toSentence)(validation.message),
" ",
(0, config_1.hostValidationFailureHints)(t)[validation.id]));
};
const ApiVipConnectivityAlert = ({ UpdateDay2ApiVipDialogToggleComponent, variant, validation, }) => {
const actionLinks = [react_1.default.createElement(UpdateDay2ApiVipDialogToggleComponent, { key: "update-api-vip" })];
const { t } = (0, use_translation_wrapper_1.useTranslation)();
return (react_1.default.createElement(react_core_1.Alert, { title: t('ai:API connectivity failure'), variant: variant, actionLinks: actionLinks, isInline: true }, (0, ui_1.toSentence)(validation.message)));
};
const MtuInfoLink = ({ docsVersion }) => {
const { t } = (0, use_translation_wrapper_1.useTranslation)();
return (react_1.default.createElement("a", { href: (0, config_1.getMtuLink)(docsVersion), target: "_blank", rel: "noopener noreferrer" },
t('ai:Learn more about MTU (maximum transmission unit)'),
" ",
react_1.default.createElement(external_link_alt_icon_1.ExternalLinkAltIcon, null),
"."));
};
const MtuSyncAlert = ({ variant, validation, docsVersion, }) => {
const { t } = (0, use_translation_wrapper_1.useTranslation)();
return (react_1.default.createElement(react_core_1.Alert, { title: t('ai:MTU (maximum transmission unit) failure'), variant: variant, isInline: true },
(0, ui_1.toSentence)(validation.message),
" ",
(0, config_1.hostValidationFailureHints)(t)[validation.id],
react_1.default.createElement("br", null),
react_1.default.createElement(MtuInfoLink, { docsVersion: docsVersion })));
};
const ValidationGroupAlerts = ({ validations, title, variant, onEditHostname, AdditionalNTPSourcesDialogToggleComponent, UpdateDay2ApiVipDialogToggleComponent, host, openshiftVersion, }) => {
if (!validations.length) {
return null;
}
const validationsWithActions = {
['hostname-unique']: undefined,
['hostname-valid']: undefined,
['ntp-synced']: undefined,
['ignition-downloadable']: undefined,
['mtu-valid']: undefined,
};
const alerts = [];
const validationsWithoutActions = [];
for (const v of validations) {
if (v.id in validationsWithActions && v.status === 'failure') {
validationsWithActions[v.id] = v;
}
else {
validationsWithoutActions.push(v);
}
}
const hostnameValidations = [];
if (validationsWithActions['hostname-unique']) {
hostnameValidations.push(validationsWithActions['hostname-unique']);
}
if (validationsWithActions['hostname-valid']) {
hostnameValidations.push(validationsWithActions['hostname-valid']);
}
if (hostnameValidations.length > 0 && onEditHostname) {
alerts.push(react_1.default.createElement(HostnameAlert, { hostnameValidations: hostnameValidations, variant: variant, onEditHostname: onEditHostname, host: host, key: "hostname-alert" }));
}
if (validationsWithActions['ignition-downloadable'] && UpdateDay2ApiVipDialogToggleComponent) {
alerts.push(react_1.default.createElement(ApiVipConnectivityAlert, { UpdateDay2ApiVipDialogToggleComponent: UpdateDay2ApiVipDialogToggleComponent, validation: validationsWithActions['ignition-downloadable'], variant: variant, key: "ignition-downloadable-alert" }));
}
if (validationsWithActions['ntp-synced'] && AdditionalNTPSourcesDialogToggleComponent) {
alerts.push(react_1.default.createElement(NtpSyncAlert, { AdditionalNTPSourcesDialogToggleComponent: AdditionalNTPSourcesDialogToggleComponent, validation: validationsWithActions['ntp-synced'], variant: variant, key: "ntp-sync-alert" }));
}
if (validationsWithActions['mtu-valid'] && AdditionalNTPSourcesDialogToggleComponent) {
alerts.push(react_1.default.createElement(MtuSyncAlert, { validation: validationsWithActions['mtu-valid'], variant: variant, key: "mtu-sync-alert", docsVersion: openshiftVersion || '4.17' }));
}
if (validationsWithoutActions.length > 0) {
alerts.push(react_1.default.createElement(ValidationsAlert, { validations: validationsWithoutActions, variant: variant, title: title, key: "insufficient-alert" }));
}
return react_1.default.createElement(react_core_1.AlertGroup, null, alerts);
};
const HostValidationGroups = (_a) => {
var { validationsInfo, openshiftVersion } = _a, props = tslib_1.__rest(_a, ["validationsInfo", "openshiftVersion"]);
const { t } = (0, use_translation_wrapper_1.useTranslation)();
return (react_1.default.createElement(react_1.default.Fragment, null, (0, utils_1.getKeys)(validationsInfo).map((groupName) => {
const validations = validationsInfo[groupName] || [];
const pendingValidations = validations.filter((v) => v.status === 'pending' && v.id !== 'ntp-synced');
const failedValidations = validations.filter((v) => (v.status === 'failure' || v.status === 'error') && v.id !== 'ntp-synced');
const softValidations = validations.filter((v) => ['pending', 'failure', 'error'].includes(v.status) && v.id === 'ntp-synced');
const getValidationGroupState = () => {
if (failedValidations.length) {
return (react_1.default.createElement(react_1.default.Fragment, null,
t('ai:Failed'),
" ",
react_1.default.createElement(exclamation_triangle_icon_1.ExclamationTriangleIcon, { color: global_warning_color_100_1.global_warning_color_100.value })));
}
else if (pendingValidations.length) {
return (react_1.default.createElement(react_1.default.Fragment, null,
t('ai:Pending input'),
" ",
react_1.default.createElement(pending_icon_1.PendingIcon, null)));
}
return (react_1.default.createElement(react_1.default.Fragment, null,
t('ai:Ready'),
" ",
react_1.default.createElement(check_circle_icon_1.CheckCircleIcon, { color: global_success_color_100_1.global_success_color_100.value })));
};
const groupLabel = (0, config_1.hostValidationGroupLabels)(t)[groupName];
return (react_1.default.createElement(react_1.Fragment, { key: groupName },
react_1.default.createElement(react_core_1.Level, { className: "host-validation-groups__validation-group" },
react_1.default.createElement(react_core_1.LevelItem, null,
react_1.default.createElement("strong", null, groupLabel)),
react_1.default.createElement(react_core_1.LevelItem, null, getValidationGroupState())),
// display pending and soft validations only if there are no failing validations
!failedValidations.length && (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(ValidationGroupAlerts, Object.assign({ variant: react_core_1.AlertVariant.info, title: t('ai:Pending validations:'), validations: pendingValidations, openshiftVersion: openshiftVersion }, props)),
react_1.default.createElement(ValidationGroupAlerts, Object.assign({ variant: react_core_1.AlertVariant.info, validations: softValidations, openshiftVersion: openshiftVersion, title: '' }, props)))),
react_1.default.createElement(ValidationGroupAlerts, Object.assign({ variant: react_core_1.AlertVariant.warning, title: t('ai:Failed validations:'), validations: failedValidations, openshiftVersion: openshiftVersion }, props))));
})));
};
exports.HostValidationGroups = HostValidationGroups;
//# sourceMappingURL=HostValidationGroups.js.map