fix inconsistent use of abbreviations in ui (#388)

## Summary

Update various places where ttft and itl were abbreviated but other
units were not.

## Details

- update metrics summary section
- update metrics details section

## Test Plan

Visually everything is correct, as long as tests pass it should be fine

## Related Issues

- Resolves #276

Author: sjmonson

src/ui/lib/components/MetricsSummary/MetricsSummary.component.tsx

@@ -123,7 +123,7 @@ export const Component = () => {
           <FieldsContainer data-id="fields-container">
             <FieldCell data-id="field-cell-1">
               <Input
-                label="TTFT (ms)"
+                label="TIME TO FIRST TOKEN (ms)"
                 value={ttftSLO}
                 onChange={handleTtft}
                 fullWidth
@@ -133,7 +133,7 @@ export const Component = () => {
             </FieldCell>
             <FieldCell data-id="field-cell-2">
               <Input
-                label="ITL (ms)"
+                label="INTER-TOKEN LATENCY (ms)"
                 value={itlSLO}
                 onChange={handleItl}
                 fullWidth
@@ -212,7 +212,7 @@ export const Component = () => {
         </MiddleColumn>
         <MiddleColumn item xs={3}>
           <MetricValue
-            label="TTFT"
+            label="time to first token"
             value={`${formatNumber(interpolatedMetricData.ttft.enforcedPercentileValue)} ms`}
             match={isTtftMatch}
             valueColor={LineColor.Primary}
@@ -230,7 +230,7 @@ export const Component = () => {
         </MiddleColumn>
         <MiddleColumn item xs={3}>
           <MetricValue
-            label="ITL"
+            label="inter-token latency"
             value={`${formatNumber(interpolatedMetricData.itl.enforcedPercentileValue)} ms`}
             match={isItlMatch}
             valueColor={LineColor.Secondary}

src/ui/lib/components/WorkloadMetrics/WorkloadMetrics.component.tsx

@@ -57,49 +57,49 @@ export const Component = () => {
       <BlockHeader label="Metrics Details" />
       <Box display="flex" flexDirection="row" gap={3} mt={3}>
         <MetricsContainer
-          header="TTFT"
+          header="TIME TO FIRST TOKEN"
           leftColumn={leftColumn(
             formattedRequestRate,
             formatNumber(ttftAtRPS.mean),
             'ms'
           )}
           rightColumn={columnContent(formattedRequestRate, ttftAtRPS.percentiles, 'ms')}
         >
-          <GraphTitle title="TTFS vs RPS" />
+          <GraphTitle title="Time to First Token vs RPS" />
           <GraphsWrapper>
             <DashedLine
               data={ttft}
               margins={{ left: 50, bottom: 50 }}
               xLegend="request per sec"
-              yLegend="ttft (ms)"
+              yLegend="time to first token (ms)"
               minX={minX}
             />
           </GraphsWrapper>
         </MetricsContainer>
         <MetricsContainer
-          header="ITL"
+          header="INTER-TOKEN LATENCY"
           leftColumn={leftColumn3(
             formattedRequestRate,
             formatNumber(itlAtRPS.mean),
             'ms'
           )}
           rightColumn={columnContent(formattedRequestRate, itlAtRPS.percentiles, 'ms')}
         >
-          <GraphTitle title="ITL vs RPS" />
+          <GraphTitle title="Inter-token Latency vs RPS" />
           <GraphsWrapper>
             <DashedLine
               data={itl}
               margins={{ left: 50, bottom: 50 }}
               xLegend="request per sec"
-              yLegend="itl (ms)"
+              yLegend="inter-token latency (ms)"
               minX={minX}
             />
           </GraphsWrapper>
         </MetricsContainer>
       </Box>
       <Box display="flex" flexDirection="row" gap={3} mt={3}>
         <MetricsContainer
-          header="E2E Latency"
+          header="Time Per Request"
           leftColumn={leftColumn(
             formattedRequestRate,
             formatNumber(timePerRequestAtRPS.mean),
@@ -111,13 +111,13 @@ export const Component = () => {
             's'
           )}
         >
-          <GraphTitle title="E2E Latency vs RPS" />
+          <GraphTitle title="Time Per Request vs RPS" />
           <GraphsWrapper>
             <DashedLine
               data={timePerRequest}
               margins={{ left: 50, bottom: 50 }}
               xLegend="request per sec"
-              yLegend="latency (s)"
+              yLegend="time per request (s)"
               minX={minX}
             />
           </GraphsWrapper>