mirror of
https://github.com/prowler-cloud/prowler.git
synced 2026-07-23 20:42:02 +00:00
chore: remove the old table and rename ProviderInfo component
This commit is contained in:
Pablo Lara
File diff suppressed because one or more lines are too long
@@ -8,18 +8,18 @@ import {
|
||||
WifiOffIcon,
|
||||
} from "../icons";
|
||||
|
||||
interface AccountInfoProps {
|
||||
interface ProviderInfoProps {
|
||||
connected: boolean;
|
||||
provider: "aws" | "azure" | "gcp";
|
||||
accountName: string;
|
||||
accountId: string;
|
||||
providerAlias: string;
|
||||
providerId: string;
|
||||
}
|
||||
|
||||
export const AccountInfo: React.FC<AccountInfoProps> = ({
|
||||
export const ProviderInfo: React.FC<ProviderInfoProps> = ({
|
||||
connected,
|
||||
provider,
|
||||
accountName,
|
||||
accountId,
|
||||
providerAlias,
|
||||
providerId,
|
||||
}) => {
|
||||
const getIcon = () => {
|
||||
return connected ? <WifiIcon size={22} /> : <WifiOffIcon size={22} />;
|
||||
@@ -45,8 +45,8 @@ export const AccountInfo: React.FC<AccountInfoProps> = ({
|
||||
<div className="flex-shrink-0">{getIcon()}</div>
|
||||
<div className="flex-shrink-0 mx-2">{getProviderLogo()}</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-md font-semibold">{accountName}</span>
|
||||
<span className="text-sm text-gray-500">{accountId}</span>
|
||||
<span className="text-md font-semibold">{providerAlias}</span>
|
||||
<span className="text-sm text-gray-500">{providerId}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,406 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
Button,
|
||||
Chip,
|
||||
Dropdown,
|
||||
DropdownItem,
|
||||
DropdownMenu,
|
||||
DropdownTrigger,
|
||||
// Input,
|
||||
Pagination,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableColumn,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
User,
|
||||
} from "@nextui-org/react";
|
||||
import React from "react";
|
||||
|
||||
import {
|
||||
columns,
|
||||
Provider,
|
||||
providers,
|
||||
statusColorMap,
|
||||
statusOptions,
|
||||
} from "../../../app/(prowler)/providers/data";
|
||||
import {
|
||||
// ChevronDownIcon,
|
||||
PlusIcon,
|
||||
// SearchIcon,
|
||||
VerticalDotsIcon,
|
||||
} from "../../icons/Icons";
|
||||
|
||||
interface CustomTableProps {
|
||||
initialVisibleColumns: string[];
|
||||
initialRowsPerPage?: number;
|
||||
selectionMode: "single" | "multiple" | "none";
|
||||
}
|
||||
|
||||
type SortDirection = "ascending" | "descending";
|
||||
|
||||
interface SortDescriptor {
|
||||
column: string;
|
||||
direction: SortDirection;
|
||||
}
|
||||
|
||||
export const CustomTable: React.FC<CustomTableProps> = ({
|
||||
initialVisibleColumns,
|
||||
initialRowsPerPage = 5,
|
||||
selectionMode = "none",
|
||||
}) => {
|
||||
const [filterValue, setFilterValue] = React.useState("");
|
||||
// const [selectedKeys, setSelectedKeys] = React.useState(new Set([]));
|
||||
const selectedKeys = new Set([]);
|
||||
|
||||
// const [visibleColumns, setVisibleColumns] = React.useState<
|
||||
// string | Set<string>
|
||||
// >(new Set(initialVisibleColumns));
|
||||
|
||||
const visibleColumns = new Set(initialVisibleColumns);
|
||||
|
||||
// const [statusFilter, setStatusFilter] = React.useState("all");
|
||||
const statusFilter: string = "all";
|
||||
|
||||
const [rowsPerPage, setRowsPerPage] = React.useState(initialRowsPerPage);
|
||||
|
||||
// const [sortDescriptor, setSortDescriptor] = React.useState<SortDescriptor>({
|
||||
// column: "age",
|
||||
// direction: "ascending",
|
||||
// });
|
||||
|
||||
const sortDescriptor: SortDescriptor = {
|
||||
column: "age",
|
||||
direction: "ascending",
|
||||
};
|
||||
|
||||
const [page, setPage] = React.useState(1);
|
||||
|
||||
const pages = Math.ceil(providers.length / rowsPerPage);
|
||||
|
||||
const hasSearchFilter = Boolean(filterValue);
|
||||
|
||||
const headerColumns = React.useMemo(() => {
|
||||
// if (visibleColumns === "all") return columns;
|
||||
|
||||
return columns.filter((column) =>
|
||||
Array.from(visibleColumns).includes(column.uid),
|
||||
);
|
||||
}, [visibleColumns]);
|
||||
|
||||
const filteredItems = React.useMemo(() => {
|
||||
let filteredUsers = [...providers];
|
||||
|
||||
if (hasSearchFilter) {
|
||||
filteredUsers = filteredUsers.filter((provider) =>
|
||||
provider.account.toLowerCase().includes(filterValue.toLowerCase()),
|
||||
);
|
||||
}
|
||||
if (
|
||||
statusFilter !== "all" &&
|
||||
Array.from(statusFilter).length !== statusOptions.length
|
||||
) {
|
||||
filteredUsers = filteredUsers.filter((provider) =>
|
||||
Array.from(statusFilter).includes(provider.group),
|
||||
);
|
||||
}
|
||||
|
||||
return filteredUsers;
|
||||
}, [providers, filterValue, statusFilter]);
|
||||
|
||||
const items = React.useMemo(() => {
|
||||
const start = (page - 1) * rowsPerPage;
|
||||
const end = start + rowsPerPage;
|
||||
|
||||
return filteredItems.slice(start, end);
|
||||
}, [page, filteredItems, rowsPerPage]);
|
||||
|
||||
const sortedItems = React.useMemo(() => {
|
||||
// The type "any" for a and b will removed in the next iteration.
|
||||
return [...items].sort((a: any, b: any) => {
|
||||
const first = a[sortDescriptor.column];
|
||||
const second = b[sortDescriptor.column];
|
||||
const cmp: number = first < second ? -1 : first > second ? 1 : 0;
|
||||
|
||||
return sortDescriptor.direction === "descending" ? -cmp : cmp;
|
||||
});
|
||||
}, [sortDescriptor, items]);
|
||||
|
||||
const renderCell = React.useCallback(
|
||||
(provider: Provider, columnKey: keyof Provider) => {
|
||||
// eslint-disable-next-line security/detect-object-injection
|
||||
const cellValue = provider[columnKey];
|
||||
|
||||
switch (columnKey) {
|
||||
case "account":
|
||||
return (
|
||||
<User
|
||||
classNames={{
|
||||
description: "text-default-500",
|
||||
}}
|
||||
description={provider.provider_id}
|
||||
name={cellValue}
|
||||
/>
|
||||
);
|
||||
case "group":
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
<p className="text-bold text-small capitalize">{cellValue}</p>
|
||||
<p className="text-bold text-tiny capitalize text-default-500">
|
||||
{provider.group}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
case "scan_status":
|
||||
return (
|
||||
<Chip
|
||||
className="capitalize border-none gap-1 text-default-600"
|
||||
color={statusColorMap[provider.scan_status]}
|
||||
size="sm"
|
||||
variant="flat"
|
||||
>
|
||||
{cellValue}
|
||||
</Chip>
|
||||
);
|
||||
case "actions":
|
||||
return (
|
||||
<div className="relative flex justify-end items-center gap-2">
|
||||
<Dropdown className="bg-background border-1 border-default-200">
|
||||
<DropdownTrigger>
|
||||
<Button isIconOnly radius="full" size="sm" variant="light">
|
||||
<VerticalDotsIcon className="text-default-400" />
|
||||
</Button>
|
||||
</DropdownTrigger>
|
||||
<DropdownMenu>
|
||||
<DropdownItem>Manage</DropdownItem>
|
||||
<DropdownItem>Delete</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
</div>
|
||||
);
|
||||
default:
|
||||
return cellValue;
|
||||
}
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
const onRowsPerPageChange = React.useCallback(
|
||||
(e: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
setRowsPerPage(Number(e.target.value));
|
||||
setPage(1);
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
const onSearchChange = React.useCallback((value: string) => {
|
||||
if (value) {
|
||||
setFilterValue(value);
|
||||
setPage(1);
|
||||
} else {
|
||||
setFilterValue("");
|
||||
}
|
||||
}, []);
|
||||
|
||||
const topContent = React.useMemo(() => {
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex justify-end gap-3 items-end">
|
||||
{/* <Input
|
||||
isClearable
|
||||
classNames={{
|
||||
base: "w-full sm:max-w-[44%]",
|
||||
inputWrapper: "border-1",
|
||||
}}
|
||||
placeholder="Search by name..."
|
||||
size="sm"
|
||||
startContent={<SearchIcon className="text-default-300" />}
|
||||
value={filterValue}
|
||||
variant="bordered"
|
||||
onClear={() => setFilterValue("")}
|
||||
onValueChange={onSearchChange}
|
||||
/> */}
|
||||
<div className="flex gap-3">
|
||||
{/* <Dropdown>
|
||||
<DropdownTrigger className="hidden sm:flex">
|
||||
<Button
|
||||
endContent={<ChevronDownIcon className="text-small" />}
|
||||
size="sm"
|
||||
variant="flat"
|
||||
>
|
||||
Status
|
||||
</Button>
|
||||
</DropdownTrigger>
|
||||
<DropdownMenu
|
||||
disallowEmptySelection
|
||||
aria-label="Table Columns"
|
||||
closeOnSelect={false}
|
||||
selectedKeys={statusFilter}
|
||||
selectionMode="multiple"
|
||||
onSelectionChange={setStatusFilter}
|
||||
>
|
||||
{statusOptions.map((status) => (
|
||||
<DropdownItem key={status.uid} className="capitalize">
|
||||
{capitalize(status.name)}
|
||||
</DropdownItem>
|
||||
))}
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
<Dropdown>
|
||||
<DropdownTrigger className="hidden sm:flex">
|
||||
<Button
|
||||
endContent={<ChevronDownIcon className="text-small" />}
|
||||
size="sm"
|
||||
variant="flat"
|
||||
>
|
||||
Columns
|
||||
</Button>
|
||||
</DropdownTrigger>
|
||||
<DropdownMenu
|
||||
disallowEmptySelection
|
||||
aria-label="Table Columns"
|
||||
closeOnSelect={false}
|
||||
selectedKeys={visibleColumns}
|
||||
selectionMode="multiple"
|
||||
onSelectionChange={setVisibleColumns}
|
||||
>
|
||||
{columns.map((column) => (
|
||||
<DropdownItem key={column.uid} className="capitalize">
|
||||
{capitalize(column.name)}
|
||||
</DropdownItem>
|
||||
))}
|
||||
</DropdownMenu>
|
||||
</Dropdown> */}
|
||||
<Button
|
||||
className="bg-foreground text-background"
|
||||
endContent={<PlusIcon />}
|
||||
size="sm"
|
||||
>
|
||||
Add New
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-default-400 text-small">
|
||||
Total {providers.length} entries
|
||||
</span>
|
||||
{items.length < initialRowsPerPage && <div>hi hi que pasa</div>}
|
||||
<label className="flex items-center text-default-400 text-small">
|
||||
Rows per page:
|
||||
<select
|
||||
className="bg-transparent outline-none text-default-400 text-small"
|
||||
onChange={onRowsPerPageChange}
|
||||
defaultValue={initialRowsPerPage}
|
||||
>
|
||||
<option value="5">5</option>
|
||||
<option value="10">10</option>
|
||||
<option value="15">15</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}, [
|
||||
filterValue,
|
||||
statusFilter,
|
||||
visibleColumns,
|
||||
onSearchChange,
|
||||
onRowsPerPageChange,
|
||||
providers.length,
|
||||
hasSearchFilter,
|
||||
]);
|
||||
|
||||
const bottomContent = React.useMemo(() => {
|
||||
return (
|
||||
<div className="py-2 px-2 flex justify-between items-center">
|
||||
<Pagination
|
||||
showControls
|
||||
classNames={{
|
||||
cursor: "bg-foreground text-background",
|
||||
}}
|
||||
color="default"
|
||||
isDisabled={hasSearchFilter}
|
||||
page={page}
|
||||
total={pages}
|
||||
variant="light"
|
||||
onChange={setPage}
|
||||
/>
|
||||
{/* {selectionMode !== "none" && (
|
||||
<span className="text-small text-default-400">
|
||||
{selectedKeys === "all"
|
||||
? "All items selected"
|
||||
: `${selectedKeys.size} of ${items.length} selected`}
|
||||
</span>
|
||||
)} */}
|
||||
</div>
|
||||
);
|
||||
}, [selectedKeys, items.length, page, pages, hasSearchFilter]);
|
||||
|
||||
const classNames = React.useMemo(
|
||||
() => ({
|
||||
wrapper: ["max-h-[382px]", "max-w-3xl"],
|
||||
th: ["bg-transparent", "text-default-500", "border-b", "border-divider"],
|
||||
td: [
|
||||
// changing the rows border radius
|
||||
// first
|
||||
"group-data-[first=true]:first:before:rounded-none",
|
||||
"group-data-[first=true]:last:before:rounded-none",
|
||||
// middle
|
||||
"group-data-[middle=true]:before:rounded-none",
|
||||
// last
|
||||
"group-data-[last=true]:first:before:rounded-none",
|
||||
"group-data-[last=true]:last:before:rounded-none",
|
||||
],
|
||||
}),
|
||||
[],
|
||||
);
|
||||
|
||||
return (
|
||||
<Table
|
||||
isCompact
|
||||
removeWrapper
|
||||
aria-label="Example table with custom cells, pagination and sorting"
|
||||
bottomContent={bottomContent}
|
||||
bottomContentPlacement="outside"
|
||||
checkboxesProps={{
|
||||
classNames: {
|
||||
wrapper: "after:bg-foreground after:text-background text-background",
|
||||
},
|
||||
}}
|
||||
classNames={classNames}
|
||||
selectedKeys={selectedKeys}
|
||||
selectionMode={selectionMode}
|
||||
sortDescriptor={sortDescriptor}
|
||||
topContent={topContent}
|
||||
topContentPlacement="outside"
|
||||
// onSelectionChange={setSelectedKeys}
|
||||
// onSortChange={setSortDescriptor}
|
||||
>
|
||||
<TableHeader columns={headerColumns}>
|
||||
{(column) => (
|
||||
<TableColumn
|
||||
key={column.uid}
|
||||
align={column.uid === "actions" ? "center" : "start"}
|
||||
allowsSorting={column.sortable}
|
||||
>
|
||||
{column.name}
|
||||
</TableColumn>
|
||||
)}
|
||||
</TableHeader>
|
||||
<TableBody emptyContent={"No entries found"} items={sortedItems}>
|
||||
{(item) => {
|
||||
return (
|
||||
<TableRow key={item.id}>
|
||||
{(columnKey) => (
|
||||
// @ts-expect-error: Disable type checking for this line
|
||||
<TableCell>{renderCell(item, columnKey)}</TableCell>
|
||||
)}
|
||||
</TableRow>
|
||||
);
|
||||
}}
|
||||
</TableBody>
|
||||
</Table>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user