@openshift-assisted/ui-lib
Version:
React component library for the Assisted Installer UI
69 lines • 5.27 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const react_core_1 = require("@patternfly/react-core");
const filter_icon_1 = require("@patternfly/react-icons/dist/js/icons/filter-icon");
const React = tslib_1.__importStar(require("react"));
const agentStatus_1 = require("../helpers/agentStatus");
const common_1 = require("../../../common");
const use_translation_wrapper_1 = require("../../../common/hooks/use-translation-wrapper");
const getStatusesForFilter = (statuses) => {
const filterStatuses = {};
const sortedStatuses = Object.keys(statuses).sort((a, b) => statuses[a].title.localeCompare(statuses[b].title));
sortedStatuses.forEach((status) => {
const { category, title } = statuses[status];
if (filterStatuses[category]) {
if (filterStatuses[category][title]) {
filterStatuses[category][title].push(status);
}
else {
filterStatuses[category] = Object.assign(Object.assign({}, filterStatuses[category]), { [title]: [status] });
}
}
else {
filterStatuses[category] = {
[title]: [status],
};
}
});
return filterStatuses;
};
const getCategoryLabels = (t) => ({
'Installation related': t('ai:Installation related'),
'Discovery related': t('ai:Discovery related'),
'Bare Metal Host related': t('ai:Bare Metal Host related'),
});
const InfraTableToolbar = (_a) => {
var { setSelectedHostIDs, massActions, hosts, statusFilter, statusCount, hostnameFilter, setHostnameFilter, setStatusFilter, selectedHostIDs } = _a, paginationProps = tslib_1.__rest(_a, ["setSelectedHostIDs", "massActions", "hosts", "statusFilter", "statusCount", "hostnameFilter", "setHostnameFilter", "setStatusFilter", "selectedHostIDs"]);
const { t } = (0, use_translation_wrapper_1.useTranslation)();
const agentStatuses = (0, agentStatus_1.agentStatus)(t);
const [statusFilterOpen, setStatusFilterOpen] = React.useState(false);
const itemIDs = React.useMemo(() => hosts.map((h) => h.id), [hosts]);
const filterStatuses = React.useMemo(() => getStatusesForFilter(agentStatuses), [agentStatuses]);
const categoryLabels = getCategoryLabels(t);
const onStatusFilterToggle = () => setStatusFilterOpen(!statusFilterOpen);
const onStatusFilterSelect = (e, value) => {
if (!(statusFilter === null || statusFilter === void 0 ? void 0 : statusFilter.includes(value))) {
const newItems = (statusFilter ? [...statusFilter, value] : [value]);
setStatusFilter(newItems);
}
else {
setStatusFilter(statusFilter === null || statusFilter === void 0 ? void 0 : statusFilter.filter((f) => f !== value));
}
};
return (React.createElement(common_1.TableToolbar, Object.assign({ selectedIDs: selectedHostIDs || [], itemIDs: itemIDs, setSelectedIDs: setSelectedHostIDs, actions: massActions, clearAllFilters: () => setStatusFilter([]) }, paginationProps),
React.createElement(react_core_1.ToolbarItem, null,
React.createElement(react_core_1.SearchInput, { placeholder: t('ai:Find by hostname'), value: hostnameFilter, onChange: (_e, value) => setHostnameFilter(value), onClear: () => setHostnameFilter(undefined) })),
React.createElement(react_core_1.ToolbarItem, null,
React.createElement(react_core_1.ToolbarFilter, { chips: statusFilter, deleteChip: (_, chip) => setStatusFilter(statusFilter === null || statusFilter === void 0 ? void 0 : statusFilter.filter((f) => f !== chip)), deleteChipGroup: () => setStatusFilter([]), categoryName: "Status" },
React.createElement(react_core_1.Dropdown, { isOpen: statusFilterOpen, onSelect: onStatusFilterSelect, onOpenChange: onStatusFilterToggle, toggle: (toggleRef) => (React.createElement(react_core_1.MenuToggle, { ref: toggleRef, isFullWidth: true, onClick: onStatusFilterToggle, isExpanded: statusFilterOpen, icon: React.createElement(filter_icon_1.FilterIcon, null) }, t('ai:Status'))), shouldFocusToggleOnSelect: true }, [
React.createElement(react_core_1.Grid, { key: "statuses", hasGutter: true, className: "table-toolbar__dropdown" }, Object.keys(filterStatuses).map((category) => (React.createElement(react_core_1.GridItem, { key: category, span: 4 },
React.createElement(react_core_1.DropdownGroup, { label: categoryLabels[category] }, Object.keys(filterStatuses[category]).map((label) => (React.createElement(react_core_1.DropdownItem, { hasCheckbox: true, key: label, value: label, isSelected: statusFilter === null || statusFilter === void 0 ? void 0 : statusFilter.includes(label) },
React.createElement(react_core_1.Split, { hasGutter: true },
React.createElement(react_core_1.SplitItem, null, label),
React.createElement(react_core_1.SplitItem, null,
React.createElement(react_core_1.Badge, { isRead: true }, statusCount[label] || 0))))))))))),
])))));
};
exports.default = InfraTableToolbar;
//# sourceMappingURL=InfraTableToolbar.js.map