From d0a931bae8d997500266aeddcb5a1426f42eaacf Mon Sep 17 00:00:00 2001 From: Sophia Dao Date: Tue, 25 Jun 2024 19:36:10 -0500 Subject: [PATCH] feat(poc): Switch to global next.ui package, update python settings for ngrok - wip, add in next table layout --- app/clouds/layout.tsx | 4 +- app/clouds/page.tsx | 256 +++++++++++++++++++++++++++++++++--- app/login/page.tsx | 13 +- app/page.tsx | 13 +- be_poc/be_poc/settings.py | 2 +- components/counter.tsx | 2 +- components/navbar.tsx | 4 +- components/theme-switch.tsx | 2 +- docker-compose.yaml | 1 - package.json | 12 +- 10 files changed, 265 insertions(+), 44 deletions(-) diff --git a/app/clouds/layout.tsx b/app/clouds/layout.tsx index cab24b4eed..d9ca1e80e4 100644 --- a/app/clouds/layout.tsx +++ b/app/clouds/layout.tsx @@ -5,9 +5,7 @@ export default function CloudsLayout({ }) { return (
-
- {children} -
+
{children}
); } diff --git a/app/clouds/page.tsx b/app/clouds/page.tsx index d31830a657..61212ab268 100644 --- a/app/clouds/page.tsx +++ b/app/clouds/page.tsx @@ -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) => ( - - {row.account_id} - {row.alias} - {row.connected ? "True" : "False"} - - )); + // const rowItems = data?.map((row: any) => ( + // + // {row.account_id} + // {row.alias} + // {row.connected ? "True" : "False"} + // + // )); + + // 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.email} + + ); + case "role": + return ( +
+

{cellValue}

+

+ {user.team} +

+
+ ); + case "status": + return ( + + {cellValue} + + ); + case "actions": + return ( +
+ + + + + + + + + + + + + + + +
+ ); + default: + return cellValue; + } + }, []); return (

Cloud Accounts

{error && Failed to load} - {!data && Loading} + {isLoading && Loading}

{data && ( - - - ACCOUNT ID - ALIAS - CONNECTED + //
+ // + // ACCOUNT ID + // ALIAS + // CONNECTED + // + // {rowItems} + //
+ + + + {(column) => ( + + {column.name} + + )} - {rowItems} + + {(item) => ( + + {(columnKey) => ( + {renderCell(item, columnKey)} + )} + + )} +
)}

This is a page with "use client", useSWR

diff --git a/app/login/page.tsx b/app/login/page.tsx index ee097b2a66..113f81418e 100644 --- a/app/login/page.tsx +++ b/app/login/page.tsx @@ -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"; diff --git a/app/page.tsx b/app/page.tsx index c28dfa852c..e840155e19 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -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"; diff --git a/be_poc/be_poc/settings.py b/be_poc/be_poc/settings.py index c55e3e7e1c..f6fb8e2fee 100644 --- a/be_poc/be_poc/settings.py +++ b/be_poc/be_poc/settings.py @@ -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 diff --git a/components/counter.tsx b/components/counter.tsx index d16f862269..85cb44dc27 100644 --- a/components/counter.tsx +++ b/components/counter.tsx @@ -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); diff --git a/components/navbar.tsx b/components/navbar.tsx index 6bcdaa770e..a52bd03f3c 100644 --- a/components/navbar.tsx +++ b/components/navbar.tsx @@ -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); diff --git a/components/theme-switch.tsx b/components/theme-switch.tsx index 55bcb0f329..b44961bfa0 100644 --- a/components/theme-switch.tsx +++ b/components/theme-switch.tsx @@ -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"; diff --git a/docker-compose.yaml b/docker-compose.yaml index b50276328f..745691a46c 100644 --- a/docker-compose.yaml +++ b/docker-compose.yaml @@ -1,4 +1,3 @@ -version: '3.7' services: django-be-poc: image: django-be-poc diff --git a/package.json b/package.json index d7fc3d3785..158c6fc650 100644 --- a/package.json +++ b/package.json @@ -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",