Skip to content

Commit

Permalink
[Stack Monitoring] Add setup mode to react app (#110670) (#111395)
Browse files Browse the repository at this point in the history
* 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>

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
  • Loading branch information
estermv and kibanamachine authored Sep 7, 2021
1 parent 43d55d9 commit 32abdc7
Show file tree
Hide file tree
Showing 10 changed files with 514 additions and 48 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,11 @@ interface GlobalStateProviderProps {
toasts: MonitoringStartPluginDependencies['core']['notifications']['toasts'];
}

interface State {
export interface State {
cluster_uuid?: string;
ccs?: any;
inSetupMode?: boolean;
save?: () => void;
}

export const GlobalStateContext = createContext({} as State);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,15 @@ import { TabMenuItem } from '../page_template';
import { PageLoading } from '../../../components';
import { Overview } from '../../../components/cluster/overview';
import { ExternalConfigContext } from '../../external_config_context';
import { SetupModeRenderer } from '../../setup_mode/setup_mode_renderer';
import { SetupModeContext } from '../../../components/setup_mode/setup_mode_context';

const CODE_PATHS = [CODE_PATH_ALL];
interface SetupModeProps {
setupMode: any;
flyoutComponent: any;
bottomBarComponent: any;
}

export const ClusterOverview: React.FC<{}> = () => {
// TODO: check how many requests with useClusters
Expand Down Expand Up @@ -49,11 +56,20 @@ export const ClusterOverview: React.FC<{}> = () => {
return (
<PageTemplate title={title} pageTitle={pageTitle} tabs={tabs}>
{loaded ? (
<Overview
cluster={clusters[0]}
alerts={[]}
setupMode={{}}
showLicenseExpiration={externalConfig.showLicenseExpiration}
<SetupModeRenderer
render={({ setupMode, flyoutComponent, bottomBarComponent }: SetupModeProps) => (
<SetupModeContext.Provider value={{ setupModeSupported: true }}>
{flyoutComponent}
<Overview
cluster={clusters[0]}
alerts={[]}
setupMode={setupMode}
showLicenseExpiration={externalConfig.showLicenseExpiration}
/>
{/* <EnableAlertsModal alerts={this.alerts} /> */}
{bottomBarComponent}
</SetupModeContext.Provider>
)}
/>
) : (
<PageLoading />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
* 2.0.
*/

import { EuiFlexGroup, EuiFlexItem, EuiTab, EuiTabs, EuiTitle } from '@elastic/eui';
import { EuiTab, EuiTabs } from '@elastic/eui';
import React from 'react';
import { useTitle } from '../hooks/use_title';
import { MonitoringToolbar } from '../../components/shared/toolbar';
Expand All @@ -29,34 +29,7 @@ export const PageTemplate: React.FC<PageTemplateProps> = ({ title, pageTitle, ta

return (
<div className="app-container">
<EuiFlexGroup gutterSize="l" justifyContent="spaceBetween" responsive>
<EuiFlexItem>
<EuiFlexGroup
gutterSize="none"
justifyContent="spaceEvenly"
direction="column"
responsive
>
<EuiFlexItem>
<div id="setupModeNav">{/* HERE GOES THE SETUP BUTTON */}</div>
</EuiFlexItem>
<EuiFlexItem className="monTopNavSecondItem">
{pageTitle && (
<div data-test-subj="monitoringPageTitle">
<EuiTitle size="xs">
<h1>{pageTitle}</h1>
</EuiTitle>
</div>
)}
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>

<EuiFlexItem>
<MonitoringToolbar />
</EuiFlexItem>
</EuiFlexGroup>

<MonitoringToolbar pageTitle={pageTitle} />
{tabs && (
<EuiTabs>
{tabs.map((item, idx) => {
Expand Down
200 changes: 200 additions & 0 deletions x-pack/plugins/monitoring/public/application/setup_mode/setup_mode.tsx
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;
};
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>;
Loading

0 comments on commit 32abdc7

Please sign in to comment.