diff --git a/src/client/components/dashboard/AddButton.tsx b/src/client/components/dashboard/AddButton.tsx deleted file mode 100644 index 9296f7d..0000000 --- a/src/client/components/dashboard/AddButton.tsx +++ /dev/null @@ -1,167 +0,0 @@ -import { Button, Dropdown, MenuProps, Space } from 'antd'; -import React, { useState } from 'react'; -import { trpc } from '../../api/trpc'; -import { useCurrentWorkspaceId } from '../../store/user'; -import { useDashboardStore } from '../../store/dashboard'; -import { DownOutlined } from '@ant-design/icons'; -import clsx from 'clsx'; -import { useTranslation } from '@i18next-toolkit/react'; - -export const DashboardItemAddButton: React.FC = React.memo(() => { - const { t } = useTranslation(); - const workspaceId = useCurrentWorkspaceId(); - const { data: websites = [], isLoading: isWebsiteLoading } = - trpc.website.all.useQuery({ - workspaceId, - }); - const { data: monitors = [], isLoading: isMonitorLoading } = - trpc.monitor.all.useQuery({ - workspaceId, - }); - const { addItem } = useDashboardStore(); - const [open, setOpen] = useState(false); - - const isLoading = isWebsiteLoading || isMonitorLoading; - - const menu: MenuProps = { - items: [ - { - key: 'website', - label: t('Website'), - children: - websites.length > 0 - ? websites.map((website) => ({ - key: `website#${website.id}`, - label: website.name, - children: [ - { - key: `website#${website.id}#overview`, - label: t('Overview'), - onClick: () => { - addItem( - 'websiteOverview', - website.id, - `${website.name}'s Overview` - ); - }, - }, - { - key: `website#${website.id}#events`, - label: t('Events'), - onClick: () => { - addItem( - 'websiteEvents', - website.id, - `${website.name}'s Events` - ); - }, - }, - ], - })) - : [ - { - key: `website#none`, - label: t('(None)'), - disabled: true, - }, - ], - }, - { - key: 'monitor', - label: t('Monitor'), - children: - monitors.length > 0 - ? monitors.map((monitor) => ({ - key: `monitor#${monitor.id}`, - label: monitor.name, - children: [ - { - key: `monitor#${monitor.id}#healthBar`, - label: t('Health Bar'), - onClick: () => { - addItem( - 'monitorHealthBar', - monitor.id, - t("{{monitorName}}'s Health", { - monitorName: monitor.name, - }) - ); - }, - }, - { - key: `monitor#${monitor.id}#metrics`, - label: t('Metrics'), - onClick: () => { - addItem( - 'monitorMetrics', - monitor.id, - t("{{monitorName}}'s Metrics", { - monitorName: monitor.name, - }) - ); - }, - }, - { - key: `monitor#${monitor.id}#chart`, - label: t('Chart'), - onClick: () => { - addItem( - 'monitorChart', - monitor.id, - t("{{monitorName}}'s Chart", { - monitorName: monitor.name, - }) - ); - }, - }, - { - key: `monitor#${monitor.id}#events`, - label: t('Events'), - onClick: () => { - addItem( - 'monitorEvents', - monitor.id, - t("{{monitorName}}'s Events", { - monitorName: monitor.name, - }) - ); - }, - }, - ], - })) - : [ - { - key: `monitor#none`, - label: t('(None)'), - disabled: true, - }, - ], - }, - ], - }; - - return ( -
- - - -
- ); -}); -DashboardItemAddButton.displayName = 'DashboardItemAddButton'; diff --git a/src/client/components/dashboard/Dashboard.tsx b/src/client/components/dashboard/Dashboard.tsx deleted file mode 100644 index b1faac7..0000000 --- a/src/client/components/dashboard/Dashboard.tsx +++ /dev/null @@ -1,102 +0,0 @@ -import React, { useEffect } from 'react'; -import { DashboardGrid } from './Grid'; -import { DashboardItemAddButton } from './AddButton'; -import { defaultBlankLayouts, useDashboardStore } from '../../store/dashboard'; -import { useEvent } from '../../hooks/useEvent'; -import { Layouts } from 'react-grid-layout'; -import { Button, Empty, message } from 'antd'; -import { DateFilter } from '../DateFilter'; -import { trpc } from '../../api/trpc'; -import { useCurrentWorkspace, useCurrentWorkspaceId } from '../../store/user'; -import clsx from 'clsx'; -import { useTranslation } from '@i18next-toolkit/react'; - -export const Dashboard: React.FC = React.memo(() => { - const { t } = useTranslation(); - const { isEditMode, switchEditMode, layouts, items } = useDashboardStore(); - const mutation = trpc.workspace.saveDashboardLayout.useMutation(); - const workspaceId = useCurrentWorkspaceId(); - const workspace = useCurrentWorkspace(); - - useEffect(() => { - // Init on mount - const { items = [], layouts = defaultBlankLayouts } = - workspace.dashboardLayout ?? {}; - - useDashboardStore.setState({ - items, - layouts, - }); - }, []); - - const handleChangeLayouts = useEvent((layouts: Layouts) => { - useDashboardStore.setState({ - layouts, - }); - }); - - const handleSaveDashboardLayout = useEvent(async () => { - await mutation.mutateAsync({ - workspaceId, - dashboardLayout: { - layouts, - items, - }, - }); - switchEditMode(); - message.success(t('Layout saved success')); - }); - - return ( -
-
- {isEditMode ? ( - <> - - - - ) : ( - <> - - - - )} -
- - - {items.length === 0 && ( - - )} -
- ); -}); -Dashboard.displayName = 'Dashboard'; diff --git a/src/client/components/dashboard/Grid.tsx b/src/client/components/dashboard/Grid.tsx deleted file mode 100644 index ee46b2d..0000000 --- a/src/client/components/dashboard/Grid.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import React from 'react'; -import { Layouts, Responsive, WidthProvider } from 'react-grid-layout'; -import clsx from 'clsx'; -import { DashboardGridItem } from './items'; -import { DashboardItem } from '../../store/dashboard'; -import 'react-grid-layout/css/styles.css'; -import 'react-resizable/css/styles.css'; - -const ResponsiveGridLayout = WidthProvider(Responsive); - -interface DashboardGridProps { - isEditMode: boolean; - items: DashboardItem[]; - layouts: Layouts; - onChangeLayouts: (layouts: Layouts) => void; -} -export const DashboardGrid: React.FC = React.memo( - (props) => { - const { layouts, onChangeLayouts, items, isEditMode } = props; - - return ( - { - onChangeLayouts(allLayouts); - }} - > - {items.map((item) => ( -
- -
- ))} - - ); - } -); -DashboardGrid.displayName = 'DashboardGrid'; diff --git a/src/client/components/dashboard/items/MonitorChartItem.tsx b/src/client/components/dashboard/items/MonitorChartItem.tsx deleted file mode 100644 index 81940fe..0000000 --- a/src/client/components/dashboard/items/MonitorChartItem.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import { MonitorDataChart } from '../../monitor/MonitorDataChart'; - -export const MonitorChartItem: React.FC<{ - monitorId: string; -}> = React.memo((props) => { - return ; -}); -MonitorChartItem.displayName = 'MonitorChartItem'; diff --git a/src/client/components/dashboard/items/MonitorEventsItem.tsx b/src/client/components/dashboard/items/MonitorEventsItem.tsx deleted file mode 100644 index 5485084..0000000 --- a/src/client/components/dashboard/items/MonitorEventsItem.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import { MonitorEventList } from '../../monitor/MonitorEventList'; - -export const MonitorEventsItem: React.FC<{ - monitorId: string; -}> = React.memo((props) => { - return ; -}); -MonitorEventsItem.displayName = 'MonitorEventsItem'; diff --git a/src/client/components/dashboard/items/MonitorHealthBarItem.tsx b/src/client/components/dashboard/items/MonitorHealthBarItem.tsx deleted file mode 100644 index a946ef1..0000000 --- a/src/client/components/dashboard/items/MonitorHealthBarItem.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; -import { MonitorHealthBar } from '../../monitor/MonitorHealthBar'; -import { useCurrentWorkspaceId } from '../../../store/user'; - -export const MonitorHealthBarItem: React.FC<{ - monitorId: string; -}> = React.memo((props) => { - const workspaceId = useCurrentWorkspaceId(); - - return ( - - ); -}); -MonitorHealthBarItem.displayName = 'MonitorHealthBarItem'; diff --git a/src/client/components/dashboard/items/MonitorMetricsItem.tsx b/src/client/components/dashboard/items/MonitorMetricsItem.tsx deleted file mode 100644 index f6ba242..0000000 --- a/src/client/components/dashboard/items/MonitorMetricsItem.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import React from 'react'; -import { trpc } from '../../../api/trpc'; -import { NotFoundTip } from '../../NotFoundTip'; -import { useCurrentWorkspaceId } from '../../../store/user'; -import { Loading } from '../../Loading'; -import { MonitorDataMetrics } from '../../monitor/MonitorDataMetrics'; - -export const MonitorMetricsItem: React.FC<{ - monitorId: string; -}> = React.memo((props) => { - const workspaceId = useCurrentWorkspaceId(); - - const { data: monitorInfo, isLoading } = trpc.monitor.get.useQuery({ - workspaceId, - monitorId: props.monitorId, - }); - - if (isLoading) { - return ; - } - - if (!monitorInfo) { - return ; - } - - return ( - - ); -}); -MonitorMetricsItem.displayName = 'MonitorMetricsItem'; diff --git a/src/client/components/dashboard/items/WebsiteEventItem.tsx b/src/client/components/dashboard/items/WebsiteEventItem.tsx deleted file mode 100644 index b86331d..0000000 --- a/src/client/components/dashboard/items/WebsiteEventItem.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; -import { WebsiteMetricsTable } from '../../website/WebsiteMetricsTable'; -import { useGlobalRangeDate } from '../../../hooks/useGlobalRangeDate'; -import { useTranslation } from '@i18next-toolkit/react'; - -export const WebsiteEventItem: React.FC<{ - websiteId: string; -}> = React.memo((props) => { - const { t } = useTranslation(); - const { startDate, endDate } = useGlobalRangeDate(); - const startAt = startDate.valueOf(); - const endAt = endDate.valueOf(); - - return ( - - ); -}); -WebsiteEventItem.displayName = 'WebsiteEventItem'; diff --git a/src/client/components/dashboard/items/WebsiteOverviewItem.tsx b/src/client/components/dashboard/items/WebsiteOverviewItem.tsx deleted file mode 100644 index 8f37f1d..0000000 --- a/src/client/components/dashboard/items/WebsiteOverviewItem.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import React from 'react'; -import { trpc } from '../../../api/trpc'; -import { useCurrentWorkspaceId } from '../../../store/user'; -import { Loading } from '../../Loading'; -import { NotFoundTip } from '../../NotFoundTip'; -import { WebsiteOverview } from '../../website/WebsiteOverview'; -import { Button } from 'antd'; -import { ArrowRightOutlined } from '@ant-design/icons'; -import { useTranslation } from '@i18next-toolkit/react'; -import { Link } from '@tanstack/react-router'; - -export const WebsiteOverviewItem: React.FC<{ - websiteId: string; -}> = React.memo((props) => { - const { t } = useTranslation(); - const workspaceId = useCurrentWorkspaceId(); - - const { data: websiteInfo, isLoading } = trpc.website.info.useQuery({ - workspaceId, - websiteId: props.websiteId, - }); - - if (isLoading) { - return ; - } - - if (!websiteInfo) { - return ; - } - - return ( - - - - - - } - /> - ); -}); -WebsiteOverviewItem.displayName = 'WebsiteOverviewItem'; diff --git a/src/client/components/dashboard/items/index.tsx b/src/client/components/dashboard/items/index.tsx deleted file mode 100644 index 925fb09..0000000 --- a/src/client/components/dashboard/items/index.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import { useMemo } from 'react'; -import { DashboardItem, useDashboardStore } from '../../../store/dashboard'; -import { WebsiteOverviewItem } from './WebsiteOverviewItem'; -import { NotFoundTip } from '../../NotFoundTip'; -import { Button, Card, Input, Typography } from 'antd'; -import React from 'react'; -import { DeleteOutlined } from '@ant-design/icons'; -import { useEvent } from '../../../hooks/useEvent'; -import { WebsiteEventItem } from './WebsiteEventItem'; -import { MonitorHealthBarItem } from './MonitorHealthBarItem'; -import { MonitorMetricsItem } from './MonitorMetricsItem'; -import { MonitorChartItem } from './MonitorChartItem'; -import { MonitorEventsItem } from './MonitorEventsItem'; -import { EditableText } from '../../EditableText'; - -interface DashboardGridItemProps { - item: DashboardItem; -} -export const DashboardGridItem: React.FC = React.memo( - (props) => { - const { isEditMode, removeItem, changeItemTitle } = useDashboardStore(); - const { key, id, title, type } = props.item; - - const inner = useMemo(() => { - if (type === 'websiteOverview') { - return ; - } else if (type === 'websiteEvents') { - return ; - } else if (type === 'monitorHealthBar') { - return ; - } else if (type === 'monitorMetrics') { - return ; - } else if (type === 'monitorChart') { - return ; - } else if (type === 'monitorEvents') { - return ; - } else { - return ; - } - }, [id, type]); - - const handleDelete = useEvent( - (e: React.MouseEvent) => { - e.stopPropagation(); - removeItem(key); - } - ); - - return ( - changeItemTitle(key, text)} - /> - } - headStyle={{ padding: 10, minHeight: 40 }} - bodyStyle={{ padding: 10 }} - extra={ - isEditMode && ( -