Skip to content

Commit 6cb770f

Browse files
HugoPBritoHugoPBrito
authored
fix(ui): clean up findings expanded resource row layout (#10949)
1 parent 86449fb commit 6cb770f

3 files changed

Lines changed: 62 additions & 62 deletions

File tree

‎ui/CHANGELOG.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,14 @@
22

33
All notable changes to the **Prowler UI** are documented in this file.
44

5+
## [1.26.0] (Prowler UNRELEASED)
6+
7+
### 🔄 Changed
8+
9+
- Findings expanded resource rows now drop the redundant cube icons, render Service and Region with the same compact label style as Last seen and Failing for, and reorder columns to Status, Resource, Provider, Severity, then field labels [(#10949)](https://github.com/prowler-cloud/prowler/pull/10949)
10+
11+
---
12+
513
## [1.25.1] (Prowler v5.25.1)
614

715
### 🐞 Fixed

‎ui/components/findings/table/column-finding-resources.tsx‎

Lines changed: 38 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
"use client";
22

33
import { ColumnDef, Row, RowSelectionState } from "@tanstack/react-table";
4-
import { Container, CornerDownRight, VolumeOff, VolumeX } from "lucide-react";
4+
import { CornerDownRight, VolumeOff, VolumeX } from "lucide-react";
55
import { useContext, useState } from "react";
66

77
import { MuteFindingsModal } from "@/components/findings/mute-findings-modal";
@@ -203,23 +203,6 @@ export function getColumnFindingResources({
203203
enableSorting: false,
204204
enableHiding: false,
205205
},
206-
// Resource — name + uid (EntityInfo with resource icon)
207-
{
208-
id: "resource",
209-
header: ({ column }) => (
210-
<DataTableColumnHeader column={column} title="Resource" />
211-
),
212-
cell: ({ row }) => (
213-
<div className="max-w-[240px]">
214-
<EntityInfo
215-
nameIcon={<Container className="size-4" />}
216-
entityAlias={row.original.resourceName}
217-
entityId={row.original.resourceUid}
218-
/>
219-
</div>
220-
),
221-
enableSorting: false,
222-
},
223206
// Status
224207
{
225208
id: "status",
@@ -233,29 +216,35 @@ export function getColumnFindingResources({
233216
},
234217
enableSorting: false,
235218
},
236-
// Service
219+
// Resource — name + uid
237220
{
238-
id: "service",
221+
id: "resource",
239222
header: ({ column }) => (
240-
<DataTableColumnHeader column={column} title="Service" />
223+
<DataTableColumnHeader column={column} title="Resource" />
241224
),
242225
cell: ({ row }) => (
243-
<p className="text-text-neutral-primary max-w-[100px] truncate text-sm">
244-
{row.original.service}
245-
</p>
226+
<div className="max-w-[240px]">
227+
<EntityInfo
228+
entityAlias={row.original.resourceName}
229+
entityId={row.original.resourceUid}
230+
/>
231+
</div>
246232
),
247233
enableSorting: false,
248234
},
249-
// Region
235+
// Provider — alias + uid (same style as Resource)
250236
{
251-
id: "region",
237+
id: "provider",
252238
header: ({ column }) => (
253-
<DataTableColumnHeader column={column} title="Region" />
239+
<DataTableColumnHeader column={column} title="Provider" />
254240
),
255241
cell: ({ row }) => (
256-
<p className="text-text-neutral-primary max-w-[120px] truncate text-sm">
257-
{row.original.region}
258-
</p>
242+
<div className="max-w-[240px]">
243+
<EntityInfo
244+
entityAlias={row.original.providerAlias}
245+
entityId={row.original.providerUid}
246+
/>
247+
</div>
259248
),
260249
enableSorting: false,
261250
},
@@ -268,20 +257,29 @@ export function getColumnFindingResources({
268257
cell: ({ row }) => <SeverityBadge severity={row.original.severity} />,
269258
enableSorting: false,
270259
},
271-
// Account — alias + uid (EntityInfo with provider logo)
260+
// Service
272261
{
273-
id: "account",
262+
id: "service",
274263
header: ({ column }) => (
275-
<DataTableColumnHeader column={column} title="Account" />
264+
<DataTableColumnHeader column={column} title="Service" />
276265
),
277266
cell: ({ row }) => (
278-
<div className="max-w-[240px]">
279-
<EntityInfo
280-
cloudProvider={row.original.providerType}
281-
entityAlias={row.original.providerAlias}
282-
entityId={row.original.providerUid}
283-
/>
284-
</div>
267+
<InfoField label="Service" variant="compact">
268+
{row.original.service || "-"}
269+
</InfoField>
270+
),
271+
enableSorting: false,
272+
},
273+
// Region
274+
{
275+
id: "region",
276+
header: ({ column }) => (
277+
<DataTableColumnHeader column={column} title="Region" />
278+
),
279+
cell: ({ row }) => (
280+
<InfoField label="Region" variant="compact">
281+
{row.original.region || "-"}
282+
</InfoField>
285283
),
286284
enableSorting: false,
287285
},

‎ui/components/findings/table/inline-resource-container.tsx‎

Lines changed: 16 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -70,27 +70,23 @@ function ResourceSkeletonRow({
7070
<div className="bg-bg-input-primary border-border-input-primary size-5 rounded-sm border shadow-[0_1px_2px_0_rgba(0,0,0,0.1)]" />
7171
</div>
7272
</TableCell>
73-
{/* Resource: icon + name + uid */}
74-
<TableCell className={cellClassName}>
75-
<div className="flex items-center gap-2">
76-
<Skeleton className="size-4 rounded" />
77-
<div className="space-y-1.5">
78-
<Skeleton className="h-4 w-32 rounded" />
79-
<Skeleton className="h-3.5 w-20 rounded" />
80-
</div>
81-
</div>
82-
</TableCell>
8373
{/* Status */}
8474
<TableCell className={cellClassName}>
8575
<Skeleton className="h-6 w-11 rounded-md" />
8676
</TableCell>
87-
{/* Service */}
77+
{/* Resource: name + uid */}
8878
<TableCell className={cellClassName}>
89-
<Skeleton className="h-4.5 w-16 rounded" />
79+
<div className="space-y-1.5">
80+
<Skeleton className="h-4 w-32 rounded" />
81+
<Skeleton className="h-3.5 w-20 rounded" />
82+
</div>
9083
</TableCell>
91-
{/* Region */}
84+
{/* Provider: alias + uid */}
9285
<TableCell className={cellClassName}>
93-
<Skeleton className="h-4.5 w-20 rounded" />
86+
<div className="space-y-1.5">
87+
<Skeleton className="h-4 w-24 rounded" />
88+
<Skeleton className="h-3.5 w-16 rounded" />
89+
</div>
9490
</TableCell>
9591
{/* Severity */}
9692
<TableCell className={cellClassName}>
@@ -99,15 +95,13 @@ function ResourceSkeletonRow({
9995
<Skeleton className="h-4.5 w-12 rounded" />
10096
</div>
10197
</TableCell>
102-
{/* Account: provider icon + alias + uid */}
98+
{/* Service */}
10399
<TableCell className={cellClassName}>
104-
<div className="flex items-center gap-2">
105-
<Skeleton className="size-4 rounded" />
106-
<div className="space-y-1.5">
107-
<Skeleton className="h-4 w-24 rounded" />
108-
<Skeleton className="h-3.5 w-16 rounded" />
109-
</div>
110-
</div>
100+
<Skeleton className="h-4.5 w-16 rounded" />
101+
</TableCell>
102+
{/* Region */}
103+
<TableCell className={cellClassName}>
104+
<Skeleton className="h-4.5 w-20 rounded" />
111105
</TableCell>
112106
{/* Last seen */}
113107
<TableCell className={cellClassName}>

0 commit comments

Comments
 (0)