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

feat: webview overview support click healthbar can jump to monitor

Browse Source
This commit is contained in:
moonrailgun 2023-10-17 20:34:26 +08:00
parent 1a9daaddfe
commit 7a4c8f5bac
1 changed files with 19 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,15 +3,12 @@ import React, { useMemo } from 'react';
import { Column, ColumnConfig } from '@ant-design/charts'; import { Column, ColumnConfig } from '@ant-design/charts';
import { SyncOutlined } from '@ant-design/icons'; import { SyncOutlined } from '@ant-design/icons';
import { DateFilter } from '../DateFilter'; import { DateFilter } from '../DateFilter';
import { HealthBar } from '../HealthBar';
import { import {
StatsItemType, StatsItemType,
useWorkspaceWebsitePageview, useWorkspaceWebsitePageview,
useWorkspaceWebsiteStats, useWorkspaceWebsiteStats,
WebsiteInfo, WebsiteInfo,
} from '../../api/model/website'; } from '../../api/model/website';
import { Loading } from '../Loading';
import dayjs from 'dayjs';
import { import {
DateUnit, DateUnit,
formatDate, formatDate,
@ -25,12 +22,15 @@ import { useTheme } from '../../hooks/useTheme';
import { WebsiteOnlineCount } from '../WebsiteOnlineCount'; import { WebsiteOnlineCount } from '../WebsiteOnlineCount';
import { useGlobalRangeDate } from '../../hooks/useGlobalRangeDate'; import { useGlobalRangeDate } from '../../hooks/useGlobalRangeDate';
import { MonitorHealthBar } from '../monitor/MonitorHealthBar'; import { MonitorHealthBar } from '../monitor/MonitorHealthBar';
import { useNavigate } from 'react-router';
export const WebsiteOverview: React.FC<{ export const WebsiteOverview: React.FC<{
website: WebsiteInfo; website: WebsiteInfo;
actions?: React.ReactNode; actions?: React.ReactNode;
}> = React.memo((props) => { }> = React.memo((props) => {
const { website, actions } = props;
const { startDate, endDate, unit } = useGlobalRangeDate(); const { startDate, endDate, unit } = useGlobalRangeDate();
const navigate = useNavigate();
const { const {
pageviews, pageviews,
@ -38,8 +38,8 @@ export const WebsiteOverview: React.FC<{
isLoading: isLoadingPageview, isLoading: isLoadingPageview,
refetch: refetchPageview, refetch: refetchPageview,
} = useWorkspaceWebsitePageview( } = useWorkspaceWebsitePageview(
props.website.workspaceId, website.workspaceId,
props.website.id, website.id,
startDate.unix() * 1000, startDate.unix() * 1000,
endDate.unix() * 1000, endDate.unix() * 1000,
unit unit
@ -50,8 +50,8 @@ export const WebsiteOverview: React.FC<{
isLoading: isLoadingStats, isLoading: isLoadingStats,
refetch: refetchStats, refetch: refetchStats,
} = useWorkspaceWebsiteStats( } = useWorkspaceWebsiteStats(
props.website.workspaceId, website.workspaceId,
props.website.id, website.id,
startDate.unix() * 1000, startDate.unix() * 1000,
endDate.unix() * 1000, endDate.unix() * 1000,
unit unit
@ -78,23 +78,28 @@ export const WebsiteOverview: React.FC<{
<Spin spinning={loading}> <Spin spinning={loading}>
<div className="flex"> <div className="flex">
<div className="flex flex-1 text-2xl font-bold items-center"> <div className="flex flex-1 text-2xl font-bold items-center">
<span className="mr-2" title={props.website.domain ?? ''}> <span className="mr-2" title={website.domain ?? ''}>
{props.website.name} {website.name}
</span> </span>
{props.website.monitorId && ( {website.monitorId && (
<MonitorHealthBar monitorId={props.website.monitorId} /> <div
className="cursor-pointer"
onClick={() => navigate(`/monitor/${website.monitorId}`)}
>
<MonitorHealthBar monitorId={website.monitorId} />
</div>
)} )}
<div className="ml-4 text-base font-normal"> <div className="ml-4 text-base font-normal">
<WebsiteOnlineCount <WebsiteOnlineCount
workspaceId={props.website.workspaceId} workspaceId={website.workspaceId}
websiteId={props.website.id} websiteId={website.id}
/> />
</div> </div>
</div> </div>
<div>{props.actions}</div> <div>{actions}</div>
</div> </div>
<div className="flex mb-10 flex-wrap"> <div className="flex mb-10 flex-wrap">