1
- import { Button , HStack } from "@chakra-ui/react" ;
1
+ import { Box , Button , Spacer , VStack } from "@chakra-ui/react" ;
2
2
import { useSelector , useDispatch } from "react-redux" ;
3
3
import { useNavigate } from "react-router-dom" ;
4
4
import Stats , { STATE } from "./stats" ;
@@ -12,6 +12,7 @@ import StatusInfo from "../../../../components/Info/statusInfo";
12
12
import { useInterval } from "../../../../hooks/useInterval" ;
13
13
import { getLoadsterAction } from "../../../../store/stress/dashboard/actions" ;
14
14
import Spinner from "../../../../components/Spinner" ;
15
+ import { NumberFormat } from "../../../../utils/_shared" ;
15
16
16
17
export default function RequestStats ( ) {
17
18
const dispatch = useDispatch ( ) ;
@@ -33,47 +34,59 @@ export default function RequestStats() {
33
34
return < Spinner /> ;
34
35
}
35
36
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 >
78
91
) ;
79
92
}
0 commit comments