250 lines
12 KiB
TypeScript
250 lines
12 KiB
TypeScript
import {Affix, Button, Divider, Grid, Text, rem, Stack} from "@mantine/core";
|
|
import { AreaChart } from '@mantine/charts';
|
|
import type {PerformanceGetListData} from "~/utils/models.ts";
|
|
import React from "react";
|
|
|
|
|
|
export default function ({data, gridSpan, hideServerDeserialize, hideServerSerialize}: {
|
|
data: PerformanceGetListData[], gridSpan: number, hideServerDeserialize: boolean, hideServerSerialize: boolean
|
|
}) {
|
|
const chartData = data.map(item => ({
|
|
RequestCount: item.request_count,
|
|
gRpcClientPing: item.grpc.client_networking_ping,
|
|
gRpcClientCPU: item.grpc.client_request_cpu,
|
|
gRpcTimeTotal: item.grpc.client_request_time,
|
|
gRpcRequestSize: item.grpc.networking_size.request_size,
|
|
gRpcResponseSize: item.grpc.networking_size.response_size,
|
|
gRpcServerDeserializeCPU: item.grpc.server_deserialize_cpu,
|
|
gRpcServerDeserializeTime: item.grpc.server_deserialize_time,
|
|
gRpcServerSerializeCPU: item.grpc.server_serialize_cpu,
|
|
gRpcServerSerializeTime: item.grpc.server_serialize_time,
|
|
gRpcServerProtocolTotalTime: item.grpc.server_protocol_total_time,
|
|
|
|
RestClientPing: item.rest.client_networking_ping,
|
|
RestClientCPU: item.rest.client_request_cpu,
|
|
RestTimeTotal: item.rest.client_request_time,
|
|
RestRequestSize: item.rest.networking_size.request_size,
|
|
RestResponseSize: item.rest.networking_size.response_size,
|
|
RestServerDeserializeCPU: item.rest.server_deserialize_cpu,
|
|
RestServerDeserializeTime: item.rest.server_deserialize_time,
|
|
RestServerSerializeCPU: item.rest.server_serialize_cpu,
|
|
RestServerSerializeTime: item.rest.server_serialize_time,
|
|
RestServerProtocolTotalTime: item.rest.server_protocol_total_time,
|
|
}));
|
|
|
|
return (
|
|
<Grid gutter="xs" grow>
|
|
<Grid.Col span={gridSpan} mb="md">
|
|
<Text mb="md" pl="md" ta="center" fw={700}>Client CPU Usage</Text>
|
|
<AreaChart
|
|
h={300}
|
|
data={chartData}
|
|
dataKey="RequestCount"
|
|
type="stacked"
|
|
xAxisLabel="Data Count"
|
|
yAxisLabel="CPU Usage (%)"
|
|
withLegend
|
|
withPointLabels={false}
|
|
withDots={false}
|
|
valueFormatter={(value) => new Intl.NumberFormat('en-US').format(value)}
|
|
areaChartProps={{ syncId: 'RequestCount' }}
|
|
series={[
|
|
{ name: 'gRpcClientCPU', label: 'gRPC', color: 'teal.6' },
|
|
{ name: 'RestClientCPU', label: 'Rest', color: 'indigo.6' },
|
|
]}
|
|
/>
|
|
<Divider my="0px" labelPosition="center" />
|
|
</Grid.Col>
|
|
|
|
<Grid.Col span={gridSpan} mb="md">
|
|
<Text mb="md" pl="md" ta="center" fw={700}>Client Total Time (s)</Text>
|
|
<AreaChart
|
|
h={300}
|
|
data={chartData}
|
|
dataKey="RequestCount"
|
|
type="stacked"
|
|
xAxisLabel="Data Count"
|
|
yAxisLabel="Total Time (s)"
|
|
withLegend
|
|
withPointLabels={false}
|
|
withDots={false}
|
|
valueFormatter={(value) => new Intl.NumberFormat('en-GB').format(value)}
|
|
areaChartProps={{ syncId: 'RequestCount' }}
|
|
series={[
|
|
{ name: 'gRpcTimeTotal', label: 'gRPC', color: 'teal.6' },
|
|
{ name: 'RestTimeTotal', label: 'Rest', color: 'indigo.6' },
|
|
]}
|
|
/>
|
|
<Divider my="0px" labelPosition="center" />
|
|
</Grid.Col>
|
|
|
|
{!hideServerDeserialize &&
|
|
<Grid.Col span={gridSpan} mb="md">
|
|
<Text mb="md" pl="md" ta="center" fw={700}>Networking Request Data Size (KB)</Text>
|
|
<AreaChart
|
|
h={300}
|
|
data={chartData}
|
|
dataKey="RequestCount"
|
|
type="stacked"
|
|
xAxisLabel="Data Count"
|
|
yAxisLabel="Request Data Size (KB)"
|
|
withLegend
|
|
withPointLabels={false}
|
|
withDots={false}
|
|
valueFormatter={(value) => new Intl.NumberFormat('en-GB').format(value / 1024)}
|
|
areaChartProps={{ syncId: 'RequestCount' }}
|
|
series={[
|
|
{ name: 'gRpcRequestSize', label: 'gRPC', color: 'teal.6' },
|
|
{ name: 'RestRequestSize', label: 'Rest', color: 'indigo.6' },
|
|
]}
|
|
/>
|
|
<Divider my="0px" labelPosition="center" />
|
|
</Grid.Col>
|
|
}
|
|
|
|
{!hideServerSerialize &&
|
|
<Grid.Col span={gridSpan} mb="md">
|
|
<Text mb="md" pl="md" ta="center" fw={700}>Networking Response Data Size (KB)</Text>
|
|
<AreaChart
|
|
h={300}
|
|
data={chartData}
|
|
dataKey="RequestCount"
|
|
type="stacked"
|
|
xAxisLabel="Data Count"
|
|
yAxisLabel="Response Data Size (KB)"
|
|
withLegend
|
|
withPointLabels={false}
|
|
withDots={false}
|
|
valueFormatter={(value) => new Intl.NumberFormat('en-GB').format(value / 1024)}
|
|
areaChartProps={{ syncId: 'RequestCount' }}
|
|
series={[
|
|
{ name: 'gRpcResponseSize', label: 'gRPC', color: 'teal.6' },
|
|
{ name: 'RestResponseSize', label: 'Rest', color: 'indigo.6' },
|
|
]}
|
|
/>
|
|
<Divider my="0px" labelPosition="center" />
|
|
</Grid.Col>
|
|
}
|
|
|
|
|
|
{!hideServerDeserialize &&
|
|
<Grid.Col span={gridSpan} mb="md">
|
|
<Text mb="md" pl="md" ta="center" fw={700}>Server Deserialize CPU Usage (%)</Text>
|
|
<AreaChart
|
|
h={300}
|
|
data={chartData}
|
|
dataKey="RequestCount"
|
|
type="stacked"
|
|
xAxisLabel="Data Count"
|
|
yAxisLabel="CPU Usage (%)"
|
|
withLegend
|
|
withPointLabels={false}
|
|
withDots={false}
|
|
valueFormatter={(value) => new Intl.NumberFormat('en-GB').format(value)}
|
|
areaChartProps={{ syncId: 'RequestCount' }}
|
|
series={[
|
|
{ name: 'gRpcServerDeserializeCPU', label: 'gRPC', color: 'teal.6' },
|
|
{ name: 'RestServerDeserializeCPU', label: 'Rest', color: 'indigo.6' },
|
|
]}
|
|
/>
|
|
<Divider my="0px" labelPosition="center" />
|
|
</Grid.Col>
|
|
}
|
|
|
|
{!hideServerSerialize &&
|
|
<Grid.Col span={gridSpan} mb="md">
|
|
<Text mb="md" pl="md" ta="center" fw={700}>Server Serialize CPU Usage (%)</Text>
|
|
<AreaChart
|
|
h={300}
|
|
data={chartData}
|
|
dataKey="RequestCount"
|
|
type="stacked"
|
|
xAxisLabel="Data Count"
|
|
yAxisLabel="CPU Usage (%)"
|
|
withLegend
|
|
withPointLabels={false}
|
|
withDots={false}
|
|
valueFormatter={(value) => new Intl.NumberFormat('en-GB').format(value)}
|
|
areaChartProps={{ syncId: 'RequestCount' }}
|
|
series={[
|
|
{ name: 'gRpcServerSerializeCPU', label: 'gRPC', color: 'teal.6' },
|
|
{ name: 'RestServerSerializeCPU', label: 'Rest', color: 'indigo.6' },
|
|
]}
|
|
/>
|
|
<Divider my="0px" labelPosition="center" />
|
|
</Grid.Col>
|
|
}
|
|
|
|
{!hideServerDeserialize &&
|
|
<Grid.Col span={gridSpan} mb="md">
|
|
<Text mb="md" pl="md" ta="center" fw={700}>Server Deserialize Time (ms)</Text>
|
|
<AreaChart
|
|
h={300}
|
|
data={chartData}
|
|
dataKey="RequestCount"
|
|
type="stacked"
|
|
xAxisLabel="Data Count"
|
|
yAxisLabel="Time (ms)"
|
|
withLegend
|
|
withPointLabels={false}
|
|
withDots={false}
|
|
valueFormatter={(value) => new Intl.NumberFormat('en-GB').format(value * 1000)}
|
|
areaChartProps={{ syncId: 'RequestCount' }}
|
|
series={[
|
|
{ name: 'gRpcServerDeserializeTime', label: 'gRPC', color: 'teal.6' },
|
|
{ name: 'RestServerDeserializeTime', label: 'Rest', color: 'indigo.6' },
|
|
]}
|
|
/>
|
|
<Divider my="0px" labelPosition="center" />
|
|
</Grid.Col>
|
|
}
|
|
|
|
{!hideServerSerialize &&
|
|
<Grid.Col span={gridSpan} mb="md">
|
|
<Text mb="md" pl="md" ta="center" fw={700}>Server Serialize Time (ms)</Text>
|
|
<AreaChart
|
|
h={300}
|
|
data={chartData}
|
|
dataKey="RequestCount"
|
|
type="stacked"
|
|
xAxisLabel="Data Count"
|
|
yAxisLabel="Time (ms)"
|
|
withLegend
|
|
withPointLabels={false}
|
|
withDots={false}
|
|
valueFormatter={(value) => new Intl.NumberFormat('en-GB').format(value * 1000)}
|
|
areaChartProps={{ syncId: 'RequestCount' }}
|
|
series={[
|
|
{ name: 'gRpcServerSerializeTime', label: 'gRPC', color: 'teal.6' },
|
|
{ name: 'RestServerSerializeTime', label: 'Rest', color: 'indigo.6' },
|
|
]}
|
|
/>
|
|
<Divider my="0px" labelPosition="center" />
|
|
</Grid.Col>
|
|
}
|
|
|
|
<Grid.Col span={gridSpan} mb="md">
|
|
<Text mb="md" pl="md" ta="center" fw={700}>Server Protocol Total Time (ms)</Text>
|
|
<AreaChart
|
|
h={300}
|
|
data={chartData}
|
|
dataKey="RequestCount"
|
|
type="stacked"
|
|
xAxisLabel="Data Count"
|
|
yAxisLabel="Time (ms)"
|
|
withLegend
|
|
withPointLabels={false}
|
|
withDots={false}
|
|
valueFormatter={(value) => new Intl.NumberFormat('en-GB').format(value * 1000)}
|
|
areaChartProps={{ syncId: 'RequestCount' }}
|
|
series={[
|
|
{ name: 'gRpcServerProtocolTotalTime', label: 'gRPC', color: 'teal.6' },
|
|
{ name: 'RestServerProtocolTotalTime', label: 'Rest', color: 'indigo.6' },
|
|
]}
|
|
/>
|
|
<Divider my="0px" labelPosition="center" />
|
|
</Grid.Col>
|
|
|
|
</Grid>
|
|
)
|
|
} |