99 * GitHub history for details.
1010 */
1111
12- import React , { Fragment , useState , useEffect } from 'react' ;
12+ import React , { Fragment , useState , useEffect , useMemo } from 'react' ;
1313import { AnomaliesLiveChart } from '../Components/AnomaliesLiveChart' ;
1414import { AnomaliesDistributionChart } from '../Components/AnomaliesDistribution' ;
15+ import queryString from 'querystring' ;
1516
1617import { useDispatch , useSelector } from 'react-redux' ;
1718import { get , isEmpty , cloneDeep } from 'lodash' ;
@@ -29,27 +30,38 @@ import {
2930} from '@elastic/eui' ;
3031import { AnomalousDetectorsList } from '../Components/AnomalousDetectorsList' ;
3132import {
32- GET_ALL_DETECTORS_QUERY_PARAMS ,
3333 ALL_DETECTORS_MESSAGE ,
3434 ALL_DETECTOR_STATES_MESSAGE ,
3535 ALL_INDICES_MESSAGE ,
3636} from '../utils/constants' ;
3737import { 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' ;
4040import { BREADCRUMBS } from '../../../utils/constants' ;
4141import { DETECTOR_STATE } from '../../../../server/utils/constants' ;
42- import { getDetectorStateOptions } from '../../DetectorsList/utils/helpers' ;
42+ import { getDetectorStateOptions , getURLQueryParams } from '../../DetectorsList/utils/helpers' ;
4343import { DashboardHeader } from '../Components/utils/DashboardHeader' ;
4444import { EmptyDashboard } from '../Components/EmptyDashboard/EmptyDashboard' ;
4545import {
4646 prettifyErrorMessage ,
4747 NO_PERMISSIONS_KEY_WORD ,
4848} from '../../../../server/utils/helpers' ;
4949import { 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' ;
5154
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 ) {
5365 const core = React . useContext ( CoreServicesContext ) as CoreStart ;
5466 const dispatch = useDispatch ( ) ;
5567 const adState = useSelector ( ( state : AppState ) => state . ad ) ;
@@ -58,13 +70,21 @@ export function DashboardOverview() {
5870 const errorGettingDetectors = adState . errorMessage ;
5971 const isLoadingDetectors = adState . requesting ;
6072
73+ const dataSourceEnabled = getDataSourcePlugin ( ) . dataSourceEnabled ;
74+
6175 const [ currentDetectors , setCurrentDetectors ] = useState (
6276 Object . values ( allDetectorList )
6377 ) ;
6478 const [ allDetectorsSelected , setAllDetectorsSelected ] = useState ( true ) ;
6579 const [ selectedDetectorsName , setSelectedDetectorsName ] = useState (
6680 [ ] as string [ ]
6781 ) ;
82+ const queryParams = getURLQueryParams ( props . location ) ;
83+ const [ MDSOverviewState , setMDSOverviewState ] = useState < MDSOverviewState > ( {
84+ queryParams,
85+ selectedDataSourceId : queryParams . dataSourceId ? queryParams . dataSourceId : '' ,
86+ } ) ;
87+
6888 const getDetectorOptions = ( detectorsIdMap : {
6989 [ key : string ] : DetectorListItem ;
7090 } ) => {
@@ -108,6 +128,20 @@ export function DashboardOverview() {
108128 setAllDetectorStatesSelected ( isEmpty ( selectedStates ) ) ;
109129 } ;
110130
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+
111145 const opensearchState = useSelector ( ( state : AppState ) => state . opensearch ) ;
112146
113147 const [ selectedIndices , setSelectedIndices ] = useState ( [ ] as string [ ] ) ;
@@ -157,14 +191,24 @@ export function DashboardOverview() {
157191 } ;
158192
159193 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 ) ) ;
163197 } ;
164198
165199 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 ] ) ;
168212
169213 useEffect ( ( ) => {
170214 if ( errorGettingDetectors ) {
@@ -193,13 +237,33 @@ export function DashboardOverview() {
193237 filterSelectedDetectors (
194238 selectedDetectorsName ,
195239 selectedDetectorStates ,
196- selectedIndices
240+ selectedIndices ,
197241 ) ;
198242 } , [ selectedDetectorsName , selectedIndices , selectedDetectorStates ] ) ;
199243
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+
200263 return (
201264 < div style = { { height : '1200px' } } >
202265 < Fragment >
266+ { dataSourceEnabled && renderDataSourceComponent }
203267 < DashboardHeader hasDetectors = { totalRealtimeDetectors > 0 } />
204268 { isLoadingDetectors ? (
205269 < div >
@@ -248,12 +312,15 @@ export function DashboardOverview() {
248312 </ EuiFlexItem >
249313 </ EuiFlexGroup >
250314 < EuiSpacer />
251- < AnomaliesLiveChart selectedDetectors = { currentDetectors } />
315+ < AnomaliesLiveChart
316+ selectedDetectors = { currentDetectors }
317+ dataSourceId = { MDSOverviewState . selectedDataSourceId } />
252318 < EuiSpacer />
253319 < EuiFlexGroup justifyContent = "spaceBetween" >
254320 < EuiFlexItem grow = { 6 } >
255321 < AnomaliesDistributionChart
256322 selectedDetectors = { currentDetectors }
323+ dataSourceId = { MDSOverviewState . selectedDataSourceId }
257324 />
258325 </ EuiFlexItem >
259326 < EuiFlexItem grow = { 3 } >
0 commit comments