@openshift-assisted/ui-lib
Version:
React component library for the Assisted Installer UI
95 lines • 5.55 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getOperatorsIcon = exports.getOperatorsLabel = exports.getOperatorCountString = exports.getAggregatedStatus = void 0;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importDefault(require("react"));
const react_core_1 = require("@patternfly/react-core");
const check_circle_icon_1 = require("@patternfly/react-icons/dist/js/icons/check-circle-icon");
const exclamation_circle_icon_1 = require("@patternfly/react-icons/dist/js/icons/exclamation-circle-icon");
const in_progress_icon_1 = require("@patternfly/react-icons/dist/js/icons/in-progress-icon");
const pending_icon_1 = require("@patternfly/react-icons/dist/js/icons/pending-icon");
const global_danger_color_100_1 = require("@patternfly/react-tokens/dist/js/global_danger_color_100");
const global_success_color_100_1 = require("@patternfly/react-tokens/dist/js/global_success_color_100");
const humanize_plus_1 = require("humanize-plus");
const ClusterProgressItem_1 = tslib_1.__importDefault(require("./ClusterProgressItem"));
const use_translation_wrapper_1 = require("../../hooks/use-translation-wrapper");
const operatorSpecs_1 = require("../operators/operatorSpecs");
require("./OperatorsProgressItem.css");
function getAggregatedStatus(operators) {
const operatorStates = operators.map((operator) => operator.status || 'pending');
if (operatorStates.includes('failed'))
return 'failed';
if (operatorStates.includes('progressing'))
return 'progressing';
if (operatorStates.includes('pending'))
return 'pending';
return 'available';
}
exports.getAggregatedStatus = getAggregatedStatus;
const getOperatorCountString = (count) => `${count} ${(0, humanize_plus_1.pluralize)(count, 'operator')}`;
exports.getOperatorCountString = getOperatorCountString;
function getOperatorsLabel(operators, t) {
const failedOperatorsCount = operators.filter((o) => o.status === 'failed').length;
const status = getAggregatedStatus(operators);
const operatorsCountString = (0, exports.getOperatorCountString)(operators.length);
switch (status) {
case 'available':
return t('ai:{{operatorsCountString}} installed', {
operatorsCountString: operatorsCountString,
});
case 'failed':
return operators.length > 1
? `${failedOperatorsCount}/${operatorsCountString} failed`
: `${(0, exports.getOperatorCountString)(failedOperatorsCount)} failed`;
case 'progressing':
return t('ai:Installing {{operatorsCountString}}', {
operatorsCountString: operatorsCountString,
});
default:
return t('ai:Pending - {{operatorsCountString}}', {
operatorsCountString: operatorsCountString,
});
}
}
exports.getOperatorsLabel = getOperatorsLabel;
function getOperatorsIcon(status) {
switch (status) {
case 'available':
return react_1.default.createElement(check_circle_icon_1.CheckCircleIcon, { color: global_success_color_100_1.global_success_color_100.value });
case 'failed':
return react_1.default.createElement(exclamation_circle_icon_1.ExclamationCircleIcon, { color: global_danger_color_100_1.global_danger_color_100.value });
case 'progressing':
return react_1.default.createElement(in_progress_icon_1.InProgressIcon, null);
default:
return react_1.default.createElement(pending_icon_1.PendingIcon, null);
}
}
exports.getOperatorsIcon = getOperatorsIcon;
const OperatorsPopover = ({ operators, children }) => {
const { t } = (0, use_translation_wrapper_1.useTranslation)();
const { byKey: opSpecs } = (0, operatorSpecs_1.useOperatorSpecs)();
return (react_1.default.createElement(react_core_1.Popover, { headerContent: react_1.default.createElement("div", null, t('ai:Operators')), bodyContent: react_1.default.createElement(react_core_1.List, { className: "operators-progress-item__operators-list" }, operators.map((operator) => {
var _a, _b;
let status = (_a = operator.status) !== null && _a !== void 0 ? _a : 'pending';
if (operator.status === 'available') {
status = 'installed';
}
const name = ((_b = opSpecs[operator.name || '']) === null || _b === void 0 ? void 0 : _b.title) || operator.name;
return (react_1.default.createElement(react_core_1.ListItem, { key: operator.name, title: operator.statusInfo },
name,
" ",
status));
})), minWidth: "30rem", maxWidth: "50rem" }, children));
};
const OperatorsProgressItem = ({ operators }) => {
const { t } = (0, use_translation_wrapper_1.useTranslation)();
const icon = getOperatorsIcon(getAggregatedStatus(operators));
const label = getOperatorsLabel(operators, t);
return (react_1.default.createElement(ClusterProgressItem_1.default, { icon: icon },
react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(OperatorsPopover, { operators: operators },
react_1.default.createElement(react_core_1.Button, { variant: react_core_1.ButtonVariant.link, isInline: true, "data-testid": "operators-progress-item" }, t('ai:Operators'))),
react_1.default.createElement("small", null, label))));
};
exports.default = OperatorsProgressItem;
//# sourceMappingURL=OperatorsProgressItem.js.map