[7.x] [Stack Monitoring] Add setup mode to react app (#110670)

x-pack/plugins/monitoring/public/application/global_state_context.tsx

@@ -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);

x-pack/plugins/monitoring/public/application/pages/cluster/overview_page.tsx

@@ -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
@@ -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 />

x-pack/plugins/monitoring/public/application/pages/page_template.tsx

@@ -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';
@@ -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) => {

x-pack/plugins/monitoring/public/application/setup_mode/setup_mode.tsx

@@ -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;
+};

x-pack/plugins/monitoring/public/application/setup_mode/setup_mode_renderer.d.ts

@@ -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>;