@skbkontur/cassandra-distributed-task-queue-ui
Version:
.NET library implementing distributed task queue machinery using Apache Cassandra
209 lines • 12.3 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.TasksPageContainer = exports.searchRequestMapping = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_stack_layout_1 = require("@skbkontur/react-stack-layout");
const react_ui_1 = require("@skbkontur/react-ui");
const react_1 = require("react");
const react_router_dom_1 = require("react-router-dom");
const TaskState_1 = require("../Domain/Api/TaskState");
const QueryStringMappingBuilder_1 = require("../Domain/QueryStringMapping/QueryStringMappingBuilder");
const QueryStringMappingExtensions_1 = require("../Domain/QueryStringMapping/QueryStringMappingExtensions");
const RtqMonitoringSearchRequestUtils_1 = require("../Domain/RtqMonitoringSearchRequestUtils");
const RangeSelector_1 = require("../components/DateTimeRangePicker/RangeSelector");
const ErrorHandlingContainer_1 = require("../components/ErrorHandling/ErrorHandlingContainer");
const CommonLayout_1 = require("../components/Layouts/CommonLayout");
const TaskQueueFilter_1 = require("../components/TaskQueueFilter/TaskQueueFilter");
const TaskTable_1 = require("../components/TaskTable/TaskTable");
const TasksModal_1 = require("../components/TaskTable/TasksModal");
const maxTaskCountOnPage = 20;
exports.searchRequestMapping = new QueryStringMappingBuilder_1.QueryStringMappingBuilder()
.mapToDateTimeRange(x => x.enqueueTimestampRange, "enqueue")
.mapToString(x => x.queryString, "q")
.mapToStringArray(x => x.names, "types")
.mapToSet(x => x.states, "states", (0, QueryStringMappingExtensions_1.getEnumValues)(Object.keys(TaskState_1.TaskState)))
.mapToInteger(x => x.offset, "from")
.mapToInteger(x => x.count, "size")
.build();
const TasksPageContainer = ({ rtqMonitoringApi, isSuperUser, useErrorHandlingContainer, useFrontPaging, }) => {
const navigate = (0, react_router_dom_1.useNavigate)();
const { search, pathname } = (0, react_router_dom_1.useLocation)();
const [loading, setLoading] = (0, react_1.useState)(false);
const [request, setRequest] = (0, react_1.useState)((0, RtqMonitoringSearchRequestUtils_1.createDefaultRemoteTaskQueueSearchRequest)());
const [availableTaskNames, setAvailableTaskNames] = (0, react_1.useState)([]);
const [confirmMultipleModalOpened, setConfirmMultipleModalOpened] = (0, react_1.useState)(false);
const [modalType, setModalType] = (0, react_1.useState)("Rerun");
const [results, setResults] = (0, react_1.useState)({
taskMetas: [],
totalCount: "0",
});
const [visibleTasks, setVisibleTasks] = (0, react_1.useState)([]);
const [chosenTasks, setChosenTasks] = (0, react_1.useState)(new Set());
const isAllTasksChosen = chosenTasks.size === visibleTasks.length;
(0, react_1.useEffect)(() => {
const newRequest = getRequestBySearchQuery(search);
if (useFrontPaging && request.offset !== newRequest.offset) {
const offset = newRequest.offset || 0;
setVisibleTasks(results.taskMetas.slice(offset, offset + maxTaskCountOnPage));
}
else {
loadData(useFrontPaging ? Object.assign(Object.assign({}, newRequest), { offset: 0 }) : Object.assign(Object.assign({}, newRequest), { count: maxTaskCountOnPage }));
}
setRequest(newRequest);
}, [search]);
const getTaskLocation = (id) => ({
pathname: `${pathname}/${id}`,
state: {
parentLocation: {
pathname,
search: exports.searchRequestMapping.stringify(request),
},
},
});
const handleTaskCheck = (id) => {
const nextValue = new Set(chosenTasks);
if (nextValue.has(id)) {
nextValue.delete(id);
}
else {
nextValue.add(id);
}
setChosenTasks(nextValue);
};
const handleCheckAll = () => {
if (isAllTasksChosen) {
setChosenTasks(new Set());
}
else {
const ids = visibleTasks.map(x => x.id);
setChosenTasks(new Set(ids));
}
};
const handleSearch = () => {
let newRequest = Object.assign({}, request);
if ((0, RtqMonitoringSearchRequestUtils_1.isRemoteTaskQueueSearchRequestEmpty)(request)) {
newRequest = (0, RtqMonitoringSearchRequestUtils_1.createDefaultRemoteTaskQueueSearchRequest)();
}
if (!newRequest.enqueueTimestampRange.lowerBound || !newRequest.enqueueTimestampRange.upperBound) {
const rangeSelector = new RangeSelector_1.RangeSelector(undefined);
newRequest.enqueueTimestampRange = rangeSelector.getToday();
}
const query = getQuery(newRequest);
if (query === pathname + search) {
loadData(newRequest);
return;
}
navigate(query);
};
const clickMassRerun = () => {
setConfirmMultipleModalOpened(true);
setModalType("Rerun");
};
const clickMassCancel = () => {
setConfirmMultipleModalOpened(true);
setModalType("Cancel");
};
const closeModal = () => setConfirmMultipleModalOpened(false);
const handleRerunTasks = (ids) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
setLoading(true);
try {
yield rtqMonitoringApi.rerunTasks(ids);
}
finally {
setLoading(false);
}
});
const handleCancelTasks = (ids) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
setLoading(true);
try {
yield rtqMonitoringApi.cancelTasks(ids);
}
finally {
setLoading(false);
}
});
const handleMassRerun = () => {
if (chosenTasks.size > 0) {
handleRerunTasks([...chosenTasks]);
}
else {
rerunAll();
}
};
const handleMassCancel = () => {
if (chosenTasks.size > 0) {
handleCancelTasks([...chosenTasks]);
}
else {
cancelAll();
}
};
const getRequestBySearchQuery = (searchQuery) => {
const request = exports.searchRequestMapping.parse(searchQuery);
request.offset || (request.offset = 0);
request.count = useFrontPaging ? request.count : request.count || maxTaskCountOnPage;
return request;
};
const getQuery = (overrides = {}) => pathname + exports.searchRequestMapping.stringify(Object.assign(Object.assign({}, request), overrides));
const goToPage = (page) => {
navigate(getQuery({ offset: (page - 1) * maxTaskCountOnPage }));
};
const onChangeFilter = (value) => setRequest(Object.assign(Object.assign({}, request), value));
const isStateCompletelyLoaded = results && availableTaskNames;
const offset = request.offset || 0;
const counter = Number((results && results.totalCount) || 0);
const massActionTarget = chosenTasks.size > 0 ? "Chosen" : "All";
return ((0, jsx_runtime_1.jsxs)(CommonLayout_1.CommonLayout, { children: [(0, jsx_runtime_1.jsx)(CommonLayout_1.CommonLayout.Header, { "data-tid": "Header", title: "\u0421\u043F\u0438\u0441\u043E\u043A \u0437\u0430\u0434\u0430\u0447" }), (0, jsx_runtime_1.jsxs)(CommonLayout_1.CommonLayout.Content, { children: [useErrorHandlingContainer && (0, jsx_runtime_1.jsx)(ErrorHandlingContainer_1.ErrorHandlingContainer, {}), (0, jsx_runtime_1.jsx)(react_stack_layout_1.ColumnStack, { block: true, stretch: true, gap: 2, children: (0, jsx_runtime_1.jsxs)(react_ui_1.Loader, { type: "big", active: loading, "data-tid": "Loader", children: [(0, jsx_runtime_1.jsx)(react_stack_layout_1.Fit, { children: (0, jsx_runtime_1.jsx)(TaskQueueFilter_1.TaskQueueFilter, { value: request, availableTaskTypes: availableTaskNames, onChange: onChangeFilter, onSearchButtonClick: handleSearch, withTaskLimit: useFrontPaging }) }), (0, jsx_runtime_1.jsx)(react_stack_layout_1.Fit, { children: results && isStateCompletelyLoaded && ((0, jsx_runtime_1.jsxs)(react_stack_layout_1.ColumnStack, { block: true, stretch: true, gap: 2, children: [counter > 0 && (0, jsx_runtime_1.jsxs)(react_stack_layout_1.Fit, { children: ["\u0412\u0441\u0435\u0433\u043E \u0440\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u043E\u0432: ", counter] }), counter > 0 && isSuperUser && ((0, jsx_runtime_1.jsxs)(react_stack_layout_1.RowStack, { gap: 2, "data-tid": "ButtonsWrapper", verticalAlign: "center", children: [(0, jsx_runtime_1.jsxs)(react_stack_layout_1.RowStack, { verticalAlign: "center", block: true, gap: 2, children: [(0, jsx_runtime_1.jsx)(react_ui_1.Checkbox, { style: { height: 16, marginLeft: 8 }, onValueChange: handleCheckAll, checked: isAllTasksChosen }), (0, jsx_runtime_1.jsx)(react_stack_layout_1.Fixed, { width: 106, children: "\u0412\u0441\u0435 \u043D\u0430 \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0435" })] }), (0, jsx_runtime_1.jsx)(react_stack_layout_1.Fill, {}), (0, jsx_runtime_1.jsx)(react_stack_layout_1.Fit, { children: (0, jsx_runtime_1.jsxs)(react_ui_1.Button, { use: "danger", "data-tid": "CancelAllButton", onClick: clickMassCancel, children: ["Cancel ", massActionTarget] }) }), (0, jsx_runtime_1.jsx)(react_stack_layout_1.Fit, { children: (0, jsx_runtime_1.jsxs)(react_ui_1.Button, { use: "success", "data-tid": "RerunAllButton", onClick: clickMassRerun, children: ["Rerun ", massActionTarget] }) })] })), (0, jsx_runtime_1.jsx)(react_stack_layout_1.Fit, { children: (0, jsx_runtime_1.jsx)(TaskTable_1.TasksTable, { getTaskLocation: getTaskLocation, allowRerunOrCancel: isSuperUser, taskInfos: visibleTasks, chosenTasks: chosenTasks, onRerun: id => handleRerunTasks([id]), onCancel: id => handleCancelTasks([id]), onCheck: handleTaskCheck }) }), (0, jsx_runtime_1.jsx)(react_stack_layout_1.Fit, { children: Math.ceil(counter / maxTaskCountOnPage) > 1 && ((0, jsx_runtime_1.jsx)(react_ui_1.Paging, { "data-tid": "Paging", activePage: Math.floor(offset / maxTaskCountOnPage) + 1, pagesCount: Math.ceil(Math.min(counter, 10000) / maxTaskCountOnPage), onPageChange: goToPage })) })] })) })] }) }), confirmMultipleModalOpened && ((0, jsx_runtime_1.jsx)(TasksModal_1.TasksModal, { modalType: modalType, counter: chosenTasks.size || counter, onCancelAll: handleMassCancel, onRerunAll: handleMassRerun, onCloseModal: closeModal }))] })] }));
function loadData(request) {
return tslib_1.__awaiter(this, void 0, void 0, function* () {
if (availableTaskNames.length === 0) {
const newAvailableTaskNames = yield rtqMonitoringApi.getAllTaskNames();
if (newAvailableTaskNames.length === 0) {
throw new Error("Expected availableTaskNames to contain elements");
}
setAvailableTaskNames(newAvailableTaskNames);
}
if ((0, RtqMonitoringSearchRequestUtils_1.isRemoteTaskQueueSearchRequestEmpty)(request)) {
return;
}
setLoading(true);
try {
const results = yield rtqMonitoringApi.search(request);
setResults(results);
setVisibleTasks(useFrontPaging ? results.taskMetas.slice(offset, offset + maxTaskCountOnPage) : results.taskMetas);
}
finally {
setLoading(false);
}
});
}
function cancelAll() {
return tslib_1.__awaiter(this, void 0, void 0, function* () {
const request = getRequestBySearchQuery(search);
setLoading(true);
try {
yield rtqMonitoringApi.cancelTasksBySearchQuery(request);
}
finally {
setLoading(false);
setConfirmMultipleModalOpened(false);
}
});
}
function rerunAll() {
return tslib_1.__awaiter(this, void 0, void 0, function* () {
const request = getRequestBySearchQuery(search);
setLoading(true);
try {
yield rtqMonitoringApi.rerunTasksBySearchQuery(request);
}
finally {
setLoading(false);
setConfirmMultipleModalOpened(false);
}
});
}
};
exports.TasksPageContainer = TasksPageContainer;
//# sourceMappingURL=TasksPageContainer.js.map