Support date range filters on request history logs

Author: synzen

services/backend-api/client/src/features/feed/api/getUserFeedRequests.ts

@@ -7,6 +7,8 @@ export interface GetUserFeedRequestsInput {
   data: {
     limit: number;
     skip: number;
+    afterDate?: string;
+    beforeDate?: string;
   };
 }
 
@@ -34,6 +36,14 @@ export const getUserFeedRequests = async ({
   params.append("limit", data.limit.toString());
   params.append("skip", data.skip.toString());
 
+  if (data.afterDate) {
+    params.append("afterDate", data.afterDate);
+  }
+
+  if (data.beforeDate) {
+    params.append("beforeDate", data.beforeDate);
+  }
+
   const query = params.toString();
 
   const res = await fetchRest(`/api/v1/user-feeds/${feedId}/requests?${query}`, {

services/backend-api/client/src/features/feed/components/UserFeedLogs/RequestHistory/index.tsx

@@ -6,8 +6,11 @@ import {
   Center,
   Divider,
   Flex,
+  FormControl,
+  FormLabel,
   HStack,
   Heading,
+  Input,
   Popover,
   PopoverArrow,
   PopoverBody,
@@ -29,12 +32,14 @@ import {
 import { useTranslation } from "react-i18next";
 import dayjs from "dayjs";
 import { QuestionOutlineIcon, Search2Icon } from "@chakra-ui/icons";
-import { forwardRef } from "react";
+import { forwardRef, useEffect, useState } from "react";
 import { useUserFeedRequestsWithPagination } from "../../../hooks";
 import { UserFeedRequestStatus } from "../../../types";
 import { InlineErrorAlert } from "../../../../../components";
 import { useUserFeedContext } from "../../../../../contexts/UserFeedContext";
 import { RequestDetails } from "./RequestDetails";
+import { GetUserFeedRequestsInput } from "../../../api";
+import { DismissableAlert } from "../../../../../components/DismissableAlert";
 
 const QuestionOutlineComponent = forwardRef<any>((props, ref) => (
   <QuestionOutlineIcon fontSize={12} tabIndex={-1} ref={ref} aria-hidden {...props} />
@@ -84,16 +89,95 @@ export const RequestHistory = () => {
   const {
     userFeed: { id: feedId },
   } = useUserFeedContext();
+  const [startDate, setStartDate] = useState<string>();
+  const [endDate, setEndDate] = useState<string>();
+  const [requestData, setRequestData] = useState<Partial<GetUserFeedRequestsInput["data"]>>({});
   const { data, status, error, skip, nextPage, prevPage, fetchStatus, limit } =
     useUserFeedRequestsWithPagination({
       feedId,
-      data: {},
+      data: requestData,
     });
+  const [isInvalidDateRange, setIsInvalidDateRange] = useState(false);
   const { t } = useTranslation();
 
   const onFirstPage = skip === 0;
   const hasNoData = data?.result.requests.length === 0 && skip === 0;
 
+  useEffect(() => {
+    setIsInvalidDateRange(false);
+  }, [fetchStatus]);
+
+  const onApplyDateRange = () => {
+    if (fetchStatus === "fetching") {
+      return;
+    }
+
+    if (startDate && endDate && new Date(startDate) > new Date(endDate)) {
+      setIsInvalidDateRange(true);
+    } else {
+      const newDateRange = {
+        ...requestData,
+        afterDate: startDate ? new Date(startDate).toISOString() : undefined,
+        beforeDate: endDate ? new Date(endDate).toISOString() : undefined,
+      };
+      setRequestData(newDateRange);
+      setIsInvalidDateRange(false);
+    }
+  };
+
+  const dateRangeForm = (
+    <Stack
+      as="form"
+      onSubmit={(e) => {
+        e.preventDefault();
+        onApplyDateRange();
+      }}
+    >
+      <HStack flexWrap="wrap">
+        <FormControl flex={1}>
+          <FormLabel>Start Date Range</FormLabel>
+          <Input
+            bg="gray.900"
+            type="datetime-local"
+            size="sm"
+            onChange={(e) => {
+              setStartDate(e.target.value);
+            }}
+          />
+        </FormControl>
+        <FormControl flex={1}>
+          <FormLabel>End Date Range</FormLabel>
+          <Input
+            bg="gray.900"
+            type="datetime-local"
+            size="sm"
+            onChange={(e) => {
+              setEndDate(e.target.value);
+            }}
+          />
+        </FormControl>
+      </HStack>
+      {isInvalidDateRange && (
+        <DismissableAlert
+          status="error"
+          title="Invalid Date Range"
+          description="The start date must be before the end date."
+          onClosed={() => setIsInvalidDateRange(false)}
+        />
+      )}
+      <Box>
+        <Button
+          size="sm"
+          onClick={onApplyDateRange}
+          aria-disabled={fetchStatus === "fetching"}
+          type="submit"
+        >
+          Apply Date Range
+        </Button>
+      </Box>
+    </Stack>
+  );
+
   return (
     <Stack spacing={4} mb={8} border="solid 1px" borderColor="gray.700" borderRadius="md">
       <Box>
@@ -111,17 +195,17 @@ export const RequestHistory = () => {
         <Box srOnly aria-live="polite">
           {status === "loading" && (
             <span>
-              Loading request history rows ${skip + 1} through ${skip + limit}
+              Loading request history rows {skip + 1} through {skip + limit}
             </span>
           )}
           {status === "success" && (
             <span>
-              Finished loading request history rows ${skip + 1} through ${skip + limit}
+              Finished loading request history rows {skip + 1} through {skip + limit}
             </span>
           )}
           {status === "success" && fetchStatus === "fetching" && (
             <span>
-              Loading request history rows ${skip + 1} through ${skip + limit}
+              Loading request history rows {skip + 1} through {skip + limit}
             </span>
           )}
         </Box>
@@ -145,13 +229,14 @@ export const RequestHistory = () => {
           </Alert>
         )}
         {hasNoData && (
-          <Text color="whiteAlpha.700">
-            No historical requests found. This is likely because the feed has not been polled yet -
-            please check back later.
-          </Text>
+          <Stack>
+            {dateRangeForm}
+            <Text color="whiteAlpha.700">No requests found.</Text>
+          </Stack>
         )}
         {data && !hasNoData && (
           <Stack>
+            {dateRangeForm}
             <Box>
               <TableContainer>
                 <Table size="sm" variant="simple" aria-labelledby="request-history-table-title">

services/backend-api/src/features/user-feeds/dto/get-user-feed-requests-input.dto.ts

@@ -10,7 +10,6 @@ export class GetUserFeedRequestsInputDto {
   limit = 25;
 
   @IsInt()
-  @Max(1000)
   @Min(0)
   @Type(() => Number)
   @IsOptional()

services/backend-api/src/features/user-feeds/user-feeds.controller.ts

@@ -9,6 +9,7 @@ import {
   Param,
   Patch,
   Post,
+  Query,
   Res,
   UseFilters,
   UseGuards,
@@ -19,7 +20,7 @@ import { NestedFieldPipe } from "../../common/pipes/nested-field.pipe";
 import { TransformValidationPipe } from "../../common/pipes/TransformValidationPipe";
 import { DiscordAccessToken } from "../discord-auth/decorators/DiscordAccessToken";
 import { DiscordOAuth2Guard } from "../discord-auth/guards/DiscordOAuth2.guard";
-import { FastifyReply } from "fastify";
+import { FastifyReply, FastifyRequest } from "fastify";
 import { SessionAccessToken } from "../discord-auth/types/SessionAccessToken.type";
 
 import { ADD_DISCORD_CHANNEL_CONNECTION_ERROR_CODES } from "../feed-connections/filters";
@@ -39,7 +40,6 @@ import {
   GetUserFeedDailyLimitOutputDto,
   GetUserFeedDeliveryLogsInputDto,
   GetUserFeedOutputDto,
-  GetUserFeedRequestsInputDto,
   GetUserFeedsInputDto,
   GetUserFeedsOutputDto,
   UpdateUserFeedInputDto,
@@ -248,13 +248,11 @@ export class UserFeedsController {
   async getFeedRequests(
     @Param("feed", GetUserFeedsPipe())
     [{ feed }]: GetUserFeedsPipeOutput,
-    @NestedQuery(TransformValidationPipe)
-    { limit, skip }: GetUserFeedRequestsInputDto
+    @Query() query: FastifyRequest["query"]
   ) {
     return this.userFeedsService.getFeedRequests({
       url: feed.url,
-      limit,
-      skip,
+      query: query as Record<string, string>,
       feed,
     });
   }

services/backend-api/src/features/user-feeds/user-feeds.service.ts

@@ -825,14 +825,12 @@ export class UserFeedsService {
 
   async getFeedRequests({
     feed,
-    skip,
-    limit,
     url,
+    query,
   }: {
     feed: UserFeed;
-    skip: number;
-    limit: number;
     url: string;
+    query: Record<string, string>;
   }) {
     const lookupDetails = getFeedRequestLookupDetails({
       feed,
@@ -843,8 +841,7 @@ export class UserFeedsService {
     });
 
     return this.feedFetcherApiService.getRequests({
-      limit,
-      skip,
+      query,
       url: lookupDetails?.url || url,
       requestLookupKey: lookupDetails?.key,
     });

services/backend-api/src/services/feed-fetcher/feed-fetcher-api.service.ts

@@ -84,14 +84,12 @@ export class FeedFetcherApiService {
   }
 
   async getRequests(payload: {
-    limit: number;
-    skip: number;
+    query: Record<string, string>;
     url: string;
     requestLookupKey?: string;
   }) {
     const urlParams = new URLSearchParams({
-      limit: payload.limit.toString(),
-      skip: payload.skip.toString(),
+      ...payload.query,
       url: payload.url,
       lookupKey: payload.requestLookupKey || "",
     });

services/feed-requests/src/feed-fetcher/dto/get-feed-requests-input.dto.ts

@@ -27,4 +27,12 @@ export class GetFeedRequestsInputDto {
   @IsString()
   @IsOptional()
   lookupKey?: string;
+
+  @IsString()
+  @IsOptional()
+  afterDate?: string;
+
+  @IsString()
+  @IsOptional()
+  beforeDate?: string;
 }

services/feed-requests/src/feed-fetcher/feed-fetcher.service.ts

@@ -105,12 +105,21 @@ export class FeedFetcherService {
     );
   }
 
-  async getRequests({ skip, limit, url, lookupKey }: GetFeedRequestsInputDto) {
+  async getRequests({
+    skip,
+    limit,
+    url,
+    lookupKey,
+    afterDate,
+    beforeDate,
+  }: GetFeedRequestsInputDto) {
     return this.partitionedRequestsStore.getRequests({
       limit,
       skip,
       url,
       lookupKey,
+      afterDate,
+      beforeDate,
     });
   }
 

services/feed-requests/src/partitioned-requests-store/partitioned-requests-store.service.ts

@@ -256,11 +256,15 @@ export default class PartitionedRequestsStoreService {
     skip,
     url,
     lookupKey,
+    afterDate,
+    beforeDate,
   }: {
     skip: number;
     limit: number;
     url: string;
     lookupKey?: string;
+    afterDate?: string;
+    beforeDate?: string;
   }) {
     const em = this.orm.em.getConnection();
 
@@ -278,10 +282,18 @@ export default class PartitionedRequestsStoreService {
       `SELECT id, url, created_at, next_retry_date, status, response_status_code,` +
         ` fetch_options, response_headers, request_initiated_at FROM request_partitioned
        WHERE lookup_key = ?
+       ${afterDate ? 'AND created_at >= ?' : ''}
+       ${beforeDate ? 'AND created_at <= ?' : ''}
        ORDER BY created_at DESC
        LIMIT ?
        OFFSET ?`,
-      [lookupKey || url, limit, skip],
+      [
+        lookupKey || url,
+        ...(afterDate ? [afterDate] : []),
+        ...(beforeDate ? [beforeDate] : []),
+        limit,
+        skip,
+      ],
     );
 
     return results.map((result) => ({