@openshift-assisted/ui-lib
Version:
React component library for the Assisted Installer UI
94 lines • 6.24 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const react_core_1 = require("@patternfly/react-core");
const React = tslib_1.__importStar(require("react"));
const trash_icon_1 = require("@patternfly/react-icons/dist/js/icons/trash-icon");
const isMatch_js_1 = tslib_1.__importDefault(require("lodash-es/isMatch.js"));
const common_1 = require("../../../../../common");
const ClusterDeployment_1 = require("../../../ClusterDeployment");
const formik_1 = require("formik");
const helpers_1 = require("../../../helpers");
const use_translation_wrapper_1 = require("../../../../../common/hooks/use-translation-wrapper");
const useFormikHelpers_1 = require("../../../../../common/hooks/useFormikHelpers");
require("./NodePoolForm.css");
const NodePoolAgentsForm_1 = tslib_1.__importDefault(require("../../forms/NodePoolAgentsForm"));
const NodePoolForm = ({ infraEnvs, agents, index, onRemove }) => {
const { t } = (0, use_translation_wrapper_1.useTranslation)();
const { values } = (0, formik_1.useFormikContext)();
const { setValue: setCountValue } = (0, useFormikHelpers_1.useFormikHelpers)(`nodePools[${index}].count`);
const { setValue: setMinAutoscalingValue } = (0, useFormikHelpers_1.useFormikHelpers)(`nodePools[${index}].autoscaling.minReplicas`);
const { setValue: setMaxAutoscalingValue } = (0, useFormikHelpers_1.useFormikHelpers)(`nodePools[${index}].autoscaling.maxReplicas`);
const [isExpanded, setExpanded] = React.useState(true);
const infraEnvAgents = React.useMemo(() => {
const infraEnv = infraEnvs.find((ie) => { var _a; return ((_a = ie.metadata) === null || _a === void 0 ? void 0 : _a.namespace) === values.agentNamespace; });
return agents.filter((agent) => (0, ClusterDeployment_1.isAgentOfInfraEnv)(infraEnv, agent));
}, [infraEnvs, agents, values.agentNamespace]);
const { agentLabels } = values.nodePools[index];
const availableAgents = (0, helpers_1.getAgentsForSelection)(infraEnvAgents);
const matchingAgents = availableAgents.filter((agent) => {
var _a, _b, _c;
const labels = agentLabels.reduce((acc, { key, value }) => {
acc[key] = value;
return acc;
}, {});
return ((0, isMatch_js_1.default)(((_a = agent.metadata) === null || _a === void 0 ? void 0 : _a.labels) || {}, labels) &&
!((_b = agent.spec.clusterDeploymentName) === null || _b === void 0 ? void 0 : _b.name) &&
!((_c = agent.spec.clusterDeploymentName) === null || _c === void 0 ? void 0 : _c.namespace));
});
let previousNodePoolsCount = 0;
for (let i = 0; i < index; i++) {
previousNodePoolsCount += values.nodePools[i].useAutoscaling
? values.nodePools[i].autoscaling.maxReplicas
: values.nodePools[i].count;
}
const maxAgents = Math.max(0, Math.min(matchingAgents.length, availableAgents.length - previousNodePoolsCount));
const currentCount = values.nodePools[index].useAutoscaling
? values.nodePools[index].autoscaling.maxReplicas
: values.nodePools[index].count;
React.useEffect(() => {
if (currentCount > maxAgents) {
if (values.nodePools[index].useAutoscaling) {
if (maxAgents === 0) {
void setMinAutoscalingValue(maxAgents);
}
void setMaxAutoscalingValue(maxAgents);
}
else {
void setCountValue(maxAgents);
}
}
}, [
maxAgents,
currentCount,
values.nodePools,
index,
setCountValue,
setMinAutoscalingValue,
setMaxAutoscalingValue,
]);
return (React.createElement(react_core_1.Stack, { hasGutter: true },
React.createElement(react_core_1.StackItem, null,
React.createElement(react_core_1.Level, { hasGutter: true },
React.createElement(react_core_1.LevelItem, null,
React.createElement(react_core_1.Flex, { alignItems: { default: 'alignItemsCenter' }, spaceItems: { default: 'spaceItemsMd' }, flexWrap: { default: 'wrap' } },
React.createElement(react_core_1.FlexItem, null,
React.createElement(react_core_1.Split, { className: "ai-node-pool__header" },
React.createElement(react_core_1.SplitItem, null,
React.createElement(react_core_1.ExpandableSectionToggle, { className: "ai-node-pool__expandable-button", isExpanded: isExpanded, onToggle: setExpanded })),
React.createElement(react_core_1.SplitItem, null,
React.createElement(common_1.PencilEditField, { name: `nodePools.${index}.nodePoolName`, isRequired: true, showErrorMessage: false })))),
!isExpanded && (React.createElement(React.Fragment, null,
React.createElement(react_core_1.FlexItem, null,
React.createElement(react_core_1.Divider, { orientation: { default: 'vertical' } })),
React.createElement(react_core_1.FlexItem, null,
React.createElement(react_core_1.Label, { variant: "outline" }, t('ai:{{count}} filtering label', {
count: values.nodePools[index].agentLabels.length,
}))))))),
index !== 0 && (React.createElement(react_core_1.LevelItem, null,
React.createElement(react_core_1.Button, { variant: "link", icon: React.createElement(trash_icon_1.TrashIcon, null), onClick: onRemove }))))),
isExpanded && (React.createElement(react_core_1.StackItem, { className: "ai-node-pool__section" },
React.createElement(NodePoolAgentsForm_1.default, { agents: infraEnvAgents, countName: `nodePools.${index}.count`, labelName: `nodePools.${index}.agentLabels`, autoscalingName: `nodePools.${index}.autoscaling`, useAutoscalingName: `nodePools.${index}.useAutoscaling`, maxAgents: maxAgents })))));
};
exports.default = NodePoolForm;
//# sourceMappingURL=NodePoolForm.js.map