github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 17:28:26 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Fleet] Fix agent reassign bulk selection and package icon alignment (#137586)

Browse source
This commit is contained in:
Nicolas Chaulet 2022-07-29 11:16:11 -04:00 • committed by GitHub
parent 57ab388060
commit 4ef97446e9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 34 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

30
x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_reassign_policy_modal/index.tsx
View file

@ -5,7 +5,7 @@
* 2.0.
*/
import React, { useState } from 'react';
import React, { useState, useMemo, useEffect } from 'react';
import { i18n } from '@kbn/i18n';
import {
EuiConfirmModal,
@ -44,14 +44,25 @@ export const AgentReassignAgentPolicyModal: React.FunctionComponent<Props> = ({
perPage: SO_SEARCH_LIMIT,
});
const agentPolicies = agentPoliciesRequest.data
? agentPoliciesRequest.data.items.filter((policy) => policy && !policy.is_managed)
: [];
const agentPolicies = useMemo(
() =>
agentPoliciesRequest.data
? agentPoliciesRequest.data.items.filter((policy) => policy && !policy.is_managed)
: [],
[agentPoliciesRequest.data]
);
const [selectedAgentPolicyId, setSelectedAgentPolicyId] = useState<string | undefined>(
isSingleAgent ? (agents[0] as Agent).policy_id : agentPolicies[0]?.id ?? undefined
isSingleAgent ? (agents[0] as Agent).policy_id : undefined
);
// Select the first policy if not policy is selected
useEffect(() => {
if (!selectedAgentPolicyId && agentPolicies.length) {
setSelectedAgentPolicyId(agentPolicies[0]?.id);
}
}, [selectedAgentPolicyId, agentPolicies]);
const [isSubmitting, setIsSubmitting] = useState(false);
async function onSubmit() {
try {
@ -146,8 +157,13 @@ export const AgentReassignAgentPolicyModal: React.FunctionComponent<Props> = ({
</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer size="l" />
{selectedAgentPolicyId && <AgentPolicyPackageBadges agentPolicyId={selectedAgentPolicyId} />}
<EuiFlexGroup>
<EuiFlexItem>
{selectedAgentPolicyId && (
<AgentPolicyPackageBadges agentPolicyId={selectedAgentPolicyId} />
)}
</EuiFlexItem>
</EuiFlexGroup>
</EuiConfirmModal>
);
};

7
x-pack/plugins/fleet/public/components/agent_policy_package_badge.tsx
View file

@ -33,13 +33,6 @@ export const AgentPolicyPackageBadge: React.FunctionComponent<Props> = ({
packageName={pkgName}
version={pkgVersion || ''}
tryApi={pkgVersion !== undefined}
style={
// when a custom SVG is used the logo is rendered with <img class="euiIcon euiIcon--small">
// this collides with some EuiText (+img) CSS from the EuiIcon component
// which makes the button large, wide, and poorly layed out
// override those styles until the bug is fixed or we find a better approach
{ margin: 'unset', width: '16px' }
}
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>{pkgTitle}</EuiFlexItem>

12
x-pack/plugins/fleet/public/components/package_icon.tsx
View file

@ -6,18 +6,28 @@
*/
import React from 'react';
import styled from 'styled-components';
import type { EuiIconProps } from '@elastic/eui';
import { EuiIcon } from '@elastic/eui';
import type { UsePackageIconType } from '../hooks';
import { usePackageIconType } from '../hooks';
// when a custom SVG is used the logo is rendered with <img class="euiIcon euiIcon--small">
// this collides with some EuiText (+img) CSS from the EuiIcon component
// which makes the button large, wide, and poorly layed out
// override those styles until the bug is fixed or we find a better approach
const Icon = styled(EuiIcon)`
width: '16px';
margin: unset !important;
`;
export const PackageIcon: React.FunctionComponent<
UsePackageIconType & Omit<EuiIconProps, 'type'>
> = ({ packageName, integrationName, version, icons, tryApi, ...euiIconProps }) => {
const iconType = usePackageIconType({ packageName, integrationName, version, icons, tryApi });
// @ts-expect-error loading="lazy" is not supported by EuiIcon
return <EuiIcon size="s" type={iconType} {...euiIconProps} loading="lazy" />;
return <Icon size="s" type={iconType} {...euiIconProps} loading="lazy" />;
};
export const CardIcon: React.FunctionComponent<UsePackageIconType & Omit<EuiIconProps, 'type'>> = (