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);
}