Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Alerting] UX fixes for execution duration chart #117193

Merged
merged 6 commits into from
Nov 4, 2021
Merged

[Alerting] UX fixes for execution duration chart #117193

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
4d2555b
UX fixes for duration chart
ymao1 Nov 2, 2021
1e723e5
UX fixes for duration chart
ymao1 Nov 2, 2021
573688a
UX fixes for duration chart
ymao1 Nov 2, 2021
d8b51b4
Merge branch 'main' into alerting/rule-execution-duration-nicer
kibanamachine Nov 2, 2021
6c3d0f4
Merge branch 'main' into alerting/rule-execution-duration-nicer
kibanamachine Nov 2, 2021
9b993bc
Merge branch 'main' into alerting/rule-execution-duration-nicer
kibanamachine Nov 4, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 12 additions & 1 deletion ...ctions_ui/public/application/sections/common/components/execution_duration_chart.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down
22 changes: 18 additions & 4 deletions ...ers_actions_ui/public/application/sections/common/components/execution_duration_chart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
val ? executionDuration.average : null,
])}
curve={CurveType.CURVE_NATURAL}
/>
<Axis id="left-axis" position="left" tickFormat={(d) => formatMillisForDisplay(d)} />
Expand Down Expand Up @@ -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);
Expand Down