@openshift-assisted/ui-lib
Version:
React component library for the Assisted Installer UI
75 lines • 6.08 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ConsoleModal = exports.TroubleshootingOpenshiftConsoleButton = exports.LaunchOpenshiftConsoleButton = exports.WebConsoleHint = void 0;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importDefault(require("react"));
const react_core_1 = require("@patternfly/react-core");
const info_circle_icon_1 = require("@patternfly/react-icons/dist/js/icons/info-circle-icon");
const api_1 = require("../../api");
const Toolbar_1 = require("../ui/Toolbar");
const PrismCode_1 = tslib_1.__importDefault(require("../ui/PrismCode"));
const use_translation_wrapper_1 = require("../../hooks/use-translation-wrapper");
const selectors_1 = require("../../selectors");
const formatMultilineString = (multiLineList) => multiLineList && multiLineList.length > 0
? [...multiLineList.slice(1)].reduce((accu, elem) => `${accu}\n${elem}`, multiLineList[0])
: '';
const ModalExpandableSection = (props) => {
const { requiredList } = props, otherProps = tslib_1.__rest(props, ["requiredList"]);
return (react_1.default.createElement(react_core_1.ExpandableSection, Object.assign({}, otherProps),
react_1.default.createElement(PrismCode_1.default, { code: formatMultilineString(requiredList), language: "markup", copiable: true })));
};
const WebConsoleHint = ({ cluster, consoleUrl }) => {
const [isDNSExpanded, setIsDNSExpanded] = react_1.default.useState(true);
const handleToggle = () => setIsDNSExpanded(!isDNSExpanded);
const [apiVip, ingressVip] = [(0, selectors_1.selectApiVip)(cluster), (0, selectors_1.selectIngressVip)(cluster)];
const clusterUrl = `${cluster.name || ''}.${cluster.baseDnsDomain || ''}`;
const appsUrl = `apps.${clusterUrl}`;
const etcHosts = [
`${apiVip}\tapi.${clusterUrl}`,
`${ingressVip}\toauth-openshift.${appsUrl}`,
`${ingressVip}\t${(0, api_1.removeProtocolFromURL)(consoleUrl)}`,
`${ingressVip}\tgrafana-openshift-monitoring.${appsUrl}`,
`${ingressVip}\tthanos-querier-openshift-monitoring.${appsUrl}`,
`${ingressVip}\tprometheus-k8s-openshift-monitoring.${appsUrl}`,
`${ingressVip}\talertmanager-main-openshift-monitoring.${appsUrl}`,
];
// Pad the lines as long as the longest record
const paddingNum = `*.${appsUrl}.`.length + 2;
const aRecords = [
`api.${clusterUrl}`.padEnd(paddingNum) + `A\t${apiVip}`,
`*.${appsUrl}`.padEnd(paddingNum) + `A\t${ingressVip}`,
];
const { t } = (0, use_translation_wrapper_1.useTranslation)();
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(react_core_1.Text, { component: "p" }, t('ai:In order to access the OpenShift Web Console, use external DNS server or local configuration to resolve its hostname. To do so, either:')),
react_1.default.createElement(ModalExpandableSection, { toggleText: t('ai:Option 1: Add the following records to your DNS server (recommended)'), className: "pf-v5-u-pb-md", isExpanded: isDNSExpanded, onToggle: handleToggle, requiredList: aRecords }),
react_1.default.createElement(ModalExpandableSection, { toggleText: t('ai:Option 2: Update your local /etc/hosts or /etc/resolv.conf files'), className: "pf-v5-u-pb-md", isExpanded: !isDNSExpanded, onToggle: handleToggle, requiredList: etcHosts })));
};
exports.WebConsoleHint = WebConsoleHint;
const LaunchOpenshiftConsoleButton = ({ cluster, consoleUrl, isDisabled, id, }) => {
const [isOpen, setOpen] = react_1.default.useState(false);
const { t } = (0, use_translation_wrapper_1.useTranslation)();
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(Toolbar_1.ToolbarButton, { type: "button", variant: react_core_1.ButtonVariant.primary, isDisabled: isDisabled, onClick: () => setOpen(true), "data-testid": id }, t('ai:Launch OpenShift Console')),
react_1.default.createElement(exports.ConsoleModal, { closeModal: () => setOpen(false), consoleUrl: consoleUrl, cluster: cluster, isOpen: isOpen })));
};
exports.LaunchOpenshiftConsoleButton = LaunchOpenshiftConsoleButton;
const TroubleshootingOpenshiftConsoleButton = ({ cluster, consoleUrl, idPrefix, }) => {
const [isOpen, setOpen] = react_1.default.useState(false);
const { t } = (0, use_translation_wrapper_1.useTranslation)();
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(react_core_1.Button, { variant: "link", icon: react_1.default.createElement(info_circle_icon_1.InfoCircleIcon, null), iconPosition: "left", isInline: true, onClick: () => setOpen(true), "data-testid": `${idPrefix || ''}-troubleshooting-hint-open` }, t('ai:Not able to access the Web Console?')),
react_1.default.createElement(exports.ConsoleModal, { closeModal: () => setOpen(false), consoleUrl: consoleUrl, cluster: cluster, isOpen: isOpen })));
};
exports.TroubleshootingOpenshiftConsoleButton = TroubleshootingOpenshiftConsoleButton;
const ConsoleModal = ({ closeModal, cluster, consoleUrl, isOpen, }) => {
const { t } = (0, use_translation_wrapper_1.useTranslation)();
const actions = [
react_1.default.createElement(react_core_1.Button, { type: "submit", key: "launch", variant: react_core_1.ButtonVariant.primary, onClick: () => window.open(consoleUrl, '_blank', 'noopener'), isDisabled: !consoleUrl }, t('ai:Launch OpenShift Console')),
react_1.default.createElement(react_core_1.Button, { variant: react_core_1.ButtonVariant.secondary, onClick: () => closeModal(), key: "close" }, t('ai:Close')),
];
return (react_1.default.createElement(react_core_1.Modal, { title: t('ai:OpenShift Web Console troubleshooting'), isOpen: isOpen, onClose: closeModal, actions: actions, variant: react_core_1.ModalVariant.large },
react_1.default.createElement(exports.WebConsoleHint, { cluster: cluster, consoleUrl: consoleUrl })));
};
exports.ConsoleModal = ConsoleModal;
//# sourceMappingURL=ConsoleModal.js.map