diff --git a/x-pack/plugins/beats_management/public/components/tag/disabled_tag_badge.tsx b/x-pack/plugins/beats_management/public/components/tag/disabled_tag_badge.tsx new file mode 100644 index 0000000000000..23d1be68e0da8 --- /dev/null +++ b/x-pack/plugins/beats_management/public/components/tag/disabled_tag_badge.tsx @@ -0,0 +1,25 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import { EuiBadge } from '@elastic/eui'; +import React from 'react'; +import { TABLE_CONFIG } from '../../../common/constants'; + +interface TagBadgeProps { + maxIdRenderSize?: number; + id: string; +} + +export const DisabledTagBadge = (props: TagBadgeProps) => { + const { id, maxIdRenderSize } = props; + const idRenderSize = maxIdRenderSize || TABLE_CONFIG.TRUNCATE_TAG_LENGTH; + const idToRender = id.length > idRenderSize ? `${id.substring(0, idRenderSize)}...` : id; + return ( + + {idToRender} + + ); +}; diff --git a/x-pack/plugins/beats_management/public/components/tag/tag_badge.tsx b/x-pack/plugins/beats_management/public/components/tag/tag_badge.tsx index f0cca09b0181c..f81c16f59ee12 100644 --- a/x-pack/plugins/beats_management/public/components/tag/tag_badge.tsx +++ b/x-pack/plugins/beats_management/public/components/tag/tag_badge.tsx @@ -7,13 +7,14 @@ import { EuiBadge } from '@elastic/eui'; import React from 'react'; import { TABLE_CONFIG } from '../../../common/constants'; +import { DisabledTagBadge } from './disabled_tag_badge'; interface TagBadgeProps { iconType?: any; onClick?: () => void; onClickAriaLabel?: string; maxIdRenderSize?: number; - tag: { color?: string; id: string }; + tag: { color?: string; disabled?: boolean; id: string }; } export const TagBadge = (props: TagBadgeProps) => { @@ -21,12 +22,14 @@ export const TagBadge = (props: TagBadgeProps) => { iconType, onClick, onClickAriaLabel, - tag: { color, id }, + tag: { color, disabled, id }, } = props; const maxIdRenderSize = props.maxIdRenderSize || TABLE_CONFIG.TRUNCATE_TAG_LENGTH; const idToRender = id.length > maxIdRenderSize ? `${id.substring(0, maxIdRenderSize)}...` : id; - return ( + return disabled ? ( + + ) : ( { + if (!this.state.tags) { + return []; + } + return this.selectedBeatConfigsRequireUniqueness() + ? this.state.tags.map(this.disableTagForUniquenessEnforcement) + : this.state.tags; + }; + + private configBlocksRequireUniqueness = (configurationBlocks: ConfigurationBlock[]) => + intersection(UNIQUENESS_ENFORCING_TYPES, configurationBlocks.map(block => block.type)) + .length !== 0; + + private disableTagForUniquenessEnforcement = (tag: BeatTag) => + this.configBlocksRequireUniqueness(tag.configuration_blocks) && + // if > 0 beats are associated with the tag, it will result in disassociation, so do not disable it + !this.getSelectedBeats().some(beat => beat.full_tags.some(({ id }) => id === tag.id)) + ? { ...tag, disabled: true } + : tag; + + private selectedBeatConfigsRequireUniqueness = () => + // union beat tags + flatten(this.getSelectedBeats().map(({ full_tags }) => full_tags)) + // map tag list to bool + .map(({ configuration_blocks }) => this.configBlocksRequireUniqueness(configuration_blocks)) + // reduce to result + .reduce((acc, cur) => acc || cur, false); }