Skip to content

Commit

Permalink
[APM] Fix occurrences cut off value to be fully visible (#175307)
Browse files Browse the repository at this point in the history
Closes [174021](#174021)
## Summary

This PR fixes the occurrences column cut-off value and makes it fully
visible.
My first idea was to try to make a custom styling for the specific
`Occurrences` column but after that, I found that inside the `SparkPlot`
component I could make the label visible for all the similar cases where
we show label and chart in a table by removing the `grow={false}` and
`whiteSpace: 'nowrap'` style.

| Before  | After |
| ------- | ----- |
|
![image](https://github.com/elastic/kibana/assets/14139027/a1bf7bd8-0828-437f-9b91-42e59b587012)
|
![image](https://github.com/elastic/kibana/assets/14139027/71df43f2-01a4-40f7-95ea-506741b3b1ce)
|

With the change, it is also visible if the window is resized ( both
smaller and bigger):



https://github.com/elastic/kibana/assets/14139027/d5f3f501-b726-4e01-aea1-a0c890a2e0ee


## Testing
1. Use synthtrace to generate data 
1. One way is to change the `failedTimestamps` inside the
[simple_trace](https://github.com/elastic/kibana/blob/f7bd91763f7b87e9f3528cee0bff2e94b192eef8/packages/kbn-apm-synthtrace/src/scenarios/simple_trace.ts#L24)
to something bigger (add several `0`s but not toooo big as it may result
in an error)
2. If you don't want to do that the value can be adjusted in the browser
like in the resizing example video and `simple_trace` can remain the
same
    3. After that run `node scripts/synthtrace simple_trace.ts`
2. Open a service and check the Overview and Errors tabs (as well as the
other table values using label and chart)
  • Loading branch information
jennypavlova authored Jan 24, 2024
1 parent 4704007 commit 6ca8cfb
Showing 1 changed file with 1 addition and 3 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -67,9 +67,7 @@ export function SparkPlot({
alignItems="flexEnd"
style={flexGroupStyle}
>
<EuiFlexItem grow={false} style={{ whiteSpace: 'nowrap' }}>
{valueLabel}
</EuiFlexItem>
<EuiFlexItem>{valueLabel}</EuiFlexItem>
<EuiFlexItem grow={false}>
<SparkPlotItem
type={type}
Expand Down

0 comments on commit 6ca8cfb

Please sign in to comment.