1- import { Button , HStack } from "@chakra-ui/react" ;
1+ import { Box , Button , Spacer , VStack } from "@chakra-ui/react" ;
22import { useSelector , useDispatch } from "react-redux" ;
33import { useNavigate } from "react-router-dom" ;
44import Stats , { STATE } from "./stats" ;
@@ -12,6 +12,7 @@ import StatusInfo from "../../../../components/Info/statusInfo";
1212import { useInterval } from "../../../../hooks/useInterval" ;
1313import { getLoadsterAction } from "../../../../store/stress/dashboard/actions" ;
1414import Spinner from "../../../../components/Spinner" ;
15+ import { NumberFormat } from "../../../../utils/_shared" ;
1516
1617export default function RequestStats ( ) {
1718 const dispatch = useDispatch ( ) ;
@@ -33,47 +34,59 @@ export default function RequestStats() {
3334 return < Spinner /> ;
3435 }
3536 return (
36- < HStack
37- width = "auto"
38- borderRadius = "8px"
39- bg = "#F8F8F8"
40- margin = "12px 24px"
41- paddingX = "24px"
42- paddingY = "12px"
43- flexWrap = "wrap"
44- >
45- < StatusInfo
46- text = { loadsterRespons ?. finish ? "Completed" : "Running" }
47- positive = { ! loadsterRespons ?. finish }
48- />
49- < Stats
50- state = { STATE . NORMAL }
51- value = { loadsterRespons ?. timeTaken || 0 }
52- text = "Time"
53- />
54- < Stats
55- state = { STATE . NORMAL }
56- value = { loadsterRespons ?. totalRequest || 0 }
57- text = "Total Request"
58- />
59- < Stats
60- state = { STATE . POSITIVE }
61- value = { loadsterRespons ?. totalRPS || 0 }
62- text = "Total RPS"
63- />
64- < Stats
65- state = { STATE . POSITIVE }
66- value = { loadsterRespons ?. successRPS || 0 }
67- text = "Success RPS"
68- />
69- < Stats
70- state = { STATE . NAGATIVE }
71- value = { loadsterRespons ?. failRPS || 0 }
72- text = "Failed RPS"
73- />
74- < Button onClick = { ( ) => navigate ( `/request/${ selectedRequestId } ` ) } >
75- View In Details
76- </ Button >
77- </ HStack >
37+ < VStack padding = "12px 54px" width = "100%" >
38+ < Box
39+ display = "flex"
40+ flexWrap = "wrap"
41+ justifyContent = "space-between"
42+ width = "100%"
43+ >
44+ < StatusInfo
45+ text = { loadsterRespons ?. finish ? "Completed" : "Running..." }
46+ positive = { ! loadsterRespons ?. finish }
47+ />
48+ < Spacer />
49+ < Button onClick = { ( ) => navigate ( `/request/${ selectedRequestId } ` ) } >
50+ View In Details
51+ </ Button >
52+ </ Box >
53+ < Box display = "flex" flexWrap = "wrap" justifyContent = "space-between" >
54+ < Stats
55+ state = { STATE . NORMAL }
56+ value = { ( loadsterRespons ?. minLatency || 0 ) / 1000 }
57+ text = "Fastest (MS)"
58+ />
59+ < Stats
60+ state = { STATE . NORMAL }
61+ value = { ( loadsterRespons ?. maxLatency || 0 ) / 1000 }
62+ text = "Slowest (MS)"
63+ />
64+ < Stats
65+ state = { STATE . NORMAL }
66+ value = { loadsterRespons ?. timeTaken || 0 }
67+ text = "Time"
68+ />
69+ < Stats
70+ state = { STATE . NORMAL }
71+ value = { NumberFormat ( loadsterRespons ?. totalRequest || 0 ) }
72+ text = "Total Hit"
73+ />
74+ < Stats
75+ state = { STATE . POSITIVE }
76+ value = { loadsterRespons ?. totalRPS || 0 }
77+ text = "Total RPS"
78+ />
79+ < Stats
80+ state = { STATE . POSITIVE }
81+ value = { loadsterRespons ?. successRPS || 0 }
82+ text = "Success RPS"
83+ />
84+ < Stats
85+ state = { STATE . NAGATIVE }
86+ value = { loadsterRespons ?. failRPS || 0 }
87+ text = "Failed RPS"
88+ />
89+ </ Box >
90+ </ VStack >
7891 ) ;
7992}
0 commit comments