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

refactor: move website component into folder

Browse Source
This commit is contained in:
moonrailgun 2023-11-15 00:34:50 +08:00
parent 40719094aa
commit 162bec86d5
8 changed files with 99 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

137
src/client/components/DateFilter.tsx
View File

@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React, { useMemo, useState } from 'react';
import { Button, DatePicker, Dropdown, MenuProps, Modal, Space } from 'antd';
import { Dayjs } from 'dayjs';
import { DownOutlined } from '@ant-design/icons';
@ -19,82 +19,85 @@ export const DateFilter: React.FC<DateFilterProps> = React.memo((props) => {
const { label, startDate, endDate } = useGlobalRangeDate();
const [range, setRange] = useState<[Dayjs, Dayjs]>([startDate, endDate]);
const menu: MenuProps = {
onClick: () => {
setShowDropdown(false);
},
items: compact([
{
label: 'Today',
onClick: () => {
useGlobalStateStore.setState({ dateRange: DateRange.Today });
const menu: MenuProps = useMemo(
() => ({
onClick: () => {
setShowDropdown(false);
},
items: compact([
{
label: 'Today',
onClick: () => {
useGlobalStateStore.setState({ dateRange: DateRange.Today });
},
},
},
{
label: 'Last 24 Hours',
onClick: () => {
useGlobalStateStore.setState({ dateRange: DateRange.Last24Hours });
{
label: 'Last 24 Hours',
onClick: () => {
useGlobalStateStore.setState({ dateRange: DateRange.Last24Hours });
},
},
},
{
label: 'Yesterday',
onClick: () => {
useGlobalStateStore.setState({ dateRange: DateRange.Yesterday });
{
label: 'Yesterday',
onClick: () => {
useGlobalStateStore.setState({ dateRange: DateRange.Yesterday });
},
},
},
{
type: 'divider',
},
{
label: 'This week',
onClick: () => {
useGlobalStateStore.setState({ dateRange: DateRange.ThisWeek });
{
type: 'divider',
},
},
{
label: 'Last 7 days',
onClick: () => {
useGlobalStateStore.setState({ dateRange: DateRange.Last7Days });
{
label: 'This week',
onClick: () => {
useGlobalStateStore.setState({ dateRange: DateRange.ThisWeek });
},
},
},
{
type: 'divider',
},
{
label: 'This Month',
onClick: () => {
useGlobalStateStore.setState({ dateRange: DateRange.ThisMonth });
{
label: 'Last 7 days',
onClick: () => {
useGlobalStateStore.setState({ dateRange: DateRange.Last7Days });
},
},
},
{
label: 'Last 30 days',
onClick: () => {
useGlobalStateStore.setState({ dateRange: DateRange.Last30Days });
{
type: 'divider',
},
},
{
label: 'Last 90 days',
onClick: () => {
useGlobalStateStore.setState({ dateRange: DateRange.Last90Days });
{
label: 'This Month',
onClick: () => {
useGlobalStateStore.setState({ dateRange: DateRange.ThisMonth });
},
},
},
{
label: 'This year',
onClick: () => {
useGlobalStateStore.setState({ dateRange: DateRange.ThisYear });
{
label: 'Last 30 days',
onClick: () => {
useGlobalStateStore.setState({ dateRange: DateRange.Last30Days });
},
},
},
{
type: 'divider',
},
{
label: 'Custom',
onClick: () => {
setShowPicker(true);
{
label: 'Last 90 days',
onClick: () => {
useGlobalStateStore.setState({ dateRange: DateRange.Last90Days });
},
},
},
] as MenuProps['items']),
};
{
label: 'This year',
onClick: () => {
useGlobalStateStore.setState({ dateRange: DateRange.ThisYear });
},
},
{
type: 'divider',
},
{
label: 'Custom',
onClick: () => {
setShowPicker(true);
},
},
] as MenuProps['items']),
}),
[]
);
return (
<>

2
src/client/components/MetricCard.tsx → src/client/components/website/MetricCard.tsx
View File

@ -1,6 +1,6 @@
import { Tag } from 'antd';
import React from 'react';
import { formatNumber } from '../utils/common';
import { formatNumber } from '../../utils/common';
interface MetricCardProps {
value?: number;

24
src/client/components/WebsiteInfo.tsx → src/client/components/website/WebsiteInfo.tsx
View File

@ -1,21 +1,21 @@
import { Button, Form, Input, message, Popconfirm, Tabs } from 'antd';
import React from 'react';
import { useNavigate, useParams } from 'react-router';
import { deleteWorkspaceWebsite } from '../api/model/website';
import { useRequest } from '../hooks/useRequest';
import { useCurrentWorkspaceId } from '../store/user';
import { ErrorTip } from './ErrorTip';
import { Loading } from './Loading';
import { NoWorkspaceTip } from './NoWorkspaceTip';
import { MonitorPicker } from './monitor/MonitorPicker';
import { deleteWorkspaceWebsite } from '../../api/model/website';
import { useRequest } from '../../hooks/useRequest';
import { useCurrentWorkspaceId } from '../../store/user';
import { ErrorTip } from '../ErrorTip';
import { Loading } from '../Loading';
import { NoWorkspaceTip } from '../NoWorkspaceTip';
import { MonitorPicker } from '../monitor/MonitorPicker';
import {
defaultErrorHandler,
defaultSuccessHandler,
getQueryKey,
trpc,
} from '../api/trpc';
} from '../../api/trpc';
import { useQueryClient } from '@tanstack/react-query';
import { useEvent } from '../hooks/useEvent';
import { useEvent } from '../../hooks/useEvent';
export const WebsiteInfo: React.FC = React.memo(() => {
const workspaceId = useCurrentWorkspaceId();
@ -107,7 +107,11 @@ export const WebsiteInfo: React.FC = React.memo(() => {
<Input size="large" />
</Form.Item>
<Form.Item label="Monitor" name="monitorId" tooltip="You can bind a monitor which will display health status in website overview">
<Form.Item
label="Monitor"
name="monitorId"
tooltip="You can bind a monitor which will display health status in website overview"
>
<MonitorPicker size="large" allowClear={true} />
</Form.Item>

16
src/client/components/WebsiteList.tsx → src/client/components/website/WebsiteList.tsx
View File

@ -12,15 +12,15 @@ import {
refreshWorkspaceWebsites,
useWorspaceWebsites,
WebsiteInfo,
} from '../api/model/website';
import { Loading } from './Loading';
import { NoWorkspaceTip } from './NoWorkspaceTip';
import { useRequest } from '../hooks/useRequest';
import { useUserStore } from '../store/user';
import { useEvent } from '../hooks/useEvent';
} from '../../api/model/website';
import { Loading } from '../Loading';
import { NoWorkspaceTip } from '../NoWorkspaceTip';
import { useRequest } from '../../hooks/useRequest';
import { useUserStore } from '../../store/user';
import { useEvent } from '../../hooks/useEvent';
import { useNavigate } from 'react-router';
import { PageHeader } from './PageHeader';
import { ModalButton } from './ModalButton';
import { PageHeader } from '../PageHeader';
import { ModalButton } from '../ModalButton';
export const WebsiteList: React.FC = React.memo(() => {
const [isModalOpen, setIsModalOpen] = useState(false);

2
src/client/components/WebsiteOnlineCount.tsx → src/client/components/website/WebsiteOnlineCount.tsx
View File

@ -1,5 +1,5 @@
import React from 'react';
import { trpc } from '../api/trpc';
import { trpc } from '../../api/trpc';
export const WebsiteOnlineCount: React.FC<{
workspaceId: string;

4
src/client/components/website/WebsiteOverview.tsx
View File

@ -16,10 +16,10 @@ import {
getDateArray,
} from '../../utils/date';
import { useEvent } from '../../hooks/useEvent';
import { MetricCard } from '../MetricCard';
import { MetricCard } from './MetricCard';
import { formatNumber, formatShortTime } from '../../utils/common';
import { useTheme } from '../../hooks/useTheme';
import { WebsiteOnlineCount } from '../WebsiteOnlineCount';
import { WebsiteOnlineCount } from './WebsiteOnlineCount';
import { useGlobalRangeDate } from '../../hooks/useGlobalRangeDate';
import { MonitorHealthBar } from '../monitor/MonitorHealthBar';
import { useNavigate } from 'react-router';

4
src/client/pages/Settings/index.tsx
View File

@ -1,8 +1,8 @@
import { Menu, MenuProps } from 'antd';
import React from 'react';
import { Routes, Route, useLocation, useNavigate } from 'react-router-dom';
import { WebsiteInfo } from '../../components/WebsiteInfo';
import { WebsiteList } from '../../components/WebsiteList';
import { WebsiteInfo } from '../../components/website/WebsiteInfo';
import { WebsiteList } from '../../components/website/WebsiteList';
import { useEvent } from '../../hooks/useEvent';
import { NotificationList } from './NotificationList';
import { Profile } from './Profile';

2
src/client/pages/Website/index.tsx
View File

@ -1,6 +1,6 @@
import React from 'react';
import { Route, Routes } from 'react-router';
import { WebsiteList } from '../../components/WebsiteList';
import { WebsiteList } from '../../components/website/WebsiteList';
import { WebsiteDetail } from './Detail';
export const WebsitePage: React.FC = React.memo(() => {