feat: resource view re-styling with new components

api/src/backend/api/filters.py

@@ -453,6 +453,8 @@ class Meta:
 
 
 class ResourceFilter(ProviderRelationshipFilterSet):
+    provider_id = UUIDFilter(field_name="provider__id", lookup_expr="exact")
+    provider_id__in = UUIDInFilter(field_name="provider__id", lookup_expr="in")
     tag_key = CharFilter(method="filter_tag_key")
     tag_value = CharFilter(method="filter_tag_value")
     tag = CharFilter(method="filter_tag")
@@ -540,6 +542,8 @@ def filter_tag(self, queryset, name, value):
 
 
 class LatestResourceFilter(ProviderRelationshipFilterSet):
+    provider_id = UUIDFilter(field_name="provider__id", lookup_expr="exact")
+    provider_id__in = UUIDInFilter(field_name="provider__id", lookup_expr="in")
     tag_key = CharFilter(method="filter_tag_key")
     tag_value = CharFilter(method="filter_tag_value")
     tag = CharFilter(method="filter_tag")

api/src/backend/api/tests/test_views.py

@@ -4353,6 +4353,110 @@
         assert attributes["types"] == [latest_scan_resource.type]
         assert "groups" in attributes
 
+    def test_resources_latest_filter_by_provider_id(
+        self, authenticated_client, latest_scan_resource
+    ):
+        """Test that provider_id filter works on latest resources endpoint."""
+        provider = latest_scan_resource.provider
+        response = authenticated_client.get(
+            reverse("resource-latest"),
+            {"filter[provider_id]": str(provider.id)},
+        )
+        assert response.status_code == status.HTTP_200_OK
+        assert len(response.json()["data"]) == 1
+        assert (
+            response.json()["data"][0]["attributes"]["uid"] == latest_scan_resource.uid
+        )
+
+    def test_resources_latest_filter_by_provider_id_in(
+        self, authenticated_client, latest_scan_resource
+    ):
+        """Test that provider_id__in filter works on latest resources endpoint."""
+        provider = latest_scan_resource.provider
+        response = authenticated_client.get(
+            reverse("resource-latest"),
+            {"filter[provider_id__in]": str(provider.id)},
+        )
+        assert response.status_code == status.HTTP_200_OK
+        assert len(response.json()["data"]) == 1
+        assert (
+            response.json()["data"][0]["attributes"]["uid"] == latest_scan_resource.uid
+        )
+
+    def test_resources_latest_filter_by_provider_id_in_multiple(
+        self, authenticated_client, providers_fixture
+    ):
+        """Test that provider_id__in filter works with multiple provider IDs."""
+        provider1, provider2 = providers_fixture[0], providers_fixture[1]
+        tenant_id = str(provider1.tenant_id)
+
+        # Create completed scans for both providers
+        scan1 = Scan.objects.create(
+            name="scan for provider 1",
+            provider=provider1,
+            trigger=Scan.TriggerChoices.MANUAL,
+            state=StateChoices.COMPLETED,
+            tenant_id=tenant_id,
+        )
+        scan2 = Scan.objects.create(
+            name="scan for provider 2",
+            provider=provider2,
+            trigger=Scan.TriggerChoices.MANUAL,
+            state=StateChoices.COMPLETED,
+            tenant_id=tenant_id,
+        )
+
+        # Create resources for each provider
+        resource1 = Resource.objects.create(
+            tenant_id=tenant_id,
+            provider=provider1,
+            uid="resource_provider_1",
+            name="Resource Provider 1",
+            region="us-east-1",
+            service="ec2",
+            type="instance",
+        )
+        resource2 = Resource.objects.create(
+            tenant_id=tenant_id,
+            provider=provider2,
+            uid="resource_provider_2",
+            name="Resource Provider 2",
+            region="us-west-2",
+            service="s3",
+            type="bucket",
+        )
+
+        # Test filtering by both providers
+        response = authenticated_client.get(
+            reverse("resource-latest"),
+            {"filter[provider_id__in]": f"{provider1.id},{provider2.id}"},
+        )
+        assert response.status_code == status.HTTP_200_OK
+        assert len(response.json()["data"]) == 2
+
+        # Test filtering by single provider returns only that provider's resource
+        response = authenticated_client.get(
+            reverse("resource-latest"),
+            {"filter[provider_id__in]": str(provider1.id)},
+        )
+        assert response.status_code == status.HTTP_200_OK
+        assert len(response.json()["data"]) == 1
+        assert response.json()["data"][0]["attributes"]["uid"] == resource1.uid
+
+    def test_resources_latest_filter_by_provider_id_no_match(
+        self, authenticated_client, latest_scan_resource
+    ):
+        """Test that provider_id filter returns empty when no match."""
+        import uuid
+
+        non_existent_id = str(uuid.uuid4())
+        response = authenticated_client.get(
+            reverse("resource-latest"),
+            {"filter[provider_id]": non_existent_id},
+        )
+        assert response.status_code == status.HTTP_200_OK
+        assert len(response.json()["data"]) == 0
+
 
 @pytest.mark.django_db
 class TestFindingViewSet:

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

