Add filter for tasks limit and add paging on front

skbkontur · Dec 11, 2023 · 5c875bb · 5c875bb
1 parent 35b9b6e
commit 5c875bb
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 18 deletions.
diff --git a/cassandra-distributed-task-queue-ui/src/Domain/RtqMonitoringSearchRequestUtils.tsx b/cassandra-distributed-task-queue-ui/src/Domain/RtqMonitoringSearchRequestUtils.tsx
@@ -16,7 +16,6 @@ export function createDefaultRemoteTaskQueueSearchRequest(): RtqMonitoringSearch
         states: null,
         names: null,
         offset: 0,
-        count: 20,
     };
 }
 

diff --git a/cassandra-distributed-task-queue-ui/src/RemoteTaskQueueApplication.tsx b/cassandra-distributed-task-queue-ui/src/RemoteTaskQueueApplication.tsx
@@ -16,6 +16,7 @@ interface RemoteTaskQueueApplicationProps {
     customStateCaptions?: TaskStateDict;
     customSearchHelp?: JSX.Element;
     hideMissingMeta?: boolean;
+    isNotPagingOnBackend?: boolean;
 }
 
 export const RemoteTaskQueueApplication = ({
@@ -26,6 +27,7 @@ export const RemoteTaskQueueApplication = ({
     customStateCaptions,
     customSearchHelp,
     hideMissingMeta,
+    isNotPagingOnBackend,
 }: RemoteTaskQueueApplicationProps): JSX.Element => (
     <CustomSettingsProvider
         customStateCaptions={customStateCaptions}
@@ -40,6 +42,7 @@ export const RemoteTaskQueueApplication = ({
                         isSuperUser={isSuperUser}
                         rtqMonitoringApi={rtqMonitoringApi}
                         useErrorHandlingContainer={useErrorHandlingContainer}
+                        isNotPagingOnBackend={isNotPagingOnBackend}
                     />
                 }
             />

diff --git a/cassandra-distributed-task-queue-ui/src/components/TaskQueueFilter/TaskQueueFilter.tsx b/cassandra-distributed-task-queue-ui/src/components/TaskQueueFilter/TaskQueueFilter.tsx
@@ -1,4 +1,4 @@
-import { ColumnStack, Fill, Fit, RowStack } from "@skbkontur/react-stack-layout";
+import { ColumnStack, Fill, Fit, Fixed, RowStack } from "@skbkontur/react-stack-layout";
 import { Button, Input, Link } from "@skbkontur/react-ui";
 import React from "react";
 import type { JSX } from "react";
@@ -34,7 +34,7 @@ export function TaskQueueFilter({
         setOpenedModal(false);
     };
 
-    const { enqueueTimestampRange, queryString, states, names } = value;
+    const { enqueueTimestampRange, queryString, states, names, count } = value;
     const defaultEnqueueDateTimeRange = {
         lowerBound: null,
         upperBound: null,
@@ -49,7 +49,7 @@ export function TaskQueueFilter({
                             data-tid={"SearchStringInput"}
                             value={queryString || ""}
                             onValueChange={value => onChange({ queryString: value })}
-                            onKeyPress={e => {
+                            onKeyDown={e => {
                                 if (e.key === "Enter") {
                                     onSearchButtonClick();
                                 }
@@ -64,6 +64,15 @@ export function TaskQueueFilter({
                     </Fit>
                 </ColumnStack>
             </Fill>
+            <Fixed width={72}>
+                <Input
+                    width="100%"
+                    data-tid="MaxInput"
+                    placeholder="Max"
+                    value={String(count)}
+                    onValueChange={value => onChange({ count: Number(value) })}
+                />
+            </Fixed>
             <Fit>
                 <DateTimeRangePicker
                     data-tid="DateTimeRangePicker"

diff --git a/cassandra-distributed-task-queue-ui/src/containers/TasksPageContainer.tsx b/cassandra-distributed-task-queue-ui/src/containers/TasksPageContainer.tsx
@@ -6,6 +6,7 @@ import { Location, useLocation, useNavigate } from "react-router-dom";
 import { IRtqMonitoringApi } from "../Domain/Api/RtqMonitoringApi";
 import { RtqMonitoringSearchRequest } from "../Domain/Api/RtqMonitoringSearchRequest";
 import { RtqMonitoringSearchResults } from "../Domain/Api/RtqMonitoringSearchResults";
+import { RtqMonitoringTaskMeta } from "../Domain/Api/RtqMonitoringTaskMeta";
 import { TaskState } from "../Domain/Api/TaskState";
 import { QueryStringMapping } from "../Domain/QueryStringMapping/QueryStringMapping";
 import { QueryStringMappingBuilder } from "../Domain/QueryStringMapping/QueryStringMappingBuilder";
@@ -25,8 +26,11 @@ interface TasksPageContainerProps {
     rtqMonitoringApi: IRtqMonitoringApi;
     isSuperUser: boolean;
     useErrorHandlingContainer: boolean;
+    isNotPagingOnBackend?: boolean;
 }
 
+const maxTaskCountOnPage = 20;
+
 export const searchRequestMapping: QueryStringMapping<RtqMonitoringSearchRequest> =
     new QueryStringMappingBuilder<RtqMonitoringSearchRequest>()
         .mapToDateTimeRange(x => x.enqueueTimestampRange, "enqueue")
@@ -41,6 +45,7 @@ export const TasksPageContainer = ({
     rtqMonitoringApi,
     isSuperUser,
     useErrorHandlingContainer,
+    isNotPagingOnBackend,
 }: TasksPageContainerProps): JSX.Element => {
     const navigate = useNavigate();
     const { search, pathname } = useLocation();
@@ -53,13 +58,19 @@ export const TasksPageContainer = ({
         taskMetas: [],
         totalCount: "0",
     });
+    const [visibleTasks, setVisibleTasks] = useState<RtqMonitoringTaskMeta[]>([]);
     const [chosenTasks, setChosenTasks] = useState(new Set<string>());
-    const isAllTasksChosen = chosenTasks.size === results.taskMetas.length;
+    const isAllTasksChosen = chosenTasks.size === visibleTasks.length;
 
     useEffect(() => {
         const newRequest = getRequestBySearchQuery(search);
-        loadData(newRequest);
-        setRequest(newRequest);
+        if (isNotPagingOnBackend && results.taskMetas.length !== 0) {
+            const { offset } = newRequest;
+            setVisibleTasks(results.taskMetas.slice(offset || 0, maxTaskCountOnPage));
+        } else {
+            loadData(newRequest);
+            setRequest(newRequest);
+        }
     }, [search]);
 
     const getTaskLocation = (id: string): string | Partial<Location> => ({
@@ -86,7 +97,7 @@ export const TasksPageContainer = ({
         if (isAllTasksChosen) {
             setChosenTasks(new Set());
         } else {
-            const ids = results.taskMetas.map(x => x.id);
+            const ids = visibleTasks.map(x => x.id);
             setChosenTasks(new Set(ids));
         }
     };
@@ -102,10 +113,6 @@ export const TasksPageContainer = ({
         }
 
         const query = getQuery(newRequest);
-        if (query === pathname + search) {
-            loadData(newRequest);
-            return;
-        }
         navigate(query);
     };
 
@@ -158,22 +165,21 @@ export const TasksPageContainer = ({
     const getRequestBySearchQuery = (searchQuery: string): RtqMonitoringSearchRequest => {
         const request: RtqMonitoringSearchRequest = searchRequestMapping.parse(searchQuery);
         request.offset ||= 0;
-        request.count ||= 20;
+        request.count = isNotPagingOnBackend ? request.count : request.count || maxTaskCountOnPage;
         return request;
     };
 
     const getQuery = (overrides: Partial<RtqMonitoringSearchRequest> = {}): string =>
         pathname + searchRequestMapping.stringify({ ...request, ...overrides });
 
     const goToPage = (page: number) => {
-        const count = request.count || 20;
-        navigate(getQuery({ offset: (page - 1) * count }));
+        navigate(getQuery({ offset: (page - 1) * maxTaskCountOnPage }));
     };
 
     const onChangeFilter = (value: Partial<RtqMonitoringSearchRequest>) => setRequest({ ...request, ...value });
 
     const isStateCompletelyLoaded = results && availableTaskNames;
-    const count = request.count || 20;
+    const count = request.count || maxTaskCountOnPage;
     const offset = request.offset || 0;
     const counter = Number((results && results.totalCount) || 0);
     const massActionTarget = chosenTasks.size > 0 ? "Chosen" : "All";
@@ -230,7 +236,7 @@ export const TasksPageContainer = ({
                                         <TasksTable
                                             getTaskLocation={getTaskLocation}
                                             allowRerunOrCancel={isSuperUser}
-                                            taskInfos={results.taskMetas}
+                                            taskInfos={visibleTasks}
                                             chosenTasks={chosenTasks}
                                             onRerun={id => handleRerunTasks([id])}
                                             onCancel={id => handleCancelTasks([id])}
@@ -280,8 +286,15 @@ export const TasksPageContainer = ({
 
         setLoading(true);
         try {
-            const results = await rtqMonitoringApi.search(request);
+            const results = await rtqMonitoringApi.search(
+                isNotPagingOnBackend ? { ...request, offset: 0 } : { ...request, count: maxTaskCountOnPage }
+            );
             setResults(results);
+            if (isNotPagingOnBackend) {
+                setVisibleTasks(results.taskMetas.slice(offset || 0, maxTaskCountOnPage));
+            } else {
+                setVisibleTasks(results.taskMetas);
+            }
         } finally {
             setLoading(false);
         }