@openshift-assisted/ui-lib
Version:
React component library for the Assisted Installer UI
55 lines • 4.61 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.LabelSelectorGroup = exports.infraEnvLabelKeys = void 0;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importDefault(require("react"));
const flatten_js_1 = tslib_1.__importDefault(require("lodash-es/flatten.js"));
const react_core_1 = require("@patternfly/react-core");
const formik_1 = require("formik");
const common_1 = require("../../../common");
const common_2 = require("../common");
const use_translation_wrapper_1 = require("../../../common/hooks/use-translation-wrapper");
require("./LabelSelector.css");
exports.infraEnvLabelKeys = [common_2.INFRAENV_AGENTINSTALL_LABEL_KEY, common_2.AGENT_LOCATION_LABEL_KEY];
const getSelectOptions = (agents, labelKeysFilter) => Array.from(new Set((0, flatten_js_1.default)(agents.map((agent) => {
var _a;
return Object.keys(((_a = agent.metadata) === null || _a === void 0 ? void 0 : _a.labels) || {})
.filter((k) => !(labelKeysFilter === null || labelKeysFilter === void 0 ? void 0 : labelKeysFilter.includes(k)))
.map((k) => { var _a, _b; return `${k}=${((_b = (_a = agent.metadata) === null || _a === void 0 ? void 0 : _a.labels) === null || _b === void 0 ? void 0 : _b[k]) || ''}`; });
})))).map((value) => ({
id: value,
value: value,
displayName: value,
}));
const LabelsSelector = ({ agents, labelKeysFilter, name = 'agentLabels', label, }) => {
const { t } = (0, use_translation_wrapper_1.useTranslation)();
const agentLabelOptions = getSelectOptions(agents, labelKeysFilter);
return (react_1.default.createElement(common_1.MultiSelectField, { idPostfix: "agentLabels", name: name, label: label || t('ai:Labels matching hosts'), placeholderText: "app=frontend", helperText: t('ai:Provide as many labels as you can to narrow the list to relevant hosts only.'), options: agentLabelOptions }));
};
exports.default = LabelsSelector;
const LabelSelectorGroup = ({ agents, labelKeysFilter, name = 'agentLabels', label, }) => {
const { t } = (0, use_translation_wrapper_1.useTranslation)();
const [addLabelOpen, setAddLabelOpen] = react_1.default.useState(false);
const [field, , { setValue }] = (0, formik_1.useField)(name);
const options = getSelectOptions(agents, labelKeysFilter);
const availableOptions = options.filter((option) => !(field.value || [])
.map(({ key, value }) => `${key}=${value}`)
.includes(option.value));
const children = availableOptions.length
? availableOptions.map((option) => (react_1.default.createElement(react_core_1.DropdownItem, { key: option.id, id: option.id, onClick: () => {
const values = option.value.split('=', 2);
setValue([...field.value, { key: values[0], value: values[1] }]);
} }, option.displayName)))
: [
react_1.default.createElement(react_core_1.DropdownItem, { key: "no-option", isDisabled: true }, t('ai:No label available')),
];
const categoryName = label || t('ai:Filter hosts by existing labels');
return (react_1.default.createElement(react_core_1.Split, { hasGutter: true, className: "pf-v5-c-label-group pf-m-category ai-split-filter-hosts" },
react_1.default.createElement(react_core_1.SplitItem, null, field.value.length ? (react_1.default.createElement(react_core_1.LabelGroup, { categoryName: categoryName, className: "ai-group-label-selector" }, field.value.map(({ key, value }) => (react_1.default.createElement(react_core_1.Label, { key: key, onClose: () => setValue(field.value.filter((value) => value.key !== key)) }, `${key}=${value}`))))) : (react_1.default.createElement("span", { className: "pf-v5-c-label-group__label" }, categoryName))),
react_1.default.createElement(react_core_1.SplitItem, null,
react_1.default.createElement(react_core_1.Dropdown, { isOpen: addLabelOpen, onSelect: () => setAddLabelOpen(false), onOpenChange: () => setAddLabelOpen(!addLabelOpen), toggle: (toggleRef) => (react_1.default.createElement(react_core_1.MenuToggle, { variant: "plain", className: "pf-v5-u-w-100", ref: toggleRef, isFullWidth: true, onClick: () => setAddLabelOpen(!addLabelOpen), isExpanded: addLabelOpen },
react_1.default.createElement(react_core_1.Label, { color: "blue", variant: "outline", className: "pf-m-overflow" }, t('ai:Add label')))), shouldFocusToggleOnSelect: true },
react_1.default.createElement(react_core_1.DropdownList, null, children)))));
};
exports.LabelSelectorGroup = LabelSelectorGroup;
//# sourceMappingURL=LabelsSelector.js.map