[Metrics UI] Change Metric Threshold Alert charts to use bar charts (#66672)
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
This commit is contained in:
parent
b15578cbdf
commit
89402acfae
|
@ -12,6 +12,8 @@ import {
|
||||||
Settings,
|
Settings,
|
||||||
TooltipValue,
|
TooltipValue,
|
||||||
RectAnnotation,
|
RectAnnotation,
|
||||||
|
AnnotationDomainTypes,
|
||||||
|
LineAnnotation,
|
||||||
} from '@elastic/charts';
|
} from '@elastic/charts';
|
||||||
import { first, last } from 'lodash';
|
import { first, last } from 'lodash';
|
||||||
import moment from 'moment';
|
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 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 opacity = 0.3;
|
||||||
const { timeSize, timeUnit } = expression;
|
const { timeSize, timeUnit } = expression;
|
||||||
const timeLabel = TIME_LABELS[timeUnit];
|
const timeLabel = TIME_LABELS[timeUnit];
|
||||||
|
@ -149,44 +152,49 @@ export const ExpressionChart: React.FC<Props> = ({
|
||||||
<ChartContainer>
|
<ChartContainer>
|
||||||
<Chart>
|
<Chart>
|
||||||
<MetricExplorerSeriesChart
|
<MetricExplorerSeriesChart
|
||||||
type={MetricsExplorerChartType.area}
|
type={MetricsExplorerChartType.bar}
|
||||||
metric={metric}
|
metric={metric}
|
||||||
id="0"
|
id="0"
|
||||||
series={series}
|
series={series}
|
||||||
stack={false}
|
stack={false}
|
||||||
/>
|
/>
|
||||||
{thresholds.length ? (
|
<LineAnnotation
|
||||||
<MetricExplorerSeriesChart
|
id={`thresholds`}
|
||||||
type={isAbove ? MetricsExplorerChartType.line : MetricsExplorerChartType.area}
|
domainType={AnnotationDomainTypes.YDomain}
|
||||||
metric={{
|
dataValues={thresholds.map(threshold => ({
|
||||||
...metric,
|
dataValue: threshold,
|
||||||
color: MetricsExplorerColor.color1,
|
}))}
|
||||||
label: i18n.translate('xpack.infra.metrics.alerts.thresholdLabel', {
|
style={{
|
||||||
defaultMessage: 'Threshold',
|
line: {
|
||||||
}),
|
strokeWidth: 2,
|
||||||
}}
|
stroke: colorTransformer(MetricsExplorerColor.color1),
|
||||||
id={thresholds.map((t, i) => `threshold_${i}`)}
|
opacity: 1,
|
||||||
series={series}
|
},
|
||||||
stack={false}
|
}}
|
||||||
opacity={opacity}
|
/>
|
||||||
/>
|
{thresholds.length === 2 && expression.comparator === Comparator.BETWEEN ? (
|
||||||
) : null}
|
|
||||||
{thresholds.length && expression.comparator === Comparator.OUTSIDE_RANGE ? (
|
|
||||||
<>
|
<>
|
||||||
<MetricExplorerSeriesChart
|
<RectAnnotation
|
||||||
type={MetricsExplorerChartType.line}
|
id="lower-threshold"
|
||||||
metric={{
|
style={{
|
||||||
...metric,
|
fill: colorTransformer(MetricsExplorerColor.color1),
|
||||||
color: MetricsExplorerColor.color1,
|
opacity,
|
||||||
label: i18n.translate('xpack.infra.metrics.alerts.thresholdLabel', {
|
|
||||||
defaultMessage: 'Threshold',
|
|
||||||
}),
|
|
||||||
}}
|
}}
|
||||||
id={thresholds.map((t, i) => `threshold_${i}`)}
|
dataValues={[
|
||||||
series={series}
|
{
|
||||||
stack={false}
|
coordinates: {
|
||||||
opacity={opacity}
|
x0: firstTimestamp,
|
||||||
|
x1: lastTimestamp,
|
||||||
|
y0: first(expression.threshold),
|
||||||
|
y1: last(expression.threshold),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]}
|
||||||
/>
|
/>
|
||||||
|
</>
|
||||||
|
) : null}
|
||||||
|
{thresholds.length === 2 && expression.comparator === Comparator.OUTSIDE_RANGE ? (
|
||||||
|
<>
|
||||||
<RectAnnotation
|
<RectAnnotation
|
||||||
id="lower-threshold"
|
id="lower-threshold"
|
||||||
style={{
|
style={{
|
||||||
|
@ -223,6 +231,25 @@ export const ExpressionChart: React.FC<Props> = ({
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
) : null}
|
) : 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 ? (
|
{isAbove && first(expression.threshold) != null ? (
|
||||||
<RectAnnotation
|
<RectAnnotation
|
||||||
id="upper-threshold"
|
id="upper-threshold"
|
||||||
|
|
Loading…
Reference in a new issue