From 4d2555b74681cb9c526f8b27acda3b4633244f9b Mon Sep 17 00:00:00 2001
From: Ying Mao <ying.mao@elastic.co>
Date: Tue, 2 Nov 2021 13:44:25 -0400
Subject: [PATCH 1/3] UX fixes for duration chart

---
 .../execution_duration_chart.test.tsx         | 13 ++++++++++-
 .../components/execution_duration_chart.tsx   | 22 +++++++++++++++----
 2 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/execution_duration_chart.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/execution_duration_chart.test.tsx
index 672cd75f0cd13..1f758de1912c4 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/execution_duration_chart.test.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/execution_duration_chart.test.tsx
@@ -48,7 +48,18 @@ describe('padOrTruncateDurations', () => {
   });
 
   it('pads execution duration values when there are fewer than display desires', () => {
-    expect(padOrTruncateDurations([1, 2, 3], 10)).toEqual([1, 2, 3, 0, 0, 0, 0, 0, 0, 0]);
+    expect(padOrTruncateDurations([1, 2, 3], 10)).toEqual([
+      1,
+      2,
+      3,
+      null,
+      null,
+      null,
+      null,
+      null,
+      null,
+      null,
+    ]);
   });
 
   it('truncates execution duration values when there are more than display desires', () => {
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/execution_duration_chart.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/execution_duration_chart.tsx
index ca20af9cea0fd..d94273c0fcbc4 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/execution_duration_chart.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/execution_duration_chart.tsx
@@ -81,20 +81,34 @@ export const ExecutionDurationChart: React.FunctionComponent<ComponentOpts> = ({
               }}
             />
             <BarSeries
-              id="executionDuration"
+              id={i18n.translate(
+                'xpack.triggersActionsUI.sections.executionDurationChart.durationLabel',
+                {
+                  defaultMessage: `Duration`,
+                }
+              )}
               xScaleType="linear"
               yScaleType="linear"
               xAccessor={0}
               yAccessors={[1]}
               data={paddedExecutionDurations.map((val, ndx) => [ndx, val])}
+              minBarHeight={2}
             />
             <LineSeries
-              id="rule_duration_avg"
+              id={i18n.translate(
+                'xpack.triggersActionsUI.sections.executionDurationChart.avgDurationLabel',
+                {
+                  defaultMessage: `Avg Duration`,
+                }
+              )}
               xScaleType="linear"
               yScaleType="linear"
               xAccessor={0}
               yAccessors={[1]}
-              data={paddedExecutionDurations.map((val, ndx) => [ndx, executionDuration.average])}
+              data={paddedExecutionDurations.map((val, ndx) => [
+                ndx,
+                paddedExecutionDurations[ndx] ? executionDuration.average : null,
+              ])}
               curve={CurveType.CURVE_NATURAL}
             />
             <Axis id="left-axis" position="left" tickFormat={(d) => formatMillisForDisplay(d)} />
@@ -125,7 +139,7 @@ export function padOrTruncateDurations(values: number[], desiredSize: number) {
   if (values.length === desiredSize) {
     return values;
   } else if (values.length < desiredSize) {
-    return assign(fill(new Array(desiredSize), 0), values);
+    return assign(fill(new Array(desiredSize), null), values);
   } else {
     // oldest durations are at the start of the array, so take the last {desiredSize} values
     return values.slice(-desiredSize);

From 1e723e50d7de839b2ee2b6416749e63517027c63 Mon Sep 17 00:00:00 2001
From: Ying Mao <ying.mao@elastic.co>
Date: Tue, 2 Nov 2021 13:56:14 -0400
Subject: [PATCH 2/3] UX fixes for duration chart

---
 .../sections/common/components/execution_duration_chart.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/execution_duration_chart.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/execution_duration_chart.tsx
index d94273c0fcbc4..caf4014a7dfd2 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/execution_duration_chart.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/execution_duration_chart.tsx
@@ -107,7 +107,7 @@ export const ExecutionDurationChart: React.FunctionComponent<ComponentOpts> = ({
               yAccessors={[1]}
               data={paddedExecutionDurations.map((val, ndx) => [
                 ndx,
-                paddedExecutionDurations[ndx] ? executionDuration.average : null,
+                val ? executionDuration.average : null,
               ])}
               curve={CurveType.CURVE_NATURAL}
             />

From 573688a92ca00847f0564f07d42284ee111b44bd Mon Sep 17 00:00:00 2001
From: Ying Mao <ying.mao@elastic.co>
Date: Tue, 2 Nov 2021 14:29:12 -0400
Subject: [PATCH 3/3] UX fixes for duration chart

---
 .../sections/common/components/execution_duration_chart.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/execution_duration_chart.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/execution_duration_chart.tsx
index caf4014a7dfd2..ea8c16d03cc04 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/execution_duration_chart.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/execution_duration_chart.tsx
@@ -81,7 +81,8 @@ export const ExecutionDurationChart: React.FunctionComponent<ComponentOpts> = ({
               }}
             />
             <BarSeries
-              id={i18n.translate(
+              id="executionDuration"
+              name={i18n.translate(
                 'xpack.triggersActionsUI.sections.executionDurationChart.durationLabel',
                 {
                   defaultMessage: `Duration`,
@@ -95,7 +96,8 @@ export const ExecutionDurationChart: React.FunctionComponent<ComponentOpts> = ({
               minBarHeight={2}
             />
             <LineSeries
-              id={i18n.translate(
+              id="rule_duration_avg"
+              name={i18n.translate(
                 'xpack.triggersActionsUI.sections.executionDurationChart.avgDurationLabel',
                 {
                   defaultMessage: `Avg Duration`,