[Alerting] UX fixes for execution duration chart (elastic#117193) (el…

…astic#117605) * UX fixes for duration chart * UX fixes for duration chart * UX fixes for duration chart Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: ymao1 <[email protected]>
kibanamachine · Nov 5, 2021 · e97f5bb · e97f5bb
1 parent 2f2c8d6
commit e97f5bb
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 3 deletions.
diff --git a/...ctions_ui/public/application/sections/common/components/execution_duration_chart.test.tsx b/...ctions_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/...ers_actions_ui/public/application/sections/common/components/execution_duration_chart.tsx b/...ers_actions_ui/public/application/sections/common/components/execution_duration_chart.tsx
@@ -82,19 +82,35 @@ export const ExecutionDurationChart: React.FunctionComponent<ComponentOpts> = ({
             />
             <BarSeries
               id="executionDuration"
+              name={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"
+              name={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,
+                val ? executionDuration.average : null,
+              ])}
               curve={CurveType.CURVE_NATURAL}
             />
             <Axis id="left-axis" position="left" tickFormat={(d) => formatMillisForDisplay(d)} />
@@ -125,7 +141,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);