-
Notifications
You must be signed in to change notification settings - Fork 8k
/
index.tsx
96 lines (85 loc) · 2.58 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
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/
import {
EuiFlexGroup,
EuiFlexItem,
EuiPanel,
EuiSpacer,
EuiTitle
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import React from 'react';
import { useFetcher } from '../../../hooks/useFetcher';
import { ErrorDistribution } from '../ErrorGroupDetails/Distribution';
import { ErrorGroupList } from './List';
import { useUrlParams } from '../../../hooks/useUrlParams';
import { useTrackPageview } from '../../../../../infra/public';
import { calls } from '../../../services/rest/callApi';
const ErrorGroupOverview: React.SFC = () => {
const {
urlParams: { serviceName, start, end, sortField, sortDirection },
uiFilters
} = useUrlParams();
const { data: errorDistributionData } = useFetcher(() => {
if (serviceName && start && end) {
return calls.getErrorsDistribution({
query: {
serviceName,
start,
end,
uiFilters: JSON.stringify(uiFilters)
}
});
}
}, [serviceName, start, end, uiFilters]);
const { data: errorGroupListData } = useFetcher(() => {
if (serviceName && start && end) {
return calls.getErrorGroupList({
query: {
serviceName,
start,
end,
sortField,
sortDirection,
uiFilters: JSON.stringify(uiFilters)
}
});
}
}, [serviceName, start, end, sortField, sortDirection, uiFilters]);
useTrackPageview({ app: 'apm', path: 'error_group_overview' });
useTrackPageview({ app: 'apm', path: 'error_group_overview', delay: 15000 });
if (!errorDistributionData || !errorGroupListData) {
return null;
}
return (
<React.Fragment>
<EuiFlexGroup>
<EuiFlexItem>
<EuiPanel>
<ErrorDistribution
distribution={errorDistributionData}
title={i18n.translate(
'xpack.apm.serviceDetails.metrics.errorOccurrencesChartTitle',
{
defaultMessage: 'Error occurrences'
}
)}
/>
</EuiPanel>
</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer size="s" />
<EuiPanel>
<EuiTitle size="xs">
<h3>Errors</h3>
</EuiTitle>
<EuiSpacer size="s" />
<ErrorGroupList items={errorGroupListData} />
</EuiPanel>
</React.Fragment>
);
};
export { ErrorGroupOverview };