From 6ca8cfb0e077ca04d4c83d48955396476798d951 Mon Sep 17 00:00:00 2001 From: jennypavlova Date: Wed, 24 Jan 2024 11:31:05 +0100 Subject: [PATCH] [APM] Fix occurrences cut off value to be fully visible (#175307) Closes [174021](https://github.com/elastic/kibana/issues/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) --- .../apm/public/components/shared/charts/spark_plot/index.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/x-pack/plugins/apm/public/components/shared/charts/spark_plot/index.tsx b/x-pack/plugins/apm/public/components/shared/charts/spark_plot/index.tsx index f7baf95c488ad..9ebbd46c89af5 100644 --- a/x-pack/plugins/apm/public/components/shared/charts/spark_plot/index.tsx +++ b/x-pack/plugins/apm/public/components/shared/charts/spark_plot/index.tsx @@ -67,9 +67,7 @@ export function SparkPlot({ alignItems="flexEnd" style={flexGroupStyle} > - - {valueLabel} - + {valueLabel}