diff --git a/src/client/components/monitor/MonitorInfoEditor.tsx b/src/client/components/monitor/MonitorInfoEditor.tsx index 7ef6b95..0557742 100644 --- a/src/client/components/monitor/MonitorInfoEditor.tsx +++ b/src/client/components/monitor/MonitorInfoEditor.tsx @@ -121,7 +121,7 @@ export const MonitorInfoEditor: React.FC = React.memo( diff --git a/src/client/routes/monitor/$monitorId/index.tsx b/src/client/routes/monitor/$monitorId/index.tsx index 787c3c1..caf183b 100644 --- a/src/client/routes/monitor/$monitorId/index.tsx +++ b/src/client/routes/monitor/$monitorId/index.tsx @@ -5,10 +5,20 @@ import { ErrorTip } from '@/components/ErrorTip'; import { Loading } from '@/components/Loading'; import { NotFoundTip } from '@/components/NotFoundTip'; import { MonitorInfo } from '@/components/monitor/MonitorInfo'; +import { Button } from '@/components/ui/button'; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from '@/components/ui/dropdown-menu'; import { ScrollArea } from '@/components/ui/scroll-area'; import { useCurrentWorkspaceId } from '@/store/user'; import { routeAuthBeforeLoad } from '@/utils/route'; -import { createFileRoute } from '@tanstack/react-router'; +import { useTranslation } from '@i18next-toolkit/react'; +import { createFileRoute, useNavigate } from '@tanstack/react-router'; +import { pick } from 'lodash-es'; +import { LuCopy, LuMoreVertical } from 'react-icons/lu'; export const Route = createFileRoute('/monitor/$monitorId/')({ beforeLoad: routeAuthBeforeLoad, @@ -22,6 +32,8 @@ function MonitorDetailComponent() { workspaceId, monitorId, }); + const { t } = useTranslation(); + const navigate = useNavigate(); if (!monitorId) { return ; @@ -36,7 +48,44 @@ function MonitorDetailComponent() { } return ( - }> + + + + + + + + navigate({ + to: '/monitor/add', + search: pick(monitor, [ + 'name', + 'type', + 'notifications', + 'interval', + 'maxRetries', + 'trendingMode', + 'payload', + ]), + }) + } + > + + {t('Duplicate')} + + + + } + /> + } + > diff --git a/src/client/routes/monitor/add.tsx b/src/client/routes/monitor/add.tsx index 2d6a278..6478d5a 100644 --- a/src/client/routes/monitor/add.tsx +++ b/src/client/routes/monitor/add.tsx @@ -1,10 +1,8 @@ import { createFileRoute, useNavigate } from '@tanstack/react-router'; -import { t, useTranslation } from '@i18next-toolkit/react'; -import { Button } from '@/components/ui/button'; +import { useTranslation } from '@i18next-toolkit/react'; import { useEvent } from '@/hooks/useEvent'; import { useCurrentWorkspaceId } from '@/store/user'; -import { trpc } from '@/api/trpc'; -import { Card, CardContent, CardFooter } from '@/components/ui/card'; +import { Card, CardContent } from '@/components/ui/card'; import { CommonWrapper } from '@/components/CommonWrapper'; import { MonitorInfoEditor, @@ -14,6 +12,8 @@ import { routeAuthBeforeLoad } from '@/utils/route'; import { useMonitorUpsert } from '@/api/model/monitor'; import { CommonHeader } from '@/components/CommonHeader'; import { ScrollArea } from '@/components/ui/scroll-area'; +import { useMemo } from 'react'; +import { isEmpty } from 'lodash-es'; export const Route = createFileRoute('/monitor/add')({ beforeLoad: routeAuthBeforeLoad, @@ -25,6 +25,11 @@ function MonitorAddComponent() { const workspaceId = useCurrentWorkspaceId(); const navigate = useNavigate(); const mutation = useMonitorUpsert(); + const search = Route.useSearch(); + const initialValues = useMemo( + () => (isEmpty(search) ? undefined : (search as MonitorInfoEditorValues)), + [] + ); const handleSubmit = useEvent(async (values: MonitorInfoEditorValues) => { const res = await mutation.mutateAsync({ @@ -45,7 +50,10 @@ function MonitorAddComponent() { - +