@openshift-assisted/ui-lib
Version:
React component library for the Assisted Installer UI
148 lines • 12.2 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.nodePoolNameColumn = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_router_dom_v5_compat_1 = require("react-router-dom-v5-compat");
const react_core_1 = require("@patternfly/react-core");
const plus_circle_icon_1 = require("@patternfly/react-icons/dist/js/icons/plus-circle-icon");
const react_table_1 = require("@patternfly/react-table");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const hardwareInfo_1 = require("../../../../common/components/hosts/hardwareInfo");
const AgentStatus_1 = tslib_1.__importDefault(require("../../Agent/AgentStatus"));
const common_1 = require("../../common");
const ManageHostsModal_1 = tslib_1.__importDefault(require("../modals/ManageHostsModal"));
const AddNodePoolModal_1 = tslib_1.__importDefault(require("../modals/AddNodePoolModal"));
const RemoveNodePoolModal_1 = tslib_1.__importDefault(require("../modals/RemoveNodePoolModal"));
const NodePoolStatus_1 = tslib_1.__importDefault(require("./NodePoolStatus"));
const use_translation_wrapper_1 = require("../../../../common/hooks/use-translation-wrapper");
const utils_1 = require("../utils");
require("./NodePoolsTable.css");
const utils_2 = require("../../../../common/utils");
const nodePoolNameColumn = () => {
return {
header: {
title: 'Nodepool',
props: {
id: 'col-header-hostname',
modifier: 'breakWord',
},
sort: true,
},
cell: ({ nodePool }) => {
var _a, _b;
return {
title: (_a = nodePool.metadata) === null || _a === void 0 ? void 0 : _a.name,
props: { 'data-testid': 'nodepool-name' },
sortableValue: (_b = nodePool.metadata) === null || _b === void 0 ? void 0 : _b.name,
};
},
};
};
exports.nodePoolNameColumn = nodePoolNameColumn;
const NodePoolsTable = ({ nodePools, agents, onRemoveNodePool, onUpdateNodePool, hostedCluster, onAddNodePool, agentMachines, supportedVersionsCM, }) => {
var _a;
const { t } = (0, use_translation_wrapper_1.useTranslation)();
const [manageHostsOpen, setManageHostsOpen] = React.useState();
const [addNodePool, setAddNodePool] = React.useState(false);
const [removeNodePoolOpen, setRemoveNodePoolOpen] = React.useState();
const [expandedNodePools, setExpandedNodePools] = React.useState([]);
const manageNodePool = nodePools.find((np) => { var _a; return ((_a = np.metadata) === null || _a === void 0 ? void 0 : _a.uid) === manageHostsOpen; });
const removeNodePool = nodePools.find((np) => { var _a; return ((_a = np.metadata) === null || _a === void 0 ? void 0 : _a.uid) === removeNodePoolOpen; });
return (React.createElement(React.Fragment, null,
React.createElement(react_core_1.Stack, { hasGutter: true },
React.createElement(react_core_1.StackItem, null,
React.createElement(react_table_1.Table, { variant: "compact" },
React.createElement(react_table_1.Thead, null,
React.createElement(react_table_1.Tr, null,
React.createElement(react_table_1.Th, null),
React.createElement(react_table_1.Th, null, t('ai:Nodepool')),
React.createElement(react_table_1.Th, null, t('ai:Hostname')),
React.createElement(react_table_1.Th, null, t('ai:Status')),
React.createElement(react_table_1.Th, null, t('ai:Infrastructure env')),
React.createElement(react_table_1.Th, null, t('ai:CPU cores')),
React.createElement(react_table_1.Th, null, t('ai:Memory')),
React.createElement(react_table_1.Th, null, t('ai:Total storage')),
React.createElement(react_table_1.Th, null))),
React.createElement(react_table_1.Tbody, null, ...nodePools.reduce((rows, np) => {
var _a, _b;
const nodePoolAgents = (0, utils_1.getNodepoolAgents)(np, agents, agentMachines, hostedCluster);
const isExpanded = expandedNodePools.some((uid) => { var _a; return uid === ((_a = np.metadata) === null || _a === void 0 ? void 0 : _a.uid); });
const totals = nodePoolAgents.reduce((acc, agent) => {
var _a;
const { memory, cores, disk } = (0, hardwareInfo_1.getHostRowHardwareInfo)(((_a = agent.status) === null || _a === void 0 ? void 0 : _a.inventory) || {});
acc.memory += +memory.sortableValue;
acc.cores += +cores.sortableValue;
acc.disk += +disk.sortableValue;
return acc;
}, { memory: 0, cores: 0, disk: 0 });
rows.push(React.createElement(react_table_1.Tr, { key: (_a = np.metadata) === null || _a === void 0 ? void 0 : _a.uid, className: isExpanded ? 'ai-nodepools-table__no-border' : undefined },
React.createElement(react_table_1.Td, { expand: nodePoolAgents.length
? {
isExpanded,
rowIndex: 0,
onToggle: () => {
var _a;
return isExpanded
? setExpandedNodePools(expandedNodePools.filter((uid) => { var _a; return uid !== ((_a = np.metadata) === null || _a === void 0 ? void 0 : _a.uid); }))
: setExpandedNodePools([
...expandedNodePools,
((_a = np.metadata) === null || _a === void 0 ? void 0 : _a.uid) || '',
]);
},
}
: undefined }),
React.createElement(react_table_1.Td, null, (_b = np.metadata) === null || _b === void 0 ? void 0 : _b.name),
React.createElement(react_table_1.Td, null,
React.createElement(react_core_1.Popover, { "aria-label": "node pool hosts", hasAutoWidth: true, bodyContent: t('ai:{{agents}} of {{count}} host requested is available', {
agents: nodePoolAgents.length,
count: np.spec.replicas,
}) },
React.createElement(react_core_1.Label, { variant: "outline" }, t('ai:{{count}} host requested', { count: np.spec.replicas })))),
React.createElement(react_table_1.Td, null,
React.createElement(NodePoolStatus_1.default, { nodePool: np, agents: nodePoolAgents })),
React.createElement(react_table_1.Td, null, "-"),
React.createElement(react_table_1.Td, null, nodePoolAgents.length ? totals.cores : '-'),
React.createElement(react_table_1.Td, null, nodePoolAgents.length ? (0, utils_2.fileSize)(totals.memory, 2, 'iec') : '-'),
React.createElement(react_table_1.Td, null, nodePoolAgents.length ? (0, utils_2.fileSize)(totals.disk, 2, 'si') : '-'),
React.createElement(react_table_1.Td, { actions: {
items: [
{
title: t('ai:Manage hosts'),
onClick: () => { var _a; return setManageHostsOpen((_a = np.metadata) === null || _a === void 0 ? void 0 : _a.uid); },
},
{
title: t('ai:Remove Nodepool'),
onClick: () => { var _a; return setRemoveNodePoolOpen((_a = np.metadata) === null || _a === void 0 ? void 0 : _a.uid); },
},
],
} })));
if (expandedNodePools.find((uid) => { var _a; return uid === ((_a = np.metadata) === null || _a === void 0 ? void 0 : _a.uid); })) {
nodePoolAgents.forEach((agent, index) => {
var _a, _b, _c, _d, _e, _f, _g, _h;
const { memory, cores, disk } = (0, hardwareInfo_1.getHostRowHardwareInfo)(((_a = agent.status) === null || _a === void 0 ? void 0 : _a.inventory) || {});
rows.push(React.createElement(react_table_1.Tr, { key: (_b = agent.metadata) === null || _b === void 0 ? void 0 : _b.uid, className: (0, classnames_1.default)({
'ai-nodepools-table__no-border': index < nodePoolAgents.length - 1,
}) },
React.createElement(react_table_1.Td, null),
React.createElement(react_table_1.Td, null),
React.createElement(react_table_1.Td, null, agent.spec.hostname || ((_c = agent.status) === null || _c === void 0 ? void 0 : _c.inventory.hostname)),
React.createElement(react_table_1.Td, null,
React.createElement(AgentStatus_1.default, { agent: agent, isDay2: true })),
React.createElement(react_table_1.Td, null,
React.createElement(react_router_dom_v5_compat_1.Link, { to: `/multicloud/infrastructure/environments/details/${((_d = agent.metadata) === null || _d === void 0 ? void 0 : _d.namespace) || ''}/${((_f = (_e = agent.metadata) === null || _e === void 0 ? void 0 : _e.labels) === null || _f === void 0 ? void 0 : _f[common_1.INFRAENV_AGENTINSTALL_LABEL_KEY]) || ''}` }, (_h = (_g = agent.metadata) === null || _g === void 0 ? void 0 : _g.labels) === null || _h === void 0 ? void 0 : _h[common_1.INFRAENV_AGENTINSTALL_LABEL_KEY])),
React.createElement(react_table_1.Td, null, cores.title),
React.createElement(react_table_1.Td, null, memory.title),
React.createElement(react_table_1.Td, null, disk.title)));
});
}
return rows;
}, [])))),
React.createElement(react_core_1.StackItem, null,
React.createElement(react_core_1.Button, { variant: "link", icon: React.createElement(plus_circle_icon_1.PlusCircleIcon, null), iconPosition: "right", onClick: () => setAddNodePool(true) }, t('ai:Add Nodepool')))),
manageNodePool && (React.createElement(ManageHostsModal_1.default, { hostedCluster: hostedCluster, agents: agents, nodePool: manageNodePool, onClose: () => setManageHostsOpen(undefined), onSubmit: onUpdateNodePool, agentMachines: agentMachines })),
addNodePool && (React.createElement(AddNodePoolModal_1.default, { onClose: () => setAddNodePool(false), onSubmit: onAddNodePool, agentsNamespace: ((_a = hostedCluster.spec.platform.agent) === null || _a === void 0 ? void 0 : _a.agentNamespace) || '', agents: agents, hostedCluster: hostedCluster, supportedVersionsCM: supportedVersionsCM })),
removeNodePool && (React.createElement(RemoveNodePoolModal_1.default, { onClose: () => setRemoveNodePoolOpen(undefined), onRemove: onRemoveNodePool, nodePool: removeNodePool }))));
};
exports.default = NodePoolsTable;
//# sourceMappingURL=NodePoolsTable.js.map