@@ -16,6 +16,7 @@
   SkeletonTableFindings,
 } from "@/components/findings/table";
 import { ContentLayout } from "@/components/ui";
+import { FilterTransitionWrapper } from "@/contexts";
 import {
   createDict,
   createScanDetailsMapping,
@@ -36,7 +37,7 @@
   searchParams: Promise<SearchParamsProps>;
 }) {
   const resolvedSearchParams = await searchParams;
   const { searchParamsKey, encodedSort } =
     extractSortAndKey(resolvedSearchParams);
   const { filters, query } = extractFiltersAndQuery(resolvedSearchParams);
 
@@ -148,24 +149,26 @@
 
   return (
     <ContentLayout title="Findings" icon="lucide:tag">
-      <div className="mb-6">
-        <FindingsFilters
-          providers={providersData?.data || []}
-          providerIds={providerIds}
-          providerDetails={providerDetails}
-          completedScans={completedScans || []}
-          completedScanIds={completedScanIds}
-          scanDetails={scanDetails}
-          uniqueRegions={uniqueRegions}
-          uniqueServices={uniqueServices}
-          uniqueResourceTypes={uniqueResourceTypes}
-          uniqueCategories={uniqueCategories}
-          uniqueGroups={uniqueGroups}
-        />
-      </div>
-      <Suspense key={searchParamsKey} fallback={<SkeletonTableFindings />}>
-        <SSRDataTable searchParams={resolvedSearchParams} />
-      </Suspense>
+      <FilterTransitionWrapper>
+        <div className="mb-6">
+          <FindingsFilters
+            providers={providersData?.data || []}
+            providerIds={providerIds}
+            providerDetails={providerDetails}
+            completedScans={completedScans || []}
+            completedScanIds={completedScanIds}
+            scanDetails={scanDetails}
+            uniqueRegions={uniqueRegions}
+            uniqueServices={uniqueServices}
+            uniqueResourceTypes={uniqueResourceTypes}
+            uniqueCategories={uniqueCategories}
+            uniqueGroups={uniqueGroups}
+          />
+        </div>
+        <Suspense fallback={<SkeletonTableFindings />}>
+          <SSRDataTable searchParams={resolvedSearchParams} />
+        </Suspense>
+      </FilterTransitionWrapper>
       {processedFinding && <FindingDetailsSheet finding={processedFinding} />}
     </ContentLayout>
   );

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

@@ -5,14 +5,15 @@
   getLatestMetadataInfo,
   getLatestResources,
   getMetadataInfo,
+  getResourceById,
   getResources,
 } from "@/actions/resources";
-import { FilterControls } from "@/components/filters";
+import { ResourceDetailsSheet } from "@/components/resources/resource-details-sheet";
 import { ResourcesFilters } from "@/components/resources/resources-filters";
 import { SkeletonTableResources } from "@/components/resources/skeleton/skeleton-table-resources";
-import { ColumnResources } from "@/components/resources/table/column-resources";
+import { ResourcesTableWithSelection } from "@/components/resources/table";
 import { ContentLayout } from "@/components/ui";
