From b16b10dc2af66c37de357c6e5b67ed3001d3067a Mon Sep 17 00:00:00 2001 From: John Schulz Date: Mon, 12 Apr 2021 09:43:06 -0400 Subject: [PATCH] [Fleet] UI changes on hosted policy detail view (#96337) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary Fixes several items from https://github.com/elastic/observability-design/issues/32 - Agent policy detail page - [x] Integrations tab: 1a) Show a lock icon with hover tooltip next to host policy name - [x] Integrations tab: 7a) hide the "Add integration" button - [x] Integrations tab: 7b) hide the "delete integration" action which appears in the [...] actions menu - [x] Settings tab: 5a) Do not show the “Delete policy” section for Hosted agent policies - [x] Settings tab: 5b) Disable the "name" and "description" inputs - Agents detail page - [x] 2b) remove the "actions" button in the page header (top right) ## Screenshots
Agent policy detail page - Integrations tab

Non-hosted policy

Screen Shot 2021-04-08 at 1 30 24 PM

Hosted policy

Screen Shot 2021-04-08 at 1 29 26 PM
Agent policy detail page - Settings tab

non-hosted policy: items available

Screen Shot 2021-04-07 at 1 24 39 PM

Hosted policy: items hidden / disabled

Screen Shot 2021-04-07 at 1 24 23 PM
Agents detail page: 2b) remove the "actions" button in the page header (top right)

shown on non-hosted policy

Screen Shot 2021-04-08 at 9 55 06 AM

hidden on hosted policy

Screen Shot 2021-04-08 at 9 55 31 AM
### Checklist - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/master/packages/kbn-i18n/README.md) Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> --- .../components/agent_policy_form.tsx | 3 +- .../package_policies_table.tsx | 112 +++++++++--------- .../agent_policy/details_page/index.tsx | 51 +++++--- .../agents/agent_details_page/index.tsx | 23 ++-- .../sections/agents/agent_list_page/index.tsx | 5 +- 5 files changed, 112 insertions(+), 82 deletions(-) diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/agent_policy_form.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/agent_policy_form.tsx index 238cba217da8e..a1ac30995f722 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/agent_policy_form.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/agent_policy_form.tsx @@ -144,6 +144,7 @@ export const AgentPolicyForm: React.FunctionComponent = ({ isInvalid={Boolean(touchedFields[name] && validation[name])} > updateAgentPolicy({ [name]: e.target.value })} @@ -283,7 +284,7 @@ export const AgentPolicyForm: React.FunctionComponent = ({ }} /> - {isEditing && 'id' in agentPolicy ? ( + {isEditing && 'id' in agentPolicy && agentPolicy.is_managed !== true ? ( diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/components/package_policies/package_policies_table.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/components/package_policies/package_policies_table.tsx index db88de0ba720b..9e23fc775a213 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/components/package_policies/package_policies_table.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/components/package_policies/package_policies_table.tsx @@ -167,42 +167,45 @@ export const PackagePoliciesTable: React.FunctionComponent = ({ }), actions: [ { - render: (packagePolicy: InMemoryPackagePolicy) => ( - {}} - // key="packagePolicyView" - // > - // - // , - - - , - // FIXME: implement Copy package policy action - // {}} key="packagePolicyCopy"> - // - // , + render: (packagePolicy: InMemoryPackagePolicy) => { + const menuItems = [ + // FIXME: implement View package policy action + // {}} + // key="packagePolicyView" + // > + // + // , + + + , + // FIXME: implement Copy package policy action + // {}} key="packagePolicyCopy"> + // + // , + ]; + + if (!agentPolicy.is_managed) { + menuItems.push( {(deletePackagePoliciesPrompt) => { return ( @@ -220,10 +223,11 @@ export const PackagePoliciesTable: React.FunctionComponent = ({ ); }} - , - ]} - /> - ), + + ); + } + return ; + }, }, ], }, @@ -244,19 +248,21 @@ export const PackagePoliciesTable: React.FunctionComponent = ({ }} {...rest} search={{ - toolsRight: [ - - - , - ], + toolsRight: agentPolicy.is_managed + ? [] + : [ + + + , + ], box: { incremental: true, schema: true, diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/index.tsx index 350d6439c9d3d..3e6ca5944c380 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/index.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/index.tsx @@ -12,6 +12,8 @@ import { FormattedMessage, FormattedDate } from '@kbn/i18n/react'; import { EuiFlexGroup, EuiFlexItem, + EuiIconTip, + EuiTitle, EuiText, EuiSpacer, EuiButtonEmpty, @@ -84,23 +86,42 @@ export const AgentPolicyDetailsPage: React.FunctionComponent = () => { - -

- {isLoading ? ( - - ) : ( - (agentPolicy && agentPolicy.name) || ( - + ) : ( + + + +

+ {(agentPolicy && agentPolicy.name) || ( + + )} +

+ + + {agentPolicy?.is_managed && ( + + - ) + )} -

- + + )} {agentPolicy && agentPolicy.description ? ( diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/index.tsx index adeb56f489ea3..56b99f645f97c 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/index.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/index.tsx @@ -194,17 +194,18 @@ export const AgentDetailsPage: React.FunctionComponent = () => { ), }, { - content: ( - - ), + content: + isAgentPolicyLoading || agentPolicyData?.item?.is_managed ? undefined : ( + + ), }, ].map((item, index) => ( diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/index.tsx index 8e9c549fe5609..d01d290e129b8 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/index.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/index.tsx @@ -341,9 +341,10 @@ export const AgentListPage: React.FunctionComponent<{}> = () => { const isAgentSelectable = (agent: Agent) => { if (!agent.active) return false; + if (!agent.policy_id) return true; - const agentPolicy = agentPolicies.find((p) => p.id === agent.policy_id); - const isManaged = agent.policy_id && agentPolicy?.is_managed === true; + const agentPolicy = agentPoliciesIndexedById[agent.policy_id]; + const isManaged = agentPolicy?.is_managed === true; return !isManaged; };