Add enroll agent action to config action menu (#68840)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
This commit is contained in:
Jen Huang 2020-06-15 11:45:15 -07:00 committed by GitHub
parent b57149ccb2
commit 9ddaebc371
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 31 additions and 19 deletions

View file

@ -6,22 +6,32 @@
import React, { memo, useState } from 'react'; import React, { memo, useState } from 'react';
import { FormattedMessage } from '@kbn/i18n/react'; import { FormattedMessage } from '@kbn/i18n/react';
import { EuiContextMenuItem, EuiPortal } from '@elastic/eui'; import { EuiContextMenuItem, EuiPortal } from '@elastic/eui';
import { useCapabilities, useLink } from '../../../hooks'; import { AgentConfig } from '../../../types';
import { useCapabilities } from '../../../hooks';
import { ContextMenuActions } from '../../../components'; import { ContextMenuActions } from '../../../components';
import { AgentEnrollmentFlyout } from '../../fleet/components';
import { ConfigYamlFlyout } from './config_yaml_flyout'; import { ConfigYamlFlyout } from './config_yaml_flyout';
export const AgentConfigActionMenu = memo<{ configId: string; fullButton?: boolean }>( export const AgentConfigActionMenu = memo<{ config: AgentConfig; fullButton?: boolean }>(
({ configId, fullButton = false }) => { ({ config, fullButton = false }) => {
const { getHref } = useLink();
const hasWriteCapabilities = useCapabilities().write; const hasWriteCapabilities = useCapabilities().write;
const [isYamlFlyoutOpen, setIsYamlFlyoutOpen] = useState<boolean>(false); const [isYamlFlyoutOpen, setIsYamlFlyoutOpen] = useState<boolean>(false);
const [isEnrollmentFlyoutOpen, setIsEnrollmentFlyoutOpen] = useState<boolean>(false);
return ( return (
<> <>
{isYamlFlyoutOpen ? ( {isYamlFlyoutOpen ? (
<EuiPortal> <EuiPortal>
<ConfigYamlFlyout configId={configId} onClose={() => setIsYamlFlyoutOpen(false)} /> <ConfigYamlFlyout configId={config.id} onClose={() => setIsYamlFlyoutOpen(false)} />
</EuiPortal> </EuiPortal>
) : null} ) : null}
{isEnrollmentFlyoutOpen && (
<EuiPortal>
<AgentEnrollmentFlyout
agentConfigs={[config]}
onClose={() => setIsEnrollmentFlyoutOpen(false)}
/>
</EuiPortal>
)}
<ContextMenuActions <ContextMenuActions
button={ button={
fullButton fullButton
@ -40,6 +50,17 @@ export const AgentConfigActionMenu = memo<{ configId: string; fullButton?: boole
: undefined : undefined
} }
items={[ items={[
<EuiContextMenuItem
disabled={!hasWriteCapabilities}
icon="plusInCircle"
onClick={() => setIsEnrollmentFlyoutOpen(true)}
key="enrollAgents"
>
<FormattedMessage
id="xpack.ingestManager.agentConfigActionMenu.enrollAgentActionText"
defaultMessage="Enroll agent"
/>
</EuiContextMenuItem>,
<EuiContextMenuItem <EuiContextMenuItem
icon="inspect" icon="inspect"
onClick={() => setIsYamlFlyoutOpen(!isYamlFlyoutOpen)} onClick={() => setIsYamlFlyoutOpen(!isYamlFlyoutOpen)}
@ -50,17 +71,6 @@ export const AgentConfigActionMenu = memo<{ configId: string; fullButton?: boole
defaultMessage="View config" defaultMessage="View config"
/> />
</EuiContextMenuItem>, </EuiContextMenuItem>,
<EuiContextMenuItem
disabled={!hasWriteCapabilities}
icon="plusInCircle"
href={getHref('add_datasource_from_configuration', { configId })}
key="createDatasource"
>
<FormattedMessage
id="xpack.ingestManager.agentConfigActionMenu.createDatasourceActionText"
defaultMessage="Add data source"
/>
</EuiContextMenuItem>,
]} ]}
/> />
</> </>

View file

@ -147,7 +147,9 @@ export const AgentConfigDetailsPage: React.FunctionComponent = () => {
}, },
{ isDivider: true }, { isDivider: true },
{ {
content: agentConfig && <AgentConfigActionMenu configId={configId} fullButton={true} />, content: agentConfig && (
<AgentConfigActionMenu config={agentConfig} fullButton={true} />
),
}, },
].map((item, index) => ( ].map((item, index) => (
<EuiFlexItem grow={false} key={index}> <EuiFlexItem grow={false} key={index}>

View file

@ -189,7 +189,7 @@ export const AgentConfigListPage: React.FunctionComponent<{}> = () => {
}), }),
actions: [ actions: [
{ {
render: (config: AgentConfig) => <AgentConfigActionMenu configId={config.id} />, render: (config: AgentConfig) => <AgentConfigActionMenu config={config} />,
}, },
], ],
}, },

View file

@ -112,7 +112,7 @@ export const ListLayout: React.FunctionComponent<{}> = ({ children }) => {
<EuiButton fill iconType="plusInCircle" onClick={() => setIsEnrollmentFlyoutOpen(true)}> <EuiButton fill iconType="plusInCircle" onClick={() => setIsEnrollmentFlyoutOpen(true)}>
<FormattedMessage <FormattedMessage
id="xpack.ingestManager.agentList.enrollButton" id="xpack.ingestManager.agentList.enrollButton"
defaultMessage="Enroll new agents" defaultMessage="Enroll new agent"
/> />
</EuiButton> </EuiButton>
</EuiFlexItem> </EuiFlexItem>