forked from elastic/kibana
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Stack monitoring] Add global state context and routeInit component (e…
…lastic#109790) * Add global state to stack monitoring react app * Add type for state * Add some todos * Add route_init migration Co-authored-by: Kibana Machine <[email protected]>
- Loading branch information
1 parent
2aaad55
commit 4f68e4f
Showing
9 changed files
with
249 additions
and
27 deletions.
There are no files selected for viewing
66 changes: 66 additions & 0 deletions
66
x-pack/plugins/monitoring/public/application/global_state_context.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| /* | ||
| * 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, { createContext } from 'react'; | ||
| import { GlobalState } from '../url_state'; | ||
| import { MonitoringStartPluginDependencies } from '../types'; | ||
|
|
||
| interface GlobalStateProviderProps { | ||
| query: MonitoringStartPluginDependencies['data']['query']; | ||
| toasts: MonitoringStartPluginDependencies['core']['notifications']['toasts']; | ||
| children: React.ReactNode; | ||
| } | ||
|
|
||
| interface State { | ||
| cluster_uuid?: string; | ||
| } | ||
|
|
||
| export const GlobalStateContext = createContext({} as State); | ||
|
|
||
| export const GlobalStateProvider = ({ query, toasts, children }: GlobalStateProviderProps) => { | ||
| // TODO: remove fakeAngularRootScope and fakeAngularLocation when angular is removed | ||
| const fakeAngularRootScope: Partial<ng.IRootScopeService> = { | ||
| $on: ( | ||
| name: string, | ||
| listener: (event: ng.IAngularEvent, ...args: any[]) => any | ||
| ): (() => void) => () => {}, | ||
| $applyAsync: () => {}, | ||
| }; | ||
|
|
||
| const fakeAngularLocation: Partial<ng.ILocationService> = { | ||
| search: () => { | ||
| return {} as any; | ||
| }, | ||
| replace: () => { | ||
| return {} as any; | ||
| }, | ||
| }; | ||
|
|
||
| const localState: { [key: string]: unknown } = {}; | ||
| const state = new GlobalState( | ||
| query, | ||
| toasts, | ||
| fakeAngularRootScope, | ||
| fakeAngularLocation, | ||
| localState | ||
| ); | ||
|
|
||
| const initialState: any = state.getState(); | ||
| for (const key in initialState) { | ||
| if (!initialState.hasOwnProperty(key)) { | ||
| continue; | ||
| } | ||
| localState[key] = initialState[key]; | ||
| } | ||
|
|
||
| localState.save = () => { | ||
| const newState = { ...localState }; | ||
| delete newState.save; | ||
| state.setState(newState); | ||
| }; | ||
|
|
||
| return <GlobalStateContext.Provider value={localState}>{children}</GlobalStateContext.Provider>; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
38 changes: 38 additions & 0 deletions
38
x-pack/plugins/monitoring/public/application/preserve_query_history.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| /* | ||
| * 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 { History, createHashHistory, LocationDescriptor, LocationDescriptorObject } from 'history'; | ||
|
|
||
| function preserveQueryParameters( | ||
| history: History, | ||
| location: LocationDescriptorObject | ||
| ): LocationDescriptorObject { | ||
| location.search = history.location.search; | ||
| return location; | ||
| } | ||
|
|
||
| function createLocationDescriptorObject( | ||
| location: LocationDescriptor, | ||
| state?: History.LocationState | ||
| ): LocationDescriptorObject { | ||
| return typeof location === 'string' ? { pathname: location, state } : location; | ||
| } | ||
|
|
||
| export function createPreserveQueryHistory() { | ||
| const history = createHashHistory({ hashType: 'slash' }); | ||
| const oldPush = history.push; | ||
| const oldReplace = history.replace; | ||
| history.push = (path: LocationDescriptor, state?: History.LocationState) => | ||
| oldPush.apply(history, [ | ||
| preserveQueryParameters(history, createLocationDescriptorObject(path, state)), | ||
| ]); | ||
| history.replace = (path: LocationDescriptor, state?: History.LocationState) => | ||
| oldReplace.apply(history, [ | ||
| preserveQueryParameters(history, createLocationDescriptorObject(path, state)), | ||
| ]); | ||
| return history; | ||
| } |
71 changes: 71 additions & 0 deletions
71
x-pack/plugins/monitoring/public/application/route_init.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| /* | ||
| * 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, { useContext } from 'react'; | ||
| import { Route, Redirect, useLocation } from 'react-router-dom'; | ||
| import { useClusters } from './hooks/use_clusters'; | ||
| import { GlobalStateContext } from './global_state_context'; | ||
| import { getClusterFromClusters } from '../lib/get_cluster_from_clusters'; | ||
|
|
||
| interface RouteInitProps { | ||
| path: string; | ||
| component: React.ComponentType; | ||
| codePaths: string[]; | ||
| fetchAllClusters: boolean; | ||
| unsetGlobalState?: boolean; | ||
| } | ||
|
|
||
| export const RouteInit: React.FC<RouteInitProps> = ({ | ||
| path, | ||
| component, | ||
| codePaths, | ||
| fetchAllClusters, | ||
| unsetGlobalState = false, | ||
| }) => { | ||
| const globalState = useContext(GlobalStateContext); | ||
| const clusterUuid = fetchAllClusters ? null : globalState.cluster_uuid; | ||
| const location = useLocation(); | ||
|
|
||
| const { clusters, loaded } = useClusters(clusterUuid, undefined, codePaths); | ||
|
|
||
| // TODO: we will need this when setup mode is migrated | ||
| // const inSetupMode = isInSetupMode(); | ||
|
|
||
| const cluster = getClusterFromClusters(clusters, globalState, unsetGlobalState); | ||
|
|
||
| // TODO: check for setupMode too when the setup mode is migrated | ||
| if (loaded && !cluster) { | ||
| return <Redirect to="/no-data" />; | ||
| } | ||
|
|
||
| if (loaded && cluster) { | ||
| // check if we need to redirect because of license problems | ||
| if ( | ||
| location.pathname !== 'license' && | ||
| location.pathname !== 'home' && | ||
| isExpired(cluster.license) | ||
| ) { | ||
| return <Redirect to="/license" />; | ||
| } | ||
|
|
||
| // check if we need to redirect because of attempt at unsupported multi-cluster monitoring | ||
| const clusterSupported = cluster.isSupported || clusters.length === 1; | ||
| if (location.pathname !== 'home' && !clusterSupported) { | ||
| return <Redirect to="/home" />; | ||
| } | ||
| } | ||
|
|
||
| return loaded ? <Route path={path} component={component} /> : null; | ||
| }; | ||
|
|
||
| const isExpired = (license: any): boolean => { | ||
| const { expiry_date_in_millis: expiryDateInMillis } = license; | ||
|
|
||
| if (expiryDateInMillis !== undefined) { | ||
| return new Date().getTime() >= expiryDateInMillis; | ||
| } | ||
| return false; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
12 changes: 12 additions & 0 deletions
12
x-pack/plugins/monitoring/public/lib/get_cluster_from_clusters.d.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| /* | ||
| * 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. | ||
| */ | ||
|
|
||
| export const getClusterFromClusters: ( | ||
| clusters: any, | ||
| globalState: State, | ||
| unsetGlobalState: boolean | ||
| ) => any; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters