ben.carrasco/prowler
1
0
Fork 0
mirror of https://github.com/prowler-cloud/prowler.git synced 2026-07-23 20:42:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(poc): Switch to global next.ui package, update python settings for ngrok - wip, add in next table layout

Browse Source
This commit is contained in:
Sophia Dao
2024-06-25 19:36:10 -05:00
parent 5583714c7a
commit d0a931bae8
10 changed files with 265 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/clouds/layout.tsx
+1 -3
View File
@@ -5,9 +5,7 @@ export default function CloudsLayout({
}) {
return (
<section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
<div className="inline-block max-w-lg text-center justify-center">
{children}
</div>
<div className="inline-block text-center justify-center">{children}</div>
</section>
);
}
app/clouds/page.tsx
+240 -16
View File
@@ -1,6 +1,7 @@
"use client";
import useSWR from "swr";
import React from "react";
import {
Table,
@@ -9,40 +10,263 @@ import {
TableColumn,
TableRow,
TableCell,
} from "@nextui-org/table";
User,
Chip,
Tooltip,
getKeyValue,
} from "@nextui-org/react";
import { fetcher } from "@/utils/fetcher";
import { title } from "@/components/primitives";
import { PencilSquareIcon } from "@heroicons/react/24/solid";
import { TrashIcon } from "@heroicons/react/24/solid";
import { EyeIcon } from "@heroicons/react/24/solid";
const statusColorMap = {
active: "success",
paused: "danger",
vacation: "warning",
};
const columns = [
{ name: "NAME", uid: "name" },
{ name: "ROLE", uid: "role" },
{ name: "STATUS", uid: "status" },
{ name: "ACTIONS", uid: "actions" },
];
const users = [
{
id: 1,
name: "Tony Reichert",
role: "CEO",
team: "Management",
status: "active",
age: "29",
avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d",
email: "tony.reichert@example.com",
},
{
id: 2,
name: "Zoey Lang",
role: "Technical Lead",
team: "Development",
status: "paused",
age: "25",
avatar: "https://i.pravatar.cc/150?u=a042581f4e29026704d",
email: "zoey.lang@example.com",
},
{
id: 3,
name: "Jane Fisher",
role: "Senior Developer",
team: "Development",
status: "active",
age: "22",
avatar: "https://i.pravatar.cc/150?u=a04258114e29026702d",
email: "jane.fisher@example.com",
},
{
id: 4,
name: "William Howard",
role: "Community Manager",
team: "Marketing",
status: "vacation",
age: "28",
avatar: "https://i.pravatar.cc/150?u=a048581f4e29026701d",
email: "william.howard@example.com",
},
{
id: 5,
name: "Kristen Copper",
role: "Sales Manager",
team: "Sales",
status: "active",
age: "24",
avatar: "https://i.pravatar.cc/150?u=a092581d4ef9026700d",
email: "kristen.cooper@example.com",
},
];
export default function CloudsPage() {
const { data, error } = useSWR(
const { data, error, isLoading } = useSWR(
`http://localhost:8080/api/v1/providers/aws/accounts`,
fetcher,
);
console.log("### data", data);
// TODO FIX TYPE CHECKING
const rowItems = data?.map((row: any) => (
<TableRow key={row.id}>
<TableCell>{row.account_id}</TableCell>
<TableCell>{row.alias}</TableCell>
<TableCell>{row.connected ? "True" : "False"}</TableCell>
</TableRow>
));
// const rowItems = data?.map((row: any) => (
// <TableRow key={row.id}>
// <TableCell>{row.account_id}</TableCell>
// <TableCell>{row.alias}</TableCell>
// <TableCell>{row.connected ? "True" : "False"}</TableCell>
// </TableRow>
// ));
// console.log("### rows", rows);
// const rows = data;
// const rows = [
// {
// key: "1",
// name: "Tony Reichert",
// role: "CEO",
// status: "Active",
// },
// {
// key: "2",
// name: "Zoey Lang",
// role: "Technical Lead",
// status: "Paused",
// },
// {
// key: "3",
// name: "Jane Fisher",
// role: "Senior Developer",
// status: "Active",
// },
// {
// key: "4",
// name: "William Howard",
// role: "Community Manager",
// status: "Vacation",
// },
// ];
// const columns = [
// {
// key: "provider_id",
// label: "Account",
// },
// {
// key: "groups",
// label: "Group(s)",
// },
// {
// key: "status",
// label: "Scan Status",
// },
// {
// key: "lastScan",
// label: "Last Scan",
// },
// {
// key: "nextScan",
// label: "Next Scan",
// },
// {
// key: "resources",
// label: "Resources",
// },
// {
// key: "added",
// label: "Added",
// },
// ];
const renderCell = React.useCallback((user, columnKey) => {
const cellValue = user[columnKey];
switch (columnKey) {
case "name":
return (
<User
avatarProps={{ radius: "lg", src: user.avatar }}
description={user.email}
name={cellValue}
>
{user.email}
</User>
);
case "role":
return (
<div className="flex flex-col">
<p className="text-bold text-sm capitalize">{cellValue}</p>
<p className="text-bold text-sm capitalize text-default-400">
{user.team}
</p>
</div>
);
case "status":
return (
<Chip
className="capitalize"
color={statusColorMap[user.status]}
size="sm"
variant="flat"
>
{cellValue}
</Chip>
);
case "actions":
return (
<div className="relative flex items-center gap-2">
<Tooltip content="Details">
<span className="text-lg text-default-400 cursor-pointer active:opacity-50">
<EyeIcon className="w-5 h-5" />
</span>
</Tooltip>
<Tooltip content="Edit user">
<span className="text-lg text-default-400 cursor-pointer active:opacity-50">
<PencilSquareIcon className="w-5 h-5" />
</span>
</Tooltip>
<Tooltip color="danger" content="Delete user">
<span className="text-lg text-danger cursor-pointer active:opacity-50">
<TrashIcon className="w-5 h-5" />
</span>
</Tooltip>
</div>
);
default:
return cellValue;
}
}, []);
return (
<div>
<h1 className={title()}>Cloud Accounts</h1>
<p className="mt-10 text-left">
{error && <span className="text-red-400">Failed to load</span>}
{!data && <span className="text-yellow-400">Loading</span>}
{isLoading && <span className="text-yellow-400">Loading</span>}
</p>
{data && (
<Table aria-label="cloud accounts table" className="text-left mt-10">
<TableHeader>
<TableColumn>ACCOUNT ID</TableColumn>
<TableColumn>ALIAS</TableColumn>
<TableColumn>CONNECTED</TableColumn>
// <Table aria-label="cloud accounts table" className="text-left mt-10">
// <TableHeader>
// <TableColumn>ACCOUNT ID</TableColumn>
// <TableColumn>ALIAS</TableColumn>
// <TableColumn>CONNECTED</TableColumn>
// </TableHeader>
// <TableBody>{rowItems}</TableBody>
// </Table>
<Table
isStriped
aria-label="cloud accounts table"
className="text-left mt-10"
>
<TableHeader columns={columns}>
{(column) => (
<TableColumn
key={column.uid}
align={column.uid === "actions" ? "center" : "start"}
>
{column.name}
</TableColumn>
)}
</TableHeader>
<TableBody>{rowItems}</TableBody>
<TableBody items={users}>
{(item) => (
<TableRow key={item.id}>
{(columnKey) => (
<TableCell>{renderCell(item, columnKey)}</TableCell>
)}
</TableRow>
)}
</TableBody>
</Table>
)}
<p className="mt-24">This is a page with "use client", useSWR</p>
app/login/page.tsx
+9 -4
View File
@@ -1,10 +1,15 @@
"use client";
import React from "react";
import { Card, CardHeader, CardBody, CardFooter } from "@nextui-org/card";
import { Input } from "@nextui-org/input";
import { Link } from "@nextui-org/link";
import { Button } from "@nextui-org/button";
import {
Card,
CardHeader,
CardBody,
CardFooter,
Input,
Link,
Button,
} from "@nextui-org/react";
import { EyeIcon } from "@heroicons/react/24/solid";
import { EyeSlashIcon } from "@heroicons/react/24/solid";
app/page.tsx
+9 -4
View File
@@ -1,10 +1,15 @@
"use client";
import React from "react";
import { Card, CardHeader, CardBody, CardFooter } from "@nextui-org/card";
import { Input } from "@nextui-org/input";
import { Link } from "@nextui-org/link";
import { Button } from "@nextui-org/button";
import {
Card,
CardHeader,
CardBody,
CardFooter,
Input,
Link,
Button,
} from "@nextui-org/react";
import { EyeIcon } from "@heroicons/react/24/solid";
import { EyeSlashIcon } from "@heroicons/react/24/solid";
be_poc/be_poc/settings.py
+1 -1
View File
@@ -13,7 +13,7 @@ SECRET_KEY = 'django-insecure-h72a3mgf$l$1uqnjf0bbbz9fbmuotlff7ya50+hlao)fga=3dp
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True
ALLOWED_HOSTS = []
ALLOWED_HOSTS = ['localhost', 'steady-separately-marlin.ngrok-free.app']
# Application definition
components/counter.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
"use client";
import { useState } from "react";
import { Button } from "@nextui-org/button";
import { Button } from "@nextui-org/react";
export const Counter = () => {
const [count, setCount] = useState(0);
components/navbar.tsx
+2 -2
View File
@@ -9,8 +9,8 @@ import {
NavbarMenuToggle,
NavbarBrand,
NavbarMenuItem,
} from "@nextui-org/navbar";
import { Link } from "@nextui-org/link";
Link,
} from "@nextui-org/react";
export const Navbar = () => {
const [isMenuOpen, setIsMenuOpen] = React.useState(false);
components/theme-switch.tsx
+1 -1
View File
@@ -2,7 +2,7 @@
import { FC } from "react";
import { VisuallyHidden } from "@react-aria/visually-hidden";
import { SwitchProps, useSwitch } from "@nextui-org/switch";
import { SwitchProps, useSwitch } from "@nextui-org/react";
import { useTheme } from "next-themes";
import { useIsSSR } from "@react-aria/ssr";
import clsx from "clsx";
docker-compose.yaml
-1
View File
@@ -1,4 +1,3 @@
version: '3.7'
services:
django-be-poc:
image: django-be-poc
package.json
+1 -11
View File
@@ -1,18 +1,8 @@
{
"dependencies": {
"@heroicons/react": "^2.1.4",
"@nextui-org/button": "2.0.34",
"@nextui-org/card": "^2.0.31",
"@nextui-org/code": "2.0.29",
"@nextui-org/input": "2.2.2",
"@nextui-org/kbd": "2.0.30",
"@nextui-org/link": "2.0.32",
"@nextui-org/listbox": "2.1.21",
"@nextui-org/navbar": "2.0.33",
"@nextui-org/snippet": "2.0.38",
"@nextui-org/switch": "2.0.31",
"@nextui-org/react": "^2.4.2",
"@nextui-org/system": "2.2.1",
"@nextui-org/table": "^2.0.36",
"@nextui-org/theme": "2.2.5",
"@react-aria/ssr": "3.9.4",
"@react-aria/visually-hidden": "3.8.12",