feat: implement new functionality with inserted_at__gte in findings a… (#6864)

ui/app/(prowler)/findings/page.tsx

@@ -1,4 +1,5 @@
 import { Spacer } from "@nextui-org/react";
+import { format, subDays } from "date-fns";
 import React, { Suspense } from "react";
 
 import { getFindings, getMetadataInfo } from "@/actions/findings";
@@ -31,7 +32,21 @@ export default async function Findings({
   // Make sure the sort is correctly encoded
   const encodedSort = sort?.replace(/^\+/, "");
 
+  const twoDaysAgo = format(subDays(new Date(), 2), "yyyy-MM-dd");
+
+  // Check if the searchParams contain any date or scan filter
+  const hasDateOrScanFilter = Object.keys(searchParams).some(
+    (key) => key.includes("inserted_at") || key.includes("scan__in"),
+  );
+
+  // Default filters for getMetadataInfo
+  const defaultFilters: Record<string, string> = hasDateOrScanFilter
+    ? {} // Do not apply default filters if there are date or scan filters
+    : { "filter[inserted_at__gte]": twoDaysAgo };
+
+  // Extract all filter parameters and combine with default filters
   const filters: Record<string, string> = {
+    ...defaultFilters,
     ...Object.fromEntries(
       Object.entries(searchParams)
         .filter(([key]) => key.startsWith("filter["))
@@ -44,11 +59,15 @@ export default async function Findings({
 
   const query = filters["filter[search]"] || "";
 
-  const metadataInfoData = await getMetadataInfo({
-    query,
-    sort: encodedSort,
-    filters,
-  });
+  const [metadataInfoData, providersData, scansData] = await Promise.all([
+    getMetadataInfo({
+      query,
+      sort: encodedSort,
+      filters,
+    }),
+    getProviders({}),
+    getScans({}),
+  ]);
 
   // Extract unique regions and services from the new endpoint
   const uniqueRegions = metadataInfoData?.data?.attributes?.regions || [];
@@ -56,8 +75,6 @@ export default async function Findings({
   const uniqueResourceTypes =
     metadataInfoData?.data?.attributes?.resource_types || [];
   // Get findings data
-  const providersData = await getProviders({});
-  const scansData = await getScans({});
 
   // Extract provider UIDs
   const providerUIDs = Array.from(
@@ -141,7 +158,20 @@ const SSRDataTable = async ({
   // Make sure the sort is correctly encoded
   const encodedSort = sort.replace(/^\+/, "");
 
+  const twoDaysAgo = format(subDays(new Date(), 2), "yyyy-MM-dd");
+
+  // Check if the searchParams contain any date or scan filter
+  const hasDateOrScanFilter = Object.keys(searchParams).some(
+    (key) => key.includes("inserted_at") || key.includes("scan__in"),
+  );
+
+  // Default filters for getFindings
+  const defaultFilters: Record<string, string> = hasDateOrScanFilter
+    ? {} // Do not apply default filters if there are date or scan filters
+    : { "filter[inserted_at__gte]": twoDaysAgo };
+
   const filters: Record<string, string> = {
+    ...defaultFilters,
     ...Object.fromEntries(
       Object.entries(searchParams)
         .filter(([key]) => key.startsWith("filter["))
@@ -190,10 +220,18 @@ const SSRDataTable = async ({
   };
 
   return (
-    <DataTable
-      columns={ColumnFindings}
-      data={expandedResponse?.data || []}
-      metadata={findingsData?.meta}
-    />
+    <>
+      {findingsData?.errors && (
+        <div className="mb-4 flex rounded-lg border border-red-500 bg-red-100 p-2 text-small text-red-700">
+          <p className="mr-2 font-semibold">Error:</p>
+          <p>{findingsData.errors[0].detail}</p>
+        </div>
+      )}
+      <DataTable
+        columns={ColumnFindings}
+        data={expandedResponse?.data || []}
+        metadata={findingsData?.meta}
+      />
+    </>
   );
 };

ui/app/(prowler)/page.tsx

@@ -1,4 +1,5 @@
 import { Spacer } from "@nextui-org/react";
+import { format, subDays } from "date-fns";
 import { Suspense } from "react";
 
 import { getFindings } from "@/actions/findings/findings";
@@ -131,9 +132,12 @@ const SSRDataNewFindingsTable = async () => {
   const page = 1;
   const sort = "severity,-inserted_at";
 
+  const twoDaysAgo = format(subDays(new Date(), 2), "yyyy-MM-dd");
+
   const defaultFilters = {
     "filter[status__in]": "FAIL",
     "filter[delta__in]": "new",
+    "filter[inserted_at__gte]": twoDaysAgo,
   };
 
   const findingsData = await getFindings({
@@ -172,14 +176,21 @@ const SSRDataNewFindingsTable = async () => {
 
   return (
     <>
-      <div className="relative flex items-start justify-between">
-        <h3 className="mb-4 w-full text-sm font-bold uppercase">
-          Latest 10 failing findings to date by Severity
-        </h3>
+      <div className="relative flex w-full">
+        <div className="flex w-full items-center gap-2">
+          <h3 className="text-sm font-bold uppercase">
+            Latest 10 failing findings to date by Severity
+          </h3>
+          <p className="text-xs text-gray-500">
+            Showing the latest 10 failing findings by severity from the last 2
+            days.
+          </p>
+        </div>
         <div className="absolute -top-6 right-0">
           <LinkToFindings />
         </div>
       </div>
+      <Spacer y={4} />
       <DataTable
         columns={ColumnNewFindingsToDate}
         data={expandedResponse?.data || []}

ui/components/filters/custom-date-picker.tsx

@@ -16,7 +16,7 @@ export const CustomDatePicker = () => {
   const searchParams = useSearchParams();
 
   const [value, setValue] = React.useState(() => {
-    const dateParam = searchParams.get("filter[updated_at]");
+    const dateParam = searchParams.get("filter[inserted_at]");
     return dateParam ? today(getLocalTimeZone()) : null;
   });
 
@@ -30,9 +30,9 @@ export const CustomDatePicker = () => {
     (date: any) => {
       const params = new URLSearchParams(searchParams.toString());
       if (date) {
-        params.set("filter[updated_at]", date.toString());
+        params.set("filter[inserted_at]", date.toString());
       } else {
-        params.delete("filter[updated_at]");
+        params.delete("filter[inserted_at]");
       }
       router.push(`?${params.toString()}`, { scroll: false });
     },

ui/components/overview/new-findings-table/link-to-findings/link-to-findings.tsx

@@ -6,7 +6,7 @@ export const LinkToFindings = () => {
   return (
     <div className="mt-4 flex w-full items-center justify-end">
       <CustomButton
-        asLink="/findings?sort=severity,-updated_at&filter[status__in]=FAIL"
+        asLink="/findings?sort=severity,-inserted_at&filter[status__in]=FAIL&filter[delta__in]=new"
         ariaLabel="Go to Findings page"
         variant="solid"
         color="action"