9
9
* GitHub history for details.
10
10
*/
11
11
12
- import React , { Fragment , useState , useEffect } from 'react' ;
12
+ import React , { Fragment , useState , useEffect , useMemo } from 'react' ;
13
13
import { AnomaliesLiveChart } from '../Components/AnomaliesLiveChart' ;
14
14
import { AnomaliesDistributionChart } from '../Components/AnomaliesDistribution' ;
15
+ import queryString from 'querystring' ;
15
16
16
17
import { useDispatch , useSelector } from 'react-redux' ;
17
18
import { get , isEmpty , cloneDeep } from 'lodash' ;
@@ -29,27 +30,38 @@ import {
29
30
} from '@elastic/eui' ;
30
31
import { AnomalousDetectorsList } from '../Components/AnomalousDetectorsList' ;
31
32
import {
32
- GET_ALL_DETECTORS_QUERY_PARAMS ,
33
33
ALL_DETECTORS_MESSAGE ,
34
34
ALL_DETECTOR_STATES_MESSAGE ,
35
35
ALL_INDICES_MESSAGE ,
36
36
} from '../utils/constants' ;
37
37
import { AppState } from '../../../redux/reducers' ;
38
- import { CatIndex , IndexAlias } from '../../../../server/models/types' ;
39
- import { getVisibleOptions } from '../../utils/helpers' ;
38
+ import { CatIndex , IndexAlias , MDSQueryParams } from '../../../../server/models/types' ;
39
+ import { getAllDetectorsQueryParamsWithDataSourceId , getVisibleOptions } from '../../utils/helpers' ;
40
40
import { BREADCRUMBS } from '../../../utils/constants' ;
41
41
import { DETECTOR_STATE } from '../../../../server/utils/constants' ;
42
- import { getDetectorStateOptions } from '../../DetectorsList/utils/helpers' ;
42
+ import { getDetectorStateOptions , getURLQueryParams } from '../../DetectorsList/utils/helpers' ;
43
43
import { DashboardHeader } from '../Components/utils/DashboardHeader' ;
44
44
import { EmptyDashboard } from '../Components/EmptyDashboard/EmptyDashboard' ;
45
45
import {
46
46
prettifyErrorMessage ,
47
47
NO_PERMISSIONS_KEY_WORD ,
48
48
} from '../../../../server/utils/helpers' ;
49
49
import { CoreServicesContext } from '../../../components/CoreServices/CoreServices' ;
50
- import { CoreStart } from '../../../../../../src/core/public' ;
50
+ import { CoreStart , MountPoint } from '../../../../../../src/core/public' ;
51
+ import { DataSourceSelectableConfig } from '../../../../../../src/plugins/data_source_management/public' ;
52
+ import { getDataSourceManagementPlugin , getDataSourcePlugin , getNotifications , getSavedObjectsClient } from '../../../services' ;
53
+ import { RouteComponentProps } from 'react-router-dom' ;
51
54
52
- export function DashboardOverview ( ) {
55
+ interface OverviewProps extends RouteComponentProps {
56
+ setActionMenu : ( menuMount : MountPoint | undefined ) => void ;
57
+ }
58
+
59
+ interface MDSOverviewState {
60
+ queryParams : MDSQueryParams ;
61
+ selectedDataSourceId : string ;
62
+ }
63
+
64
+ export function DashboardOverview ( props : OverviewProps ) {
53
65
const core = React . useContext ( CoreServicesContext ) as CoreStart ;
54
66
const dispatch = useDispatch ( ) ;
55
67
const adState = useSelector ( ( state : AppState ) => state . ad ) ;
@@ -58,13 +70,21 @@ export function DashboardOverview() {
58
70
const errorGettingDetectors = adState . errorMessage ;
59
71
const isLoadingDetectors = adState . requesting ;
60
72
73
+ const dataSourceEnabled = getDataSourcePlugin ( ) . dataSourceEnabled ;
74
+
61
75
const [ currentDetectors , setCurrentDetectors ] = useState (
62
76
Object . values ( allDetectorList )
63
77
) ;
64
78
const [ allDetectorsSelected , setAllDetectorsSelected ] = useState ( true ) ;
65
79
const [ selectedDetectorsName , setSelectedDetectorsName ] = useState (
66
80
[ ] as string [ ]
67
81
) ;
82
+ const queryParams = getURLQueryParams ( props . location ) ;
83
+ const [ MDSOverviewState , setMDSOverviewState ] = useState < MDSOverviewState > ( {
84
+ queryParams,
85
+ selectedDataSourceId : queryParams . dataSourceId ? queryParams . dataSourceId : '' ,
86
+ } ) ;
87
+
68
88
const getDetectorOptions = ( detectorsIdMap : {
69
89
[ key : string ] : DetectorListItem ;
70
90
} ) => {
@@ -108,6 +128,20 @@ export function DashboardOverview() {
108
128
setAllDetectorStatesSelected ( isEmpty ( selectedStates ) ) ;
109
129
} ;
110
130
131
+ const handleDataSourceChange = ( [ event ] ) => {
132
+ const dataSourceId = event ?. id ;
133
+ if ( ! dataSourceId ) {
134
+ getNotifications ( ) . toasts . addDanger (
135
+ prettifyErrorMessage ( 'Unable to set data source.' )
136
+ ) ;
137
+ } else {
138
+ setMDSOverviewState ( {
139
+ queryParams : dataSourceId ,
140
+ selectedDataSourceId : dataSourceId ,
141
+ } ) ;
142
+ }
143
+ }
144
+
111
145
const opensearchState = useSelector ( ( state : AppState ) => state . opensearch ) ;
112
146
113
147
const [ selectedIndices , setSelectedIndices ] = useState ( [ ] as string [ ] ) ;
@@ -157,14 +191,24 @@ export function DashboardOverview() {
157
191
} ;
158
192
159
193
const intializeDetectors = async ( ) => {
160
- dispatch ( getDetectorList ( GET_ALL_DETECTORS_QUERY_PARAMS ) ) ;
161
- dispatch ( getIndices ( '' ) ) ;
162
- dispatch ( getAliases ( '' ) ) ;
194
+ dispatch ( getDetectorList ( getAllDetectorsQueryParamsWithDataSourceId ( MDSOverviewState . selectedDataSourceId ) ) ) ;
195
+ dispatch ( getIndices ( '' , MDSOverviewState . selectedDataSourceId ) ) ;
196
+ dispatch ( getAliases ( '' , MDSOverviewState . selectedDataSourceId ) ) ;
163
197
} ;
164
198
165
199
useEffect ( ( ) => {
166
- intializeDetectors ( ) ;
167
- } , [ ] ) ;
200
+ const { history, location } = props ;
201
+ const updatedParams = {
202
+ dataSourceId : MDSOverviewState . selectedDataSourceId ,
203
+ } ;
204
+ history . replace ( {
205
+ ...location ,
206
+ search : queryString . stringify ( updatedParams ) ,
207
+ } )
208
+ if ( dataSourceEnabled ? MDSOverviewState . selectedDataSourceId : true ) {
209
+ intializeDetectors ( ) ;
210
+ }
211
+ } , [ MDSOverviewState ] ) ;
168
212
169
213
useEffect ( ( ) => {
170
214
if ( errorGettingDetectors ) {
@@ -193,13 +237,33 @@ export function DashboardOverview() {
193
237
filterSelectedDetectors (
194
238
selectedDetectorsName ,
195
239
selectedDetectorStates ,
196
- selectedIndices
240
+ selectedIndices ,
197
241
) ;
198
242
} , [ selectedDetectorsName , selectedIndices , selectedDetectorStates ] ) ;
199
243
244
+ const DataSourceMenu =
245
+ getDataSourceManagementPlugin ( ) . ui . getDataSourceMenu < DataSourceSelectableConfig > ( ) ;
246
+ const renderDataSourceComponent = useMemo ( ( ) => {
247
+ return (
248
+ < DataSourceMenu
249
+ setMenuMountPoint = { props . setActionMenu }
250
+ componentType = { 'DataSourceSelectable' }
251
+ componentConfig = { {
252
+ fullWidth : false ,
253
+ activeOption :[ { id : MDSOverviewState . selectedDataSourceId } ] ,
254
+ savedObjects : getSavedObjectsClient ( ) ,
255
+ notifications : getNotifications ( ) ,
256
+ onSelectedDataSources : ( dataSources ) =>
257
+ handleDataSourceChange ( dataSources ) ,
258
+ } }
259
+ />
260
+ ) ;
261
+ } , [ getSavedObjectsClient ( ) , getNotifications ( ) , props . setActionMenu ] ) ;
262
+
200
263
return (
201
264
< div style = { { height : '1200px' } } >
202
265
< Fragment >
266
+ { dataSourceEnabled && renderDataSourceComponent }
203
267
< DashboardHeader hasDetectors = { totalRealtimeDetectors > 0 } />
204
268
{ isLoadingDetectors ? (
205
269
< div >
@@ -248,12 +312,15 @@ export function DashboardOverview() {
248
312
</ EuiFlexItem >
249
313
</ EuiFlexGroup >
250
314
< EuiSpacer />
251
- < AnomaliesLiveChart selectedDetectors = { currentDetectors } />
315
+ < AnomaliesLiveChart
316
+ selectedDetectors = { currentDetectors }
317
+ dataSourceId = { MDSOverviewState . selectedDataSourceId } />
252
318
< EuiSpacer />
253
319
< EuiFlexGroup justifyContent = "spaceBetween" >
254
320
< EuiFlexItem grow = { 6 } >
255
321
< AnomaliesDistributionChart
256
322
selectedDetectors = { currentDetectors }
323
+ dataSourceId = { MDSOverviewState . selectedDataSourceId }
257
324
/>
258
325
</ EuiFlexItem >
259
326
< EuiFlexItem grow = { 3 } >
0 commit comments