maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[Metrics UI] Change Metric Threshold Alert charts to use bar charts (#66672)

Browse source 
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
This commit is contained in:
Chris Cowan 2020-05-19 12:05:39 -07:00 committed by GitHub
parent b15578cbdf
commit 89402acfae
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 57 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

87
x-pack/plugins/infra/public/alerting/metric_threshold/components/expression_chart.tsx
View file

@ -12,6 +12,8 @@ import {
Settings,
TooltipValue,
RectAnnotation,
AnnotationDomainTypes,
LineAnnotation,
} from '@elastic/charts';
import { first, last } from 'lodash';
import moment from 'moment';
@ -140,6 +142,7 @@ export const ExpressionChart: React.FC<Props> = ({
}
const isAbove = [Comparator.GT, Comparator.GT_OR_EQ].includes(expression.comparator);
const isBelow = [Comparator.LT, Comparator.LT_OR_EQ].includes(expression.comparator);
const opacity = 0.3;
const { timeSize, timeUnit } = expression;
const timeLabel = TIME_LABELS[timeUnit];
@ -149,44 +152,49 @@ export const ExpressionChart: React.FC<Props> = ({
<ChartContainer>
<Chart>
<MetricExplorerSeriesChart
type={MetricsExplorerChartType.area}
type={MetricsExplorerChartType.bar}
metric={metric}
id="0"
series={series}
stack={false}
/>
{thresholds.length ? (
<MetricExplorerSeriesChart
type={isAbove ? MetricsExplorerChartType.line : MetricsExplorerChartType.area}
metric={{
...metric,
color: MetricsExplorerColor.color1,
label: i18n.translate('xpack.infra.metrics.alerts.thresholdLabel', {
defaultMessage: 'Threshold',
}),
}}
id={thresholds.map((t, i) => `threshold_${i}`)}
series={series}
stack={false}
opacity={opacity}
/>
) : null}
{thresholds.length && expression.comparator === Comparator.OUTSIDE_RANGE ? (
<LineAnnotation
id={`thresholds`}
domainType={AnnotationDomainTypes.YDomain}
dataValues={thresholds.map(threshold => ({
dataValue: threshold,
}))}
style={{
line: {
strokeWidth: 2,
stroke: colorTransformer(MetricsExplorerColor.color1),
opacity: 1,
},
}}
/>
{thresholds.length === 2 && expression.comparator === Comparator.BETWEEN ? (
<>
<MetricExplorerSeriesChart
type={MetricsExplorerChartType.line}
metric={{
...metric,
color: MetricsExplorerColor.color1,
label: i18n.translate('xpack.infra.metrics.alerts.thresholdLabel', {
defaultMessage: 'Threshold',
}),
<RectAnnotation
id="lower-threshold"
style={{
fill: colorTransformer(MetricsExplorerColor.color1),
opacity,
}}
id={thresholds.map((t, i) => `threshold_${i}`)}
series={series}
stack={false}
opacity={opacity}
dataValues={[
{
coordinates: {
x0: firstTimestamp,
x1: lastTimestamp,
y0: first(expression.threshold),
y1: last(expression.threshold),
},
},
]}
/>
</>
) : null}
{thresholds.length === 2 && expression.comparator === Comparator.OUTSIDE_RANGE ? (
<>
<RectAnnotation
id="lower-threshold"
style={{
@ -223,6 +231,25 @@ export const ExpressionChart: React.FC<Props> = ({
/>
</>
) : null}
{isBelow && first(expression.threshold) != null ? (
<RectAnnotation
id="upper-threshold"
style={{
fill: colorTransformer(MetricsExplorerColor.color1),
opacity,
}}
dataValues={[
{
coordinates: {
x0: firstTimestamp,
x1: lastTimestamp,
y0: domain.min,
y1: first(expression.threshold),
},
},
]}
/>
) : null}
{isAbove && first(expression.threshold) != null ? (
<RectAnnotation
id="upper-threshold"