"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ConsoleModal = exports.TroubleshootingOpenshiftConsoleButton = 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 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.Content, { 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-v6-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-v6-u-pb-md", isExpanded: !isDNSExpanded, onToggle: handleToggle, requiredList: etcHosts })));
};
exports.WebConsoleHint = WebConsoleHint;
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, { isOpen: isOpen, onClose: closeModal, variant: react_core_1.ModalVariant.large },
        react_1.default.createElement(react_core_1.ModalHeader, { title: t('ai:OpenShift Web Console troubleshooting') }),
        react_1.default.createElement(react_core_1.ModalBody, null,
            react_1.default.createElement(exports.WebConsoleHint, { cluster: cluster, consoleUrl: consoleUrl })),
        react_1.default.createElement(react_core_1.ModalFooter, null, actions)));
};
exports.ConsoleModal = ConsoleModal;
//# sourceMappingURL=ConsoleModal.js.map