@openshift-assisted/ui-lib
Version:
React component library for the Assisted Installer UI
87 lines • 8.18 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 ClusterPropertiesList_1 = tslib_1.__importDefault(require("../../../common/components/clusterDetail/ClusterPropertiesList"));
const toAssisted_1 = require("../helpers/toAssisted");
const ClusterDeploymentCredentials_1 = tslib_1.__importDefault(require("./ClusterDeploymentCredentials"));
const helpers_1 = require("./helpers");
const eventsModal_1 = require("../../../common/components/ui/eventsModal");
const ClusterDeploymentDetailsTable_1 = tslib_1.__importDefault(require("./ClusterDeploymentDetailsTable"));
const clusterDeployment_1 = require("../helpers/clusterDeployment");
const ClusterDeploymentKubeconfigDownload_1 = tslib_1.__importDefault(require("./ClusterDeploymentKubeconfigDownload"));
const use_translation_wrapper_1 = require("../../../common/hooks/use-translation-wrapper");
const ClusterDeploymentDetails = ({ clusterDeployment, agentClusterInstall, agents, fetchSecret, onFetchEvents, }) => {
const [progressCardExpanded, setProgressCardExpanded] = react_1.default.useState(true);
const [inventoryCardExpanded, setInventoryCardExpanded] = react_1.default.useState(true);
const [detailsCardExpanded, setDetailsCardExpanded] = react_1.default.useState(true);
const [isEventsModalOpen, setIsEventsModalOpen] = react_1.default.useState(false);
const clusterAgents = agents.filter((a) => {
var _a, _b, _c, _d;
return ((_a = a.spec.clusterDeploymentName) === null || _a === void 0 ? void 0 : _a.name) === ((_b = clusterDeployment.metadata) === null || _b === void 0 ? void 0 : _b.name) &&
((_c = a.spec.clusterDeploymentName) === null || _c === void 0 ? void 0 : _c.namespace) === ((_d = clusterDeployment.metadata) === null || _d === void 0 ? void 0 : _d.namespace);
});
const cluster = (0, toAssisted_1.getAICluster)({ clusterDeployment, agentClusterInstall, agents: clusterAgents });
const clusterProperties = react_1.default.useMemo(() => (0, clusterDeployment_1.getClusterProperties)(clusterDeployment, agentClusterInstall), [clusterDeployment, agentClusterInstall]);
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.Stack, { hasGutter: true },
(0, helpers_1.shouldShowClusterInstallationProgress)(agentClusterInstall) && (react_1.default.createElement(react_core_1.StackItem, null,
react_1.default.createElement(react_core_1.Card, { id: "cluster-installation-progress-card", isExpanded: progressCardExpanded },
react_1.default.createElement(react_core_1.CardHeader, { onExpand: () => setProgressCardExpanded(!progressCardExpanded), toggleButtonProps: {
id: 'progress-card-toggle-button',
'aria-label': 'Cluster installation process',
'aria-labelledby': 'titleId progress-card-toggle-button',
'aria-expanded': progressCardExpanded,
} },
react_1.default.createElement(react_core_1.CardTitle, { id: "titleId" }, t('ai:Cluster installation process'))),
react_1.default.createElement(react_core_1.CardExpandableContent, null,
react_1.default.createElement(react_core_1.CardBody, null,
react_1.default.createElement(react_core_1.Stack, { hasGutter: true },
(0, helpers_1.shouldShowClusterCredentials)(agentClusterInstall) && (react_1.default.createElement(react_core_1.StackItem, null,
react_1.default.createElement(ClusterDeploymentCredentials_1.default, { clusterDeployment: clusterDeployment, agentClusterInstall: agentClusterInstall, agents: clusterAgents, fetchSecret: fetchSecret, consoleUrl: (0, clusterDeployment_1.getConsoleUrl)(clusterDeployment) }))),
react_1.default.createElement(react_core_1.StackItem, null,
react_1.default.createElement(ClusterDeploymentKubeconfigDownload_1.default, { clusterDeployment: clusterDeployment, agentClusterInstall: agentClusterInstall, fetchSecret: fetchSecret }),
' ',
react_1.default.createElement(react_core_1.Button, { id: "cluster-events-button", variant: react_core_1.ButtonVariant.link, style: { textAlign: 'right' }, onClick: () => setIsEventsModalOpen(true) }, t('ai:View cluster events'))))))))),
react_1.default.createElement(react_core_1.StackItem, null,
react_1.default.createElement(react_core_1.Card, { id: "cluster-inventory-card", isExpanded: inventoryCardExpanded },
react_1.default.createElement(react_core_1.CardHeader, { onExpand: () => setInventoryCardExpanded(!inventoryCardExpanded), toggleButtonProps: {
id: 'inventory-card-toggle-button',
'aria-label': 'Hosts inventory',
'aria-labelledby': 'titleId inventory-card-toggle-button',
'aria-expanded': inventoryCardExpanded,
} },
react_1.default.createElement(react_core_1.CardTitle, { id: "titleId" }, t('ai:Hosts inventory'))),
react_1.default.createElement(react_core_1.CardExpandableContent, null,
react_1.default.createElement(react_core_1.CardBody, null,
react_1.default.createElement(ClusterDeploymentDetailsTable_1.default, { agents: clusterAgents, agentClusterInstall: agentClusterInstall }))))),
react_1.default.createElement(react_core_1.StackItem, null,
react_1.default.createElement(react_core_1.Card, { id: "cluster-details-card", isExpanded: detailsCardExpanded },
react_1.default.createElement(react_core_1.CardHeader, { onExpand: () => setDetailsCardExpanded(!detailsCardExpanded), toggleButtonProps: {
id: 'details-card-toggle-button',
'aria-label': 'Details',
'aria-labelledby': 'titleId details-card-toggle-button',
'aria-expanded': detailsCardExpanded,
} },
react_1.default.createElement(react_core_1.CardTitle, { id: "titleId" }, t('ai:Details'))),
react_1.default.createElement(react_core_1.CardExpandableContent, null,
react_1.default.createElement(react_core_1.CardBody, null,
react_1.default.createElement(ClusterPropertiesList_1.default, { leftItems: [
clusterProperties.name,
clusterProperties.openshiftVersion,
clusterProperties.clusterId,
clusterProperties.installedTimestamp,
clusterProperties.baseDnsDomain,
], rightItems: [
clusterProperties.apiVip,
clusterProperties.ingressVip,
clusterProperties.clusterNetworkCidr,
clusterProperties.clusterNetworkHostPrefix,
clusterProperties.serviceNetworkCidr,
] })))))),
isEventsModalOpen && (react_1.default.createElement(eventsModal_1.EventsModal, { entityKind: "cluster", cluster: cluster, title: t('ai:Cluster Events'), onFetchEvents: onFetchEvents, hostId: undefined, disablePagination: true, isOpen: true, onClose: () => setIsEventsModalOpen(false) }))));
};
exports.default = ClusterDeploymentDetails;
//# sourceMappingURL=ClusterDeploymentDetails.js.map