-import { DataTable } from "@/components/ui/table";
+import { FilterTransitionWrapper } from "@/contexts";
 import {
   createDict,
   extractFiltersAndQuery,
@@ -32,7 +33,7 @@
   searchParams: Promise<SearchParamsProps>;
 }) {
   const resolvedSearchParams = await searchParams;
   const { searchParamsKey, encodedSort } =
     extractSortAndKey(resolvedSearchParams);
   const { filters, query } = extractFiltersAndQuery(resolvedSearchParams);
   const outputFilters = replaceFieldKey(filters, "inserted_at", "updated_at");
@@ -40,14 +41,42 @@
   // Check if the searchParams contain any date or scan filter
   const hasDateOrScan = hasDateOrScanFilter(resolvedSearchParams);
 
-  const [metadataInfoData, providersData] = await Promise.all([
-    (hasDateOrScan ? getMetadataInfo : getLatestMetadataInfo)({
-      query,
-      filters: outputFilters,
-      sort: encodedSort,
-    }),
-    getProviders({ pageSize: 50 }),
-  ]);
+  // Check if there's a specific resource ID to fetch
+  const resourceId = resolvedSearchParams.resourceId?.toString();
+
+  const [metadataInfoData, providersData, resourceByIdData] = await Promise.all(
+    [
+      (hasDateOrScan ? getMetadataInfo : getLatestMetadataInfo)({
+        query,
+        filters: outputFilters,
+        sort: encodedSort,
+      }),
+      getProviders({ pageSize: 50 }),
+      resourceId
+        ? getResourceById(resourceId, { include: ["provider"] })
+        : Promise.resolve(null),
+    ],
+  );
+
+  // Process the resource data to match the expected structure
+  const processedResource = resourceByIdData?.data
+    ? (() => {
+        const resource = resourceByIdData.data;
+        const providerDict = createDict("providers", resourceByIdData);
+
+        const provider = {
+          data: providerDict[resource.relationships?.provider?.data?.id],
+        };
+
+        return {
+          ...resource,
+          relationships: {
+            ...resource.relationships,
+            provider,
+          },
+        } as ResourceProps;
+      })()
+    : null;
 
   // Extract unique regions, services, groups from the metadata endpoint
   const uniqueRegions = metadataInfoData?.data?.attributes?.regions || [];
@@ -62,19 +91,24 @@
 
   return (
     <ContentLayout title="Resources" icon="lucide:warehouse">
-      <FilterControls search date />
-      <div className="flex flex-col gap-6">
-        <ResourcesFilters
-          providerIds={providerIds}
-          providerDetails={providerDetails}
-          uniqueRegions={uniqueRegions}
-          uniqueServices={uniqueServices}
-          uniqueGroups={uniqueGroups}
-        />
-        <Suspense key={searchParamsKey} fallback={<SkeletonTableResources />}>
+      <FilterTransitionWrapper>
+        <div className="mb-6">
+          <ResourcesFilters
+            providers={providersData?.data || []}
+            providerIds={providerIds}
+            providerDetails={providerDetails}
+            uniqueRegions={uniqueRegions}
+            uniqueServices={uniqueServices}
+            uniqueGroups={uniqueGroups}
+          />
+        </div>
+        <Suspense fallback={<SkeletonTableResources />}>
           <SSRDataTable searchParams={resolvedSearchParams} />
         </Suspense>
-      </div>
+      </FilterTransitionWrapper>
+      {processedResource && (
+        <ResourceDetailsSheet resource={processedResource} />
+      )}
     </ContentLayout>
   );
 }
@@ -150,9 +184,7 @@
           <p>{resourcesData.errors[0].detail}</p>
         </div>
       )}
-      <DataTable
-        key={`resources-${Date.now()}`}
-        columns={ColumnResources}
+      <ResourcesTableWithSelection
         data={expandedResources || []}
         metadata={resourcesData?.meta}
       />

ui/components/resources/resource-details-sheet.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet";
+import { ResourceProps } from "@/types";
+
+import { ResourceDetail } from "./table/resource-detail";
+
+interface ResourceDetailsSheetProps {
+  resource: ResourceProps;
+}
+
+export const ResourceDetailsSheet = ({
+  resource,
+}: ResourceDetailsSheetProps) => {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const handleOpenChange = (open: boolean) => {
+    if (!open) {
+      const params = new URLSearchParams(searchParams.toString());
+      params.delete("resourceId");
+      router.push(`${pathname}?${params.toString()}`, { scroll: false });
+    }
+  };
+
+  return (
+    <Sheet open={true} onOpenChange={handleOpenChange}>
+      <SheetContent className="my-4 max-h-[calc(100vh-2rem)] max-w-[95vw] overflow-y-auto pt-10 md:my-8 md:max-h-[calc(100vh-4rem)] md:max-w-[55vw]">
+        <SheetHeader>
+          <SheetTitle className="sr-only">Resource Details</SheetTitle>
+          <SheetDescription className="sr-only">
+            View the resource details
+          </SheetDescription>
+        </SheetHeader>
+        <ResourceDetail resourceDetails={resource} />
+      </SheetContent>
+    </Sheet>
+  );
+};