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

feat: add daily monitor data display for public

Browse Source
This commit is contained in:
moonrailgun 2024-10-14 00:24:16 +08:00
parent 1a012bb129
commit 3d2971bce2
7 changed files with 300 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/client/components/monitor/CustomizedErrorArea.tsx Normal file
View File

@ -0,0 +1,49 @@
import { useTheme } from '@/hooks/useTheme';
import { get } from 'lodash-es';
import React from 'react';
import { useMemo } from 'react';
import { Rectangle } from 'recharts';
export const CustomizedErrorArea: React.FC = (props) => {
const { colors } = useTheme();
const y = get(props, 'offset.top', 10);
const height = get(props, 'offset.height', 160);
const points = get(props, 'formattedGraphicalItems.0.props.points', []) as {
x: number;
y: number | null;
}[];
const errorArea = useMemo(() => {
const _errorArea: { x: number; width: number }[] = [];
let prevX: number | null = null;
points.forEach((item, i, arr) => {
if (i === 0 && !item.y) {
prevX = 0;
} else if (!item.y && prevX === null && arr[i - 1].y) {
prevX = arr[i - 1].x;
} else if (item.y && prevX !== null) {
_errorArea.push({
x: prevX,
width: item.x - prevX,
});
prevX = null;
}
});
return _errorArea;
}, [points]);
return errorArea.map((area, i) => {
return (
<Rectangle
key={i}
width={area.width}
height={height}
x={area.x}
y={y}
fill={colors.chart.error}
/>
);
});
};
CustomizedErrorArea.displayName = 'CustomizedErrorArea';

44
src/client/components/monitor/MonitorDataChart.tsx
View File

@ -195,47 +195,3 @@ export const MonitorDataChart: React.FC<{ monitorId: string }> = React.memo(
}
);
MonitorDataChart.displayName = 'MonitorDataChart';
const CustomizedErrorArea: React.FC = (props) => {
const { colors } = useTheme();
const y = get(props, 'offset.top', 10);
const height = get(props, 'offset.height', 160);
const points = get(props, 'formattedGraphicalItems.0.props.points', []) as {
x: number;
y: number | null;
}[];
const errorArea = useMemo(() => {
const _errorArea: { x: number; width: number }[] = [];
let prevX: number | null = null;
points.forEach((item, i, arr) => {
if (i === 0 && !item.y) {
prevX = 0;
} else if (!item.y && prevX === null && arr[i - 1].y) {
prevX = arr[i - 1].x;
} else if (item.y && prevX !== null) {
_errorArea.push({
x: prevX,
width: item.x - prevX,
});
prevX = null;
}
});
return _errorArea;
}, [points]);
return errorArea.map((area, i) => {
return (
<Rectangle
key={i}
width={area.width}
height={height}
x={area.x}
y={y}
fill={colors.chart.error}
/>
);
});
};
CustomizedErrorArea.displayName = 'CustomizedErrorArea';

149
src/client/components/monitor/MonitorPublicDataChart.tsx Normal file
View File

@ -0,0 +1,149 @@
import dayjs from 'dayjs';
import { get } from 'lodash-es';
import React, { useMemo } from 'react';
import { trpc } from '../../api/trpc';
import { getMonitorProvider, getProviderDisplay } from './provider';
import { useTranslation } from '@i18next-toolkit/react';
import {
ChartConfig,
ChartContainer,
ChartTooltip,
ChartTooltipContent,
} from '../ui/chart';
import {
Area,
AreaChart,
CartesianGrid,
Customized,
XAxis,
YAxis,
} from 'recharts';
import { useTheme } from '@/hooks/useTheme';
import { CustomizedErrorArea } from './CustomizedErrorArea';
const chartConfig = {
value: {
label: <span className="text-sm font-bold">Result</span>,
},
} satisfies ChartConfig;
interface MonitorPublicDataChartProps {
workspaceId: string;
monitorId: string;
className?: string;
}
export const MonitorPublicDataChart: React.FC<MonitorPublicDataChartProps> =
React.memo((props) => {
const { t } = useTranslation();
const { workspaceId, monitorId } = props;
const { colors } = useTheme();
const { data: monitorInfo } = trpc.monitor.getPublicInfo.useQuery(
{
monitorIds: [monitorId],
},
{
select(data) {
return data[0];
},
}
);
const { data: _data = [] } = trpc.monitor.publicData.useQuery({
workspaceId,
monitorId,
});
const providerInfo = getMonitorProvider(monitorInfo?.type ?? '');
const { data } = useMemo(() => {
const data = _data.map((d, i, arr) => {
const value = d.value > 0 ? d.value : null;
const time = dayjs(d.createdAt).valueOf();
return {
value,
time,
};
});
return { data };
}, [_data]);
const isTrendingMode = monitorInfo?.trendingMode ?? false; // if true, y axis not start from 0
return (
<div>
<ChartContainer className="h-[120px] w-full" config={chartConfig}>
<AreaChart
data={data}
margin={{ top: 10, right: 0, left: 0, bottom: 0 }}
>
<defs>
<linearGradient id="color" x1="0" y1="0" x2="0" y2="1">
<stop
offset="5%"
stopColor={colors.chart.monitor}
stopOpacity={0.3}
/>
<stop
offset="95%"
stopColor={colors.chart.monitor}
stopOpacity={0}
/>
</linearGradient>
</defs>
<XAxis
dataKey="time"
type="number"
domain={['dataMin', 'dataMax']}
tickFormatter={(date) => dayjs(date).format('HH:mm')}
/>
<YAxis
mirror
domain={[isTrendingMode ? 'dataMin' : 0, 'dataMax']}
/>
<CartesianGrid vertical={false} />
<ChartTooltip
labelFormatter={(label, payload) =>
dayjs(get(payload, [0, 'payload', 'time'])).format(
'YYYY-MM-DD HH:mm:ss'
)
}
formatter={(value, defaultText, item, index, payload) => {
if (typeof value !== 'number') {
return defaultText;
}
const { name, text } = getProviderDisplay(
Number(value),
providerInfo
);
return (
<div>
<span className="mr-2">{name}:</span>
<span>{text}</span>
</div>
);
}}
content={<ChartTooltipContent />}
/>
<Customized component={CustomizedErrorArea} />
<Area
type="monotone"
dataKey="value"
stroke={colors.chart.monitor}
fillOpacity={1}
fill="url(#color)"
strokeWidth={2}
isAnimationActive={false}
/>
</AreaChart>
</ChartContainer>
</div>
);
});
MonitorPublicDataChart.displayName = 'MonitorPublicDataChart';

29
src/client/components/monitor/StatusPage/Body.tsx
View File

@ -15,6 +15,7 @@ import {
getStatusBgColorClassName,
parseHealthStatusByPercent,
} from '@/utils/health';
import { MonitorPublicDataChart } from '../MonitorPublicDataChart';
interface StatusPageBodyProps {
workspaceId: string;
@ -51,7 +52,7 @@ export const StatusPageBody: React.FC<StatusPageBodyProps> = React.memo(
<StatusItemMonitor
key={item.key}
workspaceId={props.workspaceId}
id={item.id}
monitorId={item.id}
showCurrent={item.showCurrent ?? false}
/>
);
@ -69,13 +70,13 @@ export const StatusPageBody: React.FC<StatusPageBodyProps> = React.memo(
StatusPageBody.displayName = 'StatusPageBody';
export const StatusItemMonitor: React.FC<{
id: string;
monitorId: string;
showCurrent: boolean;
workspaceId: string;
}> = React.memo((props) => {
const { data: info } = trpc.monitor.getPublicInfo.useQuery(
{
monitorIds: [props.id],
monitorIds: [props.monitorId],
},
{
select: (data) => data[0],
@ -84,7 +85,7 @@ export const StatusItemMonitor: React.FC<{
const { data: list = [], isLoading } = trpc.monitor.publicSummary.useQuery({
workspaceId: props.workspaceId,
monitorId: props.id,
monitorId: props.monitorId,
});
const { summaryStatus, summaryPercent } = useMemo(() => {
@ -108,6 +109,7 @@ export const StatusItemMonitor: React.FC<{
}
return (
<div>
<div
className={cn(
'mb-1 flex items-center overflow-hidden rounded-lg bg-green-500 bg-opacity-0 px-4 py-3 hover:bg-opacity-10'
@ -154,6 +156,12 @@ export const StatusItemMonitor: React.FC<{
/>
</div>
</div>
<MonitorRecentChart
workspaceId={props.workspaceId}
monitorId={props.monitorId}
/>
</div>
);
});
StatusItemMonitor.displayName = 'StatusItemMonitor';
@ -199,3 +207,16 @@ const MonitorLatestResponse: React.FC<{
);
});
MonitorLatestResponse.displayName = 'MonitorLatestResponse';
export const MonitorRecentChart: React.FC<{
workspaceId: string;
monitorId: string;
}> = React.memo((props) => {
return (
<MonitorPublicDataChart
workspaceId={props.workspaceId}
monitorId={props.monitorId}
/>
);
});
MonitorRecentChart.displayName = 'MonitorRecentChart';

1
src/client/tailwind.config.ts
View File

@ -13,6 +13,7 @@ module.exports = {
'./components/**/*.{js,jsx,ts,tsx}',
'./pages/**/*.{js,jsx,ts,tsx}',
'./routes/**/*.{js,jsx,ts,tsx}',
'./utils/health.ts',
],
},
theme: {

1
src/server/model/_schema/monitor.ts
View File

@ -9,4 +9,5 @@ export const monitorPublicInfoSchema = MonitorModelSchema.pick({
id: true,
name: true,
type: true,
trendingMode: true,
});

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

@ -361,6 +361,38 @@ export const monitorRouter = router({
return summary;
}),
publicData: publicProcedure
.meta(
buildMonitorOpenapi({
method: 'GET',
protect: false,
path: '/{monitorId}/publicData',
})
)
.input(
z.object({
workspaceId: z.string().cuid2(),
monitorId: z.string().cuid2(),
})
)
.output(
z.array(
z.object({
value: z.number(),
createdAt: z.date(),
})
)
)
.query(async ({ input }) => {
const { workspaceId, monitorId } = input;
return getMonitorData(
workspaceId,
monitorId,
dayjs().subtract(1, 'days').toDate(),
dayjs().toDate()
);
}),
dataMetrics: workspaceProcedure
.meta(
buildMonitorOpenapi({