schiwagoa/tianji
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add group feature in backend

Browse Source
This commit is contained in:
moonrailgun 2024-09-17 19:08:58 +08:00
parent e323e104e0
commit 4d39cb5ef4
10 changed files with 171 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
src/client/components/monitor/StatusPage/Body.tsx Normal file
View File

@ -0,0 +1,90 @@
import { AppRouterOutput, trpc } from '@/api/trpc';
import React, { useMemo } from 'react';
import { bodySchema } from './schema';
import { Empty } from 'antd';
import { useTranslation } from '@i18next-toolkit/react';
import { MonitorListItem } from '../MonitorListItem';
interface StatusPageBodyProps {
workspaceId: string;
info: NonNullable<AppRouterOutput['monitor']['getPageInfo']>;
}
export const StatusPageBody: React.FC<StatusPageBodyProps> = React.memo(
(props) => {
const { info } = props;
const { t } = useTranslation();
const body = useMemo(() => {
const res = bodySchema.safeParse(info.body);
if (res.success) {
return res.data;
} else {
return { groups: [] };
}
}, [info.body]);
return (
<div>
{body.groups.map((group) => (
<div key={group.key}>
<div className="mb-2 text-lg font-semibold">{group.title}</div>
<div className="flex flex-col gap-4 rounded-md border border-gray-200 p-2.5 dark:border-gray-700">
{group.children.length === 0 && (
<Empty description={t('No any monitor has been set')} />
)}
{group.children.map((item) => {
if (item.type === 'monitor') {
return (
<StatusItemMonitor
key={item.key}
workspaceId={props.workspaceId}
id={item.id}
showCurrent={item.showCurrent ?? false}
/>
);
}
return null;
})}
</div>
</div>
))}
</div>
);
}
);
StatusPageBody.displayName = 'StatusPageBody';
export const StatusItemMonitor: React.FC<{
id: string;
showCurrent: boolean;
workspaceId: string;
}> = React.memo((props) => {
const { data: list = [], isLoading } = trpc.monitor.getPublicInfo.useQuery({
monitorIds: [props.id],
});
if (isLoading) {
return null;
}
const item = list[0];
if (!item) {
return null;
}
return (
<MonitorListItem
key={item.id}
workspaceId={props.workspaceId}
monitorId={item.id}
monitorName={item.name}
monitorType={item.type}
showCurrentResponse={props.showCurrent}
/>
);
});
StatusItemMonitor.displayName = 'StatusItemMonitor';

9
src/client/components/monitor/StatusPage/EditForm.tsx
View File

@ -27,7 +27,8 @@ import { Collapsible, CollapsibleContent } from '@/components/ui/collapsible';
import { CollapsibleTrigger } from '@radix-ui/react-collapsible';
import { CaretSortIcon } from '@radix-ui/react-icons';
import { DeprecatedBadge } from '@/components/DeprecatedBadge';
import { groupItemSchema, MonitorStatusPageServiceList } from './ServiceList';
import { MonitorStatusPageServiceList } from './ServiceList';
import { bodySchema } from './schema';
const Text = Typography.Text;
@ -40,11 +41,7 @@ const editFormSchema = z.object({
.regex(domainRegex, 'Invalid domain')
.or(z.literal(''))
.optional(),
body: z
.object({
groups: z.array(groupItemSchema),
})
.default({ groups: [] }),
body: bodySchema,
/**
* @deprecated

23
src/client/components/monitor/StatusPage/ServiceList.tsx
View File

@ -13,19 +13,7 @@ import { MonitorPicker } from '../MonitorPicker';
import { Switch } from '@/components/ui/switch';
import { set } from 'lodash-es';
import { EditableText } from '@/components/EditableText';
export const leafItemSchema = z.object({
key: z.string(),
id: z.string(),
type: z.enum(['monitor']),
showCurrent: z.boolean().default(false).optional(),
});
export const groupItemSchema = z.object({
key: z.string(),
title: z.string(),
children: z.array(leafItemSchema),
});
import { groupItemSchema, leafItemSchema } from './schema';
type GroupItemProps = Omit<z.infer<typeof groupItemSchema>, 'key' | 'children'>;
type LeafItemProps = Omit<z.infer<typeof leafItemSchema>, 'key'>;
@ -167,7 +155,7 @@ export const MonitorStatusPageServiceList: React.FC<MonitorStatusPageServiceList
{level > 0 && (
<div className={cn('flex items-center gap-2')}>
<EditableText
className="flex-1 overflow-hidden text-ellipsis text-nowrap"
className="flex-1 overflow-hidden text-ellipsis text-nowrap font-bold"
defaultValue={group.title}
onSave={(text) => handleChangeGroupTitle(group.key, text)}
/>
@ -193,7 +181,10 @@ export const MonitorStatusPageServiceList: React.FC<MonitorStatusPageServiceList
)}
<div
className={cn(level > 0 && 'border-l-4 border-gray-600 p-2')}
className={cn(
level > 0 &&
'border-l-4 border-gray-300 p-2 dark:border-gray-600'
)}
>
{children}
</div>
@ -203,7 +194,7 @@ export const MonitorStatusPageServiceList: React.FC<MonitorStatusPageServiceList
if (item.type === 'monitor') {
return (
<div key={item.key}>
{i !== 0 && <Separator />}
{i !== 0 && <Separator className="my-2" />}
<div className="mb-2 flex flex-col gap-2">
<MonitorPicker

3
src/client/components/monitor/StatusPage/Services.tsx
View File

@ -13,6 +13,9 @@ interface StatusPageServicesProps {
showCurrent?: boolean;
}[];
}
/**
* @deprecated
*/
export const StatusPageServices: React.FC<StatusPageServicesProps> = React.memo(
(props) => {
const { t } = useTranslation();

11
src/client/components/monitor/StatusPage/index.tsx
View File

@ -22,6 +22,7 @@ import {
SheetTrigger,
} from '@/components/ui/sheet';
import { cn } from '@/utils/style';
import { StatusPageBody } from './Body';
interface MonitorStatusPageProps {
slug: string;
@ -150,13 +151,21 @@ export const MonitorStatusPage: React.FC<MonitorStatusPageProps> = React.memo(
<MarkdownViewer value={info?.description ?? ''} />
</div>
{/* Body */}
{info && (
<StatusPageBody workspaceId={info.workspaceId} info={info} />
)}
{/* deprecated monitor list */}
{info && Array.isArray(monitorList) && monitorList.length > 0 && (
<>
<div className="mb-2 text-lg font-semibold">{t('Services')}</div>
{info && (
<StatusPageServices
workspaceId={info.workspaceId}
monitorList={monitorList}
/>
</>
)}
</div>
</div>

20
src/client/components/monitor/StatusPage/schema.ts Normal file
View File

@ -0,0 +1,20 @@
import { z } from 'zod';
export const leafItemSchema = z.object({
key: z.string(),
id: z.string(),
type: z.enum(['monitor']),
showCurrent: z.boolean().default(false).optional(),
});
export const groupItemSchema = z.object({
key: z.string(),
title: z.string(),
children: z.array(leafItemSchema),
});
export const bodySchema = z
.object({
groups: z.array(groupItemSchema),
})
.default({ groups: [] });

2
src/server/prisma/migrations/20240916135644_add_monitor_status_page_body/migration.sql Normal file
View File

@ -0,0 +1,2 @@
-- AlterTable
ALTER TABLE "MonitorStatusPage" ADD COLUMN "body" JSONB NOT NULL DEFAULT '{}';

5
src/server/prisma/schema.prisma
View File

@ -421,9 +421,12 @@ model MonitorStatusPage {
slug String @unique // url slug
title String @db.VarChar(100)
description String @default("") @db.VarChar(1000)
/// [CommonPayload]
/// @zod.custom(imports.CommonPayloadSchema)
body Json @default("{}")
/// [MonitorStatusPageList]
/// @zod.custom(imports.MonitorStatusPageListSchema)
monitorList Json @default("[]") // monitor list
monitorList Json @default("[]") // monitor list @deprecated
domain String? // custom domain which can add cname record
createdAt DateTime @default(now()) @db.Timestamptz(6)
updatedAt DateTime @updatedAt @db.Timestamptz(6)

4
src/server/prisma/zod/monitorstatuspage.ts
View File

@ -14,6 +14,10 @@ export const MonitorStatusPageModelSchema = z.object({
slug: z.string(),
title: z.string(),
description: z.string(),
/**
* [CommonPayload]
*/
body: imports.CommonPayloadSchema,
/**
* [MonitorStatusPageList]
*/

27
src/server/trpc/routers/monitor.ts
View File

@ -601,6 +601,7 @@ export const monitorRouter = router({
.merge(
MonitorStatusPageModelSchema.pick({
description: true,
body: true,
monitorList: true,
domain: true,
}).partial()
@ -608,8 +609,15 @@ export const monitorRouter = router({
)
.output(MonitorStatusPageModelSchema)
.mutation(async ({ input }) => {
const { workspaceId, slug, title, description, monitorList, domain } =
input;
const {
workspaceId,
slug,
title,
description,
body,
monitorList,
domain,
} = input;
const existSlugCount = await prisma.monitorStatusPage.count({
where: {
@ -631,6 +639,7 @@ export const monitorRouter = router({
slug,
title,
description,
body,
monitorList,
domain: domain || null, // make sure not ''
},
@ -661,6 +670,7 @@ export const monitorRouter = router({
slug: true,
title: true,
description: true,
body: true,
monitorList: true,
domain: true,
}).partial()
@ -668,8 +678,16 @@ export const monitorRouter = router({
)
.output(MonitorStatusPageModelSchema)
.mutation(async ({ input }) => {
const { id, workspaceId, slug, title, description, monitorList, domain } =
input;
const {
id,
workspaceId,
slug,
title,
description,
body,
monitorList,
domain,
} = input;
if (slug) {
const existSlugCount = await prisma.monitorStatusPage.count({
@ -699,6 +717,7 @@ export const monitorRouter = router({
slug,
title,
description,
body,
monitorList,
domain: domain || null,
},