@openshift-assisted/ui-lib
Version:
React component library for the Assisted Installer UI
156 lines • 10.2 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 human_date_1 = tslib_1.__importDefault(require("human-date"));
const ui_1 = require("../ui");
const HostProgress_1 = tslib_1.__importDefault(require("./HostProgress"));
const utils_1 = require("./utils");
const HostValidationGroups_1 = require("./HostValidationGroups");
const OcpConsoleNodesSectionLink_1 = tslib_1.__importDefault(require("./OcpConsoleNodesSectionLink"));
const utils_2 = require("../ui/table/utils");
const unknown_icon_1 = require("@patternfly/react-icons/dist/js/icons/unknown-icon");
const use_translation_wrapper_1 = require("../../hooks/use-translation-wrapper");
const status_1 = require("./status");
const config_1 = require("../../config");
const exclamation_triangle_icon_1 = require("@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon");
const getTitleWithProgress = (host, status) => {
const stages = (0, utils_1.getHostProgressStages)(host);
const stageNumber = (0, utils_1.getHostProgressStageNumber)(host);
return status.withProgress ? `${status.title} ${stageNumber}/${stages.length}` : status.title;
};
const HostStatusPopoverContent = (_a) => {
var { details, autoCSR, additionalPopoverContent, openshiftVersion } = _a, props = tslib_1.__rest(_a, ["details", "autoCSR", "additionalPopoverContent", "openshiftVersion"]);
const { host } = props;
const { status, statusInfo } = host;
const { t } = (0, use_translation_wrapper_1.useTranslation)();
if (['installing-in-progress'].includes(status)) {
return (react_1.default.createElement(react_core_1.TextContent, null,
react_1.default.createElement(HostProgress_1.default, { host: host })));
}
if (['error', 'cancelled', 'installing-pending-user-action'].includes(status)) {
return (react_1.default.createElement(react_core_1.TextContent, null,
react_1.default.createElement(react_core_1.Text, null,
details,
react_1.default.createElement("br", null),
(0, utils_2.toSentence)(statusInfo)),
react_1.default.createElement(HostProgress_1.default, { host: host })));
}
if (['installed'].includes(status)) {
return (react_1.default.createElement(react_core_1.TextContent, null,
react_1.default.createElement(react_core_1.Text, null, details),
react_1.default.createElement(HostProgress_1.default, { host: host })));
}
if (['added-to-existing-cluster'].includes(status)) {
return (react_1.default.createElement(react_core_1.TextContent, null,
react_1.default.createElement(react_core_1.Text, null, details),
!autoCSR && (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("br", null),
t("ai:To finish adding nodes to the cluster, approve the join request inside OpenShift Console's Nodes section."),
react_1.default.createElement("br", null),
t('ai:It may take a few minutes for the join request to appear.'),
react_1.default.createElement("br", null),
t('ai:If you prefer using the CLI, follow the instructions in'),
"\u00A0",
react_1.default.createElement(ui_1.ExternalLink, { href: (0, config_1.getApproveNodesInClLink)(openshiftVersion) }, t('ai:How to approve nodes using the CLI')))),
react_1.default.createElement(HostProgress_1.default, { host: host })));
}
if ([
'preparing-for-installation',
'preparing-successful',
'installing',
'unbinding-pending-user-action',
'binding',
'unbinding',
'reclaiming',
'reclaiming-rebooting',
].includes(status)) {
// No additional error messages shown
return (react_1.default.createElement(react_core_1.TextContent, null,
react_1.default.createElement(react_core_1.Text, null, details)));
}
return (react_1.default.createElement(react_core_1.Stack, { hasGutter: true },
additionalPopoverContent,
react_1.default.createElement(react_core_1.StackItem, null,
details && (react_1.default.createElement(react_core_1.TextContent, null,
react_1.default.createElement(react_core_1.Text, null, details))),
react_1.default.createElement(HostValidationGroups_1.HostValidationGroups, Object.assign({ openshiftVersion: openshiftVersion }, props)))));
};
const HostStatusPopoverFooter = ({ host }) => {
const { progress, statusUpdatedAt } = host;
const { t } = (0, use_translation_wrapper_1.useTranslation)();
if (host.status === 'added-to-existing-cluster') {
return (react_1.default.createElement(OcpConsoleNodesSectionLink_1.default, { id: `host-status-detail-link-to-ocp-nodes-${host.requestedHostname || host.id}` }));
}
let footerText;
if (host.status === 'installing-in-progress') {
if ((progress === null || progress === void 0 ? void 0 : progress.stageUpdatedAt) && progress.stageUpdatedAt !== progress.stageStartedAt) {
footerText = t('ai:Step started at {{startedAt}}, updated {{updatedAt}}', {
startedAt: (0, ui_1.getHumanizedDateTime)(progress.stageStartedAt),
updatedAt: human_date_1.default.relativeTime(progress.stageUpdatedAt),
});
}
else {
footerText = t('ai:Step started at {{startedAt}}', {
startedAt: (0, ui_1.getHumanizedDateTime)((progress === null || progress === void 0 ? void 0 : progress.stageStartedAt) || statusUpdatedAt),
});
}
}
else if (statusUpdatedAt) {
footerText = t('ai:Status updated at {{humanizedDataTime}}', {
humanizedDataTime: (0, ui_1.getHumanizedDateTime)(statusUpdatedAt),
});
}
return react_1.default.createElement(react_1.default.Fragment, null, !!footerText && react_1.default.createElement("small", null, footerText));
};
const WithHostStatusPopover = (props) => {
var _a;
return (react_1.default.createElement(react_core_1.Popover, { headerContent: react_1.default.createElement("div", null, props.title), bodyContent: react_1.default.createElement("div", { style: { maxHeight: '33vh', overflow: 'auto' } },
react_1.default.createElement(HostStatusPopoverContent, Object.assign({}, props))), footerContent: react_1.default.createElement(HostStatusPopoverFooter, { host: props.host }), minWidth: "30rem", maxWidth: "50rem", hideOnOutsideClick: props.hideOnOutsideClick, zIndex: props.zIndex || 300, closeBtnAriaLabel: `close-popover-${(_a = props.host.requestedHostname) !== null && _a !== void 0 ? _a : ''}` },
react_1.default.createElement(react_core_1.Button, { variant: 'link', isInline: true, size: "sm" }, props.children)));
};
const getHostStatusIcon = (icon, progress, status) => {
if ((progress === null || progress === void 0 ? void 0 : progress.stageTimedOut) !== undefined && status.title !== 'Error') {
return (react_1.default.createElement(react_core_1.Popover, { bodyContent: react_1.default.createElement("small", null, "Waiting for control plane has been active more than the expected completion time."), minWidth: "20rem", maxWidth: "30rem" },
react_1.default.createElement(ui_1.UiIcon, { size: "sm", status: "warning", icon: react_1.default.createElement(exclamation_triangle_icon_1.ExclamationTriangleIcon, null) })));
}
else
return icon;
};
const HostStatus = ({ host, validationsInfo, status, onEditHostname, AdditionalNTPSourcesDialogToggleComponent, UpdateDay2ApiVipDialogToggleComponent, children, zIndex, autoCSR, additionalPopoverContent, openshiftVersion, }) => {
const [keepOnOutsideClick, onValidationActionToggle] = react_1.default.useState(false);
const toggleHostname = react_1.default.useCallback(() => {
onValidationActionToggle(!keepOnOutsideClick);
onEditHostname === null || onEditHostname === void 0 ? void 0 : onEditHostname();
}, [keepOnOutsideClick, onEditHostname]);
const { t } = (0, use_translation_wrapper_1.useTranslation)();
const { title, icon, sublabel, details, noPopover } = status;
const titleWithProgress = getTitleWithProgress(host, status);
const popoverProps = {
hideOnOutsideClick: !keepOnOutsideClick,
host,
onEditHostname: toggleHostname,
AdditionalNTPSourcesDialogToggleComponent,
title,
validationsInfo,
details,
UpdateDay2ApiVipDialogToggleComponent,
zIndex,
autoCSR,
additionalPopoverContent,
openshiftVersion,
};
const hostIcon = getHostStatusIcon(icon, host.progress, status);
return (react_1.default.createElement(react_core_1.Flex, { alignItems: { default: 'alignItemsCenter' }, spaceItems: { default: 'spaceItemsXs' } },
react_1.default.createElement(react_core_1.FlexItem, null, (autoCSR && status.key === 'added-to-existing-cluster'
? (0, status_1.hostStatus)(t).installed.icon
: hostIcon) || react_1.default.createElement(unknown_icon_1.UnknownIcon, null)),
react_1.default.createElement(react_core_1.Flex, { direction: { default: 'column' }, spaceItems: { default: 'spaceItemsXs' } },
!children && !sublabel && !noPopover ? (react_1.default.createElement(WithHostStatusPopover, Object.assign({}, popoverProps), titleWithProgress)) : (react_1.default.createElement(react_core_1.FlexItem, null, titleWithProgress)),
children && react_1.default.createElement(react_core_1.FlexItem, null, children),
sublabel && (react_1.default.createElement(react_core_1.FlexItem, { className: "pf-v5-u-font-size-xs", style: { marginTop: 'calc(-1 * var(--pf-v5-l-flex--spacer--xs))' } },
react_1.default.createElement(WithHostStatusPopover, Object.assign({}, popoverProps), sublabel))))));
};
exports.default = HostStatus;
//# sourceMappingURL=HostStatus.js.map