calvin.erfmann/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-02-02 16:19:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

lighten dark background, add more info to resources table

Browse Source
This commit is contained in:
Milo Schwartz
2024-11-24 22:34:11 -05:00
parent 658a6ca7bb
commit ce2bfcddd5
11 changed files with 191 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/[orgId]/settings/layout.tsx
View File

@@ -91,7 +91,7 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {
return (
<>
<div className="w-full border-b bg-neutral-100 dark:bg-neutral-900 mb-6 select-none sm:px-0 px-3 pt-3">
<div className="w-full border-b bg-neutral-100 dark:bg-neutral-800 mb-6 select-none sm:px-0 px-3 pt-3">
<div className="container mx-auto flex flex-col content-between gap-4 ">
<Header
email={user.email}

107
src/app/[orgId]/settings/resources/components/ResourcesTable.tsx
View File

@@ -9,7 +9,16 @@ import {
DropdownMenuTrigger,
} from "@app/components/ui/dropdown-menu";
import { Button } from "@app/components/ui/button";
import { ArrowRight, ArrowUpDown, MoreHorizontal } from "lucide-react";
import {
Copy,
ArrowRight,
ArrowUpDown,
MoreHorizontal,
Check,
ArrowUpRight,
ShieldOff,
ShieldCheck,
} from "lucide-react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import api from "@app/api";
@@ -26,6 +35,7 @@ export type ResourceRow = {
orgId: string;
domain: string;
site: string;
hasAuth: boolean;
};
type ResourcesTableProps = {
@@ -91,10 +101,99 @@ export default function SitesTable({ resources, orgId }: ResourcesTableProps) {
</Button>
);
},
cell: ({ row }) => {
const resourceRow = row.original;
return (
<Button variant="outline">
<Link
href={`/${resourceRow.orgId}/settings/sites/${resourceRow.site}`}
>
{resourceRow.site}
</Link>
<ArrowUpRight className="ml-2 h-4 w-4" />
</Button>
);
},
},
{
accessorKey: "domain",
header: "Domain",
cell: ({ row }) => {
const resourceRow = row.original;
return (
<div className="flex items-center">
<Link
href={`https://${resourceRow.domain}`}
target="_blank"
rel="noopener noreferrer"
className="hover:underline mr-2"
>
{resourceRow.domain}
</Link>
<Button
variant="ghost"
className="h-6 w-6 p-0"
onClick={() => {
navigator.clipboard.writeText(
resourceRow.domain,
);
const originalIcon = document.querySelector(
`#icon-${resourceRow.id}`,
);
if (originalIcon) {
originalIcon.classList.add("hidden");
}
const checkIcon = document.querySelector(
`#check-icon-${resourceRow.id}`,
);
if (checkIcon) {
checkIcon.classList.remove("hidden");
setTimeout(() => {
checkIcon.classList.add("hidden");
if (originalIcon) {
originalIcon.classList.remove(
"hidden",
);
}
}, 2000);
}
}}
>
<Copy
id={`icon-${resourceRow.id}`}
className="h-4 w-4"
/>
<Check
id={`check-icon-${resourceRow.id}`}
className="hidden text-green-500 h-4 w-4"
/>
<span className="sr-only">Copy domain</span>
</Button>
</div>
);
},
},
{
accessorKey: "hasAuth",
header: "Authentication",
cell: ({ row }) => {
const resourceRow = row.original;
return (
<div>
{resourceRow.hasAuth ? (
<span className="text-green-500 flex items-center space-x-2">
<ShieldCheck className="w-4 h-4" />
<span>Protected</span>
</span>
) : (
<span className="text-yellow-500 flex items-center space-x-2">
<ShieldOff className="w-4 h-4" />
<span>Not Protected</span>
</span>
)}
</div>
);
},
},
{
id: "actions",
@@ -130,11 +229,11 @@ export default function SitesTable({ resources, orgId }: ResourcesTableProps) {
<button
onClick={() => {
setSelectedResource(
resourceRow
resourceRow,
);
setIsDeleteModalOpen(true);
}}
className="text-red-600 hover:text-red-800 hover:underline cursor-pointer"
className="text-red-500"
>
Delete
</button>
@@ -146,7 +245,7 @@ export default function SitesTable({ resources, orgId }: ResourcesTableProps) {
className="ml-2"
onClick={() =>
router.push(
`/${resourceRow.orgId}/settings/resources/${resourceRow.id}`
`/${resourceRow.orgId}/settings/resources/${resourceRow.id}`,
)
}
>

12
src/app/[orgId]/settings/resources/page.tsx
View File

@@ -19,7 +19,7 @@ export default async function ResourcesPage(props: ResourcesPageProps) {
try {
const res = await internal.get<AxiosResponse<ListResourcesResponse>>(
`/org/${params.orgId}/resources`,
await authCookieHeader()
await authCookieHeader(),
);
resources = res.data.data.resources;
} catch (e) {
@@ -31,8 +31,8 @@ export default async function ResourcesPage(props: ResourcesPageProps) {
const getOrg = cache(async () =>
internal.get<AxiosResponse<GetOrgResponse>>(
`/org/${params.orgId}`,
await authCookieHeader()
)
await authCookieHeader(),
),
);
const res = await getOrg();
org = res.data.data;
@@ -49,8 +49,12 @@ export default async function ResourcesPage(props: ResourcesPageProps) {
id: resource.resourceId,
name: resource.name,
orgId: params.orgId,
domain: resource.subdomain || "",
domain: `${resource.ssl ? "https://" : "http://"}${resource.fullDomain}`,
site: resource.siteName || "None",
hasAuth:
resource.sso ||
resource.pincodeId !== null ||
resource.pincodeId !== null,
};
});

4
src/app/[orgId]/settings/sites/components/SitesTable.tsx
View File

@@ -24,8 +24,8 @@ export type SiteRow = {
id: number;
nice: string;
name: string;
mbIn: number;
mbOut: number;
mbIn: string;
mbOut: string;
orgId: string;
};

16
src/app/[orgId]/settings/sites/page.tsx
View File

@@ -15,20 +15,30 @@ export default async function SitesPage(props: SitesPageProps) {
try {
const res = await internal.get<AxiosResponse<ListSitesResponse>>(
`/org/${params.orgId}/sites`,
await authCookieHeader()
await authCookieHeader(),
);
sites = res.data.data.sites;
} catch (e) {
console.error("Error fetching sites", e);
}
function formatSize(mb: number): string {
if (mb >= 1024 * 1024) {
return `${(mb / (1024 * 1024)).toFixed(2)} TB`;
} else if (mb >= 1024) {
return `${(mb / 1024).toFixed(2)} GB`;
} else {
return `${mb.toFixed(2)} MB`;
}
}
const siteRows: SiteRow[] = sites.map((site) => {
return {
name: site.name,
id: site.siteId,
nice: site.niceId.toString(),
mbIn: site.megabytesIn || 0,
mbOut: site.megabytesOut || 0,
mbIn: formatSize(site.megabytesIn || 0),
mbOut: formatSize(site.megabytesOut || 0),
orgId: params.orgId,
};
});

22
src/app/globals.css
View File

@@ -6,11 +6,11 @@
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 20 14.3% 4.1%;
--foreground: 20 5.0% 10.0%;
--card: 0 0% 100%;
--card-foreground: 20 14.3% 4.1%;
--card-foreground: 20 5.0% 10.0%;
--popover: 0 0% 100%;
--popover-foreground: 20 14.3% 4.1%;
--popover-foreground: 20 5.0% 10.0%;
--primary: 24.6 95% 53.1%;
--primary-foreground: 60 9.1% 97.8%;
--secondary: 60 4.8% 95.9%;
@@ -33,24 +33,24 @@
}
.dark {
--background: 20 14.3% 4.1%;
--background: 20 5.0% 10.0%;
--foreground: 60 9.1% 97.8%;
--card: 20 14.3% 4.1%;
--card: 20 5.0% 10.0%;
--card-foreground: 60 9.1% 97.8%;
--popover: 20 14.3% 4.1%;
--popover: 20 5.0% 10.0%;
--popover-foreground: 60 9.1% 97.8%;
--primary: 20.5 90.2% 48.2%;
--primary-foreground: 60 9.1% 97.8%;
--secondary: 12 6.5% 15.1%;
--secondary: 12 6.5% 25.0%;
--secondary-foreground: 60 9.1% 97.8%;
--muted: 12 6.5% 15.1%;
--muted: 12 6.5% 25.0%;
--muted-foreground: 24 5.4% 63.9%;
--accent: 12 6.5% 15.1%;
--accent: 12 6.5% 25.0%;
--accent-foreground: 60 9.1% 97.8%;
--destructive: 0 72.2% 50.6%;
--destructive-foreground: 60 9.1% 97.8%;
--border: 12 6.5% 15.1%;
--input: 12 6.5% 15.1%;
--border: 12 6.5% 25.0%;
--input: 12 6.5% 25.0%;
--ring: 20.5 90.2% 48.2%;
--chart-1: 220 70% 50%;
--chart-2: 160 60% 45%;