@openshift-assisted/ui-lib
Version:
React component library for the Assisted Installer UI
57 lines • 3.6 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.OperatorsStep = void 0;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importDefault(require("react"));
const react_core_1 = require("@patternfly/react-core");
const common_1 = require("../../../common");
const OperatorsBundle_1 = tslib_1.__importDefault(require("./OperatorsBundle"));
const OperatorsSelect_1 = tslib_1.__importDefault(require("./OperatorsSelect"));
const BundleService_1 = tslib_1.__importDefault(require("../../services/BundleService"));
const hooks_1 = require("../../hooks");
const OperatorsStep = ({ cluster }) => {
const { addAlert } = (0, common_1.useAlerts)();
const [bundlesLoading, setBundlesLoading] = react_1.default.useState(true);
const [bundles, setBundles] = react_1.default.useState([]);
const { preflightRequirements, isLoading } = (0, hooks_1.useClusterPreflightRequirements)(cluster.id);
const [searchTerm, setSearchTerm] = react_1.default.useState('');
react_1.default.useEffect(() => {
const fetchBundles = () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
try {
const fetchedBundles = yield BundleService_1.default.listBundles();
setBundles(fetchedBundles);
}
catch (error) {
(0, common_1.handleApiError)(error, () => addAlert({
title: 'Failed to fetch operator bundles',
message: (0, common_1.getApiErrorMessage)(error),
}));
}
finally {
setBundlesLoading(false);
}
});
void fetchBundles();
}, [addAlert]);
const filteredBundles = bundles.filter((bundle) => {
var _a, _b;
return ((_a = bundle.title) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(searchTerm.toLowerCase())) ||
((_b = bundle.description) === null || _b === void 0 ? void 0 : _b.toLowerCase().includes(searchTerm.toLowerCase()));
});
if (isLoading || bundlesLoading) {
return react_1.default.createElement(common_1.LoadingState, null);
}
return (react_1.default.createElement(react_core_1.Stack, { hasGutter: true, "data-testid": 'operators-page' },
react_1.default.createElement(react_core_1.StackItem, null,
react_1.default.createElement(react_core_1.Flex, { justifyContent: { default: 'justifyContentSpaceBetween' }, alignItems: { default: 'alignItemsCenter' } },
react_1.default.createElement(react_core_1.FlexItem, null,
react_1.default.createElement(common_1.ClusterWizardStepHeader, null, "Operators")),
react_1.default.createElement(react_core_1.FlexItem, { style: { minWidth: '300px' } },
react_1.default.createElement(react_core_1.SearchInput, { placeholder: 'Find bundles or operators', value: searchTerm, onChange: (_e, value) => setSearchTerm(value), onClear: () => setSearchTerm('') })))),
react_1.default.createElement(react_core_1.StackItem, null,
react_1.default.createElement(OperatorsBundle_1.default, { bundles: filteredBundles, preflightRequirements: preflightRequirements, searchTerm: searchTerm })),
react_1.default.createElement(react_core_1.StackItem, null,
react_1.default.createElement(OperatorsSelect_1.default, { bundles: bundles, cluster: cluster, preflightRequirements: preflightRequirements, searchTerm: searchTerm }))));
};
exports.OperatorsStep = OperatorsStep;
//# sourceMappingURL=OperatorsStep.js.map