feat: responsive header, search boxes (#10)

This commit is contained in:
UUBulb
2024-11-22 07:41:47 +08:00
committed by GitHub
parent 33b2ffb40c
commit 87e17a07df
28 changed files with 672 additions and 168 deletions

View File

@@ -54,6 +54,7 @@ export default function AlertRulePage() {
{
header: "Name",
accessorKey: "name",
accessorFn: row => row.name,
cell: ({ row }) => {
const s = row.original;
return (
@@ -121,8 +122,8 @@ export default function AlertRulePage() {
return (
<div className="px-8">
<div className="flex mt-6 mb-4 gap-[60%]">
<NotificationTab className="flex-1" />
<div className="flex mt-6 mb-4">
<NotificationTab className="flex-1 mr-4 sm:max-w-[40%]" />
<HeaderButtonGroup className="flex-2 flex gap-2 ml-auto" delete={{
fn: deleteAlertRules,
id: selectedRows.map(r => r.original.id),

View File

@@ -99,19 +99,27 @@ export default function CronPage() {
{
header: "Coverage",
accessorKey: "cover",
accessorFn: row => {
switch (row.cover) {
case 0: {
return "Ignore All"
}
case 1: {
return "Cover All"
}
case 2: {
return "On alert"
}
}
},
accessorFn: row => row.cover,
cell: ({ row }) => {
const s = row.original;
return (
<div className="max-w-48 whitespace-normal break-words">
{(() => {
switch (s.cover) {
case 0: {
return <span>Ignore All</span>
}
case 1: {
return <span>Cover All</span>
}
case 2: {
return <span>On alert</span>
}
}
})()}
</div>
)
}
},
{
header: "Specific Servers",
@@ -121,7 +129,15 @@ export default function CronPage() {
{
header: "Last Execution",
accessorKey: "lastExecution",
accessorFn: row => row.last_executed_at
accessorFn: row => row.last_executed_at,
cell: ({ row }) => {
const s = row.original;
return (
<div className="max-w-24 whitespace-normal break-words">
{s.last_executed_at}
</div>
)
}
},
{
header: "Last Result",

View File

@@ -62,6 +62,7 @@ export default function DDNSPage() {
{
header: "Name",
accessorKey: "name",
accessorFn: row => row.name,
cell: ({ row }) => {
const s = row.original;
return (
@@ -89,6 +90,7 @@ export default function DDNSPage() {
{
header: "Domains",
accessorKey: "domains",
accessorFn: row => row.domains,
cell: ({ row }) => {
const s = row.original;
return (

View File

@@ -50,7 +50,7 @@ export default () => {
<FormItem>
<FormLabel>Username</FormLabel>
<FormControl>
<Input placeholder="shadcn" {...field} />
<Input placeholder="shadcn" autoComplete="username" {...field} />
</FormControl>
<FormDescription>
This is your public display name.
@@ -66,7 +66,7 @@ export default () => {
<FormItem>
<FormLabel>Password</FormLabel>
<FormControl>
<Input type="password" placeholder="shadcn" {...field} />
<Input type="password" placeholder="shadcn" autoComplete="current-password" {...field} />
</FormControl>
<FormDescription>
This is your public display name.

View File

@@ -53,6 +53,7 @@ export default function NATPage() {
{
header: "Name",
accessorKey: "name",
accessorFn: row => row.name,
cell: ({ row }) => {
const s = row.original;
return (
@@ -70,6 +71,7 @@ export default function NATPage() {
{
header: "Local service",
accessorKey: "host",
accessorFn: row => row.host,
cell: ({ row }) => {
const s = row.original;
return (
@@ -82,6 +84,7 @@ export default function NATPage() {
{
header: "Bind hostname",
accessorKey: "domain",
accessorFn: row => row.domain,
cell: ({ row }) => {
const s = row.original;
return (

View File

@@ -54,6 +54,7 @@ export default function NotificationGroupPage() {
{
header: "Name",
accessorKey: "name",
accessorFn: row => row.group.name,
cell: ({ row }) => {
const s = row.original;
return (
@@ -96,8 +97,8 @@ export default function NotificationGroupPage() {
return (
<div className="px-8">
<div className="flex mt-6 mb-4 gap-[60%]">
<GroupTab className="flex-1" />
<div className="flex mt-6 mb-4">
<GroupTab className="flex-1 mr-4 sm:max-w-[40%]" />
<HeaderButtonGroup className="flex-2 flex gap-2 ml-auto" delete={{
fn: deleteNotificationGroups,
id: selectedRows.map(r => r.original.group.id),

View File

@@ -56,6 +56,7 @@ export default function NotificationPage() {
{
header: "Name",
accessorKey: "name",
accessorFn: row => row.name,
cell: ({ row }) => {
const s = row.original;
return (
@@ -77,6 +78,7 @@ export default function NotificationPage() {
{
header: "URL",
accessorKey: "url",
accessorFn: row => row.url,
cell: ({ row }) => {
const s = row.original;
return (
@@ -119,8 +121,8 @@ export default function NotificationPage() {
return (
<div className="px-8">
<div className="flex mt-6 mb-4 gap-[60%]">
<NotificationTab className="flex-1" />
<div className="flex mt-6 mb-4">
<NotificationTab className="flex-1 mr-4 sm:max-w-[40%]" />
<HeaderButtonGroup className="flex-2 flex gap-2 ml-auto" delete={{
fn: deleteNotification,
id: selectedRows.map(r => r.original.id),

View File

@@ -54,6 +54,7 @@ export default function ServerGroupPage() {
{
header: "Name",
accessorKey: "name",
accessorFn: row => row.group.name,
cell: ({ row }) => {
const s = row.original;
return (
@@ -96,8 +97,8 @@ export default function ServerGroupPage() {
return (
<div className="px-8">
<div className="flex mt-6 mb-4 gap-[60%]">
<GroupTab className="flex-1" />
<div className="flex mt-6 mb-4">
<GroupTab className="flex-1 mr-4 sm:max-w-[40%]" />
<HeaderButtonGroup className="flex-2 flex ml-auto gap-2" delete={{
fn: deleteServerGroups,
id: selectedRows.map(r => r.original.group.id),

View File

@@ -59,6 +59,7 @@ export default function ServerPage() {
{
header: "Name",
accessorKey: "name",
accessorFn: row => row.name,
cell: ({ row }) => {
const s = row.original;
return (
@@ -81,6 +82,7 @@ export default function ServerPage() {
id: "ip",
header: "IP",
accessorKey: "host.ip",
accessorFn: row => row.host?.ip,
cell: ({ row }) => {
const s = row.original;
return (

View File

@@ -54,6 +54,7 @@ export default function ServicePage() {
},
{
header: "Name",
accessorFn: row => row.service.name,
accessorKey: "service.name",
cell: ({ row }) => {
const s = row.original;
@@ -66,6 +67,7 @@ export default function ServicePage() {
},
{
header: "Target",
accessorFn: row => row.service.target,
accessorKey: "service.target",
cell: ({ row }) => {
const s = row.original;
@@ -79,15 +81,23 @@ export default function ServicePage() {
{
header: "Coverage",
accessorKey: "service.cover",
accessorFn: row => {
switch (row.service.cover) {
case 0: {
return "Cover All"
}
case 1: {
return "Ignore All"
}
}
accessorFn: row => row.service.cover,
cell: ({ row }) => {
const s = row.original.service;
return (
<div className="max-w-48 whitespace-normal break-words">
{(() => {
switch (s.cover) {
case 0: {
return <span>Cover All</span>
}
case 1: {
return <span>Ignore All</span>
}
}
})()}
</div>
)
}
},
{
@@ -98,7 +108,8 @@ export default function ServicePage() {
{
header: "Type",
accessorKey: "service.type",
accessorFn: row => serviceTypes[row.service.type] || '',
accessorFn: row => row.service.type,
cell: ({ row }) => serviceTypes[row.original.service.type] || '',
},
{
header: "Interval",