Add enroll agent action to config action menu (#68840)
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
This commit is contained in:
parent
b57149ccb2
commit
9ddaebc371
4 changed files with 31 additions and 19 deletions
|
@ -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>,
|
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
|
|
|
@ -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}>
|
||||||
|
|
|
@ -189,7 +189,7 @@ export const AgentConfigListPage: React.FunctionComponent<{}> = () => {
|
||||||
}),
|
}),
|
||||||
actions: [
|
actions: [
|
||||||
{
|
{
|
||||||
render: (config: AgentConfig) => <AgentConfigActionMenu configId={config.id} />,
|
render: (config: AgentConfig) => <AgentConfigActionMenu config={config} />,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue