@@ -36,14 +36,14 @@ export const leftColumn3 = (rpsValue: number, value: number, units: string) => (
36
36
37
37
export const Component = ( ) => {
38
38
const { data } = useGetBenchmarksQuery ( ) ;
39
- const { ttft, tpot , timePerRequest, throughput } = useSelector (
39
+ const { ttft, itl , timePerRequest, throughput } = useSelector (
40
40
selectMetricsDetailsLineData
41
41
) ;
42
42
const { currentRequestRate } = useSelector ( selectSloState ) ;
43
43
const formattedRequestRate = formatNumber ( currentRequestRate ) ;
44
44
const {
45
45
ttft : ttftAtRPS ,
46
- tpot : tpotAtRPS ,
46
+ itl : itlAtRPS ,
47
47
timePerRequest : timePerRequestAtRPS ,
48
48
throughput : throughputAtRPS ,
49
49
} = useSelector ( selectInterpolatedMetrics ) ;
@@ -57,49 +57,49 @@ export const Component = () => {
57
57
< BlockHeader label = "Metrics Details" />
58
58
< Box display = "flex" flexDirection = "row" gap = { 3 } mt = { 3 } >
59
59
< MetricsContainer
60
- header = "TTFT "
60
+ header = "TIME TO FIRST TOKEN "
61
61
leftColumn = { leftColumn (
62
62
formattedRequestRate ,
63
63
formatNumber ( ttftAtRPS . mean ) ,
64
64
'ms'
65
65
) }
66
66
rightColumn = { columnContent ( formattedRequestRate , ttftAtRPS . percentiles , 'ms' ) }
67
67
>
68
- < GraphTitle title = "TTFS vs RPS" />
68
+ < GraphTitle title = "Time to First Token vs RPS" />
69
69
< GraphsWrapper >
70
70
< DashedLine
71
71
data = { ttft }
72
72
margins = { { left : 50 , bottom : 50 } }
73
73
xLegend = "request per sec"
74
- yLegend = "ttft (ms)"
74
+ yLegend = "time to first token (ms)"
75
75
minX = { minX }
76
76
/>
77
77
</ GraphsWrapper >
78
78
</ MetricsContainer >
79
79
< MetricsContainer
80
- header = "TPOT "
80
+ header = "INTER-TOKEN LATENCY "
81
81
leftColumn = { leftColumn3 (
82
82
formattedRequestRate ,
83
- formatNumber ( tpotAtRPS . mean ) ,
83
+ formatNumber ( itlAtRPS . mean ) ,
84
84
'ms'
85
85
) }
86
- rightColumn = { columnContent ( formattedRequestRate , tpotAtRPS . percentiles , 'ms' ) }
86
+ rightColumn = { columnContent ( formattedRequestRate , itlAtRPS . percentiles , 'ms' ) }
87
87
>
88
- < GraphTitle title = "TPOT vs RPS" />
88
+ < GraphTitle title = "Inter-token Latency vs RPS" />
89
89
< GraphsWrapper >
90
90
< DashedLine
91
- data = { tpot }
91
+ data = { itl }
92
92
margins = { { left : 50 , bottom : 50 } }
93
93
xLegend = "request per sec"
94
- yLegend = "tpot (ms)"
94
+ yLegend = "inter-token latency (ms)"
95
95
minX = { minX }
96
96
/>
97
97
</ GraphsWrapper >
98
98
</ MetricsContainer >
99
99
</ Box >
100
100
< Box display = "flex" flexDirection = "row" gap = { 3 } mt = { 3 } >
101
101
< MetricsContainer
102
- header = "E2E Latency "
102
+ header = "Time Per Request "
103
103
leftColumn = { leftColumn (
104
104
formattedRequestRate ,
105
105
formatNumber ( timePerRequestAtRPS . mean ) ,
@@ -111,13 +111,13 @@ export const Component = () => {
111
111
's'
112
112
) }
113
113
>
114
- < GraphTitle title = "E2E Latency vs RPS" />
114
+ < GraphTitle title = "Time Per Request vs RPS" />
115
115
< GraphsWrapper >
116
116
< DashedLine
117
117
data = { timePerRequest }
118
118
margins = { { left : 50 , bottom : 50 } }
119
119
xLegend = "request per sec"
120
- yLegend = "latency (s)"
120
+ yLegend = "time per request (s)"
121
121
minX = { minX }
122
122
/>
123
123
</ GraphsWrapper >
0 commit comments