Skip to content

Commit

Permalink
[Endpoint] Add Endpoint empty states for onboarding (#69626) (#70133)
Browse files Browse the repository at this point in the history 
Co-authored-by: Elastic Machine <[email protected]>
  • Loading branch information
@kevinlog @elasticmachine
kevinlog and elasticmachine authored Jun 29, 2020
1 parent c870b85 commit 2c48a90
Show file tree
Hide file tree
Showing 14 changed files with 783 additions and 229 deletions.
6 changes: 4 additions & 2 deletions ...k/plugins/ingest_manager/public/applications/ingest_manager/hooks/use_intra_app_state.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -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;
Expand Down
184 changes: 102 additions & 82 deletions ...ager/public/applications/ingest_manager/sections/agent_config/components/actions_menu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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>
);
}
);
27 changes: 23 additions & 4 deletions ...t_manager/public/applications/ingest_manager/sections/agent_config/details_page/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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;
Expand All @@ -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(
() => (
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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
}
/>
),
},
Expand Down
12 changes: 11 additions & 1 deletion .../plugins/ingest_manager/public/applications/ingest_manager/types/intra_app_route_state.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Loading

0 comments on commit 2c48a90

Please sign in to comment.