feat: table style update
This commit is contained in:
parent
1a104b38ee
commit
92b414b50d
|
@ -32,7 +32,7 @@ export default function ProjectHomeLayout({
|
|||
}));
|
||||
|
||||
return (
|
||||
<div className="hidden space-y-6 py-10 md:block">
|
||||
<div className="block space-y-6 py-10">
|
||||
<div className="flex flex-col space-y-8 lg:flex-row lg:space-x-12 lg:space-y-0">
|
||||
<aside className="lg:w-1/5">
|
||||
<SidebarNav items={items} />
|
||||
|
|
|
@ -24,7 +24,7 @@ import { api } from "~/trpc/react";
|
|||
import { type RouterOutputs } from "~/trpc/shared";
|
||||
|
||||
const formValidator = z.object({
|
||||
replicas: z.coerce.number().int().positive(),
|
||||
replicas: z.coerce.number().int().min(0),
|
||||
maxReplicasPerNode: z.number().int().positive().nullable(),
|
||||
deployMode: z.enum(["replicated", "global"]),
|
||||
zeroDowntime: z.boolean(),
|
||||
|
|
|
@ -40,7 +40,7 @@ export default function ContainersPage({
|
|||
<TableHead>Uptime</TableHead>
|
||||
<TableHead>Node</TableHead>
|
||||
<TableHead>CPU</TableHead>
|
||||
<TableHead>Memory</TableHead>
|
||||
<TableHead>Memory (used/limit)</TableHead>
|
||||
<TableHead>Network (RX/TX)</TableHead>
|
||||
<TableHead className="text-right">Actions</TableHead>
|
||||
</TableRow>
|
||||
|
|
|
@ -45,7 +45,7 @@ export function ContainerEntry({
|
|||
|
||||
return (
|
||||
<>
|
||||
<TableRow className="!border-b-0">
|
||||
<TableRow>
|
||||
<TableCell
|
||||
className="cursor-pointer font-mono text-sm text-muted-foreground"
|
||||
onClick={() => {
|
||||
|
@ -95,7 +95,7 @@ export function ContainerEntry({
|
|||
|
||||
<TableCell>{uptimeText ?? "N/A"}</TableCell>
|
||||
<TableCell>{mainContainer?.node ?? "unknown"}</TableCell>
|
||||
<TableCell>{mainContainer?.cpu?.toFixed(2) ?? "?"}%</TableCell>
|
||||
<TableCell>{mainContainer?.cpu?.toFixed(2) ?? "0.00"}%</TableCell>
|
||||
<TableCell>
|
||||
{prettyBytes(mainContainer?.usedMemory ?? 0)} /{" "}
|
||||
{prettyBytes(mainContainer?.totalMemory ?? 0)}
|
||||
|
|
|
@ -7,8 +7,10 @@ import {
|
|||
ContainerIcon,
|
||||
GlobeIcon,
|
||||
HomeIcon,
|
||||
NetworkIcon,
|
||||
SaveAllIcon,
|
||||
ServerCogIcon,
|
||||
TextIcon,
|
||||
} from "lucide-react";
|
||||
import { SidebarNav, type SidebarNavProps } from "~/components/SidebarNav";
|
||||
import { useProject } from "../../_context/ProjectContext";
|
||||
|
@ -38,6 +40,12 @@ const sidebarNavItems = [
|
|||
href: "/deployments",
|
||||
icon: CloudyIcon,
|
||||
},
|
||||
{
|
||||
title: "Logs",
|
||||
description: "Logs for this service.",
|
||||
href: "/logs",
|
||||
icon: TextIcon,
|
||||
},
|
||||
|
||||
{
|
||||
type: "divider",
|
||||
|
@ -56,6 +64,12 @@ const sidebarNavItems = [
|
|||
href: "/domains",
|
||||
icon: GlobeIcon,
|
||||
},
|
||||
{
|
||||
title: "Network",
|
||||
description: "Network settings",
|
||||
href: "/network",
|
||||
icon: NetworkIcon,
|
||||
},
|
||||
{
|
||||
title: "Environment",
|
||||
description: "Environment settings",
|
||||
|
@ -88,7 +102,7 @@ export default function ProjectHomeLayout({
|
|||
})) as SidebarNavProps["items"];
|
||||
|
||||
return (
|
||||
<div className="hidden space-y-6 py-10 md:block">
|
||||
<div className="space-y-6 py-10">
|
||||
<div className="flex flex-col space-y-8 lg:flex-row lg:space-x-12 lg:space-y-0">
|
||||
<aside className="lg:w-1/5">
|
||||
<SidebarNav items={items} />
|
||||
|
|
|
@ -30,7 +30,7 @@ export function SidebarNav({ className, items, ...props }: SidebarNavProps) {
|
|||
return (
|
||||
<nav
|
||||
className={cn(
|
||||
"flex space-x-2 lg:flex-col lg:space-x-0 lg:space-y-1",
|
||||
"flex flex-col space-x-2 lg:space-x-0 lg:space-y-1",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
|
|
|
@ -20,7 +20,14 @@ const TableHeader = React.forwardRef<
|
|||
HTMLTableSectionElement,
|
||||
React.HTMLAttributes<HTMLTableSectionElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
|
||||
<thead
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"rounded-xl border bg-card bg-clip-border px-4 [&_tr]:border-b",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
TableHeader.displayName = "TableHeader";
|
||||
|
||||
|
@ -110,11 +117,11 @@ TableCaption.displayName = "TableCaption";
|
|||
|
||||
export {
|
||||
Table,
|
||||
TableHeader,
|
||||
TableBody,
|
||||
TableCaption,
|
||||
TableCell,
|
||||
TableFooter,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
TableCell,
|
||||
TableCaption,
|
||||
};
|
||||
|
|
Loading…
Reference in a new issue