mirror of
https://github.com/elastic/kibana.git
synced 2025-06-27 18:51:07 -04:00
Hide related events tab in Custom threshold alert details page (#167646)
Resolves https://github.com/elastic/kibana/issues/167645 Hides "Related Events" tab in Custom threshold alert details page as we want to keep it as a prototype.
This commit is contained in:
Bena Kansara
GitHub
parent
872504aed5
commit
bfafd369a0
1 changed files with 60 additions and 121 deletions
|
|
@ -16,8 +16,6 @@ import {
|
|||
EuiLink,
|
||||
EuiPanel,
|
||||
EuiSpacer,
|
||||
EuiTabbedContent,
|
||||
EuiTabbedContentTab,
|
||||
EuiText,
|
||||
EuiTitle,
|
||||
useEuiTheme,
|
||||
|
|
@ -30,7 +28,6 @@ import {
|
|||
AlertActiveTimeRangeAnnotation,
|
||||
} from '@kbn/observability-alert-details';
|
||||
import { DataView } from '@kbn/data-views-plugin/common';
|
||||
import type { TimeRange } from '@kbn/es-query';
|
||||
import { useKibana } from '../../../utils/kibana_react';
|
||||
import { metricValueFormatter } from '../../../../common/custom_threshold_rule/metric_value_formatter';
|
||||
import { AlertSummaryField, TopAlert } from '../../..';
|
||||
|
|
@ -40,7 +37,7 @@ import { ExpressionChart } from './expression_chart';
|
|||
import { TIME_LABELS } from './criterion_preview_chart/criterion_preview_chart';
|
||||
import { Threshold } from './custom_threshold';
|
||||
import { MetricsExplorerChartType } from '../hooks/use_metrics_explorer_options';
|
||||
import { AlertParams, MetricExpression, MetricThresholdRuleTypeParams } from '../types';
|
||||
import { AlertParams, MetricThresholdRuleTypeParams } from '../types';
|
||||
|
||||
// TODO Use a generic props for app sections https://github.com/elastic/kibana/issues/152690
|
||||
export type MetricThresholdRule = Rule<MetricThresholdRuleTypeParams>;
|
||||
|
|
@ -49,8 +46,6 @@ export type MetricThresholdAlert = TopAlert;
|
|||
const DEFAULT_DATE_FORMAT = 'YYYY-MM-DD HH:mm';
|
||||
const ALERT_START_ANNOTATION_ID = 'alert_start_annotation';
|
||||
const ALERT_TIME_RANGE_ANNOTATION_ID = 'alert_time_range_annotation';
|
||||
const OVERVIEW_TAB_ID = 'overview';
|
||||
const RELATED_EVENTS_TAB_ID = 'relatedEvents';
|
||||
|
||||
interface AppSectionProps {
|
||||
alert: MetricThresholdAlert;
|
||||
|
|
@ -66,8 +61,7 @@ export default function AlertDetailsAppSection({
|
|||
ruleLink,
|
||||
setAlertSummaryFields,
|
||||
}: AppSectionProps) {
|
||||
const { uiSettings, charts, aiops, data } = useKibana().services;
|
||||
const { EmbeddableChangePointChart } = aiops;
|
||||
const { uiSettings, charts, data } = useKibana().services;
|
||||
const { euiTheme } = useEuiTheme();
|
||||
const [dataView, setDataView] = useState<DataView>();
|
||||
const [, setDataViewError] = useState<Error>();
|
||||
|
|
@ -135,120 +129,65 @@ export default function AlertDetailsAppSection({
|
|||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [data.search.searchSource]);
|
||||
|
||||
const relatedEventsTimeRange = (criterion: MetricExpression): TimeRange => {
|
||||
return {
|
||||
from: moment(alert.start)
|
||||
.subtract((criterion.timeSize ?? 5) * 2, criterion.timeUnit ?? 'minutes')
|
||||
.toISOString(),
|
||||
to: moment(alert.lastUpdated).toISOString(),
|
||||
mode: 'absolute',
|
||||
};
|
||||
};
|
||||
|
||||
const overviewTab = !!ruleParams.criteria ? (
|
||||
<>
|
||||
<EuiSpacer size="l" />
|
||||
<EuiFlexGroup direction="column" data-test-subj="thresholdAlertOverviewSection">
|
||||
{ruleParams.criteria.map((criterion, index) => (
|
||||
<EuiFlexItem key={generateUniqueKey(criterion)}>
|
||||
<EuiPanel hasBorder hasShadow={false}>
|
||||
<EuiTitle size="xs">
|
||||
<h4>
|
||||
{criterion.aggType.toUpperCase()}{' '}
|
||||
{'metric' in criterion ? criterion.metric : undefined}
|
||||
</h4>
|
||||
</EuiTitle>
|
||||
<EuiText size="s" color="subdued">
|
||||
<FormattedMessage
|
||||
id="xpack.observability.customThreshold.rule.alertDetailsAppSection.criterion.subtitle"
|
||||
defaultMessage="Last {lookback} {timeLabel}"
|
||||
values={{
|
||||
lookback: criterion.timeSize,
|
||||
timeLabel: TIME_LABELS[criterion.timeUnit as keyof typeof TIME_LABELS],
|
||||
}}
|
||||
/>
|
||||
</EuiText>
|
||||
<EuiSpacer size="s" />
|
||||
<EuiFlexGroup>
|
||||
<EuiFlexItem style={{ minHeight: 150, minWidth: 160 }} grow={1}>
|
||||
<Threshold
|
||||
chartProps={chartProps}
|
||||
id={`threshold-${generateUniqueKey(criterion)}`}
|
||||
threshold={criterion.threshold[0]}
|
||||
value={alert.fields[ALERT_EVALUATION_VALUES]![index]}
|
||||
valueFormatter={(d) =>
|
||||
metricValueFormatter(d, 'metric' in criterion ? criterion.metric : undefined)
|
||||
}
|
||||
title={i18n.translate(
|
||||
'xpack.observability.customThreshold.rule.alertDetailsAppSection.thresholdTitle',
|
||||
{
|
||||
defaultMessage: 'Threshold breached',
|
||||
}
|
||||
)}
|
||||
comparator={criterion.comparator}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={5}>
|
||||
<ExpressionChart
|
||||
annotations={annotations}
|
||||
chartType={MetricsExplorerChartType.line}
|
||||
derivedIndexPattern={derivedIndexPattern}
|
||||
expression={criterion}
|
||||
filterQuery={(ruleParams.searchConfiguration?.query as Query)?.query as string}
|
||||
groupBy={ruleParams.groupBy}
|
||||
hideTitle
|
||||
timeRange={timeRange}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiPanel>
|
||||
</EuiFlexItem>
|
||||
))}
|
||||
</EuiFlexGroup>
|
||||
</>
|
||||
) : null;
|
||||
|
||||
const relatedEventsTab = !!ruleParams.criteria ? (
|
||||
<>
|
||||
<EuiSpacer size="l" />
|
||||
<EuiFlexGroup direction="column" data-test-subj="thresholdAlertRelatedEventsSection">
|
||||
{ruleParams.criteria.map((criterion, criterionIndex) =>
|
||||
criterion.metrics?.map((metric, metricIndex) => {
|
||||
const id = `embeddableChart-criterion${criterionIndex}-metric${metricIndex}`;
|
||||
return dataView?.id ? (
|
||||
<EmbeddableChangePointChart
|
||||
id={id}
|
||||
key={id}
|
||||
dataViewId={dataView.id}
|
||||
timeRange={relatedEventsTimeRange(criterion)}
|
||||
fn={metric.aggType ?? ''}
|
||||
metricField={metric.field ?? ''}
|
||||
const overview = !!ruleParams.criteria ? (
|
||||
<EuiFlexGroup direction="column" data-test-subj="thresholdAlertOverviewSection">
|
||||
{ruleParams.criteria.map((criterion, index) => (
|
||||
<EuiFlexItem key={generateUniqueKey(criterion)}>
|
||||
<EuiPanel hasBorder hasShadow={false}>
|
||||
<EuiTitle size="xs">
|
||||
<h4>
|
||||
{criterion.aggType.toUpperCase()}{' '}
|
||||
{'metric' in criterion ? criterion.metric : undefined}
|
||||
</h4>
|
||||
</EuiTitle>
|
||||
<EuiText size="s" color="subdued">
|
||||
<FormattedMessage
|
||||
id="xpack.observability.customThreshold.rule.alertDetailsAppSection.criterion.subtitle"
|
||||
defaultMessage="Last {lookback} {timeLabel}"
|
||||
values={{
|
||||
lookback: criterion.timeSize,
|
||||
timeLabel: TIME_LABELS[criterion.timeUnit as keyof typeof TIME_LABELS],
|
||||
}}
|
||||
/>
|
||||
) : null;
|
||||
})
|
||||
)}
|
||||
</EuiFlexGroup>
|
||||
</>
|
||||
</EuiText>
|
||||
<EuiSpacer size="s" />
|
||||
<EuiFlexGroup>
|
||||
<EuiFlexItem style={{ minHeight: 150, minWidth: 160 }} grow={1}>
|
||||
<Threshold
|
||||
chartProps={chartProps}
|
||||
id={`threshold-${generateUniqueKey(criterion)}`}
|
||||
threshold={criterion.threshold[0]}
|
||||
value={alert.fields[ALERT_EVALUATION_VALUES]![index]}
|
||||
valueFormatter={(d) =>
|
||||
metricValueFormatter(d, 'metric' in criterion ? criterion.metric : undefined)
|
||||
}
|
||||
title={i18n.translate(
|
||||
'xpack.observability.customThreshold.rule.alertDetailsAppSection.thresholdTitle',
|
||||
{
|
||||
defaultMessage: 'Threshold breached',
|
||||
}
|
||||
)}
|
||||
comparator={criterion.comparator}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={5}>
|
||||
<ExpressionChart
|
||||
annotations={annotations}
|
||||
chartType={MetricsExplorerChartType.line}
|
||||
derivedIndexPattern={derivedIndexPattern}
|
||||
expression={criterion}
|
||||
filterQuery={(ruleParams.searchConfiguration?.query as Query)?.query as string}
|
||||
groupBy={ruleParams.groupBy}
|
||||
hideTitle
|
||||
timeRange={timeRange}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiPanel>
|
||||
</EuiFlexItem>
|
||||
))}
|
||||
</EuiFlexGroup>
|
||||
) : null;
|
||||
|
||||
const tabs: EuiTabbedContentTab[] = [
|
||||
{
|
||||
id: OVERVIEW_TAB_ID,
|
||||
name: i18n.translate('xpack.observability.threshold.alertDetails.tab.overviewLabel', {
|
||||
defaultMessage: 'Overview',
|
||||
}),
|
||||
'data-test-subj': 'overviewTab',
|
||||
content: overviewTab,
|
||||
},
|
||||
{
|
||||
id: RELATED_EVENTS_TAB_ID,
|
||||
name: i18n.translate('xpack.observability.threshold.alertDetails.tab.relatedEventsLabel', {
|
||||
defaultMessage: 'Related Events',
|
||||
}),
|
||||
'data-test-subj': 'relatedEventsTab',
|
||||
content: relatedEventsTab,
|
||||
},
|
||||
];
|
||||
|
||||
return <EuiTabbedContent data-test-subj="thresholdAlertDetailsTabbedContent" tabs={tabs} />;
|
||||
return overview;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue