[Endpoint] Add Endpoint empty states for onboarding

x-pack/plugins/ingest_manager/public/applications/ingest_manager/hooks/use_intra_app_state.tsx

@@ -28,10 +28,11 @@ export const IntraAppStateProvider = memo<{
 }>(({ kibanaScopedHistory, children }) => {
  const internalAppToAppState = useMemo<IntraAppState>(() => {
  return {
- forRoute: kibanaScopedHistory.location.hash.substr(1),
+ forRoute: new URL(`${kibanaScopedHistory.location.hash.substr(1)}`, 'http://localhost')
+ .pathname,
  routeState: kibanaScopedHistory.location.state as AnyIntraAppRouteState,
  };
- }, [kibanaScopedHistory.location.hash, kibanaScopedHistory.location.state]);
+ }, [kibanaScopedHistory.location.state, kibanaScopedHistory.location.hash]);
  return (
  <IntraAppStateContext.Provider value={internalAppToAppState}>
  {children}
@@ -57,6 +58,7 @@ export function useIntraAppState<S = AnyIntraAppRouteState>():
  // once so that it does not impact navigation to the page from within the
  // ingest app. side affect is that the browser back button would not work
  // consistently either.
+
  if (location.pathname === intraAppState.forRoute && !wasHandled.has(intraAppState)) {
  wasHandled.add(intraAppState);
  return intraAppState.routeState as S;

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/components/actions_menu.tsx

@@ -3,7 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import React, { memo, useState } from 'react';
+import React, { memo, useState, useMemo } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiContextMenuItem, EuiPortal } from '@elastic/eui';
 import { AgentConfig } from '../../../types';
@@ -17,86 +17,106 @@ export const AgentConfigActionMenu = memo<{
  config: AgentConfig;
  onCopySuccess?: (newAgentConfig: AgentConfig) => void;
  fullButton?: boolean;
-}>(({ config, onCopySuccess, fullButton = false }) => {
- const hasWriteCapabilities = useCapabilities().write;
- const [isYamlFlyoutOpen, setIsYamlFlyoutOpen] = useState<boolean>(false);
- const [isEnrollmentFlyoutOpen, setIsEnrollmentFlyoutOpen] = useState<boolean>(false);
+ enrollmentFlyoutOpenByDefault?: boolean;
+ onCancelEnrollment?: () => void;
+}>(
+ ({
+ config,
+ onCopySuccess,
+ fullButton = false,
+ enrollmentFlyoutOpenByDefault = false,
+ onCancelEnrollment,
+ }) => {
+ const hasWriteCapabilities = useCapabilities().write;
+ const [isYamlFlyoutOpen, setIsYamlFlyoutOpen] = useState<boolean>(false);
+ const [isEnrollmentFlyoutOpen, setIsEnrollmentFlyoutOpen] = useState<boolean>(
+ enrollmentFlyoutOpenByDefault
+ );
 
- return (
- <AgentConfigCopyProvider>
- {(copyAgentConfigPrompt) => {
- return (
- <>
- {isYamlFlyoutOpen ? (
- <EuiPortal>
- <ConfigYamlFlyout configId={config.id} onClose={() => setIsYamlFlyoutOpen(false)} />
- </EuiPortal>
- ) : null}
- {isEnrollmentFlyoutOpen && (
- <EuiPortal>
- <AgentEnrollmentFlyout
- agentConfigs={[config]}
- onClose={() => setIsEnrollmentFlyoutOpen(false)}
- />
- </EuiPortal>
- )}
- <ContextMenuActions
- button={
- fullButton
- ? {
- props: {
- iconType: 'arrowDown',
- iconSide: 'right',
- },
- children: (
- <FormattedMessage
- id="xpack.ingestManager.agentConfigActionMenu.buttonText"
- defaultMessage="Actions"
- />
- ),
- }
- : undefined
- }
- items={[
- <EuiContextMenuItem
- disabled={!hasWriteCapabilities}
- icon="plusInCircle"
- onClick={() => setIsEnrollmentFlyoutOpen(true)}
- key="enrollAgents"
- >
- <FormattedMessage
- id="xpack.ingestManager.agentConfigActionMenu.enrollAgentActionText"
- defaultMessage="Enroll agent"
- />
- </EuiContextMenuItem>,
- <EuiContextMenuItem
- icon="inspect"
- onClick={() => setIsYamlFlyoutOpen(!isYamlFlyoutOpen)}
- key="viewConfig"
- >
- <FormattedMessage
- id="xpack.ingestManager.agentConfigActionMenu.viewConfigText"
- defaultMessage="View config"
- />
- </EuiContextMenuItem>,
- <EuiContextMenuItem
- disabled={!hasWriteCapabilities}
- icon="copy"
- onClick={() => {
- copyAgentConfigPrompt(config, onCopySuccess);
- }}
- key="copyConfig"
- >
- <FormattedMessage
- id="xpack.ingestManager.agentConfigActionMenu.copyConfigActionText"
- defaultMessage="Copy config"
+ const onClose = useMemo(() => {
+ if (onCancelEnrollment) {
+ return onCancelEnrollment;
+ } else {
+ return () => setIsEnrollmentFlyoutOpen(false);
+ }
+ }, [onCancelEnrollment, setIsEnrollmentFlyoutOpen]);
+
+ return (
+ <AgentConfigCopyProvider>
+ {(copyAgentConfigPrompt) => {
+ return (
+ <>
+ {isYamlFlyoutOpen ? (
+ <EuiPortal>
+ <ConfigYamlFlyout
+ configId={config.id}
+ onClose={() => setIsYamlFlyoutOpen(false)}
  />
- </EuiContextMenuItem>,
- ]}
- />
- </>
- );
- }}
- </AgentConfigCopyProvider>
- );
-});
+ </EuiPortal>
+ ) : null}
+ {isEnrollmentFlyoutOpen && (
+ <EuiPortal>
+ <AgentEnrollmentFlyout agentConfigs={[config]} onClose={onClose} />
+ </EuiPortal>
+ )}
+ <ContextMenuActions
+ button={
+ fullButton
+ ? {
+ props: {
+ iconType: 'arrowDown',
+ iconSide: 'right',
+ },
+ children: (
+ <FormattedMessage
+ id="xpack.ingestManager.agentConfigActionMenu.buttonText"
+ defaultMessage="Actions"
+ />
+ ),
+ }
+ : undefined
+ }
+ items={[
+ <EuiContextMenuItem
+ disabled={!hasWriteCapabilities}
+ icon="plusInCircle"
+ onClick={() => setIsEnrollmentFlyoutOpen(true)}
+ key="enrollAgents"
+ >
+ <FormattedMessage
+ id="xpack.ingestManager.agentConfigActionMenu.enrollAgentActionText"
+ defaultMessage="Enroll agent"
+ />
+ </EuiContextMenuItem>,
+ <EuiContextMenuItem
+ icon="inspect"
+ onClick={() => setIsYamlFlyoutOpen(!isYamlFlyoutOpen)}
+ key="viewConfig"
+ >
+ <FormattedMessage
+ id="xpack.ingestManager.agentConfigActionMenu.viewConfigText"
+ defaultMessage="View config"
+ />
+ </EuiContextMenuItem>,
+ <EuiContextMenuItem
+ disabled={!hasWriteCapabilities}
+ icon="copy"
+ onClick={() => {
+ copyAgentConfigPrompt(config, onCopySuccess);
+ }}
+ key="copyConfig"
+ >
+ <FormattedMessage
+ id="xpack.ingestManager.agentConfigActionMenu.copyConfigActionText"
+ defaultMessage="Copy config"
+ />
+ </EuiContextMenuItem>,
+ ]}
+ />
+ </>
+ );
+ }}
+ </AgentConfigCopyProvider>
+ );
+ }
+);

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/details_page/index.tsx

@@ -3,8 +3,8 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import React, { useMemo, useState } from 'react';
-import { Redirect, useRouteMatch, Switch, Route, useHistory } from 'react-router-dom';
+import React, { useMemo, useState, useCallback } from 'react';
+import { Redirect, useRouteMatch, Switch, Route, useHistory, useLocation } from 'react-router-dom';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage, FormattedDate } from '@kbn/i18n/react';
 import {
@@ -21,14 +21,15 @@ import {
 } from '@elastic/eui';
 import { Props as EuiTabProps } from '@elastic/eui/src/components/tabs/tab';
 import styled from 'styled-components';
-import { AgentConfig } from '../../../types';
+import { AgentConfig, AgentConfigDetailsDeployAgentAction } from '../../../types';
 import { PAGE_ROUTING_PATHS } from '../../../constants';
-import { useGetOneAgentConfig, useLink, useBreadcrumbs } from '../../../hooks';
+import { useGetOneAgentConfig, useLink, useBreadcrumbs, useCore } from '../../../hooks';
 import { Loading } from '../../../components';
 import { WithHeaderLayout } from '../../../layouts';
 import { ConfigRefreshContext, useGetAgentStatus, AgentStatusRefreshContext } from './hooks';
 import { LinkedAgentCount, AgentConfigActionMenu } from '../components';
 import { ConfigDatasourcesView, ConfigSettingsView } from './components';
+import { useIntraAppState } from '../../../hooks/use_intra_app_state';
 
 const Divider = styled.div`
  width: 0;
@@ -48,7 +49,13 @@ export const AgentConfigDetailsPage: React.FunctionComponent = () => {
  const [redirectToAgentConfigList] = useState<boolean>(false);
  const agentStatusRequest = useGetAgentStatus(configId);
  const { refreshAgentStatus } = agentStatusRequest;
+ const {
+ application: { navigateToApp },
+ } = useCore();
+ const routeState = useIntraAppState<AgentConfigDetailsDeployAgentAction>();
  const agentStatus = agentStatusRequest.data?.results;
+ const queryParams = new URLSearchParams(useLocation().search);
+ const openEnrollmentFlyoutOpenByDefault = queryParams.get('openEnrollmentFlyout') === 'true';
 
  const headerLeftContent = useMemo(
  () => (
@@ -95,6 +102,12 @@ export const AgentConfigDetailsPage: React.FunctionComponent = () => {
  [getHref, agentConfig, configId]
  );
 
+ const enrollmentCancelClickHandler = useCallback(() => {
+ if (routeState && routeState.onDoneNavigateTo) {
+ navigateToApp(routeState.onDoneNavigateTo[0], routeState.onDoneNavigateTo[1]);
+ }
+ }, [routeState, navigateToApp]);
+
  const headerRightContent = useMemo(
  () => (
  <EuiFlexGroup justifyContent={'flexEnd'} direction="row">
@@ -155,6 +168,12 @@ export const AgentConfigDetailsPage: React.FunctionComponent = () => {
  onCopySuccess={(newAgentConfig: AgentConfig) => {
  history.push(getPath('configuration_details', { configId: newAgentConfig.id }));
  }}
+ enrollmentFlyoutOpenByDefault={openEnrollmentFlyoutOpenByDefault}
+ onCancelEnrollment={
+ routeState && routeState.onDoneNavigateTo
+ ? enrollmentCancelClickHandler
+ : undefined
+ }
  />
  ),
  },

x-pack/plugins/ingest_manager/public/applications/ingest_manager/types/intra_app_route_state.ts

@@ -21,7 +21,17 @@ export interface CreateDatasourceRouteState {
  onCancelUrl?: string;
 }
 
+/**
+ * Supported routing state for the agent config details page routes with deploy agents action
+ */
+export interface AgentConfigDetailsDeployAgentAction {
+ /** On done, navigate to the given app */
+ onDoneNavigateTo?: Parameters<ApplicationStart['navigateToApp']>;
+}
+
 /**
  * All possible Route states.
  */
-export type AnyIntraAppRouteState = CreateDatasourceRouteState;
+export type AnyIntraAppRouteState =
+ | CreateDatasourceRouteState
+ | AgentConfigDetailsDeployAgentAction;