-
Notifications
You must be signed in to change notification settings - Fork 8.1k
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 setup mode to react app (#110670)
* Show setup mode button and setup bottom bar * Adapt setup mode in react components to work without angular * Add setup mode data update to react app * Add missing functions from setup mode * Revert setup mode changes from react components * remove some empty lines * Add setup button to monitoring toolbar * Fix types Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
- Loading branch information
1 parent
6f357e0
commit 75486ec
Showing
10 changed files
with
514 additions
and
48 deletions.
There are no files selected for viewing
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
200 changes: 200 additions & 0 deletions
200
x-pack/plugins/monitoring/public/application/setup_mode/setup_mode.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,200 @@ | ||
| /* | ||
| * 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 from 'react'; | ||
| import { render } from 'react-dom'; | ||
| import { get, includes } from 'lodash'; | ||
| import { i18n } from '@kbn/i18n'; | ||
| import { HttpStart } from 'kibana/public'; | ||
| import { KibanaContextProvider } from '../../../../../../src/plugins/kibana_react/public'; | ||
| import { Legacy } from '../../legacy_shims'; | ||
| import { SetupModeEnterButton } from '../../components/setup_mode/enter_button'; | ||
| import { SetupModeFeature } from '../../../common/enums'; | ||
| import { ISetupModeContext } from '../../components/setup_mode/setup_mode_context'; | ||
| import { State as GlobalState } from '../../application/global_state_context'; | ||
|
|
||
| function isOnPage(hash: string) { | ||
| return includes(window.location.hash, hash); | ||
| } | ||
|
|
||
| let globalState: GlobalState; | ||
| let httpService: HttpStart; | ||
|
|
||
| interface ISetupModeState { | ||
| enabled: boolean; | ||
| data: any; | ||
| callback?: (() => void) | null; | ||
| hideBottomBar: boolean; | ||
| } | ||
| const setupModeState: ISetupModeState = { | ||
| enabled: false, | ||
| data: null, | ||
| callback: null, | ||
| hideBottomBar: false, | ||
| }; | ||
|
|
||
| export const getSetupModeState = () => setupModeState; | ||
|
|
||
| export const setNewlyDiscoveredClusterUuid = (clusterUuid: string) => { | ||
| globalState.cluster_uuid = clusterUuid; | ||
| globalState.save?.(); | ||
| }; | ||
|
|
||
| export const fetchCollectionData = async (uuid?: string, fetchWithoutClusterUuid = false) => { | ||
| const clusterUuid = globalState.cluster_uuid; | ||
| const ccs = globalState.ccs; | ||
|
|
||
| let url = '../api/monitoring/v1/setup/collection'; | ||
| if (uuid) { | ||
| url += `/node/${uuid}`; | ||
| } else if (!fetchWithoutClusterUuid && clusterUuid) { | ||
| url += `/cluster/${clusterUuid}`; | ||
| } else { | ||
| url += '/cluster'; | ||
| } | ||
|
|
||
| try { | ||
| const response = await httpService.post(url, { | ||
| body: JSON.stringify({ | ||
| ccs, | ||
| }), | ||
| }); | ||
| return response; | ||
| } catch (err) { | ||
| // TODO: handle errors | ||
| throw new Error(err); | ||
| } | ||
| }; | ||
|
|
||
| const notifySetupModeDataChange = () => setupModeState.callback && setupModeState.callback(); | ||
|
|
||
| export const updateSetupModeData = async (uuid?: string, fetchWithoutClusterUuid = false) => { | ||
| const data = await fetchCollectionData(uuid, fetchWithoutClusterUuid); | ||
| setupModeState.data = data; | ||
| const hasPermissions = get(data, '_meta.hasPermissions', false); | ||
| if (!hasPermissions) { | ||
| let text: string = ''; | ||
| if (!hasPermissions) { | ||
| text = i18n.translate('xpack.monitoring.setupMode.notAvailablePermissions', { | ||
| defaultMessage: 'You do not have the necessary permissions to do this.', | ||
| }); | ||
| } | ||
|
|
||
| Legacy.shims.toastNotifications.addDanger({ | ||
| title: i18n.translate('xpack.monitoring.setupMode.notAvailableTitle', { | ||
| defaultMessage: 'Setup mode is not available', | ||
| }), | ||
| text, | ||
| }); | ||
| return toggleSetupMode(false); | ||
| } | ||
| notifySetupModeDataChange(); | ||
|
|
||
| const clusterUuid = globalState.cluster_uuid; | ||
| if (!clusterUuid) { | ||
| const liveClusterUuid: string = get(data, '_meta.liveClusterUuid'); | ||
| const migratedEsNodes = Object.values(get(data, 'elasticsearch.byUuid', {})).filter( | ||
| (node: any) => node.isPartiallyMigrated || node.isFullyMigrated | ||
| ); | ||
| if (liveClusterUuid && migratedEsNodes.length > 0) { | ||
| setNewlyDiscoveredClusterUuid(liveClusterUuid); | ||
| } | ||
| } | ||
| }; | ||
|
|
||
| export const hideBottomBar = () => { | ||
| setupModeState.hideBottomBar = true; | ||
| notifySetupModeDataChange(); | ||
| }; | ||
| export const showBottomBar = () => { | ||
| setupModeState.hideBottomBar = false; | ||
| notifySetupModeDataChange(); | ||
| }; | ||
|
|
||
| export const disableElasticsearchInternalCollection = async () => { | ||
| const clusterUuid = globalState.cluster_uuid; | ||
| const url = `../api/monitoring/v1/setup/collection/${clusterUuid}/disable_internal_collection`; | ||
| try { | ||
| const response = await httpService.post(url); | ||
| return response; | ||
| } catch (err) { | ||
| // TODO: handle errors | ||
| throw new Error(err); | ||
| } | ||
| }; | ||
|
|
||
| export const toggleSetupMode = (inSetupMode: boolean) => { | ||
| setupModeState.enabled = inSetupMode; | ||
| globalState.inSetupMode = inSetupMode; | ||
| globalState.save?.(); | ||
| setSetupModeMenuItem(); | ||
| notifySetupModeDataChange(); | ||
|
|
||
| if (inSetupMode) { | ||
| // Intentionally do not await this so we don't block UI operations | ||
| updateSetupModeData(); | ||
| } | ||
| }; | ||
|
|
||
| export const setSetupModeMenuItem = () => { | ||
| if (isOnPage('no-data')) { | ||
| return; | ||
| } | ||
|
|
||
| const enabled = !globalState.inSetupMode; | ||
| const I18nContext = Legacy.shims.I18nContext; | ||
|
|
||
| render( | ||
| <KibanaContextProvider services={Legacy.shims.kibanaServices}> | ||
| <I18nContext> | ||
| <SetupModeEnterButton enabled={enabled} toggleSetupMode={toggleSetupMode} /> | ||
| </I18nContext> | ||
| </KibanaContextProvider>, | ||
| document.getElementById('setupModeNav') | ||
| ); | ||
| }; | ||
|
|
||
| export const initSetupModeState = async ( | ||
| state: GlobalState, | ||
| http: HttpStart, | ||
| callback?: () => void | ||
| ) => { | ||
| globalState = state; | ||
| httpService = http; | ||
| if (callback) { | ||
| setupModeState.callback = callback; | ||
| } | ||
|
|
||
| if (globalState.inSetupMode) { | ||
| toggleSetupMode(true); | ||
| } | ||
| }; | ||
|
|
||
| export const isInSetupMode = (context?: ISetupModeContext) => { | ||
| if (context?.setupModeSupported === false) { | ||
| return false; | ||
| } | ||
| if (setupModeState.enabled) { | ||
| return true; | ||
| } | ||
|
|
||
| return globalState.inSetupMode; | ||
| }; | ||
|
|
||
| export const isSetupModeFeatureEnabled = (feature: SetupModeFeature) => { | ||
| if (!setupModeState.enabled) { | ||
| return false; | ||
| } | ||
|
|
||
| if (feature === SetupModeFeature.MetricbeatMigration) { | ||
| if (Legacy.shims.isCloud) { | ||
| return false; | ||
| } | ||
| } | ||
|
|
||
| return true; | ||
| }; |
8 changes: 8 additions & 0 deletions
8
x-pack/plugins/monitoring/public/application/setup_mode/setup_mode_renderer.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,8 @@ | ||
| /* | ||
| * 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 SetupModeRenderer: FunctionComponent<Props>; |
Oops, something went wrong.