/
index.tsx
122 lines (112 loc) · 3.96 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import React, { useState, useMemo, useEffect, useCallback } from 'react';
import { useHistory } from 'react-router-dom';
import { ObservabilityAlertSearchBar } from '@kbn/observability-plugin/public';
import { AlertStatus } from '@kbn/observability-plugin/common/typings';
import { EuiPanel, EuiFlexItem, EuiFlexGroup } from '@elastic/eui';
import { BoolQuery } from '@kbn/es-query';
import { AlertConsumers } from '@kbn/rule-data-utils';
import { useKibana } from '@kbn/kibana-react-plugin/public';
import { ApmPluginStartDeps } from '../../../plugin';
import { useAnyOfApmParams } from '../../../hooks/use_apm_params';
import { SERVICE_NAME } from '../../../../common/es_fields/apm';
import { getEnvironmentKuery } from '../../../../common/environment_filter_values';
import { push } from '../../shared/links/url_helpers';
export const ALERT_STATUS_ALL = 'all';
export function AlertsOverview() {
const history = useHistory();
const {
path: { serviceName },
query: { environment, rangeFrom, rangeTo, kuery, alertStatus },
} = useAnyOfApmParams(
'/services/{serviceName}/alerts',
'/mobile-services/{serviceName}/alerts'
);
const { services } = useKibana<ApmPluginStartDeps>();
const [alertStatusFilter, setAlertStatusFilter] =
useState<AlertStatus>(ALERT_STATUS_ALL);
const [esQuery, setEsQuery] = useState<{ bool: BoolQuery }>();
useEffect(() => {
if (alertStatus) {
setAlertStatusFilter(alertStatus as AlertStatus);
}
}, [alertStatus]);
const {
triggersActionsUi: {
getAlertsStateTable: AlertsStateTable,
getAlertsSearchBar: AlertsSearchBar,
alertsTableConfigurationRegistry,
},
notifications,
data: {
query: {
timefilter: { timefilter: timeFilterService },
},
},
} = services;
const useToasts = () => notifications!.toasts;
const apmQueries = useMemo(() => {
const environmentKuery = getEnvironmentKuery(environment);
let query = `${SERVICE_NAME}:${serviceName}`;
if (environmentKuery) {
query += ` AND ${environmentKuery}`;
}
return [
{
query,
language: 'kuery',
},
];
}, [serviceName, environment]);
const onKueryChange = useCallback(
(value) => push(history, { query: { kuery: value } }),
[history]
);
return (
<EuiPanel borderRadius="none" hasShadow={false}>
<EuiFlexGroup direction="column" gutterSize="s">
<EuiFlexItem>
<EuiFlexItem grow={false}>
<ObservabilityAlertSearchBar
appName={'apmApp'}
kuery={kuery}
onRangeFromChange={(value) =>
push(history, { query: { rangeFrom: value } })
}
onRangeToChange={(value) =>
push(history, { query: { rangeTo: value } })
}
onKueryChange={onKueryChange}
defaultSearchQueries={apmQueries}
onStatusChange={setAlertStatusFilter}
onEsQueryChange={setEsQuery}
rangeTo={rangeTo}
rangeFrom={rangeFrom}
status={alertStatusFilter}
services={{ timeFilterService, AlertsSearchBar, useToasts }}
/>
</EuiFlexItem>
</EuiFlexItem>
<EuiFlexItem>
{esQuery && (
<AlertsStateTable
alertsTableConfigurationRegistry={
alertsTableConfigurationRegistry
}
id={'service-overview-alerts'}
configurationId={AlertConsumers.OBSERVABILITY}
featureIds={[AlertConsumers.APM, AlertConsumers.OBSERVABILITY]}
query={esQuery}
showAlertStatusWithFlapping
/>
)}
</EuiFlexItem>
</EuiFlexGroup>
</EuiPanel>
);
}