adding a callout when association limit has been reached

Signed-off-by: Amit Galitzky <amgalitz@amazon.com>
amitgalitz · Jul 6, 2023 · c8620ad · c8620ad
1 parent 39894dd
commit c8620ad
Show file tree

Hide file tree

Showing 2 changed files with 473 additions and 380 deletions.
diff --git a/...ponents/FeatureAnywhereContextMenu/AssociatedDetectors/containers/AssociatedDetectors.tsx b/...ponents/FeatureAnywhereContextMenu/AssociatedDetectors/containers/AssociatedDetectors.tsx
@@ -14,6 +14,7 @@ import {
   EuiFlyout,
   EuiFlexItem,
   EuiFlexGroup,
+  EuiCallOut,
 } from '@elastic/eui';
 import { get, isEmpty } from 'lodash';
 import '../styles.scss';
@@ -45,6 +46,7 @@ import {
   getAugmentVisSavedObjs,
 } from '../../../../../../../src/plugins/vis_augmenter/public';
 import { ASSOCIATED_DETECTOR_ACTION } from '../utils/constants';
+import { PLUGIN_AUGMENTATION_MAX_OBJECTS_SETTING } from '../../../../../public/expressions/constants';
 
 interface ConfirmModalState {
   isOpen: boolean;
@@ -74,6 +76,8 @@ function AssociatedDetectors({ embeddable, closeFlyout, setMode }) {
   const [detectorToUnlink, setDetectorToUnlink] = useState(
     {} as DetectorListItem
   );
+  const [associationLimitReached, setAssociationLimitReached] =
+    useState<boolean>(false);
   const [confirmModalState, setConfirmModalState] = useState<ConfirmModalState>(
     {
       isOpen: false,
@@ -91,6 +95,9 @@ function AssociatedDetectors({ embeddable, closeFlyout, setMode }) {
 
   const uiSettings = getUISettings();
   const notifications = getNotifications();
+  let maxAssociatedCount = uiSettings.get(
+    PLUGIN_AUGMENTATION_MAX_OBJECTS_SETTING
+  );
 
   useEffect(() => {
     if (
@@ -142,6 +149,14 @@ function AssociatedDetectors({ embeddable, closeFlyout, setMode }) {
             savedAugmentObjectsArr
           );
           setSelectedDetectors(curSelectedDetectors);
+          maxAssociatedCount = uiSettings.get(
+            PLUGIN_AUGMENTATION_MAX_OBJECTS_SETTING
+          );
+          if (maxAssociatedCount <= curSelectedDetectors.length) {
+            setAssociationLimitReached(true);
+          } else {
+            setAssociationLimitReached(false);
+          }
           setIsLoadingFinalDetectors(false);
         }
       })
@@ -295,6 +310,19 @@ function AssociatedDetectors({ embeddable, closeFlyout, setMode }) {
             </h2>
           </EuiTitle>
         </EuiFlyoutHeader>
+        {associationLimitReached ? (
+          <EuiCallOut
+            title={`Limit reached. No more than ${maxAssociatedCount} objects can be associated with a visualization`}
+            style={{ margin: '16px' }}
+            size="s"
+            color="warning"
+            iconType="alert"
+          >
+            Adding more objects may affect cluster performance and prevent
+            dashboards from rendering properly. Remove associations before
+            adding new ones.
+          </EuiCallOut>
+        ) : null}
         <EuiFlyoutBody style={{ overflowY: 'auto' }}>
           {confirmModalState.isOpen ? (
             <ConfirmUnlinkDetectorModal
@@ -316,6 +344,7 @@ function AssociatedDetectors({ embeddable, closeFlyout, setMode }) {
                 <EuiButton
                   data-test-subj="associateDetectorButton"
                   fill
+                  disabled={associationLimitReached}
                   iconType="link"
                   onClick={() => {
                     setMode('existing');