mirror of
https://github.com/prowler-cloud/prowler.git
synced 2026-07-24 13:01:56 +00:00
Providers page table (#20)
* fix: add suppressHydrationWarning to resolve console errors * chore: add server-only library * WIP: Mock API for providers and start rendering data * chore: relocate utils folder to proper directory * chore: install shadcn for tables, adding sttings page * refactor: improve sidebar display behavior * chore: add fake data to the dataProviders * chore: remove the old table and rename ProviderInfo component * refactor: improve sidebar display behavior adding a custom hook * feat: the Providers table is rendering real data * chore: set the default valuef or isCollapse to false * chore: Added a helper function getProviderAttributes for cleaner access to provider attributes
This commit is contained in:
Pablo Lara
@@ -1,12 +1,12 @@
|
||||
import "@/styles/globals.css";
|
||||
|
||||
import clsx from "clsx";
|
||||
import { Metadata, Viewport } from "next";
|
||||
import React from "react";
|
||||
|
||||
import { SidebarWrap } from "@/components";
|
||||
import { fontSans } from "@/config/fonts";
|
||||
import { siteConfig } from "@/config/site";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
import { Providers } from "../providers";
|
||||
|
||||
@@ -37,7 +37,8 @@ export default function RootLayout({
|
||||
<html suppressHydrationWarning lang="en">
|
||||
<head />
|
||||
<body
|
||||
className={clsx(
|
||||
suppressHydrationWarning
|
||||
className={cn(
|
||||
"min-h-screen bg-background font-sans antialiased",
|
||||
fontSans.variable,
|
||||
)}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -1,20 +1,11 @@
|
||||
import { Spacer } from "@nextui-org/react";
|
||||
import React from "react";
|
||||
|
||||
import { CustomTable, Header, ModalWrap } from "@/components";
|
||||
import { ColumnsProviders, DataTable, Header, ModalWrap } from "@/components";
|
||||
import { getProvider } from "@/lib/actions";
|
||||
|
||||
const visibleColumns: string[] = [
|
||||
"account",
|
||||
"group",
|
||||
"scan_status",
|
||||
"last_scan",
|
||||
"next_scan",
|
||||
"resources",
|
||||
"added",
|
||||
"actions",
|
||||
];
|
||||
|
||||
export default function Providers() {
|
||||
export default async function Providers() {
|
||||
const providers = await getProvider();
|
||||
const onSave = async () => {
|
||||
"use server";
|
||||
// event we want to pass down, ex. console.log("### hello");
|
||||
@@ -24,23 +15,21 @@ export default function Providers() {
|
||||
<>
|
||||
<Header title="Providers" icon="fluent:cloud-sync-24-regular" />
|
||||
<Spacer />
|
||||
<CustomTable
|
||||
initialVisibleColumns={visibleColumns}
|
||||
initialRowsPerPage={10}
|
||||
selectionMode={"none"}
|
||||
/>
|
||||
<Spacer />
|
||||
<ModalWrap
|
||||
modalTitle="Modal Title"
|
||||
modalBody={
|
||||
<>
|
||||
<p>Modal body content</p>
|
||||
</>
|
||||
}
|
||||
actionButtonLabel="Save"
|
||||
onAction={onSave}
|
||||
openButtonLabel="Open Modal"
|
||||
/>
|
||||
<div className="flex flex-col items-end w-full">
|
||||
<ModalWrap
|
||||
modalTitle="Modal Title"
|
||||
modalBody={
|
||||
<>
|
||||
<p>Modal body content</p>
|
||||
</>
|
||||
}
|
||||
actionButtonLabel="Save"
|
||||
onAction={onSave}
|
||||
openButtonLabel="Add Cloud Accounts"
|
||||
/>
|
||||
<Spacer y={6} />
|
||||
<DataTable columns={ColumnsProviders} data={providers.providers.data} />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,12 @@
|
||||
import { Spacer } from "@nextui-org/react";
|
||||
|
||||
import { Header } from "@/components";
|
||||
|
||||
export default async function Settings() {
|
||||
return (
|
||||
<>
|
||||
<Header title="Settings" icon="solar:settings-outline" />
|
||||
<Spacer />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { NextResponse } from "next/server";
|
||||
|
||||
import data from "../../../dataProviders.json";
|
||||
|
||||
export async function GET() {
|
||||
// Simulate fetching data with a delay
|
||||
await new Promise((resolve) => setTimeout(resolve, 2000));
|
||||
|
||||
return NextResponse.json({ providers: data });
|
||||
}
|
||||
+5
-2
@@ -1,7 +1,10 @@
|
||||
export * from "./providers/AccountInfo";
|
||||
export * from "./providers/DateWithTime";
|
||||
export * from "./providers/ProviderInfo";
|
||||
export * from "./providers/ScanStatus";
|
||||
export * from "./providers/table/ColumnsProviders";
|
||||
export * from "./providers/table/DataTable";
|
||||
export * from "./ui/header/Header";
|
||||
export * from "./ui/modal";
|
||||
export * from "./ui/sidebar";
|
||||
export * from "./ui/table/CustomTable";
|
||||
export * from "./ui/table/StatusBadge";
|
||||
export * from "./ui/table/Table";
|
||||
|
||||
@@ -16,7 +16,7 @@ export const DateWithTime: React.FC<DateWithTimeProps> = ({
|
||||
|
||||
return (
|
||||
<div className="max-w-fit">
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="flex flex-col items-start">
|
||||
<span className="text-md font-semibold">{formattedDate}</span>
|
||||
{showTime && (
|
||||
<span className="text-sm text-gray-500">{formattedTime}</span>
|
||||
|
||||
@@ -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>
|
||||
@@ -0,0 +1,110 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
Button,
|
||||
Dropdown,
|
||||
DropdownItem,
|
||||
DropdownMenu,
|
||||
DropdownTrigger,
|
||||
} from "@nextui-org/react";
|
||||
import { ColumnDef } from "@tanstack/react-table";
|
||||
import { add } from "date-fns";
|
||||
|
||||
import { VerticalDotsIcon } from "@/components/icons";
|
||||
import { StatusBadge } from "@/components/ui/table/StatusBadge";
|
||||
import { ProviderProps } from "@/types";
|
||||
|
||||
import { DateWithTime } from "../DateWithTime";
|
||||
import { ProviderInfo } from "../ProviderInfo";
|
||||
|
||||
const getProviderAttributes = (row: { original: ProviderProps }) => {
|
||||
return row.original.attributes;
|
||||
};
|
||||
|
||||
export const ColumnsProviders: ColumnDef<ProviderProps>[] = [
|
||||
{
|
||||
header: "ID",
|
||||
cell: ({ row }) => <p className="text-medium">{row.index + 1}</p>,
|
||||
},
|
||||
{
|
||||
accessorKey: "account",
|
||||
header: "Account",
|
||||
cell: ({ row }) => {
|
||||
const { connection, provider, alias, provider_id } =
|
||||
getProviderAttributes(row);
|
||||
return (
|
||||
<ProviderInfo
|
||||
connected={connection.connected}
|
||||
provider={provider}
|
||||
providerAlias={alias}
|
||||
providerId={provider_id}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "status",
|
||||
header: "Scan Status",
|
||||
cell: ({ row }) => {
|
||||
const { status } = getProviderAttributes(row);
|
||||
return <StatusBadge status={status} />;
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "lastScan",
|
||||
header: "Last Scan",
|
||||
cell: ({ row }) => {
|
||||
const { updated_at } = getProviderAttributes(row);
|
||||
return <DateWithTime dateTime={updated_at} />;
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "nextScan",
|
||||
header: "Next Scan",
|
||||
cell: ({ row }) => {
|
||||
const { updated_at } = getProviderAttributes(row);
|
||||
const nextDay = add(new Date(updated_at), {
|
||||
hours: 24,
|
||||
});
|
||||
return <DateWithTime dateTime={nextDay.toISOString()} />;
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "resources",
|
||||
header: "Resources",
|
||||
cell: ({ row }) => {
|
||||
const { resources } = getProviderAttributes(row);
|
||||
return <p className="font-medium">{resources}</p>;
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "added",
|
||||
header: "Added",
|
||||
cell: ({ row }) => {
|
||||
const { inserted_at } = getProviderAttributes(row);
|
||||
return <DateWithTime dateTime={inserted_at} showTime={false} />;
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "actions",
|
||||
header: () => <div className="text-right">Actions</div>,
|
||||
id: "actions",
|
||||
cell: () => {
|
||||
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>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,109 @@
|
||||
"use client";
|
||||
|
||||
import { Button } from "@nextui-org/react";
|
||||
import {
|
||||
ColumnDef,
|
||||
flexRender,
|
||||
getCoreRowModel,
|
||||
getPaginationRowModel,
|
||||
useReactTable,
|
||||
} from "@tanstack/react-table";
|
||||
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table/Table";
|
||||
|
||||
interface DataTableProps<TData, TValue> {
|
||||
columns: ColumnDef<TData, TValue>[];
|
||||
data: TData[];
|
||||
}
|
||||
|
||||
export function DataTable<TData, TValue>({
|
||||
columns,
|
||||
data,
|
||||
}: DataTableProps<TData, TValue>) {
|
||||
const table = useReactTable({
|
||||
data,
|
||||
columns,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
getPaginationRowModel: getPaginationRowModel(),
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="rounded-md border w-full">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
{table.getHeaderGroups().map((headerGroup) => (
|
||||
<TableRow key={headerGroup.id}>
|
||||
{headerGroup.headers.map((header) => {
|
||||
return (
|
||||
<TableHead key={header.id}>
|
||||
{header.isPlaceholder
|
||||
? null
|
||||
: flexRender(
|
||||
header.column.columnDef.header,
|
||||
header.getContext(),
|
||||
)}
|
||||
</TableHead>
|
||||
);
|
||||
})}
|
||||
</TableRow>
|
||||
))}
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{table.getRowModel().rows?.length ? (
|
||||
table.getRowModel().rows.map((row) => (
|
||||
<TableRow
|
||||
key={row.id}
|
||||
data-state={row.getIsSelected() && "selected"}
|
||||
>
|
||||
{row.getVisibleCells().map((cell) => (
|
||||
<TableCell key={cell.id}>
|
||||
{flexRender(
|
||||
cell.column.columnDef.cell,
|
||||
cell.getContext(),
|
||||
)}
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
))
|
||||
) : (
|
||||
<TableRow>
|
||||
<TableCell
|
||||
colSpan={columns.length}
|
||||
className="h-24 text-center"
|
||||
>
|
||||
No results.
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
<div className="flex items-center justify-end space-x-2 py-4">
|
||||
<Button
|
||||
variant="solid"
|
||||
size="sm"
|
||||
onClick={() => table.previousPage()}
|
||||
disabled={!table.getCanPreviousPage()}
|
||||
>
|
||||
Previous
|
||||
</Button>
|
||||
<Button
|
||||
variant="solid"
|
||||
size="sm"
|
||||
onClick={() => table.nextPage()}
|
||||
disabled={!table.getCanNextPage()}
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -4,9 +4,11 @@ import { Icon } from "@iconify/react";
|
||||
import { Button, ScrollShadow, Spacer, Tooltip } from "@nextui-org/react";
|
||||
import clsx from "clsx";
|
||||
import { usePathname } from "next/navigation";
|
||||
import React, { useCallback, useEffect, useState } from "react";
|
||||
import React, { useCallback } from "react";
|
||||
import { useMediaQuery } from "usehooks-ts";
|
||||
|
||||
import { useLocalStorage } from "@/hooks/useLocalStorage";
|
||||
|
||||
import {
|
||||
ProwlerExtended,
|
||||
ProwlerShort,
|
||||
@@ -17,33 +19,18 @@ import { sectionItemsWithTeams } from "./SidebarItems";
|
||||
import { UserAvatar } from "./UserAvatar";
|
||||
|
||||
export const SidebarWrap = () => {
|
||||
const [isCollapsed, setIsCollapsed] = useState(false);
|
||||
const [isLoaded, setIsLoaded] = useState(false);
|
||||
|
||||
const pathname = usePathname();
|
||||
const currentPath = pathname === "/" ? "overview" : pathname.split("/")?.[1];
|
||||
const [isCollapsed, setIsCollapsed] = useLocalStorage("isCollapsed", false);
|
||||
|
||||
const isMobile = useMediaQuery("(max-width: 768px)");
|
||||
|
||||
const isCompact = isCollapsed || isMobile;
|
||||
|
||||
useEffect(() => {
|
||||
const savedState = localStorage.getItem("isCollapsed");
|
||||
if (savedState !== null) {
|
||||
setIsCollapsed(JSON.parse(savedState));
|
||||
}
|
||||
setIsLoaded(true);
|
||||
}, []);
|
||||
const isCompact = Boolean(isCollapsed) || isMobile;
|
||||
|
||||
const onToggle = useCallback(() => {
|
||||
setIsCollapsed((prev) => {
|
||||
const newState = !prev;
|
||||
localStorage.setItem("isCollapsed", JSON.stringify(newState));
|
||||
return newState;
|
||||
});
|
||||
}, []);
|
||||
setIsCollapsed(!isCollapsed);
|
||||
}, [isCollapsed]);
|
||||
|
||||
if (!isLoaded) return null;
|
||||
const currentPath = pathname === "/" ? "overview" : pathname.split("/")?.[1];
|
||||
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,25 @@
|
||||
import { Chip } from "@nextui-org/react";
|
||||
import React from "react";
|
||||
|
||||
type Status = "completed" | "pending" | "cancelled";
|
||||
|
||||
export const statusColorMap: Record<Status, "success" | "danger" | "warning"> =
|
||||
{
|
||||
completed: "success",
|
||||
pending: "warning",
|
||||
cancelled: "danger",
|
||||
};
|
||||
|
||||
export const StatusBadge = ({ status }: { status: Status }) => {
|
||||
return (
|
||||
<Chip
|
||||
className="capitalize border-none gap-1 text-default-600"
|
||||
// eslint-disable-next-line security/detect-object-injection
|
||||
color={statusColorMap[status]}
|
||||
size="sm"
|
||||
variant="flat"
|
||||
>
|
||||
{status}
|
||||
</Chip>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,117 @@
|
||||
import * as React from "react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const Table = React.forwardRef<
|
||||
HTMLTableElement,
|
||||
React.HTMLAttributes<HTMLTableElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div className="relative w-full overflow-auto">
|
||||
<table
|
||||
ref={ref}
|
||||
className={cn("w-full caption-bottom text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
));
|
||||
Table.displayName = "Table";
|
||||
|
||||
const TableHeader = React.forwardRef<
|
||||
HTMLTableSectionElement,
|
||||
React.HTMLAttributes<HTMLTableSectionElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
|
||||
));
|
||||
TableHeader.displayName = "TableHeader";
|
||||
|
||||
const TableBody = React.forwardRef<
|
||||
HTMLTableSectionElement,
|
||||
React.HTMLAttributes<HTMLTableSectionElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<tbody
|
||||
ref={ref}
|
||||
className={cn("[&_tr:last-child]:border-0", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
TableBody.displayName = "TableBody";
|
||||
|
||||
const TableFooter = React.forwardRef<
|
||||
HTMLTableSectionElement,
|
||||
React.HTMLAttributes<HTMLTableSectionElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<tfoot
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"border-t bg-slate-100/50 font-medium [&>tr]:last:border-b-0 dark:bg-slate-800/50",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
TableFooter.displayName = "TableFooter";
|
||||
|
||||
const TableRow = React.forwardRef<
|
||||
HTMLTableRowElement,
|
||||
React.HTMLAttributes<HTMLTableRowElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<tr
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"border-b transition-colors hover:bg-slate-100/50 data-[state=selected]:bg-slate-100 dark:hover:bg-slate-800/50 dark:data-[state=selected]:bg-slate-800",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
TableRow.displayName = "TableRow";
|
||||
|
||||
const TableHead = React.forwardRef<
|
||||
HTMLTableCellElement,
|
||||
React.ThHTMLAttributes<HTMLTableCellElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<th
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"h-12 px-4 text-left align-middle font-medium text-slate-500 [&:has([role=checkbox])]:pr-0 dark:text-slate-400",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
TableHead.displayName = "TableHead";
|
||||
|
||||
const TableCell = React.forwardRef<
|
||||
HTMLTableCellElement,
|
||||
React.TdHTMLAttributes<HTMLTableCellElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<td
|
||||
ref={ref}
|
||||
className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
TableCell.displayName = "TableCell";
|
||||
|
||||
const TableCaption = React.forwardRef<
|
||||
HTMLTableCaptionElement,
|
||||
React.HTMLAttributes<HTMLTableCaptionElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<caption
|
||||
ref={ref}
|
||||
className={cn("mt-4 text-sm text-slate-500 dark:text-slate-400", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
TableCaption.displayName = "TableCaption";
|
||||
|
||||
export {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCaption,
|
||||
TableCell,
|
||||
TableFooter,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
};
|
||||
+4
-1
@@ -1,4 +1,7 @@
|
||||
import { Fira_Code as FontMono, Inter as FontSans } from "next/font/google";
|
||||
import {
|
||||
Fira_Code as FontMono,
|
||||
Plus_Jakarta_Sans as FontSans,
|
||||
} from "next/font/google";
|
||||
|
||||
export const fontSans = FontSans({
|
||||
subsets: ["latin"],
|
||||
|
||||
@@ -0,0 +1,105 @@
|
||||
{
|
||||
"links": {
|
||||
"first": "https://api.prowler.com/api/v1/providers?page%5Bnumber%5D=1",
|
||||
"last": "https://api.prowler.com/api/v1/providers?page%5Bnumber%5D=1",
|
||||
"next": null,
|
||||
"prev": null
|
||||
},
|
||||
"data": [
|
||||
{
|
||||
"id": "5fd8f121-269e-4715-84cf-f92373f15dfa",
|
||||
"type": "providers",
|
||||
"attributes": {
|
||||
"provider": "aws",
|
||||
"provider_id": "1234567890",
|
||||
"alias": "mock_aws_connected",
|
||||
"status": "cancelled",
|
||||
"resources": 101,
|
||||
"connection": {
|
||||
"connected": true,
|
||||
"last_checked_at": "2024-07-17T09:55:14.191475Z"
|
||||
},
|
||||
"scanner_args": {
|
||||
"only_logs": true,
|
||||
"excluded_checks": [
|
||||
"awslambda_function_no_secrets_in_code",
|
||||
"cloudwatch_log_group_no_secrets_in_logs"
|
||||
],
|
||||
"aws_retries_max_attempts": 5
|
||||
},
|
||||
"inserted_at": "2024-07-17T09:55:14.191475Z",
|
||||
"updated_at": "2024-07-17T09:55:14.191475Z",
|
||||
"created_by": {
|
||||
"object": "user",
|
||||
"id": "eea048ab-7cb3-47eb-9e5e-dce591ade41f"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "16aaeb4e-d3cd-4bb6-86f8-6c39cf93821e",
|
||||
"type": "providers",
|
||||
"attributes": {
|
||||
"provider": "azure",
|
||||
"provider_id": "1234567891",
|
||||
"alias": "mock_aws_not_connected",
|
||||
"status": "pending",
|
||||
"resources": 222,
|
||||
"connection": {
|
||||
"connected": false,
|
||||
"last_checked_at": "2024-07-17T09:55:18.987425Z"
|
||||
},
|
||||
"scanner_args": {
|
||||
"only_logs": true,
|
||||
"excluded_checks": [
|
||||
"awslambda_function_no_secrets_in_code",
|
||||
"cloudwatch_log_group_no_secrets_in_logs"
|
||||
],
|
||||
"aws_retries_max_attempts": 5
|
||||
},
|
||||
"inserted_at": "2024-07-17T09:50:18.987425Z",
|
||||
"updated_at": "2024-07-17T09:55:18.987425Z",
|
||||
"created_by": {
|
||||
"object": "user",
|
||||
"id": "a8f5e964-5964-4aaf-9176-844e2c3b0716"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "63f16b03-7849-4054-b40b-300e331f46f0",
|
||||
"type": "providers",
|
||||
"attributes": {
|
||||
"provider": "gcp",
|
||||
"provider_id": "1234567895",
|
||||
"alias": "mock_gcp",
|
||||
"status": "completed",
|
||||
"resources": 143,
|
||||
"connection": {
|
||||
"connected": true,
|
||||
"last_checked_at": "2024-07-17T09:55:18.987425Z"
|
||||
},
|
||||
"scanner_args": {
|
||||
"only_logs": true,
|
||||
"excluded_checks": [
|
||||
"apikeys_key_exists",
|
||||
"cloudsql_instance_public_ip"
|
||||
],
|
||||
"excluded_services": ["kms"]
|
||||
},
|
||||
"inserted_at": "2024-07-17T09:50:18.987425Z",
|
||||
"updated_at": "2024-07-17T09:55:18.987425Z",
|
||||
"created_by": {
|
||||
"object": "user",
|
||||
"id": "eea048ab-7cb3-47eb-9e5e-dce591ade41f"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
"meta": {
|
||||
"pagination": {
|
||||
"page": 1,
|
||||
"pages": 1,
|
||||
"count": 3
|
||||
},
|
||||
"version": "v1"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export * from "./useLocalStorage";
|
||||
@@ -0,0 +1,46 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
export const useLocalStorage = (
|
||||
key: string,
|
||||
initialValue: string | boolean,
|
||||
): [
|
||||
string | boolean,
|
||||
(
|
||||
value: string | boolean | ((val: string | boolean) => string | boolean),
|
||||
) => void,
|
||||
] => {
|
||||
const [state, setState] = useState<string | boolean>(initialValue);
|
||||
|
||||
useEffect(() => {
|
||||
try {
|
||||
const value = window.localStorage.getItem(key);
|
||||
|
||||
if (value) {
|
||||
setState(JSON.parse(value));
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}, [key]);
|
||||
|
||||
const setValue = (
|
||||
value: string | boolean | ((val: string | boolean) => string | boolean),
|
||||
) => {
|
||||
try {
|
||||
// If the passed value is a callback function,
|
||||
// then call it with the existing state.
|
||||
const valueToStore =
|
||||
typeof value === "function"
|
||||
? (value as (val: string | boolean) => string | boolean)(state)
|
||||
: value;
|
||||
window.localStorage.setItem(key, JSON.stringify(valueToStore));
|
||||
setState(valueToStore);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
|
||||
return [state, setValue];
|
||||
};
|
||||
@@ -0,0 +1 @@
|
||||
export * from "./provider.actions";
|
||||
@@ -0,0 +1,14 @@
|
||||
import "server-only";
|
||||
|
||||
import { parseStringify } from "../utils";
|
||||
|
||||
export const getProvider = async () => {
|
||||
const key = process.env.LOCAL_SITE_URL;
|
||||
try {
|
||||
const providers = await fetch(`${key}/api/providers`);
|
||||
const data = await providers.json();
|
||||
return parseStringify(data);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1 @@
|
||||
export * from "./utils";
|
||||
@@ -0,0 +1,81 @@
|
||||
import { type ClassValue, clsx } from "clsx";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
|
||||
export function capitalize(str: string): string {
|
||||
return str.charAt(0).toUpperCase() + str.slice(1);
|
||||
}
|
||||
|
||||
export const parseStringify = (value: any) => JSON.parse(JSON.stringify(value));
|
||||
|
||||
export const convertFileToUrl = (file: File) => URL.createObjectURL(file);
|
||||
|
||||
// FORMAT DATE TIME
|
||||
export const formatDateTime = (dateString: Date | string) => {
|
||||
const dateTimeOptions: Intl.DateTimeFormatOptions = {
|
||||
// weekday: "short", // abbreviated weekday name (e.g., 'Mon')
|
||||
month: "short", // abbreviated month name (e.g., 'Oct')
|
||||
day: "numeric", // numeric day of the month (e.g., '25')
|
||||
year: "numeric", // numeric year (e.g., '2023')
|
||||
hour: "numeric", // numeric hour (e.g., '8')
|
||||
minute: "numeric", // numeric minute (e.g., '30')
|
||||
hour12: true, // use 12-hour clock (true) or 24-hour clock (false)
|
||||
};
|
||||
|
||||
const dateDayOptions: Intl.DateTimeFormatOptions = {
|
||||
weekday: "short", // abbreviated weekday name (e.g., 'Mon')
|
||||
year: "numeric", // numeric year (e.g., '2023')
|
||||
month: "2-digit", // abbreviated month name (e.g., 'Oct')
|
||||
day: "2-digit", // numeric day of the month (e.g., '25')
|
||||
};
|
||||
|
||||
const dateOptions: Intl.DateTimeFormatOptions = {
|
||||
month: "short", // abbreviated month name (e.g., 'Oct')
|
||||
year: "numeric", // numeric year (e.g., '2023')
|
||||
day: "numeric", // numeric day of the month (e.g., '25')
|
||||
};
|
||||
|
||||
const timeOptions: Intl.DateTimeFormatOptions = {
|
||||
hour: "numeric", // numeric hour (e.g., '8')
|
||||
minute: "numeric", // numeric minute (e.g., '30')
|
||||
hour12: true, // use 12-hour clock (true) or 24-hour clock (false)
|
||||
};
|
||||
|
||||
const formattedDateTime: string = new Date(dateString).toLocaleString(
|
||||
"en-US",
|
||||
dateTimeOptions,
|
||||
);
|
||||
|
||||
const formattedDateDay: string = new Date(dateString).toLocaleString(
|
||||
"en-US",
|
||||
dateDayOptions,
|
||||
);
|
||||
|
||||
const formattedDate: string = new Date(dateString).toLocaleString(
|
||||
"en-US",
|
||||
dateOptions,
|
||||
);
|
||||
|
||||
const formattedTime: string = new Date(dateString).toLocaleString(
|
||||
"en-US",
|
||||
timeOptions,
|
||||
);
|
||||
|
||||
return {
|
||||
dateTime: formattedDateTime,
|
||||
dateDay: formattedDateDay,
|
||||
dateOnly: formattedDate,
|
||||
timeOnly: formattedTime,
|
||||
};
|
||||
};
|
||||
|
||||
export function encryptKey(passkey: string) {
|
||||
return btoa(passkey);
|
||||
}
|
||||
|
||||
export function decryptKey(passkey: string) {
|
||||
return atob(passkey);
|
||||
}
|
||||
+8
-2
@@ -5,15 +5,21 @@
|
||||
"@nextui-org/theme": "2.2.5",
|
||||
"@react-aria/ssr": "3.9.4",
|
||||
"@react-aria/visually-hidden": "3.8.12",
|
||||
"clsx": "2.1.1",
|
||||
"@tanstack/react-table": "^8.19.3",
|
||||
"class-variance-authority": "^0.7.0",
|
||||
"clsx": "^2.1.1",
|
||||
"date-fns": "^3.6.0",
|
||||
"framer-motion": "~11.1.1",
|
||||
"intl-messageformat": "^10.5.0",
|
||||
"lucide-react": "^0.417.0",
|
||||
"next": "14.2.3",
|
||||
"next-themes": "^0.2.1",
|
||||
"react": "18.3.1",
|
||||
"react-dom": "18.3.1",
|
||||
"swr": "^2.2.5"
|
||||
"server-only": "^0.0.1",
|
||||
"swr": "^2.2.5",
|
||||
"tailwind-merge": "^2.4.0",
|
||||
"tailwindcss-animate": "^1.0.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@iconify/react": "^5.0.1",
|
||||
|
||||
@@ -8,3 +8,30 @@ export type IconProps = {
|
||||
icon: React.FC<IconSvgProps>;
|
||||
style?: React.CSSProperties;
|
||||
};
|
||||
|
||||
export interface ProviderProps {
|
||||
id: string;
|
||||
type: "providers";
|
||||
attributes: {
|
||||
provider: "aws" | "azure" | "gcp";
|
||||
provider_id: string;
|
||||
alias: string;
|
||||
status: "completed" | "pending" | "cancelled";
|
||||
resources: number;
|
||||
connection: {
|
||||
connected: boolean;
|
||||
last_checked_at: string;
|
||||
};
|
||||
scanner_args: {
|
||||
only_logs: boolean;
|
||||
excluded_checks: string[];
|
||||
aws_retries_max_attempts: number;
|
||||
};
|
||||
inserted_at: string;
|
||||
updated_at: string;
|
||||
created_by: {
|
||||
object: string;
|
||||
id: string;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
@@ -1,3 +0,0 @@
|
||||
export function capitalize(str: string): string {
|
||||
return str.charAt(0).toUpperCase() + str.slice(1);
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
export const fetcher = (url: string) => fetch(url).then((res) => res.json());
|
||||
Reference in New Issue
Block a user