SharedAPIReport.tsx95 lines · main

1	import {
2	ErrorCountsChartRenderer,
3	NetworkTrafficRenderer,
4	ResponseSpeedChartRenderer,
5	TopApiRoutesRenderer,
6	TotalRequestsChartRenderer,
7	} from '../renderers/ApiRenderers'
8	import ReportWidget from '../ReportWidget'
9	import { SharedAPIReportKey } from './SharedAPIReport.constants'
10
11	type SharedAPIReportWidgetsProps = {
12	data: any
13	error: any
14	isLoading: any
15	isRefetching: boolean
16	hiddenReports?: SharedAPIReportKey[]
17	sql: Record<SharedAPIReportKey, string>
18	}
19
20	export function SharedAPIReport({
21	data,
22	error,
23	isLoading,
24	isRefetching,
25	hiddenReports = [],
26	sql,
27	}: SharedAPIReportWidgetsProps) {
28	return (
29	<div className="grid grid-cols-1 gap-4">
30	{!hiddenReports.includes('totalRequests') && (
31	<ReportWidget
32	isLoading={isLoading.totalRequests || isRefetching}
33	title="Total Requests"
34	data={data.totalRequests || []}
35	error={error.totalRequests}
36	renderer={TotalRequestsChartRenderer}
37	append={TopApiRoutesRenderer}
38	appendProps={{ data: data.topRoutes }}
39	queryType="logs"
40	params={{
41	sql: sql.totalRequests,
42	}}
43	/>
44	)}
45	{!hiddenReports.includes('errorCounts') && (
46	<ReportWidget
47	isLoading={isLoading.errorCounts || isRefetching}
48	title="Response Errors"
49	tooltip="Error responses with 4XX or 5XX status codes"
50	data={data.errorCounts || []}
51	error={error.errorCounts}
52	renderer={ErrorCountsChartRenderer}
53	appendProps={{
54	data: data.topErrorRoutes || [],
55	}}
56	append={TopApiRoutesRenderer}
57	queryType="logs"
58	params={{
59	sql: sql.errorCounts,
60	}}
61	/>
62	)}
63	{!hiddenReports.includes('responseSpeed') && (
64	<ReportWidget
65	isLoading={isLoading.responseSpeed || isRefetching}
66	title="Response Speed"
67	tooltip="Average response speed of a request (in ms)"
68	data={data.responseSpeed || []}
69	error={error.responseSpeed}
70	renderer={ResponseSpeedChartRenderer}
71	appendProps={{ data: data.topSlowRoutes || [] }}
72	append={TopApiRoutesRenderer}
73	queryType="logs"
74	params={{
75	sql: sql.responseSpeed,
76	}}
77	/>
78	)}
79	{!hiddenReports.includes('networkTraffic') && (
80	<ReportWidget
81	isLoading={isLoading.networkTraffic || isRefetching}
82	error={error.networkTraffic}
83	title="Network Traffic"
84	tooltip="Ingress and egress of requests and responses respectively"
85	data={data.networkTraffic || []}
86	renderer={NetworkTrafficRenderer}
87	queryType="logs"
88	params={{
89	sql: sql.networkTraffic,
90	}}
91	/>
92	)}
93	</div>
94	)
95	}